.qq-support-band {
    box-sizing: border-box;
    width: calc(100% - 32px);
    max-width: 1160.5px;
    margin: 28px auto 12px;
    background: rgba(237, 252, 249, .96);
    border: 1px solid #cce9e2;
    border-radius: 8px;
    color: #183631;
}
/* Match the catalog widths and container gutters in home-refine.css. */
body:has(.home-storefront) .qq-support-band { width: calc(100% - 19.5px); }
@media (min-width: 576px) { body:has(.home-storefront) .qq-support-band { max-width: 520.5px; } }
@media (min-width: 768px) { body:has(.home-storefront) .qq-support-band { max-width: 700.5px; } }
@media (min-width: 992px) { body:has(.home-storefront) .qq-support-band { width: calc(100% - 83.5px); max-width: 940.5px; } }
@media (min-width: 1200px) { body:has(.home-storefront) .qq-support-band { max-width: 1120.5px; } }
@media (min-width: 1400px) { body:has(.home-storefront) .qq-support-band { max-width: 1300.5px; } }
.qq-support-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 112px;
    margin: 0 auto;
    padding: 24px 26px;
}
.qq-support-intro { display: flex; align-items: center; gap: 16px; min-width: 0; }
.qq-support-symbol {
    display: grid;
    place-items: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border: 1px solid #cce9e2;
    border-radius: 8px;
    color: #168373;
    background: #fff;
    font-size: 23px;
}
.qq-support-intro h2 { margin: 0 0 5px; color: #183631; font-size: 20px; font-weight: 750; line-height: 1.4; }
.qq-support-intro p { margin: 0; color: #496d65; font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }
.qq-support-trigger {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 11px 20px;
    border: 1px solid #168373;
    border-radius: 8px;
    color: #fff;
    background: #168373;
    font: inherit;
    font-size: 15px;
    font-weight: 650;
    line-height: 1.5;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}
.qq-support-trigger > i:first-child { font-size: 19px; }
.qq-support-trigger > i:last-child { font-size: 15px; margin-left: 3px; }
.qq-support-trigger:hover { background: #0e6a5d; border-color: #0e6a5d; }
.qq-support-dialog {
    box-sizing: border-box;
    width: min(440px, calc(100% - 32px));
    max-width: none;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 22px 24px 16px;
    overflow: auto;
    overscroll-behavior: contain;
    border: 1px solid #d5e5df;
    border-radius: 8px;
    color: #183631;
    background: #fff;
    box-shadow: 0 20px 64px rgba(22, 49, 44, .20);
    color-scheme: light;
    font-family: inherit;
    letter-spacing: 0;
}
.qq-support-dialog:not([open]) { display: none; }
.qq-support-dialog::backdrop { background: rgba(25, 43, 48, .54); }
.qq-support-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.qq-support-dialog-header h2 { margin: 0; color: #183631; font-size: 20px; font-weight: 750; line-height: 1.4; }
.qq-support-close, .qq-support-copy {
    display: inline-flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    color: #496d65;
    background: transparent;
    font: inherit;
    font-size: 20px;
    cursor: pointer;
}
.qq-support-close:hover, .qq-support-copy:hover { background: #edf8f4; color: #0e6a5d; }
.qq-support-description { margin: 10px 0 0; color: #496d65; font-size: 14px; line-height: 1.65; }
.qq-support-qr {
    display: block;
    width: 100%;
    max-width: 344px;
    height: auto;
    max-height: min(360px, max(200px, calc(100dvh - 270px)));
    margin: 16px auto 0;
    object-fit: contain;
    -webkit-touch-callout: default;
}
.qq-support-account { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; color: #36524c; font-size: 14px; line-height: 1.5; }
.qq-support-account [data-qq-support-number] { color: #183631; font-weight: 650; user-select: text; }
.qq-support-copy { font-size: 16px; }
.qq-support-status { min-height: 22px; margin: 2px 0 0; color: #0e6a5d; font-size: 13px; line-height: 1.65; text-align: center; }
.qq-support-image-error { margin: 18px 0; color: #a13843; font-size: 14px; line-height: 1.6; }
.qq-support-dialog [hidden], .qq-support-backdrop[hidden] { display: none !important; }
body.qq-support-open { overflow: hidden !important; }
.qq-support-dialog.qq-support-fallback { position: fixed; inset: 50% auto auto 50%; margin: 0; transform: translate(-50%, -50%); z-index: 10001; }
.qq-support-backdrop { position: fixed; inset: 0; z-index: 10000; background: rgba(25, 43, 48, .54); }
.store-footer nav { flex-wrap: wrap; gap: 10px 18px; }
.qq-support-footer-link { margin: 0; padding: 0; border: 0; color: inherit; background: none; font: inherit; line-height: inherit; cursor: pointer; }
.qq-support-footer-link:hover { color: #0e6a5d; text-decoration: underline; }
.qq-support-trigger:focus-visible, .qq-support-close:focus-visible, .qq-support-copy:focus-visible, .qq-support-footer-link:focus-visible { outline: 3px solid #38a78e; outline-offset: 3px; }
@media (max-width: 767.98px) {
    .qq-support-inner { padding: 20px 16px; gap: 18px; }
    .qq-support-intro { align-items: flex-start; gap: 12px; }
    .qq-support-intro h2 { font-size: 18px; }
    .qq-support-symbol { flex-basis: 40px; width: 40px; height: 40px; font-size: 20px; }
}
@media (max-width: 575.98px) {
    .qq-support-inner { flex-direction: column; align-items: stretch; }
    .qq-support-trigger { width: 100%; }
    .qq-support-dialog { padding: 16px 16px 12px; }
    .qq-support-dialog-header h2 { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
    .qq-support-trigger { transition: none; }
}