/* ==========================================================================
   M חשמל — Product Card (Stage 16). Design System v1.1 tokens only.
   Builds on np-components.css: .np-card, .np-media, .np-badge, .np-product__*, .np-price, .np-stock, .np-btn, .np-grid
   Mobile-first. Logical properties only (RTL/LTR safe).
   ========================================================================== */

/* ---------- Card shell ---------- */
.np-product-card {
  width: 100%;
  min-width: 0;
  height: 100%;                 /* grid rows stretch → equal card heights */
  margin: 0;
  list-style: none;
}
.np-product-card:focus-within { outline: none; }        /* focus ring lives on the focused control, not on the whole card */
@media (hover: hover) and (min-width: 1025px) {
  .np-product-card:hover { border-color: var(--np-color-border-strong); box-shadow: var(--np-shadow-sm); }
  .np-product-card:hover .np-product-card__img { transform: scale(1.03); }
}

/* ---------- Media ---------- */
.np-product-card__media { flex: 0 0 auto; }
.np-product-card__img-link { display: block; width: 100%; height: 100%; }
.np-product-card__img,
.np-product-card__media img {
  display: block; width: 100%; height: 100%; object-fit: contain; object-position: center;
  transition: transform var(--np-motion-normal) var(--np-ease);
}
.np-product-card__badge--discount { direction: ltr; unicode-bidi: isolate; }
.np-product-card__actions { opacity: 1; }
.np-product-card__action { --_bg: var(--np-color-bg-surface); }
.np-product-card__action[aria-pressed="true"] { --_fg: var(--np-color-brand-primary); --_border: var(--np-color-brand-primary); --_bg: var(--np-color-brand-primary-soft); }
.np-product-card__action .np-icon { pointer-events: none; }

/* ---------- Body ---------- */
.np-product-card__body { flex: 1 1 auto; gap: var(--np-space-2); padding: var(--np-space-3); }
@media (min-width: 768px) { .np-product-card__body { padding: var(--np-space-4); } }

.np-product-card__brand a { color: inherit; text-decoration: none; }
.np-product-card__brand a:hover { color: var(--np-color-brand-primary); text-decoration: underline; }

.np-product-card__title { -webkit-line-clamp: 3; min-height: 0; overflow-wrap: anywhere; }
@media (min-width: 768px) { .np-product-card__title { -webkit-line-clamp: 2; } }
.np-product-card__title a:focus-visible { outline: var(--np-focus-ring); outline-offset: 2px; border-radius: var(--np-radius-sm); }

.np-product-card__model { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-product-card__model-value { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }

.np-product-card__features { margin-top: var(--np-space-1); }
.np-product-card__feature > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-product-card__feature .np-icon { flex: 0 0 auto; color: var(--np-color-success); }
/* Mobile: show at most 3 features (display rule only — mapping stays 4) */
@media (max-width: 767px) { .np-product-card__feature:nth-child(n + 4) { display: none; } }

.np-product-card__badges { gap: var(--np-space-1); }

/* ---------- Footer: price / stock / CTA aligned to the bottom ---------- */
.np-product-card__footer {
  margin-top: auto;
  padding-top: var(--np-space-2);
  display: flex; flex-direction: column; gap: var(--np-space-2);
}
.np-product-card__price { row-gap: 0; }
.np-product-card__price .np-price__current { white-space: nowrap; }
.np-product-card__price .np-price__current .woocommerce-Price-amount,
.np-product-card__price .np-price__old .woocommerce-Price-amount { white-space: nowrap; font-variant-numeric: tabular-nums; }
.np-product-card__price .np-price__prefix { font-size: var(--np-font-body-small-size); font-weight: 400; color: var(--np-color-text-secondary); margin-inline-end: var(--np-space-1); }
.np-product-card__price .np-price__old { white-space: nowrap; }
.np-product-card__stock .np-icon { flex: 0 0 auto; }

.np-product-card__cta { margin-top: var(--np-space-1); }
.np-product-card__cta .np-icon { flex: 0 0 auto; }
/* Woo AJAX states → Design System states (no extra markup) */
.np-product-card__cta.loading { color: transparent !important; pointer-events: none; }
.np-product-card__cta.loading::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px;
  border: 2px solid var(--_fg); border-inline-end-color: transparent; border-radius: 50%;
  animation: np-spin .8s linear infinite;
}
.np-product-card__cta.is-success, a.np-product-card__cta.is-success { --_bg: var(--np-color-success); --_bg-hover: var(--np-color-success); --_fg: var(--np-color-text-inverse); }
/* Woo appends a "View cart" link after the button — the header cart is the feedback channel */
.np-product-card a.added_to_cart { display: none; }

/* Out of stock */
.np-product-card.is-out-of-stock .np-product-card__img { opacity: .7; }

/* ---------- Narrow cards (≈170–220px on 2-col mobile / QA width tests) ---------- */
@container np-card (max-width: 220px) {
  .np-product-card__body { padding: var(--np-space-2) var(--np-space-3); gap: var(--np-space-1); }
  .np-product-card__cta { padding-inline: var(--np-space-2); }
  .np-product-card__cta .np-icon { display: none; }
}
.np-grid > .np-product-card, .np-products > .np-product-card { container: np-card / inline-size; }

/* ---------- Grid helpers (columns modifiers; archive layout refined in the Product Archive stage) ---------- */
.np-grid--1 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1367px) {
  .np-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .np-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .np-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .np-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* WooCommerce ul.products → np-grid (neutralise Woo's float layout; same specificity as woocommerce-layout.css, loaded later) */
.woocommerce ul.products.np-products, .woocommerce-page ul.products.np-products, ul.products.np-products {
  display: grid; margin: 0 0 var(--np-space-6); padding: 0; list-style: none;
}
.woocommerce ul.products.np-products::before, .woocommerce ul.products.np-products::after,
.woocommerce-page ul.products.np-products::before, .woocommerce-page ul.products.np-products::after { display: none; }
.woocommerce ul.products.np-products li.product, .woocommerce-page ul.products.np-products li.product,
.woocommerce ul.products.np-products li.np-product-card, .woocommerce-page ul.products.np-products li.np-product-card,
ul.products.np-products > li {
  float: none; width: auto; margin: 0; padding: 0; clear: none; position: relative;
}
.woocommerce ul.products.np-products li.np-product-card a img, .woocommerce-page ul.products.np-products li.np-product-card a img { width: 100%; height: 100%; margin: 0; box-shadow: none; }
.woocommerce ul.products.np-products li.np-product-card .np-product-card__title, .woocommerce-page ul.products.np-products li.np-product-card .np-product-card__title { padding: 0; margin: 0; font-size: var(--np-font-body-size); }
.woocommerce ul.products.np-products li.np-product-card .np-price, .woocommerce ul.products.np-products li.np-product-card .np-price del,
.woocommerce ul.products.np-products li.np-product-card .np-price ins { color: inherit; font-size: inherit; opacity: 1; text-decoration: none; }
.woocommerce ul.products.np-products li.np-product-card .np-price del { text-decoration: line-through; }

@media (prefers-reduced-motion: reduce) {
  .np-product-card__img { transition: none; }
  .np-product-card:hover .np-product-card__img { transform: none; }
}