/* Klasa Mistrzów — strona główna (pakiet home-v1).
   Wszystko pod .km-home; ładowane przez wtyczkę tylko na stronie z tą klasą. */

@font-face {
  font-family: "KM Manrope";
  src: url("../fonts/manrope-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

.km-home {
  --ink: #2c2638;
  --ink-soft: #4a4357;
  --lilac: #f1edf8;
  --lilac-deep: #e4dcf1;
  --citron: #dff57a;
  --citron-deep: #c2d95a;
  --paper: #fcfbfd;
  --white: #ffffff;
  --muted: #5f586c;
  --line: #ded7e7;
  --pen: #3b3486;

  --container: 1240px;
  --gutter: clamp(20px, 4vw, 56px);
  --edge: max(var(--gutter), (100cqw - var(--container)) / 2);
  --section: clamp(64px, 8vw, 112px);
  --gap: clamp(28px, 4.4vw, 64px);
  --top-h: 76px;
  --admin: var(--wp-admin--admin-bar--height, 0px);

  container: kmhome / inline-size;
  color: var(--ink);
  background: var(--paper);
  font-family: "KM Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: clamp(16px, 0.35vw + 13px, 18px);
  font-weight: 450;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- reset w obrębie strony (Flatsome stylizuje elementy globalnie) --- */
.km-home *, .km-home *::before, .km-home *::after { box-sizing: border-box; }
.km-home :where(h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, figcaption, details, summary, aside) { margin: 0; padding: 0; }
.km-home :where(ul, ol) { list-style: none; }
.km-home :where(h1, h2, h3, h4) { font-family: inherit; color: inherit; text-transform: none; font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; }
.km-home :where(p, li) { font-size: inherit; line-height: inherit; color: inherit; }
.km-home a { color: inherit; text-decoration: none; }
.km-home a:hover { color: inherit; }
.km-home img { display: block; max-width: 100%; height: auto; }
.km-home mark { background: none; color: inherit; padding: 0; }
.km-home blockquote { border: 0; font-style: normal; font-size: inherit; }
.km-home button { all: unset; box-sizing: border-box; cursor: pointer; }
.km-home summary { cursor: pointer; list-style: none; }
.km-home summary::-webkit-details-marker { display: none; }
.km-home strong { font-weight: 750; }
.km-home :where(a, button, summary, [tabindex]):focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.km-home [id] { scroll-margin-top: calc(var(--top-h) + var(--admin) + 8px); }
.km-home .kmh-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.km-home .kmh-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.km-home .kmh-c { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.km-home .kmh-ico { width: 18px; height: 18px; flex: none; }

.km-home h2 { font-size: clamp(30px, 2.6vw + 12px, 48px); text-wrap: balance; }
.km-home h3 { font-size: clamp(20px, 0.6vw + 15px, 24px); letter-spacing: -0.02em; line-height: 1.2; }

/* --- przyciski i linki --- */
.km-home .kmh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 12px 26px;
  border: 2px solid var(--ink); border-radius: 8px;
  background: var(--ink); color: var(--white);
  font-weight: 700; font-size: 16px; line-height: 1.25; letter-spacing: 0; text-transform: none;
  transition: background-color .15s ease, color .15s ease;
}
.km-home .kmh-btn:hover { background: #3f3651; border-color: #3f3651; color: var(--white); }
.km-home .kmh-btn--sm { min-height: 44px; padding: 8px 20px; font-size: 15px; }
.km-home .kmh-btn--block { display: flex; width: 100%; }
.km-home .kmh-btn--citron { background: var(--citron); border-color: var(--citron); color: var(--ink); }
.km-home .kmh-btn--citron:hover { background: #ecfba6; border-color: #ecfba6; color: var(--ink); }

.km-home .kmh-link {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font-weight: 700; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--citron-deep); text-decoration-thickness: 3px; text-underline-offset: 7px;
}
.km-home .kmh-link:hover { text-decoration-color: var(--ink); }
.km-home .kmh-link .kmh-ico { transition: transform .15s ease; }
.km-home .kmh-link:hover .kmh-ico { transform: translateX(3px); }

.km-home .kmh-eyebrow, .km-home .kmh-tag {
  font-size: 13px; font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft);
}

/* --- skip link --- */
.km-home .kmh-skip { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 12px 18px; background: var(--ink); color: var(--white); border-radius: 8px; font-weight: 700; }
.km-home .kmh-skip:focus { top: calc(var(--admin) + 12px); color: var(--white); }

/* --- znak marki --- */
.km-home .kmh-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); }
.km-home .kmh-brand__mark { display: inline-flex; gap: 2px; }
.km-home .kmh-brand__mark svg { width: 15px; height: 23px; fill: var(--ink); }
.km-home .kmh-brand__mark svg:first-child { fill: var(--citron-deep); }
.km-home .kmh-brand__name { font-family: Georgia, "Liberation Serif", "Times New Roman", serif; font-size: 25px; letter-spacing: -0.01em; line-height: 1; white-space: nowrap; }

/* --- nagłówek --- */
.km-home .kmh-top {
  position: sticky; top: var(--admin); z-index: 50;
  background: var(--paper); border-bottom: 1px solid var(--line);
}
.km-home .kmh-top__in { display: flex; align-items: center; gap: 24px; min-height: var(--top-h); }
.km-home .kmh-menu { display: flex; align-items: center; flex: 1; gap: 24px; }
.km-home .kmh-menu__list { display: flex; gap: clamp(16px, 2.4vw, 36px); margin-inline: auto; }
.km-home .kmh-menu__list a, .km-home .kmh-menu__zone { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--ink); }
.km-home .kmh-menu__list a:hover, .km-home .kmh-menu__zone:hover { text-decoration: underline; text-decoration-color: var(--citron-deep); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.km-home .kmh-menu__end { display: flex; align-items: center; gap: 24px; }
.km-home .kmh-menu-btn { display: none; }

@media (max-width: 1179px) {
  .km-home { --top-h: 68px; }
  .km-home .kmh-top__in { flex-wrap: wrap; justify-content: space-between; gap: 0 16px; }
  .km-home .kmh-menu { flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 8px; padding-bottom: 20px; }
  .km-home .kmh-menu__list { flex-direction: column; gap: 0; margin: 0; }
  .km-home .kmh-menu__list a, .km-home .kmh-menu__zone { font-size: 19px; min-height: 52px; width: 100%; border-bottom: 1px solid var(--line); }
  .km-home .kmh-menu__end { flex-direction: column; align-items: stretch; gap: 16px; }
  .km-home .kmh-menu__end .kmh-btn { min-height: 52px; font-size: 16px; }
  .km-js .km-home .kmh-menu-btn {
    display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px;
    border: 2px solid var(--ink); border-radius: 8px; font-weight: 700; font-size: 16px; color: var(--ink);
  }
  .km-home .kmh-menu-btn__bars, .km-home .kmh-menu-btn__bars::before, .km-home .kmh-menu-btn__bars::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
  .km-home .kmh-menu-btn__bars { position: relative; }
  .km-home .kmh-menu-btn__bars::before, .km-home .kmh-menu-btn__bars::after { content: ""; position: absolute; left: 0; }
  .km-home .kmh-menu-btn__bars::before { top: -6px; }
  .km-home .kmh-menu-btn__bars::after { top: 6px; }
  .km-home .kmh-menu-btn[aria-expanded="true"] .kmh-menu-btn__bars { background: transparent; }
  .km-home .kmh-menu-btn[aria-expanded="true"] .kmh-menu-btn__bars::before { transform: translateY(6px) rotate(45deg); }
  .km-home .kmh-menu-btn[aria-expanded="true"] .kmh-menu-btn__bars::after { transform: translateY(-6px) rotate(-45deg); }
  .km-js .km-home .kmh-top:not([data-menu-open="true"]) .kmh-menu { display: none; }
  .km-js .km-home .kmh-top[data-menu-open="true"] .kmh-menu {
    max-height: calc(100vh - var(--top-h) - var(--admin)); max-height: calc(100dvh - var(--top-h) - var(--admin)); overflow-y: auto;
  }
}

/* --- hero --- */
.km-home .kmh-hero {
  --hero-text: clamp(400px, 40cqw, 580px);
  --hero-gap: clamp(32px, 4cqw, 64px);
  display: grid;
  grid-template-columns: var(--hero-text) minmax(0, 1fr);
  column-gap: var(--hero-gap);
  padding-left: var(--edge);
  background: var(--lilac);
  min-height: clamp(460px, (100cqw - var(--edge) - var(--hero-text) - var(--hero-gap)) / 1.25, 700px);
}
.km-home .kmh-hero__text { align-self: center; padding-block: clamp(48px, 5cqw, 88px); }
.km-home .kmh-hero h1 {
  margin-top: 22px;
  font-size: clamp(44px, var(--hero-text) / 8.1, 86px);
  line-height: 1.03; letter-spacing: -0.045em; font-weight: 800;
}
.km-home .kmh-hero h1 span { display: block; }
.km-home .kmh-hero__lead { margin-top: 24px; max-width: 34em; font-size: clamp(17px, 0.3vw + 15px, 19px); color: var(--ink-soft); }
.km-home .kmh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 32px; }
.km-home .kmh-hero__media { position: relative; min-height: 100%; }
.km-home .kmh-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 68% 55%; }
.km-home .kmh-hero__note { position: absolute; left: clamp(-64px, -3.4cqw, -28px); top: clamp(56px, 7cqw, 104px); width: clamp(160px, 14cqw, 212px); transform: rotate(-5deg); }
.km-home .kmh-hero__bubble { display: block; width: 100%; height: auto; fill: var(--citron); }
.km-home .kmh-hero__note p {
  position: absolute; left: 10%; right: 4%; top: 17%;
  font-family: "Segoe Print", "Bradley Hand", "Comic Neue", Georgia, serif; font-style: italic;
  font-size: clamp(15px, 1.15cqw, 18px); font-weight: 600; line-height: 1.4; color: var(--ink); transform: rotate(-3deg);
}
.km-home .kmh-hero__rays { position: absolute; width: 46%; left: -34%; top: -14%; fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }

@media (prefers-reduced-motion: no-preference) {
  .km-home .kmh-hero__text > * { animation: kmh-rise .7s cubic-bezier(.2, .7, .2, 1) both; }
  .km-home .kmh-hero__text > :nth-child(2) { animation-delay: .06s; }
  .km-home .kmh-hero__text > :nth-child(3) { animation-delay: .12s; }
  .km-home .kmh-hero__text > :nth-child(4) { animation-delay: .18s; }
  .km-home .kmh-hero__note { animation: kmh-pop .6s .35s cubic-bezier(.2, .9, .3, 1.2) both; }
  html:has(.km-home) { scroll-behavior: smooth; }
}
@keyframes kmh-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes kmh-pop { from { opacity: 0; transform: rotate(-12deg) scale(.85); } }

@media (max-width: 1099px) {
  .km-home .kmh-hero { display: block; padding-left: 0; min-height: 0; }
  .km-home .kmh-hero__text { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; padding-block: 48px 88px; }
  .km-home .kmh-hero h1 { font-size: clamp(36px, 10.6cqw, 72px); }
  .km-home .kmh-hero__media { aspect-ratio: 3 / 2; min-height: 0; }
  .km-home .kmh-hero__media img { object-position: 50% 50%; }
  .km-home .kmh-hero__note { left: var(--gutter); top: clamp(-52px, -5cqw, -36px); width: clamp(116px, 16cqw, 168px); }
  .km-home .kmh-hero__rays { display: none; }
}
@media (max-width: 1099px) and (min-width: 600px) {
  .km-home .kmh-hero h1 { font-size: clamp(48px, 7.4cqw, 72px); }
}
@media (max-width: 419px) {
  .km-home .kmh-brand { gap: 8px; }
  .km-home .kmh-brand__name { font-size: 21px; }
  .km-home .kmh-brand__mark svg { width: 12px; height: 19px; }
  .km-js .km-home .kmh-menu-btn { padding: 0 12px; gap: 8px; }
}
@media (max-width: 767px) {
  .km-home .kmh-hero__text { padding-block: 40px 80px; }
  .km-home .kmh-actions { gap: 12px 24px; }
  .km-home .kmh-actions .kmh-btn { width: 100%; }
}

/* --- trzy wyróżniki --- */
.km-home .kmh-features { padding-block: clamp(56px, 6vw, 88px); background: var(--paper); }
.km-home .kmh-features__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); text-align: center; }
.km-home .kmh-features img { width: 168px; height: 168px; object-fit: contain; margin: 0 auto 20px; }
.km-home .kmh-features h3 { font-size: clamp(20px, 0.5vw + 16px, 23px); }
.km-home .kmh-features p { margin-top: 8px; color: var(--muted); max-width: 26ch; margin-inline: auto; }
@media (max-width: 767px) {
  .km-home .kmh-features__list { grid-template-columns: 1fr; gap: 28px; text-align: left; }
  .km-home .kmh-features li { display: grid; grid-template-columns: 96px 1fr; column-gap: 20px; align-items: center; }
  .km-home .kmh-features img { grid-row: span 2; width: 96px; height: 96px; margin: 0; }
  .km-home .kmh-features h3 { align-self: end; }
  .km-home .kmh-features p { margin: 4px 0 0; align-self: start; }
}

/* --- opis ze zdjęciem z książką --- */
.km-home .kmh-intro { display: grid; grid-template-columns: minmax(0, 54fr) minmax(0, 46fr); background: var(--paper); }
.km-home .kmh-intro__photo { position: relative; overflow: hidden; aspect-ratio: 13 / 10; background: #e9e7ea; }
/* kadr: głowa i otwarta książka z pionowego oryginału (x 5–85 %, y 19–65 %) */
.km-home .kmh-intro__photo img { position: absolute; max-width: none; width: 125%; height: auto; left: -6.25%; top: -41%; }
.km-home .kmh-intro__text { align-self: center; padding: var(--section) var(--edge) var(--section) clamp(40px, 6cqw, 96px); max-width: calc(560px + var(--edge)); }
.km-home .kmh-intro__text p { margin-top: 24px; color: var(--ink-soft); }
.km-home .kmh-intro__text .kmh-link { margin-top: 28px; }
@media (max-width: 899px) {
  .km-home .kmh-intro { grid-template-columns: 1fr; }
  .km-home .kmh-intro__text { padding: 48px var(--gutter) var(--section); max-width: 640px; }
}

/* --- warsztaty --- */
.km-home .kmh-courses { padding-block: var(--section); background: var(--lilac); }
.km-home .kmh-courses__head { text-align: center; margin-bottom: clamp(36px, 4vw, 56px); }
.km-home .kmh-courses__head p { margin-top: 12px; font-size: clamp(17px, 0.4vw + 15px, 20px); color: var(--muted); }
.km-home .kmh-courses__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.2vw, 32px); }
.km-home .kmh-course { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.km-home .kmh-course > img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.km-home .kmh-course__body { display: flex; flex-direction: column; flex: 1; padding: 24px clamp(22px, 2vw, 32px) clamp(24px, 2.2vw, 32px); }
.km-home .kmh-course h3 span { display: block; }
.km-home .kmh-course h3 { margin-top: 10px; font-size: clamp(23px, 0.8vw + 16px, 28px); line-height: 1.15; text-wrap: balance; }
.km-home .kmh-course__desc { margin-top: 14px; color: var(--muted); font-size: 16px; }
.km-home .kmh-course__facts { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 4px; font-size: 16px; font-weight: 600; }
.km-home .kmh-course__price { font-size: 19px; font-weight: 800; }
.km-home .kmh-course .kmh-btn { margin-top: auto; }
.km-home .kmh-course__facts { margin-bottom: 24px; }
@media (min-width: 768px) and (max-width: 1099px) {
  .km-home .kmh-courses__grid { grid-template-columns: 1fr; max-width: 820px; margin-inline: auto; }
  .km-home .kmh-course { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .km-home .kmh-course > img { height: 0; min-height: 100%; aspect-ratio: auto; }
}
@media (max-width: 767px) {
  .km-home .kmh-courses__grid { grid-template-columns: 1fr; }
}

/* --- pas CTA (śliwkowy) --- */
.km-home .kmh-band { background: var(--ink); color: var(--white); padding-block: clamp(48px, 5vw, 64px); }
.km-home .kmh-band__in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(24px, 3vw, 48px); }
.km-home .kmh-band__mark { display: inline-flex; gap: 8px; }
.km-home .kmh-band__mark svg { width: clamp(40px, 4cqw, 60px); height: auto; aspect-ratio: 2 / 3; fill: var(--citron); }
.km-home .kmh-band h2 { color: var(--white); font-size: clamp(26px, 1.8vw + 12px, 40px); font-weight: 750; }
.km-home .kmh-band p { margin-top: 8px; color: #d8d1e4; font-size: clamp(17px, 0.4vw + 15px, 20px); }
.km-home .kmh-band :focus-visible { outline-color: var(--citron); }
@media (max-width: 899px) {
  .km-home .kmh-band__in { grid-template-columns: 1fr; gap: 20px; }
  .km-home .kmh-band__mark svg { width: 34px; }
  .km-home .kmh-band .kmh-btn { justify-self: start; }
}
@media (max-width: 767px) { .km-home .kmh-band .kmh-btn { justify-self: stretch; } }

/* --- przykład metody --- */
.km-home .kmh-method { padding-block: var(--section); background: var(--paper); overflow: clip; }
.km-home .kmh-method__in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 7fr); gap: var(--gap); align-items: center; }
.km-home .kmh-method h2 span { display: block; }
.km-home .kmh-method__text p { margin-top: 24px; color: var(--ink-soft); max-width: 30em; }
.km-home .kmh-method__text .kmh-link { margin-top: 28px; }
.km-home .kmh-sheet {
  position: relative; container-type: inline-size;
  padding: clamp(28px, 3.4vw, 48px) clamp(24px, 3.4vw, 52px) clamp(28px, 3vw, 40px);
  background: var(--white); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 1px 0 var(--line), 10px 12px 0 -1px var(--lilac);
  transform: rotate(-1.2deg);
}
.km-home .kmh-sheet__badge { position: absolute; right: 20px; top: -16px; padding: 6px 14px; background: var(--lilac); border: 1px solid var(--line); border-radius: 6px; font-size: 14px; font-weight: 650; color: var(--ink-soft); transform: rotate(1.2deg); }
.km-home .kmh-sheet__title { font-family: Georgia, "Liberation Serif", serif; font-weight: 400; font-size: 19px; letter-spacing: 0; color: var(--ink-soft); }
.km-home .kmh-sheet__hand { margin-top: 22px; }
.km-home .kmh-sheet__hand p { font-family: Georgia, "Liberation Serif", serif; font-style: italic; font-size: clamp(24px, 5.2cqi, 34px); line-height: 1.45; color: var(--pen); }
.km-home .kmh-sheet__hand mark { background: linear-gradient(transparent 62%, var(--citron) 62%, var(--citron) 92%, transparent 92%); color: inherit; }
.km-home .kmh-sheet__lines { margin-top: 4px; width: 72%; }
.km-home .kmh-sheet__lines span { display: block; height: 38px; border-bottom: 1px solid var(--line); }
.km-home .kmh-sheet__note {
  position: absolute; right: clamp(-28px, -2cqi, -8px); bottom: clamp(48px, 9cqi, 72px); width: min(300px, 50%);
  padding: 18px 20px 20px; background: var(--citron); border-radius: 3px; transform: rotate(4deg);
  font-family: "Segoe Print", "Bradley Hand", Georgia, serif; font-style: italic; font-size: clamp(16px, 2.6cqi, 18px); line-height: 1.45; font-weight: 600;
  box-shadow: 0 2px 0 rgba(44, 38, 56, .12);
}
.km-home .kmh-sheet__cap { margin-top: 18px; font-size: 14px; color: var(--muted); }
@media (max-width: 1179px) {
  .km-home .kmh-method__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 899px) {
  .km-home .kmh-method__in { grid-template-columns: 1fr; }
  .km-home .kmh-sheet { transform: none; margin-top: 16px; }
  .km-home .kmh-sheet__badge { transform: none; }
}
@media (max-width: 599px) {
  .km-home .kmh-sheet__lines { width: 100%; }
  .km-home .kmh-sheet__lines span:nth-child(3) { display: none; }
  .km-home .kmh-sheet__note { position: relative; right: auto; bottom: auto; width: auto; margin-top: -24px; margin-left: 12%; transform: rotate(2deg); }
}

/* --- podgląd platformy --- */
.km-home .kmh-platform { padding-block: var(--section); background: var(--lilac); }
.km-home .kmh-platform h2 { text-align: center; }
.km-home .kmh-demo { margin-top: clamp(32px, 4vw, 48px); }
.km-home .kmh-demo__bar { display: flex; align-items: center; justify-content: center; gap: 16px; position: relative; margin-bottom: 20px; }
.km-home .kmh-demo__tabs { display: flex; gap: 8px; padding: 6px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; }
.km-home .kmh-demo__tabs [role="tab"] { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 8px; font-size: 15px; font-weight: 650; color: var(--ink-soft); white-space: nowrap; }
.km-home .kmh-demo__tabs [role="tab"]:hover { background: var(--lilac); }
.km-home .kmh-demo__tabs [role="tab"][aria-selected="true"] { background: var(--ink); color: var(--white); }
.km-home .kmh-demo__flag { position: absolute; right: 0; padding: 6px 12px; border: 1px dashed var(--ink-soft); border-radius: 6px; font-size: 13px; font-weight: 700; color: var(--ink-soft); background: var(--paper); }
.km-home .kmh-demo__frame { display: grid; grid-template-columns: 210px minmax(0, 1fr); background: var(--white); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.km-home .kmh-demo__side { display: flex; flex-direction: column; gap: 4px; padding: 24px 16px; border-right: 1px solid var(--line); background: var(--paper); }
.km-home .kmh-demo__logo { display: flex; align-items: center; gap: 8px; margin: 0 8px 18px; font-family: Georgia, serif; font-size: 18px; white-space: nowrap; }
.km-home .kmh-demo__logo .kmh-brand__mark svg { width: 10px; height: 15px; }
.km-home .kmh-demo__nav { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; font-size: 14px; color: var(--muted); }
.km-home .kmh-demo__nav .kmh-ico { width: 18px; height: 18px; fill: none; }
.km-home .kmh-demo__nav.is-on { background: var(--citron); color: var(--ink); font-weight: 650; }
.km-home .kmh-demo__view { padding: clamp(20px, 2.4vw, 32px); min-height: 320px; }
.km-home .kmh-demo__view:focus-visible { outline-offset: -3px; }
.km-home .kmh-demo__view h3 { font-size: 17px; letter-spacing: -0.01em; margin-bottom: 16px; }
.km-home .kmh-demo__view--grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 0; }
.km-home .kmh-demo__view--grid[hidden] { display: none; }
.km-home .kmh-demo__col { padding: clamp(20px, 2vw, 28px); border-right: 1px solid var(--line); }
.km-home .kmh-demo__col:last-child { border-right: 0; }
.km-home .kmh-demo__icon { width: 34px; height: 34px; padding: 6px; flex: none; border-radius: 8px; background: var(--lilac); color: #5b4b8a; fill: none; }
.km-home .kmh-demo__card { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; font-size: 15px; }
.km-home .kmh-demo__event { align-items: start; }
.km-home .kmh-demo__card p span, .km-home .kmh-demo__files p span, .km-home .kmh-demo__rows p span { display: block; color: var(--muted); font-size: 14px; }
.km-home .kmh-demo__card strong, .km-home .kmh-demo__files strong, .km-home .kmh-demo__rows strong { font-weight: 700; }
.km-home .kmh-demo__hint { margin-top: 12px; font-size: 14px; color: var(--muted); }
.km-home .kmh-demo__status { justify-self: start; padding: 4px 10px; border-radius: 6px; background: var(--citron); font-size: 13px; font-weight: 700; }
.km-home .kmh-demo__files { display: grid; gap: 10px; }
.km-home .kmh-demo__files li, .km-home .kmh-demo__rows li { display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 1.35; }
.km-home .kmh-demo__files li { padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
.km-home .kmh-demo__rows { display: grid; gap: 0; max-width: 640px; }
.km-home .kmh-demo__rows li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.km-home .kmh-demo__bubble { position: relative; padding: 16px 18px; background: var(--lilac); border-radius: 14px 14px 14px 4px; font-size: 15px; line-height: 1.5; }
.km-home .kmh-demo__bubble p + p { margin-top: 4px; }
.km-home .kmh-demo__avatar { width: 56px; height: 56px; margin: 14px 0 0 auto; border-radius: 50%; object-fit: cover; object-position: 50% 16%; background: var(--lilac-deep); }
.km-home .kmh-demo__thread { display: grid; gap: 14px; max-width: 560px; }
.km-home .kmh-demo__note { margin-top: 14px; text-align: center; font-size: 14px; color: var(--muted); }
.km-home .kmh-platform__cta { margin-top: 32px; text-align: center; }
@media (max-width: 1099px) {
  .km-home .kmh-demo__frame { grid-template-columns: 1fr; }
  .km-home .kmh-demo__side { display: none; }
  .km-home .kmh-demo__view--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .km-home .kmh-demo__col:nth-child(2) { border-right: 0; }
  .km-home .kmh-demo__col:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .km-home .kmh-demo__bar { flex-direction: column; }
  .km-home .kmh-demo__flag { position: static; }
}
@media (max-width: 767px) {
  .km-home .kmh-demo__bar { align-items: stretch; }
  .km-home .kmh-demo__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .km-home .kmh-demo__tabs [role="tab"] { justify-content: center; padding: 0 10px; }
  .km-home .kmh-demo__flag { align-self: center; }
  .km-home .kmh-demo__view--grid { grid-template-columns: 1fr; }
  .km-home .kmh-demo__col { border-right: 0; border-bottom: 1px solid var(--line); }
  .km-home .kmh-demo__col:last-child { border-bottom: 0; }
  .km-home .kmh-demo__view { min-height: 0; }
  .km-home .kmh-platform__cta .kmh-btn { width: 100%; }
}

/* --- o Paulinie --- */
.km-home .kmh-about { padding-top: clamp(48px, 5vw, 72px); background: var(--paper); overflow: clip; }
.km-home .kmh-about__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--gap); align-items: end; }
.km-home .kmh-about__photo { position: relative; aspect-ratio: 7 / 8; overflow: hidden; }
.km-home .kmh-about__photo::before { content: ""; position: absolute; left: -2%; right: 14%; top: 16%; bottom: -24%; background: var(--lilac); border-radius: 100% 0 100% 0; }
/* kadr wycięcia: od czubka głowy do pasa (x 15–85 %, y 14–74 %) */
.km-home .kmh-about__photo img { position: absolute; max-width: none; width: 142.86%; height: auto; left: -21.43%; top: -23.3%; }
.km-home .kmh-about__text { position: relative; align-self: center; padding-block: clamp(32px, 4vw, 64px) var(--section); }
.km-home .kmh-about__quote { position: absolute; right: 0; top: clamp(0px, 2vw, 24px); width: clamp(88px, 9cqw, 132px); height: auto; aspect-ratio: 4 / 3; fill: var(--lilac-deep); }
.km-home .kmh-about h2 { position: relative; padding-right: 96px; }
.km-home .kmh-about__name { margin-top: 12px; font-size: clamp(18px, 0.4vw + 16px, 21px); font-weight: 650; }
.km-home .kmh-about__name + p { margin-top: 20px; color: var(--ink-soft); max-width: 32em; }
.km-home .kmh-more { margin-top: 20px; }
.km-home .kmh-more summary .kmh-ico { transition: transform .2s ease; }
.km-home .kmh-more[open] summary .kmh-ico { transform: rotate(90deg); }
.km-home .kmh-more__body { margin-top: 12px; display: grid; gap: 12px; max-width: 34em; color: var(--ink-soft); }
@media (max-width: 767px) {
  .km-home .kmh-about__in { grid-template-columns: 1fr; gap: 8px; }
  .km-home .kmh-about__photo { width: min(100%, 360px); margin-inline: auto; order: 2; }
  .km-home .kmh-about__text { order: 1; padding-block: 8px 32px; }
  .km-home .kmh-about__quote { top: -8px; width: 72px; }
  .km-home .kmh-about h2 { padding-right: 72px; }
}

/* --- materiały --- */
.km-home .kmh-shelf { padding-block: clamp(56px, 6vw, 88px); background: var(--lilac); }
.km-home .kmh-shelf__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap); align-items: center; }
.km-home .kmh-shelf__text p { margin-top: 16px; color: var(--muted); }
.km-home .kmh-shelf__link { margin-top: 20px; }
.km-home .kmh-shelf h2 { font-size: clamp(28px, 1.8vw + 10px, 40px); }
.km-home .kmh-shelf__covers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 32px); max-width: 640px; justify-self: end; width: 100%; }
.km-home .kmh-shelf__covers img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); box-shadow: 0 2px 0 rgba(44, 38, 56, .08); }
.km-home .kmh-shelf__covers span { display: block; margin-top: 12px; font-size: 15px; font-weight: 650; line-height: 1.3; }
@media (max-width: 1099px) {
  .km-home .kmh-shelf__in { grid-template-columns: 1fr; }
  .km-home .kmh-shelf__covers { max-width: 620px; justify-self: start; }
}
@media (max-width: 767px) {
  .km-home .kmh-shelf__covers span { font-size: 14px; }
}

/* --- FAQ --- */
.km-home .kmh-faq { padding-block: var(--section); background: var(--paper); }
.km-home .kmh-faq__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap); align-items: start; }
.km-home .kmh-faq__head p { margin-top: 12px; color: var(--muted); font-size: clamp(17px, 0.4vw + 15px, 20px); }
.km-home .kmh-faq__list { display: grid; gap: 12px; }
.km-home .kmh-faq details { background: var(--white); border: 1px solid var(--line); border-radius: 10px; }
.km-home .kmh-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 60px; padding: 14px 20px; font-weight: 700; font-size: clamp(16px, 0.2vw + 15px, 18px); line-height: 1.35; border-radius: 10px; }
.km-home .kmh-faq summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(currentColor 0 0) center / 14px 2px no-repeat, linear-gradient(currentColor 0 0) center / 2px 14px no-repeat; transition: transform .2s ease; }
.km-home .kmh-faq details[open] summary::after { transform: rotate(45deg); }
.km-home .kmh-faq summary:hover { background: var(--lilac); }
.km-home .kmh-faq details p { padding: 0 20px 20px; color: var(--ink-soft); max-width: 40em; }
.km-home .kmh-faq details a { font-weight: 700; text-decoration: underline; text-decoration-color: var(--citron-deep); text-decoration-thickness: 2px; text-underline-offset: 4px; overflow-wrap: anywhere; }
@media (max-width: 899px) { .km-home .kmh-faq__in { grid-template-columns: 1fr; gap: 28px; } }

/* --- CTA końcowe (cytrynowe) --- */
.km-home .kmh-final { background: var(--citron); padding-block: clamp(56px, 6vw, 80px); overflow: clip; }
.km-home .kmh-final__in { position: relative; display: grid; grid-template-columns: auto auto auto 1fr; align-items: center; gap: clamp(24px, 3vw, 48px); }
.km-home .kmh-final h2 { font-size: clamp(36px, 3.4vw + 10px, 64px); letter-spacing: -0.04em; }
.km-home .kmh-final p { margin-top: 8px; font-size: clamp(17px, 0.4vw + 15px, 21px); }
.km-home .kmh-final__rays { width: 64px; fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; transform: rotate(80deg); }
.km-home .kmh-final__mark { justify-self: end; display: inline-flex; gap: 12px; }
.km-home .kmh-final__mark svg { width: clamp(56px, 6cqw, 92px); height: auto; aspect-ratio: 2 / 3; fill: var(--citron-deep); }
@media (max-width: 899px) {
  .km-home .kmh-final__in { grid-template-columns: 1fr; gap: 24px; }
  .km-home .kmh-final__rays { display: none; }
  .km-home .kmh-final .kmh-btn { justify-self: start; }
  .km-home .kmh-final__mark { position: absolute; right: 0; top: -8px; }
  .km-home .kmh-final__mark svg { width: 40px; }
  .km-home .kmh-final__text { padding-right: 96px; }
}
@media (max-width: 767px) { .km-home .kmh-final .kmh-btn { justify-self: stretch; } }

/* --- stopka --- */
.km-home .kmh-foot { padding-block: clamp(48px, 5vw, 64px) 40px; background: var(--paper); border-top: 1px solid var(--line); }
.km-home .kmh-foot__in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 36px var(--gap); align-items: start; }
.km-home .kmh-foot__brand .kmh-foot__small { margin-top: 12px; max-width: 22em; }
.km-home .kmh-foot__h { margin-bottom: 6px; font-size: 15px; font-weight: 750; letter-spacing: 0; line-height: 1.3; }
.km-home .kmh-foot__nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.km-home .kmh-foot__nav a:hover { text-decoration: underline; text-decoration-color: var(--citron-deep); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.km-home .kmh-foot__small { font-size: 14px; color: var(--muted); }
.km-home .kmh-foot__legal { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--line); }
@media (max-width: 899px) {
  .km-home .kmh-foot__in { grid-template-columns: 1fr 1fr; }
  .km-home .kmh-foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  .km-home .kmh-foot__in { grid-template-columns: 1fr; }
}

/* --- panele ucznia i rodzica --- */
.km-home .kmh-panels { padding-block: var(--section); background: var(--paper); }
.km-home .kmh-panels__head { max-width: 46rem; margin-inline: auto; text-align: center; }
.km-home .kmh-panels__head h2 { text-wrap: balance; }
.km-home .kmh-panels__head p { margin-top: 16px; color: var(--ink-soft); }
.km-home .kmh-panels__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin-top: clamp(32px, 4vw, 52px); }
.km-home .kmh-pcard { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; padding: clamp(20px, 2.4vw, 32px); background: var(--lilac); border: 1px solid var(--line); border-radius: 18px; }
.km-home .kmh-pcard--parent { background: var(--white); }
.km-home .kmh-pcard h3 { font-size: clamp(22px, 1.6vw + 14px, 28px); }
.km-home .kmh-pcard > p { color: var(--ink-soft); }
.km-home .kmh-pcard .kmh-btn { margin-top: auto; }
.km-home .kmh-pcard__mock { width: 100%; padding: 16px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; box-shadow: 6px 6px 0 var(--lilac-deep); }
.km-home .kmh-pcard--parent .kmh-pcard__mock { background: var(--paper); box-shadow: 6px 6px 0 var(--citron); }
.km-home .kmh-pcard__role { margin-bottom: 12px; font-size: 14px; font-weight: 750; color: var(--muted); }
.km-home .kmh-pcard__kids { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.km-home .kmh-pcard__kids span { padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 650; background: var(--white); }
.km-home .kmh-pcard__kids span.is-on { background: var(--ink); border-color: var(--ink); color: var(--white); }
.km-home .kmh-pcard__mock ul { display: grid; gap: 8px; }
.km-home .kmh-pcard__mock li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); }
.km-home .kmh-pcard__mock li p { display: grid; font-size: 15px; line-height: 1.35; min-width: 0; }
.km-home .kmh-pcard__mock li span { font-size: 14px; color: var(--muted); }
.km-home .kmh-pcard__mock .kmh-demo__icon { flex: none; }
.km-home .kmh-panels__flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); margin-top: clamp(32px, 4vw, 52px); counter-reset: krok; }
.km-home .kmh-panels__flow li { position: relative; display: grid; gap: 4px; padding: 16px 0 0 52px; counter-increment: krok; }
.km-home .kmh-panels__flow li::before { content: counter(krok); position: absolute; left: 0; top: 12px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--citron); font-weight: 800; }
.km-home .kmh-panels__flow span { color: var(--ink-soft); font-size: 15px; }
.km-home .kmh-panels__note { margin-top: 28px; text-align: center; font-size: 15px; color: var(--muted); }
.km-home .kmh-panels__note a { text-decoration: underline; text-decoration-color: var(--citron-deep); text-decoration-thickness: 2px; text-underline-offset: 4px; font-weight: 650; color: var(--ink); }
@media (max-width: 899px) {
  .km-home .kmh-panels__grid, .km-home .kmh-panels__flow { grid-template-columns: 1fr; }
  .km-home .kmh-pcard .kmh-btn { width: 100%; }
}

/* --- Moje materiały --- */
.km-home .kmh-mine { padding-block: clamp(40px, 6vw, 80px); }
.km-home .kmh-mine h1 { font-size: clamp(32px, 3vw + 18px, 52px); }
.km-home .kmh-mine__lead { margin-top: 12px; max-width: 40rem; color: var(--ink-soft); }
.km-home .kmh-mine .kmp-moje { display: grid; gap: 10px; margin-top: 28px; max-width: 40rem; }
.km-home .kmh-mine .kmp-moje li { padding: 14px 18px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; font-weight: 650; }
.km-home .kmh-mine .kmp-moje a { text-decoration: underline; text-underline-offset: 3px; }
.km-home .kmh-mine .kmh-c > p:not(.kmh-mine__lead) { margin-top: 28px; }
.km-home .kmh-mine .kmh-c > p a { text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }

/* aktywna pozycja menu */
.km-home .kmh-menu__list a[aria-current] { text-decoration: underline; text-decoration-color: var(--citron-deep); text-decoration-thickness: 3px; text-underline-offset: 6px; }

@media (prefers-reduced-motion: reduce) {
  .km-home *, .km-home *::before, .km-home *::after { animation: none !important; transition: none !important; }
}

/* --- strony WooCommerce w oprawie strony (includes/shell.php) --- */
.km-home--bar { display: contents; }
body.km-shell #header, body.km-shell #footer, body.km-shell .header-wrapper { display: none; }
body.km-shell { font-family: "KM Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; color: #2c2638; background: #fcfbfd; }
body.km-shell #main :where(h1, h2, h3, h4, p, li, td, th, label, input, select, textarea, button, a, span) { font-family: inherit; }
body.km-shell #main :where(h1, h2, h3) { letter-spacing: -0.02em; text-transform: none; color: #2c2638; }
body.km-shell #main { min-height: 50vh; }
body.km-shell .km-home--bar .kmh-top { top: var(--wp-admin--admin-bar--height, 0px); }

/* koszyk w nagłówku */
.km-home .kmh-menu__cart { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--ink); }
.km-home .kmh-menu__cart svg { width: 22px; height: 22px; flex: none; }
.km-home .kmh-menu__cart-n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--citron); font-size: 13px; font-weight: 800; }
.km-home .kmh-menu__cart:hover .kmh-menu__cart-txt { text-decoration: underline; text-decoration-color: var(--citron-deep); text-decoration-thickness: 3px; text-underline-offset: 6px; }
@media (min-width: 1180px) and (max-width: 1399px) {
  .km-home .kmh-menu__cart-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .km-home .kmh-menu__list { gap: 18px; }
  .km-home .kmh-menu__end { gap: 16px; }
}
@media (max-width: 1179px) {
  .km-home .kmh-menu__cart { min-height: 52px; font-size: 19px; border-bottom: 1px solid var(--line); }
}

/* menu w jednym wierszu */
.km-home .kmh-menu__list a, .km-home .kmh-menu__zone, .km-home .kmh-menu__cart, .km-home .kmh-menu .kmh-btn { white-space: nowrap; }
@media (min-width: 1180px) {
  .km-home .kmh-top__in { width: min(1400px, 100% - 2 * var(--gutter)); gap: 16px; }
  .km-home .kmh-menu { gap: 16px; }
  .km-home .kmh-menu__list { gap: clamp(12px, 1.4vw, 28px); }
  .km-home .kmh-menu__end { gap: 16px; }
}
@media (min-width: 1180px) and (max-width: 1399px) {
  .km-home .kmh-menu__list > li:nth-child(3) { display: none; }
}

/* rozwijane menu Warsztaty */
.km-home .kmh-has-sub { position: relative; display: flex; align-items: center; }
.km-home .kmh-sub-btn { display: inline-grid; place-items: center; width: 28px; height: 44px; color: var(--ink); }
.km-home .kmh-sub-btn svg { width: 12px; height: 8px; transition: transform .15s ease; }
.km-home .kmh-sub-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.km-home .kmh-sub { list-style: none; }
.km-home .kmh-sub a { display: grid; gap: 2px; min-height: 44px; padding: 10px 16px; font-size: 15px; font-weight: 600; line-height: 1.3; white-space: normal; }
.km-home .kmh-sub strong { font-weight: 750; }
.km-home .kmh-sub span { font-size: 14px; font-weight: 450; color: var(--muted); }
.km-home .kmh-sub .kmh-sub__all a { display: flex; font-weight: 700; border-top: 1px solid var(--line); }
.km-home .kmh-sub a:hover { background: var(--lilac); text-decoration: none; }
.km-home .kmh-sub a[aria-current] { background: var(--lilac); }
@media (min-width: 1180px) {
  .km-home .kmh-sub { display: none; position: absolute; top: 100%; left: -16px; z-index: 60; width: 340px; padding: 8px 0; background: var(--white); border: 1px solid var(--line); border-radius: 12px; box-shadow: 6px 6px 0 var(--lilac-deep); }
  .km-home .kmh-has-sub:hover .kmh-sub, .km-home .kmh-has-sub:focus-within .kmh-sub, .km-home .kmh-has-sub.is-open .kmh-sub { display: block; }
}
@media (max-width: 1179px) {
  .km-home .kmh-has-sub { flex-wrap: wrap; }
  .km-home .kmh-has-sub > a { flex: 1; width: auto; }
  .km-js .km-home .kmh-sub { display: none; flex-basis: 100%; }
  .km-js .km-home .kmh-has-sub.is-open .kmh-sub { display: block; }
  .km-home .kmh-sub-btn { width: 52px; height: 52px; border-bottom: 1px solid var(--line); }
  .km-home .kmh-sub a { padding: 10px 16px 10px 20px; border-bottom: 1px solid var(--line); }
}