/* Система krom (роли и компоненты k-*): копия templates/_css_ui.html krom БЕЗ изменения правил — только вынесена из <style> в файл,
   комментарии шаблона стали обычными. Подключается на карточке товара; перекраска в палитру bruleur — pdp-skin.css и krom-bridge.css. */
/* ── Система: роли и компоненты (владелец 22.10.2026: «присвоить основные цвета и в каком случае;
    кнопки — все вариации; таблицы, блоки, скругления по системе, где какие границы»).
    Описание и образцы — /dev/design/ (apps/core/design.py). Палитра — в _css_base.html; здесь роли
    поверх неё и компоненты с приставкой k-, чтобы не задеть старые классы страниц: страницы
    переходят на них по одной.
    Двенадцать решений системы приняты разом (владелец 22.10.2026: «давай» — на «принять советы по всем
    12 решениям одним "да"»); что поменялось — /dev/design/overview/decisions/. */
:root{
  /* Состояния: текст и знак (точка, значок) — разные оттенки. Текст — не ниже 4,5:1 на фоне.
     Точка всегда рядом со словом и только повторяет его цветом (решение 3B): смысл несёт слово, отдельной
     нормы у точки нет. На тёмной панели — свои, светлые. */
  --ok:#067647;     --ok-dot:#22A06B;     --ok-on-dark:#7BE0A0;
  --warn:#8A5A00;   --warn-dot:#E0A400;
  --danger:#B42318; --danger-on-dark:#FF8A8A;
  --ai:#C8402F;
  --ok-soft:color-mix(in srgb, var(--ok) 7%, var(--panel));
  --warn-soft:color-mix(in srgb, var(--warn-dot) 12%, var(--panel));
  --danger-soft:color-mix(in srgb, var(--danger) 6%, var(--panel));

  /* Границы: семь видов и ни одного числа в стилях страниц. Рамка поля — своя (решение 4A): по ней
     узнают пустое поле, ей нужно 3:1 (WCAG 1.4.11); разделители, таблицы и панели остаются на --line. */
  --line-field:#929292;
  --bd:1px solid var(--line);
  --bd-strong:1px solid var(--dim);
  --bd-field:1px solid var(--line-field);
  --bd-field-strong:1px solid var(--muted);
  --bd-on:2px solid var(--ink);
  --bd-on-dark:1px solid rgba(255,255,255,.16);
  --focus:0 0 0 2px var(--page), 0 0 0 4px var(--ink);

  /* Тени: четыре уровня. */
  --sh-card:0 1px 2px rgba(10,12,14,.03), 0 6px 18px rgba(10,12,14,.03);
  --sh-card-hover:0 2px 4px rgba(10,12,14,.05), 0 10px 26px rgba(10,12,14,.07);
  --sh-pop:0 12px 32px rgba(0,0,0,.14);
  --sh-modal:0 24px 80px rgba(10,12,14,.16);

  /* Высоты элементов управления: три размера. Малая — 32 px и на телефоне (выше минимума WCAG 2.2,
     24 px); одиночное действие на телефоне — обычная, 44 px (решение 5B). */
  --h-sm:32px; --h-md:40px; --h-lg:52px;

  /* Слои, от шапки до окна (решение 10A) — по замеру z-index стилей страниц 22.10.2026. Между
     слоями — calc(var(--z-…) ± n), у своего элемента. */
  --z-raise:1; --z-sticky:20; --z-head:25; --z-rail:30; --z-pop:40; --z-bar:41; --z-veil:60;
  --z-toast:70; --z-modal:80;

  /* Время: --t-fast — смена состояния (цвет, рамка, тень), --t-move — движение (размер, положение),
     то же, что сворачивание --fold-t. Затемнение под окном k-modal — --veil, как у просмотра счёта PDF. */
  --t-fast:.15s; --t-move:var(--fold-t);
  --veil:rgba(16,18,20,.45);

  /* Шрифт: двенадцать ролей, по одной на случай (TYPE_ROLES в apps/core/design.py).
     Пишется целиком: font:var(--f-label). Разрядку и капс в font не записать — они у компонента
     рядом. H1 сжимается сам: 27 px на широком экране, 19 px на телефоне. */
  --f-h1:500 clamp(19px,2.3vw,27px)/1.25 var(--mono);
  --f-price:600 27px/1 var(--mono);
  --f-block:500 15px/1.3 var(--mono);
  --f-body:400 14px/1.62 var(--mono);
  --f-desc:400 13.5px/1.75 var(--sans);
  --f-name:500 13px/1.4 var(--sans);
  --f-small:400 12px/1.5 var(--mono);
  --f-hint:400 11px/1.45 var(--mono);
  --f-section:600 11px/1 var(--mono);
  --f-button:600 11px/1 var(--mono);
  --f-label:500 9.5px/1 var(--mono);
  --f-tag:500 8.5px/1 var(--mono);
}
@media (max-width:640px){ :root{ --h-md:44px } }

/* ── Кнопка ── */
.k-btn{display:inline-flex; align-items:center; justify-content:center; gap:var(--s2); height:var(--h-md);
  padding:0 var(--s5); border:1px solid transparent; border-radius:var(--r-sm); cursor:pointer;
  font:var(--f-button); letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
  text-decoration:none; transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
  background:var(--dark); color:var(--dark-ink)}
.k-btn:hover{background:color-mix(in srgb, var(--dark) 86%, var(--panel))}
.k-btn:active{background:var(--ink)}
.k-btn:focus-visible{outline:none; box-shadow:var(--focus)}
.k-btn svg{width:14px; height:14px; flex:none}
.k-btn.sec{background:var(--panel); color:var(--ink); border:var(--bd)}
.k-btn.sec:hover{border:var(--bd-strong)}
.k-btn.sec:active{background:var(--chip)}
.k-btn.soft{background:var(--chip); color:var(--ink)}
.k-btn.soft:hover{background:var(--grey-hi)}
.k-btn.soft:active{background:var(--grey-lo)}
.k-btn.ghost{background:none; color:var(--muted)}
.k-btn.ghost:hover{color:var(--ink); background:var(--chip)}
.k-btn.ghost:active{color:var(--ink); background:var(--grey-hi)}
.k-btn.danger{background:var(--panel); color:var(--danger); border:1px solid color-mix(in srgb, var(--danger) 35%, var(--panel))}
.k-btn.danger:hover{background:var(--danger-soft); border-color:var(--danger)}
.k-btn.danger:active{background:color-mix(in srgb, var(--danger) 12%, var(--panel)); border-color:var(--danger)}
.k-btn.danger.solid{background:var(--danger); color:var(--dark-ink); border-color:var(--danger)}
/* Сплошная под курсором темнеет, а не светлеет: белый текст на ней только контрастнее. */
.k-btn.danger.solid:hover{background:color-mix(in srgb, var(--danger) 85%, var(--ink)); border-color:transparent}
.k-btn.danger.solid:active{background:color-mix(in srgb, var(--danger) 70%, var(--ink)); border-color:transparent}
.k-btn.inv{background:var(--panel); color:var(--ink)}
.k-btn.inv:hover{background:color-mix(in srgb, var(--panel) 88%, var(--dark))}
.k-btn.inv:active{background:color-mix(in srgb, var(--panel) 76%, var(--dark))}
/* Шрифт малой и большой — на шкале ролей (решение 9B): 9,5 px, как --f-label, и 12 px, как --f-small. */
.k-btn.sm{height:var(--h-sm); padding:0 var(--s3); font-size:9.5px}
.k-btn.lg{height:var(--h-lg); padding:0 var(--s7); font-size:12px; letter-spacing:.12em}
.k-btn.block{display:flex; width:100%}
.k-btn.icon{width:var(--h-md); padding:0}
.k-btn.icon.sm{width:var(--h-sm)}
/* Выбрано (переключатель): тёмная, как главная, и под курсором ведёт себя как главная —
   иначе наведение мягкой или вторичной давало белый текст на светло-серой заливке. */
.k-btn[aria-pressed="true"]{background:var(--dark); color:var(--dark-ink); border-color:var(--dark)}
.k-btn[aria-pressed="true"]:hover{background:color-mix(in srgb, var(--dark) 86%, var(--panel)); border-color:var(--dark)}
.k-btn[aria-pressed="true"]:active{background:var(--ink); border-color:var(--ink)}
/* Выключенная — одна на все виды и не отзывается на курсор. !important — чтобы правило было
   сильнее наведения, нажатия и «выбрано» любого вида (у сплошной опасной селектор длиннее).
   Кольцо фокуса не гасим: кнопку с aria-disabled находят с клавиатуры и читают причину. */
.k-btn:disabled, .k-btn[aria-disabled="true"]{cursor:not-allowed; background:var(--chip) !important;
  color:var(--dim) !important; border-color:transparent !important}
.k-dark .k-btn:disabled, .k-dark .k-btn[aria-disabled="true"]{background:rgba(255,255,255,.24) !important; color:rgba(255,255,255,.55) !important}
/* В загрузке подпись прозрачная у любого вида: у сплошной опасной и нажатой soft селектор цвета
   длиннее, без !important подпись была бы видна поверх круга. */
.k-btn[aria-busy="true"]{position:relative; color:transparent !important; pointer-events:none}
.k-btn[aria-busy="true"]::after{content:""; position:absolute; width:14px; height:14px; border-radius:50%;
  border:2px solid currentColor; border-color:var(--dark-ink) var(--dark-ink) transparent transparent; animation:k-spin .7s linear infinite}
.k-btn.sec[aria-busy="true"]::after, .k-btn.soft[aria-busy="true"]::after, .k-btn.ghost[aria-busy="true"]::after, .k-btn.inv[aria-busy="true"]::after{border-color:var(--ink) var(--ink) transparent transparent}
.k-btn.danger[aria-busy="true"]::after{border-color:var(--danger) var(--danger) transparent transparent}
.k-btn.danger.solid[aria-busy="true"]::after, .k-btn[aria-pressed="true"][aria-busy="true"]::after{border-color:var(--dark-ink) var(--dark-ink) transparent transparent}
@keyframes k-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .k-btn[aria-busy="true"]::after{animation-duration:2s} }

/* Связка: поле + кнопка, сегменты. */
.k-join{display:flex}
.k-join > *{border-radius:0}
.k-join > :first-child{border-radius:var(--r-sm) 0 0 var(--r-sm)}
.k-join > :last-child{border-radius:0 var(--r-sm) var(--r-sm) 0}
/* Сегмент: другой вид тех же данных. Это кнопки-переключатели, а не вкладки:
   выбранный — aria-pressed="true". Дорожка — --s1 вокруг и между кнопками; кнопки ниже на две
   дорожки, и сегмент остаётся высотой --h-md. */
.k-seg{display:inline-flex; gap:var(--s1); padding:var(--s1); background:var(--chip); border-radius:var(--r-sm)}
.k-seg button{height:calc(var(--h-md) - 2 * var(--s1)); padding:0 var(--s4); border:0; border-radius:var(--r-sm); background:none; cursor:pointer;
  font:500 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.k-seg button:hover{color:var(--ink)}
.k-seg button[aria-pressed="true"]{background:var(--dark); color:var(--dark-ink)}
.k-seg button:focus-visible{outline:none; box-shadow:var(--focus)}

/* ── Поле ввода ── */
.k-field{display:grid; gap:var(--s2); min-width:0}
.k-label{font:var(--f-label); letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.k-input{height:var(--h-md); width:100%; padding:0 var(--s3); border:var(--bd-field); border-radius:var(--r-sm); background:var(--panel);
  color:var(--ink); font:400 12px/1.4 var(--mono); transition:border-color var(--t-fast), box-shadow var(--t-fast)}
.k-input.sm{height:var(--h-sm)}
.k-input.lg{height:var(--h-lg); font-size:13px}
textarea.k-input{height:auto; min-height:96px; padding:var(--s3); resize:vertical}
.k-input::placeholder{color:var(--faint)}
.k-input:hover{border:var(--bd-field-strong)}
.k-input:focus{outline:none; border-color:var(--ink)}
/* Только цвет заливки: у select в фоне стрелка, общий background её стирал. */
.k-input:disabled{background-color:var(--chip); color:var(--dim); border-color:var(--line); cursor:not-allowed}
.k-input[aria-invalid="true"]{border-color:var(--danger)}
/* Ошибка в фокусе: рамка занята ошибкой, фокус показывает кольцо. */
.k-input[aria-invalid="true"]:focus{box-shadow:var(--focus)}
.k-hint{font:var(--f-hint); color:var(--muted)}
.k-err{font:var(--f-hint); color:var(--danger)}
select.k-input{appearance:none; padding-right:var(--s7);
  background:var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236D6D6D' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat right var(--s3) center}
.k-check{display:inline-flex; align-items:center; gap:var(--s2); font:400 12px/1.4 var(--mono); color:var(--ink); cursor:pointer}
.k-check input{width:16px; height:16px; margin:0; accent-color:var(--dark)}
/* Флажок свой вид не теряет, поэтому кольцо — обводкой той же толщины и с тем же зазором, что --focus. */
.k-check input:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.k-check input:disabled{cursor:not-allowed}
.k-check:has(input:disabled){color:var(--dim); cursor:not-allowed}

/* ── Чип: отбор, быстрый выбор ──
   Кнопка — aria-pressed="true", ссылка на отобранную выдачу — aria-current="page". */
.k-chip{display:inline-flex; align-items:center; gap:var(--s2); height:var(--h-sm); padding:0 var(--s3); border:var(--bd); border-radius:var(--r-pill);
  background:var(--panel); color:var(--ink); cursor:pointer; text-decoration:none; font:500 12px/1 var(--sans)}
.k-chip s{text-decoration:none; font:500 11px/1 var(--mono); color:var(--muted)}
.k-chip:hover{border:var(--bd-strong)}
.k-chip:focus-visible{outline:none; box-shadow:var(--focus)}
.k-chip[aria-pressed="true"], .k-chip[aria-current="page"], .k-chip.on{background:var(--dark); color:var(--dark-ink); border-color:var(--dark)}
.k-chip[aria-pressed="true"] s, .k-chip[aria-current="page"] s, .k-chip.on s{color:rgba(255,255,255,.6)}

/* ── Метка состояния ── */
.k-badge{display:inline-flex; align-items:center; gap:var(--s1); height:20px; padding:0 var(--s2); border-radius:var(--r-sm);
  background:var(--chip); color:var(--muted); font:var(--f-tag); letter-spacing:.12em; text-transform:uppercase; white-space:nowrap}
.k-badge i{width:6px; height:6px; border-radius:50%; background:var(--dim); flex:none}
.k-badge.ok{color:var(--ok); background:var(--ok-soft)}      .k-badge.ok i{background:var(--ok-dot)}
.k-badge.warn{color:var(--warn); background:var(--warn-soft)} .k-badge.warn i{background:var(--warn-dot)}
.k-badge.danger{color:var(--danger); background:var(--danger-soft)} .k-badge.danger i{background:var(--danger)}
.k-badge.dark{color:var(--dark-ink); background:var(--dark)}
.k-count{display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:16px; padding:0 var(--s1); border-radius:var(--r-pill);
  background:var(--dark); color:var(--dark-ink); font:700 9.5px/1 var(--mono)}

/* ── Сообщение ── */
.k-msg{display:grid; gap:var(--s1); padding:var(--s3) var(--s4); border:var(--bd); border-radius:var(--r-md); background:var(--panel);
  font:400 12px/1.55 var(--mono); color:var(--ink)}
.k-msg b{font-weight:600}
.k-msg.ok{background:var(--ok-soft); border-color:color-mix(in srgb, var(--ok) 25%, var(--panel))}       .k-msg.ok b{color:var(--ok)}
.k-msg.warn{background:var(--warn-soft); border-color:color-mix(in srgb, var(--warn-dot) 40%, var(--panel))} .k-msg.warn b{color:var(--warn)}
.k-msg.danger{background:var(--danger-soft); border-color:color-mix(in srgb, var(--danger) 25%, var(--panel))} .k-msg.danger b{color:var(--danger)}

/* ── Ссылки ──
   Текущий пункт меню — aria-current="page". Внешняя (target="_blank") получает «↗» сама:
   в разметке стрелку не пишем, читалке экрана она не произносится. */
.k-link{color:var(--ink); text-decoration:underline; text-decoration-color:var(--dim); text-underline-offset:3px; text-decoration-thickness:1px}
.k-link:hover{text-decoration-color:var(--ink)}
.k-link[target="_blank"]::after{content:"\00a0\2197" / ""}
.k-nav{color:var(--muted); text-decoration:none}
.k-nav:hover, .k-nav[aria-current="page"]{color:var(--ink)}
.k-more{font:500 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); text-decoration:none}
.k-more:hover{color:var(--ink)}
.k-link:focus-visible, .k-nav:focus-visible, .k-more:focus-visible{outline:none; border-radius:var(--r-sm); box-shadow:var(--focus)}

/* ── Вкладки: разделы одной сущности, у каждого свой адрес ──
   Пункты — ссылки, текущий — aria-current="page". Ряд не переносится: на узком экране листается
   вбок. Ряд обрезает всё, что за его краем, поэтому кольцо фокуса — внутри пункта, а не снаружи. */
.k-tabs{display:flex; min-width:0; border-bottom:var(--bd); overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.k-tabs::-webkit-scrollbar{display:none}
.k-tabs > *{display:inline-flex; flex:none; align-items:center; gap:var(--s2); height:var(--h-md); padding:0 var(--s3);
  border-bottom:2px solid transparent; color:var(--muted); text-decoration:none; white-space:nowrap;
  font:var(--f-button); letter-spacing:.1em; text-transform:uppercase; transition:color var(--t-fast), border-color var(--t-fast)}
.k-tabs > :hover{color:var(--ink)}
.k-tabs > [aria-current="page"]{color:var(--ink); border-bottom:var(--bd-on)}
.k-tabs > :focus-visible{outline:2px solid var(--ink); outline-offset:-2px}

/* ── Блоки ──
   Заголовок раздела — --muted, как все подписи, которые читают (решение 2A); --faint — только placeholder.
   У блока на странице одно из двух: рамка (k-panel, k-msg) или тень (k-card). У того, что поверх
   страницы, — тень, рамка допустима (решение 7A): k-pop ложится на белые карточки и снимки, одной
   мягкой тени там мало, рамка держит край. */
.k-sec{margin-top:var(--s9)}
.k-head{display:flex; align-items:baseline; justify-content:space-between; gap:var(--s4); margin:0 0 var(--s4);
  font:var(--f-section); letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.k-card{display:block; padding:var(--s4); border-radius:var(--r-md); background:var(--panel); box-shadow:var(--sh-card); color:var(--ink);
  text-decoration:none; transition:box-shadow var(--t-fast)}
a.k-card:hover{box-shadow:var(--sh-card-hover)}
a.k-card:focus-visible{outline:none; box-shadow:var(--focus), var(--sh-card-hover)}
.k-panel{padding:var(--s5); border:var(--bd); border-radius:var(--r-md); background:var(--panel)}
.k-dark{padding:var(--s5); border-radius:var(--r-md); background:var(--dark); color:var(--dark-ink); box-shadow:var(--sh-pop)}
/* На тёмном кольцо фокуса светлое: тёмное кольцо --ink на --dark не видно (1,08:1). */
.k-dark{--focus:0 0 0 2px var(--dark), 0 0 0 4px var(--dark-ink)}
.k-dark .k-hint{color:rgba(255,255,255,.6)}
.k-pop{padding:var(--s2) 0; border:var(--bd); border-radius:var(--r-md); background:var(--panel); box-shadow:var(--sh-pop)}
/* Пункты меню — k-btn ghost block: текст от левого края, углы прямые, разделитель плотнее. */
.k-pop .k-btn{justify-content:flex-start; border-radius:0}
.k-pop .k-rule{margin:var(--s2) 0}
/* Окно — только поверхность; поведение даёт родной <dialog>.showModal(). Рамку и цвет
   текста <dialog> приносит свои — снимаем. */
.k-modal{padding:var(--s6); border:0; border-radius:var(--r-lg); background:var(--panel); color:var(--ink); box-shadow:var(--sh-modal)}
.k-modal::backdrop{background:var(--veil)}
/* Заголовок окна — роль «Заголовок блока», до содержимого --s4: без этого <h2> в окне
   крупнее и вплотную к кнопкам. */
.k-modal h2{margin:0 0 var(--s4); font:var(--f-block)}
.k-rule{border:0; border-top:var(--bd); margin:var(--s5) 0}

/* ── Таблицы ── */
.k-table{width:100%; border-collapse:collapse; font:400 12px/1.45 var(--mono); color:var(--ink)}
.k-table th{padding:var(--s2) var(--s3) var(--s2) 0; border-bottom:var(--bd); text-align:left; vertical-align:bottom;
  font:500 9.5px/1.2 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.k-table td{padding:var(--s3) var(--s3) var(--s3) 0; border-bottom:var(--bd); vertical-align:top}
.k-table .num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
/* Строка-ссылка: курсор и заливка; с клавиатуры — та же заливка, когда фокус на ссылке в строке. */
.k-table tr.click{cursor:pointer}
.k-table tr.click:hover td, .k-table tr.click:focus-within td{background:var(--chip)}
.k-table.spec th{width:45%; padding:var(--s2) var(--s3) var(--s2) 0; border-bottom:var(--bd); vertical-align:top;
  font:400 12px/1.45 var(--sans); letter-spacing:0; text-transform:none; color:var(--muted)}
.k-table.spec td{padding:var(--s2) 0; font-weight:500; text-align:right}
.k-table.compact td{padding:var(--s2) var(--s3) var(--s2) 0}
.k-wrap{min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch}

/* ── Счётчик количества ──
   «+» выключен на остатке. «−» на единице (решение 12B): выключен (disabled) там, где строку убирает ✕, —
   строка корзины и оформления; в карточке каталога «−» на единице убирает деталь: другой кнопки там нет. */
.k-qty{display:inline-flex; align-items:center; height:var(--h-md); border:var(--bd); border-radius:var(--r-sm); background:var(--panel)}
.k-qty button{width:36px; height:100%; border:0; background:none; color:var(--muted); cursor:pointer; font:400 15px/1 var(--mono)}
.k-qty button:hover{color:var(--ink); background:var(--chip)}
.k-qty button:disabled{color:var(--dim); background:none; cursor:not-allowed}
.k-qty button:focus-visible, .k-qty input:focus-visible{outline:none; box-shadow:var(--focus)}
.k-qty input{width:44px; height:100%; border:0; border-left:var(--bd); border-right:var(--bd); text-align:center; background:none;
  font:500 12px/1 var(--mono); color:var(--ink); -moz-appearance:textfield}
.k-qty input::-webkit-inner-spin-button{-webkit-appearance:none}
.k-dark .k-qty{background:none; border:var(--bd-on-dark)}
.k-dark .k-qty button{color:var(--dark-ink)}
.k-dark .k-qty button:hover{color:var(--dark-ink); background:color-mix(in srgb, var(--dark-ink) 10%, var(--dark))}
.k-dark .k-qty button:disabled{color:color-mix(in srgb, var(--dark-ink) 40%, var(--dark)); background:none}
.k-dark .k-qty input{color:var(--dark-ink); border-left:var(--bd-on-dark); border-right:var(--bd-on-dark)}

/* hidden прячет любой компонент: свой display компонента иначе сильнее [hidden] браузера
   (на сайте на этом уже ошибались — static/catalog/minicard.css). */
.k-btn[hidden], .k-join[hidden], .k-seg[hidden], .k-field[hidden], .k-check[hidden], .k-chip[hidden],
.k-badge[hidden], .k-count[hidden], .k-msg[hidden], .k-tabs[hidden], .k-head[hidden], .k-card[hidden],
.k-qty[hidden]{display:none}

/* Телефон: iOS увеличивает страницу при фокусе на поле мельче 16 px — так же, как .find input
   и .assist-bar input в _css_base. В конце файла: правило должно стоять после шрифта поля и счётчика;
   .k-input.lg назван отдельно — его 13 px сильнее одного .k-input. */
@media (max-width:640px){ .k-input, .k-input.lg, .k-qty input{font-size:16px} }

/* ── Выбор периода — k-range ──
   Панель открывается кнопкой «Период…»; три режима: год, месяц, произвольный отрезок.
   На телефоне — лист снизу, как k-select-pop. Без JS — запасная форма «с — по» в <noscript>. */
.k-range-veil{position:fixed; inset:0; z-index:var(--z-pop)}
.k-range-panel{position:fixed; z-index:calc(var(--z-pop) + 1); box-sizing:border-box;
  background:var(--panel); border:var(--bd); border-radius:var(--r-md); box-shadow:var(--sh-pop);
  padding:var(--s4); width:min(440px, 96vw); max-height:80vh; overflow-y:auto; overscroll-behavior:contain}
/* Заголовок: вкладки + кнопка закрыть. */
.k-range-head{display:flex; align-items:center; gap:var(--s2); margin-bottom:var(--s4)}
.k-range-tab{flex:none; height:var(--h-sm); padding:0 var(--s3); border:var(--bd); border-radius:var(--r-pill);
  background:var(--panel); color:var(--muted); cursor:pointer; font:500 12px/1 var(--sans)}
.k-range-tab:hover{border:var(--bd-strong); color:var(--ink)}
.k-range-tab.on{background:var(--dark); color:var(--dark-ink); border-color:var(--dark)}
.k-range-close{margin-left:auto; flex:none; width:28px; height:28px; border:0; border-radius:var(--r-sm);
  background:none; cursor:pointer; color:var(--muted); font:400 16px/1 var(--mono)}
.k-range-close:hover{color:var(--ink); background:var(--chip)}
/* Список годов. */
.k-range-year-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--s1)}
.k-range-year-opt{display:flex; align-items:center; height:var(--h-sm); padding:0 var(--s3);
  border-radius:var(--r-sm); text-decoration:none; color:var(--ink); font:500 13px/1 var(--sans)}
.k-range-year-opt:hover{background:color-mix(in srgb, var(--ink) 8%, transparent)}
/* Вкладки годов и сетка месяцев. */
.k-range-ytabs{display:flex; flex-wrap:wrap; gap:var(--s1); margin-bottom:var(--s3)}
.k-range-ytab{height:var(--h-sm); padding:0 var(--s3); border:var(--bd); border-radius:var(--r-pill);
  background:var(--panel); color:var(--muted); cursor:pointer; font:500 12px/1 var(--sans)}
.k-range-ytab:hover{border:var(--bd-strong); color:var(--ink)}
.k-range-ytab[aria-selected="true"]{background:var(--dark); color:var(--dark-ink); border-color:var(--dark)}
.k-range-month-grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--s2)}
.k-range-month-opt{display:flex; align-items:center; justify-content:center; height:var(--h-md);
  border-radius:var(--r-sm); text-decoration:none; color:var(--ink); font:500 12px/1 var(--sans)}
.k-range-month-opt:hover{background:color-mix(in srgb, var(--ink) 8%, transparent)}
/* Календарь. */
.k-range-cal-nav{display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--s3)}
.k-range-nav-btn{width:28px; height:28px; border:0; border-radius:var(--r-sm); background:none;
  cursor:pointer; color:var(--muted); font:var(--f-block)}
.k-range-nav-btn:hover{color:var(--ink); background:var(--chip)}
.k-range-cal-title{font:600 13px/1 var(--sans); color:var(--ink)}
.k-range-cal{width:100%; border-collapse:collapse; table-layout:fixed}
.k-range-cal th{padding:var(--s1) 0; text-align:center; font:var(--f-label);
  letter-spacing:.08em; color:var(--muted); text-transform:uppercase}
.k-range-cal td{padding:0}
.k-range-n{margin-left:var(--s1); font:var(--f-hint); color:var(--muted)}
.k-range-day button{display:flex; align-items:center; justify-content:center; width:100%; height:var(--h-sm);
  border:0; border-radius:var(--r-sm); background:none; cursor:pointer;
  font:400 12px/1 var(--mono); color:var(--ink)}
.k-range-day button:hover{background:color-mix(in srgb, var(--ink) 8%, transparent)}
.k-range-day button:focus-visible{outline:none; box-shadow:var(--focus)}
.k-range-day-in button{background:color-mix(in srgb, var(--ink) 8%, transparent)}
.k-range-day-edge button{background:var(--dark) !important; color:var(--dark-ink) !important}
.k-range-day-off button{color:var(--dim); cursor:not-allowed}
.k-range-hint{margin:var(--s3) 0 0; font:400 11px/1.4 var(--mono); color:var(--muted)}
.k-range-err{margin:var(--s2) 0 0; font:500 12px/1.4 var(--sans); color:var(--danger)}
.k-range-show{margin-top:var(--s4); width:100%}
/* Телефон: лист снизу, как k-select. */
@media (max-width:640px){
  .k-range-veil{background:var(--veil); z-index:var(--z-veil)}
  .k-range-panel{left:0; right:0; bottom:var(--vvb, 0px); top:auto; width:100%; max-height:80vh;
    border-bottom:0; border-radius:var(--r-lg) var(--r-lg) 0 0; box-shadow:var(--sh-modal);
    padding-bottom:env(safe-area-inset-bottom); z-index:calc(var(--z-veil) + 1)}
}