/* Еко Няшки — новий каталог (режим перегляду). Старий список, сортування й «Відображати 12» ховаємо;
 * якщо каталог не завантажився за 8 с (html.ec-cat-fail) — показуємо старе як є. */
html.ec-on:not(.ec-cat-fail) :is(body.woocommerce-shop, body.tax-product_cat) .ast-woocommerce-container > :is(.woocommerce-result-count, .custom-per-page-wrapper, .woocommerce-ordering, ul.products, .woocommerce-pagination) { display: none !important; }
html.ec-on :is(body.woocommerce-shop, body.tax-product_cat) .woocommerce-products-header__title { font-family: Manrope, system-ui, sans-serif !important; font-weight: 800 !important; font-size: clamp(26px, 3.2vw, 36px) !important; letter-spacing: -.5px; color: #1F2A1A; margin: 6px 0 4px !important; }
html.ec-on :is(body.woocommerce-shop, body.tax-product_cat) .term-description { margin-top: 40px; color: #5B6455; font-size: 15px; line-height: 1.65; }

.ecc {
	--ec-ink: #1F2A1A; --ec-muted: #5B6455; --ec-green: #3F7A22; --ec-green-dark: #2C5A16; --ec-soft: #F6F8F2; --ec-line: #E6E9E0; --ec-cream: #F1F6EA;
	font-family: Manrope, system-ui, -apple-system, sans-serif; color: var(--ec-ink); margin: 14px 0 0; clear: both;
}
.ecc *, .ecc *::before, .ecc *::after { box-sizing: border-box; }
.ecc a { text-decoration: none !important; }
.ecc button { font-family: inherit !important; letter-spacing: normal; text-transform: none; }

/* Чіпи категорій */
.ecc__chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 6px; margin-bottom: 8px; }
.ecc__chips::-webkit-scrollbar { display: none; }
.ecc__chip {
	flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px 0 6px; border-radius: 999px;
	background: #fff; border: 1.5px solid var(--ec-line); color: var(--ec-ink) !important; font-weight: 700; font-size: 14.5px; white-space: nowrap; transition: border-color .15s, background-color .15s;
}
.ecc__chip:not(:has(img)) { padding-left: 16px; }
.ecc__chip img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--ec-soft); }
.ecc__chip:hover { border-color: #BFD6A8; }
.ecc__chip.is-on { background: var(--ec-green); border-color: var(--ec-green); color: #fff !important; }
.ecc__chips--sub .ecc__chip { height: 38px; font-size: 14px; background: var(--ec-soft); border-color: transparent; }
.ecc__chips--sub .ecc__chip.is-on { background: var(--ec-cream); border-color: var(--ec-green); color: var(--ec-green-dark) !important; }

/* Панель: кількість і сортування */
.ecc__bar { display: flex; align-items: center; gap: 12px; padding: 12px 0 16px; border-bottom: 1px solid var(--ec-line); margin-bottom: 20px; }
.ecc__count { font-weight: 700; color: var(--ec-muted); font-size: 14.5px; }
.ecc__sort { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ec-muted); font-weight: 600; }
.ecc__sort select {
	height: 42px; padding: 0 38px 0 16px !important; border: 1.5px solid var(--ec-line) !important; border-radius: 999px !important; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5' fill='none' stroke='%231F2A1A' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center / 18px !important;
	font: 700 14.5px Manrope, sans-serif !important; color: var(--ec-ink) !important; -webkit-appearance: none; appearance: none; cursor: pointer; box-shadow: none !important; width: auto !important; margin: 0 !important;
}
.ecc .ecc__fbtn:not(#_) { display: none; }

/* Сайдбар з фільтрами */
.ecc__body { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 32px; align-items: start; }
.ecc__side { position: sticky; top: 96px; max-height: calc(100vh - 110px); overflow: auto; scrollbar-width: thin; padding-right: 4px; }
.ecc__shead, .ecc__sfoot, .ecc__shade { display: none; }
.ecc__g { padding: 0 0 20px; margin-bottom: 18px; border-bottom: 1px solid var(--ec-line); }
.ecc__gt { font-weight: 800; font-size: 15px; margin-bottom: 10px; }
.ecc__opts { display: flex; flex-wrap: wrap; gap: 7px; }
.ecc .ecc__opt:not(#_) {
	display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px !important; border: 1.5px solid var(--ec-line) !important; border-radius: 999px !important;
	background: #fff !important; color: var(--ec-ink) !important; font-size: 14px !important; font-weight: 600; cursor: pointer; line-height: 1.2; box-shadow: none !important; transition: border-color .12s, background-color .12s;
}
.ecc .ecc__opt:not(#_):hover { border-color: #BFD6A8 !important; }
.ecc .ecc__opt small { font-size: 12px; color: #8A9085; font-weight: 600; }
.ecc .ecc__opt.is-on:not(#_) { background: var(--ec-cream) !important; border-color: var(--ec-green) !important; color: var(--ec-green-dark) !important; }
.ecc .ecc__opt.is-on small { color: var(--ec-green); }
.ecc .ecc__opt:disabled:not(#_) { opacity: .4; cursor: default; }

/* Активні фільтри */
.ecc__active { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ecc__active:empty { display: none; }
.ecc .ecc__pill:not(#_) {
	display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 14px !important; border: 0 !important; border-radius: 999px !important;
	background: var(--ec-green) !important; color: #fff !important; font-size: 13.5px !important; font-weight: 700; cursor: pointer;
}
.ecc__pill i { font-style: normal; font-size: 18px; line-height: 1; opacity: .85; }
.ecc .ecc__pill.is-reset:not(#_) { background: transparent !important; color: var(--ec-green) !important; text-decoration: underline; padding: 0 6px !important; }

/* Сітка */
.ecc .ecc__grid { margin: 0 !important; padding: 0 !important; list-style: none; }
.ecc__sk { aspect-ratio: 3 / 4.3; border-radius: 18px; background: linear-gradient(100deg, #F3F5EE 40%, #FAFBF7 50%, #F3F5EE 60%) 0 0 / 300% 100%; animation: ect-sk 1.2s linear infinite; }
.ecc__empty { padding: 40px 20px; text-align: center; color: var(--ec-muted); font-weight: 600; background: var(--ec-soft); border-radius: 18px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ecc__empty[hidden] { display: none; }
.ecc .ecc__more:not(#_), .ecc__empty button:not(#_) {
	display: block; margin: 28px auto 0; height: 50px; padding: 0 28px !important; border: 2px solid var(--ec-green) !important; border-radius: 999px !important;
	background: #fff !important; color: var(--ec-green-dark) !important; font-size: 15px !important; font-weight: 800; cursor: pointer;
}
.ecc .ecc__more:not(#_):hover { background: var(--ec-cream) !important; }
.ecc .ecc__more[hidden] { display: none; }

@media (max-width: 1100px) {
	.ecc__body { grid-template-columns: 220px minmax(0, 1fr); gap: 24px; }
	.ecc ul.products.ect-grid.columns-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 959px) {
	.ecc { margin-top: 8px; }
	.ecc__chips { margin: 0 -16px 4px; padding: 2px 16px 6px; }
	.ecc__chip { height: 42px; font-size: 14px; }
	.ecc__chip img { width: 30px; height: 30px; }
	.ecc__bar { position: sticky; top: 0; z-index: 50; background: #fff; margin: 0 -16px 14px; padding: 10px 16px; gap: 8px; }
	html.ec-on .ech:not(.is-away) ~ * .ecc__bar { top: var(--ech-h, 0px); }
	.ecc .ecc__fbtn:not(#_) {
		display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px !important; border: 1.5px solid var(--ec-ink) !important; border-radius: 999px !important;
		background: #fff !important; color: var(--ec-ink) !important; font-size: 14.5px !important; font-weight: 800; cursor: pointer;
	}
	.ecc__fbtn svg { width: 18px; height: 18px; }
	.ecc__fbtn i { font-style: normal; min-width: 20px; height: 20px; border-radius: 999px; background: var(--ec-green); color: #fff; font-size: 12px; line-height: 20px; text-align: center; padding: 0 5px; }
	.ecc__fbtn i[hidden] { display: none; }
	.ecc__count { order: 3; flex: 0 0 auto; display: none; }
	.ecc__sort span { display: none; }
	.ecc__sort select { height: 40px; font-size: 14px !important; }
	.ecc__body { display: block; }
	.ecc ul.products.ect-grid.columns-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	/* Фільтри — шторка знизу */
	.ecc__side {
		position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 2147483002; max-height: 86vh; background: #fff; border-radius: 24px 24px 0 0;
		padding: 0 16px; overflow: auto; transform: translateY(105%); transition: transform .25s cubic-bezier(.2, .8, .2, 1); display: flex; flex-direction: column;
	}
	.ecc.is-fopen .ecc__side { transform: none; }
	.ecc__shade { display: block; position: fixed; inset: 0; z-index: 2147483001; background: rgba(20, 26, 16, .45); opacity: 0; pointer-events: none; transition: opacity .2s; }
	.ecc.is-fopen .ecc__shade { opacity: 1; pointer-events: auto; }
	.ecc__shead { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: #fff; padding: 16px 0 12px; z-index: 1; }
	.ecc__shead b { font-size: 20px; font-weight: 800; }
	.ecc .ecc__sx:not(#_) { width: 40px; height: 40px; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: var(--ec-soft) !important; color: var(--ec-ink) !important; font-size: 24px !important; line-height: 1; }
	.ecc__groups { flex: 1; }
	.ecc__sfoot { display: flex; gap: 10px; position: sticky; bottom: 0; background: #fff; padding: 12px 0 calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ec-line); }
	.ecc .ecc__reset:not(#_), .ecc .ecc__apply:not(#_) { height: 50px; border-radius: 999px !important; font-size: 15px !important; font-weight: 800; cursor: pointer; padding: 0 18px !important; }
	.ecc .ecc__reset:not(#_) { background: #fff !important; border: 1.5px solid var(--ec-line) !important; color: var(--ec-ink) !important; }
	.ecc .ecc__apply:not(#_) { flex: 1; background: var(--ec-green) !important; border: 0 !important; color: #fff !important; }
	.ecc .ecc__opt:not(#_) { min-height: 40px; font-size: 14.5px !important; }
}
@media (max-width: 959px) {
	.ecc__shade { touch-action: none; }
	.ecc__side { max-height: calc(var(--ec-vh, 100dvh) - 50px); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 959px) { .ecc__side { bottom: var(--ec-kb, 0px); } .ecc__shade { height: 100lvh; } }
@media (max-width: 959px) {
	.ecc:not(.is-fopen) .ecc__side { visibility: hidden; transition: transform .25s cubic-bezier(.2, .8, .2, 1), visibility 0s .25s; }
	.ecc.is-fopen .ecc__side { visibility: visible; transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
}