/* ==========================================================================
   Ficha de producto: galería, resumen, variantes, pestañas, cotización,
   relacionados y barra fija de móvil.
   ========================================================================== */

.sf-ficha__principal {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sf-esp-6);
  margin-bottom: var(--sf-esp-8);
}

/* 45/55 a favor de la columna de compra, que es la proporción del artefacto
   (430 y 525 sobre un lienzo de 1024). La galería no necesita media pantalla;
   el selector de variación sí agradece el ancho. */
@media (min-width: 900px) {
  .sf-ficha__principal { grid-template-columns: 45fr 55fr; gap: var(--sf-esp-12); }
}

/* --- Galería -------------------------------------------------------------- */

.sf-ficha__galeria { position: relative; min-width: 0; }

.sf-ficha__galeria .woocommerce-product-gallery {
  background: var(--sf-superficie-base);
  border: 1px solid var(--sf-borde-sutil);
}

.sf-ficha__galeria .woocommerce-product-gallery__wrapper { margin: 0; }

/* La foto principal, con relación fija y tope de ventana. Antes salía a
   `height: auto` y una foto vertical de 600x880 se pintaba a 854px de alto, más
   que los 751 de ventana útil: no cabía entera en pantalla y la galería medía
   1.142 con las miniaturas. Con relación fija manda el layout, no la foto.
   `contain` y no `cover` porque son fotos de producto: recortar una caña por el
   medio para llenar la caja es peor que dejar aire a los lados. */
/* SIN `aspect-ratio` desde el 02-09-2026. La relacion fija 4/5 obligaba a TODA
   foto a entrar en un marco vertical, y el catalogo esta lleno de fotos
   cuadradas: medido, una foto cuadrada se pintaba a 432x540 dentro de una
   columna de 526, o sea con unos 47px de blanco a cada lado y otro tanto arriba
   y abajo. La foto flotaba en el marco en vez de llenarlo.

   El `max-height` solo ya hacia todo el trabajo que se le pedia a la relacion:
   una foto vertical de 600x880 no se pasa de la ventana, se encoge y se centra.
   Y una cuadrada llena el ancho, que es lo que se queria. */
/* El selector es largo a proposito. WooCommerce trae
   `.woocommerce div.product div.images img { width: 100% }`, que suma tres
   elementos y le gana a cualquier cosa mas corta: con eso puesto, la foto se
   estiraba al ancho de la columna y el `object-fit: contain` la devolvia a su
   proporcion dejando el aire A LOS LADOS. Octava vez que una regla correcta a
   la vista pierde la cascada en este proyecto. */
.woocommerce div.product .sf-ficha__galeria div.images .woocommerce-product-gallery__image img,
.woocommerce div.product .sf-ficha__galeria div.images .woocommerce-product-gallery__wrapper > * img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: var(--sf-ficha-foto-alto-max);
  margin: 0 auto;
  object-fit: contain;
}

.sf-ficha__galeria .woocommerce-product-gallery__wrapper > * {
  max-height: var(--sf-ficha-foto-alto-max);
}

/* Las miniaturas si van a ancho completo de su casilla; la foto grande no, que
   se resuelve arriba con `width: auto`. */
.sf-ficha__galeria .flex-control-thumbs img { width: 100%; height: auto; }

/* UNA fila que corre de lado, no una reja de dos filas. Con ocho fotos la reja
   de cuatro columnas medía 287px y empujaba la galería fuera de la pantalla; en
   una fila mide 110, que es lo que hace `.gal__t` del artefacto. */
.sf-ficha__galeria .flex-control-thumbs {
  display: flex;
  gap: var(--sf-esp-2);
  list-style: none;
  margin: var(--sf-esp-2) 0 0;
  padding: var(--sf-esp-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}

/* WooCommerce le da `width: 25%` a cada miniatura para maquetarlas con floats.
   Acá van en una fila que se desplaza, así que cada una lleva ancho fijo y no
   se encoge. Hay que igualar su selector para ganarle. */
.woocommerce div.product .sf-ficha__galeria div.images .flex-control-thumbs li {
  margin: 0;
  width: var(--sf-ficha-mini);
  flex: none;
  float: none;
  scroll-snap-align: start;
}

/* La miniatura activa se marca con borde marino, no con opacidad: la opacidad
   no se distingue bien. */
.woocommerce div.product .sf-ficha__galeria div.images .flex-control-thumbs img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 2px solid transparent;
  opacity: 1;
  cursor: pointer;
}

.woocommerce div.product .sf-ficha__galeria .flex-control-thumbs img.flex-active,
.woocommerce div.product .sf-ficha__galeria .flex-control-thumbs img:hover { border-color: var(--sf-accion-primaria); }

.sf-ficha__galeria .woocommerce-product-gallery__trigger {
  position: absolute;
  top: var(--sf-esp-3);
  right: var(--sf-esp-3);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--sf-boton-s);
  height: var(--sf-boton-s);
  border: 1px solid var(--sf-borde-medio);
  background: var(--sf-superficie-base);
  color: var(--sf-texto-marca);
  text-decoration: none;
  font-size: var(--sf-cuerpo-m);
}

.sf-ficha__insignia { position: absolute; top: var(--sf-esp-3); left: var(--sf-esp-3); z-index: 2; }

/* --- Resumen -------------------------------------------------------------- */

.sf-ficha__resumen { min-width: 0; }

.sf-ficha__marca {
  display: block;
  margin-bottom: var(--sf-esp-2);
  font-size: var(--sf-etiqueta);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--sf-texto-secundario);
}

/* El título de la ficha tiene su propio tamaño, no el H1 de 44px de la portada:
   en el artefacto (`.fh__t`) mide 25,6 sobre un lienzo de 1024, que son 32 a
   1280. Mismo caso que el título del catálogo. */
.sf-ficha__resumen .product_title {
  margin: 0 0 var(--sf-esp-2);
  font-size: var(--sf-h2);
  line-height: var(--sf-h2-alto);
}

.sf-ficha__subtitulo {
  margin: 0 0 var(--sf-esp-4);
  font-size: var(--sf-cuerpo-s);
  color: var(--sf-texto-secundario);
}

/* WooCommerce pinta el precio de la ficha en verde con un selector muy
   específico; hay que igualarlo para devolverlo al marino de la marca. */
.woocommerce div.product .sf-ficha__resumen .price,
.sf-ficha__resumen .price {
  display: block;
  margin: 0 0 var(--sf-esp-2);
  font-size: var(--sf-h3);
  font-weight: 600;
  color: var(--sf-precio);
  font-variant-numeric: tabular-nums;
}

.woocommerce div.product .sf-ficha__resumen .price del {
  margin-right: var(--sf-esp-2);
  font-size: var(--sf-cuerpo-m);
  font-weight: 400;
  color: var(--sf-precio-tachado);
  opacity: 1;
}

.woocommerce div.product .sf-ficha__resumen .price ins { text-decoration: none; }

.sf-ficha__nota {
  margin: 0 0 var(--sf-esp-4);
  font-size: var(--sf-cuerpo-s);
  color: var(--sf-texto-secundario);
}

.sf-ficha__resumen .stock {
  display: block;
  margin: 0 0 var(--sf-esp-4);
  font-size: var(--sf-cuerpo-s);
  font-weight: 600;
}

.sf-ficha__resumen .stock.in-stock { color: var(--sf-exito); }
.sf-ficha__resumen .stock.out-of-stock { color: var(--sf-accion-desactivada-txt); }

.sf-ficha__resumen .woocommerce-product-details__short-description {
  margin-bottom: var(--sf-esp-6);
  color: var(--sf-texto-secundario);
}

/* --- Formulario de compra ------------------------------------------------- */

.sf-ficha__resumen form.cart {
  display: flex;
  flex-direction: column;
  gap: var(--sf-esp-3);
  margin-bottom: var(--sf-esp-6);
}

/* Nadie compra tres marcos iguales de una: la cantidad se ajusta en el
   carrito, si hace falta. */
.sf-ficha__resumen form.cart .quantity { display: none; }

.sf-ficha .sf-ficha__resumen form.cart .button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--sf-boton-l);
  padding: 0 var(--sf-esp-6);
  border: 1px solid var(--sf-accion-acento);
  border-radius: var(--sf-radio);
  background: var(--sf-accion-acento);
  color: var(--sf-accion-inversa);
  font-family: var(--sf-fuente-ui);
  font-size: var(--sf-cuerpo-m);
  font-weight: 600;
  cursor: pointer;
}

.sf-ficha .sf-ficha__resumen form.cart .button:hover {
  background: var(--sf-accion-acento-hover);
  border-color: var(--sf-accion-acento-hover);
}

/* Muestras de color y variantes: 46px y siempre con el nombre al lado. Nadie
   distingue «grafito» de «negro mate» en un círculo. */
.sf-ficha__resumen .variations { width: 100%; }

.sf-ficha__resumen .variations th,
.sf-ficha__resumen .variations td {
  display: block;
  padding: 0;
  border: 0;
}

.sf-ficha__resumen .variations th {
  margin-bottom: var(--sf-esp-2);
  font-size: var(--sf-etiqueta);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--sf-texto-secundario);
}

.sf-ficha__resumen .variations td { margin-bottom: var(--sf-esp-4); }

.sf-ficha__resumen .variations select {
  width: 100%;
  height: var(--sf-campo-alto);
  padding: 0 var(--sf-esp-3);
  border: 1px solid var(--sf-borde-campo);
  border-radius: var(--sf-radio);
  background: var(--sf-superficie-base);
  font-family: var(--sf-fuente-ui);
  font-size: var(--sf-cuerpo-m);
}

/* --- Modal ---------------------------------------------------------------- */

.sf-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sf-esp-4);
}

.sf-modal[hidden] { display: none; }

.sf-modal__fondo {
  position: absolute;
  inset: 0;
  background: var(--sf-velo);
}

.sf-modal__caja {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - var(--sf-esp-8));
  display: flex;
  flex-direction: column;
  background: var(--sf-superficie-base);
  box-shadow: var(--sf-sombra-3);
}

.sf-modal__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sf-esp-3);
  padding: var(--sf-esp-4) var(--sf-esp-6);
  border-bottom: 1px solid var(--sf-borde-sutil);
}

.sf-modal__titulo { margin: 0; font-size: var(--sf-h4); line-height: var(--sf-h4-alto); }

.sf-modal__cerrar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--sf-alto-tactil);
  height: var(--sf-alto-tactil);
  margin-right: calc(var(--sf-esp-3) * -1);
  padding: 0;
  border: 0;
  background: none;
  color: var(--sf-texto-secundario);
  cursor: pointer;
}

.sf-modal__cerrar:hover { color: var(--sf-texto-marca); }

.sf-modal__cuerpo {
  flex: 1;
  overflow-y: auto;
  padding: var(--sf-esp-4) var(--sf-esp-6);
}

.sf-modal__cuerpo > p:first-child { margin-top: 0; color: var(--sf-texto-secundario); }

/* El pie no scrollea con el cuerpo: la salida tiene que estar siempre a mano. */
.sf-modal__pie {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--sf-esp-2);
  padding: var(--sf-esp-4) var(--sf-esp-6) var(--sf-esp-6);
  border-top: 1px solid var(--sf-borde-sutil);
}

.sf-modal__principal { width: 100%; }

.sf-modal__secundarias { display: flex; gap: var(--sf-esp-2); }
.sf-modal__secundarias .sf-boton { flex: 1; }

@media (max-width: 480px) {
  .sf-modal { padding: 0; align-items: flex-end; }
  .sf-modal__caja { max-width: none; max-height: 92vh; }
  .sf-modal__secundarias { flex-direction: column; }
}

/* --- Promesas y ayuda ----------------------------------------------------- */

.sf-ficha__promesas {
  list-style: none;
  margin: 0 0 var(--sf-esp-4);
  padding: var(--sf-esp-4) 0;
  border-block: 1px solid var(--sf-borde-sutil);
  display: flex;
  flex-direction: column;
  gap: var(--sf-esp-3);
}

.sf-ficha__promesas li {
  display: flex;
  align-items: flex-start;
  gap: var(--sf-esp-3);
  font-size: var(--sf-cuerpo-s);
  color: var(--sf-texto-secundario);
}

.sf-ficha__promesas .sf-icono { flex: none; color: var(--sf-acento-texto); }
.sf-ficha__promesas strong { color: var(--sf-texto-principal); }

.sf-ficha__ayuda {
  display: flex;
  align-items: center;
  gap: var(--sf-esp-3);
  padding: var(--sf-esp-3) var(--sf-esp-4);
  background: var(--sf-superficie-bloque);
  border: 1px solid var(--sf-borde-sutil);
  font-size: var(--sf-cuerpo-s);
  color: var(--sf-texto-secundario);
  text-decoration: none;
}

.sf-ficha__ayuda:hover { border-color: var(--sf-accion-primaria); color: var(--sf-texto-secundario); }
.sf-ficha__ayuda .sf-icono { flex: none; color: var(--sf-acento-texto); }
.sf-ficha__ayuda strong { display: block; color: var(--sf-texto-principal); }

/* --- Pestañas ------------------------------------------------------------- */

/* Las pestañas nativas vienen con fondo, esquinas redondeadas y sombras. Acá
   son solo texto con un subrayado marino, así que hay que igualar los
   selectores de WooCommerce para anular todo eso. */
.woocommerce div.product .woocommerce-tabs { margin-bottom: var(--sf-esp-8); }

.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  gap: var(--sf-esp-6);
  flex-wrap: wrap;
  list-style: none;
  margin: 0 0 var(--sf-esp-6);
  padding: 0;
  border-bottom: 1px solid var(--sf-borde-medio);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none; display: none; }

/* `.active` va en el selector porque WooCommerce le pone a la pestaña abierta
   un fondo blanco con bordes redondeados y sombra, que sobre esta superficie
   se veía como un recuadro pegado encima del panel. */
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: var(--sf-esp-3) 0;
  border-bottom: 2px solid transparent;
  color: var(--sf-texto-secundario);
  font-size: var(--sf-cuerpo-m);
  font-weight: 500;
  text-decoration: none;
  text-shadow: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  border-bottom-color: var(--sf-accion-primaria);
  color: var(--sf-texto-marca);
  font-weight: 600;
}

/* La descripcion y la caja de datos, lado a lado.
   El texto sigue acotado a 720px porque esa es la medida de lectura y no se
   toca; lo que cambia es que los ~520px que quedaban en blanco a su derecha
   ahora tienen contenido. Ver `sf_ficha_vistazo()`. */
@media (min-width: 900px) {
  .woocommerce div.product .woocommerce-tabs {
    display: grid;
    grid-template-columns: minmax(0, 720px) minmax(240px, 1fr);
    column-gap: var(--sf-esp-6);
    align-items: start;
  }

  .woocommerce div.product .woocommerce-tabs ul.tabs { grid-column: 1 / -1; }
  .woocommerce div.product .woocommerce-tabs .panel { grid-column: 1; grid-row: 2; }
  .woocommerce div.product .woocommerce-tabs .sf-vistazo { grid-column: 2; grid-row: 2; }
}

.woocommerce-tabs .panel { max-width: 720px; color: var(--sf-texto-secundario); }
.woocommerce-tabs .panel h2 { display: none; }
.woocommerce-tabs .shop_attributes th { width: 40%; color: var(--sf-texto-principal); }

/* La descripción es texto corrido y necesita la misma medida que las guías:
   a 720px daba 80 caracteres por línea, y lo legible son 65 a 75. La tabla de
   medidas no se toca, que ahí el ancho lo pide el contenido. */
#tab-description { max-width: 65ch; }
#tab-description p { margin: 0 0 var(--sf-esp-4); }
#tab-description p:last-child { margin-bottom: 0; }

/* Las especificaciones no son prosa. Llegan como una línea por párrafo
   («<Blanks> ...», «<Guides> ...») y con el margen de prosa cada línea costaba
   41,6px: 25,6 de interlineado más 16 de margen. Una línea corta que termina en
   dos puntos o en un valor no abre párrafo nuevo, así que van juntas. */
#tab-description p:has(+ p) { margin-bottom: var(--sf-esp-2); }

/* El video, y cualquier incrustado. WooCommerce deja el `<iframe>` de YouTube
   con `width="1280" height="720"` en los atributos y nadie le puso nunca una
   regla responsive, así que desbordaba su columna. La caja de proporción va en
   el envoltorio de WordPress cuando existe, y el `iframe` suelto se ata igual
   por si el contenido viene pegado a mano. */
.woocommerce-tabs .panel iframe,
.woocommerce-tabs .panel video,
.woocommerce-tabs .panel embed,
.woocommerce-tabs .panel object {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}

.woocommerce-tabs .panel .wp-block-embed__wrapper,
.woocommerce-tabs .panel .wp-embed-aspect-16-9 { max-width: 100%; }

/* El mismo tope en el resumen, por si un producto trae un incrustado en el
   gancho: ahí el ancho es todavía menor. */
.sf-ficha__resumen iframe,
.sf-ficha__resumen video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* En móvil las pestañas no se parten en dos filas: se deslizan de lado. */
@media (max-width: 599px) {
  .woocommerce div.product .woocommerce-tabs ul.tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: var(--sf-esp-4);
  }

  .woocommerce div.product .woocommerce-tabs ul.tabs li { flex: none; }
  .woocommerce div.product .woocommerce-tabs ul.tabs li a { white-space: nowrap; }
}

/* --- Ficha técnica -------------------------------------------------------- */

/* El panel general mide 720px porque la descripción es texto corrido. Esta
   tabla trae hasta 13 columnas y ahí el ancho lo pide el contenido. */
#tab-sf_ficha_tecnica { max-width: none; }

/* La tabla la escribe el cliente pegándola desde una planilla, así que llega
   con más columnas de las que caben en cualquier pantalla. Se desplaza dentro
   de su caja: si desbordara, el que se movería de lado es el documento entero.
   El alto y el ancho fijos que trae en línea se los saca `sf_ficha_limpiar_medidas()`. */
.sf-ficha-tecnica {
  overflow-x: auto;
  margin: 0;
  border: 1px solid var(--sf-borde-sutil);
  border-radius: var(--sf-radio);
}

.sf-ficha-tecnica table {
  width: 100%;
  min-width: 720px;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  font-size: var(--sf-cuerpo-s);
}

.sf-ficha-tecnica td,
.sf-ficha-tecnica th {
  padding: var(--sf-esp-2) var(--sf-esp-3);
  border: 0;
  border-bottom: 1px solid var(--sf-borde-sutil);
  color: var(--sf-texto-secundario);
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}

/* La tabla del cliente no trae `thead`: la fila de títulos son `td` dentro del
   `tbody`, así que la cabecera se marca por posición. */
.sf-ficha-tecnica tr:first-child td,
.sf-ficha-tecnica thead th {
  position: sticky;
  top: 0;
  background: var(--sf-superficie-hundida);
  color: var(--sf-texto-principal);
  font-weight: 600;
  white-space: normal;
}

.sf-ficha-tecnica tr:last-child td { border-bottom: 0; }

/* --- Relacionados --------------------------------------------------------- */

.sf-relacionados { padding-block: 0 var(--sf-esp-8); }
.sf-relacionados h2 { margin-bottom: var(--sf-esp-6); }

/* --- Barra fija de compra en móvil ---------------------------------------- */

.sf-barra-compra { display: none; }

@media (max-width: 899px) {
  .sf-barra-compra {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sf-esp-4);
    padding: var(--sf-esp-3) var(--sf-esp-4);
    background: var(--sf-superficie-base);
    border-top: 1px solid var(--sf-borde-medio);
    box-shadow: var(--sf-sombra-2);
  }

  .sf-barra-compra__precio {
    font-size: var(--sf-h5);
    font-weight: 600;
    color: var(--sf-precio);
    font-variant-numeric: tabular-nums;
  }

  .sf-barra-compra__precio del { display: none; }
  .sf-barra-compra__precio ins { text-decoration: none; }

  /* La ficha reserva el alto de la barra para que el pie no quede debajo. */
  .single-product .sf-pie { padding-bottom: 72px; }
}


/* --- «De un vistazo»: la ficha de datos al costado de la descripcion -------- */

.sf-vistazo {
  padding: var(--sf-esp-5);
  background: var(--sf-superficie-bloque);
  border: 1px solid var(--sf-borde-sutil);
  border-radius: var(--sf-radio);
}

.sf-vistazo__titulo {
  margin: 0 0 var(--sf-esp-3);
  font-family: var(--sf-fuente-ui);
  font-size: var(--sf-cuerpo-m-tam);
  font-weight: 700;
  color: var(--sf-texto-principal);
}

.sf-vistazo__lista { display: grid; gap: 0; margin: 0; }

.sf-vistazo__fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sf-esp-3);
  padding: var(--sf-esp-2) 0;
  font-size: var(--sf-cuerpo-s-tam);
  line-height: var(--sf-alto-compacto);
}

.sf-vistazo__fila + .sf-vistazo__fila { border-top: 1px solid var(--sf-borde-sutil); }

.sf-vistazo__fila dt { color: var(--sf-texto-secundario); }

.sf-vistazo__fila dd {
  margin: 0;
  text-align: right;
  font-weight: 600;
  color: var(--sf-texto-principal);
}

.sf-vistazo__pie {
  display: flex;
  align-items: flex-start;
  gap: var(--sf-esp-2);
  margin: var(--sf-esp-4) 0 0;
  padding-top: var(--sf-esp-3);
  border-top: 1px solid var(--sf-borde-sutil);
  font-size: var(--sf-etiqueta-tam);
  line-height: var(--sf-alto-compacto);
  color: var(--sf-texto-secundario);
}

.sf-vistazo__pie svg { flex: none; color: var(--sf-acento-texto); }

/* En movil la caja va debajo del texto, no al lado, y separada de el. */
@media (max-width: 899px) {
  .sf-vistazo { margin-top: var(--sf-esp-5); }
}


/* --- Los dos botones del resumen, ordenados por jerarquia ------------------ */

/* «Elige numero» salia gris muerto (#E1E7EA sobre #5A666D) al lado del selector
   de cantidad, y se leia como un boton roto en vez de como un boton esperando.
   Con el fondo del sistema y el texto en acento sigue estando claramente
   apagado, pero pertenece a la pagina. Contraste 7,0:1. */
.woocommerce div.product .sf-variaciones__comprar[disabled],
.woocommerce div.product .sf-variaciones__comprar:disabled {
  background: var(--sf-superficie-bloque);
  color: var(--sf-acento-texto);
  border: 1px dashed var(--sf-borde-medio);
  cursor: not-allowed;
}

/* «Guardar» ocupaba los 642px de la columna con contorno macizo, o sea el mismo
   peso visual que la accion principal que tiene justo encima. Es una accion
   secundaria y ahora se ve como tal: sin caja, alineada a la izquierda. */
.sf-ficha__guardar { margin-top: var(--sf-esp-3); }

.sf-ficha__guardar .sf-favorito--texto {
  width: auto;
  min-height: 0;
  padding: var(--sf-esp-1) 0;
  border: 0;
  background: none;
  color: var(--sf-texto-secundario);
  font-size: var(--sf-cuerpo-s-tam);
  font-weight: 500;
}

.sf-ficha__guardar .sf-favorito--texto:hover,
.sf-ficha__guardar .sf-favorito--texto:focus-visible {
  background: none;
  color: var(--sf-acento-texto);
  text-decoration: underline;
}