/*
 * Стилът на магазина — само за магазинните елементи.
 *
 * Хедърът, футърът и общият стил на сайта идват като фрагменти от реалния билд
 * (виж tools/fragmenti.mjs и inc/izgled.php) — тук те НЕ се повтарят, за да
 * няма двубой между два описания на едно и също нещо. Този файл стилизира
 * витрината, продукта и кошницата, плюс резервната обвивка (класовете mag-*),
 * която се показва само ако фрагментите липсват.
 *
 * Файлът се зарежда СЛЕД стила на сайта, тоест при еднакви селектори печели
 * той. Стойностите са от src/styles/tokens.css; сменят се там → сменят се и
 * тук. При промяна: вдигни ?v= в izgled.php — .htaccess кешира CSS за година.
 */

@font-face {
  font-family: 'Onest Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/fonts/onest-cyrillic-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Onest Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/fonts/onest-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/fonts/inter-cyrillic-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * Токените повтарят tokens.css СЪС СЪЩИТЕ стойности. Това е нарочно: файлът
 * презаписва :root след стила на сайта, тоест различна стойност тук би
 * пребоядисала и хедъра/футъра от фрагмента. Еднаква стойност = никой не губи.
 */
:root {
  --graphite: #0e1013;
  --panel: #16191e;
  --cream: #f6f3ed;
  --line: #ddd8ce;
  --line-dark: #242830;
  --fg: #23272b;
  --fg-muted: #676c75;
  --on-dark: #f2efe9;
  --muted-on-dark: #8a9099;
  --accent: #c0392b;
  --accent-bright: #e04a31;
  --success: #1e7a4c;
  --tap: 44px;
  --radius: 2px;
  --font-display: 'Onest Variable', system-ui, sans-serif;
  --font-body: 'Inter Variable', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  /* Със стила на сайта важи неговият ритъм (1.6); резервът пази стария. */
  line-height: var(--leading-body, 1.55);
}

img { max-width: 100%; height: auto; }

/* Същата ширина като .wrap на сайта — хедърът от фрагмента ползва този клас,
   различна стойност тук би му сменила ширината. 3rem = 2 × --space-3. */
.wrap {
  width: min(100% - 3rem, 76rem);
  margin-inline: auto;
}

/*
 * Стилът на сайта нулира отстъпите на p (той си ги дава през класове).
 * Магазинното съдържание разчита на браузърните — връщат се, но само в <main>:
 * хедърът и футърът от фрагмента стоят извън него и пазят своите нули.
 */
main p { margin-block: 1em; }
main h2 { margin-block: 0.83em; }

/* ── Резервен хедър (mag-*): само когато фрагментите липсват ─────────── */

.mag-hdr {
  background: var(--cream);
  border-bottom: 1px solid rgb(0 0 0 / 0.1);
}

.mag-hdr__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 56px;
  gap: 8px;
}

.mag-hdr__back {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 8px;
  color: var(--fg);
  font-weight: 600;
  text-decoration: none;
}

.mag-hdr__brand { justify-self: center; display: inline-flex; align-items: center; min-height: var(--tap); }
.mag-hdr__brand img { display: block; height: 26px; width: auto; }

.mag-hdr__cart {
  justify-self: end;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  color: var(--fg);
}

.mag-hdr__badge {
  position: absolute;
  top: 4px;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ── Съдържание ──────────────────────────────────────────────────────── */

.head { padding: 32px 0 8px; }

h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.lede { margin: 6px 0 0; color: var(--fg-muted); max-width: 60ch; }

.chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 16px 0;
  scrollbar-width: none;
}

.chips::-webkit-scrollbar { display: none; }

/* Сайтът също има .chip (bold, 44px) — тук всичко видимо се задава изрично,
   за да не протече негово свойство в магазинния вид. */
.chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--fg);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 400;
  white-space: nowrap;
}

.chip.is-active { border-color: var(--accent); color: var(--accent); }

/* Решетката с продукти */
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding-bottom: 40px;
}

.card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /* Сайтовата .card носи padding — тук снимката опира в ръба нарочно. */
  padding: 0;
  text-decoration: none;
  color: var(--fg);
  overflow: hidden;
  transition: border-color 150ms ease, transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.card:hover { border-color: var(--accent); }
.card:active { transform: scale(0.99); }

.card__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--panel);
}

.card__img--empty { background: repeating-linear-gradient(45deg, #eee, #eee 10px, #e4e0d8 10px, #e4e0d8 20px); }

.card__body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.card__name { font-weight: 600; line-height: 1.3; }
.card__meta { color: var(--fg-muted); font-size: 0.8125rem; }
.card__price {
  margin-top: auto;
  padding-top: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.empty {
  margin: 24px 0 48px;
  padding: 28px 20px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--fg-muted);
  text-align: center;
}

/* ── Продуктова страница ─────────────────────────────────────────────── */

.prod { display: grid; gap: 24px; padding: 24px 0 48px; }

.prod__gallery { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--radius); }
.prod__gallery::-webkit-scrollbar { display: none; }
.prod__shot { flex: 0 0 100%; scroll-snap-align: center; }
.prod__shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: var(--panel); }

.prod__price { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; }
.prod__stock { color: var(--success); font-weight: 600; font-size: 0.9375rem; }
.prod__stock--out { color: var(--accent); }

.qty { display: flex; align-items: center; gap: 8px; }
.qty input {
  width: 72px;
  min-height: var(--tap);
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
  font-size: 16px;
  text-align: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--tap);
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.btn:hover { background: var(--accent-bright); }
.btn:active { transform: scale(0.97); }

.btn--ghost { background: transparent; color: var(--fg); border-color: var(--line); }
.btn--ghost:hover { background: #fff; border-color: var(--accent); color: var(--fg); }

.prod__desc { max-width: 64ch; white-space: pre-wrap; }

.note {
  margin: 16px 0;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}

.note--ok { border-left-color: var(--success); }

/* ── Кошница ─────────────────────────────────────────────────────────── */

.cart { padding: 8px 0 48px; }

.cart__row {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.cart__row img { width: 72px; height: 54px; object-fit: cover; border-radius: var(--radius); background: var(--panel); }
.cart__name { font-weight: 600; text-decoration: none; color: var(--fg); }
.cart__unit { color: var(--fg-muted); font-size: 0.8125rem; }
.cart__line { display: flex; align-items: center; gap: 10px; }
.cart__sum { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.cart__qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.cart__qty button {
  width: var(--tap); height: var(--tap);
  border: 0; background: none; font-size: 1.1rem; cursor: pointer; color: var(--fg);
}
.cart__qty span { min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; }

.cart__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 16px 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
}

/* Формата за поръчка */
.field { margin: 0 0 16px; }
.field label { display: block; margin-bottom: 6px; font-size: 0.875rem; color: var(--fg-muted); }
.field input, .field textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  font: inherit;
  font-size: 16px;
}
.field textarea { min-height: 90px; resize: vertical; }

:where(a, button, input, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Резервен футър (mag-*): само когато фрагментите липсват ─────────── */

.mag-foot { background: var(--graphite); color: var(--on-dark); padding: 32px 0 40px; margin-top: 24px; }
.mag-foot__phone { display: inline-block; font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; color: var(--on-dark); text-decoration: none; margin-bottom: 8px; }
.mag-foot__nav { font-size: 0.875rem; }
.mag-foot__nav a { color: var(--muted-on-dark); text-decoration: none; }
.mag-foot__nav a:hover { color: var(--accent-bright); }
.mag-foot__mute { color: var(--muted-on-dark); font-size: 0.8125rem; margin: 12px 0 0; }

@media (min-width: 40rem) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .prod { grid-template-columns: 1.1fr 1fr; align-items: start; }
  h1 { font-size: 2rem; }
}

@media (min-width: 64rem) {
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/*
 * Само магазинните движения, НЕ *: универсалният selector с transform: none
 * замразяваше и хедъра на сайта (той се скрива с translateY при скрол) и
 * чекмеджето на менюто. Сайтът си носи собствено reduced-motion правило.
 */
@media (prefers-reduced-motion: reduce) {
  .card, .btn, .cart__qty button {
    transition-property: opacity, background-color, border-color, color !important;
    transform: none !important;
  }
}

/*
 * Помощни класове вместо inline style="".
 *
 * CSP-то на сайта е без 'unsafe-inline'. Хешовете покриват <style> блокове, но
 * НЕ и style="" атрибути — те се изхвърлят мълчаливо, тоест страницата се
 * разпада, без нито едно съобщение. Затова тук няма нито един inline стил.
 */
.mt2 { margin-top: 8px; }
.mt3 { margin-top: 16px; }
.mb2 { margin-bottom: 12px; }
.inl { display: inline; }
.head--tight { padding-bottom: 0; }
.h-sub { margin-top: 28px; font-size: 1.125rem; }
.h-sub--flush { margin-top: 0; margin-bottom: 12px; }
.btn--sm { min-height: 36px; padding: 0 12px; }
.grid--list { list-style: none; margin: 0; padding: 0 0 40px; }
.prod__gallery { margin: 0; }
.cart__vat { margin: 0 0 24px; }
.cart__ph { width: 72px; height: 54px; border-radius: var(--radius); }
.backlink { color: var(--fg-muted); text-decoration: none; }
.backlink:hover { color: var(--accent); }
.prod__shot .card__img--empty { display: block; aspect-ratio: 4 / 3; }

/*
 * Картите в един ред трябва да са еднакво високи.
 *
 * Клетката на решетката се разпъва, но <a> вътре в <li> не я запълва — затова
 * карта с двуредово име стърчеше над съседката си. `height: 100%` върху картата
 * подравнява и долния ѝ ръб, тоест цените застават на една линия.
 */
.grid > li {
  display: flex;
}

.card {
  height: 100%;
  width: 100%;
}

/* Изчерпаното си личи ОТ ВИТРИНАТА, не след влизане в страницата. */
.card__out {
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 600;
}

.card--out .card__img,
.card--out .card__img--empty {
  opacity: 0.55;
}

/* Капанът за ботове. Скрит от хора, видим за скриптове. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Профил ─────────────────────────────────────────────────────────────── */

.prof { padding-bottom: 48px; }

.prof__lede {
  color: var(--fg-muted);
  max-width: 60ch;
  margin: 0 0 20px;
}

.prof__h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 40px 0 4px;
}

.prof__form { max-width: 34rem; }
.prof__akcii { margin: 20px 0 0; }
.prof__vtori { margin-top: 12px; }

/*
 * Кодът се въвежда веднъж и се гледа, докато се пише — затова е едър, с
 * разредка и с цифри от еднаква ширина: шест цифри се сверяват със средата на
 * писмото, а не се четат като дума.
 */
.prof__kod {
  font-size: 1.5rem;
  letter-spacing: 0.4em;
  font-variant-numeric: tabular-nums;
  max-width: 9em;
}

.prof__spisak {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.prof__por {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  background: #fff;
}

.prof__glava {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}

.prof__nomer { font-weight: 700; }
.prof__koga { color: var(--fg-muted); font-size: 0.875rem; }

.prof__suma {
  margin-left: auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.prof__redove {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  color: var(--fg-muted);
  font-size: 0.9375rem;
}

.prof__tov {
  margin: 8px 0 0;
  font-size: 0.875rem;
  color: var(--fg-muted);
}

.prof__kraj {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.prof__iztriy { color: var(--accent); }

.prof__bel {
  margin: 10px 0 0;
  font-size: 0.8125rem;
  color: var(--fg-muted);
  max-width: 60ch;
}

/* ── Футърът стои ДОЛУ, дори страницата да е къса ───────────────────────── */

/*
 * Кошницата, входът и потвърждението са къси страници. Без това футърът
 * увисваше по средата, а под него зееше половин екран — изглежда като
 * недовършена страница, а не като кратка.
 *
 * 100dvh, не 100vh: на телефон vh брои и лентата на браузъра, която се скрива
 * при скрол, тоест страницата излиза по-висока от екрана и се появява
 * ненужно превъртане.
 */
body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

body > main {
  flex: 1 0 auto;
}

/* ── Вход в профила ─────────────────────────────────────────────────────── */

.vhod {
  display: grid;
  place-items: center;
  padding: 48px 20px 64px;
}

/*
 * Тъмна карта върху кремавата лента — същият похват като входните карти на
 * конфигуратора. Тясна колкото едно изречение: поле за имейл през целия екран
 * няма къде да спре погледа.
 */
.vhod__karta {
  width: 100%;
  max-width: 27rem;
  background: var(--panel);
  color: #f2efe9;
  border: 1px solid #242830;
  border-radius: var(--radius);
  padding: 32px 28px;
}

.vhod__znak {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: contain;
  margin-bottom: 20px;
}

.vhod__zaglavie {
  margin: 0 0 8px;
  font-size: 1.5rem;
  line-height: 1.15;
}

.vhod__sub {
  margin: 0 0 24px;
  color: #a7adb6;
  font-size: 0.9375rem;
}

.vhod__sub strong { color: #f2efe9; }

.vhod__pole { margin: 0 0 16px; }

.vhod__pole label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a7adb6;
}

.vhod__pole input {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  color: #f2efe9;
  background: #0e1013;
  border: 1px solid #2f333c;
  border-radius: var(--radius);
}

.vhod__pole input::placeholder { color: #6b7079; }

.vhod__pole input:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
  border-color: transparent;
}

/* Шест цифри се сверяват с писмото — затова са едри и с равна ширина. */
.vhod__kod {
  font-size: 1.5rem;
  letter-spacing: 0.4em;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.vhod__btn {
  width: 100%;
  min-height: var(--tap);
  padding: 12px 20px;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}

.vhod__btn:hover { background: var(--accent-bright); }

.vhod__spisak {
  list-style: none;
  margin: 28px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid #242830;
  display: grid;
  gap: 10px;
  font-size: 0.875rem;
  color: #a7adb6;
}

/* Отметката е нарисувана от текст, не е снимка — нула допълнителни заявки. */
.vhod__spisak li {
  display: grid;
  grid-template-columns: 1.25em 1fr;
  gap: 8px;
}

.vhod__spisak li::before {
  content: "✓";
  color: var(--accent-bright);
  font-weight: 700;
}

.vhod__vtori { margin: 16px 0 0; text-align: center; }

.vhod__drug {
  font: inherit;
  font-size: 0.875rem;
  color: #a7adb6;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
  text-decoration: underline;
}

.vhod__drug:hover { color: #f2efe9; }

/* ── Каталогът с части (katalog/*.php) ───────────────────────────────────
 *
 * Същият език като магазина: кремав фон, тънки линии, без сенки. Представката
 * kat- пази класовете от сблъсък със стила на сайта, който идва от фрагмента.
 */

.kat { padding-bottom: 48px; }

.kat-troha { padding: 16px 0 0; font-size: 0.875rem; color: var(--fg-muted); }
.kat-troha ol { display: flex; flex-wrap: wrap; gap: 4px 8px; list-style: none; margin: 0; padding: 0; }
.kat-troha li { display: flex; align-items: center; min-height: 24px; }
.kat-troha li + li::before { content: '/'; margin-right: 8px; }
.kat-troha a { color: var(--fg-muted); text-decoration: none; }
.kat-troha a:hover { color: var(--accent); }

.kat-gorna { display: grid; gap: 24px; padding: 16px 0 8px; }

.kat-eyebrow {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.kat-ime {
  margin: 4px 0 16px;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.kat-nomera { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 0 0 16px; }
.kat-nomera div { display: grid; gap: 2px; }
.kat-nomera dt { font-size: 0.875rem; color: var(--fg-muted); }
.kat-nomera dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

.kat-cena-blok {
  padding: 16px;
  border: 1px solid rgb(0 0 0 / 0.12);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius, 2px);
}
.kat-cena {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.kat-dds { font-size: 0.875rem; font-weight: 400; color: var(--fg-muted); }
.kat-cena-dds { margin: 2px 0 0; color: var(--fg-muted); }
.kat-cena-data { margin: 8px 0 0; font-size: 0.875rem; color: var(--fg-muted); }
.kat-dostavka { margin: 16px 0; max-width: 60ch; }
.kat-deystviya { display: flex; flex-wrap: wrap; gap: 8px; }

.kat-h2 {
  margin: 32px 0 12px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
}

.kat-tablica-obvivka { overflow-x: auto; }
.kat-tablica { width: 100%; border-collapse: collapse; }
.kat-tablica th,
.kat-tablica td {
  padding: 10px 12px 10px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgb(0 0 0 / 0.12);
}
.kat-tablica tbody th { width: 14rem; font-weight: 400; color: var(--fg-muted); }
.kat-tablica--sravnenie th,
.kat-tablica--sravnenie td { padding-right: 16px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kat-tablica--sravnenie thead th { font-size: 0.875rem; color: var(--fg-muted); font-weight: 600; }
.kat-tablica--sravnenie tbody th { width: auto; color: var(--fg); font-weight: 600; }
.kat-tozi th,
.kat-tozi td { background: rgb(192 57 43 / 0.06); }
.kat-belezhka { font-size: 0.875rem; color: var(--fg-muted); max-width: 68ch; }

.kat-rakovodstvo p,
.kat-faq { max-width: 68ch; }
.kat-faq { display: grid; gap: 16px; margin: 0; }
.kat-faq dt { font-weight: 600; margin-bottom: 4px; }
.kat-faq dd { margin: 0; color: var(--fg-muted); }

/*
 * ── Списъците са РЕШЕТКА от карти, не редове (17.09.2026) ─────────────────
 *
 * Поиска Трифон: „както при големите магазини — по няколко на ред, блоковете
 * по-големи, да се вижда снимката и името, и всичко перфектно за телефон".
 * Дотук редът беше снимка 64 px вляво и текст вдясно — добър за сканиране на
 * номера, лош за познаване на част по вида ѝ. А точно така търси човекът,
 * който не знае как се казва частта му.
 *
 * Телефонът показва ДВЕ в ред, зададено, не изчислено: с auto-fill показваше
 * една и за четири неща трябваше четири екрана (същият урок като при .stoka в
 * base.css). От 48rem нагоре — колкото се съберат по 13rem. minmax(0, 1fr),
 * защото дълга дума без интервал иначе разширява колоната си и двете спират
 * да са равни.
 *
 * Едни и същи класове за артикул, вид, категория и машина — една карта,
 * четири списъка. Огледало: src/pages/katalog/[vid].astro (статичната
 * страница на вида не зарежда този файл).
 */
.kat-spisak {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 48rem) {
  .kat-spisak {
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  }
}
/*
 * Списъкът на машина е над хиляда карти, а на екрана се побират десет.
 * content-visibility казва на браузъра да не оформя и не рисува това, което е
 * извън екрана; contain-intrinsic-size му дава височина, за да не подскача
 * скролът, а „auto" пред числото значи да помни истинската височина, щом
 * веднъж я е измерил. Числото е височината на карта със снимка на телефон.
 *
 * Съдържанието остава в HTML-а — Google го чете, Ctrl+F го намира. Пропуска
 * се само рисуването.
 */
.kat-spisak > li {
  min-width: 0;
  content-visibility: auto;
  contain-intrinsic-size: auto 250px;
}
.kat-red {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 8px 8px 12px;
  min-height: var(--tap, 44px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius, 2px);
  color: var(--fg);
  text-decoration: none;
}
.kat-red:hover,
.kat-red:focus-visible { border-color: var(--accent); }
.kat-red:hover .kat-red__ime { color: var(--accent); }
/*
 * Снимката е първа и стига до ръба на картата — тя е причината картата да
 * съществува. Квадрат с contain, не cover: частта се вижда цяла, с бял фон,
 * какъвто е и фонът на самата снимка от доставчика.
 */
.kat-red__snimka { margin: -8px -8px 4px; min-width: 0; }
.kat-red__snimka img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fff;
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius, 2px) var(--radius, 2px) 0 0;
}
/*
 * Картата БЕЗ снимка държи същата височина (19.09.2026).
 *
 * Откакто артикулите без кадър се показват, в решетката застанаха карти с два
 * пъти по-малка височина от съседите си и редът се накъса. Празното квадратче
 * с иконка не заблуждава — вижда се, че снимка няма — но пази реда цял.
 */
.kat-red__praz {
  display: grid;
  place-items: center;
  margin: -8px -8px 4px;
  aspect-ratio: 1 / 1;
  background: var(--cream, #f6f3ed);
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius, 2px) var(--radius, 2px) 0 0;
  color: rgb(0 0 0 / 0.18);
}
/* Името е най-много три реда; дълга дума без интервал се пренася, не бута. */
.kat-red__ime {
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kat-red__nomer {
  font-size: 0.8125rem;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
/* Едно изречение под името на вида: човек, който не знае как се казва частта,
   я познава по описанието. Реже се на два реда, за да са картите равни. */
.kat-red__opis {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--fg-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Цената е най-долу — на една линия във всички карти от реда. */
.kat-red__cena {
  margin-top: auto;
  padding-top: 4px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.kat-red__cena small { font-weight: 400; color: var(--fg-muted); }

.kat-stranici p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 24px 0 0; }
.kat-stranici__broy { color: var(--fg-muted); }
/* Номерата на страниците. Целта за пръст е 44 px, затова са с това поле. */
.kat-stranici__n { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 8px; border: 1px solid var(--line); border-radius: 2px; color: inherit; text-decoration: none; font-variant-numeric: tabular-nums; }
.kat-stranici__n:hover, .kat-stranici__n:focus-visible { border-color: var(--accent); }
.kat-stranici__n--tuk { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.kat-stranici__praznina { color: var(--fg-muted); }

.kat-tarsene { display: flex; gap: 8px; margin: 8px 0 24px; }
.kat-tarsene input {
  flex: 1;
  min-width: 0;
  min-height: var(--tap, 44px);
  padding: 0 12px;
  font: inherit;
  border: 1px solid rgb(0 0 0 / 0.25);
  border-radius: var(--radius, 2px);
  background: #fff;
  color: var(--fg);
}
.kat-tarsene input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

@media (min-width: 48rem) {
  .kat-gorna { grid-template-columns: 1fr 1fr; gap: 40px; }
  .kat-tablica tbody th { width: 16rem; }
}

.kat-sravnenie,
.kat-rakovodstvo,
.kat-vaprosi { margin-top: 8px; }

.kat-disclaimer { margin: 0 0 16px; font-size: 0.875rem; color: var(--fg-muted); max-width: 60ch; }
.kat-mashini { margin: 0; padding-left: 1.2em; }
.kat-mashini li { margin: 6px 0; }
/* Данните под машината се четат като втори ред, не се бият със заглавието. */
.kat-mashina__danni { display: block; }

/* Снимката на артикула и умалените в списъците — от доставчика, по номер. */
.kat-snimka { margin: 0 0 16px; max-width: 28rem; }
.kat-snimka img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fff;
  border: 1px solid rgb(0 0 0 / 0.12);
  border-radius: var(--radius, 2px);
}
.kat-snimka figcaption { margin-top: 4px; font-size: 0.75rem; color: var(--fg-muted); }
/*
 * Редът със снимка 64 px вляво го няма вече — списъците са карти (виж
 * .kat-spisak по-горе). Урокът от него остава там: дълга дума без интервал
 * се пренася с overflow-wrap, за да не бута снимката.
 */

/* ── Страницата на артикула по макета от 12.09.2026 ─────────────────────── */

.kat-snimka-karta { min-width: 0; }
.kat-snimka { margin: 0; max-width: none; position: relative; }
.kat-snimka__uvelichi { display: block; position: relative; color: inherit; }
.kat-snimka__lupa {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid rgb(0 0 0 / 0.15);
  border-radius: 999px;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--fg);
}
.kat-snimka figcaption { text-align: center; }
.kat-snimka--nyama {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  aspect-ratio: 1 / 1;
  padding: 24px;
  background: #fff;
  border: 1px dashed rgb(0 0 0 / 0.2);
  border-radius: var(--radius, 2px);
  color: var(--fg-muted);
  font-size: 0.875rem;
  text-align: center;
}
.kat-snimka--nyama__ikona { color: rgb(0 0 0 / 0.25); }
.kat-snimka--nyama__tekst { max-width: 32ch; line-height: 1.45; }

.kat-sashtnost { min-width: 0; }
.kat-nomera dt { display: inline; font-size: 0.9375rem; }
.kat-nomera dd { display: inline; }
.kat-nomera div { display: block; margin-bottom: 4px; }

.kat-pill-red { margin: 8px 0 12px; }
.kat-pill {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--success);
  border-radius: 999px;
  color: #1f7a4d;
  background: rgb(61 214 140 / 0.12);
  font-size: 0.8125rem;
  font-weight: 600;
}

.kat-dostavka {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 12px 0 16px;
  max-width: 60ch;
}
.kat-dostavka__ikona { flex: 0 0 auto; margin-top: 2px; color: var(--fg); }

.kat-tabs {
  display: flex;
  gap: 0;
  margin: 8px 0 0;
  border-bottom: 1px solid rgb(0 0 0 / 0.12);
  overflow-x: auto;
  scrollbar-width: none;
}
.kat-tabs::-webkit-scrollbar { display: none; }
.kat-tabs a {
  flex: 0 0 auto;
  padding: 12px 16px;
  min-height: var(--tap, 44px);
  display: inline-flex;
  align-items: center;
  color: var(--fg);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}
.kat-tabs a:first-child { border-bottom-color: var(--accent); }
.kat-tabs a:hover { border-bottom-color: var(--accent); }

.kat-dve { display: grid; gap: 24px; margin-top: 8px; }
.kat-osnova { min-width: 0; }
.kat-razdel { scroll-margin-top: 16px; }
.kat-razdel p { max-width: 68ch; }
.kat-h3 { margin: 24px 0 8px; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; }

.kat-tablica--har th,
.kat-tablica--har td { border: 1px solid rgb(0 0 0 / 0.1); padding: 10px 12px; }
.kat-tablica--har tbody th { background: rgb(0 0 0 / 0.035); color: var(--fg); }

.kat-faq-red { border-top: 1px solid rgb(0 0 0 / 0.12); }
.kat-faq-red:last-of-type { border-bottom: 1px solid rgb(0 0 0 / 0.12); }
.kat-faq-red summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--tap, 44px);
  padding: 8px 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.kat-faq-red summary::-webkit-details-marker { display: none; }
.kat-faq-red summary::after { content: '⌄'; color: var(--fg-muted); font-size: 1.25rem; line-height: 1; }
.kat-faq-red[open] summary::after { content: '⌃'; }
.kat-faq-red p { margin: 0 0 12px; color: var(--fg-muted); max-width: 68ch; }

.kat-strana { min-width: 0; }
.kat-karta {
  padding: 20px;
  background: #fff;
  border: 1px solid rgb(0 0 0 / 0.12);
  border-radius: var(--radius, 2px);
  scroll-margin-top: 16px;
}
.kat-karta__h2 { margin: 0 0 4px; font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; }
.kat-karta__p { margin: 0 0 12px; font-size: 0.9375rem; color: var(--fg-muted); }
.kat-forma .field { margin-bottom: 12px; }
.kat-forma textarea { min-height: 6.5em; }
.kat-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kat-saglasie { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px; font-size: 0.8125rem; color: var(--fg-muted); }
.kat-saglasie input { margin-top: 3px; }
.btn--karta { width: 100%; }
.kat-err {
  display: none;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--accent);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius, 2px);
  font-size: 0.9375rem;
}
.kat-err:target { display: block; }

.kat-dolu { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 0; }
.kat-dolu .btn { flex: 1 1 16rem; justify-content: center; text-align: center; }

@media (min-width: 60rem) {
  .kat-dve { grid-template-columns: minmax(0, 1fr) 22rem; gap: 40px; align-items: start; }
  .kat-strana { position: sticky; top: 16px; }
}

/* Знанието за вида на страницата на артикула: точки под h3. */
.kat-tochki { margin: 0 0 12px 20px; padding: 0; max-width: 68ch; }
.kat-tochki li { margin: 4px 0; }

/* ── Страницата на артикула по макета на Трифон — 13 септември 2026 ───────
 *
 * Картата с офертата е решението на страницата: цена или „по запитване",
 * срок, проверка, един широк бутон и телефон. Всичко под нея е доказателство.
 * Ъглите тук са по-заоблени от останалия магазин (--kat-radius) — така ги
 * поиска Трифон на макета; линиите остават 1px, сенки няма.
 */

.kat { --kat-radius: 14px; }

.kat-snimka {
  padding: 20px;
  background: #fff;
  border: 1px solid rgb(0 0 0 / 0.1);
  border-radius: var(--kat-radius);
}
.kat-snimka img { border: 0; border-radius: 0; }
.kat-snimka figcaption { margin-top: 16px; text-align: center; }
.kat-snimka__lupa {
  right: 16px;
  bottom: 16px;
  width: 38px;
  height: 38px;
  color: var(--fg-muted);
  transition: color 150ms ease, border-color 150ms ease;
}
.kat-snimka__uvelichi:hover .kat-snimka__lupa { color: var(--accent); border-color: var(--accent); }
.kat-snimka--nyama { border-radius: var(--kat-radius); }

.kat-ime { margin: 6px 0 20px; font-size: 2rem; line-height: 1.15; }
.kat-ime__mashina {
  display: block;
  margin-top: 6px;
  font-size: 0.7em;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg-muted);
}

/* Номерата: две колони с тънка черта помежду им, етикетът над стойността. */
.kat-nomera { display: flex; flex-wrap: wrap; gap: 12px 0; margin: 0 0 24px; }
.kat-nomera div { display: block; margin: 0; padding-right: 28px; }
.kat-nomera div + div { padding-left: 28px; border-left: 1px solid rgb(0 0 0 / 0.12); }
.kat-nomera dt { display: block; font-size: 0.875rem; color: var(--fg-muted); }
.kat-nomera dd { display: block; margin: 2px 0 0; font-weight: 700; font-variant-numeric: tabular-nums; }

.kat-oferta {
  padding: 24px;
  background: #fff;
  border: 1px solid rgb(0 0 0 / 0.1);
  border-radius: var(--kat-radius);
}
.kat-oferta__cena {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.kat-oferta__dds { font-size: 0.875rem; font-weight: 400; color: var(--fg-muted); }
.kat-oferta__pod { margin: 6px 0 0; color: var(--fg-muted); }
.kat-oferta__data { margin: 6px 0 0; font-size: 0.875rem; color: var(--fg-muted); }

.kat-oferta__redove { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 16px; }
.kat-oferta__redove li { display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start; }
.kat-oferta__ikona { color: var(--accent); flex: 0 0 auto; }
.kat-oferta__redove strong { display: block; font-weight: 700; }
.kat-oferta__redove span { font-size: 0.9375rem; color: var(--fg-muted); }
.kat-oferta__redove strong { color: var(--fg); font-size: 1rem; }

.kat-oferta__btn {
  width: 100%;
  margin-top: 22px;
  min-height: 54px;
  border-radius: 10px;
  font-size: 1.0625rem;
}
.kat-oferta__strelka { font-size: 1.125rem; line-height: 1; }

.kat-oferta__tel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgb(0 0 0 / 0.12);
  font-weight: 600;
}
.kat-oferta__tel svg { color: var(--fg-muted); }
.kat-oferta__tel a { color: var(--fg); text-decoration: none; }
.kat-oferta__tel a:hover { color: var(--accent); }

/* Картата с формата и самата форма — същият език като картата с офертата. */
.kat-karta { padding: 24px; border-radius: var(--kat-radius); }
.kat-karta__h2 { font-size: 1.1875rem; }
.kat-forma .field input,
.kat-forma .field textarea { border-radius: 8px; }
.kat-forma .field input::placeholder,
.kat-forma .field textarea::placeholder { color: rgb(0 0 0 / 0.32); }
.kat-forma__snimka {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 0.8125rem;
  color: var(--fg-muted);
}
.kat-forma__snimka svg { flex: 0 0 auto; margin-top: 2px; }
.btn--tamen { background: var(--graphite); border-color: var(--graphite); min-height: 50px; border-radius: 10px; }
.btn--tamen:hover { background: #23272b; }

@media (min-width: 48rem) {
  .kat-ime { font-size: 2.375rem; }
  .kat-gorna { gap: 48px; }
}

/* ── Лупата: снимката в прозорец върху страницата, само на компютър ───────
 *
 * Както в галерията на мотокарите: карта върху леко затъмнена страница, не
 * черен цял екран — човек трябва да ПОЗНАВА къде е бил. На телефон изобщо не
 * се отваря (решение на Трифон, 13.09.2026); бутонът се показва от
 * katalog/lupa.js само на широк екран.
 */

.kat-snimka__ramka { position: relative; }
/* Авторският display надделява над `hidden` — затова изрично. */
.kat-snimka__lupa[hidden] { display: none; }

@media (min-width: 48rem) {
  .kat-snimka__ramka { cursor: zoom-in; }
}
@media (max-width: 47.9375rem) {
  .kat-snimka__lupa { display: none; }
}

/*
 * Прозорецът е с ФИКСИРАНА широчина, не по естествения размер на файла.
 *
 * Снимките от доставчиците са между 450 px и 1200 px. При
 * `fit-content` прозорецът излизаше 544 px — по-тесен от самата карта на
 * страницата, тоест „уголеми" даваше по-малък кадър. Затова широчината е
 * обявена, а кадърът я запълва: голямата снимка се показва цяла, дребната се
 * разтяга — и в двата случая прозорецът е видимо по-голям от картата.
 */
.kat-lb {
  position: relative;
  width: min(52rem, calc(100vw - 3rem));
  max-width: calc(100vw - 3rem);
  height: fit-content;
  max-height: calc(100dvh - 3rem);
  margin: auto;
  padding: 0;
  border: 1px solid rgb(0 0 0 / 0.12);
  border-radius: var(--kat-radius, 14px);
  overflow: hidden;
  background: #fff;
  color: var(--fg);
}
/* Затворен прозорец не се вижда — без този ред стои отворен насред страницата. */
.kat-lb:not([open]) { display: none; }
.kat-lb::backdrop { background: rgb(14 16 19 / 0.55); backdrop-filter: blur(2px); }

.kat-lb__kadar {
  display: block;
  width: 100%;
  height: auto;
  /* contain, а не fill: при ниска висока клетка кадърът се вписва, не се сплесква. */
  max-height: calc(100dvh - 3rem);
  object-fit: contain;
  background: #fff;
}

.kat-lb__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap, 44px);
  height: var(--tap, 44px);
  padding: 0;
  border: 1px solid rgb(0 0 0 / 0.15);
  border-radius: 999px;
  background: #fff;
  color: var(--fg);
  cursor: pointer;
}
.kat-lb__close:hover { color: var(--accent); border-color: var(--accent); }

/* На хартия няма прозорци и няма какво да се уголемява. */
@media print {
  .kat-snimka__lupa,
  .kat-lb { display: none !important; }
}

/* ── Долу на страницата: „Подобни части" и „Разгледани от вас" ───────────
 *
 * Картички, а не редове: тук човекът не сравнява по номер, а гледа снимки.
 * Две колони на телефон, четири на компютър.
 */

.kat-oshte { margin-top: 40px; }
.kat-oshte .kat-h2 { margin-top: 0; }

.kat-kartichki {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * Хиляда картички на страница значат хиляда оформления, дори снимките да са
 * с loading="lazy" — мързеливата снимка спестява сваляне, не оформяне.
 * content-visibility казва на браузъра да не оформя това, което е извън
 * екрана, а contain-intrinsic-size му дава височина да пази скрола прав.
 * „auto" пред числото значи: щом веднъж е измерил истинската височина, да я
 * помни — така връщането нагоре не подскача.
 *
 * Съдържанието остава в HTML-а и се намира от търсачката и от Ctrl+F;
 * пропуска се само рисуването.
 */
.kat-kartichki > li {
  content-visibility: auto;
  contain-intrinsic-size: auto 290px;
}

.kat-kartichka {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 12px;
  background: #fff;
  border: 1px solid rgb(0 0 0 / 0.1);
  border-radius: var(--kat-radius, 14px);
  color: var(--fg);
  text-decoration: none;
  transition: border-color 150ms ease;
}
.kat-kartichka:hover { border-color: var(--accent); }
.kat-kartichka:hover .kat-kartichka__ime { color: var(--accent); }

.kat-kartichka__snimka {
  display: block;
  aspect-ratio: 1 / 1;
  margin-bottom: 10px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}
.kat-kartichka__snimka img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.kat-kartichka__ime { font-weight: 600; line-height: 1.3; }
.kat-kartichka__nomer {
  margin-top: 2px;
  font-size: 0.8125rem;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}
/* Цената ляга долу, за да са на един ред при карти с различно дълги имена. */
.kat-kartichka__cena { margin-top: auto; padding-top: 8px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kat-kartichka__cena small { font-weight: 400; color: var(--fg-muted); }

@media (min-width: 48rem) {
  .kat-kartichki { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .kat-kartichki > li { contain-intrinsic-size: auto 370px; }
}

/* ── Съдържанието на артикула: по-лесно за четене ────────────────────────
 *
 * Стената от текст се разчупва на три: водещ абзац, подзаглавия с червена
 * чертичка (окото ги намира при прелистване) и карти за двата блока, които
 * човек СКАНИРА — признаците и монтажът.
 */

.kat-razdel > p:first-of-type { font-size: 1.0625rem; }

.kat-h3 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 28px 0 10px;
}
.kat-h3::before {
  content: '';
  flex: 0 0 auto;
  width: 18px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
  transform: translateY(-0.25em);
}

/* Списъците имат ИСТИНСКИ водачи: без тях редовете изглеждаха просто отместени. */
.kat-tochki {
  display: grid;
  gap: 8px;
  margin: 0 0 4px;
  padding: 0;
  max-width: 68ch;
  list-style: none;
}
.kat-tochki li { position: relative; padding-left: 22px; }
.kat-tochki li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.kat-blok {
  margin: 20px 0;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid rgb(0 0 0 / 0.08);
  border-radius: var(--kat-radius, 14px);
}
.kat-blok .kat-h3 { margin-top: 0; }

/* Другите имена на частта — тихо, но отделено от абзаца над него. */
.kat-sinonimi {
  margin: 4px 0 20px;
  padding: 10px 14px;
  max-width: 68ch;
  background: rgb(0 0 0 / 0.025);
  border-left: 3px solid var(--line);
  border-radius: 0 8px 8px 0;
  font-size: 0.875rem;
  color: var(--fg-muted);
}

/* Таблицата: линии само между редовете, рамка отвън — решетката тежеше. */
.kat-tablica--har {
  border: 1px solid rgb(0 0 0 / 0.1);
  border-radius: 10px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
.kat-tablica--har th,
.kat-tablica--har td { border: 0; border-bottom: 1px solid rgb(0 0 0 / 0.08); }
.kat-tablica--har tr:last-child th,
.kat-tablica--har tr:last-child td { border-bottom: 0; }

.kat-faq-red summary { padding: 12px 0; }
.kat-faq-red summary:hover { color: var(--accent); }

/* Прикачването на снимка: роден <input type="file">, облечен като останалите полета. */
.kat-fayl input[type="file"] {
  width: 100%;
  padding: 9px 12px;
  border: 1px dashed rgb(0 0 0 / 0.25);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 0.875rem;
  color: var(--fg-muted);
  cursor: pointer;
}
.kat-fayl input[type="file"]::file-selector-button {
  margin-right: 10px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--cream);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fg);
  cursor: pointer;
}
.kat-fayl input[type="file"]:hover { border-color: var(--accent); }
.kat-fayl .hint { display: block; margin-top: 6px; font-size: 0.8125rem; color: var(--fg-muted); }

/* ── Разделянето артикул ↔ вид — 13 септември 2026 ────────────────────────
 *
 * Пълните списъци „признаци / кога се сменя / при монтаж" и въпросите за вида
 * слязоха на страницата на ВИДА: те са едни и същи за всеки артикул от него и
 * повторени на хиляда страници правеха хиляда еднакви страници. На артикула
 * останаха синонимите, „за какво служи" и три завъртяни признака — плюс тази
 * врата нагоре. Цял ред за натискане (≥44 px), не дума в изречение.
 */
.kat-kam-vida { margin: 20px 0 0; max-width: 68ch; }
.kat-kam-vida a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--tap, 44px);
  padding: 12px 16px;
  background: rgb(0 0 0 / 0.025);
  border: 1px solid rgb(0 0 0 / 0.08);
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  color: var(--fg);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}
.kat-kam-vida a::after {
  content: '›';
  margin-left: auto;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--fg-muted);
}
.kat-kam-vida a:hover { border-color: var(--accent); color: var(--accent); }
.kat-kam-vida a:hover::after { color: var(--accent); }

/* Карта само със списък (страницата на вида) — иначе долният отстъп е двоен. */
.kat-blok > .kat-tochki:last-child { margin-bottom: 0; }

/* „Всички признаци" — тихата връзка в подножието на картата с трите. */
.kat-blok__oshte { margin: 0; font-size: 0.875rem; }
.kat-blok__oshte a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap, 44px);
  color: var(--fg-muted);
  text-decoration: none;
}
.kat-blok__oshte a::after { content: ' ›'; }
.kat-blok__oshte a:hover { color: var(--accent); text-decoration: underline; }

/* Малката уговорка до оригиналния номер — той е водещият, тя не бива да го засенчва. */
.kat-tablica__pod { color: var(--fg-muted); font-weight: 400; font-size: 0.875rem; }

/* Броят до името на категория — навигацията казва колко има, преди да отвориш. */
.kat-tabs__broy,
.kat-h2__broy {
  display: inline-block;
  min-width: 1.5em;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.07);
  color: var(--fg-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.kat-h2__broy { vertical-align: middle; margin-left: 6px; }

/* ── Филтрите над списъка с артикули — 14 септември 2026 ──────────────────
 *
 * Разметката идва от public/katalog/inc/filtri.php и е нарочно най-скучната
 * възможна: <nav> с <ul> от <a>. Натиснатият чип сочи към адреса БЕЗ себе си,
 * тоест второто натискане го маха — цялото стесняване се случва в сървъра.
 * Затова тук няма нито едно правило, което да разчита на скрипт, на :checked
 * или на клас, добавян от JavaScript: стилът трябва да е верен и при изключен
 * JavaScript, защото такава е и самата страница.
 *
 * Мерките са от брифинга: всеки чип е висок колкото целта за пръст (44 px),
 * разделя се с линия от 1 px вместо със сянка, отстоянията са кратни на 8.
 */
.kat-filtri {
  margin: 8px 0 16px;
  border-bottom: 1px solid rgb(0 0 0 / 0.12);
}

/*
 * Редът „Избрани: … · Изчисти филтрите" стои НАД групите: това е първото, което
 * трябва да се види при стеснен списък, и единственият изход с едно натискане,
 * когато групите са сгънати.
 *
 * ⚠ Разделителите „·" идват от PHP-то като голи текстови възли между връзките.
 * При flex всеки такъв възел става свой елемент и застава между чиповете, вместо
 * да увисва сам на нов ред — затова редът е flex, а не обикновен абзац.
 */
.kat-filtri__izbrani {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 0.875rem;
  color: var(--fg-muted);
}
.kat-filtri__mahni,
.kat-filtri__izchisti {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tap, 44px);
  text-decoration: none;
}
.kat-filtri__mahni {
  padding: 0 12px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  font-weight: 600;
}
.kat-filtri__mahni:hover {
  background: var(--accent);
  color: #fff;
}
.kat-filtri__izchisti {
  color: var(--fg-muted);
  text-decoration: underline;
}
.kat-filtri__izchisti:hover { color: var(--accent); }

/* Една група филтри: етикет отгоре, чипове отдолу. Линията отделя групите. */
.kat-filtri__grupa {
  padding: 12px 0;
  border-top: 1px solid rgb(0 0 0 / 0.12);
}
.kat-filtri__etiket {
  display: block;
  margin-bottom: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/*
 * Група с много стойности се сгъва в <details> — роден механизъм, работи без
 * скрипт и от клавиатура. Стрелката е нарисувана със ::after, защото родната
 * триъгълна стрелка не се маха еднакво в различните браузъри; затова и
 * list-style: none, и правилото за WebKit.
 */
.kat-filtri__grupa--sgunata > summary.kat-filtri__etiket {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap, 44px);
  margin: 0;
  cursor: pointer;
  list-style: none;
}
.kat-filtri__grupa--sgunata > summary::-webkit-details-marker { display: none; }
.kat-filtri__grupa--sgunata > summary::after {
  content: '⌄';
  margin-left: auto;
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: normal;
}
.kat-filtri__grupa--sgunata[open] > summary::after { content: '⌃'; }
/* ⚠ Стои СЛЕД правилото с margin: 0 — двете са с еднаква тежест и решава редът. */
.kat-filtri__grupa--sgunata[open] > summary { margin-bottom: 8px; }
.kat-filtri__grupa--sgunata > summary:hover { color: var(--accent); }

.kat-filtri__chipove {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kat-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap, 44px);
  padding: 0 14px;
  border: 1px solid rgb(0 0 0 / 0.18);
  border-radius: 999px;
  background: #fff;
  color: var(--fg);
  font-size: 0.9375rem;
  line-height: 1.2;
  text-decoration: none;
}
.kat-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/*
 * ⚠ Избраният чип е ПЪЛЕН червен, не червена рамка.
 *
 * Рамката сама по себе си е твърде тих сигнал в лента от двайсет чипа. А
 * очевидното решение — светлочервен фон с червен текст — беше сметнато и падна:
 * #c0392b върху 8% от същото червено над кремавото дава 4,38:1, тоест под
 * прага от 4,5:1. Бяло върху плътното червено е 5,4:1. Червеното си остава под
 * няколко процента от екрана: избраните са най-много по един на група.
 */
.kat-chip--izbran {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}
/* Върху червено червен контур не се вижда — затова при посочване е тъмен. */
.kat-chip--izbran:hover {
  color: #fff;
  outline: 1px solid var(--fg);
  outline-offset: 2px;
}
.kat-chip:focus-visible,
.kat-filtri__mahni:focus-visible,
.kat-filtri__izchisti:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.kat-chip--izbran:focus-visible { outline-color: var(--fg); }

/*
 * Броят до стойността. Стои и в сгънатия етикет, който е с главни букви и
 * разредка — оттам идват двете нулирания: иначе числото се разтяга и се чете
 * като част от етикета.
 */
.kat-chip__broy {
  min-width: 1.5em;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.07);
  color: var(--fg-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
}
.kat-chip__x {
  font-size: 1.125rem;
  line-height: 1;
}

@media (min-width: 48rem) {
  /*
   * На широк екран етикетът отива вляво от чиповете: редът се чете като таблица
   * и лентата заема с една трета по-малко височина. Сгънатата група остава на
   * два реда — там етикетът Е бутонът за разгъване и трябва да е широк колкото
   * целия ред, за да се улучва без прицелване.
   */
  .kat-filtri__grupa:not(.kat-filtri__grupa--sgunata) {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    gap: 8px 16px;
    align-items: center;
  }
  .kat-filtri__grupa:not(.kat-filtri__grupa--sgunata) > .kat-filtri__etiket { margin-bottom: 0; }
}