/* =====================================================================
   Rinko — Formulario de compra de productos VARIABLES (genérico)
   2026-06-06 (#171). Aplica a todos los productos variables del sitio.
   Objetivo: bloque de selección compacto, precio pegado a las variaciones,
   CTAs claros, metadata discreta, mobile en una columna sin overflow.
   ===================================================================== */

/* ---- base / anti-overflow ---- */
.single-product form.cart.variations_form,
.single-product form.cart.variations_form * { box-sizing: border-box; }
.single-product form.cart.variations_form { max-width: 100%; }
.single-product div.product,
.single-product .summary { min-width: 0; max-width: 100%; }

/* ---- tabla de variaciones -> grid compacto, sin fondo pesado ---- */
.single-product form.variations_form table.variations {
  display: block; width: 100%; margin: 16px 0 2px !important; padding: 0;
  border: none; background: transparent; border-collapse: collapse;
}
/* mobile-first: 1 columna; en desktop 2 columnas parejas lado a lado a TODO el ancho */
.single-product form.variations_form table.variations tbody {
  display: grid; width: 100%; grid-template-columns: 1fr; gap: 12px;
}
@media (min-width: 768px) {
  .single-product form.variations_form table.variations tbody {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.single-product form.variations_form table.variations tr {
  display: flex; flex-direction: column; gap: 6px;
  border: none; background: transparent; margin: 0; padding: 0;
}
/* !important: el theme mete `.elementor-add-to-cart.elementor-product-variable .variations td
   { padding: 10px 0 !important; line-height: 24px !important }` que inflaba cada fila */
.single-product form.variations_form table.variations th.label,
.single-product form.variations_form table.variations td.value {
  display: block; width: 100%; padding: 0 !important; border: none; background: transparent;
  text-align: left; line-height: normal !important;
}
.single-product form.variations_form table.variations th.label,
.single-product form.variations_form table.variations th.label label {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #64748b; margin: 0; line-height: 1.2;
}
/* !important obligatorio: Woostify trae
   `.elementor-add-to-cart.elementor-product-variable .variations select
    { width:75% !important; height:40px !important; }`
   (por eso los selects salían angostos y con la "g" cortada en desktop) */
.single-product form.variations_form table.variations td.value select {
  width: 100% !important; min-width: 100% !important; max-width: 100% !important;
  height: 54px !important; padding: 0 30px 0 14px !important;
  font-size: 15px; line-height: normal; color: #0f172a;
  background-color: #fff; border: 1px solid #e5e7eb !important; border-radius: 10px;
}
.single-product form.variations_form table.variations td.value select:focus {
  border-color: #2563eb; outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

/* ---- "Limpiar": link chico, alineado, sin romper la grilla ---- */
.single-product form.variations_form .reset_variations {
  display: inline-block; float: none; margin: 6px 0 0; padding: 0; align-self: flex-start;
  font-size: 12px; font-weight: 600; color: #94a3b8; text-decoration: none;
  background: transparent; border: none; border-bottom: 1px dashed #cbd5e1;
  border-radius: 0; line-height: 1.3;
}
.single-product form.variations_form .reset_variations:hover { color: #475569; border-color: #94a3b8; }

/* ---- precio de la variación: lo muestra el rinko-price-box (widget custom), no el form ----
   (el theme mete .single_variation{margin-bottom:40px} — comprimido acá) */
.single-product form.variations_form .single_variation_wrap { margin-top: 0; }
.single-product form.variations_form .woocommerce-variation { padding: 0; margin: 0 0 8px !important; }
.single-product form.variations_form .woocommerce-variation-price { display: none; }
.single-product form.variations_form .woocommerce-variation-availability { font-size: 12px; color: #64748b; margin-top: 2px; }
.single-product form.variations_form .woocommerce-variation-availability p { margin: 0; }
.single-product form.variations_form .woocommerce-variation-description { font-size: 13px; color: #475569; }

/* ---- fila de compra: cantidad + carrito + comprar ahora; WhatsApp full-width secundario ---- */
.single-product form.variations_form .woocommerce-variation-add-to-cart {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin-top: 4px;
}
.single-product form.variations_form .woocommerce-variation-add-to-cart .quantity {
  flex: 0 0 auto; margin: 0; float: none;
}
.single-product form.variations_form .quantity .qty {
  height: 48px; width: 84px; max-width: 100%; text-align: center;
  border: 1px solid #e5e7eb; border-radius: 10px; font-size: 14px;
}
.single-product form.variations_form .single_add_to_cart_button {
  order: 1; flex: 1 1 200px; min-width: 180px; max-width: 100%;
  height: 48px; margin: 0; border-radius: 10px; font-weight: 700; letter-spacing: .01em;
}
.single-product form.variations_form .wc-buy-now-btn {
  order: 2; flex: 1 1 170px; min-width: 160px; max-width: 100%;
  height: 48px; margin: 0; border-radius: 10px; font-weight: 700;
  background: #D11414; color: #fff;
}
.single-product form.variations_form .wc-buy-now-btn:hover { background: #b01111; }
.single-product form.variations_form .wa-order-class {
  order: 3; display: block; flex: 1 1 100%; width: 100%; margin: 2px 0 0; text-decoration: none;
}
/* el botón lleva también la clase single_add_to_cart_button (se la agrega el plugin) y
   hay un fix viejo inline en el widget de precios (display:block) — especificidad alta
   (form.cart.variations_form + .wa-order-class) + !important para que mande esta regla */
.single-product form.cart.variations_form .wa-order-class .wa-order-button {
  display: flex !important; align-items: center; justify-content: center;
  width: 100%; height: 48px; margin: 0; border-radius: 10px; font-weight: 700;
  padding: 0 22px !important;
  background: #f0fdf4; color: #15803d; border: 1.5px solid #16a34a;
  white-space: normal; line-height: 1.2;
}
.single-product form.variations_form .wa-order-class .wa-order-button:hover { background: #dcfce7; }

/* ---- metadata técnica: bloque discreto, separado del CTA ---- */
.single-product .summary .product_meta {
  display: block; margin-top: 22px; padding-top: 14px;
  border-top: 1px solid #eee; font-size: 12px; line-height: 1.8; color: #6b7280;
}
.single-product .summary .product_meta > span { display: block; }
.single-product .summary .product_meta a { color: #6b7280; text-decoration: underline; }

/* ---- mobile: una sola columna, sin overflow, full width ---- */
@media (max-width: 767px) {
  .single-product div.product { overflow-x: clip; }
  .single-product form.variations_form table.variations tbody { grid-template-columns: 1fr; gap: 10px; }
  .single-product form.variations_form .woocommerce-variation-price .price,
  .single-product form.variations_form .woocommerce-variation-price .price .woocommerce-Price-amount { font-size: 24px; }
  .single-product form.variations_form .woocommerce-variation-add-to-cart { flex-direction: column; align-items: stretch; }
  .single-product form.variations_form .woocommerce-variation-add-to-cart .quantity { width: 100%; }
  .single-product form.variations_form .quantity .qty { width: 100%; }
  .single-product form.variations_form .single_add_to_cart_button,
  .single-product form.variations_form .wc-buy-now-btn { flex: none; width: 100%; min-width: 0; }
  .single-product form.variations_form .wa-order-class { margin-top: 0; }
}