.ppx-products{
  --ppx-accent: #5B5EF7;
  --ppx-accent-rgb: 91, 94, 247;

  --ppx-gap: 24px;
  --ppx-cols: 4;
  --ppx-img-h: 220px;
  --ppx-r-card: 18px;

  --text:#0F172A;
  --muted:#6B7280;
  --border:#E6E6E8;

  direction: rtl;
  color: var(--text);
}

/* Header */
.ppx-head{
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap:16px;
  margin-bottom:24px;
}
.ppx-title{ margin:0; font-size:20px; font-weight:900; letter-spacing:-.2px; line-height:1.5; }
.ppx-subtitle{ margin:6px 0 0; color:var(--muted); font-size:13.5px; }
.ppx-seeall{
  min-height:44px; display:inline-flex; align-items:center;
  padding:0 12px; border-radius:12px;
  border:1px solid var(--border); background:#fff; color:#334155;
  transition: transform 260ms cubic-bezier(.2,.9,.2,1), border-color 260ms, background-color 260ms;
}
.ppx-seeall:hover{
  transform: translateY(-1px);
  border-color: rgba(var(--ppx-accent-rgb), .28);
  background: rgba(var(--ppx-accent-rgb), .04);
}

/* Grid */
.ppx-grid{
  list-style:none; margin:0; padding:0;
  display:grid;
  gap: var(--ppx-gap);
  grid-template-columns: repeat(var(--ppx-cols), minmax(0,1fr));
}

/* Card */
.ppx-card{
  position:relative;
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--ppx-r-card);
  overflow:hidden;
  transform: translateZ(0);
  transition: transform 260ms cubic-bezier(.2,.9,.2,1), box-shadow 260ms, border-color 260ms;
}

/* halo */
.ppx-card::before{
  content:"";
  position:absolute;
  inset:-60px -60px auto -60px;
  height:190px;
  background:
    radial-gradient(520px 220px at 85% 30%, rgba(var(--ppx-accent-rgb), .12), transparent 62%),
    radial-gradient(520px 220px at 20% 80%, rgba(var(--ppx-accent-rgb), .08), transparent 62%);
  pointer-events:none;
}
/* signature line */
.ppx-card::after{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(var(--ppx-accent-rgb), .35) 20%,
    rgba(var(--ppx-accent-rgb), 1) 50%,
    rgba(var(--ppx-accent-rgb), .35) 80%,
    transparent 100%
  );
  opacity:.7;
  pointer-events:none;
}

.ppx-card:hover{
  transform: translateY(-6px);
  border-color: rgba(var(--ppx-accent-rgb), .22);
  box-shadow: 0 18px 44px rgba(15,23,42,.09);
}

/* Media */
.ppx-media{ display:block; padding:16px; position:relative; }
.ppx-badge{
  position:absolute; top:14px; right:14px; z-index:2;
  font-size:12px; font-weight:900;
  padding:7px 10px; border-radius:999px;
  background: rgba(var(--ppx-accent-rgb), .12);
  color: rgb(var(--ppx-accent-rgb));
  border:1px solid rgba(var(--ppx-accent-rgb), .22);
}
.ppx-badge--muted{
  background: rgba(107,114,128,.10);
  color: #6B7280;
  border-color: rgba(107,114,128,.22);
}

.ppx-img{
  width:100%;
  height: var(--ppx-img-h);
  object-fit: contain;
  display:block;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(var(--ppx-accent-rgb), .05), #fff 60%);
  border:1px solid rgba(230,230,232,.95);
  padding:14px;
  transition: transform 260ms cubic-bezier(.2,.9,.2,1), filter 260ms, border-color 260ms;
}
.ppx-card:hover .ppx-img{
  transform: scale(1.03);
  border-color: rgba(var(--ppx-accent-rgb), .18);
  filter: saturate(1.03) contrast(1.02);
}

/* Body */
.ppx-body{ padding: 0 16px 16px; }
.ppx-name{
  display:block;
  margin:4px 0 8px;
  color: var(--text);
  font-size:14.5px;
  font-weight:900;
  line-height:1.75;
  text-decoration:none;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.ppx-meta{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap:12px;
  margin-bottom:14px;
}
.ppx-price{ font-size:15px; font-weight:950; color: rgb(var(--ppx-accent-rgb)); }
.ppx-price del{ opacity:.55; font-weight:700; margin-left:8px; }
.ppx-price ins{ text-decoration:none; }

.ppx-rating{
  font-size:12.5px;
  color:#475569;
  background: rgba(15,23,42,.04);
  border:1px solid rgba(15,23,42,.06);
  border-radius:999px;
  padding:6px 10px;
  line-height:1;
}

/* Button */
.ppx-btn{
  width:100%;
  min-height:46px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:950;
  text-decoration:none;

  border:1px solid rgba(var(--ppx-accent-rgb), .42);
  color: rgb(var(--ppx-accent-rgb));
  background: transparent;

  transition: transform 260ms cubic-bezier(.2,.9,.2,1), background-color 260ms, border-color 260ms, box-shadow 260ms;
  position:relative;
  overflow:hidden;
}
.ppx-btn::after{
  content:"";
  position:absolute;
  inset:-40% -60%;
  background: linear-gradient(110deg, transparent 45%, rgba(255,255,255,.26) 55%, transparent 65%);
  transform: translateX(-40%);
  transition: transform 520ms cubic-bezier(.2,.9,.2,1);
}
.ppx-card:hover .ppx-btn{
  background: rgba(var(--ppx-accent-rgb), .08);
  border-color: rgba(var(--ppx-accent-rgb), .70);
  box-shadow: 0 12px 24px rgba(15,23,42,.06);
  transform: translateY(-1px);
}
.ppx-card:hover .ppx-btn::after{ transform: translateX(40%); }

.ppx-empty{
  border:1px dashed var(--border);
  border-radius:14px;
  padding:16px;
  background:#fff;
  color: var(--muted);
}