.tp-product-details-buy-now-btn,
.tp-product-details-add-to-cart-btn {
    animation: attentionShake 4s ease-in-out infinite;
    will-change: transform;
}

@keyframes attentionShake {
    0%, 70%, 100% { transform: translateX(0); }

    72% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
    78% { transform: translateX(-6px); }
    81% { transform: translateX(6px); }
    84% { transform: translateX(-5px); }
    87% { transform: translateX(5px); }
    90% { transform: translateX(-4px); }
    93% { transform: translateX(4px); }
    96% { transform: translateX(-2px); }
    98% { transform: translateX(2px); }
    100% { transform: translateX(0); }
}

/* Footer top gap: Shofy ships padding-top:95px above 575px (and 50px below it),
   which left a large empty band under the footer's top edge on desktop.
   Match the phone value at every width. */
.tp-footer-top {
    padding-top: 50px;
}

/* Product card "Add to cart": the theme fills these with near-black and only reaches the
   store colour on hover. Fill them with the store colour at rest instead, keeping the
   white label. The icons follow along because their fills use currentColor. */
.tp-product-add-cart-btn-large,
.tp-product-list-add-to-cart-btn,
.tp-product-add-to-cart-4 {
    --tp-btn-color: var(--tp-common-white);
    background-color: var(--primary-color);
    color: var(--tp-common-white);
}

/* Darker shade on hover so the button still reacts to the pointer. */
.tp-product-add-cart-btn-large:hover,
.tp-product-list-add-to-cart-btn:hover,
.tp-product-add-to-cart-4:hover {
    --tp-btn-color: var(--tp-common-white);
    background-color: var(--secondary-color);
    color: var(--tp-common-white);
}

/* The grid card now renders the button after the price instead of over the thumbnail,
   so the "below image" spacing no longer applies to it. */
.tp-product-content .tp-product-add-cart-btn-large-wrapper {
    margin-top: 10px !important;
}