/* FLO — estilos de la capa de comercio.
   Reglas propias de estado: marcadores de carga, conmutación de los bloques
   [condition=...] según las clases que fija el script, y detalles del campo de
   cantidad y del botón de borrar del carrito. Sin dependencias externas.
   Especificidad deliberadamente baja: cualquier clase de Webflow sigue ganando. */

/* ------------------------------------------------------- animaciones de carga */

@keyframes skeleton-loading {
  0%   { background-color: var(--skeleton-loading-start, hsl(200, 20%, 80%)); }
  to   { background-color: var(--skeleton-loading-end, hsl(200, 20%, 95%)); }
}

@keyframes blur-loading {
  0%   { filter: blur(100px); }
  50%  { filter: blur(50px); }
  to   { filter: blur(100px); }
}

/* Marcadores de posición mientras Shopify responde. El script retira el
   atributo `skeleton` al rellenar cada elemento. */
[skeleton="hide"] {
  visibility: hidden;
}

[skeleton="text"],
[skeleton="button"],
[skeleton="block"] {
  animation: skeleton-loading 1s linear infinite alternate;
  color: transparent !important;
  border-color: transparent !important;
  border-radius: var(--skeleton-radius, 4px);
  pointer-events: none;
  text-decoration: none;
}

[skeleton="text"] *,
[skeleton="button"] *,
[skeleton="block"] * {
  opacity: 0;
}

img[skeleton="image"],
smootify-product img[variant="image"]:not(.loaded),
smootify-product [variant="image"] img:not(.loaded) {
  animation: blur-loading 5s linear infinite alternate;
}

/* ------------------------------------------------- bloques condicionales */

/* El script marca <smootify-product> con las clases de estado y estas reglas
   deciden qué variante del bloque se ve. */
smootify-product.is-variable [condition="is-not-variable"],
smootify-product:not(.is-variable) [condition="is-variable"],
smootify-product.is-available [condition="out-of-stock"],
smootify-product.is-not-available [condition="in-stock"],
smootify-product:not(.is-on-sale) [condition="on-sale"],
smootify-product:not(.low-stock) [condition="low-stock"],
smootify-product:not(.last-in-stock) [condition="last-in-stock"],
smootify-product:not(.many-in-stock) [condition="many-in-stock"],
smootify-product:not(.price-varies) [condition="variable-price"],
smootify-product.price-varies [condition="fixed-price"],
smootify-product:not(.is-free) [condition="is-free"],
smootify-product.is-free [condition="is-paid"] {
  display: none !important;
}

/* ------------------------------------------------------------- carrito */

/* Campo de cantidad: sin flechas nativas. En el carrito solo se opera con
   los botones + y -, como en el diseño original. */
quantity-input:not(.functionality-type-input) input[type="number"] {
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
  appearance: textfield;
}

quantity-input:not(.functionality-type-input) input[type="number"]::-webkit-inner-spin-button,
quantity-input:not(.functionality-type-input) input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

smootify-cart quantity-input:not(.functionality-type-input) input {
  pointer-events: none;
}

smootify-cart [data-action="remove"] {
  cursor: pointer;
}

smootify-cart [data-action="remove"] * {
  pointer-events: none;
}

/* ------------------------------------ elementos sin clase de Webflow */

smootify-add-to-cart,
cart-item {
  display: block;
}

/* ------------------------------------------------- añadidos propios */

/* Valor de opción sin muestra de color ni imagen (p. ej. tallas) */
.flo-swatch-text {
  display: block;
  padding: 0 .6em;
  line-height: 1.9;
  font-size: .85em;
  letter-spacing: .04em;
  white-space: nowrap;
}

/* Opción agotada dentro del desplegable de variantes */
.w-dropdown-link.is-disabled {
  opacity: .4;
  pointer-events: none;
}

.sm-buy-button[disabled] {
  opacity: .45;
  cursor: not-allowed;
}

.sm-image-gallery_thumbnails img {
  cursor: pointer;
}

/* El título de la línea es claro porque el cajón es café; en /cart el fondo
   es claro y el nombre del producto desaparecía. */
.sm-cart-page .sm-cart-item__title {
  color: var(--_primitives---cafe);
}