/* Здравен портал — слой на НАЧАЛНАТА страница и Центъра за доверие (30.08.2026).
   ⛔ Отделен файл: върнатият дизайн (style.css + ux.css) НЕ се пипа.
   Всички правила са с представка .hx- и ползват СЪЩЕСТВУВАЩИТЕ токени. */

/* ⛔⛔ ПАЗАЧ (сложен на 30.08, след като законът удари ДВА пъти):
   инлайн SVG без width/height и без CSS размер заема 300×150 px и се рисува ЧЕРЕН.
   Всеки SVG в този слой получава разумен размер по подразбиране; по-точните
   правила по-долу са с по-висока специфичност и си остават над него. */
[class*="hx-"] svg{width:17px;height:17px;flex:0 0 auto;fill:none;
  stroke:currentColor;stroke-width:2}

/* ---- Популярни търсения: ЕДИН хоризонтален ред (промт 4, 30.08) ----
   ⛔ Пренасянето правеше стена от бутони „един нагоре, друг надолу“.
   Сега: nowrap + скрол със snap; разливката отдясно казва „има още“. */
.hx-chipwrap{position:relative;margin:9px 0 0}
.hx-chips{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  padding:2px 26px 2px 2px;scrollbar-width:none;justify-content:flex-start}
.hx-chips::-webkit-scrollbar{display:none}
.hx-chips a{flex:0 0 auto;scroll-snap-align:start;display:inline-flex;align-items:center;
  gap:8px;padding:9px 15px;border:0;border-radius:14px;background:var(--sky);
  color:var(--navy);font:600 14px/1 var(--body);text-decoration:none;white-space:nowrap;
  transition:background .15s,color .15s,transform .15s}
.hx-chips a:hover,.hx-chips a:focus-visible{background:var(--deep-sky);transform:translateY(-1px)}
.hx-chips a svg{width:17px;height:17px;flex:0 0 17px;fill:none;stroke:var(--blue);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
/* ⛔⛔ Разливка с ЦВЯТ иска да познае фона — мерено: под чиповете е бяло, а
   героят рисува светлосиньо → лъсваше бледа ивица. МАСКАТА избледнява самото
   СЪДЪРЖАНИЕ и работи на всякакъв фон. Пада само когато редът е доскролван
   докрай (класа я слага JS-ът), за да не тъмнее последният чип без причина. */
.hx-fade{display:none}
.hx-chips{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.hx-chipwrap.at-end .hx-chips,.hx-chipwrap.no-scroll .hx-chips{
  -webkit-mask-image:none;mask-image:none}
@media(prefers-reduced-motion:reduce){.hx-chips a{transition:none}}

.hx-row{display:grid;gap:12px}
@media(min-width:700px){.hx-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.hx-row{grid-template-columns:repeat(4,minmax(0,1fr))}}
.hx-row-3{display:grid;gap:12px}
@media(min-width:700px){.hx-row-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1040px){.hx-row-3{grid-template-columns:repeat(4,minmax(0,1fr))}}

.hx-card{display:flex;flex-direction:column;gap:6px;padding:16px;border:1px solid var(--line);
  border-radius:var(--r);background:#fff;text-decoration:none;color:var(--ink);
  transition:border-color .15s,box-shadow .15s,transform .15s;min-width:0}
.hx-card:hover{border-color:var(--blue);box-shadow:var(--shadow);transform:translateY(-1px)}
.hx-card b{font:700 16px/1.25 var(--display);overflow-wrap:anywhere}
.hx-card span{color:var(--muted);font-size:13.5px;line-height:1.45}
.hx-card .hx-n{color:var(--blue);font-weight:700}

.hx-near{background:var(--soft);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px}
.hx-near h2{margin:0 0 4px;font:800 clamp(20px,2.4vw,26px)/1.2 var(--display);color:var(--navy)}
.hx-near p.hx-sub{margin:0 0 14px;color:var(--muted);font-size:15px}
.hx-near-g{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:760px){.hx-near-g{grid-template-columns:repeat(6,minmax(0,1fr))}}
.hx-near-g a{display:flex;flex-direction:column;align-items:center;gap:7px;padding:13px 8px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:var(--ink);
  font:600 13.5px/1.2 var(--body);text-align:center;transition:border-color .15s,transform .15s}
.hx-near-g a:hover{border-color:var(--blue);transform:translateY(-1px)}
.hx-near-g img{width:30px;height:30px}
.hx-near-cta{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:12px 20px;
  border-radius:var(--r-pill);background:var(--blue);color:#fff;font:700 15px/1 var(--body);
  text-decoration:none;border:0;cursor:pointer}
.hx-near-cta:hover{background:var(--navy)}
.hx-near-cta svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.9}

.hx-steps{display:grid;gap:12px;counter-reset:hx}
@media(min-width:760px){.hx-steps{grid-template-columns:repeat(4,minmax(0,1fr))}}
.hx-steps div{position:relative;padding:18px 16px 16px;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.hx-steps div::before{counter-increment:hx;content:counter(hx);display:grid;place-items:center;
  width:30px;height:30px;border-radius:50%;background:var(--sky);color:var(--blue);
  font:800 15px/1 var(--display);margin-bottom:9px}
.hx-steps b{display:block;font:700 15.5px/1.3 var(--display);margin-bottom:4px}
.hx-steps p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}

.hx-trust{border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;
  background:linear-gradient(100deg,var(--sky),#fff 62%)}
.hx-trust h2{margin:0 0 6px;font:800 clamp(20px,2.4vw,27px)/1.2 var(--display);color:var(--navy)}
.hx-trust p{margin:0 0 14px;color:var(--muted);font-size:15px}
.hx-trust ul{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px}
@media(min-width:760px){.hx-trust ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hx-trust li{display:flex;align-items:flex-start;gap:9px;font-size:14.5px;color:var(--ink)}
.hx-trust li svg{width:19px;height:19px;flex:0 0 19px;margin-top:1px;fill:none;stroke:var(--green);stroke-width:1.9}
.hx-trust a.hx-more{display:inline-flex;align-items:center;gap:8px;padding:11px 19px;border-radius:var(--r-pill);
  border:1px solid var(--blue);color:var(--blue);font:700 14.5px/1 var(--body);text-decoration:none;background:#fff}
.hx-trust a.hx-more:hover{background:var(--blue);color:#fff}
a.hx-more svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2}

/* --- Център за доверие --- */
.hx-doc{max-width:820px}
.hx-doc h2{font:800 clamp(19px,2.2vw,25px)/1.25 var(--display);color:var(--navy);margin:30px 0 10px}
.hx-doc h3{font:700 16.5px/1.3 var(--display);color:var(--ink);margin:20px 0 6px}
.hx-doc p,.hx-doc li{color:var(--ink);font-size:15.5px;line-height:1.65}
.hx-doc ul{padding-left:20px;margin:8px 0}
.hx-tbl{width:100%;border-collapse:collapse;margin:12px 0;font-size:14.5px}
.hx-tbl th,.hx-tbl td{border:1px solid var(--line);padding:9px 11px;text-align:left;vertical-align:top}
.hx-tbl th{background:var(--soft);font:700 13.5px/1.3 var(--body);color:var(--navy)}
.hx-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.hx-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-pill);
  font:700 12.5px/1 var(--body)}
.hx-ok{background:rgba(30,143,63,.1);color:var(--green)}
.hx-un{background:rgba(91,112,134,.12);color:var(--muted)}

/* ⛔⛔ 30.08: SVG БЕЗ width/height и БЕЗ CSS размер става 300×150 px и се
   рисува ЧЕРЕН (fill по подразбиране). Точно това стана с „Виж всички →“ в
   .sec-h — три черни триъгълника по цялата страница. Всеки инлайн SVG иска
   размер И fill:none в СВОЯ контекст; правилото за .card .go не важи тук. */
.sec-h .go{display:inline-flex;align-items:center;gap:7px;font:700 14.5px/1 var(--body);
  color:var(--blue);text-decoration:none;white-space:nowrap}
.sec-h .go:hover{text-decoration:underline}
.sec-h .go svg{width:17px;height:17px;flex:0 0 17px;fill:none;stroke:currentColor;stroke-width:2}

/* На тесен екран таблицата се превръща в редове с етикети — хоризонталният
   скрол на 360 px е по-лош от подредба в блокове. Етикетите идват от data-l. */
@media(max-width:620px){
  .hx-tbl,.hx-tbl tbody,.hx-tbl tr,.hx-tbl td{display:block;width:auto}
  .hx-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .hx-tbl tr{border:1px solid var(--line);border-radius:var(--r);margin:0 0 10px;padding:4px 0;background:#fff}
  .hx-tbl td{border:0;padding:7px 12px;display:flex;gap:10px;align-items:baseline}
  .hx-tbl td::before{content:attr(data-l);flex:0 0 92px;color:var(--muted);
    font:700 12px/1.5 var(--body);text-transform:uppercase;letter-spacing:.02em}
  .hx-scroll{overflow-x:visible}
}

/* Промтът: „На mobile: 2 columns. НЕ прави 8 огромни карти една под друга.“
   Осем карти в една колона правеха 9 екрана скролване — мерено. */
/* ⛔⛔ ЗАКОНЪТ НАОПАКИ: това правило беше БЕЗ media query и стоеше СЛЕД
   правилата за 4 колони → биеше ги и на десктоп (2 колони вместо 4).
   Всяко правило, което важи само за телефон, се пише В своята media query. */
@media(max-width:699px){
  .hx-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hx-row .hx-card{padding:13px 12px}
  .hx-row .hx-card b{font-size:14.5px}
  .hx-row .hx-card span{font-size:12.5px}
}

/* Промт 2 (30.08 12:16): „Популярни търсения“ е ПОМОЩЕН елемент — стои СЛЕД
   шестте категории и НЕ доминира. Компактни чипове: по-нисък padding, по-дребен
   шрифт, малка лупа. ⛔ Местенето е в разметката, не с CSS order — фокусът и
   четецът на екран вървят по РЕДА В HTML-а. */
.hx-chips-l{margin:22px 0 0;font-size:12px;text-transform:uppercase;letter-spacing:.08em;
  font-weight:700;color:var(--muted)}
.hx-chips{gap:7px;margin-top:9px}
.hx-chips a{padding:7px 12px;font-size:13px;gap:6px;border-radius:12px}
.hx-chips a svg{width:14px;height:14px;stroke-width:2}
@media(min-width:760px){.hx-chips a{padding:8px 14px;font-size:13.5px}}

/* Хъбът към SEO страниците „специалност × град“ в раздел „Лекари“. */
.hx-hubs{display:grid;gap:9px}
.hx-hub{padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.hx-hub b{display:block;font:700 15px/1.3 var(--display);color:var(--navy);margin-bottom:5px}
.hx-hub span{color:var(--muted);font-size:13.5px;line-height:1.9}
.hx-hub a{color:var(--blue);text-decoration:none;white-space:nowrap}
.hx-hub a:hover{text-decoration:underline}
.hx-hub a i{font-style:normal;color:var(--muted);font-size:12.5px}

/* Копчето „На картата“ живее и извън банера за доверие. */
a.hx-more{display:inline-flex;align-items:center;gap:8px;padding:11px 19px;
  border-radius:var(--r-pill);border:1px solid var(--blue);color:var(--blue);
  font:700 14.5px/1 var(--body);text-decoration:none;background:#fff}
a.hx-more:hover{background:var(--blue);color:#fff}
a.hx-more svg{width:17px;height:17px}

/* ================= страница на активната съставка (промт 3, 30.08) ================= */

/* Филтрите: всяка група е сгънат акордеон с брой — а не изсипани 39 копчета. */
.fgrp-acc{border:1px solid var(--line);border-radius:var(--r);background:#fff;margin:0 0 8px}
.fgrp-acc>summary{list-style:none;cursor:pointer;padding:11px 14px;display:flex;
  align-items:center;gap:8px;font:700 13px/1 var(--body);color:var(--navy);
  text-transform:uppercase;letter-spacing:.06em}
.fgrp-acc>summary::-webkit-details-marker{display:none}
.fgrp-acc>summary::after{content:;margin-left:auto;width:8px;height:8px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);transition:transform .18s}
.fgrp-acc[open]>summary::after{transform:rotate(-135deg)}
.fgrp-acc>summary span{color:var(--muted);font-weight:600;letter-spacing:0;
  text-transform:none;font-size:12.5px}
.fgrp-acc .fchips{padding:0 12px 12px;display:flex;flex-wrap:wrap;gap:7px}

/* Табовете „Само X / Комбинирани“ */
.mtabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.mtabs .mtab{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;
  border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;
  color:var(--ink);font:700 13.5px/1 var(--body);cursor:pointer;transition:all .15s}
.mtabs .mtab span{color:var(--muted);font-weight:600;font-size:12.5px}
.mtabs .mtab:hover{border-color:var(--blue);color:var(--blue)}
.mtabs .mtab[aria-pressed=true]{background:var(--blue);border-color:var(--blue);color:#fff}
.mtabs .mtab[aria-pressed=true] span{color:rgba(255,255,255,.82)}

/* Илюстрацията по форма — вместо празната сива кутия „Снимката не е налична“. */
.pimg[class*=k-]{background:var(--sky);border:1px solid var(--deep-sky);border-style:solid}
.pimg[class*=k-] svg{width:30px;height:30px;fill:none;stroke:var(--blue);
  stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.pimg[class*=k-] s{text-decoration:none;color:var(--blue);font-weight:600;opacity:.85}
.pimg.k-liq svg,.pimg.k-drop svg{stroke:#0F9A70}
.pimg.k-liq,.pimg.k-drop{background:rgba(15,154,112,.08);border-color:rgba(15,154,112,.22)}
.pimg.k-liq s,.pimg.k-drop s{color:#0B7C5A}
.pimg.k-vial svg,.pimg.k-supp svg{stroke:#7A5AF8}
.pimg.k-vial,.pimg.k-supp{background:rgba(122,90,248,.07);border-color:rgba(122,90,248,.2)}
.pimg.k-vial s,.pimg.k-supp s{color:#5B3FD1}

/* Едно изречение на картичката — да се чете, не да се дешифрира. */
.pcard .pc-m{color:var(--ink);font-size:13.5px;line-height:1.5;opacity:.9}

/* Голямата значка в главата на съставката — същият език като картичките,
   вместо сива пунктирана кутия. */
.pimg.big{background:var(--sky);border:1px solid var(--deep-sky);border-style:solid}
.pimg.big svg{stroke:var(--blue);fill:none}
.pimg.big s{text-decoration:none;color:var(--blue);font-weight:600}

/* Векторната илюстрация и структурната формула в мястото за снимка. */
.pimg.has.vec img{width:100%;height:100%;object-fit:cover;border-radius:calc(var(--r) - 3px)}
.pimg.has.vec s{display:none}
.pimg.big.struct{background:#fff;border:1px solid var(--line);border-style:solid;padding:10px}
.pimg.big.struct img{max-width:100%;max-height:96px;object-fit:contain}
.pimg.big.struct s{text-decoration:none;color:var(--muted);font-size:11px;line-height:1.35;
  display:block;margin-top:6px;max-width:150px}

/* ⛔⛔ CC-BY ИСКА видимо посочване — а .pimg.big е с фиксирана височина 132 px и
   режеше „автор · лиценз“. Структурната формула получава своя височина. */
.pimg.big.struct{height:auto;min-height:132px;width:168px;align-content:start;padding:10px 10px 12px}
.pimg.big.struct img{max-height:104px}
.pimg.big.struct s{font:500 10px/1.4 var(--body);color:var(--muted);max-width:100%;
  display:block;margin-top:7px;overflow-wrap:anywhere}
@media(max-width:760px){.pimg.big.struct{width:120px}.pimg.big.struct img{max-height:78px}}

/* На страницата на продукта изображението е ГЛАВНОТО, не значка отстрани. */
.pimg.has.vec.big{width:180px;height:180px}
.pimg.big[class*=k-] svg{width:44px;height:44px}
@media(max-width:760px){.pimg.has.vec.big{width:132px;height:132px}}

/* ⛔ CC-BY иска ЦЯЛОТО посочване да се чете. Снимка (не вектор) получава своя
   височина за реда „източник · автор · лиценз“, вместо да го реже. */
.pimg.has:not(.vec){height:auto;align-content:start;padding:0 0 6px;background:#fff}
.pimg.has:not(.vec) img{border-radius:calc(var(--r) - 3px)}
.pimg.has:not(.vec) s{text-decoration:none;display:block;padding:6px 8px 0;
  font:500 10px/1.35 var(--body);color:var(--muted);overflow-wrap:anywhere}
.pimg.has.big:not(.vec){width:180px}
@media(max-width:760px){.pimg.has.big:not(.vec){width:132px}}