/* Shared styles for Adopt Me Value List category pages */
.vl-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:22px;
}
.vl-search-wrap{
  position:relative;
  flex:1;
  min-width:220px;
  max-width:380px;
}
.vl-search-wrap input{
  width:100%;
  padding:11px 44px 11px 18px;
  border-radius:30px;
  border:1.5px solid rgba(0,0,0,.1);
  background:#fff;
  font-size:1rem;
  color:#2a3d1f;
  outline:none;
  box-sizing:border-box;
  font-family:inherit;
}
.vl-search-wrap input:focus{ border-color:#6bb33a; }
.vl-search-icon{
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  color:#8aad6a;
  font-size:1.2rem;
  pointer-events:none;
}
.vl-count{
  font-size:.9rem;
  color:#5c6785;
  font-weight:600;
  white-space:nowrap;
}
.vl-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:16px;
}
.vl-card{
  background:rgba(255,255,255,.78);
  border:1px solid rgba(0,0,0,.08);
  border-radius:20px;
  padding:16px 14px 14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  transition:transform .15s, box-shadow .15s;
}
.vl-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(88,70,41,.14);
}
.vl-card-img{
  position:relative;
  width:84px;
  height:84px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.vl-card-img img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.vl-card-name{
  font-size:.9rem;
  font-weight:700;
  color:#2a3d1f;
  text-align:center;
  line-height:1.3;
  min-height:2.3em;
}
.vl-card-value{
  font-size:1.05rem;
  font-weight:800;
  color:#3b6d11;
}
.vl-card-value-label{
  font-size:.7rem;
  font-weight:600;
  color:#8aad6a;
  text-transform:uppercase;
  letter-spacing:.05em;
  margin-top:-6px;
}
.vl-variants{
  display:flex;
  gap:6px;
  margin-top:2px;
}
.vl-variant-btn{
  width:26px;
  height:26px;
  border-radius:8px;
  border:1.5px solid rgba(0,0,0,.1);
  background:#fff;
  font-size:.72rem;
  font-weight:800;
  cursor:pointer;
  color:#5c6785;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:inherit;
  transition:transform .1s;
}
.vl-variant-btn:hover{ transform:translateY(-1px); }
.vl-variant-btn[data-variant="fly"].active{ background:#18b4d8; color:#fff; border-color:#18b4d8; }
.vl-variant-btn[data-variant="ride"].active{ background:#fd4d70; color:#fff; border-color:#fd4d70; }
.vl-variant-btn[data-variant="neon"].active{ background:#6bb33a; color:#fff; border-color:#6bb33a; }
.vl-variant-btn[data-variant="mega"].active{ background:#9257e0; color:#fff; border-color:#9257e0; }
.vl-empty{
  grid-column:1/-1;
  text-align:center;
  padding:40px 20px;
  color:#5c6785;
}
.vl-more-wrap{
  text-align:center;
  margin-top:30px;
}
.vl-more-btn{
  padding:12px 40px;
  border-radius:28px;
  border:none;
  background:#6bb33a;
  color:#fff;
  font-size:.95rem;
  font-weight:700;
  cursor:pointer;
  font-family:inherit;
  transition:background .15s;
}
.vl-more-btn:hover{ background:#5a9a2d; }
.vl-crumb{
  font-size:.9rem;
  margin-bottom:16px;
  color:#5c6785;
}
.vl-crumb a{ color:#3b6d11; font-weight:700; text-decoration:none; }
.vl-crumb a:hover{ text-decoration:underline; }
.vl-other-cats{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:10px;
  margin-top:14px;
}
.vl-other-cat{
  background:rgba(255,255,255,.6);
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  padding:12px;
  text-align:center;
  text-decoration:none;
  color:#2a3d1f;
  font-weight:700;
  font-size:.85rem;
  transition:transform .15s;
}
.vl-other-cat:hover{ transform:translateY(-2px); }
.vl-other-cat .em{ display:block; font-size:1.4rem; margin-bottom:4px; }
@media (max-width:480px){
  .vl-grid{ grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:10px; }
  .vl-card-img{ width:64px; height:64px; }
}