/*
 * Thẻ sản phẩm (snippets/product-card.bwt). Dùng ở danh mục, tìm kiếm, trang chủ, sản phẩm liên quan.
 * Biến thể .pcard--row: ảnh nhỏ bên trái (cột phải trang sản phẩm trên desktop).
 */

.pcard {
  position: relative;
  height: 100%;
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.pcard:hover { border-color: var(--color-border-strong); }
.pcard-link { display: flex; flex-direction: column; gap: 6px; color: var(--color-text); text-decoration: none; }
.pcard-link:hover { color: var(--color-text); }
.pcard-link:hover .pcard-name { color: var(--color-action-hover); }

.pcard-img { position: relative; display: block; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-surface); }
.pcard-img img { width: 100%; height: 100%; object-fit: contain; }
.pcard-noimg { width: 100%; height: 100%; display: grid; place-items: center; background: var(--color-surface-sunken); color: var(--color-text-subtle); }
.pcard-noimg .icon { width: 32px; height: 32px; }

.pcard-flag {
  position: absolute;
  top: 4px; left: 4px;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--color-discount-bg);
  color: var(--color-on-discount);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.pcard-flag.is-flash { background: var(--color-action-hover); }
.pcard-flag .icon { width: 12px; height: 12px; }
/* Nhãn quà (kiểu A, chốt 02/11): góc dưới ảnh, không đè badge giảm giá */
.pcard-gift {
  position: absolute;
  left: 4px; bottom: 4px;
  max-width: calc(100% - 8px);
  padding: 1px 6px;
  border: 1px solid var(--color-action-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-action-hover);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.pcard-gift .icon { width: 12px; height: 12px; flex: none; }

.pcard-state {
  align-self: flex-start;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
}
.pcard-state.is-incoming, .pcard-state.is-preorder { background: var(--color-warning-bg); color: var(--color-warning); }

.pcard-name {
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2em * var(--leading-tight));
}
/* Ô thông số: ô xám, các mục nối tiếp nhau theo độ dài chữ (mục ngắn đứng chung hàng), mục quá dài cắt "..." */
.pcard-spec {
  display: flex; flex-wrap: wrap; gap: 4px var(--space-3);
  padding: 6px var(--space-2); border-radius: var(--radius-md); background: var(--color-surface-sunken);
  font-size: var(--text-xs); color: var(--color-text-muted); line-height: var(--leading-tight);
}
.pcard-sp { display: flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; }
.pcard-sp > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard-sp svg { flex: none; width: 14px; height: 14px; color: var(--gray-500); }
.pcard-sp i { flex: none; width: 4px; height: 4px; margin: 0 5px; border-radius: 50%; background: var(--gray-400); }
.pcard-note { margin: 0; font-size: var(--text-xs); color: var(--color-warning); line-height: var(--leading-tight); }
.pcard-price { margin: auto 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; line-height: var(--leading-tight); }
.pcard-now { font-weight: var(--weight-strong); color: var(--color-price); }
.pcard-was { font-size: var(--text-xs); color: var(--color-price-compare); }
.pcard-contact { font-weight: var(--weight-strong); color: var(--color-secondary); }
.pcard-muted { color: var(--color-text-muted); }