/* ═══════════════════════════════════════════════════════════════════
   mimiart.bg - мостът към токените на темата

   Зарежда се СЛЕД `main.css` и след `koja-mimiart-dizajn.css`.

   Защо се презаписва СУРОВАТА палитра, а не семантичните роли:
   `main.css` е едновременно основата И кожата на Loralux. Теракотата
   и Manrope стоят в неговия `:root`, няма отделен `koja-loralux.css`.
   Семантичните имена (`--surface-page`, `--action-primary`) сочат към
   суровите (`--paper-100`, `--clay-400`), тоест смяната на суровите
   премества всичко наведнъж и нищо не остава забравено. Поотделно се
   пипат само местата, където mimiart РАЗДЕЛЯ нещо, което темата
   държи слято - марката и действието.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Шрифтове ─────────────────────────────────────────────────────
   Локални woff2, субсетнати с кирилица - без заявка към Google,
   без IP на посетителя навън и без блокирано рендиране. */
@font-face{font-family:'Rubik';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/rubik-400.woff2') format('woff2')}
@font-face{font-family:'Rubik';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/rubik-500.woff2') format('woff2')}
@font-face{font-family:'Rubik';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/rubik-600.woff2') format('woff2')}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/golostext-400.woff2') format('woff2')}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/golostext-500.woff2') format('woff2')}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/golostext-600.woff2') format('woff2')}

/* Резервни с изравнени метрики. Числата са СМЕТНАТИ от самите woff2
   с fontTools (средна ширина на буквите плюс hhea метриките), не
   предположени - виж `tools/build_fonts_mimiart.py`. Без тях смяната
   на шрифта мести текста и Lighthouse го брои като разместване. */
@font-face{font-family:'Rubik Fallback';src:local('Arial');size-adjust:102.03%;ascent-override:91.64%;descent-override:24.5%;line-gap-override:0%}
@font-face{font-family:'Golos Fallback';src:local('Arial');size-adjust:105.13%;ascent-override:93.22%;descent-override:20.93%;line-gap-override:0%}

:root{
  /* ── Хартия: почти бяла, с едва доловим розов отенък ──────────────
     Розовото е ЗАГАТВАНЕ, не основен цвят (Никола, 22.10.2026). Преди
     това страницата беше #FFF1F3 и всичко плуваше в розово: лентата
     горе, фонът под снимките, полето на слайда. Сега носителят е бялото,
     а розовото остава само там, където казва чия е марката - знакът,
     значката „Ново", активната точка на плъзгача, ръбът при посочване.

     Неутралните не са сиви: в тях има следа от розовото, за да не
     изглеждат студени до него. */
  --paper-50:#FFFFFF;
  --paper-100:#FCFBFC;
  --paper-200:#F4F1F2;
  --paper-300:#E8E3E5;
  --paper-400:#CFC8CB;
  --paper-500:#A89DA1;

  /* ── Мастило ───────────────────────────────────────────────────── */
  --ink-900:#2E2226;
  --ink-800:#3A2C31;
  --ink-700:#54434A;
  --ink-600:#6E5A60;
  --ink-500:#8A7076;
  --ink-400:#A8939A;

  /* ── „Глина" вече е ПЕТРОЛЕНО СИНЬО ────────────────────────────
     Темата черпи от тази скала и за действието, и за марката. В
     mimiart двете са различни цветове, затова тук стои действието,
     а марката се отделя по-долу. Името на скалата не се сменя -
     то е част от основата и смяната му би поискала редакция в
     `main.css`, който е общ за трите сайта. */
  --clay-50:#E8F1F5;
  --clay-100:#CFE3EC;
  --clay-200:#8FC0D4;
  --clay-400:#1B5E7E;
  --clay-500:#174F6A;
  --clay-600:#123D52;

  /* ── Розово: самата марка ──────────────────────────────────────── */
  --rose-50:#FFF1F3;
  --rose-100:#F8E4E9;
  --rose-200:#EFC3CF;
  --rose-400:#D4749A;
  --rose-500:#C2185B;
  --rose-600:#A3134C;

  /* ── Второстепенни скали, пренасочени към розовото ─────────────── */
  --sage-50:#F3F7F5;
  --sage-100:#DCEAE4;
  --sage-400:#2E8A68;
  --sage-500:#1F7A5A;
  --moss-50:#E6F4EE;
  --moss-400:#1F7A5A;
  --rust-400:#C2185B;
  --ochre-200:#F3D2A6;
  --ochre-300:#D99B4A;

  /* ── Текст ─────────────────────────────────────────────────────
     Връзката и акцентът са ПЕТРОЛЕНИ, не розови: розовото е 2,4:1
     върху бяло и не може да носи дребен текст. */
  --text-accent:var(--clay-500);
  --text-link:var(--clay-500);
  --text-link-hover:var(--clay-600);
  --text-subtle:var(--ink-600);

  /* ── Действие ──────────────────────────────────────────────────── */
  --action-primary:var(--clay-400);
  --action-primary-hover:var(--clay-500);
  --action-primary-fg:#FFFFFF;

  /* ── Марка: тук и само тук розовото ───────────────────────────── */
  --brand:var(--rose-400);
  --brand-dark:var(--rose-500);
  --brand-soft:var(--rose-100);
  --accent:var(--rose-400);
  --accent-soft:var(--rose-100);
  --sale:var(--rose-500);

  /* ── Значки и състояния ────────────────────────────────────────
     „Ново" е розово поле с МАСТИЛЕН текст, не розов текст. */
  --badge-new-surface:var(--rose-100);
  --badge-new-fg:var(--ink-900);
  --status-success:#1F7A5A;
  --status-success-surface:#E6F4EE;
  --status-danger:var(--rose-500);
  --line-focus:var(--clay-400);

  /* ── Шрифтове ──────────────────────────────────────────────────── */
  --font-display:var(--mi-font-display);
  --font-sans:var(--mi-font-text);

  /* Golos Text е по-тесен от Manrope, тоест същият размер се чете
     по-дребен. Основният текст се вдига с един пункт. */
  --type-body:16px;
  --type-body-sm:14.5px;
  --type-caption:13px;

  /* Rubik е гротеска, не серифен шрифт: заглавията не искат
     отрицателна разредка колкото Playfair. */
  --tracking-display:-.012em;

  /* ── Радиуси: скалата на дизайн системата ──────────────────────── */
  --radius-xs:6px;
  --radius-sm:8px;
  --radius-md:10px;
  --radius-lg:16px;
  --radius-media:16px;
  --radius-card:16px;

  /* ── Сенки: тонирани в мастилото на кожата, никога неутрално черни ── */
  --shadow-sm:0 1px 2px rgba(46,34,38,.05);
  --shadow-card:0 1px 2px rgba(46,34,38,.04),0 8px 24px -12px rgba(46,34,38,.10);
  --shadow-lifted:0 2px 4px rgba(46,34,38,.05),0 18px 40px -16px rgba(46,34,38,.16);
  --shadow-button:0 18px 40px -16px rgba(27,94,126,.28);
  --shadow-overlay:0 24px 60px -20px rgba(46,34,38,.30);
  --glass-light:rgba(255,255,255,.90);
  --surface-scrim:rgba(46,34,38,.44);
}

/* ── Основният бутон ──────────────────────────────────────────────
   `main.css` закотвя `.btn--primary` ТВЪРДО върху `--clay-500`
   заради един контрастен проблем на Loralux (бял текст върху
   теракота беше 3,65). Тук скалата вече е петролена, тоест
   правилото работи в наша полза - но го повтаряме изрично, за да
   не зависим от чужда поправка, която утре може да се промени. */
.btn--primary,
.btn--primary:link,
.btn--primary:visited{background:var(--clay-400);border-color:var(--clay-400)}
.btn--primary:hover{background:var(--clay-500);border-color:var(--clay-500)}

/* ── Тъмните блокове ──────────────────────────────────────────────
   Колонтитулът и тъмните секции стъпват на мастилото на кожата, а
   приглушеният текст в тях сочи НАГОРЕ по стълбицата, не надолу. */
.section--dark,
.site-footer{
  background:var(--ink-900);
  --text-subtle:var(--paper-300);
  --text-muted:var(--paper-200);
  --text-body:var(--paper-200);
}

/* ── Знакът ───────────────────────────────────────────────────────
   Розетата е `currentColor`, тоест се пребоядисва с един ред, без
   втори файл. В колонтитула фонът е тъмен и розовото губи сила -
   там знакът светва. */
.brand-mark{color:var(--rose-400)}
.site-footer .brand-mark{color:var(--rose-200)}
/* Връзките в колонтитула са бели: петролът на действието не се чете върху мастилото. */
.site-footer{--footer-link:#FFFFFF;--footer-link-hover:var(--rose-200)}

/* ── Полета за писане ─────────────────────────────────────────────
   Рамката на поле е СОБСТВЕН токен, по-тъмен от косъма между
   картите: косъмът дели, рамката огражда и трябва да се види. */
input:not([type=checkbox]):not([type=radio]),
select,
textarea{border-color:var(--mi-border-control)}
input:focus,
select:focus,
textarea:focus{border-color:var(--mi-focus);outline-color:var(--mi-focus)}

/* Знакът в колонтитула и в чекмеджето: вграденият SVG е 64x64 по рождение. */
.site-footer .brand-mark,
.drawer__head .brand-mark{width:26px;height:26px;vertical-align:middle}
.site-footer__logo,
.drawer__head{display:flex;align-items:center;gap:8px}

/* ═══ Начална страница ══════════════════════════════════════════════

   Героят: всеки слайд е една категория с илюстрация. Картината е
   нарисувана върху ТОЧНО фона на слайда (#F4F1F2 = paper-200), с празна
   лява част, тоест текстът стои върху нея без шев и без воал.

   На широк екран картината е `contain` и се долепя вдясно: слайдът е
   по-широк от нейните 3:2, затова тя заема цялата височина и нищо не се
   изрязва (при `cover` горе и долу падаха върховете на торбичките).

   Никаква анимация от прозрачност в първия екран: fade-in от
   `opacity: 0` отлага LCP точно с времето на анимацията. */

.mi-promo{padding:clamp(14px,2vw,24px) 0 0}
/* `min-width: 0` е задължително: клетка в grid/flex не пада под
   min-content на съдържанието си и лентата би станала широка колкото
   СБОРА на слайдовете. */
.mi-promo__lenta{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;min-width:0}
.mi-promo__lenta::-webkit-scrollbar{display:none}
/* `scroll-snap-stop: always`: по-силно плъзгане на телефон прескачаше
   втория слайд и стигаше направо третия (Никола, 24.10.2026). */

.mi-slaid{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;min-width:0;position:relative;display:flex;align-items:center;min-height:clamp(320px,36vw,440px);border-radius:var(--radius-lg);overflow:hidden;background:var(--paper-200);color:var(--ink-900)}
.mi-slaid__fon{position:absolute;inset:0;display:block}
.mi-slaid__fon img{display:block;width:100%;height:100%;object-fit:contain;object-position:right center}
.mi-slaid__copy{position:relative;z-index:1;width:min(46%,500px);padding:clamp(24px,4.4vw,60px)}

.mi-slaid__nadpis{font-size:12.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;margin:0;color:var(--ink-600)}
.mi-slaid__zaglavie{font-family:var(--font-display);font-weight:500;font-size:clamp(28px,3.5vw,46px);line-height:1.06;margin:10px 0 0;letter-spacing:-.015em;text-wrap:balance;color:var(--ink-900)}
.mi-slaid__oferta{font-size:16.5px;line-height:1.5;margin:12px 0 0;max-width:36ch;color:var(--ink-700)}
.mi-slaid__dolu{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px;margin-top:22px}
.mi-slaid__buton{display:inline-block;padding:12px 24px;border-radius:var(--radius-pill);font-weight:500;font-size:15.5px;text-decoration:none;background:var(--clay-400);color:#FFFFFF;transition:background var(--dur-fast) var(--ease-standard)}
.mi-slaid__buton:hover{background:var(--clay-500)}
.mi-slaid__buton:focus-visible{outline:2px solid var(--clay-400);outline-offset:3px}
.mi-slaid__cena{margin:0;font-size:14.5px;color:var(--ink-600)}
.mi-slaid__cena strong{font-family:var(--font-display);font-weight:500;font-size:20px;color:var(--ink-900);font-variant-numeric:tabular-nums}

.mi-promo__nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px}
.mi-strelka{width:38px;height:38px;border-radius:var(--radius-pill);border:1px solid var(--paper-300);background:var(--surface-card);color:var(--ink-700);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.mi-strelka:hover{border-color:var(--mi-border-control)}
.mi-promo__tochki{display:flex;gap:8px;align-items:center}
.mi-tochka{width:9px;height:9px;padding:0;border:0;border-radius:var(--radius-pill);background:var(--paper-400);cursor:pointer;transition:width var(--dur-fast) var(--ease-standard),background var(--dur-fast) var(--ease-standard)}
.mi-tochka.e-tekushta{background:var(--rose-400);width:26px}

/* Секциите под героя са в ПО-ТЕСЕН контейнер: четири карти на ред при
   1032 px съдържание, не три на 1152. Три на ред правеха всяка карта
   висока половин екран („огромни по целия екран", 22.10.2026). */
.mi-tyasno{max-width:1120px}
.mi-sekciya{padding-top:clamp(40px,5.5vw,72px);padding-bottom:0}
.mi-sekciya__glava{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:clamp(14px,2vw,22px)}
.mi-sekciya__glava h2{font-family:var(--font-display);font-weight:500;font-size:clamp(22px,2.3vw,28px);line-height:1.15;margin:0;letter-spacing:-.01em;color:var(--ink-900)}
.mi-sekciya__vsichki{font-size:15px;color:var(--text-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;white-space:nowrap}
.mi-sekciya__vsichki:hover{color:var(--text-link-hover)}

/* Снимките на материалите са квадратни (миниатюрите на този сайт са
   300x300, изрязани), а рамката на картата беше 3:4 от гоблените: страните
   на всяка рамка и торбичка падаха. Квадратът е и по-нисък - картата се
   събира в по-малко височина. */
.product-card__media{aspect-ratio:1/1}

/* Категориите: плочка = илюстрация + име. Фонът на плочката е фонът на
   илюстрацията, тоест картината няма ръб. Снимките се хващат с потомствен
   селектор: WebP буферът ги обвива в <picture>. */
.mi-kategorii{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.mi-kategorii > li{margin:0;min-width:0}
.mi-kat{display:flex;flex-direction:column;height:100%;text-decoration:none;color:var(--ink-900);background:var(--paper-200);border-radius:var(--radius-lg);overflow:hidden}
.mi-kat__snimka{display:block;aspect-ratio:1/1;overflow:hidden}
.mi-kat__snimka img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--transition-media)}
.mi-kat__ime{display:block;padding:4px 16px 0;font-family:var(--font-display);font-weight:500;font-size:17px;line-height:1.25}
.mi-kat__broy{display:block;padding:4px 16px 16px;font-size:13.5px;color:var(--ink-600)}
.mi-kat:focus-visible{outline:2px solid var(--clay-400);outline-offset:3px}
/* Категория без илюстрация: първата буква на името, приглушена. */
.mi-kat__snimka--prazna{display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:500;font-size:64px;color:var(--paper-400)}
/* Много категории (прегледът на цялото дърво): пет на ред на широк екран. */
@media (min-width:1024px){ .mi-kategorii--mnogo{grid-template-columns:repeat(5,minmax(0,1fr))} }
@media (min-width:640px) and (max-width:1023px){ .mi-kategorii--mnogo{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (hover:hover){
  .mi-kat:hover .mi-kat__snimka img{transform:scale(1.04)}
  .mi-kat:hover .mi-kat__ime{color:var(--clay-500)}
}

/* В чекмеджето: редове като другите връзки, с малка иконка вляво
   (`anlora_mi_kategorii_mreja( 'chekmedzhe' )`). */
.mi-chekmedzhe__etiket{margin:4px 4px 0;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-600)}
.mi-kat-redove{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-direction:column;gap:2px}
.mi-kat-redove > li{margin:0}
.mi-kat-red{justify-content:flex-start;padding-block:8px}
.mi-kat-red__ikona{flex:0 0 36px;width:36px;height:36px;border-radius:var(--radius-sm);overflow:hidden;background:var(--paper-200);display:flex;align-items:center;justify-content:center}
/* Илюстрацията е с широко празно поле; в 36 px то се изрязва, за да се види предметът. */
.mi-kat-red__ikona img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.35)}
.mi-kat-red__ikona--prazna{font-family:var(--font-display);font-weight:500;font-size:16px;color:var(--paper-400)}
.mi-kat-red__ime{flex:1 1 auto;min-width:0}
.mi-kat-red__strelka{flex:0 0 auto;color:var(--paper-400)}

/* Защо тук: три точки на един ред, без карти. Тънък косъм отгоре ги
   отделя от стоката; кутии около всяка правеха секцията по-тежка от
   самата стока. */
.mi-zashto{padding-bottom:clamp(56px,7vw,96px)}
.mi-zashto__zaglavie{font-family:var(--font-display);font-weight:500;font-size:clamp(22px,2.3vw,28px);line-height:1.15;margin:0 0 clamp(16px,2vw,22px);letter-spacing:-.01em;color:var(--ink-900)}
.mi-zashto__spisak{list-style:none;margin:0;padding:clamp(20px,2.6vw,28px) 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.6vw,36px);border-top:1px solid var(--paper-300)}
.mi-zashto__tochka{margin:0}
.mi-zashto__ikona{display:block;color:var(--clay-400);margin-bottom:12px}
.mi-zashto__tochka h3{font-family:var(--font-display);font-weight:500;font-size:17px;line-height:1.3;margin:0 0 6px;color:var(--ink-900)}
.mi-zashto__tochka p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-600);max-width:34ch}

@media (max-width:860px){
  .mi-slaid__copy{width:min(52%,440px)}
  .mi-kategorii{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .mi-zashto__spisak{grid-template-columns:minmax(0,1fr);gap:18px}
  .mi-zashto__tochka{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px}
  .mi-zashto__ikona{grid-row:span 2;margin:2px 0 0}
}

/* Знакът в шапката. Подзаглавието е дълго („материали за ръчна изработка"),
   затова под 420 px пада - иначе хедърът става по-широк от екрана. Това вече
   ни е хапало на Loralux: при 360 px количката излизаше наполовина извън
   екрана и не личеше на широк монитор. Прагът стоеше на 359 px въпреки
   този коментар и на iPhone (375 px) количката излизаше 23 px навън
   (измерено, 22.10.2026). */
/* Хоризонтален знак: розетката вляво на два реда, вдясно „mimiart" и под
   него подзаглавието. Дотогава трите стояха един под друг (колоната на
   LORALUX), логото беше най-високото нещо в реда, розетката се режеше
   отгоре, а подзаглавието беше на машинописния шрифт с разредка .2em
   („хедъра малко смотан", Никола, 22.10.2026). */
.site-header .logo{display:grid;grid-template-columns:auto auto;column-gap:10px;row-gap:3px;align-items:center;justify-content:start}
.site-header .brand-mark{grid-row:1 / span 2;width:34px;height:34px}
.site-header .logo__word{grid-column:2;font-family:var(--font-display);font-weight:500;font-size:24px;letter-spacing:.01em;line-height:1}
.site-header .logo__tag{grid-column:2;font-family:var(--font-sans);font-size:11.5px;letter-spacing:.02em;text-transform:none;color:var(--ink-600);line-height:1.1}
@media (max-width:420px){
  .site-header .brand-mark{width:28px;height:28px;grid-row:1}
  .site-header .logo__word{font-size:21px}
  .logo__tag{display:none}
}
/* 320 px: иконите вече са по 40 (main.css), но хедърът пак излизаше 9 px
   встрани. */
@media (max-width:359px){
  .site-header .logo{column-gap:6px}
  .site-header .brand-mark{width:24px;height:24px}
  .site-header .logo__word{font-size:18px}
}

/* Телефон: картината е ОТГОРЕ, текстът под нея. Рамката е 5:4 и долепена
   вдясно - празната лява част на картината (мястото за надписа на широк
   екран) почти изчезва и предметите изпълват кадъра. Текстът се стяга, за
   да се види и стоката под героя. */
@media (max-width:700px){
  .mi-promo{padding-top:12px}
  .mi-slaid{flex-direction:column;align-items:stretch;min-height:0;border-radius:var(--radius-md)}
  .mi-slaid__fon{position:relative;inset:auto;order:-1;aspect-ratio:5/4}
  .mi-slaid__fon img{object-fit:cover;object-position:100% 50%}
  .mi-slaid__copy{width:auto;padding:2px 18px 20px}
  .mi-slaid__nadpis{font-size:11.5px;letter-spacing:.12em}
  .mi-slaid__zaglavie{font-size:26px;line-height:1.08;margin-top:6px}
  .mi-slaid__oferta{font-size:15px;margin-top:8px}
  .mi-slaid__dolu{margin-top:14px;gap:10px 14px}
  .mi-slaid__buton{padding:11px 20px;font-size:15px}
  .mi-slaid__cena strong{font-size:18px}
  .mi-promo__nav{margin-top:12px;gap:10px}
  .mi-strelka{width:36px;height:36px}
  .mi-kat__ime{padding:2px 12px 0;font-size:15.5px}
  .mi-kat__broy{padding:2px 12px 12px;font-size:13px}
}

/* ═══ Бутонът „Купи" в картата ═══════════════════════════════════════
   `main.css` прави hover-а НАЙ-ТЪМНОТО мастило. Това е проблем на две
   нива. Първо, почти черен бутон насред светла карта изглежда като
   грешка, а не като действие. Второ и по-лошо: на телефон hover
   ЗАЛЕПВА след докосване - бутонът остава тъмен, докато човекът не
   пипне другаде, и това изглежда като счупена анимация.

   Тук hover е петроленият цвят на действието и важи САМО там, където
   има истински показалец. На докосване обратната връзка идва от
   натискането, не от задържането. */
.btn--add{
  border-color:var(--mi-border-control);
  color:var(--ink-800);
  font-weight:500;
  letter-spacing:0;
  transition:background var(--dur-fast) var(--ease-standard),
             color var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard);
}
@media (hover:hover){
  .btn--add:hover{background:var(--clay-400);color:#FFFFFF;border-color:var(--clay-400)}
}
@media (hover:none){
  .btn--add:hover{background:var(--surface-card);color:var(--ink-800);border-color:var(--mi-border-control)}
}
.btn--add:active{background:var(--clay-500);color:#FFFFFF;border-color:var(--clay-500);transform:scale(var(--press-scale))}
.btn--add:focus-visible{outline:2px solid var(--clay-400);outline-offset:2px}


/* ═══ Филтрите ═══════════════════════════════════════════════════════
   Търсенето е заоблено поле с лупата вътре; избраната категория е с бели
   букви върху петрол (Никола, 24.10.2026: „искам буквите да стават бели,
   по-добър контраст със синьото"). */
.filters .filter-search__pole{display:flex;align-items:center;gap:6px;height:44px;padding:0 5px 0 16px;background:var(--surface-card);border:1px solid var(--mi-border-control);border-radius:var(--radius-pill);transition:border-color var(--dur-fast) var(--ease-standard)}
.filters .filter-search__pole:focus-within{border-color:var(--clay-400);box-shadow:0 0 0 3px var(--clay-50)}
.filters .filter-search__pole input{flex:1 1 auto;min-width:0;height:auto;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;outline:none;font:inherit;font-size:16px;color:var(--text-strong)}
.filters .filter-search__pole input::placeholder{color:var(--text-subtle)}
.filters .filter-search__pole button{display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink-700);cursor:pointer}
.filters .filter-search__pole button:hover{background:var(--paper-200)}
.filter-row.is-active{background:var(--clay-400);color:#FFFFFF}
.filter-row.is-active:hover{background:var(--clay-500)}
.filter-row.is-active .filter-row__count{opacity:.85}
.filter-row:active{background:var(--clay-500);color:#FFFFFF}