.af-topbar {
  width: 100%;
  background: var(--af-primary);
  color: #f9fafb;
  font-size: 0.82rem;
}

.af-topbar-inner {
  display: flex;
  align-items: center;
  height: 46px;
}

/* 25 / 50 / 25 en desktop/tablet */

.af-topbar-left,
.af-topbar-center,
.af-topbar-right {
  display: flex;
  align-items: center;
}

.af-topbar-left {
  width: 25%;
  gap: 8px;
  justify-content: flex-start;
}

.af-topbar-left i {
  color: #22c55e;
}

.af-topbar-center {
  width: 50%;
  justify-content: center;
}

.af-topbar-center a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #e5e7eb;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.18s ease, text-shadow 0.18s ease;
}

.af-topbar-center i {
  font-size: 1.1rem;
  color: #22c55e;
  transition: color 0.18s ease, text-shadow 0.18s ease;
}

.af-topbar-center a:hover {
  color: #22c55e;
  text-shadow: 0 0 4px rgba(34, 197, 94, 0.5);
}

.af-topbar-center a:hover i {
  color: #22c55e;
  text-shadow: 0 0 4px rgba(34, 197, 94, 0.8);
}

.af-topbar-right {
  width: 25%;
  justify-content: flex-end;
  gap: 12px;
}

.af-topbar-cart,
.af-topbar-login {
  border: none;
  background: transparent;
  color: #f9fafb;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 0.8rem;
}

.af-topbar-cart {
  position: relative;
}

.af-topbar-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #ff4b4b;
  color: #fff;
  font-size: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* RESPONSIVE */

@media (max-width: 768px) {
  .af-topbar-inner {
    height: 40px;
    justify-content: center;
  }

  /* ocultar texto y teléfono en móvil */
  .af-topbar-left,
  .af-topbar-center {
    display: none;
  }

  /* centrar login + carrito */
  .af-topbar-right {
    width: auto;
    justify-content: center;
    gap: 16px;
  }

  .af-topbar-cart,
  .af-topbar-login {
    font-size: 0; /* sólo icono */
  }

  .af-topbar-cart i,
  .af-topbar-login i {
    font-size: 20px;
  }
}