:root{
  --club-red: #d61b2b;
  --club-red-deep: #b11421;
  --club-gold: #c9a227;
  --club-black: #151515;
  --club-white: #ffffff;

  --bs-primary: var(--club-red);
  --bs-primary-rgb: 214,27,43;
}

/* HEADER */
.club-header{
  background: linear-gradient(135deg, var(--club-red) 0%, #f03545 50%, var(--club-red-deep) 100%);
  padding: .35rem 0;
}
.club-header .navbar .nav-link{
  color: #ffeaee;
  opacity:.95;
  margin-right:.4rem;
}
.club-header .navbar .nav-link:hover,
.club-header .navbar .nav-link:focus{
  color: #fff;
  text-decoration: underline;
}

/* FUNDO DO SITE */
.club-bg{
  /* xadrez subtil em diagonal + ligeiro gradiente */
  background:
    radial-gradient( circle at 25% 25%, rgba(255,255,255,.9) 0 2px, transparent 2px ) 0 0/28px 28px,
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.92));
  min-height: calc(100vh - 140px);
}

/* FOOTER */
.club-footer{
  background: var(--club-black);
  color:#fff;
}

/* BOTÕES */
.btn-primary{
  background-color: var(--club-red);
  border-color: var(--club-red);
}
.btn-primary:hover{
  background-color: var(--club-red-deep);
  border-color: var(--club-red-deep);
}
.btn-outline-light{
  border-color: rgba(255,255,255,.75);
}

/* BOTÃO DE CARRINHO */
.btn-cart{
  position: relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px; height:40px;
  border-radius: 10px;
  background: rgba(255,255,255,.15);
  color:#fff;
  border: 1px solid rgba(255,255,255,.35);
  transition: all .2s ease;
}
.btn-cart:hover{ transform: translateY(-1px); background: rgba(255,255,255,.2); color:#fff; }
.btn-cart .bi{ font-size: 1.2rem; }
.cart-badge{
  position:absolute;
  top:-6px; right:-6px;
  background: var(--club-gold);
  color: #000;
  min-width: 20px; height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: .75rem;
  line-height: 20px;
  border: 1px solid rgba(0,0,0,.15);
}

/* CARTÕES */
.card{
  border: 1px solid #ececec;
  border-radius: 12px;
}
.card:hover{ box-shadow: 0 6px 18px rgba(0,0,0,.08); }

/* LINKS E DETALHES */
a{ color: var(--club-red-deep); }
a:hover{ color: var(--club-red); }

/* TÍTULOS */
h1,h2,h3,h4,h5,h6{ color: #222; }

/* NAVBAR toggler visível sobre o vermelho */
.navbar-toggler{
  border-color: rgba(255,255,255,.6);
}
.navbar-toggler-icon{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255,255,255,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}