/*============================================================================
  QUANTUM HARDSTORE — qh-addcart-button.css
  Versión Forense — post-auditoría CSS Avanzado de Tiendanube

  POSICIÓN EN CASCADA:
    1. qh_master.css         (link, carga primero)
    2. qh-cards.css          (link, carga segundo)
    3. qh-addcart-button.css (link, carga tercero)
    4. <style>settings.css_code</style>  ← ENEMIGO: inline, carga ÚLTIMO

  ESTRATEGIA:
    - Especificidad (0,2,1): .qh-card + tag-selector
    - El CSS Avanzado usa (0,2,0) en sus reglas problemáticas
    - Al mismo nivel de !important, mayor especificidad gana
    - Usamos selector de atributo para el input para subir a (0,3,1)
============================================================================*/

/* ── Variables ─────────────────────────────────────── */
:root {
  --qh-red:      #eb3300;
  --qh-red-dark: #c42b00;
  --qh-red-glow: rgba(235, 51, 0, 0.28);
  --qh-cart-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
}


/*============================================================================
  INPUT[type="submit"] — productos sin variantes

  Especificidad: (0,3,1) — .qh-card + [type="submit"] + input tag
  Supera al CSS Avanzado que usa (0,2,0) o (0,2,1) máximo.

  IMPORTANTE: input no puede ser flex container → no usamos display:flex.
  El ícono va en background-image con padding-left para el espacio.
  El texto del value lo centra text-align:center de forma nativa.
============================================================================*/

.qh-card input[type="submit"].js-addtocart {
  /* Visual — rojo, sin fucsia */
  background-color: var(--qh-red) !important;
  background-image: var(--qh-cart-svg) !important;
  background-repeat: no-repeat !important;
  background-position: 13px center !important;
  background-size: 14px 14px !important;

  /* Borde y forma */
  border: none !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  outline: none !important;

  /* Layout — display:block en input es correcto. NUNCA flex en input. */
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 42px !important;
  /* padding-left = 13px margen + 14px SVG + 7px gap = 34px */
  padding: 9px 12px 9px 34px !important;
  margin-top: 10px !important;
  margin-bottom: 0 !important;

  /* Overflow: visible — crítico para que el área de clic no se corrompa */
  overflow: visible !important;
  position: static !important;  /* anula position:relative del CSS Avanzado */

  /* Tipografía */
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  text-align: center !important;
  white-space: nowrap !important;
  line-height: 1.3 !important;

  /* Interacción — sin pointer-events:none */
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s ease, box-shadow 0.2s ease !important;

  /* Anular la animación del CSS Avanzado que interfiere con el área de clic */
  animation: none !important;
  transform: none !important;
}

@media (hover: hover) {
  .qh-card input[type="submit"].js-addtocart:hover {
    background-color: var(--qh-red-dark) !important;
    box-shadow: 0 4px 14px var(--qh-red-glow) !important;
    animation: none !important;
    transform: none !important;
  }
}

.qh-card input[type="submit"].js-addtocart:active {
  transform: scale(0.97) !important;
  box-shadow: none !important;
  animation: none !important;
}


/*============================================================================
  SPAN MODAL TRIGGER — productos con variantes (Outlet, GPUs)

  El span tiene clases: btn btn-primary js-modal-open-private js-quickshop-modal-open
  
  Especificidad: (0,3,1) — .qh-card + span tag + .product-item-quick-shop-modal-trigger
  
  El span SÍ puede ser flex container → usamos flex para centrar correctamente.
  El textContent lo cambia el JS a "Sumar al carrito".
============================================================================*/

.qh-card span.product-item-quick-shop-modal-trigger {
  /* Visual — rojo */
  background-color: var(--qh-red) !important;
  background-image: var(--qh-cart-svg) !important;
  background-repeat: no-repeat !important;
  background-position: 13px center !important;
  background-size: 14px 14px !important;

  /* Borde y forma */
  border: none !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  outline: none !important;

  /* Layout */
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 42px !important;
  padding: 9px 12px 9px 34px !important;
  margin-top: 10px !important;
  margin-bottom: 0 !important;

  /* Overflow visible para que el área de clic no se corte */
  overflow: visible !important;
  position: static !important;

  /* Tipografía */
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  text-align: center !important;
  white-space: nowrap !important;
  line-height: 42px !important;  /* centrado vertical via line-height en block */

  /* Interacción — el clic pasa directamente al span */
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
  animation: none !important;
  transform: none !important;
}

/* Texto hijo — no bloquear el clic */
.qh-card span.product-item-quick-shop-modal-trigger .js-open-quickshop-wording {
  color: #fff !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
  background: transparent !important;
  display: inline !important;
  line-height: inherit !important;
  /* SIN pointer-events:none — dejar que el evento pase naturalmente al span padre */
}

@media (hover: hover) {
  .qh-card span.product-item-quick-shop-modal-trigger:hover {
    background-color: var(--qh-red-dark) !important;
    box-shadow: 0 4px 14px var(--qh-red-glow) !important;
  }
}

.qh-card span.product-item-quick-shop-modal-trigger:active {
  transform: scale(0.97) !important;
  box-shadow: none !important;
}


/*============================================================================
  PLACEHOLDER DE FEEDBACK (Agregando... / ¡Listo!)
  
  TN controla este div con inline style. No usar !important en el base state.
============================================================================*/

.qh-card .js-addtocart-placeholder {
  display: none;
  height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.qh-card .js-addtocart-placeholder[style*="display: block"],
.qh-card .js-addtocart-placeholder[style*="display:block"],
.qh-card .js-addtocart-placeholder[style*="display: flex"],
.qh-card .js-addtocart-placeholder[style*="display:flex"],
.qh-card .js-addtocart-placeholder[style*="display: inline-block"],
.qh-card .js-addtocart-placeholder[style*="display:inline-block"] {
  display: block !important;
  height: auto !important;
  overflow: visible !important;
  background-color: var(--qh-red) !important;
  background-image: none !important;
  border-radius: 8px !important;
  border: none !important;
  min-height: 42px !important;
  padding: 9px 12px !important;
  margin-top: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: center !important;
  line-height: 24px !important;
}

.qh-card .js-addtocart-placeholder .d-inline-block {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  display: block !important;
}

.qh-card .js-addtocart-placeholder .js-addtocart-text,
.qh-card .js-addtocart-placeholder .js-addtocart-success,
.qh-card .js-addtocart-placeholder .js-addtocart-adding,
.qh-card .js-addtocart-placeholder .js-addtocart-adding-text {
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}


/*============================================================================
  RESPONSIVE
============================================================================*/

@media (max-width: 767px) {
  .qh-card input[type="submit"].js-addtocart,
  .qh-card span.product-item-quick-shop-modal-trigger {
    font-size: 9.5px !important;
    min-height: 40px !important;
    padding: 8px 10px 8px 31px !important;
    background-position: 10px center !important;
    background-size: 13px 13px !important;
    line-height: 1.3 !important;
  }

  .qh-card span.product-item-quick-shop-modal-trigger {
    line-height: 40px !important;
  }
}

@media (max-width: 359px) {
  .qh-card input[type="submit"].js-addtocart,
  .qh-card span.product-item-quick-shop-modal-trigger {
    font-size: 8.5px !important;
    padding-left: 27px !important;
    background-position: 8px center !important;
    background-size: 12px 12px !important;
  }
}


/*============================================================================
  HOMEPAGE — el botón NO aparece en el swiper del home
============================================================================*/
.section-featured-home .qh-card input[type="submit"].js-addtocart,
.section-featured-home .qh-card span.product-item-quick-shop-modal-trigger,
.section-featured-home .qh-card .js-addtocart-placeholder {
  display: none !important;
}