:root {
  /* Kolory */
  --white: #FFFFFF;
  --primary: #1F2257;
  --primary-dark: #2D3F7D;
  --primary-medium: #4A5BB0;
  --primary-light: #E8E9F5;
  --accent: #FF795B;
  --accent-dark: #E8603F;
  --accent-light: #FFEAE4;
  --raspberry: #C8646A;
  --plum: #79527A;
  --lilac: #F1EDF8;
  --text: #4A4D6B;
  --muted: #7C7F99;
  --surface: #F6F7FB;
  --medium: #E3E4EE;
  --medium-dark: #C9CBDC;
  --success: #1E9E6A;
  --success-light: #E3F6EE;
  --warning: #E39B2A;
  --error: #D9434A;
  --error-light: #FCE8E9;

  /* Gradient znaku */
  --gradient: linear-gradient(135deg, var(--accent) 0%, var(--plum) 100%);
  --gradient-dark: linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 65%, var(--plum) 100%);
  --gradient-warm: linear-gradient(120deg, var(--accent) 0%, var(--raspberry) 55%, var(--plum) 100%);
  --gradient-soft: linear-gradient(90deg, var(--surface) 0%, color-mix(in srgb, var(--accent-light) 40%, var(--white)) 100%);

  /* Cienie */
  --shadow-s: 0 8px 24px color-mix(in srgb, var(--primary) 6%, transparent);
  --shadow-m: 0 16px 40px color-mix(in srgb, var(--primary) 8%, transparent);
  --shadow-l: 0 20px 48px color-mix(in srgb, var(--primary) 12%, transparent);

  /* Zaokrąglenia */
  --radius-s: 12px;
  --radius-m: 18px;
  --radius-l: 24px;
  --radius-xl: 40px;

  /* Odstępy */
  --gap-s: 20px;
  --gap-m: 30px;
  --gap-l: 40px;
  --gap-xl: 70px;
  --section-space: 112px;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--primary) var(--medium);
}

*::-webkit-scrollbar {
  width: 10px;
  border-radius: 10px;
}

*::-webkit-scrollbar-track {
  background: var(--medium);
  border-radius: 10px;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--primary);
  border-radius: 10px;
}

html {
  scroll-behavior: smooth;
}

html, body {
  padding: 0;
  margin: 0;
  overflow-x: hidden;
}

body {
  background: var(--white);
  color: var(--text);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  line-height: 1.625;
  font-weight: 400;
  font-optical-sizing: auto;
  font-style: normal;
  overflow-x: hidden;
}

.container {
  position: relative;
  z-index: 2;
}

::-moz-selection {
  background-color: var(--accent);
  color: var(--white);
}

::selection {
  background-color: var(--accent);
  color: var(--white);
}

/* PARAGRAPH */

a {
  color: inherit;
  transition: color .25s ease, background-color .25s ease, box-shadow .25s ease;
  display: inline-block;
  text-decoration: underline;
}

a:hover,
a:active,
a:focus {
  color: inherit;
  outline: none;
  text-decoration: none;
}

p {
  margin: 0 0 1em;
}

p:last-child {
  margin-bottom: 0;
}

.no-underline { text-decoration: none; }
.text-underline { text-decoration: underline; }

button {
  background-color: transparent;
  border: none;
  outline: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
  transition: color .25s ease, background-color .25s ease, box-shadow .25s ease;
}

button:focus {
  outline: none;
}

/* Obramowanie fokusu tylko przy nawigacji klawiaturą */
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--primary-medium);
  outline-offset: 2px;
}

.faq-list .faq-question:focus-visible {
  outline-offset: -2px;
  border-radius: 20px;
}

input, select, textarea {
  font-family: inherit;
  color: var(--primary);
}

::placeholder { color: var(--muted); font-weight: 400; opacity: 1; }
:-ms-input-placeholder { color: var(--muted); font-weight: 400; }
::-ms-input-placeholder { color: var(--muted); font-weight: 400; }

.align-left { text-align: left; }
.align-center { text-align: center; }
.align-right { text-align: right; }

img.alignright, a img.alignright { float: right; margin: 0 0 1em 1em; }
img.alignleft, a img.alignleft { float: left; margin: 0 1em 1em 0; }
img.aligncenter, a img.aligncenter { display: block; margin-left: auto; margin-right: auto; }

img {
  max-width: 100%;
  height: auto;
}

.text-normal { font-size: 1em; }
.text-smaller { font-size: 0.875em; line-height: 1.57; }
.text-smallest { font-size: 0.75em; line-height: 1.5; }
.text-bigger { font-size: 1.125em; line-height: 1.67; }
.text-biggest { font-size: 1.25em; line-height: 1.6; }

.text-muted { color: var(--muted); }

header ul, footer ul { list-style: none; }

strong, b { font-weight: 700; }

.invert { color: var(--white); }
.invert .section-title h1,
.invert .section-title h2,
.invert .section-title h3,
.invert .section-title p { color: var(--white); }

/* HEADINGS */

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  color: var(--primary);
  margin-top: 0;
  margin-bottom: 10px;
}

h1, .h1 { font-size: 3.75em; line-height: 1.13; font-weight: 700; letter-spacing: -0.02em; }
h2, .h2 { font-size: 2.75em; line-height: 1.18; font-weight: 700; letter-spacing: -0.015em; }
h3, .h3 { font-size: 1.75em; line-height: 1.29; font-weight: 600; letter-spacing: -0.01em; }
h4, .h4 { font-size: 1.375em; line-height: 1.36; font-weight: 600; letter-spacing: -0.005em; }
h5, .h5 { font-size: 1em; line-height: 1.5; font-weight: 600; }
h6, .h6 { font-size: 0.875em; line-height: 1.43; font-weight: 600; }

.overline {
  display: block;
  font-size: 0.8125em;
  line-height: 1.23;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-dark);
}

/* SPACES */

/* Odstępy sekcji dodajemy ręcznie / na wierszu BB
section {
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
} */

.space-top { padding-top: var(--section-space); }
.space-bottom { padding-bottom: var(--section-space); }
.space-top-s { padding-top: 56px; }
.space-bottom-s { padding-bottom: 56px; }

.bg-surface { background-color: var(--surface); }
.bg-white { background-color: var(--white); }

/* OTHER */

.break-after:after { content: '\A'; white-space: pre; }

.no-border { border: none; }

.block-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.vertical-middle {
  top: 50%;
  transform: translateY(-50%);
  position: relative;
}

.overflow-hidden { overflow: hidden; }

.only-mobile { display: none !important; }

/* Tekst tylko dla czytników ekranu */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

.navbar-toggler { display: none; }

/* Ikony – pliki SVG wstawiane jako <img>, kolor zapisany w pliku (warianty -biala, -koralowa…) */
.icon {
  display: inline-block;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.icon-s { width: 16px; height: 16px; }
.icon-m { width: 20px; height: 20px; }
.icon-l { width: 28px; height: 28px; }

/* Kafelek z ikoną (tła tonalne) */
.icon-tile {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-color: var(--primary-light);
  color: var(--primary);
}

.icon-tile.tile-s { width: 40px; height: 40px; border-radius: 12px; }
.icon-tile.tile-m { width: 48px; height: 48px; border-radius: 14px; }
.icon-tile.tone-coral { background-color: var(--accent-light); color: var(--accent-dark); }
.icon-tile.tone-lilac { background-color: var(--lilac); color: var(--plum); }
.icon-tile.tone-navy { background-color: var(--primary-light); color: var(--primary); }
.icon-tile.tone-surface { background-color: var(--surface); color: var(--primary); }
.icon-tile.tone-white { background-color: var(--white); color: var(--plum); }
.icon-tile.tone-dark { background-color: color-mix(in srgb, var(--white) 10%, transparent); color: var(--accent); }

/* HEADER */

header {
  position: fixed;
  background-color: var(--white);
  width: 100%;
  top: 0;
  left: 0;
  z-index: 99;
}

header .top-bar {
  background-color: var(--primary);
  color: var(--white);
  font-size: 0.75em;
  font-weight: 500;
  padding: 10px 0;
}

header .top-bar ul {
  display: flex;
  justify-content: center;
  gap: var(--gap-l);
  padding: 0;
  margin: 0;
}

header .top-bar li {
  display: flex;
  align-items: center;
  gap: 8px;
}

header .logo-bar {
  position: relative;
  border-bottom: 1px solid var(--medium);
}

/* Kontener statyczny – mega menu pozycjonuje się względem całego paska */
header .logo-bar > .container {
  position: static;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-m);
  min-height: 88px;
}

header .logo img {
  height: 36px;
  width: auto;
  display: block;
}

header .main-nav {
  display: flex;
  align-items: center;
  align-self: stretch;
}

header .main-nav .mobile-nav-head,
header .main-nav .mobile-nav-foot,
header .nav-overlay {
  display: none;
}

header .main-nav .menu {
  display: flex;
  align-items: stretch;
  gap: 36px;
  list-style: none;
  padding: 0;
  margin: 0;
}

header .main-nav .menu > li {
  display: flex;
  align-items: center;
}

header .main-nav .menu > li > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  font-size: 0.875em;
  font-weight: 600;
  color: var(--primary);
  padding: 8px 0;
}

/* Strzałka przy pozycjach z podmenu */
header .main-nav .menu > .menu-item-has-children > a:after {
  content: "";
  width: 16px;
  height: 16px;
  background: url(../img/icon_rozwin.svg) center / contain no-repeat;
  transition: transform .25s ease;
}

header .main-nav .menu > li.current-menu-item > a,
header .main-nav .menu > li.open > a {
  color: var(--accent-dark);
}

header .main-nav .menu > .menu-item-has-children.open > a:after {
  background-image: url(../img/icon_rozwin-ciemnokoralowa.svg);
  transform: rotate(180deg);
}

header .header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

#top-spacer {
  content: "";
  position: relative;
  height: 0;
  display: block;
}

/* MEGA MENU */

.mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: var(--white);
  box-shadow: var(--shadow-l);
  border-top: 1px solid var(--medium);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}

/* Mostek nad menu – kursor nie gubi rozwinięcia przy zjeździe z linku */
.mega-menu:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 12px;
}

.menu-item-has-children.open > .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .25s ease, transform .25s ease, visibility 0s;
}

.mega-menu .mega-content {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-l);
  padding: 40px 0 48px;
}

.mega-menu .mega-columns {
  display: flex;
  gap: 24px;
  flex: 1;
  min-width: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}

.mega-menu .mega-columns > li {
  flex: 1;
  min-width: 0;
}

.mega-menu .mega-title {
  display: block;
  font-size: 0.8125em;
  line-height: 1.23;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 16px;
}

.mega-menu .mega-columns .sub-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.mega-menu .mega-columns .sub-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: var(--radius-s);
  text-decoration: none;
}

.mega-menu .mega-columns .sub-menu a:hover {
  background-color: var(--surface);
}

.mega-menu .mega-columns .sub-menu a:hover .icon-tile {
  background-color: var(--white);
}

.mega-menu .mega-columns .name {
  display: block;
  font-size: 0.875em;
  font-weight: 600;
  color: var(--primary);
  line-height: 1.43;
}

.mega-menu .mega-columns .price {
  display: block;
  font-size: 0.75em;
  font-weight: 800;
  color: var(--accent-dark);
}

.mega-menu .mega-help {
  width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  background-color: var(--primary);
  border-radius: var(--radius-l);
  padding: 28px;
  color: color-mix(in srgb, var(--white) 72%, transparent);
}

.mega-menu .mega-help .title {
  font-size: 1.125em;
  line-height: 1.45;
  font-weight: 600;
  color: var(--white);
}

.mega-menu .mega-help p {
  font-size: 0.875em;
  margin: 0;
}

.mega-menu .mega-help .accent-button {
  margin-top: 4px;
}

.mega-menu .mega-footer {
  border-top: 1px solid var(--medium);
}

.mega-menu .mega-footer .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap-s);
  padding-top: 16px;
  padding-bottom: 16px;
  font-size: 0.875em;
  color: var(--muted);
}

.mega-menu .mega-footer a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--accent-dark);
  text-decoration: none;
}

/* Aplikacja wyłączona w ustawieniach – ukrycie promocji */
body.app-off .app-promo { display: none !important; }

/* SECTION TITLE */

.section-title {
  margin-bottom: 48px;
}

.section-title .overline {
  margin-bottom: 14px;
}

.section-title h1,
.section-title h2,
.section-title h3 {
  margin-bottom: 0;
}

.section-title p {
  font-size: 1.125em;
  line-height: 1.67;
  margin-top: 14px;
  max-width: 640px;
}

.section-title.align-center {
  text-align: center;
}

.section-title.align-center h1,
.section-title.align-center h2,
.section-title.align-center h3,
.section-title.align-center p {
  margin-left: auto;
  margin-right: auto;
}

/* Nagłówek z przyciskiem po prawej */
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--gap-m);
  margin-bottom: 48px;
}

.section-head .section-title {
  margin-bottom: 0;
}

/* BUTTONS */

.primary-button,
.secondary-button,
.accent-button,
.ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  font-size: 1em;
  font-weight: 600;
  line-height: 1.5;
  border-radius: 999px;
  min-height: 56px;
  padding: 0 28px;
  white-space: nowrap;
  transition: color .25s ease, background-color .25s ease, box-shadow .25s ease;
}

.primary-button .icon,
.secondary-button .icon,
.accent-button .icon,
.ghost-button .icon {
  width: 20px;
  height: 20px;
  transition: transform .2s ease-in-out;
}

.primary-button:hover .icon,
.secondary-button:hover .icon,
.accent-button:hover .icon,
.ghost-button:hover .icon {
  transform: translateX(3px);
}

.primary-button {
  background-color: var(--primary);
  color: var(--white);
}

.primary-button:hover,
.primary-button:focus-visible {
  background-color: var(--primary-dark);
  color: var(--white);
}

.accent-button {
  background-color: var(--accent);
  color: var(--primary);
}

.accent-button:hover,
.accent-button:focus-visible {
  background-color: var(--accent-dark);
  color: var(--primary);
}

.secondary-button {
  background-color: var(--white);
  color: var(--primary);
  box-shadow: inset 0 0 0 1.5px var(--medium-dark);
}

.secondary-button:hover,
.secondary-button:focus-visible {
  color: var(--primary);
  box-shadow: inset 0 0 0 1.5px var(--primary);
}

.ghost-button {
  padding: 0 4px;
  color: var(--primary);
}

.button-m {
  min-height: 44px;
  padding: 0 20px;
  font-size: 0.875em;
}

.button-m .icon {
  width: 18px;
  height: 18px;
}

.button-block {
  display: flex;
  width: 100%;
}

.read-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875em;
  font-weight: 600;
  color: var(--accent-dark);
  text-decoration: none;
}

.read-more .icon {
  width: 16px;
  height: 16px;
  transition: transform .2s ease-in-out;
}

.read-more:hover {
  color: var(--accent-dark);
}

.read-more:hover .icon {
  transform: translateX(3px);
}

.buttons-module {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.buttons-module.align-center {
  justify-content: center;
}

.round-button {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary);
  color: var(--white);
}

/* BADGE / CHIP */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75em;
  line-height: 1.5;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 999px;
  background-color: var(--accent-light);
  color: var(--accent-dark);
}

.badge.badge-navy { background-color: var(--primary-light); color: var(--primary); }
.badge.badge-success { background-color: var(--success-light); color: var(--success); }
.badge.badge-dark { background-color: var(--primary); color: var(--white); }

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875em;
  font-weight: 600;
  line-height: 1.43;
  padding: 9px 16px;
  border-radius: 999px;
  background-color: var(--white);
  color: var(--primary);
  box-shadow: inset 0 0 0 1.5px var(--medium);
  text-decoration: none;
  cursor: pointer;
}

.chip:hover {
  box-shadow: inset 0 0 0 1.5px var(--primary);
  color: var(--primary);
}

.chip.active,
.chip.active:hover {
  background-color: var(--primary);
  color: var(--white);
  box-shadow: none;
}

/* BREADCRUMBS */

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.75em;
  color: var(--muted);
  padding: 0;
  margin: 0 0 16px;
  list-style: none;
}

.breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.breadcrumbs li + li:before {
  content: "";
  width: 14px;
  height: 14px;
  background: url(../img/icon_dalej-szara.svg) center / contain no-repeat;
}

.breadcrumbs a {
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: var(--primary);
}

.breadcrumbs li:last-child {
  color: var(--primary);
}

/* PAGE HEADER */

.page-header {
  background-color: var(--surface);
  padding: 40px 0 56px;
}

.page-header h1 {
  margin-bottom: 0;
}

.page-header .lead {
  font-size: 1.125em;
  line-height: 1.67;
  max-width: 760px;
  margin-top: 16px;
}

.page-header .chip-list {
  margin-top: 24px;
}

/* HERO */

.hero-module {
  background: var(--gradient-soft);
  padding: 48px 0 64px;
}

.hero-module .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 64px;
}

.hero-module .hero-text {
  flex: 1;
  min-width: 0;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.hero-module .hero-text h1 {
  margin: 0;
}

.hero-module .hero-text .lead {
  font-size: 1.125em;
  line-height: 1.67;
  max-width: 540px;
  margin: 0;
}

.hero-module .quick-services {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hero-module .quick-services .label {
  font-size: 0.875em;
  color: var(--muted);
}

.hero-module .hero-visual {
  position: relative;
  width: 536px;
  height: 470px;
  flex-shrink: 0;
}

.hero-module .hero-visual .glow {
  position: absolute;
  left: 60px;
  top: 30px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 40%, transparent) 0%, color-mix(in srgb, var(--plum) 22%, transparent) 45%, transparent 72%);
  transform: scale(1.6);
}

.hero-module .hero-visual .photo {
  position: absolute;
  left: 116px;
  top: 10px;
  width: 420px;
  height: 450px;
  border-radius: 32px;
  object-fit: cover;
}

.hero-module .hero-visual .float-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: var(--white);
  border-radius: 20px;
  padding: 16px;
  box-shadow: var(--shadow-l);
  z-index: 1;
}

/* Paralaksa za kursorem – przesunięcie liczone w main.js */
.hero-module .hero-visual [data-depth] {
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}

/* Różne czasy reakcji – karty doganiają kursor z opóźnieniem względem siebie */
.hero-module .hero-visual .card-time { transition-duration: .5s; }
.hero-module .hero-visual .card-done { transition-duration: .9s; }
.hero-module .hero-visual .card-online { transition-duration: .7s; }
.hero-module .hero-visual .photo { transition-duration: 1.2s; }

.hero-module .hero-visual .float-card .title {
  display: block;
  font-size: 0.875em;
  font-weight: 600;
  color: var(--primary);
  line-height: 1.43;
}

.hero-module .hero-visual .float-card .text {
  display: block;
  font-size: 0.75em;
  font-weight: 500;
  color: var(--muted);
}

/* Karty ułożone na tle, fartuchu i tablecie – poza twarzą na zdjęciu */
.hero-module .hero-visual .card-time {
  right: -16px;
  top: 40px;
  background-color: var(--primary);
  color: var(--white);
  border-radius: 16px;
  padding: 12px 16px;
  gap: 10px;
  font-size: 0.875em;
  font-weight: 600;
}

.hero-module .hero-visual .card-time .icon {
  color: var(--accent);
}

.hero-module .hero-visual .card-done {
  right: -32px;
  top: 236px;
}

.hero-module .hero-visual .card-online {
  left: 0;
  bottom: 24px;
  padding: 18px 22px 18px 18px;
}

/* Status dostępności lekarzy – domyślnie online, klasę .offline ustawia main.js wg godzin */
.doctor-status .status-online {
  display: block;
}

.doctor-status .status-offline {
  display: none;
}

.doctor-status.offline .status-online {
  display: none;
}

.doctor-status.offline .status-offline {
  display: block;
}

.badge.doctor-status.offline {
  background-color: var(--primary-light);
  color: var(--primary-dark);
}

.doctor-status.offline .status-lamp {
  background-color: var(--medium);
}

.doctor-status.offline .status-lamp:after {
  background-color: var(--muted);
  animation: none;
}

.status-lamp {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--success) 18%, transparent);
  flex-shrink: 0;
}

.status-lamp:after {
  content: "";
  position: absolute;
  left: 8px;
  top: 8px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--success);
  animation: lamp-pulse 2s ease-in-out infinite;
}

@keyframes lamp-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 45%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--success) 0%, transparent); }
}

.success-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--success-light);
  color: var(--success);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* QUICK SERVICE LIST */

.quick-service-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.quick-service-list .quick-service-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: var(--white);
  border-radius: var(--radius-m);
  padding: 12px 16px 12px 12px;
  box-shadow: inset 0 0 0 1px var(--medium), var(--shadow-s);
  text-decoration: none;
}

.quick-service-list .quick-service-item:hover {
  box-shadow: inset 0 0 0 1px var(--primary), var(--shadow-s);
}

.quick-service-list .quick-service-item .name {
  display: block;
  font-size: 0.875em;
  font-weight: 600;
  color: var(--primary);
  line-height: 1.43;
}

.quick-service-list .quick-service-item .price {
  display: block;
  font-size: 0.875em;
  font-weight: 800;
  color: var(--accent-dark);
}

/* SERVICE LIST */

.service-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.service-list .service-item {
  position: relative;
  width: calc(25% - 18px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: var(--white);
  border-radius: var(--radius-l);
  padding: 28px;
  box-shadow: inset 0 0 0 1.5px var(--medium);
  transition: box-shadow .35s cubic-bezier(.22, .61, .36, 1), transform .35s cubic-bezier(.22, .61, .36, 1);
}

.service-list .service-item:hover {
  box-shadow: inset 0 0 0 1.5px var(--medium-dark), var(--shadow-m);
  transform: translateY(-4px);
}

.service-list .service-item > .badge {
  position: absolute;
  top: -13px;
  left: 24px;
}

.service-list .service-item .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.service-list .service-item .price {
  font-size: 1.75em;
  line-height: 1.29;
  font-weight: 800;
  color: var(--accent-dark);
  white-space: nowrap;
}

.service-list .service-item .text {
  flex: 1;
}

.service-list .service-item .text h3 {
  font-size: 1.375em;
  line-height: 1.36;
  margin-bottom: 8px;
}

.service-list .service-item .text p {
  font-size: 0.875em;
  line-height: 1.57;
}

.service-list .service-item .primary-button {
  width: 100%;
}

/* Karta pomocy w wyborze */
.service-list .service-help {
  background-color: var(--primary);
  color: var(--white);
  box-shadow: none;
  justify-content: space-between;
}

.service-list .service-help:hover {
  box-shadow: var(--shadow-m);
}

.service-list .service-help h3 {
  color: var(--white);
}

.service-list .service-help p {
  opacity: .75;
}

.service-list .service-help .accent-button {
  align-self: flex-start;
}

/* STEPS */

.step-list {
  display: flex;
  gap: 24px;
}

.step-list .step-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: var(--white);
  border-radius: 28px;
  padding: 36px;
}

.step-list .step-item .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--primary-medium);
}

.step-list .step-item h3 {
  font-size: 1.375em;
  line-height: 1.36;
  margin: 0;
}

.step-list .step-item p {
  margin: 0;
}

.step-number {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gradient);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  flex-shrink: 0;
}

.step-number.number-s {
  width: 36px;
  height: 36px;
  font-size: 0.875em;
}

/* Zastrzeżenie / informacja */
.info-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.875em;
  line-height: 1.57;
  background-color: var(--white);
  border-radius: 999px;
  padding: 12px 20px;
  color: var(--text);
}

.info-note .icon {
  color: var(--primary-medium);
  width: 20px;
  height: 20px;
}

.info-note.note-box {
  border-radius: var(--radius-m);
  padding: 16px;
}

.info-note.note-bordered {
  box-shadow: inset 0 0 0 1px var(--medium);
}

.info-note.note-surface {
  background-color: var(--surface);
}

.info-note.note-lilac {
  background-color: var(--lilac);
}

.info-note.note-lilac .icon {
  color: var(--plum);
}

.notes-center {
  display: flex;
  justify-content: center;
  margin-top: 56px;
}

/* WHY / PANEL */

.dark-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 72px;
  background-color: var(--primary);
  color: var(--white);
  border-radius: var(--radius-xl);
  padding: 72px;
}

.dark-panel:before {
  content: "";
  position: absolute;
  right: -120px;
  top: -160px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 38%, transparent) 0%, color-mix(in srgb, var(--plum) 20%, transparent) 45%, transparent 72%);
  transform: scale(1.7);
}

.dark-panel > * {
  position: relative;
  z-index: 1;
}

.dark-panel .panel-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.dark-panel .overline {
  color: var(--accent);
}

.dark-panel h2 {
  color: var(--white);
  margin: 0;
}

.benefit-list {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
}

.benefit-list .benefit-item {
  width: calc(50% - 14px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.benefit-list .benefit-item .title {
  font-weight: 600;
  color: var(--white);
}

.benefit-list .benefit-item p {
  font-size: 0.875em;
  line-height: 1.57;
  opacity: .72;
  margin: 0;
}

.stat-list {
  width: 400px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.stat-list .stat-item {
  border-radius: var(--radius-l);
  padding: 24px 28px;
  background-color: color-mix(in srgb, var(--white) 6%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--white) 14%, transparent);
}

.stat-list .stat-item .number {
  display: block;
  font-size: 2.75em;
  line-height: 1.18;
  font-weight: 700;
  white-space: nowrap;
  background: linear-gradient(90deg, var(--accent) 0%, var(--lilac) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stat-list .stat-item p {
  margin: 0;
  opacity: .72;
}

/* IRON / HIGHLIGHT */

.highlight-panel {
  display: flex;
  align-items: center;
  gap: 64px;
  background: var(--gradient-warm);
  color: var(--white);
  border-radius: var(--radius-xl);
  padding: 64px;
}

.highlight-panel .panel-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.highlight-panel h2 {
  color: var(--white);
  margin: 0;
}

.highlight-panel .lead {
  font-size: 1.125em;
  line-height: 1.67;
  opacity: .9;
  margin: 0;
}

.highlight-panel .glass-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75em;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--white) 20%, transparent);
}

.city-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.city-list li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75em;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--white) 16%, transparent);
}

.upload-preview {
  width: 400px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background-color: var(--white);
  border-radius: 28px;
  padding: 28px;
  color: var(--text);
  box-shadow: 0 24px 60px color-mix(in srgb, var(--primary) 20%, transparent);
}

/* Podgląd na stronie głównej to ilustracja – bez reakcji na kursor */
.upload-preview .upload-box {
  cursor: default;
  pointer-events: none;
}

.upload-preview .title {
  font-weight: 600;
  color: var(--primary);
}

/* APP PROMO */

.app-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 64px;
  background-color: var(--lilac);
  border-radius: var(--radius-xl);
  padding: 0 72px;
}

.app-panel .panel-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 72px 0;
}

.app-panel h2 {
  margin: 0;
}

.check-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.check-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.125em;
  color: var(--primary);
}

.check-list li .check {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: var(--primary);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.check-list li .check .icon {
  width: 14px;
  height: 14px;
}

.store-list {
  display: flex;
  gap: 12px;
}

.store-list a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: var(--primary);
  color: var(--white);
  border-radius: 14px;
  padding: 10px 20px;
  text-decoration: none;
}

.store-list a:hover {
  background-color: var(--primary-dark);
  color: var(--white);
}

.store-list .small {
  display: block;
  font-size: 0.75em;
  opacity: .7;
  line-height: 1.2;
}

.store-list .big {
  display: block;
  font-weight: 600;
  line-height: 1.3;
}

.app-panel .phone {
  position: relative;
  width: 420px;
  height: 480px;
  flex-shrink: 0;
}

.app-panel .phone:before {
  content: "";
  position: absolute;
  left: 30px;
  top: 80px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 40%, transparent) 0%, color-mix(in srgb, var(--plum) 22%, transparent) 45%, transparent 72%);
  transform: scale(1.5);
}

.app-panel .phone .device {
  position: absolute;
  left: 75px;
  top: 56px;
  width: 270px;
  height: 540px;
  border-radius: 44px;
  background-color: var(--primary);
  padding: 10px;
  box-shadow: 0 30px 60px color-mix(in srgb, var(--primary) 25%, transparent);
}

.app-panel .phone .screen {
  height: 100%;
  border-radius: 36px;
  background-color: var(--surface);
  padding: 36px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.app-panel .phone .screen img {
  height: 22px;
  width: auto;
  align-self: flex-start;
}

.app-panel .phone .screen .title {
  font-weight: 600;
  color: var(--primary);
}

.app-panel .phone .history-item {
  background-color: var(--white);
  border-radius: 16px;
  padding: 14px;
  font-size: 0.75em;
}

.app-panel .phone .history-item .row-top,
.app-panel .phone .history-item .row-bottom {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.app-panel .phone .history-item .row-top strong {
  font-size: 1.15em;
  color: var(--primary);
  font-weight: 600;
}

.app-panel .phone .history-item .status {
  color: var(--success);
}

.app-panel .phone .history-item .repeat {
  color: var(--accent-dark);
  font-weight: 600;
}

/* REVIEWS */

/* Karuzela opinii – Owl Carousel; karty wyrównane do najwyższej */
.review-list .owl-stage {
  display: flex;
}

.review-list .owl-item {
  display: flex;
}

.review-list .review-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  background-color: var(--white);
  border-radius: 28px;
  padding: 32px;
}

.review-list .review-item .quote {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.review-list .review-item blockquote {
  font-size: 1.125em;
  line-height: 1.67;
  color: var(--primary);
  margin: 0;
}

.review-list .review-item .author {
  border-top: 1px solid var(--medium);
  padding-top: 20px;
}

.review-list .review-item .author .name {
  display: block;
  font-size: 0.875em;
  font-weight: 600;
  color: var(--primary);
}

.review-list .review-item .author .service {
  display: block;
  font-size: 0.75em;
  color: var(--muted);
}

.stars {
  display: flex;
  gap: 2px;
}

.stars .icon,
.owl-carousel .owl-item .stars .icon {
  display: inline-block;
  width: 18px;
  height: 18px;
}

.carousel-nav {
  display: flex;
  gap: 10px;
}

.carousel-nav button {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--medium-dark);
}

.carousel-nav button:hover {
  box-shadow: inset 0 0 0 1.5px var(--primary);
}

.carousel-nav button.disabled {
  opacity: .4;
  pointer-events: none;
}

.owl-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
}

.owl-dots .owl-dot span {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background-color: var(--medium-dark);
  transition: width .25s ease, background-color .25s ease;
}

.owl-dots .owl-dot.active span {
  width: 24px;
  background-color: var(--primary);
}

/* ARTICLE LIST */

.article-list {
  display: flex;
  flex-wrap: wrap;
  gap: 48px 24px;
}

.article-list .article-item {
  width: calc(33.333% - 16px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.article-list .article-item .image {
  display: block;
  border-radius: var(--radius-l);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--lilac) 0%, var(--accent-light) 100%);
}

.article-list .article-item .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s ease-in-out;
}

.article-list .article-item:hover .image img {
  transform: scale(1.04);
}

.article-list .article-item .meta,
.article-meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.75em;
  color: var(--muted);
}

.article-list .article-item .meta .badge {
  font-size: 1em;
}

.article-list .article-item h3 {
  font-size: 1.375em;
  line-height: 1.36;
  margin: 0;
}

.article-list .article-item h3 a {
  text-decoration: none;
}

.article-list .article-item h3 a:hover {
  color: var(--accent-dark);
}

/* FAQ */

.faq-module {
  display: flex;
  gap: 80px;
}

.faq-module .faq-aside {
  width: 400px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.faq-module .faq-aside h2 {
  margin: 0;
}

.faq-module .faq-aside p {
  margin: 0;
  max-width: 380px;
}

.faq-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-list .faq-item {
  background-color: var(--white);
  border-radius: 20px;
  box-shadow: inset 0 0 0 1.5px transparent;
  transition: box-shadow .2s ease-in-out;
}

.faq-list .faq-item.open {
  box-shadow: inset 0 0 0 1.5px var(--primary);
}

.faq-list .faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 28px;
  text-align: left;
  font-weight: 600;
  color: var(--primary);
}

.faq-list .faq-question .toggle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--lilac);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .2s ease-in-out;
}

.faq-list .faq-question .toggle .icon {
  width: 18px;
  height: 18px;
}

.faq-list .faq-item.open .faq-question .toggle {
  background-color: var(--primary);
  color: var(--white);
}

.faq-list .faq-question .toggle .icon-opened,
.faq-list .faq-item.open .faq-question .toggle .icon-closed {
  display: none;
}

.faq-list .faq-item.open .faq-question .toggle .icon-opened {
  display: inline-block;
}

.faq-list .faq-answer {
  display: none;
  padding: 0 28px 22px;
}

.faq-list .faq-item.open .faq-answer {
  display: block;
}

.faq-list.list-surface .faq-item {
  background-color: var(--surface);
}

.faq-list.list-surface .faq-item.open {
  background-color: var(--white);
}

/* CTA */

.cta-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-m);
  background: var(--gradient-dark);
  color: var(--white);
  border-radius: var(--radius-xl);
  padding: 56px 64px;
}

.cta-band h2 {
  color: var(--white);
  margin: 0 0 10px;
}

.cta-band p {
  font-size: 1.125em;
  opacity: .8;
  margin: 0;
}

/* FOOTER */

footer {
  background-color: var(--primary);
  color: var(--white);
  padding: 80px 0 40px;
}

.footer-columns {
  display: flex;
  gap: 64px;
}

.footer-column {
  flex: 1;
}

.footer-column.column-brand {
  flex: 0 0 320px;
}

.footer-column.column-brand img {
  height: 36px;
  width: auto;
  margin-bottom: 20px;
}

.footer-column.column-brand p {
  font-size: 0.875em;
  opacity: .7;
  max-width: 300px;
}

.footer-column h5 {
  font-size: 0.875em;
  color: var(--accent);
  margin-bottom: 14px;
}

.footer-column .footer-menu {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-column .footer-menu a {
  font-size: 0.875em;
  text-decoration: none;
  opacity: .8;
}

.footer-column .footer-menu a:hover {
  opacity: 1;
  color: var(--accent);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-m);
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid color-mix(in srgb, var(--white) 12%, transparent);
  font-size: 0.75em;
}

.footer-bottom p {
  opacity: .6;
  margin: 0;
}

.footer-bottom .designed a {
  text-decoration: none;
}

.payment-list {
  display: flex;
  gap: 8px;
  padding: 0;
  margin: 0;
}

.payment-list li {
  border-radius: 8px;
  padding: 6px 10px;
  background-color: color-mix(in srgb, var(--white) 10%, transparent);
}

/* PAGINATION */

.pagination-container {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 48px;
}

.pagination-container a,
.pagination-container span {
  min-width: 44px;
  height: 44px;
  border-radius: var(--radius-s);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 0.875em;
  font-weight: 600;
  color: var(--primary);
  background-color: var(--surface);
}

.pagination-container a:hover,
.pagination-container .active {
  background-color: var(--primary);
  color: var(--white);
}

/* PAGE HEADER – WARIANTY */

.page-header .breadcrumbs {
  margin-bottom: 20px;
}

.page-header.header-gradient {
  background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--accent-light) 35%, var(--white)) 100%);
}

.page-header .page-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: 16px;
  font-size: 0.8125em;
  color: var(--muted);
}

.page-header .page-meta a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--accent-dark);
  text-decoration: none;
}

.page-header .page-meta .icon {
  width: 16px;
  height: 16px;
}

.page-header .badge-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.page-header .subtitle {
  font-size: 1.125em;
  color: var(--muted);
  margin: 12px 0 0;
}

.search-field {
  position: relative;
  max-width: 546px;
  margin-top: 28px;
}

.search-field .input {
  height: 56px;
  padding-left: 52px;
  border-color: var(--medium-dark);
  border-radius: 14px;
}

.search-field .icon {
  position: absolute;
  left: 18px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  pointer-events: none;
}

.badge.badge-lilac { background-color: var(--lilac); color: var(--primary); }
.badge.badge-surface { background-color: var(--primary-light); color: var(--primary); }

/* Nagłówek strony z kartą zamówienia (podstrona SEO usługi) */
.seo-hero {
  display: flex;
  align-items: center;
  gap: 56px;
}

.seo-hero .hero-text {
  flex: 1;
  min-width: 0;
}

.seo-hero h1 {
  margin-bottom: 20px;
}

.seo-hero .lead {
  font-size: 1.125em;
  line-height: 1.67;
  margin: 0 0 20px;
}

.verified-note {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875em;
  color: var(--primary);
  margin: 0;
}

.verified-note .icon {
  width: 18px;
  height: 18px;
}

.order-card {
  width: 400px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px;
  border-radius: 28px;
  background-color: var(--white);
  box-shadow: 0 20px 24px color-mix(in srgb, var(--primary) 10%, transparent);
}

.order-card .order-product {
  display: flex;
  align-items: center;
  gap: 12px;
}

.order-card .order-product .icon-tile {
  width: 48px;
  height: 48px;
  border-radius: 14px;
}

.order-card .order-product .text {
  flex: 1;
}

.order-card .order-product .name {
  display: block;
  font-weight: 600;
  color: var(--primary);
}

.order-card .order-product .sub {
  display: block;
  font-size: 0.75em;
  font-weight: 500;
  color: var(--muted);
}

.order-card .order-product .price {
  font-size: 1.75em;
  line-height: 1.29;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--accent-dark);
  white-space: nowrap;
}

.order-card .note {
  font-size: 0.75em;
  font-weight: 500;
  color: var(--muted);
  text-align: center;
  margin: 0;
}

.tick-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.875em;
  line-height: 1.57;
}

.tick-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.tick-list .icon {
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

.tick-list.list-small {
  font-size: 0.8125em;
  gap: 8px;
}

.tick-list.list-small .icon {
  width: 16px;
  height: 16px;
}

/* CONTENT LAYOUT (spis treści + treść) */

.content-layout {
  display: flex;
  align-items: flex-start;
  gap: 64px;
}

.content-layout .content-aside {
  width: 300px;
  flex-shrink: 0;
  position: sticky;
  top: 150px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.content-layout .content-aside.aside-narrow {
  width: 250px;
}

.content-layout .content-main {
  flex: 1;
  min-width: 0;
}

.toc {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border-radius: 20px;
  background-color: var(--surface);
}

.toc .toc-title {
  font-weight: 600;
  color: var(--primary);
}

.toc-toggle {
  display: none;
}

.toc-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.toc-list a {
  display: flex;
  gap: 10px;
  font-size: 0.875em;
  line-height: 1.57;
  color: var(--primary);
  text-decoration: none;
}

.toc-list a:hover,
.toc-list a.active {
  color: var(--accent-dark);
}

.toc-list .num {
  font-weight: 600;
  color: var(--accent-dark);
  flex-shrink: 0;
}

.toc.toc-columns .toc-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
}

/* ARTICLE CONTENT */

.article-content {
  font-size: 1em;
  line-height: 1.75;
}

.article-content > * + * {
  margin-top: 20px;
}

.article-content > :first-child {
  margin-top: 0;
}

.article-content h2 {
  display: flex;
  gap: 12px;
  font-size: 1.75em;
  line-height: 1.29;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 44px 0 0;
  scroll-margin-top: 150px;
}

.article-content h2 .num {
  font-weight: 500;
  color: var(--accent);
}

.article-content h3 {
  font-size: 1.375em;
  margin: 32px 0 0;
}

.article-content p {
  margin-bottom: 0;
}

.article-content a:not([class]) {
  color: var(--accent-dark);
}

.article-content ul,
.article-content ol {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  list-style: none;
}

.article-content ul li {
  position: relative;
  padding-left: 20px;
}

.article-content ul li:before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--accent);
}

.article-content ol {
  counter-reset: item;
}

.article-content ol li {
  position: relative;
  padding-left: 26px;
  counter-increment: item;
}

.article-content ol li:before {
  content: counter(item) ".";
  position: absolute;
  left: 0;
  font-weight: 600;
  color: var(--primary);
}

.article-content.content-legal {
  font-size: 1.0625em;
}

.article-content.content-legal h2 {
  margin-top: 36px;
}

.article-content .toc-list li {
  padding-left: 0;
}

.article-content .toc-list li:before {
  display: none;
}

.article-content .toc-list a {
  color: var(--primary);
}

.article-content .toc-list a:hover {
  color: var(--accent-dark);
}

.faq-list.list-surface .faq-question .toggle {
  background-color: var(--white);
}

.faq-list.list-surface .faq-item.open .faq-question .toggle {
  background-color: var(--primary);
}

.tip-box {
  display: flex;
  gap: 12px;
  padding: 20px 24px;
  border-radius: 20px;
  background-color: var(--lilac);
  font-size: 0.875em;
  line-height: 1.6;
}

.tip-box .icon {
  width: 20px;
  height: 20px;
  margin-top: 2px;
}

.tip-box .title {
  display: block;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 4px;
}

.sources {
  font-size: 0.875em;
}

.sources .title {
  display: block;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 6px;
}

/* Tabela podstawowych informacji o leku */
.info-table {
  border: 1px solid var(--medium);
  border-radius: 20px;
  overflow: hidden;
}

.info-table .info-table-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background-color: var(--surface);
  font-size: 0.875em;
  font-weight: 600;
  color: var(--primary);
}

.info-table .info-table-head .icon {
  width: 18px;
  height: 18px;
}

.info-table dl {
  margin: 0;
}

.info-table .row-item {
  display: flex;
  gap: 20px;
  padding: 14px 20px;
  border-top: 1px solid var(--medium);
  font-size: 0.875em;
}

.info-table dt {
  width: 200px;
  flex-shrink: 0;
  font-weight: 500;
  color: var(--muted);
}

.info-table dd {
  margin: 0;
  color: var(--primary);
}

/* BANERY ZAMÓWIENIA W TREŚCI */

.form-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 20px;
  border-left: 4px solid var(--plum);
  background-color: var(--lilac);
}

.form-banner .text {
  flex: 1;
}

.form-banner .title {
  display: block;
  font-weight: 600;
  color: var(--primary);
}

.form-banner p {
  font-size: 0.875em;
  margin: 2px 0 0;
}

.cta-banner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 28px 32px;
  border-radius: 28px;
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 70%, var(--plum) 100%);
  color: var(--white);
}

.cta-banner .icon-tile {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background-color: color-mix(in srgb, var(--white) 10%, transparent);
}

.cta-banner .icon-tile .icon {
  width: 28px;
  height: 28px;
}

.cta-banner .text {
  flex: 1;
  min-width: 0;
}

.cta-banner .title {
  display: block;
  font-size: 1.375em;
  line-height: 1.36;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--white);
  margin-bottom: 6px;
}

.cta-banner p {
  font-size: 0.875em;
  opacity: .8;
  margin: 0;
}

.cta-banner .action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.cta-banner .action .note {
  font-size: 0.75em;
  font-weight: 500;
  opacity: .75;
}

/* Kroki procesu w treści */
.mini-steps,
.article-content .mini-steps {
  display: flex;
  flex-direction: row;
  gap: 12px;
  list-style: none;
  padding: 0;
}

.article-content .mini-steps li {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 16px;
  background-color: var(--surface);
  font-size: 0.875em;
  line-height: 1.43;
  font-weight: 600;
  color: var(--primary);
}

.article-content .mini-steps li:before {
  display: none;
}

.mini-steps .step-number {
  width: 26px;
  height: 26px;
  font-size: 0.8125em;
}

/* FAQ – wariant w treści */
.faq-list.faq-small .faq-item {
  background-color: var(--surface);
  border-radius: 16px;
}

.faq-list.faq-small .faq-item.open {
  background-color: var(--white);
}

.faq-list.faq-small .faq-question {
  padding: 16px 20px;
  font-size: 0.9375em;
}

.faq-list.faq-small .faq-question .toggle {
  width: 24px;
  height: 24px;
  background-color: transparent;
}

.faq-list.faq-small .faq-item.open .faq-question .toggle {
  background-color: transparent;
}

.faq-list.faq-small .faq-question .toggle .icon {
  width: 18px;
  height: 18px;
}

.faq-list.faq-small .faq-answer {
  padding: 0 20px 16px;
  font-size: 0.875em;
}

.faq-list.faq-bordered .faq-item {
  background-color: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--medium);
}

.faq-list.faq-bordered .faq-item.open {
  box-shadow: inset 0 0 0 1.5px var(--primary);
}

/* SERVICES – WARIANTY */

.service-list.list-3 .service-item {
  width: calc(33.333% - 16px);
}

.service-list .service-item.hidden-filter {
  display: none;
}

/* PROCES (Jak to działa) */

.process-list {
  display: flex;
  gap: 20px;
}

.process-list .process-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
  border-radius: var(--radius-l);
  background-color: var(--surface);
}

.process-list .process-item h3 {
  font-size: 1.375em;
  line-height: 1.36;
  margin: 0;
}

.process-list .process-item p {
  margin: 0;
}

.process-list .step-number {
  width: 40px;
  height: 40px;
  font-size: 0.875em;
}

.after-list {
  display: flex;
  gap: 40px;
}

.after-list .after-item {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.after-list .icon-tile {
  width: 48px;
  height: 48px;
  border-radius: 14px;
}

.after-list .title {
  display: block;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 4px;
}

.after-list p {
  font-size: 0.875em;
  line-height: 1.6;
  margin: 0;
}

.docs-panel {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 48px 56px;
  border-radius: var(--radius-xl);
  background-color: var(--primary);
  color: color-mix(in srgb, var(--white) 75%, transparent);
}

.docs-panel .overline {
  color: var(--accent);
}

.docs-panel .doc-list {
  display: flex;
  gap: 20px;
}

.docs-panel .doc-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  border-radius: var(--radius-l);
  background-color: color-mix(in srgb, var(--white) 6%, transparent);
}

.docs-panel .doc-item .icon-tile {
  width: 48px;
  height: 48px;
  border-radius: 14px;
}

.docs-panel .doc-item h3 {
  font-size: 1.375em;
  color: var(--white);
  margin: 0;
}

.docs-panel .doc-item p {
  font-size: 0.875em;
  margin: 0;
}

.docs-panel .docs-note {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875em;
  margin: 0;
}

.docs-panel .docs-note .icon {
  width: 18px;
  height: 18px;
}

.feature-cards {
  display: flex;
  gap: 20px;
}

.feature-cards .feature-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border-radius: var(--radius-l);
  box-shadow: inset 0 0 0 1.5px var(--medium);
}

.feature-cards .icon-tile {
  width: 44px;
  height: 44px;
  border-radius: 12px;
}

.feature-cards .icon-tile .icon {
  width: 22px;
  height: 22px;
}

.feature-cards .title {
  font-weight: 600;
  color: var(--primary);
  margin-top: 4px;
}

.feature-cards p {
  font-size: 0.875em;
  line-height: 1.6;
  margin: 0;
}

/* FAQ PAGE */

.side-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.side-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 0.9375em;
  color: var(--primary);
  text-decoration: none;
}

.side-nav a:after {
  content: "";
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: url(../img/icon_dalej-szara.svg) center / contain no-repeat;
}

.side-nav a:hover {
  background-color: var(--surface);
}

.side-nav a.active {
  background-color: var(--lilac);
  font-weight: 600;
}

.faq-group + .faq-group {
  margin-top: 56px;
}

.faq-group h2 {
  font-size: 1.75em;
  line-height: 1.29;
  font-weight: 600;
  margin-bottom: 16px;
  scroll-margin-top: 150px;
}

.faq-more {
  font-size: 0.8125em;
  color: var(--muted);
  margin: 40px 0 0;
}

.help-band {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
  padding: 24px 28px;
  border-radius: var(--radius-l);
  background-color: var(--lilac);
}

.help-band .icon-tile {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background-color: var(--white);
}

.help-band .text {
  flex: 1;
}

.help-band .title {
  display: block;
  font-weight: 600;
  color: var(--primary);
}

.help-band p {
  font-size: 0.875em;
  margin: 0;
}

/* CONTACT */

.contact-layout {
  display: flex;
  align-items: flex-start;
  gap: 48px;
}

.contact-layout .contact-aside {
  width: 440px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.contact-list .contact-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  border-radius: 20px;
  background-color: var(--surface);
}

.contact-list .icon-tile {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background-color: var(--white);
}

.contact-list .label {
  display: block;
  font-size: 0.75em;
  font-weight: 500;
  color: var(--muted);
}

.contact-list .value {
  display: block;
  font-size: 1.0625em;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  margin: 2px 0 4px;
}

.contact-list a.value:hover {
  color: var(--accent-dark);
}

.contact-list p {
  font-size: 0.875em;
  margin: 0;
}

.contact-form {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 40px;
  border-radius: 28px;
  background-color: var(--white);
  border: 1px solid var(--medium);
  box-shadow: var(--shadow-m);
}

.contact-form h2 {
  font-size: 1.75em;
  line-height: 1.29;
  font-weight: 600;
  margin: 0 0 4px;
}

.contact-form .primary-button {
  align-self: flex-start;
}

/* BLOG */

.featured-article {
  display: flex;
  align-items: center;
  gap: 48px;
  margin-bottom: 56px;
}

.featured-article .image {
  width: 560px;
  flex-shrink: 0;
  display: block;
  border-radius: var(--radius-l);
  overflow: hidden;
  aspect-ratio: 560 / 340;
}

.featured-article .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s ease-in-out;
}

.featured-article:hover .image img {
  transform: scale(1.03);
}

.featured-article .text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.featured-article h2 {
  font-size: 2.5em;
  line-height: 1.15;
  margin: 0;
}

.featured-article h2 a {
  text-decoration: none;
}

.featured-article p {
  margin: 0;
}

.article-meta-row .badge {
  font-size: 1em;
}

/* POST */

.post-header {
  padding: 32px 0 40px;
}

.post-header .post-head {
  max-width: 960px;
  margin: 0 auto;
}

.post-header .badge {
  margin-bottom: 16px;
}

.post-header h1 {
  font-size: 3.25em;
  line-height: 1.15;
  margin-bottom: 16px;
}

.post-header .lead {
  font-size: 1.0625em;
  margin: 0;
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  margin: 24px 0 0;
  padding: 16px 0;
  border-top: 1px solid var(--medium);
  border-bottom: 1px solid var(--medium);
}

.post-meta .meta-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.post-meta .icon {
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

.post-meta dt {
  font-size: 0.6875em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.post-meta dd {
  margin: 0;
  font-size: 0.8125em;
  font-weight: 600;
  color: var(--primary);
}

.post-image {
  border-radius: var(--radius-l);
  overflow: hidden;
  margin-bottom: 48px;
}

.post-image img {
  width: 100%;
  display: block;
  aspect-ratio: 1200 / 520;
  object-fit: cover;
}

.verified-box {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 20px;
  background-color: var(--surface);
}

.verified-box .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  background-color: var(--lilac);
}

.verified-box .text {
  flex: 1;
}

.verified-box .title {
  display: block;
  font-size: 0.875em;
  font-weight: 600;
  color: var(--primary);
}

.verified-box .sub {
  display: block;
  font-size: 0.75em;
  color: var(--muted);
}

/* 404 */

.error-module {
  background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--accent-light) 30%, var(--white)) 100%);
  padding: 96px 0 112px;
  text-align: center;
}

.error-module .error-code {
  display: inline-block;
  font-size: 10em;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
  background: linear-gradient(90deg, var(--accent) 0%, var(--plum) 50%, var(--primary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.error-module h1 {
  font-size: 2.75em;
  margin: 24px 0 16px;
}

.error-module p {
  font-size: 1.125em;
  max-width: 520px;
  margin: 0 auto;
}

.error-module .buttons-module {
  justify-content: center;
  margin-top: 28px;
}

.error-module .quick-services {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 56px;
  text-align: left;
}

.error-module .quick-services .label {
  font-size: 0.8125em;
  color: var(--muted);
}

/* DRUG DATABASE */

.letter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}

.letter-list a {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--surface);
  font-size: 0.8125em;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}

.letter-list a:hover,
.letter-list a.active {
  background-color: var(--primary);
  color: var(--white);
}

.letter-group {
  margin-top: 48px;
}

.letter-group .letter-head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  scroll-margin-top: 150px;
}

.letter-group .letter-head .letter {
  font-size: 2.25em;
  line-height: 1;
  font-weight: 700;
  color: var(--accent);
}

.letter-group .letter-head:after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--medium);
}

.drug-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.drug-cards .drug-card {
  width: calc(33.333% - 11px);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1.5px var(--medium);
  text-decoration: none;
  transition: box-shadow .25s ease;
}

.drug-cards.cards-2 .drug-card {
  width: calc(50% - 8px);
}

.drug-cards .drug-card:hover {
  box-shadow: inset 0 0 0 1.5px var(--primary);
}

.drug-cards .drug-card .icon-tile {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

.drug-cards .drug-card .icon-tile .icon {
  width: 20px;
  height: 20px;
}

.drug-cards .drug-card .text {
  flex: 1;
  min-width: 0;
}

.drug-cards .drug-card .name {
  display: block;
  font-weight: 600;
  color: var(--primary);
}

.drug-cards .drug-card .meta {
  display: block;
  font-size: 0.75em;
  color: var(--muted);
}

.drug-cards .drug-card > .icon {
  width: 18px;
  height: 18px;
}

.more-row {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

/* Lewa kolumna karty leku */
.category-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 16px;
  border-radius: 20px;
  background-color: var(--surface);
}

.category-nav .label {
  font-size: 0.6875em;
  color: var(--muted);
  padding: 0 8px;
}

.category-nav .title {
  font-weight: 600;
  color: var(--primary);
  padding: 0 8px 10px;
}

.category-nav .side-nav a {
  padding: 9px 10px;
  font-size: 0.875em;
}

.category-nav .side-nav a.active {
  background-color: var(--white);
  color: var(--accent-dark);
}

.all-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  font-size: 0.8125em;
  font-weight: 600;
  color: var(--accent-dark);
  text-decoration: none;
}

.all-link .icon {
  width: 14px;
  height: 14px;
}

.drug-head .badge-list {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.drug-head h1 {
  font-size: 3.25em;
  line-height: 1.15;
  margin-bottom: 20px;
}

.drug-head .post-meta {
  margin: 0 0 24px;
}

.side-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
  border-radius: var(--radius-l);
  background-color: var(--surface);
}

.side-info h3 {
  font-size: 1.125em;
  margin: 0;
}

.side-info dl {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
}

.side-info dt {
  font-size: 0.75em;
  font-weight: 400;
  color: var(--muted);
}

.side-info dd {
  margin: 0;
  font-weight: 600;
  color: var(--primary);
}

/* EXPERT */

.expert-head {
  display: flex;
  align-items: center;
  gap: 24px;
}

.expert-head .avatar {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  flex-shrink: 0;
  background-color: var(--lilac);
  overflow: hidden;
}

.expert-head h1 {
  margin: 0;
}

.stat-boxes {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 36px 0 48px;
}

.stat-boxes .stat-box {
  padding: 20px 24px;
  border-radius: 20px;
  background-color: var(--surface);
}

.stat-boxes .number {
  display: block;
  font-size: 2.25em;
  line-height: 1.2;
  font-weight: 700;
  color: var(--accent-dark);
}

.stat-boxes p {
  font-size: 0.8125em;
  margin: 0;
}

.section-subtitle {
  font-size: 1.75em;
  line-height: 1.29;
  font-weight: 600;
  margin: 0 0 16px;
}

.verified-note a {
  color: inherit;
}

.content-layout.layout-reverse .content-aside {
  width: 324px;
}

.drug-head .breadcrumbs {
  margin-bottom: 20px;
}

/* PRODUCT HEADER */

.product-header {
  background-color: var(--white);
  padding: 32px 0 40px;
}

.product-header .breadcrumbs {
  margin-bottom: 20px;
}

.product-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-s);
}

.product-head .product-title {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 20px;
}

.product-head .icon-tile {
  width: 64px;
  height: 64px;
  border-radius: 18px;
}

.product-head .icon-tile .icon {
  width: 30px;
  height: 30px;
}

.product-head h1 {
  font-size: 2.75em;
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
}

.product-head .lead {
  font-size: 1.125em;
  line-height: 1.67;
  margin: 0;
}

.feature-list {
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-list li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background-color: var(--surface);
  font-size: 0.75em;
  line-height: 1.5;
  font-weight: 500;
  color: var(--primary);
  white-space: nowrap;
}

/* Ścieżka usługi w kilku etapach (np. wlew żelaza) */
.path-list {
  display: flex;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
}

.path-list li {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-m);
  background-color: var(--surface);
}

.path-list li.active {
  background-color: var(--accent-light);
}

.path-list .number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-color: var(--white);
  font-size: 0.75em;
  font-weight: 700;
  color: var(--primary);
}

.path-list li.active .number {
  background-color: var(--accent-dark);
  color: var(--white);
}

.path-list .title {
  display: block;
  font-size: 0.8125em;
  line-height: 1.4;
  font-weight: 600;
  color: var(--primary);
}

.path-list .text {
  display: block;
  font-size: 0.6875em;
  line-height: 1.5;
  color: var(--muted);
}

/* ORDER STEPS */

.order-module {
  background-color: var(--surface);
  padding: 32px 0 var(--section-space);
}

.order-steps {
  display: flex;
  align-items: center;
  gap: 20px;
  list-style: none;
  margin: 0 0 32px;
  padding: 16px 24px;
  background-color: var(--white);
  border: 1px solid var(--medium);
  border-radius: 20px;
}

.order-steps .step {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  color: var(--muted);
}

.order-steps .step-line {
  flex: 1;
  height: 2px;
  background-color: var(--medium);
}

.order-steps .step-line.done {
  background-color: var(--success);
}

.order-steps .step-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-color: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--medium-dark);
  font-size: 0.875em;
  font-weight: 600;
}

.order-steps .step-circle .icon {
  width: 20px;
  height: 20px;
}

.order-steps .step .title {
  display: block;
  font-weight: 600;
  line-height: 1.5;
}

.order-steps .step .text {
  display: block;
  font-size: 0.75em;
  line-height: 1.5;
  font-weight: 500;
}

.order-steps .step.active,
.order-steps .step.done {
  color: var(--primary);
}

.order-steps .step.active .step-circle {
  background-color: var(--primary);
  box-shadow: none;
  color: var(--white);
}

.order-steps .step.done .step-circle {
  background-color: var(--success);
  box-shadow: none;
}

.order-steps .step.active .text,
.order-steps .step.done .text {
  color: var(--muted);
}

/* ORDER LAYOUT */

.order-layout {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

.order-layout .order-form {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.order-layout .order-aside {
  width: 380px;
  flex-shrink: 0;
  position: sticky;
  top: 150px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-size: 0.875em;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}

.back-link .icon {
  width: 18px;
  height: 18px;
  transition: transform .25s ease;
}

.back-link:hover .icon {
  transform: translateX(-3px);
}

/* FORM CARD */

.form-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  background-color: var(--white);
  border: 1px solid var(--medium);
  border-radius: var(--radius-l);
  padding: 32px;
}

.form-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.form-card-head .number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 1px;
  background-color: var(--accent-light);
  font-size: 0.875em;
  font-weight: 600;
  color: var(--accent-dark);
}

.form-card-head h2 {
  font-size: 1.375em;
  line-height: 1.36;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0;
}

.form-card-head p {
  font-size: 0.875em;
  line-height: 1.57;
  color: var(--muted);
  margin: 2px 0 0;
}

.form-card-head .badge {
  margin-left: auto;
  align-self: flex-start;
}

.form-card .form-subtitle {
  font-weight: 600;
  color: var(--primary);
  margin: 0;
}

.form-card .form-subtitle.big {
  font-size: 1.375em;
  line-height: 1.36;
  letter-spacing: -0.005em;
}

.sub-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  border-radius: 20px;
  background-color: var(--surface);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-group > .label {
  font-size: 0.875em;
  line-height: 1.43;
  font-weight: 600;
  color: var(--primary);
}

/* FIELDS */

.field-row {
  display: flex;
  gap: 24px;
}

.field-row + .field-row {
  margin-top: -4px;
}

.field {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field label,
.field .label {
  font-size: 0.875em;
  line-height: 1.43;
  font-weight: 600;
  color: var(--primary);
}

.input {
  display: block;
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 1.5px solid var(--medium-dark);
  border-radius: var(--radius-s);
  background-color: var(--white);
  font-size: 1em;
  line-height: 1.625;
  color: var(--primary);
  outline: none;
  transition: border-color .25s ease, box-shadow .25s ease;
}

.input:hover {
  border-color: var(--muted);
}

.input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

textarea.input {
  height: auto;
  min-height: 120px;
  padding: 13px 16px;
  resize: vertical;
}

select.input {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 48px;
  background: var(--white) url(../img/icon_rozwin-szara.svg) right 16px center / 20px no-repeat;
  cursor: pointer;
}

/* Pole z ikoną po prawej (kalendarz, szukaj) */
.input-icon {
  position: relative;
}

.input-icon .input {
  padding-right: 48px;
}

.input-icon .icon {
  position: absolute;
  right: 16px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  pointer-events: none;
}

.field-hint {
  font-size: 0.75em;
  line-height: 1.5;
  font-weight: 500;
  color: var(--muted);
}

.field-error {
  display: none;
  font-size: 0.75em;
  line-height: 1.5;
  font-weight: 500;
  color: var(--error);
}

.has-error .input,
.has-error .input:hover {
  border-color: var(--error);
}

.has-error .input:focus {
  box-shadow: 0 0 0 3px var(--error-light);
}

.has-error .field-error {
  display: block;
}

.has-error .chip,
.has-error .checkbox .box {
  box-shadow: inset 0 0 0 1.5px var(--error);
}

.form-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.75em;
  line-height: 1.5;
  font-weight: 500;
  color: var(--muted);
  margin: 0;
}

.form-note .icon {
  width: 16px;
  height: 16px;
  margin-top: 1px;
}

.char-count {
  font-size: 0.75em;
  line-height: 1.5;
  font-weight: 500;
  color: var(--muted);
}

/* Podsumowanie błędów walidacji */
.error-summary {
  display: none;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  border-radius: var(--radius-m);
  background-color: var(--error-light);
}

.error-summary.open {
  display: flex;
}

.error-summary .icon {
  width: 20px;
  height: 20px;
  margin-top: 2px;
}

.error-summary .title {
  display: block;
  font-weight: 600;
  color: var(--primary);
}

.error-summary p {
  font-size: 0.8125em;
  line-height: 1.5;
  margin: 2px 0 0;
}

.hidden {
  display: none !important;
}

.option-list.has-error .option-card {
  box-shadow: inset 0 0 0 1.5px var(--error);
}

/* OPTION CARDS */

.option-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.option-list.option-list-3 .option-card {
  width: calc(33.333% - 8px);
}

.option-card {
  position: relative;
  width: calc(50% - 6px);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  margin: 0;
  border-radius: 16px;
  background-color: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--medium);
  cursor: pointer;
  transition: box-shadow .25s ease, background-color .25s ease;
}

.option-card:hover {
  box-shadow: inset 0 0 0 1.5px var(--medium-dark);
}

.option-card.active {
  background-color: var(--lilac);
  box-shadow: inset 0 0 0 2px var(--primary);
}

.option-card input,
.chip-choice input,
.checkbox input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.option-card .radio {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  background-color: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--medium-dark);
  transition: box-shadow .25s ease;
}

.option-card.active .radio {
  box-shadow: inset 0 0 0 6px var(--primary);
}

.option-card input:focus-visible ~ .radio {
  outline: 2px solid var(--primary-medium);
  outline-offset: 2px;
}

.option-card .text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.option-card .title {
  font-weight: 600;
  line-height: 1.5;
  color: var(--primary);
}

.option-card .desc {
  font-size: 0.875em;
  line-height: 1.57;
  color: var(--muted);
}

.option-card .option-price {
  font-weight: 600;
  color: var(--primary);
  white-space: nowrap;
}

.option-card .icon-tile {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-s);
  background-color: var(--surface);
}

.option-card.active .icon-tile {
  background-color: var(--white);
}

.option-card .icon-tile .icon {
  width: 20px;
  height: 20px;
}

.option-card.option-simple {
  padding: 14px 18px;
}

.option-card.option-simple .title {
  font-weight: 500;
}

/* CHIPS / ANSWERS */

.chip-choice {
  position: relative;
  margin: 0;
}

.chip-choice:has(input:focus-visible) {
  outline: 2px solid var(--primary-medium);
  outline-offset: 2px;
}

.question-list {
  display: flex;
  flex-direction: column;
}

.question {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 16px 0;
  border-top: 1px solid var(--medium);
}

.question:last-child {
  padding-bottom: 0;
}

.question .question-text {
  flex: 1;
  min-width: 240px;
  color: var(--primary);
  margin: 0;
}

.question .answers {
  display: flex;
  gap: 8px;
}

.question .field-error {
  width: 100%;
  margin-top: -4px;
}

/* Pytanie dodatkowe po odpowiedzi „Tak” */
.follow-up {
  display: none;
  width: 100%;
  flex-direction: column;
  gap: 8px;
  padding-left: 16px;
  border-left: 2px solid var(--accent);
}

.follow-up.open {
  display: flex;
}

/* CHECKBOX / CONSENTS */

.checkbox {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  font-size: 0.875em;
  line-height: 1.57;
  color: var(--text);
  cursor: pointer;
}

.checkbox .box {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--medium-dark);
  transition: background-color .2s ease, box-shadow .2s ease;
}

.checkbox .box .icon {
  width: 14px;
  height: 14px;
  opacity: 0;
}

.checkbox input:checked ~ .box {
  background-color: var(--primary);
  box-shadow: none;
}

.checkbox input:checked ~ .box .icon {
  opacity: 1;
}

.checkbox input:focus-visible ~ .box {
  outline: 2px solid var(--primary-medium);
  outline-offset: 2px;
}

.consent-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.consent-group .consent-all {
  font-weight: 600;
  color: var(--primary);
}

.consent-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 34px;
}

.consent-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-left: 34px;
  font-size: 0.875em;
  font-weight: 600;
  color: var(--accent-dark);
}

.consent-more .icon {
  width: 16px;
  height: 16px;
  transition: transform .25s ease;
}

.consent-more.open .icon {
  transform: rotate(180deg);
}

.consent-details {
  display: none;
  margin-left: 34px;
  padding: 16px;
  border-radius: var(--radius-s);
  background-color: var(--surface);
  font-size: 0.75em;
  line-height: 1.6;
}

/* NEXT STEP */

.next-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-s);
}

.form-card .next-step.divided {
  border-top: 1px solid var(--medium);
  padding-top: 24px;
}

.next-step .title {
  display: block;
  font-size: 0.875em;
  line-height: 1.43;
  font-weight: 600;
  color: var(--primary);
}

.next-step .text {
  display: block;
  font-size: 0.75em;
  line-height: 1.5;
  font-weight: 500;
  color: var(--muted);
}

/* DRUG PICKER */

.drug-picker {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.drug-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.drug-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--radius-m);
  box-shadow: inset 0 0 0 1.5px var(--medium);
}

.drug-item .icon-tile {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-s);
}

.drug-item .icon-tile .icon {
  width: 22px;
  height: 22px;
}

.drug-item .text {
  flex: 1;
  min-width: 0;
}

.drug-item .name {
  display: block;
  font-weight: 600;
  line-height: 1.5;
  color: var(--primary);
}

.drug-item .amount {
  display: block;
  font-size: 0.75em;
  line-height: 1.5;
  font-weight: 500;
  color: var(--muted);
}

.drug-item .drug-edit {
  font-size: 0.875em;
  font-weight: 600;
  color: var(--accent-dark);
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 8px;
}

.icon-button:hover {
  background-color: var(--error-light);
}

.icon-button .icon {
  width: 18px;
  height: 18px;
}

.drug-editor {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  border-radius: var(--radius-m);
  background-color: var(--surface);
}

.drug-editor .editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875em;
  font-weight: 600;
  color: var(--primary);
}

.drug-editor .field-row {
  gap: 16px;
}

.drug-editor .field-amount {
  flex: 0 0 180px;
}

.drug-search {
  position: relative;
}

.drug-search .input:focus {
  border-width: 2px;
}

/* Podpowiedzi nad treścią – lista nie przesuwa formularza; dłuższe wyniki przewijane */
.drug-suggestions {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  max-height: 280px;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  margin: 0;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid var(--medium);
  background-color: var(--white);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--primary) 12%, transparent);
}

.drug-suggestions.open {
  display: block;
}

.drug-suggestions li {
  padding: 11px 12px;
  border-radius: 10px;
  line-height: 1.625;
  color: var(--primary);
  cursor: pointer;
}

.drug-suggestions li:hover,
.drug-suggestions li.active {
  background-color: var(--lilac);
}

.drug-suggestions li.empty {
  color: var(--muted);
  cursor: default;
  background-color: transparent;
}

.add-drug {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  border-radius: var(--radius-m);
  border: 1.5px dashed var(--medium-dark);
  font-size: 0.875em;
  font-weight: 600;
  color: var(--accent-dark);
}

.add-drug:hover {
  border-color: var(--accent);
  background-color: color-mix(in srgb, var(--accent-light) 40%, transparent);
}

.add-drug .icon {
  width: 18px;
  height: 18px;
}

/* CALENDAR */

.calendar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.week-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  color: var(--primary);
}

.week-nav button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1.5px var(--medium-dark);
}

.week-nav button:hover {
  box-shadow: inset 0 0 0 1.5px var(--primary);
}

.week-nav button .icon {
  width: 18px;
  height: 18px;
}

.day-list {
  display: flex;
  gap: 8px;
}

.day-list .day {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 0;
  border-radius: 16px;
  background-color: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--medium);
  color: var(--primary);
}

.day-list .day:hover {
  box-shadow: inset 0 0 0 1.5px var(--primary);
}

.day-list .day .day-name {
  font-size: 0.75em;
  line-height: 1.5;
  font-weight: 500;
  color: var(--muted);
}

.day-list .day .day-number {
  font-size: 1.375em;
  line-height: 1.36;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.day-list .day.active {
  background-color: var(--primary);
  box-shadow: none;
  color: var(--white);
}

.day-list .day.active .day-name {
  color: var(--white);
}

.day-list .day:disabled {
  color: var(--medium-dark);
  box-shadow: inset 0 0 0 1.5px var(--medium);
  cursor: default;
}

.day-list .day:disabled .day-name {
  color: var(--medium-dark);
}

.hour-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hour-list .hour {
  width: 106px;
  padding: 11px 0;
  border-radius: var(--radius-s);
  background-color: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--medium-dark);
  font-size: 0.875em;
  line-height: 1.43;
  font-weight: 600;
  color: var(--primary);
  text-align: center;
}

.hour-list .hour:hover {
  box-shadow: inset 0 0 0 1.5px var(--primary);
}

.hour-list .hour.active {
  background-color: var(--primary);
  box-shadow: none;
  color: var(--white);
}

.selected-term {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  background-color: var(--lilac);
  font-size: 0.875em;
  line-height: 1.43;
  font-weight: 600;
  color: var(--primary);
}

.selected-term .icon {
  width: 18px;
  height: 18px;
}

/* Termin możliwy do wybrania dopiero po wskazaniu specjalisty */
.term-locked {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  border-radius: 14px;
  background-color: var(--surface);
  font-size: 0.875em;
  color: var(--muted);
}

/* UPLOAD – WIERSZ */

.upload-field {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.upload-box.upload-row {
  flex-direction: row;
  gap: 16px;
  text-align: left;
}

.upload-box .upload-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-color: var(--white);
}

.upload-box .upload-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.upload-box.upload-row .upload-title {
  font-weight: 600;
  line-height: 1.43;
}

.upload-box .upload-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background-color: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--medium-dark);
  font-size: 0.875em;
  font-weight: 600;
  color: var(--primary);
  white-space: nowrap;
}

.upload-box .upload-button .icon {
  width: 16px;
  height: 16px;
}

.upload-field .files-title {
  font-size: 0.875em;
  font-weight: 600;
  color: var(--primary);
}

.file-list .file-item .size.success {
  color: var(--success);
}

/* SUMMARY */

.summary-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px;
  border-radius: var(--radius-l);
  background-color: var(--white);
  box-shadow: var(--shadow-m);
}

.summary-card .summary-title {
  font-size: 1.375em;
  line-height: 1.36;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--primary);
}

.summary-product {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  background-color: var(--surface);
}

.summary-product .icon-tile {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-s);
}

.summary-product .icon-tile .icon {
  width: 20px;
  height: 20px;
}

.summary-product .name {
  display: block;
  font-size: 0.875em;
  line-height: 1.43;
  font-weight: 600;
  color: var(--primary);
}

.summary-product .text {
  display: block;
  font-size: 0.75em;
  line-height: 1.5;
  font-weight: 500;
  color: var(--muted);
}

.summary-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0 0 20px;
  border-bottom: 1px solid var(--medium);
  font-size: 0.875em;
}

.summary-rows .row-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.summary-rows dt {
  font-weight: 400;
  color: var(--text);
}

.summary-rows dd {
  margin: 0;
  font-weight: 600;
  color: var(--primary);
  text-align: right;
}

.summary-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  color: var(--primary);
}

.summary-total .amount {
  font-size: 1.75em;
  line-height: 1.29;
  letter-spacing: -0.01em;
}

.app-price {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background-color: var(--lilac);
  font-size: 0.75em;
  line-height: 1.5;
  font-weight: 500;
  color: var(--primary);
}

.app-price .icon {
  width: 18px;
  height: 18px;
}

.secure-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: -4px;
  font-size: 0.75em;
  font-weight: 500;
  color: var(--muted);
}

.secure-note .icon {
  width: 16px;
  height: 16px;
}

.trust-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 4px 4px 0;
}

.trust-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875em;
  line-height: 1.57;
}

.trust-list .icon {
  width: 18px;
  height: 18px;
}

.info-note.note-small {
  font-size: 0.75em;
  line-height: 1.5;
  font-weight: 500;
}

.info-note.note-small .icon {
  width: 18px;
  height: 18px;
}

/* Lista „Co dalej” z numerami */
.next-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: next;
}

.next-list li {
  position: relative;
  padding-left: 46px;
  counter-increment: next;
}

.next-list li:before {
  content: counter(next);
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--accent-light);
  font-size: 0.875em;
  font-weight: 600;
  color: var(--accent-dark);
}

.next-list .title {
  display: block;
  font-weight: 600;
  line-height: 1.5;
  color: var(--primary);
}

.next-list p {
  margin: 2px 0 0;
}

.next-list.list-small {
  gap: 16px;
}

.next-list.list-small li {
  padding-left: 40px;
}

.next-list.list-small li:before {
  width: 28px;
  height: 28px;
  font-size: 0.75em;
}

.next-list.list-small .title {
  font-size: 0.875em;
}

.next-list.list-small p {
  font-size: 0.875em;
  color: var(--muted);
}

.side-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px;
  border-radius: var(--radius-l);
  background-color: var(--white);
}

.side-card h3 {
  font-size: 1.375em;
  line-height: 1.36;
  margin: 0;
}

.side-card.side-dark {
  background-color: var(--primary);
  color: color-mix(in srgb, var(--white) 75%, transparent);
  gap: 16px;
}

.side-card.side-dark h3 {
  color: var(--white);
}

.side-card.side-dark p {
  font-size: 0.875em;
  margin: 0;
}

.side-card .accent-button {
  align-self: flex-start;
}

/* RESULT (potwierdzenie / błąd płatności) */

.result-module {
  background-color: var(--surface);
  padding: 64px 0 var(--section-space);
}

.result-module .result-wrap {
  max-width: 756px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.result-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 48px 56px;
  border-radius: var(--radius-xl);
  background-color: var(--white);
  box-shadow: var(--shadow-m);
  text-align: center;
}

.result-card .result-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  background-color: var(--success-light);
}

.result-card .result-icon.error {
  background-color: var(--error-light);
}

.result-card .result-icon .icon {
  width: 32px;
  height: 32px;
}

.result-card h1 {
  font-size: 2.75em;
  line-height: 1.18;
  margin: 0;
}

.result-card .lead {
  font-size: 1.125em;
  line-height: 1.67;
  max-width: 520px;
  margin: 0;
}

.result-card .buttons-module {
  justify-content: center;
  margin-top: 8px;
}

.order-facts {
  display: flex;
  gap: 12px;
  width: 100%;
  margin: 16px 0 0;
}

.order-facts .fact {
  flex: 1;
  padding: 14px 16px;
  border-radius: 16px;
  background-color: var(--surface);
  text-align: left;
}

.order-facts dt {
  font-size: 0.75em;
  font-weight: 500;
  color: var(--muted);
}

.order-facts dd {
  margin: 2px 0 0;
  font-weight: 600;
  color: var(--primary);
}

.result-steps {
  padding: 40px 56px;
  border-radius: var(--radius-xl);
  background-color: var(--white);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.result-steps h2 {
  font-size: 1.75em;
  line-height: 1.29;
  margin: 0;
}

.app-band {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 32px;
  border-radius: var(--radius-l);
  background-color: var(--lilac);
}

.app-band .icon-tile {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background-color: var(--white);
}

.app-band .text {
  flex: 1;
}

.app-band .title {
  display: block;
  font-weight: 600;
  color: var(--primary);
}

.app-band p {
  font-size: 0.875em;
  margin: 0;
}

.result-back {
  display: flex;
  justify-content: center;
}

/* Stan po wysłaniu zgłoszenia */
.form-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 40px 32px;
  border-radius: var(--radius-l);
  background-color: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--success);
  text-align: center;
}

.form-success .result-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--success-light);
}

.form-success h2 {
  font-size: 1.75em;
  line-height: 1.29;
  margin: 0;
}

.form-success p {
  font-size: 1.0625em;
  max-width: 480px;
  margin: 0;
}

.product-head .product-meta {
  display: none;
  font-size: 0.8125em;
  font-weight: 500;
  color: var(--muted);
  margin: 2px 0 0;
}

.field-half {
  max-width: calc(50% - 12px);
}

.coupon-row {
  display: flex;
  gap: 12px;
}

.coupon-row .input {
  flex: 1;
}

.result-module .result-wrap.result-narrow {
  max-width: 686px;
  gap: 20px;
}

/* Pasek płatności – tylko na telefonie */
.pay-bar {
  display: none;
}

.pay-bar .label {
  display: block;
  font-size: 0.6875em;
  font-weight: 500;
  color: var(--muted);
}

.pay-bar .amount {
  display: block;
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
}

.pay-bar .primary-button {
  flex: 1;
  min-height: 52px;
  padding: 0 20px;
}

/* UPLOAD */

.upload-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px;
  border-radius: var(--radius-m);
  border: 1.5px dashed var(--medium-dark);
  background-color: var(--surface);
  text-align: center;
  cursor: pointer;
  transition: border-color .25s ease, background-color .25s ease;
}

.upload-box:hover,
.upload-box.dragover {
  border-color: var(--plum);
}

.upload-box.upload-lilac {
  background-color: var(--lilac);
  border-color: var(--plum);
}

.upload-box input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.upload-box .upload-title {
  font-size: 0.875em;
  line-height: 1.57;
  color: var(--primary);
}

.upload-box .upload-hint {
  font-size: 0.75em;
  line-height: 1.5;
  font-weight: 500;
  color: var(--muted);
}

.file-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.file-list:empty {
  display: none;
}

.file-list .file-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--medium);
  border-radius: 14px;
}

.file-list .file-item .icon-tile {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

.file-list .file-item .icon-tile .icon {
  width: 18px;
  height: 18px;
}

.file-list .file-item .file-text {
  flex: 1;
  min-width: 0;
}

.file-list .file-item .name {
  display: block;
  font-size: 0.875em;
  line-height: 1.43;
  font-weight: 600;
  color: var(--primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-list .file-item .size {
  display: block;
  font-size: 0.75em;
  line-height: 1.5;
  font-weight: 500;
  color: var(--muted);
}

.file-list .file-item .file-ok {
  width: 18px;
  height: 18px;
}

.file-list .file-item .file-remove {
  display: inline-flex;
  padding: 6px;
  border-radius: 8px;
}

.file-list .file-item .file-remove:hover {
  background-color: var(--error-light);
}

/* KALENDARZ DAT (FLATPICKR) */

.input-icon .flatpickr-input[readonly] {
  cursor: pointer;
}

.flatpickr-calendar {
  width: 320px;
  padding: 12px;
  border: 1px solid var(--medium);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-l);
  font-family: inherit;
}

.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after,
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after {
  display: none;
}

.flatpickr-months {
  align-items: center;
  margin-bottom: 8px;
}

.flatpickr-months .flatpickr-month {
  height: 40px;
  color: var(--primary);
  fill: var(--primary);
}

.flatpickr-current-month {
  padding-top: 8px;
  font-size: 1em;
  font-weight: 700;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  font-weight: 700;
  color: var(--primary);
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  top: 12px;
  padding: 10px;
  border-radius: 10px;
  color: var(--primary);
  fill: var(--primary);
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  background-color: var(--surface);
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--accent-dark);
}

.flatpickr-innerContainer,
.flatpickr-rContainer,
.flatpickr-days,
.dayContainer {
  width: 100%;
  min-width: 0;
  max-width: none;
}

span.flatpickr-weekday {
  font-size: 0.75em;
  font-weight: 600;
  color: var(--muted);
}

.flatpickr-day {
  max-width: none;
  height: 40px;
  line-height: 38px;
  border-radius: 10px;
  font-weight: 500;
  color: var(--primary);
}

.flatpickr-day:hover,
.flatpickr-day:focus {
  border-color: var(--surface);
  background-color: var(--surface);
}

.flatpickr-day.today {
  border-color: var(--medium-dark);
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
  border-color: var(--primary);
  background-color: var(--primary);
  color: var(--white);
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: var(--medium-dark);
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  background-color: transparent;
  border-color: transparent;
}

/* KOMUNIKATY I STANY FORMULARZY */

.form-message {
  padding: 14px 18px;
  border-radius: var(--radius-s);
  background-color: var(--success-light);
  font-size: 0.875em;
  line-height: 1.57;
  font-weight: 500;
  color: var(--primary);
}

.form-message.error {
  background-color: var(--error-light);
}

.block-note.info-note {
  background-color: var(--error-light);
  color: var(--primary);
  margin-top: 4px;
}

.block-note.info-note .icon {
  color: var(--error);
}

.drug-suggestions li.redirect {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.drug-suggestions li.redirect .hint {
  font-size: 0.8125em;
  font-weight: 600;
  color: var(--accent-dark);
}

.drug-picker.has-error .add-drug,
.upload-field.has-error .upload-box {
  border-color: var(--error);
}

.upload-box.dragover {
  border-color: var(--accent);
  background-color: color-mix(in srgb, var(--accent-light) 40%, var(--white));
}

.file-list .file-item.error {
  box-shadow: inset 0 0 0 1px var(--error);
}

.file-list .file-item.error .size {
  color: var(--error);
}

.file-list .file-item .size.success {
  color: var(--success);
}

.calendar.loading .day-list,
.calendar.loading .hour-list {
  opacity: .45;
  pointer-events: none;
}

.calendar.has-error .day-list .day:not(:disabled),
.calendar.has-error .hour-list .hour {
  box-shadow: inset 0 0 0 1.5px var(--error);
}

.calendar .week-nav button:disabled {
  opacity: .35;
  cursor: default;
}

button.loading {
  opacity: .7;
  pointer-events: none;
}

/* =========================================================
   BEAVER BUILDER
   ========================================================= */

/* Wiersz o stałej szerokości treści zachowuje się jak .container */
.fl-row-content.fl-row-fixed-width {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: calc(var(--bs-gutter-x, 24px) * .5);
  padding-right: calc(var(--bs-gutter-x, 24px) * .5);
}

.fl-row-content.fl-row-full-width {
  max-width: none;
  padding: 0;
}

.fl-module-content,
.fl-module:where(.fl-module:not(:has(> .fl-module-content))) {
  margin: 0;
}

.fl-row-content-wrap {
  padding: 0;
}

.fl-col-group-equal-height .fl-col-content {
  height: 100%;
}

body.fl-builder-edit [data-aos] {
  opacity: 1 !important;
  transform: none !important;
}

/* Kolumna boczna formularza i kontaktu w osobnej kolumnie BB */
.fl-col .order-aside,
.fl-col .contact-aside,
.fl-col .content-aside {
  width: 100%;
}

.service-filter + .service-list {
  margin-top: 32px;
}

.letter-list a[aria-disabled="true"] {
  color: var(--medium-dark);
  pointer-events: none;
}

.contact-form .js-form-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* =========================================================
   WORDPRESS I WOOCOMMERCE
   ========================================================= */

/* Proste podmenu (dwa poziomy) – lista pod pozycją menu */
@media (min-width: 1181px) {
  header .main-nav .menu > li:has(> .menu-simple) {
    position: relative;
  }

  .mega-menu.menu-simple {
    left: 50%;
    width: auto;
    min-width: 260px;
    border-top: 0;
    border-radius: var(--radius-m);
    transform: translate(-50%, -6px);
  }

  .menu-item-has-children.open > .mega-menu.menu-simple {
    transform: translate(-50%, 0);
  }

  .mega-menu.menu-simple .container {
    max-width: none;
    padding: 8px;
  }
}

.mega-menu.menu-simple .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mega-menu.menu-simple .sub-menu a {
  display: block;
  padding: 10px 14px;
  border-radius: var(--radius-s);
  font-weight: 500;
  color: var(--primary);
  text-decoration: none;
  white-space: nowrap;
}

.mega-menu.menu-simple .sub-menu a:hover {
  background-color: var(--surface);
}

/* Paginacja generowana przez WordPress */
.pagination-container .nav-links {
  display: contents;
}

.pagination-container .current {
  background-color: var(--primary);
  color: var(--white);
}

/* Treść z edytora */
.article-content .alignleft { float: left; margin: 0 24px 16px 0; }
.article-content .alignright { float: right; margin: 0 0 16px 24px; }
.article-content .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.article-content img { max-width: 100%; height: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { margin-top: 8px; font-size: 0.8125em; color: var(--muted); }

/* Contact Form 7 – pola jak w formularzach motywu */
.wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.wpcf7 .screen-reader-response {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  border: 0;
}

.wpcf7 .hidden-fields-container {
  display: none;
}

.wpcf7-form-control-wrap {
  display: block;
}

.wpcf7-not-valid-tip {
  display: block;
  margin-top: 8px;
  font-size: 0.75em;
  line-height: 1.5;
  font-weight: 500;
  color: var(--error);
}

.wpcf7-form .input.wpcf7-not-valid,
.wpcf7-form .input.wpcf7-not-valid:hover {
  border-color: var(--error);
}

.wpcf7-acceptance .wpcf7-list-item {
  display: block;
  margin: 0;
}

.wpcf7-acceptance label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  font-size: 0.875em;
  line-height: 1.57;
  font-weight: 400;
  color: var(--text);
  cursor: pointer;
}

.wpcf7-acceptance input {
  -webkit-appearance: none;
  appearance: none;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin: 0;
  border-radius: 6px;
  background: var(--white) center / 14px no-repeat;
  box-shadow: inset 0 0 0 1.5px var(--medium-dark);
  cursor: pointer;
  transition: background-color .2s ease, box-shadow .2s ease;
}

.wpcf7-acceptance input:checked {
  background-color: var(--primary);
  background-image: url(../img/icon_ptaszek-biala.svg);
  box-shadow: none;
}

.wpcf7-acceptance input:focus-visible {
  outline: 2px solid var(--primary-medium);
  outline-offset: 2px;
}

.wpcf7-acceptance.wpcf7-not-valid input {
  box-shadow: inset 0 0 0 1.5px var(--error);
}

.wpcf7-acceptance a {
  color: var(--accent-dark);
}

.wpcf7-form .primary-button {
  align-self: flex-start;
}

.wpcf7-form.submitting .wpcf7-submit {
  opacity: .7;
  pointer-events: none;
}

.wpcf7-spinner {
  display: none;
}

.wpcf7-response-output {
  margin: 0;
  padding: 14px 18px;
  border-radius: var(--radius-s);
  background-color: var(--error-light);
  font-size: 0.875em;
  line-height: 1.57;
  font-weight: 500;
  color: var(--primary);
}

.wpcf7-form.init .wpcf7-response-output,
.wpcf7-form.resetting .wpcf7-response-output,
.wpcf7-form.submitting .wpcf7-response-output,
.wpcf7-form.sent .wpcf7-response-output:empty {
  display: none;
}

.wpcf7-form.sent .wpcf7-response-output {
  background-color: var(--success-light);
}

/* Komunikaty WooCommerce */
.woocommerce-NoticeGroup,
.woocommerce-notices-wrapper:not(:empty) {
  margin-bottom: 20px;
}

.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
  list-style: none;
  margin: 0 0 16px;
  padding: 16px 20px;
  border-radius: var(--radius-m);
  font-size: 0.875em;
  line-height: 1.57;
  color: var(--primary);
}

.woocommerce-error { background-color: var(--error-light); }
.woocommerce-message { background-color: var(--success-light); }
.woocommerce-info { background-color: var(--surface); }
.woocommerce-error li + li { margin-top: 4px; }

.error-summary .notice-list {
  list-style: disc;
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 0.8125em;
  line-height: 1.5;
}

/* Metody płatności */
.wc_payment_methods {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wc_payment_methods .payment_box {
  flex-basis: 100%;
  margin-top: 8px;
  font-size: 0.8125em;
  line-height: 1.5;
  color: var(--muted);
}

.wc_payment_methods .payment_box p:last-child {
  margin-bottom: 0;
}

.wc_payment_methods .payment_box fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.woocommerce-checkout-payment .place-order {
  display: none;
}

/* Pola faktury dodane przez wtyczkę */
.invoice-card .form-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 16px;
}

.invoice-card .form-row label {
  font-size: 0.875em;
  line-height: 1.43;
  font-weight: 600;
  color: var(--primary);
}

.invoice-card .form-row label.checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  cursor: pointer;
}

.invoice-card .form-row .required {
  color: var(--accent-dark);
  text-decoration: none;
}

.invoice-card .form-row .optional {
  color: var(--muted);
  font-weight: 500;
}

.invoice-card .form-row .input-text,
.invoice-card .form-row select {
  display: block;
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 1.5px solid var(--medium-dark);
  border-radius: var(--radius-s);
  background-color: var(--white);
  font-size: 1em;
  color: var(--primary);
  outline: none;
}

.invoice-card .form-row .input-text:focus,
.invoice-card .form-row select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

.invoice-card .form-row.woocommerce-invalid .input-text {
  border-color: var(--error);
}

.invoice-card .form-row:last-child {
  margin-bottom: 0;
}

/* =========================================================
   BREAKPOINTY – szerokości kontenera
   ========================================================= */

@media (min-width: 576px) {
  .container, .fl-row-content.fl-row-fixed-width { max-width: 540px; }
}

@media (min-width: 768px) {
  .container, .fl-row-content.fl-row-fixed-width { max-width: 720px; }
}

@media (min-width: 992px) {
  .container, .fl-row-content.fl-row-fixed-width { max-width: 960px; }
}

@media (min-width: 1200px) {
  .container, .fl-row-content.fl-row-fixed-width { max-width: 1140px; }
}

@media (min-width: 1400px) {
  .container, .fl-row-content.fl-row-fixed-width { max-width: 1224px; }
}

@media (min-width: 1600px) {
  .container, .fl-row-content.fl-row-fixed-width { max-width: 1464px; }
}

/* =========================================================
   RWD – od największego do najmniejszego
   ========================================================= */

/* Szerokie ekrany – większa ilustracja w hero, tekst artykułów w wygodnej szerokości */
@media (min-width: 1600px) {
  .hero-module { padding: 64px 0 80px; }
  .hero-module .hero-text { max-width: 640px; }
  .hero-module .hero-visual { transform: scale(1.12); transform-origin: right center; margin: 30px 0; }
  .content-layout .content-main.article-content,
  .content-layout .content-main .article-content { max-width: 900px; }
  .seo-hero .hero-text { max-width: 820px; }
}

@media (max-width: 1400px) {
  .hero-module .hero-visual { transform: scale(.9); transform-origin: right center; }
}

/* Przełączenie na menu mobilne */
@media (max-width: 1180px) {
  .only-desktop { display: none !important; }
  .only-mobile { display: inline-flex !important; }

  header .top-bar ul li:not(:last-child) { display: none; }

  header .logo-bar > .container { min-height: 68px; }
  header .logo img { height: 28px; }

  .navbar-toggler {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1.5px var(--medium-dark);
  }

  /* Panel menu wysuwany z prawej */
  header .main-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 480px;
    height: 100vh;
    height: 100dvh;
    display: block;
    background-color: var(--white);
    padding: 0 16px 32px;
    z-index: 101;
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .35s ease, visibility 0s linear .35s;
    box-shadow: var(--shadow-l);
  }

  header .main-nav.open {
    transform: none;
    visibility: visible;
    transition: transform .35s ease, visibility 0s;
  }

  header .nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 100;
    background-color: color-mix(in srgb, var(--primary) 45%, transparent);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility 0s linear .3s;
  }

  body.nav-open { overflow: hidden; }

  body.nav-open header .nav-overlay {
    opacity: 1;
    visibility: visible;
    transition: opacity .3s ease, visibility 0s;
  }

  header .main-nav .mobile-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 2;
    min-height: 68px;
    margin: 0 -16px 8px;
    padding: 0 16px;
    background-color: var(--white);
    border-bottom: 1px solid var(--medium);
  }

  header .main-nav .nav-close {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1.5px var(--medium-dark);
  }

  header .main-nav .menu {
    flex-direction: column;
    gap: 0;
  }

  header .main-nav .menu > li {
    display: block;
    border-bottom: 1px solid var(--medium);
  }

  header .main-nav .menu > li > a {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 18px 4px;
    font-size: 1em;
  }

  header .main-nav .menu > li > a:after {
    content: "";
    width: 20px;
    height: 20px;
    background: url(../img/icon_dalej-szara.svg) center / contain no-repeat;
  }

  header .main-nav .menu > .menu-item-has-children > a:after {
    width: 20px;
    height: 20px;
    background-image: url(../img/icon_plus.svg);
  }

  header .main-nav .menu > .menu-item-has-children.open > a:after {
    background-image: url(../img/icon_minus-ciemnokoralowa.svg);
    transform: none;
  }

  .mega-menu {
    position: static;
    display: none;
    box-shadow: none;
    border: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }

  .mega-menu:before { display: none; }

  .menu-item-has-children.open > .mega-menu { display: block; }

  .mega-menu .container { max-width: none; padding: 0; }
  .mega-menu .mega-content { display: block; padding: 0 4px 16px; }
  .mega-menu .mega-columns { flex-direction: column; gap: 14px; }
  .mega-menu .mega-title { color: var(--muted); font-size: 0.75em; margin-bottom: 4px; }
  .mega-menu .mega-columns .sub-menu { gap: 0; }
  .mega-menu .mega-columns .sub-menu a { padding: 6px 0; }
  .mega-menu .mega-columns .sub-menu a:hover { background-color: transparent; }
  .mega-menu .mega-columns .name { font-size: 1em; font-weight: 500; }
  .mega-menu .icon-tile,
  .mega-menu .mega-columns .price,
  .mega-menu .mega-help,
  .mega-menu .mega-footer { display: none; }

  header .main-nav .mobile-nav-foot {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
  }

  header .main-nav .app-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--radius-s);
    background-color: var(--lilac);
    font-size: 0.875em;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
  }

  .hero-module .container { flex-direction: column; align-items: flex-start; }
  .hero-module .hero-visual { display: none; }

  .service-list .service-item { width: calc(33.333% - 16px); }

  .dark-panel,
  .highlight-panel { flex-direction: column; align-items: stretch; }

  .stat-list { width: 100%; flex-direction: row; }
  .stat-list .stat-item { flex: 1; }

  .upload-preview { width: 100%; }

  .app-panel .phone { display: none; }

  .faq-module { flex-direction: column; gap: 40px; }
  .faq-module .faq-aside { width: 100%; }

  /* Zamówienie */
  .product-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .order-layout { flex-direction: column; align-items: stretch; }
  .order-layout .order-aside { width: 100%; position: static; }

  /* Podstrony treściowe */
  .content-layout { flex-direction: column; gap: 32px; }
  .content-layout .content-aside,
  .content-layout .content-aside.aside-narrow { width: 100%; position: static; }
  .seo-hero { flex-direction: column; align-items: stretch; gap: 32px; }
  .order-card { width: 100%; max-width: 520px; }
  .contact-layout { flex-direction: column; align-items: stretch; }
  .contact-layout .contact-aside { width: 100%; }
  .featured-article { flex-direction: column; align-items: stretch; gap: 28px; }
  .featured-article .image { width: 100%; }
  .service-list.list-3 .service-item { width: calc(50% - 12px); }
}

@media (min-width: 1181px) {
  /* Desktop – podmenu rozwijane najechaniem */
  header .main-nav .menu > li > a:hover { color: var(--accent-dark); }

  header .main-nav .menu > .menu-item-has-children:hover > a,
  header .main-nav .menu > .menu-item-has-children:has(:focus-visible) > a {
    color: var(--accent-dark);
  }

  header .main-nav .menu > .menu-item-has-children:hover > a:after,
  header .main-nav .menu > .menu-item-has-children:has(:focus-visible) > a:after {
    background-image: url(../img/icon_rozwin-ciemnokoralowa.svg);
    transform: rotate(180deg);
  }

  .menu-item-has-children:hover > .mega-menu,
  .menu-item-has-children:has(:focus-visible) > .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .25s ease, transform .25s ease, visibility 0s;
  }
}

/* Układy 4-kolumnowe → 2-kolumnowe */
@media (max-width: 991px) {
  h1, .h1 { font-size: 2.75em; }
  h2, .h2 { font-size: 2.25em; }

  .service-list .service-item { width: calc(50% - 12px); }

  .step-list { flex-direction: column; }

  .review-list { flex-direction: column; }

  .article-list .article-item { width: calc(50% - 12px); }

  .footer-columns { flex-wrap: wrap; gap: 40px; }
  .footer-column.column-brand { flex: 0 0 100%; }
  .footer-column { flex: 0 0 calc(33.333% - 27px); }

  /* Zamówienie */
  .product-head h1 { font-size: 2.25em; }
  .path-list { flex-direction: column; gap: 8px; }
  .order-steps .step .text { display: none; }
  .result-card { padding: 40px 32px; }
  .result-card h1 { font-size: 2.25em; }
  .result-steps { padding: 32px; }

  /* Podstrony treściowe */
  .process-list,
  .after-list,
  .docs-panel .doc-list { flex-direction: column; gap: 16px; }
  .feature-cards { flex-wrap: wrap; }
  .feature-cards .feature-card { flex: 0 0 calc(50% - 10px); }
  .drug-cards .drug-card { width: calc(50% - 8px); }
  .mini-steps { flex-wrap: wrap; }
  .article-content .mini-steps li { flex: 0 0 calc(50% - 6px); }
  .docs-panel { padding: 40px 32px; }
}

/* Wszystko na 100%, zmiana kolejności flex */
@media (max-width: 767px) {
  :root { --section-space: 48px; }

  h1, .h1 { font-size: 2.25em; line-height: 1.22; letter-spacing: -0.015em; }
  h2, .h2 { font-size: 1.875em; line-height: 1.27; }
  h3, .h3 { font-size: 1.375em; line-height: 1.36; }

  .section-title { margin-bottom: 24px; }
  .section-title p { font-size: 1em; }

  .section-head { flex-direction: column; align-items: flex-start; margin-bottom: 24px; }

  .hero-module { padding: 28px 0 36px; }
  .hero-module .hero-text { gap: 20px; }
  .hero-module .hero-text .lead { font-size: 1em; }
  .hero-module .buttons-module { width: 100%; }
  .hero-module .buttons-module .primary-button { width: 100%; }
  .hero-module .buttons-module .secondary-button { display: none; }
  .hero-module .quick-services { width: 100%; }
  .quick-service-list { flex-direction: column; }
  .quick-service-list .quick-service-item { width: 100%; }

  .service-list { gap: 10px; }
  .service-list .service-item { width: 100%; padding: 14px; gap: 14px; border-radius: var(--radius-m); }
  .service-list .service-item .top .icon-tile { width: 48px; height: 48px; border-radius: 14px; }
  .service-list .service-item .text p,
  .service-list .service-item > .badge { display: none; }
  .service-list .service-item .text h3 { font-size: 1em; margin: 0; }
  .service-list .service-item .top { order: 0; }
  .service-list .service-item .price { font-size: 1em; }
  .service-list .service-item .primary-button { min-height: 44px; font-size: 0.875em; }
  .service-list .service-help { display: none; }

  .step-list .step-item { padding: 18px; border-radius: 20px; flex-direction: row; gap: 14px; }
  .step-list .step-item .top .icon { display: none; }

  .notes-center { margin-top: 16px; }
  .info-note { border-radius: var(--radius-m); padding: 14px; }

  .dark-panel,
  .highlight-panel,
  .app-panel { border-radius: 28px; padding: 24px; gap: 20px; }
  .app-panel .panel-text { padding: 0; }
  .stat-list { flex-direction: column; gap: 8px; }
  .stat-list .stat-item { flex: none; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; }
  .stat-list .stat-item .number { font-size: 1.375em; flex-shrink: 0; min-width: 84px; }
  .stat-list .stat-item p { font-size: 0.75em; }
  .benefit-list .benefit-item { width: 100%; flex-direction: row; align-items: center; }
  .benefit-list .benefit-item p { display: none; }
  .highlight-panel .accent-button,
  .highlight-panel .primary-button,
  .highlight-panel .secondary-button { width: 100%; }
  .upload-preview { display: none; }
  .check-list li { font-size: 0.875em; }
  .store-list { width: 100%; }
  .store-list a { flex: 1; justify-content: center; }

  .review-list .review-item { padding: 20px; }
  .review-list .review-item blockquote { font-size: 1em; }

  .article-list .article-item { width: 100%; }

  .faq-list .faq-question { padding: 16px; font-size: 0.875em; }
  .faq-list .faq-answer { padding: 0 16px 16px; }

  .cta-band { flex-direction: column; align-items: flex-start; padding: 32px 24px; border-radius: 28px; }

  footer { padding: 40px 0 32px; }
  .footer-columns { flex-direction: column; gap: 28px; }
  .footer-column,
  .footer-column.column-brand { flex: 0 0 auto; }
  .footer-column .footer-menu { flex-direction: row; flex-wrap: wrap; gap: 8px 14px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  /* Zamówienie */
  .product-header { padding: 16px 0 20px; }
  .product-header .breadcrumbs,
  .product-head .lead,
  .feature-list { display: none; }
  .product-head .product-title { gap: 14px; }
  .product-head .icon-tile { width: 48px; height: 48px; border-radius: 14px; }
  .product-head .icon-tile .icon { width: 24px; height: 24px; }
  .product-head h1 { font-size: 1.375em; line-height: 1.36; margin: 0; }
  .product-head .product-meta { display: block; }
  .path-list { margin-top: 16px; }

  .order-module { padding: 16px 0 120px; }
  .order-steps {
    gap: 8px;
    padding: 0;
    margin-bottom: 16px;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    counter-reset: step;
  }
  .order-steps .step-line,
  .order-steps .step-circle { display: none; }
  .order-steps .step {
    flex: 1;
    display: block;
    padding-bottom: 8px;
    border-bottom: 3px solid var(--medium);
    counter-increment: step;
  }
  .order-steps .step .title { font-size: 0.6875em; font-weight: 500; }
  .order-steps .step .title:before { content: counter(step) ". "; }
  .order-steps .step.active,
  .order-steps .step.done { border-color: var(--primary); }
  .order-steps .step.active .title { font-weight: 700; }

  .order-layout .order-aside.hide-mobile,
  .form-card.next-card,
  .next-step.divided .title,
  .next-step.divided .text { display: none; }
  .order-layout .order-form { gap: 16px; }
  .form-card { padding: 20px 16px; gap: 18px; border-radius: 20px; }
  .form-card-head h2 { font-size: 1.0625em; line-height: 1.5; }
  .form-card-head p { font-size: 0.75em; line-height: 1.5; }
  .form-card .form-subtitle.big { font-size: 1.125em; }
  .option-card,
  .option-list.option-list-3 .option-card { width: 100%; }
  .option-list.hide-desc-mobile .desc { display: none; }
  .sub-panel { padding: 16px; gap: 16px; }
  .field-row { flex-direction: column; gap: 16px; }
  .question { flex-direction: column; align-items: flex-start; gap: 10px; }
  .question .question-text { min-width: 0; font-size: 0.9375em; }
  .upload-box.upload-row { padding: 16px; gap: 12px; }
  .upload-box .upload-icon { width: auto; height: auto; background-color: transparent; }
  .upload-box .upload-button { display: none; }
  .drug-editor .field-amount { flex: auto; }
  .day-list { gap: 4px; }
  .day-list .day { border-radius: 12px; padding: 8px 0; }
  .day-list .day .day-name { font-size: 0.625em; }
  .day-list .day .day-number { font-size: 1.125em; }
  .hour-list .hour { width: calc(25% - 6px); }
  .next-step { flex-direction: column; align-items: stretch; }
  .next-step .primary-button { width: 100%; }
  .field-half { max-width: none; }
  .coupon-row { flex-direction: column; }

  .pay-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background-color: var(--white);
    box-shadow: 0 -8px 24px color-mix(in srgb, var(--primary) 10%, transparent);
  }

  .result-module { padding: 32px 0 64px; }
  .result-module .result-wrap { gap: 20px; }
  .result-card { padding: 32px 20px; border-radius: var(--radius-l); }
  .result-card h1 { font-size: 1.75em; }
  .result-card .lead { font-size: 1em; }
  .order-facts { flex-direction: column; gap: 8px; }
  .result-steps { padding: 28px 20px; border-radius: var(--radius-l); }
  .result-steps h2 { font-size: 1.375em; }
  .app-band { flex-direction: column; align-items: flex-start; padding: 24px 20px; }

  /* Podstrony treściowe */
  .page-header .breadcrumbs { margin-bottom: 12px; }
  .search-field { margin-top: 20px; }
  .toc .toc-title { display: none; }
  .toc-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-weight: 600;
    color: var(--primary);
  }
  .toc-toggle .icon { width: 18px; height: 18px; transition: transform .25s ease; }
  .toc-toggle.open .icon { transform: rotate(180deg); }
  .toc { padding: 16px 20px; }
  .toc .toc-list { display: none; }
  .toc.toc-columns .toc-list { grid-template-columns: 1fr; }
  .article-content h2 { font-size: 1.375em; margin-top: 32px; }
  .cta-banner { flex-direction: column; align-items: flex-start; padding: 24px 20px; gap: 16px; }
  .cta-banner .icon-tile { width: 48px; height: 48px; border-radius: 14px; }
  .cta-banner .title { font-size: 1.125em; }
  .cta-banner .action { align-items: flex-start; width: 100%; }
  .cta-banner .action .accent-button { width: 100%; }
  .form-banner { flex-direction: column; align-items: flex-start; }
  .article-content .mini-steps li { flex: 0 0 100%; }
  .service-list.list-3 .service-item,
  .drug-cards .drug-card,
  .drug-cards.cards-2 .drug-card,
  .feature-cards .feature-card { width: 100%; flex: 0 0 100%; }
  .info-table .row-item { flex-direction: column; gap: 2px; }
  .info-table dt { width: auto; }
  .docs-panel { padding: 28px 20px; border-radius: var(--radius-l); }
  .help-band { flex-direction: column; align-items: flex-start; }
  .contact-form { padding: 24px 20px; }
  .contact-list .contact-item { padding: 20px; }
  .featured-article h2 { font-size: 1.75em; }
  .post-header h1,
  .drug-head h1 { font-size: 2em; }
  .post-meta { gap: 12px 24px; }
  .post-image { margin-bottom: 32px; }
  .error-module { padding: 56px 0 72px; }
  .error-module .error-code { font-size: 6em; }
  .error-module h1 { font-size: 1.75em; }
  .error-module .quick-services { display: flex; }
  .expert-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .expert-head .avatar { width: 80px; height: 80px; }
  .order-card { padding: 20px; }
  .letter-list { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; }
  .letter-list a { flex-shrink: 0; }

  /* iOS powiększa stronę przy polach z czcionką poniżej 16 px – wszystkie pola tekstowe min. 16 px */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  input[type="password"],
  input[type="url"],
  input[type="date"],
  select,
  textarea {
    font-size: 16px;
  }
}

@media (max-width: 575px) {
  .container { padding-left: 16px; padding-right: 16px; }
}

@media (max-width: 460px) {

  .hour-list .hour { width: calc(33.333% - 6px); }
}