.obpm-grid{
  display:grid;
  grid-template-columns:repeat(var(--obpm-columns,3), minmax(0, 1fr));
  gap:28px;
}
.obpm-card{
  position:relative;
  width:100%;
  aspect-ratio:var(--obpm-ratio, 4 / 5);
  border-radius:24px;
  overflow:hidden;
  cursor:pointer;
  background:#f4f4f4;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.obpm-card__media,
.obpm-card__media img{
  width:100%;
  height:100%;
}
.obpm-card__media img{
  display:block;
  object-fit:cover;
  object-position:center center;
  transition:transform .35s ease;
}
.obpm-card:hover .obpm-card__media img{
  transform:scale(1.02);
}
.obpm-card.is-sold-out{
  cursor:default;
}
.obpm-card.is-sold-out .obpm-card__media img{
  filter:grayscale(.05) brightness(.82);
}
.obpm-badge{
  position:absolute;
  z-index:3;
  top:14px;
  left:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:8px 14px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  line-height:1;
  color:#fff;
  box-shadow:0 8px 18px rgba(0,0,0,.18);
}
.obpm-badge--featured{
  background:#ff8a00;
}
.obpm-badge--soldout{
  background:rgba(19,19,19,.82);
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  font-size:18px;
  min-height:44px;
  padding:12px 18px;
}
@media (max-width: 1024px){
  .obpm-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width: 767px){
  .obpm-grid{grid-template-columns:1fr;gap:20px;}
}