/* ==========================================================================
   Vytiskni a jeď — beztabletu.cz
   Brand: krémová #FFF8EE · inkoustová #2D3142 · korálová #FF6B57 (jen CTA)
   Fonty: Baloo 2 (nadpisy) + Nunito (text)
   ========================================================================== */

:root {
  --koral: #FF6B57;
  --koral-tmava: #E8543F;
  --slunecnice: #FFC93C;
  --tyrkys: #2EC4B6;
  --tyrkys-svetla: #E0F5F3;
  --zelena: #8AC926;
  --levandule: #9B87F5;
  --kremova: #FFF8EE;
  --inkoust: #2D3142;
  --seda: #E8E4DC;
  --bila: #FFFFFF;

  --font-nadpis: "Baloo 2", cursive;
  --font-text: "Nunito", sans-serif;

  --radius-s: 12px;
  --radius-m: 20px;
  --radius-l: 32px;
  --stin: 0 6px 24px rgba(45, 49, 66, 0.08);
  --stin-karta: 0 4px 16px rgba(45, 49, 66, 0.07);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.65;
  color: var(--inkoust);
  background: var(--kremova);
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-nadpis);
  font-weight: 800;
  line-height: 1.15;
  color: var(--inkoust);
}

h1 { font-size: clamp(2rem, 6vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 4.5vw, 2.4rem); margin-bottom: 0.6em; }
h3 { font-size: clamp(1.15rem, 3vw, 1.4rem); }

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

a { color: var(--tyrkys); }

.container {
  width: min(1100px, 100% - 2.5rem);
  margin-inline: auto;
}

.container--uzsi { width: min(760px, 100% - 2.5rem); }

section { padding: clamp(3rem, 7vw, 5.5rem) 0; position: relative; }

.zvyrazneni { color: var(--koral); }
.zvyrazneni--tyrkys { color: var(--tyrkys); }

/* --------------------------------------------------------------------------
   Tlačítka
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-nadpis);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--bila);
  background: var(--koral);
  border: none;
  border-radius: 999px;
  padding: 0.9em 2.2em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 6px 0 rgba(232, 84, 63, 0.55), 0 10px 24px rgba(255, 107, 87, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 0 rgba(232, 84, 63, 0.55), 0 14px 28px rgba(255, 107, 87, 0.4);
}

.btn:active {
  transform: translateY(2px);
  box-shadow: 0 3px 0 rgba(232, 84, 63, 0.55), 0 6px 14px rgba(255, 107, 87, 0.3);
}

.btn--vedlejsi {
  background: var(--bila);
  color: var(--inkoust);
  border: 2px solid var(--seda);
  box-shadow: none;
  font-size: 1rem;
}

.btn--vedlejsi:hover { border-color: var(--tyrkys); box-shadow: none; }

.cta-poznamka {
  margin-top: 0.9rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: rgba(45, 49, 66, 0.7);
}

/* --------------------------------------------------------------------------
   Lepicí vršek (urgenční lišta + hlavička dohromady)
   -------------------------------------------------------------------------- */
.lepici-vrsek {
  position: sticky;
  top: 0;
  z-index: 50;
}

/* --------------------------------------------------------------------------
   Urgenční lišta
   -------------------------------------------------------------------------- */
.urgence-lista {
  background: var(--slunecnice);
  border-bottom: 1px solid rgba(45, 49, 66, 0.12);
}

.urgence-lista__vnitrek {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.55rem 0;
  text-align: center;
}

.urgence-lista p {
  font-family: var(--font-nadpis);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--inkoust);
  margin: 0;
}

.urgence-lista .js-countdown {
  font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 6px;
  padding: 0.05em 0.4em;
}

.urgence-lista__zavrit {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: none;
  background: rgba(45, 49, 66, 0.12);
  border-radius: 50%;
  color: var(--inkoust);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.urgence-lista__zavrit:hover { background: rgba(45, 49, 66, 0.22); }

@media (max-width: 640px) {
  .urgence-lista p { font-size: 0.78rem; }
  .urgence-lista__vnitrek { gap: 0.6rem; padding: 0.5rem 0; }
}

/* --------------------------------------------------------------------------
   Hlavička
   -------------------------------------------------------------------------- */
.hlavicka {
  background: rgba(255, 248, 238, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--seda);
}

.hlavicka__vnitrek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 0;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-nadpis);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--inkoust);
  text-decoration: none;
}

.logo svg { width: 38px; height: 38px; }

.hlavicka .btn { font-size: 0.95rem; padding: 0.55em 1.4em; box-shadow: none; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
  background:
    radial-gradient(ellipse 60% 50% at 85% 10%, rgba(46, 196, 182, 0.10), transparent 70%),
    radial-gradient(ellipse 50% 40% at 10% 90%, rgba(255, 201, 60, 0.12), transparent 70%),
    var(--kremova);
}

.hero__mrizka {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 900px) {
  .hero__mrizka { grid-template-columns: 1.1fr 0.9fr; }
}

.hero__stitek {
  display: inline-block;
  font-weight: 700;
  font-size: 0.95rem;
  background: var(--tyrkys-svetla);
  color: #17877c;
  border-radius: 999px;
  padding: 0.35em 1.1em;
  margin-bottom: 1.1rem;
}

.hero h1 { margin-bottom: 1rem; }

.hero__podnadpis { font-size: 1.15rem; max-width: 34em; }

.hero__hlasky {
  list-style: none;
  margin: 1.4rem 0 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.hero__hlasky li {
  font-family: var(--font-nadpis);
  font-weight: 700;
  font-size: 0.98rem;
  background: var(--bila);
  border: 2px solid var(--seda);
  border-radius: 999px;
  padding: 0.3em 1em;
  transform: rotate(-1deg);
}

.hero__hlasky li:nth-child(2n) { transform: rotate(1.2deg); border-color: rgba(46, 196, 182, 0.45); }
.hero__hlasky li:nth-child(3n) { border-color: rgba(255, 201, 60, 0.6); }

.hero__souhrn { margin-bottom: 1.8rem; max-width: 34em; }

/* vějíř vytištěných stránek */
.vejir {
  position: relative;
  height: clamp(340px, 42vw, 480px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.vejir::before {
  content: "";
  position: absolute;
  inset: 8% 4%;
  background: var(--tyrkys);
  opacity: 0.14;
  border-radius: 46% 54% 55% 45% / 52% 46% 54% 48%;
}

.vejir__list {
  position: absolute;
  width: clamp(150px, 19vw, 215px);
  background: var(--bila);
  border-radius: 10px;
  padding: 7px;
  box-shadow: 0 10px 30px rgba(45, 49, 66, 0.18);
  transition: transform 0.25s ease;
}

.vejir__list img { border-radius: 5px; }

.vejir__list--1 { transform: rotate(-10deg) translate(-58%, 2%); z-index: 1; }
.vejir__list--2 { transform: rotate(1deg) translateY(-4%); z-index: 2; }
.vejir__list--3 { transform: rotate(11deg) translate(58%, 4%); z-index: 1; }

.vejir:hover .vejir__list--1 { transform: rotate(-13deg) translate(-64%, 0); }
.vejir:hover .vejir__list--3 { transform: rotate(14deg) translate(64%, 2%); }

.vejir__drobek {
  position: absolute;
  width: 36px;
  height: 36px;
  user-select: none;
}

.vejir__drobek svg { width: 100%; height: 100%; }

/* washi páska na vytištěných listech */
.vejir__list::after {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  width: 62px;
  height: 22px;
  transform: translateX(-50%) rotate(-3deg);
  background: rgba(255, 201, 60, 0.6);
  border-radius: 3px;
}

.vejir__list--1::after { background: rgba(46, 196, 182, 0.5); transform: translateX(-50%) rotate(5deg); }
.vejir__list--3::after { background: rgba(255, 107, 87, 0.45); transform: translateX(-50%) rotate(-6deg); }

.vejir__drobek--1 { top: 6%; left: 12%; transform: rotate(-12deg); }
.vejir__drobek--2 { bottom: 10%; right: 8%; transform: rotate(10deg); }
.vejir__drobek--3 { top: 12%; right: 16%; }

/* --------------------------------------------------------------------------
   Vlnky mezi sekcemi
   -------------------------------------------------------------------------- */
.vlnka { display: block; width: 100%; height: 48px; }

/* --------------------------------------------------------------------------
   Sekce ukázek
   -------------------------------------------------------------------------- */
.sekce--tyrkys { background: var(--tyrkys-svetla); }

.sekce__uvod { text-align: center; max-width: 620px; margin-inline: auto; margin-bottom: 2.5rem; }

/* podtržení nadpisů „fixou“ */
.sekce__uvod h2 {
  padding-bottom: 0.35em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='10' viewBox='0 0 150 10'%3E%3Cpath d='M3 7 Q 15 1 28 6 T 53 6 T 78 6 T 103 6 T 128 6 T 147 5' fill='none' stroke='%23FFC93C' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") bottom center / 150px 10px no-repeat;
}

.ukazky {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (min-width: 700px) { .ukazky { grid-template-columns: repeat(4, 1fr); gap: 1.3rem; } }

.ukazka {
  position: relative;
  background: var(--bila);
  border-radius: var(--radius-s);
  padding: 8px 8px 12px;
  box-shadow: var(--stin-karta);
  transition: transform 0.2s ease;
  --nakloneni: 0deg;
  transform: rotate(var(--nakloneni));
}

.ukazka:nth-child(4n+1) { --nakloneni: -1.1deg; }
.ukazka:nth-child(4n+2) { --nakloneni: 0.8deg; }
.ukazka:nth-child(4n+3) { --nakloneni: -0.6deg; }
.ukazka:nth-child(4n+4) { --nakloneni: 1.2deg; }

/* washi páska na náhledech */
.ukazka::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  width: 52px;
  height: 18px;
  transform: translateX(-50%) rotate(-4deg);
  background: rgba(255, 201, 60, 0.55);
  border-radius: 3px;
  z-index: 1;
}

.ukazka:nth-child(4n+2)::before { background: rgba(46, 196, 182, 0.45); transform: translateX(-50%) rotate(4deg); }
.ukazka:nth-child(4n+3)::before { background: rgba(255, 107, 87, 0.4); transform: translateX(-50%) rotate(-2deg); }
.ukazka:nth-child(4n+4)::before { background: rgba(155, 135, 245, 0.4); transform: translateX(-50%) rotate(5deg); }

.ukazka:hover { transform: translateY(-5px) rotate(0deg); }

.ukazka img { border-radius: 8px; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; width: 100%; }

.ukazka figcaption {
  font-family: var(--font-nadpis);
  font-weight: 700;
  font-size: 0.88rem;
  text-align: center;
  padding-top: 0.5rem;
}

.ukazky-dovetek {
  text-align: center;
  max-width: 540px;
  margin: 2.2rem auto 1.6rem;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Znáš to?
   -------------------------------------------------------------------------- */
.znas-to__bubliny {
  list-style: none;
  display: grid;
  gap: 0.9rem;
  max-width: 560px;
  margin: 0 auto 2rem;
}

.znas-to__bubliny li {
  position: relative;
  background: var(--bila);
  border-radius: var(--radius-m);
  padding: 0.9rem 1.4rem;
  box-shadow: var(--stin-karta);
  font-weight: 700;
  font-family: var(--font-nadpis);
  transform: rotate(-0.5deg);
  margin-right: 2.5rem;
}

/* ocásek bubliny */
.znas-to__bubliny li::after {
  content: "";
  position: absolute;
  bottom: -9px;
  left: 22px;
  border: 10px solid transparent;
  border-top: 12px solid var(--bila);
  border-bottom: 0;
}

.znas-to__bubliny li:nth-child(2n) {
  transform: rotate(0.6deg);
  margin-left: 2.5rem;
  margin-right: 0;
}

.znas-to__bubliny li:nth-child(2n)::after {
  left: auto;
  right: 22px;
}

.znas-to__text { text-align: center; max-width: 520px; margin-inline: auto; }

/* --------------------------------------------------------------------------
   Moduly (Co dostaneš uvnitř)
   -------------------------------------------------------------------------- */
.moduly {
  display: grid;
  gap: 1.3rem;
  margin-top: 2.5rem;
}

@media (min-width: 780px) { .moduly { grid-template-columns: repeat(2, 1fr); } }

.modul {
  position: relative;
  overflow: hidden;
  background: var(--bila);
  border-radius: var(--radius-m);
  padding: 1.6rem 1.7rem;
  box-shadow: var(--stin-karta);
  --modul-barva: var(--tyrkys);
  border-top: 6px solid var(--modul-barva);
}

/* velké „duchové“ číslo v rohu karty */
.modul::after {
  content: attr(data-cislo);
  position: absolute;
  top: -1.6rem;
  right: 0.3rem;
  font-family: var(--font-nadpis);
  font-weight: 800;
  font-size: 6.5rem;
  line-height: 1;
  color: var(--modul-barva);
  opacity: 0.13;
  pointer-events: none;
}

.modul--koral { --modul-barva: var(--koral); }
.modul--slunecnice { --modul-barva: var(--slunecnice); }
.modul--levandule { --modul-barva: var(--levandule); }
.modul--tyrkys { --modul-barva: var(--tyrkys); }
.modul--zelena { --modul-barva: var(--zelena); }

.modul__cislo {
  display: inline-block;
  font-family: var(--font-nadpis);
  font-weight: 800;
  font-size: 0.9rem;
  background: var(--kremova);
  border-radius: 8px;
  padding: 0.15em 0.7em;
  margin-bottom: 0.6rem;
}

.modul h3 { margin-bottom: 0.5rem; }

.modul__hlasky {
  font-family: var(--font-nadpis);
  font-weight: 700;
  font-size: 0.95rem;
  color: rgba(45, 49, 66, 0.75);
  margin: 0.6rem 0;
}

/* struktura složek */
.slozky {
  background: var(--bila);
  border-radius: var(--radius-m);
  box-shadow: var(--stin-karta);
  max-width: 560px;
  margin: 2.8rem auto 0;
  overflow: hidden;
}

.slozky__horni-lista {
  display: flex;
  gap: 6px;
  padding: 0.7rem 1rem;
  background: var(--tyrkys-svetla);
  border-bottom: 1px solid var(--seda);
}

.slozky__horni-lista span {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--seda);
}

.slozky__horni-lista span:first-child { background: var(--koral); }
.slozky__horni-lista span:nth-child(2) { background: var(--slunecnice); }
.slozky__horni-lista span:nth-child(3) { background: var(--zelena); }

.slozky ul { list-style: none; padding: 0.8rem 0.6rem; }

.slozky li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-weight: 700;
  padding: 0.55rem 0.9rem;
  border-radius: 10px;
}

.slozky li:hover { background: var(--kremova); }

.slozky li svg { width: 22px; height: 22px; flex-shrink: 0; }

.slozky li.slozky__bonus { color: #7a63d8; }

/* --------------------------------------------------------------------------
   Typy aktivit
   -------------------------------------------------------------------------- */
.aktivity-stitky {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  max-width: 640px;
  margin: 0 auto 2rem;
}

.aktivity-stitky li {
  font-family: var(--font-nadpis);
  font-weight: 700;
  background: var(--bila);
  border: 2px solid var(--seda);
  border-radius: 999px;
  padding: 0.35em 1.1em;
}

.aktivity-stitky li:nth-child(3n+1) { border-color: rgba(46, 196, 182, 0.5); }
.aktivity-stitky li:nth-child(3n+2) { border-color: rgba(255, 201, 60, 0.65); }

.aktivity__dovetek { text-align: center; font-weight: 600; max-width: 460px; margin-inline: auto; }

/* --------------------------------------------------------------------------
   Jak to funguje
   -------------------------------------------------------------------------- */
.kroky {
  display: grid;
  gap: 1.5rem;
  margin-top: 2.5rem;
}

@media (min-width: 700px) { .kroky { grid-template-columns: repeat(3, 1fr); } }

.krok {
  position: relative;
  text-align: center;
  background: var(--bila);
  border-radius: var(--radius-m);
  padding: 2rem 1.5rem;
  box-shadow: var(--stin-karta);
}

/* čárkovaná cestička mezi kroky */
@media (min-width: 700px) {
  .krok:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 62px;
    right: -1.5rem;
    width: 1.5rem;
    border-top: 3px dashed rgba(46, 196, 182, 0.55);
  }
}

.krok__ikona {
  width: 78px; height: 78px;
  margin: 0 auto 1rem;
  border-radius: 46% 54% 55% 45% / 52% 46% 54% 48%;
  background: var(--tyrkys-svetla);
  display: grid;
  place-items: center;
}

.krok__ikona svg { width: 38px; height: 38px; }

/* razítko „Hotovo.“ */
.hotovo-razitko {
  display: inline-block;
  font-family: var(--font-nadpis);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--koral);
  border: 3px dashed var(--koral);
  border-radius: 12px;
  padding: 0.15em 0.9em;
  transform: rotate(-3deg);
}

.krok:nth-child(2) .krok__ikona { background: #FFF3D6; }
.krok:nth-child(3) .krok__ikona { background: #EEF7DB; }

.krok__cislo {
  font-family: var(--font-nadpis);
  font-weight: 800;
  color: var(--tyrkys);
  font-size: 0.95rem;
  display: block;
  margin-bottom: 0.2rem;
}

/* --------------------------------------------------------------------------
   Srovnání (zdarma vs. balíček)
   -------------------------------------------------------------------------- */
.srovnani {
  display: grid;
  gap: 1.3rem;
  margin-top: 2.2rem;
}

@media (min-width: 780px) { .srovnani { grid-template-columns: 1fr 1fr; } }

.srovnani__karta {
  border-radius: var(--radius-m);
  padding: 1.8rem;
  background: var(--bila);
  box-shadow: var(--stin-karta);
}

.srovnani__karta--spatne { border: 2px dashed var(--seda); background: transparent; box-shadow: none; }

.srovnani__karta--dobre { border: 2px solid rgba(46, 196, 182, 0.4); }

.srovnani__karta h3 { margin-bottom: 1rem; }

.srovnani__karta ul { list-style: none; display: grid; gap: 0.55rem; }

.srovnani__karta li { padding-left: 1.8rem; position: relative; font-weight: 600; }

.srovnani__karta--spatne li::before { content: "✗"; position: absolute; left: 0; color: #c9705f; font-weight: 800; }

.srovnani__karta--dobre li::before { content: "✓"; position: absolute; left: 0; color: var(--zelena); font-weight: 800; }

.srovnani__pointa {
  margin-top: 2rem;
  text-align: center;
  font-family: var(--font-nadpis);
  font-weight: 700;
  font-size: 1.25rem;
  max-width: 30em;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Pro koho
   -------------------------------------------------------------------------- */
.pro-koho {
  background: var(--bila);
  border-radius: var(--radius-l);
  box-shadow: var(--stin);
  padding: clamp(1.8rem, 4vw, 3rem);
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.pro-koho .hero__stitek { margin-bottom: 0.9rem; }

/* --------------------------------------------------------------------------
   Cena + co získáš
   -------------------------------------------------------------------------- */
.cena-box {
  background: var(--bila);
  border-radius: var(--radius-l);
  box-shadow: var(--stin);
  overflow: hidden;
  max-width: 780px;
  margin: 2.5rem auto 0;
}

.cena-box__seznam { padding: clamp(1.6rem, 4vw, 2.5rem); }

.cena-box__seznam ul { list-style: none; display: grid; gap: 0.7rem; }

.cena-box__seznam li { padding-left: 2rem; position: relative; font-weight: 600; }

.cena-box__seznam li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 1.35em; height: 1.35em;
  border-radius: 50%;
  background: #EEF7DB;
  color: #5c9411;
  font-weight: 800;
  font-size: 0.85em;
  display: grid;
  place-items: center;
}

.cena-box__cena {
  background: var(--kremova);
  border-top: 1px solid var(--seda);
  text-align: center;
  padding: clamp(1.6rem, 4vw, 2.4rem);
}

.cena-castka {
  font-family: var(--font-nadpis);
  font-weight: 800;
  font-size: clamp(2.6rem, 8vw, 3.6rem);
  color: var(--koral);
  line-height: 1;
  display: block;
  margin-bottom: 0.3rem;
}

.cena-popisek { font-weight: 700; margin-bottom: 1.4rem; }

.cena-urgence {
  display: inline-block;
  max-width: 100%;
  background: var(--tyrkys-svetla);
  border-radius: 999px;
  padding: 0.6em 1.2em;
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0 0 1.2rem;
}

.cena-urgence .js-countdown {
  font-family: var(--font-nadpis);
  font-variant-numeric: tabular-nums;
  color: var(--koral);
}

/* --------------------------------------------------------------------------
   Objednávka
   -------------------------------------------------------------------------- */
.objednavka { background: var(--tyrkys-svetla); }

.objednavka__formular {
  background: var(--bila);
  border-radius: var(--radius-l);
  box-shadow: var(--stin);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  max-width: 560px;
  margin: 2rem auto 0;
}

.pole { margin-bottom: 1.2rem; }

.pole label {
  display: block;
  font-weight: 700;
  margin-bottom: 0.35rem;
  font-size: 0.95rem;
}

.pole input[type="text"],
.pole input[type="email"] {
  width: 100%;
  font-family: var(--font-text);
  font-size: 1rem;
  padding: 0.8em 1em;
  border: 2px solid var(--seda);
  border-radius: var(--radius-s);
  background: var(--kremova);
  color: var(--inkoust);
  transition: border-color 0.15s ease;
}

.pole input:focus { outline: none; border-color: var(--tyrkys); background: var(--bila); }

.platba-moznosti { display: grid; gap: 0.6rem; }

.platba-moznosti label {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  border: 2px solid var(--seda);
  border-radius: var(--radius-s);
  padding: 0.75em 1em;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.platba-moznosti label:has(input:checked) { border-color: var(--tyrkys); background: var(--tyrkys-svetla); }

.platba-moznosti input { accent-color: var(--tyrkys); width: 18px; height: 18px; }

.platba-moznosti svg { width: 26px; height: 26px; flex-shrink: 0; }

.objednavka__formular .btn { width: 100%; margin-top: 0.4rem; }

.objednavka__pod-formularem {
  text-align: center;
  font-size: 0.92rem;
  font-weight: 600;
  color: rgba(45, 49, 66, 0.7);
  margin-top: 1rem;
}

.formular-zprava {
  display: none;
  background: #FFF3D6;
  border: 2px solid var(--slunecnice);
  border-radius: var(--radius-s);
  padding: 1rem 1.2rem;
  font-weight: 600;
  margin-top: 1.2rem;
}

.formular-zprava.zobrazit { display: block; }

/* --------------------------------------------------------------------------
   Garance
   -------------------------------------------------------------------------- */
.garance {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  text-align: center;
  max-width: 560px;
  margin-inline: auto;
}

.garance__ikona {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--bila);
  box-shadow: var(--stin-karta);
  display: grid;
  place-items: center;
}

.garance__ikona svg { width: 52px; height: 52px; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq { max-width: 720px; margin: 2.2rem auto 0; display: grid; gap: 0.8rem; }

.faq details {
  background: var(--bila);
  border-radius: var(--radius-m);
  box-shadow: var(--stin-karta);
  overflow: hidden;
}

.faq summary {
  font-family: var(--font-nadpis);
  font-weight: 700;
  font-size: 1.05rem;
  padding: 1.1rem 3rem 1.1rem 1.4rem;
  cursor: pointer;
  list-style: none;
  position: relative;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  position: absolute;
  right: 1.3rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: var(--tyrkys);
  transition: transform 0.2s ease;
}

.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }

.faq details > div { padding: 0 1.4rem 1.2rem; font-weight: 600; color: rgba(45, 49, 66, 0.85); }

/* --------------------------------------------------------------------------
   Závěr
   -------------------------------------------------------------------------- */
.zaver { text-align: center; }

.zaver__kroky {
  list-style: none;
  font-family: var(--font-nadpis);
  font-weight: 700;
  font-size: 1.2rem;
  margin: 1.6rem 0;
  display: grid;
  gap: 0.3rem;
}

.zaver__recap {
  background: var(--bila);
  border-radius: var(--radius-l);
  box-shadow: var(--stin);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  max-width: 640px;
  margin: 2.5rem auto 0;
}

.zaver__recap .cena-castka { font-size: 2.4rem; margin: 0.4rem 0 1.2rem; }

/* --------------------------------------------------------------------------
   Patička
   -------------------------------------------------------------------------- */
.paticka {
  background: var(--inkoust);
  color: rgba(255, 248, 238, 0.85);
  padding: 2.5rem 0 2rem;
  font-size: 0.95rem;
}

.paticka a { color: var(--kremova); text-decoration: underline; text-underline-offset: 3px; }

.paticka__mrizka {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.6rem;
}

.paticka .logo { color: var(--kremova); margin-bottom: 0.5rem; }

.paticka nav ul { list-style: none; display: grid; gap: 0.4rem; }

.paticka__copy { border-top: 1px solid rgba(255, 248, 238, 0.15); padding-top: 1.2rem; font-size: 0.85rem; }

/* --------------------------------------------------------------------------
   Cookie lišta
   -------------------------------------------------------------------------- */
.cookie-lista {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%) translateY(150%);
  width: min(680px, calc(100% - 2rem));
  background: var(--bila);
  border-radius: var(--radius-m);
  box-shadow: 0 12px 40px rgba(45, 49, 66, 0.25);
  padding: 1.3rem 1.5rem;
  z-index: 100;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.cookie-lista.zobrazit { transform: translateX(-50%) translateY(0); }

.cookie-lista h3 {
  font-size: 1.05rem;
  margin-bottom: 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.cookie-lista h3 svg { width: 28px; height: 28px; flex-shrink: 0; }

.cookie-lista p { font-size: 0.9rem; font-weight: 600; color: rgba(45, 49, 66, 0.8); margin-bottom: 1rem; }

.cookie-lista__tlacitka { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.cookie-lista .btn { font-size: 0.95rem; padding: 0.6em 1.5em; box-shadow: none; }

/* --------------------------------------------------------------------------
   Podstránky (právní texty)
   -------------------------------------------------------------------------- */
.pravni-obsah { padding: clamp(2.5rem, 6vw, 4rem) 0; }

.pravni-obsah h1 { margin-bottom: 0.4em; }

.pravni-obsah h2 { font-size: 1.35rem; margin-top: 1.8em; }

.pravni-obsah ul, .pravni-obsah ol { margin: 0 0 1em 1.4em; }

.pravni-obsah li { margin-bottom: 0.35em; }

.pravni-obsah table { border-collapse: collapse; width: 100%; margin-bottom: 1.2em; font-size: 0.95rem; }

.pravni-obsah th, .pravni-obsah td { border: 1px solid var(--seda); padding: 0.6em 0.8em; text-align: left; vertical-align: top; }

.pravni-obsah th { background: var(--tyrkys-svetla); font-family: var(--font-nadpis); }

.pravni-aktualizace { font-size: 0.9rem; color: rgba(45, 49, 66, 0.65); font-weight: 600; }

/* --------------------------------------------------------------------------
   Foto placeholdery
   Dočasné rámečky pro reálné fotky. Až bude fotka hotová, nahraď obsah
   <div class="foto-placeholder">...</div> obrázkem, např.:
   <img src="assets/img/photos/xxx.jpg" alt="…" class="foto-nahradni-trida">
   Rámeček i popisek pak smaž.
   -------------------------------------------------------------------------- */
.foto-placeholder {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  border: 2.5px dashed rgba(46, 196, 182, 0.55);
  background: repeating-linear-gradient(
    135deg,
    rgba(46, 196, 182, 0.06),
    rgba(46, 196, 182, 0.06) 10px,
    transparent 10px,
    transparent 20px
  ), var(--tyrkys-svetla);
  border-radius: var(--radius-m);
  padding: 1.6rem 1.4rem;
  color: #1f7d73;
}

.foto-placeholder svg { width: 34px; height: 34px; opacity: 0.65; flex-shrink: 0; }

.foto-placeholder__stitek {
  font-family: var(--font-nadpis);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  padding: 0.2em 0.8em;
}

.foto-placeholder__nazev {
  font-family: var(--font-nadpis);
  font-weight: 700;
  font-size: 1rem;
  color: var(--inkoust);
}

.foto-placeholder__popis {
  font-size: 0.88rem;
  font-weight: 600;
  max-width: 32em;
  color: #1f7d73;
}

/* velký banner (hero, koláž před cenou) */
.foto-placeholder--banner { min-height: 260px; }

/* střední (srovnání, Znáš to?) */
.foto-placeholder--stredni { aspect-ratio: 4 / 3; }

/* malý pruh v kartách modulů: ikona + text vedle sebe */
.foto-placeholder--maly {
  flex-direction: row;
  justify-content: flex-start;
  text-align: left;
  padding: 0.6rem 0.9rem;
  gap: 0.7rem;
  margin-bottom: 1rem;
  border-width: 2px;
  background: rgba(46, 196, 182, 0.08);
}

.foto-placeholder--maly svg { width: 24px; height: 24px; opacity: 0.7; }
.foto-placeholder--maly .foto-placeholder__nazev { font-size: 0.8rem; line-height: 1.3; font-weight: 700; }

.foto-caption {
  text-align: center;
  font-weight: 700;
  font-family: var(--font-nadpis);
  max-width: 32em;
  margin: 1.1rem auto 0;
}

/* --------------------------------------------------------------------------
   Animace při scrollu
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .odhalit {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  .odhalit.viditelne { opacity: 1; transform: none; }
}