/* =========================================================
   STOCKX BOX (CUADRO) - CSS LIMPIO (SIN DUPLICADOS)
   ========================================================= */

#ms-stockx-box,
.ms-stockx-box{
  background: #fff;
  border: 1px solid #e7e7e7;
  border-radius: 6px;
  padding: 16px;
  margin-top: 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);

  /* Clave para que NADA “se salga” del borde (incluye botón) */
  overflow: hidden;
}

/* Header (precio + urgencia) */
.ms-stockx-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.ms-label{
  font-size: 14px;
  margin-bottom: 6px;
  color: #333;
}

/* Precio grande */
.ms-stockx-price,
.ms-stockx-price .amount{
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  color: #111;
}

/* Urgencia */
.ms-stockx-urgency{
  font-size: 14px;
  font-weight: 600;
  color: #111;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Zona CTA (donde cae el bloque real de Woo y el botón) */
.ms-stockx-cta{
  margin-top: 0px;
  padding-top: 0px;
  border-top: 1px solid #fff;
}

/* Quitar márgenes/paddings raros que mete el theme */
#ms-stockx-box .woocommerce-variation-add-to-cart,
#ms-stockx-box .variations_button,
.ms-stockx-box .woocommerce-variation-add-to-cart,
.ms-stockx-box .variations_button{
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

/* Botón full width dentro de la caja */
#ms-stockx-box .single_add_to_cart_button,
.ms-stockx-box .single_add_to_cart_button{
  width: 100% !important;
  display: block !important;
  height: 60px;

  border-radius: 999px !important;
  padding: 14px 18px !important;
  font-size: 18px !important;
  font-weight: 800 !important;

  /* Por si el theme le aplica transform/posicion */
  position: relative !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  margin: 0 !important;
}

/* Oculta el stock/availability nativo SOLO dentro de la caja */
#ms-stockx-box .woocommerce-variation-availability,
#ms-stockx-box .stock,
#ms-stockx-box p.stock,
.ms-stockx-box .woocommerce-variation-availability,
.ms-stockx-box .stock,
.ms-stockx-box p.stock{
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Responsive */
@media (max-width: 768px){
  .ms-stockx-price,
  .ms-stockx-price .amount{
    font-size: 26px;
  }
}

/* =========================================================
   TABLA DE VARIACIONES (Talla US/EUR, Cm, Color) estilo “card”
   ========================================================= */

/* Encierra la tabla completa */
.woocommerce div.product form.cart table.variations{
  width: 100%;
  border: 1px solid #e7e7e7 !important;
  border-radius: 6px;
  overflow: hidden;              /* clave para que respete el radio */
  border-collapse: separate;     /* necesario para radios */
  border-spacing: 0;
  margin: 0 0 14px 0;            /* separa del bloque de precio */
  background: #fff;
  text-align: left;
}

/* Cada fila */
.woocommerce div.product form.cart table.variations tr{
  border: 0;
}

/* “Celdas” (label y value) */
.woocommerce div.product form.cart table.variations th,
.woocommerce div.product form.cart table.variations td{
  padding: 12px 14px !important;
  vertical-align: middle;
  border: 0 !important;
}

/* Línea separadora entre filas */
.woocommerce div.product form.cart table.variations tr + tr th,
.woocommerce div.product form.cart table.variations tr + tr td{
  border-top: 1px solid #efefef !important;
}

/* Colores alternados por fila (2 tonos) */
.woocommerce div.product form.cart table.variations tr:nth-child(odd){
  background: #ffffff;
}
.woocommerce div.product form.cart table.variations tr:nth-child(even){
  background: #f7f7f7;
}

/* Estilo de la etiqueta a la izquierda */
.woocommerce div.product form.cart table.variations th.label label{
  font-weight: 800;
  color: #111;
  margin: 0;
}

/* Columna derecha (inputs) alineada y “apretada” */
.woocommerce div.product form.cart table.variations td.value{
  text-align: -webkit-center;
  white-space: nowrap;
}

/* Inputs (select / swatches / botones) adentro más prolijos */
.woocommerce div.product form.cart table.variations td.value select{
  max-width: 180px;
  width: auto;
}

/* Si tu plugin de variaciones usa swatches (color en circulo) */
.woocommerce div.product form.cart table.variations td.value .variable-item,
.woocommerce div.product form.cart table.variations td.value .swatch{
  margin-left: 6px;
}

/* En móvil: que no se rompa si queda muy ajustado */
@media (max-width: 768px){
  .woocommerce div.product form.cart table.variations th,
  .woocommerce div.product form.cart table.variations td{
    padding: 10px 12px !important;
  }
  .woocommerce div.product form.cart table.variations td.value{
    text-align: left;
    white-space: normal;
  }
}


/* ===============================
   CTA: ordenar qty + botón dentro de la caja
   =============================== */
#ms-stockx-box .woocommerce-variation-add-to-cart,
.ms-stockx-box .woocommerce-variation-add-to-cart{
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;           /* separación qty vs botón */
  width: 100% !important;
}

/* Centrar el selector de cantidad */
#ms-stockx-box .quantity,
.ms-stockx-box .quantity{
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 !important;
}

/* Que el input qty no quede gigante */
#ms-stockx-box .quantity .qty,
.ms-stockx-box .quantity .qty{
  width: 110px !important;
  text-align: center !important;
}

/* Ocultar el precio/subtotal extra que aparece al lado del qty dentro de la caja */
#ms-stockx-box .woocommerce-variation-add-to-cart .price,
#ms-stockx-box .woocommerce-variation-add-to-cart .woocommerce-Price-amount,
#ms-stockx-box .woocommerce-variation-add-to-cart .woocommerce-variation-price,
.ms-stockx-box .woocommerce-variation-add-to-cart .price,
.ms-stockx-box .woocommerce-variation-add-to-cart .woocommerce-Price-amount,
.ms-stockx-box .woocommerce-variation-add-to-cart .woocommerce-variation-price{
  display: none !important;
}


/* Ocultar cualquier “precio suelto” que quede DENTRO de la caja (sin tocar el precio principal) */
#ms-stockx-box .woocommerce-variation,
#ms-stockx-box .single_variation,
#ms-stockx-box .single_variation_wrap .woocommerce-variation,
#ms-stockx-box .woocommerce-variation-price,
#ms-stockx-box .woocommerce-variation-availability,
#ms-stockx-box p.price,
#ms-stockx-box span.price,
#ms-stockx-box .price:not(.ms-stockx-price),
#ms-stockx-box .woocommerce-Price-amount{
  display: none !important;
}

/* Asegura que TU precio (ms-stockx-price) sí se vea */
#ms-stockx-box .ms-stockx-price,
#ms-stockx-box .ms-stockx-price *{
  display: inline !important;
}
#ms-stockx-box .ms-stockx-price{
  display: block !important;
}

/* ===========================
   FIX: volver a mostrar el precio principal
   =========================== */

/* 1) Asegura SIEMPRE visible tu bloque de precio */
#ms-stockx-box #ms-stockx-price,
#ms-stockx-box #ms-stockx-price *{
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#ms-stockx-box #ms-stockx-price{
  display: block !important;
}

/* 2) Oculta SOLO precios/variación que NO sean tu precio principal */
#ms-stockx-box .woocommerce-variation-price,
#ms-stockx-box .single_variation .price,
#ms-stockx-box .woocommerce-variation .price,
#ms-stockx-box .woocommerce-variation p.price,
#ms-stockx-box .woocommerce-variation span.price{
  display: none !important;
}

/* 3) IMPORTANTE: NO ocultar .woocommerce-Price-amount globalmente (si lo hiciste, anúlalo aquí) */
#ms-stockx-box .woocommerce-Price-amount{
  display: inline !important;
}