/* ==========================================================================
   ЗДРАВЕН ПОРТАЛ — ДЕСКТОП СЛОЙ (31.08.2026)

   Оплакването на Томи, дословно: *„мобилната версия е страхотна, на десктопа е
   ужасна — дребен текст, всичко е разхвърляно.“* Мерено, и беше право:

   | признак | мерено на 1920 px |
   |---|---|
   | контейнер | 1400 px → 520 px мъртво поле встрани |
   | основен шрифт | 16 px, а редът стига 1344 px = ~170 знака |
   | трастлайнът на раздела | 13 px на цял екран |
   | състав | СТЕК от ленти на цяла ширина — нула многоколонни композиции |
   | чиповете | „Вътрешни б…“, „Акушер-гин…“ — режат имена, докато встрани е празно |

   ⛔⛔ САМО ЗА ШИРОК ЕКРАН. Всичко живее в `@media (min-width:1100px)`, защото
      мобилното му харесва и не се пипа. Отделен файл, отделен слой — върнатият
      дизайн от 30.08 остава непокътнат. [[zp_site_redesign_laws]]

   ⛔⛔⛔ ЗАКОН, платен на първата подача: `.sec:has(.sec-h)` НЕ Е СКОПИРАН —
      `:has()` гледа ВСИЧКИ потомци. Направих редакционна решетка „рамо вляво,
      съдържание вдясно“ и тя се задейства и в секции, чието заглавие НЕ е в
      `.sec-h` → заглавието отиде във втората колона, а рамото остана ПРАЗНО:
      „Популярни специалности“ започваше на x=660 при празни 660 px вляво.
      Мерено: две секции с различно начало на реда. Това е точно „разхвърляно“ —
      направих го по-лошо. ✅ Махнато. Един ляв ръб за всичко.
   ========================================================================== */

@media (min-width: 1000px) {

  /* --- 1. Екранът се ПОЛЗВА, но редът остава четим ---------------------- */
  :root{
    --wrap: 1440px;
    --gut: clamp(28px, 3vw, 56px);
  }
  body{ font-size: 17px; line-height: 1.62; }
  .wrap{ padding-left: var(--gut); padding-right: var(--gut); }

  /* ⛔ Дълъг ред е нечетим, независимо колко място има. Прозата спира на 68
     знака; решетките и таблиците ползват цялата ширина. */
  .sec h2 + p, .sec-h p, .lede, .hx-doc p, .kd-note, .srcnote p, .phead p{
    max-width: 68ch;
  }

  /* --- 2. Един ляв ръб. Ритъм между секциите, вместо празнота ----------- */
  .sec{ padding: 60px 0; }
  .sec h2, .sec-h h2{ font-size: clamp(27px, 2.2vw, 36px); }
  .sec-h{ max-width: 68ch; }

  /* --- 3. Геройът: логото малко, заглавието голямо, полето — човешко ---- */
  .hero.hero-lite .hero-main{
    grid-template-columns: 148px minmax(0, 1fr);
    align-items: center; gap: 34px;
    padding-top: 40px; padding-bottom: 20px;
  }
  .hero.hero-lite .hero-logo{ justify-self: start; }
  .hero.hero-lite .hero-logo img{ max-width: 148px; }
  .hero-copy{ padding-right: 0; }
  .hero.hero-lite h1{ font-size: clamp(44px, 3.4vw, 60px); }
  .hero.hero-lite .lede{ font-size: clamp(16px, 1.15vw, 20px); }
  /* ⛔ Поле за търсене на 1340 px изглежда като грешка, не като покана. */
  .hero .find, .hero .results{ max-width: 1000px; }

  /* --- 4. Разделите: дишащи картички -------------------------------- */
  .quick{ grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
  .quick a{ padding: 22px 14px; gap: 12px; }
  .quick img{ width: 42px; height: 42px; }
  .quick span{ font-size: 15px; }
  .allcats{ gap: 12px; }

  /* --- 5. Таблото с числата: шест колони, числото води ------------------ */
  .tiles{ grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
  .tile{ padding: 22px 20px 20px; }
  .tile b{ font-size: 34px; }
  .tile span{ font-size: 15px; }
  .tile em{ font-size: 13px; }

  /* --- 6. ⛔ НИЩО НЕ СЕ РЕЖЕ, ДОКАТО ВСТРАНИ ИМА ПРАЗНО ----------------- */
  /* „Вътрешни болести“ ставаше „Вътрешн…“ в кутия от 87 px на екран 1920 px.
     Причината: фиксирана колона 178 px + `nowrap` + `ellipsis`. На широк екран
     картичката се РАЗТЯГА до името, а не името се реже до картичката. */
  .sbigs{ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
  .sbig{ padding: 15px 18px; }
  .sbig b{
    white-space: normal; overflow: visible; text-overflow: clip;
    font-size: 16px; overflow-wrap: anywhere;
  }
  .sbig span, .sbig .sbig-n{ font-size: 14px; }
  .chips a, .qchip, .hx-chips a{ font-size: 15px; padding: 10px 17px; }
  .chips-n a b{ font-size: 14px; }
  .hx-chips{ flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .hx-chipwrap .hx-fade{ display: none; }

  /* --- 7. Резултатите и списъците: по-широки картички ------------------- */
  .cards{ grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 14px; }
  .rc{ padding: 16px 18px; }
  .rc-b b{ font-size: 16.5px; }
  .rc-b span{ font-size: 14px; }
  .pgrid{ grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
  .hx-row{ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .hx-near-g{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hx-steps{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hx-hubs{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .kvgrp{ margin-bottom: 10px; }

  /* --- 8. Дребният текст, който Томи вижда като „дребен“ ---------------- */
  .trustline, .live-sub, .srcnote p, .foot p, .foot a{ font-size: 15px; }
  .crumbs{ font-size: 14.5px; }
  .band b{ font-size: 16.5px; }
  .band span{ font-size: 15.5px; }
  .mainnav a{ font-size: 15.5px; padding: 10px 15px; }
  .phead h1{ font-size: clamp(34px, 2.8vw, 46px); }
  .phead p{ font-size: 17px; }

  /* --- 9. Футърът: четири колони, не три ------------------------------- */
  .foot .wrap{ grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
  .foot p{ max-width: 40ch; }
}

/* ==========================================================================
   ВТОРИ ПАС (31.08) — по МЕРЕНИ дефекти, не на око.
   Премерено на 9 типа страници при 1920 px:
     · 55 елемента под 14 px само на страницата на съставката
     · 12 абзаца с ред от 1410 px (~180 знака)
     · `/doverie/` и SEO страниците започваха на x=606, а съседните на x=236
   ========================================================================== */
@media (min-width: 1000px) {

  /* --- A. Геройът е ДВЕ колони: търсене вляво, разделите вдясно ---------
     ⛔ Дясната половина стоеше празна на 1920, а разделите чакаха отдолу.
        Изворният ред НЕ е пипан — на телефон всичко пада едно под друго
        точно както преди. */
  .hero-2col{ display: block; }
  .hero-2colX{
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center;
    max-width: var(--wrap); margin: 0 auto;
    gap: clamp(28px, 2.6vw, 52px);
  }
  .hero-2col > .wrap{ max-width: none; margin: 0; padding: 0; }
  .hero-2col > .wrap:first-child{ padding-left: var(--gut); }
  .hero-2col > .wrap:last-child{ padding-right: var(--gut); padding-bottom: 0 !important; }
  .hero.hero-lite .hero-main{ padding-top: 44px; padding-bottom: 30px; }
  .hero.hero-lite .hero-main{ grid-template-columns: 116px minmax(0, 1fr); gap: 26px; }
  .hero.hero-lite .hero-logo img{ max-width: 116px; }
  .hero .find, .hero .results{ max-width: none; }
  /* Разделите вдясно: 2×3, пълни имена, без отрязване. */
  .hero-2col .quick{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 0; }
  .hero-2col .quick a{ padding: 20px 12px; }
  .hero-2col .more-cats{ margin-top: 12px; }
  .hero-2col .hx-chipwrap, .hero-2col .hx-chips-l{ margin-top: 16px; }

  /* --- B. ⛔ ДРЕБНИЯТ ТЕКСТ. Под 14 px на екран 1920 не е „дребен шрифт“,
     а нечетимо. Подът е 15 px за всичко, което е ИЗРЕЧЕНИЕ. --------------- */
  .kd-v, .kd-ad, .pc-m, .find-hint, .srcbox, .warn, .foot .bottom,
  .kd-hrs, .rc-b span, .tile em, .hx-card span, .mp-n, .msk-src{
    font-size: 15px;
  }
  .kd-src, .hx-chips-l, .kd-near-hint{ font-size: 13.5px; }
  .sec p, .sec li, .sec td{ font-size: 16px; }

  /* --- C. ⛔ ДЪЛГИЯТ РЕД. 12 абзаца стигаха 1410 px ≈ 180 знака. --------- */
  .sec > .wrap > p, .legal p, .hx-doc p, .hx-doc li, p.none, .acc-p{
    max-width: 68ch;
  }

  /* --- D. ⛔ ЕДИН ЛЯВ РЪБ. `.hx-doc` е max-width:820 + margin:0 auto, тоест
     на 1920 сядаше на x=550, докато съседните секции започваха на 236.
     Четимата колона остава, но се ПОДРАВНЯВА, не се центрира. ------------ */
  .hx-doc{ margin-left: 0; margin-right: auto; max-width: 960px; }

  /* --- E. Дългите таблици и решетки ползват ширината ------------------- */
  .scols{ column-count: 3; column-gap: 34px; }
  .sgrp{ break-inside: avoid; }
  .hx-tbl{ font-size: 15.5px; }
}

/* ==========================================================================
   ТРЕТИ ПАС — по имена, извадени с мерене, не на око.
   ⛔⛔ ЗАКОН, платен тук: `zp-kids.css` се зарежда СЛЕД `zp-desktop.css`
      (той е `extra` в главата на страницата). При еднаква тежест побеждава
      ПОСЛЕДНИЯТ — затова правилата за `.kd-*` изобщо не се задействаха и
      45 елемента останаха под 14 px. ✅ `body` пред селектора вдига тежестта;
      реда на файловете не се пипа, за да не се счупи нещо друго.
   ========================================================================== */
@media (min-width: 1000px) {
  body .kd-v, body .kd-ad, body .kd-ad span, body .kd-hrs,
  body .pc-m, body .cityhint{ font-size: 15px; }
  body .kd-src, body .kd-near-hint{ font-size: 13.5px; }
  body .tcard span, body .hx-hub span, body .kx-n span{ font-size: 15px; }
  /* Абзацът в „трастбокса“ стигаше 1412 px ≈ 180 знака. */
  .trustbox p, .trustbox li{ max-width: 68ch; }
  .trustbox{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
             gap: 8px 44px; align-items: start; }
  .trustbox > h2, .trustbox > h3{ grid-column: 1 / -1; }
}

/* --- ЧЕТВЪРТИ ПАС: подът на ЕТИКЕТИТЕ ------------------------------------
   Останалото под 14 px не е проза, а етикети и бележки за източника. Но
   оплакването беше „дребен текст“, а не „дребна проза“ — подът важи и за тях. */
@media (min-width: 1000px) {
  body .kd-src, body .kd-src a{ font-size: 14.5px; }
  body .kd-chip{ font-size: 14px; padding: 6px 12px; }
  body .pc-b .pc-m, body .kx-s span, body .kd-near-hint{ font-size: 14.5px; }
  body .tag{ font-size: 13.5px; }
}

/* ⛔ Прагът беше 1100 px и лаптопите на 1024 оставаха на СТАРИЯ вид: 33 реда по
   над 1400 px и 536 елемента под 14 px. Мерено — те са десктоп, не телефон.
   ✅ Целият слой тръгва от 1000 px; само двуколонният герой иска 1200,
   защото под това търсачката и разделите се смачкват. */
@media (min-width: 1200px) {
  .hero-2col{
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center;
    max-width: var(--wrap); margin: 0 auto;
    gap: clamp(28px, 2.6vw, 52px);
  }
}

/* ==========================================================================
   ПО ЗАДАНИЕТО НА ТОМИ (trv-upload 31.08, 07:57) — „Lead Desktop UI/UX“
   Петте точки, в неговия ред. Всичко пак в СВОЙ слой, от 1000 px нагоре.
   ========================================================================== */
@media (min-width: 1000px) {

  /* --- 3. ДУБЛИРАНОТО СЪДЪРЖАНИЕ ОТПАДА ---------------------------------
     „Здраве близо до Вас“ повтаряше шестте иконки от героя. На десктоп остава
     САМО поканата към картата; на телефон решетката си стои (там героят е
     друг екран и повторение няма). */
  .hx-dupe{ display: none; }
  .hx-near{
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; gap: 32px; padding: 30px 34px;
  }
  .hx-near h2{ margin: 0; }
  .hx-near .hx-sub{ margin: 10px 0 0; max-width: 62ch; }
  .hx-near-cta{ margin: 0; white-space: nowrap; padding: 15px 26px; font-size: 16px; }

  /* --- 4. РЕДУВАЩИ СЕ ФОНОВЕ: край на безкрайното бяло --------------------
     ⛔ `nth-of-type` брои СРЕД `.sec`, но между тях стоят и `.band`, и `.kx` —
        затова редуването се прави по СЪСЕДСТВО: секция след бяла секция
        получава фон. Резултатът е ритъм, а не шахматна дъска. */
  /* Класът се решава при СГЛОБЯВАНЕТО (`alternate()` в build.py) — CSS не може
     да редува, когато между секциите стоят чужди елементи. */
  .sec-alt{ background: var(--soft); }

  /* --- 5. ЧЕТИМОСТ: стъпките се СЪБИРАТ, акордеоните се ОГРАНИЧАВАТ ------ */
  .hx-steps{
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px; max-width: 1100px;
  }
  .hx-steps > div{ padding: 20px 22px; }
  .hx-steps p{ font-size: 15.5px; max-width: none; }
  /* „Брутално дълги“ акордеони: 820 px, подравнени с останалото. */
  .acc, .acc-wide, .acc-read{ max-width: 820px; }
  .acc-read .srcs{ columns: 2; column-gap: 34px; }
  .acc-read .srcs li{ break-inside: avoid; }
  .acc summary{ font-size: 16.5px; padding: 16px 20px; }
  .acc-p{ font-size: 15.5px; }

  /* --- 4б. Решетките: 3–4 колони, не „телеграфни блокчета“ --------------- */
  .hx-row{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sbigs{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tiles{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .tile{ padding: 26px 24px 24px; }
  .tile b{ font-size: 38px; }
  .pgrid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- ШЛАЙФ по екрана (не по кода) --------------------------------------- */
@media (min-width: 1200px) {
  /* Лявата колона на героя беше по-тясна от съдържанието си: „ЗДРАВЕН ПОРТАЛ“
     се пречупваше на два реда, а полето за търсене се сви. Заглавието е
     тезата — то определя колоната, не обратното. */
  .hero-2col{ grid-template-columns: minmax(0, 1.32fr) minmax(0, .68fr); }
  .hero.hero-lite .hero-main{ grid-template-columns: 128px minmax(0, 1fr); }
  .hero.hero-lite h1{ font-size: clamp(46px, 3.6vw, 66px); white-space: nowrap; }
  .hero-2col .quick{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  /* ⛔ Три деца в решетка 1fr/auto се редят h2 | текст / копче | празно —
     нареждането трябва да е ИЗРИЧНО, не по подразбиране. */
  .hx-near > h2{ grid-column: 1; grid-row: 1; }
  .hx-near > .hx-sub{ grid-column: 1; grid-row: 2; }
  .hx-near > .hx-near-cta{ grid-column: 2; grid-row: 1 / span 2; align-self: center; }

  /* Акордеонът в собствена секция изглеждаше като забравен ред вляво.
     По заданието: до 820 px и ЦЕНТРИРАН. */
  .acc, .acc-wide, .acc-read{ margin-left: auto; margin-right: auto; }
  .sec:has(> .wrap > .acc){ padding: 26px 0; }

  /* Стъпките се събират и се центрират — „твърде раздалечени“. */
  .hx-steps{ margin-left: auto; margin-right: auto; }

  /* Правното изречение и последният ред не са секции с тегло — свиват се. */
  .sec:has(> .wrap > .legal){ padding: 30px 0; }
  .legal{ max-width: 820px; margin: 0 auto; }
}

/* --- ГЕРОЯТ по заданието: ЛЯВО = заглавие + търсачка + популярни търсения,
       ДЯСНО = категориите. Плюс махане на ПОВТОРЕНАТА иконография. -------- */
@media (min-width: 1200px) {
  /* ⛔⛔ ЛОГОТО СЕ ПОВТАРЯШЕ: същият знак стои в хедъра, на 60 px по-горе.
     На телефон хедърът е свит и логото в героя има смисъл; на десктоп то е
     втори екземпляр на същата икона — точно оплакването „повтарят се икони“. */
  .hero.hero-lite .hero-logo{ display: none; }
  .hero.hero-lite .hero-main{ grid-template-columns: minmax(0, 1fr); }
  .hero-2col{ grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
              align-items: start; padding-top: 8px; }
  .hero.hero-lite .hero-main{ padding-top: 52px; padding-bottom: 34px; }
  .hero-2col > .wrap:last-child{ padding-top: 52px; }
  /* Категориите: 2 колони, четими имена, без разтягане до дъното. */
  .hero-2col .quick{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .hero-2col .quick a{ padding: 18px 10px; }
  /* Популярните търсения вече са ВЛЯВО, под търсачката — един ред, не колона. */
  .hero-copy .hx-chipwrap{ margin-top: 18px; }
  .hero-copy .hx-chips{ flex-wrap: wrap; }
  .hero-copy .hx-chips-l{ margin-top: 22px; }
}

/* --- ОПАШКАТА НА СТРАНИЦАТА: празни места и празна колона --------------- */
@media (min-width: 1000px) {
  /* ⛔⛔ САМ СИ НАПРАВИХ ПРАЗНО МЯСТО: сложих футъра на 4 колони, а децата му
     са ТРИ (знак + два списъка) → четвъртата колона стоеше празна.
     📌 Броят колони се взима от БРОЯ ДЕЦА, не от вкуса. */
  .foot .wrap{ grid-template-columns: 1.5fr 1fr 1fr; gap: 56px; }

  /* Двата акордеона стояха в отделни секции, всяка със свой фон и с 60 px
     отгоре-отдолу — четяха се като два забравени реда сред бяло.
     ✅ Един общ блок: еднакъв фон, събрани близо. */
  .sec:has(> .wrap > .acc),
  .sec.sec-alt:has(> .wrap > .acc){ background: var(--soft); padding: 16px 0; }
  .sec:has(> .wrap > .acc):first-of-type{ padding-top: 44px; }

  /* Правното изречение и последната бележка не са секции с тегло. */
  .sec:has(> .wrap > .legal),
  .sec.sec-alt:has(> .wrap > .legal){ background: transparent; padding: 26px 0 44px; }

  /* „Здраве близо до Вас“ беше висока кутия с три реда текст в нея.
     Тя е ПОКАНА към картата — една лента, не секция. */
  .hx-near{ padding: 24px 30px; }
  .hx-near h2{ font-size: clamp(24px, 1.9vw, 30px); }
}

/* ⛔⛔ ЗАКОН, платен тук: ТВЪРД БРОЙ КОЛОНИ Е ОБЕЩАНИЕ ЗА ШИРИНА, което по-тесният
   екран не може да изпълни. `.pgrid{repeat(4,minmax(0,1fr))}` на 1024 px даде
   картички от 156 px — вътрешният ред от 78 px изля 32 px извън екрана.
   ✅ Броят колони се ИЗЧИСЛЯВА от минималната ширина на картичката; четирите
   колони се позволяват чак когато има място за тях. */
@media (min-width: 1000px) {
  .pgrid{ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}
@media (min-width: 1500px) {
  .pgrid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ⛔⛔⛔ ЗАКОН, платен на ВЪТРЕШНИТЕ страници: `.hx-doc` Е `.wrap` (носи и двата
   класа). Дадох му `max-width:960; margin-left:0` — и той се залепи за ръба на
   ЕКРАНА, докато съседните `.wrap` стоят центрирани в 1440.
   Мерено на /lekari/dermatolog/veliko-tarnovo/: заглавието на 56 px, следващото
   заглавие на 296 px — **скок от 240 px в средата на страницата**. Точно това е
   „разхвърляно“, и този път го направих аз.
   ✅ Контейнерът се държи като всеки друг `.wrap`; четимата ширина се налага на
      ДЕЦАТА, не на контейнера. */
@media (min-width: 1000px) {
  .hx-doc{
    max-width: var(--wrap); margin-left: auto; margin-right: auto;
    padding-left: var(--gut); padding-right: var(--gut);
  }
  .hx-doc > *{ max-width: 900px; }
  /* Таблиците и решетките вътре ползват повече, щом им трябва. */
  .hx-doc > .hx-scroll, .hx-doc > .hx-tbl, .hx-doc > .pgrid,
  .hx-doc > .cards, .hx-doc > .chips{ max-width: none; }
}

/* ⛔⛔ СЪЩИЯТ ДЕФЕКТ, ВТОРО МЯСТО: `.kd-hero-in` също Е `.wrap` и също получи
   `max-width` + `margin-left:0` (при първото писане на детския слой, за да не
   се центрира). На 1920 px геройът тръгва на 56 px, а секциите под него — на
   296 px: **пак скок от 240 px**.
   📌 Стеснен `.wrap` иска не „margin-left:0“, а СЪЩОТО центриране плюс
      ограничение върху ДЕЦАТА. Търси този калъп навсякъде, където има
      `.wrap` + втори клас. */
@media (min-width: 1000px) {
  /* ⛔⛔ ТРЕТИ ПЪТ СЪЩИЯТ ЗАКОН: `zp-kids.css` се зарежда СЛЕД този файл, при
     равна тежест печели ПОСЛЕДНИЯТ — затова без `body` правилото не се хваща. */
  body .kd-hero-in{
    max-width: var(--wrap); margin-left: auto; margin-right: auto;
    padding-left: var(--gut); padding-right: var(--gut);
  }
  body .kd-hero-in > *{ max-width: 900px; }
  body .kd-hero-in > .kd-hero-a{ max-width: none; }
}

/* Бележката под блока „по специалност и град“ вече не е в своя секция —
   ограничението за четим ред трябва да се повтори и тук. */
@media (min-width:1000px){ .hubblock .hx-chips-l{ max-width:68ch } }

/* ==========================================================================
   ЗАДАНИЕ 31.08, 08:30 — „TOTAL DESKTOP UI/UX REDESIGN“
   Мобилното е референцията; десктопът е неговата разгърната версия.
   ⛔ Всичко тук е от 1000 px нагоре. Мобилното НЕ се пипа.
   ========================================================================== */
@media (min-width: 1000px) {

  /* --- §6 ТИПОГРАФИЯ: без дребни шрифтове ------------------------------- */
  h3, .sec h3{ font-size: clamp(22px, 1.6vw, 26px); line-height: 1.25; }
  .sec h2, .sec-h h2{ font-size: clamp(30px, 2.3vw, 36px); }
  .hero.hero-lite h1{ font-size: clamp(42px, 3.2vw, 52px); }

  /* --- §4 ГЕРОЯТ: центриран, търсачката е най-едрият елемент ------------ */
  .hero-2col{ display: block; }
  .hero.hero-lite .hero-main{
    grid-template-columns: minmax(0, 1fr);
    max-width: 1000px; margin: 0 auto;
    padding-top: 56px; padding-bottom: 44px; text-align: center;
  }
  .hero.hero-lite .hero-logo{ display: block; justify-self: center; margin-bottom: 14px; }
  .hero.hero-lite .hero-logo img{ max-width: 96px; }
  .hero-copy{ padding-right: 0; }
  .hero .lede{ margin-left: auto; margin-right: auto; }
  .hero .find{ margin-top: 26px; }
  /* Полето за търсене — голямо, както иска заданието. */
  .hero .find .field{ min-height: 76px; }
  .hero .find input{ font-size: 20px; }
  .hero .cityline{ justify-content: center; }
  .hero-copy .hx-chipwrap{ margin-top: 20px; }
  .hero-copy .hx-chips{ flex-wrap: wrap; justify-content: center; }
  .hero-copy .hx-chips-l{ text-align: center; }
  .hero .results{ text-align: left; }

  /* --- §5 ШЕСТТЕ РАЗДЕЛА: 3 колони × 2 реда, премиум картички ----------- */
  .catsec .quick{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px; margin-top: 26px;
  }
  .catsec .quick a{
    padding: 38px 24px; gap: 18px; border-radius: 22px;
    border: 1px solid var(--line); box-shadow: 0 2px 10px rgba(9,50,90,.05);
  }
  .catsec .quick img{ width: 64px; height: 64px; }
  .catsec .quick span{ font: 700 20px/1.25 var(--display); color: var(--navy); }
  .catsec .quick a:hover{
    transform: translateY(-3px); border-color: #9FC8E6;
    box-shadow: 0 14px 32px rgba(9,50,90,.10);
  }
  .catsec .more-cats{ margin-top: 22px; }

  /* --- §8 ЕДНА CARD SYSTEM ---------------------------------------------- */
  .tile, .hx-card, .hx-hub, .sbig, .pcard, .rc, .kd-card, .srcard, .hx-near{
    border-radius: 20px;
  }

  /* --- §9 STAT CARDS: голямо число, малък обяснителен ред ---------------- */
  .tiles{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .tile{ padding: 32px 28px 28px; }
  .tile img{ width: 38px; height: 38px; margin-bottom: 12px; }
  .tile b{ font-size: 46px; line-height: 1; letter-spacing: -.02em; }
  .tile span{ font-size: 17px; margin-top: 6px; }
  .tile em{ font-size: 14.5px; }

  /* --- §10 TRUST: лентата става РЕД ОТ КАРТИЧКИ -------------------------- */
  .band{ background: transparent; padding: 8px 0 0; }
  .band .wrap{
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px; padding-top: 0; padding-bottom: 0;
  }
  .band .it{
    background: #fff; border: 1px solid var(--line); border-radius: 20px;
    padding: 24px 22px; align-items: flex-start; gap: 14px;
    box-shadow: 0 2px 10px rgba(9,50,90,.05);
  }
  .band .it + .it::before{ display: none; }
  .band .it:last-child{ padding-right: 22px; }
  .band svg{ width: 34px; height: 34px; stroke: var(--blue); }
  .band b{ color: var(--navy); font-size: 17px; text-transform: none; letter-spacing: 0; }
  .band span{ color: var(--muted); font-size: 15.5px; }
  .em-badge{ display: none; }   /* значката 112 живее в хедъра, тук е повторение */

  /* --- §11 КАРТАТА: ляво описание, дясно ГОЛЯМА карта -------------------- */
  .hx-near{
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    align-items: stretch; gap: 34px; padding: 30px;
  }
  .hx-near h2{ grid-column: 1; grid-row: 1; align-self: end; }
  .hx-near > .hx-sub{ grid-column: 1; grid-row: 2; }
  .hx-near > .hx-near-cta{ grid-column: 1; grid-row: 3; align-self: start; justify-self: start; }
  .hx-mapwrap{ grid-column: 2; grid-row: 1 / span 3; position: relative; }
  .hx-map{
    height: 420px; border-radius: 18px; overflow: hidden;
    border: 1px solid var(--line); background: var(--sky);
  }
  .hx-map-open{
    position: absolute; right: 14px; bottom: 14px; z-index: 500;
    background: var(--blue); color: #fff; padding: 11px 18px; border-radius: 999px;
    font: 700 14.5px/1 var(--display); box-shadow: var(--shadow);
  }
  .hx-map-open:hover{ background: #0150A2; }
  .hx-map-fail{ padding: 24px; color: var(--muted); }

  /* --- §12 СТЪПКИТЕ: хоризонтално, с едри номера ------------------------ */
  .hx-steps{ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; max-width: none; }
  .hx-steps > div{ padding: 26px 24px; border-radius: 20px; }
  .hx-steps b{ font-size: 19px; }
  .hx-steps p{ font-size: 15.5px; }

  /* --- §13 ИЗТОЧНИЦИТЕ: една голяма картичка ---------------------------- */
  .srcard{
    background: #fff; border: 1px solid var(--line); border-radius: 22px;
    padding: 32px; box-shadow: 0 2px 12px rgba(9,50,90,.05);
  }
  .srcard-h h2{ margin: 0; }
  .srcard-h p{ margin: 10px 0 22px; max-width: 68ch; color: var(--muted); }
  .srcard .srcs{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .srcard .srcs li{
    background: var(--soft); border: 1px solid var(--line); border-radius: 14px;
    padding: 16px 18px;
  }

  /* --- §15 ВЪЗДУХ ------------------------------------------------------- */
  .sec{ padding: 68px 0; }
  .sec-h{ margin-bottom: 30px; }

  /* --- §18 ФУТЪР: четири колони С СЪДЪРЖАНИЕ ---------------------------- */
  .foot{ padding-top: 58px; }
  .foot .wrap{ grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 44px; }
  .foot h4{ font-size: 13px; }
  .foot ul{ gap: 11px; }
}

/* --- §19 На 1920 съдържанието НЕ се разтяга --------------------------- */
@media (min-width: 1500px) {
  :root{ --wrap: 1400px; }
}

/* ==========================================================================
   КОНТРАСТ — мерен, не на око (заданието §6 и §33)
   ⛔⛔ ЗАКОН, платен днес: `.rc-b span` (клас+елемент) биеше `.rc-tel2` (клас) и
      телефонът излезе СИВ ВЪРХУ СИНЬО — контраст 2,3:1. Оттам и общата проверка
      на целия сайт: всяко съотношение под 4,5:1 (3:1 за едър текст) се вдига.
   ========================================================================== */
:root{
  /* Кехлибареното #8A5A11 върху #FFF6EA дава 3,78:1 — под прага за дребен текст.
     По-тъмният тон пази същия цвят, но става четим (5,6:1). */
  --kx-deep:#7A4E0C;
  --kd-deep:#7A4E0C;
}
.kx-eye span, .kx-h, .kx-n b, .kx-s b, .kx-t b,
.kd-eyebrow span, .kd-spec span, .kd-wt span{ color:#7A4E0C; }
/* Зеленият подзаглавен ред върху светъл фон беше 4,15:1 при 18,4 px. */
.hero .lede span + span{ color:#15762F; }

/* ⛔⛔⛔ ЧЕТВЪРТИ ПЪТ: `zp-kids.css` и `zp-home.css` се зареждат СЛЕД този файл
   и при равна тежест печелят те. Всяка поправка тук иска `body` пред себе си.
   📌 Ако правило не се хваща — първо провери РЕДА на листовете, не селектора. */
body .kd-spec span, body .kd-spec b, body .kd-wt span, body .kd-eyebrow span,
body .kx-s b, body .kx-t b, body .kx-eye span, body .kx-h, body .kx-n b{color:#7A4E0C}

/* Последните три: `c-info` е точно на прага (4,50 при изискване 4,50 за 12 px —
   закръглението го смята за провал), а зеленият бадж е 4,15. И двата се вдигат.
   ⛔ „Точно на прага“ не е „минава“ — при 12 px прагът е за ЧЕТИМОСТ, не за отчет. */
body .chip.c-info{color:#4A5F76}
body .hx-badge.hx-ok{color:#15762F}

/* ⛔ Заглавната лента без заглавие: на страницата на ПРОДУКТ тя носи само
   трохите, но пази 40 px отдолу за титла, която е другаде → 163 px висока
   секция с един ред текст. Правило, което пази място за нещо, иска отмяна
   там, където това нещо го няма. */
@media (min-width:1000px){ .phead:not(:has(h1)) .wrap{padding-bottom:14px} }

/* ==========================================================================
   БРИФ 09:34, т.2 — ГЕРОЯТ Е НА ДВЕ КОЛОНИ
   ⛔⛔ ДВАТА БРИФА СИ ПРОТИВОРЕЧАТ: този от 08:30 иска ЦЕНТРИРАН герой с
      категориите като отделна секция; този от 09:34 иска ДВЕ КОЛОНИ с
      категориите вдясно. Следваме ПО-НОВИЯ. Отделната секция е махната —
      иначе се получава точно дублирането, срещу което е точка 3.
   ========================================================================== */
@media (min-width: 1200px) {
  .hero-2col{
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: center;
    max-width: var(--wrap); margin: 0 auto;
    gap: clamp(30px, 3vw, 60px);
  }
  .hero-2col > .wrap{ max-width: none; margin: 0; padding: 0; }
  .hero-2col > .wrap.hero-main{ padding-left: var(--gut); text-align: left; }
  .hero-2col > .wrap.hero-cats{ padding-right: var(--gut); }
  .hero.hero-lite .hero-main{
    grid-template-columns: minmax(0, 1fr);
    max-width: none; padding-top: 48px; padding-bottom: 40px;
  }
  .hero.hero-lite .hero-logo{ display: none; }   /* същият знак е в хедъра */
  .hero .lede{ margin-left: 0; margin-right: 0; }
  .hero .find{ max-width: none; }
  .hero .cityline{ justify-content: flex-start; }
  .hero-copy .hx-chips{ justify-content: flex-start; }
  .hero-copy .hx-chips-l{ text-align: left; }

  /* Дясната колона: компактна решетка 2×3, пълни имена, без отрязване. */
  .hero-cats-l{
    margin: 0 0 14px; font: 700 12.5px/1 var(--display);
    letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  }
  .hero-2col .quick{
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0;
  }
  .hero-2col .quick a{ padding: 22px 14px; gap: 12px; border-radius: 18px; }
  .hero-2col .quick img{ width: 42px; height: 42px; }
  .hero-2col .quick span{ font: 700 16px/1.25 var(--display); }
  .hero-2col .more-cats{ margin-top: 16px; }
}

/* т.5 — стъпките се СЪБИРАТ в по-тесен центриран контейнер */
@media (min-width: 1000px) {
  .hx-steps{ max-width: 1080px; margin-left: auto; margin-right: auto; }
}

/* ⛔ Етикетът „Разделите на портала“ е за ДЯСНАТА КОЛОНА на десктоп. На телефон
   героят е един стълб и надписът е ново, непоискано съдържание — заданието
   изрично казва мобилното да не се променя. */
.hero-cats-l{display:none}
@media (min-width:1200px){ .hero-cats-l{display:block} }

/* ==========================================================================
   УКАЗАТЕЛЯТ НА ДЕСКТОП: РАМО С ФИЛТРИ + РЕШЕТКА ОТ КАРТИЧКИ
   (бриф 09:42 §5, §12, §13)

   ⭐ Подписът на страницата: рамото е „регистърна лента“ — филтрите и ПЕЧАТЪТ
      на източника стоят заедно. Всеки филтър стеснява официален регистър;
      затова кой е регистърът стои под самите филтри, а не в подножието.
   ⛔ Рамото е СЪЩИЯТ елемент, преместен от `rail.js` — не втори комплект.
   ========================================================================== */
@media (min-width: 1200px) {
  .reslayout{
    display: grid;
    grid-template-columns: 288px minmax(0, 1fr);
    gap: 32px; align-items: start;
  }
  .resmain{ min-width: 0; }

  /* Копчето „Филтри“ е за телефона — на десктоп рамото е винаги отворено. */
  body.has-rail .fbtn{ display: none; }
  .fbar{ justify-content: space-between; }

  .sheet.as-rail{
    position: static; transform: none; box-shadow: none;
    max-height: none; width: auto; border-radius: 18px;
    background: #fff; border: 1px solid var(--line);
    position: sticky; top: 92px;
  }
  .sheet.as-rail .sheet-in{
    padding: 20px 20px 18px; max-height: calc(100vh - 140px); overflow: auto;
  }
  .sheet.as-rail .sheet-grip{ display: none; }
  .sheet.as-rail h3{
    margin: 0 0 14px; font: 700 13px/1 var(--display);
    letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  }
  /* ⛔ Долният лист има ред от две копчета „Изчисти / Покажи“, залепен за дъното
     на екрана. В рамото „Покажи“ няма смисъл — списъкът се обновява веднага. */
  .sheet.as-rail .sheet-act{ position: static; padding: 14px 0 0; box-shadow: none; }
  .sheet.as-rail .sheet-act .btn-p{ display: none; }
  .sheet.as-rail .sheet-act .btn-s{ width: 100%; }
  .sheet.as-rail .fgrp{ margin-bottom: 18px; }
  .sheet.as-rail .fgrp > b{
    display: block; margin-bottom: 9px;
    font: 700 12px/1 var(--display); letter-spacing: .08em;
    text-transform: uppercase; color: var(--kd-deep, #7A4E0C);
  }
  /* Подписът: печатът на регистъра стои ПОД филтрите, в същата лента. */
  .sheet.as-rail::after{
    content: "Всеки филтър стеснява официален регистър.";
    display: block; padding: 14px 20px 18px; margin-top: -2px;
    border-top: 1px solid var(--line);
    font: 400 13px/1.5 var(--body); color: var(--muted);
  }

  /* Резултатите: 3 колони на широко, 2 на средно (§5). */
  .resmain .cards{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}
@media (min-width: 1200px) and (max-width: 1500px) {
  .resmain .cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- КОНТЕКСТНИ ФИЛТРИ (бриф §13) --------------------------------------
   ⛔ На страницата с лекари стояха аптечни и лекарствени филтри — шум, който
      не стеснява нищо. Групата се показва само където има какво да филтрира.
   ⛔ По подразбиране всичко се вижда: страница без `data-sec` (началната,
      картата) не бива да остане с празен лист. */
[data-sec="lekari"] .fgroup[data-for="apteki"],
[data-sec="lekari"] .fgroup[data-for="apteki lekarstva"],
[data-sec="bolnici"] .fgroup[data-for="apteki"],
[data-sec="bolnici"] .fgroup[data-for="apteki lekarstva"],
[data-sec="centrove"] .fgroup[data-for="apteki"],
[data-sec="centrove"] .fgroup[data-for="apteki lekarstva"],
[data-sec="rehab"] .fgroup[data-for="apteki"],
[data-sec="rehab"] .fgroup[data-for="apteki lekarstva"],
[data-sec="izsledvaniya"] .fgroup[data-for="apteki"],
[data-sec="izsledvaniya"] .fgroup[data-for="apteki lekarstva"],
[data-sec="info"] .fgroup[data-for="apteki"],
[data-sec="info"] .fgroup[data-for="apteki lekarstva"]{ display: none; }

/* Редът със специалностите се РЕЖЕШЕ вдясно („Невро…“). На широк екран има
   място — пречупва се. */
@media (min-width: 1200px) {
  .resmain .kinds{ flex-wrap: wrap; overflow: visible; }
}

/* ⛔ Копчетата на долния лист са `.sheet-do > .clr/.go`, не `.sheet-act`. Писах
   грешните имена и „Покажи“ остана в рамото, където няма смисъл — списъкът
   се обновява веднага. 📌 Проверявай ИМЕНАТА в разметката, не по памет. */
@media (min-width:1200px){
  .sheet.as-rail .sheet-do{position:static;padding:14px 0 0;box-shadow:none;display:block}
  .sheet.as-rail .sheet-do .go{display:none}
  .sheet.as-rail .sheet-do .clr{width:100%}
}

/* ==========================================================================
   „КАКВО ИМА ВЪТРЕ“ и „КАК РАБОТИ И ОТКЪДЕ СА ДАННИТЕ“
   Два блока на мястото на осем секции.
   ⛔⛔ ЗАКОН, платен пак: този файл се зарежда ПОСЛЕДЕН — затова десктоп
      правилата за новите блокове живеят ТУК, а не в `zp-home.css`. Иначе
      `.hx-steps` от този файл ги пребива и решетката става на четири колони.
   ========================================================================== */

/* ⛔ БЕЗ JS всички панели трябва да са ВИДИМИ — иначе съдържанието изчезва за
   човек с изключен скрипт. Скриването се включва чак когато скриптът поеме. */
.itabs{display:none}
.has-itabs .itabs{
  display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 18px;
  border-bottom:1px solid var(--line);padding-bottom:14px;
}
.itab{
  padding:10px 18px;border-radius:999px;border:1px solid var(--line);
  background:#fff;color:#2C4A68;font:600 15px/1 var(--display);cursor:pointer;
}
.itab:hover{background:var(--sky);border-color:#9FC8E6}
.itab[aria-selected="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.itab:focus-visible{outline:3px solid #2C86E0;outline-offset:2px}
.ipan[hidden]{display:none}
.ipan .go{margin-top:16px;display:inline-flex}

/* --- Как работи + източниците ------------------------------------------- */
.ht-grid{display:grid;gap:24px}
.ht-src{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px}
.ht-src h3{margin:0 0 14px;font:700 13px/1 var(--display);letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.ht-src .srcs{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.ht-note{margin:14px 0 12px;font-size:14px;line-height:1.6;color:var(--muted)}

/* --- Свитата детска лента ------------------------------------------------ */
.kx-slim .kx-in{display:grid;gap:16px}
.kx-slim .kx-lede{margin-top:10px;max-width:60ch}
.kx-slim .kx-n{margin:0}
.kx-slim .kx-a{margin:0}

/* --- Правното изречение вече живее във футъра ---------------------------- */
.foot-legal{padding-top:20px;padding-bottom:2px}
.foot-legal p{margin:0;font-size:14px;line-height:1.6;color:#95AEC4;max-width:none}
.foot-legal b{color:#fff}

@media (min-width:1000px){
  /* Стъпките отляво, източниците отдясно — двете казват едно и също нещо от
     двете си страни: как работи и на какво стъпва. */
  .ht-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:34px;align-items:start}
  .ht-grid .hx-steps{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none;margin:0}
  .ht-src{position:sticky;top:92px}
  .inside .ipan .hx-row{grid-template-columns:repeat(4,minmax(0,1fr))}
  /* Двата нови блока носят четворно съдържание — не им трябва и четворен въздух. */
  .inside, .howtrust{padding:52px 0}

  .kx-slim{padding:30px 0}
  .kx-slim .kx-in{grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:28px}
  .kx-slim .kx-n{flex-wrap:nowrap}
  .kx-slim .kx-n li{min-width:118px;flex:0 0 auto;padding:12px 16px}
  .kx-slim .kx-n b{font-size:22px}
  .kx-slim h2{font-size:clamp(24px,2vw,30px)}
  .kx-slim .kx-eye::after{max-width:90px}
}

/* ==========================================================================
   ТЕЛЕФОНЪТ: по-малко скролване, БЕЗ да се крие съдържание
   Мерено: 8 597 px преди сливането → 6 456 след него. Тук се свива още, като
   се ползва ШИРИНАТА, която стои празна — три реда стават колони.
   ⛔ Нищо не отива зад клик: всичко си остава видимо.
   ========================================================================== */
@media (max-width:999px){
  /* Четирите стъпки са къси — два в ред вместо четири един под друг. */
  .ht-grid .hx-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ht-grid .hx-steps > div{padding:14px 14px 12px}
  .ht-grid .hx-steps b{font-size:15.5px}
  .ht-grid .hx-steps p{font-size:13.5px;line-height:1.5}

  /* Шестте източника: две колони, компактни редове. */
  .ht-src{padding:16px}
  .ht-src .srcs{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .ht-src .srcs li{padding:10px 12px;border-radius:12px}
  .ht-src .srcs b{font-size:13px;line-height:1.3}
  .ht-src .srcs span,.ht-src .srcs em{font-size:12px}

  /* Футърът: списъците с връзки в две колони. */
  .foot .wrap{gap:22px}
  .foot ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px}

  /* Секциите дишат, но не зейват. */
  .sec{padding:38px 0}
  .inside,.howtrust{padding:34px 0}
}
@media (max-width:380px){
  /* ⛔ На тесен телефон две колони от източници се смачкват — там се връщат
     в един стълб. Правило, което пази място за втора колона, иска отмяна
     там, където мястото го няма. */
  .ht-src .srcs{grid-template-columns:minmax(0,1fr)}
  .ht-grid .hx-steps{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:999px){
  /* Четирите обещания са къси — 2×2 вместо четири реда. */
  .band .wrap{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .band .it+.it::before{display:none}
  .band .it:last-child{padding-right:0}
  .band b{font-size:14px}
  .band span{font-size:13px}
  .band svg{width:30px;height:30px}
}

@media (max-width:999px){
  /* ⛔ ЗАКОН, платен пак: дете на flex не се свива под съдържанието си —
     `min-width` по подразбиране е `auto`. Текстовият блок в лентата излизаше
     22 px извън своята кутия и правеше 4 px преливане на цялата страница.
     ✅ `min-width:0` на детето, не `overflow:hidden` на родителя. */
  .band .it{min-width:0}
  .band .it > div{min-width:0}
  .band b,.band span{overflow-wrap:anywhere}
}

@media (max-width:999px){
  /* ⛔⛔ ПАК СЪЩИЯТ ЗАКОН: `white-space:nowrap` на последния елемент от лентата
     беше сложен, за да пази реда до значката 112. В две колони на телефон той
     не пуска текста да се пречупи → 19 px преливане на 360 px.
     📌 Правило, което пази място за нещо, иска отмяна там, където това нещо
     го няма — значката 112 е скрита на този екран. */
  .band .it:last-child b,.band .it:last-child span{white-space:normal}
}

@media (max-width:360px){
  /* ⛔ Заварен дефект, хванат при мерене на 320 px (iPhone SE): лого + надпис
     + значка 112 + бургер не се побират и бургерът излиза 26 px извън екрана.
     ⛔ Значката 112 НЕ се маха — тя е спешният номер. Свива се надписът. */
  .topbar-row{gap:10px}
  .mark b{font-size:16px}
  .mark img{width:32px;height:32px}
  .em-pill{padding:8px 11px;font-size:13px}
  .burger{padding:8px 4px;margin-left:0}
}

@media (max-width:340px){
  /* На 320 px дори свитият надпис не стига. Логото остава ЗНАК без думи —
     марката се познава по него, а спешният номер и менюто са по-важни. */
  .mark b i{display:none}
  .mark b{font-size:15px}
  .wrap{padding-left:14px;padding-right:14px}
}

/* Заглавието на филтрите стана h2 заради реда на нивата — размерът остава
   същият, това е СТРУКТУРНА поправка, не визуална. */
.sheet-in h2{margin:0 0 14px;font:800 21px/1.2 var(--display);color:var(--navy)}
@media (min-width:1200px){
  .sheet.as-rail h2{margin:0 0 14px;font:700 13px/1 var(--display);letter-spacing:.1em;
    text-transform:uppercase;color:var(--muted)}
}

/* ⛔⛔ ЗАКОН, платен пак (виж 30.08, „инлайн SVG без размер = 300×150 и черен“):
   размерът на стрелката беше даден САМО за `.sec-h .go svg` и `.card .go svg`.
   В новите блокове (`.ipan`, `.ht-src`) същият `.go` стои без родител с правило
   → стрелката се разду до огромен черен триъгълник.
   ✅ Размерът и цветът се дават на САМИЯ клас, не на мястото му. */
.go{display:inline-flex;align-items:center;gap:8px;color:var(--blue);
  font:600 15px/1 var(--display)}
.go:hover{text-decoration:underline}
.go svg{width:17px;height:17px;flex:0 0 17px;fill:none;stroke:currentColor;stroke-width:2}