/* =====================================
   BUTTONS
===================================== */

button {
  font-family: inherit;
  font-size: 18px;
  font-weight: bold;
  border: 4px solid #000;
  padding: 10px 20px;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

a.ghost,
a.buySmall {
  display: inline-block;
  font-family: inherit;
  font-size: 18px;
  font-weight: bold;
  border: 4px solid #000;
  padding: 10px 20px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

/* Ensure anchors with .buy use the same button visuals */
a.buy,
.buy {
  display: inline-block;
  text-decoration: none;
  background: #ff0000;
  color: #ffff00;
  box-shadow: 6px 6px 0 #000;
  border: 4px solid #000;
  padding: 10px 20px;
}

/* Landing-specific variants (previously in landing.css) */
.buy.landing {
  background: #0000ff;
  color: #fff;
}

.ghost.landing {
  background: #00ff00;
  color: #000;
}

/* Primary Buy */
.buy {
  background: #ff0000;
  color: #ffff00;
  box-shadow: 6px 6px 0 #000;
}

/* Secondary */
.ghost {
  background: #00ff00;
  color: #000;
  box-shadow: 6px 6px 0 #000;
}

/* Small */
.buySmall {
  background: #0000ff;
  color: #fff;
  box-shadow: 6px 6px 0 #000;
}

/* Hover Jump */
.buy:hover,
.ghost:hover,
.buySmall:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 #000;
}

/* Click Slam */
.buy:active,
.ghost:active,
.buySmall:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #000;
}

.buy.twitch {
  background: #0000ff;
  color: #fff;
}

.buy.streamer {
  background: #00c8ff;
  color: #000;
}