/* =============================================================================
 * components.css — базовые компоненты дизайн-системы «Элистрой»
 * Работает поверх tokens.css. Использует ТОЛЬКО переменные — ноль хардкода цвета.
 *
 * Состав (по брифу):
 *   Кнопки · Поля ввода · Выпадающие списки · Карточка товара · Плашки и ярлыки ·
 *   Таблица · Хлебные крошки · Пагинация · Блок контактов · Форма заявки.
 *
 * У каждого компонента — состояния: обычное / наведение / фокус / нажатие /
 * недоступное / загрузка / пустой список / ошибка.
 *
 * Пометка в комментариях: [СЛОЙ 1] — из общего слоя, [БРЕНД] — брендовая переменная.
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * Каркас: контейнер, стек, сетка
 * ------------------------------------------------------------------------ */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.stack{display:flex;flex-direction:column;gap:var(--space-3)}
.stack--tight{gap:var(--space-2)}
.grid{display:grid;gap:var(--space-3)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.grid--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.grid--2,.grid--3{grid-template-columns:1fr}}

/* ---------------------------------------------------------------------------
 * Типографика
 * ------------------------------------------------------------------------ */
.t-display{font-family:var(--font-display);font-weight:var(--fw-bold);text-transform:uppercase;
  font-size:var(--fs-6);line-height:var(--lh-display);letter-spacing:var(--ls-display);margin:0}
.t-h2{font-family:var(--font-display);font-weight:var(--fw-bold);text-transform:uppercase;
  font-size:var(--fs-5);line-height:var(--lh-heading);margin:0}
.t-h3{font-family:var(--font-display);font-weight:var(--fw-bold);text-transform:uppercase;
  font-size:var(--fs-4);line-height:var(--lh-heading);margin:0}
.t-caps{font-family:var(--font-display);font-weight:var(--fw-bold);text-transform:uppercase;
  font-size:var(--fs-1);letter-spacing:var(--ls-caps);color:var(--ink-3);margin:0} /* [БРЕНД] ink */
.t-lead{font-size:var(--fs-4);line-height:var(--lh-ui);color:var(--ink-2);margin:0;max-width:60ch}
.t-body{font-size:var(--fs-3);line-height:var(--lh-body);color:var(--ink-2);margin:0;max-width:var(--container-narrow)}
.t-muted{color:var(--ink-3)}

/* ---------------------------------------------------------------------------
 * Кнопки
 * ------------------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);
  font-family:var(--font-body);font-size:var(--fs-2);font-weight:var(--fw-bold);
  line-height:1;letter-spacing:.02em;text-transform:uppercase;
  padding:13px var(--space-3);border:var(--rule-width) solid transparent;border-radius:var(--radius);
  background:var(--accent);color:var(--accent-ink); /* [БРЕНД] */
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease);
}
.btn:hover{filter:brightness(1.08)}                        /* наведение */
.btn:active{transform:translateY(1px)}                     /* нажатие */
.btn:focus-visible{outline:none;box-shadow:var(--focus-ring)} /* фокус */
.btn[disabled],.btn.is-disabled{opacity:.45;cursor:not-allowed;filter:none;transform:none}
.btn.is-loading{color:transparent;position:relative;pointer-events:none} /* загрузка */
.btn.is-loading::after{content:"";position:absolute;width:14px;height:14px;border:2px solid var(--accent-ink);
  border-top-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
.btn--secondary{background:transparent;border-color:var(--line-strong);color:var(--ink)}
.btn--secondary.is-loading::after{border-color:var(--ink);border-top-color:transparent}
.btn--ghost{background:transparent;color:var(--accent);padding-inline:var(--space-1)}
.btn--block{display:flex;width:100%}
.btn--sm{padding:9px var(--space-2);font-size:var(--fs-1)}

/* ---------------------------------------------------------------------------
 * Поля ввода, textarea, чекбокс
 * ------------------------------------------------------------------------ */
.field{display:flex;flex-direction:column;gap:var(--space-1)}
.field-label{font-family:var(--font-display);font-size:var(--fs-1);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--ink-3);font-weight:var(--fw-bold)}
.field-label .req{color:var(--accent);margin-left:4px}     /* [БРЕНД] */
.input,.textarea{
  width:100%;font-family:var(--font-body);font-size:var(--fs-3);line-height:var(--lh-ui);
  color:var(--ink);background:var(--bg-2);border:var(--rule-width) solid var(--line);
  border-radius:var(--radius);padding:12px var(--space-2);
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
}
.input::placeholder,.textarea::placeholder{color:var(--ink-3)}
.input:hover,.textarea:hover{border-color:var(--line-strong)}                 /* наведение */
.input:focus,.textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus-ring)} /* фокус */
.input[disabled],.textarea[disabled]{opacity:.55;cursor:not-allowed;background:var(--bg)} /* недоступно */
.textarea{min-height:120px;resize:vertical}

.field-hint{font-size:var(--fs-1);color:var(--ink-3)}
.field-error{font-size:var(--fs-1);color:var(--danger);display:none}           /* ошибка (текст) */
.field.is-error .input,.field.is-error .textarea,.field.is-error .select select{
  border-color:var(--danger)}                                                 /* ошибка (поле) */
.field.is-error .field-error{display:block}
.field.is-loading .input{padding-right:40px}
.field.is-loading::after{content:"";width:14px;height:14px;border:2px solid var(--ink-3);
  border-top-color:transparent;border-radius:50%;animation:spin .7s linear infinite;
  align-self:flex-end;margin:-30px 14px 8px 0}                                /* загрузка поля */

.check{display:flex;gap:var(--space-2);align-items:flex-start;font-size:var(--fs-2);color:var(--ink-2)}
.check input[type="checkbox"]{accent-color:var(--accent);width:18px;height:18px;margin:2px 0 0;flex:none}
.check.is-error{color:var(--danger)}

/* ---------------------------------------------------------------------------
 * Выпадающий список
 * ------------------------------------------------------------------------ */
.select{position:relative}
.select select{
  appearance:none;-webkit-appearance:none;width:100%;font-family:var(--font-body);font-size:var(--fs-3);
  color:var(--ink);background:var(--bg-2);border:var(--rule-width) solid var(--line);
  border-radius:var(--radius);padding:12px 40px 12px var(--space-2);cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
}
.select select:hover{border-color:var(--line-strong)}
.select select:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus-ring)}
.select select[disabled]{opacity:.55;cursor:not-allowed}
.select::after{content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:translateY(-70%) rotate(45deg);pointer-events:none}

/* ---------------------------------------------------------------------------
 * Карточка товара (режим каталога: без цены и корзины — «цена по запросу»)
 * ------------------------------------------------------------------------ */
.card{display:flex;flex-direction:column;background:var(--surface);border:var(--rule-width) solid var(--line);
  border-radius:var(--radius);overflow:hidden;transition:border-color var(--dur-fast) var(--ease)}
.card:hover{border-color:var(--line-strong)}
.card:focus-within{box-shadow:var(--focus-ring)}
.card-media{aspect-ratio:4/3;background:var(--bg-2);border-bottom:var(--rule-width) solid var(--line);
  display:grid;place-items:center;color:var(--ink-3)}
.card-media img{width:100%;height:100%;object-fit:cover}
.card-body{padding:var(--space-3);display:flex;flex-direction:column;gap:var(--space-2);flex:1}
.card-title{font-size:var(--fs-3);font-weight:var(--fw-bold);line-height:var(--lh-heading);margin:0;color:var(--ink)}
.card-sku{font-family:var(--font-mono);font-size:var(--fs-1);color:var(--ink-3)}
.card-price{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.02em;
  font-size:var(--fs-2);color:var(--accent)}                                   /* [БРЕНД] */
.card-actions{margin-top:auto;display:flex;gap:var(--space-2);flex-wrap:wrap}

/* состояния карточки */
.card.is-loading .sk{animation:pulse 1.3s var(--ease) infinite}                 /* загрузка */
.sk{display:block;background:var(--bg-2);border:var(--rule-width) solid var(--line);border-radius:var(--radius)}
.sk-line{display:block;height:12px}
.sk-line--short{width:60%}
.sk-media{display:block;width:100%;aspect-ratio:4/3}
.card.is-disabled{opacity:.5;pointer-events:none}                              /* недоступно */

/* ---------------------------------------------------------------------------
 * Плашки и ярлыки
 * ------------------------------------------------------------------------ */
.badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);
  font-size:var(--fs-1);letter-spacing:var(--ls-caps);text-transform:uppercase;font-weight:var(--fw-bold);
  padding:5px 10px;border:var(--rule-width) solid var(--line-strong);border-radius:var(--radius);color:var(--ink-2)}
.badge--accent{border-color:var(--accent);color:var(--accent)}                 /* [БРЕНД] */
.badge--solid{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.badge--muted{color:var(--ink-3)}
.dot{width:8px;height:8px;border-radius:50%;background:currentColor;display:inline-block}

/* ---------------------------------------------------------------------------
 * Таблица (состояния: обычная / наведение строки / пустая / загрузка / ошибка)
 * ------------------------------------------------------------------------ */
.table-wrap{border:var(--rule-width) solid var(--line);border-radius:var(--radius);overflow:auto}
.table{width:100%;border-collapse:collapse;font-size:var(--fs-2)}
.table th{text-align:left;font-family:var(--font-display);font-size:var(--fs-1);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--ink-3);font-weight:var(--fw-bold);
  padding:12px var(--space-2);border-bottom:var(--rule-width) solid var(--line-strong)}
.table td{padding:14px var(--space-2);border-bottom:var(--rule-width) solid var(--line);color:var(--ink-2)}
.table tbody tr:hover{background:var(--bg-2)}                                  /* наведение строки */
.table tbody tr:last-child td{border-bottom:0}
.table .num{font-family:var(--font-mono);color:var(--ink)}

/* ---------------------------------------------------------------------------
 * Хлебные крошки
 * ------------------------------------------------------------------------ */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;list-style:none;padding:0;margin:0;
  font-size:var(--fs-2);color:var(--ink-3)}
.crumbs li{display:flex;align-items:center}
.crumbs li + li::before{content:"/";margin:0 var(--space-1);color:var(--line-strong)}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--accent);text-decoration:underline}
.crumbs a:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius)}
.crumbs [aria-current="page"]{color:var(--ink)}

/* ---------------------------------------------------------------------------
 * Пагинация
 * ------------------------------------------------------------------------ */
.pager{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.pager a,.pager span{min-width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:var(--fs-2);border:var(--rule-width) solid var(--line);
  border-radius:var(--radius);color:var(--ink-2);text-decoration:none;background:transparent}
.pager a:hover{border-color:var(--line-strong);color:var(--ink)}               /* наведение */
.pager a:focus-visible{outline:none;box-shadow:var(--focus-ring)}              /* фокус */
.pager [aria-current="page"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.pager .is-disabled{opacity:.4;pointer-events:none}                            /* недоступно */

/* ---------------------------------------------------------------------------
 * Блок контактов (ромбы с линейными иконками — фирменный приём «Элистрой»)
 * ------------------------------------------------------------------------ */
.contacts{display:grid;gap:var(--space-3);grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){.contacts{grid-template-columns:1fr}}
.contact-item{display:flex;gap:var(--space-2);align-items:flex-start}
.diamond{width:38px;height:38px;flex:none;border:var(--rule-width) solid var(--line-strong);
  transform:rotate(45deg);display:grid;place-items:center;color:var(--accent)}
.diamond > *{transform:rotate(-45deg)}
.contact-item .k{font-family:var(--font-display);font-size:var(--fs-1);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--ink-3)}
.contact-item .v{font-size:var(--fs-3);color:var(--ink)}
.contact-item a.v{text-decoration:none;color:var(--ink)}
.contact-item a.v:hover{color:var(--accent);text-decoration:underline}

/* ---------------------------------------------------------------------------
 * Форма заявки
 * ------------------------------------------------------------------------ */
.reqform{display:flex;flex-direction:column;gap:var(--space-3);max-width:720px}
.reqform-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
@media (max-width:620px){.reqform-grid{grid-template-columns:1fr}}
.reqform-foot{display:flex;flex-direction:column;gap:var(--space-2);align-items:flex-start}

/* ---------------------------------------------------------------------------
 * Пустое состояние / ошибка / статус формы
 * ------------------------------------------------------------------------ */
.empty-state,.error-state{border:var(--rule-width) dashed var(--line-strong);border-radius:var(--radius);
  padding:var(--space-5) var(--space-3);text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:var(--space-2);color:var(--ink-3)}
.error-state{border-style:solid;border-color:var(--danger);color:var(--ink-2)}
.form-status{border-left:3px solid var(--line-strong);padding:var(--space-2) var(--space-3);font-size:var(--fs-2);
  display:none;color:var(--ink-2)}
.form-status.is-loading{display:block}
.form-status.is-error{display:block;border-color:var(--danger);color:var(--danger)}
.form-status.is-success{display:block;border-color:var(--success);color:var(--ink-2)}

/* ---------------------------------------------------------------------------
 * Служебное
 * ------------------------------------------------------------------------ */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{50%{opacity:.55}}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* ---------------------------------------------------------------------------
 * Принудительные состояния — для демо-страницы и визуальной приёмки QA.
 * Дублируют :hover / :focus-visible / :active / [disabled] в статичном виде.
 * В проде не нужны: там состояния работают нативными псевдоклассами.
 * ------------------------------------------------------------------------ */
.is-hover.btn{filter:brightness(1.08)}
.is-active.btn{transform:translateY(1px)}
.is-focus{box-shadow:var(--focus-ring)}
.is-hover.input,.is-hover.textarea,.is-hover .select select{border-color:var(--line-strong)}
.is-focus.input,.is-focus.textarea,.is-focus .select select{border-color:var(--accent)}
.card.is-hover,.is-hover .card{border-color:var(--line-strong)}
.table tbody tr.is-hover{background:var(--bg-2)}
.crumbs a.is-hover{color:var(--accent);text-decoration:underline}
.pager a.is-hover{border-color:var(--line-strong);color:var(--ink)}