/* ── Katalog – hero lišta ─────────────────────────────── */
.zah-katalog-hero {
  background: var(--zah-hlavni);
  padding: 40px 0 32px;
  margin-bottom: 0;
}
.zah-katalog-hero h1 {
  color: #fff; font-size: clamp(28px, 4vw, 42px);
  margin-bottom: 6px;
}
.zah-katalog-hero p { color: rgba(255,255,255,.65); margin: 0; font-size: 15px; }

/* ── Katalog layout: sidebar + main ──────────────────── */
.zah-katalog-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  align-items: start;
  min-height: 60vh;
}

/* ── Sidebar filtr ────────────────────────────────────── */
.zah-filtr-sidebar {
  position: sticky;
  top: calc(var(--nav-h) + 16px);
  padding: 20px 0 40px;
  padding-right: 24px;
  border-right: 1px solid var(--zah-border);
  max-height: calc(100vh - var(--nav-h) - 32px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--zah-border) transparent;
}

/* Hledání */
.zah-fs-hledat {
  display: flex; align-items: center; gap: 8px;
  background: var(--zah-cream); border: 1px solid var(--zah-border);
  border-radius: var(--r-lg); padding: 9px 14px;
  margin-bottom: 12px; transition: border-color .2s;
}
.zah-fs-hledat:focus-within { border-color: var(--zah-stredni); }
.zah-fs-hledat svg { width:15px; height:15px; color:var(--zah-text-mut); flex-shrink:0; }
.zah-fs-hledat input { border:none; background:none; outline:none; font-size:13px; color:var(--zah-text); width:100%; font-family:inherit; }
.zah-fs-hledat input::placeholder { color:var(--zah-text-mut); }

/* Meta: počet + reset */
.zah-fs-meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.zah-fs-pocet {
  font-size: 12px; font-weight: 600; color: var(--zah-text-mut);
  background: var(--zah-cream); border: 1px solid var(--zah-border);
  padding: 3px 10px; border-radius: 100px;
}
.zah-fs-reset {
  font-size: 12px; color: #dc2626; text-decoration: none;
  border: 1px solid #fca5a5; border-radius: 100px; padding: 3px 10px;
  transition: all .15s;
}
.zah-fs-reset:hover { background: #fee2e2; }

/* Sekce */
.zah-fs-sekce { margin-bottom: 20px; }
.zah-fs-sekce-h {
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--zah-text-mut);
  margin-bottom: 8px; padding-bottom: 4px;
  border-bottom: 1px solid var(--zah-border);
}

/* Chip výběr (radio) */
.zah-fs-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.zah-fs-chip {
  display: inline-flex; align-items: center;
  padding: 5px 11px; border-radius: 100px;
  font-size: 12px; font-weight: 500; cursor: pointer;
  border: 1px solid var(--zah-border); background: #fff;
  color: var(--zah-text-sec); transition: all .15s;
  user-select: none;
}
.zah-fs-chip input { display: none; }
.zah-fs-chip:hover { border-color: var(--zah-stredni); color: var(--zah-stredni); }
.zah-fs-chip.aktivni {
  background: var(--zah-pale); border-color: var(--zah-stredni);
  color: var(--zah-hlavni); font-weight: 600;
}

/* Select */
.zah-fs-select {
  width: 100%; padding: 8px 28px 8px 10px;
  border: 1px solid var(--zah-border); border-radius: var(--r-md);
  font-size: 13px; color: var(--zah-text); font-family: inherit;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%234a6355' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;
  appearance: none; cursor: pointer; transition: border-color .15s;
}
.zah-fs-select:focus { outline: none; border-color: var(--zah-stredni); }

/* Toggle switch */
.zah-fs-toggle {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--zah-text-sec); cursor: pointer;
  padding: 4px 0; user-select: none;
}
.zah-fs-toggle input { display: none; }
.zah-fs-toggle-track {
  width: 34px; height: 19px; border-radius: 100px;
  background: var(--zah-border); position: relative;
  transition: background .2s; flex-shrink: 0;
}
.zah-fs-toggle-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 15px; height: 15px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform .2s;
}
.zah-fs-toggle.aktivni .zah-fs-toggle-track { background: var(--zah-stredni); }
.zah-fs-toggle.aktivni .zah-fs-toggle-thumb { transform: translateX(15px); }

/* Rozšířené filtry */
#zah-fs-rozsirene { display: none; border-top: 1px solid var(--zah-border); padding-top: 16px; margin-top: 4px; }
.zah-fs-toggle-btn {
  width: 100%; padding: 8px; border: 1px dashed var(--zah-border);
  border-radius: var(--r-md); background: none; cursor: pointer;
  font-size: 12px; font-weight: 500; color: var(--zah-stredni);
  font-family: inherit; transition: all .15s; margin-top: 4px;
}
.zah-fs-toggle-btn:hover { background: var(--zah-cream); border-color: var(--zah-stredni); }

/* ── Katalog main ────────────────────────────────────── */
.zah-katalog-main {
  padding: 24px 0 60px 28px;
}

/* ── Katalog mřížka ───────────────────────────────────── */
.zah-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

/* Na velmi širokých monitorech (1500px+) vynutit 3 sloupce karet, aby nepřesahovaly do velmi širokého rastru */
@media (min-width: 1500px) {
  .zah-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Karta rostliny ───────────────────────────────────── */
.zah-karta {
  background: #fff;
  border: 1px solid var(--zah-border);
  border-radius: var(--r-xl);
  overflow: hidden;
  display: flex;
  transition: box-shadow .25s, transform .25s, border-color .25s;
}
.zah-karta:hover {
  box-shadow: 0 8px 32px rgba(15,45,26,.1);
  transform: translateY(-3px);
  border-color: rgba(45,134,83,.25);
}

/* Fotka vlevo */
.zah-karta-foto {
  width: 140px; flex-shrink: 0;
  position: relative; overflow: hidden;
}
.zah-karta-foto a { display: block; height: 100%; }
.zah-karta-foto img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 30%;
  transition: transform .4s;
}
.zah-karta:hover .zah-karta-foto img { transform: scale(1.05); }
.zah-karta-foto-placeholder {
  width: 100%; height: 100%; min-height: 160px;
  background: linear-gradient(135deg, var(--zah-pale), #e8f5e0);
  display: flex; align-items: center; justify-content: center;
  font-size: 48px;
}

/* Obsah vpravo */
.zah-karta-obsah {
  padding: 14px 16px;
  display: flex; flex-direction: column;
  flex: 1; min-width: 0;
}
.zah-karta-top { flex: 1; }

.zah-karta-nazev {
  font-family: 'Playfair Display', serif;
  font-size: 15px; font-weight: 700;
  color: var(--zah-tmava); margin-bottom: 2px;
  line-height: 1.3;
}
.zah-karta-nazev a { color: inherit; }
.zah-karta-nazev a:hover { color: var(--zah-stredni); }

.zah-karta-lat {
  font-size: 11px; color: var(--zah-text-mut);
  font-style: italic; margin-bottom: 8px;
}

/* Tagy */
.zah-tagy {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-bottom: 10px;
}
.zah-tag {
  font-size: 11px; font-weight: 500; letter-spacing: .02em;
  padding: 2px 8px; border-radius: 100px;
  background: var(--zah-cream); color: var(--zah-stredni);
  border: 1px solid rgba(45,134,83,.15);
}
.zah-tag-jedla    { background: #fef9c3; color: #854d0e; border-color: rgba(133,77,14,.15); }
.zah-tag-jedovata { background: #fee2e2; color: #991b1b; border-color: rgba(153,27,27,.15); }
.zah-tag-nejedla  { background: #f3f4f6; color: #4b5563; border-color: rgba(75,85,99,.15); }
.zah-tag-vcely    { background: #fef3c7; color: #92400e; border-color: rgba(146,64,14,.15); }
.zah-tag-leciva   { background: #e0f2fe; color: #0c4a6e; border-color: rgba(12,74,110,.15); }
.zah-tag-invazivni {
  background: #fee2e2; color: #991b1b; border-color: #fca5a5;
  font-weight: 700; letter-spacing: .03em;
}

/* Termíny */
.zah-karta-terminy {
  display: flex; flex-direction: column; gap: 3px;
  margin-bottom: 10px;
}
.zah-termin {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--zah-text-sec);
}
.zah-termin-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}

/* Barvy */
.zah-karta-barvy {
  display: flex; gap: 4px; margin-bottom: 10px; align-items: center;
}
.zah-barva-kruh {
  width: 16px; height: 16px; border-radius: 4px;
  border: 1.5px solid rgba(0,0,0,.15);
  box-shadow: inset 0 0 0 0.5px rgba(0,0,0,.08);
  cursor: pointer; transition: transform .15s;
}
.zah-barva-kruh:hover { transform: scale(1.2); }
.zah-barvy-vic { font-size: 11px; color: var(--zah-text-mut); }

/* Spodní akce */
.zah-karta-akce {
  display: flex; gap: 6px; align-items: center;
  padding-top: 10px;
  border-top: 1px solid var(--zah-border);
  margin-top: auto;
}
.zah-karta-akce .zah-btn {
  font-size: 12px; padding: 5px 12px;
}
.zah-btn-sm-ghost {
  background: none; border: 1px solid var(--zah-border);
  color: var(--zah-text-sec); border-radius: 100px;
  font-size: 12px; padding: 5px 10px; cursor: pointer;
  font-family: inherit; font-weight: 500;
  transition: all .2s;
}
.zah-btn-sm-ghost:hover { border-color: var(--zah-stredni); color: var(--zah-stredni); }

/* Náročnost hvězdičky */
.zah-narocnost {
  margin-left: auto; font-size: 10px; color: var(--zah-gold);
  letter-spacing: 1px;
}

/* Prázdný stav */
.zah-prazdny {
  grid-column: 1/-1;
  text-align: center; padding: 80px 20px;
  color: var(--zah-text-mut);
}
.zah-prazdny svg { width: 56px; height: 56px; margin: 0 auto 16px; opacity: .3; }
.zah-prazdny h3 { color: var(--zah-text-sec); margin-bottom: 8px; }

/* ── Responzivita ─────────────────────────────────────── */
@media (max-width: 900px) {
  .zah-katalog-layout { grid-template-columns: 1fr; padding: 0 16px; }
  .zah-filtr-sidebar {
    position: static; border-right: none; border-bottom: 1px solid var(--zah-border);
    padding-right: 0; padding-bottom: 16px; max-height: none;
    overflow: visible;
  }
  .zah-katalog-main { padding: 16px 0 40px; }
  .zah-fs-chips { flex-wrap: wrap; }
}
@media (max-width: 600px) {
  .zah-grid { grid-template-columns: 1fr; }
  .zah-karta { flex-direction: column; }
  .zah-karta-foto { width: 100%; height: 180px; }
}

.zah-katalog-hero {
  background: var(--zah-hlavni);
  padding: 40px 0 32px;
  margin-bottom: 0;
}
.zah-katalog-hero h1 {
  color: #fff; font-size: clamp(28px, 4vw, 42px);
  margin-bottom: 6px;
}
.zah-katalog-hero p { color: rgba(255,255,255,.65); margin: 0; font-size: 15px; }

/* ── Filtry ───────────────────────────────────────────── */
.zah-filtry-wrap {
  background: #fff;
  border-bottom: 1px solid var(--zah-border);
  padding: 16px 0;
  position: sticky; top: var(--nav-h); z-index: 100;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.zah-filtry-inner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.zah-filtr-hledat {
  display: flex; align-items: center; gap: 8px;
  background: var(--zah-cream); border: 1px solid var(--zah-border);
  border-radius: 100px; padding: 8px 16px;
  flex: 1; min-width: 200px; max-width: 300px;
  transition: border-color .2s;
}
.zah-filtr-hledat:focus-within { border-color: var(--zah-stredni); }
.zah-filtr-hledat svg { width: 16px; height: 16px; color: var(--zah-text-mut); flex-shrink: 0; }
.zah-filtr-hledat input {
  border: none; background: none; outline: none;
  font-size: 14px; color: var(--zah-text); width: 100%;
  font-family: inherit;
}
.zah-filtr-hledat input::placeholder { color: var(--zah-text-mut); }

.zah-select {
  height: 38px; padding: 0 32px 0 12px;
  border: 1px solid var(--zah-border); border-radius: 100px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%234a6355' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  font-size: 13px; color: var(--zah-text); font-family: inherit;
  cursor: pointer; appearance: none; transition: border-color .2s;
}
.zah-select:focus { outline: none; border-color: var(--zah-stredni); }

.zah-filtr-check {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--zah-text-sec);
  cursor: pointer; padding: 8px 12px;
  border: 1px solid var(--zah-border); border-radius: 100px;
  transition: all .2s; white-space: nowrap; background: #fff;
  user-select: none;
}
.zah-filtr-check:hover { border-color: var(--zah-stredni); color: var(--zah-stredni); }
.zah-filtr-check input { display: none; }
.zah-filtr-check.aktivni {
  background: var(--zah-pale); border-color: var(--zah-stredni);
  color: var(--zah-hlavni); font-weight: 500;
}

.zah-filtry-rozsirene {
  display: none; padding: 14px 0 4px;
  flex-wrap: wrap; gap: 10px; align-items: center;
  border-top: 1px solid var(--zah-border); margin-top: 12px;
}
.zah-filtry-rozsirene.otevreno { display: flex; }

.zah-filtry-toggle {
  font-size: 13px; color: var(--zah-stredni);
  background: none; border: none; cursor: pointer;
  padding: 4px 0; font-family: inherit; font-weight: 500;
  display: flex; align-items: center; gap: 4px;
}
.zah-filtry-toggle svg { width: 14px; height: 14px; transition: transform .2s; }
.zah-filtry-toggle.otevreno svg { transform: rotate(180deg); }

.zah-filtry-akce {
  display: flex; align-items: center; gap: 8px; margin-left: auto;
}
.zah-pocet-tag {
  font-size: 12px; color: var(--zah-text-mut);
  background: var(--zah-cream); border: 1px solid var(--zah-border);
  padding: 4px 10px; border-radius: 100px;
}
.zah-reset-btn {
  font-size: 12px; color: var(--zah-text-mut);
  background: none; border: none; cursor: pointer;
  font-family: inherit; text-decoration: underline;
}
.zah-reset-btn:hover { color: var(--zah-stredni); }

/* ── Katalog mřížka ───────────────────────────────────── */
.zah-katalog-obsah { padding: 32px 0 60px; }
.zah-katalog-obsah .zah-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 20px;
}
/* Na velkých monitorech vynutit 3 sloupce */
@media (min-width: 1500px) {
  .zah-katalog-obsah .zah-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Karta rostliny ───────────────────────────────────── */
.zah-karta {
  background: #fff;
  border: 1px solid var(--zah-border);
  border-radius: var(--r-xl);
  overflow: hidden;
  display: flex;
  transition: box-shadow .25s, transform .25s, border-color .25s;
}
.zah-karta:hover {
  box-shadow: 0 8px 32px rgba(15,45,26,.1);
  transform: translateY(-3px);
  border-color: rgba(45,134,83,.25);
}

/* Fotka vlevo */
.zah-karta-foto {
  width: 160px; flex-shrink: 0;
  position: relative; overflow: hidden;
}
.zah-karta-foto a { display: block; height: 100%; }
.zah-karta-foto img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 30%;
  transition: transform .4s;
}
.zah-karta:hover .zah-karta-foto img { transform: scale(1.05); }
.zah-karta-foto-placeholder {
  width: 100%; height: 100%; min-height: 180px;
  background: linear-gradient(135deg, var(--zah-pale), #e8f5e0);
  display: flex; align-items: center; justify-content: center;
  font-size: 48px;
}

/* Obsah vpravo */
.zah-karta-obsah {
  padding: 18px 20px;
  display: flex; flex-direction: column;
  flex: 1; min-width: 0;
}
.zah-karta-top { flex: 1; }

.zah-karta-nazev {
  font-family: 'Playfair Display', serif;
  font-size: 17px; font-weight: 700;
  color: var(--zah-tmava); margin-bottom: 2px;
  line-height: 1.3;
}
.zah-karta-nazev a { color: inherit; }
.zah-karta-nazev a:hover { color: var(--zah-stredni); }

.zah-karta-lat {
  font-size: 12px; color: var(--zah-text-mut);
  font-style: italic; margin-bottom: 10px;
}

/* Tagy */
.zah-tagy {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-bottom: 12px;
}
.zah-tag {
  font-size: 11px; font-weight: 500; letter-spacing: .02em;
  padding: 3px 9px; border-radius: 100px;
  background: var(--zah-cream); color: var(--zah-stredni);
  border: 1px solid rgba(45,134,83,.15);
}
.zah-tag-jedla    { background: #fef9c3; color: #854d0e; border-color: rgba(133,77,14,.15); }
.zah-tag-jedovata { background: #fee2e2; color: #991b1b; border-color: rgba(153,27,27,.15); }
.zah-tag-nejedla  { background: #f3f4f6; color: #4b5563; border-color: rgba(75,85,99,.15); }
.zah-tag-vcely    { background: #fef3c7; color: #92400e; border-color: rgba(146,64,14,.15); }
.zah-tag-leciva   { background: #e0f2fe; color: #0c4a6e; border-color: rgba(12,74,110,.15); }
.zah-tag-invazivni {
  background: #fee2e2; color: #991b1b; border-color: #fca5a5;
  font-weight: 700; letter-spacing: .03em;
}

/* Termíny */
.zah-karta-terminy {
  display: flex; flex-direction: column; gap: 3px;
  margin-bottom: 12px;
}
.zah-termin {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--zah-text-sec);
}
.zah-termin-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}

/* Barvy */
.zah-karta-barvy {
  display: flex; gap: 4px; margin-bottom: 12px; align-items: center;
}
.zah-barva-kruh {
  width: 18px; height: 18px; border-radius: 4px;
  border: 1.5px solid rgba(0,0,0,.15);
  box-shadow: inset 0 0 0 0.5px rgba(0,0,0,.08);
  cursor: pointer; transition: transform .15s;
}
.zah-barva-kruh:hover { transform: scale(1.15); }
.zah-barvy-vic { font-size: 11px; color: var(--zah-text-mut); }

/* Spodní akce */
.zah-karta-akce {
  display: flex; gap: 8px; align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--zah-border);
  margin-top: auto;
}
.zah-karta-akce .zah-btn {
  font-size: 12px; padding: 6px 14px;
}
.zah-btn-sm-ghost {
  background: none; border: 1px solid var(--zah-border);
  color: var(--zah-text-sec); border-radius: 100px;
  font-size: 12px; padding: 6px 12px; cursor: pointer;
  font-family: inherit; font-weight: 500;
  transition: all .2s;
}
.zah-btn-sm-ghost:hover { border-color: var(--zah-stredni); color: var(--zah-stredni); }

/* Narocnost hvězdičky */
.zah-narocnost {
  margin-left: auto; font-size: 11px; color: var(--zah-gold);
  letter-spacing: 1px;
}

/* Prázdný stav */
.zah-prazdny {
  grid-column: 1/-1;
  text-align: center; padding: 80px 20px;
  color: var(--zah-text-mut);
}
.zah-prazdny svg { width: 56px; height: 56px; margin: 0 auto 16px; opacity: .3; }
.zah-prazdny h3 { color: var(--zah-text-sec); margin-bottom: 8px; }

/* ── Responzivita ─────────────────────────────────────── */
@media (max-width: 700px) {
  .zah-grid { grid-template-columns: 1fr; }
  .zah-karta { flex-direction: column; }
  .zah-karta-foto { width: 100%; height: 200px; }
  .zah-filtry-inner { gap: 8px; }
  .zah-filtry-akce { margin-left: 0; width: 100%; }
}
@media (max-width: 500px) {
  .zah-filtr-hledat { max-width: 100%; }
}