/* Карточка 3D-забора (views/product-3d.pug): живая цена (csx-zabor.js) и строка
   заказа (quantity-zabor.js). docs/architecture.md §3.2.9. Свои классы без
   Bootstrap; строка заказа — общие классы .mprod-order…, .mprod-qty…, .mprod-btn… из
   metall-product.css (как у профильной трубы), здесь только отличия заборов.
   Блюр цены — старый .price-shadow из csx.css, здесь не переопределяется. */

/* у забора нет колонки «Длина, м» — 5 колонок вместо 6 */
.mprod-order--zabor .mprod-order-row {
  grid-template-columns: 2fr 1fr 1.2fr 1fr 1fr;
}
@media (max-width: 767px) {
  /* мобильный reflow: block вместо grid (как в metall-product.css), иначе
     правило выше (специфичнее) вернуло бы сетку */
  .mprod-order--zabor .mprod-order-row { display: block; }
  /* шапку на мобильном прятать сильнее правила выше (та же ловушка, что
     описана у .mprod-order-row--head в metall-product.css) */
  .mprod-order--zabor .mprod-order-row.mprod-order-row--head { display: none; }
  /* подпись data-label (::before) наследует блюр ячейки .price-shadow —
     «Цена, р/шт» размывалась вместе с цифрой (у металлопроката так же) */
  .mprod-order--zabor .mprod-order-col.price-shadow::before {
    color: #7f8c8d;
    text-shadow: none;
  }
}

.zprice-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
}

/* маленький неблокирующий спиннер на время запроса живой цены; JS прячет
   его по ответу или через UNLOCK_MS, без JS скрыт через <noscript> в pug */
.zprice__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: zprice-spin 0.8s linear infinite;
}
@keyframes zprice-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .zprice__spinner { animation-duration: 3s; }
}

/* позиции нет на странице категории поставщика — цена серая (для свежей
   цены без блюра; при блюре цвет задаёт csx-zabor.js через text-shadow) */
.product-details-info .product-price.zprice--out:not(.price-shadow) { color: #7f8c8d; }

.zprice-stock {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  color: #8a5a00;
  background: #fff4e0;
  border: 1px solid #f3dcae;
  padding: 3px 10px;
  border-radius: 20px;
}
/* author display:inline-flex иначе перебивает UA [hidden]{display:none}
   (тот же баг, что был у .mprod-stock-pill 2026-09-03) */
.zprice-stock[hidden] { display: none; }

@media print {
  .zprice__spinner { display: none; }
}