.categories{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  max-width:980px;
  margin:10px auto 0;
    }
    @media (max-width:900px){ .categories{grid-template-columns:repeat(3,1fr)} }
    @media (max-width:580px){ .categories{grid-template-columns:repeat(2,1fr)} }

    .categories .cat{
  background:var(--card);
  border-radius:16px;
  box-shadow:var(--shadow);
  text-align:center;
  color:#222;
  text-decoration:none;
  border:2px solid transparent;
  outline:none;
  outline-offset:2px;

  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  height:100px;

  cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }

.categories .cat .top{
  border-radius:12px;
  padding:18px 8px;
  margin:0;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  color:#fff;
  font-weight:800;
}
    /* Category color bindings */
.cat-plumbing .top{ background:var(--cat-plumbing); }
.cat-electric .top{ background:var(--cat-electric); }
.cat-carpentry .top{ background:var(--cat-carpentry); color:#111; }
.cat-trucking .top{ background:var(--cat-trucking); }
.cat-auto .top{ background:var(--cat-auto); }
.cat-finance .top{ background:var(--cat-finance); }
    .categories .cat:hover{
  transform:translateY(-6px);
  box-shadow:
    0 14px 28px rgba(0,0,0,0.22),
    0 0 20px rgba(255,215,0,0.4);
  border-color:rgba(255,215,0,0.6);
}
.categories .cat:active{
  transform:translateY(-2px) scale(0.99);
}
.categories .cat:focus-visible{
  border-color:rgba(255,215,0,0.8);
  box-shadow:
    0 0 0 3px rgba(255,215,0,0.25),
    0 12px 24px rgba(0,0,0,0.18);
}
/* ===== Search Suggestions Dropdown (single source of truth) ===== */
.search { position: relative; }

.suggestions{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 8px);
  background:#fff;
  border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.22);
  border:1px solid rgba(0,0,0,.08);
  overflow:hidden;
  z-index:999;
}

/* Buttons created by JS */
.suggestions button{
  width:100%;
  text-align:left;
  border:0;
  background:transparent;
  padding:12px 14px;
  cursor:pointer;
  font-weight:800;
  color:#111;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  -webkit-tap-highlight-color: transparent; /* mobile tap feel */
  touch-action: manipulation;               /* removes mobile delay */
}
.suggestions button:hover{
  background:rgba(255,215,0,.14);
}

.suggestions button + button{
  border-top:1px solid rgba(0,0,0,.06);
}

/* The right-side tag */
.suggestions .tag{
  font-size:12px;
  font-weight:900;
  padding:4px 10px;
  border-radius:999px;
  background:#f2f2f2;
  color:#333;
}