.product-item{border:1px solid #eee;border-radius:14px;overflow:hidden;background:#fff;
  
    transition:.2s}
  .product-item:hover{box-shadow:0 10px 22px rgba(0,0,0,.08);transform:translateY(-2px)}
  .product-image{position:relative}
  .product-image img.main-img{width:100%;height:100%;object-fit:cover;display:block}
  .thumbs{display:flex;gap:8px;padding:10px;flex-wrap:wrap}
  .thumbs img{width:56px;height:56px;object-fit:cover;border-radius:8px;border:1px solid #e5e7eb;cursor:pointer;transition:.15s}
  .thumbs img:hover{transform:scale(1.04)}
  .product-info{padding:12px 14px 16px}
  .product-category{font-size:12px;color:#64748b}
  .product-name{font-size:16px;margin:6px 0 6px;font-weight:700}
  .product-price{display:flex;align-items:center;gap:10px;margin-top:6px}
  .product-price .now{color:#22355f;font-weight:800}
  .product-price .old{text-decoration:line-through;color:#94a3b8}
  .variant-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
  .size-badge{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:10px;padding:2px 8px;font-size:12px}
  .color-dot{width:18px;height:18px;border-radius:999px;border:1px solid #e2e8f0;display:inline-block}
  .card-actions{display:flex;gap:10px;margin-top:12px}
  .btn-view{background:#22355f;color:#fff;border:none;border-radius:10px;padding:8px 12px;font-weight:700}
  .btn-view:hover{opacity:.9}
  .btn-wish{border:1px solid #e5e7eb;background:#fff;border-radius:10px;padding:8px 12px}
  @media (max-width:576px){.product-image img.main-img{height:100% ; object-fit:cover}}



      /* ===== Shimmer Skeleton ===== */
      .skeleton-card {
        border: 1px solid #eee;
        border-radius: 14px;
        overflow: hidden;
        background: #fff;
      }
      .skeleton {
        position: relative;
        overflow: hidden;
        background: #f1f5f9; /* خلفية */
      }
      .skeleton::after {
        content: "";
        position: absolute;
        inset: 0;
        transform: translateX(-100%);
        background: linear-gradient(
          90deg,
          rgba(255,255,255,0) 0%,
          rgba(255,255,255,.6) 50%,
          rgba(255,255,255,0) 100%
        );
        animation: shimmer 1.25s infinite;
      }
      @keyframes shimmer {
        100% { transform: translateX(100%); }
      }
    
      .sk-img { height: 230px; }
      .sk-line { height: 12px; border-radius: 8px; }
      .sk-line.lg { height: 16px; }
      .sk-gap { padding: 12px 14px 16px; }
      .sk-row { display: grid; gap: 8px; }
      .sk-thumbs { display: flex; gap: 8px; padding: 10px; }
      .sk-thumb { width: 56px; height: 56px; border-radius: 8px; }
    
      @media (max-width:576px){ .sk-img{ height:200px; } }