/*
 * Catalog cart action clarity
 * This stylesheet is deliberately loaded after the legacy storefront themes.
 * The catalog uses an icon-only buying action, so the icon and its hit target
 * must remain obvious in both colour schemes.
 */

html[data-color-scheme] body.marketplace-surface .market-catalog-page .market-product-content > footer > a {
    width: 44px !important;
    height: 42px !important;
    min-height: 42px !important;
    flex: 0 0 44px !important;
    border: 1px solid #205cf2 !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #205cf2, #1748c5) !important;
    box-shadow: 0 8px 18px rgb(32 92 242 / 28%) !important;
    color: #ffffff !important;
}

html[data-color-scheme] body.marketplace-surface .market-catalog-page .market-product-content > footer > a .market-product-buy-icon {
    width: 22px !important;
    height: 22px !important;
    stroke-width: 2.25px !important;
}

html[data-color-scheme] body.marketplace-surface .market-catalog-page .market-product-content > footer > a:hover,
html[data-color-scheme] body.marketplace-surface .market-catalog-page .market-product-content > footer > a:focus-visible {
    border-color: #4e82ff !important;
    background: linear-gradient(135deg, #4e82ff, #205cf2) !important;
    box-shadow: 0 12px 24px rgb(32 92 242 / 36%) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
}

html[data-color-scheme] body.marketplace-surface .market-catalog-page .market-product-content > footer > a:active {
    transform: translateY(0) scale(.97);
}

/* The home featured-product cards use a full-width CTA, not an icon-only control. */
html[data-color-scheme] body.marketplace-surface .market-home-products .product-card-actions {
    display: flex !important;
    justify-content: stretch !important;
}

html[data-color-scheme] body.marketplace-surface .market-home-products .product-card-actions .buy {
    display: inline-flex !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    padding: 0 16px !important;
    border: 1px solid #205cf2 !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #205cf2, #1748c5) !important;
    box-shadow: 0 10px 20px rgb(32 92 242 / 28%) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: -.01em;
    line-height: 1 !important;
}

html[data-color-scheme] body.marketplace-surface .market-home-products .product-card-actions .buy .shop-product-buy-icon {
    width: 20px !important;
    height: 20px !important;
    stroke-width: 2.25px !important;
    filter: drop-shadow(0 1px 1px rgb(7 26 70 / 28%));
}

html[data-color-scheme] body.marketplace-surface .market-home-products .product-card-actions .buy span {
    display: inline-block !important;
    color: #ffffff !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}

html[data-color-scheme] body.marketplace-surface .market-home-products .product-card-actions .buy:hover,
html[data-color-scheme] body.marketplace-surface .market-home-products .product-card-actions .buy:focus-visible {
    border-color: #4e82ff !important;
    background: linear-gradient(135deg, #4e82ff, #205cf2) !important;
    box-shadow: 0 14px 26px rgb(32 92 242 / 38%) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
}

html[data-color-scheme] body.marketplace-surface .market-home-products .product-card-actions .buy:active {
    transform: translateY(0) scale(.985);
}

@media (prefers-reduced-motion: reduce) {
    html[data-color-scheme] body.marketplace-surface .market-catalog-page .market-product-content > footer > a {
        transition: none !important;
    }
}