/* ===================================================================
ZF CATALOG — чистий і структурований стиль
=================================================================== */
/* ---------------------------- 1) Змінні ---------------------------- */
#zf-app .zf-topbar {
margin-top: -8px !important; /* уменьшаем зазор (подбери число по вкусу) */
}
#zf-app{
/* Кнопки карток/акцент Woo */
--btn-green: #2e7d32;
--btn-green-dark: #133315;
--card-bg: #e8f3e8;
/* Фільтри (верхня смуга і лівий сайдбар) */
--accent: #014916; /* звичайний стан */
--accent-dark: #87BF60; /* активна кнопка */
/* Геометрія */
--sidebar-w: 280px; /* ширина лівого фільтра */
--topbar-h: 56px; /* висота верхньої смуги */
}
/* Прибрати заокруглення у «великих» контейнерів (а не у кнопок) */
#zf-app,
#zf-app .wp-block-group,
#zf-app .wp-block-columns,
#zf-app .wp-block-column{
border-radius: 0 !important;
}
/* Скидання внутрішніх відступів Gutenberg тільки в нашому блоці */
#zf-app .wp-block-group,
#zf-app .wp-block-columns,
#zf-app .wp-block-column{
margin:0 !important;
padding:0 !important;
}
/* Прибрати випадкові
всередині наших блоків */
#zf-app br{ display:none !important; }
/* Невеликий відступ під верхніми фільтрами і над вітриною */
#zf-app .zf-topbar{ margin-bottom:18px; }
#zf-app .zf-catalog{ margin-top:20px; }
/* ---------------------------- 2) Верхня смуга (класи) ---------------------------- */
/* Підтримуємо всі варіанти обгорток, які може повернути шорткод */
#zf-app .zf-topbar,
#zf-app .zf-classes,
#zf-app ul#zf-classes,
#zf-app .zf-classes-nav{
position:relative;
display:flex;
align-items:center;
gap:10px;
height:var(--topbar-h);
padding:0 16px;
background:var(--accent);
list-style:none;
margin:0;
box-sizing:border-box;
}
/* Зліва — «Фільтр >», одночасно резервуємо місце шириною лівого фільтра */
/* Кнопки на верхній смузі */
#zf-app .zf-topbar a,
#zf-app .zf-classes a,
#zf-app ul#zf-classes a,
#zf-app .zf-classes-nav a{
display:flex;
align-items:center;
justify-content:center;
height:100%;
padding:0 20px;
background:var(--accent);
color:#fff;
font-weight:700;
text-decoration:none;
border-radius:12px;
transition:background .2s ease, filter .2s ease;
}
#zf-app .zf-topbar a:hover,
#zf-app .zf-classes a:hover,
#zf-app ul#zf-classes a:hover,
#zf-app .zf-classes-nav a:hover{
filter:brightness(0.95);
background: #133315;
}
#zf-app .zf-topbar .is-active,
#zf-app .zf-classes .is-active,
#zf-app ul#zf-classes .is-active,
#zf-app .zf-classes-nav .is-active{
background:var(--accent-dark);
}
/* ---------------------------- 3) Макет: дві колонки ---------------------------- */
#zf-app .wp-block-columns.zf-layout{
display:grid;
grid-template-columns: var(--sidebar-w) 1fr;
gap:24px;
align-items:start;
}
#zf-app .wp-block-columns.zf-layout > .wp-block-column{
margin:0 !important;
min-width:0; /* щоб права колонка не «роз’їжджалась» */
}
/* ---------------------------- 4) Лівий сайдбар (види) ---------------------------- */
#zf-app .zf-sidebar{
background:var(--accent);
color:#fff;
padding:10px;
box-sizing:border-box;
}
/* Список видів може бути — приводимо до колонки з рівними інтервалами */
#zf-app .zf-species{
list-style:none;
margin:0;
padding:0;
display:flex;
flex-direction:column;
gap:10px;
}
#zf-app .zf-species li{ margin:0; padding:0; }
/* Універсальний стиль кнопок у сайдбарі (і , і можливі