/* product-card.css — רכיב כרטיס המוצר של MDS.
   ────────────────────────────────────────────────
   🔷 לגבריאל: זה הרכיב שמקביל ל-content-product.php בווקומרס.
   .pgrid  → ul.products          .pcard → li.product
   .pname  → the_title()          .price → get_price_html()
   .pimg   → product_thumbnail    .cta   → add_to_cart
   שדות אופציונליים (.sku/.stock/.specs/.badge/.price-old)
   נועדו להיעלם בלי לשבור את הפריסה אם אין להם ערך.
   ────────────────────────────────────────────────
   נטען לפני ה-inline, ולכן עמוד עם גרסה משלו עדיין גובר. */

/* ערכי גיבוי ב-var(): הרכיב חייב לעמוד בכוחות עצמו גם
   בעמוד שלא מצהיר על הטוקנים — כך הוא נשאר נייד לוורדפרס. */
.pgrid { display:grid; gap:14px; }
.cols-3 { grid-template-columns:repeat(3,1fr); }
.cols-4 { grid-template-columns:repeat(4,1fr); }
.grid.list { grid-template-columns:1fr; }
.pcard { background:var(--surface,#fff); border:1px solid var(--border,#E3E6EC); border-radius:14px; overflow:hidden; transition:.2s; display:flex; flex-direction:column; }
.pcard:hover { transform:translateY(-3px); box-shadow:0 8px 20px rgba(27,42,74,.16); }
.grid.list .pcard { flex-direction:row; align-items:center; gap:10px; padding:10px 14px; }
.toprow { display:flex; gap:6px; align-items:center; padding:10px 12px 0; flex-wrap:wrap; }
.grid.list .toprow { padding:0; }
.brand { font-weight:800; font-size:13px; }
.b-len { color:#E2231A; }
.b-dell { color:#007DB8; }
.badge { font-size:12px; font-weight:600; color:#fff; padding:2px 8px; border-radius:9px; background:var(--primary,#1B2A4A); }
.bd-red { background:var(--danger,#A32D2D); }
.bd-green { background:#1b5e20; }
.pimg { background:#fff; text-align:center; padding:14px 0; margin:10px 12px; border-radius:10px; }
/* התמונה בכרטיס: גובה קבוע + contain, כדי שכרטיסים בשורה יישארו באותו גובה
   גם כשיחסי התמונות מהיצרן שונים. אותם ערכים שה-JS מזריק בעמודי הרשימה. */
.pimg img { width:100%; height:170px; object-fit:contain; display:block;
            border-radius:8px; background:#fff; }
/* שם המוצר — המקבילה ל-the_title(). מחלקה יציבה שאפשר
   לתלות עליה סגנון, במקום <b> חשוף. */
.pname { font-size:15.5px; font-weight:700; color:var(--text,#222);
         text-decoration:none; display:block; }
.pbody { padding:0 13px 13px; flex:1; display:flex; flex-direction:column; }
.specs { margin:6px 0; padding-right:15px; font-size:12px; color:var(--text-2,#444); }
.specs li { margin:1px 0; }
.sku { color:var(--muted,#5A6272); font-size:12px; }
.stock { color:var(--success,#1B7A3A); font-size:12px; font-weight:600; margin:5px 0; }
.oos { color:var(--muted,#5A6272); }
.price-old { color:var(--muted,#5A6272); text-decoration:line-through; font-size:13px; }
.price { color:var(--primary,#1B2A4A); font-size:22px; font-weight:800; }
.cta { margin-top:auto; background:var(--primary,#1B2A4A); color:#fff; text-align:center; padding:9px; font-weight:bold; cursor:pointer; border-radius:0 0 13px 13px; }