/* 1. PONER TODO EL FONDO EN NEGRO */
  html, 
  body, 
  #app, 
  main, 
  .site-wrapper,
  .main-container, 
  .page-content, 
  .product-detail,
  div[class*="product"] {
    background-color: #000000 !important;
    background: #000000 !important;
  }

  /* Hacer que los bloques internos sean transparentes para que se vea el fondo negro */
  .product-detail div[class*="info"],
  .product-info-wrapper {
    background-color: transparent !important;
    background: transparent !important;
  }

  /* 2. RECUPERAR EL TÍTULO Y TEXTOS EN BLANCO */
  /* Esto hace que el título vuelva a aparecer grande y legible, igual que el resto del texto */
  .product-info-wrapper h1,
  .product-title,
  h1[class*="title"],
  .product-info-wrapper p,
  .product-info-wrapper span,
  .price,
  .money {
    color: #ffffff !important;
  }

  /* Darle el tamaño e importancia correctos al título principal */
  .product-info-wrapper h1, 
  .product-title {
    font-size: 2.2rem !important;
    font-weight: bold !important;
    display: block !important;
  }

  /* 3. ARREGLAR LA BARRA DE CANTIDAD Y VARIANTES */
  /* El botón de la variante ("apartar lugar $500 Mxn") se queda con fondo blanco y texto negro */
  div[class*="variant"] button,
  .variant-item,
  [class*="sku"] button {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #ffffff !important;
  }

  /* Selector de cantidad (+ 1 -) estable */
  .quantity, div[class*="quantity"] {
    background-color: #ffffff !important;
    max-width: 120px !important;
    display: flex !important;
    border-radius: 4px;
  }
  .quantity *, div[class*="quantity"] * {
    color: #000000 !important;
  }