/* ==========================================================
   AlphaStock - bloque referencia / disponibilidad (ficha de producto)
   Se carga desde la plantilla del hook, solo en la ficha de producto.
   Reglas movidas desde custom.css del tema tdrnew26.
   ========================================================== */

/* Referencia + estado */
.tdr-pdp-refstock {
  display: flex;
  align-items: center;
  gap: var(--alpha-ui-space-lg, 1.5rem);
  padding: var(--alpha-ui-space-sm, 0.75rem) 0;
}

.tdr-pdp-refstock .product-reference {
  color: var(--alpha-ui-color-text-soft, #5f6773);
  font-size: var(--alpha-ui-font-size-sm, 0.8125rem);
}

.tdr-pdp-stock-ok {
  color: var(--alpha-ui-color-success, #168753);
  font-weight: var(--alpha-ui-font-weight-bold, 700);
}

.tdr-pdp-stock-out {
  color: var(--alpha-ui-color-warning-strong, #d98324);
  font-weight: var(--alpha-ui-font-weight-bold, 700);
}

/* Recuadro de disponibilidad (visible también en móvil) */
.tdr-pdp-availability2 {
  display: flex;
  align-items: center;
  gap: var(--alpha-ui-space-sm, 0.75rem);
  margin: var(--alpha-ui-space-md, 1rem) 0;
  padding: var(--alpha-ui-space-md, 1rem) var(--alpha-ui-space-lg, 1.5rem);
  border: var(--alpha-ui-border-width-thin, 1px) solid var(--alpha-ui-color-border-strong, #e3e7ec);
  border-radius: var(--alpha-ui-radius-md, 16px);
  background: var(--alpha-ui-color-white, #ffffff);
  box-shadow: var(--alpha-ui-shadow-xs, 0 1px 2px rgba(15, 23, 42, .03));
  color: var(--alpha-ui-color-text, #161616);
  font-size: var(--alpha-ui-font-size-sm, 0.8125rem);
  line-height: var(--alpha-ui-line-height-relaxed, 1.55);
}

.tdr-pdp-availability2 i {
  font-size: var(--alpha-ui-font-size-2xl, 1.5rem);
  line-height: var(--alpha-ui-line-height-none, 1);
  color: var(--alpha-ui-color-text, #161616);
}

@media (max-width: 767.98px) {
  .tdr-pdp-refstock {
    padding: 5px 0 0 !important;
  }
}

/* ---------- Spinner de carga ---------- */
.alphastock {
  position: relative;
}

/* Hueco mientras llega la primera carga, para evitar saltos */
.alphastock .alphastock-content:empty {
  min-height: 3rem;
}

.alphastock .alphastock-content {
  transition: opacity .2s ease;
}

.alphastock .alphastock-spinner {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.alphastock.is-loading .alphastock-content {
  opacity: .35;
}

.alphastock.is-loading .alphastock-spinner {
  display: flex;
}

.alphastock .alphastock-spinner span {
  width: 22px;
  height: 22px;
  border: 3px solid var(--alpha-ui-color-border-strong, #e3e7ec);
  border-top-color: var(--alpha-ui-color-primary, #e10613);
  border-radius: 50%;
  animation: alphastock-spin .7s linear infinite;
}

@keyframes alphastock-spin {
  to { transform: rotate(360deg); }
}