/* 产品分类等页面的Add to cart按钮圆角样式 */

/* 1. 产品列表页面的Add to cart按钮 (.addcarts) */
.addcarts {
    border-radius: 40px !important;
    transition: all 0.3s ease !important;
}

/* 悬停效果 */
.addcarts:hover {
    border-radius: 40px !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(22, 51, 107, 0.3) !important;
}

/* 激活状态 */
.addcarts:active {
    border-radius: 40px !important;
    transform: translateY(0) !important;
}

/* 焦点状态 */
.addcarts:focus {
    border-radius: 40px !important;
    outline: 2px solid #16336b !important;
    outline-offset: 2px !important;
}

/* 2. 产品详情页面的Add to cart按钮 (.btn.products_add) */
.btn.products_add {
    border-radius: 40px !important;
    transition: all 0.3s ease !important;
}

/* 悬停效果 */
.btn.products_add:hover {
    border-radius: 40px !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(22, 51, 107, 0.3) !important;
}

/* 激活状态 */
.btn.products_add:active {
    border-radius: 40px !important;
    transform: translateY(0) !important;
}

/* 焦点状态 */
.btn.products_add:focus {
    border-radius: 40px !important;
    outline: 2px solid #16336b !important;
    outline-offset: 2px !important;
}

/* 3. 产品详情页面的Buy It Now按钮 (.probuy_now) */
.probuy_now.products_add {
    border-radius: 40px !important;
    transition: all 0.3s ease !important;
}

/* 悬停效果 */
.probuy_now.products_add:hover {
    border-radius: 40px !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(22, 51, 107, 0.3) !important;
}

/* 激活状态 */
.probuy_now.products_add:active {
    border-radius: 40px !important;
    transform: translateY(0) !important;
}

/* 焦点状态 */
.probuy_now.products_add:focus {
    border-radius: 40px !important;
    outline: 2px solid #16336b !important;
    outline-offset: 2px !important;
}

/* 4. 产品详情页面的add to cart链接 (.read_more.addtocart) */
.read_more.addtocart.redBtn.addProductToCart.cart_a.purchased.products_add {
    border-radius: 40px !important;
    transition: all 0.3s ease !important;
}

/* 悬停效果 */
.read_more.addtocart.redBtn.addProductToCart.cart_a.purchased.products_add:hover {
    border-radius: 40px !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(22, 51, 107, 0.3) !important;
}

/* 激活状态 */
.read_more.addtocart.redBtn.addProductToCart.cart_a.purchased.products_add:active {
    border-radius: 40px !important;
    transform: translateY(0) !important;
}

/* 焦点状态 */
.read_more.addtocart.redBtn.addProductToCart.cart_a.purchased.products_add:focus {
    border-radius: 40px !important;
    outline: 2px solid #16336b !important;
    outline-offset: 2px !important;
}

/* 5. 购物车页面的Add to cart按钮 */
#product-add-to-cart.btn {
    border-radius: 40px !important;
    transition: all 0.3s ease !important;
}

/* 悬停效果 */
#product-add-to-cart.btn:hover {
    border-radius: 40px !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(22, 51, 107, 0.3) !important;
}

/* 激活状态 */
#product-add-to-cart.btn:active {
    border-radius: 40px !important;
    transform: translateY(0) !important;
}

/* 焦点状态 */
#product-add-to-cart.btn:focus {
    border-radius: 40px !important;
    outline: 2px solid #16336b !important;
    outline-offset: 2px !important;
}

/* 6. 收藏页面的Add to cart按钮 (.r_btn) */
.r_btn {
    border-radius: 40px !important;
    transition: all 0.3s ease !important;
}

/* 悬停效果 */
.r_btn:hover {
    border-radius: 40px !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(22, 51, 107, 0.3) !important;
}

/* 激活状态 */
.r_btn:active {
    border-radius: 40px !important;
    transform: translateY(0) !important;
}

/* 焦点状态 */
.r_btn:focus {
    border-radius: 40px !important;
    outline: 2px solid #16336b !important;
    outline-offset: 2px !important;
}

/* 7. 等待列表页面的Add to cart按钮 */
.waitlists .r_btn {
    border-radius: 40px !important;
    transition: all 0.3s ease !important;
}

/* 悬停效果 */
.waitlists .r_btn:hover {
    border-radius: 40px !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(22, 51, 107, 0.3) !important;
}

/* 8. 通用按钮圆角样式覆盖 */
/* 确保所有相关的Add to cart按钮都有圆角 */
[class*="addtocart"],
[class*="products_add"],
[class*="addcarts"],
[class*="cart"],
[class*="btn"][id*="cart"],
[class*="btn"][class*="cart"] {
    border-radius: 40px !important;
}

/* 9. 响应式调整 */
@media (max-width: 768px) {
    /* 手机端简化悬停效果 */
    .addcarts:hover,
    .btn.products_add:hover,
    .probuy_now.products_add:hover,
    .read_more.addtocart.redBtn.addProductToCart.cart_a.purchased.products_add:hover,
    #product-add-to-cart.btn:hover,
    .r_btn:hover {
        transform: none !important;
        box-shadow: 0 4px 15px rgba(22, 51, 107, 0.2) !important;
    }
    
    /* 手机端调整内边距 */
    .addcarts,
    .btn.products_add,
    .probuy_now.products_add,
    .read_more.addtocart.redBtn.addProductToCart.cart_a.purchased.products_add,
    #product-add-to-cart.btn,
    .r_btn {
        padding: 12px 20px !important;
        font-size: 13px !important;
    }
}

@media (max-width: 480px) {
    /* 超小屏幕进一步优化 */
    .addcarts,
    .btn.products_add,
    .probuy_now.products_add,
    .read_more.addtocart.redBtn.addProductToCart.cart_a.purchased.products_add,
    #product-add-to-cart.btn,
    .r_btn {
        padding: 10px 16px !important;
        font-size: 12px !important;
    }
}

/* 10. 触摸设备优化 */
@media (hover: none) {
    /* 触摸设备的激活状态 */
    .addcarts:active,
    .btn.products_add:active,
    .probuy_now.products_add:active,
    .read_more.addtocart.redBtn.addProductToCart.cart_a.purchased.products_add:active,
    #product-add-to-cart.btn:active,
    .r_btn:active {
        transform: scale(0.98) !important;
        border-radius: 40px !important;
    }
}

/* 11. 确保圆角在所有状态下都保持 */
.addcarts,
.btn.products_add,
.probuy_now.products_add,
.read_more.addtocart.redBtn.addProductToCart.cart_a.purchased.products_add,
#product-add-to-cart.btn,
.r_btn {
    /* 强制应用圆角 */
    border-radius: 40px !important;
    /* 确保过渡效果 */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    /* 防止其他样式覆盖 */
    -webkit-border-radius: 40px !important;
    -moz-border-radius: 40px !important;
    -ms-border-radius: 40px !important;
    -o-border-radius: 40px !important;
}

/* 12. 悬停时的内阴影效果 */
.addcarts:hover,
.btn.products_add:hover,
.probuy_now.products_add:hover,
.read_more.addtocart.redBtn.addProductToCart.cart_a.purchased.products_add:hover,
#product-add-to-cart.btn:hover,
.r_btn:hover {
    /* 添加内阴影效果 */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 6px 20px rgba(22, 51, 107, 0.3) !important;
}

/* 13. 确保按钮在深色背景下也清晰可见 */
.addcarts,
.btn.products_add,
.probuy_now.products_add,
.read_more.addtocart.redBtn.addProductToCart.cart_a.purchased.products_add,
#product-add-to-cart.btn,
.r_btn {
    /* 添加文字阴影 */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* 悬停时的文字阴影 */
.addcarts:hover,
.btn.products_add:hover,
.probuy_now.products_add:hover,
.read_more.addtocart.redBtn.addProductToCart.cart_a.purchased.products_add:hover,
#product-add-to-cart.btn:hover,
.r_btn:hover {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* 14. 焦点环样式 */
.addcarts:focus-visible,
.btn.products_add:focus-visible,
.probuy_now.products_add:focus-visible,
.read_more.addtocart.redBtn.addProductToCart.cart_a.purchased.products_add:focus-visible,
#product-add-to-cart.btn:focus-visible,
.r_btn:focus-visible {
    outline: 2px solid #16336b !important;
    outline-offset: 2px !important;
    border-radius: 40px !important;
}

/* 15. 禁用状态样式 */
.addcarts:disabled,
.btn.products_add:disabled,
.probuy_now.products_add:disabled,
.read_more.addtocart.redBtn.addProductToCart.cart_a.purchased.products_add:disabled,
#product-add-to-cart.btn:disabled,
.r_btn:disabled {
    border-radius: 40px !important;
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

/* 16. 确保在所有主题下都正确显示 */
.addcarts,
.btn.products_add,
.probuy_now.products_add,
.read_more.addtocart.redBtn.addProductToCart.cart_a.purchased.products_add,
#product-add-to-cart.btn,
.r_btn {
    /* 添加一些内阴影效果 */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    /* 确保圆角在所有情况下都生效 */
    border-radius: 40px !important;
    /* 防止内容溢出 */
    overflow: hidden !important;
}

/* 17. 特殊处理：确保按钮内容不会超出圆角边界 */
.addcarts span,
.btn.products_add,
.probuy_now.products_add span,
.read_more.addtocart.redBtn.addProductToCart.cart_a.purchased.products_add,
#product-add-to-cart.btn,
.r_btn {
    /* 确保内容在圆角内 */
    border-radius: inherit !important;
    /* 防止内容溢出 */
    overflow: hidden !important;
}

/* 18. 动画性能优化 */
.addcarts,
.btn.products_add,
.probuy_now.products_add,
.read_more.addtocart.redBtn.addProductToCart.cart_a.purchased.products_add,
#product-add-to-cart.btn,
.r_btn {
    /* 优化动画性能 */
    will-change: transform, box-shadow !important;
    /* 确保硬件加速 */
    -webkit-transform: translateZ(0) !important;
    -moz-transform: translateZ(0) !important;
    -ms-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
}

/* 19. 确保在所有浏览器中圆角都正确显示 */
.addcarts,
.btn.products_add,
.probuy_now.products_add,
.read_more.addtocart.redBtn.addProductToCart.cart_a.purchased.products_add,
#product-add-to-cart.btn,
.r_btn {
    /* 跨浏览器兼容性 */
    -webkit-border-radius: 40px !important;
    -moz-border-radius: 40px !important;
    -ms-border-radius: 40px !important;
    -o-border-radius: 40px !important;
    border-radius: 40px !important;
}

/* 20. 最终确认：强制应用圆角样式 */
.addcarts,
.btn.products_add,
.probuy_now.products_add,
.read_more.addtocart.redBtn.addProductToCart.cart_a.purchased.products_add,
#product-add-to-cart.btn,
.r_btn {
    border-radius: 40px !important;
    border-top-left-radius: 40px !important;
    border-top-right-radius: 40px !important;
    border-bottom-left-radius: 40px !important;
    border-bottom-right-radius: 40px !important;
}