/* ====================================================================
   MEDYTACJE - kompletny CSS strony (wyekstrahowany z testowego custom.css).
   Ladowany TYLKO przez cms/_partials/ksn-medytacje.tpl (poza CCC).
   ==================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=Jost:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&family=Baloo+2:wght@600;700;800&display=swap');

/* === Sticky header (modul fixedheader, klasa header_omg_im_scrolled przy scrollY > 100) ===
   UWAGA: animacja NIE moze byc na #header — transform na fixed rodzicu
   lamie position:fixed mobilnego drawera w srodku. Animujemy wewnetrzny .ksn-header. */
#header.header_omg_im_scrolled {
  box-shadow: none !important;          /* cien modulu wylaczony, daje go .ksn-header */
  animation: none !important;            /* zadnego transformu na fixed wrapperze */
}
/* Promo bar znika w stanie przyklejonym — zostaje czysty bialy header */
#header.header_omg_im_scrolled .ksn-header-promo { display: none; }
/* Wjazd headera z gory przy aktywacji sticky */
#header.header_omg_im_scrolled .ksn-header {
  animation: ksnStickyEntrance 0.55s cubic-bezier(0.34, 1.25, 0.64, 1) both;
  box-shadow: 0 6px 24px rgba(18, 17, 28, 0.10);
}
/* ==========================================================================
   PODSTRONA MEDYTACJE — design (scoped #ksn-medytacje; !important na typografii,
   by bic globalne reguly motywu typu "h1{font-size:26px!important}").
   Zrodlo: headspace.css + inline <style> z medytacje.html.
   ========================================================================== */
#ksn-medytacje {
  /* === BRAND (user's coral) === */
  --brand: #f29391;
  --brand-dark: #e07f7d;
  --brand-deep: #b04f4d;
  --brand-soft: #fde5e4;

  /* === HEADSPACE-INSPIRED PASTEL PALETTE === */
  --butter: #ffce4d;          /* Headspace primary CTA yellow */
  --butter-deep: #e8b62e;
  --butter-soft: #fff4cc;

  --peach: #ffd4b8;
  --peach-soft: #fff0e3;
  --peach-deep: #e89d6e;

  --mint: #c8e8d0;
  --mint-soft: #ebf6ec;
  --mint-deep: #5fa57a;

  --sky: #b8d8f0;
  --sky-soft: #eaf3fa;
  --sky-deep: #5b8bb8;

  --lavender: #d8c8e8;
  --lavender-soft: #f1ebf6;
  --lavender-deep: #7b5fa0;

  --coral-soft: #ffd9d4;

  /* === NEUTRALS === */
  --cream: #faf6ed;           /* Headspace warm body bg */
  --warm-bg: #f6efdf;
  --surface: #ffffff;
  --text: #12111c;            /* Near-black, slight purple tint like HS */
  --text-soft: #4f4e5b;
  --text-muted: #8a8993;
  --border: #ece6d8;

  /* === SHADOWS (very soft like Headspace) === */
  --shadow-soft: 0 2px 12px rgba(18, 17, 28, 0.04);
  --shadow-card: 0 8px 28px rgba(18, 17, 28, 0.07);
  --shadow-lift: 0 16px 48px rgba(18, 17, 28, 0.12);
  --shadow-cta: 0 8px 24px rgba(255, 206, 77, 0.45);
}
#ksn-medytacje * { box-sizing: border-box; margin: 0; padding: 0; }
#ksn-medytacje { scroll-behavior: smooth; }
#ksn-medytacje {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  color: var(--text);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.55 !important;
  font-size: 16px !important;
  letter-spacing: -0.005em !important;
}
#ksn-medytacje a { color: inherit; text-decoration: none; }
#ksn-medytacje img { max-width: 100%; height: auto; display: block; }
#ksn-medytacje button { font-family: inherit !important; }
#ksn-medytacje .container, #ksn-medytacje .container-wide {
  margin: 0 auto;
  padding: 0 24px;
}
#ksn-medytacje .container { max-width: 1280px; }
#ksn-medytacje .container-wide { max-width: 1480px; }
/* === TYPOGRAFIA (DM Sans optical sizing — bigger weight at bigger sizes, like Apercu) === */
#ksn-medytacje h1, #ksn-medytacje h2, #ksn-medytacje h3, #ksn-medytacje h4 {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.025em !important;
  color: var(--text);
}
#ksn-medytacje .display-1 {
  font-size: clamp(48px, 7vw, 88px) !important;
  font-weight: 700 !important;
  line-height: 1.0 !important;
  letter-spacing: -0.035em !important;
}
#ksn-medytacje .display-2 {
  font-size: clamp(38px, 5vw, 64px) !important;
  font-weight: 700 !important;
  line-height: 1.04 !important;
  letter-spacing: -0.028em !important;
}
#ksn-medytacje .display-3 {
  font-size: clamp(28px, 3.4vw, 42px) !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em !important;
}
/* === BUTTONS (true Headspace pills) === */
#ksn-medytacje .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 28px;
  border-radius: 999px;
  font-weight: 700 !important;
  font-size: 15px !important;
  font-family: 'DM Sans', sans-serif !important;
  border: none;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease, background 0.2s ease;
  white-space: nowrap;
  letter-spacing: -0.01em !important;
}
#ksn-medytacje .btn:active { transform: scale(0.97); }
/* Headspace primary = butter yellow */
#ksn-medytacje .btn-primary {
  background: var(--butter);
  color: var(--text);
  box-shadow: var(--shadow-cta);
}
#ksn-medytacje .btn-primary:hover {
  background: var(--butter-deep);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(255, 206, 77, 0.55);
}
/* User's brand pink — secondary CTA */
#ksn-medytacje .btn-brand {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 6px 18px rgba(242, 147, 145, 0.45);
}
#ksn-medytacje .btn-brand:hover {
  background: var(--brand-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(242, 147, 145, 0.55);
}
#ksn-medytacje .btn-dark { background: var(--text); color: #fff; }
#ksn-medytacje .btn-dark:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(18, 17, 28, 0.25); }
#ksn-medytacje .btn-white { background: #fff; color: var(--text); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); }
#ksn-medytacje .btn-white:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
#ksn-medytacje .btn-ghost { background: transparent; color: var(--text); padding: 14px 22px; }
#ksn-medytacje .btn-ghost:hover { color: var(--brand-deep); }
#ksn-medytacje .btn-lg { padding: 19px 36px; font-size: 16px !important; }
#ksn-medytacje .btn-sm { padding: 11px 22px; font-size: 14px !important; }
/* ============================================================
   HEADER — Headspace-style: logo + nav LEFT, actions RIGHT, full-width
   ============================================================ */
#ksn-medytacje .site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 246, 237, 0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  padding: 14px 0;
  transition: box-shadow 0.3s ease;
}
#ksn-medytacje .site-header.scrolled { box-shadow: 0 1px 0 rgba(0,0,0,0.05); }
/* Header uses its own full-width container */
#ksn-medytacje .site-header > .container-wide {
  max-width: none;
  padding: 0 40px;
}
#ksn-medytacje .nav {
  display: flex;
  align-items: center;
  gap: 36px;
}
#ksn-medytacje .nav-logo { flex-shrink: 0; }
#ksn-medytacje .nav-logo img { height: 38px; width: auto; display: block; }
/* Nav menu sits RIGHT NEXT to logo (left-aligned, like Headspace) */
#ksn-medytacje .nav-menu {
  display: flex;
  gap: 28px;
  align-items: center;
}
#ksn-medytacje .nav-link {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--text);
  transition: opacity 0.2s ease;
  padding: 8px 0;
  position: relative;
  letter-spacing: -0.01em !important;
  white-space: nowrap;
}
#ksn-medytacje .nav-link:hover { opacity: 0.65; }
#ksn-medytacje .nav-link.is-active { font-weight: 700 !important; }
#ksn-medytacje .nav-link.is-active::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--brand);
}
/* Spacer pushes actions to the right */
#ksn-medytacje .nav-spacer { flex: 1; }
#ksn-medytacje .nav-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}
#ksn-medytacje .nav-link-mini {
  font-size: 14.5px !important;
  font-weight: 500 !important;
  color: var(--text);
  transition: opacity 0.2s ease;
}
#ksn-medytacje .nav-link-mini:hover { opacity: 0.65; }
/* Mobile-only icon buttons (account + hamburger) — hidden on desktop */
#ksn-medytacje .icon-btn-mobile { display: none; }
/* === MOBILE DRAWER (off-canvas menu) === */
#ksn-medytacje .mobile-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(18, 17, 28, 0.45);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 200;
}
#ksn-medytacje .mobile-drawer-overlay.is-open { opacity: 1; pointer-events: auto; }
#ksn-medytacje .mobile-drawer {
  position: fixed;
  top: 0; right: 0;
  width: 340px;
  max-width: 88vw;
  height: 100vh;
  background: var(--cream);
  z-index: 201;
  padding: 24px 28px 32px;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -24px 0 60px rgba(0, 0, 0, 0.12);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
#ksn-medytacje .mobile-drawer.is-open { transform: translateX(0); }
#ksn-medytacje .mobile-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}
#ksn-medytacje .mobile-drawer-logo img { height: 36px; width: auto; }
#ksn-medytacje .mobile-drawer-close {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: rgba(18, 17, 28, 0.06);
  border: 0;
  cursor: pointer;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
#ksn-medytacje .mobile-drawer-close:hover { background: rgba(18, 17, 28, 0.12); }
#ksn-medytacje .mobile-drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
#ksn-medytacje .mobile-drawer-nav a {
  display: block;
  padding: 16px 4px;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--text);
  letter-spacing: -0.018em !important;
  border-bottom: 1px solid var(--border);
  transition: color 0.2s ease, padding-left 0.2s ease;
}
#ksn-medytacje .mobile-drawer-nav a:hover { padding-left: 8px; color: var(--brand-deep); }
#ksn-medytacje .mobile-drawer-nav a.is-active {
  color: var(--brand-deep);
}
#ksn-medytacje .mobile-drawer-nav a.is-active::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand);
  margin-right: 10px;
  vertical-align: middle;
}
#ksn-medytacje .mobile-drawer-secondary {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
#ksn-medytacje .mobile-drawer-secondary a {
  padding: 10px 4px;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--text-soft);
  transition: color 0.2s ease;
}
#ksn-medytacje .mobile-drawer-secondary a:hover { color: var(--text); }
#ksn-medytacje .mobile-drawer-cta {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--butter);
  color: var(--text);
  padding: 18px 24px;
  border-radius: 999px;
  font-weight: 700 !important;
  font-size: 15px !important;
  text-align: center;
  box-shadow: var(--shadow-cta);
  transition: all 0.2s ease;
}
#ksn-medytacje .mobile-drawer-cta:hover { background: var(--butter-deep); transform: translateY(-2px); }
#ksn-medytacje .icon-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  transition: background 0.2s ease, transform 0.2s ease;
  position: relative;
}
#ksn-medytacje .icon-btn:hover { background: rgba(18, 17, 28, 0.06); transform: scale(1.05); }
#ksn-medytacje .cart-count {
  position: absolute;
  top: 2px; right: 0;
  background: var(--brand);
  color: #fff;
  font-size: 10px !important;
  font-weight: 700 !important;
  min-width: 18px; height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center; justify-content: center;
  padding: 0 5px;
  border: 2px solid var(--cream);
}
/* Headspace-style yellow CTA */
#ksn-medytacje .nav-cta {
  background: var(--butter);
  color: var(--text);
  padding: 13px 24px;
  border-radius: 999px;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 16px rgba(255, 206, 77, 0.4);
  letter-spacing: -0.01em !important;
}
#ksn-medytacje .nav-cta:hover {
  background: var(--butter-deep);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(255, 206, 77, 0.55);
}
/* === TAB PILLS (Headspace filter style) === */
#ksn-medytacje .tab-pills {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 24px 0 48px;
}
#ksn-medytacje .tab-pill {
  padding: 13px 24px;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: 15px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease;
  border: 1.5px solid rgba(18, 17, 28, 0.1);
  letter-spacing: -0.01em !important;
}
#ksn-medytacje .tab-pill:hover { background: rgba(18, 17, 28, 0.04); }
#ksn-medytacje .tab-pill.is-active {
  background: var(--text);
  color: #fff;
  border-color: var(--text);
}
/* === BREADCRUMB === */
#ksn-medytacje .breadcrumb {
  font-size: 13px !important;
  color: var(--text-muted);
  padding: 24px 0 8px;
}
#ksn-medytacje .breadcrumb a { color: var(--text-muted); transition: color 0.2s ease; }
#ksn-medytacje .breadcrumb a:hover { color: var(--text); }
#ksn-medytacje .breadcrumb .sep { margin: 0 8px; }
#ksn-medytacje .breadcrumb .current { color: var(--text); font-weight: 500 !important; }
/* ============================================================
   LIBRARY CARDS — Headspace-style SOFT pastels + characters
   ============================================================ */
#ksn-medytacje .lib-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
#ksn-medytacje .lib-grid-3 { grid-template-columns: repeat(3, 1fr); }
#ksn-medytacje .lib-card {
  border-radius: 28px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  position: relative;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
  color: var(--text);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease;
}
#ksn-medytacje .lib-card:hover {
  transform: translateY(-8px) rotate(-0.5deg);
  box-shadow: var(--shadow-lift);
}
#ksn-medytacje .lib-card-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* Soft pastel variants (Headspace true style) */
#ksn-medytacje .lib-card-peach .lib-card-bg { background: var(--peach); }
#ksn-medytacje .lib-card-butter .lib-card-bg { background: var(--butter-soft); }
#ksn-medytacje .lib-card-mint .lib-card-bg { background: var(--mint); }
#ksn-medytacje .lib-card-sky .lib-card-bg { background: var(--sky); }
#ksn-medytacje .lib-card-lavender .lib-card-bg { background: var(--lavender); }
#ksn-medytacje .lib-card-coral .lib-card-bg { background: var(--coral-soft); }
#ksn-medytacje .lib-card-orange .lib-card-bg { background: var(--peach); }
#ksn-medytacje .lib-card-yellow .lib-card-bg { background: #ffe089; }
/* Deep variants for hero-style cards */
#ksn-medytacje .lib-card-deep-purple .lib-card-bg { background: linear-gradient(135deg, #7b5fa0 0%, #4a2b8b 100%); }
#ksn-medytacje .lib-card-deep-purple { color: #fff; }
#ksn-medytacje .lib-card-deep-coral .lib-card-bg { background: linear-gradient(135deg, #f29391 0%, #d96852 100%); }
#ksn-medytacje .lib-card-deep-coral { color: #fff; }
#ksn-medytacje .lib-card-deep-mint .lib-card-bg { background: linear-gradient(135deg, #5fa57a 0%, #2d6b40 100%); }
#ksn-medytacje .lib-card-deep-mint { color: #fff; }
/* Backwards-compatible aliases for numbered variants */
#ksn-medytacje .lib-card-1 .lib-card-bg { background: var(--peach); }
#ksn-medytacje .lib-card-2 .lib-card-bg { background: var(--lavender); }
#ksn-medytacje .lib-card-3 .lib-card-bg { background: var(--coral-soft); }
#ksn-medytacje .lib-card-4 .lib-card-bg { background: var(--butter-soft); }
#ksn-medytacje .lib-card-5 .lib-card-bg { background: var(--mint); }
#ksn-medytacje .lib-card-6 .lib-card-bg { background: var(--sky); }
#ksn-medytacje .lib-card-7 .lib-card-bg { background: var(--mint-soft); }
#ksn-medytacje .lib-card-8 .lib-card-bg { background: var(--peach-soft); }
#ksn-medytacje .lib-card.dark-text { color: var(--text); }
#ksn-medytacje .lib-badge {
  position: absolute;
  top: 18px; left: 18px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  color: var(--text);
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 6px 12px;
  border-radius: 999px;
  z-index: 3;
  letter-spacing: 0.3px !important;
}
#ksn-medytacje .lib-card-deep-purple .lib-badge,
#ksn-medytacje .lib-card-deep-coral .lib-badge { background: rgba(255,255,255,0.2); color: #fff; }
#ksn-medytacje .lib-illustration {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -58%);
  width: 60%;
  max-width: 200px;
  z-index: 1;
  pointer-events: none;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
#ksn-medytacje .lib-card:hover .lib-illustration {
  transform: translate(-50%, -62%) scale(1.06);
}
#ksn-medytacje .lib-illustration svg { width: 100%; height: auto; display: block; }
#ksn-medytacje .lib-content {
  position: relative;
  z-index: 2;
  margin-top: auto;
}
#ksn-medytacje .lib-title {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  margin-bottom: 4px;
  letter-spacing: -0.018em !important;
}
#ksn-medytacje .lib-desc {
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  opacity: 0.75;
}
#ksn-medytacje .lib-discount-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  background: var(--brand);
  color: #fff;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 6px 12px;
  border-radius: 999px;
  z-index: 3;
}
/* === SECTIONS === */
#ksn-medytacje .section { padding: 88px 0; }
#ksn-medytacje .section-tight { padding: 56px 0; }
#ksn-medytacje .section.bg-soft { background: var(--warm-bg); }
#ksn-medytacje .section.bg-peach { background: var(--peach-soft); }
#ksn-medytacje .section.bg-mint { background: var(--mint-soft); }
#ksn-medytacje .section.bg-butter { background: var(--butter-soft); }
#ksn-medytacje .section-head {
  text-align: center;
  margin-bottom: 56px;
}
#ksn-medytacje .section-head.left {
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 24px;
}
#ksn-medytacje .section-head h2 { margin-bottom: 14px; }
#ksn-medytacje .section-head p {
  color: var(--text-soft);
  font-size: 18px !important;
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.5 !important;
}
#ksn-medytacje .section-head.left p { margin: 0; max-width: 480px; }
#ksn-medytacje .eyebrow {
  display: inline-block;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  color: var(--text);
  margin-bottom: 16px;
  position: relative;
  padding-left: 16px;
}
#ksn-medytacje .eyebrow::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brand);
}
/* ============================================================
   "WHAT ARE YOU LOOKING FOR?" — 6 cards that open colorful modals
   ============================================================ */
#ksn-medytacje .lookfor-section { padding: 30px 0; }
#ksn-medytacje .lookfor-section .lookfor-head {
  text-align: center;
  margin-bottom: 40px;
}
#ksn-medytacje .lookfor-section h2 {
  font-size: clamp(32px, 4vw, 48px) !important;
  margin-bottom: 12px;
}
#ksn-medytacje .lookfor-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
}
#ksn-medytacje .lookfor-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 24px;
  padding: 22px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--text);
  text-align: left;
  letter-spacing: -0.015em !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease, box-shadow 0.25s ease;
  width: 100%;
}
#ksn-medytacje .lookfor-card:hover {
  transform: translateY(-3px);
  border-color: var(--text);
  box-shadow: var(--shadow-card);
}
#ksn-medytacje .lookfor-card-icon {
  width: 32px; height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#ksn-medytacje .lookfor-card-icon svg { width: 100%; height: 100%; }
#ksn-medytacje .lookfor-arrow {
  flex-shrink: 0;
  color: var(--text-soft);
  transition: transform 0.2s ease;
}
#ksn-medytacje .lookfor-card:hover .lookfor-arrow { transform: translateX(3px); color: var(--text); }
#ksn-medytacje .lookfor-text {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
}
/* === MODAL (popup colorful sheet) === */
#ksn-medytacje .cat-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(18, 17, 28, 0.55);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#ksn-medytacje .cat-modal-overlay.is-open {
  display: flex;
  opacity: 1;
}
#ksn-medytacje .cat-modal {
  border-radius: 36px;
  padding: 56px 56px 48px;
  max-width: 720px;
  width: 100%;
  position: relative;
  color: var(--text);
  text-align: center;
  transform: scale(0.95) translateY(20px);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-height: 90vh;
  overflow-y: auto;
}
#ksn-medytacje .cat-modal-overlay.is-open .cat-modal { transform: scale(1) translateY(0); }
/* Color variants */
#ksn-medytacje .cat-modal.color-yellow { background: #ffce4d; }
#ksn-medytacje .cat-modal.color-purple { background: #7b5fa0; color: #fff; }
#ksn-medytacje .cat-modal.color-blue { background: #4a9fd4; color: #fff; }
#ksn-medytacje .cat-modal.color-coral { background: #f29391; color: #fff; }
#ksn-medytacje .cat-modal.color-orange { background: #ff8a3a; color: #fff; }
#ksn-medytacje .cat-modal.color-mint { background: #5fa57a; color: #fff; }
#ksn-medytacje .cat-modal-close {
  position: absolute;
  top: 18px; right: 18px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  transition: background 0.2s ease, transform 0.2s ease;
  z-index: 2;
}
#ksn-medytacje .cat-modal.color-purple .cat-modal-close,
#ksn-medytacje .cat-modal.color-blue .cat-modal-close,
#ksn-medytacje .cat-modal.color-coral .cat-modal-close,
#ksn-medytacje .cat-modal.color-orange .cat-modal-close,
#ksn-medytacje .cat-modal.color-mint .cat-modal-close { background: rgba(255,255,255,0.2); color: #fff; }
#ksn-medytacje .cat-modal-close:hover { transform: scale(1.1); background: rgba(255,255,255,0.6); }
#ksn-medytacje .cat-modal.color-purple .cat-modal-close:hover,
#ksn-medytacje .cat-modal.color-blue .cat-modal-close:hover,
#ksn-medytacje .cat-modal.color-coral .cat-modal-close:hover,
#ksn-medytacje .cat-modal.color-orange .cat-modal-close:hover,
#ksn-medytacje .cat-modal.color-mint .cat-modal-close:hover { background: rgba(255,255,255,0.4); }
#ksn-medytacje .cat-modal-hero {
  width: 130px;
  height: 110px;
  margin: 0 auto 12px;
  position: relative;
}
#ksn-medytacje .cat-modal-hero svg { width: 100%; height: 100%; display: block; }
#ksn-medytacje .cat-modal h3 {
  font-size: clamp(28px, 3vw, 36px) !important;
  margin-bottom: 14px;
  color: inherit;
  letter-spacing: -0.022em !important;
}
#ksn-medytacje .cat-modal p.cat-modal-lead {
  font-size: 16px !important;
  line-height: 1.5 !important;
  max-width: 480px;
  margin: 0 auto 36px;
  opacity: 0.92;
}
#ksn-medytacje .cat-modal-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 28px;
  margin-bottom: 36px;
  text-align: left;
}
#ksn-medytacje .cat-feature {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
#ksn-medytacje .cat-feature-icon {
  width: 48px; height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#ksn-medytacje .cat-modal.color-yellow .cat-feature-icon { background: rgba(18,17,28,0.08); }
#ksn-medytacje .cat-feature-icon svg { width: 70%; height: 70%; }
#ksn-medytacje .cat-feature-text { flex: 1; }
#ksn-medytacje .cat-feature-title {
  font-weight: 700 !important;
  font-size: 15px !important;
  margin-bottom: 4px;
  letter-spacing: -0.01em !important;
}
#ksn-medytacje .cat-feature-desc {
  font-size: 14px !important;
  line-height: 1.45 !important;
  opacity: 0.85;
}
#ksn-medytacje .cat-modal-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--text);
  padding: 15px 32px;
  border-radius: 999px;
  font-weight: 700 !important;
  font-size: 15px !important;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#ksn-medytacje .cat-modal-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,0.18); }
@media (max-width: 720px){
#ksn-medytacje .lookfor-grid { grid-template-columns: 1fr; }
#ksn-medytacje .cat-modal { padding: 40px 24px 32px; border-radius: 28px; }
#ksn-medytacje .cat-modal-features { grid-template-columns: 1fr; gap: 18px; }
}
/* ============================================================
   FEATURE CAROUSEL — full-bleed scrollable panels (Headspace pattern)
   "The mental health app for every moment"
   ============================================================ */
#ksn-medytacje .feature-trio-section {
  padding: 100px 0;
  overflow: hidden;
  background: var(--cream);
}
#ksn-medytacje .feature-trio-head {
  text-align: center;
  margin-bottom: 44px;
}
#ksn-medytacje .feature-trio-head h2 {
  font-size: clamp(40px, 5vw, 72px) !important;
  margin-bottom: 32px;
  letter-spacing: -0.03em !important;
}
/* FULL-BLEED horizontal scroll carousel — edge to edge */
#ksn-medytacje .feature-trio {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 0 40px 24px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  width: 100%;
}
#ksn-medytacje .feature-trio::-webkit-scrollbar { display: none; }
#ksn-medytacje .feature-panel {
  flex: 0 0 calc(100vw - 240px);
  max-width: 1200px;
  scroll-snap-align: center;
  border-radius: 36px;
  padding: 56px 64px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: stretch;
  height: 600px;
  min-height: 600px;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
#ksn-medytacje .feature-panel-yellow { background: #ffce4d; color: var(--text); }
#ksn-medytacje .feature-panel-pink { background: #ffb4d4; color: var(--text); }
#ksn-medytacje .feature-panel-purple { background: #5b3a8a; color: #fff; }
#ksn-medytacje .feature-panel-green { background: #1f6a3a; color: #fff; }
#ksn-medytacje .feature-panel-blue { background: #2876d6; color: #fff; }
#ksn-medytacje .feature-panel-coral { background: var(--brand); color: #fff; }
#ksn-medytacje .feature-panel-text {
  display: flex;
  flex-direction: column;
  justify-content: center;  /* vertical center across all panels — headings align */
}
#ksn-medytacje .feature-panel-text h3 {
  font-size: clamp(28px, 2.6vw, 38px) !important;
  margin-bottom: 18px;
  letter-spacing: -0.022em !important;
  line-height: 1.1 !important;
  color: inherit;
}
#ksn-medytacje .feature-panel-text p {
  font-size: 16px !important;
  margin-bottom: 28px;
  line-height: 1.55 !important;
  max-width: 380px;
  opacity: 0.85;
}
#ksn-medytacje .feature-panel-purple .feature-panel-text p,
#ksn-medytacje .feature-panel-green .feature-panel-text p,
#ksn-medytacje .feature-panel-blue .feature-panel-text p,
#ksn-medytacje .feature-panel-coral .feature-panel-text p { color: rgba(255,255,255,0.88); opacity: 1; }
/* Visual side (left side of panel — chat bubbles, phone, character) */
#ksn-medytacje .feature-panel-visual {
  position: relative;
  height: 100%;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
/* Chat bubble UI (like Ebb conversation) */
#ksn-medytacje .chat-bubble {
  background: #fff;
  border-radius: 18px;
  padding: 16px 20px;
  max-width: 380px;
  margin-bottom: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
#ksn-medytacje .chat-bubble-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px !important;
  font-weight: 700 !important;
  margin-bottom: 6px;
  color: var(--text);
}
#ksn-medytacje .chat-bubble-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
}
#ksn-medytacje .chat-bubble-text {
  font-size: 14px !important;
  color: var(--text);
  line-height: 1.45 !important;
}
#ksn-medytacje .chat-bubble-text.muted { color: var(--text-muted); }
/* Smiling blob character at bottom of yellow panel */
#ksn-medytacje .feature-blob {
  position: absolute;
  bottom: 0;
  left: 12%;
  width: 140px;
  height: 140px;
  animation: float 5s ease-in-out infinite;
}
#ksn-medytacje .feature-blob svg { width: 100%; height: 100%; display: block; }
/* Sleepy moon blob (blue panel — Sen) — desktop centered + sized */
#ksn-medytacje .feature-blob-moon {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  width: 240px !important;
  height: 240px !important;
}
/* Phone mockup (right side of purple/pink panels) */
#ksn-medytacje .feature-phone {
  position: absolute;
  bottom: -40px;
  right: 8%;
  width: 200px;
  height: 400px;
  background: #1a1d24;
  border-radius: 32px;
  padding: 8px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.2);
  transform: rotate(4deg);
}
#ksn-medytacje .feature-phone-screen {
  width: 100%;
  height: 100%;
  border-radius: 24px;
  background: var(--cream);
  padding: 24px 12px;
  overflow: hidden;
}
#ksn-medytacje .feature-phone-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  font-size: 9px !important;
}
#ksn-medytacje .feature-phone-tabs span {
  padding: 4px 8px;
  background: rgba(0,0,0,0.05);
  border-radius: 999px;
  color: var(--text-soft);
}
#ksn-medytacje .feature-phone-tabs span.active { background: var(--text); color: #fff; }
#ksn-medytacje .phone-item {
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 6px;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}
#ksn-medytacje .phone-item-svg {
  width: 22px; height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(255,255,255,0.3);
}
#ksn-medytacje .feature-btn-light {
  background: var(--text);
  color: #fff;
  padding: 14px 26px;
  border-radius: 999px;
  font-size: 14px !important;
  font-weight: 700 !important;
  display: inline-block;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#ksn-medytacje .feature-btn-light:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,0.18); }
#ksn-medytacje .feature-panel-yellow .feature-btn-light,
#ksn-medytacje .feature-panel-pink .feature-btn-light { background: #fff; color: var(--text); }
#ksn-medytacje .feature-panel-yellow .feature-btn-light:hover,
#ksn-medytacje .feature-panel-pink .feature-btn-light:hover { box-shadow: 0 12px 28px rgba(0,0,0,0.12); }
/* Pagination dots (under carousel) */
#ksn-medytacje .feature-dots {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 32px;
}
#ksn-medytacje .feature-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(18,17,28,0.18);
  border: 0;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}
#ksn-medytacje .feature-dot.is-active {
  background: var(--text);
  width: 28px;
  border-radius: 999px;
}
/* LEGACY (don't break older feature-panel-mid usage) */
#ksn-medytacje .feature-panel-mid h3 { font-size: clamp(32px, 3vw, 44px) !important; }
/* Audio player widget (Headspace-style) */
#ksn-medytacje .audio-player {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
#ksn-medytacje .audio-play {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  border: 0;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}
#ksn-medytacje .audio-play:hover { background: rgba(255,255,255,0.3); transform: scale(1.05); }
#ksn-medytacje .audio-info {
  flex: 1;
  min-width: 0;
}
#ksn-medytacje .audio-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #fff;
  margin-bottom: 6px;
}
#ksn-medytacje .audio-bar {
  height: 3px;
  background: rgba(255,255,255,0.2);
  border-radius: 999px;
  position: relative;
  overflow: hidden;
}
#ksn-medytacje .audio-bar-fill {
  position: absolute;
  inset: 0;
  width: 35%;
  background: #fff;
  border-radius: 999px;
}
#ksn-medytacje .audio-time {
  display: flex;
  justify-content: space-between;
  font-size: 11px !important;
  color: rgba(255,255,255,0.65);
  margin-top: 4px;
}
#ksn-medytacje .feature-btn-light {
  background: #fff;
  color: var(--text);
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 14px !important;
  font-weight: 700 !important;
  align-self: flex-start;
  transition: transform 0.2s ease;
}
#ksn-medytacje .feature-btn-light:hover { transform: translateY(-2px); }
/* Phone mockup for middle panel */
#ksn-medytacje .feature-phones {
  display: flex;
  gap: 14px;
  margin: 24px 0;
  position: relative;
  z-index: 1;
}
#ksn-medytacje .phone-frame {
  flex: 1;
  border-radius: 26px;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  max-height: 280px;
  position: relative;
  box-shadow: 0 12px 28px rgba(0,0,0,0.25);
}
#ksn-medytacje .phone-yellow { background: #ffce4d; }
#ksn-medytacje .phone-coral { background: #f29391; }
/* Smiley character on phone mockup */
#ksn-medytacje .phone-smiley {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 70px;
  animation: float 5s ease-in-out infinite;
}
/* Floating shapes around panels */
#ksn-medytacje .float-shape {
  position: absolute;
  border-radius: 50%;
  z-index: 0;
}
/* ============================================================
   SMILEY TESTIMONIALS — floating playful heads + cream cards
   ============================================================ */
#ksn-medytacje .smiley-section {
  padding: 32px 0 80px;
  background: var(--cream);
  position: relative;
  overflow: hidden;
}
#ksn-medytacje .smiley-head {
  position: relative;
  text-align: center;
  max-width: 820px;
  margin: 0 auto 72px;
  padding: 140px 60px 140px;  /* more vertical room — smileys never touch heading */
  min-height: 460px;
}
#ksn-medytacje .smiley-head h2 {
  font-size: clamp(36px, 5vw, 64px) !important;
  letter-spacing: -0.025em !important;
  line-height: 1.05 !important;
  position: relative;
  z-index: 2;
}
/* Floating smiley characters — vibrant saturated colors */
#ksn-medytacje .smiley {
  position: absolute;
  width: 84px; height: 84px;
  animation: float 6s ease-in-out infinite;
  z-index: 1;
}
#ksn-medytacje .smiley svg { width: 100%; height: 100%; display: block; }
/* 2 smileys ABOVE heading */
#ksn-medytacje .smiley-1 { top: 0; left: 22%; animation-delay: 0s; }
#ksn-medytacje .smiley-2 { top: 8px; right: 22%; animation-delay: 0.8s; }
/* 2 smileys BELOW heading */
#ksn-medytacje .smiley-3 { bottom: 0; left: 28%; animation-delay: 1.5s; }
#ksn-medytacje .smiley-4 { bottom: 8px; right: 26%; animation-delay: 2.2s; }
/* 2 small smileys on far sides */
#ksn-medytacje .smiley-5 { top: 42%; left: 4%; width: 56px; height: 56px; animation-delay: 1.2s; }
#ksn-medytacje .smiley-6 { top: 42%; right: 4%; width: 64px; height: 64px; animation-delay: 0.4s; }
/* Sparkle decoration */
#ksn-medytacje .sparkle {
  position: absolute;
  color: var(--butter);
  font-size: 26px !important;
  animation: breathe 3s ease-in-out infinite;
  z-index: 1;
}
#ksn-medytacje .sparkle-1 { top: 80px; left: 14%; }
#ksn-medytacje .sparkle-2 { bottom: 80px; right: 18%; color: #ff7878; animation-delay: 1s; }
#ksn-medytacje .sparkle-3 { top: 40%; left: 88%; font-size: 20px !important; animation-delay: 1.5s; }
#ksn-medytacje .smiley-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1200px;
  margin: 0 auto;
}
#ksn-medytacje .smiley-card {
  background: #f7f1e6;
  border-radius: 24px;
  padding: 48px 44px;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#ksn-medytacje .smiley-card p {
  font-size: 24px !important;
  line-height: 1.4 !important;
  color: var(--text);
  margin-bottom: 24px;
  font-weight: 500 !important;
  letter-spacing: -0.015em !important;
}
#ksn-medytacje .smiley-card .smiley-author {
  font-size: 14px !important;
  color: var(--text-soft);
  font-weight: 500 !important;
}
/* === TESTIMONIAL BLOCK === */
#ksn-medytacje .testimonial-block {
  background: var(--butter-soft);
  border-radius: 48px;
  padding: 80px 56px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
#ksn-medytacje .testimonial-block::before {
  content: '';
  position: absolute;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: var(--butter);
  opacity: 0.4;
  top: -100px; left: -50px;
}
#ksn-medytacje .testimonial-block::after {
  content: '';
  position: absolute;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: var(--peach);
  opacity: 0.4;
  bottom: -50px; right: -30px;
}
#ksn-medytacje .testimonial-block > * { position: relative; z-index: 1; }
#ksn-medytacje .testimonial-quote {
  font-family: 'DM Sans', sans-serif !important;
  font-size: clamp(24px, 2.8vw, 36px) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--text);
  max-width: 820px;
  margin: 0 auto 32px;
  letter-spacing: -0.018em !important;
}
#ksn-medytacje .testimonial-author {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
#ksn-medytacje .testimonial-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700 !important;
}
/* === DARK BLOCK === */
#ksn-medytacje .dark-block {
  background: var(--text);
  color: #faf6ed;
  border-radius: 48px;
  padding: 80px 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
#ksn-medytacje .dark-block::after {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242,147,145,0.18), transparent 70%);
  bottom: -150px; right: -100px;
  animation: float-bg 12s ease-in-out infinite;
}
#ksn-medytacje .dark-block h2 { color: #fff; font-size: clamp(32px, 4vw, 52px) !important; margin-bottom: 22px; }
#ksn-medytacje .dark-block p { color: rgba(250, 246, 237, 0.75); font-size: 18px !important; margin-bottom: 32px; line-height: 1.55 !important; }
/* === BIG CTA === */
#ksn-medytacje .cta-block {
  background: var(--butter);
  border-radius: 48px;
  padding: 88px 64px;
  text-align: center;
  color: var(--text);
  position: relative;
  overflow: hidden;
}
#ksn-medytacje .cta-block::before, #ksn-medytacje .cta-block::after {
  content: '';
  position: absolute;
  border-radius: 50%;
}
#ksn-medytacje .cta-block::before {
  width: 320px; height: 320px;
  background: rgba(255, 255, 255, 0.25);
  top: -120px; left: -60px;
  animation: float-bg 14s ease-in-out infinite;
}
#ksn-medytacje .cta-block::after {
  width: 220px; height: 220px;
  background: rgba(18, 17, 28, 0.06);
  bottom: -60px; right: 8%;
  animation: float-bg 16s ease-in-out infinite reverse;
}
#ksn-medytacje .cta-block > * { position: relative; z-index: 1; }
#ksn-medytacje .cta-block h2 { font-size: clamp(36px, 4.5vw, 56px) !important; margin-bottom: 18px; }
#ksn-medytacje .cta-block p { font-size: 18px !important; opacity: 0.8; margin-bottom: 36px; max-width: 540px; margin-left: auto; margin-right: auto; }
/* === FAQ ACCORDION === */
#ksn-medytacje .faq-list { max-width: 820px; margin: 0 auto; }
#ksn-medytacje .faq-item {
  background: var(--surface);
  border-radius: 24px;
  padding: 24px 32px;
  margin-bottom: 12px;
  transition: box-shadow 0.3s ease, background 0.3s ease;
}
#ksn-medytacje .faq-item[open] { box-shadow: var(--shadow-card); }
#ksn-medytacje .faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  list-style: none;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  color: var(--text);
  letter-spacing: -0.015em !important;
}
#ksn-medytacje .faq-item summary::-webkit-details-marker { display: none; }
#ksn-medytacje .faq-plus {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--butter-soft);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px !important;
  font-weight: 400 !important;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease;
  flex-shrink: 0;
  margin-left: 16px;
}
#ksn-medytacje .faq-item[open] .faq-plus { transform: rotate(135deg); background: var(--butter); }
#ksn-medytacje .faq-answer {
  padding-top: 18px;
  color: var(--text-soft);
  font-size: 16px !important;
  line-height: 1.7 !important;
}
/* === FOOTER === */
#ksn-medytacje .footer {
  background: var(--text);
  color: rgba(250, 246, 237, 0.7);
  padding: 88px 0 32px;
}
#ksn-medytacje .footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 56px;
}
#ksn-medytacje .footer a {
  color: rgba(250, 246, 237, 0.7);
  font-size: 14.5px !important;
  display: block;
  padding: 5px 0;
  transition: color 0.2s ease, padding 0.2s ease;
}
#ksn-medytacje .footer a:hover { color: var(--butter); padding-left: 4px; }
#ksn-medytacje .footer-heading {
  color: #fff;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  margin-bottom: 18px;
}
#ksn-medytacje .footer-bottom {
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px !important;
  color: rgba(250, 246, 237, 0.5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
#ksn-medytacje .animate-breathe { animation: breathe 4s ease-in-out infinite; }
#ksn-medytacje .animate-float { animation: float 6s ease-in-out infinite; }
#ksn-medytacje .animate-wiggle { animation: wiggle 3s ease-in-out infinite; }
#ksn-medytacje .fade-up { animation: fadeUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) backwards; }
#ksn-medytacje .fade-up-1 { animation-delay: 0.05s; }
#ksn-medytacje .fade-up-2 { animation-delay: 0.15s; }
#ksn-medytacje .fade-up-3 { animation-delay: 0.25s; }
#ksn-medytacje .fade-up-4 { animation-delay: 0.35s; }
/* === RESPONSIVE === */
@media (max-width: 1024px){
#ksn-medytacje .lib-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px){
#ksn-medytacje .feature-trio {
    padding: 0 12px 20px !important;
    gap: 12px !important;
  }
#ksn-medytacje .feature-panel {
    grid-template-columns: 1fr;
    padding: 36px 24px 36px;
    height: auto !important;          /* unlock desktop's fixed 600px */
    min-height: 0 !important;          /* content drives height — no empty space */
    flex: 0 0 calc(100vw - 56px) !important;
    gap: 24px;
    align-items: start;
  }
#ksn-medytacje .feature-panel-text {
    order: 1; text-align: center;
    justify-content: flex-start !important;
  }
#ksn-medytacje .feature-panel-text h3 { font-size: 26px !important; line-height: 1.1 !important; }
#ksn-medytacje .feature-panel-text p { margin-left: auto; margin-right: auto; max-width: 100%; font-size: 15px !important; }
#ksn-medytacje .feature-panel-text .feature-btn-light { display: inline-block; margin: 0 auto; width: auto; }
#ksn-medytacje .feature-panel-visual {
    order: 2;
    min-height: 280px;
    position: relative;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0;
  }
#ksn-medytacje .feature-phone {
    position: relative !important;
    right: auto !important; bottom: auto !important;
    margin: 0 auto !important;
    transform: rotate(0) !important;
    width: 200px; height: 400px;
  }
#ksn-medytacje .feature-phone-screen { padding: 18px 10px; }
#ksn-medytacje .feature-blob {
    position: relative !important;
    left: auto !important; bottom: auto !important;
    top: auto !important;
    margin: 0 auto !important;
    transform: none !important;
    width: 160px !important;
    height: 160px !important;
  }
#ksn-medytacje .feature-blob-moon {
    width: 240px !important;
    height: 240px !important;
  }
#ksn-medytacje .feature-panel-coral .feature-panel-visual > div {
    position: relative !important;
    top: auto !important; left: auto !important;
    transform: none !important;
    margin: 0 auto !important;
  }
#ksn-medytacje .feature-panel-coral .feature-panel-visual svg {
    max-width: 240px !important;
    width: 100% !important;
    height: auto !important;
  }
#ksn-medytacje .feature-panel-green .feature-panel-visual > div {
    position: relative !important;
    top: auto !important; left: auto !important;
    transform: none !important;
    margin: 0 auto !important;
  }
#ksn-medytacje .feature-panel-green .feature-panel-visual svg {
    max-width: 280px !important;
    width: 100% !important;
    height: auto !important;
  }
#ksn-medytacje .chat-bubble {
    margin: 0 auto !important;
    max-width: 100% !important;
  }
}
@media (max-width: 968px){
#ksn-medytacje .nav-menu { display: none; }
#ksn-medytacje .nav-link-mini { display: none; }
#ksn-medytacje .nav-cta { display: none; }
#ksn-medytacje .site-header > .container-wide { padding: 0 18px; }
#ksn-medytacje .nav { gap: 12px; }
#ksn-medytacje .nav-actions { gap: 8px; }
#ksn-medytacje .icon-btn-mobile {
    display: inline-flex;
    width: 42px; height: 42px;
    border-radius: 12px;
    background: rgba(18, 17, 28, 0.06);
    color: var(--text);
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
    cursor: pointer;
    border: 0;
    position: relative;
  }
#ksn-medytacje .icon-btn-mobile:hover { background: rgba(18, 17, 28, 0.12); }
#ksn-medytacje .nav-actions .icon-btn {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: rgba(18, 17, 28, 0.06);
  }
#ksn-medytacje .nav-actions .icon-btn:hover { background: rgba(18, 17, 28, 0.12); }
#ksn-medytacje .cart-count { border-color: var(--cream); }
}
@media (max-width: 768px){
#ksn-medytacje .smiley-section { padding: 56px 0 !important; }
#ksn-medytacje .smiley-head {
    padding: 110px 8px 110px !important;   /* więcej przestrzeni nad i pod heading dla smileyów */
    margin-bottom: 32px !important;
    min-height: 400px !important;
  }
#ksn-medytacje .smiley-head h2 {
    font-size: 44px !important;
    line-height: 1.05 !important;
    max-width: 320px !important;
    margin: 0 auto !important;
    letter-spacing: -0.025em !important;
    font-weight: 800 !important;
  }
#ksn-medytacje .smiley-1 {
    top: 0 !important; left: 4% !important;
    width: 60px !important; height: 60px !important;
  }
#ksn-medytacje .smiley-2 {
    top: 8px !important; right: 4% !important;
    bottom: auto !important; left: auto !important;
    width: 64px !important; height: 64px !important;
  }
#ksn-medytacje .smiley-3 {
    top: auto !important; bottom: 6px !important;
    left: 8% !important;
    width: 60px !important; height: 60px !important;
  }
#ksn-medytacje .smiley-4 {
    top: auto !important; bottom: 0 !important;
    right: 6% !important; left: auto !important;
    width: 64px !important; height: 64px !important;
  }
#ksn-medytacje .smiley-5 {
    top: 90px !important; left: -4% !important;
    width: 40px !important; height: 40px !important;
  }
#ksn-medytacje .smiley-6 {
    top: 90px !important; right: -4% !important;
    width: 44px !important; height: 44px !important;
  }
#ksn-medytacje .sparkle-1 { top: 70px !important; left: 24% !important; }
#ksn-medytacje .sparkle-2 { bottom: 70px !important; right: 22% !important; }
#ksn-medytacje .sparkle-3 { top: 45% !important; left: auto !important; right: 14% !important; }
#ksn-medytacje .smiley-cards {
    display: flex !important;
    grid-template-columns: unset !important;
    gap: 14px !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 4px 20px 20px !important;
    margin: 0 -20px !important;
    max-width: none !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
#ksn-medytacje .smiley-cards::-webkit-scrollbar { display: none; }
#ksn-medytacje .smiley-card {
    flex: 0 0 calc(100vw - 80px);
    scroll-snap-align: center;
    min-height: 280px !important;
    padding: 32px 28px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }
#ksn-medytacje .smiley-card p {
    font-size: 24px !important;       /* 24px na mobile (i desktopie) */
    line-height: 1.35 !important;
    font-weight: 500 !important;
    letter-spacing: -0.015em !important;
  }
#ksn-medytacje .smiley-card .smiley-author {
    font-size: 13px !important;
  }
#ksn-medytacje .lib-grid, #ksn-medytacje .lib-grid-3, #ksn-medytacje .footer-grid, #ksn-medytacje .dark-block {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
#ksn-medytacje .dark-block { grid-template-columns: 1fr !important; padding: 56px 32px; border-radius: 32px; }
#ksn-medytacje .testimonial-block, #ksn-medytacje .cta-block { padding: 56px 28px; border-radius: 32px; }
#ksn-medytacje .section { padding: 56px 0; }
#ksn-medytacje .section-head.left { flex-direction: column; align-items: flex-start; }
#ksn-medytacje .footer-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px){
#ksn-medytacje .lib-grid, #ksn-medytacje .lib-grid-3 { grid-template-columns: 1fr !important; }
#ksn-medytacje .display-1 { font-size: 44px !important; }
#ksn-medytacje .display-2 { font-size: 34px !important; }
}
/* === BAJKOWO DESIGN TOKENS === */
#ksn-medytacje {
    --coral: #f29391;
    --coral-deep: #d65f5d;
    --sun: #ffc24b;
    --sun-deep: #f4a82e;
    --teal: #5fa57a;
    --paper: #ffffff;
    --ink: #2e2117;
    --ink-soft: #5a4f44;
  }
/* === BAJKOWO BUTTON SYSTEM — pill with double-drop shadow + springy bounce === */
#ksn-medytacje .btn-bajk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    cursor: pointer;
    font-family: 'Baloo 2', 'DM Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 17px !important;
    line-height: 1 !important;
    padding: 18px 32px;
    border-radius: 999px;
    text-decoration: none;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.2s ease;
    position: relative;
    white-space: nowrap;
  }
#ksn-medytacje .btn-bajk:hover { transform: translateY(-3px); }
#ksn-medytacje .btn-bajk:active { transform: translateY(1px) scale(0.99); transition-duration: 0.08s; }
/* Primary — coral with double shadow (offset solid + soft drop) */
#ksn-medytacje .btn-bajk-primary {
    background: var(--coral);
    color: #fff;
    box-shadow: 0 8px 0 -2px var(--coral-deep),
                0 14px 28px rgba(214, 95, 93, 0.32);
  }
#ksn-medytacje .btn-bajk-primary:hover {
    box-shadow: 0 12px 0 -2px var(--coral-deep),
                0 20px 36px rgba(214, 95, 93, 0.42);
  }
/* Sun (yellow) — alternate primary for "Zacznij za darmo" CTA */
#ksn-medytacje .btn-bajk-sun {
    background: var(--sun);
    color: var(--ink);
    box-shadow: 0 8px 0 -2px var(--sun-deep),
                0 14px 28px rgba(244, 168, 46, 0.32);
  }
#ksn-medytacje .btn-bajk-sun:hover {
    box-shadow: 0 12px 0 -2px var(--sun-deep),
                0 20px 36px rgba(244, 168, 46, 0.42);
  }
/* Ghost — paper white with subtle shadow */
#ksn-medytacje .btn-bajk-ghost {
    background: #fff;
    color: var(--ink);
    border: 2px solid rgba(46, 33, 23, 0.08);
    box-shadow: 0 4px 0 -1px rgba(46, 33, 23, 0.08),
                0 8px 18px rgba(46, 33, 23, 0.08);
  }
#ksn-medytacje .btn-bajk-ghost:hover {
    box-shadow: 0 7px 0 -1px rgba(46, 33, 23, 0.10),
                0 14px 26px rgba(46, 33, 23, 0.12);
  }
/* Dark — navy variant */
#ksn-medytacje .btn-bajk-dark {
    background: var(--ink);
    color: #fff;
    box-shadow: 0 8px 0 -2px #0e0c0a,
                0 14px 28px rgba(0, 0, 0, 0.28);
  }
#ksn-medytacje .btn-bajk-dark:hover {
    box-shadow: 0 12px 0 -2px #0e0c0a,
                0 20px 36px rgba(0, 0, 0, 0.36);
  }
/* Large variant */
#ksn-medytacje .btn-bajk-lg {
    font-size: 19px !important;
    padding: 22px 38px;
  }
/* === SQUIGGLE UNDERLINE === */
#ksn-medytacje .squiggle {
    position: relative;
    display: inline-block;
  }
#ksn-medytacje .squiggle::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -0.18em;
    height: 0.22em;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'><path d='M0 4 Q15 0 30 4 T60 4 T90 4 T120 4' stroke='%23f29391' stroke-width='3' fill='none' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
  }
#ksn-medytacje .squiggle-sun::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'><path d='M0 4 Q15 0 30 4 T60 4 T90 4 T120 4' stroke='%23ffc24b' stroke-width='3' fill='none' stroke-linecap='round'/></svg>");
  }
/* === STAGGER FADE-IN-UP REVEAL === */
#ksn-medytacje .fade-in-up {
    opacity: 0;
    transform: translateY(28px);
    animation: fadeInUp 0.7s ease-out forwards;
  }
#ksn-medytacje .fade-in-up.d1 { animation-delay: 0.08s; }
#ksn-medytacje .fade-in-up.d2 { animation-delay: 0.16s; }
#ksn-medytacje .fade-in-up.d3 { animation-delay: 0.24s; }
#ksn-medytacje .fade-in-up.d4 { animation-delay: 0.32s; }
#ksn-medytacje .fade-in-up.d5 { animation-delay: 0.40s; }
/* Springy hover lift utility */
#ksn-medytacje .hover-lift {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.25s ease;
  }
#ksn-medytacje .hover-lift:hover { transform: translateY(-4px); }
/* === HERO (medytacje) === */
#ksn-medytacje .med-hero {
    padding: 32px 0 80px;
    background: var(--cream);
    position: relative;
    overflow: hidden;
  }
/* Match index.html hero pattern — container with bigger padding on desktop */
#ksn-medytacje .med-hero .container-wide {
    padding-left: 56px;
    padding-right: 56px;
  }
@media (max-width: 900px){
#ksn-medytacje .med-hero .container-wide {
      padding-left: 28px;
      padding-right: 28px;
    }
}
@media (max-width: 600px){
#ksn-medytacje .med-hero .container-wide {
      padding-left: 20px;
      padding-right: 20px;
    }
}
/* Bigger eyebrow */
#ksn-medytacje .med-hero .eyebrow-rich {
    font-size: 13px !important;
    padding: 10px 20px 10px 14px !important;
  }
#ksn-medytacje .med-hero .eyebrow-dot {
    width: 10px !important; height: 10px !important;
  }
/* Lead — like index.html hero */
#ksn-medytacje .med-hero h1 { margin: 22px 0; }
#ksn-medytacje .med-hero .lead {
    font-size: 20px !important;
    color: var(--text-soft);
    margin: 0 0 36px;
    line-height: 1.5 !important;
    max-width: 540px;
  }
/* Trust row */
#ksn-medytacje .med-trust-row {
    margin-top: 40px;
    color: var(--text-soft);
    font-size: 14px !important;
  }
#ksn-medytacje .med-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 72px;
    align-items: center;
    position: relative;
    z-index: 1;
  }
#ksn-medytacje .med-hero h1 { margin: 22px 0; }
#ksn-medytacje .med-hero .lead {
    font-size: 19px !important;
    color: var(--text-soft);
    margin: 0 0 32px;
    line-height: 1.55 !important;
    max-width: 540px;
  }
#ksn-medytacje .med-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    margin-top: 32px;
    color: var(--text-soft);
    font-size: 14px !important;
  }
#ksn-medytacje .med-trust-row span { display: inline-flex; align-items: center; gap: 8px; }
#ksn-medytacje .med-trust-check {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--mint);
    color: var(--mint-deep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800 !important;
    font-size: 11px !important;
    flex-shrink: 0;
  }
/* Pro eyebrow with animated dot — no double-dot bug */
#ksn-medytacje .eyebrow-rich {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    background: rgba(242,147,145,0.14);
    color: #d65f5d;
    padding: 10px 18px 10px 14px !important;
    border-radius: 999px;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    border: 1.5px solid rgba(242,147,145,0.22);
    box-shadow: 0 6px 16px -8px rgba(242,147,145,0.25);
  }
/* Kill the default .eyebrow::before dot when using .eyebrow-rich (avoid double-dot) */
#ksn-medytacje .eyebrow-rich::before { content: none !important; }
#ksn-medytacje .eyebrow-rich { padding-left: 14px !important; }
#ksn-medytacje .eyebrow-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #f29391;
    box-shadow: 0 0 0 4px rgba(242,147,145,0.25);
    animation: eyebrowDotPulse 1.8s ease-in-out infinite;
    flex-shrink: 0;
  }
/* Social proof row */
#ksn-medytacje .med-social-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
    padding: 12px 18px 12px 14px;
    background: rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    width: fit-content;
    backdrop-filter: blur(6px);
    box-shadow: 0 8px 24px rgba(18,17,28,0.04);
  }
#ksn-medytacje .med-social-avatars { display: flex; }
#ksn-medytacje .med-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800 !important;
    font-size: 12px !important;
    border: 2px solid #fff;
    margin-left: -8px;
    box-shadow: 0 2px 6px rgba(18,17,28,0.08);
  }
#ksn-medytacje .med-avatar:first-child { margin-left: 0; }
#ksn-medytacje .med-social-text {
    font-size: 13px !important;
    color: var(--text);
    line-height: 1.35 !important;
  }
#ksn-medytacje .med-social-text strong { font-weight: 800 !important; }
#ksn-medytacje .med-social-text small { color: var(--text-muted); font-size: 11px !important; }
#ksn-medytacje .med-social-stars { color: #ffce4d; font-size: 12px !important; letter-spacing: 1px !important; }
/* Professional product visualization — phone mockup with floating UI cards */
#ksn-medytacje .med-hero-character {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 560px;
    width: 100%;
    margin: 0 auto;
    padding: 60px 0;  /* room for floating cards above/below phone */
  }
/* Soft radial glow backdrop */
#ksn-medytacje .med-hero-character::before {
    content: '';
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(242,147,145,0.18) 0%, rgba(255,206,77,0.10) 50%, transparent 75%);
    z-index: 0;
    animation: heroGlow 8s ease-in-out infinite;
  }
/* Main phone mockup */
#ksn-medytacje .hero-phone {
    position: relative;
    z-index: 2;
    width: 72%;
    max-width: 400px;
    aspect-ratio: 9 / 18;
    background: #1a1612;
    border-radius: 48px;
    padding: 12px;
    box-shadow: 0 50px 100px rgba(18, 17, 28, 0.32),
                0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    animation: heroPhoneFloat 7s ease-in-out infinite;
  }
#ksn-medytacje .hero-phone-screen {
    width: 100%; height: 100%;
    background: linear-gradient(180deg, #25201d 0%, #1a1612 100%);
    border-radius: 46px;
    overflow: hidden;
    padding: 36px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #faf6f1;
  }
#ksn-medytacje .hero-phone-cat {
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 1.6px !important;
    color: #f29391;
    text-transform: uppercase !important;
    margin-bottom: 18px;
  }
#ksn-medytacje .hero-phone-title {
    font-size: 24px !important;
    font-weight: 700 !important;
    text-align: center;
    margin-bottom: 32px;
    letter-spacing: -0.022em !important;
    line-height: 1.15 !important;
  }
/* Circular timer */
#ksn-medytacje .hero-phone-timer {
    width: 190px; height: 190px;
    position: relative;
    margin-bottom: 30px;
  }
#ksn-medytacje .hero-phone-timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
#ksn-medytacje .hero-phone-timer-track { fill: none; stroke: rgba(255,255,255,0.1); stroke-width: 3; }
#ksn-medytacje .hero-phone-timer-prog { fill: none; stroke: #f29391; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 289; stroke-dashoffset: 116; }
#ksn-medytacje .hero-phone-timer-text {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    font-size: 34px !important; font-weight: 800 !important;
    letter-spacing: -0.02em !important;
  }
#ksn-medytacje .hero-phone-timer-text small { font-size: 12px !important; color: rgba(255,255,255,0.5); font-weight: 500 !important; margin-top: 5px; }
/* Ambient pills */
#ksn-medytacje .hero-phone-ambient {
    display: flex; gap: 6px; flex-wrap: wrap; justify-content: center;
    margin-bottom: 28px;
  }
#ksn-medytacje .hero-phone-ambient span {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.7);
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 7px 13px;
    border-radius: 999px;
  }
#ksn-medytacje .hero-phone-ambient span.active { background: #f29391; color: #fff; }
#ksn-medytacje .hero-phone-play {
    width: 76px; height: 76px;
    border-radius: 50%;
    background: #f29391;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 14px 32px rgba(242,147,145,0.5);
  }
#ksn-medytacje .hero-phone-play svg { width: 26px; height: 26px; }
/* Floating UI cards around the phone */
#ksn-medytacje .hero-float-card {
    position: absolute;
    z-index: 3;
    background: #fff;
    border-radius: 22px;
    padding: 18px 22px;
    box-shadow: 0 20px 48px rgba(18, 17, 28, 0.12);
    backdrop-filter: blur(8px);
  }
#ksn-medytacje .hero-float-waveform {
    top: 14%;
    left: -8%;
    display: flex; align-items: center; gap: 12px;
    animation: heroCardFloat 6s ease-in-out infinite;
  }
#ksn-medytacje .hero-float-wave {
    display: flex; gap: 3px; height: 28px;
    align-items: center;
  }
#ksn-medytacje .hero-float-wave span {
    width: 3.5px;
    background: #f29391;
    border-radius: 999px;
    opacity: 0.75;
  }
#ksn-medytacje .hero-float-wave span:nth-child(1) { height: 40%; }
#ksn-medytacje .hero-float-wave span:nth-child(2) { height: 70%; }
#ksn-medytacje .hero-float-wave span:nth-child(3) { height: 90%; }
#ksn-medytacje .hero-float-wave span:nth-child(4) { height: 55%; }
#ksn-medytacje .hero-float-wave span:nth-child(5) { height: 80%; }
#ksn-medytacje .hero-float-wave span:nth-child(6) { height: 65%; }
#ksn-medytacje .hero-float-wave span:nth-child(7) { height: 95%; }
#ksn-medytacje .hero-float-wave span:nth-child(8) { height: 50%; }
#ksn-medytacje .hero-float-wave-label {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--text);
    letter-spacing: -0.01em !important;
  }
#ksn-medytacje .hero-float-wave-label small {
    display: block;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: var(--text-muted);
    margin-top: 3px;
  }
#ksn-medytacje .hero-float-duration {
    bottom: 26%;
    right: -10%;
    display: flex;
    align-items: center;
    gap: 12px;
    animation: heroCardFloat 7s ease-in-out infinite 1s;
  }
#ksn-medytacje .hero-float-duration-icon {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--lavender, #c4b5fd);
    color: #5b3a8a;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
#ksn-medytacje .hero-float-duration-icon svg { width: 22px; height: 22px; }
#ksn-medytacje .hero-float-duration-text {
    font-size: 13px !important;
    color: var(--text);
    font-weight: 700 !important;
    line-height: 1.3 !important;
  }
#ksn-medytacje .hero-float-duration-text strong {
    display: block;
    font-size: 17px !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
  }
#ksn-medytacje .hero-float-duration-text small {
    display: block;
    font-size: 11px !important;
    color: var(--text-muted);
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-top: 3px;
  }
#ksn-medytacje .hero-float-listening {
    top: 60%;
    left: -14%;
    display: flex; align-items: center; gap: 10px;
    animation: heroCardFloat 8s ease-in-out infinite 0.5s;
  }
#ksn-medytacje .hero-float-listening-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #5fa57a;
    box-shadow: 0 0 0 5px rgba(95, 165, 122, 0.2);
    animation: heroDotPulse 1.6s ease-in-out infinite;
  }
#ksn-medytacje .hero-float-listening-text {
    font-size: 13px !important;
    color: var(--text);
    font-weight: 600 !important;
  }
#ksn-medytacje .hero-float-listening-text small {
    display: block;
    font-size: 11px !important;
    color: var(--text-muted);
    font-weight: 500 !important;
    margin-top: 3px;
  }
/* Decorative orbs */
#ksn-medytacje .hero-orb {
    position: absolute;
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
  }
#ksn-medytacje .hero-orb-1 {
    width: 76px; height: 76px;
    background: #ffce4d;
    top: 4%; right: 8%;
    animation: heroOrbFloat 9s ease-in-out infinite;
  }
#ksn-medytacje .hero-orb-2 {
    width: 48px; height: 48px;
    background: #c4b5fd;
    bottom: 8%; left: 4%;
    animation: heroOrbFloat 7s ease-in-out infinite 1s;
  }
#ksn-medytacje .hero-orb-3 {
    width: 32px; height: 32px;
    background: #5fa57a;
    top: 32%; right: -2%;
    animation: heroOrbFloat 10s ease-in-out infinite 2s;
  }
@media (max-width: 900px){
#ksn-medytacje .med-hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
#ksn-medytacje .med-hero-character {
      max-width: 380px !important;
      margin: 16px auto 0 !important;
      aspect-ratio: auto !important;
      min-height: 0 !important;
      padding: 60px 0 70px !important;
    }
#ksn-medytacje .hero-phone {
      max-width: 280px !important;
      width: 100% !important;
    }
#ksn-medytacje .hero-float-card {
      transform: scale(0.6) !important;
      transform-origin: center !important;
    }
#ksn-medytacje .hero-float-waveform { top: 4% !important; left: -10% !important; }
#ksn-medytacje .hero-float-listening { top: 50% !important; left: -12% !important; right: auto !important; }
#ksn-medytacje .hero-float-duration { bottom: 14% !important; right: -12% !important; }
#ksn-medytacje .hero-orb-1 { width: 52px !important; height: 52px !important; top: 0 !important; right: -4% !important; }
#ksn-medytacje .hero-orb-2 { width: 36px !important; height: 36px !important; bottom: 4% !important; left: 0 !important; }
#ksn-medytacje .hero-orb-3 { width: 22px !important; height: 22px !important; top: 30% !important; right: -4% !important; }
#ksn-medytacje .med-dot { display: none; }
#ksn-medytacje .med-hero { overflow: hidden; padding-bottom: 64px; }
#ksn-medytacje { overflow-x: hidden; }
#ksn-medytacje .med-cat-deco,
    #ksn-medytacje .med-cat-deco-sparkle { display: none !important; }
#ksn-medytacje .med-hero .eyebrow,
    #ksn-medytacje .med-hero .eyebrow-rich { font-size: 15px !important; }
#ksn-medytacje .med-hero .display-1 {
      font-size: 60px !important;
      line-height: 1.0 !important;
      letter-spacing: -0.032em !important;
    }
#ksn-medytacje .med-hero .lead {
      font-size: 22px !important;
      line-height: 1.5 !important;
      max-width: 100% !important;
    }
#ksn-medytacje .med-hero .btn-lg {
      font-size: 18px !important;
      padding: 20px 32px !important;
    }
#ksn-medytacje .med-hero .med-trust-row { font-size: 17px !important; gap: 16px 22px !important; }
#ksn-medytacje .med-hero .med-trust-check { width: 28px !important; height: 28px !important; font-size: 14px !important; }
#ksn-medytacje .section-head .eyebrow { font-size: 15px !important; }
#ksn-medytacje .med-cat-section .section-head h2,
    #ksn-medytacje #medytacje .section-head h2 {
      font-size: 52px !important;
      line-height: 1.04 !important;
    }
#ksn-medytacje .med-cat-section .section-head p,
    #ksn-medytacje #medytacje .section-head p {
      font-size: 19px !important;
    }
#ksn-medytacje .med-cat-tile-name { font-size: 32px !important; }
#ksn-medytacje .med-cat-tile-desc { font-size: 18px !important; }
#ksn-medytacje .med-cat-tile-count { font-size: 13px !important; padding: 7px 13px !important; }
#ksn-medytacje .med-card-title { font-size: 24px !important; line-height: 1.18 !important; }
#ksn-medytacje .med-card-desc { font-size: 16.5px !important; line-height: 1.5 !important; }
#ksn-medytacje .med-card-tag { font-size: 14px !important; padding: 7px 14px 7px 12px !important; }
#ksn-medytacje .med-card-length { font-size: 14.5px !important; }
#ksn-medytacje .med-card-player-label { font-size: 16px !important; }
#ksn-medytacje .med-card-player-duration { font-size: 14px !important; }
#ksn-medytacje .med-featured-content h2 { font-size: 34px !important; line-height: 1.1 !important; }
#ksn-medytacje .med-featured-content p { font-size: 17px !important; line-height: 1.5 !important; }
#ksn-medytacje .med-featured-pack-note { font-size: 16px !important; }
#ksn-medytacje .med-featured-cta { font-size: 16px !important; padding: 18px 26px !important; }
#ksn-medytacje .med-featured-player-title { font-size: 16px !important; }
#ksn-medytacje .med-filter-chip { font-size: 17px !important; padding: 14px 20px !important; }
#ksn-medytacje .med-filter-count { font-size: 14px !important; padding: 3px 9px !important; }
#ksn-medytacje .breadcrumb { font-size: 14.5px !important; }
}
@media (max-width: 480px){
#ksn-medytacje .med-hero .display-1 { font-size: 52px !important; }
#ksn-medytacje .med-hero .lead { font-size: 19.5px !important; }
#ksn-medytacje .med-hero .btn-lg { font-size: 17px !important; padding: 18px 28px !important; }
#ksn-medytacje .med-hero .med-trust-row { font-size: 16px !important; }
#ksn-medytacje .med-cat-section .section-head h2,
    #ksn-medytacje #medytacje .section-head h2 { font-size: 44px !important; }
#ksn-medytacje .med-cat-section .section-head p,
    #ksn-medytacje #medytacje .section-head p { font-size: 17.5px !important; }
#ksn-medytacje .med-cat-tile-name { font-size: 28px !important; }
#ksn-medytacje .med-cat-tile-desc { font-size: 17px !important; }
#ksn-medytacje .med-card-title { font-size: 22px !important; }
#ksn-medytacje .med-card-desc { font-size: 15.5px !important; }
#ksn-medytacje .med-featured-content h2 { font-size: 30px !important; }
#ksn-medytacje .med-featured-content p { font-size: 16px !important; }
#ksn-medytacje .med-filter-chip { font-size: 16px !important; }
}
#ksn-medytacje .med-hero-character::before,
  #ksn-medytacje .med-hero-character::after,
  #ksn-medytacje .med-hero-ring {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(242,147,145,0.3);
    animation: breathe 6s ease-in-out infinite;
  }
#ksn-medytacje .med-hero-character::before { width: 88%; height: 88%; animation-delay: 0s; }
#ksn-medytacje .med-hero-character::after { width: 70%; height: 70%; animation-delay: 0.8s; border-color: rgba(255,206,77,0.4); }
#ksn-medytacje .med-hero-ring { width: 100%; height: 100%; animation-delay: 1.4s; border-color: rgba(123,95,160,0.25); }
#ksn-medytacje .med-hero-svg {
    width: 50%;
    position: relative;
    z-index: 1;
    animation: float 7s ease-in-out infinite;
  }
#ksn-medytacje .med-dot { position: absolute; border-radius: 50%; z-index: 0; }
#ksn-medytacje .med-dot-1 { width: 60px; height: 60px; background: var(--mint); top: 5%; left: -10px; animation: float 8s ease-in-out infinite; }
#ksn-medytacje .med-dot-2 { width: 40px; height: 40px; background: var(--butter); bottom: 12%; right: 4%; animation: float 6s ease-in-out infinite 1s; }
#ksn-medytacje .med-dot-3 { width: 30px; height: 30px; background: var(--lavender); top: 30%; right: -15px; animation: float 7s ease-in-out infinite 0.5s; }
/* === FEATURED PLAYER — FLAT WIDE card, butter yellow w/ house photo at opacity === */
#ksn-medytacje .med-featured-section {
    padding: 0 0 56px;
  }
#ksn-medytacje .med-featured-card {
    background-color: #1a1612;
    background-image: linear-gradient(95deg, rgba(20,16,12,0.92) 0%, rgba(20,16,12,0.72) 40%, rgba(20,16,12,0.45) 100%),
                      url('https://ksiegarnianarzedzipsychologicznych.pl/img/dom.png');
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    border-radius: 28px;
    padding: 36px 44px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 40px;
    align-items: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 36px rgba(18, 17, 28, 0.18);
  }
#ksn-medytacje .med-featured-content {
    position: relative;
    z-index: 1;
    max-width: 720px;
  }
#ksn-medytacje .med-featured-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f29391;
    color: #fff;
    font-size: 11px !important;
    font-weight: 800 !important;
    padding: 7px 14px;
    border-radius: 999px;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    margin-bottom: 14px;
  }
#ksn-medytacje .med-featured-badge-star { width: 12px; height: 12px; }
#ksn-medytacje .med-featured-content h2 {
    font-size: clamp(26px, 2.8vw, 36px) !important;
    color: #faf6f1;
    margin-bottom: 10px;
    letter-spacing: -0.024em !important;
    line-height: 1.1 !important;
  }
#ksn-medytacje .med-featured-content h2 em {
    color: #f29391;
    font-style: italic !important;
    font-weight: 700 !important;
  }
#ksn-medytacje .med-featured-content p {
    font-size: 15px !important;
    color: rgba(250,246,241,0.78);
    opacity: 1;
    margin-bottom: 0;
    max-width: 580px;
    line-height: 1.55 !important;
  }
#ksn-medytacje .med-featured-content p em {
    color: #f29391;
    font-style: italic !important;
    font-weight: 500 !important;
    opacity: 1;
  }
/* Right side — pakiet info + CTA */
#ksn-medytacje .med-featured-pricing {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    flex-shrink: 0;
  }
#ksn-medytacje .med-featured-pack-note {
    color: #5fd47a;
    opacity: 1;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none;
    letter-spacing: 0.2px !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease;
  }
#ksn-medytacje .med-featured-pack-note:hover { color: #7ae09a; }
#ksn-medytacje .med-featured-cta {
    background: #f29391;
    color: #fff;
    padding: 14px 28px;
    border-radius: 999px;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    transition: background 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
    box-shadow: 0 10px 24px rgba(242,147,145,0.45);
  }
#ksn-medytacje .med-featured-cta:hover { background: #e07f7d; transform: translateY(-2px); }
/* Player widget at bottom of featured card — dark theme glass */
#ksn-medytacje .med-featured-player {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 18px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 18px;
    padding: 14px 22px 14px 14px;
    margin-top: 22px;
    position: relative;
    z-index: 1;
  }
#ksn-medytacje .med-featured-play-btn {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: #f29391;
    color: #fff;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.2s ease, background 0.2s ease;
    box-shadow: 0 6px 16px rgba(242,147,145,0.45);
  }
#ksn-medytacje .med-featured-play-btn:hover { transform: scale(1.06); background: #e07f7d; }
#ksn-medytacje .med-featured-play-btn svg { width: 18px; height: 18px; margin-left: 2px; }
#ksn-medytacje .med-featured-player-title {
    font-weight: 700 !important;
    font-size: 14px !important;
    margin-bottom: 8px;
    color: #faf6f1;
    letter-spacing: -0.01em !important;
  }
#ksn-medytacje .med-featured-waveform {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 24px;
    width: 100%;
    overflow: hidden;
  }
#ksn-medytacje .med-wave-bar {
    flex: 1 1 0;
    min-width: 2px;
    background: #f29391;
    border-radius: 2px;
    opacity: 0.7;
    transition: height 0.2s ease, opacity 0.2s ease;
  }
#ksn-medytacje .med-wave-bar:nth-child(1) { height: 30%; }
#ksn-medytacje .med-wave-bar:nth-child(2) { height: 55%; }
#ksn-medytacje .med-wave-bar:nth-child(3) { height: 75%; }
#ksn-medytacje .med-wave-bar:nth-child(4) { height: 95%; }
#ksn-medytacje .med-wave-bar:nth-child(5) { height: 50%; }
#ksn-medytacje .med-wave-bar:nth-child(6) { height: 80%; }
#ksn-medytacje .med-wave-bar:nth-child(7) { height: 40%; }
#ksn-medytacje .med-wave-bar:nth-child(8) { height: 65%; }
#ksn-medytacje .med-wave-bar:nth-child(9) { height: 90%; }
#ksn-medytacje .med-wave-bar:nth-child(10) { height: 35%; }
#ksn-medytacje .med-wave-bar:nth-child(11) { height: 70%; }
#ksn-medytacje .med-wave-bar:nth-child(12) { height: 50%; }
#ksn-medytacje .med-wave-bar:nth-child(13) { height: 85%; }
#ksn-medytacje .med-wave-bar:nth-child(14) { height: 45%; }
#ksn-medytacje .med-wave-bar:nth-child(15) { height: 60%; }
#ksn-medytacje .med-wave-bar:nth-child(16) { height: 80%; }
#ksn-medytacje .med-featured-card.is-playing .med-wave-bar {
    animation: waveDance 1.2s ease-in-out infinite;
  }
#ksn-medytacje .med-featured-card.is-playing .med-wave-bar:nth-child(2n) { animation-delay: 0.15s; }
#ksn-medytacje .med-featured-card.is-playing .med-wave-bar:nth-child(3n) { animation-delay: 0.3s; }
#ksn-medytacje .med-featured-visual {
    aspect-ratio: 4/5;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,0.18);
    position: relative;
  }
#ksn-medytacje .med-featured-visual img {
    width: 100%; height: 100%;
    object-fit: cover;
  }
/* === CATEGORY SECTION — enhanced with decorations + animations === */
#ksn-medytacje .med-cat-section {
    position: relative;
    overflow: hidden;
  }
/* Decorative blob shapes in section background */
#ksn-medytacje .med-cat-deco {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
  }
#ksn-medytacje .med-cat-deco-1 {
    width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(255, 206, 77, 0.18) 0%, transparent 70%);
    top: -150px; left: -150px;
    animation: catDecoFloat 14s ease-in-out infinite;
  }
#ksn-medytacje .med-cat-deco-2 {
    width: 360px; height: 360px;
    background: radial-gradient(circle, rgba(242, 147, 145, 0.16) 0%, transparent 70%);
    bottom: -120px; right: -120px;
    animation: catDecoFloat 16s ease-in-out infinite reverse;
  }
/* Sparkles around heading */
#ksn-medytacje .med-cat-deco-sparkle {
    position: absolute;
    font-size: 22px !important;
    pointer-events: none;
    z-index: 1;
    animation: catSparkle 3s ease-in-out infinite;
  }
#ksn-medytacje .med-cat-sparkle-1 { top: 8%; left: 22%; color: #ffce4d; animation-delay: 0s; }
#ksn-medytacje .med-cat-sparkle-2 { top: 14%; right: 22%; color: #f29391; font-size: 18px !important; animation-delay: 1s; }
#ksn-medytacje .med-cat-sparkle-3 { top: 24%; left: 50%; color: #7b5fa0; font-size: 16px !important; animation-delay: 2s; }
#ksn-medytacje .med-cat-head { position: relative; z-index: 2; }
#ksn-medytacje .med-cat-section .container-wide { position: relative; z-index: 2; }
#ksn-medytacje .med-cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 32px;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
  }
#ksn-medytacje .med-cat-tile {
    border: 0;
    border-radius: 36px;
    padding: 72px 40px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
    font-family: 'DM Sans', sans-serif !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease;
    color: var(--text);
    min-height: 340px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
  }
/* Radial glow from top that grows on hover */
#ksn-medytacje .med-cat-tile::before {
    content: '';
    position: absolute;
    width: 220px; height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.55) 0%, transparent 65%);
    top: -60%; left: 50%;
    transform: translateX(-50%);
    transition: top 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }
#ksn-medytacje .med-cat-tile:hover::before { top: -40%; }
#ksn-medytacje .med-cat-tile:hover {
    transform: translateY(-10px);
    box-shadow: 0 28px 60px rgba(18, 17, 28, 0.16);
  }
#ksn-medytacje .med-cat-tile > * { position: relative; z-index: 1; }
/* Count badge in top-left corner */
#ksn-medytacje .med-cat-tile-count {
    position: absolute;
    top: 16px; left: 16px;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(6px);
    color: var(--text);
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 5px 10px;
    border-radius: 999px;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    z-index: 2;
  }
/* Arrow indicator (slides in on hover) */
#ksn-medytacje .med-cat-tile-arrow {
    position: absolute;
    bottom: 18px; right: 18px;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--text);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translate(-8px, 0) scale(0.85);
    transition: all 0.35s cubic-bezier(0.34, 1.46, 0.64, 1);
    z-index: 2;
    box-shadow: 0 6px 16px rgba(18, 17, 28, 0.18);
  }
#ksn-medytacje .med-cat-tile:hover .med-cat-tile-arrow {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
/* Icon — floating animation per tile */
#ksn-medytacje .med-cat-tile-icon {
    width: 112px; height: 112px;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(18, 17, 28, 0.12);
    animation: catIconFloat 5s ease-in-out infinite;
    transition: transform 0.3s cubic-bezier(0.34, 1.46, 0.64, 1);
  }
#ksn-medytacje .med-cat-tile:nth-child(2) .med-cat-tile-icon { animation-delay: 0.3s; }
#ksn-medytacje .med-cat-tile:nth-child(3) .med-cat-tile-icon { animation-delay: 0.6s; }
#ksn-medytacje .med-cat-tile:nth-child(4) .med-cat-tile-icon { animation-delay: 0.9s; }
#ksn-medytacje .med-cat-tile:nth-child(5) .med-cat-tile-icon { animation-delay: 1.2s; }
#ksn-medytacje .med-cat-tile:nth-child(6) .med-cat-tile-icon { animation-delay: 1.5s; }
#ksn-medytacje .med-cat-tile:hover .med-cat-tile-icon {
    animation: none;
    transform: translateY(-4px) scale(1.08);
  }
#ksn-medytacje .med-cat-tile-icon svg {
    width: 52px !important;
    height: 52px !important;
  }
#ksn-medytacje .med-cat-tile-name {
    font-weight: 700 !important;
    font-size: 26px !important;
    letter-spacing: -0.022em !important;
    line-height: 1.12 !important;
    margin-top: -6px;
  }
#ksn-medytacje .med-cat-tile-desc {
    font-size: 16px !important;
    color: var(--text-soft);
    line-height: 1.4 !important;
  }
#ksn-medytacje .med-cat-sen { background: var(--lavender); }
#ksn-medytacje .med-cat-lek { background: var(--sky); }
#ksn-medytacje .med-cat-emocje { background: var(--coral-soft); }
#ksn-medytacje .med-cat-oddech { background: var(--mint); }
#ksn-medytacje .med-cat-wieczor { background: var(--butter-soft); }
#ksn-medytacje .med-cat-all { background: var(--peach); }
/* === FILTERS + SEARCH === */
#ksn-medytacje .med-filters {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    margin: 32px 0 40px;
  }
#ksn-medytacje .med-search-wrap {
    width: 100%;
    max-width: 480px;
    position: relative;
  }
#ksn-medytacje .med-search-wrap input {
    width: 100%;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 999px;
    padding: 14px 22px 14px 48px;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 15px !important;
    color: var(--text);
    transition: border-color 0.2s ease;
  }
#ksn-medytacje .med-search-wrap input:focus { outline: none; border-color: var(--text); }
#ksn-medytacje .med-search-wrap::before {
    content: '';
    position: absolute;
    left: 20px; top: 50%;
    transform: translateY(-50%);
    width: 18px; height: 18px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a5d63' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") no-repeat center;
    background-size: contain;
  }
#ksn-medytacje .med-filter-chips {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }
#ksn-medytacje .med-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 18px 11px 16px;
    border-radius: 999px;
    background: #fff;
    color: var(--text);
    font-size: 14px !important;
    font-weight: 600 !important;
    border: 1.5px solid rgba(18,17,28,0.08);
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: 'DM Sans', sans-serif !important;
    letter-spacing: -0.005em !important;
  }
#ksn-medytacje .med-filter-chip:hover {
    background: rgba(18,17,28,0.03);
    border-color: rgba(18,17,28,0.18);
    transform: translateY(-1px);
  }
#ksn-medytacje .med-filter-chip.active {
    background: var(--text);
    color: #fff;
    border-color: var(--text);
    padding-left: 18px;
  }
/* Colored dot per category */
#ksn-medytacje .med-filter-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: rgba(0,0,0,0.3);
    flex-shrink: 0;
    transition: transform 0.25s ease;
  }
#ksn-medytacje .med-filter-chip:hover .med-filter-dot { transform: scale(1.18); }
#ksn-medytacje .med-filter-chip[data-cat="sen"]       .med-filter-dot { background: #a78bfa; }
#ksn-medytacje .med-filter-chip[data-cat="relaks"]    .med-filter-dot { background: #6fbf8a; }
#ksn-medytacje .med-filter-chip[data-cat="lek"]       .med-filter-dot { background: #7aaad6; }
#ksn-medytacje .med-filter-chip[data-cat="trudne"]    .med-filter-dot { background: #e89d6e; }
#ksn-medytacje .med-filter-chip[data-cat="oddech"]    .med-filter-dot { background: #5fd47a; }
#ksn-medytacje .med-filter-chip[data-cat="wieczorny"] .med-filter-dot { background: #f29391; }
/* Count badge on "Wszystkie" */
#ksn-medytacje .med-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.95);
    font-size: 11.5px !important;
    font-weight: 700 !important;
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: 2px;
    min-width: 22px;
  }
#ksn-medytacje .med-filter-chip:not(.active) .med-filter-count {
    background: rgba(18,17,28,0.06);
    color: var(--text-soft);
  }
/* Section head — eyebrow with pink dot */
#ksn-medytacje #medytacje .section-head .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
#ksn-medytacje #medytacje .section-head .eyebrow::before {
    content: '';
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--brand);
    flex-shrink: 0;
  }
#ksn-medytacje #medytacje .section-head h2 { max-width: 18ch; margin-left: auto; margin-right: auto; }
#ksn-medytacje #medytacje .section-head p { max-width: 56ch; margin-left: auto; margin-right: auto; }
/* === MEDYTACJE GRID === */
#ksn-medytacje .med-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
  }
@media (max-width: 1100px){
#ksn-medytacje .med-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
#ksn-medytacje .med-grid { grid-template-columns: 1fr; }
}
/* Per-category color tokens (used by card pill + accents) */
#ksn-medytacje .med-card[data-cat="sen"]       { --cat-color: #7a5cc4; --cat-bg: #ede9fe; }
#ksn-medytacje .med-card[data-cat="relaks"]    { --cat-color: #3f8a5c; --cat-bg: #d4ebde; }
#ksn-medytacje .med-card[data-cat="lek"]       { --cat-color: #4a7caf; --cat-bg: #d6e6f2; }
#ksn-medytacje .med-card[data-cat="trudne"]    { --cat-color: #b86238; --cat-bg: #fadcd0; }
#ksn-medytacje .med-card[data-cat="oddech"]    { --cat-color: #2f8a47; --cat-bg: #ccebd3; }
#ksn-medytacje .med-card[data-cat="wieczorny"] { --cat-color: #b35977; --cat-bg: #f5d6e2; }
#ksn-medytacje .med-card {
    --card-bg: #fffdf7;
    background: var(--card-bg);
    border-radius: 24px;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 0 -1px rgba(18,17,28,0.04), 0 10px 28px -14px rgba(18,17,28,0.10);
  }
#ksn-medytacje .med-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 0 -1px rgba(18,17,28,0.06), 0 24px 48px -20px rgba(18,17,28,0.20);
  }
#ksn-medytacje .med-card.is-hidden { display: none; }
/* Photo banner with gentle fade into card body */
#ksn-medytacje .med-card-cover {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: linear-gradient(135deg, var(--cat-bg, var(--peach)) 0%, var(--coral-soft) 100%);
  }
#ksn-medytacje .med-card-cover img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
#ksn-medytacje .med-card:hover .med-card-cover img { transform: scale(1.04); }
/* Soft gradient mask — photo dissolves into card bg at the bottom */
#ksn-medytacje .med-card-cover::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 32%;
    background: linear-gradient(180deg,
      rgba(255,253,247,0) 0%,
      rgba(255,253,247,0.55) 60%,
      #fffdf7 100%);
    pointer-events: none;
  }
/* SVG cover fallback (used when no real photo yet) */
#ksn-medytacje .med-card-cover-svg {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
  }
#ksn-medytacje .med-card-cover-svg svg { width: 44%; height: 44%; opacity: 0.85; }
#ksn-medytacje .med-card-body {
    padding: 16px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    position: relative;
    margin-top: -12px;
    z-index: 1;
    background: var(--card-bg);
  }
#ksn-medytacje .med-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
  }
/* Category pill — colored dot + colored text on tinted bg */
#ksn-medytacje .med-card-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--cat-bg, rgba(18,17,28,0.05));
    color: var(--cat-color, var(--text));
    padding: 5px 12px 5px 10px;
    border-radius: 999px;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: -0.005em !important;
    text-transform: none !important;
    line-height: 1 !important;
    white-space: nowrap;
  }
#ksn-medytacje .med-card-tag::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
  }
/* Duration text — plain, top-right of card body */
#ksn-medytacje .med-card-length {
    position: static;
    background: none;
    backdrop-filter: none;
    padding: 0;
    color: var(--text-muted);
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: -0.005em !important;
  }
#ksn-medytacje .med-card-title {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    color: var(--text);
    margin-top: 2px;
  }
#ksn-medytacje .med-card-desc {
    font-size: 13.5px !important;
    color: var(--text-soft);
    line-height: 1.55 !important;
    flex: 1;
  }
#ksn-medytacje .med-card-desc strong { color: var(--text); font-weight: 600 !important; }
/* Audio preview pill — coral play button + Darmowy fragment + waveform + 0:42 */
#ksn-medytacje .med-card-player {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
    padding: 12px 16px 12px 12px;
    background: #fff;
    border: 1px solid rgba(18,17,28,0.06);
    border-radius: 18px;
    width: 100%;
  }
#ksn-medytacje .med-play-btn {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease, background 0.2s ease;
    position: relative;
    box-shadow: 0 6px 16px rgba(242,147,145,0.32);
  }
#ksn-medytacje .med-play-btn:hover { transform: scale(1.08); box-shadow: 0 10px 22px rgba(242,147,145,0.45); }
#ksn-medytacje .med-play-btn svg { width: 16px; height: 16px; margin-left: 1.5px; }
#ksn-medytacje .med-play-btn .icon-pause { display: none; margin-left: 0; }
#ksn-medytacje .med-play-btn.is-playing .icon-play { display: none; }
#ksn-medytacje .med-play-btn.is-playing .icon-pause { display: block; }
#ksn-medytacje .med-play-btn.is-playing { background: var(--brand-deep, #d65f5d); }
#ksn-medytacje .med-card-player-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
#ksn-medytacje .med-card-player-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
#ksn-medytacje .med-card-player-label {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--text);
    letter-spacing: -0.01em !important;
    text-transform: none !important;
  }
#ksn-medytacje .med-card-player-duration {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: var(--text-muted);
    letter-spacing: -0.005em !important;
    flex-shrink: 0;
  }
#ksn-medytacje .med-card-waveform {
    display: flex;
    align-items: center;
    gap: 1.5px;
    height: 22px;
    overflow: hidden;
    width: 100%;
  }
#ksn-medytacje .med-card-waveform .med-wave-bar {
    width: 2px;
    flex-shrink: 0;
    background: var(--text);
    border-radius: 999px;
    opacity: 0.22;
    transition: opacity 0.2s ease;
    transform-origin: center;
  }
/* Dance animation when playing */
#ksn-medytacje .med-card.is-playing .med-card-waveform .med-wave-bar {
    background: var(--brand);
    opacity: 1;
    animation: waveDance 1.2s ease-in-out infinite;
  }
#ksn-medytacje .med-card.is-playing .med-card-waveform .med-wave-bar:nth-child(2n) { animation-delay: 0.15s; }
#ksn-medytacje .med-card.is-playing .med-card-waveform .med-wave-bar:nth-child(3n) { animation-delay: 0.3s; }
#ksn-medytacje .med-card.is-playing .med-card-waveform .med-wave-bar:nth-child(5n) { animation-delay: 0.45s; }
/* === PAKIETY === */
#ksn-medytacje .med-packs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1.3fr;
    gap: 22px;
    align-items: stretch;
  }
#ksn-medytacje .med-pack {
    background: #fff;
    border-radius: 28px;
    padding: 40px 36px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
#ksn-medytacje .med-pack:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
#ksn-medytacje .med-pack.featured {
    background: linear-gradient(135deg, var(--text) 0%, #2a2438 100%);
    color: #fff;
  }
#ksn-medytacje .med-pack.featured h3 { color: #fff; }
#ksn-medytacje .med-pack.featured .med-pack-desc { color: rgba(250,246,237,0.85); }
#ksn-medytacje .med-pack.featured .med-pack-price-new { color: var(--butter); }
#ksn-medytacje .med-pack-badge {
    align-self: flex-start;
    background: var(--brand);
    color: #fff;
    font-size: 11px !important;
    font-weight: 800 !important;
    padding: 6px 12px;
    border-radius: 999px;
    letter-spacing: 0.3px !important;
  }
#ksn-medytacje .med-pack.featured .med-pack-badge { background: var(--butter); color: var(--text); }
#ksn-medytacje .med-pack h3 {
    font-size: 24px !important;
    margin-top: 4px;
    color: var(--text);
  }
#ksn-medytacje .med-pack-desc { color: var(--text-soft); font-size: 14px !important; }
#ksn-medytacje .med-pack-list {
    list-style: none;
    padding: 0;
    margin: 8px 0 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
#ksn-medytacje .med-pack-list li {
    font-size: 13.5px !important;
    color: var(--text-soft);
    display: flex;
    gap: 8px;
    align-items: flex-start;
  }
#ksn-medytacje .med-pack-list li::before {
    content: '✓';
    color: var(--brand);
    font-weight: 800 !important;
    flex-shrink: 0;
  }
#ksn-medytacje .med-pack.featured .med-pack-list li { color: rgba(250,246,237,0.75); }
#ksn-medytacje .med-pack.featured .med-pack-list li::before { color: var(--butter); }
#ksn-medytacje .med-pack-price {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-top: auto;
    padding-top: 14px;
  }
#ksn-medytacje .med-pack-price-old {
    color: var(--text-muted);
    text-decoration: line-through;
    font-size: 16px !important;
  }
#ksn-medytacje .med-pack.featured .med-pack-price-old { color: rgba(250,246,237,0.5); }
#ksn-medytacje .med-pack-price-new {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 36px !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    color: var(--text);
  }
#ksn-medytacje .med-pack-cta {
    margin-top: 8px;
    background: var(--butter);
    color: var(--text);
    padding: 14px 24px;
    border-radius: 999px;
    text-align: center;
    font-weight: 700 !important;
    font-size: 14.5px !important;
    transition: all 0.2s ease;
  }
#ksn-medytacje .med-pack-cta:hover { background: var(--butter-deep); transform: translateY(-2px); }
#ksn-medytacje .med-pack.featured .med-pack-cta { background: var(--butter); color: var(--text); }
/* === AUTHOR === */
#ksn-medytacje .med-author-card {
    background: var(--surface);
    border-radius: 36px;
    padding: 56px;
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 48px;
    align-items: center;
  }
#ksn-medytacje .med-author-avatar {
    width: 200px; height: 200px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--peach) 0%, var(--brand) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
  }
#ksn-medytacje .med-author-avatar svg { width: 75%; }
#ksn-medytacje .med-author-card h3 {
    font-size: 28px !important;
    margin-bottom: 14px;
  }
#ksn-medytacje .med-author-card p {
    color: var(--text-soft);
    font-size: 16px !important;
    line-height: 1.6 !important;
    margin-bottom: 18px;
    max-width: 540px;
  }
#ksn-medytacje .med-author-link {
    font-weight: 700 !important;
    color: var(--brand-deep);
    transition: color 0.2s ease;
  }
#ksn-medytacje .med-author-link:hover { color: var(--brand); }
/* === CROSS-PROMO BANNER === */
#ksn-medytacje .med-cross-banner {
    background: linear-gradient(135deg, var(--mint) 0%, #8bc4a0 100%);
    border-radius: 36px;
    padding: 56px;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 48px;
    align-items: center;
    position: relative;
    overflow: hidden;
  }
#ksn-medytacje .med-cross-banner h3 {
    font-size: clamp(28px, 3vw, 38px) !important;
    color: var(--text);
    margin-bottom: 14px;
  }
#ksn-medytacje .med-cross-banner p {
    color: var(--text);
    opacity: 0.78;
    font-size: 16px !important;
    margin-bottom: 24px;
    max-width: 460px;
  }
#ksn-medytacje .med-cross-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    max-width: 280px;
    margin: 0 auto;
    position: relative;
  }
#ksn-medytacje .med-cross-orb {
    width: 60%; height: 60%;
    border-radius: 50%;
    background: rgba(255,255,255,0.6);
    animation: breathe 4s ease-in-out infinite;
    display: flex;
    align-items: center;
    justify-content: center;
  }
#ksn-medytacje .med-cross-orb::before, #ksn-medytacje .med-cross-orb::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.4);
    animation: breathe 4s ease-in-out infinite;
  }
#ksn-medytacje .med-cross-orb::before { width: 75%; height: 75%; animation-delay: 0.4s; }
#ksn-medytacje .med-cross-orb::after { width: 90%; height: 90%; animation-delay: 0.8s; }
/* === RESPONSIVE === */
@media (max-width: 1024px){
#ksn-medytacje .med-grid { grid-template-columns: repeat(3, 1fr); }
#ksn-medytacje .med-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
#ksn-medytacje .med-cat-tile { padding: 44px 24px; min-height: 240px; }
#ksn-medytacje .med-cat-tile-icon { width: 80px; height: 80px; }
#ksn-medytacje .med-cat-tile-icon svg { width: 38px !important; height: 38px !important; }
#ksn-medytacje .med-cat-tile-name { font-size: 19px !important; }
#ksn-medytacje .med-packs-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px){
#ksn-medytacje .med-hero-grid { grid-template-columns: 1fr; }
#ksn-medytacje .med-featured-section .container-wide { padding-left: 16px; padding-right: 16px; }
#ksn-medytacje .med-featured-card {
      grid-template-columns: 1fr;
      padding: 26px 22px;
      border-radius: 24px;
      gap: 20px;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      background-image: linear-gradient(180deg, rgba(20,16,12,0.86) 0%, rgba(20,16,12,0.65) 70%, rgba(20,16,12,0.55) 100%),
                        url('https://ksiegarnianarzedzipsychologicznych.pl/img/dom.png');
      background-position: center;
    }
#ksn-medytacje .med-featured-card > * { min-width: 0; max-width: 100%; box-sizing: border-box; }
#ksn-medytacje .med-featured-content { max-width: 100%; }
#ksn-medytacje .med-featured-content h2 { font-size: 24px !important; }
#ksn-medytacje .med-featured-content p {
      font-size: 14px !important;
      line-height: 1.5 !important;
      max-width: 100%;
      word-wrap: break-word;
      overflow-wrap: break-word;
    }
#ksn-medytacje .med-featured-pricing {
      align-items: stretch;
      flex-direction: column;
      gap: 12px;
      width: 100%;
    }
#ksn-medytacje .med-featured-cta {
      text-align: center;
      padding: 14px 20px;
      font-size: 12.5px !important;
      letter-spacing: 0.4px !important;
      white-space: nowrap;
      width: 100%;
      box-sizing: border-box;
    }
#ksn-medytacje .med-featured-pack-note {
      text-align: center;
      justify-content: center;
      font-size: 12.5px !important;
    }
#ksn-medytacje .med-featured-player {
      padding: 10px 12px;
      gap: 12px;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      min-width: 0;
    }
#ksn-medytacje .med-featured-player > div { min-width: 0; flex: 1 1 0; overflow: hidden; }
#ksn-medytacje .med-featured-play-btn { width: 42px; height: 42px; flex-shrink: 0; }
#ksn-medytacje .med-featured-play-btn svg { width: 14px; height: 14px; }
#ksn-medytacje .med-featured-player-title {
      font-size: 13px !important;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
#ksn-medytacje .med-featured-waveform { gap: 2px; }
#ksn-medytacje .med-featured-waveform .med-wave-bar { min-width: 1.5px; }
#ksn-medytacje .med-grid { grid-template-columns: repeat(2, 1fr); }
#ksn-medytacje .med-cat-grid {
      display: flex !important;
      grid-template-columns: unset !important;
      gap: 14px !important;
      overflow-x: auto !important;
      overflow-y: visible !important;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      padding: 16px 18px 40px !important;  /* bottom padding for shadow space */
      margin: 0 -4px !important;
      max-width: none !important;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
#ksn-medytacje .med-cat-grid::-webkit-scrollbar { display: none; }
#ksn-medytacje .med-cat-tile {
      flex: 0 0 calc(82vw - 24px) !important;
      scroll-snap-align: center;
      padding: 40px 28px !important;
      min-height: 260px !important;
      border-radius: 28px !important;
    }
#ksn-medytacje .med-cat-tile-icon { width: 84px !important; height: 84px !important; }
#ksn-medytacje .med-cat-tile-icon svg { width: 40px !important; height: 40px !important; }
#ksn-medytacje .med-cat-tile-name { font-size: 22px !important; }
#ksn-medytacje .med-cat-tile-desc { font-size: 15px !important; }
#ksn-medytacje .med-cat-tile-count { font-size: 10.5px !important; padding: 5px 10px !important; }
#ksn-medytacje .med-cat-tile-arrow { width: 36px !important; height: 36px !important; }
#ksn-medytacje .med-featured-section { padding: 56px 0 !important; }
#ksn-medytacje .med-featured-section .container-wide {
      padding-left: 16px !important;
      padding-right: 16px !important;
      width: 100% !important;
      box-sizing: border-box;
    }
#ksn-medytacje .med-featured-card {
      margin-left: auto !important;
      margin-right: auto !important;
      box-sizing: border-box;
    }
#ksn-medytacje .med-cat-section .section-head h2,
    #ksn-medytacje #medytacje .section-head h2 {
      font-size: 38px !important;
      line-height: 1.06 !important;
      letter-spacing: -0.024em !important;
    }
#ksn-medytacje .med-cat-section .section-head p,
    #ksn-medytacje #medytacje .section-head p {
      font-size: 16px !important;
      max-width: 92% !important;
    }
#ksn-medytacje .med-cat-section { padding-top: 64px !important; }
#ksn-medytacje .med-author-card { grid-template-columns: 1fr; text-align: center; padding: 40px 28px; }
#ksn-medytacje .med-author-avatar { margin: 0 auto; }
#ksn-medytacje .med-cross-banner { grid-template-columns: 1fr; padding: 40px 28px; }
}
@media (max-width: 480px){
#ksn-medytacje .med-grid { grid-template-columns: 1fr; }
#ksn-medytacje .med-cat-tile {
      flex: 0 0 calc(85vw - 24px) !important;
      padding: 36px 24px !important;
      min-height: 240px !important;
    }
#ksn-medytacje .med-cat-section .section-head h2,
    #ksn-medytacje #medytacje .section-head h2 {
      font-size: 34px !important;
    }
}
/* ============================================================
     PACKS SECTION — Headspace-style yellow with selectable cards
     ============================================================ */
#ksn-medytacje .packs-hero-section {
    background: #ffce4d;
    padding: 100px 0 120px;
    position: relative;
    overflow: hidden;
  }
/* Wavy top edge */
#ksn-medytacje .packs-hero-section::before {
    content: '';
    position: absolute;
    top: -1px; left: 0; right: 0;
    height: 80px;
    background: var(--cream);
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    z-index: 1;
  }
#ksn-medytacje .packs-hero-section::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0; right: 0;
    height: 80px;
    background: var(--cream);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    z-index: 1;
  }
#ksn-medytacje .packs-hero-layout {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 56px;
    align-items: center;
    position: relative;
    z-index: 2;
  }
#ksn-medytacje .packs-hero-content h2 {
    font-size: clamp(40px, 5vw, 64px) !important;
    color: var(--text);
    letter-spacing: -0.028em !important;
    line-height: 1.05 !important;
    margin-bottom: 28px;
  }
#ksn-medytacje .packs-benefits {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
#ksn-medytacje .packs-benefits li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--text);
    font-size: 16px !important;
    line-height: 1.45 !important;
  }
#ksn-medytacje .packs-benefits .pb-check {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #22c55e;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
  }
#ksn-medytacje .packs-benefits .pb-check svg { width: 12px; height: 12px; }
/* Selectable pack options (3 cards) */
#ksn-medytacje .packs-options {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 18px;
  }
#ksn-medytacje .packs-option {
    background: rgba(255,255,255,0.6);
    border: 2px solid transparent;
    border-radius: 16px;
    padding: 18px 16px;
    cursor: pointer;
    position: relative;
    transition: border-color 0.2s ease, background 0.2s ease;
    display: flex;
    flex-direction: column;
    text-align: left;
    min-height: 130px;
  }
#ksn-medytacje .packs-option:hover { background: rgba(255,255,255,0.85); }
#ksn-medytacje .packs-option input { position: absolute; opacity: 0; pointer-events: none; }
#ksn-medytacje .packs-option .pack-check {
    position: absolute;
    top: 14px; right: 14px;
    width: 22px; height: 22px;
    border-radius: 6px;
    border: 1.5px solid rgba(18,17,28,0.25);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
  }
#ksn-medytacje .packs-option .pack-check svg {
    width: 14px; height: 14px;
    color: #fff;
    opacity: 0;
    transition: opacity 0.2s ease;
  }
#ksn-medytacje .packs-option.is-selected {
    background: rgba(255,255,255,0.95);
    border-color: var(--text);
  }
#ksn-medytacje .packs-option.is-selected .pack-check {
    background: var(--text);
    border-color: var(--text);
  }
#ksn-medytacje .packs-option.is-selected .pack-check svg { opacity: 1; }
#ksn-medytacje .packs-option-best {
    position: absolute;
    top: -10px;
    left: 12px;
    background: #2876d6;
    color: #fff;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important;
    padding: 4px 9px;
    border-radius: 6px;
    text-transform: uppercase !important;
  }
#ksn-medytacje .packs-option-label {
    font-size: 12px !important;
    color: var(--text);
    opacity: 0.65;
    margin-bottom: 4px;
    font-weight: 500 !important;
    padding-right: 28px;
  }
#ksn-medytacje .packs-option-title {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--text);
    margin-bottom: 4px;
    letter-spacing: -0.01em !important;
    padding-right: 28px;
  }
#ksn-medytacje .packs-option-free {
    font-size: 11px !important;
    color: #1f6a3a;
    font-weight: 700 !important;
    margin-bottom: 8px;
  }
#ksn-medytacje .packs-option-price {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--text);
    letter-spacing: -0.02em !important;
    margin-top: auto;
  }
#ksn-medytacje .packs-option-price small {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: var(--text);
    opacity: 0.65;
    text-decoration: line-through;
    margin-left: 4px;
  }
#ksn-medytacje .packs-fine {
    font-size: 12.5px !important;
    color: var(--text);
    opacity: 0.7;
    margin-bottom: 22px;
    text-align: left;
  }
#ksn-medytacje .packs-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #2876d6;
    color: #fff;
    padding: 17px 36px;
    border-radius: 999px;
    font-weight: 700 !important;
    font-size: 15px !important;
    letter-spacing: -0.01em !important;
    transition: background 0.2s ease, transform 0.2s ease;
    box-shadow: 0 10px 24px rgba(40,118,214,0.35);
  }
#ksn-medytacje .packs-cta:hover { background: #1e5fa8; transform: translateY(-2px); }
/* Right side — character + phone mockups */
#ksn-medytacje .packs-visual {
    position: relative;
    height: 480px;
  }
#ksn-medytacje .packs-character {
    position: absolute;
    top: 0; left: 12%;
    width: 160px;
    height: 160px;
    z-index: 3;
    animation: float 6s ease-in-out infinite;
  }
#ksn-medytacje .packs-character svg { width: 100%; height: 100%; }
#ksn-medytacje .packs-phone {
    position: absolute;
    width: 220px;
    height: 440px;
    background: #1a1d28;
    border-radius: 36px;
    padding: 10px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.25);
  }
#ksn-medytacje .packs-phone-screen {
    width: 100%; height: 100%;
    border-radius: 28px;
    overflow: hidden;
    padding: 28px 16px;
  }
#ksn-medytacje .packs-phone-1 {
    top: 50px; left: 28%;
    z-index: 2;
    transform: rotate(-3deg);
  }
#ksn-medytacje .packs-phone-1 .packs-phone-screen { background: #fff; }
#ksn-medytacje .packs-phone-2 {
    top: 60px; right: 0;
    z-index: 1;
    transform: rotate(4deg);
  }
#ksn-medytacje .packs-phone-2 .packs-phone-screen {
    background: linear-gradient(180deg, #2a1a5e 0%, #4a2b8b 100%);
    color: #fff;
  }
#ksn-medytacje .packs-cloud {
    position: absolute;
    background: rgba(255,255,255,0.6);
    border-radius: 50%;
  }
#ksn-medytacje .packs-cloud-1 { width: 90px; height: 50px; top: 32%; left: 0; }
#ksn-medytacje .packs-cloud-2 { width: 60px; height: 36px; bottom: 18%; right: 10%; }
#ksn-medytacje .packs-cloud-3 { width: 50px; height: 30px; top: 56%; left: 38%; }
@media (max-width: 968px){
#ksn-medytacje .packs-hero-section { padding: 80px 0 96px; }
#ksn-medytacje .packs-hero-layout { grid-template-columns: 1fr; gap: 40px; }
#ksn-medytacje .packs-options { grid-template-columns: 1fr; gap: 10px; }
#ksn-medytacje .packs-option { min-height: auto; padding: 20px; }
#ksn-medytacje .packs-cta { width: 100%; padding: 18px 24px; }
#ksn-medytacje .packs-visual { height: 380px; max-width: 420px; margin: 0 auto; }
#ksn-medytacje .packs-phone { width: 180px; height: 360px; }
}
/* ============================================================
     SCROLL REVEAL — fade-up animations on scroll
     ============================================================ */
#ksn-medytacje [data-reveal] {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  }
#ksn-medytacje [data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
  }
#ksn-medytacje [data-reveal="left"]  { transform: translateX(-50px); }
#ksn-medytacje [data-reveal="right"] { transform: translateX(50px); }
#ksn-medytacje [data-reveal="left"].is-revealed,
  #ksn-medytacje [data-reveal="right"].is-revealed { transform: translateX(0); }
#ksn-medytacje [data-reveal="scale"] { transform: scale(0.92); }
#ksn-medytacje [data-reveal="scale"].is-revealed { transform: scale(1); }
#ksn-medytacje [data-reveal-delay="100"].is-revealed { transition-delay: 0.1s; }
#ksn-medytacje [data-reveal-delay="200"].is-revealed { transition-delay: 0.2s; }
#ksn-medytacje [data-reveal-delay="300"].is-revealed { transition-delay: 0.3s; }
#ksn-medytacje [data-reveal-delay="400"].is-revealed { transition-delay: 0.4s; }
/* ============================================================
     FEATURES GRID — 4 dark cards with embedded UI mockups
     ============================================================ */
#ksn-medytacje .features-section {
    background: var(--cream);
    padding: 100px 0;
    position: relative;
    overflow: hidden;
  }
#ksn-medytacje .features-section .section-head {
    text-align: center;
    margin-bottom: 56px;
  }
#ksn-medytacje .features-section h2 {
    font-size: clamp(36px, 4vw, 56px) !important;
    letter-spacing: -0.025em !important;
    line-height: 1.05 !important;
    margin-bottom: 14px;
  }
#ksn-medytacje .features-section .section-head p {
    color: var(--text-soft);
    font-size: 17px !important;
    max-width: 580px;
    margin: 0 auto;
    line-height: 1.55 !important;
  }
#ksn-medytacje .features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
  }
#ksn-medytacje .feature-card {
    background: var(--text);
    color: #faf6f1;
    border-radius: 24px;
    padding: 32px 28px;
    aspect-ratio: 3 / 4;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease;
  }
#ksn-medytacje .feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 32px 60px rgba(18, 17, 28, 0.25);
  }
#ksn-medytacje .feature-card-1 { background: linear-gradient(165deg, #3a342f 0%, #1f1c19 100%); }
#ksn-medytacje .feature-card-2 { background: linear-gradient(165deg, #2c2530 0%, #1a1620 100%); }
#ksn-medytacje .feature-card-3 { background: linear-gradient(165deg, #2a2825 0%, #181614 100%); }
#ksn-medytacje .feature-card-4 { background: linear-gradient(165deg, #322a28 0%, #1c1715 100%); }
#ksn-medytacje .feature-card-head h3 {
    color: #faf6f1;
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: -0.018em !important;
    margin-bottom: 8px;
    line-height: 1.15 !important;
  }
#ksn-medytacje .feature-card-head p {
    color: rgba(250, 246, 241, 0.65);
    font-size: 14px !important;
    line-height: 1.5 !important;
    max-width: 220px;
  }
/* Embedded UI mockups — different per card */
#ksn-medytacje .feature-card-visual {
    margin-top: 24px;
    position: relative;
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }
/* Card 1: Audio player mockup */
#ksn-medytacje .feature-mock-player {
    width: 100%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    backdrop-filter: blur(10px);
    animation: featureFloat 6s ease-in-out infinite;
  }
#ksn-medytacje .feature-mock-play {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--brand);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
#ksn-medytacje .feature-mock-play svg { width: 14px; height: 14px; color: #fff; }
#ksn-medytacje .feature-mock-info { flex: 1; min-width: 0; }
#ksn-medytacje .feature-mock-info-title {
    font-size: 11px !important;
    color: #faf6f1;
    font-weight: 700 !important;
    margin-bottom: 6px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
#ksn-medytacje .feature-mock-wave {
    display: flex; gap: 2px; height: 14px;
  }
#ksn-medytacje .feature-mock-wave span {
    flex: 1;
    background: var(--brand);
    border-radius: 1px;
    opacity: 0.7;
  }
#ksn-medytacje .feature-mock-wave span:nth-child(1) { height: 40%; }
#ksn-medytacje .feature-mock-wave span:nth-child(2) { height: 70%; }
#ksn-medytacje .feature-mock-wave span:nth-child(3) { height: 90%; }
#ksn-medytacje .feature-mock-wave span:nth-child(4) { height: 55%; }
#ksn-medytacje .feature-mock-wave span:nth-child(5) { height: 80%; }
#ksn-medytacje .feature-mock-wave span:nth-child(6) { height: 45%; }
#ksn-medytacje .feature-mock-wave span:nth-child(7) { height: 95%; }
#ksn-medytacje .feature-mock-wave span:nth-child(8) { height: 60%; }
#ksn-medytacje .feature-mock-wave span:nth-child(9) { height: 75%; }
#ksn-medytacje .feature-mock-wave span:nth-child(10) { height: 50%; }
#ksn-medytacje .feature-mock-wave span:nth-child(11) { height: 85%; }
#ksn-medytacje .feature-mock-wave span:nth-child(12) { height: 65%; }
/* Card 2: Ambient sound pills */
#ksn-medytacje .feature-mock-ambient {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    width: 100%;
  }
#ksn-medytacje .feature-mock-ambient span {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    color: #faf6f1;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 8px 12px;
    border-radius: 999px;
    display: inline-flex; align-items: center; gap: 6px;
    transition: all 0.3s ease;
  }
#ksn-medytacje .feature-mock-ambient span.active {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
  }
#ksn-medytacje .feature-mock-ambient .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* Card 3: Download/offline visualization */
#ksn-medytacje .feature-mock-download {
    width: 80%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(242,147,145,0.25) 0%, transparent 60%);
    display: flex; align-items: center; justify-content: center;
    position: relative;
    animation: featurePulse 3s ease-in-out infinite;
  }
#ksn-medytacje .feature-mock-download::before, #ksn-medytacje .feature-mock-download::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(242,147,145,0.3);
  }
#ksn-medytacje .feature-mock-download::before { inset: 12%; }
#ksn-medytacje .feature-mock-download::after { inset: 24%; }
#ksn-medytacje .feature-mock-download svg {
    width: 40%; height: 40%;
    color: var(--brand);
    z-index: 2;
  }
/* Card 4: Stats / progress */
#ksn-medytacje .feature-mock-stats {
    width: 100%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    padding: 16px;
    backdrop-filter: blur(10px);
    animation: featureFloat 7s ease-in-out infinite 1s;
  }
#ksn-medytacje .feature-mock-stats-label { font-size: 10px !important; color: rgba(250,246,241,0.5); margin-bottom: 4px; font-weight: 600 !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; }
#ksn-medytacje .feature-mock-stats-value { font-size: 28px !important; font-weight: 800 !important; color: #faf6f1; letter-spacing: -0.02em !important; margin-bottom: 10px; }
#ksn-medytacje .feature-mock-stats-bar {
    display: flex; gap: 3px; align-items: flex-end; height: 28px;
  }
#ksn-medytacje .feature-mock-stats-bar span {
    flex: 1;
    background: var(--brand);
    border-radius: 2px;
    opacity: 0.6;
  }
#ksn-medytacje .feature-mock-stats-bar span:nth-child(1) { height: 35%; }
#ksn-medytacje .feature-mock-stats-bar span:nth-child(2) { height: 55%; }
#ksn-medytacje .feature-mock-stats-bar span:nth-child(3) { height: 45%; }
#ksn-medytacje .feature-mock-stats-bar span:nth-child(4) { height: 75%; opacity: 0.85; }
#ksn-medytacje .feature-mock-stats-bar span:nth-child(5) { height: 65%; opacity: 0.75; }
#ksn-medytacje .feature-mock-stats-bar span:nth-child(6) { height: 90%; opacity: 1; background: var(--brand-dark); }
#ksn-medytacje .feature-mock-stats-bar span:nth-child(7) { height: 80%; opacity: 0.9; }
@media (max-width: 1024px){
#ksn-medytacje .features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
#ksn-medytacje .features-grid { grid-template-columns: 1fr; }
#ksn-medytacje .feature-card { aspect-ratio: auto; min-height: 320px; }
}
/* ============================================================
     PLAYER MODAL — fullscreen with ambient video bg + circular timer
     ============================================================ */
#ksn-medytacje .player-modal {
    position: fixed; inset: 0;
    background: #0a0a0a;
    z-index: 1000;
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease;
    overflow: hidden;
  }
#ksn-medytacje .player-modal.is-open { display: block; opacity: 1; }
/* Radial pulse from center on open */
#ksn-medytacje .player-modal::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 80vmax; height: 80vmax;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(242,147,145,0.20) 0%, transparent 55%);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
  }
#ksn-medytacje .player-modal.is-open::after {
    animation: playerPulse 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
/* Topbar fade down */
#ksn-medytacje .player-modal .player-topbar {
    opacity: 0;
    transform: translateY(-14px);
  }
#ksn-medytacje .player-modal.is-open .player-topbar {
    animation: playerFadeDown 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.15s forwards;
  }
/* Title fade up + slight scale */
#ksn-medytacje .player-modal .player-title {
    opacity: 0;
    transform: translateY(20px) scale(0.96);
  }
#ksn-medytacje .player-modal.is-open .player-title {
    animation: playerFadeUp 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
  }
/* Timer ring + text — elastic scale-in from center */
#ksn-medytacje .player-modal .player-timer {
    opacity: 0;
    transform: scale(0.6);
  }
#ksn-medytacje .player-modal.is-open .player-timer {
    animation: playerTimerIn 0.9s cubic-bezier(0.34, 1.46, 0.64, 1) 0.45s forwards;
  }
/* Ambient label */
#ksn-medytacje .player-modal .player-ambient-label {
    opacity: 0;
    transform: translateY(10px);
  }
#ksn-medytacje .player-modal.is-open .player-ambient-label {
    animation: playerFadeUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.7s forwards;
  }
/* Ambient buttons — staggered fade-up */
#ksn-medytacje .player-modal .player-ambient-btn {
    opacity: 0;
    transform: translateY(20px);
  }
#ksn-medytacje .player-modal.is-open .player-ambient-btn {
    animation: playerFadeUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }
#ksn-medytacje .player-modal.is-open .player-ambient-btn:nth-child(1) { animation-delay: 0.80s; }
#ksn-medytacje .player-modal.is-open .player-ambient-btn:nth-child(2) { animation-delay: 0.86s; }
#ksn-medytacje .player-modal.is-open .player-ambient-btn:nth-child(3) { animation-delay: 0.92s; }
#ksn-medytacje .player-modal.is-open .player-ambient-btn:nth-child(4) { animation-delay: 0.98s; }
#ksn-medytacje .player-modal.is-open .player-ambient-btn:nth-child(5) { animation-delay: 1.04s; }
/* Big play button — elastic pop */
#ksn-medytacje .player-modal .player-main-btn {
    opacity: 0;
    transform: scale(0);
  }
#ksn-medytacje .player-modal.is-open .player-main-btn {
    animation: playerBtnPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.15s forwards;
  }
/* Ambient background visual (the colorful gradient bg) — slow fade-in */
#ksn-medytacje .player-modal .player-bg-ambient {
    opacity: 0;
  }
#ksn-medytacje .player-modal.is-open .player-bg-ambient {
    animation: playerBgIn 1.4s ease 0.1s forwards;
  }
/* Background — gradient overlays for ambient + optional video */
#ksn-medytacje .player-bg-stage {
    position: absolute; inset: 0;
    z-index: 0;
    overflow: hidden;
  }
#ksn-medytacje .player-bg-video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.8s ease;
  }
#ksn-medytacje .player-bg-video.is-active { opacity: 1; }
/* Dark vignette over video */
#ksn-medytacje .player-bg-stage::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.75) 100%);
    z-index: 1;
    pointer-events: none;
  }
/* CSS-only ambient backgrounds (when no video src is set) */
#ksn-medytacje .player-bg-ambient {
    position: absolute; inset: 0;
    z-index: 0;
    transition: opacity 0.8s ease;
  }
#ksn-medytacje .player-bg-ambient.ambient-ogien {
    background:
      radial-gradient(ellipse at center bottom, #ff6f00 0%, #b04f00 30%, #2a0d00 70%, #000 100%);
    animation: fireFlicker 0.18s ease-in-out infinite alternate;
  }
#ksn-medytacje .player-bg-ambient.ambient-deszcz {
    background:
      linear-gradient(180deg, #1a2538 0%, #0a1320 100%);
  }
#ksn-medytacje .player-bg-ambient.ambient-deszcz::before {
    content: '';
    position: absolute; inset: 0;
    background-image: repeating-linear-gradient(100deg, transparent 0, transparent 14px, rgba(180,200,220,0.18) 14px, rgba(180,200,220,0.18) 16px);
    animation: rainFall 0.6s linear infinite;
  }
#ksn-medytacje .player-bg-ambient.ambient-las {
    background:
      radial-gradient(ellipse at center, #2a4a2a 0%, #0e1f0e 60%, #050a05 100%);
  }
#ksn-medytacje .player-bg-ambient.ambient-fale {
    background:
      linear-gradient(180deg, #1a3a5a 0%, #0a1a2e 60%, #050a14 100%);
    animation: wavesShift 8s ease-in-out infinite;
  }
#ksn-medytacje .player-bg-ambient.ambient-brak {
    background: linear-gradient(180deg, #1a1d28 0%, #0a0a14 100%);
  }
/* Top bar — logo + close */
#ksn-medytacje .player-topbar {
    position: absolute;
    top: 24px; left: 0; right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    z-index: 20;
    pointer-events: none;
  }
#ksn-medytacje .player-topbar > * { pointer-events: auto; }
#ksn-medytacje .player-topbar-logo {
    margin: 0 auto;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
#ksn-medytacje .player-topbar-logo img { height: 44px; opacity: 0.95; }
#ksn-medytacje .player-close-x {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    color: #fff;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    margin-left: auto;
  }
#ksn-medytacje .player-close-x:hover { background: rgba(255,255,255,0.16); }
/* Center content */
#ksn-medytacje .player-content {
    position: relative;
    z-index: 5;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 24px 56px;
    color: #fff;
    text-align: center;
  }
#ksn-medytacje .player-title {
    font-family: 'DM Sans', sans-serif !important;
    font-size: clamp(26px, 3vw, 34px) !important;
    font-weight: 700 !important;
    letter-spacing: -0.022em !important;
    margin-bottom: 36px;
    color: #fff;
  }
/* Circular timer with SVG progress ring */
#ksn-medytacje .player-timer {
    position: relative;
    width: 260px;
    height: 260px;
    margin: 0 auto 36px;
  }
#ksn-medytacje .player-timer svg {
    width: 100%; height: 100%;
    transform: rotate(-90deg);
  }
#ksn-medytacje .player-timer-track {
    fill: none;
    stroke: rgba(255,255,255,0.1);
    stroke-width: 3;
  }
#ksn-medytacje .player-timer-progress {
    fill: none;
    stroke: var(--brand);
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.3s linear;
  }
#ksn-medytacje .player-timer-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: 'DM Sans', sans-serif !important;
    font-variant-numeric: tabular-nums;
  }
#ksn-medytacje .player-timer-current {
    font-size: 56px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
  }
#ksn-medytacje .player-timer-total {
    font-size: 14px !important;
    color: rgba(255,255,255,0.55);
    margin-top: 8px;
    font-weight: 500 !important;
  }
/* Ambient sound selector */
#ksn-medytacje .player-ambient-label {
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase !important;
    margin-bottom: 14px;
  }
#ksn-medytacje .player-ambient-grid {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 32px;
    flex-wrap: wrap;
  }
#ksn-medytacje .player-ambient-btn {
    background: rgba(255,255,255,0.06);
    border: 0;
    color: rgba(255,255,255,0.75);
    border-radius: 16px;
    padding: 12px 8px;
    width: 76px;
    min-height: 70px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    backdrop-filter: blur(8px);
  }
#ksn-medytacje .player-ambient-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
#ksn-medytacje .player-ambient-btn.is-active {
    background: var(--brand);
    color: #fff;
  }
#ksn-medytacje .player-ambient-btn svg { width: 22px; height: 22px; opacity: 0.95; }
/* Big play/pause button */
#ksn-medytacje .player-main-btn {
    width: 88px; height: 88px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-shadow: 0 16px 40px rgba(242,147,145,0.45);
  }
#ksn-medytacje .player-main-btn:hover { transform: scale(1.06); box-shadow: 0 20px 50px rgba(242,147,145,0.6); }
#ksn-medytacje .player-main-btn svg { width: 32px; height: 32px; }
#ksn-medytacje .player-main-btn .icon-pause { display: none; }
#ksn-medytacje .player-main-btn.is-playing .icon-play { display: none; }
#ksn-medytacje .player-main-btn.is-playing .icon-pause { display: block; }
@media (max-width: 600px){
#ksn-medytacje .player-topbar {
      padding: 0 14px;
      top: max(16px, env(safe-area-inset-top, 16px));
    }
#ksn-medytacje .player-topbar-logo img { height: 32px; }
#ksn-medytacje .player-close-x {
      width: 46px; height: 46px;
      background: rgba(255,255,255,0.14);
      border: 1px solid rgba(255,255,255,0.18);
    }
#ksn-medytacje .player-close-x svg { width: 22px; height: 22px; }
#ksn-medytacje .player-content { padding: 88px 16px 40px; }
#ksn-medytacje .player-timer { width: 220px; height: 220px; }
#ksn-medytacje .player-timer-current { font-size: 44px !important; }
#ksn-medytacje .player-title { font-size: 22px !important; margin-bottom: 24px; padding: 0 8px; }
#ksn-medytacje .player-ambient-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 6px;
      flex-wrap: nowrap;
      width: 100%;
      max-width: 360px;
      margin-left: auto;
      margin-right: auto;
    }
#ksn-medytacje .player-ambient-btn {
      width: auto;
      min-height: 64px;
      padding: 8px 4px;
      font-size: 9.5px !important;
      gap: 4px;
      border-radius: 12px;
    }
#ksn-medytacje .player-ambient-btn svg { width: 18px; height: 18px; }
#ksn-medytacje .player-main-btn { width: 76px; height: 76px; }
}
/* ukryj MOTYWOWY breadcrumb (ma [data-depth]) i tytul-naglowek CMS — NIE design */
body.ksn-med-page nav.breadcrumb[data-depth] { display: none !important; }
body.ksn-med-page .page-header { display: none !important; }
/* full-bleed: zdejmij max-width kontenera i "card" z #content na tej stronie */
body.ksn-med-page #wrapper > .container,
body.ksn-med-page .container:has(#content-wrapper) { max-width: 100% !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
body.ksn-med-page #content-wrapper { padding: 0 !important; }
body.ksn-med-page #main { padding: 0 !important; margin: 0 !important; }
body.ksn-med-page #content.page-content {
  overflow: visible !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; background: transparent !important;
  padding: 0 !important; margin: 0 !important; max-width: none !important;
}
#ksn-medytacje { width: 100%; }
/* kompensacja ujemnych marginesow Bootstrap .row (inaczej 15px overflow w lewo) */
body.ksn-med-page .row:has(#content-wrapper) { margin-left: 0 !important; margin-right: 0 !important; }
/* Motyw narzuca stronom CMS `.page-content.page-cms { text-align: justify }` — treść medytacji
   to dziedziczyła (brzydkie justowanie, też w nagłówku). Wracamy do lewej; elementy, które
   design celowo centruje (wyzsza specyficznosc), zostaja wysrodkowane. */
#ksn-medytacje { text-align: left; }
/* Player pelnoekranowy ma zakrywac WSZYSTKO, lacznie z przyklejonym naglowkiem.
   Modul fixedheader daje #header z-index:9999 w stanie sticky, a modal mial 1000 -> menu
   zostawalo na wierzchu. Podbijamy modal ponad to (i ponad wysuwany koszyk 1201). */
#ksn-medytacje .player-modal { z-index: 1000000 !important; }
/* Medytacje: naglowek ma sie ZLAC z kremowym tlem strony (--cream #faf6ed) — jak w oryginale,
   gdzie .site-header = rgba(250,246,237,.92). Motyw daje bialy pasek + separator -> usuwamy. */
body.ksn-med-page #header { box-shadow: none !important; }
body.ksn-med-page .ksn-header { background: rgba(250, 246, 237, 0.92) !important; }
/* Medytacje: zero bialych szpar. #wrapper ma padding-top:25px na bialym tle -> biala szpara
   pod naglowkiem. Robimy body kremowe + kontenery layoutu przezroczyste = wszystko kremowe. */
body.ksn-med-page { background: #faf6ed !important; }
body.ksn-med-page main,
body.ksn-med-page #wrapper,
body.ksn-med-page #content-wrapper,
body.ksn-med-page #main { background: transparent !important; }
/* ==========================================================================
   PODSTRONA MEDYTACJE — REDESIGN "WAKING UP"  (WAVE 1: fundament + HERO)
   Niebieskie niebo z chmurami (wygenerowany obraz), menu niebieskie (jak
   wczesniej bezowe), delikatne przyciski play, bialy tekst hero.
   Zachowane: sekcja PAKIETY (zolta), teksty, font DM Sans.
   Override na samym koncu pliku -> bije design Headspace powyzej.
   ========================================================================== */
#ksn-medytacje{
  --wu-blue-top:#0162df;        /* == gora wygenerowanego nieba (seamless z menu) */
  --wu-blue:#1f7ae6;
  --wu-blue-soft:#5cc1f7;
  --wu-sky-pale:#bdecfc;        /* dolne chmury */
  --wu-slate:#5e84ad;
  --wu-paper:#ededeb;           /* jasne sekcje tresci (jak Waking Up) */
  --wu-paper2:#f5f4f2;
  --wu-ink:#10151d;
  --wu-ink-soft:#525760;
  --wu-card:#ffffff;
  --wu-onblue:#ffffff;
  --wu-onblue-soft:rgba(255,255,255,.84);
  --wu-glass:rgba(255,255,255,.16);
  --wu-glass-line:rgba(255,255,255,.34);
}
/* ---- TLO STRONY + MENU: niebieskie (nadpisuje wczesniejsze kremowe) ----
   WAZNE: --wu-* MUSI byc tez na body:has, bo body/#header NIE sa potomkami
   #ksn-medytacje -> nie odziedzicza zmiennych (var()->brak->transparent). Stad hardcode. */
body.ksn-med-page{
  --wu-blue-top:#0162df; --wu-blue:#1f7ae6; --wu-blue-soft:#5cc1f7; --wu-sky-pale:#bdecfc;
  --wu-slate:#5e84ad; --wu-paper:#ededeb; --wu-paper2:#f5f4f2; --wu-ink:#10151d; --wu-ink-soft:#525760;
  --wu-card:#ffffff; --wu-onblue:#ffffff; --wu-onblue-soft:rgba(255,255,255,.84);
  --wu-glass:rgba(255,255,255,.16); --wu-glass-line:rgba(255,255,255,.34);
  background:#0162df !important;
}
body.ksn-med-page #header{ box-shadow:none !important; background:transparent !important; }
body.ksn-med-page .ksn-header{ background:transparent !important; box-shadow:none !important; }
body.ksn-med-page .ksn-header::after{ opacity:0 !important; }
body.ksn-med-page .ksn-header-promo{ background:transparent !important; }
/* menu: logo + linki + ikony na bialo */
body.ksn-med-page .ksn-nav-logo img,
body.ksn-med-page .ksn-nav-logo h1 img,
body.ksn-med-page header.ksn-header img.logo{ filter:brightness(0) invert(1) !important; }
body.ksn-med-page .ksn-nav-menu a,
body.ksn-med-page .ksn-nav-menu li>a,
body.ksn-med-page .ksn-nav-menu .top-menu a{ color:#fff !important; }
body.ksn-med-page .ksn-nav-menu a.current,
body.ksn-med-page .ksn-nav-menu a.active,
body.ksn-med-page .ksn-nav-menu li.current>a{ color:#fff !important; }
body.ksn-med-page .ksn-nav-menu a.current::after,
body.ksn-med-page .ksn-nav-menu a.active::after,
body.ksn-med-page .ksn-nav-menu li.current>a::after{ background:#fff !important; }
body.ksn-med-page .ksn-icon-btn{ color:#fff !important; }
body.ksn-med-page .ksn-icon-btn:hover{ background:rgba(255,255,255,.16) !important; color:#fff !important; }
/* ============ HERO — NIEBIESKIE NIEBO Z CHMURAMI ============ */
#ksn-medytacje .med-hero{
  background:var(--wu-blue-top) url("../img/ksn-med-sky.png") center bottom / cover no-repeat !important;
  padding:72px 0 150px !important;
  min-height:660px;
  display:flex; align-items:center;
  position:relative; overflow:hidden;
}
/* miekkie wtopienie dolu hero w nastepna sekcje (chmury -> tresc) */
#ksn-medytacje .med-hero::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:120px;
  background:linear-gradient(to bottom, rgba(189,236,252,0) 0%, var(--wu-paper) 100%);
  z-index:1; pointer-events:none;
}
#ksn-medytacje .med-hero-grid{ position:relative; z-index:2; }
/* tekst hero -> bialy */
#ksn-medytacje .med-hero h1,
#ksn-medytacje .med-hero .display-1{ color:#fff !important; text-shadow:0 2px 18px rgba(2,60,150,.18); }
#ksn-medytacje .med-hero .lead{ color:rgba(255,255,255,.92) !important; }
#ksn-medytacje .med-hero .lead strong{ color:#fff !important; }
/* eyebrow -> frosted glass */
#ksn-medytacje .med-hero .eyebrow-rich{
  background:var(--wu-glass) !important;
  color:#fff !important;
  border:1.5px solid var(--wu-glass-line) !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
#ksn-medytacje .med-hero .eyebrow-dot{
  background:#fff !important;
  box-shadow:0 0 0 4px rgba(255,255,255,.28) !important;
}
/* przyciski hero — Waking Up: bialy pill (primary) + ghost (secondary) */
#ksn-medytacje .med-hero .btn-bajk-primary{
  background:#fff !important; color:var(--wu-blue-top) !important;
  border:0 !important; box-shadow:0 10px 30px rgba(2,40,110,.22) !important;
}
#ksn-medytacje .med-hero .btn-bajk-primary:hover{ background:#f3f7ff !important; transform:translateY(-2px); }
#ksn-medytacje .med-hero .btn-bajk-ghost{
  background:rgba(255,255,255,.10) !important; color:#fff !important;
  border:1.5px solid rgba(255,255,255,.55) !important;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
#ksn-medytacje .med-hero .btn-bajk-ghost:hover{ background:rgba(255,255,255,.20) !important; }
/* trust row -> bialy */
#ksn-medytacje .med-hero .med-trust-row{ color:rgba(255,255,255,.90) !important; }
#ksn-medytacje .med-hero .med-trust-check{
  background:rgba(255,255,255,.20) !important; color:#fff !important;
  border:1px solid rgba(255,255,255,.4);
}
/* schowaj koralowo-zolte dekoracje hero (klocą sie z niebieskim) */
#ksn-medytacje .med-hero .hero-orb,
#ksn-medytacje .med-hero-character::before,
#ksn-medytacje .med-hero-character::after,
#ksn-medytacje .med-hero-ring{ display:none !important; }
#ksn-medytacje .med-hero-character{ padding:30px 0 0 !important; }
/* telefon hero — lzejszy cien, wynurza sie z chmur */
#ksn-medytacje .hero-phone{
  box-shadow:0 40px 90px rgba(2,40,110,.34), 0 0 0 1px rgba(255,255,255,.06) inset !important;
}
/* plywajace karty hero -> frosted glass na bialo */
#ksn-medytacje .hero-float-card{
  background:rgba(255,255,255,.82) !important;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.6) !important;
  box-shadow:0 14px 40px rgba(2,40,110,.18) !important;
}
/* karta medytacji */
#ksn-medytacje .med-play-btn{
  width:44px !important; height:44px !important;
  background:#fff !important; color:var(--wu-blue) !important;
  border:1px solid rgba(16,21,29,.10) !important;
  box-shadow:0 3px 10px rgba(16,21,29,.08) !important;
  transition:transform .2s ease, box-shadow .2s ease, color .2s ease !important;
}
#ksn-medytacje .med-play-btn:hover{ transform:scale(1.07); box-shadow:0 6px 16px rgba(2,40,110,.16) !important; color:var(--wu-blue-top) !important; }
#ksn-medytacje .med-play-btn svg{ width:17px; height:17px; }
/* featured (ciemna karta) */
#ksn-medytacje .med-featured-play-btn{
  background:rgba(255,255,255,.14) !important; color:#fff !important;
  border:1.5px solid rgba(255,255,255,.45) !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:background .2s ease, transform .2s ease !important;
}
#ksn-medytacje .med-featured-play-btn:hover{ background:rgba(255,255,255,.26) !important; transform:scale(1.06); }
/* fullscreen player — glowny przycisk lzejszy */
#ksn-medytacje .player-main-btn{
  background:rgba(255,255,255,.16) !important; color:#fff !important;
  border:1.5px solid rgba(255,255,255,.5) !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
#ksn-medytacje .player-main-btn:hover{ background:rgba(255,255,255,.28) !important; }
/* telefon hero play */
#ksn-medytacje .hero-phone-play{
  background:#fff !important; color:var(--wu-blue) !important;
  box-shadow:0 6px 18px rgba(2,40,110,.22) !important;
}
/* ---- HERO korekty: rozmiar naglowka (dlugie zdanie, nie 3 slowa jak WU),
        ukrycie wlasnego breadcrumbu designu, mniejszy telefon ---- */
#ksn-medytacje .breadcrumb{ display:none !important; }
#ksn-medytacje .med-hero .display-1{ font-size:clamp(36px,4.4vw,58px) !important; line-height:1.04 !important; }
#ksn-medytacje .med-hero{ padding:60px 0 100px !important; min-height:600px; }
#ksn-medytacje .med-hero .hero-phone{ max-width:320px !important; }
#ksn-medytacje .med-hero .lead{ max-width:500px; }
/* baza strony -> neutralny papier (jak jasne sekcje Waking Up), nie krem */
#ksn-medytacje{ background:var(--wu-paper) !important; }
#ksn-medytacje .section{ background:transparent !important; }
#ksn-medytacje .bg-soft{ background:transparent !important; }
/* naglowki sekcji + eyebrow (poza hero) -> czyste, WU: maly uppercase label */
#ksn-medytacje .section .eyebrow,
#ksn-medytacje .section-head .eyebrow,
#ksn-medytacje .features-section .eyebrow,
#ksn-medytacje .med-cat-section .eyebrow{
  background:transparent !important; color:var(--wu-ink-soft) !important;
  border:0 !important; box-shadow:none !important; padding:0 !important;
  text-transform:uppercase !important; letter-spacing:.13em !important;
  font-size:13px !important; font-weight:700 !important;
}
#ksn-medytacje .section .eyebrow::before,
#ksn-medytacje .section-head .eyebrow::before{ content:none !important; }
#ksn-medytacje .section-head h2,
#ksn-medytacje .section-head .display-2{ color:var(--wu-ink) !important; }
#ksn-medytacje .section-head p{ color:var(--wu-ink-soft) !important; }
/* ---- SEGMENTED BAR (filtry kategorii = "bar" jak Practice/Theory/Life) ---- */
#ksn-medytacje .med-filters{ align-items:center; }
#ksn-medytacje .med-filter-chips{
  display:inline-flex !important; flex-wrap:wrap; gap:4px !important;
  background:rgba(16,21,29,.05) !important; padding:5px !important; border-radius:999px !important;
}
#ksn-medytacje .med-filter-chip{
  background:transparent !important; border:0 !important; box-shadow:none !important;
  color:var(--wu-ink-soft) !important; border-radius:999px !important;
  padding:9px 16px !important; font-weight:600 !important; font-size:14px !important;
  transition:background .28s cubic-bezier(.4,0,.2,1), color .28s ease !important;
}
#ksn-medytacje .med-filter-chip:hover{ color:var(--wu-ink) !important; }
#ksn-medytacje .med-filter-chip.active{
  background:#fff !important; color:var(--wu-ink) !important;
  box-shadow:0 2px 10px rgba(16,21,29,.12) !important;
}
#ksn-medytacje .med-filter-count{ opacity:.6; }
#ksn-medytacje .med-search-wrap input{
  background:#fff !important; border:1px solid rgba(16,21,29,.12) !important;
  border-radius:999px !important; color:var(--wu-ink) !important;
  box-shadow:0 1px 4px rgba(16,21,29,.05) !important;
}
/* ---- BLOKI: karty medytacji (jak Series/Listening w Waking Up) ---- */
#ksn-medytacje .med-card{
  background:#fff !important;
  border:1px solid rgba(16,21,29,.07) !important;
  border-radius:20px !important;
  box-shadow:0 4px 18px rgba(16,21,29,.05) !important;
  overflow:hidden;
  transition:transform .28s cubic-bezier(.34,1.4,.64,1), box-shadow .28s ease !important;
}
#ksn-medytacje .med-card:hover{ transform:translateY(-5px); box-shadow:0 16px 40px rgba(16,21,29,.12) !important; }
#ksn-medytacje .med-card-cover{ border-radius:0 !important; aspect-ratio:1/1; }
#ksn-medytacje .med-card-cover img{ width:100%; height:100%; object-fit:cover; }
#ksn-medytacje .med-card-tag{
  background:rgba(31,122,230,.10) !important; color:var(--wu-blue) !important;
  border:0 !important; font-weight:700 !important; letter-spacing:.02em;
}
#ksn-medytacje .med-card-title{ color:var(--wu-ink) !important; }
#ksn-medytacje .med-card-desc{ color:var(--wu-ink-soft) !important; }
#ksn-medytacje .med-card-length{ color:var(--wu-ink-soft) !important; }
#ksn-medytacje .med-card-player-label{ color:var(--wu-ink-soft) !important; }
/* ---- BLOKI: kafle kategorii -> czyste biale ---- */
#ksn-medytacje .med-cat-tile{
  background:#fff !important;
  border:1px solid rgba(16,21,29,.07) !important;
  border-radius:20px !important;
  box-shadow:0 4px 18px rgba(16,21,29,.05) !important;
  transition:transform .28s cubic-bezier(.34,1.4,.64,1), box-shadow .28s ease !important;
}
#ksn-medytacje .med-cat-tile:hover{ transform:translateY(-5px); box-shadow:0 16px 40px rgba(16,21,29,.12) !important; }
#ksn-medytacje .med-cat-tile-name{ color:var(--wu-ink) !important; }
#ksn-medytacje .med-cat-tile-desc{ color:var(--wu-ink-soft) !important; }
#ksn-medytacje .med-cat-tile-count{ color:var(--wu-ink-soft) !important; }
#ksn-medytacje .med-cat-tile-arrow{ color:var(--wu-blue) !important; }
/* schowaj koralowo-zolte dekoracje sekcji kategorii (klocą z paletą WU) */
#ksn-medytacje .med-cat-deco,
#ksn-medytacje .med-cat-deco-sparkle{ display:none !important; }
/* ---- FEATURED: ciemna karta -> gleboki granat WU ---- */
#ksn-medytacje .med-featured-card{
  background:linear-gradient(135deg,#0b3f9e,#0162df) !important;
  border:0 !important;
}
#ksn-medytacje .med-featured-pack-note,
#ksn-medytacje .med-featured-cta{ color:#fff !important; }
/* ---- FEATURES: 4 karty -> granat WU, spojne z featured ---- */
#ksn-medytacje .feature-card{
  background:linear-gradient(150deg,#103a8a,#0a2e6e) !important;
  border:1px solid rgba(255,255,255,.06) !important;
}
/* ---- AUTOR: karta -> niebieska WU ---- */
#ksn-medytacje .med-author-card{
  background:linear-gradient(135deg,#0b3f9e,#0162df) !important;
  border:0 !important;
}
#ksn-medytacje .med-author-card .eyebrow{ color:rgba(255,255,255,.8) !important; }
#ksn-medytacje .med-author-card h3{ color:#fff !important; }
#ksn-medytacje .med-author-card p{ color:rgba(255,255,255,.9) !important; }
#ksn-medytacje .med-author-link{ color:#fff !important; }
/* ---- CROSS-PROMO: banner -> jasny papier z ramka ---- */
#ksn-medytacje .med-cross-banner{
  background:#fff !important; border:1px solid rgba(16,21,29,.08) !important;
}
#ksn-medytacje .med-cross-banner h3{ color:var(--wu-ink) !important; }
#ksn-medytacje .med-cross-banner p{ color:var(--wu-ink-soft) !important; }
/* ---- FAQ -> niebieska sekcja akordeon (jak "Explore Topics" w WU) ---- */
#ksn-medytacje .bg-soft:has(.faq-list){ background:linear-gradient(180deg,#1f7ae6,#0b4fb0) !important; }
#ksn-medytacje .bg-soft:has(.faq-list) .section-head .eyebrow{ color:rgba(255,255,255,.78) !important; }
#ksn-medytacje .bg-soft:has(.faq-list) .section-head h2,
#ksn-medytacje .bg-soft:has(.faq-list) .section-head .display-2{ color:#fff !important; }
#ksn-medytacje .faq-item{
  background:transparent !important; border:0 !important;
  border-bottom:1px solid rgba(255,255,255,.18) !important; border-radius:0 !important;
}
#ksn-medytacje .faq-item summary{ color:#fff !important; }
#ksn-medytacje .faq-plus{ color:rgba(255,255,255,.7) !important; }
#ksn-medytacje .faq-answer{ color:rgba(255,255,255,.82) !important; }
/* sekcje bez klasy .section tez na papier (zeby nie zostal krem za ciemnymi kartami) */
#ksn-medytacje .med-featured-section,
#ksn-medytacje .features-section{ background:transparent !important; }
/* MENU: przezroczyste, absolutne nad hero (jak nav wakingup, scrolluje z hero) */
body.ksn-med-page #header{
  position:absolute !important; top:0; left:0; right:0; width:100% !important;
  background:transparent !important; box-shadow:none !important; z-index:50;
}
body.ksn-med-page .ksn-header{ background:transparent !important; box-shadow:none !important; }
body.ksn-med-page .ksn-header-promo{ background:transparent !important; }
body.ksn-med-page #wrapper{ padding-top:0 !important; }
/* linki konta (Logowanie/Pomoc) tez na bialo */
body.ksn-med-page .ksn-header-inner > a,
body.ksn-med-page .ksn-nav-actions a:not(.ksn-nav-cta){ color:#fff !important; }
/* HERO: niebo z chmurami od gory (pod menu) */
#ksn-medytacje .med-hero{
  background:#1f7ae6 url("../img/ksn-med-sky2.png") center top / cover no-repeat !important;
  padding:150px 0 110px !important;   /* top = miejsce na przezroczyste menu */
  min-height:88vh;
}
/* scrim pod nav (czytelnosc bialych linkow na chmurach) — zastepuje dolny fade */
#ksn-medytacje .med-hero::after{
  content:'' !important; position:absolute !important; left:0; right:0; top:0 !important; bottom:auto !important;
  height:170px !important;
  background:linear-gradient(to bottom, rgba(3,45,110,.34), rgba(3,45,110,0)) !important;
  z-index:1 !important; pointer-events:none !important;
}
/* ghost button czytelniejszy na niebie */
#ksn-medytacje .med-hero .btn-bajk-ghost{
  background:rgba(255,255,255,.18) !important; border-color:rgba(255,255,255,.72) !important;
}
/* ==========================================================================
   MEDYTACJE — WAVE 4: bloki 1:1 wakingup (Difference taby+karty, Start
   Listening, Explore Topics). Sekcje na papierze; PAKIETY zolte bez zmian.
   ========================================================================== */
#ksn-medytacje .wu-section-title{ text-align:center; margin-bottom:36px; color:var(--wu-ink) !important; }
/* ---- DIFFERENCE: naglowek (intro + taby) ---- */
#ksn-medytacje .wu-diff-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:30px;
  margin:0 0 36px; flex-wrap:wrap;
}
#ksn-medytacje .wu-diff-intro{ max-width:520px; }
#ksn-medytacje .wu-diff-intro h3{ font-size:24px !important; color:var(--wu-ink) !important; margin:0 0 8px; }
#ksn-medytacje .wu-diff-intro p{ color:var(--wu-ink-soft) !important; margin:0; }
/* ---- TABY (segmented control jak Practice/Theory/Life) ---- */
#ksn-medytacje .wu-tabs{
  display:inline-flex; gap:4px; background:rgba(16,21,29,.06);
  padding:5px; border-radius:999px; flex-shrink:0;
}
#ksn-medytacje .wu-tab{
  background:transparent; border:0; cursor:pointer;
  padding:10px 24px; border-radius:999px; font-weight:600; font-size:15px;
  color:var(--wu-ink-soft); transition:background .28s cubic-bezier(.4,0,.2,1), color .28s ease;
}
#ksn-medytacje .wu-tab:hover{ color:var(--wu-ink); }
#ksn-medytacje .wu-tab.is-active{ background:#fff; color:var(--wu-ink); box-shadow:0 2px 10px rgba(16,21,29,.12); }
/* ---- SIATKA KART ---- */
#ksn-medytacje .wu-card-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
#ksn-medytacje .wu-card-row-3{ grid-template-columns:repeat(3,1fr); }
#ksn-medytacje .wu-card-row.is-hidden{ display:none; }
@media (max-width:980px){
#ksn-medytacje .wu-card-row, #ksn-medytacje .wu-card-row-3{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
#ksn-medytacje .wu-card-row, #ksn-medytacje .wu-card-row-3{ grid-template-columns:1fr; }
}
/* ---- START LISTENING ---- */
#ksn-medytacje .wu-listening-head{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  margin:0 0 30px; flex-wrap:wrap;
}
#ksn-medytacje .wu-listening-head h2{ margin:0; color:var(--wu-ink) !important; }
#ksn-medytacje .wu-seeall{
  display:inline-flex; align-items:center; gap:6px; flex-shrink:0;
  padding:11px 22px; border:1.5px solid rgba(16,21,29,.22); border-radius:999px;
  font-weight:700; font-size:15px; color:var(--wu-ink) !important;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
#ksn-medytacje .wu-seeall:hover{ background:var(--wu-ink); color:#fff !important; border-color:var(--wu-ink); }
/* ---- EXPLORE TOPICS (FAQ akordeon + plywajace obrazki) ---- */
#ksn-medytacje .wu-topics-grid{
  display:grid; grid-template-columns:1fr 1.1fr; gap:60px; align-items:center;
}
#ksn-medytacje .wu-topics-visual{ position:relative; min-height:440px; }
#ksn-medytacje .wu-float-img{
  position:absolute; border-radius:20px; background-size:cover; background-position:center;
  box-shadow:0 24px 60px rgba(0,30,80,.32); display:block;
}
#ksn-medytacje .wu-float-1{ width:210px; height:252px; top:10px; left:40px; transform:rotate(-6deg); z-index:2; }
#ksn-medytacje .wu-float-2{ width:184px; height:224px; top:128px; left:236px; transform:rotate(5deg); z-index:1; }
#ksn-medytacje .wu-float-3{ width:170px; height:200px; top:250px; left:96px; transform:rotate(-3deg); z-index:3; }
#ksn-medytacje .wu-topics-content .eyebrow{ color:rgba(255,255,255,.8) !important; background:transparent !important; border:0 !important; padding:0 !important; text-transform:uppercase; letter-spacing:.13em; font-weight:700 !important; }
#ksn-medytacje .wu-topics-content .eyebrow::before{ content:none !important; }
#ksn-medytacje .wu-topics-content h2,
#ksn-medytacje .wu-topics-content .display-2{ color:#fff !important; margin:10px 0 22px; }
@media (max-width:900px){
#ksn-medytacje .wu-topics-grid{ grid-template-columns:1fr; gap:30px; }
#ksn-medytacje .wu-topics-visual{ display:none; }
}
/* req3: MENU sticky (nie absolute -> koniec przeskoku), przezroczyste u gory,
   niebieskie po scrollu; pasek promo ukryty (stala wysokosc = brak skoku) */
body.ksn-med-page #header{ position:absolute !important; top:0 !important; background:transparent !important; box-shadow:none !important; z-index:9999; }
body.ksn-med-page .ksn-header-promo{ display:none !important; }
body.ksn-med-page .ksn-header{ background:transparent !important; transition:background .3s ease; }
body.ksn-med-page #header.header_omg_im_scrolled .ksn-header,
body.ksn-med-page #header.header_omg_im_scrolled,
body.ksn-med-page .ksn-header.is-scrolled{ background:transparent !important; }
/* czytelnosc nawigacji na chmurach bez scrimu (req1) */
body.ksn-med-page .ksn-nav-menu a,
body.ksn-med-page .ksn-nav-actions a:not(.ksn-nav-cta){ text-shadow:0 1px 10px rgba(0,30,80,.45); }
/* req1+req3: hero wciagniety pod sticky menu (chmury pod menu, bez przeskoku) */
#ksn-medytacje .med-hero{
  margin-top: calc(-1 * var(--ksnHeadH, 92px)) !important;
  padding-top: calc(var(--ksnHeadH, 92px) + 50px) !important;
  padding-bottom: 130px !important;
  background:#bfe2ff url("../img/ksn-med-sky3.png") center top / cover no-repeat !important;
}
/* req1: usun gorny scrim; req4: dolny fade hero -> biel */
#ksn-medytacje .med-hero::after{
  content:'' !important; position:absolute !important; left:0; right:0; bottom:0 !important; top:auto !important;
  height:130px !important;
  background:linear-gradient(to bottom, rgba(255,255,255,0), #ffffff) !important;
  z-index:1 !important; pointer-events:none !important;
}
/* req4: baza tresci BIALA (sekcje z kaflami pod hero) */
#ksn-medytacje{ background:#ffffff !important; }
/* req7: miekka chmura pod telefonem */
#ksn-medytacje .med-hero-character::after{
  content:'' !important; display:block !important; position:absolute; z-index:1;
  left:50%; bottom:-6px; transform:translateX(-50%); width:120%; height:175px;
  background:radial-gradient(58% 80% at 50% 100%, rgba(255,255,255,.97), rgba(255,255,255,.66) 46%, rgba(255,255,255,0) 74%);
  filter:blur(5px); pointer-events:none;
}
/* req6: niebieskie wchodzi POD zolte (gorna fala pakietow = niebieska, nie kremowa) */
#ksn-medytacje .packs-hero-section::before{ background:#0b4fb0 !important; }
/* req5: TOPICS jak "Explore Topics" — slate + grain + naglowek wysrodkowany */
#ksn-medytacje .wu-topics{ background:linear-gradient(165deg,#6d8fb4,#465f86) !important; position:relative; overflow:hidden; }
#ksn-medytacje .wu-topics::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.20; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#ksn-medytacje .wu-topics > .container-wide{ position:relative; z-index:1; }
#ksn-medytacje .wu-topics-head{ text-align:center; max-width:640px; margin:0 auto 50px; }
#ksn-medytacje .wu-topics-head h2{ color:#fff !important; margin:0 0 14px; }
#ksn-medytacje .wu-topics-head p{ color:rgba(255,255,255,.84) !important; }
/* req5 fix: slate musi bic Wave2 .bg-soft:has(.faq-list) (rowna specyficznosc + !important + pozniej) */
#ksn-medytacje .bg-soft.wu-topics{ background:linear-gradient(165deg,#6d8fb4,#465f86) !important; }
/* ==========================================================================
   MEDYTACJE — WAVE 6: ciemniejsze niebo (deep blue) — nakladka multiply na sky3
   (bez regeneracji; latwo regulowac sila przez alpha). 
   ========================================================================== */
#ksn-medytacje .med-hero{
  background-color:#0a3f9e !important;
  background-image:
    linear-gradient(180deg, rgba(3,35,110,.55), rgba(6,55,150,.40)),
    url("../img/ksn-med-sky3.png") !important;
  background-size: cover, cover !important;
  background-position: center top, center top !important;
  background-repeat: no-repeat, no-repeat !important;
  background-blend-mode: multiply, normal !important;
}
/* niebo: pelna jakosc bez przyciemniania (zdjecie 100%), naturalnie ciemniejszy blue */
#ksn-medytacje .med-hero{
  background-color:#2b5ea0 !important;
  background-image:url("../img/ksn-med-sky4.png") !important;
  background-size:cover !important;
  background-position:center top !important;
  background-repeat:no-repeat !important;
  background-blend-mode:normal !important;
}
/* dolny fade DUZO mniejszy -> chmury z dolu zdjecia widoczne, delikatne wtopienie w biel */
#ksn-medytacje .med-hero::after{
  height:70px !important;
  background:linear-gradient(to bottom, rgba(255,255,255,0), #ffffff) !important;
}
/* menu w pelni przezroczyste (widac niebo i chmury) */
body.ksn-med-page #header{ background:transparent !important; }
body.ksn-med-page .ksn-header{ background:transparent !important; }
/* seam: gorna fala sekcji PAKIETY = kolor dolu sekcji topics (#465f86) -> plynne */
#ksn-medytacje .packs-hero-section::before{ background:#465f86 !important; }
/* mniejszy border-radius na boxach */
#ksn-medytacje .med-card{ border-radius:12px !important; }
#ksn-medytacje .wu-float-img{ border-radius:12px !important; }
#ksn-medytacje .hero-float-card{ border-radius:12px !important; }
#ksn-medytacje .med-featured-card{ border-radius:14px !important; }
#ksn-medytacje .med-cross-banner{ border-radius:14px !important; }
#ksn-medytacje .med-search-wrap input{ border-radius:12px !important; }
/* menu w pelni przezroczyste — bez rozmycia/mrozonego szkla */
body.ksn-med-page .ksn-header,
body.ksn-med-page #header,
body.ksn-med-page #header.header_omg_im_scrolled .ksn-header{
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
/* usun glow/kolko pod telefonem (na ciemnym niebie wygladalo jak blob) */
#ksn-medytacje .med-hero-character::after{ display:none !important; content:none !important; }
/* ==========================================================================
   MEDYTACJE — WAVE 9: FIX mega-menu obrazki (moja regula invert dla logo
   lapala img[alt] = TEZ miniatury produktow -> biale). Resetujemy filter.
   ========================================================================== */
body.ksn-med-page header.ksn-header .ksn-megamenu img,
body.ksn-med-page header.ksn-header #ksnMegaProducts img,
body.ksn-med-page header.ksn-header .ksn-mega-card-img img,
body.ksn-med-page header.ksn-header .ksn-mega-promo img,
body.ksn-med-page header.ksn-header .ksn-megahome-visual img,
body.ksn-med-page header.ksn-header .ksn-mega-products img{
  filter:none !important; -webkit-filter:none !important;
}
/* ==========================================================================
   MEDYTACJE — WAVE 10: telefon wynurza sie z chmury (chmura na czarnym tle +
   mix-blend:screen -> czern znika, zostaje chmura). Pod i wokol dolu telefonu.
   ========================================================================== */
#ksn-medytacje .med-hero-character{ position:relative; }
#ksn-medytacje .med-hero-character::after{
  content:'' !important; display:block !important;
  position:absolute !important; z-index:3 !important;
  left:50%; bottom:-12px; transform:translateX(-50%);
  width:155%; max-width:760px; height:230px;
  background:url("../img/ksn-cloud-bank.png") center bottom / contain no-repeat !important;
  mix-blend-mode:screen; pointer-events:none;
  filter:none !important;
}
/* plywajace karty nad chmura (zeby chmura ich nie zakryla) */
#ksn-medytacje .hero-float-card{ z-index:4 !important; }
/* lzejsze niebo (jpg zamiast 2MB png) */
#ksn-medytacje .med-hero{ background-image:url("../img/ksn-med-sky4.jpg") !important; }
/* chmura: prawdziwa przezroczystosc (alpha) -> bez mix-blend, bez czarnego prostokata */
#ksn-medytacje .med-hero-character::after{
  background-image:url("../img/ksn-cloud-alpha.png") !important;
  mix-blend-mode:normal !important;
}
/* MENU zawsze widoczne: fixed (nie scrolluje sie z hero) */
body.ksn-med-page #header{
  position:fixed !important; top:0 !important; left:0 !important; right:0 !important; width:100% !important;
}
/* przezroczyste u gory; niebieskie po zjechaniu (czytelnosc na bialej tresci) */
body.ksn-med-page #header.ksn-med-scrolled .ksn-header{ background:transparent !important; }
/* hero bez ujemnego marginesu (fixed header nie jest w flow); padding na nav */
#ksn-medytacje .med-hero{
  margin-top:0 !important;
  padding-top: calc(var(--ksnHeadH, 92px) + 36px) !important;
}
/* PRAWDZIWE logo (usun invert; lekki cien dla czytelnosci na niebie) */
body.ksn-med-page .ksn-nav-logo img,
body.ksn-med-page .ksn-nav-logo h1 img,
body.ksn-med-page header.ksn-header img.logo{
  filter:drop-shadow(0 2px 7px rgba(0,0,0,.28)) !important;
}
/* PRZYCISK "do gory" (prawy dolny rog) */
#ksn-medytacje .ksn-totop{
  position:fixed; right:24px; bottom:24px; z-index:9998;
  width:52px; height:52px; border-radius:50%; border:0; cursor:pointer;
  background:#0162df; color:#fff; box-shadow:0 10px 26px rgba(2,40,110,.4);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s, background .2s ease;
}
#ksn-medytacje .ksn-totop.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
#ksn-medytacje .ksn-totop svg{ width:22px; height:22px; display:block; }
#ksn-medytacje .ksn-totop:hover{ background:#0a52c0; transform:translateY(-3px); }
/* MOBILE: menu tez przezroczyste */
@media (max-width: 968px){
body.ksn-med-page #header,
  body.ksn-med-page .ksn-header{ background:transparent !important; }
body.ksn-med-page #header.ksn-med-scrolled .ksn-header{ background:transparent !important; }
#ksn-medytacje .ksn-totop{ right:16px; bottom:16px; width:46px; height:46px; }
}
/* zolte/pastelowe kropki + orby + ring -> precz (na kazdym widoku) */
#ksn-medytacje .med-dot,
#ksn-medytacje .hero-orb,
#ksn-medytacje .med-hero-ring{ display:none !important; }
/* logo: bez filtra (podmieniamy na koralowe transparentne przez JS) */
body.ksn-med-page .ksn-nav-logo img,
body.ksn-med-page .ksn-nav-logo h1 img,
body.ksn-med-page header.ksn-header img.logo{ filter:none !important; }
/* CHMURA przeniesiona na .hero-phone -> zawsze wycentrowana POD telefonem */
#ksn-medytacje .med-hero-character::after{ display:none !important; content:none !important; }
#ksn-medytacje .hero-phone{ overflow:visible !important; }
#ksn-medytacje .hero-phone::after{
  content:''; position:absolute; z-index:3; pointer-events:none;
  left:50%; bottom:-28px; transform:translateX(-50%);
  width:250%; height:215px;
  background:url("../img/ksn-cloud-alpha.png") center bottom / contain no-repeat;
}
/* PRZYCISK do gory: wiekszy + koralowy (bardziej widoczny), nieco bardziej do srodka */
#ksn-medytacje .ksn-totop{
  width:62px !important; height:62px !important; right:40px !important; bottom:40px !important;
  background:#f29391 !important; box-shadow:0 12px 32px rgba(242,147,145,.55) !important;
}
#ksn-medytacje .ksn-totop:hover{ background:#e07f7d !important; }
#ksn-medytacje .ksn-totop svg{ width:26px !important; height:26px !important; }
@media (max-width:968px){
#ksn-medytacje .ksn-totop{ right:18px !important; bottom:18px !important; width:54px !important; height:54px !important; }
}
/* przyciski / pills -> male zaokraglenie */
#ksn-medytacje .btn-bajk,
#ksn-medytacje .btn-bajk-lg,
#ksn-medytacje .btn,
#ksn-medytacje .wu-seeall,
#ksn-medytacje #packsCta,
body.ksn-med-page .ksn-nav-cta{ border-radius:8px !important; }
/* segmented bary */
#ksn-medytacje .wu-tabs,
#ksn-medytacje .med-filter-chips{ border-radius:10px !important; }
#ksn-medytacje .wu-tab,
#ksn-medytacje .med-filter-chip{ border-radius:6px !important; }
/* eyebrow / małe etykiety */
#ksn-medytacje .eyebrow,
#ksn-medytacje .eyebrow-rich,
#ksn-medytacje .med-card-tag,
#ksn-medytacje .packs-option-best,
#ksn-medytacje .packs-option-free{ border-radius:5px !important; }
/* karty / kafle / obrazki */
#ksn-medytacje .med-card,
#ksn-medytacje .wu-float-img,
#ksn-medytacje .hero-float-card,
#ksn-medytacje .packs-option,
#ksn-medytacje .med-search-wrap input{ border-radius:8px !important; }
/* telefony w pakietach + featured */
#ksn-medytacje .packs-phone,
#ksn-medytacje .packs-phone-screen{ border-radius:14px !important; }
/* przycisk do gory: z kola -> zaokraglony kwadrat (mniej obly) */
#ksn-medytacje .ksn-totop{ border-radius:14px !important; }
/* LEPSZY GRAIN na FAQ — drobniejszy, większy kafel (mniej widocznej powtarzalności), soft-light */
#ksn-medytacje .wu-topics::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.6'/%3E%3C/svg%3E") !important;
  background-size:200px 200px !important;
  opacity:0.13 !important;
  mix-blend-mode:soft-light !important;
}
/* ==========================================================================
   MEDYTACJE — WAVE 14: na mobile za malo chmur -> dodatkowa chmura po prawej.
   Przy prawej krawedzi (czesc poza ekranem), za tekstem, subtelna.
   ========================================================================== */
@media (max-width:768px){
#ksn-medytacje .med-hero{ position:relative; }
#ksn-medytacje .med-hero::before{
    content:''; position:absolute; z-index:1; pointer-events:none;
    top:9%; right:-20%; width:70%; height:120px;
    background:url("../img/ksn-cloud-alpha.png") center / contain no-repeat;
    opacity:.82;
  }
}
/* ==========================================================================
   MEDYTACJE — WAVE 15: niebo bez chmur w lewej-gorze (img_5 i2i), nowa nazwa
   pliku = cache-bust (przegladarka nie poda starego).
   ========================================================================== */
#ksn-medytacje .med-hero{ background-image:url("../img/ksn-med-sky5.jpg") !important; }
/* WAVE 16: niebo w wyzszej jakosci (q96, pelna rozdzielczosc) + cache-bust */
#ksn-medytacje .med-hero{ background-image:url("../img/ksn-med-sky6.jpg") !important; }
/* chmura wieksza -> zaslania wiecej dolu telefonu */
#ksn-medytacje .hero-phone::after{
  width:300% !important; height:290px !important; bottom:-4px !important;
}
/* menu po scrollu: czysty bialy pasek (nie niebieski) */
body.ksn-med-page #header.ksn-med-scrolled .ksn-header,
body.ksn-med-page #header.ksn-med-scrolled,
body.ksn-med-page .ksn-header.is-scrolled{
  background:#ffffff !important;
  box-shadow:0 2px 14px rgba(16,21,29,.09) !important;
}
/* tekst/ikony ciemne na bialym pasku */
body.ksn-med-page #header.ksn-med-scrolled .ksn-nav-menu a,
body.ksn-med-page #header.ksn-med-scrolled .ksn-nav-menu li>a,
body.ksn-med-page #header.ksn-med-scrolled .ksn-icon-btn{
  color:#1a1620 !important; text-shadow:none !important;
}
body.ksn-med-page #header.ksn-med-scrolled .ksn-nav-menu a.current,
body.ksn-med-page #header.ksn-med-scrolled .ksn-nav-menu li.current>a{ color:#d65f5d !important; }
body.ksn-med-page #header.ksn-med-scrolled .ksn-nav-menu a.current::after,
body.ksn-med-page #header.ksn-med-scrolled .ksn-nav-menu li.current>a::after{ background:#d65f5d !important; }
/* ==========================================================================
   MEDYTACJE — WAVE 18: NIEBO = gradient CSS (idealny blekit, zero bandingu)
   odwzorowujacy kolor img_5 + chmury WYCIETE ze zdjecia (te same miejsca).
   Zastepuje JPG -> piekna jakosc, lekkie.
   ========================================================================== */
#ksn-medytacje .med-hero{
  background-color:#014595 !important;
  background-image:
    url("../img/ksn-sky-clouds.png"),
    linear-gradient(180deg,
      #013981 0%, #024493 14%, #014596 34%, #00479a 52%,
      #0f55a6 66%, #3f78c0 80%, #86abdd 92%, #b9d6f0 100%) !important;
  background-size: cover, cover !important;
  background-position: center top, center top !important;
  background-repeat: no-repeat, no-repeat !important;
}
/* ==========================================================================
   MEDYTACJE — WAVE 19: ZERO paska na scrollu (ani bialy ani niebieski).
   Neutralizuje OBA zrodla: modulowa klasa header_omg_im_scrolled/.is-scrolled
   (bylo niebieskie) ORAZ moja ksn-med-scrolled (bylo biale). Menu ZAWSZE
   przezroczyste; tekst bialy + mocny cien dla czytelnosci.
   ========================================================================== */
body.ksn-med-page #header,
body.ksn-med-page #header.header_omg_im_scrolled,
body.ksn-med-page #header.ksn-med-scrolled,
body.ksn-med-page .ksn-header,
body.ksn-med-page #header.header_omg_im_scrolled .ksn-header,
body.ksn-med-page #header.ksn-med-scrolled .ksn-header,
body.ksn-med-page .ksn-header.is-scrolled{
  background:transparent !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
/* tekst + ikony ZAWSZE biale (bez przelaczania) + mocniejszy cien = czytelne bez paska */
body.ksn-med-page .ksn-nav-menu a,
body.ksn-med-page .ksn-nav-menu li>a,
body.ksn-med-page #header.ksn-med-scrolled .ksn-nav-menu a,
body.ksn-med-page #header.ksn-med-scrolled .ksn-nav-menu li>a,
body.ksn-med-page .ksn-icon-btn,
body.ksn-med-page #header.ksn-med-scrolled .ksn-icon-btn{
  color:#fff !important;
  text-shadow:0 1px 4px rgba(0,18,55,.6), 0 0 16px rgba(0,18,55,.4) !important;
}
/* ==========================================================================
   MEDYTACJE — WAVE 20: niebo = gradient + DWIE warstwy chmur (gora kotwiczona
   u gory, dol u dolu) -> dolny bank nie ucieka w dol na duzych ekranach (27");
   prawy-dolny brzydki rejon wygaszony. Mniejszy fade do bieli.
   ========================================================================== */
#ksn-medytacje .med-hero{
  background-color:#014595 !important;
  background-image:
    url("../img/ksn-clouds-top.png"),
    url("../img/ksn-clouds-bottom.png"),
    linear-gradient(180deg,
      #013981 0%, #024493 14%, #014596 34%, #00479a 52%,
      #0f55a6 66%, #3f78c0 80%, #86abdd 92%, #b9d6f0 100%) !important;
  background-size: 100% auto, 100% auto, cover !important;
  background-position: center top, center bottom, center top !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
}
/* mniejsze przejscie hero -> biel */
#ksn-medytacje .med-hero::after{ height:34px !important; }
/* badge opinii — wlasny design (gwiazdki + 4,9 + 250+ opinii) */
#ksn-medytacje .ksn-reviews{
  display:inline-flex; align-items:center; gap:11px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.26);
  border-radius:8px; padding:8px 15px; margin-bottom:26px;
}
#ksn-medytacje .ksn-reviews-stars{ display:inline-flex; gap:2px; color:#ffce4d; line-height:0; }
#ksn-medytacje .ksn-reviews-stars svg{ width:17px; height:17px; display:block; filter:drop-shadow(0 1px 2px rgba(0,20,60,.3)); }
#ksn-medytacje .ksn-reviews-meta{ display:inline-flex; align-items:baseline; gap:7px; color:#fff; font-size:14px; letter-spacing:-.01em; }
#ksn-medytacje .ksn-reviews-meta strong{ font-weight:800; font-size:16.5px; }
#ksn-medytacje .ksn-reviews-meta span{ color:rgba(255,255,255,.85); font-weight:600; }
/* TYTUL hero — duzo wiekszy (desktop + mobile) */
#ksn-medytacje .med-hero .display-1{
  font-size:clamp(44px, 5.6vw, 78px) !important;
  line-height:1.02 !important;
  letter-spacing:-.035em !important;
}
/* chmura mobile — przesun NIZEJ (bylo top:9% u gory) */
@media (max-width:768px){
#ksn-medytacje .med-hero::before{
    top:auto !important; bottom:20% !important; right:-16% !important; width:74% !important; height:128px !important;
  }
}
/* HERO bg: top + bottom2 (wiecej chmur z prawej) + gradient */
#ksn-medytacje .med-hero{
  background-image:
    url("../img/ksn-clouds-top.png"),
    url("../img/ksn-clouds-bottom2.png"),
    linear-gradient(180deg,
      #013981 0%, #024493 14%, #014596 34%, #00479a 52%,
      #0f55a6 66%, #3f78c0 80%, #86abdd 92%, #b9d6f0 100%) !important;
  background-size: 100% auto, 100% auto, cover !important;
  background-position: center top, center bottom, center top !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
}
/* mobile: chmury "cover" (zoom -> wiecej chmur, jak wczesniej) */
@media (max-width:768px){
#ksn-medytacje .med-hero{
    background-size: cover, cover, cover !important;
    background-position: center 16%, center bottom, center top !important;
  }
}
/* HEADER nie-sticky: absolute -> jest nad hero (chmury pod menu) ale zjezdza z trescia */
body.ksn-med-page #header{ position:absolute !important; }
/* BADGE w wiencu laurowym (wlasny design) — gwiazdki + duze 250+ + maly podpis */
#ksn-medytacje .ksn-reviews{
  display:inline-flex !important; align-items:center; justify-content:center; gap:8px;
  background:transparent !important; border:0 !important; padding:0 !important; margin-bottom:26px;
}
#ksn-medytacje .ksn-laurel{ width:36px; height:76px; color:rgba(255,255,255,.92); flex:none; }
#ksn-medytacje .ksn-laurel-r{ transform:scaleX(-1); }
#ksn-medytacje .ksn-reviews-core{ display:flex; flex-direction:column; align-items:center; text-align:center; }
#ksn-medytacje .ksn-reviews-stars{ display:inline-flex; gap:3px; color:#ffce4d; margin-bottom:4px; }
#ksn-medytacje .ksn-reviews-stars svg{ width:15px; height:15px; display:block; filter:drop-shadow(0 1px 2px rgba(0,20,60,.3)); }
#ksn-medytacje .ksn-reviews-num{ font-size:33px; font-weight:800; line-height:.95; letter-spacing:-.02em; color:#fff; }
#ksn-medytacje .ksn-reviews-cap{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.84); margin-top:5px; }
/* WAVE 23: laurka jako wygenerowany obraz (Caesar laurel) — lewa + odbita prawa */
#ksn-medytacje .ksn-laurel{ width:auto !important; height:86px !important; opacity:.95; filter:drop-shadow(0 2px 6px rgba(0,20,60,.28)); }
#ksn-medytacje .ksn-laurel-r{ transform:scaleX(-1); }
#ksn-medytacje .ksn-reviews{ gap:14px !important; }
/* ==========================================================================
   MEDYTACJE — WAVE 24: dolne chmury bielsze + biala podstawa (bottom3) ->
   idealne wtopienie w biala sekcje, nizej. Maly fade (biel juz w obrazie).
   ========================================================================== */
#ksn-medytacje .med-hero{
  background-image:
    url("../img/ksn-clouds-top.png"),
    url("../img/ksn-clouds-bottom3.png"),
    linear-gradient(180deg,
      #013981 0%, #024493 14%, #014596 34%, #00479a 52%,
      #0f55a6 66%, #3f78c0 80%, #86abdd 92%, #b9d6f0 100%) !important;
  background-size: 100% auto, 100% auto, cover !important;
  background-position: center top, center bottom, center top !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
}
#ksn-medytacje .med-hero::after{ height:16px !important; }
@media (max-width:768px){
#ksn-medytacje .med-hero{ background-size: cover, cover, cover !important; background-position: center 16%, center bottom, center top !important; }
}
/* WAVE 25: dolne chmury nizej (krotszy bank bottom4) -> przyciski widoczne, biala podstawa zostaje */
#ksn-medytacje .med-hero{
  background-image:
    url("../img/ksn-clouds-top.png"),
    url("../img/ksn-clouds-bottom4.png"),
    linear-gradient(180deg,
      #013981 0%, #024493 14%, #014596 34%, #00479a 52%,
      #0f55a6 66%, #3f78c0 80%, #86abdd 92%, #b9d6f0 100%) !important;
  background-size: 100% auto, 100% auto, cover !important;
  background-position: center top, center bottom, center top !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
}
@media (max-width:768px){
#ksn-medytacje .med-hero{ background-size: cover, 100% auto, cover !important; background-position: center 16%, center bottom, center top !important; }
}
/* WAVE 26: mobile zostaje przy pelniejszym banku (bottom3, cover) — na mobile
   przyciski sa wysoko (układ pionowy), wiec pelne chmury na dole nie zaslaniaja. */
@media (max-width:768px){
#ksn-medytacje .med-hero{
    background-image:
      url("../img/ksn-clouds-top.png"),
      url("../img/ksn-clouds-bottom3.png"),
      linear-gradient(180deg,#013981 0%,#024493 14%,#014596 34%,#00479a 52%,#0f55a6 66%,#3f78c0 80%,#86abdd 92%,#b9d6f0 100%) !important;
    background-size: cover, cover, cover !important;
    background-position: center 16%, center bottom, center top !important;
  }
}
/* WAVE 27: dolne chmury naturalnie nizsze po lewej (feather, miekkie szczyty),
   prawa pelna; zastepuje twardo przyciety bottom4. */
#ksn-medytacje .med-hero{
  background-image:
    url("../img/ksn-clouds-top.png"),
    url("../img/ksn-clouds-bottom6.png"),
    linear-gradient(180deg,
      #013981 0%, #024493 14%, #014596 34%, #00479a 52%,
      #0f55a6 66%, #3f78c0 80%, #86abdd 92%, #b9d6f0 100%) !important;
  background-size: 100% auto, 100% auto, cover !important;
  background-position: center top, center bottom, center top !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
}
@media (max-width:768px){
#ksn-medytacje .med-hero{
    background-image:
      url("../img/ksn-clouds-top.png"),
      url("../img/ksn-clouds-bottom3.png"),
      linear-gradient(180deg,#013981 0%,#024493 14%,#014596 34%,#00479a 52%,#0f55a6 66%,#3f78c0 80%,#86abdd 92%,#b9d6f0 100%) !important;
    background-size: cover, cover, cover !important;
    background-position: center 16%, center bottom, center top !important;
  }
}
/* ==========================================================================
   MEDYTACJE — WAVE 28: POWROT do pierwszej wersji chmur (jeden plik
   ksn-sky-clouds.png, cover) + poprawiony prawy-dol. Kasuje split/crop/feather.
   ========================================================================== */
#ksn-medytacje .med-hero{
  background-image:
    url("../img/ksn-sky-clouds.png"),
    linear-gradient(180deg,
      #013981 0%, #024493 14%, #014596 34%, #00479a 52%,
      #0f55a6 66%, #3f78c0 80%, #86abdd 92%, #b9d6f0 100%) !important;
  background-size: cover, cover !important;
  background-position: center top, center top !important;
  background-repeat: no-repeat, no-repeat !important;
}
#ksn-medytacje .med-hero::after{ height:40px !important; }
@media (max-width:768px){
#ksn-medytacje .med-hero{
    background-image:
      url("../img/ksn-sky-clouds.png"),
      linear-gradient(180deg,#013981 0%,#024493 14%,#014596 34%,#00479a 52%,#0f55a6 66%,#3f78c0 80%,#86abdd 92%,#b9d6f0 100%) !important;
    background-size: cover, cover !important;
    background-position: center top, center top !important;
  }
}
/* WAVE 29: chmury zakotwiczone do DOLU (center bottom) -> na 27" nie uciekaja
   nisko/nie sa przycinane od dolu; jasniejsze + biala podstawa (z obrazu). */
#ksn-medytacje .med-hero{ background-position: center bottom, center top !important; }
@media (max-width:768px){
#ksn-medytacje .med-hero{ background-position: center bottom, center top !important; }
}
/* ==========================================================================
   MEDYTACJE — WAVE 30: bialy merge na dole (gradient) + pozycja chmur:
   normalnie center top (przyciski czyste), na duzych/27" center bottom
   (chmury wyzej, nie uciekaja za nisko). Chmury jasniejsze (z obrazu).
   ========================================================================== */
#ksn-medytacje .med-hero{
  background-image:
    linear-gradient(to top, #ffffff 0%, rgba(255,255,255,0) 12%),
    url("../img/ksn-sky-clouds.png"),
    linear-gradient(180deg,
      #013981 0%, #024493 14%, #014596 34%, #00479a 52%,
      #0f55a6 66%, #3f78c0 80%, #86abdd 92%, #b9d6f0 100%) !important;
  background-size: cover, cover, cover !important;
  background-position: center top, center top, center top !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
}
#ksn-medytacje .med-hero::after{ display:none !important; }
/* duze ekrany (27"+) -> podnies bank (center bottom) */
@media (min-width:1800px){
#ksn-medytacje .med-hero{ background-position: center top, center bottom, center top !important; }
}
/* mobile -> pelny bank u dolu */
@media (max-width:768px){
#ksn-medytacje .med-hero{ background-position: center top, center bottom, center top !important; }
}
/* WAVE 31: na duzych/27" przesun chmury troche NIZEJ (center 68% zamiast bottom)
   -> nizej niz wczesniej, ale nie za nisko; nic nie obcina, tylko pozycja tla. */
@media (min-width:1800px){
#ksn-medytacje .med-hero{ background-position: center top, center 68%, center top !important; }
}
/* ==========================================================================
   MEDYTACJE — WAVE 32: chmurkowy SEPARATOR na mobile — pas chmur na dole
   zoltej sekcji PAKIETY (zolte -> chmury -> biel), jak hero. Demo w 1 miejscu.
   ========================================================================== */
@media (max-width:768px){
#ksn-medytacje .packs-hero-section{ position:relative; overflow:visible; }
#ksn-medytacje .packs-hero-section::after{
    content:'' !important; position:absolute !important;
    left:0 !important; right:0 !important; bottom:-1px !important; top:auto !important;
    width:100% !important; height:118px !important;
    background:url("../img/ksn-cloud-sep.png") center bottom / cover no-repeat !important;
    border-radius:0 !important; z-index:3 !important;
  }
}
/* ==========================================================================
   MEDYTACJE — WAVE 33: chmurkowy separator na mobile POD HERO (miedzy
   telefonem a "Czego dzis potrzebujesz?"). Cofamy separator z PAKIETOW.
   ========================================================================== */
@media (max-width:768px){
#ksn-medytacje .packs-hero-section::after{
    background:var(--cream) !important;
    height:70px !important; bottom:-1px !important;
    border-radius:50% 50% 0 0 / 100% 100% 0 0 !important;
  }
#ksn-medytacje .med-hero{ position:relative; }
#ksn-medytacje .med-hero::after{
    content:'' !important; display:block !important; position:absolute !important;
    left:0 !important; right:0 !important; bottom:-1px !important; top:auto !important;
    width:100% !important; height:120px !important;
    background:url("../img/ksn-cloud-sep.png") center bottom / cover no-repeat !important;
    z-index:4 !important; pointer-events:none;
  }
}
/* WAVE 34: separator chmur ladniejszy — wiekszy + miekko zanikajacy szczyt
   (sep2), bez przycinania (100% auto, wysokosc = proporcja 45vw). */
@media (max-width:768px){
#ksn-medytacje .med-hero::after{
    background:url("../img/ksn-cloud-sep2.png") center bottom / 100% auto no-repeat !important;
    height:45vw !important; max-height:230px !important;
  }
}
/* ==========================================================================
   MEDYTACJE — WAVE 35: wizualizacja img_telefon zamiast telefonu (PC),
   na mobile JAKO PIERWSZE pod menu. Tlo (niebo+chmury) zostaje.
   ========================================================================== */
#ksn-medytacje .med-hero-character{ padding:0 !important; }
#ksn-medytacje .med-hero-visual{
  display:block; width:100%; max-width:440px; margin:0 auto;
  border-radius:22px; box-shadow:0 34px 80px rgba(2,40,110,.42);
}
/* mobile/tablet: zdjecie pierwsze (pod menu), potem tekst */
@media (max-width:900px){
#ksn-medytacje .med-hero-grid{ display:flex !important; flex-direction:column !important; gap:26px !important; }
#ksn-medytacje .med-hero-character{ order:-1 !important; }
#ksn-medytacje .med-hero-visual{ max-width:330px; }
}
/* ==========================================================================
   MEDYTACJE — WAVE 43: telefon = gotowy PNG uzytkownika (phone_2, z wlasnym
   miekkim cieniem) na naszym niebie z chmurami (WAVE 30/31). Bez kafla.
   ========================================================================== */
#ksn-medytacje .med-hero-character{ padding:0 !important; }
#ksn-medytacje .med-hero-visual{
  display:block; width:100%; max-width:560px; margin:0 auto;
  border-radius:0 !important; box-shadow:none !important; background:transparent !important;
  /* cien jest juz w PNG (phone_2) — bez dodatkowego */
}
@media (max-width:900px){
#ksn-medytacje .med-hero-visual{ max-width:360px; }
}
/* ==========================================================================
   MEDYTACJE — WAVE 44: mobile — zroznicowane niebieskie tlo (jasniej u gory-prawo,
   ciemniej u dolu-lewo, zeby sie nie zlewalo) + chmura w prawym-gornym rogu (jak PC).
   ========================================================================== */
@media (max-width:768px){
#ksn-medytacje .med-hero{
    background:
      linear-gradient(to top, #ffffff 0%, rgba(255,255,255,0) 13%),
      url("../img/ksn-sky-clouds.png"),
      radial-gradient(95% 50% at 82% 15%, rgba(120,172,230,.55) 0%, rgba(120,172,230,0) 60%),
      radial-gradient(120% 60% at 6% 52%, rgba(1,22,62,.60) 0%, rgba(1,22,62,0) 62%),
      linear-gradient(180deg, #06398a 0%, #0a4796 32%, #115aa8 58%, #3f79c1 82%, #b9d6f0 100%) !important;
    background-size: cover, cover, 150% 150%, 150% 150%, cover !important;
    background-position: center top, center bottom, 82% 15%, 6% 52%, center top !important;
    background-repeat: no-repeat !important;
    position: relative;
  }
#ksn-medytacje .med-hero::before{
    content:'' !important; display:block !important; position:absolute !important;
    top: calc(var(--ksnHeadH, 64px) + 28px) !important; right:-16% !important; left:auto !important; bottom:auto !important;
    width:84% !important; aspect-ratio:860 / 528 !important; height:auto !important; z-index:1 !important; pointer-events:none;
    background:url("../img/ksn-cloud-tr.png") right center / contain no-repeat !important;
    opacity:1 !important;
  }
}
/* ==========================================================================
   MEDYTACJE — WAVE 45: FIX skoku menu przy scrollu (mobile). Modul fixedheader
   przelacza #header na position:fixed po przekroczeniu progu -> naglowek skacze.
   Blokujemy #header na absolute WE WSZYSTKICH stanach + zero transformacji/przejsc
   + modul nie rezerwuje paddingu na body. Naglowek plynnie "odplywa" przy scrollu.
   ========================================================================== */
body.ksn-med-page #header,
body.ksn-med-page #header.header_omg_im_scrolled,
body.ksn-med-page #header.ksn-med-scrolled,
body.ksn-med-page #header.fixed,
body.ksn-med-page #header.sticky,
body.ksn-med-page #header.header-fixed{
  position:absolute !important; top:0 !important; left:0 !important; right:0 !important;
  width:100% !important; transform:none !important; transition:none !important; animation:none !important;
}
body.ksn-med-page{ padding-top:0 !important; }
body.ksn-med-page .header-fixed-spacer,
body.ksn-med-page #fixedHeaderSpacer,
body.ksn-med-page .fixed-header-spacer{ display:none !important; height:0 !important; }
/* ==========================================================================
   MEDYTACJE — WAVE 46: PLAYER MODAL = ekran telefonu (deep-blue + Cormorant
   + orb oddychajacy + cienki pierscien postepu + biale kontrolki). Animacje
   otwarcia zostaja; zmieniamy tylko wyglad (tlo, font, orb, kolory).
   ========================================================================== */
#ksn-medytacje .player-modal{
  background: radial-gradient(120% 72% at 50% 4%, #14529e 0%, #0c4088 40%, #082f6c 72%, #051f4d 100%) !important;
}
#ksn-medytacje .player-bg-stage,
#ksn-medytacje .player-bg-video,
#ksn-medytacje .player-bg-ambient{ display:none !important; }
#ksn-medytacje .player-modal::after{ display:none !important; }
#ksn-medytacje .player-title{
  font-family:'Cormorant Garamond', serif !important;
  font-weight:600 !important; font-style:italic !important;
  color:#fff !important; font-size:clamp(30px,5.4vw,48px) !important;
  letter-spacing:.3px !important; text-shadow:0 2px 20px rgba(2,30,90,.4);
}
/* timer = orb + cienki pierscien */
#ksn-medytacje .player-timer{
  position:relative !important;
  width:min(66vw,300px) !important; height:min(66vw,300px) !important;
}
#ksn-medytacje .player-orb{ position:absolute !important; inset:8% !important; z-index:1;
  animation:plBreath 7s ease-in-out infinite; }
#ksn-medytacje .player-timer .player-orb svg{
  width:100% !important; height:100% !important; display:block;
  transform:none !important;
  filter:drop-shadow(0 18px 44px rgba(3,28,86,.55));
}
#ksn-medytacje .player-ring{
  position:absolute !important; inset:0 !important; width:100% !important; height:100% !important;
  transform:rotate(-90deg) !important; z-index:2;
}
#ksn-medytacje .player-timer-track{ fill:none !important; stroke:rgba(255,255,255,.16) !important; stroke-width:2 !important; }
#ksn-medytacje .player-timer-progress{ fill:none !important; stroke:#dcebff !important; stroke-width:2 !important; stroke-linecap:round !important; }
/* czas pod orbem */
#ksn-medytacje .player-timer-text{
  position:static !important; transform:none !important; inset:auto !important;
  display:flex !important; gap:8px; justify-content:center; align-items:baseline;
  margin-top:22px !important; color:#a9c8ef !important;
  font-size:15px !important; letter-spacing:1.6px !important; text-transform:uppercase;
}
#ksn-medytacje .player-timer-current{ color:#fff !important; font-weight:600 !important; }
/* ambient pills minimal */
#ksn-medytacje .player-ambient-label{ color:#bcd4f3 !important; }
#ksn-medytacje .player-ambient-btn{
  background:rgba(255,255,255,.09) !important; border:1px solid rgba(255,255,255,.14) !important;
  color:#dce8fb !important; border-radius:16px !important;
}
#ksn-medytacje .player-ambient-btn.is-active{ background:#fff !important; color:#0c3c84 !important; border-color:#fff !important; }
#ksn-medytacje .player-ambient-btn.is-active svg{ stroke:#0c3c84 !important; }
/* glowny play = bialy okrag jak na telefonie */
#ksn-medytacje .player-main-btn{
  background:#fff !important; color:#0c3c84 !important;
  box-shadow:0 16px 34px rgba(2,18,60,.42) !important;
}
#ksn-medytacje .player-main-btn svg{ fill:#0c3c84 !important; color:#0c3c84 !important; }
#ksn-medytacje .player-close-x{ color:#eaf2ff !important; }
/* WAVE 46b: czas pod orbem — spojny, elegancki (nie wielki) */
#ksn-medytacje .player-timer-current{ font-size:21px !important; line-height:1 !important; font-weight:600 !important; }
#ksn-medytacje .player-timer-total{ font-size:14px !important; line-height:1 !important; }
/* WAVE 46c: czysty top modala (jak telefon) — bez logo sklepu (zostaje tylko X) */
#ksn-medytacje .player-topbar-logo{ display:none !important; }
/* ==========================================================================
   MEDYTACJE — WAVE 47: okladki kart — ZDJAC dolny gradient/poswiate (.med-card-cover
   ::after) + oddzielic blok-zdjecie od tytulu (inset, zaokraglony kafel, czysty
   odstep). Bez wtapiania zdjecia w karte.
   ========================================================================== */
#ksn-medytacje .med-card-cover::after{ display:none !important; }
#ksn-medytacje .med-card-cover{
  margin:0 !important;
  border-radius:20px 20px 0 0 !important;   /* pelna szerokosc, zaokraglona tylko gora jak karta */
  aspect-ratio:1 / 1;
  overflow:hidden !important;
}
#ksn-medytacje .med-card-body{
  margin-top:0 !important;                    /* bez nachodzenia -> czysty podzial gora/dol */
  padding-top:18px !important;
}
/* czyste niebieskie tlo (stonowany stalowy blekit jak WU) */
#ksn-medytacje .wu-topics,
#ksn-medytacje .bg-soft.wu-topics,
#ksn-medytacje .bg-soft:has(.faq-list){
  background:linear-gradient(180deg,#43729f 0%, #3a6491 100%) !important;
}
#ksn-medytacje .wu-topics::before{ opacity:.05 !important; }
/* pozycje = wiersze z cienka linia, bez kafli */
#ksn-medytacje .faq-item{
  background:transparent !important; border:0 !important; border-radius:0 !important;
  border-bottom:1px solid rgba(255,255,255,.22) !important;
  padding:6px 0 !important; box-shadow:none !important;
}
#ksn-medytacje .faq-item[open]{ box-shadow:none !important; }
#ksn-medytacje .faq-item summary{
  padding:18px 0 !important;
  font-size:clamp(20px,2vw,25px) !important; font-weight:700 !important;
  letter-spacing:-.01em !important; color:#fff !important;
}
#ksn-medytacje .faq-answer{
  font-size:17px !important; line-height:1.65 !important; color:rgba(255,255,255,.85) !important;
  padding-top:2px !important; padding-bottom:10px !important; max-width:none !important;
}
/* ELEGANCKA cienka ikona +/− (bez kola, bialy +, po otwarciu -> minus) */
#ksn-medytacje .faq-plus{
  width:26px !important; height:26px !important; flex-shrink:0; margin-left:24px !important;
  border-radius:0 !important; background:transparent !important;
  color:transparent !important; font-size:0 !important; position:relative;
  transition:none !important;
}
#ksn-medytacje .faq-plus::before,
#ksn-medytacje .faq-plus::after{
  content:''; position:absolute; left:50%; top:50%;
  background:rgba(255,255,255,.9); border-radius:2px;
}
#ksn-medytacje .faq-plus::before{ width:24px; height:2px; transform:translate(-50%,-50%); }
#ksn-medytacje .faq-plus::after{ width:2px; height:24px; transform:translate(-50%,-50%);
  transition:opacity .3s ease, transform .35s cubic-bezier(.4,0,.2,1); }
#ksn-medytacje .faq-item[open] .faq-plus{ background:transparent !important; transform:none !important; }
#ksn-medytacje .faq-item[open] .faq-plus::after{ opacity:0; transform:translate(-50%,-50%) rotate(90deg); }
/* plywajace obrazki — ladniejsze (wiekszy radius, miekki cien) */
#ksn-medytacje .wu-float-img{ border-radius:18px !important; box-shadow:0 18px 44px rgba(6,28,66,.34) !important; }
/* ==========================================================================
   MEDYTACJE — WAVE 49: blok tematow (dawne FAQ) — tlo NIEjednolite: delikatnie
   ciemniejsze ku dolowi + subtelny grain. Dluzsza lista tematow medytacji.
   ========================================================================== */
#ksn-medytacje .wu-topics,
#ksn-medytacje .bg-soft.wu-topics,
#ksn-medytacje .bg-soft:has(.faq-list){
  background:linear-gradient(180deg, #4675a2 0%, #3c6593 42%, #305685 74%, #284a76 100%) !important;
}
#ksn-medytacje .wu-topics::before{ opacity:.13 !important; mix-blend-mode:overlay !important; }
/* ==========================================================================
   MEDYTACJE — WAVE 50: ~5 tematow obok zdjec -> SEPARATOR -> osobny blok FAQ
   (przywrocone praktyczne pytania zakupowe, wycentrowane, pelna szerokosc).
   ========================================================================== */
#ksn-medytacje .wu-sep{
  border:0 !important; height:1px !important;
  background:rgba(255,255,255,.20) !important;
  max-width:1120px !important; margin:70px auto 58px !important;
}
#ksn-medytacje .wu-faq-block{ position:relative; z-index:1; }
#ksn-medytacje .wu-faq-head{ text-align:center; max-width:640px; margin:0 auto 30px; }
#ksn-medytacje .wu-faq-head h2,
#ksn-medytacje .wu-faq-head .display-2{
  color:#fff !important; margin:0 0 12px !important;
  font-size:clamp(26px,3vw,38px) !important;   /* mniejszy niz glowny naglowek sekcji */
}
#ksn-medytacje .wu-faq-head p{ color:rgba(255,255,255,.82) !important; }
#ksn-medytacje .wu-faq-block .faq-list{ max-width:780px !important; margin:0 auto !important; }
/* ==========================================================================
   MEDYTACJE — WAVE 51: blok tematow -> INNY kolor tla (nie wakingup-blue:
   gleboki teal-green, ciemniej na dol) + prawa strona = kafle „mądrości"
   (bardzo cienki border, fancy serif tytul, blogowy mikro-tekst).
   ========================================================================== */
#ksn-medytacje .wu-topics,
#ksn-medytacje .bg-soft.wu-topics,
#ksn-medytacje .bg-soft:has(.faq-list){
  background:linear-gradient(180deg, #2f615a 0%, #244c45 55%, #163029 100%) !important;
}
/* kafle madrosci */
#ksn-medytacje .med-insight-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
#ksn-medytacje .med-insight{
  border:1px solid rgba(255,255,255,.20);
  border-radius:16px; padding:24px 22px;
  background:rgba(255,255,255,.035);
  min-height:178px; display:flex; flex-direction:column; justify-content:center;
  transition:border-color .35s ease, background .35s ease, transform .35s ease;
}
#ksn-medytacje .med-insight:hover{
  border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.07); transform:translateY(-3px);
}
#ksn-medytacje .med-insight h3{
  font-family:'Cormorant Garamond', serif !important; font-style:italic; font-weight:600 !important;
  font-size:23px !important; line-height:1.14 !important; color:#fff !important; margin:0 0 10px !important;
}
#ksn-medytacje .med-insight p{
  font-size:14.5px !important; line-height:1.6 !important; color:rgba(255,255,255,.82) !important; margin:0 !important;
}
@media (max-width:560px){
#ksn-medytacje .med-insight-grid{ grid-template-columns:1fr; }
}
/* tytuly sekcji -> minimalistyczne, spojne (lzejsza waga, czysto) */
#ksn-medytacje .wu-topics-head h2,
#ksn-medytacje .wu-topics-head .display-2,
#ksn-medytacje .wu-faq-head h2,
#ksn-medytacje .wu-faq-head .display-2{
  font-weight:500 !important; letter-spacing:-.005em !important; line-height:1.1 !important;
  font-size:clamp(30px,3.6vw,46px) !important;
}
#ksn-medytacje .wu-topics-head p,
#ksn-medytacje .wu-faq-head p{ font-weight:400 !important; }
/* inne tlo: gleboki, lekko cieply grafit (nie blue/teal), ciemniej na dol */
#ksn-medytacje .wu-topics,
#ksn-medytacje .bg-soft.wu-topics,
#ksn-medytacje .bg-soft:has(.faq-list){
  background:linear-gradient(180deg, #33323a 0%, #2a2931 55%, #1b1a20 100%) !important;
}
/* WIDOCZNY film-grain */
#ksn-medytacje .wu-topics::before{ opacity:.28 !important; mix-blend-mode:soft-light !important; }
/* kafle madrosci BEZ tla — tylko bardzo cienki border */
#ksn-medytacje .med-insight{ background:transparent !important; }
#ksn-medytacje .med-insight:hover{ background:transparent !important; border-color:rgba(255,255,255,.55) !important; }
/* ==========================================================================
   MEDYTACJE — WAVE 53: tlo JASNIEJSZE (grafit byl za ciemny) -> cieply,
   sredni ton + tytuly w kaflach MINIMALISTYCZNE (czysty sans, bez Cormorant/italic).
   ========================================================================== */
#ksn-medytacje .wu-topics,
#ksn-medytacje .bg-soft.wu-topics,
#ksn-medytacje .bg-soft:has(.faq-list){
  background:linear-gradient(180deg, #9a6c5c 0%, #885a4b 55%, #70493a 100%) !important;
}
#ksn-medytacje .wu-topics::before{ opacity:.18 !important; }
/* tytuly kafli madrosci -> minimalistyczny sans (zamiast Cormorant italic) */
#ksn-medytacje .med-insight h3{
  font-family:'DM Sans', sans-serif !important;
  font-style:normal !important; font-weight:600 !important;
  font-size:19px !important; letter-spacing:-.01em !important; line-height:1.22 !important;
}
/* ==========================================================================
   MEDYTACJE — WAVE 54: PRAWDZIWY grain (ziarno jak na zdjeciu) z PNG noise +
   inne, jasniejsze tlo (stonowana szalwiowa zielen).
   ========================================================================== */
#ksn-medytacje .wu-topics,
#ksn-medytacje .bg-soft.wu-topics,
#ksn-medytacje .bg-soft:has(.faq-list){
  background:linear-gradient(180deg, #7e8c75 0%, #6b7a64 55%, #55634d 100%) !important;
}
#ksn-medytacje .wu-topics::before{
  background-image:url("../img/ksn-grain.png") !important;
  background-size:240px 240px !important; background-repeat:repeat !important;
  opacity:.6 !important; mix-blend-mode:overlay !important;
}
/* ==========================================================================
   MEDYTACJE — WAVE 55: grain SLABSZY (byl za mocny), zielone tlo zostaje;
   maly tag „Technika" nad tytulem metody (wyroznienie metod medytacji).
   ========================================================================== */
#ksn-medytacje .wu-topics::before{ opacity:.3 !important; }
#ksn-medytacje .med-insight-tag{
  display:inline-block; font-size:11px !important; font-weight:700 !important;
  letter-spacing:.14em !important; text-transform:uppercase;
  color:rgba(255,255,255,.62) !important; margin:0 0 9px !important;
}
/* ==========================================================================
   MEDYTACJE — WAVE 56: przejscie ZIELONA sekcja -> ZOLTE PAKIETY. Krzywa
   (.packs-hero-section::before) byla niebieska (#465f86, stary motyw) -> daje
   ja w kolorze DOLU zieleni, zeby zielone grain-tlo „wchodzilo pod" zolte.
   ========================================================================== */
#ksn-medytacje .packs-hero-section::before{
  background-color:#55634d !important;
  background-image:url("../img/ksn-grain.png") !important;
  background-size:240px 240px !important;
  background-repeat:repeat !important;
  background-blend-mode:soft-light !important;
}
/* ==========================================================================
   MEDYTACJE — WAVE 57: tlo sekcji „Rodzaje medytacji" z zieleni -> NIEBIESKI
   gradient; na dole OSTRZEJSZY, zywy niebieski. Krzywa przejscia pod zolte
   tez na ten ostry niebieski. Grain zostaje.
   ========================================================================== */
#ksn-medytacje .wu-topics,
#ksn-medytacje .bg-soft.wu-topics,
#ksn-medytacje .bg-soft:has(.faq-list){
  background:linear-gradient(180deg, #5a80b0 0%, #4571b6 50%, #2362cf 84%, #0f57d4 100%) !important;
}
#ksn-medytacje .packs-hero-section::before{ background-color:#0f57d4 !important; }
/* ==========================================================================
   MEDYTACJE — WAVE 58: krzywa przejscia (.packs-hero-section::before) — grain
   za mocny/inny niz sekcja wyzej. Lzejsze ziarno (ksn-grain-soft) + overlay,
   ten sam ostry niebieski -> krzywa nie odroznia sie od tla sekcji.
   ========================================================================== */
#ksn-medytacje .packs-hero-section::before{
  background-color:#0a3f9e !important;
  background-image:url("../img/ksn-grain-soft.png") !important;
  background-size:240px 240px !important;
  background-repeat:repeat !important;
  background-blend-mode:overlay !important;
}
/* ==========================================================================
   MEDYTACJE — WAVE 59: sekcja PAKIETY — kolor amber #ffbc1c, glowny tytul +
   lista korzysci na BIALO, tytul troche nizej. (checkmarki .pb-check bez zmian)
   ========================================================================== */
#ksn-medytacje .packs-hero-section{ background:#ffbc1c !important; }
#ksn-medytacje .packs-hero-content h2{ color:#ffffff !important; margin-top:28px !important; }
#ksn-medytacje .packs-benefits li{ color:#ffffff !important; }
/* delikatny niebieski gradient — sekcja tematow */
#ksn-medytacje .wu-topics,
#ksn-medytacje .bg-soft.wu-topics,
#ksn-medytacje .bg-soft:has(.faq-list){
  background:linear-gradient(180deg, #5f86b6 0%, #5179ae 100%) !important;
}
/* PAKIETY — ten sam niebieski (kontynuacja) + grain, ZERO zoltego */
#ksn-medytacje .packs-hero-section{
  background-color:#0a3f9e !important;
  background-image:url("../img/ksn-grain-soft.png"), linear-gradient(180deg, #5179ae 0%, #47699f 100%) !important;
  background-size:240px 240px, cover !important;
  background-repeat:repeat, no-repeat !important;
  background-blend-mode:overlay, normal !important;
}
/* krzywa-lip niepotrzebna (jeden kolor) */
#ksn-medytacje .packs-hero-section::before{ display:none !important; }
/* WAVE 61: drobny tekst pod opcjami (.packs-fine) byl ciemny -> bialy na niebieskim */
#ksn-medytacje .packs-fine{ color:rgba(255,255,255,.80) !important; }
/* ==========================================================================
   MEDYTACJE — WAVE 62: dolny niebieski blok (Rodzaje medytacji + FAQ + PAKIETY)
   dostaje NIEBO z CHMURKAMI jak hero (ksn-sky-clouds), ale subtelnie
   (blend soft-light), zeby biale napisy byly czytelne. Chmury u gory bloku
   (topics) i u dolu (packs). Grain zostaje.
   ========================================================================== */
#ksn-medytacje .wu-topics,
#ksn-medytacje .bg-soft.wu-topics,
#ksn-medytacje .bg-soft:has(.faq-list){
  background-color:#0a3f9e !important;
  background-image:
    url("../img/ksn-sky-clouds.png"),
    linear-gradient(180deg, #6f9bd2 0%, #5a82c2 100%) !important;
  background-size: cover, cover !important;
  background-position: center top, center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-blend-mode: soft-light, normal !important;
}
#ksn-medytacje .packs-hero-section{
  background-color:#0a3f9e !important;
  background-image:
    url("../img/ksn-grain-soft.png"),
    url("../img/ksn-sky-clouds.png"),
    linear-gradient(180deg, #6f9bd2 0%, #5a82c2 100%) !important;
  background-size: 240px 240px, cover, cover !important;
  background-position: 0 0, center bottom, center !important;
  background-repeat: repeat, no-repeat, no-repeat !important;
  background-blend-mode: overlay, soft-light, normal !important;
}
/* WAVE 62b: delikatny cien pod bialymi tytulami (czytelnosc nad chmurami, jak hero) */
#ksn-medytacje .wu-topics-head h2,
#ksn-medytacje .wu-faq-head h2,
#ksn-medytacje .packs-hero-content h2,
#ksn-medytacje .packs-benefits li{ text-shadow:0 2px 16px rgba(8,35,82,.28) !important; }
/* ==========================================================================
   MEDYTACJE — WAVE 63: JEDNO tlo dla calego dolnego bloku (wrapper
   .med-sky-block owija .wu-topics + .packs-hero-section). Niebo z chmurami +
   grain raz, ciagle -> brak ciecia na styku. Sekcje przezroczyste. Styk
   oddzielony tylko cieniutka kreska.
   ========================================================================== */
#ksn-medytacje .med-sky-block{
  position:relative;
  background-color:#5a82c2;
  background-image:
    url("../img/ksn-grain-soft.png"),
    url("../img/ksn-sky-clouds.png"),
    url("../img/ksn-sky-clouds.png"),
    linear-gradient(180deg, #6f9bd2 0%, #5d86c4 30%, #5179bb 72%, #4d75b6 100%);
  background-size: 240px 240px, 100% auto, 100% auto, cover;
  background-position: 0 0, center top, center bottom, center;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-blend-mode: overlay, soft-light, soft-light, normal;
}
/* sekcje przezroczyste -> jedno tlo wrappera (brak szwu) */
#ksn-medytacje .med-sky-block .wu-topics,
#ksn-medytacje .med-sky-block .bg-soft.wu-topics,
#ksn-medytacje .med-sky-block .bg-soft:has(.faq-list),
#ksn-medytacje .med-sky-block .packs-hero-section{ background:transparent !important; }
#ksn-medytacje .med-sky-block .wu-topics::before{ display:none !important; }
/* delikatna cieniutka kreska na styku FAQ -> PAKIETY */
#ksn-medytacje .med-sky-block .packs-hero-section{ border-top:1px solid rgba(255,255,255,.15) !important; }
/* ==========================================================================
   MEDYTACJE — WAVE 64: BARDZO delikatny grain na hero (banner u gory). Tylko
   desktop (::before na mobile = chmurka top-right). Mocno subtelny (opacity .12).
   ========================================================================== */
@media (min-width:769px){
#ksn-medytacje .med-hero{ position:relative; }
#ksn-medytacje .med-hero::before{
    content:'' !important; position:absolute !important; inset:0 !important;
    z-index:1 !important; pointer-events:none !important;
    background:url("../img/ksn-grain-soft.png") 0 0 / 200px 200px repeat !important;
    mix-blend-mode:overlay !important; opacity:.12 !important;
  }
}
/* ==========================================================================
   MEDYTACJE — WAVE 65: fix — chmury `100% auto` robily twarda krawedz (pasek
   w srodku bloku). Jedna warstwa chmur COVER (pokrywa caly wrapper, bez
   krawedzi), soft-light subtelnie. Bez bandingu/ciecia.
   ========================================================================== */
#ksn-medytacje .med-sky-block{
  background-image:
    url("../img/ksn-grain-soft.png"),
    url("../img/ksn-sky-clouds.png"),
    linear-gradient(180deg, #6f9bd2 0%, #5d86c4 45%, #5078ba 100%) !important;
  background-size: 240px 240px, cover, cover !important;
  background-position: 0 0, center center, center !important;
  background-repeat: repeat, no-repeat, no-repeat !important;
  background-blend-mode: overlay, soft-light, normal !important;
}
/* ==========================================================================
   MEDYTACJE — WAVE 66: dopracowanie dolu PAKIETOW. Zakonczenie BIALE (bylo
   kremowe != bialy newsletter), wiekszy margines u dolu, telefony bardziej
   jak mockupy (notch + glebszy cien), buzka = miekkie zlote slonce (w tpl).
   ========================================================================== */
#ksn-medytacje .packs-hero-section::after{ background:#ffffff !important; }
#ksn-medytacje .packs-hero-section{ padding-bottom:172px !important; }
#ksn-medytacje .packs-phone{ box-shadow:0 36px 70px rgba(10,25,60,.35) !important; }
#ksn-medytacje .packs-phone::before{
  content:''; position:absolute; top:10px; left:50%; transform:translateX(-50%);
  width:58px; height:15px; background:#1a1d28; border-radius:0 0 11px 11px; z-index:5;
}
/* ==========================================================================
   MEDYTACJE — WAVE 67: FIX skoku menu (deep). #header zablokowany absolute we
   WSZYSTKICH stanach modulu fixedheader; <body> NIE moze miec rezerwowanego
   padding/margin-top (zrodlo skoku contentu przy progu scrolla); ukryte
   ewentualne spacery/klony modulu. Zero transformacji/przejsc pozycji.
   ========================================================================== */
body.ksn-med-page #header,
body.ksn-med-page #header.header_omg_im_scrolled,
body.ksn-med-page #header.ksn-med-scrolled,
body.ksn-med-page #header.fixed,
body.ksn-med-page #header.sticky,
body.ksn-med-page #header.is-sticky,
body.ksn-med-page #header.header-fixed,
body.ksn-med-page #header.header-sticky-active{
  position:absolute !important; top:0 !important; left:0 !important; right:0 !important;
  width:100% !important; transform:none !important; transition:none !important; animation:none !important;
}
body.ksn-med-page,
body.header_omg_im_scrolled.ksn-med-page{ padding-top:0 !important; margin-top:0 !important; }
body.ksn-med-page .header-fixed-spacer,
body.ksn-med-page #fixedHeaderSpacer,
body.ksn-med-page .fixed-header-spacer,
body.ksn-med-page .fixedheader-clone,
body.ksn-med-page .header-clone,
body.ksn-med-page #header-clone{ display:none !important; height:0 !important; }
/* scroll-away: absolute, zero animacji/transformacji/przejsc pozycji */
body.ksn-med-page #header,
body.ksn-med-page #header.header_omg_im_scrolled,
body.ksn-med-page #header.ksn-med-scrolled,
body.ksn-med-page #header.header-sticky-active{
  position:absolute !important; top:0 !important; left:0 !important; right:0 !important;
  width:100% !important; transform:none !important; transition:none !important; animation:none !important;
}
/* >>> KLUCZ: zabij sticky-entrance „wjazd" na .ksn-header (to byl ten skok) <<< */
body.ksn-med-page #header .ksn-header,
body.ksn-med-page #header.header_omg_im_scrolled .ksn-header,
body.ksn-med-page #header.ksn-med-scrolled .ksn-header{
  animation:none !important; transform:none !important;
}
/* zadnych animowanych zmian wysokosci/paddingu naglowka przy scrollu */
body.ksn-med-page #header .header-top,
body.ksn-med-page #header .header-nav{ transition:none !important; }
body.ksn-med-page #header.header_omg_im_scrolled .header-top{ padding-top:0 !important; }
body.ksn-med-page #header.header_omg_im_scrolled .header-nav{ display:block !important; }
body.ksn-med-page{ padding-top:0 !important; margin-top:0 !important; }
/* tlo transparentne ZAWSZE (zero blysku niebieskiego) */
body.ksn-med-page #header,
body.ksn-med-page #header.header_omg_im_scrolled,
body.ksn-med-page #header.ksn-med-scrolled,
body.ksn-med-page #header .ksn-header,
body.ksn-med-page #header.header_omg_im_scrolled .ksn-header,
body.ksn-med-page #header.ksn-med-scrolled .ksn-header{ background:transparent !important; box-shadow:none !important; }
/* ==========================================================================
   MEDYTACJE — WAVE 71: KASACJA starych niebieskich regul naglowka (era
   „niebieskie menu pod chmurami": 11392 .ksn-header=#0162df ZAWSZE, 11776
   .is-scrolled, 11930/11960 .ksn-med-scrolled). Teraz menu ma byc PRZEZROCZYSTE
   nad chmurami w KAZDYM stanie i strukturze (tez ewentualny klon poza #header).
   ========================================================================== */
body.ksn-med-page .ksn-header,
body.ksn-med-page #header,
body.ksn-med-page #header.ksn-header,
body.ksn-med-page #header .ksn-header,
body.ksn-med-page .ksn-header.is-scrolled,
body.ksn-med-page #header.ksn-med-scrolled,
body.ksn-med-page #header.ksn-med-scrolled .ksn-header,
body.ksn-med-page #header.header_omg_im_scrolled,
body.ksn-med-page #header.header_omg_im_scrolled .ksn-header,
body.ksn-med-page .ksn-header-inner,
body.ksn-med-page .ksn-header-promo{
  background:transparent !important; background-color:transparent !important;
  box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
/* ==========================================================================
   MEDYTACJE — WAVE 72: FALLBACK BEZ :has() — kluczowe!
   PrestaShop laczy/minifikuje CSS (CCC) i potrafi POPSUC selektor `:has()` ->
   wtedy WSZYSTKIE reguly naglowka `body.ksn-med-page` przepadaja i zostaje
   domyslny NIEBIESKI motyw (a tresc #ksn-medytacje .xxx dziala => stad niebieskie
   menu mimo czystego cache). Klase `ksn-med-page` dorzuca JS na <html> i <body>,
   wiec te reguly NIE zaleza od :has(). Pokrywaja #header, .ksn-header, pasek
   motywu (.header-top/.header-nav) we wszystkich stanach.
   ========================================================================== */
html.ksn-med-page #header,
html.ksn-med-page #header.ksn-header,
html.ksn-med-page #header .ksn-header,
html.ksn-med-page .ksn-header,
html.ksn-med-page .ksn-header.is-scrolled,
html.ksn-med-page #header.ksn-med-scrolled,
html.ksn-med-page #header.ksn-med-scrolled .ksn-header,
html.ksn-med-page #header.header_omg_im_scrolled,
html.ksn-med-page #header.header_omg_im_scrolled .ksn-header,
html.ksn-med-page .ksn-header-inner,
html.ksn-med-page .ksn-header-promo,
html.ksn-med-page #header .header-top,
html.ksn-med-page #header .header-nav,
html.ksn-med-page #header > *{
  background:transparent !important; background-color:transparent !important;
  box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
/* naglowek scroll-away (absolute) + zero animacji wjazdu — tez bez :has() */
html.ksn-med-page #header,
html.ksn-med-page #header.header_omg_im_scrolled,
html.ksn-med-page #header.ksn-med-scrolled,
html.ksn-med-page #header.header-sticky-active{
  position:absolute !important; top:0 !important; left:0 !important; right:0 !important;
  width:100% !important; transform:none !important; transition:none !important; animation:none !important;
}
html.ksn-med-page #header .ksn-header,
html.ksn-med-page #header.header_omg_im_scrolled .ksn-header,
html.ksn-med-page #header.ksn-med-scrolled .ksn-header{ animation:none !important; transform:none !important; }
html.ksn-med-page{ }
/* (a) #header zawsze absolute + transparent + jego PASKI (nie przyciski!) */
html.ksn-med-page #header,
html.ksn-med-page #header.header_omg_im_scrolled,
html.ksn-med-page #header.ksn-med-scrolled,
html.ksn-med-page #header.header-sticky-active,
html.ksn-med-page #header.sticky,
html.ksn-med-page #header.fixed{
  position:absolute !important; top:0 !important; left:0 !important; right:0 !important;
  width:100% !important; transform:none !important; transition:none !important; animation:none !important;
  background:transparent !important; background-color:transparent !important; box-shadow:none !important;
}
html.ksn-med-page #header.header_omg_im_scrolled > *,
html.ksn-med-page #header.ksn-med-scrolled > *,
html.ksn-med-page #header > .header-top,
html.ksn-med-page #header > .header-nav,
html.ksn-med-page #header .header-top,
html.ksn-med-page #header .header-nav,
html.ksn-med-page #header [class*="header-top"],
html.ksn-med-page #header [class*="header-nav"]{
  background:transparent !important; background-color:transparent !important; box-shadow:none !important;
}
/* (b) ukryj KLON naglowka (typowe nazwy modulow sticky) */
html.ksn-med-page .fixedheader:not(#header),
html.ksn-med-page [class*="fixedheader"]:not(#header),
html.ksn-med-page [id*="fixedheader"]:not(#header),
html.ksn-med-page [class*="header-clone"],
html.ksn-med-page [class*="clone-header"],
html.ksn-med-page [class*="sticky-header"]:not(#header),
html.ksn-med-page [class*="header-sticky"]:not(#header),
html.ksn-med-page #header-clone,
html.ksn-med-page #sticky-header,
html.ksn-med-page #stickyHeader{ display:none !important; }
/* ==========================================================================
   MEDYTACJE — WAVE 74: FINAŁ. Diagnoza: stare niebieskie reguly to `:has()`
   (specyficznosc 1-1-1, ID z argumentu :has) — moje `html.ksn-med-page` (0-2-1,
   ZERO ID) je PRZEGRYWALY mimo !important. Stad niebieski nie znikal.
   Tu uzywam `:has()` (ma ID) na KONCU pliku -> wygrywa nad wszystkim.
   :has dziala na zywo (potwierdzone: body{blue} z :has sie stosowalo).
   ========================================================================== */
body.ksn-med-page #header,
body.ksn-med-page #header .ksn-header,
body.ksn-med-page .ksn-header,
body.ksn-med-page .ksn-header-inner,
body.ksn-med-page .ksn-header-promo,
body.ksn-med-page #header > .header-nav,
body.ksn-med-page #header .header-nav,
body.ksn-med-page #header.ksn-med-scrolled,
body.ksn-med-page #header.ksn-med-scrolled .ksn-header,
body.ksn-med-page #header.header_omg_im_scrolled,
body.ksn-med-page #header.header_omg_im_scrolled .ksn-header,
body.ksn-med-page #header.ksn-med-scrolled .header-nav{
  background:transparent !important; background-color:transparent !important; box-shadow:none !important;
}
/* naglowek ABSOLUTE (scroll-away, nie sticky) + zero animacji/skoku — przez :has */
body.ksn-med-page #header,
body.ksn-med-page #header.ksn-med-scrolled,
body.ksn-med-page #header.header_omg_im_scrolled,
body.ksn-med-page #header.header-sticky-active{
  position:absolute !important; top:0 !important; left:0 !important; right:0 !important; width:100% !important;
  transform:none !important; transition:none !important; animation:none !important;
}
body.ksn-med-page #header .ksn-header,
body.ksn-med-page #header.header_omg_im_scrolled .ksn-header{ animation:none !important; transform:none !important; }
/* ==========================================================================
   MEDYTACJE — WAVE 75: niebieski pasek "WRACA przy scrollu" = #ksn-header-spacer.
   Modul fixedheader.js tworzy <div id="ksn-header-spacer"> i ustawia mu inline
   height = wysokosc naglowka (rezerwa na fixed). Naglowek mamy ABSOLUTE
   (scroll-away, NIE fixed) -> spacer zbedny, a przezroczysty nad niebieskim
   <body>(#0162df) = niebieski pasek. Zabijamy go (CSS bije inline modulu).
   ========================================================================== */
body.ksn-med-page #ksn-header-spacer,
html.ksn-med-page #ksn-header-spacer{
  height:0 !important; min-height:0 !important; max-height:0 !important;
  display:none !important; visibility:hidden !important;
}
/* ==========================================================================
   MEDYTACJE — WAVE 76: ODTWARZACZ WARSTWOWY (głos + muzyka + 7 efektów)
   Duży toggle Muzyki + siatka 7 efektów (wielokrotny wybór). Granatowy ekran.
   ========================================================================== */
.player-content{ overflow-y:auto; -webkit-overflow-scrolling:touch; }
.player-mix{ width:100%; max-width:460px; margin:24px auto 8px; display:flex; flex-direction:column; gap:18px; }
/* ---- DUŻY TOGGLE MUZYKI ---- */
.player-music-toggle{
  display:flex; align-items:center; gap:14px; width:100%;
  padding:13px 15px; border-radius:18px; cursor:pointer; font:inherit;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  color:#eaf2ff; text-align:left;
  transition:background .25s, border-color .25s, box-shadow .25s, opacity .2s;
  -webkit-tap-highlight-color:transparent;
}
.player-music-toggle .pmt-icon{ flex:0 0 auto; width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:rgba(255,255,255,.10); color:#cfe0fa; }
.player-music-toggle .pmt-icon svg{ width:22px; height:22px; }
.player-music-toggle .pmt-text{ flex:1 1 auto; display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.player-music-toggle .pmt-title{ font-weight:600; font-size:16px; letter-spacing:.2px; }
.player-music-toggle .pmt-sub{ font-size:12px; opacity:.6; margin-top:2px; }
.player-music-toggle .pmt-switch{ flex:0 0 auto; width:46px; height:27px; border-radius:99px; background:rgba(255,255,255,.18); position:relative; transition:background .25s; }
.player-music-toggle .pmt-knob{ position:absolute; top:3px; left:3px; width:21px; height:21px; border-radius:50%; background:#fff; transition:left .25s; box-shadow:0 2px 6px rgba(0,0,0,.3); }
.player-music-toggle.is-on{ background:linear-gradient(135deg, rgba(92,150,236,.34), rgba(58,108,208,.24)); border-color:rgba(150,195,255,.55); box-shadow:0 8px 26px rgba(30,80,180,.26); }
.player-music-toggle.is-on .pmt-icon{ background:rgba(160,200,255,.26); color:#eef6ff; }
.player-music-toggle.is-on .pmt-switch{ background:#5b93ec; }
.player-music-toggle.is-on .pmt-knob{ left:22px; }
.player-music-toggle.is-disabled{ opacity:.38; pointer-events:none; }
/* ---- EFEKTY (7 niezależnych toggle) ---- */
.player-fx{ width:100%; }
.player-fx-label{ font-size:12px; letter-spacing:.5px; text-transform:uppercase; color:rgba(234,242,255,.58); margin:0 2px 11px; font-weight:600; }
.player-fx-label .player-fx-hint{ text-transform:none; letter-spacing:0; font-weight:400; opacity:.72; }
.player-fx-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.player-fx-btn{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:11px 4px 9px; border-radius:15px; cursor:pointer; font:inherit;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.13);
  color:#dce8fb; transition:background .2s, border-color .2s, color .2s, transform .1s, box-shadow .2s;
  -webkit-tap-highlight-color:transparent;
}
.player-fx-btn .pfx-ic{ width:28px; height:28px; display:grid; place-items:center; color:#c6d8f4; }
.player-fx-btn .pfx-ic svg{ width:23px; height:23px; }
.player-fx-btn .pfx-lb{ font-size:11.5px; font-weight:500; letter-spacing:.1px; white-space:nowrap; }
.player-fx-btn:hover{ background:rgba(255,255,255,.10); }
.player-fx-btn:active{ transform:scale(.95); }
.player-fx-btn.is-on{
  background:linear-gradient(160deg, rgba(95,155,240,.36), rgba(55,105,205,.26));
  border-color:rgba(150,195,255,.6); color:#fff; box-shadow:0 6px 20px rgba(30,80,180,.28);
}
.player-fx-btn.is-on .pfx-ic{ color:#eef6ff; }
@media (max-width:520px){
.player-mix{ max-width:100%; }
.player-fx-grid{ grid-template-columns:repeat(4,1fr); gap:8px; }
.player-fx-btn .pfx-lb{ font-size:10.5px; }
}
/* (1) TYTUŁ — cieńszy, bardziej elegancki krój */
#ksn-medytacje .player-title{
  font-family:'Cormorant','Cormorant Garamond',serif !important;
  font-weight:500 !important; font-style:italic !important;
  font-size:clamp(34px,5.8vw,54px) !important; letter-spacing:.6px !important;
  line-height:1.08 !important; margin-bottom:28px !important;
  text-shadow:0 2px 24px rgba(2,28,86,.45) !important;
}
/* (2) LAYOUT — start od góry + przewijanie => nic się nie ściska na niższych ekranach */
#ksn-medytacje .player-content{
  justify-content:flex-start !important;
  padding:60px 24px 52px !important; gap:0 !important;
  overflow-y:auto !important; -webkit-overflow-scrolling:touch;
}
/* orb nieco mniejszy -> więcej powietrza */
#ksn-medytacje .player-timer{
  width:min(54vw,232px) !important; height:min(54vw,232px) !important;
  margin:0 auto !important; flex:0 0 auto;
}
#ksn-medytacje .player-timer-text{ margin-top:16px !important; margin-bottom:0 !important; flex:0 0 auto; }
/* PLAY — stały rozmiar (nie może zwinąć się do 0) + wyraźne powietrze nad i pod */
#ksn-medytacje .player-main-btn{
  width:84px !important; height:84px !important; flex:0 0 84px !important;
  min-height:84px !important; margin:22px auto 0 !important; position:relative; padding:0 !important;
}
#ksn-medytacje .player-main-btn svg{ width:30px !important; height:30px !important; }
/* miks (muzyka+efekty) — wyraźny odstęp od play */
#ksn-medytacje .player-mix, .player-mix{ margin:28px auto 0 !important; flex:0 0 auto; }
/* (3) WIĘKSZE / ŁADNIEJSZE IKONY */
.player-fx-grid{ gap:11px !important; }
.player-fx-btn{ padding:14px 6px 12px !important; gap:9px !important; border-radius:16px !important; }
.player-fx-btn .pfx-ic{ width:34px !important; height:34px !important; }
.player-fx-btn .pfx-ic svg{ width:31px !important; height:31px !important; stroke-width:1.6 !important; }
.player-fx-btn .pfx-lb{ font-size:12px !important; font-weight:500 !important; }
.player-music-toggle{ padding:15px 16px !important; }
.player-music-toggle .pmt-icon{ width:48px !important; height:48px !important; }
.player-music-toggle .pmt-icon svg{ width:26px !important; height:26px !important; }
.player-music-toggle .pmt-title{ font-size:17px !important; }
@media (max-width:520px){
.player-fx-btn .pfx-ic{ width:32px !important; height:32px !important; }
.player-fx-btn .pfx-ic svg{ width:29px !important; height:29px !important; }
}
/* WAVE 77b: NAPRAWA animacji wejścia — stara `playerBtnPop` (scale(0), delay 1.15s)
   zostawiała play niewidoczny na scale(0); timer też się skalował. Play + timer
   od razu widoczne (orb oddycha osobno, niezależnie). Koniec znikania/dziur. */
#ksn-medytacje .player-modal .player-main-btn{ opacity:1 !important; transform:none !important; }
#ksn-medytacje .player-modal.is-open .player-main-btn{ animation:none !important; }
#ksn-medytacje .player-modal .player-timer{ opacity:1 !important; transform:none !important; }
#ksn-medytacje .player-modal.is-open .player-timer{ animation:none !important; }
/* WAVE 78: tytuł odtwarzacza — BEZ kursywy, delikatna nowoczesna czcionka (Jost light) */
#ksn-medytacje .player-title{
  font-family:'Jost', sans-serif !important;
  font-weight:300 !important; font-style:normal !important;
  font-size:clamp(27px,4.4vw,41px) !important; letter-spacing:.2px !important;
  line-height:1.14 !important; text-shadow:0 2px 22px rgba(2,28,86,.4) !important;
}
/* WAVE 79: MOBILE — płynniejszy scroll. Wyłącz drogą kompozycję mix-blend-mode
   (grain `.wu-topics::before` komponowany względem tła przy każdej klatce scrolla).
   Główny fix zacięć jest w JS (usunięty unstick + cache progu hero); to dokłada
   płynności na słabszych telefonach. Desktop bez zmian. */
@media (max-width:768px){
#ksn-medytacje .wu-topics::before{ display:none !important; }
}
/* modal ZAWSZE w drzewie (display:block) — chowany przez visibility+opacity, więc
   transition odpala się NIEZAWODNIE. Z display:none przejście się nie animuje i
   zacinało na klatce startowej (content zostawał opacity:0 = niewidoczny). */
#ksn-medytacje .player-modal{
  display:block !important; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .42s ease, visibility 0s linear .42s !important;
}
#ksn-medytacje .player-modal.is-open{
  opacity:1 !important; visibility:visible !important; pointer-events:auto !important;
  transition:opacity .42s ease !important;
}
/* content delikatnie wjeżdża i osiada (jako całość — bez staggeru, który się zacinał) */
#ksn-medytacje .player-content{
  opacity:0; transform:translateY(30px) scale(.965);
  transition:opacity .5s ease .06s, transform .62s cubic-bezier(.16,.84,.3,1) .06s;
  will-change:transform, opacity;
}
#ksn-medytacje .player-modal.is-open .player-content{ opacity:1; transform:none; }
/* WAVE 80b: scroll na mobile „ciągnie się i wraca" = elastyczny overscroll.
   Ograniczamy łańcuchowanie/bounce (bez blokowania normalnego scrolla). */
html.ksn-med-page{ overscroll-behavior-y:contain; }
body.ksn-med-page{ overscroll-behavior-y:contain; }
/* ==========================================================================
   MEDYTACJE — WAVE 81: mobile scroll "ciagnie sie i wraca" = hero w vh.
   min-height:88vh zmienia sie na telefonie przy chowaniu/pokazywaniu paska
   adresu (kazdy gest scrolla = inna wysokosc hero = przesuniecie CALEJ tresci
   pod palcem + relayout). svh (small viewport height) jest STALE — liczone od
   najmniejszego viewportu, pasek adresu go nie rusza. Desktop: svh == vh.
   Fallback: starsze przegladarki zostaja na 88vh (dzialaja jak dotad).
   Do tego JS: --ksnHeadH i prog scrolla NIE przeliczaja sie juz na resize
   wywolanym paskiem adresu (tylko przy zmianie szerokosci okna).
   ========================================================================== */
@supports (min-height: 100svh){
#ksn-medytacje .med-hero{ min-height:88svh; }
}
/* 1. odstep etykieta -> kafle efektow (bylo 11px) */
.player-fx-label{ margin:0 2px 22px !important; }
/* 2. suwak glosnosci muzyki */
.player-music-vol{ display:flex; align-items:center; gap:12px; padding:12px 8px 0; }
.player-music-vol .pmv-ic{ width:19px; height:19px; color:rgba(234,242,255,.7); flex:0 0 auto; }
.player-music-vol input[type=range]{
  flex:1; -webkit-appearance:none; appearance:none; height:4px; border-radius:99px;
  background:rgba(255,255,255,.22); outline:none; cursor:pointer;
}
.player-music-vol input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:17px; height:17px; border-radius:50%;
  background:#fff; border:0; box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.player-music-vol input[type=range]::-moz-range-thumb{ width:17px; height:17px; border-radius:50%; background:#fff; border:0; }
.player-music-vol input[type=range]::-moz-range-track{ height:4px; border-radius:99px; background:rgba(255,255,255,.22); }
/* brak dedykowanej muzyki -> chowamy tez suwak */
.player-music-toggle.is-disabled + .player-music-vol{ display:none; }
/* 3. przycisk "Rozpocznij" na karcie (pigulka jak w wakingup) */
#ksn-medytacje .med-start-btn{
  display:block; width:100%; margin-top:12px; padding:13px 18px;
  border:0; border-radius:999px; cursor:pointer;
  background:#0162df; color:#fff;
  font-family:inherit; font-size:15px; font-weight:600; letter-spacing:.2px; line-height:1;
  transition:background .18s ease, transform .12s ease, box-shadow .18s ease;
  box-shadow:none;
}
#ksn-medytacje .med-start-btn:hover{ background:#0a52c0; transform:translateY(-1px); }
#ksn-medytacje .med-start-btn:active{ transform:translateY(0); }
/* ==========================================================================
   MEDYTACJE — WAVE 83: przewijanie -5s / +5s po bokach duzego play/pause.
   ========================================================================== */
.player-controls{ display:flex; align-items:center; justify-content:center; gap:26px; }
.player-skip-btn{
  width:54px; height:54px; border-radius:50%; flex:0 0 auto;
  border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.06);
  color:#eaf2ff; cursor:pointer; display:grid; place-items:center;
  transition:background .18s ease, border-color .18s ease, transform .12s ease;
  -webkit-tap-highlight-color:transparent;
}
.player-skip-btn svg{ width:27px; height:27px; display:block; }
.player-skip-btn:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.5); }
.player-skip-btn:active{ transform:scale(.93); }
@media (max-width:560px){
.player-controls{ gap:20px; }
.player-skip-btn{ width:48px; height:48px; }
.player-skip-btn svg{ width:24px; height:24px; }
}
/* ==========================================================================
   MEDYTACJE — WAVE 84: MOBILE SCROLL, przyczyna zrodlowa.
   (1) 171 regul `body:has(#ksn-medytacje)` (era "przezroczystego menu")
       zamieniono na `body.ksn-med-page` — klase dodaje skrypt na poczatku
       partiala (html i body). :has() z argumentem-ID zmusza przegladarke
       do drogiej re-ewaluacji przy mutacjach DOM w trakcie scrolla
       (reveal, toggle klas naglowka) na calym arkuszu ~13.5k linii.
       Selektory dzialaja identycznie, cascade wg kolejnosci w pliku.
   (2) Dekoracyjne nieskonczone animacje zatrzymane na mobile —
       kompozytor ma renderowac tylko scroll, nie wieczne float/breathe.
   ========================================================================== */
@media (max-width:768px){
#ksn-medytacje .med-dot,
  #ksn-medytacje .med-dot-1, #ksn-medytacje .med-dot-2, #ksn-medytacje .med-dot-3{ display:none !important; }
#ksn-medytacje .animate-breathe, #ksn-medytacje .animate-float, #ksn-medytacje .animate-wiggle{ animation:none !important; }
#ksn-medytacje .med-hero-ring{ display:none !important; }
}
/* ==========================================================================
   MEDYTACJE — WAVE 85: ZAMKNIETY player renderowal sie CALY CZAS.
   Modal to display:block + visibility:hidden (potrzebne dla animacji wejscia),
   ale visibility:hidden NIE zatrzymuje animacji CSS — orb (plBreath infinite)
   mielil kompozytor przy kazdej klatce scrolla, w pelnoekranowej fixed
   warstwie z-index 1000000. Zmierzone probe'em: po tym fixie 0 nieskonczonych
   animacji na stronie. Po otwarciu (.is-open) wszystko startuje od zera,
   wiec animacja wejscia i oddech orba dzialaja jak dotad.
   ========================================================================== */
.player-modal:not(.is-open) *,
.player-modal:not(.is-open)::before,
.player-modal:not(.is-open)::after{ animation:none !important; }
.player-modal:not(.is-open){ content-visibility:hidden; }
/* postac w sekcji pakietow: wieczny float niepotrzebny na mobile */
@media (max-width:768px){
#ksn-medytacje .packs-character{ animation:none !important; }
}
/* ==========================================================================
   MEDYTACJE — WAVE 86: MOBILE "scroll dziala tylko przy logo".
   Linia ~9245 dala #ksn-medytacje{overflow-x:hidden} — a hidden na jednej osi
   WYMUSZA overflow-y:auto => wrapper CALEJ tresci (wszystko poza naglowkiem!)
   stawal sie scroll-kontenerem bez niczego do przewijania. Na Androidzie
   (+ overscroll-behavior:contain) gest zaczety w takim kontenerze potrafi nie
   przejsc do przewijania strony => scroll dzialal tylko na naglowku (poza
   wrapperem). FIX: overflow-x:clip — przycina tak samo (chmura 155% nie
   rozpycha strony; zmierzone: scrollWidth=viewport), ale wg spec NIE tworzy
   scroll-kontenera (overflow-y zostaje visible).
   ========================================================================== */
#ksn-medytacje{ overflow-x: clip !important; overflow-y: visible !important; }
/* ==========================================================================
   MEDYTACJE — WAVE 87: suwak glosnosci nie dzialal na MOBILE.
   Suwak lezy w przewijalnym .player-content — przegladarka interpretowala
   przeciagniecie kciukiem jako scroll kontenera, nie ruch suwaka.
   touch-action:none na inpucie oddaje gest suwakowi. Do tego wiekszy kciuk
   i wyzszy obszar dotyku na telefonie.
   ========================================================================== */
.player-music-vol input[type=range]{ touch-action:none; }
@media (max-width:768px){
.player-music-vol{ padding-top:16px; }
.player-music-vol input[type=range]{ height:6px; }
.player-music-vol input[type=range]::-webkit-slider-thumb{ width:24px; height:24px; }
.player-music-vol input[type=range]::-moz-range-thumb{ width:24px; height:24px; }
}
/* ==========================================================================
   MEDYTACJE — WAVE 88: FLASH "kwadratu" przy odswiezeniu.
   Klasa ksn-med-page laduje ze skryptu w partialu — na wolniejszym telefonie
   pierwsze malowanie umie ja wyprzedzic (tresc w waskim pudle przez ulamek
   sekundy). Duplikat SAMEGO SZKIELETU strony na body:has(#ksn-medytacje) —
   :has aplikuje sie w chwili sparsowania diva, przed malowaniem. Jeden blok
   (9 regul) to nie 171: koszt pomijalny, reszta zostaje na klasie.
   Zawiera tez zmienne --wu-* (bez nich tlo/kolory czekaly na klase).
   ========================================================================== */
body:has(#ksn-medytacje){
  --wu-blue-top:#0162df; --wu-blue:#1f7ae6; --wu-blue-soft:#5cc1f7; --wu-sky-pale:#bdecfc;
  --wu-slate:#5e84ad; --wu-paper:#ededeb; --wu-paper2:#f5f4f2; --wu-ink:#10151d; --wu-ink-soft:#525760;
  --wu-card:#ffffff; --wu-onblue:#ffffff; --wu-onblue-soft:rgba(255,255,255,.84);
  --wu-glass:rgba(255,255,255,.16); --wu-glass-line:rgba(255,255,255,.34);
  background:#0162df !important; padding-top:0 !important; margin-top:0 !important;
}
body:has(#ksn-medytacje) nav.breadcrumb[data-depth],
body:has(#ksn-medytacje) .page-header{ display:none !important; }
body:has(#ksn-medytacje) .container:has(#content-wrapper){ max-width:100% !important; width:100% !important; padding-left:0 !important; padding-right:0 !important; }
body:has(#ksn-medytacje) .row:has(#content-wrapper){ margin-left:0 !important; margin-right:0 !important; }
body:has(#ksn-medytacje) #content-wrapper{ padding:0 !important; }
body:has(#ksn-medytacje) #main{ padding:0 !important; margin:0 !important; background:transparent !important; }
body:has(#ksn-medytacje) #wrapper{ padding-top:0 !important; }
body:has(#ksn-medytacje) #header{ position:absolute !important; top:0 !important; background:transparent !important; box-shadow:none !important; z-index:9999; }
body:has(#ksn-medytacje) .ksn-header{ background:transparent !important; box-shadow:none !important; }
/* ==========================================================================
   MEDYTACJE — WAVE 89: wieksze przyciski -5/+5 + czytelna cyfra (ikony
   w stylu YouTube: material replay/forward, cyfra w srodku luku).
   ========================================================================== */
.player-skip-btn{ width:60px; height:60px; }
.player-skip-btn svg{ width:32px; height:32px; }
@media (max-width:560px){
.player-controls{ gap:22px; }
.player-skip-btn{ width:54px; height:54px; }
.player-skip-btn svg{ width:29px; height:29px; }
}
/* ==========================================================================
   MEDYTACJE — WAVE 90: suwak glosnosci muzyki z animacjami.
   Wypelniony tor (--val z JS), kciuk rosnie przy dotyku z poswiata,
   dymek % nad kciukiem podczas przeciagania, glosnik przekresla sie przy 0.
   ========================================================================== */
.player-music-vol{ padding:14px 8px 0; }
.player-music-vol .pmv-ic{ transition:opacity .25s ease; }
.player-music-vol.is-muted .pmv-ic{ opacity:.45; }
.player-music-vol .pmv-mute{ opacity:0; transition:opacity .2s ease; }
.player-music-vol.is-muted .pmv-mute{ opacity:1; }
.player-music-vol.is-muted .pmv-wave{ opacity:0; }
/* wejscie: dluzszy, miekki fade calego ekranu */
.player-modal{ transition:opacity .85s cubic-bezier(.22,1,.36,1), visibility 0s linear .85s; }
.player-modal.is-open{ transition:opacity .85s cubic-bezier(.22,1,.36,1), visibility 0s; }
/* tresc: subtelne osadzenie z 104.5% do 100% */
.player-modal .player-content{
  transform:scale(1.045);
  opacity:0;
  transition:transform .95s cubic-bezier(.22,1,.36,1), opacity .75s ease;
}
.player-modal.is-open .player-content{ transform:scale(1); opacity:1; }
/* zamkniecie: fade + lekkie cofniecie skali */
.player-modal.is-closing{ opacity:0 !important; transition:opacity .6s ease, visibility 0s linear .6s; }
.player-modal.is-closing .player-content{
  transform:scale(.97); opacity:0;
  transition:transform .6s cubic-bezier(.4,0,.2,1), opacity .5s ease;
}
/* X: obrot na hover, przy zamykaniu krecac znika */
.player-close-x{ transition:transform .35s cubic-bezier(.22,1,.36,1), opacity .3s ease; }
.player-close-x:hover{ transform:rotate(90deg); }
.player-modal.is-closing .player-close-x{ transform:rotate(90deg) scale(.7); opacity:0; }
/* ==========================================================================
   MEDYTACJE — WAVE 92: notka per-medytacja w playerze (np. "dluga -> wlacz muzyke").
   Sterowana data-note na .med-play-btn; pokazywana nad przelacznikiem muzyki.
   ========================================================================== */
.player-note{
  display:flex; align-items:flex-start; gap:9px;
  margin:0 auto 16px; max-width:460px; width:100%;
  padding:11px 14px; border-radius:14px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  color:rgba(234,242,255,.9); font-size:13.5px; line-height:1.45; text-align:left;
}
.player-note[hidden]{ display:none; }
.player-note::before{
  content:''; flex:0 0 auto; width:17px; height:17px; margin-top:1px;
  background:currentColor; opacity:.85;
  -webkit-mask:no-repeat center/contain; mask:no-repeat center/contain;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='11' x2='12' y2='16'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='11' x2='12' y2='16'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
}
/* ciemna baza zamiast statycznego niebieskiego gradientu */
#ksn-medytacje .player-modal{ background:#061024 !important; }
/* tresc nad aurora */
#ksn-medytacje .player-modal > .player-topbar,
#ksn-medytacje .player-modal > .player-content{ position:relative; z-index:1; }
#ksn-medytacje .player-aurora{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  background:#061024;
}
#ksn-medytacje .player-aurora::before,
#ksn-medytacje .player-aurora::after{
  content:''; position:absolute; inset:-35%;
  background-repeat:no-repeat; will-change:transform;
}
/* warstwa A: granat + morski, dryf w prawo-dol */
#ksn-medytacje .player-aurora::before{
  background:
    radial-gradient(42% 46% at 24% 26%, rgba(23,86,168,.92), transparent 68%),
    radial-gradient(40% 44% at 82% 80%, rgba(11,86,104,.85), transparent 68%);
  filter:blur(14px);
  animation:ksnAuroraA 32s ease-in-out infinite alternate;
}
/* warstwa B: fiolet + indygo, dryf w lewo-gore (inne tempo) + screen do zlania kolorow */
#ksn-medytacje .player-aurora::after{
  background:
    radial-gradient(38% 44% at 80% 20%, rgba(72,44,140,.82), transparent 68%),
    radial-gradient(44% 50% at 18% 84%, rgba(16,50,124,.88), transparent 68%);
  filter:blur(16px); mix-blend-mode:screen;
  animation:ksnAuroraB 41s ease-in-out infinite alternate;
}
/* subtelny scrim u gory/dolu (czytelnosc topbara i tresci na jasniejszych plamach) */
#ksn-medytacje .player-aurora{
  box-shadow:inset 0 90px 120px -40px rgba(4,10,26,.7), inset 0 -120px 150px -40px rgba(4,10,26,.75);
}
@media (prefers-reduced-motion:reduce){
#ksn-medytacje .player-aurora::before,
  #ksn-medytacje .player-aurora::after{ animation:none !important; }
}
/* ==========================================================================
   MEDYTACJE — WAVE 94: PREMIUM aurora. 4 ciemne plamy koloru (indygo, morski,
   fiolet, ocean) dryfuja i "oddychaja" niezaleznie z roznych rogow (screen
   blend -> swietliste zlania), + subtelne ziarno filmowe + winieta. Zastepuje
   proste ::before/::after z WAVE 93. Animuje TYLKO gdy modal otwarty.
   ========================================================================== */
#ksn-medytacje .player-aurora::before,
#ksn-medytacje .player-aurora::after{ content:none !important; display:none !important; }
#ksn-medytacje .player-aurora{ background:#04070f !important; box-shadow:none !important; }
#ksn-medytacje .player-aurora .aur{
  position:absolute; inset:-30%; pointer-events:none;
  mix-blend-mode:screen; filter:blur(8px);
  will-change:transform, opacity;
}
#ksn-medytacje .player-aurora .aur-1{
  background:radial-gradient(circle at 50% 50%, rgba(30,72,160,.9), transparent 58%);
  animation:ksnAur1 30s ease-in-out infinite alternate;
}
#ksn-medytacje .player-aurora .aur-2{
  background:radial-gradient(circle at 50% 50%, rgba(12,116,98,.86), transparent 58%);
  animation:ksnAur2 43s ease-in-out infinite alternate;
}
#ksn-medytacje .player-aurora .aur-3{
  background:radial-gradient(circle at 50% 50%, rgba(104,46,156,.82), transparent 58%);
  animation:ksnAur3 37s ease-in-out infinite alternate;
}
#ksn-medytacje .player-aurora .aur-4{
  background:radial-gradient(circle at 50% 50%, rgba(124,40,98,.72), transparent 58%);
  animation:ksnAur4 51s ease-in-out infinite alternate;
}
/* ziarno filmowe — premium tekstura, statyczne (bez rozpraszania) */
#ksn-medytacje .player-aurora .aur-grain{
  position:absolute; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}
/* winieta — glebia + czytelnosc tekstu (ciemniejsze brzegi) */
#ksn-medytacje .player-aurora .aur-vign{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(130% 115% at 50% 40%, transparent 42%, rgba(3,7,18,.5) 80%, rgba(2,5,14,.78) 100%),
    linear-gradient(180deg, rgba(3,7,18,.42) 0%, transparent 22%, transparent 74%, rgba(2,5,14,.5) 100%);
}
@media (prefers-reduced-motion:reduce){
#ksn-medytacje .player-aurora .aur{ animation:none !important; }
}
/* ==========================================================================
   MEDYTACJE — WAVE 95: karty (grupy filtra Sen/Relaks/Lęk) w JEDNEJ LINII
   z poziomym przewijaniem — kolejna karta delikatnie wystaje z prawej
   (sygnal "przewin"), zamiast zawijac sie do drugiego rzedu. Snap + cienki
   pasek. Filtr (.is-hidden) nietkniety. Featured wu-card-row-3 zostaje siatka.
   ========================================================================== */
#ksn-medytacje .wu-card-row[data-tab-group]:not(.is-hidden){
  display:flex; gap:24px;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scroll-padding-left:2px;
  padding:6px 2px 16px;      /* oddech + miejsce na pasek */
  --vis:4.3;                  /* ile kart widocznych (4 pelne + peek) */
  scrollbar-width:thin; scrollbar-color:rgba(20,60,120,.5) transparent;
}
#ksn-medytacje .wu-card-row[data-tab-group] > .med-card{
  flex:0 0 calc((100% - (var(--vis) - 1) * 24px) / var(--vis));
  scroll-snap-align:start;
}
#ksn-medytacje .wu-card-row[data-tab-group]::-webkit-scrollbar{ height:7px; }
#ksn-medytacje .wu-card-row[data-tab-group]::-webkit-scrollbar-track{ background:transparent; }
#ksn-medytacje .wu-card-row[data-tab-group]::-webkit-scrollbar-thumb{
  background:rgba(20,60,120,.45); border-radius:99px;
}
#ksn-medytacje .wu-card-row[data-tab-group]::-webkit-scrollbar-thumb:hover{ background:rgba(20,60,120,.7); }
@media (max-width:980px){
#ksn-medytacje .wu-card-row[data-tab-group]:not(.is-hidden){ --vis:2.3; }
}
@media (max-width:600px){
#ksn-medytacje .wu-card-row[data-tab-group]:not(.is-hidden){ --vis:1.15; gap:16px; }
}
/* ==========================================================================
   MEDYTACJE — WAVE 96: ukryty pasek + STRZALKI < > (desktop) do przewijania
   karuzeli kart. Znikaja na krancach; na mobile schowane (tam swipe + peek).
   Pozycja pionowa = srodek okladki (JS ustawia --arrowTop).
   ========================================================================== */
#ksn-medytacje .wu-card-rows{ position:relative; }
/* ukryj pasek (nadpisuje cienki z WAVE 95) */
#ksn-medytacje .wu-card-row[data-tab-group]:not(.is-hidden){ scrollbar-width:none; }
#ksn-medytacje .wu-card-row[data-tab-group]::-webkit-scrollbar{ display:none !important; height:0 !important; width:0 !important; }
/* strzalki */
#ksn-medytacje .wu-arrow{
  position:absolute; top:var(--arrowTop,150px); transform:translateY(-50%);
  z-index:6; width:46px; height:46px; border-radius:50%;
  border:1px solid rgba(16,21,29,.08); background:rgba(255,255,255,.96);
  box-shadow:0 8px 22px rgba(16,21,29,.18);
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:#12305e;
  transition:opacity .22s ease, transform .14s ease, background .2s ease, box-shadow .2s ease;
}
#ksn-medytacje .wu-arrow svg{ width:22px; height:22px; }
#ksn-medytacje .wu-arrow-prev{ left:6px; }
#ksn-medytacje .wu-arrow-next{ right:6px; }
#ksn-medytacje .wu-arrow:hover{ background:#fff; transform:translateY(-50%) scale(1.07); box-shadow:0 10px 26px rgba(16,21,29,.24); }
#ksn-medytacje .wu-arrow:active{ transform:translateY(-50%) scale(.96); }
#ksn-medytacje .wu-arrow[disabled]{ opacity:0; pointer-events:none; }
@media (max-width:768px){
#ksn-medytacje .wu-arrow{ display:none !important; }
}
/* ==========================================================================
   MEDYTACJE — WAVE 97: strzalki POZA kartami (boczne gutter) + miekkie
   zanikanie krawedzi paska (zamiast twardego uciecia). Prawa krawedz gasnie
   mocniej (sygnal "jest wiecej"), lewa subtelnie. Mobile: gutter off, strzalki
   i tak schowane; maska zostaje (ladny miekki brzeg pod palcem).
   ========================================================================== */
#ksn-medytacje .wu-card-rows{ padding-left:58px; padding-right:58px; }
@media (max-width:768px){
#ksn-medytacje .wu-card-rows{ padding-left:0; padding-right:0; }
}
/* miekkie krawedzie paska */
#ksn-medytacje .wu-card-row[data-tab-group]:not(.is-hidden){
  -webkit-mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 46px), transparent 100%);
          mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 46px), transparent 100%);
}
/* strzalki: nieco wieksze i czytelniejsze skoro sa w gutterze */
#ksn-medytacje .wu-arrow{ width:48px; height:48px; }
#ksn-medytacje .wu-arrow-prev{ left:2px; }
#ksn-medytacje .wu-arrow-next{ right:2px; }
/* ==========================================================================
   MEDYTACJE — WAVE 98: strzalki POD paskiem (do prawej) zamiast na kartach.
   Cofa guttery WAVE 97 -> karty wracaja do pelnej szerokosci. Miekkie
   zanikanie krawedzi (WAVE 97 mask) zostaje. Strzalki dimmed na krancach,
   caly rzad chowa sie gdy nie ma czego przewijac. Mobile: swipe (bez strzalek).
   ========================================================================== */
#ksn-medytacje .wu-card-rows{
  display:flex; flex-direction:column;
  padding-left:0 !important; padding-right:0 !important;   /* pelna szerokosc kart */
}
#ksn-medytacje .wu-card-rows > .wu-card-row{ order:0; }
#ksn-medytacje .wu-arrows{
  order:1; display:flex; justify-content:flex-end; align-items:center; gap:12px; margin-top:20px;
}
#ksn-medytacje .wu-arrows.is-nocarousel{ display:none; }
#ksn-medytacje .wu-arrow{
  position:static !important; top:auto !important; transform:none !important;
  width:44px; height:44px;
  background:#fff; border:1px solid rgba(16,21,29,.1); color:#12305e;
  box-shadow:0 4px 14px rgba(16,21,29,.1);
}
#ksn-medytacje .wu-arrow:hover{ transform:scale(1.08) !important; background:#fff; box-shadow:0 6px 18px rgba(16,21,29,.16); }
#ksn-medytacje .wu-arrow:active{ transform:scale(.95) !important; }
#ksn-medytacje .wu-arrow[disabled]{ opacity:.3; pointer-events:none; box-shadow:none; }
@media (max-width:768px){
#ksn-medytacje .wu-arrows{ display:none !important; }
}
/* ==========================================================================
   MEDYTACJE — WAVE 100: precz z blurem krawedzi (brzydki, zwl. mobile).
   Zamiast tego na TELEFONIE karuzela idzie na CALA SZEROKOSC EKRANU (full-bleed)
   -> karta ucina sie przy samej krawedzi ekranu, naturalnie (jak Spotify/IG),
   a nie w losowym miejscu w marginesie. Desktop: czysty peek + strzalki pod.
   ========================================================================== */
#ksn-medytacje .wu-card-row[data-tab-group]:not(.is-hidden){
  -webkit-mask-image:none !important; mask-image:none !important;
}
@media (max-width:768px){
#ksn-medytacje .wu-card-row[data-tab-group]:not(.is-hidden){
    margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
    padding-left:18px; padding-right:18px; scroll-padding-left:18px;
  }
#ksn-medytacje .wu-card-row[data-tab-group] > .med-card{ flex:0 0 80vw !important; max-width:80vw; }
}
/* ==========================================================================
   MEDYTACJE — WAVE 101: powrot do NIEBIESKIEGO tla modala (user: "bylo spoko").
   Aurora (W93/94) wylaczona w calosci — zero animacji tla, zero kosztu.
   ========================================================================== */
#ksn-medytacje .player-modal{
  background: radial-gradient(120% 72% at 50% 4%, #14529e 0%, #0c4088 40%, #082f6c 72%, #051f4d 100%) !important;
}
#ksn-medytacje .player-aurora{ display:none !important; }
/* ==========================================================================
   MEDYTACJE — WAVE 102: FLASH przy wejsciu (rozowy promo + niebieski pas).
   Zmierzone probe'em: okno "div sparsowany, klasa ksn-med-page jeszcze nie"
   pokazywalo promo-bar i przesuniety header (klasa chowajaca promo byla TYLKO
   class-keyed). Uzupelnienie bloku krytycznego :has() o brakujacy szkielet —
   aplikuje sie w momencie parsowania, przed pierwszym malowaniem.
   ========================================================================== */
body:has(#ksn-medytacje) .ksn-header-promo{ display:none !important; }
body:has(#ksn-medytacje) .ksn-header-inner,
body:has(#ksn-medytacje) #header .header-top,
body:has(#ksn-medytacje) #header .header-nav,
body:has(#ksn-medytacje) #header > *{
  background:transparent !important; background-color:transparent !important;
  box-shadow:none !important;
}
body:has(#ksn-medytacje) #header .header-top{ padding-top:0 !important; }
/* logo od razu koralowe (JS podmienia pozniej — bez flasha kolorowego) */
body:has(#ksn-medytacje) .ksn-nav-logo img{ content:url("/themes/classic/assets/img/ksn-logo-ksn.png"); }
/* ==========================================================================
   MEDYTACJE — WAVE 103: drag-to-scroll myszka na karuzelach (desktop).
   Kursor lapki; podczas ciagniecia wylaczamy snap (inaczej walczy z reka)
   i zaznaczanie tekstu. Obrazki nie daja sie "wyciagac".
   ========================================================================== */
@media (min-width:769px){
#ksn-medytacje .wu-card-row[data-tab-group]:not(.is-hidden){ cursor:grab; }
#ksn-medytacje .wu-card-row[data-tab-group].is-grabbing{
    cursor:grabbing !important;
    scroll-snap-type:none !important;
    user-select:none !important; -webkit-user-select:none !important;
    scroll-behavior:auto !important;
  }
#ksn-medytacje .wu-card-row[data-tab-group].is-grabbing .med-card{ pointer-events:none; }
}
#ksn-medytacje .wu-card-row[data-tab-group] img{ -webkit-user-drag:none; }
/* ==========================================================================
   MEDYTACJE — WAVE 104: (1) lapka TYLKO podczas trzymania (nie na hover);
   (2) kropkowany outline focusa po KLIKNIECIU mysza — wylaczony wszedzie
   na stronie medytacji (focus-visible dla klawiatury ZOSTAJE — dostepnosc).
   ========================================================================== */
@media (min-width:769px){
#ksn-medytacje .wu-card-row[data-tab-group]:not(.is-hidden){ cursor:default; }
#ksn-medytacje .wu-card-row[data-tab-group].is-grabbing{ cursor:grabbing !important; }
}
#ksn-medytacje :focus:not(:focus-visible){ outline:none !important; }
#ksn-medytacje button::-moz-focus-inner{ border:0; }
/* ==========================================================================
   MEDYTACJE — WAVE 105: ciecie cienia hovera na dole kart. Pasek przycina
   pion (overflow-y:hidden), a cien hovera (0 16px 40px + lift -5px) potrzebuje
   ~44px pod karta. Wiecej paddingu w pasku + korekta odstepu strzalek.
   ========================================================================== */
#ksn-medytacje .wu-card-row[data-tab-group]:not(.is-hidden){ padding:12px 2px 46px; }
#ksn-medytacje .wu-arrows{ margin-top:-18px; }
@media (max-width:768px){
#ksn-medytacje .wu-card-row[data-tab-group]:not(.is-hidden){ padding:6px 18px 20px; }
}
/* ==========================================================================
   MEDYTACJE — WAVE 106: ciecie cienia z PRAWEJ (i lekko z lewej) na krancach
   paska. Boczne paddingi na cien + ujemne marginesy = wyrownanie kart BEZ
   ZMIAN (2px jak dotad), a linia przycinania wychodzi poza kontener.
   Desktop only (mobile ma full-bleed z W100).
   ========================================================================== */
@media (min-width:769px){
#ksn-medytacje .wu-card-row[data-tab-group]:not(.is-hidden){
    padding-left:16px; padding-right:22px;
    margin-left:-14px; margin-right:-20px;
  }
}
/* ==========================================================================
   MEDYTACJE — WAVE 107: ZYWA KULA w playerze. Fale taflii plywaja (2 tempa),
   blik swiatla wedruje, przelot poswiaty po "szkle" co ~9s, oddychajacy glow
   zsynchronizowany z pulsem (7s jak plBreath). Dziala tylko przy otwartym
   modalu (W85 gasi animacje przy zamknietym).
   ========================================================================== */
#ksn-medytacje .player-orb svg{ animation:orbGlow 7s ease-in-out infinite; }
#ksn-medytacje .player-orb .orb-wave1{ animation:orbWave1 9s ease-in-out infinite; }
#ksn-medytacje .player-orb .orb-wave2{ animation:orbWave2 13s ease-in-out infinite; }
#ksn-medytacje .player-orb .orb-light{ animation:orbLight 11s ease-in-out infinite; }
#ksn-medytacje .player-orb .orb-sheen{
  transform-box:fill-box; transform-origin:center;
  transform:translateX(-190px) rotate(16deg);
  animation:orbSheen 9s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){
#ksn-medytacje .player-orb svg,
  #ksn-medytacje .player-orb .orb-wave1,
  #ksn-medytacje .player-orb .orb-wave2,
  #ksn-medytacje .player-orb .orb-light,
  #ksn-medytacje .player-orb .orb-sheen{ animation:none !important; }
}
/* ==========================================================================
   MEDYTACJE — WAVE 108: tlo playera = OKLADKA medytacji (blur + brightness),
   kazda medytacja barwi modal swoja tonacja (teal/amber/fiolet/roz/granat).
   Niebieski gradient (W101) zostaje pod spodem jako baza/fallback.
   ========================================================================== */
#ksn-medytacje .player-bg-cover{
  position:absolute; inset:-48px; z-index:0; pointer-events:none;
  background-position:center; background-size:cover; background-repeat:no-repeat;
  filter:blur(36px) brightness(.55) saturate(1.15);
  transform:scale(1.12);
  opacity:0; transition:opacity 1.1s ease;
}
#ksn-medytacje .player-modal.is-open .player-bg-cover{ opacity:1; }
/* scrim: czytelnosc tresci na jasniejszych okladkach */
#ksn-medytacje .player-bg-scrim{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(125% 95% at 50% 28%, rgba(6,16,40,.12), rgba(4,10,28,.6) 92%),
    linear-gradient(180deg, rgba(5,14,36,.5) 0%, rgba(5,14,36,.12) 30%, rgba(4,10,28,.58) 100%);
}
/* ==========================================================================
   MEDYTACJE — WAVE 109: mniejszy blur tla-okladki w playerze (user: "niech
   cos bedzie widac"). 36px -> 12px, jasniej, mniejszy zoom; scrim lzejszy.
   ========================================================================== */
#ksn-medytacje .player-bg-cover{
  filter:blur(12px) brightness(.62) saturate(1.1) !important;
  transform:scale(1.06) !important;
  inset:-24px !important;
}
#ksn-medytacje .player-bg-scrim{
  background:
    radial-gradient(125% 95% at 50% 28%, rgba(6,16,40,.06), rgba(4,10,28,.5) 94%),
    linear-gradient(180deg, rgba(5,14,36,.4) 0%, rgba(5,14,36,.08) 30%, rgba(4,10,28,.5) 100%) !important;
}
/* ==========================================================================
   MEDYTACJE — WAVE 110: jeszcze mniejszy blur tla-okladki (5px) — grafika
   wyraznie widoczna, tylko delikatnie zmiekczona zeby nie gryzc sie z UI.
   ========================================================================== */
#ksn-medytacje .player-bg-cover{
  filter:blur(5px) brightness(.68) saturate(1.08) !important;
  transform:scale(1.03) !important;
  inset:-12px !important;
}
/* ==========================================================================
   MEDYTACJE — WAVE 111: ziarno filmowe na tle-okladce playera — maskuje
   miekkosc skalowania na duzych ekranach, dodaje premium fakture.
   ========================================================================== */
#ksn-medytacje .player-bg-scrim::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  opacity:.07; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
}
/* ==========================================================================
   MEDYTACJE — WAVE 112: wiecej oddechu w notce playera (padding/gap/ikona).
   ========================================================================== */
.player-note{
  padding:14px 18px !important;
  gap:12px !important;
  line-height:1.55 !important;
  border-radius:16px !important;
  align-items:center !important;
}
.player-note::before{ width:19px; height:19px; margin-top:0 !important; }
/* ==========================================================================
   MEDYTACJE — WAVE 113: modal "Wszystkie medytacje" (Zobacz wszystkie).
   Ladna LISTA: miniatura, tytul, kategoria+czas, play; niedostepne = Wkrotce.
   Budowana JS-em z kart -> nowe medytacje wskakuja same.
   ========================================================================== */
html.allmeds-lock{ overflow:hidden; }
.allmeds-modal{ position:fixed; inset:0; z-index:999999; }
.allmeds-modal[hidden]{ display:none; }
.allmeds-backdrop{
  position:absolute; inset:0; background:rgba(6,12,28,.55);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transition:opacity .28s ease;
}
.allmeds-panel{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-48%) scale(.97);
  width:min(560px, calc(100% - 32px)); max-height:min(78vh, 720px);
  background:#fff; border-radius:24px; box-shadow:0 30px 80px rgba(10,18,40,.35);
  display:flex; flex-direction:column; overflow:hidden;
  opacity:0; transition:opacity .28s ease, transform .34s cubic-bezier(.22,1,.36,1);
}
.allmeds-modal.is-open .allmeds-backdrop{ opacity:1; }
.allmeds-modal.is-open .allmeds-panel{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.allmeds-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 22px 14px; border-bottom:1px solid rgba(16,21,29,.08);
}
.allmeds-head h3{ margin:0; font-size:19px; font-weight:700; color:#10151d; }
.allmeds-close{
  width:38px; height:38px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(16,21,29,.06); color:#10151d;
  display:flex; align-items:center; justify-content:center;
  transition:background .18s ease, transform .25s ease;
}
.allmeds-close:hover{ background:rgba(16,21,29,.12); transform:rotate(90deg); }
.allmeds-list{ overflow-y:auto; padding:10px 12px 16px; }
.allmeds-row{
  display:flex; align-items:center; gap:14px; width:100%;
  padding:10px 12px; border:0; border-radius:16px; background:transparent;
  cursor:pointer; text-align:left; font:inherit;
  transition:background .16s ease;
}
.allmeds-row:hover{ background:rgba(16,21,29,.05); }
.allmeds-row:hover .am-play{ background:#0a52c0; }
.allmeds-row.is-soon{ cursor:default; }
.allmeds-row.is-soon:hover{ background:transparent; }
.allmeds-row.is-soon .am-thumb{ filter:grayscale(.4) brightness(.85); }
@media (max-width:560px){
.allmeds-panel{
    left:0; right:0; top:auto; bottom:0; transform:translateY(40px) scale(1);
    width:100%; max-height:82vh; border-radius:22px 22px 0 0;
  }
.allmeds-modal.is-open .allmeds-panel{ transform:translateY(0) scale(1); }
}
/* ==========================================================================
   MEDYTACJE — WAVE 114: polerka modala "Wszystkie medytacje" — oddechy,
   wieksze miniatury, elegancki scrollbar wewnatrz panelu.
   ========================================================================== */
.allmeds-head{ padding:22px 24px 16px !important; }
.allmeds-list{
  padding:12px 16px 20px !important;
  scrollbar-width:thin; scrollbar-color:rgba(16,21,29,.22) transparent;
}
.allmeds-list::-webkit-scrollbar{ width:8px; }
.allmeds-list::-webkit-scrollbar-track{ background:transparent; margin:10px 0; }
.allmeds-list::-webkit-scrollbar-thumb{ background:rgba(16,21,29,.16); border-radius:99px; }
.allmeds-list::-webkit-scrollbar-thumb:hover{ background:rgba(16,21,29,.3); }
.allmeds-row{ padding:12px 14px !important; gap:16px !important; }
.allmeds-row + .allmeds-row{ margin-top:2px; }
@media (max-width:560px){
.allmeds-head{ padding:18px 18px 14px !important; }
.allmeds-list{ padding:10px 10px 18px !important; }
.allmeds-row{ padding:10px 10px !important; gap:13px !important; }
}
/* ==========================================================================
   MEDYTACJE — WAVE 115: kolory chipow kategorii — Sen niebieski (jak byl),
   Relaks zielony, Lek fioletowy, Trudne emocje bursztynowy. Kropka = currentColor.
   ========================================================================== */
#ksn-medytacje .med-card-tag::before{ background:currentColor !important; }
#ksn-medytacje .med-card[data-cat="relaks"] .med-card-tag{
  color:#1c8a5e !important; background:rgba(28,138,94,.10) !important;
}
#ksn-medytacje .med-card[data-cat="lek"] .med-card-tag{
  color:#7a4fd0 !important; background:rgba(122,79,208,.10) !important;
}
#ksn-medytacje .med-card[data-cat="trudne"] .med-card-tag{
  color:#b8791f !important; background:rgba(184,121,31,.12) !important;
}
/* WAVE 115b: Lek -> pomaranczowy (user); Trudne emocje przechodza na fiolet
   zeby nie dublowac sie z pomaranczowym Leku. */
#ksn-medytacje .med-card[data-cat="lek"] .med-card-tag{
  color:#d9660d !important; background:rgba(217,102,13,.10) !important;
}
#ksn-medytacje .med-card[data-cat="trudne"] .med-card-tag{
  color:#7a4fd0 !important; background:rgba(122,79,208,.10) !important;
}

/* keyframes dociagniete po referencjach */
@keyframes ksnStickyEntrance {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes float-bg {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(20px, -20px) scale(1.05); }
}
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(2deg); }
}
@keyframes wiggle {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
    to { opacity: 1; transform: translateY(0); }
  }
@keyframes eyebrowDotPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(242,147,145,0.25); }
    50%      { box-shadow: 0 0 0 8px rgba(242,147,145,0.10); }
  }
@keyframes heroGlow {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.08); opacity: 0.85; }
  }
@keyframes heroPhoneFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-10px) rotate(0.5deg); }
  }
@keyframes heroDotPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(95, 165, 122, 0.2); }
    50%      { box-shadow: 0 0 0 8px rgba(95, 165, 122, 0.1); }
  }
@keyframes heroCardFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
  }
@keyframes heroOrbFloat {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(8px, -14px); }
  }
@keyframes waveDance {
    0%, 100% { opacity: 0.4; transform: scaleY(0.8); }
    50% { opacity: 1; transform: scaleY(1.2); }
  }
@keyframes catDecoFloat {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(20px, -20px); }
  }
@keyframes catSparkle {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.7; }
    50%      { transform: scale(1.25) rotate(20deg); opacity: 1; }
  }
@keyframes catIconFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
  }
@keyframes featurePulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
  }
@keyframes featureFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
  }
@keyframes playerPulse {
    0%   { transform: translate(-50%, -50%) scale(0);   opacity: 0.85; }
    100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
  }
@keyframes playerFadeDown {
    to { opacity: 1; transform: translateY(0); }
  }
@keyframes playerFadeUp {
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
@keyframes playerTimerIn {
    to { opacity: 1; transform: scale(1); }
  }
@keyframes playerBtnPop {
    to { opacity: 1; transform: scale(1); }
  }
@keyframes playerBgIn {
    to { opacity: 1; }
  }
@keyframes fireFlicker { from { filter: brightness(0.95); } to { filter: brightness(1.1); } }
@keyframes rainFall { 0% { background-position: 0 0; } 100% { background-position: -20px 60px; } }
@keyframes wavesShift { 0%,100% { background-position: 0 0; } 50% { background-position: 0 40px; } }
@keyframes plBreath{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
@keyframes ksnAuroraA{
  0%   { transform:translate3d(-5%,-4%,0) rotate(0deg) scale(1.10); }
  100% { transform:translate3d(6%,5%,0)  rotate(9deg) scale(1.26); }
}
@keyframes ksnAuroraB{
  0%   { transform:translate3d(5%,4%,0)  rotate(0deg)  scale(1.16); }
  100% { transform:translate3d(-6%,-5%,0) rotate(-11deg) scale(1.06); }
}
@keyframes ksnAur1{
  0%   { transform:translate(-24%,-17%) scale(1.05); opacity:.70; }
  50%  { transform:translate(-6%,-3%)   scale(1.30); opacity:1;   }
  100% { transform:translate(-15%,9%)   scale(1.12); opacity:.78; }
}
@keyframes ksnAur2{
  0%   { transform:translate(22%,19%)   scale(1.10); opacity:.72; }
  50%  { transform:translate(6%,4%)     scale(1.34); opacity:.97; }
  100% { transform:translate(16%,10%)   scale(1.16); opacity:.80; }
}
@keyframes ksnAur3{
  0%   { transform:translate(21%,-19%)  scale(1.00); opacity:.58; }
  50%  { transform:translate(8%,-4%)    scale(1.24); opacity:.90; }
  100% { transform:translate(16%,-11%)  scale(1.09); opacity:.70; }
}
@keyframes ksnAur4{
  0%   { transform:translate(-21%,19%)  scale(1.08); opacity:.66; }
  50%  { transform:translate(-6%,6%)    scale(1.32); opacity:.95; }
  100% { transform:translate(-15%,11%)  scale(1.14); opacity:.78; }
}
@keyframes orbGlow{
  0%,100%{ filter:drop-shadow(0 0 16px rgba(110,165,255,.22)); }
  50%    { filter:drop-shadow(0 0 34px rgba(140,190,255,.5)); }
}
@keyframes orbWave1{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(-26px); } }
@keyframes orbWave2{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(20px); } }
@keyframes orbLight{
  0%,100%{ transform:translate(0,0); opacity:.28; }
  40%    { transform:translate(13px,7px); opacity:.4; }
  72%    { transform:translate(-9px,3px); opacity:.2; }
}
@keyframes orbSheen{
  0%,52%{ transform:translateX(-190px) rotate(16deg); opacity:0; }
  60%   { opacity:.75; }
  74%   { transform:translateX(200px) rotate(16deg); opacity:0; }
  100%  { transform:translateX(200px) rotate(16deg); opacity:0; }
}


/* ====================================================================
   ADAPTACJA NAGLOWKA PRODUKCJI — prod ma STANDARDOWY header PS
   (header-banner / header-nav / header-top), inny niz customowy na tescie.
   Chowamy pasek promo i gorny pasek, header plywa transparentnie nad niebem.
   ==================================================================== */
body:has(#ksn-medytacje) #header .header-banner{ display:none !important; }
body:has(#ksn-medytacje) #header .header-nav{ display:none !important; }
body:has(#ksn-medytacje) #header{
  position:absolute !important; top:0; left:0; right:0; z-index:60;
  background:transparent !important; box-shadow:none !important;
}
body:has(#ksn-medytacje) #header .header-top{
  background:transparent !important; box-shadow:none !important; padding-top:28px;
}
@media (min-width:992px){
  body:has(#ksn-medytacje) #header .header-top a,
  body:has(#ksn-medytacje) #header .header-top .top-menu a,
  body:has(#ksn-medytacje) #header .header-top .top-menu a:hover{
    color:#fff !important;
  }
}
body:has(#ksn-medytacje) #wrapper{ padding-top:0 !important; }
body:has(#ksn-medytacje) nav.breadcrumb[data-depth]{ display:none !important; }
body:has(#ksn-medytacje) .page-header{ display:none !important; }
body:has(#ksn-medytacje) .page-cms{ box-shadow:none !important; background:transparent !important; padding:0 !important; }
body:has(#ksn-medytacje) .container:has(#content-wrapper){ max-width:100% !important; width:100% !important; padding:0 !important; }
body:has(#ksn-medytacje) #content-wrapper{ padding:0 !important; }
body:has(#ksn-medytacje) #main{ padding:0 !important; margin:0 !important; }
body:has(#ksn-medytacje) .row:has(#content-wrapper){ margin:0 !important; }

/* PROMO-BAR INLINE (div bez klasy z gradientem #f29391) - ukryj na medytacjach */
body:has(#ksn-medytacje) div[style*="#f29391"]{ display:none !important; }

/* menu: bialo, bez rozowej pastylki aktywnej kategorii, font jak na tescie */
@media (min-width:992px){
  body:has(#ksn-medytacje) #header .top-menu a,
  body:has(#ksn-medytacje) #header #_desktop_top_menu a{
    background:transparent !important; color:#fff !important;
    font-family:'DM Sans','Poppins',sans-serif !important;
    text-transform:none !important; letter-spacing:.01em;
    font-weight:600; border-radius:0 !important; box-shadow:none !important;
  }
  body:has(#ksn-medytacje) #header .top-menu a:hover{ color:rgba(255,255,255,.85) !important; }
}

/* ====================================================================
   ADAPTACJA STOPKI PRODUKCJI - stopka sklepu jest przezroczysta i przez
   nia przeswitowalo niebieskie tlo strony medytacji. Na tej stronie
   stopka dostaje czysta biel jak na tescie.
   ==================================================================== */
body:has(#ksn-medytacje) #footer,
body:has(#ksn-medytacje) footer.js-footer{
  background:#ffffff !important;
}
body:has(#ksn-medytacje) #footer a{ color:#2e2117 !important; }
body:has(#ksn-medytacje) #footer a:hover{ color:#f29391 !important; }
body:has(#ksn-medytacje) #footer h3, body:has(#ksn-medytacje) #footer .h3,
body:has(#ksn-medytacje) #footer p{ color:#2e2117 !important; }

/* logo: przezroczyste koralowe PNG jak na tescie */
body:has(#ksn-medytacje) #_desktop_logo img,
body:has(#ksn-medytacje) .logo.img-fluid{
  content:url('/themes/classic/assets/img/ksn-logo-ksn.png');
  max-height:48px; width:auto;
}

/* prawa strona menu: przywroc Zaloguj/Koszyk na bialo w linii menu (jak test) */
body:has(#ksn-medytacje) #header .header-nav{
  display:block !important; position:absolute; top:30px; right:28px;
  background:transparent !important; border:0 !important; box-shadow:none !important;
  z-index:70; max-height:none !important; padding:0 !important; margin:0 !important;
}
body:has(#ksn-medytacje) #header .header-nav .container{ padding:0 !important; max-width:none !important; }
body:has(#ksn-medytacje) #header .header-nav .row{ margin:0 !important; display:flex; align-items:center; gap:18px; }
body:has(#ksn-medytacje) #header .header-nav #_desktop_contact_link{ display:none !important; }
body:has(#ksn-medytacje) #header .header-nav .col-md-5{ display:none !important; }
body:has(#ksn-medytacje) #header .header-nav .col-md-7{ padding:0 !important; width:auto !important; max-width:none !important; flex:none !important; display:flex; align-items:center; gap:18px; }
body:has(#ksn-medytacje) #header .header-nav a,
body:has(#ksn-medytacje) #header .header-nav span{
  color:#fff !important; font-family:'DM Sans',sans-serif !important;
}
body:has(#ksn-medytacje) #header .header-nav i,
body:has(#ksn-medytacje) #header .header-nav .material-icons{
  color:#fff !important; font-family:'Material Icons' !important;
}
body:has(#ksn-medytacje) #header .header-nav .blockcart{
  background:transparent !important; box-shadow:none !important; border:0 !important;
}

/* pasek tla przeswitujacy miedzy fala a stopka */
body:has(#ksn-medytacje) #wrapper{ padding-bottom:0 !important; margin-bottom:0 !important; }
body:has(#ksn-medytacje) #footer{ margin-top:0 !important; border-top:0 !important; }
body:has(#ksn-medytacje) .page-footer{ margin:0 !important; padding:0 !important; }

/* zwezenie header-nav do zawartosci (dziedziczyl 1540px z .container i wystawal w lewo) */
body:has(#ksn-medytacje) #header .header-nav{ width:auto !important; left:auto !important; min-width:0 !important; }
body:has(#ksn-medytacje) #header .header-nav .container{ width:auto !important; min-width:0 !important; margin:0 !important; }
body:has(#ksn-medytacje) #header .header-nav .row{ width:auto !important; justify-content:flex-end; flex-wrap:nowrap !important; }
@media (min-width:992px){
  body:has(#ksn-medytacje) #header .header-nav .hidden-sm-down{ display:contents !important; }
}
body:has(#ksn-medytacje) #header .header-nav .col-md-7{ float:none !important; }

/* ===== DOEKSTRAHOWANE bloki o krotkich klasach (am-, pfx-, pmt-, pmv-, pb-, pack-, faq-, lib-) ===== */
@media (max-width: 968px){
#ksn-medytacje .icon-btn-mobile {
    display: inline-flex;
    width: 42px; height: 42px;
    border-radius: 12px;
    background: rgba(18, 17, 28, 0.06);
    color: var(--text);
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
    cursor: pointer;
    border: 0;
    position: relative;
  }
#ksn-medytacje .icon-btn-mobile:hover { background: rgba(18, 17, 28, 0.12); }
#ksn-medytacje .nav-actions .icon-btn {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: rgba(18, 17, 28, 0.06);
  }
#ksn-medytacje .nav-actions .icon-btn:hover { background: rgba(18, 17, 28, 0.12); }
}
@media (max-width: 768px){
#ksn-medytacje .lib-grid, #ksn-medytacje .lib-grid-3, #ksn-medytacje .footer-grid, #ksn-medytacje .dark-block {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}
@media (max-width: 480px){
#ksn-medytacje .lib-grid, #ksn-medytacje .lib-grid-3 { grid-template-columns: 1fr !important; }
}
@media (max-width:520px){
.player-fx-btn .pfx-lb{ font-size:10.5px; }
}
#ksn-blog .blog-chip{ font-family:'Poppins',sans-serif; font-weight:500; font-size:14px; color:var(--k-ink); cursor:pointer; padding:9px 18px; border-radius:999px; background:#fff; border:1.5px solid var(--k-line); transition:all .18s ease; }
#ksn-blog .blog-chip:hover{ border-color:var(--k-ink2); }
#ksn-blog .blog-chip.is-active{ background:var(--k-ink); color:#fff; border-color:var(--k-ink); }
.pmv-wrap{ position:relative; flex:1; display:flex; align-items:center; --val:55%; }
.pmv-wrap input[type=range]{
  width:100%; -webkit-appearance:none; appearance:none; height:5px; border-radius:99px;
  background:linear-gradient(90deg, #9fc5ff 0, #ffffff var(--val), rgba(255,255,255,.16) var(--val));
  outline:none; cursor:pointer; touch-action:none;
}
.pmv-wrap input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:18px; height:18px; border-radius:50%;
  background:#fff; border:0;
  box-shadow:0 2px 10px rgba(0,0,0,.45), 0 0 0 0 rgba(255,255,255,.0);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
}
.pmv-wrap input[type=range]:hover::-webkit-slider-thumb{ transform:scale(1.15); }
.pmv-wrap.is-dragging input[type=range]::-webkit-slider-thumb,
.pmv-wrap input[type=range]:active::-webkit-slider-thumb{
  transform:scale(1.35);
  box-shadow:0 2px 12px rgba(0,0,0,.5), 0 0 0 9px rgba(255,255,255,.14);
}
.pmv-wrap input[type=range]::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:#fff; border:0; transition:transform .18s ease; }
.pmv-wrap input[type=range]:active::-moz-range-thumb{ transform:scale(1.3); }
.pmv-wrap input[type=range]::-moz-range-track{ height:5px; border-radius:99px; background:rgba(255,255,255,.16); }
.pmv-wrap input[type=range]::-moz-range-progress{ height:5px; border-radius:99px; background:#fff; }
.pmv-bubble{
  position:absolute; left:var(--val); top:-36px;
  transform:translateX(-50%) translateY(7px) scale(.85);
  background:rgba(10,16,34,.92); color:#fff; font-size:11.5px; font-weight:600; letter-spacing:.3px;
  padding:4px 9px; border-radius:8px; border:1px solid rgba(255,255,255,.18);
  opacity:0; pointer-events:none; white-space:nowrap;
  transition:opacity .18s ease, transform .22s cubic-bezier(.34,1.56,.64,1);
}
.pmv-wrap.is-dragging .pmv-bubble{ opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
@media (max-width:768px){
.pmv-wrap input[type=range]{ height:6px; }
.pmv-wrap input[type=range]::-webkit-slider-thumb{ width:24px; height:24px; }
.pmv-wrap input[type=range]::-moz-range-thumb{ width:24px; height:24px; }
}
.am-thumb{
  flex:0 0 56px; width:56px; height:56px; border-radius:12px;
  background-color:#101a33; background-size:cover; background-position:center;
  box-shadow:0 3px 10px rgba(10,18,40,.18);
}
.am-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.am-title{ font-size:15.5px; font-weight:600; color:#10151d; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.am-meta{ font-size:12.5px; color:#6a7180; }
.am-play{
  flex:0 0 38px; width:38px; height:38px; border-radius:50%;
  background:#0f5fd6; color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 5px 14px rgba(15,95,214,.3);
}
.am-soon{
  flex:0 0 auto; font-size:11.5px; font-weight:600; letter-spacing:.4px; text-transform:uppercase;
  color:#8a92a3; background:rgba(16,21,29,.06); padding:6px 11px; border-radius:99px;
}
.am-thumb{ flex-basis:60px !important; width:60px !important; height:60px !important; border-radius:14px !important; }
.am-title{ font-size:16px !important; }
.am-meta{ font-size:13px !important; }
.am-play{ margin-left:6px; }
.am-soon{ margin-left:6px; }

/* ===== MOBILE HEADER PRODUKCJI v3 (1:1 z testem):
   elementy mobilne siedza w .hidden-md-up.mobile -> flex: logo | profil koszyk burger ===== */
@media (max-width: 991.98px){
  body:has(#ksn-medytacje) #header .header-nav{
    left:0 !important; right:0 !important; top:0 !important;
    width:100% !important; min-width:0 !important; padding:10px 14px !important;
  }
  body:has(#ksn-medytacje) #header .header-nav .container{ width:100% !important; }
  body:has(#ksn-medytacje) #header .header-nav .row{ width:100% !important; margin:0 !important; display:block !important; }
  body:has(#ksn-medytacje) #header .header-nav .hidden-md-up.mobile{
    display:flex !important; align-items:center !important; gap:10px !important;
    width:100% !important; text-align:left !important;
  }
  body:has(#ksn-medytacje) #header .header-nav .hidden-md-up.mobile > .clearfix{ display:none !important; }
  /* logo z lewej, odpycha reszte na prawo */
  body:has(#ksn-medytacje) #_mobile_logo{
    order:-1 !important; margin:0 auto 0 0 !important; padding:0 !important; float:none !important;
  }
  body:has(#ksn-medytacje) #_mobile_logo img{ max-height:46px !important; width:auto !important; display:block; }
  /* kolejnosc kafelkow: profil, koszyk, burger */
  body:has(#ksn-medytacje) #_mobile_user_info{ order:1 !important; float:none !important; }
  body:has(#ksn-medytacje) #_mobile_cart{ order:2 !important; float:none !important; }
  body:has(#ksn-medytacje) #menu-icon{ order:3 !important; float:none !important; }
  /* szklane kafelki */
  body:has(#ksn-medytacje) #_mobile_user_info .user-info,
  body:has(#ksn-medytacje) #_mobile_cart .blockcart,
  body:has(#ksn-medytacje) #menu-icon{
    display:flex !important; align-items:center !important; justify-content:center !important;
    width:48px !important; height:42px !important;
    background:rgba(255,255,255,.14) !important;
    border-radius:12px !important; border:0 !important; box-shadow:none !important;
    padding:0 !important; margin:0 !important;
  }
  body:has(#ksn-medytacje) #_mobile_user_info .user-info a{
    display:flex !important; align-items:center !important; justify-content:center !important;
    font-size:0 !important; padding:0 !important; margin:0 !important;
  }
  body:has(#ksn-medytacje) #header .header-nav .material-icons{
    color:#fff !important; font-size:22px !important;
  }
  /* badge liczby produktow */
  body:has(#ksn-medytacje) #_mobile_cart .blockcart{ position:relative !important; }
  body:has(#ksn-medytacje) #_mobile_cart .cart-products-count{
    display:flex !important; position:absolute !important; top:-7px !important; right:-7px !important;
    min-width:19px !important; height:19px !important; padding:0 4px !important;
    background:#f29391 !important; color:#fff !important;
    border-radius:999px !important; font-size:10.5px !important; font-weight:700 !important;
    align-items:center !important; justify-content:center !important; line-height:1 !important;
  }
}

/* mobilny drawer menu: biale tlo, ciemny tekst (biale linki desktopu go psuly) */
@media (max-width:991.98px){
  body:has(#ksn-medytacje) #header #_mobile_top_menu,
  body:has(#ksn-medytacje) #header .js-top-menu,
  body:has(#ksn-medytacje) #header .js-top-menu-bottom{
    background:#ffffff !important;
  }
  body:has(#ksn-medytacje) #header .top-menu a,
  body:has(#ksn-medytacje) #header .top-menu span{
    color:#2e2117 !important;
  }
}

/* ====================================================================
   HEADER SKLEPU CALKOWICIE UKRYTY na medytacjach (tymczasowo).
   Zamiast niego wlasny pasek .ksn-med-topbar (markup w partialu).
   ==================================================================== */
body:has(#ksn-medytacje) #header{ display:none !important; }
body:has(#ksn-medytacje) #ksn-medytacje .med-hero{
  margin-top:0 !important;
  padding-top:150px !important;
}
#ksn-medytacje .ksn-med-topbar{
  position:absolute; top:0; left:0; right:0; z-index:80;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 30px;
}
#ksn-medytacje .ksn-med-topbar-logo img{ height:48px; width:auto; display:block; }
#ksn-medytacje .ksn-med-back{
  display:inline-flex; align-items:center; gap:9px;
  background:rgba(255,255,255,.14);
  border:1.5px solid rgba(255,255,255,.6);
  color:#fff !important; text-decoration:none !important;
  font-family:'DM Sans',sans-serif; font-weight:600; font-size:15px;
  padding:11px 20px; border-radius:10px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background .15s ease;
}
#ksn-medytacje .ksn-med-back:hover{ background:rgba(255,255,255,.24); }
@media (max-width:767px){
  #ksn-medytacje .ksn-med-topbar{ padding:14px 16px; }
  #ksn-medytacje .ksn-med-topbar-logo img{ height:40px; }
  #ksn-medytacje .ksn-med-back{ font-size:13.5px; padding:9px 14px; gap:7px; }
  body:has(#ksn-medytacje) #ksn-medytacje .med-hero{ padding-top:110px !important; }
}

/* zablakany link z mailem doklejany JS-em do <body> pod stopka - na niebieskim tle
   robil pasek; na medytacjach chowamy (wystepuje tylko 1 taki bezposredni <a> w body) */
body:has(#ksn-medytacje) > a{ display:none !important; }

/* logo w topbarze delikatnie odsuniete od rogu (desktop) */
@media (min-width:768px){
  #ksn-medytacje .ksn-med-topbar-logo{ display:inline-block; margin:6px 0 0 16px; }
}

/* wycentrowany napis w srodku topbara (desktop) */
#ksn-medytacje .ksn-med-topbar-note{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  color:rgba(255,255,255,.88); font-size:13.5px; font-weight:500;
  letter-spacing:.3px; white-space:nowrap; pointer-events:none;
}
@media (max-width:991px){
  #ksn-medytacje .ksn-med-topbar-note{ display:none; }
}

/* mniejsza przerwa miedzy sekcja kategorii a "Zacznij sluchac"
   (bylo 88px dolu + 88px gory = 184px razem z marginesem CTA) */
#ksn-medytacje .wu-difference{ padding-bottom:40px !important; }
#ksn-medytacje .wu-listening{ padding-top:48px !important; }