/* Карточка товара (бенто) — разметка: template/includes/product.twig.
   Только токены из tokens.css. Режимы: .pcard--catalog / --pick / --config / --build. */

.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 8px;
  background: var(--gray-100);
  border-radius: 22px;
}
.pcard.is-muted { opacity: 0.6; }

/* Фото: белое окно внутри плитки */
.pcard__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #fff;
  border-radius: 16px;
}
.pcard__img {
  width: auto;
  height: auto;
  max-width: 82%;
  max-height: 82%;
  object-fit: contain;
}
.pcard__cover { position: absolute; inset: 0; z-index: 1; }
.pcard.is-ended .pcard__img { opacity: 0.45; }
.pcard__ended {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-sale);
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  pointer-events: none;
}

/* Бейджи: слева сверху */
.pcard__badges {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: calc(100% - 96px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pcard__badge {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--badge-bg, var(--gray-600));
  color: #fff;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  white-space: nowrap;
}
.pcard__badge a { color: inherit; text-decoration: none; }
.pcard__badge--sale { --badge-bg: var(--color-sale); }
.pcard__badge--accent { --badge-bg: var(--color-accent); }
.pcard__badge--warning { --badge-bg: var(--color-warning); }
.pcard__badge--dark { --badge-bg: var(--gray-800); }

/* Избранное и сравнение: справа сверху */
.pcard__quick {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: flex;
  gap: 6px;
}
.pcard__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #fff;
  color: var(--gray-800);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.08);
  transition: color 0.2s;
}
.pcard__icon:hover { color: var(--color-primary); }
.pcard__icon.remove { color: var(--color-accent); }
.pcard__icon.is-wish.remove .ic { fill: currentColor; }
.pcard__icon .ic { width: 18px; height: 18px; }
.pcard__icon--solid { width: 40px; height: 40px; border: 1px solid var(--gray-200); box-shadow: none; }

/* Текст */
.pcard__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  padding: 10px 8px 4px;
}
.pcard__rating { margin: 0; }
.pcard__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 8px;
  color: var(--gray-600);
  font-size: var(--text-xs);
  line-height: 1.3;
}
.pcard__stock { color: var(--stock-color, var(--gray-600)); }
.pcard__check { width: 10px; height: 8px; }
.pcard__sku { color: var(--gray-400); cursor: copy; }
.pcard__title,
.pcard__spec {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
}
.pcard__title {
  -webkit-line-clamp: 2;
  color: var(--gray-900);
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  line-height: 1.25;
  text-decoration: none;
}
.pcard__title:hover { color: var(--color-primary); }
.pcard__spec {
  -webkit-line-clamp: 1;
  color: var(--gray-600);
  font-size: var(--text-sm);
  line-height: 1.3;
}

/* Цена: текущая крупно, старая — зачёркнутая рядом, рассрочка (Iute) — строкой ниже */
.pcard__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin-top: auto;
  cursor: pointer;
}
.pcard__price > span:first-child {
  color: var(--gray-900);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  line-height: 1.1;
}
.pcard__price:has(> em) > span:first-child { color: var(--color-sale); }
.pcard__price > em {
  color: var(--gray-400);
  font-size: var(--text-sm);
  font-style: normal;
  text-decoration: line-through;
}
.pcard__price .price-cur { margin-left: 0.25em; }
.pcard__price .iute-credit-chip {
  display: inline-flex;
  flex-basis: 100%;
  align-items: baseline;
  gap: 4px;
  color: var(--gray-600);
  font-size: var(--text-sm);
}

/* Действия */
.pcard__actions { display: flex; gap: 6px; margin-top: 6px; }
.pcard__buy {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  border-radius: 12px;
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
}
.pcard__buy .ic { width: 18px; height: 18px; }
.pcard__buy-ic { display: inline-flex; }
.pcard__buy-ic svg { width: 20px; height: 18px; }

/* Сборки: список деталей */
.pcard__parts { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.pcard__list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pcard__part { display: flex; align-items: center; gap: 8px; font-size: var(--text-xs); line-height: 1.3; }
.pcard__part.is-out { opacity: 0.5; }
.pcard__part-ic { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 28px; height: 28px; }
.pcard__part-ic svg,
.pcard__part-ic img { max-width: 100%; max-height: 100%; }
.pcard__part-txt { display: flex; flex-direction: column; min-width: 0; }
.pcard__part-cat { color: var(--gray-400); }
.pcard__part-name { overflow: hidden; color: var(--gray-800); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.pcard--build .pcard__part:nth-child(n + 5) { display: none; }
.pcard--build.is-build-list-open .pcard__part { display: flex; }
.pcard__more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-primary);
  font-size: var(--text-sm);
  text-decoration: none;
}
.pcard__more .ic { width: 14px; height: 14px; }

/* Телефон */
@media (max-width: 575px) {
  .pcard { padding: 6px; border-radius: 18px; }
  .pcard__media { border-radius: 13px; }
  .pcard__badges { top: 6px; left: 6px; max-width: calc(100% - 76px); }
  .pcard__quick { top: 6px; right: 6px; gap: 4px; }
  .pcard__icon { width: 30px; height: 30px; border-radius: 8px; }
  .pcard__icon .ic { width: 16px; height: 16px; }
  .pcard__body { gap: 4px; padding: 8px 4px 2px; }
  .pcard__title { font-size: var(--text-sm); }
  .pcard__spec { font-size: var(--text-xs); }
  .pcard__price > span:first-child { font-size: var(--text-lg); }
  .pcard__buy { height: 36px; border-radius: 10px; font-size: var(--text-xs); }
}