/* =====================================================================
   theme_coffee — listing layer (owner: listing)
   Pages: /products (view + _ajax-products), /categories, /brands, /vendors
   Product card partials (_product-card-cz) used site-wide.
   Tokens/components come from coffee.css — no raw hex here.
   Prefixes: .cz-pc (product card) · .cz-ls (listing page) · .cz-fc (factory card)
             .cz-cat (categories page) · .cz-br (brands page)
   ===================================================================== */

/* ---------- 1. Product card (.cz-pc) --------------------------------- */
.cz-pc {
  position: relative; display: flex; flex-direction: column; height: 100%; min-width: 0;
  background: var(--cz-white); border: 1px solid var(--cz-ink-12); border-radius: var(--cz-radius-sm);
  overflow: hidden; transition: box-shadow .15s, border-color .15s; text-align: start;
}
.cz-pc:hover { box-shadow: var(--cz-shadow); border-color: var(--cz-ink-22); }
.cz-pc__media { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--cz-khaki); overflow: hidden; flex: none; }
.cz-pc__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.cz-pc:hover .cz-pc__media img { transform: scale(1.03); }
.cz-pc__discount { position: absolute; top: 8px; inset-inline-start: 8px; z-index: 1; }
.cz-pc__oos { position: absolute; inset-inline: 0; bottom: 0; padding: 5px 8px; background: var(--cz-ink-60); color: var(--cz-cream); font: 600 10.5px/1 var(--cz-font-mono); letter-spacing: .12em; text-transform: uppercase; text-align: center; }
.cz-pc__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 14px 15px 15px; gap: 0; min-width: 0; }
.cz-pc__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 700 15px/1.3 var(--cz-font-body); color: var(--cz-ink); min-height: calc(2 * 1.3em); text-decoration: none !important; }
.cz-pc__name:hover { color: var(--cz-lacquer); }
.cz-pc__price { margin-top: 8px; font: 600 17px/1.1 var(--cz-font-mono); color: var(--cz-lacquer); font-variant-numeric: tabular-nums; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.cz-pc__price del { font-size: 12px; font-weight: 400; color: var(--cz-ink-40); }
.cz-pc__price .cz-pc__unit { font: 400 11.5px/1 var(--cz-font-body); color: var(--cz-ink-60); }
.cz-pc__price--nego { font-size: 14px; letter-spacing: .02em; }
.cz-pc__meta > span:first-child { text-transform: uppercase; }
.cz-pc__meta { margin-top: 5px; font: 400 12px/1.4 var(--cz-font-mono); color: var(--cz-ink-60); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.cz-pc__rating { display: inline-flex; align-items: center; gap: 3px; color: var(--cz-brass); font-family: var(--cz-font-body); font-weight: 600; }
.cz-pc__rating .tio-star, .cz-pc__rating .fa { font-size: 11px; }
.cz-pc__supplier { margin-top: auto; padding-top: 11px; border-top: 1px dashed var(--cz-ink-22); display: flex; align-items: center; gap: 7px; min-width: 0; }
.cz-pc__body > .cz-pc__meta + .cz-pc__supplier, .cz-pc__body > .cz-pc__price + .cz-pc__supplier { margin-top: 11px; }
.cz-pc__logo { width: 20px; height: 20px; flex: none; border-radius: 2px; background: var(--cz-brass-2); object-fit: cover; }
.cz-pc__shop-line { flex: 1 1 auto; min-width: 0; font: 400 12px/1.3 var(--cz-font-body); color: var(--cz-ink-60); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cz-pc__shop { color: var(--cz-ink); font-weight: 600; text-decoration: none !important; }
.cz-pc__shop:hover { color: var(--cz-lacquer); }
.cz-pc__verified { flex: none; display: inline-flex; align-items: center; gap: 3px; font: 600 10px/1 var(--cz-font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--cz-lacquer); white-space: nowrap; }
.cz-pc__verified::before { content: "✓"; font-weight: 700; }
.cz-pc__actions { margin-top: 12px; display: flex; align-items: center; gap: 8px; }
.cz-pc__rfq { flex: 1 1 auto; min-height: 38px; padding: 10px 10px; background: var(--cz-cream); border: 1px solid var(--cz-ink-22); border-radius: var(--cz-radius-sm); color: var(--cz-ink) !important; font: 700 12.5px/1 var(--cz-font-body); text-align: center; text-decoration: none !important; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background .15s, border-color .15s, color .15s; white-space: nowrap; }
.cz-pc__rfq:hover { background: var(--cz-lacquer); border-color: var(--cz-lacquer); color: #fff !important; }
.cz-pc__contact { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 38px; min-height: 38px; padding: 0 10px; border: 1px solid var(--cz-ink-12); border-radius: var(--cz-radius-sm); background: var(--cz-white); color: var(--cz-ink-60) !important; font: 600 12px/1 var(--cz-font-body); text-decoration: none !important; transition: color .15s, border-color .15s; }
.cz-pc__contact:hover { color: var(--cz-lacquer) !important; border-color: var(--cz-lacquer); }
.cz-pc__contact .fa { font-size: 13px; }
.cz-pc__contact-label { display: none; }

/* compact variant (home carousels / small tiles) */
.cz-pc--compact .cz-pc__body { padding: 11px 12px 12px; }
.cz-pc--compact .cz-pc__name { font-size: 13.5px; }
.cz-pc--compact .cz-pc__price { font-size: 14px; margin-top: 6px; }
.cz-pc--compact .cz-pc__meta { font-size: 11px; }
.cz-pc--compact .cz-pc__supplier { padding-top: 9px; }
.cz-pc--compact .cz-pc__actions { margin-top: 10px; }
.cz-pc--compact .cz-pc__rfq, .cz-pc--compact .cz-pc__contact { min-height: 34px; font-size: 12px; }

/* row variant (mobile results, 2g): image start, text end */
@media (max-width: 575.98px) {
  .cz-pc--list { flex-direction: row; align-items: stretch; }
  .cz-pc--list .cz-pc__media { width: 104px; aspect-ratio: auto; min-height: 120px; }
  .cz-pc--list .cz-pc__body { padding: 12px 13px 12px; }
  .cz-pc--list .cz-pc__name { font-size: 14px; min-height: 0; }
  .cz-pc--list .cz-pc__price { font-size: 15px; margin-top: 6px; }
  .cz-pc--list .cz-pc__meta { font-size: 11.5px; margin-top: 4px; }
  .cz-pc--list .cz-pc__supplier { border-top: 0; padding-top: 8px; margin-top: 0; }
  .cz-pc--list .cz-pc__logo { display: none; }
  .cz-pc--list .cz-pc__shop-line { white-space: normal; font-size: 11.5px; }
  .cz-pc--list .cz-pc__actions { margin-top: 9px; gap: 6px; }
  .cz-pc--list .cz-pc__rfq { min-height: 32px; padding: 7px 8px; font-size: 11.5px; }
  .cz-pc--list .cz-pc__contact { min-height: 32px; min-width: 32px; padding: 0 8px; }
}

/* ---------- 2. Listing page (.cz-ls) ---------------------------------- */
.cz-ls { background: var(--cz-white); }
.cz-ls__crumbs { background: var(--cz-white); border-bottom: 1px solid var(--cz-ink-12); }
.cz-ls__crumbs .cz-container { padding-block: 14px; }
.cz-ls__crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; list-style: none; margin: 0; padding: 0; font: 400 12.5px/1 var(--cz-font-body); color: var(--cz-ink-60); }
.cz-ls__crumbs li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.cz-ls__crumbs li + li::before { content: "/"; color: var(--cz-ink-40); }
.cz-ls__crumbs a { color: var(--cz-ink-60); text-decoration: none; }
.cz-ls__crumbs a:hover { color: var(--cz-lacquer); }
.cz-ls__crumbs [aria-current] { color: var(--cz-ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }

.cz-ls__wrap { display: grid; grid-template-columns: 244px minmax(0, 1fr); align-items: start; }
.cz-ls__rail { background: var(--cz-cream); border-inline-end: 1px solid var(--cz-ink-12); padding: 22px 18px 30px; display: flex; flex-direction: column; gap: 22px; align-self: stretch; }
.cz-ls__main { padding: 22px 0 30px 32px; min-width: 0; }
[dir=rtl] .cz-ls__main { padding: 22px 32px 30px 0; }
.cz-ls__sec { display: flex; flex-direction: column; gap: 0; }
.cz-ls__sec + .cz-ls__sec { padding-top: 20px; border-top: 1px dashed var(--cz-ink-22); }
.cz-ls__sec-title { font: 600 12.5px/1 var(--cz-font-body); color: var(--cz-ink-60); margin: 0 0 9px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cz-ls__eyebrow { font: 600 11px/1 var(--cz-font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--cz-ink-60); margin: 0 0 11px; }
.cz-ls__tree { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font: 400 13.5px/1.3 var(--cz-font-body); color: var(--cz-ink); }
.cz-ls__tree li { min-width: 0; }
.cz-ls__tree a { display: flex; align-items: baseline; gap: 6px; color: var(--cz-ink); text-decoration: none !important; min-width: 0; }
.cz-ls__tree a:hover { color: var(--cz-lacquer); }
.cz-ls__tree a > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cz-ls__tree .cz-ls__cnt { font: 400 12px/1 var(--cz-font-mono); color: var(--cz-ink-40); flex: none; }
.cz-ls__tree .cz-ls__cnt::before { content: "· "; }
.cz-ls__tree li.is-active > a { font-weight: 700; color: var(--cz-lacquer); }
.cz-ls__tree li.is-active > a .cz-ls__cnt { color: var(--cz-lacquer); opacity: .8; }
.cz-ls__tree .cz-ls__tree { margin-top: 7px; padding-inline-start: 12px; border-inline-start: 1px solid var(--cz-ink-12); gap: 6px; font-size: 13px; }
.cz-ls__tree li.cz-ls__more-item { display: none; }
.cz-ls__tree.is-expanded li.cz-ls__more-item { display: block; }
.cz-ls__back { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--cz-font-body); color: var(--cz-ink-60); margin-bottom: 10px; text-decoration: none !important; }
.cz-ls__back:hover { color: var(--cz-lacquer); }
[dir=rtl] .cz-ls__back .cz-ls__arrow { transform: scaleX(-1); display: inline-block; }
.cz-ls__more-btn { background: none; border: 0; padding: 6px 0 0; font: 700 12.5px/1 var(--cz-font-body); color: var(--cz-lacquer); cursor: pointer; text-align: start; }
.cz-ls__price { display: grid; grid-template-columns: 1fr auto 1fr auto; align-items: center; gap: 6px; }
.cz-ls__price .cz-input { min-height: 38px; padding: 6px 8px; font-size: 13px; font-family: var(--cz-font-mono); }
.cz-ls__price .cz-ls__to { font: 400 12px/1 var(--cz-font-body); color: var(--cz-ink-60); }
.cz-ls__price .action-search-products-by-price { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--cz-radius-sm); background: var(--cz-espresso); color: var(--cz-cream) !important; cursor: pointer; font-size: 14px; text-decoration: none !important; }
.cz-ls__price .action-search-products-by-price:hover { background: var(--cz-lacquer); }
.cz-ls__price .action-search-products-by-price .czi { color: inherit; }
[dir=rtl] .cz-ls__price .action-search-products-by-price .czi { transform: scaleX(-1); }
.cz-ls__cur { font: 400 11.5px/1 var(--cz-font-mono); color: var(--cz-ink-40); margin-top: 8px; }
.cz-ls__rail .cz-select { min-height: 40px; font-size: 13px; background-color: var(--cz-white); }
.cz-ls__checks { display: flex; flex-direction: column; gap: 8px; font: 400 13px/1.3 var(--cz-font-body); color: var(--cz-ink); }
.cz-ls__checks .cz-check { font-size: 13px; }
.cz-ls__rail-head, .cz-ls__rail-foot, .cz-ls__mbar, .cz-ls__mhead, .cz-ls__backdrop { display: none; }

/* head */
.cz-ls__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--cz-ink-12); }
.cz-ls__title { margin: 0; font: 400 28px/1.15 var(--cz-font-display); color: var(--cz-ink); letter-spacing: -.01em; text-wrap: balance; }
.cz-ls__count { margin-top: 6px; font: 400 13px/1.3 var(--cz-font-mono); color: var(--cz-ink-60); }
.cz-ls__tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cz-ls__seg { display: inline-flex; border: 1px solid var(--cz-ink-22); border-radius: var(--cz-radius-sm); overflow: hidden; font: 600 12.5px/1 var(--cz-font-body); }
.cz-ls__seg a { padding: 9px 14px; color: var(--cz-ink-60); text-decoration: none !important; background: var(--cz-white); transition: background .15s, color .15s; }
.cz-ls__seg a:hover { color: var(--cz-ink); background: var(--cz-cream); }
.cz-ls__seg a.is-active { background: var(--cz-espresso); color: var(--cz-cream); }
.cz-ls__sort { position: relative; display: inline-flex; align-items: center; }
.cz-ls__sort label { margin: 0; position: absolute; inset-inline-start: 12px; font: 600 12.5px/1 var(--cz-font-body); color: var(--cz-ink); pointer-events: none; }
.cz-ls__sort select { appearance: none; -webkit-appearance: none; min-height: 36px; padding: 8px 34px 8px 12px; border: 1px solid var(--cz-ink-22); border-radius: var(--cz-radius-sm); background: var(--cz-white) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23241A14' stroke-width='1.6' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center; font: 600 12.5px/1 var(--cz-font-body); color: var(--cz-ink); cursor: pointer; }
[dir=rtl] .cz-ls__sort select { padding: 8px 12px 8px 34px; background-position: left 12px center; }
.cz-ls__sort select:focus { outline: none; border-color: var(--cz-lacquer); box-shadow: 0 0 0 3px rgba(158, 43, 37, .12); }
.cz-ls__chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.cz-ls__chips:empty { display: none; }
.cz-ls__chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 11px; border-radius: 999px; background: var(--cz-espresso); color: var(--cz-cream); font: 600 11.5px/1 var(--cz-font-body); text-decoration: none !important; white-space: nowrap; max-width: 100%; }
.cz-ls__chip span { overflow: hidden; text-overflow: ellipsis; }
.cz-ls__chip i, .cz-ls__chip .cz-ls__x { font-style: normal; font-size: 13px; line-height: 1; opacity: .75; }
.cz-ls__chip:hover { background: var(--cz-lacquer); color: #fff; }
.cz-ls__chip--clear { background: transparent; color: var(--cz-ink-60); border: 1px solid var(--cz-ink-22); }
.cz-ls__chip--clear:hover { background: var(--cz-white); color: var(--cz-lacquer); border-color: var(--cz-lacquer); }

/* grid */
#ajax-products { display: block; }
.cz-pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.cz-pgrid > .cz-pc, .cz-pgrid > .cz-promo { min-width: 0; }
#ajax-products.cz-ls--verified-only .cz-pc[data-verified="0"] { display: none; }
.cz-promo { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 22px; background: var(--cz-cream); border: 1px dashed var(--cz-ink-40); border-radius: var(--cz-radius-sm); min-height: 220px; }
.cz-promo__title { margin: 0; font: 400 20px/1.25 var(--cz-font-display); color: var(--cz-ink); }
.cz-promo__text { margin: 0; font: 400 13.5px/1.55 var(--cz-font-body); color: var(--cz-ink-60); }
.cz-promo .cz-btn { align-self: stretch; }
.cz-ls__pager { display: flex; justify-content: center; margin-top: 24px; }
.cz-ls__pager .pagination { margin: 0; flex-wrap: wrap; justify-content: center; gap: 2px; }
.cz-ls__pager .page-link { padding: 9px 13px; font: 600 13px/1 var(--cz-font-body); }
.cz-ls__pager .pagination .page-item.active .page-link { background: var(--cz-espresso); border-color: var(--cz-espresso); color: var(--cz-cream); }
.cz-ls__empty { grid-column: 1 / -1; text-align: center; padding: 44px 20px 30px; }
.cz-ls__empty img { width: 72px; opacity: .6; margin-bottom: 14px; }
.cz-ls__empty .cz-h3 { margin-bottom: 6px; }
.cz-ls__empty p { color: var(--cz-ink-60); margin: 0; }
.cz-ls__empty + .cz-promo { grid-column: 1 / -1; max-width: 520px; margin-inline: auto; width: 100%; }

/* tablet */
@media (max-width: 1199.98px) { .cz-ls__wrap { grid-template-columns: 220px minmax(0, 1fr); } .cz-ls__main { padding-inline-start: 24px; } [dir=rtl] .cz-ls__main { padding-inline-start: 0; padding-inline-end: 24px; } .cz-pgrid { gap: 12px; } }

/* mobile: rail -> offcanvas, sticky filter/sort bar, 2-up then rows */
@media (max-width: 991.98px) {
  .cz-ls__wrap { grid-template-columns: minmax(0, 1fr); }
  .cz-ls__main { padding: 0 0 28px; }
  [dir=rtl] .cz-ls__main { padding: 0 0 28px; }
  .cz-ls__crumbs { display: none; }
  .cz-ls__head { display: none; }
  .cz-ls__mhead { display: flex; align-items: center; gap: 12px; background: var(--cz-espresso); color: var(--cz-cream); padding: 14px 16px; }
  .cz-ls__mhead .cz-ls__mback { color: var(--cz-cream); font-size: 18px; line-height: 1; text-decoration: none; flex: none; width: 28px; }
  [dir=rtl] .cz-ls__mhead .cz-ls__mback { transform: scaleX(-1); }
  .cz-ls__mhead .cz-ls__mtitle { margin: 0; font: 700 14.5px/1.2 var(--cz-font-body); color: var(--cz-cream); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cz-ls__mhead .cz-ls__mcount { margin-top: 3px; font: 400 11px/1 var(--cz-font-mono); color: var(--cz-cream-60); }
  .cz-ls__mhead > div { min-width: 0; flex: 1 1 auto; }
  .cz-ls__mhead .cz-ls__mfilter { flex: none; background: none; border: 0; padding: 8px 0 8px 8px; font: 600 12.5px/1 var(--cz-font-body); color: var(--cz-brass); cursor: pointer; }
  .cz-ls__mbar { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--cz-cream); border-bottom: 1px solid var(--cz-ink-12); position: sticky; top: var(--cz-sticky-top, var(--cz-header-h)); z-index: 1020; overflow: hidden; }
  .cz-ls__mbar .cz-ls__mbtn { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 13px; border: 1px solid var(--cz-ink-22); border-radius: 999px; background: var(--cz-white); font: 600 12.5px/1 var(--cz-font-body); color: var(--cz-ink); cursor: pointer; }
  .cz-ls__mbar .cz-ls__mbtn .cz-ls__mcnt { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--cz-lacquer); color: #fff; font: 700 10.5px/1 var(--cz-font-mono); }
  .cz-ls__mbar .cz-ls__mbtn .cz-ls__mcnt:empty { display: none; }
  .cz-ls__mbar .cz-ls__sort { flex: none; }
  .cz-ls__mbar .cz-ls__sort select { min-height: 38px; border-radius: 999px; padding-inline-start: 14px; }
  .cz-ls__mbar .cz-ls__mchips { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; flex: 1 1 auto; min-width: 0; }
  .cz-ls__mbar .cz-ls__mchips::-webkit-scrollbar { display: none; }
  .cz-ls__mbar .cz-ls__mchips .cz-ls__chip { flex: none; max-width: none; }
  .cz-ls__mbar .cz-ls__mchips:empty { display: none; }
  .cz-ls__chips { display: none; }
  .cz-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 16px 0; }
  .cz-ls__pager { margin: 22px 16px 0; }
  .cz-promo { padding: 16px; min-height: 0; }
  .cz-promo__title { font-size: 19px; }
  .cz-promo__text { font-size: 13px; }

  /* offcanvas rail */
  .cz-ls__rail { position: fixed; top: 0; bottom: 0; inset-inline-start: 0; width: min(86vw, 360px); z-index: 1055; border-inline-end: 0; box-shadow: var(--cz-shadow-lg); overflow-y: auto; padding: 0 18px 90px; gap: 20px; transform: translateX(-100%); transition: transform .25s ease; visibility: hidden; }
  [dir=rtl] .cz-ls__rail { transform: translateX(100%); }
  body.cz-ls-filters-open .cz-ls__rail { transform: none; visibility: visible; }
  body.cz-ls-filters-open { overflow: hidden; }
  body.cz-no-anim .cz-ls__rail { transition: none; }
  .cz-ls__rail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: 0; z-index: 2; margin-inline: -18px; padding: 14px 18px; background: var(--cz-espresso); color: var(--cz-cream); }
  .cz-ls__rail-head strong { font: 700 15px/1 var(--cz-font-body); color: var(--cz-cream); }
  .cz-ls__rail-head .cz-ls__rail-close { background: none; border: 0; color: var(--cz-cream); font-size: 22px; line-height: 1; padding: 4px 6px; cursor: pointer; }
  .cz-ls__rail-foot { display: flex; gap: 10px; position: fixed; bottom: 0; inset-inline-start: 0; width: min(86vw, 360px); z-index: 1056; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--cz-white); border-top: 1px solid var(--cz-ink-12); transform: translateX(-100%); transition: transform .25s ease; visibility: hidden; }
  [dir=rtl] .cz-ls__rail-foot { transform: translateX(100%); }
  body.cz-ls-filters-open .cz-ls__rail-foot { transform: none; visibility: visible; }
  .cz-ls__rail-foot .cz-btn { flex: 1 1 auto; }
  .cz-ls__backdrop { display: block; position: fixed; inset: 0; z-index: 1050; background: rgba(36, 26, 20, .45); opacity: 0; pointer-events: none; transition: opacity .25s; }
  body.cz-ls-filters-open .cz-ls__backdrop { opacity: 1; pointer-events: auto; }
  .cz-ls__sec--msort { display: flex; }
}
@media (min-width: 992px) { .cz-ls__sec--msort { display: none !important; } }
@media (max-width: 575.98px) {
  .cz-pgrid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cz-ls__mbar { padding-inline: 12px; }
  .cz-pgrid, .cz-ls__pager { margin-inline: 12px; }
}

/* ---------- 3. Factory cards (/vendors · .cz-fc) ------------------------ */
.cz-fcpage { padding-block: 30px 48px; }
.cz-fcpage__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--cz-ink-12); margin-bottom: 22px; }
.cz-fcpage__title { margin: 0; font: 400 32px/1.1 var(--cz-font-display); color: var(--cz-ink); letter-spacing: -.01em; }
.cz-fcpage__count { margin-top: 6px; font: 400 13px/1.3 var(--cz-font-mono); color: var(--cz-ink-60); }
.cz-fcpage__tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cz-fcpage__search { display: flex; align-items: stretch; height: 40px; border: 1px solid var(--cz-ink-22); border-radius: var(--cz-radius-sm); background: var(--cz-white); overflow: hidden; min-width: 260px; }
.cz-fcpage__search input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; padding: 0 12px; font: 400 13.5px/1 var(--cz-font-body); color: var(--cz-ink); outline: none; }
.cz-fcpage__search button { border: 0; background: var(--cz-espresso); color: var(--cz-cream); padding: 0 16px; font: 700 13px/1 var(--cz-font-body); cursor: pointer; }
.cz-fcpage__search button:hover { background: var(--cz-lacquer); }
.cz-fcgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cz-fc { display: flex; flex-direction: column; background: var(--cz-white); border: 1px solid var(--cz-ink-12); border-radius: var(--cz-radius-sm); overflow: hidden; transition: box-shadow .15s, border-color .15s; min-width: 0; }
.cz-fc:hover { box-shadow: var(--cz-shadow); border-color: var(--cz-ink-22); }
.cz-fc__band { height: 8px; background: repeating-conic-gradient(from -90deg at 50% 108%, var(--cz-brass) 0deg 2.2deg, var(--cz-espresso) 2.2deg 11.25deg); opacity: .9; }
.cz-fc__body { padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; }
.cz-fc__top { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.cz-fc__logo { width: 56px; height: 56px; flex: none; border-radius: var(--cz-radius-sm); border: 1px solid var(--cz-ink-12); background: var(--cz-cream); object-fit: contain; padding: 3px; }
.cz-fc__name { margin: 0; font: 700 16px/1.25 var(--cz-font-body); color: var(--cz-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cz-fc__name a { color: inherit; text-decoration: none !important; }
.cz-fc__name a:hover { color: var(--cz-lacquer); }
.cz-fc__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cz-fc__loc { font: 400 13px/1.4 var(--cz-font-body); color: var(--cz-ink-60); display: flex; flex-wrap: wrap; gap: 2px 6px; }
.cz-fc__loc .cz-fc__dot { color: var(--cz-ink-40); }
.cz-fc__cats { display: flex; flex-wrap: wrap; gap: 6px; }
.cz-fc__cats .cz-tag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cz-fc__stats { display: flex; gap: 18px; padding-top: 10px; border-top: 1px dashed var(--cz-ink-22); margin-top: auto; }
.cz-fc__stat { display: flex; flex-direction: column; gap: 2px; }
.cz-fc__stat b { font: 600 16px/1.1 var(--cz-font-mono); color: var(--cz-ink); }
.cz-fc__stat span { font: 400 11.5px/1.2 var(--cz-font-body); color: var(--cz-ink-60); }
.cz-fc__actions { display: flex; gap: 8px; padding: 12px 16px 16px; }
.cz-fc__actions .cz-btn { flex: 1 1 0; padding-inline: 10px; }
.cz-fc__closed { display: inline-flex; padding: 3px 8px; border-radius: var(--cz-radius-sm); background: var(--cz-danger-bg); color: var(--cz-danger); font: 700 10.5px/1.3 var(--cz-font-body); letter-spacing: .06em; text-transform: uppercase; }
.cz-fcpage__pager { display: flex; justify-content: center; margin-top: 28px; }
.cz-fcpage__pager .pagination { margin: 0; flex-wrap: wrap; justify-content: center; }
@media (max-width: 991.98px) { .cz-fcgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .cz-fcpage__title { font-size: 26px; } }
@media (max-width: 575.98px) { .cz-fcpage { padding-block: 20px 36px; } .cz-fcgrid { grid-template-columns: minmax(0, 1fr); } .cz-fcpage__search { min-width: 0; width: 100%; } .cz-fcpage__tools { width: 100%; } .cz-fcpage__tools .cz-ls__sort { flex: 1 1 auto; } .cz-fcpage__tools .cz-ls__sort select { width: 100%; } }

/* ---------- 4. Categories page (.cz-cat) ------------------------------ */
.cz-catpage { padding-block: 30px 48px; }
.cz-catpage__head { margin-bottom: 22px; }
.cz-catpage__title { margin: 0; font: 400 32px/1.1 var(--cz-font-display); color: var(--cz-ink); }
.cz-catpage__sub { margin: 6px 0 0; font: 400 14px/1.5 var(--cz-font-body); color: var(--cz-ink-60); }
.cz-catpage__wrap { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; align-items: start; }
.cz-cat__list { list-style: none; margin: 0; padding: 0; background: var(--cz-cream); border: 1px solid var(--cz-ink-12); border-radius: var(--cz-radius-sm); overflow: hidden; }
.cz-cat__item { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--cz-ink-08); background: transparent; cursor: pointer; font: 600 13.5px/1.3 var(--cz-font-body); color: var(--cz-ink); transition: background .15s, color .15s; margin: 0; }
.cz-cat__item:last-child { border-bottom: 0; }
.cz-cat__item:hover { background: var(--cz-white); color: var(--cz-lacquer); }
.cz-cat__item.active { background: var(--cz-espresso); color: var(--cz-cream); }
.cz-cat__item img { width: 26px; height: 26px; object-fit: contain; border-radius: 3px; background: var(--cz-white); flex: none; padding: 2px; }
.cz-cat__item .cz-cat__cnt { margin-inline-start: auto; font: 400 11.5px/1 var(--cz-font-mono); color: var(--cz-ink-40); flex: none; }
.cz-cat__item.active .cz-cat__cnt { color: var(--cz-cream-60); }
.cz-cat__panel { background: var(--cz-white); border: 1px solid var(--cz-ink-12); border-radius: var(--cz-radius-sm); padding: 8px 20px 20px; min-height: 320px; }
.cz-cat__panel .row { margin: 0 -10px; }
.cz-cat__panel .col-md-3 { padding: 0 10px; }
.cz-cat__panel label.category-list-in-header { display: block; border: 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; font: 700 14px/1.3 var(--cz-font-body); color: var(--cz-ink); cursor: pointer; margin: 0 0 8px; text-align: start !important; }
.cz-cat__panel label.category-list-in-header:hover { color: var(--cz-lacquer); }
.cz-cat__panel .list-group-item { border: 0; padding: 4px 0; font: 400 13px/1.4 var(--cz-font-body); color: var(--cz-ink-60); background: transparent; }
.cz-cat__panel .list-group-item:hover { color: var(--cz-lacquer); }
.cz-cat__panel .btn--primary, .cz-cat__panel .btn { background: var(--cz-lacquer); color: #fff; border-color: var(--cz-lacquer); }
.cz-cat__panel > .row > label { color: var(--cz-ink-60); font-size: 14px; }
@media (max-width: 991.98px) { .cz-catpage__wrap { grid-template-columns: minmax(0, 1fr); gap: 16px; } .cz-catpage__title { font-size: 26px; } .cz-cat__panel .col-md-3 { margin-top: 16px !important; } }

/* ---------- 5. Brands page (.cz-br) ----------------------------------- */
.cz-brpage { padding-block: 30px 48px; }
.cz-brgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.cz-brgrid a { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; background: var(--cz-white); border: 1px solid var(--cz-ink-12); border-radius: var(--cz-radius-sm); padding: 14px; transition: box-shadow .15s, border-color .15s; }
.cz-brgrid a:hover { box-shadow: var(--cz-shadow); border-color: var(--cz-ink-22); }
.cz-brgrid img { max-height: 100%; object-fit: contain; }
@media (max-width: 991.98px) { .cz-brgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .cz-brgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }