/* Файл: static/products.css */
/* Участвует в: products.html, app.css */
/* Назначение: стили раздела «Товары» — карточки категорий и сетка товаров (3 версии: 3 колонки / 2 колонки / 1–2 колонки) */

.prd-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.prd-cat { background: var(--white); border-radius: 16px; box-shadow: var(--shadow); padding: 20px 22px 18px; position: relative; overflow: hidden; border: 1px solid var(--line); }
.prd-cat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(var(--red), var(--bronze)); }
.prd-cat__title { font-family: var(--font-display); font-size: 21px; color: var(--red); cursor: pointer; max-width: 80%; line-height: 1.2; min-height: 44px; display: flex; align-items: center; }
.prd-cat__art { position: absolute; right: 16px; top: 12px; font-size: 44px; opacity: .9; }
.prd-cat__subs { margin-top: 10px; display: flex; flex-direction: column; }
.prd-cat__sub { padding: 9px 4px; font-size: 14px; color: var(--ink-soft); border-top: 1px solid var(--ivory-deep); cursor: pointer; min-height: 40px; display: flex; align-items: center; justify-content: space-between; }
.prd-cat__sub:hover { color: var(--burgundy); background: #FBF8F3; }
.prd-cat__sub::after { content: "›"; color: var(--bronze); font-size: 18px; }

.prd-crumbs { font-size: 13px; color: var(--ink-soft); margin-bottom: 12px; }
.prd-crumbs b { color: var(--burgundy); }
.prd-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.prd-card { background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); cursor: pointer; transition: transform .15s, box-shadow .15s; }
.prd-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.prd-card__photo { width: 100%; aspect-ratio: 4/3; background: var(--ivory-deep) center/cover no-repeat; display: flex; align-items: center; justify-content: center; font-size: 46px; }
.prd-card__body { padding: 12px 14px 14px; }
.prd-card__name { font-size: 13px; color: var(--ink-soft); line-height: 1.35; min-height: 35px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 8px; }
.prd-card__price { font-family: var(--font-display); font-size: 17px; font-weight: 700; }
.prd-card__oos { font-size: 11px; color: var(--danger); margin-top: 4px; }

.prd-modal-photo { width: 100%; aspect-ratio: 4/3; border-radius: var(--radius); background: var(--ivory-deep) center/cover no-repeat; margin-bottom: 14px; display: flex; align-items: center; justify-content: center; font-size: 70px; }
.prd-modal-price { font-size: 22px; font-weight: 700; color: var(--bronze-deep); margin-bottom: 10px; }
.prd-modal-desc { font-size: 14px; color: var(--ink-soft); line-height: 1.5; margin-bottom: 16px; }
.variant-group { margin-bottom: 16px; }
.variant-label { font-size: 13px; color: var(--ink-soft); margin-bottom: 8px; }
.variant-options { display: flex; flex-wrap: wrap; gap: 8px; }
.variant-opt { padding: 10px 16px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; cursor: pointer; background: var(--white); min-height: 44px; display: inline-flex; align-items: center; }
.variant-opt.active { border-color: var(--bronze); background: #FBF6EE; }

/* планшет */
@media (max-width: 1024px) {
  .prd-cats { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .prd-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}
/* телефон */
@media (max-width: 768px) {
  .prd-cats { grid-template-columns: 1fr; gap: 12px; }
  .prd-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .prd-cat__sub { min-height: 44px; }
  .prd-card__body { padding: 10px; }
  #prdBack { min-height: 44px; }
}