/* =====================================================================
   metall-product.css — редизайн страницы товара металлопроката (линейный
   товар: арматура/труба профильная/уголок/швеллер/квадрат/полоса),
   views/product-metall-leng.pug.

   По образцу редизайна карточки высокопрочного крепежа (krepeg.css) —
   своя вёрстка (.mprod-*), не завязанная на product.css/Bootstrap-сетку.
   product.css всё равно подключён на странице — из него нужны только
   .preloader/.spinner-overlay (живая цена, csx.js), сама раскладка
   товара больше не наследует его классы/грид.

   ⚠️ Классы, которые НЕЛЬЗЯ переименовывать/убирать — их напрямую
   читают существующие скрипты:
     .product-shopping-cart-name (data-goods/data-product/data-href)
     .quantity.quantity-per-piece-new, .dec/.inc.quantity-button, .quantity-input
     .product-price.price-shadow, .price.price-shadow,
     .product-shopping-cart-total-price.price-shadow  (csx.js/quantity-metall-length.js)
     .total-weight (quantity-metall-length.js → showTotalWeight)
     .btn-add-to-cart, .btn-rezka, .btn-delivery, #modalRezka
   ===================================================================== */

/* ---------- страница товара: фото + инфо ---------- */
.mprod {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin-top: 22px;
}
.mprod-media {
  flex: 1 1 320px;
  max-width: 400px;
}
.mprod-frame {
  border-radius: 6px;
  border: 1px solid #e0e0e0;
  background: #f7f8fa;
  overflow: hidden;
}
.mprod-frame img {
  width: 100%;
  height: auto;
  display: block;
}
.mprod-cats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
}
.mprod-cats__link {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 20px;
  background: #f7f8fa;
  border: 1px solid #e0e0e0;
  color: #5b6a75;
  font-size: 12px;
  text-decoration: none;
}
.mprod-cats__link,
.mprod-cats__link:link,
.mprod-cats__link:visited,
.mprod-cats__link:hover,
.mprod-cats__link:active,
.mprod-cats__link:focus {
  text-decoration: none;
}
.mprod-cats__link:hover,
.mprod-cats__link:focus {
  background: #3b5473;
  border-color: #3b5473;
  color: #fff;
}
.mprod-cats__sep {
  color: #b7bfc5;
  font-size: 13px;
}

.mprod-info { flex: 2 1 460px; min-width: 0; }
.mprod-title {
  font-size: 23px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 16px;
  color: #2c3e50;
}

.mprod-price-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.mprod-price {
  font-size: 25px;
  font-weight: 700;
  font-family: 'Courier New', monospace;
  /* цвет НЕ задаём здесь — этот элемент всегда несёт .price-shadow (см. pug),
     который до ответа csx.js держит color:transparent (блюр), а после —
     цвет самой "разблюренной" подписи (#156192, csx.css/csx.js). Свой color
     здесь той же специфичности (один класс) перебивал бы .price-shadow по
     порядку подключения файлов и глушил блюр насмерть — было и наблюдалось
     живьём: цена сразу показывалась чёткой, до ответа сервера. */
}
.mprod-price .nds {
  font-size: 13px;
  font-weight: 500;
  font-family: 'Rubik', sans-serif;
  color: #7f8c8d;
  margin-left: 4px;
}
/* Маленький неблокирующий спиннер живой цены (csx.js) — по образцу
   .krepeg-price__spinner (krepeg.css). Виден до ответа сервера/до истечения
   UNLOCK_MS, дальше скрывается сам (display:none из JS), скрыт при печати
   и если JS отключён (нет смысла ждать AJAX, который не запустится). */
.mprod-price__spinner {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border: 2px solid rgba(59, 84, 115, 0.25);
  border-top-color: #3b5473;
  border-radius: 50%;
  animation: mprod-spin 0.8s linear infinite;
}
@keyframes mprod-spin {
  to { transform: rotate(360deg); }
}
/* Плашка "нет в наличии" (goodscat.inStock === false — позиция сейчас не
   найдена на странице поставщика, цена показана последняя известная, см.
   routes/price/price_metall_area.js). Сама плашка не блюрится вместе с
   ценой — .mprod-price__spinner скрывает лишь цифру цены на время запроса,
   а актуальность плашки csx-ar.js обновляет после ответа отдельно (hidden).
   Цвет самой цены при inStock=false тоже красит csx-ar.js (тем же приёмом
   text-shadow, что и обычный "разблюр" — см. комментарий у .mprod-price
   выше), здесь только фолбэк на случай отключённого JS/до первого ответа. */
.mprod-stock-pill {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #a4291f;
  background: #fbe4e1;
  border: 1px solid #f3c9c4;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
/* ⚠️ БЫЛО СЛОМАНО (2026-09-03): наш display:inline-flex выше и браузерный
   [hidden]{display:none} — одна и та же специфичность (0,0,1,0), а UA-стиль
   идёт раньше в каскаде, значит author-правило перебивает его — плашка была
   видна ВСЕГДА, что бы ни стояло в атрибуте hidden (goodscat.inStock в БД
   был верным — 1 у большинства, — но на странице показывалось "нет в
   наличии" везде). Составной селектор ниже специфичнее любого из них по
   отдельности — гарантированно выигрывает независимо от порядка правил. */
.mprod-stock-pill[hidden] { display: none; }
.mprod-chip-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.mprod-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  background: #f7f8fa;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 13px;
  color: #7f8c8d;
}
.mprod-chip b {
  font-family: 'Courier New', monospace;
  color: #2c3e50;
  font-weight: 700;
}

.mprod-desc {
  font-size: 14px;
  line-height: 1.6;
  color: #444;
  margin-bottom: 20px;
  max-width: 62ch;
}
.mprod-desc p { margin: 0 0 10px; }
.mprod-desc ul { margin: 0 0 14px; padding-left: 20px; }
.mprod-desc li { margin: 0 0 4px; }
.mprod-desc strong { color: #2c3e50; font-weight: 600; }
/* «Заказать по размерам: …» — только на площадном товаре
   (product-metall-area.pug), ссылки на смежные калькуляторы (лазер, свой же
   раскрой листа ниже на этой странице). */
.mprod-desc-links { color: #7f8c8d; }
.mprod-desc-links a { color: #3b5473; font-weight: 600; text-decoration: none; }
.mprod-desc-links a:hover { text-decoration: underline; }

.mprod-specs-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #7f8c8d;
  margin-bottom: 8px;
}
.mprod-specs {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.mprod-specs td {
  padding: 8px 4px;
  border-bottom: 1px solid #e0e0e0;
}
.mprod-specs td:first-child { color: #7f8c8d; width: 46%; }
.mprod-specs td:last-child {
  color: #2c3e50;
  font-weight: 700;
  font-family: 'Courier New', monospace;
}

/* ---------- строка заказа: одна адаптивная таблица вместо дублей
   desktop/mobile (в старой вёрстке .table-responsive.hidden-xs +
   отдельная .visible-xs с тем же товаром — на мобильном reflow через
   data-label, как в krepeg-cart) ---------- */
.mprod-order {
  margin-top: 34px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.mprod-order-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr 1fr 1fr;
  gap: 10px;
  align-items: center;
  padding: 16px 18px;
}
.mprod-order-row--head {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #7f8c8d;
  background: #f7f8fa;
  border-bottom: 1px solid #e0e0e0;
}
.mprod-order-col { font-size: 14px; }
/* :not(.price-shadow) — по той же причине, что и у .mprod-price выше: две
   ячейки этого ряда (цена/итого) несут .price-shadow, и общий color здесь
   той же специфичности перебивал бы её блюр. */
.mprod-order-col:not(.price-shadow) { color: #2c3e50; }
.mprod-order-col--num {
  font-family: 'Courier New', monospace;
  font-weight: 700;
}
/* Собственные классы (.mprod-qty__*), никак не пересекаются с сайтовыми
   .quantity/.quantity-button/.quantity-input из style.css (у тех своя
   раскладка — абсолютно спозиционированные +/-, см. docs/raskroy-smeta.md
   §6.4) — раньше воевали за специфичность, теперь просто разные классы,
   как и у крепежа (quantity-krepeg.js/.krepeg-qty__*). */
.mprod-qty { display: flex; align-items: center; gap: 6px; }
.mprod-qty__btn {
  width: 30px; height: 30px;
  border: 1px solid #d8d8d8;
  background: #fff;
  color: #3b5473;
  border-radius: 6px;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}
.mprod-qty__btn:hover { background: #f2f2f2; }
.mprod-qty__input {
  width: 48px; height: 30px;
  text-align: center;
  border: 1px solid #d8d8d8;
  border-radius: 6px;
  font-family: 'Courier New', monospace;
  font-size: 14px;
}

.mprod-order-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-top: 1px solid #e0e0e0;
  background: #f7f8fa;
  font-size: 13.5px;
  color: #7f8c8d;
}
.mprod-order-foot b {
  font-family: 'Courier New', monospace;
  color: #2c3e50;
  font-size: 15px;
}
.mprod-order-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.mprod-btn {
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 500;
  padding: 11px 20px;
  border-radius: 4px;
  border: 2px solid transparent;
  cursor: pointer;
}
/* Резка/Доставка/Добавить в корзину — одного размера, а не по ширине своего
   текста (самая длинная надпись — «Добавить в корзину» — задаёт ширину для
   всех трёх). */
.mprod-order-actions .mprod-btn {
  min-width: 190px;
  text-align: center;
}
.mprod-btn--ghost {
  background: #fff;
  border-color: #d8d8d8;
  color: #5b6a75;
}
.mprod-btn--ghost:hover { border-color: #3b5473; color: #3b5473; }
.mprod-btn--primary {
  background: #3b5473;
  border-color: #3b5473;
  color: #fff;
}
.mprod-btn--primary:hover { background: #2c3e50; border-color: #2c3e50; }

/* ---------- блок поставщика (isAuth) — служебный, не для клиентов,
   поэтому оформлен компактнее основного блока ---------- */
.mprod-seller {
  margin-top: 22px;
  border: 1px dashed #d8d8d8;
  border-radius: 8px;
  padding: 14px 18px;
}
.mprod-seller-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #b8790f;
  margin-bottom: 10px;
  cursor: pointer;
}
.mprod-seller table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.mprod-seller th, .mprod-seller td {
  padding: 6px 8px;
  border-bottom: 1px solid #eee;
  text-align: left;
}
.mprod-seller .cheat-input {
  width: 64px;
  padding: 4px 6px;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
}

/* ---------- модалка «Резка» — те же id/классы (Bootstrap modal,
   #modalRezka), только типографика/цвет в духе редизайна. Таблица теперь
   полностью JS-рисуемая (public/scripts/rezka.js, docs/raskroy-smeta.md
   §9) — считает реально по размеру/количеству, а не показывает статичную
   cost_rez, как раньше. ---------- */
#modalRezka .modal-title { color: #2c3e50; font-weight: 600; }
#modalRezka .table-service th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #7f8c8d;
}
/* тот же приём контраста, что и у полей раскроя ниже (metall-product.css
   правился по просьбе пользователя 2026-09-08 — бледная #d8d8d8 рамка
   плохо видна) */
#modalRezka .form-control.service,
#modalRezka .quantity-input {
  border: 1.5px solid #9aa7b1;
  background: #fbfcfe;
  color: #1c2a36;
}
#modalRezka .form-control.service:focus,
#modalRezka .quantity-input:focus {
  outline: none;
  border-color: #3b5473;
  box-shadow: 0 0 0 3px rgba(59, 84, 115, .15);
}
#modalRezka .rezka-rm {
  background: none;
  border: none;
  color: #b7bfc5;
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
}
#modalRezka .rezka-rm:hover { color: #b23b3b; }
#modalRezka .rezka-total-row {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  align-items: baseline;
  padding: 8px 6px 4px;
  font-size: 13px;
  color: #7f8c8d;
}
#modalRezka .rezka-total-row b {
  font-family: 'Courier New', monospace;
  font-size: 17px;
  color: #2c3e50;
}
#modalRezka .btn-default.add-service,
#modalRezka .btn-default.close-service {
  border-radius: 4px;
  border: 2px solid #3b5473;
  color: #3b5473;
  background: #fff;
}
#modalRezka .btn-default.add-service:hover {
  background: #3b5473;
  color: #fff;
}
/* «Посчитать раскрой» — та же янтарная марка, что у калькулятора раскроя
   ниже (.raskroy-calc-btn) — визуально ведёт к нему же. */
#modalRezka .btn-to-raskroy {
  background: #b8790f;
  border: 1.5px solid #b8790f;
  color: #fff;
  font-weight: 600;
  border-radius: 7px;
  padding: 10px 18px;
}
#modalRezka .btn-to-raskroy:hover { background: #8f5c09; border-color: #8f5c09; }

/* ---------- мобильная адаптация ---------- */
@media (max-width: 767px) {
  .mprod { flex-direction: column; gap: 20px; }
  .mprod-media { max-width: 100%; }

  /* составной селектор — специфичность выше .mprod-order-row, не зависит от
     порядка правил в файле (тот же баг/приём, что уже был у krepeg-cart__row:
     без второго класса .mprod-order-row{display:block} ниже перебивал(а) бы
     .mprod-order-row--head{display:none} — ровно это и происходило на живой
     странице, шапка таблицы вылезала на мобильном как обычный текст). */
  .mprod-order-row.mprod-order-row--head { display: none; }
  .mprod-order-row {
    display: block;
    padding: 0;
  }
  .mprod-order-col {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #ececec;
  }
  .mprod-order-col:last-child { border-bottom: none; }
  .mprod-order-col::before {
    content: attr(data-label);
    color: #7f8c8d;
    font-weight: 500;
    margin-right: 12px;
  }
  .mprod-order-col--name::before { content: none; }
  .mprod-order-col--name {
    font-weight: 600;
    color: #2c3e50;
  }
  .mprod-order-foot { flex-direction: column; align-items: stretch; }
  .mprod-order-actions .mprod-btn { flex: 1; }

  /* .mprod-price-row в одну строку (без wrap) на узком экране сжимало
     .mprod-price до одной строки, и его же внутренний текст ("(кв. м)" +
     .nds "в т.ч. НДС (22%)") переносился по словам как попало, вперемешку
     с плашкой "нет в наличии" — коряво. Разрешаем перенос и явно уводим
     плашку на отдельную строку под ценой (flex-basis:100%), а не встык. */
  .mprod-price-row { flex-wrap: wrap; row-gap: 6px; }
  .mprod-stock-pill { flex-basis: 100%; }
}