/* Flor & Amor 24/7: v úvodu 3D květomat, pod ním klidná stránka podle jeho čela.
   Noc a plech nesou text, svítí jen to, co se dá použít: mapa a formulář jako prosvícené schránky.
   Růže z loga patří jediné hlavní akci, kytici na přání. */

@font-face {
  font-family: "EB Garamond";
  src: url("fonts/eb-garamond.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  /* noc ze scény */
  --nebe: #0f1430;
  --noc: #090b14;
  --plocha: #12141f;
  --patka: #06070d;
  /* plech a prosvícená schránka */
  --ocel: #a9b7b9;
  --ocel-svetla: #d3dbdc;
  --led: #f4f7f6;
  --inkoust: #12141a;
  --inkoust-2: #4c525c;
  --hrana-pole: #767f88;
  /* text na noci je LED s průhledností, ne šedá */
  --text: #f4f7f6;
  --text-2: rgba(244, 247, 246, 0.8);
  --text-3: rgba(244, 247, 246, 0.64);
  --cara: rgba(244, 247, 246, 0.16);
  --cara-silna: rgba(244, 247, 246, 0.36);
  /* růže z loga: jen kytice na přání */
  --ruze: #c7316d;
  --ruze-hover: #ad2a5f;
  --ruze-stisk: #9c2858;
  --ruze-svetla: #f7a3bc;
  /* lampa na parkovišti: fokus a hvězdy */
  --lampa: #ffc983;
  --hvezda: #ffc55c;
  --chyba: #ffadbd;
  --chyba-na-led: #ad1240;

  --font-napis: "EB Garamond", "Georgia", serif;
  --font-text: "Figtree", "Segoe UI", system-ui, sans-serif;
  --okraj: 20px;
  --sirka: 1280px;
  --roh: 12px;
  --mezera-sekci: clamp(76px, 10vw, 136px);
  --lista: 0px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: dark;
  accent-color: var(--ruze);
  scrollbar-color: #3a3e5e var(--noc);
}

*, *::before, *::after { box-sizing: border-box; }
/* přetažení přes okraj stránky na telefonu odhalí barvu nebe ze scény */
html { background: var(--nebe); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-bottom: calc(var(--lista) + 12px); }
body {
  margin: 0;
  background: var(--noc);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.55;
  caret-color: var(--lampa);
  overflow-x: clip;
}
::selection { background: var(--ruze); color: #fff; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
[hidden] { display: none !important; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
/* po klepnutí žádná šedá skvrna; vlastní odezvu nese :active */
a, button, summary, label, input, textarea { -webkit-tap-highlight-color: transparent; }
a, button, label { touch-action: manipulation; }
@media (hover: hover) { a:hover { text-decoration-color: var(--lampa); } }
:focus-visible { outline: 3px solid var(--lampa); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--font-napis); font-weight: 500; line-height: 1.06; letter-spacing: -0.015em; text-wrap: balance; margin: 0; }
p { margin: 0; text-wrap: pretty; }
.symboly { position: absolute; width: 0; height: 0; overflow: hidden; }
.preskocit { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; background: var(--led); color: var(--inkoust); border-radius: var(--roh); }
.preskocit:focus { top: 12px; }

/* tlačítka (tl = web, tlacitko = doplnit.html) */
.tl, .tlacitko {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 0 24px;
  border-radius: var(--roh);
  border: 1px solid transparent;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 180ms, border-color 180ms, color 180ms, transform 240ms var(--ease);
}
.tl:active, .tlacitko:active { transform: scale(0.98); transition-duration: 180ms, 180ms, 180ms, 60ms; }
.tl--hlavni, .tlacitko--hlavni { background: var(--ruze); color: #fff; }
.tl--hlavni:active, .tlacitko--hlavni:active { background: var(--ruze-stisk); }
/* navigace: prosvícená jako schránka, hlavní akce zůstává růžová */
.tl--led { background: var(--led); color: var(--inkoust); }
.tl--led:active { background: var(--ocel-svetla); }
.tl--obrys, .tlacitko--vedlejsi { background: transparent; color: var(--text); border-color: var(--cara-silna); }
.tl--obrys:active, .tlacitko--vedlejsi:active { background: rgba(244, 247, 246, 0.12); }
.tl--obrys-tmavy { background: transparent; color: var(--inkoust); border-color: var(--hrana-pole); }
@media (hover: hover) {
  .tl--hlavni:hover, .tlacitko--hlavni:hover { background: var(--ruze-hover); text-decoration: none; }
  .tl--led:hover { background: #fff; }
  .tl--obrys:hover, .tlacitko--vedlejsi:hover { background: rgba(244, 247, 246, 0.1); border-color: rgba(244, 247, 246, 0.6); }
  .tl--obrys-tmavy:hover { border-color: var(--inkoust); }
}
.tl:disabled, .tlacitko:disabled { opacity: 0.5; cursor: not-allowed; }

/* ===== úvod =====
   Mřížka rozdělí úvod na text, místo pro květomat a popisky, takže se nemůžou překrýt na žádné velikosti.
   Plakát květomatu je v mřížce vždycky; 3D plátno je pod ním přes celou plochu a kamera si z plakátu bere polohu. */
.scena {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  grid-template-areas: "hlava" "text" "misto" "napoveda" "postup";
  height: calc(100vh - var(--lista));
  height: calc(100svh - var(--lista));
  min-height: 500px;
  max-height: 1100px;
  padding: calc(10px + env(safe-area-inset-top)) var(--okraj) 10px;
  overflow: hidden;
  isolation: isolate;
  background: var(--nebe) url("img/pozadi.webp") 50% 100% / cover no-repeat;
  color: var(--text);
  pointer-events: none;
}
.scena a, .scena button, .scena__platno, .okno { pointer-events: auto; }
.hlava, .scena__text, .scena__akce, .scena__napoveda, .postup { position: relative; z-index: 2; }
.scena::after {
  /* úvod přechází do stránky bez švu */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 150px;
  z-index: 1;
  background: linear-gradient(180deg, rgba(9, 11, 20, 0), rgba(9, 11, 20, 0.86) 62%, var(--noc));
  pointer-events: none;
}
.scena::before {
  /* při otevřeném okně drží čitelnost značky nad přiblíženou skříní */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 104px;
  z-index: 1;
  background: linear-gradient(180deg, rgba(9, 11, 20, 0.92), rgba(9, 11, 20, 0.7) 55%, rgba(9, 11, 20, 0));
  opacity: 0;
  transition: opacity 300ms;
  pointer-events: none;
}
.ma-okno::before { opacity: 1; }
.scena__platno {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 500ms ease-out;
  touch-action: pan-y;
  cursor: grab;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.se-otaci .scena__platno { cursor: grabbing; }
.je-3d .scena__platno { opacity: 1; }

/* hlavička */
.hlava { grid-area: hlava; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.znacka { display: inline-flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; }
.znacka img { flex: none; width: 44px; height: 44px; border-radius: 50%; }
.znacka__text { display: grid; line-height: 1.15; }
.znacka__text strong { font-family: var(--font-napis); font-weight: 500; font-size: 1.0625rem; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.znacka__text span { margin-top: 2px; font-family: var(--font-napis); font-size: 1rem; color: var(--ruze-svetla); }
.hlava__nav { display: none; }
.hlava__telefon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: none;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--cara-silna);
  border-radius: var(--roh);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  white-space: nowrap;
  transition: background-color 180ms, border-color 180ms;
}
.hlava__telefon span { display: none; }
.hlava__telefon:active { background: rgba(244, 247, 246, 0.12); }

/* co to je a kde */
.scena__text { grid-area: text; margin-top: 8px; transition: opacity 300ms; }
/* nadpis roste s výškou obrazovky: na telefonu s lištou prohlížeče nechá místo květomatu */
.scena h1 { font-size: clamp(1.75rem, 5.2svh - 2px, 2.5rem); line-height: 1.04; letter-spacing: -0.018em; }
.scena__popis { margin-top: 5px; color: var(--text-2); font-size: 0.9375rem; line-height: 1.35; }
.scena__popis a { color: var(--text); font-weight: 500; }

/* místo pro květomat a plakát */
.scena__misto {
  grid-area: misto;
  position: relative;
  z-index: 1;
  container-type: size;
  display: grid;
  place-items: end center;
  min-height: 0;
  /* na telefonu květomat skoro přes celou šířku, pod ním kousek dlažby */
  margin: 10px calc(8px - var(--okraj)) 24px;
}
.foto-automat { position: relative; width: 100%; width: min(100cqw, 100cqh * 1.1933); aspect-ratio: 1420 / 1190; }
.foto-automat__img {
  display: block;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 0 2px #14161a;
  border-radius: 3px;
  transition: opacity 500ms ease-out 300ms;
}
.foto-automat::after {
  /* odraz na dlažbě, dokud neběží 3D */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 3px);
  height: 26px;
  background: url("img/odraz.webp") 50% 0 / 100% 240px no-repeat;
  -webkit-mask-image: linear-gradient(#000, transparent);
  mask-image: linear-gradient(#000, transparent);
  mix-blend-mode: screen;
  transition: opacity 500ms ease-out 300ms, visibility 0s linear 800ms;
  pointer-events: none;
}
.je-3d .foto-automat__img, .je-3d .foto-automat::after { opacity: 0; }
/* odraz s prolnutím se pod plátnem nemá kreslit, když už je 3D hotové */
.je-3d .foto-automat::after { visibility: hidden; }
.bod {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--led);
  cursor: pointer;
  transition: border-color 160ms;
}
/* prodaná schránka na plakátu; ve 3D je vidět prázdný vnitřek */
.bod.je-prazdna { background: rgba(8, 9, 20, 0.72); }
.je-3d .bod.je-prazdna { background: transparent; }
/* číslo schránky na plakátu; ve 3D ho nese přímo skříň */
.bod span {
  position: absolute;
  left: 3px;
  bottom: 3px;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #101215;
  box-shadow: 0 0 0 1px var(--led);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
}
.je-3d .bod span { opacity: 0; }
@media (hover: hover) { .bod:hover { border-color: rgba(255, 201, 131, 0.8); } }
.bod:focus-visible { outline: 3px solid var(--lampa); outline-offset: 2px; }
/* nad 3D scénou tlačítka slouží jen klávesnici a čtečkám, myš a prst jdou na plátno */
.je-3d .bod { pointer-events: none; }
@media (hover: hover) { .je-3d .bod:hover { border-color: transparent; } }

/* popisky přímo na skříni: drží se svého místa i při otáčení; číslované jsou jen schránky */
.pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 2;
  transform: translate(-50%, -50%);
  padding: 1px 6px;
  border-radius: 5px;
  background: rgba(9, 11, 20, 0.86);
  color: var(--led);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 240ms;
}
.ma-okno .pin { opacity: 0; }
.ma-okno--platba .pin { opacity: 1; }

/* čísla kroků: na stránce stejná, aby kroky v úvodu, na fotce a v okně vypadaly jako jedna věc */
.postup b, .jak__bod, .kroky li::before, .okno__postup li::before {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--led);
  color: var(--inkoust);
  font-size: 0.8125rem;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  font-variant-numeric: lining-nums;
}

/* popisek schránky pod kurzorem */
.stitek {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: max-content;
  max-width: min(340px, 90%);
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--plocha);
  box-shadow: 0 6px 18px rgba(4, 5, 14, 0.7);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
  pointer-events: none;
}

/* nápověda a nákup ve třech krocích */
.scena__napoveda { grid-area: napoveda; text-align: center; font-size: 0.9375rem; line-height: 1.3; transition: opacity 300ms; }
.jen-mys, .jen-sirsi { display: none; }
@media (hover: hover) and (pointer: fine) { .jen-mys { display: inline; } .jen-prst { display: none; } }
.postup {
  grid-area: postup;
  list-style: none;
  margin: 8px 0 0;
  padding: 8px 0 0;
  border-top: 1px solid var(--cara);
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: space-between;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25;
  transition: opacity 300ms;
}
.postup li { display: grid; grid-template-columns: 20px auto; gap: 6px; align-items: start; }
.scena__akce { display: none; grid-area: akce; gap: 10px; transition: opacity 300ms; }
.ma-okno .scena__akce, .ma-okno .scena__napoveda, .ma-okno .scena__text, .ma-okno .postup { opacity: 0; pointer-events: none; transition: opacity 180ms ease-in; }
.ma-okno .scena__akce a, .ma-okno .scena__text a { pointer-events: none; }
/* po zavření okna se text vrátí, až kamera skoro odjede, jinak by chvíli ležel přes přiblížený květomat */
.je-3d:not(.ma-okno) .scena__akce, .je-3d:not(.ma-okno) .scena__napoveda, .je-3d:not(.ma-okno) .scena__text, .je-3d:not(.ma-okno) .postup, .je-3d:not(.ma-okno) .pin { transition: opacity 260ms ease-out 700ms; }

/* okno nad scénou: na telefonu spodní list, na počítači panel vpravo */
.okno {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  max-height: 66%;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 20px var(--okraj) 16px;
  background: var(--plocha);
  color: var(--text);
  border-top: 1px solid var(--cara-silna);
  border-radius: 16px 16px 0 0;
  animation: okno-prijezd 480ms var(--ease);
  transition: transform 340ms var(--ease);
  will-change: transform;
}
.okno.odjizdi { animation: okno-odjezd 240ms cubic-bezier(0.4, 0, 1, 1) forwards; pointer-events: none; }
@keyframes okno-prijezd {
  from { transform: translateY(100%); }
}
@keyframes okno-odjezd {
  to { transform: translateY(100%); }
}
/* úchyt spodního listu; list jde stáhnout dolů za něj nebo za nadpis */
.okno__uchop { position: absolute; top: 0; left: 0; right: 64px; height: 30px; touch-action: none; cursor: grab; }
.okno__uchop::before { content: ""; position: absolute; top: 8px; left: calc(50% + 32px - 18px); width: 36px; height: 4px; border-radius: 2px; background: var(--cara-silna); }
.okno__obsah { min-width: 0; }
.okno__nadpis { font-size: 1.75rem; padding-right: 44px; touch-action: none; }
.okno__nadpis:focus { outline: none; }
.okno__text { margin-top: 6px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; font-size: 1rem; line-height: 1.4; }
.okno__text p, .okno__text li { color: var(--text-2); }
.okno__text .okno__kytice { color: var(--text); font-size: 1.0625rem; font-weight: 500; }
.okno__text .okno__cena { color: var(--lampa); font-weight: 600; font-variant-numeric: tabular-nums; }
.okno__text .okno__pozn { color: var(--text-3); font-size: 0.875rem; }
.okno__text .vetsi { color: var(--text); font-size: 1rem; line-height: 1.45; }
.okno__postup, .okno .kroky { order: 0; list-style: none; margin: 2px 0 0; padding: 8px 0 0; border-top: 1px solid var(--cara); counter-reset: krok; display: grid; gap: 6px; }
.okno__postup li { counter-increment: krok; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; }
.okno__postup li::before { content: counter(krok); }
.okno .kroky li { padding: 0; border: 0; grid-template-columns: 22px minmax(0, 1fr); column-gap: 8px; }
.okno .kroky li:last-child { border: 0; }
.okno .kroky li::before { width: 22px; height: 22px; font-size: 0.8125rem; }
.okno .kroky h3 { font-family: var(--font-text); font-size: 1rem; font-weight: 500; letter-spacing: 0; line-height: 1.4; color: var(--text); }
.okno .kroky p { display: none; }
.okno__akce { display: none; gap: 8px; margin-top: 4px; }
.okno__akce .tl { width: 100%; }
.okno__zavrit {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: background-color 160ms, color 160ms;
}
.okno__zavrit:active { background: rgba(244, 247, 246, 0.14); }
@media (hover: hover) { .okno__zavrit:hover { background: rgba(244, 247, 246, 0.1); color: var(--text); } }

/* lišta na telefonu: je vidět od prvního vykreslení a nikam nejezdí, ustoupí jen klávesnici */
.lista {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 8px;
  padding: 7px var(--okraj) calc(7px + env(safe-area-inset-bottom));
  background: var(--noc);
  border-top: 1px solid var(--cara);
}
.lista .tl { min-height: 50px; padding: 0 10px; }
.lista.je-skryta { visibility: hidden; }

/* ===== stránka pod úvodem ===== */
/* odkaz na sekci zastaví nadpis kousek pod horním okrajem, ne na volném místě nad ním */
.cast { max-width: var(--sirka); margin: 0 auto; padding: var(--mezera-sekci) var(--okraj) 0; scroll-margin-top: calc(20px - var(--mezera-sekci)); }
.cast h2 { font-size: clamp(2.25rem, 1.7rem + 2.3vw, 3.75rem); }
.vetsi { font-family: var(--font-napis); font-size: clamp(1.4375rem, 1.3rem + 0.5vw, 1.75rem); line-height: 1.24; letter-spacing: -0.005em; color: var(--text); }

/* prosvícená schránka: ocelový rám dvířek a v něm LED plocha, jako na květomatu */
.schranka {
  padding: 6px;
  background: linear-gradient(180deg, var(--ocel-svetla), var(--ocel));
  border-radius: 15px;
}
.schranka > * { border-radius: 9px; }

/* kde */
.kde { display: flex; flex-direction: column; gap: 22px; padding-top: clamp(40px, 7vw, 96px); scroll-margin-top: calc(20px - clamp(40px, 7vw, 96px)); }
.kde__text { display: contents; }
.kde h2 { order: 1; max-width: 17ch; }
.kde__mapa-obal { order: 2; }
.kde__mapa { display: block; width: 100%; height: 300px; border: 0; background: var(--ocel-svetla); }
html:not(.js) .kde__mapa[data-src] { display: none; }
.udaje { order: 3; margin: 0; }
.udaje > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 12px; padding: 11px 0; border-top: 1px solid var(--cara); }
.udaje > div:last-child { border-bottom: 1px solid var(--cara); }
.udaje dt { color: var(--text-3); font-size: 0.9375rem; line-height: 1.6; }
.udaje dd { margin: 0; font-weight: 500; }
.udaje address { font-style: normal; }
.kde__tlacitka { order: 4; display: grid; gap: 10px; }
.kde__tlacitka .tl { padding: 0 14px; }

/* jak se nakupuje: jedna skutečná fotka, tři místa na ní */
.jak { display: flex; flex-direction: column; gap: 22px; }
.jak__text { display: contents; }
.jak h2 { order: 1; }
.jak__foto { order: 2; position: relative; margin: 0; }
/* na telefonu jen horní díl fotky, poslední řada schránek by jen prodlužovala stránku; --y je v procentech celé fotky */
.jak__foto img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 0; border-radius: var(--roh); background: #14161a; }
.jak__bod {
  position: absolute;
  left: var(--x);
  top: calc(var(--y) * 1.4427);
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  font-size: 0.9375rem;
  box-shadow: 0 0 0 2px #101215, 0 3px 10px rgba(0, 0, 0, 0.55);
}
.kroky { order: 3; list-style: none; margin: 0; padding: 0; counter-reset: krok; }
.kroky li {
  counter-increment: krok;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 14px;
  padding: 18px 0 20px;
  border-top: 1px solid var(--cara);
}
.kroky li::before { content: counter(krok); grid-row: 1 / span 2; width: 32px; height: 32px; font-size: 0.9375rem; }
.kroky h3 { font-size: 1.625rem; line-height: 1.2; }
.kroky p { margin-top: 4px; color: var(--text-2); }
.jak__pomoc { order: 4; margin-top: -22px; padding-top: 16px; border-top: 1px solid var(--cara); color: var(--text-2); }
.jak__pomoc a { color: var(--text); font-weight: 600; }

/* kytice na přání: jediná velká prosvícená plocha na stránce. Na telefonu kytice stojí za pásem s nálepkami,
   jako by vykukovala ze schránky, a její spodek zakrývají dvířka */
.prani__uvod { position: relative; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: 10px; align-items: end; }
.prani__nadpis { display: grid; gap: 10px; padding-bottom: 18px; }
.prani__foto { justify-self: end; width: 100%; max-width: 240px; margin-bottom: -38px; }
.prani__dvirka { position: relative; z-index: 1; }
.prani__nalepky { display: block; width: calc(100% - 12px); height: clamp(52px, 14vw, 92px); margin: 0 auto 6px; object-fit: cover; object-position: 44% 50%; border-radius: 4px; }
.prani__formular { color-scheme: light; caret-color: var(--ruze); color: var(--inkoust); accent-color: var(--ruze); }
.prani__formular :focus-visible { outline-color: var(--ruze); }
.prani__formular ::selection { background: var(--ruze); color: #fff; }
.formular, .potvrzeni { background: linear-gradient(180deg, #fbfdfc, #eef2f1); padding: 22px 16px 20px; }
.formular { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 14px; }
.pole { margin: 0 0 22px; padding: 0; border: 0; min-width: 0; display: grid; gap: 8px; }
.pole label, .pole legend { font-weight: 600; padding: 0; }
.pole legend { margin-bottom: 8px; }
.pole > label span, .pole legend span { color: var(--inkoust-2); font-weight: 400; font-size: 0.875rem; margin-left: 6px; }
.pole input[type="text"], .pole input[type="tel"], .pole input[type="date"], .pole textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  background: #fff;
  color: var(--inkoust);
  border: 1.5px solid var(--hrana-pole);
  border-radius: 10px;
  /* 17 px: iPhone při psaní stránku nepřibližuje */
  font: inherit;
  transition: border-color 160ms;
}
/* iPhone kreslí datum po svém: bez tohohle je pole užší nebo přeteče a text má na středu */
.pole input[type="date"] { display: block; min-width: 0; -webkit-appearance: none; appearance: none; text-align: left; }
.pole input[type="date"]::-webkit-date-and-time-value { text-align: left; min-height: 1.6em; }
@media (hover: hover) { .pole input:hover, .pole textarea:hover { border-color: var(--inkoust); } }
.pole textarea { min-height: 96px; resize: vertical; }
.pole input::placeholder, .pole textarea::placeholder { color: var(--inkoust-2); }
.pole input:focus-visible, .pole textarea:focus-visible { outline: 3px solid var(--ruze); outline-offset: 1px; border-color: var(--ruze); }
.pole__napoveda { color: var(--inkoust-2); font-size: 0.9375rem; }
.pole__chyba { color: var(--chyba-na-led); font-size: 0.9375rem; font-weight: 600; }
.pole.je-chyba input { border-color: var(--chyba-na-led); }
.volby { display: flex; flex-wrap: wrap; gap: 8px; }
.volba { position: relative; }
.volba input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.volba span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  background: #fff;
  color: var(--inkoust);
  border: 1.5px solid var(--hrana-pole);
  border-radius: 10px;
  font-size: 0.9375rem;
  font-weight: 500;
  transition: background-color 160ms, border-color 160ms, color 160ms;
}
.volba--den { padding: 0; border: 0; background: transparent; font: inherit; cursor: pointer; }
.volba--barva span::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--b); box-shadow: inset 0 0 0 1px rgba(18, 20, 26, 0.3); }
@media (hover: hover) { .volba:hover span { border-color: var(--inkoust); } }
/* vybraná volba je černá jako plech, barva zůstává vidět v kolečku */
.volba input:checked + span, .volba--den[aria-pressed="true"] span { background: var(--inkoust); border-color: var(--inkoust); color: var(--led); font-weight: 600; }
.volba input:focus-visible + span { outline: 3px solid var(--ruze); outline-offset: 2px; }
.formular__odeslat { display: grid; gap: 12px; margin-top: 2px; }
.formular__odeslat .tl { width: 100%; padding: 0 12px; }
.formular__odeslat p { color: var(--inkoust-2); font-size: 0.9375rem; }
.formular__odeslat a { color: var(--inkoust); font-weight: 600; }
.potvrzeni { display: grid; gap: 14px; }
.potvrzeni:focus { outline: none; }
.potvrzeni h3 { font-size: 2rem; }
.potvrzeni p { color: var(--inkoust-2); }
.potvrzeni a:not(.tl) { color: var(--inkoust); font-weight: 600; }
.potvrzeni__text { margin: 0; padding: 14px 0; white-space: pre-wrap; border-top: 1px solid rgba(18, 20, 26, 0.22); border-bottom: 1px solid rgba(18, 20, 26, 0.22); font-family: var(--font-text); font-size: 0.9375rem; line-height: 1.5; color: var(--inkoust); }
.potvrzeni__tlacitka { display: flex; flex-wrap: wrap; gap: 10px; }

/* kdo kytice váže: Bářin dopis, pod ním ukázky a recenze. Dopis leží na noci, prosvícené je jen to, co se dá použít. */
.kdo h2 { max-width: 15ch; }
.dopis { margin: 26px 0 0; max-width: 36rem; }
.dopis__text { margin: 0; display: grid; gap: 1em; }
.dopis__text .vetsi { margin-bottom: 0.15em; }
.dopis__heslo { color: var(--ruze-svetla); }
.dopis__podpis { display: grid; gap: 4px; margin-top: 28px; color: var(--text-3); font-size: 0.9375rem; line-height: 1.4; }
.dopis__jmeno { font-family: var(--font-napis); font-size: 2.25rem; font-weight: 500; line-height: 1; letter-spacing: -0.01em; color: var(--text); }
.vitrina { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; margin-top: clamp(56px, 8vw, 96px); }
.vitrina figure { margin: 0; display: grid; align-content: end; gap: 8px; }
.vitrina img { width: 100%; aspect-ratio: 1 / 1.1; object-fit: contain; object-position: 50% 100%; }
.vitrina figcaption { font-size: 0.9375rem; color: var(--text-2); }
.vitrina__pozn { margin-top: 20px; color: var(--text-3); font-size: 0.9375rem; max-width: 40rem; }
.recenze { margin-top: clamp(44px, 6vw, 80px); padding-top: 26px; border-top: 1px solid var(--cara); }
.recenze__souhrn { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; color: var(--text-2); }
.recenze__souhrn strong { font-family: var(--font-napis); font-size: 3.5rem; font-weight: 500; line-height: 1; color: var(--text); font-variant-numeric: lining-nums; }
.recenze__souhrn a { font-size: 0.9375rem; }
.hvezdy { display: inline-flex; gap: 2px; color: var(--hvezda); }
.hvezdy svg { flex: none; }
.recenze__rada { display: grid; gap: 26px; margin-top: 24px; }
.recenze__citat { margin: 0; display: grid; gap: 12px; align-content: start; }
.recenze__citat figcaption { display: flex; align-items: center; gap: 11px; }
.recenze__znak { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--b); color: #14162b; font-weight: 700; }
.recenze__kdo { display: grid; gap: 2px; }
.recenze cite { font-style: normal; font-weight: 600; line-height: 1.3; }
.recenze blockquote { margin: 0; font-family: var(--font-napis); font-size: 1.5rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; text-wrap: pretty; }

/* dotazy: odpovědi jsou krátké, proto rovnou vidět */
.dotazy__seznam { margin-top: 22px; display: grid; }
.dotazy__seznam > div { padding: 16px 0 18px; border-top: 1px solid var(--cara); }
.dotazy h3 { font-family: var(--font-text); font-size: 1.0625rem; font-weight: 600; letter-spacing: 0; line-height: 1.35; }
.dotazy p { margin-top: 5px; color: var(--text-2); }
.dotazy a { color: var(--text); font-weight: 600; }

.paticka {
  margin-top: var(--mezera-sekci);
  padding: 44px var(--okraj) 28px;
  background: var(--patka);
  color: var(--text-2);
  font-size: 0.9375rem;
}
.paticka__obsah { display: grid; gap: 24px; max-width: calc(var(--sirka) - 2 * var(--okraj)); margin: 0 auto; }
.paticka strong, .paticka a { color: var(--text); font-weight: 600; }
.paticka__znacka { display: flex; align-items: center; gap: 16px; }
.paticka__znacka img { width: 68px; height: 68px; border-radius: 50%; }
.paticka__znacka p { font-family: var(--font-napis); font-size: 1.625rem; line-height: 1.1; color: var(--text); }
.paticka__ico, .paticka__tvorba { color: var(--text-3); }
.paticka__tvorba { display: grid; gap: 6px; padding-top: 20px; border-top: 1px solid var(--cara); }

/* ===== doplnit.html ===== */
.dop-telo { padding-bottom: 40px; background: var(--plocha); }
.ukazka { display: flex; flex-wrap: wrap; gap: 2px 12px; padding: 8px var(--okraj); background: var(--noc); color: var(--text-2); font-size: 0.8125rem; border-bottom: 1px solid var(--cara); }
.ukazka a { color: var(--text); font-weight: 700; }
.hlavicka { display: flex; align-items: center; gap: 16px; max-width: var(--sirka); margin: 0 auto; padding: 12px var(--okraj); }
.znacka__jmeno { font-family: var(--font-napis); font-weight: 500; font-size: 1.0625rem; letter-spacing: 0.08em; text-transform: uppercase; }
.znacka__jmeno span { color: var(--text-3); }
.dop { max-width: 34rem; margin: 0 auto; padding: 8px var(--okraj) 0; display: grid; gap: 40px; }
.dop h1 { font-size: clamp(2.4rem, 2rem + 2.4vw, 3.2rem); }
.dop h2 { font-size: 1.8rem; }
.dop__doplneni { display: grid; gap: 14px; }
.dop__posledni { color: var(--text-2); font-variant-numeric: tabular-nums; }
.dop__doplneno { min-height: 64px; font-size: 1.125rem; }
.dop__ohlas { color: #b9e08a; font-weight: 700; min-height: 1.5em; }
.dop__schranky { display: grid; gap: 12px; }
.dop__navod { color: var(--text-2); }
.dop__mrizka { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(6, 1fr); gap: 8px; aspect-ratio: 4 / 4.4; padding: 10px; background: #0d0e10; border-radius: 14px; }
.dop__schranka { position: relative; padding: 0; border: 0; border-radius: 4px; overflow: hidden; background: var(--led); cursor: pointer; min-height: 44px; }
.dop__schranka img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); transform-origin: 100% 0; }
.dop__schranka.je-prazdna img { opacity: 0.15; }
@media (hover: hover) { .dop__schranka:hover { box-shadow: inset 0 0 0 3px var(--lampa); } }
.dop__cislo { position: absolute; left: 4px; top: 4px; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 999px; background: #121417; color: #fff; font-size: 0.75rem; font-weight: 700; }
.dop__stitek { position: absolute; left: 4px; right: 4px; bottom: 4px; padding: 2px 4px; border-radius: 4px; background: rgba(18, 20, 23, 0.86); color: #fff; font-size: 0.75rem; font-weight: 700; text-align: center; }
.dop__editor { display: grid; gap: 16px; padding-top: 20px; border-top: 1px solid var(--cara-silna); }
.dop__editor .pole { margin: 0; }
.dop__editor .pole > label span { color: var(--text-3); }
.dop__editor .pole input[type="text"] { background: var(--noc); color: var(--text); border-color: var(--cara-silna); }
.dop__editor .pole input::placeholder { color: var(--text-3); }
.dop__editor .pole__chyba { color: var(--chyba); }
.dop__editor .pole.je-chyba input { border-color: var(--chyba); }
.dop__nahled img { width: 100%; max-width: 240px; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: var(--led); }
.dop__foto { position: relative; justify-self: start; }
.dop__foto input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dop__prazdna { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; }
.dop__prazdna input { width: 22px; height: 22px; }
.dop__akce { display: flex; flex-wrap: wrap; gap: 10px; }
.dop__reset { margin-top: -10px; }
.dop__paticka { max-width: 34rem; margin: 40px auto 0; padding: 20px var(--okraj) 0; color: var(--text-3); font-size: 0.9375rem; }
.dop__paticka a { color: var(--text); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}

/* telefon: spodní lišta je součást obrazovky od začátku, úvod končí přesně nad ní */
@media (max-width: 699px) {
  :root { --lista: calc(65px + env(safe-area-inset-bottom)); }
  body:not(.dop-telo) { padding-bottom: var(--lista); }
}

/* ===== širší obrazovky ===== */
@media (min-width: 560px) {
  :root { --okraj: 28px; }
  .hlava__telefon { padding: 0 14px; }
  .hlava__telefon span { display: inline; }
  .vitrina { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .formular { grid-template-columns: 1fr 1fr; padding: 26px 24px 24px; }
  .potvrzeni { padding: 26px 24px 24px; }
  .formular .pole:not(.pole--pul), .formular__odeslat { grid-column: 1 / -1; }
  .kde__tlacitka { display: flex; flex-wrap: wrap; }
  .kde__tlacitka .tl { padding: 0 24px; }
}

@media (min-width: 700px) {
  .lista { display: none; }
  .jen-sirsi { display: inline; }
  .postup br { display: none; }
  .postup { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* panel a tablet: pod květomatem řádek s kroky a tlačítka */
  .scena {
    grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
    grid-template-areas: "hlava" "text" "misto" "napoveda" "postup" "akce";
    padding: calc(14px + env(safe-area-inset-top)) var(--okraj) 16px;
    min-height: 640px;
  }
  .scena h1 { font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3rem); max-width: 22ch; }
  .scena__text { margin-top: 12px; }
  .scena__popis { margin-top: 8px; font-size: 1.0625rem; }
  .scena__misto { margin: 8px 0 30px; }
  .postup { font-size: 0.9375rem; padding-top: 10px; }
  .scena__akce { display: grid; grid-template-columns: 1.3fr 1fr; margin-top: 12px; }
  .okno__akce { display: grid; }
  .kde__mapa { height: 380px; }
  /* jak: fotka vlevo, kroky vedle ní; tady je místo na celou fotku */
  .jak { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 28px); align-items: start; }
  .jak__foto { grid-column: 1 / span 5; grid-row: 1; }
  .jak__foto img { aspect-ratio: 960 / 1385; }
  .jak__bod { top: var(--y); }
  .jak__text { display: block; grid-column: 6 / -1; grid-row: 1; }
  .kroky { margin-top: 20px; }
  .jak__pomoc { margin-top: 0; }
}

@media (min-width: 960px) {
  /* úvod sedí na stejném levém a pravém okraji jako obsah pod ním */
  :root { --okraj: 44px; --levy: max(var(--okraj), calc((100vw - var(--sirka)) / 2 + var(--okraj))); }
  .scena {
    height: 100vh;
    height: 100svh;
    padding: 22px var(--levy) 28px;
    grid-template-columns: minmax(0, 0.68fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto auto auto;
    grid-template-areas:
      "hlava hlava"
      ".     misto"
      "text  misto"
      "postup misto"
      "akce  misto"
      ".     napoveda";
    column-gap: clamp(28px, 4vw, 64px);
  }
  .scena::after { height: 110px; background: linear-gradient(180deg, rgba(9, 11, 20, 0), var(--noc)); }
  .hlava__nav { display: flex; gap: clamp(16px, 2.2vw, 30px); margin-left: auto; font-weight: 500; font-size: 1rem; }
  .hlava__nav a { padding: 10px 0; text-decoration: none; }
  @media (hover: hover) { .hlava__nav a:hover { text-decoration: underline; text-decoration-color: var(--lampa); } }
  .scena__text { margin-top: 0; }
  .scena h1 { max-width: 16ch; font-size: clamp(2.5rem, min(1.4rem + 3.2vw, 7.4svh), 4.5rem); line-height: 1.03; }
  .scena__popis { margin-top: 16px; max-width: 30rem; font-size: 1.125rem; line-height: 1.45; }
  .scena__misto { margin: 18px 0 clamp(18px, 3vh, 34px); place-items: end; }
  .foto-automat::after { top: calc(100% + 3px); height: 70px; background-size: 100% 300px; }
  .scena__napoveda { justify-self: end; width: min(100%, 44rem); text-align: center; }
  .postup {
    margin-top: 24px;
    padding-top: 0;
    border-top: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    max-width: 30rem;
    font-size: 1.0625rem;
    align-self: end;
  }
  .postup li { grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--cara); }
  .postup li:last-child { border-bottom: 1px solid var(--cara); }
  .postup b { width: 26px; height: 26px; font-size: 0.875rem; }
  .pin { padding: 2px 8px; font-size: 0.8125rem; }
  .bod span { width: 22px; height: 22px; left: 5px; bottom: 5px; font-size: 0.8125rem; }
  .scena__akce { display: flex; flex-wrap: wrap; margin-top: 22px; }
  .scena__akce .tl { padding: 0 22px; }
  /* okno: panel vpravo; hlavička zůstává, jen text a akce uhnou */
  .okno { left: auto; right: var(--levy); top: 92px; bottom: auto; width: 392px; max-height: calc(100% - 132px); padding: 24px 24px 22px; border: 1px solid var(--cara-silna); border-radius: 16px; box-shadow: 0 24px 50px -20px rgba(4, 5, 14, 0.8); animation-name: okno-panel-prijezd; }
  .okno.odjizdi { animation-name: okno-panel-odjezd; }
  .okno__uchop { display: none; }
  .okno__nadpis { touch-action: auto; font-size: 2rem; }
  .okno .kroky p { display: block; margin-top: 2px; }
  .okno .kroky { gap: 10px; }

  /* kde: údaje vlevo, mapa je největší věc v sekci */
  .kde { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 28px); align-items: stretch; }
  .kde__text { display: flex; flex-direction: column; grid-column: 1 / span 5; gap: 24px; }
  .kde__mapa-obal { grid-column: 6 / -1; }
  .kde__mapa { height: 100%; min-height: 520px; }
  .kde__tlacitka { margin-top: auto; }
  .jak__text { grid-column: 7 / -1; }
  .kroky { margin-top: 28px; }
  .kroky li { grid-template-columns: 40px minmax(0, 1fr); column-gap: 18px; padding: 24px 0 26px; }
  .kroky li::before { width: 40px; height: 40px; font-size: 1.0625rem; }
  .kroky h3 { font-size: 2rem; }
  .okno .kroky { margin: 2px 0 0; }
  .okno .kroky li { grid-template-columns: 22px minmax(0, 1fr); column-gap: 8px; padding: 0; }
  .okno .kroky li::before { width: 22px; height: 22px; font-size: 0.8125rem; }
  .okno .kroky h3 { font-size: 1rem; }
  /* na přání: vlevo text a kytice, vpravo dvířka s formulářem */
  .prani { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 28px); align-items: start; }
  .prani__uvod { grid-column: 1 / span 5; grid-template-columns: minmax(0, 1fr); }
  .prani__nadpis { padding-bottom: 0; }
  /* spodek kytice se ztratí do tmy: fotka má okolo stopek nejhrubší ořez */
  .prani__foto { justify-self: center; width: 84%; max-width: 400px; margin: 28px 0 0; -webkit-mask-image: linear-gradient(#000 60%, transparent 90%); mask-image: linear-gradient(#000 60%, transparent 90%); }
  .prani__dvirka { grid-column: 6 / -1; }
  .prani__nalepky { height: auto; aspect-ratio: 1698 / 159; object-position: 50% 50%; }
  .formular { padding: 32px 32px 28px; }
  .potvrzeni { padding: 32px; }
  /* kdo: nadpis vlevo, dopis jako sloupec textu vpravo; ukázky a recenze pod nimi přes celou šířku */
  .kdo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 28px); align-items: start; }
  .kdo > * { grid-column: 1 / -1; }
  .kdo h2 { grid-column: 1 / span 4; }
  .kdo .dopis { grid-column: 6 / span 6; margin-top: 10px; max-width: 38rem; }
  .vitrina { gap: clamp(16px, 2vw, 28px); }
  .recenze { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 28px); padding-top: 36px; }
  .recenze__souhrn { grid-column: 1 / span 3; align-self: start; display: grid; justify-items: start; gap: 8px; }
  .recenze__souhrn strong { font-size: 5rem; }
  .recenze__rada { grid-column: 4 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: 6px; }
  .recenze blockquote { font-size: 1.625rem; }
  /* dotazy */
  .dotazy { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 28px); }
  .dotazy h2 { grid-column: 1 / span 3; }
  .dotazy__seznam { grid-column: 4 / -1; margin-top: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 28px); }
  .paticka { padding-top: 56px; }
  .paticka__obsah { grid-template-columns: 1.3fr 1fr 1.2fr; align-items: start; }
  .paticka__tvorba { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
}

@keyframes okno-panel-prijezd {
  from { opacity: 0; transform: translateY(18px); }
}
@keyframes okno-panel-odjezd {
  to { opacity: 0; transform: translateY(12px); }
}

/* velké monitory: širší mřížka pro úvod i obsah, ať květomat nezůstane malý uprostřed plochy */
@media (min-width: 1600px) {
  :root { --sirka: 1480px; }
}