/* =================================================================
   Urutienda — Botón "Agregar" debajo del precio en tarjetas de producto
   Se carga sólo cuando la tienda eligió "Debajo del precio" en
   Herramientas. En mobile/touch oculta el botón superpuesto sobre la
   imagen y muestra el bloque dentro del cuerpo de la tarjeta; en
   desktop con hover se mantiene el comportamiento actual del theme
   (botón superpuesto que aparece al pasar el mouse).
   Los media queries son el complemento exacto de
   `(hover: hover) and (min-width: 861px)` que usan los themes, así
   nunca pisamos los estilos desktop de cada theme.
   Los selectores usan 3 clases para ganarle a las reglas
   `body.theme-store-* .st-product-card-quick` de los themes.
   ================================================================= */

@media (hover: none), (max-width: 860px) {
    .st-product-card--btn-below .st-product-card-media .st-product-card-quick {
        display: none;
    }
}

.st-product-card--btn-below .st-product-card-body .st-product-card-quick--below {
    display: flex;
    gap: 6px;
    position: static;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    margin: auto 0 0;
    padding: 8px 0 0;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    text-align: center;
}

.st-product-card--btn-below .st-product-card-body .st-product-card-quick--below form,
.st-product-card--btn-below .st-product-card-body .st-product-card-quick--below > a,
.st-product-card--btn-below .st-product-card-body .st-product-card-quick--below > button {
    flex: 1;
    margin: 0;
    width: 100%;
}

.st-product-card--btn-below .st-product-card-body .st-product-card-quick--below .button {
    width: 100%;
    box-shadow: none;
}

@media (hover: hover) and (min-width: 861px) {
    .st-product-card--btn-below .st-product-card-body .st-product-card-quick--below {
        display: none;
    }
}