/* ============================================================================
   Тема Lumen · зона КАТЕГОРИЯ (category / brand / search)
   Собственик: агент КАТЕГОРИЯ. Класове само с префикс lm-cat- (+ ширини на
   .lm-carousel__item за подкатегориите). Базовите компоненти (.lm-wrap, .lm-btn,
   .lm-pill, .lm-chip, .lm-h1/2, .lm-sec, .lm-tile, .lm-card, .lm-carousel) са на
   ОСНОВА в base.css — тук НЕ се предефинират.
   Mobile first: базовите правила са за 375 px; надграждане с min-width.
   Всички цветове през --lm-* с резервни стойности (важат и без base.css).
   ========================================================================== */

.lm-cat {
  --_ink: var(--lm-ink, #111);
  --_body: var(--lm-body, #5f5f5f);
  --_bg: var(--lm-bg, #fff);
  --_surface: var(--lm-surface, #f5f5f3);
  --_line: var(--lm-line, #e4e4e1);
  --_accent: var(--lm-accent, #205b80);
  --_promo: var(--lm-promo, #c4000c);
  --_r: var(--lm-radius, 8px);
  padding-bottom: 48px;
}

/* ---------- Пътечка ---------- */
.lm-cat-crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 14px 0 6px;
  font-size: 13px;
  color: var(--_body);
}
.lm-cat-crumbs a { color: var(--_body); text-decoration: none; }
.lm-cat-crumbs a:hover { color: var(--_accent); text-decoration: underline; }
.lm-cat-crumbs__sep { color: var(--_line); }
.lm-cat-crumbs__cur { color: var(--_ink); font-weight: 500; }

/* ---------- Банер / заглавен блок ---------- */
.lm-cat-banner { margin: 6px 0 8px; }
.lm-cat-banner__pic {
  display: block;
  border-radius: var(--_r);
  overflow: hidden;
  background: var(--_surface);
  aspect-ratio: 3 / 2;
}
.lm-cat-banner__pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lm-cat-banner__body { padding: 16px 0 4px; }
.lm-cat-banner.has-img .lm-cat-banner__body { padding-top: 18px; }
.lm-cat-banner__title { margin: 0; }
/* Марка с лого: логото в бяла плочка до заглавието (страница на марката). */
.lm-cat-banner__head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.lm-cat-banner__logo {
  display: inline-flex; align-items: center; justify-content: center;
  height: 64px; padding: 8px 16px;
  background: #fff; border: 1px solid var(--_line, #E4E4E1); border-radius: 8px;
}
.lm-cat-banner__logo img { max-height: 44px; max-width: 200px; width: auto; object-fit: contain; display: block; }
.lm-cat-banner__desc {
  margin: 8px 0 0;
  max-width: 64ch;
  color: var(--_body);
  font-size: 15px;
  line-height: 1.55;
}
.lm-cat-banner__count {
  margin: 10px 0 0;
  color: var(--_body);
  font-size: 14px;
  font-weight: 500;
}

/* ---------- Подкатегории на карусел ---------- */
.lm-cat-subcats { margin-top: 8px; }
.lm-cat-subcats__back {
  color: var(--_accent);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.lm-cat-subcats__back:hover { text-decoration: underline; }
.lm-cat-subcats__track { list-style: none; margin: 0; padding: 0; }
/* Ширината на плочките я задава зоната (по договора за карусела). */
.lm-cat-subcats__item { flex: 0 0 42%; }
.lm-cat-subcat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: var(--_ink);
}
.lm-cat-subcat__tile {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--_r);
  background: var(--_surface);
}
.lm-cat-subcat__tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lm-cat-subcat__ph {
  font-size: 30px;
  font-weight: 700;
  color: var(--_line);
  text-transform: uppercase;
}
.lm-cat-subcat__name {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
}
.lm-cat-subcat:hover .lm-cat-subcat__name { color: var(--_accent); }
.lm-cat-subcat.is-active .lm-cat-subcat__tile { outline: 2px solid var(--_accent); outline-offset: 2px; }
.lm-cat-subcat.is-active .lm-cat-subcat__name { color: var(--_accent); font-weight: 700; }

/* ---------- Лента с филтри ---------- */
.lm-cat-bar {
  position: sticky;
  top: var(--lm-hd-sticky, 0px);
  z-index: 30;
  background: var(--_bg);
  border-bottom: 1px solid var(--_line);
  margin-top: 6px;
}
.lm-cat-bar__in {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 0;
}
.lm-cat-bar__pills {
  position: relative; /* контейнер за падащите панели на телефон */
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.lm-cat-bar__count {
  margin: 0;
  color: var(--_body);
  font-size: 14px;
  font-weight: 500;
}

/* Хапче „Всички филтри" + активни хапчета (използват базовия .lm-pill) */
.lm-cat-bar__all { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.lm-cat-drop__btn { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; list-style: none; }
.lm-cat-drop__btn::-webkit-details-marker { display: none; }
.lm-cat-drop__btn.is-active { border-color: var(--_accent); color: var(--_accent); }
.lm-cat-drop__count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--_accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.lm-cat-drop__chev { transition: transform .18s ease; flex: 0 0 auto; }
.lm-cat-drop[open] .lm-cat-drop__chev { transform: rotate(180deg); }

/* Падащ панел: на телефон — на цялата ширина под лентата; над него нищо. */
.lm-cat-drop { position: static; }
.lm-cat-drop__panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 8px;
  z-index: 40;
  background: var(--_bg);
  border: 1px solid var(--_line);
  border-radius: var(--_r);
  box-shadow: 0 12px 30px rgba(17, 17, 17, .10);
  padding: 6px;
  max-height: min(60vh, 420px);
  overflow-y: auto;
}
.lm-cat-drop__panel--price { padding: 14px; }

/* Опция във всеки падащ списък / акордеон */
.lm-cat-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--_ink);
  font-size: 15px;
  text-decoration: none;
}
.lm-cat-opt:hover { background: var(--_surface); }
.lm-cat-opt.is-on { color: var(--_accent); font-weight: 600; }
.lm-cat-opt__check { flex: 0 0 auto; color: var(--_accent); }

/* Форма за цена */
.lm-cat-pricef {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}
.lm-cat-pricef__field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 90px; min-width: 0; }
.lm-cat-pricef__cap { font-size: 12px; color: var(--_body); }
.lm-cat-pricef input {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--_line);
  border-radius: 999px;
  background: var(--_bg);
  color: var(--_ink);
  font: inherit;
}
.lm-cat-pricef input:focus-visible { outline: 2px solid var(--_accent); outline-offset: 1px; border-color: var(--_accent); }
.lm-cat-pricef__sep { align-self: center; color: var(--_body); padding-bottom: 10px; }
.lm-cat-pricef .lm-btn { flex: 0 0 auto; }

/* Активни филтри — чипове */
.lm-cat-chips-wrap { border-top: 1px solid var(--_line); }
.lm-cat-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
}
.lm-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.lm-cat-chip__x { font-size: 16px; line-height: 1; opacity: .7; }
.lm-cat-chip:hover .lm-cat-chip__x { opacity: 1; }
.lm-cat-chips__clear {
  margin-left: 2px;
  color: var(--_accent);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.lm-cat-chips__clear:hover { text-decoration: underline; }

/* ---------- Чекмедже „Всички филтри" ---------- */
.lm-cat-drawer {
  position: fixed;
  inset: 0;
  z-index: 120;
  visibility: hidden;
}
.lm-cat-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, .38);
  opacity: 0;
  transition: opacity .2s ease;
}
.lm-cat-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  background: var(--_bg);
  transform: translateX(100%);
  transition: transform .24s ease;
}
.lm-cat-drawer__toggle:checked ~ .lm-cat-drawer { visibility: visible; }
.lm-cat-drawer__toggle:checked ~ .lm-cat-drawer .lm-cat-drawer__backdrop { opacity: 1; }
.lm-cat-drawer__toggle:checked ~ .lm-cat-drawer .lm-cat-drawer__panel { transform: translateX(0); }

.lm-cat-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--_line);
}
.lm-cat-drawer__head .lm-h2 { margin: 0; }
.lm-cat-drawer__close { cursor: pointer; }
.lm-cat-drawer__body { flex: 1 1 auto; overflow-y: auto; padding: 4px 16px 16px; -webkit-overflow-scrolling: touch; }
.lm-cat-drawer__foot {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--_line);
  background: var(--_bg);
}
.lm-cat-drawer__apply { flex: 1 1 auto; text-align: center; cursor: pointer; }
.lm-cat-drawer__clear { flex: 0 0 auto; cursor: pointer; }

/* Акордеон в чекмеджето */
.lm-cat-acc { border-bottom: 1px solid var(--_line); }
.lm-cat-acc__head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 12px 2px;
  font-size: 15px;
  font-weight: 600;
  color: var(--_ink);
  cursor: pointer;
  list-style: none;
}
.lm-cat-acc__head::-webkit-details-marker { display: none; }
.lm-cat-acc__head::after {
  content: "";
  width: 10px; height: 10px;
  margin-left: auto;
  border-right: 1.6px solid var(--_body);
  border-bottom: 1.6px solid var(--_body);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.lm-cat-acc[open] .lm-cat-acc__head::after { transform: rotate(-135deg); }
.lm-cat-acc__body { padding-bottom: 10px; }

/* ---------- Решетка ---------- */
.lm-cat-results { padding-top: 18px; }
.lm-cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

/* ---------- Пагинация ---------- */
.lm-cat-pagin {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
}
.lm-cat-pagin__page,
.lm-cat-pagin__nav {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 10px;
  border: 1px solid var(--_line);
  border-radius: 999px;
  color: var(--_ink);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.lm-cat-pagin__page:hover,
.lm-cat-pagin__nav:hover { border-color: var(--_ink); }
.lm-cat-pagin__page.is-cur { background: var(--_accent); border-color: var(--_accent); color: #fff; }
.lm-cat-pagin__nav.is-dis { opacity: .35; pointer-events: none; }

/* ---------- Празно състояние ---------- */
.lm-cat-empty {
  padding: 40px 8px 48px;
  text-align: center;
}
.lm-cat-empty .lm-h2 { margin: 0 0 8px; }
.lm-cat-empty__text { color: var(--_body); margin: 0 auto 18px; max-width: 46ch; }
.lm-cat-empty__label { font-size: 13px; color: var(--_body); margin: 0 0 10px; }
.lm-cat-empty__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

/* ---------- Търсене ---------- */
.lm-cat-search { padding: 22px 0 6px; }
.lm-cat-search__title { margin: 0 0 14px; }
.lm-cat-search__form {
  display: flex;
  gap: 8px;
  max-width: 620px;
}
.lm-cat-search__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  padding: 0 18px;
  border: 1px solid var(--_line);
  border-radius: 999px;
  background: var(--_bg);
  color: var(--_ink);
  font: inherit;
}
.lm-cat-search__input:focus-visible { outline: 2px solid var(--_accent); outline-offset: 1px; border-color: var(--_accent); }
.lm-cat-search__submit { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; }
.lm-cat-search__submit span { display: none; }
.lm-cat-search__count { margin: 12px 0 0; color: var(--_body); font-size: 14px; font-weight: 500; }

/* ---------- SEO описание (сгъваемо) ---------- */
.lm-cat-seo { margin-top: 40px; border-top: 1px solid var(--_line); padding-top: 24px; }
.lm-cat-seo__title { margin: 0 0 10px; font-size: 18px; }
.lm-cat-seo__text {
  color: var(--_body);
  line-height: 1.7;
  max-width: 74ch;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lm-cat-seo__toggle:checked ~ .lm-cat-seo__text { -webkit-line-clamp: unset; overflow: visible; }

/* SEO описанието като HTML (настройка `seo_blocks`): сгъването е по височина,
   защото -webkit-line-clamp не работи върху блок със заглавия и списъци.
   Клампът се слага САМО при дълъг текст — иначе късото описание би останало
   отрязано без бутон „Прочети повече". Типографията идва от .lm-pdp-prose. */
.lm-cat-seo__html { max-width: 74ch; }
.lm-cat-seo__html.is-clamped { max-height: 280px; overflow: hidden; }
.lm-cat-seo__toggle:checked ~ .lm-cat-seo__html.is-clamped { max-height: none; overflow: visible; }
.lm-cat-seo__title--faq { margin-top: 26px; }
.lm-cat-seo__more {
  display: inline-block;
  margin-top: 8px;
  color: var(--_accent);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.lm-cat-seo__more:hover { text-decoration: underline; }
.lm-cat-seo__more-close { display: none; }
.lm-cat-seo__toggle:checked ~ .lm-cat-seo__more .lm-cat-seo__more-open { display: none; }
.lm-cat-seo__toggle:checked ~ .lm-cat-seo__more .lm-cat-seo__more-close { display: inline; }

/* Достъпност: видим фокус върху цели с клавиатура. */
.lm-cat a:focus-visible,
.lm-cat label:focus-visible,
.lm-cat summary:focus-visible,
.lm-cat button:focus-visible { outline: 2px solid var(--_accent); outline-offset: 2px; border-radius: 6px; }

/* ============================ Надграждане ============================ */

@media (min-width: 600px) {
  .lm-cat-subcats__item { flex: 0 0 26%; }
  .lm-cat-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .lm-cat-bar__in { flex-direction: row; align-items: center; justify-content: space-between; }
  .lm-cat-bar__count { order: 2; white-space: nowrap; }
  .lm-cat-bar__pills { order: 1; flex: 1 1 auto; }
  .lm-cat-search__submit span { display: inline; }

  /* Панелите се закачат за самото хапче (не за цялата лента). */
  .lm-cat-drop { position: relative; }
  .lm-cat-drop__panel {
    left: 0;
    right: auto;
    min-width: 240px;
    width: max-content;
    max-width: min(360px, calc(100vw - 32px));
  }
  .lm-cat-drop__panel--price { min-width: 300px; }
}

@media (min-width: 900px) {
  .lm-cat-subcats__item { flex: 0 0 20%; }
  .lm-cat-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .lm-cat-banner__pic { aspect-ratio: 3 / 1; }
  .lm-cat-drawer__body { padding-left: 20px; padding-right: 20px; }
}

@media (min-width: 1200px) {
  .lm-cat-subcats__item { flex: 0 0 16.5%; }
}

/* Без анимации при заявено намаляване на движението. */
@media (prefers-reduced-motion: reduce) {
  .lm-cat-drop__chev,
  .lm-cat-drawer__backdrop,
  .lm-cat-drawer__panel,
  .lm-cat-acc__head::after { transition: none; }
}

/* ---------- „Популярни подборки" (docs/GEO.md, seo.facet_links) ----------
   Ред с хапчета-връзки под решетката; хапчето е базовият .lm-pill, тук само
   подредбата и пренасянето на дълъг текст на втори ред. */
.lm-cat-picks { margin-top: 32px; }
.lm-cat-picks__title { margin: 0 0 12px; font-size: 18px; }
.lm-cat-picks__list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.lm-cat-picks__item { height: auto; min-height: 40px; padding-block: 8px; white-space: normal; line-height: 1.3; }

/* ============================================================================
   ФАСЕТИ (docs/FASETI.md §9.3) — партиал partials/facets.blade.php.
   Излиза САМО при включен `shop_settings.facets` (днес — Inter Power); при
   изключен в HTML-а няма нито един клас lm-facets* и правилата тук спят.
   Само класове lm-facets*; днешните .lm-cat-* правила НЕ се променят.
   Визията е на темата: бяло, хеърлайн рамки, хапчета 999 px, акцентът
   (--lm-accent) само за избраното; броевете приглушени.
   Телефон (< 900 px): хапчетата се превъртат в един ред, чекмеджето е долен
   лист над плаващото меню. ≥ 900 px: хапчетата се пренасят, панел отдясно.
   ========================================================================== */

/* Коренът не прави кутия: лепкавата лента вътре трябва да „вижда" цялата
   страница (.lm-cat) като свой контейнер, иначе би залепнала само в себе си. */
.lm-facets {
  display: contents;
  --lmf-ink: var(--lm-ink, #111);
  --lmf-body: var(--lm-body, #5f5f5f);
  --lmf-soft: var(--lm-soft, #6b6b6b);
  --lmf-bg: var(--lm-bg, #fff);
  --lmf-surface: var(--lm-surface, #f5f5f3);
  --lmf-line: var(--lm-line, #e4e4e1);
  --lmf-accent: var(--lm-accent, #205b80);
  --lmf-box: #8c8c89; /* рамката на празното квадратче — по-тъмна от хеърлайна, за да се вижда */
  --lmf-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- Лента ---------- */
.lm-facets__bar {
  position: sticky;
  top: var(--lm-hd-sticky, 0px);
  z-index: 30;
  background: var(--lmf-bg);
  border-bottom: 1px solid var(--lmf-line);
  margin-top: 6px;
}
/* Контейнерът на падащите панели на телефон: така те не се режат от
   хоризонталния скрол на хапчетата (той е static, панелът е absolute). */
.lm-facets__in {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-block: 10px;
}
.lm-facets__scroll {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* до ръба на екрана, но първото хапче стои на полето от 16 px */
  margin-inline: -16px;
  padding: 2px 16px;
  scroll-padding-inline: 16px;
}
.lm-facets__scroll::-webkit-scrollbar { display: none; }
.lm-facets__total {
  margin: 0;
  color: var(--lmf-body);
  font-size: 14px;
  font-weight: 500;
}

.lm-facets__all,
.lm-facets__pill { flex: 0 0 auto; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.lm-facets__all { font-weight: 600; }
.lm-facets__pill { list-style: none; }
.lm-facets__pill::-webkit-details-marker { display: none; }
/* Избраното: акцентна рамка и текст (без запълване — като днешните хапчета). */
.lm-facets__pill--on { border-color: var(--lmf-accent); color: var(--lmf-accent); }
.lm-facets__count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--lmf-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.lm-facets__chev { flex: 0 0 auto; transition: transform .18s ease; }
.lm-facets__drop[open] .lm-facets__chev { transform: rotate(180deg); }

/* Падащ панел: на телефон — на цялата ширина под лентата. */
.lm-facets__drop { position: static; flex: 0 0 auto; }
.lm-facets__panel {
  position: absolute;
  top: 100%;
  left: 16px;
  right: 16px;
  margin-top: 2px;
  z-index: 40;
  background: var(--lmf-bg);
  border: 1px solid var(--lmf-line);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(17, 17, 17, .10);
  padding: 6px;
  max-height: min(60vh, 440px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.lm-facets__panel--form { padding: 16px; }

/* Опция в панел на хапче (връзка с квадратче, етикет и брой) */
.lm-facets__opt {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--lmf-ink);
  font-size: 15px;
  text-decoration: none;
}
.lm-facets__opt:hover { background: var(--lmf-surface); }
.lm-facets__opt.is-on { font-weight: 600; }
.lm-facets__lbl { flex: 1 1 auto; min-width: 0; }
.lm-facets__tick { flex: 0 0 auto; color: var(--lmf-accent); }
.lm-facets__box {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--lmf-box);
  border-radius: 4px;
  background: var(--lmf-bg) center / 14px no-repeat;
}
.lm-facets__opt.is-on .lm-facets__box { background-color: var(--lmf-accent); border-color: var(--lmf-accent); background-image: var(--lmf-tick); }
.lm-facets__n {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--lmf-soft);
  font-size: 13px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.lm-facets__swatch {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .18);
}
.lm-facets__clear {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  border-top: 1px solid var(--lmf-line);
  margin-top: 4px;
  color: var(--lmf-accent);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.lm-facets__clear:hover { text-decoration: underline; }

/* „от–до" (хапче и чекмедже) */
.lm-facets__fields { display: flex; align-items: flex-end; gap: 10px; }
.lm-facets__field { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lm-facets__cap { font-size: 12px; color: var(--lmf-body); }
.lm-facets__input { position: relative; display: flex; align-items: center; }
.lm-facets__input input {
  width: 100%;
  height: 44px;
  padding: 0 44px 0 16px;
  border: 1px solid var(--lmf-line);
  border-radius: 999px;
  background: var(--lmf-bg);
  color: var(--lmf-ink);
  font: inherit;
  font-size: 16px; /* < 16 px → iPhone увеличава страницата при фокус */
  -moz-appearance: textfield;
  appearance: textfield;
}
.lm-facets__input input::-webkit-outer-spin-button,
.lm-facets__input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.lm-facets__input input::placeholder { color: #9a9a97; }
.lm-facets__input input:focus-visible { outline: 2px solid var(--lmf-accent); outline-offset: 1px; border-color: var(--lmf-accent); }
.lm-facets__unit {
  position: absolute;
  right: 16px;
  color: var(--lmf-soft);
  font-size: 13px;
  pointer-events: none;
}
.lm-facets__sep { align-self: flex-end; padding-bottom: 12px; color: var(--lmf-body); }
.lm-facets__hint { margin: 8px 0 0; font-size: 12.5px; color: var(--lmf-soft); }
.lm-facets__actions { display: flex; gap: 8px; margin-top: 14px; }
.lm-facets__actions .lm-btn { flex: 1 1 auto; }

/* Активни филтри — чипове (на телефон в един превъртащ се ред) */
.lm-facets__chips-wrap { border-top: 1px solid var(--lmf-line); }
.lm-facets__chips {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  margin-inline: -16px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.lm-facets__chips::-webkit-scrollbar { display: none; }
.lm-facets__chip {
  position: relative;
  flex: 0 0 auto;
  gap: 6px;
  height: 36px;
  padding: 0 12px 0 14px;
  color: var(--lmf-ink);
  font-size: 13.5px;
  text-decoration: none;
}
/* Зона за докосване ≥ 44 px без по-висок чип. */
.lm-facets__chip::after { content: ""; position: absolute; inset: -4px 0; }
.lm-facets__chip:hover { background: #ebebe8; }
.lm-facets__chip-x { font-size: 17px; line-height: 1; opacity: .65; }
.lm-facets__chip:hover .lm-facets__chip-x { opacity: 1; }
.lm-facets__clear-all {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 6px;
  color: var(--lmf-accent);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.lm-facets__clear-all:hover { text-decoration: underline; }

/* ---------- Чекмедже „Всички филтри" (телефон: долен лист) ---------- */
/* z-index над плаващото долно меню (70) и листа с категориите (80): бутоните
   на листа не бива да се крият зад менюто. */
.lm-facets-drawer {
  position: fixed;
  inset: 0;
  z-index: 120;
  visibility: hidden;
  transition: visibility 0s linear .28s; /* скрива се СЛЕД анимацията */
}
.lm-facets-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, .38);
  opacity: 0;
  transition: opacity .2s ease;
}
.lm-facets-drawer__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 88vh;
  max-height: 88dvh;
  display: flex;
  flex-direction: column;
  background: var(--lmf-bg);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -12px 40px rgba(17, 17, 17, .14);
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.2, .8, .2, 1);
}
.lm-facets-drawer__toggle:checked ~ .lm-facets-drawer { visibility: visible; transition-delay: 0s; }
.lm-facets-drawer__toggle:checked ~ .lm-facets-drawer .lm-facets-drawer__backdrop { opacity: 1; }
.lm-facets-drawer__toggle:checked ~ .lm-facets-drawer .lm-facets-drawer__panel { transform: none; }

.lm-facets-drawer__grip {
  flex: 0 0 auto;
  width: 40px;
  height: 4px;
  margin: 8px auto 0;
  border-radius: 999px;
  background: var(--lmf-line);
}
.lm-facets-drawer__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 8px 8px 16px;
  border-bottom: 1px solid var(--lmf-line);
}
.lm-facets-drawer__head .lm-h2 { margin: 0; font-size: 20px; }
.lm-facets-drawer__close { cursor: pointer; }
.lm-facets-drawer__form { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin: 0; }
.lm-facets-drawer__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px 16px;
}
/* Долната лента с бутоните е залепена и над safe-area (iPhone с жест). */
.lm-facets-drawer__foot {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--lmf-line);
  background: var(--lmf-bg);
}
/* На 360 px двата бутона не се побират на един ред с nowrap и 24 px поле —
   по-тясно поле и пренасяне на текста вместо изрязан бутон. */
.lm-facets-drawer__foot .lm-btn { min-width: 0; padding: 0 16px; white-space: normal; line-height: 1.15; }
.lm-facets-drawer__apply { flex: 1 1 auto; }
.lm-facets-drawer__clear { flex: 0 1 auto; }

/* Група в чекмеджето (акордеон) */
.lm-facets-group { border-bottom: 1px solid var(--lmf-line); }
.lm-facets-group__head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 12px 2px;
  font-size: 15px;
  font-weight: 600;
  color: var(--lmf-ink);
  cursor: pointer;
  list-style: none;
}
.lm-facets-group__head::-webkit-details-marker { display: none; }
.lm-facets-group__head::after {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin: 0 4px 3px auto;
  border-right: 1.6px solid var(--lmf-body);
  border-bottom: 1.6px solid var(--lmf-body);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.lm-facets-group[open] > .lm-facets-group__head::after { transform: rotate(-135deg); margin-bottom: -3px; }
.lm-facets-group__body { padding: 0 2px 14px; }
.lm-facets-group__clear {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  margin-top: 4px;
  color: var(--lmf-accent);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.lm-facets-group__clear:hover { text-decoration: underline; }

/* Отметка с брой: истински <input type=checkbox>, само изрисуван (квадрат 20 px). */
.lm-facets-check {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 4px 0;
  color: var(--lmf-ink);
  font-size: 15px;
  cursor: pointer;
}
.lm-facets-check input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1.5px solid var(--lmf-box);
  border-radius: 4px;
  background: var(--lmf-bg) center / 14px no-repeat;
  cursor: pointer;
}
.lm-facets-check input[type="checkbox"]:checked { background-color: var(--lmf-accent); border-color: var(--lmf-accent); background-image: var(--lmf-tick); }
.lm-facets-check input[type="checkbox"]:focus-visible { outline: 2px solid var(--lmf-accent); outline-offset: 2px; }
.lm-facets-check:hover input[type="checkbox"]:not(:checked) { border-color: var(--lmf-ink); }
.lm-facets-check__lbl { flex: 1 1 auto; min-width: 0; }
.lm-facets-check input:checked ~ .lm-facets-check__lbl { font-weight: 600; }

/* „Още N" / „По-малко" */
.lm-facets-more > summary { list-style: none; }
.lm-facets-more > summary::-webkit-details-marker { display: none; }
.lm-facets-more__btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--lmf-accent);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.lm-facets-more__close { display: none; }
.lm-facets-more[open] > .lm-facets-more__btn .lm-facets-more__open { display: none; }
.lm-facets-more[open] > .lm-facets-more__btn .lm-facets-more__close { display: inline; }

/* ---------- Плъзгач за диапазони (docs/FASETI.md §14.4) ----------
   Два наложени <input type=range> без name (адресът идва от полетата „от–до");
   пистата и запълването са отделни елементи. category.js показва плъзгача и
   пише позициите (--lmf-pos-a/b) и цветовете на дръжките (--lmf-thumb-a/b).
   Дръжка 22 px → центърът ѝ върви от 11 px до ширината − 11 px; пистата,
   запълването и отметките са със същото поле, за да съвпадат. */
.lm-facets__slider {
  --lmf-pos-a: 0%;
  --lmf-pos-b: 100%;
  --lmf-thumb-a: var(--lmf-accent);
  --lmf-thumb-b: var(--lmf-accent);
  position: relative;
  height: 44px; /* зона за докосване */
  margin: 2px 0 8px;
  touch-action: pan-y;
}
.lm-facets__slider[hidden] { display: none; }
/* Цветовете на светлината по скалата 2000–6500 K (FacetSlider::KELVIN_MIN/MAX):
   по приближението на Танър Хеланд за черно тяло, със студения край леко
   по-син, за да се вижда на бял фон. ⚠️ Същите точки са в category.js (KELVIN). */
.lm-facets__slider--kelvin {
  --lmf-kelvin: linear-gradient(90deg, #f2862a 0%, #f9a54e 15.556%, #fdb96e 22.222%, #fde6c6 44.444%, #e9eef7 66.667%, #bcd4f3 100%);
  margin-bottom: 28px; /* място за отметките */
}
.lm-facets__track {
  position: absolute;
  left: 11px;
  right: 11px;
  top: 50%;
  height: 6px;
  margin-top: -3px;
  border-radius: 999px;
  background: var(--lmf-line);
  overflow: hidden;
}
.lm-facets__slider--kelvin .lm-facets__track {
  height: 12px;
  margin-top: -6px;
  background: var(--lmf-kelvin);
  box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .12);
}
.lm-facets__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--lmf-pos-a);
  right: calc(100% - var(--lmf-pos-b));
  background: var(--lmf-accent);
}
/* Келвините: избраното остава в пълен цвят, извън него — избледняло. */
.lm-facets__slider--kelvin .lm-facets__fill { background: transparent; box-shadow: 0 0 0 999px rgba(255, 255, 255, .6); }

.lm-facets__thumb {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0;
  background: none;
  pointer-events: none; /* хваща се само дръжката — двата плъзгача са един над друг */
  -webkit-appearance: none;
  appearance: none;
}
.lm-facets__thumb--min { --lmf-thumb: var(--lmf-thumb-a); }
.lm-facets__thumb--max { --lmf-thumb: var(--lmf-thumb-b); }
.lm-facets__thumb:focus { outline: none; }
.lm-facets__thumb::-webkit-slider-runnable-track { height: 44px; background: none; border: 0; }
.lm-facets__thumb::-moz-range-track { height: 44px; background: none; border: 0; }
.lm-facets__thumb::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  margin-top: 11px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--lmf-thumb);
  box-shadow: 0 0 0 1px rgba(17, 17, 17, .3), 0 2px 6px rgba(17, 17, 17, .22);
  cursor: grab;
}
.lm-facets__thumb::-moz-range-thumb {
  pointer-events: auto;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--lmf-thumb);
  box-shadow: 0 0 0 1px rgba(17, 17, 17, .3), 0 2px 6px rgba(17, 17, 17, .22);
  cursor: grab;
}
.lm-facets__thumb:active::-webkit-slider-thumb { cursor: grabbing; }
.lm-facets__thumb:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--lmf-accent); }
.lm-facets__thumb:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--lmf-accent); }

/* Отметките под пистата: 2700 и 3000 са близо — първата се подравнява вдясно
   от чертичката си, втората вляво, последната вдясно (иначе излиза от реда). */
.lm-facets__marks {
  position: absolute;
  left: 11px;
  right: 11px;
  top: 100%;
  height: 22px;
  margin-top: -6px;
}
.lm-facets__mark {
  position: absolute;
  top: 0;
  padding-top: 7px;
  transform: translateX(-50%);
  color: var(--lmf-soft);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  white-space: nowrap;
}
.lm-facets__mark::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 5px;
  background: var(--lmf-box);
}
.lm-facets__mark:first-child { transform: translateX(-100%); }
.lm-facets__mark:first-child::before { left: auto; right: 0; }
.lm-facets__mark:nth-child(2) { transform: none; }
.lm-facets__mark:nth-child(2)::before { left: 0; }
.lm-facets__mark:last-child { transform: translateX(-100%); }
.lm-facets__mark:last-child::before { left: auto; right: 0; }

/* Бързите избори („Топло", „Неутрално", „Студено") — в тесен панел една под друга,
   на ≥ 480 px (контейнерна заявка; по-тесни три плочки режат текста) три в ред.
   Всяка плочка: цветна точка, пълното име с диапазона дребно под него, отдясно
   броят в малък сив бадж. */
.lm-facets__presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; container-type: inline-size; }
.lm-facets__preset {
  flex: 1 1 100%;
  min-width: 0;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "dot lbl n" "dot k n";
  align-items: center;
  column-gap: 10px;
  row-gap: 1px;
  min-height: 52px;
  padding: 8px 12px;
  border: 1px solid var(--lmf-line);
  border-radius: 10px;
  background: var(--lmf-bg);
  color: var(--lmf-ink);
  font-size: 14px;
  line-height: 1.25;
  text-decoration: none;
}
.lm-facets__preset:hover { border-color: var(--lmf-ink); }
.lm-facets__preset:focus-visible { outline: 2px solid var(--lmf-accent); outline-offset: 2px; }
.lm-facets__preset.is-on {
  border-color: var(--lmf-accent);
  background: var(--lmf-surface);
  box-shadow: inset 0 0 0 1px var(--lmf-accent);
}
.lm-facets__preset-dot {
  grid-area: dot;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--lmf-dot, var(--lmf-line));
  box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .18);
}
.lm-facets__preset.is-on .lm-facets__preset-dot { box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .18), 0 0 0 2px var(--lmf-surface), 0 0 0 3.5px var(--lmf-accent); }
.lm-facets__preset--toplo { --lmf-dot: #fbaf5e; }
.lm-facets__preset--neutralno { --lmf-dot: #fde0b8; }
.lm-facets__preset--studeno { --lmf-dot: #d3e1f5; }
.lm-facets__preset-lbl { grid-area: lbl; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.lm-facets__preset.is-on .lm-facets__preset-lbl { font-weight: 700; }
.lm-facets__preset-k { grid-area: k; min-width: 0; color: var(--lmf-soft); font-size: 12px; font-weight: 400; white-space: nowrap; }
.lm-facets__preset .lm-facets__n {
  grid-area: n;
  margin: 0 0 0 4px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--lmf-surface);
  font-size: 12px;
  line-height: 1.5;
}
.lm-facets__preset.is-on .lm-facets__n { background: var(--lmf-bg); color: var(--lmf-ink); }
@container (min-width: 480px) {
  .lm-facets__preset {
    flex-basis: calc((100% - 12px) / 3 - 1px);
    grid-template-areas: "dot lbl n" "dot k k";
    column-gap: 8px;
    padding-inline: 10px;
  }
  .lm-facets__preset .lm-facets__n { margin-left: 0; }
}

/* Отметките на обединената група под полетата „от–до" */
.lm-facets__more-opts { margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--lmf-line); }

/* ============================ ≥ 900 px ============================ */
@media (min-width: 900px) {
  .lm-facets__in { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }
  .lm-facets__scroll { flex: 1 1 auto; flex-wrap: wrap; overflow: visible; margin-inline: 0; padding: 0; }
  .lm-facets__total { white-space: nowrap; }

  /* Панелът се закача за самото хапче. */
  .lm-facets__drop { position: relative; }
  .lm-facets__panel {
    left: 0;
    right: auto;
    margin-top: 8px;
    min-width: 260px;
    width: max-content;
    max-width: min(380px, calc(100vw - 32px));
  }
  .lm-facets__panel--form { min-width: 320px; }

  .lm-facets__chips { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding: 10px 0; }

  /* Чекмеджето е панел отдясно (както днешното). */
  .lm-facets-drawer__panel {
    top: 0;
    left: auto;
    width: 100%;
    max-width: 420px;
    height: 100%;
    max-height: none;
    border-radius: 0;
    box-shadow: -12px 0 40px rgba(17, 17, 17, .10);
    transform: translateX(100%);
  }
  .lm-facets-drawer__grip { display: none; }
  .lm-facets-drawer__head { padding: 14px 12px 14px 20px; }
  .lm-facets-drawer__body { padding: 0 20px 20px; }
  .lm-facets-drawer__foot { padding: 14px 20px; }
}

/* Без анимации при заявено намаляване на движението. */
@media (prefers-reduced-motion: reduce) {
  .lm-facets__chev,
  .lm-facets-drawer,
  .lm-facets-drawer__backdrop,
  .lm-facets-drawer__panel,
  .lm-facets-group__head::after { transition: none; }
}