@import url('_base.css');

.head{ display:flex; justify-content:space-between; align-items:end; gap:16px; }

.filters{
  margin-top:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  border-radius:22px;
  padding:12px;
}
.filters__row{ display:flex; gap:12px; flex-wrap:wrap; }
.field{ display:flex; flex-direction:column; gap:6px; min-width:180px; }
.field--grow{ flex:1; min-width:220px; }
.field--btn{ min-width:140px; }
label{ font-size:12px; color:rgba(232,237,247,.70); }
input,select,textarea{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(10,12,18,.55);
  color:var(--text);
  outline:none;
}
input:focus,select:focus,textarea:focus{ border-color:rgba(215,177,111,.42); }

.grid{
  margin-top:16px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:14px;
}
.card{
  border:1px solid rgba(215,177,111,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border-radius:20px;
  overflow:hidden;
  box-shadow: var(--shadow);
  transition: transform .18s ease, border-color .18s ease;
  position:relative;
}
.card:hover{ transform: translateY(-3px); border-color:rgba(215,177,111,.38); }
.card__media{
  aspect-ratio: 4/3;
  background:rgba(255,255,255,.02);
  display:flex; align-items:center; justify-content:center;
  padding:10px;
  position:relative;
}
.card__media img{
  width:100%; height:100%;
  object-fit:contain;
  border-radius:14px;
}
.badge{
  position:absolute; top:10px; left:10px;
  padding:6px 10px; border-radius:999px;
  font-weight:900; font-size:12px;
  background:rgba(44,138,90,.22);
  border:1px solid rgba(44,138,90,.55);
}
.card__body{ padding:12px 12px 14px; }
.card__title{ font-weight:900; }
.card__meta{ color:rgba(232,237,247,.68); font-size:13px; margin-top:6px; min-height:34px; }
.card__bottom{ display:flex; justify-content:space-between; gap:10px; align-items:end; margin-top:10px; }
.card__price{ font-size:20px; font-weight:900; color:rgba(215,177,111,.95); }
.card__views{ color:rgba(232,237,247,.55); font-size:12px; }

.pager{
  margin-top:18px;
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 0;
}
.pager__a{
  padding:10px 12px; border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
}
.pager__a:hover{ border-color:rgba(215,177,111,.38); }

@media (max-width: 980px){
  .grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .grid{ grid-template-columns: 1fr; }
  .field{ min-width: 100%; }
  .field--btn{ width:100%; }
}

.badge--gold{ margin-left:10px; border-color:rgba(215,177,111,.55); background:rgba(215,177,111,.12); color:rgba(215,177,111,.95); }