/*
 * csavarpolc téma — KATEGÓRIAOLDAL (themes/csavarpolc/templates/catalog/category.php) + a közös termékkártya-
 * kiegészítések (catalog/partials/category_*), amelyeket a nyitóoldal is használ (ő is betölti ezt a fájlt).
 * ASZTAL (> 760 px): a C „Rendezett polc” terv — kobalt fej, fiókok, szűrősáv (.c-filter-bar), .c-product-card rács.
 * MOBIL (≤ 760 px, megrendelői döntés 2026-11-02): kompakt fej (cím + 2 soros leírás „Tovább”-bal, a számok egy kis
 * sorban), alkategória chip-sor, ragadós „Szűrők (n) · Rendezés” sáv, alulról felcsúszó panelek (.catalog-sheet),
 * törölhető aktív szűrő-chipek — a lista az első képernyő alján már látszik.
 * A theme.css a modul-/oldal-CSS UTÁN töltődik: komponens-felülírás csak nagyobb fajlagossággal (oldal-osztállyal).
 * Csak a téma tokenjeire (--cp-*) hivatkozik. Árnyék NINCS (megrendelői döntés): elválasztás háttérrel / 1 px vonallal.
 */

/* ---------------------------------------------------------------- közös: rács-elemek, kártyák */
.page-home p.c-eyebrow, .page-category p.c-eyebrow, .page-home p.c-hero__eyebrow { margin: 0; }
.l-products > li, .l-shelf > li { display: flex; min-width: 0; }
.l-products > li > .c-product-card, .l-shelf > li > .c-category-card { flex: 1; min-width: 0; }

/* „Családfotó”: a fotó a család egy másik méretét mutatja (flags: image_not_own) — a pontos méret a kártya szövegében */
.catalog-tray-note {
  position: absolute; left: 8px; bottom: 8px; z-index: 1; padding: 3px 8px; border-radius: var(--cp-r-pill);
  background: rgba(255, 255, 255, .9); box-shadow: 0 0 0 1px rgba(12, 22, 71, .08); color: var(--cp-tinta-2);
  font-size: 11px; font-weight: 750; line-height: 1.25; letter-spacing: .01em; white-space: nowrap; pointer-events: none;
}
.c-product-card .c-price--sm.is-muted { font-size: 20px; }
.c-product-card .c-price__pack { white-space: normal; }
.catalog-family-card .c-product-card__badges .c-badge--white { height: 26px; }
/* asztalon a családkártya két jelvénye („158 méret”, „155 raktáron”) a fotó fölött egy sorban marad — a második sor
   a fotóra csúszna (mobilon a jelvények a fotó mellett, a szöveg-oszlopban állnak: ott tördelhetnek) */
@media (min-width: 761px) {
  .catalog-family-card .c-product-card__badges { flex-wrap: nowrap; }
  .catalog-family-card .c-product-card__badges > * { flex: none; }
}
.catalog-family-card__cta { height: 46px; }
/* a téma app.js-e a „A kiszerelés … igazítottuk.” jelzést a léptető (.c-qty) után szúrja be: saját sorba kerül, a
   léptető és a kosár gomb mérete nem változik */
.c-product-card__actions { flex-wrap: wrap; }
.c-product-card__actions > .c-qty-note { order: 3; flex: 1 0 100%; margin: 0 2px; line-height: 1.35; }
.catalog-family-card__cta .c-icon { color: #fff; }

/* ---------------------------------------------------------------- fej (kobalt) */
.catalog-cat-head {
  background: radial-gradient(900px 520px at 0% 0%, var(--cp-kobalt-fenyes) 0%, rgba(53, 87, 242, 0) 70%),
              radial-gradient(700px 500px at 100% 100%, var(--cp-kobalt-700) 0%, rgba(23, 51, 181, 0) 70%), var(--cp-kobalt);
  color: #fff; border-radius: var(--cp-r-xxl); padding: 22px; display: grid; grid-template-columns: 300px minmax(0, 1fr);
  gap: 34px; align-items: center; overflow: hidden;
}
.catalog-cat-head :focus-visible { outline-color: var(--cp-barack); }
.catalog-cat-head__media { aspect-ratio: 1 / 1; border-radius: 26px; }
.catalog-cat-head__media > img { padding: 8%; }
.catalog-cat-head__media > .c-icon { color: var(--cp-kobalt); }
.catalog-cat-head__text { padding: 14px 26px 14px 0; min-width: 0; }
.catalog-cat-head__eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--cp-barack);
  font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2;
}
.catalog-cat-head__eyebrow .c-icon { width: 18px; height: 18px; --ic-ac: #fff; }
.catalog-cat-head__title { font-size: 58px; line-height: .98; margin: 12px 0 0; color: #fff; font-stretch: 90%; }
.catalog-cat-head__badge { display: none; }
.catalog-cat-head__leadwrap { position: relative; }
.catalog-cat-head__more-cb {
  position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; opacity: 0;
}
.catalog-cat-head__more { display: none; }
.catalog-cat-head__lead { margin-top: 16px; max-width: 780px; color: var(--cp-on-kobalt); font-size: 16px; line-height: 1.55; font-weight: 500; }
.catalog-cat-head__lead p { margin: 0 0 .6em; }
.catalog-cat-head__lead > :last-child { margin-bottom: 0; }
.catalog-cat-head__lead a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.catalog-cat-head__stats { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.catalog-cat-head__stats li {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 10px 16px; border-radius: 16px;
  background: var(--cp-krem); color: var(--cp-ejkek); box-shadow: inset 0 0 0 1.5px var(--cp-vonal-2);
}
.catalog-cat-head__stats b { font-family: var(--cp-f-disp); font-stretch: 90%; font-size: 24px; font-weight: 800; letter-spacing: -.012em; line-height: 1; white-space: nowrap; }
.catalog-cat-head__stats span { font-size: 13px; font-weight: 700; color: var(--cp-tinta-2); }

/* ---------------------------------------------------------------- alkategória-fiókok */
.catalog-cat-subs { margin-top: 26px; }
.catalog-cat-subs__title {
  font-family: var(--cp-f-ui); font-stretch: 100%; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cp-tinta-3); margin: 0 0 12px 4px; line-height: 1.2;
}

/* ---------------------------------------------------------------- lista: horgony, régiók */
.catalog-cat-list { margin-top: 28px; scroll-margin-top: 12px; }
.catalog-cat [hidden] { display: none !important; }
.catalog-cat-results { transition: opacity .15s ease; }
.catalog-cat-results[aria-busy="true"] { opacity: .5; }
.catalog-cat-mbar { display: none; }

/* ---------------------------------------------------------------- szűrősáv (asztali) */
.catalog-cat-bar { margin: 0; }
.catalog-cat-bar__size { flex-wrap: wrap; }
.catalog-cat-bar__size .c-chip-row { gap: 6px; }
.catalog-cat-bar__drops { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.catalog-cat-bar__stock em, .catalog-cat-drawer .c-switch em { font-style: normal; color: var(--cp-tinta-3); font-weight: 650; }
.catalog-cat-bar .c-filter-bar__result { margin: 0 0 0 auto; }

.catalog-cat-drop { position: relative; }
.catalog-cat-drop__btn {
  list-style: none; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px 0 14px; border-radius: var(--cp-r-pill);
  background: var(--cp-krem); color: var(--cp-tinta-2); box-shadow: inset 0 0 0 1.5px var(--cp-vonal); font-weight: 750; font-size: 13.5px;
  white-space: nowrap; cursor: pointer; user-select: none; transition: background var(--transition);
}
.catalog-cat-drop__btn::-webkit-details-marker { display: none; }
.catalog-cat-drop__btn::marker { content: ""; }
.catalog-cat-drop__btn .c-icon { width: 16px; height: 16px; color: var(--cp-kobalt); --ic-sw: 2.2; transition: transform .2s ease; }
.catalog-cat-drop__btn:hover { background: var(--cp-kobalt-50); }
.catalog-cat-drop[open] > .catalog-cat-drop__btn .c-icon { transform: rotate(180deg); }
.catalog-cat-drop.is-active > .catalog-cat-drop__btn, .catalog-cat-drop[open] > .catalog-cat-drop__btn { background: var(--cp-kobalt-50); color: var(--cp-kobalt-800); box-shadow: none; }
.catalog-cat-drop__n {
  font-style: normal; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--cp-r-pill); background: var(--cp-kobalt); color: #fff;
  font-size: 11.5px; font-weight: 800; display: inline-grid; place-items: center; line-height: 1;
}
.catalog-cat-drop__panel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; width: max-content; min-width: 260px; max-width: min(400px, calc(100vw - 48px));
  background: var(--cp-papir); border-radius: 20px; box-shadow: 0 0 0 1px var(--cp-vonal); padding: 14px;
}
.catalog-cat-drop__panel--wide { max-width: min(560px, calc(100vw - 48px)); }
.catalog-cat-drop__set { border: 0; margin: 0; padding: 0; min-width: 0; }
.catalog-cat-drop__legend {
  padding: 0; margin: 0 0 10px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-tinta-3);
}
.catalog-cat-drop__chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 300px; overflow-y: auto; padding: 3px; overscroll-behavior: contain; }
.catalog-cat-drop__sub { margin: 12px 0 8px; font-size: 12.5px; font-weight: 650; color: var(--cp-tinta-3); }
.catalog-cat-drop__foot { display: flex; justify-content: flex-end; align-items: center; gap: 14px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--cp-vonal); }
.catalog-cat-drop__foot:not(:has(> :not([hidden]))) { display: none; }

.catalog-cat-range { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.catalog-cat-range__field { display: grid; gap: 3px; font-size: 11.5px; font-weight: 750; color: var(--cp-tinta-3); }
.catalog-cat-range .c-field__input { width: 116px; height: 42px; border-radius: 12px; font-size: 14.5px; }
.catalog-cat-range__dash { padding-bottom: 10px; color: var(--cp-tinta-3); font-weight: 700; }
.catalog-cat-range__unit { padding-bottom: 11px; font-weight: 750; font-size: 13.5px; color: var(--cp-tinta-2); }

/* ---------------------------------------------------------------- eszköztár, aktív szűrők */
.catalog-cat-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 22px 0 16px; }
.catalog-cat-toolbar__count { margin: 0 auto 0 0; font-size: 14.5px; font-weight: 650; color: var(--cp-tinta-2); outline: none; }
.catalog-cat-toolbar__count b { color: var(--cp-tinta); font-weight: 800; }
.catalog-cat-toolbar__views .c-segmented__btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.catalog-cat-sort { display: flex; align-items: center; gap: 10px; margin: 0; }
.catalog-cat-sort__label { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-tinta-3); white-space: nowrap; }
.page-category .catalog-cat-sort__select { width: auto; height: 46px; border-radius: var(--cp-r-pill); padding-left: 18px; font-weight: 750; font-size: 14px; }

.catalog-cat-active { margin: 0 0 16px; }
.catalog-cat-active__list { list-style: none; margin: 0; padding: 0; gap: 6px 8px; }
.page-category .catalog-cat-active .c-chip .c-icon { width: 14px; height: 14px; color: #fff; --ic-sw: 2.4; }
.catalog-cat-active__clear-item { margin-left: 6px; }
.catalog-cat-active__clear { font-size: 13.5px; }

/* ---------------------------------------------------------------- üres fiók */
.catalog-cat-empty {
  display: flex; gap: 24px; align-items: flex-start; max-width: 880px; padding: 36px 40px; border-radius: var(--cp-r-xl);
  background: var(--cp-papir); box-shadow: none;
}
.catalog-cat-empty__icon {
  width: 72px; height: 72px; flex: none; border-radius: 20px; display: grid; place-items: center; color: var(--cp-on-kobalt-2);
  background: #0A1B66; box-shadow: none;
}
.catalog-cat-empty__icon .c-icon { width: 34px; height: 34px; }
.catalog-cat-empty__title { font-size: 40px; margin: 0; }
.catalog-cat-empty__lead { margin: 12px 0 0; max-width: 580px; color: var(--cp-tinta-2); font-size: 16px; }
.catalog-cat-empty__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* ---------------------------------------------------------------- panelek: szűrők + rendezés (c-drawer) */
.catalog-sheet__in { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.catalog-cat-drawer__form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.catalog-sheet .c-drawer__title { display: flex; align-items: center; gap: 10px; }
.catalog-sheet .c-drawer__title .c-count { background: var(--cp-kobalt); box-shadow: none; }
.catalog-cat-drawer__set { border: 0; margin: 0 0 8px; padding: 0; min-width: 0; }
.catalog-cat-drawer__set > legend { padding: 0; }
.catalog-cat-drawer .catalog-cat-drop__chips { max-height: none; overflow: visible; padding: 2px 0; }
.catalog-cat-drawer .catalog-cat-range { margin-top: 10px; }
.catalog-cat-drawer__more { margin-top: 8px; }
.catalog-cat-drawer__more > summary { cursor: pointer; font-weight: 750; font-size: 14px; color: var(--cp-kobalt); margin: 4px 2px 8px; }
.c-filter-chip.is-empty { opacity: .5; }
.catalog-sheet__foot { display: flex; gap: 10px; align-items: center; }
.catalog-sheet__go { flex: 1; min-width: 0; }
.catalog-sheet__clear { flex: none; }
.catalog-sheet__n { font-weight: 650; opacity: .92; transition: opacity .15s; }
.catalog-sheet__n.is-loading { opacity: .45; }

.catalog-sort-sheet__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.catalog-sort-sheet__opt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 50px; padding: 0 14px; border-radius: 14px;
  color: var(--cp-tinta); font-weight: 700; font-size: 15.5px; text-decoration: none;
}
.catalog-sort-sheet__opt:hover { background: var(--cp-krem); color: var(--cp-tinta); }
.catalog-sort-sheet__opt.is-active { background: var(--cp-kobalt-50); color: var(--cp-kobalt-800); box-shadow: inset 0 0 0 2px var(--cp-kobalt); }
.catalog-sort-sheet__opt .c-icon { width: 20px; height: 20px; color: var(--cp-kobalt); --ic-sw: 2.6; }

/* ---------------------------------------------------------------- reszponzív */
@media (max-width: 1180px) {
  .catalog-cat-head { grid-template-columns: 220px minmax(0, 1fr); gap: 26px; }
  .catalog-cat-head__title { font-size: 46px; }
  .catalog-cat-bar .c-filter-bar__result { flex-basis: 100%; margin: 0; }
}

@media (min-width: 761px) and (max-width: 900px) {
  /* 4 oszlopban a fiók-címkék egyszavas hosszú nevei („Szigetelésrögzítők”) nem férnének el: 3 oszlop
     (a theme.css a 4 oszlopos szabályt e fájl UTÁN tölti — ezért az oldal-osztály) */
  .page-home .l-shelf, .page-category .l-shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* 3 oszlopos termékrácsban a családkártya jelvényei kisebbek, hogy egy sorban elférjenek */
  .catalog-family-card .c-product-card__badges { gap: 4px; }
  .catalog-family-card .c-product-card__badges .c-badge, .catalog-family-card .c-product-card__badges .c-stock { height: 24px; font-size: 11.5px; padding: 0 8px; gap: 5px; }
}

@media (max-width: 760px) {
  /* ---- kompakt fej: cím + 2 soros leírás („Tovább”) + a számok egy kis sorban; nincs kobalt doboz, nincs fotó */
  .page-category .catalog-cat-head { display: block; background: none; color: var(--cp-tinta); border-radius: 0; padding: 0; margin: 2px 0 0; overflow: visible; }
  .catalog-cat-head :focus-visible { outline-color: var(--cp-fokusz); }
  .page-category .catalog-cat-head__media, .catalog-cat-head__eyebrow { display: none; }
  .catalog-cat-head__text { padding: 0; }
  .catalog-cat-head__title {
    display: flex; align-items: center; gap: 10px; font-size: 26px; line-height: 1.06; margin: 0; color: var(--cp-tinta); letter-spacing: -.01em;
  }
  .catalog-cat-head__badge {
    display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 11px; background: var(--cp-kobalt); color: #fff;
  }
  .catalog-cat-head__badge .c-icon { width: 20px; height: 20px; --ic-ac: var(--cp-barack); }
  .catalog-cat-head__leadwrap { margin-top: 6px; }
  .catalog-cat-head__lead { margin: 0; max-width: none; color: var(--cp-tinta-2); font-size: 14px; line-height: 1.45; font-weight: 500; }
  .catalog-cat-head__lead a { color: var(--cp-kobalt); }
  .catalog-cat-head__lead.is-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  .catalog-cat-head__lead.is-clamp p, .catalog-cat-head__lead.is-clamp ul, .catalog-cat-head__lead.is-clamp ol, .catalog-cat-head__lead.is-clamp li { display: inline; margin: 0; padding: 0; }
  .catalog-cat-head__lead.is-clamp p + p::before { content: " "; }
  .catalog-cat-head__more {
    display: block; position: absolute; right: 0; bottom: 0; padding-left: 36px; cursor: pointer; color: var(--cp-kobalt); font-weight: 750;
    font-size: 14px; line-height: 1.45; background: linear-gradient(90deg, rgba(246, 242, 234, 0), var(--cp-krem) 30px);
  }
  .catalog-cat-head__more-on { display: none; }
  .catalog-cat-head__more-cb:checked ~ .catalog-cat-head__lead.is-clamp { display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; }
  .catalog-cat-head__more-cb:checked ~ .catalog-cat-head__lead.is-clamp p { display: block; margin: 0 0 .5em; }
  .catalog-cat-head__more-cb:checked ~ .catalog-cat-head__lead.is-clamp p + p::before { content: none; }
  .catalog-cat-head__more-cb:checked ~ .catalog-cat-head__more { position: static; display: inline-block; padding: 0; background: none; margin-top: 2px; }
  .catalog-cat-head__more-cb:checked ~ .catalog-cat-head__more .catalog-cat-head__more-off { display: none; }
  .catalog-cat-head__more-cb:checked ~ .catalog-cat-head__more .catalog-cat-head__more-on { display: inline; }
  .catalog-cat-head__more-cb:focus-visible ~ .catalog-cat-head__more { outline: 3px solid var(--cp-fokusz); outline-offset: 2px; border-radius: 4px; }
  .catalog-cat-head__stats { margin: 6px 0 0; gap: 0; row-gap: 2px; }
  .page-category .catalog-cat-head__stats li { padding: 0; gap: 3px; background: none; box-shadow: none; border-radius: 0; color: var(--cp-tinta-2); white-space: nowrap; }
  .page-category .catalog-cat-head__stats li.catalog-cat-head__stat-price { gap: 0; }
  .catalog-cat-head__stats li + li::before { content: "·"; margin: 0 5px; color: var(--cp-tinta-3); font-weight: 800; }
  .catalog-cat-head__stats b { font-family: var(--cp-f-ui); font-stretch: 100%; font-size: 12px; font-weight: 800; letter-spacing: 0; color: var(--cp-tinta); }
  .catalog-cat-head__stats span { font-size: 12px; font-weight: 600; }

  /* ---- alkategóriák: egy vízszintesen görgethető chip-sor (ikon + név + darabszám) */
  .catalog-cat-subs { margin: 10px calc(var(--gutter) * -1) 0; }
  .catalog-cat-subs__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; margin: 0; }
  .page-category .catalog-cat-subs .l-shelf {
    display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 2px var(--gutter);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
  }
  .page-category .catalog-cat-subs .l-shelf::-webkit-scrollbar { display: none; }
  .page-category .catalog-cat-subs .l-shelf > li { flex: none; }
  .page-category .catalog-cat-subs .c-category-card {
    flex-direction: row; align-items: center; gap: 7px; height: 40px; padding: 0 13px 0 4px; border-radius: var(--cp-r-pill);
    background: var(--cp-papir); box-shadow: inset 0 0 0 1.5px var(--cp-vonal); white-space: nowrap;
  }
  .page-category .catalog-cat-subs .c-category-card:hover { box-shadow: inset 0 0 0 1.5px var(--cp-kobalt-200); }
  .page-category .catalog-cat-subs .c-category-card .c-category-card__media { display: none; }
  .page-category .catalog-cat-subs .c-category-card .c-category-card__label { margin: 0; padding: 0; gap: 7px; align-items: center; background: none; box-shadow: none; }
  .page-category .catalog-cat-subs .c-category-card .c-category-card__label .c-icon { width: 32px; height: 32px; padding: 6px; border-radius: 50%; background: var(--cp-kobalt-50); }
  .page-category .catalog-cat-subs .c-category-card .c-category-card__label b { display: block; height: auto; max-height: none; margin: 0; font-size: 13.5px; line-height: 1.2; white-space: nowrap; -webkit-line-clamp: unset; }
  .page-category .catalog-cat-subs .c-category-card .c-category-card__foot { margin: 0; }
  .page-category .catalog-cat-subs .c-category-card .c-category-card__count { font-size: 12.5px; }
  .page-category .catalog-cat-subs .c-category-card .c-category-card__count b { color: var(--cp-tinta-3); font-weight: 750; }
  .catalog-cat-subs__unit { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

  /* ---- lista: ragadós sáv (Szűrők · Rendezés · darabszám), alatta a nézetváltó egy kis sorban */
  .catalog-cat-list { margin-top: 10px; scroll-margin-top: 0; }
  .catalog-cat-list .catalog-cat-bar { display: none; }
  .catalog-cat-mbar {
    display: flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 25;
    margin: 0 calc(var(--gutter) * -1); padding: 8px var(--gutter); background: var(--cp-krem); box-shadow: 0 1px 0 var(--cp-vonal);
  }
  .catalog-cat-mbar__btn {
    display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 13px; flex: none; border-radius: var(--cp-r-pill);
    background: var(--cp-papir); color: var(--cp-tinta); box-shadow: inset 0 0 0 1.5px var(--cp-vonal-2); font-weight: 800; font-size: 14px; text-decoration: none;
  }
  .catalog-cat-mbar__btn:hover { color: var(--cp-tinta); background: var(--cp-kobalt-50); }
  .catalog-cat-mbar__btn .c-icon { width: 18px; height: 18px; color: var(--cp-kobalt); }
  .catalog-cat-mbar__btn .c-count { background: var(--cp-kobalt); box-shadow: none; min-width: 20px; height: 20px; font-size: 11.5px; }
  .catalog-cat-mbar__btn--sort { gap: 6px; padding: 0 10px 0 14px; min-width: 0; flex: 0 1 auto; }
  .catalog-cat-mbar__sort { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
  .catalog-cat-mbar__sort small { font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--cp-tinta-3); }
  .catalog-cat-mbar__sort b { font-size: 13.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .catalog-cat-mbar__btn--sort .c-icon { width: 16px; height: 16px; flex: none; }
  .catalog-cat-mbar__count { margin: 0 0 0 auto; font-size: 12.5px; font-weight: 650; color: var(--cp-tinta-2); white-space: nowrap; }
  .catalog-cat-mbar__count b { font-size: 15px; font-weight: 800; color: var(--cp-tinta); }

  .catalog-cat-toolbar { margin: 8px 0 8px; gap: 8px; }
  .catalog-cat-toolbar.is-noviews { display: none; }
  .catalog-cat-toolbar__count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; margin: 0; }
  .catalog-cat-sort { display: none; }
  .catalog-cat-toolbar__views { width: 100%; padding: 3px; }
  .catalog-cat-toolbar__views .c-segmented__btn { flex: 1; height: 32px; font-size: 13px; padding: 0 10px; }

  /* aktív szűrők: kis, törölhető chipek egy görgethető sorban */
  .catalog-cat-active { margin: 0 calc(var(--gutter) * -1) 10px; }
  .catalog-cat-active__list {
    position: relative; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px var(--gutter); gap: 6px;
  }
  .catalog-cat-active__list::-webkit-scrollbar { display: none; }
  .catalog-cat-active__list > li { flex: none; }
  .catalog-cat-active .c-chip--sm { height: 30px; padding: 0 10px; font-size: 12.5px; gap: 6px; }
  .catalog-cat-active__clear-item { margin-left: 2px; }
  .catalog-cat-active__clear { font-size: 13px; }
  .catalog-cat-toolbar.is-noviews + .catalog-cat-activewrap .catalog-cat-active { margin-top: 10px; }

  /* ---- alulról felcsúszó panelek */
  .c-drawer.catalog-sheet {
    inset: auto 0 0 0; width: 100%; max-width: 100%; height: auto; max-height: min(86vh, 760px); border-radius: 24px 24px 0 0;
  }
  .c-drawer.catalog-sheet[open], .c-drawer.catalog-sheet:target { animation: cp-sheet-up .24s ease; }
  .catalog-sheet .c-drawer__head { position: relative; padding: 18px 10px 10px 18px; }
  .catalog-sheet .c-drawer__head::before {
    content: ""; position: absolute; top: 7px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: var(--cp-vonal-2);
  }
  .catalog-sheet .c-drawer__title { font-size: 22px; }
  .catalog-sheet .c-drawer__body { padding: 10px 16px 18px; }
  .catalog-sheet .c-drawer__foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .catalog-sort-sheet { padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }

  .catalog-cat-empty { flex-direction: column; gap: 16px; padding: 24px 18px; }
  .catalog-cat-empty__icon { width: 56px; height: 56px; border-radius: 16px; }
  .catalog-cat-empty__title { font-size: 30px; }
  .catalog-cat-empty__lead { font-size: 14.5px; }
  .catalog-cat-empty__actions .c-btn { flex: 1; }
  .catalog-tray-note { left: 5px; bottom: 5px; font-size: 9.5px; padding: 2px 6px; }
}
@keyframes cp-sheet-up { from { transform: translateY(48px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .c-drawer.catalog-sheet[open] { animation: none; } }