/* Villa Mamma cennik override v3.6 | Load: 3rd (cennik-style + o-autorze + THIS) */

/* ── SEKCJA 1: :ROOT VARIABLES ── */
:root {
  --vm-bg-primary: #080b14;
  --vm-bg-soft: rgba(15, 23, 42, .8);
  --vm-bg-surface: rgba(15, 23, 42, .85);
  --vm-border: rgba(99, 102, 241, .15);
  --vm-container-max: 1600px;
  --vm-duration-fast: 160ms;
  --vm-duration-normal: 240ms;
  --vm-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --vm-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  --vm-glow-main: radial-gradient(circle at 20% -20%, rgba(59, 130, 246, .35) 0%, rgba(139, 92, 246, .2) 35%, transparent 70%);
  --vm-gradient-main: linear-gradient(90deg, #3b82f6, #8b5cf6 50%, #ec4899);
  --vm-primary-light: #818cf8;
  --vm-primary: #6366f1;
  --vm-radius-lg: 1.75rem;
  --vm-radius-md: 1.25rem;
  --vm-radius-pill: 999px;
  --vm-radius-sm: 0.5rem;
  --vm-secondary-light: #a78bfa;
  --vm-secondary: #8b5cf6;
  --vm-shadow-card-hover: 0 24px 60px rgba(15, 23, 42, .95), inset 0 0 0 1px rgba(248, 250, 252, .18);
  --vm-shadow-card: 0 18px 45px rgba(15, 23, 42, .9), inset 0 0 0 1px rgba(148, 163, 184, .2);
  --vm-space-lg: 2.25rem;
  --vm-space-md: 1.5rem;
  --vm-space-sm: 1rem;
  --vm-space-xl: 3rem;
  --vm-space-xs: 0.25rem;
  --vm-success-light: #34d399;
  --vm-success: #10b981;
  --vm-text-h1: clamp(2.6rem, 4.6vw, 3.7rem);
  --vm-text-h2: clamp(2.1rem, 3.6vw, 2.8rem);
  --vm-text-h3: clamp(1.6rem, 2.4vw, 2.1rem);
  --vm-text-h4: clamp(1.25rem, 1.1rem + 0.75vw, 1.875rem);
  --vm-text-muted: rgba(148, 163, 184, .95);
  --vm-text-primary: #f9fafb;
  --vm-text-secondary: rgba(249, 250, 251, .72);
}

/* ── SEKCJA 2: ANIMATION RESTORE ── */
*,
:after,
:before {
  transition-duration: revert;
  animation-duration: revert;
  animation-iteration-count: revert;
  scroll-behavior: revert;
}

html {
  scroll-behavior: smooth;
}

/* ── SEKCJA 3: BASE TYPOGRAPHY ── */
html {
  font-size: 16px;
}

body {
  color: var(--vm-text-primary);
  font-family: var(--vm-font-sans);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  font-weight: 700;
}

/* ── SEKCJA 4: GRADIENT TEXT (CZWORKA) ── */
html body .gradient-text,
html body .section-title,
html body .vm-gradient-text {
  background: linear-gradient(90deg, #3b82f6, #8b5cf6 50%, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

html body .section-title,
html body h2.section-title {
  font-size: var(--vm-text-h2);
  margin-bottom: var(--vm-space-md);
  text-align: center;
}

html body .package-name {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  font-weight: 700;
  text-align: center;
}

/* FIX: :not(#pakiet-prestige) */
html body .package-card:not(.is-popular):not(#pakiet-prestige) .package-name {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
}

html #pakiet-prestige .package-name {
  background: linear-gradient(135deg, #f59e0b, #fbbf24, #f59e0b);
  -webkit-background-clip: text;
  background-clip: text;
}

html #pakiet-premium .package-name,
html body .package-card.is-popular .package-name {
  background: linear-gradient(135deg, #10b981, #34d399, #10b981);
  -webkit-background-clip: text;
  background-clip: text;
}

html body .vm-see-also__row-title .vm-text {
  background: linear-gradient(90deg, #3b82f6, #8b5cf6 50%, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-size: clamp(1rem, 2vw, 1.2rem);
}

html body .key-insight__title {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 .75rem;
}

html body .key-insight--warning .key-insight__title {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  -webkit-background-clip: text;
  background-clip: text;
}

html body .key-insight--success .key-insight__title {
  background: linear-gradient(135deg, #10b981, #34d399);
  -webkit-background-clip: text;
  background-clip: text;
}

html body .section-title .emoji {
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
  background-clip: initial;
  color: initial;
}

html body .calculator-result-value {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-image: var(--vm-gradient-main);
}

html body .menu-section-title,
html body .menu-section h3 {
  background: linear-gradient(90deg, #3b82f6, #8b5cf6 50%, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  text-align: center;
}

/* FIX: .example-price CZWORKA */
html body #wesele-100 .example-price,
html body #wesele-200 .example-price {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: var(--vm-space-sm);
}

html body #wesele-100 .example-price {
  background-image: linear-gradient(90deg, #3b82f6, #8b5cf6 50%, #ec4899);
}

html body #wesele-200 .example-price {
  background-image: linear-gradient(135deg, #f59e0b, #fbbf24, #f59e0b);
}

/* ── SEKCJA 5+6: BUTTONS (scalony) ── */
html body .hero-buttons .btn-outline,
html body .btn-outline,
html body a.btn-outline,
html body .vm-button,
html body .package-card .package-link,
html body .package-card a.package-link,
html body .package-link,
html body a.package-link {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: radial-gradient(ellipse at 30% 0, rgba(139, 92, 246, .15) 0, transparent 50%), rgba(15, 15, 25, .85);
  border-radius: var(--vm-radius-md, 1.25rem);
  border: 1px solid rgba(139, 92, 246, .35);
  box-shadow: 0 4px 15px rgba(0, 0, 0, .3), inset 0 1px 0 hsla(0, 0%, 100%, .05);
  color: rgba(249, 250, 251, .9);
  overflow: hidden;
  position: relative;
}

/* package-link extra */
html body .package-card .package-link,
html body .package-link,
html body a.package-link {
  display: block;
  font-weight: 600;
  padding: .875rem;
  text-align: center;
  text-decoration: none;
}

/* glass morphism green — btn-primary */
html body .hero-buttons .btn-primary {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: radial-gradient(ellipse at 30% 0, rgba(16, 185, 129, .15) 0, transparent 50%), rgba(15, 15, 25, .85);
  border-radius: var(--vm-radius-md, 1.25rem);
  border: 1px solid rgba(16, 185, 129, .4);
  box-shadow: 0 4px 15px rgba(0, 0, 0, .3), inset 0 1px 0 hsla(0, 0%, 100%, .05);
  color: #fff;
  font-weight: 600;
  overflow: hidden;
  position: relative;
}

/* FIX v3.5: u-mt-lg-center button spacing */
html body .u-mt-lg-center {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ── SEKCJA 7: HERO / LAYOUT ── */
html body .hero,
html body .vm-hero {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: radial-gradient(ellipse at 30% 0, rgba(139, 92, 246, .15) 0, transparent 50%), rgba(15, 15, 25, .85);
  border-bottom: 1px solid rgba(139, 92, 246, .25);
  min-height: 60vh;
  padding: var(--vm-space-xl);
}

/* ── SEKCJA 8: SECTIONS & BACKGROUND ── */
html body section.section:not(.hero):not(.vm-hero) {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: radial-gradient(ellipse at 30% 0, rgba(139, 92, 246, .12) 0, transparent 50%), rgba(15, 15, 25, .85);
  border-radius: var(--vm-radius-lg, 1.75rem);
  border: 1px solid rgba(139, 92, 246, .25);
}

/* FIX: hero-buttons row */
html body .hero-buttons {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
}

/* FIX: vm-koszty-slubne glass */
html body .vm-koszty-slubne {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: radial-gradient(ellipse at 30% 0, rgba(139, 92, 246, .12) 0, transparent 50%), rgba(15, 15, 25, .85);
  border-radius: var(--vm-radius-lg, 1.75rem);
  border: 1px solid rgba(139, 92, 246, .25);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .3), inset 0 1px 0 hsla(0, 0%, 100%, .05);
  margin: 2rem auto;
  max-width: 900px;
  overflow: hidden;
  padding: 1.5rem 2rem;
  position: relative;
  text-align: center;
}

/* FIX: vm-koszty-slubne h2 CZWORKA */
html body .vm-koszty-slubne h2 {
  background: linear-gradient(90deg, #3b82f6, #8b5cf6 50%, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-size: var(--vm-text-h3);
  font-weight: 700;
  margin-bottom: var(--vm-space-sm);
  text-align: center;
}

/* FIX: key-insight:before block */
html body .key-insight:before,
html body .key-insight:hover:before,
html body aside.key-insight:before {
  background: linear-gradient(90deg, transparent, #3b82f6 20%, #8b5cf6 50%, #a855f7 80%, transparent);
  border-radius: var(--vm-radius-lg, 1.75rem) var(--vm-radius-lg, 1.75rem) 0 0;
  content: "";
  display: block;
  height: 3px;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

/* ── SEKCJA 9: PACKAGE CARDS ── */
html body .package-card,
html body article.package-card {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: radial-gradient(ellipse at 30% 0, rgba(139, 92, 246, .12) 0, transparent 50%), rgba(15, 15, 25, .85);
  border-radius: var(--vm-radius-lg, 1.75rem);
  border: 1px solid rgba(139, 92, 246, .25);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .3), inset 0 1px 0 hsla(0, 0%, 100%, .05);
  overflow: hidden;
  position: relative;
}

/* ── SEKCJA 10: KEY-INSIGHT (ESKALOWANY) ── */
/* FIX: dark glass + centering */
html body .container .key-insight,
html body .key-insight {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: radial-gradient(ellipse at 30% 0, rgba(139, 92, 246, .15) 0, transparent 50%), rgba(15, 15, 25, .85);
  border-radius: var(--vm-radius-lg, 1.75rem);
  border: 1px solid rgba(139, 92, 246, .25);
  box-shadow: 0 0 30px rgba(139, 92, 246, .2), 0 4px 20px rgba(0, 0, 0, .3), inset 0 1px 0 hsla(0, 0%, 100%, .05) !important;
  margin: 2rem auto;
  max-width: calc(100% - 2rem);
  overflow: hidden;
  padding: 1.5rem 2rem;
  position: relative;
  text-align: left;
}

html body .key-insight__inner {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: left;
}

html body .key-insight__content {
  text-align: left;
}

/* ── SEKCJA 11: ENTITY-DEFINITION ── */
html body .container .entity-definition,
html body .entity-definition,
html body div.entity-definition {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: radial-gradient(ellipse at 30% 0, rgba(139, 92, 246, .08) 0, transparent 50%), rgba(15, 15, 25, .85);
  border-radius: var(--vm-radius-lg, 1.75rem);
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .3), inset 0 1px 0 hsla(0, 0%, 100%, .05);
  color: var(--vm-text-primary, #f9fafb);
  display: block;
  font-size: .875rem;
  font-weight: 400;
  margin: 1rem auto;
  max-width: calc(100% - 2rem);
  overflow: hidden;
  padding: 1rem;
  position: relative;
}

/* ── SEKCJA 12: VM-ANSWER-CAPSULE ── */
html body .vm-answer-capsule {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: radial-gradient(ellipse at 30% 0, rgba(16, 185, 129, .1) 0, transparent 50%), rgba(15, 15, 25, .85);
  border: 1px solid rgba(16, 185, 129, .25);
  border-left: 4px solid #10b981;
  border-radius: 0 var(--vm-radius-md, 1.25rem) var(--vm-radius-md, 1.25rem) 0;
}

/* ── SEKCJA 13: VM-SEE-ALSO ── */
html body .vm-see-also__label {
  color: var(--vm-text-primary, #f9fafb);
  font-size: .95rem;
  font-weight: 500;
  transition: color .2s ease;
}

html body .vm-see-also__row-title {
  align-items: center;
  display: flex;
  font-size: 1rem;
}

/* ── SEKCJA 14: FOOTER STRUCTURE (v3.6) ── */

/* Footer Grid: Brand + Kontakt (2-col) */
html body .vm-footer-grid {
  border-bottom: 1px solid rgba(148, 163, 184, .15);
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr 1fr;
  margin-bottom: var(--vm-space-lg);
  padding-bottom: var(--vm-space-lg);
}

/* Reset brand border (cennik-style adds own, vm-footer-grid handles it) */
html body .vm-footer-brand {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Social section standalone (was inside vm-footer-contact-grid) */
html body .vm-footer-social {
  border-bottom: 1px solid rgba(148, 163, 184, .15);
  margin-bottom: var(--vm-space-lg);
  padding-bottom: var(--vm-space-lg);
}

/* Contact column */
html body .vm-footer-contact {
  color: rgba(249, 250, 251, .8);
}

html body .vm-footer-contact p {
  font-size: .95rem;
  line-height: 1.7;
  margin: .65rem 0;
}

html body .vm-footer-contact strong {
  color: #94a3b8;
  font-weight: 600;
}

html body .vm-footer-contact a {
  color: #60a5fa;
  text-decoration: none;
}

html body .vm-footer-contact a:hover {
  color: #93c5fd;
  text-decoration: underline;
}

/* Nav Grid: 6 columns */
html body .vm-footer-nav-grid {
  border-bottom: 1px solid rgba(148, 163, 184, .15);
  display: grid;
  gap: 1.5rem 2rem;
  grid-template-columns: repeat(6, 1fr);
  margin-bottom: var(--vm-space-lg);
  padding-bottom: var(--vm-space-lg);
  text-align: left;
}

/* Column headings — gradient CZWORKA */
html body .vm-footer-nav-column h4 {
  background: linear-gradient(90deg, #3b82f6, #8b5cf6 50%, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .02em;
  margin: 0 0 .75rem;
}

/* Column list reset */
html body .vm-footer-nav-column ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Column links */
html body .vm-footer-nav-column a {
  color: #94a3b8;
  display: block;
  font-size: .875rem;
  line-height: 1.6;
  padding: .15rem 0;
  text-decoration: none;
}

html body .vm-footer-nav-column a:hover {
  color: #e0e7ff;
}

/* Partner Honorowy — gold CZWORKA */
html body .vm-footer-nav-column a[href*=partner-honorowy] {
  background: linear-gradient(135deg, #f59e0b, #fbbf24, #f59e0b);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 700;
}

/* ── SEKCJA 15: VM-MANAGER-CARD ── */
html body .vm-manager-card {
  background: #000;
  border-radius: 1rem;
  border: 1px solid rgba(139, 92, 246, .3);
  margin: 0 auto;
  max-width: 900px;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  position: relative;
  text-align: center;
}

/* FIX: manager-card__title CZWORKA */
html body .vm-manager-card__title {
  background: linear-gradient(135deg, #f59e0b, #fbbf24, #f59e0b);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

html body .vm-manager-card__links {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* ── SEKCJA 16: CALCULATOR ── */
html body .calculator-grid {
  display: grid;
  gap: var(--vm-space-sm);
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
}

/* ── SEKCJA 17: TABLES ── */
html body .vm-table {
  border-collapse: collapse;
  color: #e2e8f0;
  font-size: .95rem;
  table-layout: auto;
  width: 100%;
}

html body .vm-data-table,
html body .vm-mini-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

/* ── SEKCJA 17b: TABLE LAYOUT RESTORE — TYLKO DESKTOP (≥641px) ──
   ROOT CAUSE: cennik-style linie 2470,2540,2544,2577 ustawiają
   display:flex/block/none GLOBALNIE (bez @media query).
   FIX: przywracamy table layout tylko na desktop.
   Mobile (≤640px): cennik-style stacked card layout (data-label) → poprawny UX. */
@media (min-width: 641px) {

  /* cennik:2540 thead display:none -> restore headers */
  html body .vm-data-table thead,
  html body .vm-mini-table thead {
    display: table-header-group;
  }

  /* cennik:2544 tr display:block (card) -> restore row */
  html body .vm-data-table tbody tr,
  html body .vm-mini-table tbody tr {
    background: transparent;
    border-radius: 0;
    border: none;
    display: table-row;
    margin: 0;
    padding: 0;
  }

  /* cennik:2470 td display:flex -> table-cell */
  html body .vm-data-table td,
  html body .vm-mini-table td,
  html body .vm-data-table tbody td,
  html body .vm-mini-table tbody td {
    border-bottom: 1px solid rgba(139, 92, 246, .12);
    display: table-cell;
    padding: 1.125rem 1.5rem;
    vertical-align: middle;
  }

  /* cennik:2512 td:first-child card-header -> reset */
  html body .vm-data-table tbody td:first-child,
  html body .vm-mini-table tbody td:first-child {
    border-bottom: 1px solid rgba(139, 92, 246, .12);
    font-size: inherit;
    font-weight: inherit;
    margin-bottom: 0;
    padding-bottom: 1.125rem;
  }

  /* cennik:2561 td:before data-label pseudo -> hide na desktop */
  html body .vm-data-table tbody td:before,
  html body .vm-mini-table tbody td:before {
    display: none;
  }

  /* cennik:2577/2528 tfoot display:block -> restore */
  html body .vm-data-table tfoot,
  html body .vm-mini-table tfoot {
    display: table-footer-group;
  }

  html body .vm-data-table tfoot td,
  html body .vm-mini-table tfoot td {
    display: table-cell;
  }

}

/* ── SEKCJA 17c: STACKED LAYOUT FIX — MOBILE (≤640px) ──────────
   ROOT CAUSE: cennik-style ustawia globalnie:
     tbody td  { display:flex; justify-content:space-between }
     tbody td::before { flex-shrink:0; content:attr(data-label) }
   → label nie może się zmniejszyć, wartość wypchnięta poza prawą krawędź td
   → horizontal overflow całej strony.
   FIX: flex-direction:column → label NA GÓRZE, wartość PONIŻEJ
   → żaden element nie wychodzi poza szerokość td → ZERO overflow poziomego. */
@media (max-width: 640px) {
  html body .vm-data-table tbody td,
  html body .vm-mini-table tbody td {
    align-items: center !important;
    flex-direction: column !important;
    gap: .25rem;
    justify-content: flex-start !important;
    text-align: center !important;
  }

  html body .vm-data-table tbody td:before,
  html body .vm-mini-table tbody td:before {
    margin-right: 0 !important;
    max-width: 100% !important;
    text-align: center !important;
  }

  /* Sekcja scroll container — mobile: overflow-x:auto jako safety net */
  html body section#porownanie,
  html body section#odleglosci {
    overflow-x: auto !important;
  }
}

/* FIX v3.5: cennik:2432/2451 thead th background:#000 -> transparent for gradient */
html body #porownanie .vm-data-table thead th,
html body #odleglosci .vm-mini-table thead th {
  background: #000;
}

/* FIX v3.5: cennik:2436/2455 thead th:first-child bg AFTER clip -> correct CZWORKA */
html body #porownanie .vm-data-table thead th:first-child,
html body #odleglosci .vm-mini-table thead th:first-child {
  background: linear-gradient(135deg, #3b82f6, #6366f1 50%, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* FIX v3.4: cennik:2521 td:first-child bg AFTER clip -> CZWORKA */
html body #porownanie .vm-data-table tbody td:first-child,
html body #odleglosci .vm-mini-table tbody td:first-child {
  background: linear-gradient(135deg, #3b82f6, #6366f1 50%, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 600;
}

/* FIX: glass-wrapper mega-selector counter */
html body .vm-table-glass-wrapper {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: radial-gradient(ellipse at 30% 0, rgba(139, 92, 246, .15) 0, transparent 50%), rgba(15, 15, 25, .85);
  border-radius: 1.5rem;
  border: 1px solid rgba(139, 92, 246, .25);
  box-shadow: 0 0 30px rgba(139, 92, 246, .2), 0 4px 20px rgba(0, 0, 0, .3);
  padding: 1.5rem;
}

/* FIX v3.5: zobacz-rowniez 3-col grid */
html body section#zobacz-rowniez div.container div.vm-see-also__grid,
html body section#zobacz-rowniez .vm-see-also__grid,
html body #zobacz-rowniez .vm-see-also__grid {
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
}

/* FIX v3.5: vm-see-also__card glass morphism — (1,3,6) > cennik:3111 (1,3,4) */
html body section#zobacz-rowniez div.container div.vm-see-also__grid a.vm-see-also__card,
html body section#zobacz-rowniez a.vm-see-also__card,
html body .vm-see-also__card,
html body a.vm-see-also__card {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  align-items: center;
  background: radial-gradient(ellipse at 30% 0, rgba(139, 92, 246, .08) 0, transparent 50%), rgba(15, 15, 25, .85);
  border-radius: var(--vm-radius-md, 1.25rem);
  border: 1px solid rgba(139, 92, 246, .2);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
  color: var(--vm-text-primary, #f9fafb);
  display: flex;
  gap: .75rem;
  margin: 0;
  min-height: auto;
  overflow: hidden;
  padding: .85rem 1.25rem;
  position: relative;
  text-align: left;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* FIX v3.5: vm-see-also__card border-top fade */
html body section#zobacz-rowniez div.container div.vm-see-also__grid a.vm-see-also__card:before,
html body section#zobacz-rowniez a.vm-see-also__card:before,
html body a.vm-see-also__card:before {
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, .6) 20%, rgba(139, 92, 246, .8) 50%, rgba(168, 85, 247, .6) 80%, transparent);
  border-radius: var(--vm-radius-md, 1.25rem) var(--vm-radius-md, 1.25rem) 0 0;
  content: "";
  display: block;
  height: 2px;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

/* FIX v3.5: vm-see-also row-title spacing */
html body section#zobacz-rowniez h3.vm-see-also__row-title,
html body #zobacz-rowniez .vm-see-also__row-title {
  margin-bottom: .75rem;
  margin-top: 1.5rem;
  padding-top: .5rem;
}

/* FIX: author__card */
html body .vm-author__card {
  border: none;
}

html body .vm-author__card::before {
  background: linear-gradient(180deg, rgba(96, 165, 250, .9), rgba(139, 92, 246, .5) 30%, transparent 70%);
}

/* ── SEKCJA 18: LIST DEFAULTS ── */
html body .entity-definition ol,
html body .entity-definition ul,
html body .vm-faq-item ol,
html body .vm-faq-item ul {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

/* FIX: vm-info-box glass */
html body .vm-info-box,
html body div.vm-info-box {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: radial-gradient(ellipse at 30% 0, rgba(139, 92, 246, .15) 0, transparent 50%), rgba(15, 15, 25, .85);
  border: 1px solid rgba(139, 92, 246, .25);
  margin: 2rem auto;
  max-width: 800px;
  padding: 1.5rem 2rem;
}

/* FIX: benefit-title green */
html body .benefit-title {
  color: #10b981;
}

/* FIX: footer-maps-links row */
html body .vm-footer-maps-links {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  justify-content: center !important;
}

/* FIX: footer-maps h3 gradient */
html body .vm-footer-maps h3 {
  background: linear-gradient(90deg, #3b82f6, #8b5cf6 50%, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* FIX: footer-map-link size */
html body footer.vm-footer .vm-footer-maps .vm-footer-map-link,
html body .vm-footer-maps .vm-footer-map-link,
html body .vm-footer-map-link {
  max-width: none !important;
  padding: .75rem 1.5rem !important;
}

/* ── SEKCJA 19: MOBILE — max-width: 640px ── */
@media (max-width: 640px) {
  /* gradient text mobile */
  html body .gradient-text,
  html body .section-title,
  html body .vm-gradient-text {
    background: linear-gradient(90deg, #3b82f6, #8b5cf6 50%, #ec4899);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  html body .package-name {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  html #pakiet-prestige .package-name {
    background: linear-gradient(135deg, #f59e0b, #fbbf24, #f59e0b);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  html #pakiet-premium .package-name,
  html body .package-card.is-popular .package-name {
    background: linear-gradient(135deg, #10b981, #34d399, #10b981);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  html body .hero-buttons {
    align-items: center;
    flex-direction: column;
    gap: .75rem;
  }

  /* hero mobile */
  html body .hero,
  html body .vm-hero {
    min-height: auto;
    padding: var(--vm-space-md);
  }

  /* sections mobile */
  html body section.section:not(.hero):not(.vm-hero) {
    border-radius: 1rem;
    margin-left: .5rem;
    margin-right: .5rem;
  }

  /* package cards mobile */
  html body .package-card {
    border-radius: 1rem;
  }

  /* see also mobile */
  html body .vm-see-also__card {
    padding: .75rem 1rem;
  }

  /* calculator mobile */
  html body .calculator-grid {
    grid-template-columns: 1fr;
  }

  /* entity definition mobile */
  html body .entity-definition,
  html body .container .entity-definition {
    border-radius: 1rem;
    max-width: calc(100% - 2rem);
  }

  /* key insight mobile */
  html body .key-insight,
  html body .container .key-insight {
    border-radius: 1rem;
    margin: 1.5rem auto;
    max-width: calc(100% - 1rem);
  }

  /* footer nav-grid mobile: 2 columns */
  html body .vm-footer-nav-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  /* footer-grid mobile: single column */
  html body .vm-footer-grid {
    grid-template-columns: 1fr;
  }

  /* zobacz-rowniez mobile: 1 column */
  html body section#zobacz-rowniez div.container div.vm-see-also__grid,
  html body #zobacz-rowniez .vm-see-also__grid {
    grid-template-columns: 1fr;
  }

  /* u-mt-lg-center mobile */
  html body .u-mt-lg-center {
    gap: .75rem;
  }

}

/* ── SEKCJA 21: DROPDOWN DESKTOP RESTORE (≥901px) ──────────── */
/* ROOT CAUSE: cennik-style sets .dropdown-menu { max-height:0; overflow:hidden;
   position:static } globally. Also .nav-item.has-dropdown .dropdown-menu
   { position:static; transform:none } without media query.
   Fix: restore absolute position + opacity/visibility + FORCE max-height on open/hover. */

/* GLOBAL: ensure .is-open and hover always reveal content (all viewports) */
html body .dropdown-menu.is-open,
html body .has-dropdown.is-open > .dropdown-menu {
  max-height: 800px !important;
  overflow: visible !important;
}

@media (min-width: 901px) {
  /* Hidden state */
  html body .nav-item.has-dropdown .dropdown-menu {
    left: 50%;
    margin: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    top: 100%;
    transform: translateX(-50%) translateY(8px);
    transition: opacity .25s ease, transform .25s ease, max-height .25s ease;
    visibility: hidden;
  }

  /* Visible state — hover + focus + .is-open */
  html body .nav-item.is-open .dropdown-menu,
  html body .has-dropdown:hover .dropdown-menu,
  html body .has-dropdown:focus-within .dropdown-menu {
    max-height: 800px !important;
    opacity: 1;
    overflow: visible !important;
    transform: translateX(-50%) translateY(0);
    visibility: visible;
  }

  /* nav-cta desktop: reduce padding from global 1rem */
  html body .nav-cta,
  html body .nav-item--cta .nav-cta {
    font-size: .875rem !important;
    padding: .5rem 1.25rem !important;
  }
}

/* FIX: reset nav dla 641px–900px (brakujacy breakpoint) */
@media (min-width: 641px) and (max-width: 900px) {
  .main-nav {
    background: transparent;
    bottom: auto; left: auto; right: auto; top: auto;
    flex-direction: row;
    height: auto;
    opacity: 1;
    overflow-y: visible;
    padding: 0;
    position: static;
    transform: none;
    transition: none;
    visibility: visible;
  }
  .nav-list {
    align-items: center;
    flex-direction: row;
    width: auto;
  }
  .nav-item { border-bottom: none; width: auto; }
}

/* ── SEKCJA 23: FORMULARZ — KOMPAKT ───────────────────────── */
/* ROOT CAUSE: cennik-style ~linia 3090:
   .contact-form .form-field { margin-bottom: 5rem }  ← absurdalne
   label { margin-bottom: 1.5rem }
   input { margin-bottom: 2rem; margin-top: .5rem; min-height: 56px }
   Fix: skompresowanie do wartości normalnych jak na /kontakt. */

html body section#sprawdz-termin .contact-form .form-field,
html body .form-section .contact-form .form-field,
html body div.container form.contact-form div.form-field {
  margin-bottom: 1.1rem !important;
}

html body section#sprawdz-termin .contact-form .form-field label,
html body .form-section .contact-form .form-field label,
html body div.container form.contact-form div.form-field label {
  margin-bottom: .4rem !important;
}

html body section#sprawdz-termin .contact-form .form-field input,
html body section#sprawdz-termin .contact-form .form-field select,
html body section#sprawdz-termin .contact-form .form-field textarea,
html body .form-section .contact-form .form-field input,
html body .form-section .contact-form .form-field select,
html body .form-section .contact-form .form-field textarea,
html body div.container form.contact-form div.form-field input,
html body div.container form.contact-form div.form-field select {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  min-height: 44px !important;
}

/* Checkbox consent — KRYTYCZNE: odwrócenie width:100% + min-height na input[checkbox]
   ROOT CAUSE: cennik-style .form-field input { width:100% } + min-height dotyczy WSZYSTKICH
   inputów, włącznie z checkboxem → checkbox zajmuje 100% szerokości → <span> wpada poza krawędź */
html body section#sprawdz-termin .contact-form .form-field input[type="checkbox"],
html body .form-section .contact-form .form-field input[type="checkbox"],
html body div.container form.contact-form div.form-field input[type="checkbox"],
html body input.consent-checkbox,
html body .consent-checkbox {
  accent-color: #8b5cf6;
  flex-shrink: 0;
  height: 18px !important;
  margin-bottom: 0 !important;
  margin-top: 3px !important;
  min-height: unset !important;
  width: 18px !important;
}

html body .consent-label,
html body section#sprawdz-termin .consent-label,
html body .form-section .consent-label {
  align-items: flex-start;
  cursor: pointer;
  display: flex !important;
  flex-wrap: nowrap;
  gap: .6rem;
  line-height: 1.5;
}

/* Span wewnątrz consent-label — min-width:0 gwarantuje zawijanie tekstu w flex */
html body .consent-label > span,
html body section#sprawdz-termin .consent-label > span {
  flex: 1;
  min-width: 0;
}

/* ── SEKCJA 22: TABLE OVERFLOW GUARD — WSZYSTKIE VIEWPORTY ─────
   Mobile: flex-direction:column (Sekcja 17c) eliminuje overflow + safety net tu.
   Desktop: table layout → sekcja jako scroll container.
   Wrapper: overflow-x:auto na wszystkich rozmiarach. */

/* Sekcja scroll container — wszystkie viewporty */
html body section#porownanie,
html body section#odleglosci {
  overflow-x: auto !important;
}

/* Container: przepuszcza overflow */
html body section#porownanie > .container,
html body section#odleglosci > .container {
  overflow: visible;
}

/* Wrapper: scroll container jako backup */
html body .vm-table-glass-wrapper,
html body .vm-table-wrapper {
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
  max-width: 100%;
}

/* ── SEKCJA 23: GLASS WRAPPER + VM-TABLE BEZ RAMKI ─────────────────────────
   Precyzyjne selektory z ID sekcji → lepsze cytowanie przez AI crawlers.
   Na tej stronie vm-table wystepuje TYLKO w #porownanie i #odleglosci.
   Usuwamy: border, glow. Zostawiamy: backdrop-filter, background, border-radius. */

/* Wrapper: brak ramki i glow — sam glass morphism */
html body section#porownanie .vm-table-glass-wrapper,
html body section#odleglosci .vm-table-glass-wrapper {
  border: none !important;
  box-shadow: none !important;
}

/* ROOT CAUSE 1: .vm-table::before rysuje gradient border
   via mask-composite:exclude + linear-gradient(90deg, #3b82f6 → #ec4899). */
html body section#porownanie .vm-table::before,
html body section#odleglosci .vm-table::before {
  content: none !important;
}

/* ROOT CAUSE 2: o-autorze-style.css @media (max-width:640px) .vm-table
   dodaje border:1px solid rgba(139,92,246,.25) + box-shadow z glow na mobile. */
@media (max-width: 640px) {
  html body section#porownanie .vm-table,
  html body section#odleglosci .vm-table {
    border: none !important;
    box-shadow: none !important;
  }
}

/* ── SEKCJA 24: MOBILE TABLE — GLASS NA TABLE, BEZ ROW-CARDS + BRAK TFOOT ───
   WZORZEC: extras-table (DevTools potwierdzone):
     table { backdrop-filter:blur(8px); background:radial-gradient(ellipse at 30% 0,
             rgba(139,92,246,.1) 0,transparent 50%),rgba(15,15,25,.6);
             border:1px solid rgba(139,92,246,.2); border-radius:1rem;
             overflow:hidden; } — BRAK box-shadow z glow, BRAK row-cards.
   FIX: glass morphism wraca na .vm-table; wrapper → transparent/0-padding;
   tbody tr → transparent (bez kart); tfoot → ukryty (pusta sekcja z glow).
   Dotyczy OBIE tabele: #porownanie i #odleglosci. */
@media (max-width: 640px) {

  /* Wrapper: transparent, zero padding → brak empty space wokół tabeli */
  html body section#porownanie .vm-table-glass-wrapper,
  html body section#odleglosci .vm-table-glass-wrapper {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
  }

  /* Table: glass morphism 1:1 jak extras-table — jednolity kontener */
  html body section#porownanie .vm-table,
  html body section#odleglosci .vm-table {
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
    background: radial-gradient(ellipse at 30% 0, rgba(139, 92, 246, .1) 0, transparent 50%), rgba(15, 15, 25, .6) !important;
    border: 1px solid rgba(139, 92, 246, .2) !important;
    border-radius: 1rem !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  /* Caption: wbudowana w table (bez osobnego glass boxa) */
  html body section#porownanie .vm-table caption,
  html body section#odleglosci .vm-table caption {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* tbody tr: transparent — leżą na tle table, bez kart */
  html body section#porownanie .vm-table tbody tr,
  html body section#odleglosci .vm-table tbody tr {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(139, 92, 246, .1) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
  }

  html body section#porownanie .vm-table tbody tr:last-child,
  html body section#odleglosci .vm-table tbody tr:last-child {
    border-bottom: none !important;
  }

  /* tfoot: ukryj — "pusta sekcja z glow" pod tabelą */
  html body section#odleglosci .vm-table tfoot,
  html body section#porownanie .vm-table tfoot {
    display: none !important;
  }

}

/* ── SEKCJA 25: NO HOVER — wydajność 100/100 ── */
/* Usuwa hover + transition z tabel porownanie, odleglosci, opcje-dodatkowe */

/* 25a — brak hover na wierszach / komórkach (PC + mobile) */
html body section#porownanie .vm-data-table tbody tr:hover td,
html body section#odleglosci .vm-mini-table tbody tr:hover td {
  background: transparent !important;
}

html body section#opcje-dodatkowe .extras-table tr:hover {
  background: transparent !important;
}

/* 25b — brak transition na komórkach */
html body section#porownanie .vm-data-table tbody td,
html body section#odleglosci .vm-mini-table tbody td {
  transition: none !important;
}

/* ── SEKCJA 20: TABLET — 641px–1023px ── */
@media (min-width: 641px) and (max-width: 1023px) {
  html body .calculator-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* footer nav-grid tablet: 3 columns */
  html body .vm-footer-nav-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* zobacz-rowniez tablet: 2 columns */
  html body section#zobacz-rowniez div.container div.vm-see-also__grid,
  html body #zobacz-rowniez .vm-see-also__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── SEKCJA 26: SEMANTIC HTML SAFETY NET (selektor-citation) ── */
html body .hero__subtitle data,
html body .hero__subtitle a,
html body .vm-summary data,
html body .vm-answer-capsule data,
html body .vm-answer-capsule time,
html body .vm-answer-capsule abbr,
html body .example-card data,
html body .key-insight__text data,
html body .key-insight__text time,
html body .key-insight__text abbr,
html body .vm-faq-item summary abbr,
html body .vm-faq-answer data,
html body .vm-faq-answer time,
html body .vm-faq-answer abbr,
html body .vm-faq-answer dfn,
html body .vm-author__meta time,
html body .vm-author__meta abbr,
html body .vm-author__meta cite,
html body .u-intro-narrow data,
html body .u-intro-narrow a,
html body .u-note data,
html body .u-note a,
html body .u-note-sm data,
html body .extras-table data,
html body .extras-table a,
html body .extras-table time,
html body .extras-table abbr,
html body #porownanie .vm-data-table data,
html body #porownanie .vm-data-table a,
html body #odleglosci .vm-mini-table data,
html body .vm-footer-award abbr {
  background: none;
  color: inherit;
  font: inherit;
  font-style: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-decoration: none;
  text-transform: none;
}

html body .vm-hero-intro a,
html body .u-intro-narrow a,
html body .u-note a,
html body .extras-table a,
html body #porownanie .vm-data-table a,
html body .vm-answer-capsule__meta a,
html body .vm-author__meta a {
  color: #60a5fa;
  text-decoration: underline;
  text-decoration-color: rgba(96, 165, 250, .55);
  text-underline-offset: .16em;
}

html body .vm-hero-intro a:hover,
html body .u-intro-narrow a:hover,
html body .u-note a:hover,
html body .extras-table a:hover,
html body #porownanie .vm-data-table a:hover,
html body .vm-answer-capsule__meta a:hover,
html body .vm-author__meta a:hover {
  color: #93c5fd;
  text-decoration-color: rgba(147, 197, 253, .8);
}

html body .vm-answer-capsule__meta {
  line-height: 1.75;
  margin: .9rem auto 0;
  max-width: 1200px;
  text-align: center;
}

html body .vm-answer-capsule__meta a {
  color: #60a5fa;
  text-decoration-color: rgba(96, 165, 250, .55);
}

html body .vm-answer-capsule__meta a:hover {
  color: #93c5fd;
  text-decoration-color: rgba(147, 197, 253, .8);
}

html body .hero__subtitle a,
html body .vm-faq-answer a,
html body .vm-author__link {
  color: #60a5fa;
  text-decoration: underline;
  text-decoration-color: rgba(96, 165, 250, .55);
  text-underline-offset: .16em;
}

html body .hero__subtitle a:hover,
html body .vm-faq-answer a:hover,
html body .vm-author__link:hover {
  color: #93c5fd;
  text-decoration-color: rgba(147, 197, 253, .8);
}

html body .vm-answer-capsule__meta time {
  white-space: nowrap;
}

html body .vm-author__meta {
  color: rgba(148, 163, 184, .92);
  font-size: .84rem;
  line-height: 1.75;
  margin: 0 0 .65rem;
}

html body .vm-author__meta a {
  color: #60a5fa;
  text-decoration-color: rgba(96, 165, 250, .55);
}

html body .vm-author__meta a:hover {
  color: #93c5fd;
  text-decoration-color: rgba(147, 197, 253, .8);
}

html body .extras-table caption {
  color: #a5b4fc;
  font-size: clamp(.95rem, 1.8vw, 1.05rem);
  font-weight: 600;
  margin-bottom: .35rem;
  padding: 0 1rem .85rem;
  text-align: center;
}

html body .extras-table tbody th {
  background: transparent;
  color: #f1f5f9;
  font-size: inherit;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
}

html body #porownanie .vm-data-table tbody th,
html body #odleglosci .vm-mini-table tbody th {
  align-items: center;
  border-bottom: 1px solid rgba(139, 92, 246, .12);
  display: flex;
  justify-content: space-between;
  padding: 1.125rem 1.5rem;
  transition: none;
  vertical-align: middle;
}

html body #porownanie .vm-data-table tbody th:before,
html body #odleglosci .vm-mini-table tbody th:before {
  color: #a5b4fc;
  content: attr(data-label);
  flex-shrink: 0;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .03em;
  margin-right: 1rem;
  text-transform: uppercase;
}

html body #porownanie .vm-data-table tbody th[data-label="Cecha"],
html body #porownanie .vm-data-table tbody th[data-label="Cecha"] strong,
html body #odleglosci .vm-mini-table tbody th[data-label="Lokalizacja"],
html body #odleglosci .vm-mini-table tbody th[data-label="Lokalizacja"] strong {
  background: linear-gradient(135deg, #3b82f6, #6366f1 50%, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 600;
}

html body #porownanie .vm-data-table tbody tr.vm-table-total th,
html body #porownanie .vm-data-table tbody tr.vm-table-total th strong {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: #22c55e;
  color: #22c55e;
  font-size: 1.0625rem;
  font-weight: 700;
}

html body #porownanie .vm-data-table tbody tr.vm-table-total th {
  background-color: rgba(34, 197, 94, .08);
  border-bottom: none;
  border-radius: 0 0 0 1rem;
  border-top: 2px solid rgba(34, 197, 94, .3);
}

@media (min-width: 641px) {
  html body #porownanie .vm-data-table tbody th,
  html body #odleglosci .vm-mini-table tbody th {
    display: table-cell;
  }

  html body #porownanie .vm-data-table tbody th:before,
  html body #odleglosci .vm-mini-table tbody th:before {
    display: none;
  }
}

@media (max-width: 640px) {
  html body #porownanie .vm-data-table tbody th,
  html body #odleglosci .vm-mini-table tbody th {
    align-items: center !important;
    flex-direction: column !important;
    gap: .25rem;
    justify-content: flex-start !important;
    text-align: center !important;
  }

  html body #porownanie .vm-data-table tbody th:before,
  html body #odleglosci .vm-mini-table tbody th:before {
    margin-right: 0 !important;
    max-width: 100% !important;
    text-align: center !important;
  }
}