.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);
  overflow:hidden;transition:box-shadow .2s ease, transform .2s ease;
}
.card:hover{box-shadow:var(--shadow);}
.card-media{position:relative;aspect-ratio:4/3;background:var(--paper-dim) center/cover no-repeat;}
.card-media .pill{position:absolute;top:.8rem;left:.8rem;}
.card-media .price-tag{
  position:absolute;bottom:.8rem;right:.8rem;background:#fff;color:var(--green-700);
  padding:.35rem .8rem;border-radius:999px;font-weight:800;font-size:var(--fs-14);box-shadow:var(--shadow);
}
.card-body{padding:1.25rem;}
.card-body h5{font-size:1.05rem;margin-bottom:.35rem;}
.card-meta{display:flex;gap:1rem;flex-wrap:wrap;color:var(--ink-500);font-size:var(--fs-12);margin-bottom:.7rem;}
.card-meta span{display:inline-flex;align-items:center;gap:.3rem;}
.card-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.25rem;border-top:1px solid var(--line);
}

.card-row{display:flex;gap:1.25rem;border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;}
.card-row .card-media{width:220px;flex:0 0 220px;aspect-ratio:auto;}
.card-row .card-body{flex:1;padding:1.1rem 1.4rem;}
@media (max-width:700px){
  .card-row{flex-direction:column;}
  .card-row .card-media{width:100%;flex:0 0 auto;aspect-ratio:16/9;}
}

.stat-icon-card{
  text-align:center;padding:2rem 1.2rem;border:1px solid var(--line);border-radius:var(--radius-md);
}
.stat-icon-card .icon-wrap{
  width:64px;height:64px;border-radius:50%;background:var(--green-50);color:var(--green-600);
  display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;
}
.stat-icon-card:hover .icon-wrap{background:var(--green-600);color:#fff;}

/* Modal */
.modal-overlay{
  position:fixed;inset:0;background:rgba(12,18,29,.55);
  display:flex;align-items:center;justify-content:center;padding:1.5rem;z-index:200;
}
.modal-overlay[hidden]{display:none;}
.modal-box{
  background:#fff;border-radius:var(--radius-md);max-width:560px;width:100%;
  max-height:90vh;overflow-y:auto;padding:1.75rem;position:relative;box-shadow:var(--shadow);
}
.modal-close{
  position:absolute;top:1rem;right:1rem;border:0;background:transparent;font-size:1.3rem;color:var(--ink-500);
}
.modal-close:hover{color:var(--danger);}