/*
 * Botones del probador y del asesor de tallas para Woo/Presta.
 *
 * Equivalente a los estilos que vton-button.liquid pinta en línea (líneas 14-18,
 * 20-53 y 122-200) más su <style> de fila. Los ajustes del comerciante llegan
 * como variables CSS que el servidor escribe en :root (plugin/módulo):
 *
 *   --stilaro-btn-bg      color de fondo / borde   (defecto #000000)
 *   --stilaro-btn-text    color del texto          (defecto #ffffff)
 *   --stilaro-btn-pad     padding vertical en px   (defecto 14; el horizontal es el doble)
 *   --stilaro-btn-fs      tamaño de letra en px    (defecto 13)
 *   --stilaro-btn-w       ancho: 100% o auto       (defecto 100%)
 *   --stilaro-btn-mt / --stilaro-btn-mb   margen superior / inferior en px (defecto 16)
 *
 * Los colores/tamaños llevan !important porque los temas de WordPress y
 * PrestaShop estilan `button` con más especificidad que una clase; en Shopify lo
 * resuelven los estilos en línea. `display` y `width` NO lo llevan: el JS del
 * núcleo los oculta/revela con estilos en línea (modal.js, theme.js).
 */

/* Calzado: la fila espera invisible a que el JS conozca la config de la tienda
   (modo zapatilla, skin de botones). La revela modal.js (revealButtonRows). */
.stilaro-buttons-row:has(> .stilaro-sizing-button[data-stilaro-footwear]) {
  visibility: hidden;
}

.stilaro-vton-container {
  margin: var(--stilaro-btn-mt, 16px) 0 var(--stilaro-btn-mb, 16px) 0;
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
}

.stilaro-buttons-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.stilaro-vton-button,
.stilaro-sizing-button {
  padding: var(--stilaro-btn-pad, 14px) calc(var(--stilaro-btn-pad, 14px) * 2) !important;
  border-radius: 0 !important;
  border: 1px solid var(--stilaro-btn-bg, #000000) !important;
  font-size: var(--stilaro-btn-fs, 13px) !important;
  font-family: inherit !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  cursor: pointer;
  width: var(--stilaro-btn-w, 100%);
  margin: 0;
  box-shadow: none;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.stilaro-vton-button {
  background-color: var(--stilaro-btn-bg, #000000) !important;
  color: var(--stilaro-btn-text, #ffffff) !important;
}

.stilaro-vton-button:hover {
  background-color: transparent !important;
  color: var(--stilaro-btn-bg, #000000) !important;
}

.stilaro-sizing-button {
  background-color: transparent !important;
  color: var(--stilaro-btn-bg, #000000) !important;
}

.stilaro-sizing-button:hover {
  background-color: var(--stilaro-btn-bg, #000000) !important;
  color: var(--stilaro-btn-text, #ffffff) !important;
}

.stilaro-buttons-row .stilaro-vton-button,
.stilaro-buttons-row .stilaro-sizing-button {
  flex: 1;
  text-align: center;
  justify-content: center;
  line-height: 1.2;
}

.stilaro-buttons-row .stilaro-sizing-button {
  display: inline-flex;
  align-items: center;
}

/* Móvil: apilar en vertical para que cada botón quede a una sola línea */
@media (max-width: 749px) {
  .stilaro-buttons-row {
    flex-direction: column;
  }
}