:root {
  /* Dvojrežimový motív: oznamujeme UA, že máme vlastný svetlý aj tmavý variant.
     Prehliadače (Chrome, Edge, Samsung Internet) tak prestanú force-invertovať
     stránku a natívne ovládacie prvky sa prispôsobia aktuálnej preferencii. */
  color-scheme: light dark;
  --zirek-gold: #c76e82;
  --zirek-ink: #262b36;
  --zirek-muted: #5f6472;
  /* Papierová paleta – jemná studená škála (šedobiela), ladená aby neutrálne
     doplnila teplé akcenty (rose/sage/ochre) bez toho, aby strana pôsobila
     žltkasto. Hodnoty idú od takmer bielej po jemne šedú. */
  --zirek-cream: #eef0f3;
  --raja-paper: #eef0f3;
  --raja-paper-soft: #f8f9fb;
  --raja-paper-deep: #dde0e5;
  --raja-ink: #262b36;
  --raja-ink-soft: #3d4350;
  --raja-muted: #6b6f7c;
  --raja-rose: #c76e82;
  --raja-rose-deep: #a85267;
  --raja-rose-soft: #ecc8d1;
  --raja-sage: #7a9f93;
  --raja-sage-deep: #557a6f;
  --raja-ochre: #c9a66b;
  --raja-gold: #a5843d;
  --raja-gold-deep: #7f6730;
  --raja-gold-soft: #e7d9b4;
  --raja-font-display: 'Fraunces', 'brandon-grotesque', Georgia, serif;
  --raja-font-body: 'Inter', sans-serif;
  --zirek-font-display: var(--raja-font-display);
  --zirek-font-body: var(--raja-font-body);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

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

html,
body {
  margin: 0;
  min-height: 100%;
  min-height: 100dvh;
  background: var(--zirek-cream);
}

body {
  font-family: var(--zirek-font-body);
  color: var(--zirek-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--zirek-font-display);
}

.lp {
  --accent: var(--raja-rose);
  --accent-border: var(--raja-rose-deep);
  --accent-soft: var(--raja-rose-soft);
  --accent-alt: var(--raja-sage);
  --accent-alt-deep: var(--raja-sage-deep);
  --ink: var(--raja-ink);
  --ink-soft: var(--raja-ink-soft);
  --muted: var(--raja-muted);
  --paper: var(--raja-paper);
  --paper-soft: var(--raja-paper-soft);
  --paper-deep: var(--raja-paper-deep);
  --radius: 14px;
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  min-height: 100svh;
  overflow: clip;
  color: var(--ink);
  /* Pozadie: neutrálna svetlosivá škála s decentným vinetovaním.
     Teplé akcenty (ochre/rose) pôvodného motívu sú nahradené inkoustovou
     šedou s veľmi nízkou intenzitou, aby strana nepôsobila žltkasto. */
  background:
    radial-gradient(ellipse 140% 100% at 50% 50%, transparent 58%, color-mix(in oklch, var(--raja-ink) 10%, transparent) 100%),
    radial-gradient(circle at 92% 8%, color-mix(in oklch, var(--raja-ink) 5%, transparent), transparent 46%),
    radial-gradient(circle at 8% 92%, color-mix(in oklch, var(--raja-ink) 4%, transparent), transparent 44%),
    linear-gradient(158deg, var(--raja-paper-soft) 0%, var(--raja-paper) 55%, var(--raja-paper-deep) 100%);
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
}
.lp__pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Opacita znížená z 0.95 → 0.55: zachováva jemnú textúru papiera,
     ale neudieva šedobiele pozadie na teplý tón. */
  opacity: 0.55;
  mix-blend-mode: multiply;
  background-color: transparent;
  /* Všetky feColorMatrix hodnoty prepísané na neutrálnu šedú (R=G=B),
     aby pattern nevnášal do pozadia teplý (hnedý/ružový) nádych. */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.14 0 0 0 0 0.14 0 0 0 0 0.14 0 0 0 0.22 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='520' height='520'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2' seed='17' stitchTiles='stitch'/><feComponentTransfer><feFuncA type='discrete' tableValues='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55'/></feComponentTransfer><feColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.55 0 0 0 0 0.55 0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23p)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='480' height='480'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='2' seed='7' stitchTiles='stitch'/><feComponentTransfer><feFuncA type='discrete' tableValues='0 0 0 0 0 0 0 0 0 0 0 0 0.55 0.75'/></feComponentTransfer><feColorMatrix values='0 0 0 0 0.18 0 0 0 0 0.18 0 0 0 0 0.18 0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23s)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='760' height='760'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' seed='9' stitchTiles='stitch'/><feComponentTransfer><feFuncA type='table' tableValues='0 0 0 0 0.08 0.14'/></feComponentTransfer><feColorMatrix values='0 0 0 0 0.38 0 0 0 0 0.38 0 0 0 0 0.38 0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='640' height='640'><filter id='v'><feTurbulence type='fractalNoise' baseFrequency='0.015 0.45' numOctaves='2' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.22 0 0 0 0 0.22 0 0 0 0 0.22 0 0 0 0.14 0'/></filter><rect width='100%25' height='100%25' filter='url(%23v)'/></svg>");
  background-size: 260px 260px, 520px 520px, 480px 480px, 760px 760px, 640px 640px;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
  background-repeat: repeat, repeat, repeat, repeat, repeat;
}
.lp__shell {
  position: relative;
  z-index: 1;
  width: min(100% - 2rem, 72rem);
  margin: 0 auto;
  padding: 1.25rem 0 1.75rem;
}
.lp__content {
  display: grid;
  justify-items: center;
  gap: 1.25rem;
  width: 100%;
  min-width: 0;
}
.lp__stack {
  display: contents;
}
/* Mobilné poradie: header -> prehrávač -> nákup -> obálka -> partneri.
   Obálka ide až na koniec, pod tlačidlá nákupu, ako finálny vizuálny akcent. */
.lp__header       { order: 0; }
.lp__player-wrap  { order: 1; }
.lp__purchase     { order: 2; }
.lp__cover        { order: 3; }
.lp__footer       { order: 4; }

.lp__cover {
  position: relative;
  width: 100%;
  margin: 0;
  line-height: 0;
  border-radius: var(--radius);
  padding: 0.55rem;
  background: var(--paper-soft);
  box-shadow: 0 1px 0 color-mix(in oklch, var(--ink) 10%, transparent), 0 24px 48px -18px rgba(38, 43, 54, 0.28), 0 10px 28px -14px color-mix(in oklch, var(--accent) 55%, transparent);
}
.lp__cover-diamond {
  display: none;
}
.lp__cover-img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
  object-fit: contain;
  object-position: center;
  border-radius: calc(var(--radius) - 6px);
}
.lp__cover--has-image .lp__cover-img {
  display: block;
}
.lp__header {
  display: grid;
  gap: 0.55rem;
  width: 100%;
  text-align: left;
}
.lp__breadcrumb {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  margin: 0;
}
.lp__breadcrumb-label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  min-width: 0;
  font-family: var(--raja-font-display);
  font-size: clamp(1.3rem, 3.6vw, 1.45rem);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.15;
  color: var(--accent-alt-deep);
  font-variation-settings: "opsz" 48, "SOFT" 50;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lp__breadcrumb-label::before {
  content: "";
  flex-shrink: 0;
  width: 1.6rem;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.lp__title {
  margin: 0;
  font-family: var(--raja-font-display);
  font-weight: 500;
  font-size: clamp(1.85rem, 6.6vw, 2.15rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  font-variation-settings: "opsz" 72, "SOFT" 50;
}
/* FB chip (icon-only varianta) žije priamo vnútri <h1 class="lp__title">
   ako posledné "slovo". Vďaka tomu tečie spolu s textom nadpisu – na úzkej
   obrazovke sa prirodzene zalomí za posledným slovom mena, bez tlačidla
   do pravého okraja a bez stlačenia mena. */
/* Zavrieť kartu – pill v breadcrumb riadku na mieste, kde predtým sedel
   Facebook chip. Drží identický tvar a padding, ale neutrálnu paletu – nemá
   byť akčne nápadné, len dostupné. Hover sa jemne stmavuje bez farebného
   accentu, aby sa neplietlo s nákupnými CTA. */
.lp__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.7rem 0.28rem 0.42rem;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--ink) 14%, transparent);
  background: color-mix(in oklch, white 55%, var(--paper-soft));
  color: var(--ink-soft);
  font-family: var(--raja-font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  cursor: pointer;
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.lp__close:hover {
  color: var(--ink);
  border-color: color-mix(in oklch, var(--ink) 32%, transparent);
  background: color-mix(in oklch, white 70%, var(--paper-soft));
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -8px color-mix(in oklch, var(--ink) 45%, transparent);
}
.lp__close:focus-visible {
  outline: 2px solid color-mix(in oklch, var(--ink) 55%, transparent);
  outline-offset: 3px;
}
.lp__close-icon {
  display: inline-grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}
.lp__close-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.lp__close-text {
  line-height: 1;
  display: inline-block;
  transform: translateY(0.5px);
}
/* Facebook chip – diskrétna pill vpravo v breadcrumb riadku.
   Bez Facebook-modrej (clash s teplou paletou); hover sa jemne otepľuje k rose accentu. */
.lp__social {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.28rem 0.7rem 0.28rem 0.35rem;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--ink) 14%, transparent);
  background: color-mix(in oklch, white 55%, var(--paper-soft));
  color: var(--ink-soft);
  font-family: var(--raja-font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.lp__social {
  --fb-blue: #1877F2;
  --fb-blue-deep: #0b5ed7;
}
.lp__social:hover {
  color: var(--fb-blue-deep);
  border-color: color-mix(in oklch, var(--fb-blue) 55%, transparent);
  background: color-mix(in oklch, var(--fb-blue) 10%, white);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -8px color-mix(in oklch, var(--fb-blue) 75%, transparent);
}
.lp__social:focus-visible {
  outline: 2px solid var(--fb-blue);
  outline-offset: 3px;
}
.lp__social-icon {
  display: inline-grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}
.lp__social-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
}
.lp__social-text {
  line-height: 1;
  display: inline-block;
  transform: translateY(0.5px);
}
/* Icon-only varianta FB chipu – používa sa inline vnútri nadpisu autorky.
   Padding je symetrický zo všetkých strán (vznikne okrúhle "biele okno"
   okolo brandovej FB kružnice). Veľkosti sú zámerne malé, aby pill nerobil
   nadpisu "zub" a nenaťahoval line-height – chip má byť diskrétna značka
   pri mene, nie druhotné CTA. `vertical-align: middle` zarovná pill opticky
   na stred x-výšky písma; bez neho by sadol na baseline a vyčnieval
   nad nadpisom. */
.lp__social--icon-only {
  padding: 0.24rem;
  gap: 0;
  vertical-align: middle;
  /* Pri wrape má pill sadnúť priamo pod nadpis bez prečnievania – malá
     negatívna horná medzera zabráni, aby druhý riadok dostal navyše dych. */
  line-height: 0;
}
.lp__social--icon-only .lp__social-icon {
  width: 1.25rem;
  height: 1.25rem;
}
.lp__tagline {
  position: relative;
  margin: 0.5rem 0 0;
  padding-left: 0.9rem;
  font-family: var(--raja-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.02rem, 2.4vw, 1.2rem);
  line-height: 1.35;
  color: var(--ink-soft);
}
.lp__tagline::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  bottom: 0.25em;
  width: 2px;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0.65;
}
.lp__duration {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.15rem 0 0;
  padding: 0.3rem 0.75rem 0.3rem 0.55rem;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--accent) 32%, transparent);
  background: color-mix(in oklch, var(--accent) 7%, var(--paper-soft));
  font-family: var(--raja-font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-border);
}
.lp__duration-dot {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 18%, transparent);
}
.lp__description {
  margin: 0.4rem 0 0;
  font-family: var(--raja-font-body);
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--ink-soft);
}
.lp__player-wrap {
  width: 100%;
}
.lp__purchase {
  position: relative;
  display: grid;
  gap: 1rem;
  width: 100%;
  padding: 1.2rem 1.15rem 1.3rem;
  background: linear-gradient(180deg, color-mix(in oklch, var(--accent) 4%, var(--paper-soft)) 0%, var(--paper-soft) 55%);
  border-radius: var(--radius);
  border: 1px solid color-mix(in oklch, var(--ink) 10%, transparent);
  box-shadow: 0 14px 34px -16px rgba(38, 43, 54, 0.22), inset 0 1px 0 color-mix(in oklch, white 55%, transparent);
  overflow: hidden;
}
.lp__purchase::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-alt) 100%);
  opacity: 0.85;
}
.lp__purchase-head {
  display: grid;
  gap: 0.2rem;
  text-align: left;
}
.lp__purchase-label {
  margin: 0;
  font-family: var(--raja-font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-alt-deep);
}
.lp__purchase-title {
  margin: 0;
  font-family: var(--raja-font-display);
  font-style: normal;
  font-weight: 600;
  font-size: clamp(1.2rem, 2.4vw, 1.45rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  font-variation-settings: "opsz" 72, "SOFT" 50;
  overflow-wrap: anywhere;
}
.lp__purchase-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}
@media (max-width: 420px) {
  .lp__purchase-actions {
    grid-template-columns: 1fr;
  }
}
.lp__purchase-cta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.7rem;
  min-height: 3.3rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--accent-border);
  border-radius: 12px;
  text-decoration: none;
  font-family: var(--raja-font-body);
  color: var(--paper-soft);
  background: linear-gradient(165deg, color-mix(in oklch, var(--accent) 92%, white) 0%, var(--accent) 60%, var(--accent-border) 100%);
  box-shadow: 0 10px 22px -12px color-mix(in oklch, var(--accent) 80%, transparent), inset 0 1px 0 color-mix(in oklch, white 30%, transparent);
  transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.lp__purchase-cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 14px 26px -12px color-mix(in oklch, var(--accent) 85%, transparent), inset 0 1px 0 color-mix(in oklch, white 35%, transparent);
}
.lp__purchase-cta:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.lp__purchase-cta--secondary {
  color: var(--paper-soft);
  background: linear-gradient(165deg, var(--ink-soft) 0%, var(--ink) 100%);
  border-color: color-mix(in oklch, var(--ink) 85%, black);
  box-shadow: 0 10px 22px -14px rgba(14, 16, 22, 0.65), inset 0 1px 0 color-mix(in oklch, white 14%, transparent);
}
.lp__purchase-cta--secondary:hover {
  transform: translateY(-1px);
  filter: none;
  background: linear-gradient(165deg, color-mix(in oklch, var(--ink-soft) 85%, black) 0%, color-mix(in oklch, var(--ink) 90%, black) 100%);
  box-shadow: 0 14px 26px -14px rgba(14, 16, 22, 0.75), inset 0 1px 0 color-mix(in oklch, white 18%, transparent);
}
.lp__purchase-cta-icon {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: color-mix(in oklch, white 22%, transparent);
  color: currentColor;
}
.lp__purchase-cta-icon svg {
  display: block;
  width: 1.15rem;
  height: 1.15rem;
}
.lp__purchase-cta-text {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
  text-align: left;
  line-height: 1.2;
}
.lp__purchase-cta-title {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.005em;
}
.lp__purchase-cta-sub {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0.78;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lp__footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  width: 100%;
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in oklch, var(--ink) 10%, transparent);
}
.lp__footer-label {
  margin: 0;
  font-family: var(--raja-font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-alt-deep);
}
.lp__footer-plate {
  display: inline-flex;
  align-items: stretch;
  max-width: 100%;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid color-mix(in oklch, var(--ink) 22%, transparent);
  box-shadow: 0 1px 0 color-mix(in oklch, white 55%, transparent) inset, 0 10px 24px -14px rgba(38, 43, 54, 0.32), 0 2px 6px -3px rgba(38, 43, 54, 0.18);
  background: var(--paper-soft);
}
.lp__footer-plate-side {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 7.5rem;
  padding: 0.7rem 1.25rem;
  line-height: 0;
  text-decoration: none;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.lp__footer-plate-side:hover {
  filter: brightness(1.05);
}
.lp__footer-plate-side:active {
  transform: translateY(0.5px);
}
.lp__footer-plate-side:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.lp__footer-plate-side--light {
  background: linear-gradient(165deg, color-mix(in oklch, white 20%, var(--paper-soft)) 0%, var(--paper-soft) 100%);
  border-right: 1px solid color-mix(in oklch, var(--ink) 18%, transparent);
}
.lp__footer-plate-side--light:hover {
  filter: brightness(1.02);
}
.lp__footer-plate-side--dark {
  background: linear-gradient(165deg, var(--ink-soft) 0%, var(--ink) 100%);
  box-shadow: inset 1px 0 0 color-mix(in oklch, white 10%, transparent);
  padding-inline: 1.75rem;
}
.lp__footer-logo {
  display: block;
  width: auto;
  height: 1.35rem;
  object-fit: contain;
}
.lp__footer-logo--zirek {
  height: 1.25rem;
}
.lp__footer-logo--wisteria {
  height: 1.5rem;
}

.player {
  --accent: var(--raja-rose);
  --accent-border: var(--raja-rose-deep);
  --muted-light: color-mix(in oklch, var(--raja-ink) 55%, transparent);
  --paper: var(--raja-paper-soft);
  --radius: 14px;
  --player-pad-x: 1rem;
  --player-pad-y: 1.1rem;
  --player-pad-bottom: 1.2rem;
  position: relative;
  display: grid;
  gap: 1rem;
  width: 100%;
  padding: var(--player-pad-y) var(--player-pad-x) var(--player-pad-bottom);
  background: linear-gradient(165deg, var(--paper) 0%, color-mix(in oklch, var(--accent) 5%, var(--paper)) 100%);
  border-radius: var(--radius);
  border: 1px solid color-mix(in oklch, var(--raja-ink) 10%, transparent);
  box-shadow: 0 24px 48px -22px rgba(38, 43, 54, 0.28), inset 0 0 0 1px color-mix(in oklch, var(--accent) 10%, transparent);
}
.player:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
/* Dekoratívne ornamenty a skrytý <audio> element nesmú konzumovať gridové
   riadky v .player – inak gap: 1rem medzi nimi vytvorí zbytočnú medzeru
   nad prvým viditeľným obsahom (eyebrow „Vypočujte si príbeh"). */
.player__ornament {
  display: none;
}
.player > audio {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}
.player__error {
  display: none;
  margin: 0;
  color: #8a2f2f;
  font-size: 0.95rem;
}
.player.is-error .player__error {
  display: block;
}
.player.is-error .player__top, .player.is-error .player__timeline, .player.is-error .player__volume {
  display: none;
}
.player__top {
  display: grid;
  gap: 1.1rem;
}
.player__eyebrow {
  margin: 0;
  text-align: center;
  font-family: var(--raja-font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-alt-deep);
}
.player__visual {
  position: relative;
  width: 100%;
  height: clamp(6.75rem, 25vw, 8.25rem);
}
.player__waveform {
  position: absolute;
  inset: 0 3%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  overflow: hidden;
  pointer-events: none;
}
.player__bar {
  flex-shrink: 0;
  width: 3px;
  border-radius: 2px;
  background: color-mix(in oklch, var(--accent) 55%, transparent);
  opacity: 0.28;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}
.player__bar--played {
  background: var(--accent);
  opacity: 0.88;
}
.player__transport {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.player__play {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: clamp(5.5rem, 22vw, 6.75rem);
  height: clamp(5.5rem, 22vw, 6.75rem);
  margin: 0;
  padding: 0;
  border: 1px solid var(--accent-border);
  border-radius: 50%;
  color: var(--paper-soft);
  cursor: pointer;
  background: radial-gradient(circle at 30% 30%, color-mix(in oklch, var(--accent) 85%, white) 0%, var(--accent) 55%, var(--accent-border) 100%);
  box-shadow: 0 18px 36px -14px color-mix(in oklch, var(--accent) 70%, transparent), inset 0 1px 0 color-mix(in oklch, white 40%, transparent);
  transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.2s ease, box-shadow 0.2s ease;
}
/* Jemný "dýchajúci" prstenec láka oko, kým nič nehrá.
   Zmizne hneď ako sa prehrávanie spustí (.is-playing nižšie). */
.player__play::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid color-mix(in oklch, var(--accent) 55%, transparent);
  opacity: 0;
  pointer-events: none;
  animation: lp-play-pulse 2.6s ease-out infinite;
}
.player__play:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.player__play:disabled::before {
  display: none;
}
.player__play:hover:not(:disabled) {
  transform: scale(1.03);
  filter: brightness(1.05);
  box-shadow: 0 22px 42px -16px color-mix(in oklch, var(--accent) 78%, transparent), inset 0 1px 0 color-mix(in oklch, white 42%, transparent);
}
.player__play:active:not(:disabled) {
  transform: scale(0.98);
}
.player__play:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.player.is-playing .player__play::before,
.player.is-error .player__play::before {
  display: none;
}
@keyframes lp-play-pulse {
  0%   { transform: scale(0.95); opacity: 0; }
  40%  { opacity: 0.55; }
  100% { transform: scale(1.25); opacity: 0; }
}
.player__icon-slot {
  display: grid;
  place-items: center;
  width: 2.85rem;
  height: 2.85rem;
}
.player__icon {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}
.player__icon--play {
  transform: scale(1.2);
  transform-origin: center;
}
.player__icon--pause {
  display: none;
}
.player.is-playing .player__icon--play {
  display: none;
}
.player.is-playing .player__icon--pause {
  display: block;
}
.player__timeline {
  display: grid;
  width: 100%;
}
.player__range {
  --progress: 0%;
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 5px;
  margin: 0;
  border-radius: 999px;
  outline: none;
  cursor: pointer;
  background: linear-gradient(90deg, var(--accent) var(--progress), #e6dabd var(--progress));
}
.player__range::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 999px;
  background: transparent;
}
.player__range::-moz-range-track {
  height: 5px;
  border-radius: 999px;
  background: transparent;
  border: 0;
}
.player__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -5.5px;
  border-radius: 50%;
  border: 2px solid var(--paper);
  background: var(--accent);
  box-shadow: 0 2px 6px rgba(20, 15, 8, 0.35);
  cursor: pointer;
}
.player__range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--paper);
  background: var(--accent);
  box-shadow: 0 2px 6px rgba(20, 15, 8, 0.35);
  cursor: pointer;
}
.player__range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--accent);
}
.player__range:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--accent);
}
.player__times {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.65rem;
}
.player__time {
  min-width: 2.4rem;
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted-light);
}
.player__volume {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 0.35rem;
  padding-top: 1.1rem;
  border-top: 1px solid color-mix(in oklch, var(--accent) 22%, transparent);
}
/* Volume slider vyplní celú zvyšnú šírku bloku vedľa mute tlačidla,
   aby pôsobil ako plnohodnotná súčasť rozloženia a nekončil "v polovici". */
.player__volume .player__range {
  flex: 1 1 auto;
  min-width: 0;
}
.player__mute {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.15rem;
  height: 2.15rem;
  margin: 0;
  padding: 0;
  border: 1px solid color-mix(in oklch, var(--accent) 35%, transparent);
  border-radius: 50%;
  background: color-mix(in oklch, var(--accent) 12%, var(--paper));
  cursor: pointer;
}
.player__mute:hover {
  background: color-mix(in oklch, var(--accent) 20%, var(--paper));
}
.player__mute:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.player__mute-icon {
  width: 0.8rem;
  height: 0.95rem;
  clip-path: polygon(0 32%, 32% 32%, 68% 4%, 68% 96%, 32% 68%, 0 68%);
  background: var(--accent);
}
.player__mute-slash {
  position: absolute;
  display: none;
  width: 1.2rem;
  height: 1.5px;
  background: var(--accent);
  transform: rotate(-45deg);
}
.player__mute--muted .player__mute-slash {
  display: block;
}

@media (min-width: 768px) {
  .lp__shell {
    width: min(100% - 3rem, 78rem);
    min-height: 100dvh;
    padding: clamp(2rem, 4vw, 3rem) 0;
    display: flex;
    align-items: center;
  }
  .lp__content {
    display: grid;
    grid-template-columns: minmax(16rem, 0.9fr) minmax(22rem, 1.1fr);
    grid-template-areas: "cover stack";
    align-items: center;
    justify-items: stretch;
    column-gap: clamp(2rem, 4vw, 3.5rem);
    row-gap: 0;
    width: 100%;
  }
  .lp__stack {
    grid-area: stack;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 36rem;
    width: 100%;
    justify-self: start;
    align-self: center;
  }
  /* Na desktopi riadi poradie `grid-template-areas` – mobilné `order`
     deklarácie resetujeme, inak by sa prejavovali v stacku. */
  .lp__header,
  .lp__cover,
  .lp__player-wrap,
  .lp__purchase,
  .lp__footer {
    order: initial;
  }
  .lp__cover {
    grid-area: cover;
    width: min(100%, 28rem);
    justify-self: end;
    align-self: center;
    padding: 0.75rem;
    box-shadow: 0 1px 0 color-mix(in oklch, var(--ink) 12%, transparent), 0 44px 72px -28px rgba(38, 43, 54, 0.35), 0 14px 36px -16px color-mix(in oklch, var(--accent) 55%, transparent);
  }
  .lp__cover-img {
    border-radius: calc(var(--radius) - 7px);
  }
  .lp__header {
    max-width: none;
    justify-self: stretch;
    text-align: left;
    gap: 0.65rem;
  }
  .lp__duration {
    justify-self: start;
  }
  .lp__title {
    font-size: clamp(1.9rem, 3vw, 2.65rem);
  }
  .lp__description {
    margin: 0.4rem 0 0;
    font-size: 1.05rem;
    line-height: 1.7;
    max-width: 34rem;
  }
  .lp__player-wrap {
    max-width: none;
    width: 100%;
  }
  .lp__purchase {
    max-width: none;
    width: 100%;
    padding: 1.4rem 1.5rem 1.5rem;
    gap: 1.1rem;
  }
  .lp__purchase-title {
    font-size: clamp(1.25rem, 1.9vw, 1.5rem);
  }
  .lp__purchase-cta {
    min-height: 3.5rem;
    padding: 0.6rem 1rem;
  }
  .lp__purchase-cta-title {
    font-size: 0.98rem;
  }
  .lp__footer {
    max-width: none;
    width: 100%;
  }
  .player {
    --player-pad-x: 1.75rem;
    --player-pad-y: 1.5rem;
    --player-pad-bottom: 1.75rem;
    gap: 1.35rem;
  }
}
@media (min-width: 768px) and (max-width: 1099.98px) {
  .lp__shell {
    align-items: flex-start;
    padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  }
  .lp__content {
    grid-template-columns: minmax(12rem, 0.6fr) minmax(22rem, 1.4fr);
    column-gap: clamp(1.25rem, 2.5vw, 2rem);
    align-items: start;
  }
  .lp__cover {
    width: min(100%, 18rem);
    align-self: start;
    justify-self: end;
    padding: 0.6rem;
  }
  .lp__stack {
    align-self: start;
    max-width: none;
  }
}
@media (min-width: 1100px) {
  .lp__shell {
    width: min(100% - 4rem, 88rem);
  }
  .lp__content {
    grid-template-columns: minmax(20rem, 1fr) minmax(26rem, 1fr);
    column-gap: clamp(2.5rem, 5vw, 5rem);
  }
  .lp__cover {
    width: min(100%, 34rem);
  }
  .lp__stack {
    max-width: 40rem;
  }
}

/* Vypneme/zjemníme pohyb pre používateľov, ktorí si tak nastavili OS.
   Dôležité pre pohodu (motion sickness, migrény) bez straty funkcionality. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .lp__cover {
    transform: none !important;
  }
  .player__play::before {
    display: none !important;
  }
}

/* ===========================================================================
   Tmavý režim – "noc nad knihou"
   ===========================================================================
   Aktivuje sa automaticky pri systémovej preferencii tmavého režimu. Namiesto
   doslovnej inverzie navrhujeme večernú verziu toho istého retro obalu: teplý
   uhlíkový papier, krémový text, akcenty mierne rozjasnené pre AA kontrast.
   Textúra papiera (multiply) sa prepína na `screen`, inak by zanikla. */
@media (prefers-color-scheme: dark) {
  :root {
    --raja-paper: #1d1a22;
    --raja-paper-soft: #262330;
    --raja-paper-deep: #141218;

    --raja-ink: #f0e8d2;
    --raja-ink-soft: #d4ccb5;
    --raja-muted: #a19a86;

    --raja-rose: #e58ba1;
    --raja-rose-deep: #c76e82;
    --raja-rose-soft: #4a2a36;

    --raja-sage: #a3c7ba;
    --raja-sage-deep: #c4ded3;

    --raja-ochre: #dcb87f;
    --raja-gold: #d8b06d;
    --raja-gold-deep: #a5843d;
    --raja-gold-soft: #3a3220;

    --zirek-cream: #1d1a22;
    --zirek-ink: #f0e8d2;
    --zirek-muted: #a19a86;
    --zirek-gold: #e58ba1;
  }

  /* Zrnitá textúra z multiply (tmavá sepia) by na tmavom papieri splynula do
     čiernej – prepíname na `screen`, aby tmavé zrná pôsobili ako jemný prach. */
  .lp__pattern {
    opacity: 0.22;
    mix-blend-mode: screen;
  }

  /* Primárne CTA a tlačidlo Play držia krémový text aj v tmavom režime –
     prevrátené --paper-soft by inak dalo tmavý text na ružovú (slabý kontrast). */
  .lp__purchase-cta,
  .player__play {
    color: #faf3e2;
  }

  /* Veľké brandové ružové povrchy držia sýtu rose zo svetlej palety. V tmavom
     režime je `--raja-rose` zámerne zosvetlená (#e58ba1) kvôli rose-textu na
     tmavom papieri – no na tlačidlách s krémovou typo/ikonou by taká svetlá
     ružová spadla pod AA kontrast. Preto fixujeme hex zo svetlého variantu. */
  .lp__purchase-cta:not(.lp__purchase-cta--secondary),
  .lp__purchase-cta:not(.lp__purchase-cta--secondary):hover {
    background: linear-gradient(
      165deg,
      color-mix(in oklch, #c76e82 92%, white) 0%,
      #c76e82 60%,
      #a85267 100%
    );
    border-color: #a85267;
  }

  .player__play {
    background: radial-gradient(
      circle at 30% 30%,
      color-mix(in oklch, #c76e82 85%, white) 0%,
      #c76e82 55%,
      #a85267 100%
    );
    border-color: #a85267;
  }

  /* Sekundárne CTA sa prirodzene prevráti na svetlý panel – dávame mu tmavý text
     a doladíme okraj, aby držal AAA kontrast na krémovom pozadí tlačidla. */
  .lp__purchase-cta--secondary,
  .lp__purchase-cta--secondary:hover {
    color: #1a1820;
    border-color: color-mix(in oklch, var(--raja-ink-soft) 60%, black);
  }

  /* Pôvodný piesočný "neprehraný" track (#e6dabd) by na tmavom papieri svietil –
     nahrádzame tmavým teplým tónom odvodeným z inku a hlbokého papiera. */
  .player__range {
    background: linear-gradient(
      90deg,
      var(--accent) var(--progress),
      color-mix(in oklch, var(--raja-ink) 18%, var(--raja-paper-deep)) var(--progress)
    );
  }

  /* Obálka knihy: tiene prepíname na tmavé, aby ružový odlesk nepôsobil neónovo. */
  .lp__cover {
    box-shadow:
      0 1px 0 color-mix(in oklch, white 8%, transparent),
      0 24px 48px -18px rgba(0, 0, 0, 0.55),
      0 10px 28px -14px color-mix(in oklch, var(--accent) 45%, transparent);
  }

  /* -------------------------------------------------------------------------
     Loga a povrchy pod nimi – zámerne IDENTICKÉ so svetlým režimom.
     -------------------------------------------------------------------------
     Facebook chip, Zirek plaketa a Wisteria plaketa sú brandové povrchy
     navrhnuté pre konkrétne pozadie (Zirek čierne logo na kréme, Wisteria
     biele logo na tmavej). Ich prevrátenie by zničilo čitateľnosť log, takže
     tu používame hex hodnoty zo svetlého variantu, nie prepnuté tokeny. */

  .lp__social {
    background: color-mix(in oklch, white 55%, #faf3e2);
    border-color: color-mix(in oklch, #262b36 14%, transparent);
    color: #3d4350;
  }

  /* Zavrieť pill – v tmavom režime drží rovnaký teplý papierový povrch ako FB
     chip (žiadne prepnuté tokeny), aby vedľa seba pôsobili ako jedna rodina. */
  .lp__close {
    background: color-mix(in oklch, white 42%, #faf3e2);
    border-color: color-mix(in oklch, #262b36 18%, transparent);
    color: #3d4350;
  }
  .lp__close:hover {
    color: #1a1820;
    border-color: color-mix(in oklch, #262b36 40%, transparent);
    background: color-mix(in oklch, white 60%, #faf3e2);
    box-shadow: 0 6px 16px -8px rgba(38, 43, 54, 0.45);
  }
  .lp__close:focus-visible {
    outline-color: color-mix(in oklch, #262b36 55%, transparent);
  }

  .lp__footer-plate {
    background: #faf3e2;
    border-color: color-mix(in oklch, #262b36 22%, transparent);
    box-shadow:
      0 1px 0 color-mix(in oklch, white 55%, transparent) inset,
      0 10px 24px -14px rgba(38, 43, 54, 0.32),
      0 2px 6px -3px rgba(38, 43, 54, 0.18);
  }

  .lp__footer-plate-side--light {
    background: linear-gradient(
      165deg,
      color-mix(in oklch, white 20%, #faf3e2) 0%,
      #faf3e2 100%
    );
    border-right-color: color-mix(in oklch, #262b36 18%, transparent);
  }

  .lp__footer-plate-side--dark {
    background: linear-gradient(165deg, #3d4350 0%, #262b36 100%);
  }
}