/*! Česká louka – Pěstební sady · build 2026-10-30 k · Taveo */
/* Stránka kategorie Pěstební sady v novém vzhledu (styl předplatného verze 2). Kořen `#cl-sady`. */

#cl-sady {
  --cps-bg: #f7f6ef;
  --cps-ink: #2b3318;
  --cps-olive: #5a6c31;
  --cps-olive-dark: #3f4d22;
  --cps-line: #e4e6d6;
  --cps-soft: #eef1e4;
  --cps-muted: #4c5340;
  --cps-lime: #c9d99a;
  --cps-off: #8a8f7c;
  --cps-display: 'Bricolage Grotesque', 'Source Sans 3', system-ui, sans-serif;
  max-width: 1240px;
  margin: 8px auto 56px;
  display: flex;
  flex-direction: column;
  gap: 56px;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  color: var(--cps-ink);
}
#cl-sady *, #cl-sady *::before, #cl-sady *::after { box-sizing: border-box; }
#cl-sady ul { margin: 0; padding: 0; list-style: none; }
#cl-sady li { margin: 0; padding: 0; }
#cl-sady li::before { display: none; content: none; }
#cl-sady p { margin: 0; }
#cl-sady img { display: block; max-width: 100%; }
#cl-sady svg { flex-shrink: 0; }
#cl-sady a { text-decoration: none; color: inherit; }
#cl-sady button { font: inherit; color: inherit; }
#cl-sady a:focus-visible, #cl-sady button:focus-visible { outline: 3px solid #8aa04a; outline-offset: 2px; }
#cl-sady h1, #cl-sady h2, #cl-sady h3 { margin: 0; padding: 0; border: 0; text-transform: none; color: inherit; letter-spacing: normal; }

/* Šířka stránky jako v předplatném, staré části kategorie schované */
body.cps-page #content-wrapper { width: auto; max-width: 1320px; padding-left: 20px; padding-right: 20px; }
body.cps-page main#content { width: 100%; max-width: none; float: none; }
body.cps-page main#content > .category-top,
body.cps-page main#content > .category-content-wrapper { display: none; }
@media (max-width: 767px) { body.cps-page #content-wrapper { padding-left: 16px; padding-right: 16px; } body.cps-page main#content { padding-left: 0; padding-right: 0; } }

/* Hlavička */
#cl-sady .cps-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; align-items: center; }
#cl-sady .cps-head-text { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
#cl-sady .cps-pill { min-height: 34px; padding: 4px 14px; display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; background: var(--cps-soft); color: var(--cps-olive-dark); font-size: 15px; font-weight: 600; }
#cl-sady .cps-pill svg { width: 18px; height: 18px; color: var(--cps-olive); }
#cl-sady .cps-h1 { font-family: var(--cps-display); font-size: clamp(34px, 4.4vw, 56px); font-weight: 800; line-height: 1.02; letter-spacing: -0.01em; color: var(--cps-ink); }
#cl-sady .cps-lead { max-width: 560px; font-size: 19px; color: var(--cps-muted); }
#cl-sady .cps-head-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
#cl-sady .cps-head-pic { position: relative; aspect-ratio: 4 / 3; border-radius: 28px; overflow: hidden; background: #f3f1ea; }
#cl-sady .cps-head-pic img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); }
/* Shoptet zmenšuje fotky do 1024 × 768 a dorovná je bílými pruhy po stranách: tady se pruhy oříznou */
/* Video v hlavičce: náhled 16 : 9 s tlačítkem, po kliknutí se přehraje na místě */
#cl-sady .cps-head-pic.is-video { display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: var(--cps-ink); cursor: pointer; text-align: left; }
#cl-sady .cps-head-pic.is-video img { transform: none; transition: transform .3s; }
#cl-sady button.cps-head-pic.is-video:hover img { transform: scale(1.03); }
#cl-sady .cps-head-pic.is-video::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(43, 51, 24, 0) 55%, rgba(43, 51, 24, .7) 100%); pointer-events: none; }
#cl-sady .cps-head-pic.is-video .cps-video-play { width: 76px; height: 76px; margin: -38px 0 0 -38px; }
#cl-sady .cps-head-pic.is-video .cps-video-play svg { width: 30px; height: 30px; }
#cl-sady .cps-head-pic.is-video .cps-video-label { left: 20px; bottom: 16px; font-size: 18px; }
#cl-sady button.cps-head-pic.is-video:hover .cps-video-play { transform: scale(1.07); }
#cl-sady .cps-head-pic.is-playing { cursor: default; }
#cl-sady .cps-head-pic.is-playing::after { display: none; }
#cl-sady .cps-head-pic iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
#cl-sady img.cps-padded { transform: scale(1.2); }
#cl-sady .cps-video:hover img.cps-padded { transform: scale(1.24); }
#cl-sady .cps-facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 18px 22px; border-radius: 20px; background: var(--cps-soft); }
#cl-sady .cps-facts { align-items: center; }
#cl-sady .cps-facts li { display: flex; gap: 12px; align-items: center; justify-content: center; font-size: 16px; color: var(--cps-muted); }
#cl-sady .cps-facts b { display: block; color: var(--cps-ink); font-weight: 700; }
#cl-sady .cps-facts svg { width: 24px; height: 24px; color: var(--cps-olive); }

/* Tlačítka */
#cl-sady .cps-btn { min-height: 48px; padding: 10px 22px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 14px; background: var(--cps-olive); color: #fff; font-size: 17px; font-weight: 700; line-height: 1.2; text-align: center; cursor: pointer; transition: background-color .15s; }
#cl-sady .cps-btn:hover { background: var(--cps-olive-dark); color: #fff; }
#cl-sady .cps-btn.is-ghost { background: #fff; color: var(--cps-ink); box-shadow: inset 0 0 0 1.5px var(--cps-line); }
#cl-sady .cps-btn.is-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--cps-olive); background: #fff; color: var(--cps-ink); }
#cl-sady .cps-btn.is-off { background: var(--cps-bg); color: var(--cps-off); box-shadow: inset 0 0 0 1.5px var(--cps-line); cursor: default; font-weight: 600; }
#cl-sady .cps-btn svg { width: 20px; height: 20px; }

/* Sekce */
#cl-sady .cps-sec { display: flex; flex-direction: column; gap: 24px; scroll-margin-top: 90px; }
#cl-sady .cps-sec-head { display: flex; flex-direction: column; gap: 6px; }
#cl-sady .cps-h2 { font-family: var(--cps-display); font-size: clamp(28px, 3vw, 38px); font-weight: 800; line-height: 1.08; }
#cl-sady .cps-sec-head p { max-width: 640px; font-size: 18px; color: var(--cps-muted); }
#cl-sady .cps-h3 { font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cps-olive); }
#cl-sady .cps-kicker { font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cps-olive); }
#cl-sady .cps-badge { height: 28px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; background: var(--cps-olive); color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap; }
#cl-sady .cps-badge.is-soon { background: var(--cps-soft); color: var(--cps-olive-dark); }
#cl-sady .cps-badge.is-out { background: #f1e3e8; color: #a3264f; }

/* Návody */
#cl-sady .cps-guides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
#cl-sady .cps-guide { padding: 24px; border-radius: 28px; background: #fff; border: 1px solid var(--cps-line); display: flex; flex-direction: column; gap: 18px; min-width: 0; }
#cl-sady .cps-guide-top { display: flex; align-items: center; gap: 16px; }
#cl-sady .cps-disc { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--cps-soft); display: flex; align-items: center; justify-content: center; color: var(--cps-olive); box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--cps-line); }
#cl-sady .cps-disc img { width: 100%; height: 100%; object-fit: cover; }
#cl-sady .cps-disc svg { width: 36px; height: 36px; }
#cl-sady .cps-guide-name { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
#cl-sady .cps-guide-name strong { font-family: var(--cps-display); font-size: 30px; font-weight: 800; line-height: 1.05; }
#cl-sady .cps-guide-name .cps-badge { margin-top: 6px; }
#cl-sady .cps-guide-actions { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }

/* Video (náhled, video se načte až po kliknutí) */
#cl-sady .cps-video { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 18px; overflow: hidden; background: var(--cps-ink); cursor: pointer; text-align: left; }
#cl-sady .cps-video img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
#cl-sady .cps-video:hover img { transform: scale(1.03); }
#cl-sady .cps-video::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(43, 51, 24, 0) 45%, rgba(43, 51, 24, .78) 100%); }
#cl-sady .cps-video-play { position: absolute; left: 50%; top: 50%; z-index: 1; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--cps-olive); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0, 0, 0, .2); transition: transform .15s; }
#cl-sady .cps-video:hover .cps-video-play { transform: scale(1.07); }
#cl-sady .cps-video-play svg { width: 26px; height: 26px; margin-left: 4px; }
#cl-sady .cps-video-label { position: absolute; left: 16px; right: 16px; bottom: 12px; z-index: 1; display: flex; align-items: center; gap: 8px; color: #fff; font-size: 16px; font-weight: 700; }
#cl-sady .cps-video.is-soon { cursor: default; background: var(--cps-soft); }
#cl-sady .cps-video.is-soon img { opacity: .55; filter: saturate(.6); }
#cl-sady .cps-video.is-soon:hover img { transform: none; }
#cl-sady .cps-video.is-soon:hover img.cps-padded { transform: scale(1.2); }
#cl-sady .cps-video.is-soon .cps-video-play { background: rgba(255, 255, 255, .85); color: var(--cps-off); }
#cl-sady .cps-video.is-soon .cps-video-play svg { margin-left: 0; } /* hodiny jsou souměrné, posun patří jen trojúhelníku play */
#cl-sady .cps-video.is-empty { display: flex; align-items: center; justify-content: center; }
#cl-sady .cps-video.is-empty::after { display: none; }
#cl-sady .cps-video.is-empty .cps-video-label { color: var(--cps-muted); justify-content: center; }

/* Starší verze (složka) */
#cl-sady .cps-guide.is-legacy { background: var(--cps-bg); border-color: var(--cps-line); }
#cl-sady .cps-guide.is-legacy .cps-disc { background: #fff; }
#cl-sady .cps-guide-name .cps-legacy-title { font-family: var(--cps-display); font-size: 22px; font-weight: 800; line-height: 1.12; }
#cl-sady .cps-legacy-text { color: var(--cps-muted); }
#cl-sady .cps-legacy-list { display: flex; flex-direction: column; gap: 10px; }
#cl-sady .cps-legacy-item { width: 100%; padding: 8px; display: flex; align-items: center; gap: 14px; border: 0; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--cps-line); cursor: pointer; text-align: left; transition: box-shadow .15s; }
#cl-sady .cps-legacy-item:hover { box-shadow: inset 0 0 0 1.5px var(--cps-olive); }
#cl-sady .cps-legacy-thumb { position: relative; width: 104px; aspect-ratio: 16 / 9; flex-shrink: 0; border-radius: 10px; overflow: hidden; background: var(--cps-ink); }
#cl-sady .cps-legacy-thumb img { width: 100%; height: 100%; object-fit: cover; }
#cl-sady .cps-legacy-thumb span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(43, 51, 24, .25); color: #fff; }
#cl-sady .cps-legacy-thumb svg { width: 22px; height: 22px; }
#cl-sady .cps-legacy-item b { display: block; font-size: 17px; }
#cl-sady .cps-legacy-item small { display: block; font-size: 14px; color: var(--cps-muted); }
#cl-sady .cps-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--cps-olive-dark); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
#cl-sady .cps-link:hover { color: var(--cps-ink); }
#cl-sady .cps-link svg { width: 16px; height: 16px; }

/* Produkty: kompaktní karty, celá karta se vejde na obrazovku notebooku */
#cl-sady .cps-grid { display: grid; gap: 18px; align-items: stretch; }
#cl-sady .cps-grid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#cl-sady .cps-prod { border-radius: 24px; background: #fff; border: 1px solid var(--cps-line); display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
#cl-sady .cps-prod-pic { position: relative; display: block; aspect-ratio: 16 / 10; background: #fff; overflow: hidden; }
#cl-sady .cps-prod-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
#cl-sady a.cps-prod-pic:hover img { transform: scale(1.03); }
/* Celá fotka bez ořezu */
#cl-sady .cps-prod-pic.is-contain img { object-fit: contain; }
/* Čtvercová fotka, kterou Shoptet dorovná bílými pruhy do 1024 × 768: čtverec (pruhy oříznuté) uprostřed,
   okraje se rozplynou do pozadí stejné barvy, jakou má pozadí fotky */
#cl-sady .cps-prod-pic.is-square { display: flex; justify-content: center; background: #f9f7f3; }
#cl-sady .cps-prod-pic.is-square img { width: auto; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); }
#cl-sady .cps-prod-pic .cps-badge { position: absolute; left: 14px; top: 14px; }
#cl-sady .cps-prod-body { flex: 1; padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; }
#cl-sady .cps-prod-title { font-family: var(--cps-display); font-size: 22px; font-weight: 800; line-height: 1.12; }
#cl-sady .cps-prod-title a:hover { color: var(--cps-olive); }
#cl-sady .cps-prod-text { font-size: 15px; line-height: 1.4; color: var(--cps-muted); }
#cl-sady .cps-tags { display: flex; flex-wrap: wrap; gap: 5px; }
#cl-sady .cps-tag { min-height: 24px; padding: 1px 9px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--cps-soft); color: var(--cps-olive-dark); font-size: 13px; font-weight: 600; }
#cl-sady a.cps-tag { box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .15s, background-color .15s; }
#cl-sady a.cps-tag:hover { background: #e3e8d2; box-shadow: inset 0 0 0 1px var(--cps-olive); color: var(--cps-ink); }
#cl-sady .cps-vars { display: grid; gap: 6px; }
#cl-sady .cps-var { min-height: 40px; padding: 6px 12px; display: flex; align-items: center; gap: 10px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px var(--cps-line); transition: box-shadow .15s, background-color .15s; }
#cl-sady a.cps-var:hover { box-shadow: inset 0 0 0 1.5px var(--cps-olive); background: var(--cps-bg); }
#cl-sady .cps-var-name { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
#cl-sady .cps-var-name b { font-size: 15px; line-height: 1.25; }
#cl-sady .cps-var-name small { font-size: 13px; line-height: 1.25; color: var(--cps-muted); }
#cl-sady .cps-var-price { font-size: 15px; font-weight: 700; white-space: nowrap; }
#cl-sady .cps-var.is-out { box-shadow: inset 0 0 0 1.5px var(--cps-line); background: var(--cps-bg); }
#cl-sady .cps-var.is-out .cps-var-price { color: var(--cps-off); font-weight: 600; font-size: 14px; }
#cl-sady .cps-prod-foot { margin-top: auto; padding-top: 4px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
#cl-sady .cps-from { display: flex; align-items: baseline; gap: 5px; font-size: 14px; color: var(--cps-muted); white-space: nowrap; }
#cl-sady .cps-from strong { font-family: var(--cps-display); font-size: 26px; font-weight: 800; line-height: 1; color: var(--cps-ink); }
#cl-sady .cps-prod-foot .cps-btn { flex: 1 1 140px; min-height: 42px; padding: 8px 16px; font-size: 15px; border-radius: 12px; }

/* Připravujeme */
#cl-sady .cps-prod.is-soon { background: var(--cps-bg); }
#cl-sady .cps-prod.is-soon .cps-prod-pic { display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(135deg, #eef1e4 0 14px, #e9ecdc 14px 28px); }
#cl-sady .cps-soon-mark { width: 80px; height: 80px; border-radius: 50%; background: #fff; color: var(--cps-olive); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 6px rgba(255, 255, 255, .5); }
#cl-sady .cps-soon-mark svg { width: 36px; height: 36px; }
#cl-sady .cps-prod.is-soon .cps-prod-title { color: var(--cps-muted); }

/* Video v okně */
.cps-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(28, 33, 16, .86); }
.cps-modal-box { position: relative; width: min(1100px, 100%); }
.cps-modal-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000; }
.cps-modal-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cps-modal-close { position: absolute; right: 0; top: -52px; width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: #fff; color: #2b3318; cursor: pointer; }
.cps-modal-close svg { width: 22px; height: 22px; }
.cps-modal-close:focus-visible { outline: 3px solid #c9d99a; outline-offset: 2px; }
html.cps-noscroll { overflow: hidden; }

/* Tablet */
@media (max-width: 1023px) {
  #cl-sady { gap: 44px; }
  #cl-sady .cps-head { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  #cl-sady .cps-head-pic { aspect-ratio: 16 / 9; }
  #cl-sady .cps-guides { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #cl-sady .cps-guides.is-3 .cps-guide.is-legacy { grid-column: 1 / -1; }
  #cl-sady .cps-guides.is-3 .cps-guide.is-legacy .cps-legacy-list { flex-direction: row; }
  #cl-sady .cps-guides.is-3 .cps-guide.is-legacy .cps-legacy-item { flex: 1; min-width: 0; }
  #cl-sady .cps-grid.is-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #cl-sady .cps-facts { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  #cl-sady .cps-facts li { justify-content: flex-start; }
}

/* Telefon */
@media (max-width: 680px) {
  #cl-sady { gap: 36px; margin-top: 0; }
  #cl-sady .cps-lead { font-size: 17px; }
  #cl-sady .cps-head-actions .cps-btn { flex: 1 1 100%; }
  #cl-sady .cps-head-pic { border-radius: 22px; }
  #cl-sady .cps-guides, #cl-sady .cps-guides.is-2, #cl-sady .cps-grid.is-3 { grid-template-columns: minmax(0, 1fr); }
  #cl-sady .cps-guide.is-legacy .cps-legacy-list { flex-direction: column; }
  #cl-sady .cps-guide, #cl-sady .cps-prod { border-radius: 22px; }
  #cl-sady .cps-guide { padding: 20px; }
  #cl-sady .cps-disc { width: 68px; height: 68px; }
  #cl-sady .cps-guide-name strong { font-size: 26px; }
  #cl-sady .cps-guide.is-soon .cps-video { aspect-ratio: 2 / 1; }
  #cl-sady .cps-guide.is-soon .cps-video-play { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  #cl-sady .cps-guide.is-soon .cps-video-label { bottom: 8px; }
  #cl-sady .cps-prod.is-soon .cps-prod-pic { aspect-ratio: 3 / 1; }
  #cl-sady .cps-soon-mark { width: 60px; height: 60px; }
  #cl-sady .cps-soon-mark svg { width: 28px; height: 28px; }
  .cps-modal { padding: 12px; }
  .cps-modal-close { top: -54px; }
}

/* Bez probliknutí starého vzhledu (Tom 30. 10. 2026): dokud skript nevykreslí stránku (třída cps-page na <body>),
   původní obsah kategorie se nevykreslí. Třídy in-… a type-… dává Shoptet do <body> už na serveru a tenhle soubor
   se načítá v hlavičce, takže pravidlo platí od prvního vykreslení. Pojistka: kdyby se skript nenačetl,
   původní obsah se po 3 s ukáže. */
body.type-category.in-pestebni-sada-microgreens-doma:not(.cps-page) main#content { visibility: hidden; min-height: 100vh; animation: cps-reveal 0s 3s forwards; }
@keyframes cps-reveal { to { visibility: visible; } }