/* ==========================================================================
   Zahrada po celý rok — globální stylesheet (veřejná část, dashboard, admin)
   ========================================================================== */

:root {
  --green-primary: #5c8a3a;
  --green-primary-dark: #4a7530;
  --green-deep: #1e3a2e;
  --green-deep-darker: #16291f;
  --green-tint: #eef4e6;
  --green-tint-border: #d9e6c9;
  --bg-cream: #f8f7f3;
  --text-dark: #1f2a24;
  --text-muted: #6b7280;
  --border-color: #e5e7e0;
  --shadow-card: 0 10px 30px rgba(30, 58, 46, 0.08);
  --radius-lg: 16px;
  --radius-md: 10px;
  --radius-sm: 6px;
  --font-base: "Segoe UI", "Trebuchet MS", Verdana, Arial, sans-serif;

  --season-jaro: #e3f2c8;
  --season-jaro-accent: #7cb342;
  --season-leto: #fdf0c4;
  --season-leto-accent: #e0a836;
  --season-podzim: #f7ddb8;
  --season-podzim-accent: #c9762f;
  --season-zima: #dbe9f5;
  --season-zima-accent: #4f9bd1;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body {
  font-family: var(--font-base);
  color: var(--text-dark);
  background: #ffffff;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
/* Zamezí scrollování stránky pod rozbaleným mobilním menu (viz .nav-backdrop). */
body.nav-open { overflow: hidden; }

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

a { color: inherit; text-decoration: none; }

ul { list-style: none; margin: 0; padding: 0; }

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.2; }

p { margin: 0 0 1em; }

.container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: 44px 0; }
.section--cream { background: var(--bg-cream); }
.section--tight { padding: 28px 0; }

.eyebrow {
  display: inline-block;
  color: var(--green-primary);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.section-title {
  font-size: 27px;
  font-weight: 800;
  color: var(--text-dark);
}

.section-lead {
  color: var(--text-muted);
  font-size: 14.5px;
  max-width: 560px;
}

.section-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}
.section-head-row p { color: var(--text-muted); font-size: 14.5px; max-width: 560px; margin: 10px 0 0; }
.section-head-row .btn { flex-shrink: 0; }
@media (max-width: 760px) {
  .section-head-row { flex-direction: column; align-items: flex-start; }
}

/* Buttons ---------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn:disabled:active { transform: none; }

.btn--primary {
  background: var(--green-primary);
  color: #ffffff;
}
.btn--primary:hover { background: var(--green-primary-dark); }

.btn--outline-dark {
  background: transparent;
  border-color: rgba(255,255,255,.7);
  color: #ffffff;
}
.btn--outline-dark:hover { background: rgba(255,255,255,.12); }

.btn--outline-green {
  background: transparent;
  border-color: var(--green-primary);
  color: var(--green-primary);
}
.btn--outline-green:hover { background: var(--green-tint); }

.btn--muted {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
}
.btn--muted:hover { background: var(--bg-cream); color: #b3432b; border-color: var(--border-color); }

.btn--google {
  background: #fff;
  border-color: var(--border-color);
  color: var(--text-dark);
}
.btn--google:hover { background: #f8f7f3; border-color: #d5d3cc; }

.auth-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--text-muted); font-size: 13px; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-color); }

.community-share-card {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--green-tint-border);
  background: var(--green-tint);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.community-share-card__icon {
  width: 38px; height: 38px; border-radius: 50%;
  background: #fff; color: var(--green-primary);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.community-share-card__body { flex: 1; }
.community-share-card__body strong { display: block; font-size: 14px; margin-bottom: 4px; color: var(--text-dark); }
.community-share-card__body p { margin: 0; font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }

.switch { position: relative; display: inline-block; width: 44px; height: 26px; flex-shrink: 0; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; inset: 0; cursor: pointer; }
.switch__track { position: absolute; inset: 0; background: #d8d5cc; border-radius: 999px; transition: background .18s ease; pointer-events: none; }
.switch__thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s ease; }
.switch input:checked + .switch__track { background: var(--green-primary); }
.switch input:checked + .switch__track .switch__thumb { transform: translateX(18px); }
.switch input:focus-visible + .switch__track { box-shadow: 0 0 0 3px var(--green-tint-border); }

.garden-public-link { margin-top: 14px; }
.garden-public-link__row { display: flex; gap: 8px; }
.garden-public-link__row .form-control { font-size: 12.5px; color: var(--text-muted); }

.btn--block { width: 100%; }
.btn--sm { padding: 9px 18px; font-size: 14px; }
.btn--danger { background: #b3432b; color: #fff; }
.btn--danger:hover { background: #94341f; }

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  border-bottom: 1px solid var(--border-color);
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: 1320px;
  min-height: 62px;
  margin: 0 auto;
  padding: 8px 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 16px;
  color: var(--text-dark);
}
.brand img { width: 42px; height: 42px; }
.brand small { display: block; font-weight: 600; color: var(--text-muted); font-size: 12px; }

.brand__wordmark { font-family: var(--font-base); font-weight: 900; font-size: 26px; letter-spacing: -.8px; white-space: nowrap; line-height: 1; }
.brand__wordmark-dark, .brand__wordmark-light { display: inline; }
.brand__wordmark-dark { color: #0D3121; }
.brand__wordmark-light { color: #5E8330; }
.footer-brand .brand__wordmark-dark, .admin-sidebar__brand .brand__wordmark-dark { color: #FAF9F6; }
.footer-brand .brand__wordmark-light, .admin-sidebar__brand .brand__wordmark-light { color: #6B913A; }

.main-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  justify-content: center;
}
.main-nav a {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  font-size: 15px;
  color: var(--text-dark);
  padding: 10px 16px;
  border-radius: 999px;
  transition: background .15s ease, color .15s ease;
}
.main-nav a:hover { background: var(--bg-cream); }
.main-nav a.is-active { background: var(--green-tint); color: var(--green-primary-dark); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.header-cta { white-space: nowrap; }
.header-plan-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--green-tint);
  color: var(--green-primary-dark);
  border: 1px solid var(--green-tint-border);
  border-radius: 999px;
  padding: 6px 13px 6px 12px;
  font-size: 13px;
  white-space: nowrap;
}
.header-plan-badge__name { font-weight: 700; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.header-plan-badge__status {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  padding-left: 9px;
  border-left: 1px solid var(--green-tint-border);
}
@media (max-width: 980px) { .header-plan-badge { display: none; } }
.header-user {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: 14px;
}
.header-user a { display: flex; align-items: center; gap: 8px; color: var(--text-dark); }
.header-user__avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.header-user__icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--text-dark);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.account-menu { position: relative; flex-shrink: 0; }
.account-menu__trigger {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--border-color);
  background: #fff;
  border-radius: 999px;
  padding: 5px 12px 5px 5px;
  cursor: pointer;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--text-dark);
}
.account-menu__trigger:hover { border-color: var(--green-primary); }
.account-menu__chevron { display: flex; color: var(--text-muted); }
.account-menu__chevron svg { transform: rotate(90deg); }
.account-menu__list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 28px rgba(0,0,0,.14);
  padding: 6px;
  min-width: 190px;
  z-index: 50;
  display: none;
}
.account-menu__list:not([hidden]) { display: block; }
.account-menu__list a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 13.5px; font-weight: 600;
  color: var(--text-dark);
}
.account-menu__list a:hover { background: var(--bg-cream); }
.account-menu__list a svg { color: var(--text-muted); flex-shrink: 0; }
.account-menu__list hr { border: none; border-top: 1px solid var(--border-color); margin: 6px 0; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  color: var(--text-dark);
  transition: background .15s ease;
}
.nav-toggle:hover { background: var(--bg-cream); }
.nav-toggle__icon { display: flex; }
.nav-toggle__icon--close { display: none; }
.nav-toggle.is-open .nav-toggle__icon--menu { display: none; }
.nav-toggle.is-open .nav-toggle__icon--close { display: flex; }

.main-nav__icon { display: none; color: var(--green-primary); flex-shrink: 0; }

/* Hlavička uvnitř rozbaleného mobilního menu — vlastní zavírací tlačítko přímo v rohu
   panelu, standardní a jednoznačné místo pro zavření (ne jen spoléhat na to, že si
   uživatel domyslí, že hamburger v hlavičce nahoře teď zavírá). */
.main-nav__head { display: none; }

/* Tmavé poloprůhledné pozadí za rozbaleným mobilním menu — vizuálně ho odliší od
   zbytku stránky (stejný vzor jako .modal-backdrop) a kliknutím mimo menu se zavře. */
.nav-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 25, 18, .38);
  backdrop-filter: blur(1px);
  z-index: 90;
}

@media (max-width: 960px) {
  /* Se 3 viditelnými prvky (logo, hamburger, akce vpravo) by justify-content:space-between
     (zděděné z desktopu, kde je uprostřed ještě celé menu) zarovnalo hamburger přesně na
     střed mezi krajní dva — vypadalo by to "ztraceně" uprostřed hlavičky, ne u ostatních
     ovládacích prvků. flex-start + margin-right:auto na logu logo přitáhne doleva a
     hamburger s přihlašovací ikonou zůstanou pohromadě u pravého okraje, jak se to
     u mobilních hlaviček obvykle dělá. */
  .site-header__inner { justify-content: flex-start; }
  .brand { margin-right: auto; }

  .main-nav {
    position: absolute;
    top: calc(100% + 8px); left: 12px; right: 12px;
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 45px rgba(20,30,20,.18);
    padding: 8px;
    display: none;
    z-index: 95;
    animation: navMenuIn .18s ease;
  }
  .main-nav.is-open { display: flex; }
  @keyframes navMenuIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .main-nav a {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 14px;
    border-bottom: none;
    border-radius: var(--radius-md);
    font-size: 15.5px;
  }
  .main-nav a:hover, .main-nav a:active { background: var(--bg-cream); }
  .main-nav a.is-active { background: var(--green-tint); color: var(--green-primary-dark); }
  .main-nav a.is-active .main-nav__icon { color: var(--green-primary-dark); }
  .main-nav__icon { display: flex; }
  .nav-toggle { display: flex; }

  .main-nav__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 10px 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border-color);
  }
  .main-nav__head-title {
    font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-muted);
  }
  .main-nav__close {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    background: var(--bg-cream);
    border: none; border-radius: 999px;
    color: var(--text-dark);
    cursor: pointer;
    transition: background .15s ease;
  }
  .main-nav__close:hover { background: var(--green-tint); color: var(--green-primary-dark); }

  /* Tlačítko "Vyzkoušet zdarma" (header-cta) na mobilu jako holá ikonka bez popisku
     vypadalo jako nejasná zelená bublina se šipkou — a navíc vede na stejné místo
     (Plánovač) jako položka v tomto menu, takže je na mobilu zbytečně duplicitní.
     Radši ho úplně schovat, než nechat nejednoznačnou ikonu bez kontextu. */
  .header-cta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .main-nav { animation: none; }
}

/* Na telefonech (do ~560px) se hlavička s logem + hamburgerem + CTA + login odkazem
   nevejde pohodlně do jednoho řádku, i s ikonovým CTA — schová se textový popisek
   "Přihlásit se" / jméno uživatele (zůstane jen ikona/avatar), ať hlavička nepřeteče
   ani nezalamuje text. */
@media (max-width: 560px) {
  .header-user__label { display: none; }
  .header-user a { padding: 8px; }
  .account-menu__name { display: none; }
  .brand__wordmark { font-size: 21px; }
}

/* Do ~440px (běžné telefony na výšku) se i zúžená hlavička z pravidla výše ještě
   nemusí vejít — logo+wordmark+hamburger+2 ikonová tlačítka bez min-width:0 na flex
   položkách odmítají jít pod svou obsahovou šířku, takže .site-header__inner přeteče
   přes okraj obrazovky a to samé vodorovné přetečení (kvůli html,body{overflow-x:hidden})
   pak "utne" i zbytek stránky pod hlavičkou, ne jen ji. Zúžení mezer/paddingu a menší
   logo/wordmark tady dají hlavičce dost místa, aby se i na nejmenších telefonech
   (320–400px) vešla na jeden řádek beze zbytku. */
@media (max-width: 440px) {
  .site-header__inner { gap: 10px; padding: 8px 14px; }
  .brand { gap: 6px; min-width: 0; }
  .brand img { width: 32px; height: 32px; flex-shrink: 0; }
  .brand__wordmark { font-size: 17px; }
  .nav-toggle { flex-shrink: 0; padding: 4px; }
  .header-actions { gap: 6px; flex-shrink: 0; }
  .header-cta { padding-left: 9px; padding-right: 9px; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  min-height: 545px;
  display: flex;
  align-items: flex-start;
  padding: 0;
}
/* Fotka na pozadí je vlastní ohraničený prvek (ne background přes celou šířku okna) —
   omezená na stejnou max-width jako .hero__inner a zbytek stránky, zaoblená a se stínem
   jako ostatní karty na webu, ať "nepřeteče" mimo šířku obsahu pod ní. Ukotvená nahoru
   (top:0, ne vystředěná) a .hero nemá žádný horní padding — fotka tak sedí těsně pod
   horním menu, ne s mezerou nad sebou. */
.hero__photo-bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1320px;
  height: 545px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  background-color: var(--bg-cream);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right center;
  overflow: hidden;
}
/* Dvě věci najednou: fotka postupně mizí (průhlední) směrem k levé straně, kde je vidět
   jen světlé pozadí sekce (--bg-cream) pod ní (text vlevo je tak na světlém podkladu),
   a tmavý závoj dole pro čitelnost 3 průhledných boxů, které sedí přímo na fotce
   (viz .hero__bottom-strip), ne v samostatné sekci pod ní. */
.hero__photo-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--bg-cream) 0%, rgba(248,247,243,.94) 22%, rgba(248,247,243,.55) 40%, rgba(248,247,243,0) 62%),
    linear-gradient(0deg, rgba(10,20,14,.72) 0%, rgba(10,20,14,.4) 15%, rgba(10,20,14,0) 32%);
}
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 40px 24px 0;
  display: flex;
  justify-content: space-between;
  gap: 32px;
}
/* min-width:0 je nutné — bez něj flex-item (.hero__content) v .hero__inner na úzkých
   obrazovkách nejde zmenšit pod přirozenou šířku textu (klasický flexbox bug) a
   nadpis/text pak přetéká místo zalomení. */
.hero__content { max-width: 560px; min-width: 0; color: var(--text-dark); }

.hero__content h1 {
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 14px;
}
.hero__content p {
  font-size: 15px;
  color: var(--text-muted);
  margin-bottom: 20px;
}
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.dash-hero__content .hero__actions { margin-bottom: 0; }

/* 3 mini benefity jedním řádkem hned pod tlačítky — jen ikona + krátký text, žádný popis,
   ať návštěvník uvidí všechny tři pilíře aplikace během pár vteřin. */
.hero__mini-benefits { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.hero__mini-benefits span { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 600; color: var(--text-dark); }
.hero__mini-benefits svg { color: var(--green-primary); }

/* 3 přínosy dole na fotce, každý ve vlastní kartě se stejným pozadím jako pravý
   box "Stín v létě" (rgba(10,20,14,.72)), ne průhledně přímo na fotce. */
.hero__bottom-strip {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 3;
  width: 100%;
  max-width: 1320px;
  padding: 0 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 20px;
}
.hero__bottom-strip__item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(18,45,30,.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 34px rgba(0,0,0,.24);
  padding: 14px 16px;
}
.hero__bottom-strip__icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  color: #cfe6b8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hero__bottom-strip__item strong { display: block; color: #fff; font-size: 15px; margin-bottom: 3px; }
.hero__bottom-strip__item span { display: block; color: rgba(255,255,255,.8); font-size: 13px; line-height: 1.4; }

@media (max-width: 900px) {
  /* .hero__bottom-strip přechází z position:absolute na static, takže se z něj stává
     skutečný flex-item .hero — bez flex-direction:column by se tlačil vedle
     .hero__inner (řádkově), místo aby se zarovnal pod ni na celou šířku. */
  /* align-items:flex-start (na .hero) je pro řádkové zarovnání shora — ve sloupcovém
     layoutu na mobilu ale znamená "nezarovnávat na celou šířku" (shrink-to-fit), takže
     nadpis/text dostane jen šířku podle obsahu a nezalamuje se, ale přeteče. */
  .hero { flex-direction: column; align-items: stretch; min-height: 0; }
  .hero__bottom-strip { grid-template-columns: 1fr; gap: 14px; position: static; transform: none; padding: 16px 20px; margin-top: -8px; width: auto; }

  /* Na desktopu fotka svisle vyplňuje celou .hero a horizontální gradient (viz
     .hero__photo-bg::before) zajistí kontrast jen v levé části, kde leží text —
     zbytek fotky vpravo zůstává čistý. Na mobilu ale text zabírá celou šířku (sloupcový
     layout), takže by ležel i na té "čisté" pravé části fotky bez ochranného gradientu
     a byl by nečitelný. Řešení: fotka se z podkladu pod textem stane samostatným
     obrázkovým panelem NAD textem — position:static ji (jako první prvek v HTML)
     posune před .hero__inner v normálním toku, tmavicí gradient už není potřeba. */
  .hero__photo-bg {
    position: static;
    left: auto; top: auto; transform: none;
    width: 100%; max-width: none; height: 220px;
    margin-bottom: 20px;
    /* Základní pravidlo má background-size:contain + position:right center — na desktopu
       záměrně (fotka "doplouvá" zprava, vlevo přechází do krémového pozadí pod textem).
       Jako samostatný banner nahoře ale "contain" nechává vlevo/vpravo prázdné pruhy
       podkladové barvy, protože poměr stran fotky neodpovídá 220px pásu. cover+center
       fotku plnohodnotně vyplní na celou šířku i výšku banneru, bez mezer. */
    background-size: cover;
    background-position: center;
  }
  .hero__photo-bg::before { display: none; }
}

@media (max-width: 900px) {
  .hero__inner { flex-direction: column; align-items: stretch; padding-top: 20px; }
  .hero__content h1 { font-size: 30px; }
  .hero__content { max-width: none; }
}

/* Hero stránky "Proč MapaZahrady existuje" nyní používá stejné .hero/.hero__photo-bg/
   .hero__bottom-strip jako index.php (viz výše), jen s vlastní fotkou
   assets/img/hero_about.jpg (plán → dospělá zahrada) a vlastními 3 body dole. */

/* "Co umí MapaZahrady" na about.php — jedna zvýrazněná (nejsilnější) karta "Rostliny za
   10 let" vlevo, tři menší podpůrné karty vpravo v řadě, aby hierarchie ukázala, že
   růst v čase je hlavní odlišující vlastnost, ne jedna ze čtyř rovnocenných funkcí. */
.about-wow-grid { margin-top: 24px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; align-items: stretch; }
.about-wow-grid__minor { display: grid; grid-template-rows: repeat(3, 1fr); gap: 14px; }
.about-wow-card { text-align: center; padding: 24px 18px; display: flex; flex-direction: column; justify-content: center; }
.about-wow-card__icon {
  width: 52px; height: 52px; border-radius: 50%; background: var(--green-tint); color: var(--green-primary);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 14px;
}
.about-wow-card h3 { font-size: 15px; margin-bottom: 5px; }
.about-wow-card p { color: var(--text-muted); font-size: 13.5px; margin: 0; }
.about-wow-card--featured {
  padding: 40px 32px;
  background: linear-gradient(155deg, var(--green-tint) 0%, #fff 60%);
  border: 1px solid rgba(92,138,58,.16);
}
.about-wow-card--featured .about-wow-card__icon {
  width: 72px; height: 72px; background: var(--green-primary); color: #fff; margin-bottom: 20px;
}
.about-wow-card--featured h3 { font-size: 22px; margin-bottom: 18px; }
.about-wow-card--featured p { font-size: 15px; color: var(--text-dark); }

/* Mini růstová scéna uvnitř velké karty — ať plocha není jen ikona + text, ale ukáže
   rovnou "Dnes / Za 5 let / Za 10 let" v malém, s výškou u každé fáze a spojovací
   linkou mezi nimi, přesně to, co dělá kartu nejsilnější z celé sekce. */
.about-wow-card__mini-growth {
  display: flex; align-items: flex-end; justify-content: center; gap: 6px;
  padding: 20px 10px 16px; margin-bottom: 18px; background: rgba(255,255,255,.6); border-radius: var(--radius-md);
}
.about-wow-card__mini-stage { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.about-wow-card__mini-stage span:nth-child(2) { font-size: 11.5px; font-weight: 700; color: var(--text-muted); }
.about-wow-card__mini-stage em { font-style: normal; font-size: 12px; font-weight: 800; color: var(--green-primary); }
.about-wow-card__mini-emoji { line-height: 1; }
.about-wow-card__mini-line { flex: 0 0 22px; height: 2px; background: repeating-linear-gradient(90deg, rgba(92,138,58,.4) 0 5px, transparent 5px 9px); margin-bottom: 22px; }

/* Mini mapka zahrady v kartě "Mapa výsadby" — vykreslená stejnou globální funkcí
   (garden_shape_preview_svg) jako skutečné plány v plánovači a komunitní galerii, se
   skutečnými SVG ikonami rostlin podle kategorie. Jmenovky pod ikonami jsou v HTML
   navrch (přesná procentuální pozice odvozená ze stejných souřadnic jako v SVG). */
.about-wow-card__mini-map {
  position: relative; width: 100%; aspect-ratio: 480 / 340; margin-bottom: 18px; border-radius: var(--radius-md);
  overflow: hidden; background: linear-gradient(160deg, #eaf2e2 0%, var(--green-tint) 100%);
  border: 1px solid rgba(92,138,58,.18);
}
.about-wow-card__mini-map .garden-preview-svg { width: 100%; height: 100%; display: block; }
/* Čistě dekorativní náhled — žádný hover ani klik na rostlinu (na rozdíl od stejné
   funkce použité v plánovači/komunitní galerii, kde je mapa interaktivní). */
.about-wow-card__mini-map .garden-preview-plant { pointer-events: none; cursor: default; }
.about-wow-card__mini-map-label {
  position: absolute; transform: translate(-50%, 0); pointer-events: none;
  font-size: 10.5px; font-weight: 700; color: var(--text-dark); background: rgba(255,255,255,.9);
  padding: 1px 6px; border-radius: 999px; white-space: nowrap; box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

/* Jemné micro-vizuály na pozadí tří menších karet (opacity .08) — malý motiv za ikonou,
   ať karty nejsou vizuálně identické (jen ikona+text), aniž by to bylo rušivé. */
.about-wow-card { position: relative; overflow: hidden; }
.about-wow-card::before {
  content: ""; position: absolute; inset: auto -6px -6px auto; width: 132px; height: 132px;
  opacity: .05; background-repeat: no-repeat; background-size: contain; pointer-events: none;
}
/* Strom + paprsek slunce + vržený stín — přesně "co karta slibuje", ne abstraktní tvar. */
.about-wow-card--shade::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Ccircle cx='95' cy='28' r='14' fill='%235c8a3a'/%3E%3Cpath d='M95 4v8M95 44v8M71 28h8M111 28h8M78 11l6 6M106 39l6 6M112 11l-6 6M84 39l-6 6' stroke='%235c8a3a' stroke-width='3' stroke-linecap='round'/%3E%3Cellipse cx='44' cy='108' rx='34' ry='9' fill='%231e3a2e'/%3E%3Crect x='38' y='72' width='9' height='40' fill='%231e3a2e'/%3E%3Ccircle cx='42' cy='58' r='30' fill='%231e3a2e'/%3E%3C/svg%3E");
}
/* Sazenice → keřík → strom v jedné řadě — stejná "růstová DNA" jako zbytek stránky. */
.about-wow-card--growth::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Crect x='25' y='96' width='4' height='14' fill='%231e3a2e'/%3E%3Ccircle cx='27' cy='90' r='8' fill='%231e3a2e'/%3E%3Crect x='60' y='80' width='6' height='30' fill='%231e3a2e'/%3E%3Ccircle cx='63' cy='68' r='18' fill='%231e3a2e'/%3E%3Crect x='100' y='58' width='8' height='52' fill='%231e3a2e'/%3E%3Ccircle cx='104' cy='40' r='28' fill='%231e3a2e'/%3E%3Cpath d='M20 110h96' stroke='%231e3a2e' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* Kalendář + list — "co dělat a kdy". */
.about-wow-card--calendar::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Crect x='16' y='26' width='84' height='74' rx='8' fill='none' stroke='%231e3a2e' stroke-width='4'/%3E%3Cpath d='M36 14v18M80 14v18' stroke='%231e3a2e' stroke-width='4' stroke-linecap='round'/%3E%3Cline x1='16' y1='48' x2='100' y2='48' stroke='%231e3a2e' stroke-width='4'/%3E%3Ccircle cx='36' cy='66' r='5' fill='%231e3a2e'/%3E%3Ccircle cx='58' cy='66' r='5' fill='%231e3a2e'/%3E%3Ccircle cx='36' cy='84' r='5' fill='%231e3a2e'/%3E%3Cpath d='M92 70c10 4 14 14 8 26-10-2-16-12-8-26Z' fill='%231e3a2e'/%3E%3C/svg%3E");
}
@media (max-width: 900px) {
  .about-wow-grid { grid-template-columns: 1fr; }
  .about-wow-grid__minor { grid-template-rows: none; grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .about-wow-grid__minor { grid-template-columns: 1fr; }
}

/* Feature strip s popiskem (about.php) — stejné ikony jako .feature-strip, ale s druhým
   řádkem popisu vedle ikony, ne jen tučný titulek. */
.about-feature-strip .feature-strip__item { align-items: flex-start; }
.about-feature-strip .feature-strip__item span { display: block; color: var(--text-muted); font-size: 13px; line-height: 1.4; margin-top: 3px; }

.about-growth-illustration, .about-shade-illustration, .about-problem-illustration { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.about-problem-illustration svg { width: 100%; height: auto; display: block; }
.about-growth-illustration svg, .about-shade-illustration svg { width: 100%; height: auto; display: block; }

/* Mapa výsadby použitá i jako ilustrace v sekci "Proč MapaZahrady vznikla?" — stejná
   mapa/rostliny/koruny/stín jako v kartě výše, jen bez okolní karty a s vlastním stínem. */
.about-story-map { margin-bottom: 0; box-shadow: var(--shadow-card); }

/* Velká samostatná sekce "Jak se zahrada mění v čase" — nejsilnější a nejunikátnější
   funkce MapaZahrady, proto dostává vlastní plnou sekci mezi "Co umí" a "Proč vznikla",
   ne jen malou ilustraci vedle textu. Ilustrace + řádky Výška/Koruna/Stín pod ní. */
.about-timeline { margin-top: 24px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.about-timeline svg { width: 100%; height: auto; display: block; }
.about-timeline__stats { background: #19381f; padding: 20px 32px 26px; }
.about-timeline__stat-row {
  display: grid; grid-template-columns: 140px repeat(3, 1fr); align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.10); color: #eef6de; font-size: 14px; font-weight: 700; text-align: center;
}
.about-timeline__stat-row:last-child { border-bottom: none; }
.about-timeline__stat-label { display: flex; align-items: center; gap: 7px; text-align: left; font-weight: 700; color: #cfe6b0; }
@media (max-width: 640px) {
  .about-timeline__stat-row { grid-template-columns: 90px repeat(3, 1fr); font-size: 12.5px; }
  .about-timeline__stat-label { font-size: 12px; }
}
@media (max-width: 480px) {
  .about-timeline__stat-row {
    grid-template-columns: 1fr 1fr 1fr; row-gap: 2px; padding: 12px 0;
  }
  .about-timeline__stat-label { grid-column: 1 / -1; margin-bottom: 4px; }
}

/* Sekce "Proč vznikla" má nyní obrázek vlevo a text vpravo (obrázek je silnější, musí
   zastavit scroll jako první), na rozdíl od výchozího pořadí .grid-2. */
.about-story-grid { grid-template-columns: 1fr 1.1fr; }
@media (max-width: 900px) { .about-story-grid { grid-template-columns: 1fr; } }

/* 4 kroky "Jak vypadá plánování v MapaZahrady" — nejsilnější nová sekce, číslované karty
   s ikonou, ať je jasná posloupnost kroků (na rozdíl od rovnocenných funkčních karet). */
.about-steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 48px; }
/* Propojovací tečkovaná linka 1 → 2 → 3 → 4 mezi číselnými odznaky. Odznaky sedí celé
   NAD kartami (ne napůl přes ně) — karta má margin-top: 64px, odznak top:-54px
   (výška 36px), takže mezi odznakem a kartou zůstává čistá mezera ~18px. Linka vede
   přesně středem odznaků: 64 - 54 + 18 (poloměr) = 28px od vrchu gridu. */
.about-steps-grid--connected { position: relative; }
.about-steps-grid--connected::before {
  content: ""; position: absolute; top: 28px; left: 12.5%; right: 12.5%; height: 0;
  border-top: 2px dashed rgba(70,120,55,.45); z-index: 2;
}
@media (max-width: 900px) { .about-steps-grid--connected::before { display: none; } }
.about-step { background: #fff; border-radius: var(--radius-lg); padding: 26px 20px; margin-top: 64px; box-shadow: var(--shadow-card); position: relative; z-index: 1; text-align: center; }
.about-step__number {
  position: absolute; top: -54px; left: 50%; transform: translateX(-50%); z-index: 3;
  width: 36px; height: 36px; border-radius: 50%; background: var(--green-primary); color: #fff;
  font-size: 15px; font-weight: 800; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(70,120,55,.18);
}
.about-step__icon {
  width: 48px; height: 48px; border-radius: 50%; background: var(--green-tint); color: var(--green-primary);
  display: flex; align-items: center; justify-content: center; margin: 10px auto 14px;
}
.about-step h3 { font-size: 15px; margin-bottom: 6px; }
.about-step p { color: var(--text-muted); font-size: 13.5px; margin: 0; }
@media (max-width: 900px) { .about-steps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .about-steps-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Feature strip (4 ikony)
   ========================================================================== */

.feature-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.feature-strip__item {
  display: flex;
  align-items: center;
  gap: 14px;
}
.feature-strip__icon {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--green-tint);
  color: var(--green-primary);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.feature-strip__item strong { display: block; font-size: 14px; font-weight: 700; }

@media (max-width: 860px) {
  .feature-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .feature-strip { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Kalendář péče (homepage sekce i /care.php)
   ========================================================================== */

.care-section { display: grid; grid-template-columns: 1fr 1.6fr; gap: 40px; align-items: start; }
/* Grid položky se defaultně nesmí zmenšit pod min-content šířku svého obsahu (stejný
   princip jako u flex položek, viz komentář u .hero__content výše) — .care-card uvnitř
   obsahuje .month-tabs se 12 nezalomitelnými tlačítky (white-space:nowrap), takže bez
   min-width:0 by se .care-card (a s ním celá mřížka .care-section) nemohla zúžit pod tuto
   šířku a na mobilu by přetekla mimo obrazovku, i po zbalení mřížky na jeden sloupec. */
.care-card { min-width: 0; }
.care-section__intro .section-title { margin-bottom: 12px; }
.care-section__intro p { color: var(--text-muted); margin-bottom: 18px; }

.care-card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 6px;
}

.month-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 10px 10px 8px;
  border-bottom: 1px solid var(--border-color);
}
.month-tab {
  border: none;
  background: transparent;
  padding: 7px 14px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.month-tab:hover { color: var(--text-dark); }
.month-tab.is-active { background: var(--green-primary); color: #fff; font-weight: 800; }
.month-tab__icon { display: none; align-items: center; margin-right: 5px; }
.month-tab__icon svg { display: block; }
.month-tab.is-active .month-tab__icon { display: inline-flex; }

.month-panel { display: none; padding: 18px; }
.month-panel.is-active { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 20px; animation: monthFadeIn .2s ease; }
@keyframes monthFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Malá ilustrovaná scénka měsíce (obloha + zem + strom + sezónní doplněk jako skutečné
   SVG tvary, ne řada plochých ikon) — vykresluje ji care_month_scene_svg() v PHP. */
.month-panel__mood { border-radius: var(--radius-md); width: 100%; height: 140px; overflow: hidden; }
.month-scene-svg { width: 100%; height: 100%; display: block; }

/* .month-panel__photo (ilustrace měsíce na indexu, assets/img/month-thumb.svg) neměla
   žádné vlastní pravidlo — SVG bez width/height atributů se pak vykreslovalo ve svém
   výchozím rozměru bez omezení výšky (na mobilu, kde je to jediný sloupec grid layoutu,
   to vypadalo jako obří nekontrolovaná zelená plocha přes celou stránku). */
.month-panel__photo { border-radius: var(--radius-md); width: 100%; height: 140px; overflow: hidden; }
.month-panel__photo img { width: 100%; height: 100%; object-fit: cover; }

.month-panel__body h3 { color: var(--green-primary); font-size: 16px; margin-bottom: 8px; }

.season-strip { display: flex; gap: 8px; padding: 12px 10px 0; flex-wrap: wrap; }
.season-strip__item {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; color: var(--text-muted);
  padding: 5px 11px; border-radius: 999px; background: var(--bg-cream, #f8f7f3);
}
.season-strip__item svg { flex-shrink: 0; }
.season-strip__item.is-current { background: var(--green-tint); color: var(--green-deep, #1f3a2e); }

.month-priority {
  background: #FFF6F3; border: 1px solid #F3C7BD; border-radius: var(--radius-md);
  padding: 12px 14px; margin-bottom: 14px;
  box-shadow: 0 2px 10px rgba(163,58,34,.07);
}
.month-priority__label {
  display: flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: #8A2A16; margin-bottom: 5px;
}
.month-priority__risk { font-size: 14.5px; color: var(--text-dark); margin: 0; display: flex; align-items: center; gap: 6px; }
.month-priority__risk svg { color: #8A2A16; flex-shrink: 0; }
.month-priority__risk strong { color: #8A2A16; font-weight: 800; }

.month-tip__why { font-size: 12px; font-weight: 700; color: var(--text-dark); margin: 10px 0 4px; }
.month-tip__reasons { list-style: none; margin: 0; padding: 0; }
.month-tip__reasons li { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; color: var(--text-muted); padding: 3px 0; }
.month-tip__reasons li svg { color: var(--green-primary); flex-shrink: 0; margin-top: 1px; }

.month-highlights { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--border-color); }
@media (max-width: 860px) { .month-highlights { grid-template-columns: 1fr 1fr; } }
.month-highlights__title { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--text-dark); margin: 0 0 10px; }
.month-highlights__title svg { color: var(--green-primary); }
.month-highlights__row { display: flex; flex-wrap: wrap; gap: 10px; }
.month-highlights__plant {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 84px; text-align: center; color: var(--text-dark); font-size: 11px;
  position: relative;
}
/* Vlastní tooltip s reálným obdobím (kvete/sklízí se/sází se) místo obyčejného
   prohlížečového title — propojuje kalendář přímo s daty konkrétní rostliny. */
.month-highlights__plant[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
  background: var(--green-deep, #1f3a2e); color: #fff; font-size: 11px; font-weight: 600;
  white-space: pre-line; text-align: center; line-height: 1.4;
  padding: 6px 10px; border-radius: 12px; width: max-content; max-width: 150px;
  box-shadow: 0 10px 25px rgba(0,0,0,.16);
  opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease;
  z-index: 5;
}
.month-highlights__plant[data-tooltip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.month-highlights__plant span:last-child { white-space: normal; word-break: break-word; max-width: 100%; line-height: 1.3; }
.month-highlights__icon {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; background: var(--bg-cream, #f8f7f3);
  box-shadow: 0 2px 8px rgb(0 0 0 / 6%);
  transition: transform .15s ease, box-shadow .15s ease;
}
.month-highlights__plant:hover .month-highlights__icon { transform: translateY(-2px); box-shadow: 0 4px 12px rgb(0 0 0 / 10%); }
@media (max-width: 700px) { .month-highlights { grid-template-columns: 1fr; } }

/* Jemné barevné rozlišení tří sekcí (jen ikonky/nadpisy/hover, ne pozadí karty) — Sázet
   zelená, Kvete fialová, Sklízet oranžová — ať se tři stejně postavené sekce opticky liší. */
.month-highlights__group--plant .month-highlights__title { color: #3f6a24; }
.month-highlights__group--plant .month-highlights__title svg { color: #5c8a3a; }
.month-highlights__group--plant .month-highlights__plant:hover { color: #3f6a24; }
.month-highlights__group--plant .month-highlights__plant:hover .month-highlights__icon { box-shadow: 0 4px 12px rgba(92,138,58,.18); }

.month-highlights__group--bloom .month-highlights__title { color: #7a4d9e; }
.month-highlights__group--bloom .month-highlights__title svg { color: #9568bd; }
.month-highlights__group--bloom .month-highlights__plant:hover { color: #7a4d9e; }
.month-highlights__group--bloom .month-highlights__plant:hover .month-highlights__icon { box-shadow: 0 4px 12px rgba(149,104,189,.18); }

.month-highlights__group--harvest .month-highlights__title { color: #b8641f; }
.month-highlights__group--harvest .month-highlights__title svg { color: #d9822f; }
.month-highlights__group--harvest .month-highlights__plant:hover { color: #b8641f; }
.month-highlights__group--harvest .month-highlights__plant:hover .month-highlights__icon { box-shadow: 0 4px 12px rgba(217,130,47,.18); }
.task-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-color);
  font-size: 13.5px;
}
.task-list li:last-child { border-bottom: none; }
.task-list li svg { color: var(--green-primary); flex-shrink: 0; }

.month-tip {
  background: var(--green-tint);
  border-radius: var(--radius-md);
  padding: 14px;
  align-self: start;
}
.month-tip__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  margin-bottom: 6px;
  font-size: 14px;
  color: var(--text-dark);
}
.month-tip__title svg { color: var(--green-primary); }
.month-tip p { color: var(--text-muted); font-size: 13px; margin: 0; }

@media (max-width: 980px) {
  .care-section { grid-template-columns: 1fr; }
  .month-panel.is-active { grid-template-columns: 1fr; }
}

/* ==========================================================================
   CTA pruh (tmavý)
   ========================================================================== */

.cta-band {
  background: var(--green-deep-darker);
  color: #fff;
  padding: 26px 0;
}
.cta-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.cta-band__left { display: flex; align-items: center; gap: 16px; }
.cta-band__icon {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  color: #cfe6b8;
  flex-shrink: 0;
}
.cta-band__left h3 { font-size: 17px; margin-bottom: 3px; }
.cta-band__left p { margin: 0; color: rgba(255,255,255,.7); font-size: 13px; }

.cta-band__stats { display: flex; gap: 26px; flex-wrap: wrap; }
.cta-band__stat { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.cta-band__stat svg { color: #cfe6b8; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer { background: var(--green-deep); color: rgba(255,255,255,.85); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 28px;
  padding-top: 28px;
  padding-bottom: 16px;
}
.footer-grid h4 { color: #fff; font-size: 13px; margin-bottom: 8px; }
.footer-grid p, .footer-grid li { font-size: 12.5px; color: rgba(255,255,255,.65); }
.footer-grid li { margin-bottom: 5px; }
.footer-grid a:hover { color: #cfe6b8; }
.footer-brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; margin-bottom: 6px; }
.footer-brand img { width: 28px; height: 28px; }

.footer-tip {
  display: block; margin-top: 18px; padding: 14px 16px; border-radius: var(--radius-md);
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.08);
  transition: background .15s ease, border-color .15s ease; max-width: 280px;
}
.footer-tip:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); }
.footer-tip__label {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: #9bc46a; margin-bottom: 6px;
}
.footer-tip strong { display: block; color: #fff; font-size: 14.5px; margin-bottom: 4px; }
.footer-tip__text { display: block; font-size: 12.5px; color: rgba(255,255,255,.65); line-height: 1.45; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 11px 0;
  font-size: 12px;
  color: rgba(255,255,255,.55);
  text-align: center;
}

@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}

.site-footer--minimal { background: var(--bg-cream); border-top: 1px solid var(--border-color); }
.site-footer__minimal-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
}
.site-footer__save-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--green-primary-dark);
  font-weight: 600;
}
.site-footer__minimal-links { color: var(--text-muted); }
.site-footer__minimal-links a { color: var(--text-muted); }
.site-footer__minimal-links a:hover { color: var(--green-primary-dark); }

/* ==========================================================================
   Obecné komponenty: karty, badge, alert, formuláře
   ========================================================================== */

.page-banner {
  background: var(--green-deep);
  color: #fff;
  padding: 31px 0;
}
.page-banner .eyebrow { color: #cfe6b8; }
.page-banner h1 { font-size: 28px; margin-bottom: 8px; }
.page-banner h1.contact-hero-title { margin-bottom: 13px; }
.page-banner p { color: rgba(255,255,255,.75); max-width: 640px; margin: 0; font-size: 14.5px; }
.page-banner--compact { padding: 16px 0; }
.page-banner__note { display: block; margin-top: 12px; font-size: 12px; font-weight: 600; color: #9bc46a; }

/* Detail rostliny (plant-detail.php) --------------------------------------------------- */
.plant-detail__back { display: inline-block; color: var(--text-muted); font-size: 14px; padding: 18px 0 0; }
.plant-detail__back:hover { color: var(--green-primary); }

.plant-detail__hero { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin-bottom: 32px; }
@media (max-width: 860px) { .plant-detail__hero { grid-template-columns: 1fr; } }

.plant-detail__photo-main {
  position: relative; display: block; width: 100%; padding: 0; border: none; background: none;
  cursor: zoom-in; border-radius: var(--radius-lg); overflow: hidden;
}
.plant-detail__photo-main img { width: 100%; height: 340px; object-fit: cover; display: block; margin: 0; border-radius: var(--radius-lg); transition: transform .25s ease; filter: saturate(.95); }
.plant-detail__photo-main:hover img { transform: scale(1.02); }
.plant-detail__photo-main--empty { cursor: default; }
.plant-detail__photo-count {
  position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 5px;
  background: rgba(20,20,15,.55); color: #fff; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px;
}
.plant-detail__thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.plant-detail__thumb { width: 60px; height: 60px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; cursor: pointer; opacity: .7; transition: opacity .15s, border-color .15s; }
.plant-detail__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; }
.plant-detail__thumb:hover { opacity: 1; }
.plant-detail__thumb.is-active { opacity: 1; border-color: var(--green-primary); }

/* Odkaz na nahlášení lepší fotky je vedlejší akce, ne hlavní CTA — malý tichý textový odkaz,
   ne velké tlačítko přes celou šířku sloupce (to zbytečně "zatěžuje" levý sloupec). */
.plant-detail__photo-suggest-link {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 10px;
  background: none; border: none; padding: 0; font-size: 11.5px; color: #b3b6ae; cursor: pointer; opacity: .7;
}
.plant-detail__photo-suggest-link:hover { color: var(--green-primary); opacity: 1; }
.plant-detail__photo-suggest-link svg { color: inherit; }

.plant-detail__verdict {
  background: var(--bg-cream, #f8f7f3);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-top: 14px;
}
.plant-detail__verdict-label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--green-primary); margin: 0 0 6px; }
.plant-detail__verdict p { font-size: 13.5px; color: var(--text-dark); line-height: 1.45; margin: 0 0 4px; }
.plant-detail__verdict-caveat { display: flex; align-items: flex-start; gap: 6px; color: var(--text-muted) !important; font-size: 12.5px !important; }
.plant-detail__verdict-caveat svg { color: #b45309; flex-shrink: 0; margin-top: 1px; }

.plant-detail__title { font-size: 34px; font-weight: 700; line-height: 1.1; margin: 10px 0 2px; }
.plant-detail__latin { font-style: italic; color: #7A7A7A; font-size: 14px; margin-bottom: 4px; }
.plant-detail__desc { color: var(--text-dark); font-size: 15px; line-height: 1.6; margin: 14px 0; }
.plant-detail__cta { margin: 18px 0; }

/* Hlavní odlišující "wow" fakta — jak rostlina vypadá v kontextu domu/člověka — hned pod
   názvem, ve velkých číslech. Tohle (ne fotka) je unikátní hodnota MapaZahrady. */
.plant-detail__wow { display: flex; gap: 22px; flex-wrap: wrap; margin: 14px 0 4px; padding: 16px 0; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
.plant-detail__wow-item { display: flex; flex-direction: column; gap: 2px; }
.plant-detail__wow-value { font-size: 24px; font-weight: 800; color: var(--green-deep, #1f3a2e); line-height: 1.1; }
.plant-detail__wow-label { font-size: 12px; color: var(--text-muted); }

.plant-detail__quickfacts { background: none; padding: 0; margin-bottom: 20px; }
.plant-detail__quickfacts h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: 12px; }
.plant-detail__stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.plant-detail__stat-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  background: var(--bg-cream, #f8f7f3); border-radius: var(--radius-md); padding: 16px 10px;
}
.plant-detail__stat-card svg { color: var(--green-primary); }
.plant-detail__stat-card strong { font-size: 17px; font-weight: 800; color: var(--text-dark); }
.plant-detail__stat-card span { font-size: 12px; color: var(--text-muted); }
.plant-detail__stat-icon--sun svg { color: #C9971F; }
.plant-detail__stat-icon--water svg { color: #4E8C82; }
.plant-detail__stat-icon--edible svg { color: #4E7A39; }
.plant-detail__stat-icon--frost svg { color: #7189A0; }
.plant-detail__stat-icon--soil svg { color: #6E8F55; }

.plant-detail__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.plant-detail__grid--hero { grid-template-columns: 1fr 1fr; }
@media (max-width: 860px) { .plant-detail__grid, .plant-detail__grid--hero { grid-template-columns: 1fr; } }
.plant-detail__grid .card h3,
.plant-detail__scale-card h3,
.plant-detail__shade-card h3,
.plant-detail__calendar-card h3,
.plant-detail__score-card h3,
.plant-detail__age-card h3,
.plant-detail__botanical-card h3 { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 750; margin-bottom: 14px; }
.plant-detail__botanical-card h3 { font-size: 17px; }
.plant-detail__grid .card h3 svg,
.plant-detail__scale-card h3 svg,
.plant-detail__shade-card h3 svg,
.plant-detail__calendar-card h3 svg { color: var(--green-primary); }

/* Stejný "Airbnb/Apple" vzhled karet jako u .plant-card — víc zaoblení, měkčí vrstvený stín,
   místo ploché obecné .card (sdílené hodnoty, ne duplicitně vymyšlené jinde). */
.plant-detail__grid .card,
.plant-detail__scale-card,
.plant-detail__shade-card,
.plant-detail__calendar-card {
  border-radius: 20px;
  border-color: rgba(30, 58, 46, 0.06);
  box-shadow: 0 2px 8px rgba(30, 58, 46, 0.05), 0 16px 36px rgba(30, 58, 46, 0.10);
}

/* Náhled v zahradě je hlavní unikátní funkce stránky — dostává vlastní plnošířkový řádek,
   jasně opticky nad "Dopad na zahradu" a "Stín v zahradě" pod ním (ty jsou o stupeň níž). */
.plant-detail__cta-btn {
  height: 40px; border-radius: 999px; font-weight: 700;
  box-shadow: 0 4px 12px rgba(65, 120, 55, .18);
  transition: transform .18s ease, box-shadow .18s ease;
}
.plant-detail__cta-btn:hover { transform: translateY(-2px); box-shadow: 0 9px 22px rgba(65, 120, 55, .264); }

.plant-detail__scale-card--full,
.plant-detail__shade-card,
.plant-detail__age-card,
.plant-detail__scale-highlight-card {
  transition: transform .18s ease, box-shadow .18s ease;
}
.plant-detail__scale-card--full:hover,
.plant-detail__shade-card:hover,
.plant-detail__age-card:hover,
.plant-detail__scale-highlight-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(30, 60, 40, .10);
}
.plant-detail__scale-card .plant-scale-preview svg { transition: transform .2s ease; }
.plant-detail__scale-card:hover .plant-scale-preview svg { transform: scale(1.015); }

.plant-detail__scale-card--full { padding: 14px 24px 10px 10px; margin-bottom: 20px; }
.plant-detail__scale-card--full h3 { padding-left: 18px; margin-bottom: 4px; }
.plant-detail__spacing-row { display: flex; flex-wrap: wrap; gap: 28px; padding: 14px 18px 6px; background: var(--bg-cream, #f8f7f3); border-radius: var(--radius-md); margin: 6px 18px 0; }
.plant-detail__spacing-item { display: flex; align-items: center; gap: 9px; padding: 6px 0; }
.plant-detail__spacing-item svg { color: var(--green-primary); flex-shrink: 0; }
.plant-detail__spacing-item span { font-size: 13px; color: var(--text-muted); display: block; }
.plant-detail__spacing-item strong { font-size: 17px; font-weight: 800; color: var(--text-dark); display: block; }
.plant-detail__spacing-hint { font-size: 13.5px; color: var(--text-muted); padding-left: 18px; margin-top: 8px !important; }

/* Jak rostlina roste v čase — postava jako pevné "pravítko" a 5 siluet rostliny v různém
   věku vedle sebe, na krémovém "nebi" ať to odskočí od bílých karet okolo. */
.plant-detail__age-card {
  background: linear-gradient(180deg, #f3f6ee 0%, #fbfaf6 70%);
  border: none;
  border-radius: 20px;
  padding: 22px 24px 18px;
  margin-bottom: 20px;
}
.plant-age-timeline { margin: 8px 0 4px; overflow-x: auto; }
.plant-age-step { transition: transform .2s ease, opacity .2s ease; cursor: default; }
.plant-age-step:hover { transform: scale(1.08); }
.plant-age-timeline svg:has(.plant-age-step:hover) .plant-age-step:not(:hover) { opacity: .55; }
.plant-detail__age-hint { font-size: 12.5px; color: var(--text-muted); margin: 6px 0 0; }
.plant-detail__scale-card .plant-scale-preview { margin: 0; }
.plant-detail__scale-card .plant-scale-preview svg {
  height: auto !important;
  width: 100% !important;
  max-width: 100% !important;
}

.plant-detail__scale-highlight-card {
  background: linear-gradient(165deg, #eef4e6 0%, #e4eedb 100%);
  border-radius: 20px;
  border: none;
  padding: 24px;
}
.plant-detail__scale-highlight-label { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--green-deep, #1f3a2e); margin: 0 0 12px; }
.plant-detail__scale-highlight-label svg { color: var(--green-primary); }

.plant-detail__impact-list { list-style: none; margin: 0; padding: 0; }
.plant-detail__impact-list li { display: flex; align-items: flex-start; gap: 10px; padding: 11px 0; border-top: 1px solid rgba(30,58,46,.062); }
.plant-detail__impact-list li:first-child { border-top: none; padding-top: 2px; }
.plant-detail__impact-list li svg { color: var(--green-primary); flex-shrink: 0; margin-top: 2px; }
.plant-detail__impact-list li div { display: flex; flex-direction: column; gap: 2px; }
.plant-detail__impact-list li strong { font-size: 14px; color: var(--green-deep, #1f3a2e); }
.plant-detail__impact-list li span { font-size: 13px; color: var(--text-dark); line-height: 1.45; }

.plant-detail__score-card { margin-bottom: 20px; }
.plant-detail__score-list { list-style: none; margin: 0 0 10px; padding: 0; }
.plant-detail__score-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-top: 1px solid rgba(30,58,46,.062);
}
.plant-detail__score-list li:first-child { border-top: none; padding-top: 2px; }
.plant-detail__score-label { display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--text-dark); }
.plant-detail__score-label svg { color: var(--green-primary); }
.plant-detail__score-result { display: flex; align-items: center; gap: 10px; }
.plant-detail__score-result strong { font-size: 14px; font-weight: 800; color: var(--green-deep, #1f3a2e); white-space: nowrap; }
.plant-detail__score-word--good { color: #4E7A39; }
.plant-detail__score-word--mid { color: #7A6F2A; }
.plant-detail__score-word--low { color: #B45309; }
.plant-detail__score-dots { display: flex; gap: 4px; }
.plant-detail__score-dots { align-items: center; }
.plant-detail__score-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--border-color); display: inline-block; opacity: .35; }
.plant-detail__score-dots i.is-filled { width: 7px; height: 7px; background: var(--green-primary); opacity: 1; }

.plant-detail__glance-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.plant-detail__glance-item {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-cream, #f8f7f3); color: var(--text-dark);
  font-size: 12.5px; font-weight: 600; padding: 6px 11px; border-radius: 999px;
}
.plant-detail__glance-item svg { color: var(--green-primary); }

.plant-detail__factlist--check li svg { color: var(--green-primary); }

.plant-detail__calendar-card { margin-bottom: 20px; }

.plant-detail__month-tasks {
  background: linear-gradient(165deg, #eef4e6 0%, #e4eedb 100%);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 18px;
}
.plant-detail__month-tasks-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--green-primary); margin: 0 0 10px; }
.plant-detail__month-tasks-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.plant-detail__month-task { background: rgba(255,255,255,.6); border-radius: var(--radius-sm); padding: 10px 12px; }
.plant-detail__month-task-title { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--green-deep, #1f3a2e); margin: 0 0 4px; }
.plant-detail__month-task-title svg { color: var(--green-primary); }
.plant-detail__month-task p { font-size: 12px; color: var(--text-dark); margin: 2px 0 0; line-height: 1.4; }
.plant-detail__month-task p strong { color: var(--text-muted); font-weight: 600; }
.plant-detail__month-task-why { font-size: 12.5px !important; }
.plant-detail__month-task-period {
  display: flex; align-items: center; gap: 6px;
  margin-top: 8px !important; padding-top: 7px; border-top: 1px dashed rgba(30,58,46,.15);
  font-size: 12.5px !important; font-weight: 700; color: var(--green-deep, #1f3a2e);
}
.plant-detail__month-task-period span {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--text-muted); background: rgba(30,58,46,.08); padding: 2px 7px; border-radius: 999px;
}

.plant-detail__botanical-card { margin-bottom: 20px; }
.plant-detail__botanical-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 700px) { .plant-detail__botanical-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .plant-detail__botanical-grid { grid-template-columns: 1fr; } }

.plant-detail__seasonal-heading { font-size: 15px; font-weight: 800; color: var(--text-dark); margin: 14px 0 8px; }
.plant-detail__seasonal { background: var(--bg-cream, #f8f7f3); border-radius: var(--radius-md); padding: 16px 18px; margin-bottom: 20px; }
.plant-detail__seasonal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 700px) { .plant-detail__seasonal-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .plant-detail__seasonal-grid { grid-template-columns: 1fr; } }
.plant-detail__seasonal-item {
  display: flex; flex-direction: column; gap: 5px;
  padding: 8px 8px 10px;
  border-top: 2px solid var(--seasonal-accent, var(--green-primary));
  background: var(--seasonal-tint, transparent);
  border-radius: 0 0 6px 6px;
}
.plant-detail__seasonal-item--jaro { --seasonal-tint: #F6FBF4; }
.plant-detail__seasonal-item--léto { --seasonal-tint: #FFFAF1; }
.plant-detail__seasonal-item--podzim { --seasonal-tint: #FFF7EF; }
.plant-detail__seasonal-item--zima { --seasonal-tint: #F4F8FB; }
.plant-detail__seasonal-item strong {
  display: flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 750; letter-spacing: .01em;
  color: var(--seasonal-accent, var(--green-primary));
}
.plant-detail__seasonal-item strong svg { flex-shrink: 0; width: 15px; height: 15px; }
.plant-detail__seasonal-item span { font-size: 12.5px; color: var(--text-dark); line-height: 1.4; }
.plant-detail__seasonal-item--jaro { --seasonal-accent: #6fA23a; }
.plant-detail__seasonal-item--léto { --seasonal-accent: #d4972a; }
.plant-detail__seasonal-item--podzim { --seasonal-accent: #b5651d; }
.plant-detail__seasonal-item--zima { --seasonal-accent: #6F8FA3; }
.plant-detail__botanical-label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--green-primary); margin-bottom: 6px; }
.plant-detail__botanical-item p { font-size: 13px; color: var(--text-dark); line-height: 1.45; margin: 0; }
.plant-detail__growth-mini { width: 100%; height: 90px; margin-bottom: 8px; background: var(--bg-cream, #f8f7f3); border-radius: var(--radius-sm); }
.plant-detail__growth-mini svg { width: 100%; height: 100%; display: block; }
.plant-detail__growth-mini-caption { font-size: 12px; color: var(--text-muted); }
.plant-detail__info-box {
  background: #F7F8F4; border-left: 3px solid #6E8F55; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 12px 14px; margin-top: 16px;
}
.plant-detail__info-box .plant-detail__botanical-label { margin-bottom: 4px; color: #5f7a4a; }
.plant-detail__info-box p { font-size: 13px; color: var(--text-dark); line-height: 1.5; margin: 0; }
.plant-detail__botanical-photo {
  display: block; width: 100%; padding: 0; border: none; cursor: zoom-in;
  border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 8px;
}
.plant-detail__botanical-photo img { width: 100%; height: 90px; object-fit: cover; display: block; margin: 0; transition: transform .2s ease; }
.plant-detail__botanical-photo:hover img { transform: scale(1.05); }

.plant-detail__shade-card { text-align: center; }
.plant-detail__shade-diagram { max-width: 320px; margin: 0 auto; }
.plant-detail__shade-diagram svg { width: 100%; height: auto; display: block; }
.plant-detail__shade-diagram ellipse { transition: rx .25s ease, cx .25s ease, ry .25s ease; }
.plant-detail__shade-highlight {
  background: linear-gradient(165deg, #eef4e6 0%, #e4eedb 100%);
  border-radius: var(--radius-md);
  padding: 12px 16px 14px;
  margin: 14px 0 10px;
}
.plant-detail__shade-label { font-size: 14px; color: var(--text-muted); margin: 0; }
.plant-detail__shade-value { font-size: 49px; font-weight: 800; color: var(--green-deep, #1f3a2e); margin: 2px 0 0; line-height: 1.05; }
.plant-detail__shade-sublabel { font-size: 11.5px; color: var(--text-muted); margin: 2px 0 0; }
.plant-detail__shade-slider { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; }
.plant-detail__shade-slider span { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
.plant-detail__shade-slider span svg { color: var(--text-muted); }
.plant-detail__shade-slider input[type="range"] {
  flex: 1; -webkit-appearance: none; appearance: none; height: 4px; border-radius: 999px;
  background: var(--border-color); outline: none; cursor: pointer;
}
.plant-detail__shade-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--green-primary); cursor: pointer; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.plant-detail__shade-slider input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; background: var(--green-primary); cursor: pointer;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25);
}

.plant-detail__shade-notes { list-style: none; margin: 0 0 6px; padding: 0; text-align: left; }
.plant-detail__shade-notes li { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; color: var(--text-dark); padding: 5px 0; }
.plant-detail__shade-notes li svg { color: var(--green-primary); flex-shrink: 0; margin-top: 1px; }

.plant-detail__factlist { list-style: none; margin: 0; padding: 0; }
.plant-detail__factlist li { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; color: var(--text-dark); padding: 5px 0; line-height: 1.55; }
.plant-detail__factlist li svg { color: var(--green-primary); flex-shrink: 0; margin-top: 2px; }
.plant-detail__subhead { font-size: 13px; font-weight: 750; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); margin: 14px 0 6px; }

.plant-detail__reco { display: flex; align-items: flex-start; gap: 6px; font-size: 13.5px; color: var(--text-dark); line-height: 1.45; margin: 0 0 10px; }

.plant-detail__use-list { list-style: none; margin: 4px 0 0; padding: 0; }
.plant-detail__use-list li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--text-dark); padding: 7px 0; border-top: 1px solid rgba(30,58,46,.062); }
.plant-detail__use-list li:first-child { border-top: none; padding-top: 2px; }
.plant-detail__use-list li svg { color: var(--green-primary); flex-shrink: 0; }
.plant-detail__reco strong { color: var(--green-deep, #1f3a2e); }
.plant-detail__reco--warn strong { color: #b45309; }
.plant-detail__reco--warn svg { color: #b45309; flex-shrink: 0; margin-top: 2px; }

.plant-detail__calendar-card { grid-column: 1 / -1; }
.plant-detail__calendar { overflow-x: auto; }
.plant-detail__calendar-row { display: grid; grid-template-columns: 110px repeat(12, 1fr); align-items: center; gap: 4px; padding: 5px 0; min-width: 520px; }
.plant-detail__calendar-row--head span { font-size: 10.5px; color: var(--text-muted); text-align: center; text-transform: uppercase; }
.plant-detail__calendar-label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-dark); }
.plant-detail__calendar-label svg { color: var(--green-primary); }
.plant-detail__calendar-dot { display: block; width: 12px; height: 12px; margin: 0 auto; border-radius: 50%; background: var(--border-color); }
.plant-detail__calendar-dot.is-active { background: var(--dot-color, var(--green-primary)); }

.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px 20px;
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 700;
  font-size: 15px;
  color: var(--text-dark);
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary svg { color: var(--green-primary); transition: transform .15s ease; flex-shrink: 0; }
.faq-item[open] summary svg { transform: rotate(90deg); }
.faq-item p { margin: 12px 0 0; color: var(--text-muted); font-size: 14px; line-height: 1.6; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 900px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 980px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 28px;
}

.service-card__icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--green-tint);
  color: var(--green-primary);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.service-card h3 { font-size: 18px; }
.service-card p { color: var(--text-muted); font-size: 14.5px; margin: 0; }

.testimonial-card .stars { margin-bottom: 10px; }
.star-rating { display: inline-flex; gap: 2px; }
.star-rating__star { color: var(--border-color); }
.star-rating__star.is-filled { color: #e0a836; }
.star-rating__star svg { fill: currentColor; }
.testimonial-card p { font-style: italic; color: var(--text-dark); }
.testimonial-card strong { display: block; margin-top: 12px; color: var(--green-primary); }

/* Komunitní galerie zahrad (Inspirace) ---------------------------------------- */
.inspirace-grid { margin-top: 4px; }
.inspirace-card { display: block; color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
.inspirace-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover, 0 12px 28px rgba(0,0,0,.1)); }
.inspirace-card__preview {
  height: 150px;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #f6f9f1 0%, #fbfaf6 65%);
  margin-bottom: 12px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.garden-preview-svg { width: 100%; height: 100%; }
.garden-preview-empty { color: var(--border-color); }
.inspirace-card__head { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.inspirace-card h3 { font-size: 17px; margin-bottom: 4px; }
.inspirace-card__why {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; color: var(--green-deep, #1f3a2e);
  margin: 8px 0 0; padding-top: 8px; border-top: 1px solid rgba(30,58,46,.08);
}
.inspirace-card__why svg { color: var(--green-primary); flex-shrink: 0; }
.inspirace-card__why--top { margin: 0 0 10px; padding-top: 0; border-top: none; }
.inspirace-card__icons { display: flex; gap: 6px; margin: 0 0 10px; flex-wrap: wrap; }
.inspirace-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 8px rgb(0 0 0 / 6%);
  flex-shrink: 0;
}
.inspirace-card__icon svg { width: 20px; height: 20px; }
.inspirace-card__icon-more {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; background: var(--bg-cream, #f8f7f3);
  font-size: 12px; font-weight: 700; color: var(--text-muted); flex-shrink: 0;
}
.inspirace-card__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--text-muted); margin: 0; }
.inspirace-card__meta span { display: inline-flex; align-items: center; gap: 4px; }
.inspirace-card__meta svg { color: var(--green-primary); flex-shrink: 0; }

.inspirace-quick-filters { display: flex; gap: 8px; margin: 16px 0 4px; flex-wrap: wrap; }
.inspirace-quick-filter {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  background: #fff; border: 1px solid var(--border-color); border-radius: 999px;
  padding: 7px 14px; transition: border-color .15s ease, color .15s ease;
}
.inspirace-quick-filter svg { color: var(--green-primary); }
.inspirace-quick-filter:hover { border-color: var(--green-primary); color: var(--text-dark); }
.inspirace-quick-filter.is-active { background: rgba(92,138,58,.1); border-color: var(--green-primary); color: var(--green-deep, #1f3a2e); }

.inspirace-detail__preview { padding: 24px; }
.inspirace-detail__preview .garden-preview-svg { width: 100%; height: 420px; }
.inspirace-detail__plant-list { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.inspirace-detail__plant-list li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.inspirace-detail__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.inspirace-detail__icon { display: inline-flex; flex-shrink: 0; }
.inspirace-detail__plant-item {
  cursor: pointer; border-radius: var(--radius-sm); padding: 6px 8px; margin: 0 -8px;
  transition: background .15s ease;
}
.inspirace-detail__plant-item:hover { background: var(--bg-cream, #f8f7f3); }
.inspirace-detail__plant-item.is-active { background: rgba(92,138,58,.14); }
.garden-preview-plant { cursor: pointer; transition: filter .15s ease, stroke-width .15s ease; }
.garden-preview-plant.is-active { filter: drop-shadow(0 0 3px rgba(92,138,58,.8)); }
circle.garden-preview-plant.is-active { stroke: var(--green-primary, #5c8a3a); stroke-width: 2.5; }
g.garden-preview-plant.is-active circle:first-child { fill: #fff3c4; fill-opacity: 1; }

.blog-card { display: block; color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
.blog-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover, 0 12px 28px rgba(0,0,0,.1)); }
.blog-card img { border-radius: var(--radius-md); height: 180px; width: 100%; object-fit: cover; margin-bottom: 16px; }
.blog-card time { font-size: 13px; color: var(--text-muted); }
.blog-card h3 { font-size: 18px; margin: 8px 0; }
.blog-card p { color: var(--text-muted); font-size: 14.5px; }

.blog-card__media { border-radius: var(--radius-md); overflow: hidden; height: 170px; margin-bottom: 14px; }
.blog-illustration-svg { width: 100%; height: 100%; display: block; }

.blog-card__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 6px; font-size: 12px; color: var(--text-muted); }
.blog-card__meta > span { display: inline-flex; align-items: center; gap: 4px; }
.blog-card__meta svg { flex-shrink: 0; }

.blog-card__topic { font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--bg-cream, #f8f7f3); }
.blog-card__topic--jaro { color: #4a7530; background: #eaf6d8; }
.blog-card__topic--zalivka { color: #2f6c8f; background: #e3f2fb; }
.blog-card__topic--travnik { color: #4a7530; background: #eaf6d8; }
.blog-card__topic--podzim { color: #a05a1f; background: #ffe4c4; }
.blog-card__topic--kompost { color: #6b5638; background: #f1ead9; }
.blog-card__topic--zima { color: #4a7e94; background: #eaf2f6; }
.blog-card__topic--zahrada { color: #4a7530; background: #eef4e6; }
.blog-card__topic svg { color: currentColor; }

.blog-card__related { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(30,58,46,.08); }
.blog-card__related-label { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); margin-bottom: 6px; }
.blog-card__related-plant {
  display: inline-flex; align-items: center; gap: 4px; margin: 0 8px 4px 0;
  font-size: 12px; color: var(--text-dark); font-weight: 600;
}
.blog-card__related-plant svg { color: var(--green-primary); flex-shrink: 0; }

/* Hero (nejnovější) článek nahoře blogu — velký, vizuálně odlišený od mřížky pod ním */
.blog-hero { display: grid; grid-template-columns: 1.5fr 1fr; gap: 0; overflow: hidden; margin-bottom: 40px; color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
.blog-hero:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover, 0 16px 34px rgba(0,0,0,.12)); }
.blog-hero__media { position: relative; min-height: 400px; }
.blog-hero__media .blog-illustration-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.blog-hero__badge {
  position: absolute; top: 16px; left: 16px; display: inline-flex; align-items: center; gap: 5px;
  background: rgba(20,20,15,.55); color: #fff; font-size: 12px; font-weight: 700;
  padding: 6px 12px; border-radius: 999px; backdrop-filter: blur(2px);
}
.blog-hero__badge svg { color: #f7c948; }
.blog-hero__body { padding: 42px; display: flex; flex-direction: column; justify-content: center; }
.blog-hero__body h2 { font-size: 34px; margin: 0 0 10px; line-height: 1.15; }
.blog-hero__body .blog-card__related-plant { font-size: 13.5px; }
.blog-hero__body .blog-card__related-plant svg { width: 18px; height: 18px; }
.blog-hero__excerpt { color: var(--text-muted); font-size: 15.5px; line-height: 1.55; margin: 0; }
.blog-hero__cta {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 18px; font-size: 14.5px; font-weight: 700; color: var(--green-primary);
  transition: gap .15s ease, color .15s ease;
}
.blog-hero__cta svg { transition: transform .15s ease; }
.blog-hero:hover .blog-hero__cta { color: var(--green-primary-dark); gap: 9px; }
.blog-hero:hover .blog-hero__cta svg { transform: translateX(2px); }
@media (max-width: 860px) { .blog-hero { grid-template-columns: 1fr; } .blog-hero__media { min-height: 200px; } }

.blog-grid { margin-top: 0; }

.blog-post__illustration { border-radius: var(--radius-lg); overflow: hidden; height: 320px; margin-bottom: 28px; }
.blog-post__illustration--hero {
  height: 560px;
  position: relative; left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw; margin-bottom: 32px;
  width: 100vw; border-radius: 0;
}
.blog-post__related { margin-top: 28px; }

.blog-post__lead { font-size: 19px; color: var(--text-dark); line-height: 1.5; font-weight: 500; margin: 0 0 8px; }

.blog-post__glance {
  background: var(--green-tint, #eef4ee); border: 1px solid rgba(30,58,46,.1); border-radius: var(--radius-md);
  padding: 18px 20px; margin: 16px 0 28px;
}
.blog-post__glance-label {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--green-primary-dark, #1f3a2e);
}
.blog-post__glance-label svg { color: var(--green-primary); }
.blog-post__glance-title { font-size: 14.5px; font-weight: 700; color: var(--text-dark); margin: 8px 0 8px; }
.blog-post__glance-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 16px; }
.blog-post__glance-list li { display: flex; align-items: flex-start; gap: 7px; font-size: 14px; color: var(--text-dark); }
.blog-post__glance-list li svg { color: var(--green-primary); flex-shrink: 0; margin-top: 2px; }
@media (max-width: 600px) { .blog-post__glance-list { grid-template-columns: 1fr; } }

.blog-post__body { font-size: 16.5px; line-height: 1.7; color: var(--text-dark); }
.blog-post__body h2 { font-size: 21px; font-weight: 750; color: var(--green-deep, #1f3a2e); margin: 32px 0 12px; }
.blog-post__body p { margin: 0 0 14px; }

.blog-post__callout {
  border-radius: var(--radius-md); padding: 14px 18px; margin: 18px 0; font-size: 14.5px; line-height: 1.55;
}
.blog-post__callout-label { font-weight: 800; letter-spacing: .04em; font-size: 12px; margin-right: 6px; }
.blog-post__callout--tip { background: #eef6ee; border-left: 4px solid var(--green-primary, #3f8a4c); color: #234a2c; }
.blog-post__callout--tip .blog-post__callout-label { color: var(--green-primary-dark, #1f5c2c); }
.blog-post__callout--tip .blog-post__callout-label::before { content: "💡 "; }
.blog-post__callout--warning { background: #fbf1e6; border-left: 4px solid #c07a2e; color: #6b3a12; }
.blog-post__callout--warning .blog-post__callout-label { color: #8A4A16; }
.blog-post__callout--warning .blog-post__callout-label::before { content: "⚠ "; }

.blog-post__section { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--border-color); }
.blog-post__section h3 { display: flex; align-items: center; gap: 8px; font-size: 17px; margin-bottom: 16px; }
.blog-post__section h3 svg { color: var(--green-primary); }

.blog-post__task-list { list-style: none; margin: 0 0 16px; padding: 0; }
.blog-post__task-list li { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--text-dark); padding: 8px 0; border-bottom: 1px solid rgba(30,58,46,.08); }
.blog-post__task-list li:last-child { border-bottom: none; }
.blog-post__task-list li svg { color: var(--green-primary); flex-shrink: 0; }
.blog-post__section-link { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 700; color: var(--green-primary); }
.blog-post__section-link:hover { color: var(--green-primary-dark); }

.blog-post__plant-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 16px; margin-bottom: 18px; }
.blog-post__plant-card {
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  padding: 22px 14px 18px; border-radius: var(--radius-lg); background: var(--bg-cream, #f8f7f3);
  color: var(--text-dark); font-size: 14.5px; font-weight: 700;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  position: relative; overflow: hidden;
}
.blog-post__plant-card:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(0,0,0,.1); background: #fff; }
.blog-post__plant-card-icon {
  display: flex; align-items: center; justify-content: center;
  width: 76px; height: 76px; border-radius: 50%; background: #fff;
  box-shadow: 0 3px 10px rgb(0 0 0 / 7%);
}
.blog-post__plant-card-stats {
  display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 500; color: var(--text-muted);
  width: 100%;
}
.blog-post__plant-card-stats span { display: flex; align-items: center; justify-content: center; gap: 5px; }
.blog-post__plant-card-stats svg { flex-shrink: 0; opacity: .7; }
.blog-post__plant-card-shade { letter-spacing: 1px; }
.blog-post__plant-card-cta {
  display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--green-primary);
  opacity: 0; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease;
}
.blog-post__plant-card:hover .blog-post__plant-card-cta { opacity: 1; transform: translateY(0); }
.blog-post__planner-cta { display: inline-flex; }

.blog-post__more-list { display: flex; flex-direction: column; gap: 4px; }
.blog-post__more-item {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--radius-md);
  background: var(--bg-cream, #f8f7f3); color: var(--text-dark); font-size: 14.5px; font-weight: 600;
  transition: background .15s ease;
}
.blog-post__more-item:hover { background: var(--green-tint); }
.blog-post__more-item svg:last-child { margin-left: auto; color: var(--text-muted); flex-shrink: 0; }
.blog-post__more-item .blog-card__topic { padding: 6px; border-radius: 50%; display: inline-flex; }
@media (max-width: 700px) { .blog-post__illustration--hero { height: 300px; } }

/* Filtr a databáze rostlin ------------------------------------------------ */

.filter-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: end;
}
.filter-bar .form-group { margin-bottom: 0; }
.filter-bar__checkbox { display: flex; align-items: center; }
.filter-bar__checkbox label { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; margin: 0; }
.filter-bar__actions { display: flex; gap: 10px; grid-column: span 2; }
.filter-bar__actions .btn { flex: 1; }
.filter-bar__actions .btn--primary {
  padding: 10px 20px;
  font-size: 13.5px;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.filter-bar__actions .btn--primary:hover { box-shadow: 0 4px 10px rgba(74,117,48,.25); }

@media (max-width: 980px) {
  .filter-bar { grid-template-columns: repeat(2, 1fr); }
  .filter-bar__actions { grid-column: span 2; }
}
@media (max-width: 600px) {
  .filter-bar { grid-template-columns: 1fr; }
  .filter-bar__actions { grid-column: span 1; }
}

.plant-grid { margin-top: 4px; }
/* Vlastní, výraznější zaoblení a měkčí, hlubší stín než obecná .card — karty rostlin jsou
   hlavní vizuální prvek katalogu, zaslouží si víc "Airbnb/Apple" vrstvení než ploché obdélníky. */
.plant-card {
  border-radius: 20px;
  border-color: rgba(30, 58, 46, 0.06);
  box-shadow: 0 2px 8px rgba(30, 58, 46, 0.05), 0 16px 36px rgba(30, 58, 46, 0.10);
  transition: box-shadow .2s ease, transform .2s ease;
}
.plant-card:hover {
  box-shadow: 0 4px 12px rgba(30, 58, 46, 0.07), 0 22px 44px rgba(30, 58, 46, 0.14);
  transform: translateY(-2px);
}
.plant-card img { border-radius: var(--radius-md); height: 150px; width: 100%; object-fit: cover; margin-bottom: 14px; }

/* Fotka rostliny jako tlačítko otevírající zvětšený náhled (lightbox) — reset vzhledu
   <button>, jen jemné zvětšení + tmavší okraj při hoveru jako nenápadná nabídka "zvětšit". */
.plant-card__photo-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
  overflow: hidden;
  border-radius: var(--radius-md);
}
.plant-card__photo-btn img { margin-bottom: 0; transition: transform .25s ease; }
.plant-card__photo-btn:hover img, .plant-card__photo-btn:focus-visible img { transform: scale(1.05); }
.plant-card__photo-btn:focus-visible { outline: 2px solid var(--green-primary); outline-offset: 2px; }

.plant-card__photo-wrap { position: relative; margin-bottom: 14px; }
.plant-card__photo-wrap img { margin-bottom: 0; background: #f8f7f3; }
/* Fotka nemá konkurovat náhledu velikosti v zahradě — to je unikátní hodnota téhle databáze,
   fotku má každý e-shop. Proto je fotka jen orientační miniatura, ne dominantní prvek karty. */
.plant-card__photo-wrap--compact { margin-bottom: 10px; }
.plant-card__photo-wrap--compact img,
.plant-card__photo-wrap--compact .plant-card__photo-btn img { height: 140px; }
/* Rychle rozlišitelné odznaky přes roh fotky (slunce, nenáročnost) — bez nich vypadají karty
   v dlouhém seznamu skoro identicky, i s různou fotkou je mozek začne vnímat jako "stejnou
   kartu dokola". */
.plant-card__photo-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  pointer-events: none;
}
.plant-card__photo-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,.94);
  color: var(--text-dark);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px 4px 7px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(15,25,18,.18);
  white-space: nowrap;
}
.plant-card__photo-badge--beginner { background: rgba(92,138,58,.94); color: #fff; }
.plant-card__photo-cta {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
  border: none;
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  color: var(--green-primary-dark);
  font-size: 12.5px;
  font-weight: 700;
  padding: 9px 16px;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(15,25,18,.15);
  transition: background .15s ease;
}
.plant-card__photo-cta:hover { background: #fff; }
/* U rostlin, které už fotku mají, se "Pošlete lepší fotografii" nabídne jen při najetí —
   fotka je v pořádku vidět, tlačítko nemá zbytečně soutěžit o pozornost natrvalo. */
.plant-card__photo-cta--hover { opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.plant-card__photo-wrap:hover .plant-card__photo-cta--hover,
.plant-card__photo-cta--hover:focus-visible { opacity: 1; pointer-events: auto; }

.photo-suggest-field { margin-bottom: 18px; }
.photo-suggest-field img { display: block; width: 100%; height: 200px; object-fit: cover; border-radius: var(--radius-md); margin-bottom: 12px; background: #f8f7f3; }
.photo-suggest-field__picker { display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; margin-bottom: 8px; }
.plant-card__head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.plant-card__type-icon {
  display: inline-flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  background: var(--bg-cream, #f8f7f3);
  border-radius: 50%;
  flex-shrink: 0;
}
.plant-card__type-icon svg { display: block; }
.plant-card h3 { font-size: 17px; margin-bottom: 2px; }
.plant-card__latin { font-style: italic; color: var(--text-muted); font-size: 13px; margin-bottom: 10px; }
.plant-card p { font-size: 13.5px; color: var(--text-muted); }
.plant-card__facts { margin: 12px 0; }
.plant-card__facts li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-dark);
  padding: 4px 0;
}
.plant-card__facts li svg { color: var(--green-primary); flex-shrink: 0; }
.plant-card__placement {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-muted);
  border-top: 1px solid var(--border-color);
  padding-top: 10px;
  margin: 0;
}
.btn--text {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 8px 4px;
  text-align: center;
}
.btn--text:hover { color: var(--green-primary); }

.plant-results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 18px 0;
}
.plant-results-bar__count { font-size: 14px; color: var(--text-muted); margin: 0; }
.plant-results-bar__count strong { color: var(--text-dark); }
.plant-results-bar__sort {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
}
.plant-results-bar__sort .form-control { width: auto; padding: 6px 10px; font-size: 13px; }

.plant-card__impact {
  background: var(--bg-cream, #f8f7f3);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 10px 0;
}
.plant-card__impact-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--green-primary);
  margin: 0 0 6px;
}
.plant-card__impact-title svg { color: var(--green-primary); }
.plant-card__impact ul { list-style: none; margin: 0; padding: 0; }
.plant-card__impact li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-dark);
  padding: 3px 0;
  line-height: 1.35;
}
.plant-card__impact li svg { color: var(--green-primary); flex-shrink: 0; margin-top: 1px; }

.plant-card__cta { margin-top: 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.plant-card__detail-link { font-size: 12.5px; color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; }
.plant-card__detail-link:hover { color: var(--green-primary); }
.plant-card__title-link { color: inherit; }
.plant-card__title-link:hover { color: var(--green-primary); }

.plant-size-badge {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 6px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border-left: 3px solid transparent;
  margin: 2px 0 10px;
}
.plant-size-badge__label { font-weight: 700; font-size: 12.5px; color: var(--text-dark); }
.plant-size-badge__note { font-size: 11.5px; color: var(--text-muted); }
.plant-size-badge--small { background: #fafaf8; border-left-color: var(--season-jaro-accent); }
.plant-size-badge--medium { background: #fafaf8; border-left-color: var(--season-leto-accent); }
.plant-size-badge--large { background: #fafaf8; border-left-color: var(--season-podzim-accent); }

.plant-card__scale-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  margin: 4px 0 2px;
}
.plant-scale-preview {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 8px 6px 4px;
  margin-bottom: 10px;
}
/* Náhled dům/člověk/rostlina je unikátní odlišnost proti běžnému katalogu — na kartě dostává
   viditelně větší důraz (rámeček, stín, více vzduchu) než ostatní drobné údaje okolo. */
.plant-scale-preview--featured {
  border: 1px solid var(--green-tint-border, var(--border-color));
  background: linear-gradient(180deg, #fbfaf5 0%, #ffffff 60%);
  box-shadow: 0 4px 14px rgba(30,58,46,.07);
  padding: 12px 10px 8px;
  margin-bottom: 14px;
}

/* Náhled velikosti v zahradě je hlavní odlišnost proti běžnému e-shopu (fotku má každý) —
   proto je to vizuálně nejsilnější blok karty: vlastní rámeček s výrazným stínem a nejvíc místa. */
.plant-card__scale-block {
  background: #fff;
  border: 1.5px solid var(--green-tint-border, #d8e3cf);
  border-radius: var(--radius-md);
  box-shadow: 0 6px 18px rgba(30,58,46,.09);
  padding: 12px 12px 10px;
  margin: 4px 0 14px;
}
.plant-card__scale-eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--green-primary);
  margin-bottom: 8px;
}
.plant-card__scale-eyebrow svg { flex-shrink: 0; }
.plant-card__scale-block .plant-scale-preview--hero {
  border: none;
  background: none;
  box-shadow: none;
  padding: 4px 2px 0;
  margin-bottom: 0;
}
.plant-card__scale-block .plant-size-badge { margin-bottom: 6px; }

/* Najetí na kartu jemně "přiblíží" strom v náhledu velikosti — nezávisle na cyklické
   růstové animaci (.ps-grow), aby se transformy nepřepisovaly navzájem. */
.plant-card__scale-block svg {
  transition: transform .3s ease;
  transform-origin: 50% 100%;
}
.plant-card:hover .plant-card__scale-block svg { transform: scale(1.08); }

.plant-card__fit-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 4px;
}
.plant-card__fit-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
}
.plant-card__fit-badge--good { background: rgba(92,138,58,.13); color: #3f6a24; }
.plant-card__fit-badge--neutral { background: rgba(150,120,40,.13); color: #8a6a1a; }
.plant-card__fit-badge--warn { background: #FBEDEA; color: #A33A22; border: 1px solid #F3C7BD; }
.plant-detail__sun-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 700; padding: 4px 9px 4px 8px;
  border-radius: 999px; background: #FFF6E0; color: #93720F;
}
.plant-detail__sun-badge svg { color: #C9971F; }
.plant-card__shade-dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--text-muted);
}
.plant-card__shade-dots svg { margin-right: 2px; }
.plant-card__shade-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--text-muted);
  display: inline-block;
}
.plant-card__shade-dot.is-filled { background: var(--text-dark); border-color: var(--text-dark); }

.ps-grow { transform: none; }

.plant-scale-timelabel { position: relative; display: inline-block; }
.plant-scale-timelabel span {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  opacity: 0;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.plant-scale-timelabel__now {
  position: static;
  animation-name: ps-grow-label-now;
}
.plant-scale-timelabel__future { animation-name: ps-grow-label-future; }
@keyframes ps-grow-label-now { 0%, 12% { opacity: 1; } 20%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ps-grow-label-future { 0%, 42% { opacity: 0; } 50%, 68% { opacity: 1; } 78%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .plant-scale-timelabel__now { position: static; animation: none; opacity: 1; }
  .plant-scale-timelabel__future { display: none; }
}

.pagination { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; justify-content: center; }
.pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  font-weight: 600;
  font-size: 14px;
  color: var(--text-dark);
}
.pagination__item.is-active { background: var(--green-primary); border-color: var(--green-primary); color: #fff; }
.pagination__item:hover:not(.is-active):not(.is-disabled) { border-color: var(--green-primary); color: var(--green-primary); }
.pagination__item--nav { color: var(--text-muted); }
.pagination__item.is-disabled { opacity: .4; pointer-events: none; }
.pagination__ellipsis { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; color: var(--text-muted); }

.alert {
  padding: 14px 18px;
  border-radius: var(--radius-md);
  font-size: 14.5px;
  margin-bottom: 20px;
  border: 1px solid transparent;
}
.alert--success { background: var(--green-tint); border-color: var(--green-tint-border); color: var(--green-primary-dark); }
.alert--error { background: #fbeaea; border-color: #f0c4c4; color: #a13a3a; }

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.badge--green { background: var(--green-tint); color: var(--green-primary-dark); }
.badge--gray { background: #eee; color: #666; }
.badge--admin { background: #1e3a2e; color: #fff; }

/* Formuláře ---------------------------------------------------------------- */

.form-wrap {
  max-width: 440px;
  margin: 0 auto;
}
.support-amounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
@media (max-width: 420px) { .support-amounts { grid-template-columns: 1fr 1fr; } }
.support-amounts__item {
  padding: 12px 8px;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  background: #fff;
  font-weight: 700;
  font-size: 15px;
  color: var(--text-dark);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.support-amounts__item:hover { border-color: var(--green-primary); }
.support-amounts__item.is-active { border-color: var(--green-primary); background: var(--green-primary); color: #fff; }

.support-donate { max-width: 920px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 760px) { .support-donate { grid-template-columns: 1fr; } }

.support-trust { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 18px; }
.support-trust span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.support-trust svg { color: var(--green-primary); }

.support-qr-card { text-align: center; }
.support-qr-frame {
  display: flex;
  justify-content: center;
  width: fit-content;
  margin: 0 auto;
  padding: 14px;
  background: #fff;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.support-qr-frame canvas { display: block; border-radius: 4px; }
.support-qr-amount { margin: 12px auto 0; font-size: 13.5px; font-weight: 700; color: var(--green-primary-dark); background: var(--green-tint); display: block; width: fit-content; padding: 4px 14px; border-radius: 999px; }

.support-bank { margin-top: 20px; text-align: left; border-top: 1px solid var(--border-color); padding-top: 16px; }
.support-bank__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; font-size: 13.5px; }
.support-bank__label { color: var(--text-muted); font-weight: 600; }
.support-bank__value-wrap { display: flex; align-items: center; gap: 6px; }
.support-bank__value { font-weight: 700; color: var(--text-dark); font-family: monospace; font-size: 13px; }
.support-bank__copy { background: var(--bg-cream); border: none; color: var(--text-muted); width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.support-bank__copy:hover { background: var(--green-tint); color: var(--green-primary-dark); }

.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.form-control {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-family: inherit;
  background: #fff;
  color: var(--text-dark);
}
.form-control:focus { outline: none; border-color: var(--green-primary); box-shadow: 0 0 0 3px rgba(92,138,58,.15); }
textarea.form-control { resize: vertical; min-height: 120px; }

/* ==========================================================================
   Globální validace formulářů — vlastní chybové hlášky místo nativních
   prohlížečových bublin (main.js nastavuje formulářům novalidate a řídí
   zobrazení/skrytí .field-error přes .is-invalid). Platí pro celý web i admin.
   ========================================================================== */
.form-control.is-invalid { border-color: #d17a7a; background: #fdf6f6; }
.form-control.is-invalid:focus { border-color: #a13a3a; box-shadow: 0 0 0 3px rgba(161,58,58,.14); }
.field-error {
  display: flex; align-items: center; gap: 5px;
  margin-top: 6px; font-size: 12.5px; font-weight: 600; color: #a13a3a;
}
.field-error svg { flex-shrink: 0; }
.filter-bar__checkbox.is-invalid { color: #a13a3a; }

/* Premium select — vlastní tenká šipka místo výchozí systémové, jemný hover a měkčí
   zaoblení. Samotný VYSUNOVACÍ seznam možností ale kreslí operační systém/prohlížeč
   (na Windows/Chrome typicky modré zvýraznění) — CSS na něj nemá vliv, to jde ovlivnit
   jen náhradou za vlastní JS dropdown komponentu. */
select.form-control {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c8a3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
select.form-control:hover { border-color: #b7c9a8; }
select.form-control option { padding: 8px 10px; color: var(--text-dark); background: #fff; }
select.form-control option:checked { background: var(--green-tint, #eef3e6); color: var(--green-primary-dark, #3f6a24); }
.input-with-clear { position: relative; }
.input-with-clear .form-control { padding-right: 34px; }
.input-with-clear__btn {
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.input-with-clear__btn:hover { background: var(--bg-cream); color: var(--text-dark); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }
.form-hint { font-size: 13px; color: var(--text-muted); margin-top: 6px; }
.form-footer-link { text-align: center; margin-top: 18px; font-size: 14.5px; color: var(--text-muted); }

/* ==========================================================================
   Kontakt (contact.php)
   ========================================================================== */

.contact-info-card { margin-bottom: 16px; }
.contact-info-card h2 { display: flex; align-items: center; gap: 9px; }
.contact-info-card h2 svg { color: var(--green-primary); }

.contact-help__title { font-size: 15px; margin: 22px 0 12px; }

/* Mini dlaždice místo obyčejných řádků — stejný vizuální jazyk jako karty na about.php
   (ikona v kolečku nahoře, titulek, krátký popis, na kartě jemný stín). */
.contact-help-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.contact-help-tile {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px;
  padding: 26px 12px; background: var(--bg-cream); border-radius: var(--radius-md);
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  transition: transform .15s ease, box-shadow .15s ease;
}
.contact-help-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.05); }
.contact-help-tile__icon {
  width: 77px; height: 77px; border-radius: 50%; background: var(--green-tint); color: var(--green-primary);
  display: flex; align-items: center; justify-content: center; margin-bottom: 8px;
}
.contact-help-tile strong { font-size: 13.5px; }
.contact-help-tile span { font-size: 11.5px; color: var(--text-muted); line-height: 1.35; }
@media (max-width: 700px) { .contact-help-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .contact-help-tiles { grid-template-columns: 1fr; } }

.contact-response-badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700;
  color: var(--green-primary-dark, #1f5c2c); background: var(--green-tint); padding: 4px 10px; border-radius: 999px;
}

.contact-form__note { text-align: center; }

/* ==========================================================================
   Dashboard (osobní kalendář uživatele)
   ========================================================================== */

.dash-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 28px;
}
.dash-nav { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 20px; }
.dash-nav a { color: var(--green-primary); font-size: 15px; }

.profile-tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--border-color); margin-bottom: 22px; }
.profile-tabs__btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 2px;
  margin-bottom: -1px;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--text-muted);
  border-bottom: 2.5px solid transparent;
}
.profile-tabs__btn:hover { color: var(--text-dark); }
.profile-tabs__btn.is-active { color: var(--green-primary-dark); border-color: var(--green-primary); }
.profile-tabs__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #b3432b; color: #fff; font-size: 10px; font-weight: 800; }

.profile-danger-zone__details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--text-muted);
  list-style: none;
}
.profile-danger-zone__details summary::-webkit-details-marker { display: none; }
.profile-danger-zone__details summary svg:last-child { transition: transform .15s ease; }
.profile-danger-zone__details[open] summary svg:last-child { transform: rotate(90deg); }
.profile-danger-zone__details[open] summary { color: #b3432b; }
.profile-danger-zone__body { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-color); }
.profile-danger-zone__body p { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; }
.profile-danger-zone__notice { display: flex; gap: 12px; align-items: flex-start; color: #b3432b; margin-bottom: 16px; }
.profile-danger-zone__notice svg { flex-shrink: 0; margin-top: 2px; }
.profile-danger-zone__notice strong { display: block; margin-bottom: 4px; color: var(--text-dark); }
.profile-danger-zone__notice p { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; margin: 0; }

.photo-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 10px; }
.photo-gallery__slot {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--bg-cream);
  border: 1px solid var(--border-color);
}
.photo-gallery__slot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.photo-gallery__slot:hover img { transform: scale(1.06); }
.photo-gallery__add {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text-muted);
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.photo-gallery__add span { font-size: 11px; font-weight: 600; }
.photo-gallery__add:hover { border-color: var(--green-primary); color: var(--green-primary); background: var(--green-tint); }
.photo-gallery__remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(20, 30, 20, .55);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background .15s ease;
}
.photo-gallery__remove:hover { background: #b3432b; }
.photo-gallery__toggle {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(20, 30, 20, .55);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background .15s ease;
}
.photo-gallery__toggle:hover { background: var(--green-primary); }
.photo-gallery__slot.is-blocked img { opacity: .4; filter: grayscale(.5); }
.photo-gallery__slot.is-blocked .photo-gallery__toggle { background: #b3432b; }
.photo-gallery__badge {
  position: absolute;
  left: 6px;
  bottom: 6px;
  right: 6px;
  background: rgba(20, 30, 20, .7);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  text-align: center;
  padding: 3px 4px;
  border-radius: var(--radius-sm);
  backdrop-filter: blur(4px);
}
.photo-gallery__slot.is-uploading { display: flex; align-items: center; justify-content: center; }
.photo-gallery__slot.is-uploading img { position: absolute; inset: 0; opacity: .45; }
.photo-gallery__spinner {
  position: relative;
  width: 26px;
  height: 26px;
  border: 3px solid rgba(255,255,255,.5);
  border-top-color: #fff;
  border-radius: 50%;
  animation: photo-gallery-spin .7s linear infinite;
}
@keyframes photo-gallery-spin { to { transform: rotate(360deg); } }

/* Kalendář — karta, toolbar, legenda období ------------------------------- */

.calendar-card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 24px;
}

.calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 16px;
}
.calendar-toolbar__nav { display: flex; align-items: center; gap: 16px; }
.calendar-toolbar__title { font-size: 19px; font-weight: 800; min-width: 160px; text-align: center; }
.calendar-toolbar__arrow {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.calendar-toolbar__arrow:hover { background: var(--green-tint); color: var(--green-primary); border-color: var(--green-primary); }

.season-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
}
.season-legend__item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-cream);
  border: 1px solid transparent;
}
.season-legend__item.is-current { color: var(--text-dark); background: #fff; box-shadow: var(--shadow-card); }
.season-legend__date { font-weight: 400; color: var(--text-muted); }
.season-legend__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.season-legend__dot--jaro { background: var(--season-jaro-accent); }
.season-legend__dot--leto { background: var(--season-leto-accent); }
.season-legend__dot--podzim { background: var(--season-podzim-accent); }
.season-legend__dot--zima { background: var(--season-zima-accent); }

/* Kalendář — mřížka dnů ---------------------------------------------------- */

.calendar-grid__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.calendar-grid__weekday { text-align: center; font-size: 12.5px; font-weight: 700; color: var(--text-muted); padding-bottom: 8px; text-transform: uppercase; letter-spacing: .4px; }

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.calendar-day {
  /* Pevná (ne jen minimální) výška — PHP zobrazuje max. 3 úkoly + "+N další" na den
     (viz array_slice v dashboard/index.php), takže tolik obsahu se vždy vejde. Bez
     tohle by CSS grid natáhl CELÝ řádek podle nejvyšší buňky, když má jeden den víc
     úkolů než ostatní — řádky by pak neměly stejnou výšku. */
  height: 146px;
  overflow: hidden;
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  padding: 8px;
  background: #fff;
  transition: background .15s ease;
}
.calendar-day:nth-child(7n) { border-right: none; }
.calendar-day:hover { background: #f8f7f3; }
.calendar-day.is-empty { background: #fbfaf7; }
.calendar-day.is-empty:hover { background: #fbfaf7; }

.calendar-day.is-today { position: relative; z-index: 1; }
.calendar-day__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.calendar-day.is-today .calendar-day__head { justify-content: center; position: relative; }
.calendar-day__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 2px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
}
.calendar-day.is-today .calendar-day__num {
  min-width: 30px;
  height: 30px;
  font-size: 16px;
  background: var(--green-primary-dark);
  color: #fff;
}
.calendar-day.is-today .calendar-day__add { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.calendar-day__add {
  display: flex; align-items: center; justify-content: center;
  width: 19px; height: 19px;
  border-radius: 50%;
  border: none;
  background: rgba(92,138,58,.12);
  color: var(--green-primary-dark);
  opacity: 0;
  transition: opacity .15s ease, background .15s ease;
  cursor: pointer;
}
.calendar-day:hover .calendar-day__add { opacity: 1; }
.calendar-day__add:hover { background: var(--green-primary); color: #fff; }

.calendar-day__events { display: flex; flex-direction: column; gap: 4px; }
.calendar-event {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  border: none;
  color: var(--text-dark);
  font-size: 11px;
  font-weight: 600;
  text-align: left;
  padding: 4px 6px;
  border-radius: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  transition: filter .15s ease;
}
.calendar-event:hover { filter: brightness(0.96); }
.calendar-event svg { flex-shrink: 0; color: var(--text-muted); }
.calendar-event__dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.calendar-day__more {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 2px 6px;
}
.calendar-day__more:hover { color: var(--green-primary); }

.dash-cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}
.dash-cal-legend span { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-muted); }
.dash-cal-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

/* Kalendář — seznam úkolů pod mřížkou -------------------------------------- */

.event-list-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-color);
}
.event-list-item:last-child { border-bottom: none; }
.event-list-item__color { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.event-list-item__body { flex: 1; min-width: 0; }
.event-list-item__meta { font-size: 13px; color: var(--text-muted); }
.event-list-item__repeat { display: inline-flex; align-items: center; gap: 3px; color: var(--green-primary-dark); font-weight: 600; }
.event-list-item__actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Odškrtávání úkolů jako splněné -------------------------------------------- */

.task-check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border-color);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  color: transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.task-check:hover { border-color: var(--green-primary); }
.task-check svg { width: 11px; height: 11px; pointer-events: none; }
.is-done .task-check { background: var(--green-primary); border-color: var(--green-primary); color: #fff; }

.dash-weather-card__tasks li.is-done .dash-weather-card__title { opacity: .6; text-decoration: line-through; }
.dash-weather-card .task-check { border-color: rgba(255,255,255,.5); background: transparent; }
.dash-weather-card li.is-done .task-check { background: var(--green-primary); border-color: var(--green-primary); }

.calendar-event.is-done { opacity: .55; text-decoration: line-through; }
.calendar-event .task-check { width: 14px; height: 14px; }
.calendar-event .task-check svg { width: 9px; height: 9px; }

.event-list-item.is-done .event-list-item__body strong { opacity: .55; text-decoration: line-through; }

.dash-upcoming__item.is-done strong { opacity: .55; text-decoration: line-through; }

/* Dashboard — hero s počasím a dnešními úkoly ------------------------------ */

.dash-hero {
  position: relative;
  padding: 24px 0;
}
/* Fotka na pozadí je vlastní ohraničený prvek ve stejné šířce jako .container (max-width
   1320px), zaoblený a se stínem jako karty na webu — ne background přes celou šířku okna. */
.dash-hero__photo-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1320px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.dash-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(10,20,14,.78) 0%, rgba(10,20,14,.6) 55%, rgba(10,20,14,.5) 100%);
}
.dash-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 28px;
  padding: 24px 24px;
  flex-wrap: wrap;
}
.dash-hero__content { color: #fff; max-width: 560px; }
.dash-hero__content h1 { font-size: 23px; font-weight: 800; margin: 5px 0 6px; display: flex; align-items: center; gap: 8px; }
.dash-hero__content h1 svg { color: #cfe6b8; width: 20px; height: 20px; }
.dash-hero__content p { color: rgba(255,255,255,.82); font-size: 13.5px; margin-bottom: 12px; }

.dash-weather-card {
  background: rgba(22, 41, 31, .82);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  width: 260px;
  flex-shrink: 0;
  color: #fff;
}
.dash-weather-card__top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.dash-weather-card__icon { color: #f3cf6a; flex-shrink: 0; }
.dash-weather-card__temp { display: flex; align-items: baseline; gap: 8px; font-size: 20px; font-weight: 800; }
.dash-weather-card__condition { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.65); }
.dash-weather-card__meta { font-size: 12px; color: rgba(255,255,255,.7); }
.dash-weather-card__divider { border-top: 1px solid rgba(255,255,255,.15); margin: 12px 0; }

/* "Dnes doporučujeme" — chytré tipy podle skutečného počasí (viz garden_weather_context). */
.dash-weather-card__advice { background: rgba(255,255,255,.08); border-radius: var(--radius-md); padding: 8px 10px; margin-bottom: 2px; }
.dash-weather-card__advice strong { display: block; font-size: 12px; margin-bottom: 6px; }
.dash-weather-card__advice ul { display: flex; flex-direction: column; gap: 4px; }
.dash-weather-card__advice li { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: rgba(255,255,255,.9); }
.dash-weather-card__advice li svg { color: #8fd18a; flex-shrink: 0; }
.dash-weather-card__advice li.is-avoid { color: rgba(255,255,255,.6); }
.dash-weather-card__advice li.is-avoid svg { color: #e08a7a; }
.dash-weather-card__rain { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #a9d3f5; margin-top: 6px; }
.dash-weather-card__tasks-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13.5px; }
.dash-weather-card__badge {
  background: var(--green-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 8px;
}
.dash-weather-card__tasks { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.dash-weather-card__tasks li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.dash-weather-card__dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; flex-shrink: 0; }
.dash-weather-card__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-weather-card__time { color: rgba(255,255,255,.65); font-size: 11.5px; flex-shrink: 0; }
.dash-weather-card__empty { color: rgba(255,255,255,.6); font-size: 12.5px; }
.dash-weather-card__link { display: inline-flex; align-items: center; gap: 4px; color: #cfe6b8; font-size: 12.5px; font-weight: 700; }

@media (max-width: 900px) {
  .dash-hero__inner { flex-direction: column; align-items: stretch; }
  .dash-weather-card { width: 100%; }
}

/* Dashboard — rozvržení: postranní panel + hlavní obsah -------------------- */

.dash-layout { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: start; }
@media (max-width: 980px) { .dash-layout { grid-template-columns: 1fr; } }

.dash-sidebar { display: flex; flex-direction: column; gap: 18px; }
.dash-sidebar .card { padding: 18px; }
.dash-sidebar h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); margin-bottom: 12px; }

.dash-mini-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 14px; }
.dash-mini-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.dash-mini-cal__wd { font-size: 10.5px; font-weight: 700; color: var(--text-muted); padding-bottom: 4px; }
.dash-mini-cal__day {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: 26px;
  border-radius: 50%;
  font-size: 12px;
  color: var(--text-dark);
}
.dash-mini-cal__day:hover { background: var(--bg-cream); }
.dash-mini-cal__day.is-today { background: var(--green-primary); color: #fff; font-weight: 700; }
.dash-mini-cal__day.has-events::after {
  content: "";
  position: absolute;
  bottom: 2px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--green-primary);
}
.dash-mini-cal__day.is-today.has-events::after { background: #fff; }

.dash-categories ul { display: flex; flex-direction: column; gap: 10px; }
.dash-categories li { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.dash-categories__dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.dash-categories__label { flex: 1; }
.dash-categories__count { color: var(--text-muted); font-weight: 700; font-size: 12.5px; }

.dash-view-toggle__item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 4px;
}
.dash-view-toggle__item:hover { background: var(--bg-cream); }
.dash-view-toggle__item.is-active { background: var(--green-tint); color: var(--green-primary-dark); }

.dash-export-link {
  display: flex; align-items: center; gap: 8px;
  justify-content: center;
  padding: 12px;
  border-radius: var(--radius-md);
  border: 1px dashed var(--border-color);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
}
.dash-export-link:hover { border-color: var(--green-primary); color: var(--green-primary); }

.dash-main { display: flex; flex-direction: column; gap: 24px; }

/* Dashboard — týdenní pohled ------------------------------------------------ */

.dash-week-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
@media (max-width: 900px) { .dash-week-grid { grid-template-columns: 1fr; } }
.dash-week-day {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 10px;
  min-height: 160px;
  background: #fff;
}
.dash-week-day__label { font-size: 12.5px; font-weight: 700; color: var(--text-muted); }
.dash-week-day.is-today .dash-week-day__label { color: var(--green-primary-dark); }
.dash-week-day.is-today { border: 2px solid var(--green-primary); padding: 9px; }
.dash-week-day .calendar-event { font-size: 12px; padding: 6px 8px; margin-bottom: 4px; white-space: normal; }

/* Dashboard — seznamový pohled ---------------------------------------------- */

.dash-list-view__day { margin-bottom: 18px; }
.dash-list-view__date {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--green-primary-dark);
  margin-bottom: 4px;
  text-transform: capitalize;
}

/* Dashboard — spodní karty: nadcházející úkoly + rok v kostce -------------- */

.dash-bottom-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; }
@media (max-width: 900px) { .dash-bottom-grid { grid-template-columns: 1fr; } }

.dash-plant-tasks h2, .dash-seasonal-timeline h2 { display: flex; align-items: center; gap: 8px; font-size: 17px; margin-bottom: 4px; }
.dash-plant-tasks .form-hint, .dash-seasonal-timeline .form-hint { margin-bottom: 14px; }

/* "Úkoly podle rostlin" — konkrétní rostlina → konkrétní úkol, ne obecný seznam funkcí. */
.dash-plant-tasks__list { display: flex; flex-direction: column; gap: 2px; }
.dash-plant-tasks__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-color);
  font-size: 13.5px;
}
.dash-plant-tasks__item:last-child { border-bottom: none; }
.dash-plant-tasks__icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dash-plant-tasks__body { flex: 1; min-width: 0; }
.dash-plant-tasks__name { display: block; color: var(--text-dark); margin-bottom: 2px; }
.dash-plant-tasks__garden {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-cream);
  border-radius: 999px;
  padding: 2px 8px;
  margin-top: 4px;
}
.dash-plant-tasks__action { display: flex; align-items: center; gap: 5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sezónní timeline — celý rok na jeden pohled napříč 4 kategoriemi péče. */
.dash-seasonal-timeline__scroll { overflow-x: auto; }
.dash-seasonal-timeline__table { min-width: 640px; }
.dash-seasonal-timeline__row { display: grid; grid-template-columns: 120px repeat(12, 1fr); align-items: center; gap: 4px; }
.dash-seasonal-timeline__row--head { margin-bottom: 4px; }
.dash-seasonal-timeline__label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-dark); white-space: nowrap; }
.dash-seasonal-timeline__month {
  text-align: center;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--text-muted);
  padding-bottom: 4px;
}
.dash-seasonal-timeline__month.is-current { color: var(--green-primary-dark); }
.dash-seasonal-timeline__cell { height: 22px; display: flex; align-items: center; justify-content: center; }
.dash-seasonal-timeline__cell::before {
  content: "";
  width: 100%;
  height: 16px;
  border-radius: 5px;
  background: var(--bg-cream);
}
.dash-seasonal-timeline__cell[data-active="1"]::before { background: var(--dot, var(--green-primary)); }

.dash-upcoming h2, .dash-year-review h2, .dash-tip-band h3 { font-size: 17px; margin-bottom: 14px; }
.dash-upcoming__item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-color); }
.dash-upcoming__item:last-of-type { border-bottom: none; }
.dash-upcoming__icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.dash-upcoming__body { flex: 1; min-width: 0; }
.dash-upcoming__meta { font-size: 12.5px; color: var(--text-muted); }
.dash-upcoming__badge {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-cream);
  padding: 4px 10px;
  border-radius: 999px;
  flex-shrink: 0;
}
.dash-upcoming__link { display: inline-flex; align-items: center; gap: 4px; margin-top: 14px; font-size: 13px; font-weight: 700; color: var(--green-primary); }

.dash-year-review__body { display: flex; align-items: center; gap: 22px; }
.dash-donut {
  position: relative;
  width: 116px; height: 116px;
  border-radius: 50%;
  flex-shrink: 0;
  background: conic-gradient(var(--green-primary) calc(var(--percent, 0) * 1%), var(--border-color) 0);
  display: flex; align-items: center; justify-content: center; flex-direction: column;
}
.dash-donut::before { content: ""; position: absolute; inset: 11px; background: #fff; border-radius: 50%; }
.dash-donut__value { position: relative; z-index: 1; font-size: 22px; font-weight: 800; color: var(--text-dark); }
.dash-donut__label { position: relative; z-index: 1; font-size: 11.5px; color: var(--text-muted); }
.dash-year-review__stats { flex: 1; display: flex; flex-direction: column; gap: 10px; font-size: 13px; color: var(--text-muted); }
.dash-year-review__stats div { display: flex; align-items: center; gap: 8px; }
.dash-year-review__stats i { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.dash-year-review__stats strong { margin-left: auto; color: var(--text-dark); }

/* Dashboard — tip měsíce ----------------------------------------------------- */

.dash-tip-band { background: var(--green-tint); border: none; }
.dash-tip-band__head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.dash-tip-band__icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #fff;
  color: var(--green-primary);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dash-tip-band__text { flex: 1; min-width: 200px; }
.dash-tip-band__text h3 { margin-bottom: 4px; }
.dash-tip-band__text p { margin: 0; color: var(--text-muted); font-size: 13.5px; }
.dash-tip-band__more { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--green-primary-dark); flex-shrink: 0; align-self: center; }
.dash-tip-band__plants { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 760px) { .dash-tip-band__plants { grid-template-columns: repeat(2, 1fr); } }
.dash-tip-band__plant { background: #fff; border-radius: var(--radius-md); padding: 10px; text-align: center; }
.dash-tip-band__plant img { width: 100%; height: 80px; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: 8px; }
.dash-tip-band__plant strong { display: block; font-size: 13px; }
.dash-tip-band__plant span { display: block; font-size: 11.5px; color: var(--green-primary-dark); font-weight: 600; }

.modal-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(15,25,18,.5);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-backdrop.is-open { display: flex; }
.modal {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 28px;
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
}
.modal__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.modal__close {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: none;
  border: none;
  border-radius: 50%;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted);
  transition: background .15s ease, color .15s ease;
}
.modal__close:hover { background: var(--bg-cream); color: var(--text-dark); }

/* Lightbox (zvětšená fotka rostliny) — tmavší, téměř celoobrazovkový backdrop; sdílí
   .modal-backdrop pozicování/otevírání, ale vlastní vzhled (ne bílá karta jako .modal). */
.lightbox-backdrop { background: rgba(10,15,12,.88); padding: 24px; }
.lightbox {
  position: relative;
  margin: 0;
  max-width: min(900px, 100%);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lightbox img {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 70px rgba(0,0,0,.5);
  object-fit: contain;
  background: #fff;
}
.lightbox__caption { text-align: center; margin-top: 16px; color: #fff; }
.lightbox__caption strong { display: block; font-size: 16px; margin-bottom: 2px; }
.lightbox__caption span { display: block; font-size: 13px; font-style: italic; color: rgba(255,255,255,.7); }
.lightbox__close {
  position: absolute;
  top: 18px; right: 18px;
  z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  background: rgba(255,255,255,.12);
  border: none;
  border-radius: 50%;
  font-size: 26px;
  line-height: 1;
  color: #fff;
  cursor: pointer;
  transition: background .15s ease;
}
.lightbox__close:hover { background: rgba(255,255,255,.24); }

/* Potvrzovací dialog (náhrada nativního confirm()) --------------------------- */
.modal--confirm { max-width: 380px; text-align: center; }
.confirm-dialog__icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: #faeaea;
  color: #c23b3b;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
}
.confirm-dialog__message { font-size: 15px; color: var(--text-dark); line-height: 1.5; margin-bottom: 22px; }
.confirm-dialog__actions { display: flex; gap: 10px; }
.confirm-dialog__actions .btn { flex: 1; }

/* ==========================================================================
   Admin
   ========================================================================== */

.admin-layout { display: flex; min-height: 100vh; }
.admin-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--green-deep-darker);
  color: #fff;
  padding: 24px 0;
  display: flex;
  flex-direction: column;
}
.admin-sidebar nav { flex: 1; }
.admin-sidebar__logout {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 24px;
  margin-top: 12px;
  color: rgba(255,255,255,.72);
  font-weight: 600;
  font-size: 14.5px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.admin-sidebar__logout:hover { color: #fff; background: rgba(255,255,255,.05); }
.admin-sidebar__brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; padding: 0 24px 24px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  margin-bottom: 12px;
}
.admin-sidebar__brand img { width: 32px; height: 32px; flex-shrink: 0; }
.admin-sidebar nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 24px;
  color: rgba(255,255,255,.72);
  font-weight: 600;
  font-size: 14.5px;
  border-left: 3px solid transparent;
}
.admin-sidebar nav a:hover { color: #fff; background: rgba(255,255,255,.05); }
.nav-badge {
  margin-left: auto;
  background: var(--green-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}
.admin-sidebar nav a.is-active { color: #fff; background: rgba(255,255,255,.08); border-color: var(--green-primary); }

.admin-main { flex: 1; background: var(--bg-cream); min-width: 0; }
.admin-topbar {
  background: #fff;
  border-bottom: 1px solid var(--border-color);
  padding: 18px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.admin-topbar h1 { font-size: 20px; margin: 0; }
.admin-topbar__logout {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--bg-cream);
  transition: background .15s ease;
}
.admin-topbar__logout:hover { background: var(--green-tint); }
.admin-content { padding: 32px; }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 28px; }
@media (max-width: 960px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
.stat-card {
  background: #fff;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  padding: 22px;
}
.stat-card__value { font-size: 28px; font-weight: 800; color: var(--green-primary-dark); }
.stat-card__label { font-size: 13.5px; color: var(--text-muted); margin-top: 4px; }

.data-table { width: 100%; border-collapse: collapse; background: #fff; }
.data-table th, .data-table td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  font-size: 14.5px;
}
.data-table th { color: var(--text-muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: .5px; }
.data-table tr:last-child td { border-bottom: none; }
.table-actions { display: flex; gap: 8px; }

.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; gap: 16px; flex-wrap: wrap; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: #fff;
  color: var(--text-muted);
  cursor: pointer;
}
.icon-btn:hover { color: var(--green-primary); border-color: var(--green-primary); }
.icon-btn--danger:hover { color: #a13a3a; border-color: #a13a3a; }

@media (max-width: 860px) {
  .admin-layout { flex-direction: column; }
  .admin-sidebar { width: 100%; padding: 12px 0; }
  .admin-sidebar nav { display: flex; overflow-x: auto; }
  .admin-sidebar nav a { border-left: none; border-bottom: 3px solid transparent; white-space: nowrap; }
  .admin-sidebar nav a.is-active { border-color: var(--green-primary); }
}

/* ==========================================================================
   Plánovač zahrady — propagační banner v dashboardu
   ========================================================================== */

.garden-promo {
  display: flex;
  align-items: center;
  gap: 22px;
  background: linear-gradient(120deg, var(--green-deep) 0%, var(--green-deep-darker) 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 22px 26px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-card);
  transition: transform .15s ease, box-shadow .15s ease;
}
.garden-promo:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(22,41,31,.3); }
.garden-promo__icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: #cfe6b8;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.garden-promo__text { flex: 1; }
.garden-promo__text h2 { font-size: 19px; margin: 6px 0 4px; }
.garden-promo__text p { margin: 0; color: rgba(255,255,255,.75); font-size: 13.5px; max-width: 520px; }
.garden-promo .btn { flex-shrink: 0; pointer-events: none; }

@media (max-width: 760px) {
  .garden-promo { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* ==========================================================================
   Plánovač zahrady — seznam plánů
   ========================================================================== */

.garden-create-form { display: flex; align-items: end; gap: 16px; margin-bottom: 24px; }
@media (max-width: 640px) { .garden-create-form { flex-direction: column; align-items: stretch; } }

.garden-empty { text-align: center; padding: 56px 28px; }
.garden-empty__icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--green-tint);
  color: var(--green-primary);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
}
.garden-empty h2 { font-size: 20px; margin-bottom: 8px; }
.garden-empty p { color: var(--text-muted); max-width: 440px; margin: 0 auto; }

.garden-plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.garden-plan-card { position: relative; padding: 0; overflow: hidden; transition: box-shadow .15s ease, transform .15s ease; }
.garden-plan-card:hover { box-shadow: 0 16px 36px rgba(30,58,46,.14); transform: translateY(-2px); }
.garden-plan-card__link { display: block; padding: 26px; color: inherit; }
.garden-plan-card__preview {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green-tint), #e4efd8);
  color: var(--green-primary);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.garden-plan-card h3 { font-size: 17px; margin-bottom: 4px; }
.garden-plan-card__delete-form { position: absolute; top: 16px; right: 16px; }
.garden-plan-card__delete { background: rgba(255,255,255,.9); }

/* ==========================================================================
   Plánovač zahrady — editor (canvas)
   ========================================================================== */

.garden-toolbar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 20px;
  margin-bottom: 20px;
}
.garden-toolbar__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.garden-toolbar__title-col { display: flex; flex-direction: column; gap: 6px; min-width: 200px; }
.garden-toolbar__name-field { position: relative; display: inline-block; align-self: flex-start; }
.garden-toolbar__name {
  font-weight: 700;
  font-size: 17px;
  border: none;
  width: 440px;
  max-width: 440px;
  padding: 8px 30px 8px 10px;
  background: transparent;
}
.garden-toolbar__name:hover, .garden-toolbar__name:focus { background: var(--bg-cream); border-radius: var(--radius-sm); }
.garden-toolbar__name-edit-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  color: var(--text-muted);
  pointer-events: none;
  opacity: .7;
}
.garden-toolbar__name:hover ~ .garden-toolbar__name-edit-icon,
.garden-toolbar__name:focus ~ .garden-toolbar__name-edit-icon { color: var(--green-primary); opacity: 1; }
.garden-toolbar__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.garden-toolbar__flip { display: inline-flex; transform: scaleX(-1); }

.garden-stats {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding: 8px 16px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(30,58,46,.08);
  width: fit-content;
}
.garden-stats__item { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--text-muted); }
.garden-stats__item svg { color: var(--green-primary); flex-shrink: 0; }

.garden-toolbar__view-toggle { display: inline-flex; background: var(--bg-cream); border-radius: 999px; padding: 3px; gap: 2px; }
.garden-toolbar__view-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  background: transparent;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.garden-toolbar__view-btn:hover { color: var(--green-primary-dark); }
.garden-toolbar__view-btn.is-active { background: var(--green-primary); color: #fff; }
.garden-toolbar__shadow-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border-color);
  background: #fff;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.garden-toolbar__shadow-toggle:hover { color: var(--green-primary-dark); border-color: var(--green-primary); }
.garden-toolbar__shadow-toggle:disabled {
  cursor: not-allowed;
  opacity: .45;
  color: var(--text-muted);
  border-color: var(--border-color);
  box-shadow: none;
}
.garden-toolbar__shadow-toggle:disabled:hover { color: var(--text-muted); border-color: var(--border-color); }
.garden-toolbar__shadow-toggle.is-active {
  background: var(--green-primary);
  border-color: var(--green-primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(92,138,58,.35);
}

.garden-weather-widget {
  background: var(--bg-cream);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  min-width: 260px;
}
.garden-weather-widget__row { display: flex; align-items: center; gap: 16px; font-weight: 700; font-size: 14px; color: var(--text-dark); margin-bottom: 8px; }
.garden-weather-widget__row span { display: inline-flex; align-items: center; gap: 5px; }
.garden-weather-widget__row svg { color: var(--green-primary); }
.garden-weather-widget__advice { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.garden-weather-widget__advice-label { font-size: 11.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; margin-right: 2px; }
.garden-weather-widget__tag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.garden-weather-widget__tag--good { background: rgba(92,138,58,.14); color: var(--green-primary-dark); }
.garden-weather-widget__tag--bad { background: rgba(194,59,59,.12); color: #a13a3a; }

@media (max-width: 760px) {
  .garden-toolbar__top { flex-direction: column; }
  .garden-weather-widget { width: 100%; }
}
.garden-toolbar__status { font-size: 13px; font-weight: 600; color: var(--text-muted); min-width: 90px; }
.garden-toolbar__status::before { content: '●'; margin-right: 6px; font-size: 9px; vertical-align: middle; }
.garden-toolbar__status.is-dirty { color: #b3812b; }
.garden-toolbar__status.is-saved { color: var(--green-primary-dark); }

.garden-visibility-pill {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border-color);
  background: var(--bg-cream);
  color: var(--text-dark);
  font-size: 12.5px; font-weight: 700;
  padding: 6px 13px 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .15s ease;
}
.garden-visibility-pill:hover { border-color: var(--green-primary); }
.garden-visibility-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); flex-shrink: 0; }
.garden-visibility-pill.is-public .garden-visibility-pill__dot { background: var(--green-primary); }
.garden-visibility-pill.is-public { border-color: var(--green-tint-border); background: var(--green-tint); color: var(--green-primary-dark); }

.garden-toolbar__menu { position: relative; }
.garden-toolbar__menu-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 28px rgba(0,0,0,.14);
  padding: 6px;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  z-index: 10;
}
.garden-toolbar__menu-list[hidden] { display: none; }
.garden-toolbar__menu-list button {
  display: flex; align-items: center; gap: 10px;
  border: none; background: none;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 13.5px; font-weight: 600;
  color: var(--text-dark);
  text-align: left;
  cursor: pointer;
}
.garden-toolbar__menu-list button:hover { background: var(--bg-cream); }
.garden-toolbar__menu-danger { color: #a13a3a !important; }
.garden-toolbar__menu-danger:hover { background: rgba(194,59,59,.08) !important; }

.garden-onboarding { padding: 16px 18px; }
.garden-onboarding__toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  border: none; background: none; padding: 0;
  font-weight: 800; font-size: 14.5px; color: var(--text-dark);
  cursor: pointer;
}
.garden-onboarding__chevron { display: flex; color: var(--text-muted); transition: transform .18s ease; }
.garden-onboarding__chevron svg { transform: rotate(90deg); }
.garden-onboarding.is-collapsed .garden-onboarding__chevron svg { transform: rotate(-90deg); }
.garden-onboarding__steps {
  margin: 14px 0 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13.5px;
  color: var(--text-muted);
}
.garden-onboarding.is-collapsed .garden-onboarding__steps { display: none; }

.garden-legend { padding: 16px 18px; }
.garden-legend__list {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
}
.garden-legend.is-collapsed .garden-legend__list { display: none; }
.garden-legend__item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted); }
.garden-legend__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.garden-legend__ring { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; border: 1.5px solid var(--text-muted); background: rgba(92, 138, 58, .1); }

.garden-layout { display: grid; grid-template-columns: 1fr 344px; gap: 20px; align-items: start; }
@media (max-width: 980px) { .garden-layout { grid-template-columns: 1fr; } }

.garden-canvas-wrap {
  padding: 20px;
  background: linear-gradient(180deg, #fbfaf5 0%, #ffffff 55%);
  box-shadow: 0 16px 40px rgba(30,58,46,.1), var(--shadow-card);
  border-color: var(--green-tint-border);
}
.garden-plant-summary { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-color); }

.garden-plant-summary__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.garden-plant-summary__title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  margin: 0 0 2px;
}
.garden-plant-summary .form-hint { margin: 0; }
.garden-plant-summary__numbers-toggle {
  flex: none;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--bg-cream);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
  white-space: nowrap;
}
.garden-plant-summary__numbers-toggle span:first-child { display: flex; align-items: center; gap: 6px; }
.garden-plant-summary__numbers-toggle:has(input:checked),
.garden-plant-summary__numbers-toggle.is-active {
  border-color: var(--green-primary);
  background: var(--green-tint);
  color: var(--green-primary-dark);
}
.garden-plant-summary__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}
.garden-plant-summary__row {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--border-color);
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.garden-plant-summary__row:hover { border-color: var(--green-primary); background: var(--green-tint); }
.garden-plant-summary__row.is-active {
  border-color: #e0a836;
  background: #fdf4e0;
  box-shadow: 0 0 0 2px rgba(224,168,54,.25);
}
.garden-plant-summary__thumb,
.garden-plant-summary__dot {
  position: relative;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--border-color);
}
.garden-plant-summary__num {
  position: absolute;
  bottom: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--green-deep);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  border: 1.5px solid #fff;
}
.garden-plant-summary__info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.garden-plant-summary__info strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.garden-plant-summary__info small { font-size: 11px; color: var(--text-muted); }
.garden-plant-summary__count {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-cream);
  border-radius: 999px;
  padding: 2px 8px;
}
.garden-plant-summary__row.is-active .garden-plant-summary__count { color: #a06a12; background: #fbe6b8; }

/* Hlavička a legenda vidilené jen v tisku/PDF exportu plánu (viz @media print) — v běžném
   zobrazení editoru nepřekáží, ale ve staženém PDF dodají profesionální hlavičku a číslovaný
   seznam rostlin odpovídající odznakům na mapě (drawItemNumbers v garden-designer.js). */
.garden-print-header { display: none; }
.garden-print-legend { display: none; }

.garden-hint {
  display: none;
  align-items: center;
  gap: 12px;
  background: var(--green-tint);
  color: var(--green-primary-dark);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin: 0 0 14px;
}
.garden-hint:not([hidden]) { display: flex; }
.garden-hint__icon {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.6);
  color: var(--green-primary-dark);
  flex-shrink: 0;
}
.garden-hint__text { font-size: 14.5px; font-weight: 600; flex: 1; line-height: 1.4; }
.garden-hint__cancel {
  border: 1px solid rgba(74,117,48,.35);
  background: transparent;
  color: var(--green-primary-dark);
  font-weight: 700;
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s ease;
}
.garden-hint__cancel:hover { background: rgba(255,255,255,.5); }

.garden-shadow-bar {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  background: linear-gradient(180deg, #1a3327 0%, #223f30 100%);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin: 0 0 14px;
}
.garden-shadow-bar:not([hidden]) { display: flex; }
.garden-shadow-bar__group { display: flex; align-items: center; gap: 10px; }
.garden-shadow-bar__label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: rgba(255,255,255,.65); }
.garden-shadow-bar__options { display: inline-flex; background: rgba(255,255,255,.1); border-radius: 999px; padding: 3px; gap: 2px; }
.garden-shadow-bar__btn {
  border: none;
  background: transparent;
  color: rgba(255,255,255,.75);
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.garden-shadow-bar__btn:hover { color: #fff; }
.garden-shadow-bar__btn.is-active { background: #fff; color: var(--green-deep-darker); }
.garden-shadow-bar__note {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 4px 11px;
  white-space: nowrap;
}
.garden-shadow-bar__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  padding: 10px 20px;
}
.garden-shadow-bar__note:empty,
.garden-shadow-bar__stat:empty { display: none; }
.garden-shadow-stat__row { display: flex; align-items: stretch; gap: 22px; }
.garden-shadow-stat__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 66px;
}
.garden-shadow-stat__col + .garden-shadow-stat__col { border-left: 1px solid rgba(255,255,255,.14); padding-left: 22px; }
.garden-shadow-stat__col svg { opacity: .85; }
.garden-shadow-stat__pct { font-size: 19px; font-weight: 800; line-height: 1.1; }
.garden-shadow-stat__label { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: rgba(255,255,255,.6); }
.garden-shadow-stat__advice {
  font-size: 12px;
  font-weight: 600;
  font-style: italic;
  color: rgba(255,255,255,.85);
  text-align: center;
  padding-top: 6px;
  width: 100%;
  border-top: 1px solid rgba(255,255,255,.14);
}
.garden-shadow-bar__info-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.75);
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.garden-shadow-bar__info-toggle:hover,
.garden-shadow-bar__info-toggle[aria-expanded="true"] { background: rgba(255,255,255,.18); color: #fff; }
.garden-shadow-bar__caption {
  flex-basis: 100%;
  margin: 2px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(255,255,255,.55);
}

.garden-canvas-stage { position: relative; width: 100%; }

/* Růžice sedí v normálním toku NAD plátnem (ne přes něj) — běžná kartografická
   konvence je umístit směrovku do okraje mapy, ne do vykreslované plochy, ať nikdy
   nepřekáží kreslení tvaru/záhonů ani rostlinám blízko okraje. */
.garden-compass-bar { display: flex; justify-content: flex-end; padding: 0 2px 10px; }
.garden-compass {
  position: relative;
  z-index: 8;
  cursor: grab;
  user-select: none;
  padding: 13px;
  margin: -13px -13px -13px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.garden-compass:active,
.garden-compass.is-dragging { cursor: grabbing; }
.garden-compass__ring {
  position: relative;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background:
    repeating-conic-gradient(rgba(31,42,36,.09) 0deg 1deg, transparent 1deg 30deg),
    radial-gradient(circle at 50% 36%, rgba(92,138,58,.12), transparent 62%),
    rgba(255,255,255,.94);
  border: 1px solid var(--border-color);
  box-shadow: 0 6px 16px rgba(0,0,0,.14), inset 0 0 0 4px rgba(255,255,255,.65);
  backdrop-filter: blur(2px);
  transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.garden-compass:hover .garden-compass__ring,
.garden-compass.is-dragging .garden-compass__ring {
  border-color: var(--green-primary);
  box-shadow: 0 8px 20px rgba(0,0,0,.2), 0 0 0 4px rgba(92,138,58,.14), inset 0 0 0 4px rgba(255,255,255,.65);
}
.garden-compass.is-dragging .garden-compass__ring { transform: scale(1.06); }
.garden-compass__fixed-mark {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 9px solid var(--green-primary-dark);
  opacity: .6;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.15));
}
.garden-compass__dial {
  position: absolute;
  inset: 0;
  transition: transform .32s cubic-bezier(.34, 1.56, .64, 1);
}
.garden-compass.is-dragging .garden-compass__dial {
  transition: none;
}
.garden-compass__label {
  position: absolute;
  font-size: 15px;
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1;
}
.garden-compass__label--n { top: 9px; left: 50%; transform: translateX(-50%); color: var(--green-primary-dark); }
.garden-compass__label--s { bottom: 9px; left: 50%; transform: translateX(-50%); }
.garden-compass__label--e { right: 9px; top: 50%; transform: translateY(-50%); }
.garden-compass__label--w { left: 9px; top: 50%; transform: translateY(-50%); }
.garden-compass__needle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 39px;
  margin-left: -6px;
  margin-top: -19.5px;
  clip-path: polygon(50% 0%, 62% 50%, 50% 100%, 38% 50%);
  background: linear-gradient(180deg, var(--green-primary) 0%, var(--green-primary) 50%, #d3d9cb 50%, #d3d9cb 100%);
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
  pointer-events: none;
}
.garden-compass__pivot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  margin-top: -6px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--green-primary-dark);
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  z-index: 2;
  transition: transform .15s ease;
}
.garden-compass.is-dragging .garden-compass__pivot { transform: scale(1.25); }
.garden-compass__badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 4px 13px;
  white-space: nowrap;
  transition: border-color .15s ease;
}
.garden-compass__badge strong { font-size: 12.5px; font-weight: 800; color: var(--text-dark); line-height: 1.3; transition: color .15s ease; }
.garden-compass__badge span { font-size: 10.5px; font-weight: 600; color: var(--text-muted); line-height: 1.2; }
.garden-compass.is-dragging .garden-compass__badge { border-color: var(--green-primary); }
.garden-compass.is-dragging .garden-compass__badge strong { color: var(--green-primary-dark); }
#garden-canvas {
  width: 100%;
  display: block;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  cursor: crosshair;
  touch-action: none;
  background:
    radial-gradient(circle at 50% 38%, rgba(92,138,58,.055), transparent 62%),
    repeating-linear-gradient(0deg, rgba(92,138,58,.04) 0, rgba(92,138,58,.04) 1px, transparent 1px, transparent 32px),
    repeating-linear-gradient(90deg, rgba(92,138,58,.04) 0, rgba(92,138,58,.04) 1px, transparent 1px, transparent 32px),
    #fdfdfb;
}

.garden-marker-toolbar {
  display: none;
  position: absolute;
  transform: translateX(-50%);
  align-items: center;
  gap: 8px;
  background: var(--green-deep-darker);
  color: #fff;
  padding: 7px 8px 7px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  z-index: 5;
}
.garden-marker-toolbar button {
  border: none;
  background: rgba(255,255,255,.15);
  color: #fff;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.garden-marker-toolbar button[hidden] { display: none; }
.garden-marker-toolbar button:hover { background: rgba(255,255,255,.3); }
.garden-marker-toolbar__danger:hover { background: #b3432b !important; }

.garden-marker-toolbar--plant {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  background: #fff;
  color: var(--text-dark);
  padding: 9px 12px 10px;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  box-shadow: 0 12px 28px rgba(30,58,46,.2);
  white-space: normal;
}
.garden-marker-toolbar__head { display: flex; align-items: center; gap: 8px; }
.garden-marker-toolbar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green-primary);
  flex-shrink: 0;
}
.garden-marker-toolbar--plant #marker-toolbar-name {
  flex: 1;
  font-weight: 700;
  font-size: 13px;
  color: var(--text-dark);
  overflow: hidden;
  text-overflow: ellipsis;
}
.garden-marker-toolbar--plant .garden-marker-toolbar__danger {
  background: var(--bg-cream);
  color: var(--text-muted);
}
.garden-marker-toolbar--plant .garden-marker-toolbar__danger:hover { background: #f4d9d0 !important; color: #b3432b; }
.garden-marker-toolbar__facts {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid var(--border-color);
}
.garden-marker-toolbar__facts[hidden] { display: none; }
.garden-marker-toolbar__fact {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}
.garden-marker-toolbar__fact svg { color: var(--green-primary); flex-shrink: 0; }

.garden-material-popover {
  display: none;
  position: absolute;
  transform: translateX(-50%);
  background: #fff;
  padding: 10px;
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
  z-index: 6;
}
.garden-material-popover .garden-color-swatches { margin-bottom: 0; flex-wrap: nowrap; }

.garden-height-popover {
  display: none;
  align-items: center;
  gap: 8px;
}
.garden-height-popover label {
  font-size: 12.5px;
  color: var(--text-muted);
  white-space: nowrap;
}
.garden-height-popover input[type="number"] {
  width: 60px;
  padding: 5px 6px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xs, 6px);
  font-size: 13px;
}
.garden-height-popover button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: var(--green-primary);
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
}

.garden-label-input {
  display: none;
  position: absolute;
  transform: translateX(-50%);
  align-items: center;
  gap: 6px;
  background: #fff;
  padding: 8px;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,.2);
  z-index: 6;
}
.garden-label-input:not([hidden]) { display: flex; }
.garden-label-input input {
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 13px;
  width: 160px;
}
.garden-label-input button {
  border: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
#label-input-confirm { background: var(--green-primary); color: #fff; }
#label-input-confirm:hover { background: var(--green-primary-dark); }
#label-input-cancel { background: var(--bg-cream); color: var(--text-muted); }
#label-input-cancel:hover { background: var(--border-color); }

.garden-sidebar { display: flex; flex-direction: column; gap: 22px; }
.garden-sidebar .card { padding: 18px; box-shadow: 0 8px 24px rgba(30,58,46,.07); }
.garden-sidebar h3 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); margin-bottom: 14px; }

.garden-tool-panel {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--green-primary);
  color: #fff;
  padding: 16px 18px 18px;
  box-shadow: 0 18px 38px rgba(74,117,48,.4), 0 0 0 1px rgba(255,255,255,.08) inset;
}
.garden-tool-panel__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: rgba(255,255,255,.8);
  /* Vpravo od textu je přes celou výšku labelu absolutně umístěný zavírací křížek
     (.garden-tool-panel__cancel, 34px + top:14px) — padding-right ať s ním text nekoliduje,
     margin-bottom dost velký, aby křížek nezasahoval do obsahu pod labelem (např. celoplošné
     fotky rostliny v kartě vybrané rostliny). */
  padding-right: 40px;
  margin-bottom: 20px;
}
.garden-tool-panel__body { display: none; align-items: center; gap: 12px; margin-bottom: 14px; }
.garden-tool-panel__body:not([hidden]) { display: flex; }
.garden-tool-panel__thumb {
  width: 40px; height: 40px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: rgba(255,255,255,.3);
  border: 2px solid rgba(255,255,255,.6);
  flex-shrink: 0;
}
.garden-tool-panel__text { flex: 1; font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.garden-tool-panel__text small { display: block; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.82); margin-top: 3px; }

.garden-plant-card__head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.garden-plant-card__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
  border: none;
  padding: 0;
  background: rgba(255,255,255,.18);
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  cursor: zoom-in;
}
.garden-plant-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .25s ease;
}
.garden-plant-card__thumb:hover img { transform: scale(1.04); }
.garden-plant-card__head strong { display: block; font-size: 17px; }
.garden-plant-card__category { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.8); }
.garden-plant-card__facts { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.garden-plant-card__facts li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,.92); }
.garden-plant-card__facts li svg { color: rgba(255,255,255,.75); flex-shrink: 0; }
.garden-plant-card__scale-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: rgba(255,255,255,.75);
  margin: 2px 0 4px;
}
.garden-plant-card__scale-label .plant-scale-timelabel { color: #fff; }
.garden-plant-card__scale {
  background: rgba(255,255,255,.9);
  border-radius: var(--radius-sm);
  padding: 8px 6px 4px;
  margin-bottom: 14px;
}
.garden-plant-card__scale:empty { display: none; }

.garden-care-cta { padding: 18px; }
.garden-care-cta h3 { display: flex; align-items: center; gap: 7px; font-size: 14.5px; margin-bottom: 6px; }
.garden-care-cta .form-hint { margin-bottom: 14px; }

.garden-care-list { display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; }
.garden-care-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
}
.garden-care-item label { display: flex; align-items: center; gap: 10px; flex: 1; cursor: pointer; font-size: 13.5px; }
.garden-care-item .badge { flex-shrink: 0; }
.garden-care-item__meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Úkol, který uživatel do kalendáře pro tento měsíc už jednou přidal — vizuálně
   ztlumený řádek + odznak "Již v kalendáři". Místo checkboxu "přidat znovu" (to by
   vytvořilo duplicitu) nabízí checkbox "Odebrat" — necháno defaultně nezaškrtnuté,
   odebrání z kalendáře je explicitní volba, ne výchozí chování. */
.garden-care-item--added { background: var(--bg-cream); border-color: transparent; }
.garden-care-item--added label { color: var(--text-muted); }
.garden-care-item__status {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 700; color: var(--green-primary-dark, #1f5c2c);
  background: var(--green-tint); padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.garden-care-item__status svg { flex-shrink: 0; }
.garden-care-item__remove-label input[type="checkbox"] { accent-color: #a13a3a; }
.garden-care-item__remove-hint {
  font-size: 11.5px; font-weight: 700; color: #a13a3a; white-space: nowrap;
}
.garden-tool-panel__actions { display: flex; align-items: center; gap: 10px; }
.garden-tool-panel__confirm {
  flex: 1;
  background: #fff;
  color: var(--green-primary-dark);
  border: none;
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background .15s ease;
}
.garden-tool-panel__confirm:hover { background: #f2f7ec; }
.garden-tool-panel__confirm:disabled { opacity: .5; cursor: not-allowed; }
.garden-tool-panel__cancel {
  position: absolute; top: 14px; right: 14px;
  background: rgba(255,255,255,.2); border: none; color: #fff;
  width: 34px; height: 34px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  cursor: pointer; flex-shrink: 0;
}
.garden-tool-panel__cancel:hover { background: rgba(255,255,255,.32); }

.garden-custom-plant #custom-plant-name { margin-bottom: 12px; }
.garden-color-swatches { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.garden-color-swatches[hidden] { display: none; }
.garden-swatch {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}
.garden-swatch.is-selected { border-color: var(--text-dark); box-shadow: 0 0 0 2px #fff inset; }

.garden-beds .form-hint { margin-bottom: 12px; }
.garden-beds__list { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.garden-beds__item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
}
.garden-beds__item span:nth-child(2) { flex: 1; }
.garden-beds__swatch { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; }

.garden-plant-palette { position: relative; }
.garden-plant-palette__search-wrap { position: relative; margin-bottom: 14px; }
.garden-plant-palette__search-wrap svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none;
}
.garden-plant-palette #plant-search { padding-left: 36px; }
.garden-plant-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.garden-plant-filter {
  border: 1px solid var(--border-color);
  background: #fff;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.garden-plant-filter:hover { border-color: var(--green-primary); color: var(--green-primary-dark); }
.garden-plant-filter.is-active { background: var(--green-primary); border-color: var(--green-primary); color: #fff; }
.garden-plant-list { max-height: 490px; overflow-y: auto; }
.garden-plant-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 8px;
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  color: var(--text-dark);
}
.garden-plant-item:hover { background: var(--bg-cream); }
.garden-plant-item.is-added { background: var(--green-tint); }
.garden-plant-item__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.garden-plant-item__thumb {
  width: 28px; height: 28px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  border: 1.5px solid var(--border-color);
}
.garden-plant-item__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.garden-plant-item__add {
  flex: none;
  display: flex;
  align-items: center;
  gap: 5px;
  width: 26px;
  height: 26px;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--green-tint);
  color: var(--green-primary-dark);
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s ease, width .15s ease, background .15s ease, color .15s ease;
}
.garden-plant-item:hover .garden-plant-item__add,
.garden-plant-item__add:focus-visible,
.garden-plant-item.is-added .garden-plant-item__add {
  opacity: 1;
}
.garden-plant-item__add-done { display: none; white-space: nowrap; font-size: 11.5px; font-weight: 700; padding: 0 10px; }
.garden-plant-item.is-added .garden-plant-item__add {
  width: auto;
  background: var(--green-primary);
  color: #fff;
}
.garden-plant-item.is-added .garden-plant-item__add-plus { display: none; }
.garden-plant-item.is-added .garden-plant-item__add-done { display: flex; align-items: center; gap: 5px; }

/* Toast notifikace ------------------------------------------------------- */

#toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.toast {
  background: var(--green-deep-darker);
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: 0 12px 28px rgba(0,0,0,.25);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease;
}
.toast.is-visible { opacity: 1; transform: translateY(0); }
.toast--error { background: #a13a3a; }

/* Fotografie rostliny (admin formulář) ------------------------------------ */

.plant-photo-field { display: flex; gap: 18px; align-items: flex-start; }
.plant-photo-field__preview {
  width: 130px;
  height: 100px;
  border-radius: var(--radius-md);
  object-fit: cover;
  border: 1px solid var(--border-color);
  flex-shrink: 0;
}
.plant-photo-field__controls { flex: 1; }
.plant-photo-field__controls .form-control { margin-bottom: 8px; }
.plant-photo-field__controls .filter-bar__checkbox { margin-top: 6px; }

.admin-thumb {
  width: 46px; height: 46px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  border: 1px solid var(--border-color);
}

/* Ořez avataru (modální okno) ---------------------------------------------- */

.avatar-crop-modal { max-width: 380px; text-align: center; }
.avatar-crop__stage {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}
#avatar-crop-canvas {
  border-radius: var(--radius-md);
  background: var(--bg-cream);
  cursor: grab;
  touch-action: none;
  max-width: 100%;
}
#avatar-crop-canvas:active { cursor: grabbing; }
.avatar-crop__zoom {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.avatar-crop__zoom input[type="range"] {
  flex: 1;
  accent-color: var(--green-primary);
}

/* Tisk plánu zahrady do PDF (Sdílet -> Uložit jako PDF) --------------------- */
@media print {
  .site-header, .site-footer, .garden-toolbar, .garden-sidebar,
  .garden-hint, .garden-marker-toolbar, .modal-backdrop, .dash-nav,
  .garden-compass-bar, .garden-shadow-bar, .garden-plant-summary,
  #toast-container {
    display: none !important;
  }
  .garden-layout { display: block; }
  .garden-canvas-wrap { box-shadow: none; border: none; padding: 0; }
  body, .section, .container { background: #fff; }

  /* Hlavička s názvem plánu a datem — jen v PDF/tisku, v editoru se nezobrazuje. */
  .garden-print-header {
    display: flex !important;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid #1e3a2e;
  }
  .garden-print-header strong { font-size: 18px; color: #1e3a2e; }
  .garden-print-header span { font-size: 11px; color: #6b7a6f; }

  #garden-canvas { max-width: 100%; page-break-inside: avoid; }

  /* Číslovaná legenda rostlin — odpovídá odznakům vykresleným přímo na mapě, viz
     drawItemNumbers()/renderPrintLegend() v garden-designer.js. */
  .garden-print-legend {
    display: block !important;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #ccd6c9;
    page-break-inside: avoid;
  }
  .garden-print-legend__title { font-size: 14px; margin: 0 0 10px; color: #1e3a2e; }
  .garden-print-legend__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 20px;
  }
  .garden-print-legend__row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
    border-bottom: 1px dotted #ccd6c9;
    padding-bottom: 3px;
  }
  .garden-print-legend__num {
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #1e3a2e;
    color: #fff;
    font-weight: 700;
    font-size: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .garden-print-legend__name { flex: 1; color: #1e2b20; }
  .garden-print-legend__count { flex: none; color: #6b7a6f; }
}