/* ============================================================================
   Тема „maison" — category.css (зоната КАТЕГОРИЯ, §5). Зарежда се САМО от
   themes/maison/category.blade.php (@push('mx-css')) — бюджетът за CSS (§9.3).
   Токените и общите класове (mx-wrap, mx-h1, mx-pill, mx-btn, mx-grid,
   mx-pagin, mx-crumbs) са в base.css / card.css — тук само зоната.
   Мобилно първо: 360 px, после 768 / 1200. Радиус 2 само за бутони, полета и
   хапчета; панелите и плочките — 0. Сенки: само чекмеджето и падащите панели.
   ========================================================================= */

/* --- Глава: пътечка + герой (§5.1 т. 1–2) ------------------------------- */
.mx-cat-hero { padding-bottom: var(--mx-s5); }
.mx-cat-hero .mx-crumbs { padding-top: var(--mx-s4); }
.mx-cat-hero__in { padding-top: var(--mx-s5); }
.mx-cat-hero__text { max-width: 760px; }
.mx-cat-hero__eyebrow { margin-bottom: var(--mx-s2); }
.mx-cat-hero__title { overflow-wrap: anywhere; }
/* Въведението: първият абзац на описанието — 3 реда на телефон, 2 на десктоп;
   целият текст е долу (#mx-cat-about). */
.mx-cat-hero__lead {
  margin: var(--mx-s3) 0 0;
  max-width: 100%;
  color: var(--mx-ink);
  font-size: 16px;
  line-height: 26px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.mx-cat-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--mx-s2) var(--mx-s5);
  margin: var(--mx-s3) 0 0;
  font-size: 14px;
  line-height: 22px;
}
.mx-cat-hero__count { color: var(--mx-ink-2); font-variant-numeric: lining-nums tabular-nums; }
.mx-cat-hero__more { font-size: 14px; }
@media (min-width: 1200px) {
  .mx-cat-hero { padding-bottom: var(--mx-s6); }
  .mx-cat-hero__in { padding-top: var(--mx-s6); }
  .mx-cat-hero__lead { -webkit-line-clamp: 2; line-clamp: 2; }
}

/* Редакционен герой (само с theme_images.categories.<slug>.banner): 5/7 */
.mx-cat-hero--editorial .mx-cat-hero__in { display: grid; gap: 0; padding-top: var(--mx-s4); }
.mx-cat-hero--editorial .mx-cat-hero__text { max-width: none; padding: var(--mx-s6) var(--mx-s5); background: var(--mx-ivory); }
.mx-cat-hero__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--mx-ivory-2); }
.mx-cat-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) {
  .mx-cat-hero--editorial .mx-cat-hero__in { grid-template-columns: 5fr 7fr; align-items: stretch; }
  .mx-cat-hero--editorial .mx-cat-hero__text { display: flex; flex-direction: column; justify-content: center; padding: var(--mx-s7); }
  .mx-cat-hero--editorial .mx-cat-hero__media { aspect-ratio: auto; min-height: 360px; }
}

/* --- Видове (корен): плочки — с 1 снимка на продукт и без бели пакшоти днес
   са типографски (К15): име със сериф, брой и стрелка; не празни квадрати. -- */
.mx-cat-kinds { padding-bottom: var(--mx-s5); }
.mx-cat-kinds__list {
  display: flex;
  gap: var(--mx-s3);
  margin: 0 calc(-1 * var(--mx-gutter));
  padding: 2px var(--mx-gutter) var(--mx-s2);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--mx-gutter);
  scrollbar-width: none;
}
.mx-cat-kinds__list::-webkit-scrollbar { display: none; }
.mx-cat-kinds__list > li { flex: 0 0 auto; width: 168px; scroll-snap-align: start; }
.mx-cat-kinds__list.has-img > li { width: 140px; }
.mx-cat-kind {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--mx-s4);
  height: 100%;
  min-height: 116px;
  box-sizing: border-box;
  padding: var(--mx-s4) var(--mx-s4) var(--mx-s3);
  border: 1px solid var(--mx-line);
  background: #FFFFFF;
  color: var(--mx-ink);
  text-decoration: none;
  transition: border-color var(--mx-dur) var(--mx-ease), background-color var(--mx-dur) var(--mx-ease);
}
.mx-cat-kind:hover { border-color: var(--mx-ink); }
.mx-cat-kind__name {
  font-family: var(--mx-serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 26px;
  overflow-wrap: anywhere;
}
.mx-cat-kind__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mx-s2);
  color: var(--mx-ink-2);
  font-size: 12px;
  line-height: 18px;
  font-variant-numeric: lining-nums tabular-nums;
}
.mx-cat-kind__meta .mx-ic { color: var(--mx-ink); transition: transform var(--mx-dur) var(--mx-ease); }
.mx-cat-kind:hover .mx-cat-kind__meta .mx-ic { transform: translateX(3px); }
/* Със снимки: квадрат 140 px (§5.1 т. 3) + име отдолу, без рамка */
.has-img .mx-cat-kind { min-height: 0; padding: 0; gap: var(--mx-s2); border: 0; background: transparent; justify-content: flex-start; }
.has-img .mx-cat-kind__img { display: block; aspect-ratio: 1 / 1; background: var(--mx-ivory-2); overflow: hidden; }
.has-img .mx-cat-kind__img img { display: block; width: 100%; height: 100%; object-fit: contain; padding: var(--mx-s3); box-sizing: border-box; mix-blend-mode: multiply; filter: brightness(1.025); }
/* Вид без бял пакшот: иконка-камък в злато (декор, 3,24 за UI) — нарочна плочка, не дупка. */
.has-img .mx-cat-kind__img.is-empty { display: flex; align-items: center; justify-content: center; color: var(--mx-gold-600); }
.has-img .mx-cat-kind__img.is-empty .mx-ic { stroke-width: 1.25; }
.has-img .mx-cat-kind:hover .mx-cat-kind__name { text-decoration: underline; text-decoration-color: var(--mx-gold); text-underline-offset: 4px; }
@media (min-width: 768px) {
  .mx-cat-kinds__list { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; }
  .mx-cat-kinds__list > li { width: calc((100% - 3 * var(--mx-s3)) / 4); }
  .mx-cat-kinds__list.has-img > li { width: 140px; }
}
@media (min-width: 1200px) {
  .mx-cat-kinds { padding-bottom: var(--mx-s6); }
  .mx-cat-kinds__list { gap: var(--mx-s5); }
  .mx-cat-kinds__list > li { width: calc((100% - 3 * var(--mx-s5)) / 4); }
  .mx-cat-kind { min-height: 136px; padding: var(--mx-s5) var(--mx-s5) var(--mx-s4); }
  .mx-cat-kind__name { font-size: 24px; line-height: 30px; }
}

/* --- Сестри (лист): хапчета-връзки над мрежата; на телефон — плъзгане ---- */
.mx-cat-sibs { padding-bottom: var(--mx-s5); }
.mx-cat-sibs__list {
  flex-wrap: nowrap;
  margin: 0 calc(-1 * var(--mx-gutter));
  padding: 2px var(--mx-gutter);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.mx-cat-sibs__list::-webkit-scrollbar { display: none; }
.mx-cat-sibs__list .mx-pill { min-height: 44px; }
.mx-cat-sibs__n,
.mx-cat-empty__pills .mx-cat-sibs__n {
  margin-left: var(--mx-s2);
  color: var(--mx-ink-2);
  font-size: 12px;
  font-variant-numeric: lining-nums tabular-nums;
}
.mx-cat-sibs .mx-pill[aria-current] { font-weight: 600; }
@media (min-width: 768px) {
  .mx-cat-sibs__list { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; }
}
@media (min-width: 1200px) { .mx-cat-sibs { padding-bottom: var(--mx-s6); } }

/* --- Лента „Филтри · Подреди" (§5.3, §5.5) ------------------------------- */
/* Обвивката на фасетите носи само куката на category.js. */
.mx-cat-filters { display: contents; }
.mx-cat-bar {
  position: relative;
  z-index: 30;
  background: #FFFFFF;
  border-top: 1px solid var(--mx-line);
  border-bottom: 1px solid var(--mx-line);
}
/* Лепяща под хедъра на десктоп: хедърът остава 1 + 48 + 1 px (ред 2), §3.2. */
@media (min-width: 1200px) {
  .mx-cat-bar { position: sticky; top: 49px; }
}
.mx-cat-bar__in {
  display: flex;
  align-items: center;
  gap: var(--mx-s2);
  min-height: 60px;
}
.mx-cat-bar__filters,
.mx-cat-bar__end { display: flex; align-items: center; gap: var(--mx-s2); min-width: 0; }
.mx-cat-bar__filters { flex: 1 1 0; }
.mx-cat-bar__end { flex: 1 1 0; justify-content: flex-end; }
/* Телефон: два равни бутона; хапчетата са в чекмеджето. От 768 px — хапчета. */
.mx-cat-bar__pill { display: none; }
.mx-cat-bar__filters > .mx-cat-bar__all,
.mx-cat-bar__end > .mx-cat-sort { flex: 1 1 auto; }
.mx-cat-bar__end > .mx-cat-sort > summary,
.mx-cat-bar__filters > .mx-cat-bar__all { width: 100%; justify-content: center; }
.mx-cat-bar__total,
.mx-cat-bar__how { display: none; }
@media (min-width: 768px) {
  .mx-cat-bar__in { gap: var(--mx-s5); min-height: 64px; }
  .mx-cat-bar__filters { flex: 1 1 auto; gap: var(--mx-s2); }
  .mx-cat-bar__end { flex: 0 0 auto; gap: var(--mx-s5); }
  .mx-cat-bar__pill { display: block; }
  .mx-cat-bar__all:not(.is-desk) { display: none; }
  .mx-cat-bar__filters > .mx-cat-bar__all,
  .mx-cat-bar__end > .mx-cat-sort { flex: 0 0 auto; }
  .mx-cat-bar__end > .mx-cat-sort > summary,
  .mx-cat-bar__filters > .mx-cat-bar__all { width: auto; }
  .mx-cat-bar__total { display: block; margin: 0; color: var(--mx-ink-2); font-size: 14px; line-height: 22px; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
}
@media (min-width: 1200px) {
  .mx-cat-bar__how {
    display: inline;
    color: var(--mx-ink-2);
    font-size: 12px;
    line-height: 18px;
    text-decoration: underline;
    text-decoration-color: var(--mx-line-strong);
    text-underline-offset: 3px;
    white-space: nowrap;
  }
  .mx-cat-bar__how:hover { color: var(--mx-ink); text-decoration-color: var(--mx-gold); }
}

/* Бутон/хапче на лентата (рамка --mx-line-strong 3,68 — WCAG 1.4.11) */
.mx-cat-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--mx-s2);
  min-height: 44px;
  padding: 0 var(--mx-s4);
  box-sizing: border-box;
  border: 1px solid var(--mx-line-strong);
  border-radius: var(--mx-radius);
  background: #FFFFFF;
  color: var(--mx-ink);
  font-family: var(--mx-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--mx-dur) var(--mx-ease), background-color var(--mx-dur) var(--mx-ease);
}
.mx-cat-btn::-webkit-details-marker { display: none; }
.mx-cat-btn::marker { content: ""; }
.mx-cat-btn:hover { border-color: var(--mx-ink); }
/* Избрано: фон злато-50 + рамка въглен + удебелен текст + брой — не само цвят */
.mx-cat-btn.is-on { border-color: var(--mx-ink); background: var(--mx-gold-50); font-weight: 600; }
.mx-cat-btn__n { font-variant-numeric: lining-nums tabular-nums; }
.mx-cat-btn__chev { color: var(--mx-ink-2); transition: transform var(--mx-dur) var(--mx-ease); }
.mx-cat-drop[open] > summary .mx-cat-btn__chev { transform: rotate(180deg); }
.mx-cat-drop[open] > summary { border-color: var(--mx-ink); }

/* Подреди: „Подреди: По подразбиране" на десктоп; на телефон само „Подреди"
   (или „Подреди: Цена ↑", когато не е подразбиращото). */
.mx-cat-sort__cur.is-default { display: none; }
.mx-cat-sort__btn .mx-cat-sort__cur { font-weight: 600; }
@media (min-width: 768px) {
  .mx-cat-sort__cur.is-default { display: inline; }
  .mx-cat-sort__btn { border-color: transparent; padding-right: var(--mx-s2); }
  .mx-cat-sort__btn:hover,
  .mx-cat-drop[open] > .mx-cat-sort__btn { border-color: var(--mx-line-strong); }
  .mx-cat-sort__btn.is-on { border-color: var(--mx-ink); }
}

/* Падащ панел (разкриване). Сянката е позволена — това е изскачащ панел (§2.3). */
.mx-cat-drop { position: relative; }
.mx-cat-drop > summary:focus-visible { outline: 2px solid var(--mx-gold-700); outline-offset: 2px; }
.mx-cat-drop__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 40;
  min-width: 260px;
  max-width: min(360px, calc(100vw - 2 * var(--mx-gutter)));
  box-sizing: border-box;
  padding: var(--mx-s2);
  border: 1px solid var(--mx-line);
  background: #FFFFFF;
  box-shadow: var(--mx-shadow-pop);
}
.mx-cat-drop__panel--end { left: auto; right: 0; }
.mx-cat-drop__panel--form { width: 340px; padding: var(--mx-s4); }
.mx-cat-drop__note { margin: var(--mx-s2) 0 0; padding: var(--mx-s3) var(--mx-s3) var(--mx-s1); border-top: 1px solid var(--mx-line); font-size: 13px; line-height: 20px; }
@media (max-width: 767px) {
  /* „Подреди" е вдясно на лентата — панелът се отваря към вътре. */
  .mx-cat-bar__end .mx-cat-drop__panel { left: auto; right: 0; width: min(320px, calc(100vw - 2 * var(--mx-gutter))); }
}
@media (min-width: 1200px) {
  .mx-cat-bar__end .mx-cat-drop__note { display: none; }
}

.mx-cat-opts { margin: 0; padding: 0; list-style: none; }
.mx-cat-opt {
  display: flex;
  align-items: center;
  gap: var(--mx-s3);
  min-height: 44px;
  padding: 0 var(--mx-s3);
  color: var(--mx-ink);
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
}
.mx-cat-opt:hover { background: var(--mx-ivory-2); }
.mx-cat-opt.is-on { background: var(--mx-gold-50); font-weight: 600; }
.mx-cat-opt__lbl { flex: 1 1 auto; min-width: 0; }
.mx-cat-opt__n { margin-left: auto; color: var(--mx-ink-2); font-size: 12px; font-weight: 400; font-variant-numeric: lining-nums tabular-nums; }
.mx-cat-opt__tick { color: var(--mx-ink); }
.mx-cat-opt__swatch { flex: none; width: 16px; height: 16px; border: 1px solid var(--mx-line-strong); border-radius: 50%; }
/* Квадратче (визуално): празно / въглен с отметка — като истинските чекбоксове */
.mx-cat-opt__box {
  flex: none;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border: 1px solid var(--mx-line-strong);
  border-radius: var(--mx-radius);
  background: #FFFFFF;
}
.mx-cat-opt.is-on .mx-cat-opt__box,
.mx-cat-check input:checked {
  border-color: var(--mx-ink);
  background: var(--mx-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 12.5 4.25 4.25L18.5 8'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* „от – до" */
.mx-cat-range { margin: 0; }
.mx-cat-range__fields { display: flex; align-items: flex-end; gap: var(--mx-s3); }
.mx-cat-range__field { flex: 1 1 0; min-width: 0; }
.mx-cat-range__cap { display: block; margin-bottom: 6px; color: var(--mx-ink-2); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.mx-cat-range__input { position: relative; display: block; }
.mx-cat-range__input input {
  display: block;
  width: 100%;
  height: 44px;
  box-sizing: border-box;
  padding: 0 32px 0 var(--mx-s3);
  border: 1px solid var(--mx-line-strong);
  border-radius: var(--mx-radius);
  background: #FFFFFF;
  color: var(--mx-ink);
  font-size: 16px;
  font-variant-numeric: lining-nums tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}
.mx-cat-range__input input::-webkit-outer-spin-button,
.mx-cat-range__input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mx-cat-range__input input:focus { border-color: var(--mx-ink); }
.mx-cat-range__input input::placeholder { color: var(--mx-ink-2); opacity: 1; }
.mx-cat-range__unit { position: absolute; right: var(--mx-s3); top: 50%; transform: translateY(-50%); color: var(--mx-ink-2); font-size: 14px; pointer-events: none; }
.mx-cat-range__sep { padding-bottom: 11px; color: var(--mx-ink-2); }
.mx-cat-range__hint { margin: var(--mx-s2) 0 0; color: var(--mx-ink-2); font-size: 12px; line-height: 18px; }
.mx-cat-range__actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--mx-s5); margin-top: var(--mx-s4); }
.mx-cat-range__actions .mx-link { font-size: 14px; }
.mx-cat-range__actions .mx-btn { min-height: 44px; padding: 0 var(--mx-s5); }
.mx-cat-budgets { display: flex; flex-wrap: wrap; gap: var(--mx-s2); margin: 0 0 var(--mx-s4); padding: 0; list-style: none; }
.mx-cat-budgets .mx-pill { min-height: 40px; font-variant-numeric: lining-nums tabular-nums; }
.mx-cat-budgets .mx-pill.is-on { font-weight: 600; }
.mx-cat-budgets__tick { margin: 0 6px 0 -4px; }

/* Избраните филтри — чипове с „×" */
.mx-cat-chips { border-top: 1px solid var(--mx-line); }
.mx-cat-chips__list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--mx-s2);
  margin: 0 calc(-1 * var(--mx-gutter));
  padding: var(--mx-s3) var(--mx-gutter);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.mx-cat-chips__list::-webkit-scrollbar { display: none; }
.mx-cat-chips__list > li { flex: none; }
.mx-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--mx-s2);
  min-height: 36px;
  padding: 0 10px 0 var(--mx-s3);
  border: 1px solid var(--mx-ink);
  border-radius: var(--mx-radius);
  background: var(--mx-gold-50);
  color: var(--mx-ink);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.mx-cat-chip:hover { background: var(--mx-gold-100); }
.mx-cat-chips__clear { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--mx-s2); color: var(--mx-ink); font-size: 13px; text-decoration: underline; text-decoration-color: var(--mx-gold); text-underline-offset: 4px; white-space: nowrap; }
@media (min-width: 1200px) {
  .mx-cat-chips__list { flex-wrap: wrap; margin: 0; padding: var(--mx-s3) 0; overflow: visible; }
}

/* --- Чекмедже „Филтри": телефон — долен лист, ≥ 768 — панел отдясно ------- */
.mx-cat-drawer {
  position: fixed;
  inset: 0;
  z-index: 120;
  visibility: hidden;
  transition: visibility 0s linear 280ms; /* скрива се СЛЕД анимацията */
}
.mx-cat-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(40, 40, 40, .32);
  opacity: 0;
  transition: opacity var(--mx-dur) var(--mx-ease);
}
.mx-cat-drawer__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  max-height: 88vh;
  max-height: 88dvh;
  background: #FFFFFF;
  box-shadow: var(--mx-shadow-pop);
  transform: translateY(100%);
  transition: transform 280ms var(--mx-ease);
}
.mx-cat-drawer__toggle:checked ~ .mx-cat-drawer,
.mx-cat-drawer__toggle:checked ~ .mx-cat-filters .mx-cat-drawer { visibility: visible; transition-delay: 0s; }
.mx-cat-drawer__toggle:checked ~ .mx-cat-drawer .mx-cat-drawer__backdrop { opacity: 1; }
.mx-cat-drawer__toggle:checked ~ .mx-cat-drawer .mx-cat-drawer__panel { transform: none; }
.mx-cat-drawer__head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mx-s3);
  padding: var(--mx-s2) var(--mx-s2) var(--mx-s2) var(--mx-s5);
  border-bottom: 1px solid var(--mx-line);
}
.mx-cat-drawer__title { margin: 0; font-family: var(--mx-serif); font-weight: 500; font-size: 26px; line-height: 32px; }
.mx-cat-drawer__close { cursor: pointer; }
.mx-cat-drawer__form { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin: 0; }
.mx-cat-drawer__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--mx-s5) var(--mx-s5);
}
.mx-cat-drawer__foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--mx-s5);
  padding: var(--mx-s3) var(--mx-s5) calc(var(--mx-s3) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--mx-line);
  background: #FFFFFF;
}
.mx-cat-drawer__foot .mx-btn { min-width: 0; padding: 0 var(--mx-s4); line-height: 1.2; }
.mx-cat-drawer__apply { flex: 1 1 auto; }
.mx-cat-drawer__clear { flex: none; align-self: center; padding: var(--mx-s2) 0; font-size: 14px; white-space: nowrap; }
@media (min-width: 768px) {
  .mx-cat-drawer__panel {
    top: 0;
    left: auto;
    width: 100%;
    max-width: 420px;
    height: 100%;
    max-height: none;
    transform: translateX(100%);
  }
  .mx-cat-drawer__head { padding: var(--mx-s3) var(--mx-s3) var(--mx-s3) var(--mx-s6); }
  .mx-cat-drawer__body { padding: 0 var(--mx-s6) var(--mx-s6); }
  .mx-cat-drawer__foot { padding: var(--mx-s4) var(--mx-s6); }
}

/* Група в чекмеджето (акордеон с хеърлайни) */
.mx-cat-group { border-bottom: 1px solid var(--mx-line); }
.mx-cat-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mx-s3);
  min-height: 56px;
  font-weight: 600;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}
.mx-cat-group__head::-webkit-details-marker { display: none; }
.mx-cat-group__head::marker { content: ""; }
.mx-cat-group__chev { color: var(--mx-ink-2); transition: transform var(--mx-dur) var(--mx-ease); }
.mx-cat-group[open] > .mx-cat-group__head .mx-cat-group__chev { transform: rotate(180deg); }
.mx-cat-group__body { padding: 0 0 var(--mx-s5); }
.mx-cat-group__clear { display: inline-block; margin-top: var(--mx-s3); font-size: 14px; }
.mx-cat-check {
  display: flex;
  align-items: center;
  gap: var(--mx-s3);
  min-height: 44px;
  font-size: 15px;
  line-height: 22px;
  cursor: pointer;
}
.mx-cat-check input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  box-sizing: border-box;
  border: 1px solid var(--mx-line-strong);
  border-radius: var(--mx-radius);
  background: #FFFFFF;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.mx-cat-check input[type="radio"] { border-radius: 50%; }
.mx-cat-check input[type="radio"]:checked { background: #FFFFFF; box-shadow: inset 0 0 0 5px var(--mx-ink); }
.mx-cat-check input:checked + .mx-cat-check__lbl,
.mx-cat-check input:checked ~ .mx-cat-check__lbl { font-weight: 600; }
.mx-cat-check__lbl { flex: 1 1 auto; min-width: 0; }
.mx-cat-moreopts { margin: 0; }
.mx-cat-moreopts__btn { display: inline-flex; align-items: center; min-height: 44px; color: var(--mx-ink); font-size: 14px; text-decoration: underline; text-decoration-color: var(--mx-gold); text-underline-offset: 4px; cursor: pointer; list-style: none; }
.mx-cat-moreopts__btn::-webkit-details-marker { display: none; }
.mx-cat-moreopts__close,
.mx-cat-moreopts[open] .mx-cat-moreopts__open { display: none; }
.mx-cat-moreopts[open] .mx-cat-moreopts__close { display: inline; }
.mx-cat-moreopts[open] > .mx-cat-moreopts__btn { order: 2; }

/* --- Решетка + редакционна плочка + „Показани …" (§5.1 т. 5–6) ---------- */
.mx-cat-results { padding: var(--mx-s5) 0 0; }
@media (min-width: 1200px) { .mx-cat-results { padding-top: var(--mx-s6); } }
/* Плочката: на цял ред СЛЕД 2-рия ред — в DOM-а е след 8-ата карта (4 колони);
   на 3 колони след 6-ата, на 2 — след 4-ата (`order`). */
.mx-cat-grid.has-tile > li { order: 0; }
.mx-cat-grid.has-tile > .mx-cat-tile { order: 1; grid-column: 1 / -1; }
.mx-cat-grid.has-tile > .mx-cat-tile ~ li { order: 2; }
.mx-cat-grid.has-tile > li:nth-child(n+5):not(.mx-cat-tile) { order: 2; }
@media (min-width: 768px) {
  .mx-cat-grid.has-tile > li:nth-child(n+5):not(.mx-cat-tile) { order: 0; }
  .mx-cat-grid.has-tile > li:nth-child(n+7):not(.mx-cat-tile) { order: 2; }
}
@media (min-width: 1200px) {
  .mx-cat-grid.has-tile > li:nth-child(n+7):not(.mx-cat-tile) { order: 0; }
  .mx-cat-grid.has-tile > .mx-cat-tile ~ li { order: 2; }
}
.mx-cat-tile__in { display: grid; background: var(--mx-ivory); }
.mx-cat-tile__text { padding: var(--mx-s6) var(--mx-s5); }
.mx-cat-tile__title { margin: 0; font-family: var(--mx-serif); font-weight: 500; font-size: 26px; line-height: 32px; color: var(--mx-ink); }
.mx-cat-tile__body { max-width: 56ch; margin: var(--mx-s3) 0 0; font-size: 16px; line-height: 26px; }
.mx-cat-tile__link { display: inline-block; margin-top: var(--mx-s4); font-size: 14px; font-weight: 500; }
.mx-cat-tile__media { aspect-ratio: 4 / 3; overflow: hidden; }
.mx-cat-tile__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) {
  .mx-cat-tile__in.has-img { grid-template-columns: 7fr 5fr; align-items: center; }
  .mx-cat-tile__text { padding: var(--mx-s7); }
}
@media (min-width: 1200px) {
  .mx-cat-tile__title { font-size: 34px; line-height: 40px; }
}

.mx-cat-more { margin-top: var(--mx-s7); text-align: center; }
.mx-cat-more__count { margin: 0; color: var(--mx-ink-2); font-size: 14px; line-height: 22px; font-variant-numeric: lining-nums tabular-nums; }
.mx-cat-more__bar { display: block; width: 200px; max-width: 60%; height: 1px; margin: var(--mx-s3) auto 0; background: var(--mx-line); }
.mx-cat-more__bar > span { display: block; height: 100%; background: var(--mx-gold); }
.mx-cat-more .mx-cat-pagin { margin-top: var(--mx-s5); padding-top: 0; border-top: 0; }
@media (min-width: 1200px) { .mx-cat-more { margin-top: var(--mx-s8); } }

/* --- Празни състояния (§5.2) -------------------------------------------- */
.mx-cat-empty { max-width: 640px; padding: var(--mx-s6) 0 var(--mx-s4); }
.mx-cat-empty__text { margin: var(--mx-s3) 0 0; color: var(--mx-ink-2); }
.mx-cat-empty__act { margin: var(--mx-s5) 0 0; }
.mx-cat-empty__label { margin: var(--mx-s6) 0 var(--mx-s3); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--mx-ink); }
/* Категория без модели: спокоен блок на слонова кост, не „счупена" страница */
.mx-cat-empty--none {
  max-width: none;
  padding: var(--mx-s7) var(--mx-s5);
  border: 1px solid var(--mx-line);
  background: var(--mx-ivory-2);
  text-align: center;
}
.mx-cat-empty__rule { display: block; width: 48px; height: 1px; margin: 0 auto var(--mx-s5); background: var(--mx-gold); }
.mx-cat-empty--none .mx-cat-empty__text { color: var(--mx-ink); }
.mx-cat-empty__roots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--mx-s3);
  max-width: 880px;
  margin: var(--mx-s5) auto 0;
  padding: 0;
  list-style: none;
}
.mx-cat-empty__roots > li { flex: 1 1 140px; max-width: 200px; }
.mx-cat-empty__root {
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 100%;
  box-sizing: border-box;
  padding: var(--mx-s4) var(--mx-s3);
  border: 1px solid var(--mx-line);
  background: #FFFFFF;
  color: var(--mx-ink);
  text-decoration: none;
  transition: border-color var(--mx-dur) var(--mx-ease);
}
.mx-cat-empty__root:hover { border-color: var(--mx-ink); }
.mx-cat-empty__name { font-family: var(--mx-serif); font-weight: 500; font-size: 22px; line-height: 28px; }
.mx-cat-empty__n { color: var(--mx-ink-2); font-size: 12px; line-height: 18px; font-variant-numeric: lining-nums tabular-nums; }
@media (min-width: 1200px) {
  .mx-cat-empty--none { padding: var(--mx-s8) var(--mx-s7); }
}

/* --- Малко заглавие на ред с връзки (Manrope под 22 px — §2.2) ---------- */
.mx-cat-sub {
  margin: 0 0 var(--mx-s4);
  font-family: var(--mx-sans);
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mx-ink);
}

/* --- „Популярни подборки" ----------------------------------------------- */
.mx-cat-picks { padding-top: var(--mx-s7); }

/* --- Описание, ЧЗВ, „Вижте също" (§5.1 т. 8–10) ------------------------ */
.mx-cat-about {
  margin-top: var(--mx-section);
  padding: var(--mx-section) 0;
  background: var(--mx-ivory);
  outline: none;
}
.mx-cat-about__grid { display: grid; gap: var(--mx-s7); }
@media (min-width: 1200px) {
  .mx-cat-about__grid.has-faq { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--mx-s8); align-items: start; }
}
.mx-cat-about__text { position: relative; min-width: 0; }
.mx-cat-about__title { margin-bottom: var(--mx-s5); }
.mx-cat-prose { max-width: 70ch; color: var(--mx-ink); font-size: 16px; line-height: 26px; overflow-wrap: break-word; }
.mx-cat-prose > :first-child { margin-top: 0; }
.mx-cat-prose p { margin: 0 0 var(--mx-s4); }
.mx-cat-prose h2,
.mx-cat-prose h3 { margin: var(--mx-s6) 0 var(--mx-s3); font-family: var(--mx-serif); font-weight: 600; font-size: 22px; line-height: 28px; }
.mx-cat-prose h4 { margin: var(--mx-s5) 0 var(--mx-s2); font-size: 16px; font-weight: 600; }
.mx-cat-prose ul,
.mx-cat-prose ol { margin: 0 0 var(--mx-s4); padding-left: var(--mx-s5); }
.mx-cat-prose li { margin: 0 0 var(--mx-s2); }
.mx-cat-prose ul li::marker { color: var(--mx-gold-700); }
.mx-cat-prose strong,
.mx-cat-prose b { font-weight: 600; }
.mx-cat-prose table { width: 100%; border-collapse: collapse; margin: 0 0 var(--mx-s4); font-size: 14px; }
.mx-cat-prose th,
.mx-cat-prose td { padding: var(--mx-s2) var(--mx-s3); border-bottom: 1px solid var(--mx-line); text-align: left; vertical-align: top; }
@media (min-width: 1200px) {
  .mx-cat-prose h2,
  .mx-cat-prose h3 { font-size: 24px; line-height: 30px; }
}
/* Сгънато до ~7 реда; „Прочетете повече" го разгъва (checkbox, без JS).
   Връзката „Прочетете повече ↓" от героя (:target) го отваря направо. */
.mx-cat-prose.is-clamped { position: relative; max-height: 182px; overflow: hidden; }
.mx-cat-prose.is-clamped::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 72px;
  background: linear-gradient(to bottom, rgba(246, 241, 233, 0), var(--mx-ivory));
  pointer-events: none;
}
.mx-cat-about__toggle:checked ~ .mx-cat-prose.is-clamped,
.mx-cat-about:target .mx-cat-prose.is-clamped { max-height: none; overflow: visible; }
.mx-cat-about__toggle:checked ~ .mx-cat-prose.is-clamped::after,
.mx-cat-about:target .mx-cat-prose.is-clamped::after { display: none; }
.mx-cat-about__more {
  display: inline-flex;
  align-items: center;
  gap: var(--mx-s2);
  min-height: 44px;
  margin-top: var(--mx-s2);
  color: var(--mx-ink);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: underline;
  text-decoration-color: var(--mx-gold);
  text-underline-offset: 6px;
  cursor: pointer;
}
.mx-cat-about__more:focus-visible { outline: 2px solid var(--mx-gold-700); outline-offset: 2px; }
.mx-cat-about__close,
.mx-cat-about__toggle:checked ~ .mx-cat-about__more .mx-cat-about__open { display: none; }
.mx-cat-about__toggle:checked ~ .mx-cat-about__more .mx-cat-about__close { display: inline; }
.mx-cat-about__toggle:checked ~ .mx-cat-about__more .mx-ic { transform: rotate(180deg); }
.mx-cat-about:target .mx-cat-about__toggle:not(:checked) ~ .mx-cat-about__more { display: none; }

/* ЧЗВ: акордеон с хеърлайни; „+" става „×" при отваряне */
.mx-cat-faq { min-width: 0; }
.mx-cat-about__grid:not(.has-faq) > .mx-cat-faq { max-width: 880px; }
.mx-cat-faq__title { margin-bottom: var(--mx-s5); }
.mx-cat-faq__list { border-top: 1px solid var(--mx-line-strong); }
.mx-cat-faq__item { border-bottom: 1px solid var(--mx-line); }
.mx-cat-faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--mx-s4);
  padding: var(--mx-s4) 0;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  cursor: pointer;
  list-style: none;
}
.mx-cat-faq__q::-webkit-details-marker { display: none; }
.mx-cat-faq__q::marker { content: ""; }
.mx-cat-faq__q:hover > span { text-decoration: underline; text-decoration-color: var(--mx-gold); text-underline-offset: 4px; }
.mx-cat-faq__ic { flex: none; margin-top: 2px; color: var(--mx-ink); transition: transform var(--mx-dur) var(--mx-ease); }
.mx-cat-faq__item[open] .mx-cat-faq__ic { transform: rotate(45deg); }
.mx-cat-faq__a { padding: 0 var(--mx-s7) var(--mx-s5) 0; }
.mx-cat-faq__a p { margin: 0; font-size: 15px; line-height: 24px; color: var(--mx-ink); }

/* „Вижте също" — под описанието, с хеърлайн; хапчетата са бели на слонова кост */
.mx-cat-links { margin-top: var(--mx-s7); padding-top: var(--mx-s6); border-top: 1px solid var(--mx-line); }
.mx-cat-about .mx-pill { background: #FFFFFF; }
.mx-cat-about__grid + .mx-cat-links { margin-top: var(--mx-s7); }
.mx-cat-about > .mx-wrap > .mx-cat-links:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* --- Без движение при заявено намаляване (base.css спира и останалото) --- */
@media (prefers-reduced-motion: reduce) {
  .mx-cat-drawer,
  .mx-cat-drawer__backdrop,
  .mx-cat-drawer__panel { transition: none; }
}