.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

@media (min-width: 760px){
  .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1100px){
  .grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

.pcard{
  border-radius: var(--r-xl);
  border: 1px solid rgba(9,40,24,.10);
  background: rgba(255,255,255,.74);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  padding: 18px;
  display:grid;
  gap: 14px;
  position: relative;
  overflow:hidden;
  transform: translateY(0);
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms var(--ease);
}

.pcard::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 260px at 18% 8%, rgba(32,167,119,.14), transparent 60%),
    radial-gradient(520px 260px at 90% 30%, rgba(126,230,197,.14), transparent 60%);
  opacity:.9;
  pointer-events:none;
}
.pcard > *{ position:relative; z-index:1; }

.pcard:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow2);
  border-color: rgba(32,167,119,.18);
}

.pcard__top{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  align-items: baseline;
}
.pcard__sku{
  font-weight: 1000;
  font-size: 13px;
  color: rgba(11,31,26,.72);
}
.pcard__price{
  font-weight: 1000;
  font-size: 14px;
  color: rgba(11,31,26,.92);
}
.pcard__price span{
  font-weight: 900;
  font-size: 12px;
  color: rgba(11,31,26,.60);
}

.pcard__img{
  border-radius: 22px;
  border: 1px solid rgba(9,40,24,.10);
  background:
    radial-gradient(620px 320px at 30% 20%, rgba(32,167,119,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.65));
  padding: 18px;
  min-height: 250px;
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
}
.pcard__badge{
  position:absolute;
  top: 12px;
  inset-inline-start: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 1000;
  font-size: 11px;
  letter-spacing:.02em;
  color: rgba(5,48,31,.85);
  background: rgba(32,167,119,.12);
  border: 1px solid rgba(32,167,119,.18);
  z-index: 2;
}
.pcard__badge--new{
  background: rgba(126,230,197,.18);
  border-color: rgba(126,230,197,.25);
}

.pcard__img img{
  width: min(380px, 85%);
  height:auto;
  transform: translateY(10px) scale(1.02);
  filter: drop-shadow(0 32px 42px rgba(5,48,31,.22));
  transition: transform 260ms var(--ease);
}
.pcard:hover .pcard__img img{
  transform: translateY(6px) scale(1.04);
}

.pcard__shine{
  position:absolute;
  inset:-40%;
  background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%);
  transform: translateX(-60%);
  opacity:0;
  pointer-events:none;
  transition: transform 700ms var(--ease), opacity 700ms var(--ease);
}
.pcard:hover .pcard__shine{
  opacity:.55;
  transform: translateX(60%);
}

.pcard__title{
  margin:0;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.pcard__desc{
  margin:0;
  color: var(--muted);
  line-height: 1.75;
  font-size: 14px;
}

.pcard__cta{
  padding-top: 6px;
}
.pcard__ctaBtn{
  height: 42px;
  padding-inline: 14px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  border: 1px solid rgba(9,40,24,.10);
  background: rgba(255,255,255,.70);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), background 200ms var(--ease);
}
.pcard:hover .pcard__ctaBtn{
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(5,48,31,.10);
}
.pcard__ctaIcon{ opacity:.9; }
html[dir="rtl"] .pcard__ctaIcon{ transform: scaleX(-1); }