/* ==========================================
             BOTONES PRINCIPALES
   ========================================== */

.primary-btn {
    background-color: #c5a253; 
    color: white;
    border: none;
    margin-top: 5px;
    padding: 12px 25px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    letter-spacing: 1px;
    transition: background 0.2s;
    width: 100%; 
}

.primary-btn:hover {
    background-color: #a8893f;
    transform: translateY(-2px);
}

.primary-btn:active {
  transform: scale(0.98);
}

.primary-btn.loading {
  opacity: 0.7;
  pointer-events: none;
  position: relative;
}

.primary-btn.loading::after {
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid white;
  border-top: 2px solid transparent;
  border-radius: 50%;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  animation: spin 0.6s linear infinite;
}

.primary-btn.added {
  transform: scale(1.05);
  transition: transform 0.2s ease;
}

/* Estilo para el botón cuando NO hay stock */
.primary-btn:disabled {
    background-color: #d1d1d1 !important; 
    color: #888 !important;              
    cursor: not-allowed;                 
    transform: none !important;          
    box-shadow: none !important;         
    pointer-events: none;                
    border: none;
}

.secondary-btn {
    background: var(--cafe-oscuro);
    color: white;
    padding: 10px 15px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
}

.secondary-btn:hover {
  background: #2c1f17;
}