/* ===================================================================
   Kytky od Terky — theme overrides
   Mechanismus 1:1 s theknowhow.cz: veškerý vzhled řídí CSS proměnné
   z html.light (ref-1.css). Tady je POUZE předefinováváme — žádné
   jiné styly se nemění.
   =================================================================== */

/* Teplé neutrály sdílené všemi variantami (jemný posun od studených šedí reference) */
html.light {
  --gray-1: #FDFBF6;
  --gray-2: #FAF6EC;
  --gray-3: #F3EDDF;
  --gray-4: #E3DAC780;
  --gray-5: #E4DECE;
  --gray-6: #DBD4C0;
  --gray-7: #CDC5AE;
  --gray-8: #B5AD95;
  --gray-9: #8B8570;
  --gray-10: #7E785F;
  --gray-11: #5F5A47;
}

/* ===== Varianta 1 — Mr. Bloom / mechová (default) ===== */
html.light[data-theme="mechova"] {
  --background: #FBF7EF;
  --color-background: #FBF7EF;
  --foreground: #201F16;
  --gray-12: #201F16;
  --slate-12: #201F16;
  --accent: #40402C;
  --accent-light: #5C5C40;
  --accent-subtle: #40402C1F;
  --accent-2: #40402C0F;
  --accent-6: #40402C40;
  --accent-7: #40402C59;
  --red-a7: #40402C46;
  --green-9: #4A6741;
  --green: #4A6741;
}

/* ===== Varianta 2 — Svěží botanická / šalvěj ===== */
html.light[data-theme="salvej"] {
  --background: #FBF8F1;
  --color-background: #FBF8F1;
  --foreground: #1E2419;
  --gray-12: #1E2419;
  --slate-12: #1E2419;
  --accent: #5B7A5B;
  --accent-light: #7C9873;
  --accent-subtle: #5B7A5B1F;
  --accent-2: #5B7A5B0F;
  --accent-6: #5B7A5B40;
  --accent-7: #5B7A5B59;
  --red-a7: #5B7A5B46;
  --green-9: #30A46C;
  --green: #29A383;
}

/* Pastelové barvy benefit karet (S5 grid) — přání klienta 20. 7. 2026:
   světle růžová / béžovo žlutá / světle fialová místo původní oranžové/modré/zelené */
html.light {
  --card-pink: #F6DEE3;
  --card-beige: #F0E4C3;
  --card-lavender: #E5DEF2;
  /* sytější odstíny téže palety (S9 transformační karty) */
  --card-pink-2: #EFB9C6;
  --card-beige-2: #E6CE8F;
  --card-lavender-2: #C6B8E4;
  /* hluboká fialová pro text na světlém pozadí (H2 zvýraznění v sekci bonusů) */
  --lavender-strong: #8F76C0;
}

/* ===== Varianta 3 — Terakota / editoriál ===== */
html.light[data-theme="terakota"] {
  --background: #FAF3F2;
  --color-background: #FAF3F2;
  --foreground: #1C1A17;
  --gray-12: #1C1A17;
  --slate-12: #1C1A17;
  --accent: #B5502E;
  --accent-light: #D9764F;
  --accent-subtle: #B5502E1F;
  --accent-2: #B5502E0F;
  --accent-6: #B5502E40;
  --accent-7: #B5502E59;
  --red-a7: #B5502E46;
  --green-9: #2F4A34;
  --green: #2F4A34;
}

/* Hero vějíř — pomalé kývavé otáčení kolem středu elipsy (na originálu řízeno JS,
   tady nahrazeno čistým CSS; origin odpovídá středu vodicí elipsy cy=900) */
.fan-stage {
  transform-origin: 50% 900px;
  /* kyvani nahrazeno kolotocem v JS (viz index.html) */
}
/* Levitující výřezy kytic potřebují vyšší scénu, jinak je spodek kytic ořízlý
   hranou wrapperu (u zaoblených karet reference to nevadilo, u volných tvarů ano) */
.fan-stage { height: 660px !important; }
@media (min-width: 640px) { .fan-stage { height: 830px !important; } }
@media (min-width: 1024px) { .fan-stage { height: 960px !important; } }
@keyframes fan-sway {
  from { rotate: -11deg; }
  to { rotate: 11deg; }
}
@media (prefers-reduced-motion: reduce) {
  .fan-stage { animation: none; }
}

/* Rotující prstenec cenovek v pain kartě (S4) — orbit jako na vzorovém webu */
.price-ring {
  position: absolute;
  top: 0; left: 0;
  animation: ring-spin 36s linear infinite;
}
@keyframes ring-spin {
  to { rotate: 360deg; }
}

/* Ciferník v pain kartě „Cesta do květinářství stojí čas" — tiká po vteřinách jako hodiny */
.clock-dial {
  animation: dial-spin 60s steps(60, end) infinite;
}
@keyframes dial-spin {
  to { rotate: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .price-ring, .clock-dial { animation: none; }
}

/* ===== Varianty fontů nadpisů (přepínač jen pro schvalování, nedeployovat) =====
   Výchozí: Switzer (1:1 s referencí). Alternativy laděné ke květinám:
   Fraunces (teplý organický serif) a Cormorant Garamond (jemný botanický serif). */
/* Serifům sluší volnější prostrkání než Switzeru (inline styly mají -0.04/-0.05em, proto !important) */
/* Přepínač fontů — jen pro schvalování, nedeployovat */
/* Dekorativní výřezy květin u nadpisu nabídky Pro jednotlivce */
.b2c-decor {
  position: absolute;
  top: -10px;
  width: 110px;
  height: auto;
  pointer-events: none;
}
@media (max-width: 900px) {
  .b2c-decor { display: none; }
}

/* Bonusové karty (S11): šířka karty z desktopu je výchozí stav pro všechny šířky.
   Dokud se dvě vejdou vedle sebe, jsou vedle sebe; jakmile ne, jdou pod sebe
   ve stejném formátu a na střed. Nikdy se neroztahují přes celou obrazovku. */
.bonus-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 430px));
  justify-content: center;
  max-width: 880px;
}

/* Právní texty (GDPR, cookies) */
.legal { font-family: var(--font-switzer), system-ui, sans-serif; color: var(--gray-11); }
.legal h2 { font-size: 34px; font-weight: 700; color: var(--gray-12); letter-spacing: -0.03em; margin: 0 0 16px; line-height: 1.15; }
.legal h3 { font-size: 19px; font-weight: 700; color: var(--gray-12); margin: 34px 0 10px; }
.legal p { font-size: 15px; line-height: 1.75; margin: 0 0 12px; }
.legal .lead { font-size: 16px; color: var(--gray-12); margin-bottom: 8px; }
.legal ul { margin: 0 0 12px; padding-left: 20px; }
.legal li { font-size: 15px; line-height: 1.75; margin-bottom: 6px; }
.legal a { color: var(--accent); }
.legal strong { color: var(--gray-12); }
.legal .upd { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--gray-4); font-size: 13px; color: var(--gray-9); }

/* Statické zprovoznění swiper sliderů bez JS knihovny (jen mechanika, ne vzhled).
   Swiper normálně nastavuje šířky slidů JS knihovnou — bez ní je nutné dát slidům
   pevný rozměr, jinak se roztáhnou přes celou wrapper šířku. */
.swiper { overflow-x: auto !important; scrollbar-width: none; -ms-overflow-style: none; width: 100% !important; min-width: 0; }
.swiper::-webkit-scrollbar { display: none; }
.swiper-wrapper { display: flex !important; gap: 20px; width: max-content !important; height: auto !important; }
.swiper-slide { flex: 0 0 auto !important; width: 300px !important; height: auto !important; }