/* ==========================================================================
   cart-item-row.css — صف منتج في السلة (Cart item row — repeatable)
   شركة السرعة المطلقة | كل القيم من tokens.css — RTL.
   يعيد استخدام .qty من Batch 1. يحاذي أعمدة رأس cart-table.css.
   WC-NOTE: حلقة صفوف cart/cart.php
   Phase 5: add data-label attributes to <td> elements for mobile
   stacked layout — ::before { content: attr(data-label) }
   ========================================================================== */

.cart-item {
  display: grid;
  grid-template-columns: 3fr 1fr 1fr 1fr auto;
  gap: var(--space-16);
  align-items: center;
  padding: var(--space-16);
  border-block-end: var(--border-width) solid var(--color-border);
}

/* المنتج (صورة + اسم + موديل) */
.cart-item__product {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}
.cart-item__image {
  width: var(--space-64);
  height: var(--space-64);
  object-fit: contain;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.cart-item__name {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--color-text);
}
.cart-item__model {
  font-size: var(--fs-2xs);
  color: var(--color-text-muted);
}

.cart-item__price,
.cart-item__total {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--color-text);
}
.cart-item__total {
  color: var(--color-primary);
}

/* زر الحذف (Remove) */
.cart-item__remove {
  color: var(--color-text-muted);
}
.cart-item__remove:hover {
  color: var(--color-error);
}

/* ---- جوال: تخطيط مكدّس (Stacked) ---- */
@media (max-width: 767px) {
  .cart-item {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }
}