/* Our own additions on top of the ported theme: reset, brand mark, flash
   messages, consent banner and the secondary pages. Same visual language as
   landing.css, so nothing here introduces a second design system. */

/* ---- reboot ----
   Ported from the shop theme's Bootstrap reboot, which the landing CSS
   extract never carried. Without it the browser default body margin leaves
   an 8px strip of lighter page down both edges. */

html {
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: transparent;
}

*,
::after,
::before { box-sizing: inherit; }

body {
  margin: 0;
  background-color: #fff;
}

article, aside, details, figcaption, figure, footer,
header, main, menu, nav, section, summary { display: block; }

a { background-color: transparent; color: #222; text-decoration: none; }
b, strong { font-weight: bolder; }
img { vertical-align: middle; border-style: none; }
svg:not(:root) { overflow: hidden; }
button, input, optgroup, select, textarea { font: inherit; margin: 0; }
fieldset { min-width: 0; padding: 0; margin: 0; border: 0; }
label { display: inline-block; margin-bottom: 0.5rem; }
table { border-collapse: collapse; background-color: transparent; }
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0.5rem; }
h5, h6 { line-height: 1.1; }
ul { margin-top: 0; margin-bottom: 1rem; }

/* The hidden attribute must win over our own display rules: a class such as
   .ksn-form { display: flex } outranks the user agent's [hidden] rule, which
   is what made the hidden checkout payment step render as an empty bar. */
[hidden] { display: none !important; }

#ksn-medytacje {
  --pause-ink: #10151d;
  --pause-ink-soft: #525760;
  --pause-blue: #014595;
  --pause-blue-deep: #013981;
  --pause-panel: #465f86;
  --pause-paper: #ededeb;
}

/* ---- brand mark (replaces the bookstore logo in the topbar) ---- */

#ksn-medytacje .ksn-brand {
  font-family: "Baloo 2", "DM Sans", sans-serif;
  font-weight: 800;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
  display: block;
  text-shadow: 0 2px 10px rgba(0, 20, 60, 0.28);
}

#ksn-medytacje .player-topbar-logo .ksn-brand { font-size: 22px; }

@media (max-width: 768px) {
  #ksn-medytacje .ksn-brand { font-size: 25px; }
}

/* ---- topbar actions (language switch + sign-in/account, kept together) ---- */

#ksn-medytacje .ksn-med-topbar-actions { display: flex; align-items: center; gap: 10px; }

/* The language switch is a native select dressed as the topbar pill; the
   chevron is drawn in the background so the control keeps its keyboard and
   screen reader behaviour. */
#ksn-medytacje .ksn-lang-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c3c84' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  cursor: pointer;
}

/* ---- flash messages ---- */

#ksn-medytacje .ksn-flash {
  position: fixed;
  z-index: 9000;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(560px, calc(100vw - 32px));
  padding: 13px 20px;
  border-radius: 12px;
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  box-shadow: 0 12px 34px rgba(4, 18, 46, 0.3);
}

#ksn-medytacje .ksn-flash-notice { background: #2e7d5b; }
#ksn-medytacje .ksn-flash-error { background: #c2484a; }

/* ---- consent banner ---- */

#ksn-medytacje .ksn-consent {
  position: fixed;
  z-index: 9500;
  right: 18px;
  bottom: 18px;
  left: 18px;
  max-width: 420px;
  margin-right: auto;
  padding: 18px 20px;
  border-radius: 16px;
  background: #0f2a52;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 18px 48px rgba(3, 16, 40, 0.42);
  font-family: "DM Sans", sans-serif;
  color: rgba(255, 255, 255, 0.9);
}

#ksn-medytacje .ksn-consent p { font-size: 13.5px; line-height: 1.5; margin: 0 0 14px; }
#ksn-medytacje .ksn-consent a { color: #ffd76a; text-decoration: underline; }
#ksn-medytacje .ksn-consent-actions { display: flex; gap: 10px; justify-content: flex-end; }

#ksn-medytacje .ksn-consent-actions a,
#ksn-medytacje .ksn-consent-actions button {
  padding: 10px 18px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

#ksn-medytacje .ksn-consent-reject {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

#ksn-medytacje .ksn-consent-actions .ksn-consent-accept { background: #ffd76a; color: #1c2a4a; }

/* The "also available in English" strip sits above the topbar in the page flow,
   so it never covers the consent banner or the back-to-top button. */
#ksn-medytacje .ksn-locale-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 42px;
  padding: 0 52px 0 20px;
  overflow: hidden;
  white-space: nowrap;
  background: #0f2a52;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
}

/* The topbar is absolutely positioned at the top of the page; when the strip
   renders above it, the topbar moves down by the strip's fixed height. */
#ksn-medytacje .ksn-locale-bar + .ksn-med-topbar { top: 42px; }

@media (max-width: 560px) {
  #ksn-medytacje .ksn-locale-bar span { display: none; }
}

#ksn-medytacje .ksn-locale-bar a {
  color: #ffd76a;
  font-weight: 700;
  text-decoration: underline;
}

#ksn-medytacje .ksn-locale-bar button {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 32px;
  height: 32px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

#ksn-medytacje .ksn-locale-bar button:hover { background: rgba(255, 255, 255, 0.12); }
}

/* ---- secondary pages: one dark sky panel, the theme's type and buttons ---- */

#ksn-medytacje .ksn-page {
  min-height: 78vh;
  padding: calc(var(--ksnHeadH, 92px) + 56px) 20px 80px;
  background: linear-gradient(180deg, #013981 0%, #014596 46%, #3f78c0 100%);
  font-family: "DM Sans", sans-serif;
  color: #fff;
}

#ksn-medytacje .ksn-panel {
  max-width: 540px;
  margin: 0 auto;
  padding: 34px 32px 36px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(6px);
}

#ksn-medytacje .ksn-panel-wide { max-width: 820px; }

#ksn-medytacje .ksn-panel h1 {
  font-size: clamp(30px, 4vw, 42px);
  margin: 0 0 10px;
  color: #fff;
}

#ksn-medytacje .ksn-panel h2 {
  font-size: 18px;
  margin: 0 0 10px;
  color: #fff;
}

#ksn-medytacje .ksn-panel > p { font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, 0.84); margin: 0 0 22px; }
#ksn-medytacje .ksn-panel a { color: #ffd76a; text-decoration: underline; }

#ksn-medytacje .ksn-form { display: flex; flex-direction: column; gap: 14px; }

/* Honeypot: off-screen rather than display:none, which bots skip. */
.ksn-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* One shape for every public text input: login, the six-digit code, both
   redemption fields, checkout e-mail and the footer newsletter. */
#ksn-medytacje .ksn-form input[type="text"],
#ksn-medytacje .ksn-form input[type="email"],
#footer .block_newsletter form input[type="email"] {
  box-sizing: border-box;
  width: 100%;
  height: 56px;
  padding: 0 18px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.94);
  font-family: inherit;
  font-size: 17px;
  color: #1c2a3a;
}

#ksn-medytacje .ksn-form input::placeholder { color: #8a8993; }

#ksn-medytacje .ksn-form input[type="submit"],
#ksn-medytacje .ksn-btn {
  display: inline-block;
  width: 100%;
  padding: 14px 24px;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  background: #ffd76a;
  color: #1c2a4a;
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  transition: transform 0.15s ease;
}

#ksn-medytacje .ksn-form input[type="submit"]:hover,
#ksn-medytacje .ksn-btn:hover { transform: translateY(-1px); }

#ksn-medytacje .ksn-btn-ghost {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

#ksn-medytacje .ksn-btn-quiet {
  background: none;
  color: rgba(255, 255, 255, 0.72);
  border: 0;
  width: auto;
  padding: 12px 6px;
  font-weight: 600;
}

/* The code field keeps the shared height and only changes how the digits sit;
   the padding is trimmed so the wide letter-spacing stays centred. */
#ksn-medytacje .ksn-form input[type="text"].ksn-code-input {
  padding: 0 8px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  text-align: center;
}
#ksn-medytacje .ksn-hint { font-size: 12.5px; color: rgba(255, 255, 255, 0.62); margin: 0; }
#ksn-medytacje .ksn-note { font-size: 13.5px; color: rgba(255, 255, 255, 0.72); margin: 20px 0 0; }
#ksn-medytacje .ksn-error { font-size: 13.5px; color: #ffc0bd; margin: 14px 0 0; }
#ksn-medytacje .ksn-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
#ksn-medytacje .ksn-actions form { flex: 0 0 auto; }
#ksn-medytacje .ksn-actions .ksn-btn { width: auto; }
#ksn-medytacje .ksn-center { text-align: center; }

#ksn-medytacje .ksn-list { list-style: none; margin: 0; padding: 0; }

#ksn-medytacje .ksn-list li {
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 15px;
}

#ksn-medytacje .ksn-list li:last-child { border-bottom: 0; }
#ksn-medytacje .ksn-list span { color: rgba(255, 255, 255, 0.6); font-size: 13px; }
#ksn-medytacje .ksn-section { margin-top: 28px; }

#ksn-medytacje .ksn-price { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 24px; }

#ksn-medytacje .ksn-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 16px;
  margin: 0 0 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.14);
}

#ksn-medytacje .ksn-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.66);
  margin: 0 0 8px;
}

/* ---- long-form legal pages ---- */

#ksn-medytacje .ksn-prose { font-size: 15.5px; line-height: 1.68; color: rgba(255, 255, 255, 0.88); }
#ksn-medytacje .ksn-prose h1 { margin-bottom: 20px; }

#ksn-medytacje .ksn-prose h2 {
  font-size: 22px;
  margin: 30px 0 10px;
}

#ksn-medytacje .ksn-prose h3 { font-size: 17px; margin: 22px 0 8px; }
#ksn-medytacje .ksn-prose p { margin: 0 0 14px; }
#ksn-medytacje .ksn-prose ul,
#ksn-medytacje .ksn-prose ol { margin: 0 0 16px; padding-left: 22px; }
#ksn-medytacje .ksn-prose li { margin-bottom: 7px; }
#ksn-medytacje .ksn-prose a { color: #ffd76a; }
#ksn-medytacje .ksn-prose strong { color: #fff; }

/* ---- Stripe payment element sits on the light panel Stripe expects ---- */

#ksn-medytacje .ksn-stripe {
  background: rgba(255, 255, 255, 0.94);
  border-radius: 12px;
  padding: 16px;
}

@media (max-width: 640px) {
  #ksn-medytacje .ksn-panel { padding: 26px 20px 28px; }
  #ksn-medytacje .ksn-page { padding-top: calc(var(--ksnHeadH, 92px) + 32px); }
}

/* ---- purchase page (/kup/:slug) ----
   Two columns on desktop with a sticky order card; on mobile the card comes
   first, so the price and the e-mail step are the first thing in reach. */

#ksn-medytacje .ksn-buy { padding-bottom: 64px; }

#ksn-medytacje .ksn-buy-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 40px;
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
}

#ksn-medytacje .ksn-buy-main { min-width: 0; }

/* ---- head: cover collage next to the title ---- */

#ksn-medytacje .ksn-buy-head {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 26px;
}

#ksn-medytacje .ksn-buy-covers {
  position: relative;
  flex: 0 0 196px;
  width: 196px;
  height: 172px;
}

#ksn-medytacje .ksn-buy-cover {
  position: absolute;
  border-radius: 16px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 14px 34px rgba(4, 20, 52, 0.42);
}

#ksn-medytacje .ksn-buy-cover-1 { width: 104px; height: 126px; top: 6px; left: 0; transform: rotate(-6deg); z-index: 2; }
#ksn-medytacje .ksn-buy-cover-2 { width: 96px; height: 116px; top: 44px; left: 92px; transform: rotate(5deg); z-index: 1; }
#ksn-medytacje .ksn-buy-cover-3 { width: 88px; height: 104px; top: 62px; left: 34px; transform: rotate(-3deg); z-index: 3; }

#ksn-medytacje .ksn-buy-intro { min-width: 0; }

#ksn-medytacje .ksn-buy h1 {
  font-size: clamp(32px, 4.2vw, 48px);
  margin: 0 0 6px;
  color: #fff;
}

#ksn-medytacje .ksn-buy-subtitle {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 12px;
}

#ksn-medytacje .ksn-buy-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin: 0; }
#ksn-medytacje .ksn-buy-price strong { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
#ksn-medytacje .ksn-buy-price s { font-size: 17px; color: rgba(255, 255, 255, 0.55); }

#ksn-medytacje .ksn-buy-save {
  font-size: 13px;
  font-weight: 700;
  color: #1c2a4a;
  background: #ffd76a;
  border-radius: 99px;
  padding: 4px 12px;
}

#ksn-medytacje .ksn-buy-lead {
  font-size: 16.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 24px;
}

/* ---- bullets and trust rows ---- */

#ksn-medytacje .ksn-buy-benefits,
#ksn-medytacje .ksn-buy-trust { list-style: none; margin: 0 0 22px; padding: 0; }

#ksn-medytacje .ksn-buy-benefits li,
#ksn-medytacje .ksn-buy-trust li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 11px;
  font-size: 15.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
}

#ksn-medytacje .ksn-buy .pb-check {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: #ffd76a;
  color: #1c2a4a;
  display: flex;
  align-items: center;
  justify-content: center;
}

#ksn-medytacje .ksn-buy .pb-check svg { width: 13px; height: 13px; }

#ksn-medytacje .ksn-buy-trust { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 8px; }
#ksn-medytacje .ksn-buy-trust li { margin-bottom: 0; font-size: 14px; }

#ksn-medytacje .ksn-buy-badge {
  display: inline-block;
  font-size: 13.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 99px;
  padding: 8px 16px;
  margin: 0 0 34px;
}

/* ---- sections ---- */

#ksn-medytacje .ksn-buy-section { margin-bottom: 38px; }

#ksn-medytacje .ksn-buy-section h2 {
  font-size: 25px;
  margin: 0 0 16px;
  color: #fff;
}

#ksn-medytacje .ksn-buy-section p { font-size: 15.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.86); margin: 0; }

#ksn-medytacje .ksn-buy-group {
  font-size: 12px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  margin: 22px 0 10px;
}

#ksn-medytacje .ksn-buy-group:first-of-type { margin-top: 0; }

/* ---- meditation list ---- */

#ksn-medytacje .ksn-buy-list { list-style: none; margin: 0; padding: 0; }

#ksn-medytacje .ksn-buy-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.07);
  margin-bottom: 8px;
}

#ksn-medytacje .ksn-buy-thumb {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background-color: #101a33;
  background-size: cover;
  background-position: center;
}

#ksn-medytacje .ksn-buy-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

#ksn-medytacje .ksn-buy-row-title {
  font-size: 15.5px;
  font-weight: 600;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#ksn-medytacje .ksn-buy-row-meta { font-size: 12.5px; color: rgba(255, 255, 255, 0.62); }

#ksn-medytacje .ksn-buy-sample {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.16s ease;
}

#ksn-medytacje .ksn-buy-sample:hover { background: rgba(255, 255, 255, 0.24); }

/* ---- numbered steps ---- */

#ksn-medytacje .ksn-buy-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; }

#ksn-medytacje .ksn-buy-steps li {
  counter-increment: step;
  position: relative;
  padding-left: 46px;
  margin-bottom: 18px;
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
}

#ksn-medytacje .ksn-buy-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ffd76a;
  color: #1c2a4a;
  font-weight: 800;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#ksn-medytacje .ksn-buy-steps strong { display: block; color: #fff; font-weight: 700; }

/* ---- sticky order card ---- */

#ksn-medytacje .ksn-buy-aside { position: sticky; top: 24px; }

#ksn-medytacje .ksn-buy-card {
  padding: 26px 24px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(6px);
}

#ksn-medytacje .ksn-buy-card-title {
  font-size: 23px;
  margin: 0 0 4px;
  color: #fff;
}

#ksn-medytacje .ksn-buy-card-price { display: flex; align-items: baseline; gap: 10px; margin: 0 0 20px; }
#ksn-medytacje .ksn-buy-card-price strong { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
#ksn-medytacje .ksn-buy-card-price s { font-size: 16px; color: rgba(255, 255, 255, 0.55); }

#ksn-medytacje .ksn-buy-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 18px 0 14px;
}

#ksn-medytacje .ksn-buy-methods span {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.14);
  border-radius: 7px;
  padding: 5px 9px;
}

/* ---- switch pack ---- */

#ksn-medytacje .ksn-buy-switch { margin-top: 18px; padding: 0 4px; }

#ksn-medytacje .ksn-buy-switch h2 {
  font-size: 12px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  margin: 0 0 10px;
}

#ksn-medytacje .ksn-buy-switch ul { list-style: none; margin: 0; padding: 0; }

#ksn-medytacje .ksn-buy-switch a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  margin-bottom: 7px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 14.5px;
  text-decoration: none;
  transition: background 0.16s ease;
}

#ksn-medytacje .ksn-buy-switch a:hover { background: rgba(255, 255, 255, 0.18); }
#ksn-medytacje .ksn-buy-switch strong { font-weight: 800; }

@media (max-width: 980px) {
  #ksn-medytacje .ksn-buy-layout { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  /* Card first on mobile: price and the e-mail step within reach. */
  #ksn-medytacje .ksn-buy-aside { position: static; order: -1; }
  #ksn-medytacje .ksn-buy-head { flex-direction: column; align-items: flex-start; gap: 18px; }
}

@media (max-width: 560px) {
  #ksn-medytacje .ksn-buy-covers { align-self: center; }
  #ksn-medytacje .ksn-buy-row { gap: 11px; padding: 9px 10px; }
  #ksn-medytacje .ksn-buy-thumb { flex-basis: 44px; width: 44px; height: 44px; }
  #ksn-medytacje .ksn-buy-sample span { display: none; }
  #ksn-medytacje .ksn-buy-steps li { padding-left: 42px; }
}