/* ===== Сторінка каталогу: те, чого немає в дизайн-борді, бо там усе було статичною картинкою =====
   Основа (hero, сітка, картки, смужка цін, пагінація, «Яку форму вибрати») — у site.css, розділ «catalog page».
   Тут: робочі фільтри (згортання груп, перемикач «Тільки в наявності», галочки, лічильники), випадне сортування,
   рядок пошукового запиту, порожній стан, кнопка «Фільтри» з лічильником, hover/фокус усіх нових елементів.
   Логіка — js/catalog.js. Без JS видно всі сорти підряд, а фільтри/вкладки/сортування/пагінація приховані (вони б нічого не робили). */

.cmain [hidden], .guide [hidden] { display: none !important }
html:not(.js) .tabs, html:not(.js) .side, html:not(.js) .tbar, html:not(.js) .qrow, html:not(.js) .pager { display: none !important }
html:not(.js) .cmain .cgrid { display: block }

#catalog { scroll-margin-top: calc(var(--hdr-h) + 12px) }
.cmain .tbar { position: relative; z-index: 6; scroll-margin-top: calc(var(--hdr-h) + 16px) }

/* ---------- вкладки в hero (посилання) ---------- */
.tab { transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease }
.tab:hover { border-color: var(--deep) }
.tab.on:hover { background: var(--deep); color: #fff }
.tab:active { transform: scale(.97) }

/* ---------- панель фільтрів ---------- */
.side .sr, .tbar .sr { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none }
.side-h a { transition: color .2s ease, border-color .2s ease }
.sw { cursor: pointer; transition: background-color .2s ease }
.sw i { transition: background-color .22s ease }
.sw i:after { transition: left .22s cubic-bezier(.2, .8, .3, 1) }
.sw.on i { background: var(--green) }
.sw.on i:after { left: 21px }
.sw .sr:focus-visible ~ i { outline: 3px solid var(--decor); outline-offset: 3px }

button.fg-h { width: 100%; border: 0; background: none; padding: 0; margin-bottom: 8px; font-family: inherit; text-align: left; cursor: pointer; transition: color .2s ease }
.fg-h svg { flex: none; color: var(--muted); transition: transform .28s cubic-bezier(.2, .8, .3, 1), color .2s ease }
.fg.shut .fg-h svg { transform: rotate(-90deg) }
.fg.shut .fg-h { margin-bottom: 0 }
.fg.shut { padding-bottom: 16px }
.fg-b { overflow: clip }
.fg-b .fo.x { display: none }
.fg-b.all .fo.x { display: flex }
.fo { position: relative; transition: color .2s ease }
.fo .cb { transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease }
.fo .cb svg { transition: opacity .15s ease }
.fo .ct { transition: background-color .2s ease, color .2s ease }
.fo.on .ct { background: var(--soft); color: var(--deep) }
.fo.on .nm { font-weight: 700; color: var(--deep) }
.fo.off { cursor: default; opacity: .45 }
.fo .sr:focus-visible + .cb { outline: 3px solid var(--decor); outline-offset: 2px }
button.more { background: none; border-top: 0; border-left: 0; border-right: 0; border-radius: 0; padding: 6px 0 8px; font-family: inherit; cursor: pointer; transition: color .2s ease }
.side-apply { display: none; width: 100%; margin: 16px 0 16px }
.fb-n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; margin-left: -2px; border-radius: 999px; background: #fff; color: var(--deep); font-size: 12px; font-weight: 700; line-height: 1 }
@media (hover: hover) {
  .side-h a:hover { color: var(--burg) }
  .sw:hover { background: var(--soft) }
  .sw:not(.on):hover i { background: var(--head) }
  .sw.on:hover i { background: var(--deep) }
  .fg-h:hover { color: var(--deep) }
  .fg-h:hover svg { color: var(--deep) }
  .fo:not(.off):hover .cb { border-color: var(--green); background: var(--mist) }
  .fo.on:not(.off):hover .cb { background: var(--deep); border-color: var(--deep) }
  .fo:not(.off):hover .nm { color: var(--deep) }
  .fo:not(.off):hover .ct { background: var(--soft) }
  button.more:hover { color: var(--burg) }
}

/* ---------- панель результатів: сортування, «Фільтри» ---------- */
.sort, .fbtn { transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease }
.sort svg:last-child { transition: transform .25s ease }
.sort[aria-expanded="true"] { border-color: var(--green); box-shadow: 0 0 0 3px var(--mist) }
.sort[aria-expanded="true"] svg:last-child { transform: rotate(180deg) }
.sort-w { position: relative }
.sort-m { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; min-width: 262px; padding: 8px; background: #fff; border-radius: 22px;
  box-shadow: 0 24px 54px rgba(36, 59, 45, .24), 0 0 0 1px var(--line); animation: sortIn .2s cubic-bezier(.2, .8, .3, 1); transform-origin: top right }
.sort-m button { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 46px; padding: 0 14px; border: 0; border-radius: 14px;
  background: none; font-family: inherit; font-size: 15px; font-weight: 700; color: var(--tx); text-align: left; cursor: pointer; transition: background-color .15s ease, color .15s ease }
.sort-m button[aria-selected="true"] { background: var(--mist); color: var(--deep) }
.sort-m button[aria-selected="true"]::after { content: ""; flex: none; width: 11px; height: 6px; margin-top: -3px; border-left: 2.5px solid var(--green); border-bottom: 2.5px solid var(--green); transform: rotate(-45deg) }
.sort-m button:focus-visible { outline: 3px solid var(--decor); outline-offset: -3px }
@keyframes sortIn { from { opacity: 0; transform: translateY(-6px) scale(.97) } to { opacity: 1; transform: none } }
@media (hover: hover) {
  .sort:hover { border-color: var(--green); background: var(--mist); color: var(--deep) }
  .fbtn:hover { background: var(--deep); border-color: var(--deep) }
  .sort-m button:hover { background: var(--mist); color: var(--deep) }
}
.sort:active, .fbtn:active { transform: scale(.97) }
.fbtn[aria-expanded="true"] { background: var(--deep); border-color: var(--deep) }

/* ---------- рядок запиту з пошуку ---------- */
.qrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -6px 0 22px; padding: 8px 8px 8px 20px; border-radius: 999px; background: var(--mist); font-size: 15px; color: var(--tx) }
.qrow b { color: var(--deep) }
.qrow button { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--deep); cursor: pointer; transition: background-color .2s ease, color .2s ease }
.qrow button:focus-visible { outline: 3px solid var(--decor); outline-offset: 2px }
@media (hover: hover) { .qrow button:hover { background: var(--deep); color: #fff } }

/* ---------- нічого не знайдено ---------- */
.cempty { text-align: center; padding: 56px 24px 60px; border-radius: 28px; background: var(--mist) }
.cempty h3 { font-size: 22px; color: var(--head); margin-bottom: 8px }
.cempty p { color: var(--muted); margin-bottom: 22px }

/* ---------- пагінація ---------- */
.pgs { display: flex; align-items: center; gap: 8px }
.pg { transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease }
.pg.dis { opacity: .4; pointer-events: none }
.pg-gap { width: 22px; text-align: center; font-weight: 700; color: var(--muted) }
.pg:focus-visible { outline: 3px solid var(--decor); outline-offset: 2px }
.pg:active { transform: scale(.94) }
@media (hover: hover) {
  .pg:hover { background: var(--mist); border-color: var(--green); color: var(--deep) }
  .pg.on:hover { background: var(--deep); border-color: var(--deep); color: #fff }
}

/* ---------- «Яку форму вибрати» ---------- */
.gl { transition: color .2s ease, border-color .2s ease }
@media (hover: hover) { .gl:hover { color: var(--burg) } }

/* ---------- планшет і телефон ---------- */
@media (max-width: 1100px) {
  .cmain .qrow { order: 1 }
  .cmain .cempty { order: 3 }
  .side-apply { display: inline-flex }
  .side { animation: sideIn .24s ease }
  .tb-ctl .sort-w { position: relative }
}
@keyframes sideIn { from { opacity: 0; transform: translateY(-6px) } to { opacity: 1; transform: none } }
@media (max-width: 640px) {
  .tb-ctl > .sort-w { padding: 0; flex: 1 1 0; min-width: 0 }
  .sort-w .sort { width: 100% }
  .sort-m { min-width: min(262px, calc(100vw - 40px)) }
  .qrow { margin: -4px 0 18px; padding-left: 16px; font-size: 14px }
  .pgs { gap: 4px }
  .pager { gap: 4px }
  .pg { width: 34px; height: 34px; font-size: 14px }
  .pg-gap { width: 14px }
  .cempty { padding: 40px 18px 44px }
}
@media (prefers-reduced-motion: reduce) {
  .sort-m, .side { animation: none }
  .pc .cph img, .sw i, .sw i:after, .fg-h svg, .sort svg:last-child, .tab, .pg, .fo .cb, .pc .cname a { transition: none }
  .pc:hover .cph img { transform: none }
}

/* назва в 2 рядки не зсуває смужку цін (стару ціну в клітинці форми саджанця див. у layout.css, «Картки сортів») */
.pc{display:flex;flex-direction:column}
.pc .pstrip{margin-top:auto}
.pc .cmeta{margin-bottom:12px}

/* ---------- іконки форм у кнопках «Однорічні» / «Дворічні» (SVG власника, кольором керує currentColor: зелена на білій кнопці, біла на активній) ---------- */
.tab .tab-ic { flex: none; width: 20px; height: 30px; margin: -4px 9px -4px -2px; background: currentColor; color: var(--green);
  -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; transition: color .2s ease }
.tab .tab-ic-annual { -webkit-mask-image: url(../img/icons/form-annual.svg); mask-image: url(../img/icons/form-annual.svg) }
.tab .tab-ic-biennial { -webkit-mask-image: url(../img/icons/form-biennial.svg); mask-image: url(../img/icons/form-biennial.svg) }
.tab.on .tab-ic { color: #fff }
@media (max-width: 640px) {
  .tab .tab-ic { width: 18px; height: 28px; margin: -4px 8px -4px -2px }
}

/* ---------- телефон: «Фільтри» — вужча кнопка за змістом, «Сортування» — решта ширини, зі зручними відступами іконок ---------- */
@media (max-width: 640px) {
  .tb-ctl > .fbtn { flex: 0 0 auto; padding: 10px 22px; gap: 10px }
  .tb-ctl > .sort-w { flex: 1 1 0; min-width: 0 }
  .tb-ctl .sort-w .sort { width: 100%; gap: 12px; padding: 10px 20px }
}
@media (max-width: 379px) {               /* вузькі екрани (до iPhone 14 mini/SE включно): лишаємо стрілку, ліву іконку прибираємо, щоб напис не впирався в краї */
  .tb-ctl > .fbtn { padding: 10px 16px; gap: 8px }
  .tb-ctl .sort-w .sort { gap: 8px; padding: 10px 14px }
  .tb-ctl .sort .si { display: none }
}

/* ---------- десктоп: панель фільтрів «липка» — стоїть на місці під шапкою, поки гортаємо сітку сортів ----------
   Панель вища за екран (шість груп), тому вона має власну тонку прокрутку: завжди видно початок, решту гортаємо коліщатком
   над панеллю (дійшовши до краю, прокрутка переходить на сторінку). На планшеті й телефоні фільтри відкриваються кнопкою — без змін. */
/* секція має overflow:hidden (обрізає декор), а це ламає sticky; clip обрізає так само, але не створює контейнер прокрутки */
.cmain { overflow: clip }
@media (min-width: 1101px) {
  .cgrid > .side { position: sticky; top: calc(var(--hdr-h, 88px) + 20px); max-height: calc(100vh - var(--hdr-h, 88px) - 40px); max-height: calc(100dvh - var(--hdr-h, 88px) - 40px);
    overflow-y: auto }
  /* Скролбар не має вилазити за заокруглену рамку: доріжка відступає зверху й знизу на радіус рамки (28 px), а повзунок — тонкий і з відступом від краю.
     Chrome/Safari/Edge (з Chrome 121 стандартні scrollbar-width/color вимикають ::-webkit-scrollbar, тому їх ставимо лише там, де його немає — у Firefox) */
  .cgrid > .side::-webkit-scrollbar { width: 10px }
  .cgrid > .side::-webkit-scrollbar-track { background: transparent; margin: 30px 0 }
  .cgrid > .side::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; border: 3px solid transparent; background-clip: padding-box }
  @supports not selector(::-webkit-scrollbar) {
    .cgrid > .side { scrollbar-width: thin; scrollbar-color: var(--line) transparent }
  }
}

/* ---- текст внизу каталогу: «Як обрати сорт» + «Поширені питання» (22.10) ---- */
.guide-h { font-size: 26px; color: var(--head); margin: 64px 0 0; position: relative; z-index: 2 }
.guide-h + .guide-sub { margin-top: 8px }
.gcards.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 22px }
.gcards.g3 .gcard { padding: 24px 24px 22px }
.gcards.g3 .gcard h3 { font-size: 19px }
.guide-faq { position: relative; z-index: 2; margin-top: 18px; background: #fff; border-radius: 28px; padding: 6px 28px; box-shadow: 0 14px 34px rgba(36, 59, 45, .08) }
.guide-faq .faq-i:last-child { border-bottom: 0 }
.guide-faq .faq-a { max-width: 760px }
.guide-faq .faq-a a, .guide-more a { color: var(--berry-ink); font-weight: 700; border-bottom: 1.5px solid currentColor }
@media (hover: hover) { .guide-faq .faq-a a:hover, .guide-more a:hover { color: var(--deep, #3F7A52); border-bottom-color: var(--deep, #3F7A52) } }
.guide-more { position: relative; z-index: 2; margin-top: 26px; color: var(--muted); font-size: 15px }
@media (max-width: 1100px) { .gcards.g3 { grid-template-columns: 1fr } .guide-h { margin-top: 52px } }
@media (max-width: 640px) { .guide-h { font-size: 22px; margin-top: 44px } .guide-faq { padding: 2px 18px; border-radius: 22px } .gcards.g3 .gcard { padding: 20px 18px } }