/* assets/css/product-overrides.css */

/* A) Talle seleccionado */
.product-details
.product-info-wrapper
.product-options
.option-group
.size-options
.size-option.selected.border {
  background-color: black !important;
  color: var(--contrast-color) !important;
  border: 2px solid var(--accent-color) !important;
}

/* B) Color seleccionado */
.product-details
.product-info-wrapper
.product-options
.option-group
.color-options
.color-option.selected {
  outline: 2px solid var(--accent-color) !important;
}
.product-details
.product-info-wrapper
.product-options
.option-group
.color-options
.color-option.selected i.bi-check {
  display: block !important;
}

/* cart-overrides.css */

/* ----- Ajustes de la tarjeta de cada fila del carrito ----- */
.cart-item {
  margin-bottom: 1.5rem;
}

/* ----- Ajustes de la tarjeta del resumen (Order Summary) ----- */
.cart-summary {
  background-color: #ffffff; /* fondo blanco */
  border-radius: 0.5rem;     /* esquinas redondeadas */
}

/* ----- Títulos y valores en Order Summary ----- */
.summary-title {
  font-size: 1.25rem;
  color: #3e0925; /* color de título (morado oscuro de tu plantilla) */
}
.summary-value {
  font-weight: 600;
  color: #42063e; /* color oscuro para los valores monetarios */
}

/* ----- Botón “Proceed to Checkout” ----- */
.btn-accent {
  background-color: #8c0d4f;
  border-color: #8c0d4f;
  color: #ffffff;
}
.btn-accent:hover {
  background-color: #6f0a3f;
  border-color: #6f0a3f;
}

/* ----- Pequeños ajustes en el input y botones para que coincidan con tu plantilla ----- */
.quantity-input {
  border-radius: 0.25rem;
  border: 1px solid #ced4da;
}
.quantity-btn {
  width: 32px;
  height: 32px;
  padding: 0;
}

/* ----- Color de texto de “Remove” ----- */
.remove-item-btn {
  font-size: 0.875rem;
}

/* ----- Pie de página (Footer) o Headers no son modificados aquí; utiliza main.css para ellos ----- */

@media (max-width: 767px) {
  .product-details .product-gallery .thumbnails-vertical .thumbnail-item {
    flex: 0 0 60px;
    max-width: 60px;
  }
}