/* Stage 4 UX/performance helpers: loading states and lower perceived latency */
.xq-btn-spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: .42rem;
    vertical-align: -0.12em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: xq-stage4-spin .72s linear infinite;
}

@keyframes xq-stage4-spin {
    to { transform: rotate(360deg); }
}

button.is-loading,
a.is-loading,
.xq-buy-action-btn.is-loading,
.xq-cart-checkout-btn.is-loading,
.xq-bill-pay-btn.is-loading {
    pointer-events: none;
    opacity: .82;
}

.xq-buy-action-btn.is-loading,
.xq-cart-checkout-btn.is-loading,
.xq-bill-pay-btn.is-loading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .28rem;
}

.xq-cart-qty-form.is-loading .xq-cart-qty-input,
.xq-cart-qty-form.is-loading .xq-cart-qty-btn {
    opacity: .68;
}

#webchat_iframe[src="about:blank"] {
    background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,250,252,.96));
}

#webchat_panel.show #webchat_iframe[src="about:blank"]::before {
    content: "正在连接客服...";
}



/* Hotfix 2026-05-13: keep floating customer-service icons from being stretched by HTML attributes/lazy sizing. */
.main-im .qq-hover-c .img-qq {
    width: 56px !important;
    height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
    object-fit: contain !important;
    display: block;
}

.main-im .im-qq:hover .qq-hover-c .img-qq {
    width: 64px !important;
    height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
    object-fit: contain !important;
}

.main-im .im-link-icon,
.main-im .weixing-ma,
.main-im .qq-hover-c img {
    object-fit: contain !important;
}