/**
 * Lo poco de la tienda que no es de un componente.
 *
 * Vivía en el style.css del tema hijo. Se reescribió sobre las variables de
 * tokens.css y sin un solo !important.
 */

/* Reserva el hueco de la barra de desplazamiento: cuando el carrito lateral
   bloquea el desplazamiento, la página no salta de lado. */
html {
    scrollbar-gutter: stable;
}

/*
 * Los iconos de categoría de la portada se ponen del rojo de la marca al pasar
 * el ratón. La clase `item-rojo` va puesta a mano en cada columna de Stackable.
 *
 * Antes esto usaba `#ED3236` —un rojo que no era el de la marca—, forzaba cada
 * propiedad con !important y pintaba de rojo TODAS las formas del dibujo,
 * también las blancas. Ahora solo se tiñe lo que era negro, y con el rojo que
 * manda el Personalizador. Stackable no le pone color a los iconos propios
 * (`ugb-custom-icon`): su color viene de atributos del SVG, y a esos les gana
 * cualquier regla sin necesidad de forzar nada.
 *
 * Y se fue el "filtro de emergencia" para iconos en PNG: los siete son SVG.
 */
.item-rojo :is(h3, h4, p, a, .stk-block-heading__text, .stk-block-text__text),
.item-rojo svg :is([fill="#000000"], [fill="#000"], [fill="black"], [stroke="#000000"], [stroke="#000"], [stroke="black"]) {
    transition: color .3s ease, fill .3s ease, stroke .3s ease;
}

.item-rojo:hover :is(h3, h4, p, a, .stk-block-heading__text, .stk-block-text__text) {
    color: var(--llr-rojo);
}

.item-rojo:hover svg :is([fill="#000000"], [fill="#000"], [fill="black"]) {
    fill: var(--llr-rojo);
}

.item-rojo:hover svg :is([stroke="#000000"], [stroke="#000"], [stroke="black"]) {
    stroke: var(--llr-rojo);
}

/*
 * El botón de la tarjeta de producto, a lo ancho de la tarjeta, como estaba.
 *
 * Lo hacía el CSS forzado del tema hijo. Blocksy lo deja del ancho de su texto
 * y no trae ajuste para cambiarlo en la tarjeta (sí lo trae en la ficha del
 * producto), así que va aquí. Que los botones queden al fondo y alineados entre
 * tarjetas ya lo hace Blocksy ("alinear botones", encendido). En el celular la
 * tarjeta centra su contenido y encogía el botón a su texto: por eso también
 * se estira el contenedor.
 */
[data-products] .ct-woo-card-actions {
    align-self: stretch;
}

[data-products] .ct-woo-card-actions > .button {
    flex: 1 1 100%;
    justify-content: center;
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .item-rojo :is(h3, h4, p, a, .stk-block-heading__text, .stk-block-text__text),
    .item-rojo svg * {
        transition: none;
    }
}