.pu-recs { margin: 24px 0; }
.pu-recs__title { font-weight: 700; font-size: 1.1rem; margin: 0 0 12px; }
.pu-recs__grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
@media (max-width: 1200px){ .pu-recs__grid{ grid-template-columns: repeat(3,1fr);} }
@media (max-width: 992px){  .pu-recs__grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 576px){  .pu-recs__grid{ grid-template-columns: 1fr; } }
.pu-recs__card { background:#fff; border:1px solid #e7ecf2; border-radius: 12px; overflow: hidden; display:flex; flex-direction:column; }
.pu-recs__thumb { position:relative; background:#f4f6f8; display:block; }
.pu-recs__thumb::before { content:""; display:block; padding-top:56.25%; }
.pu-recs__thumb { position: relative; }
.pu-recs__thumb img{
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; /* replaces inset: 0; */
  width: 100%;
  height: 100%;
  object-fit: cover;
}.pu-recs__body { padding: 12px 14px; display:flex; flex-direction:column; gap:6px; }
.pu-recs__title { font-size: 16px; line-height: 1.3; margin: 0; }
.pu-recs__price { font-weight: 800; }
.pu-recs__meta { color:#6b7a89; font-size: 13px; }
.pu-recs__grid.is-loading { opacity: 0.6; }
.pu-recs__empty { color:#6b7a89; padding: 12px; border: 1px dashed #d7dee6; border-radius: 10px; }