.home-direct {
    display:flex;
    justify-content:center;
    background-color:white;
    padding:15px 0px;
  }

  .home-direct a{
    color:grey;
    transition:0.3s;
  }

  .home-direct a:hover{
    color:red;
  }


.active-tags{
  display:flex;
  flex-wrap:wrap;
  gap:2px;
  margin:0px 10px 0;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 15px;
  border:1px solid var(--ring);
  border-radius:999px;
  background:#fff;
  box-shadow:var(--shadow);
  font-size:.95rem;
}
.chip .remove{
  border:none;
  background:transparent;
  font-weight:700;
  cursor:pointer;
  padding:0 4px;
  line-height:1;
}
.chip .remove:focus{
  outline:2px solid #000;
  outline-offset:2px;
}

.card { position: relative; }

/* condition pill */
.cond-pill{
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 4px 10px;
  font-size: 12px;
  line-height: 1;
  border-radius: 999px;
  background: #eee;
  color: #111;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(0,0,0,.08);
  user-select: none;
  pointer-events: none; /* not clickable */
  text-transform: none; /* keep your “Second Hand” casing */
}

/* color variants (auto-picked by helper) */
.cond-new     { background: #e6f7ed; color: #0f6d2f; border: 1px solid #bfe9cf; }
.cond-refurb  { background: #eef3ff; color: #2446a8; border: 1px solid #cdd8ff; }
.cond-used    { background: #fff4e5; color: #8a4b00; border: 1px solid #ffe0b3; }
.cond-generic { background: #f1f1f1; color: #333;     border: 1px solid #e2e2e2; }