#ProductDisplayWrapper {
    position: relative;
    overflow: hidden;
}

    #ProductDisplayWrapper > .InnerContent {
        max-width: 120em;
        margin: 1.8em auto;
        padding: 0 2em;
        box-sizing: border-box;
        display: flex;
        gap: 3em;
        position: relative;
        align-items: end;
    }

    #ProductDisplayWrapper .ProductImage {
        width: var(--width);
        border-radius: calc(var(--width) / 10);
        overflow: hidden;
    }

        #ProductDisplayWrapper .ProductImage[product-classification="Card" i] {
            --width: 15em;
            height: calc(var(--width) * 1.333334);
        }

        #ProductDisplayWrapper .ProductImage[product-classification="DirectTopUp" i] {
            --width: 20em;
            height: 20em;
        }

        #ProductDisplayWrapper .ProductImage img {
            width: 100%;
            height: 100%;
        }

    #ProductDisplayWrapper .ProductInfo {
        margin: 4.2em 0;
    }

        #ProductDisplayWrapper .ProductInfo .ProductTitle h1 {
            font-size: 2.5em;
            font-weight: 900;
            text-transform: uppercase;
            color: rgba(255, 255, 255);
        }

        #ProductDisplayWrapper .ProductInfo .Specification {
            display: flex;
            flex-wrap: wrap;
            gap: 1.5em;
        }

            #ProductDisplayWrapper .ProductInfo .Specification > li {
                display: grid;
                grid-template-columns: auto 1fr;
                gap: .5em;
                align-items: center;
            }

                #ProductDisplayWrapper .ProductInfo .Specification > li #InstantIcon {
                    color: var(--theme-color-light);
                }

            #ProductDisplayWrapper .ProductInfo .Specification [region]::before {
                --h: 2em;
                margin: 0;
                transform: scale(.833334);
            }

        #ProductDisplayWrapper .ProductInfo #ImportantNotes {
            background-color: #9377ff26;
            padding: 1.2em;
            border-radius: 1em;
            max-width: 65em;
        }

#ProductContentWrapper {
    padding: 2.5em 0;
}

    #ProductContentWrapper > .InnerContent,
    .ProductContentSection > .InnerContent {
        max-width: 120em;
        margin-inline: auto;
        padding-inline: 2em;
        box-sizing: border-box;
        display: grid;
        grid-template-columns: 1fr clamp(30em, 33%, 30em);
        gap: 2em;
        align-items: start;
    }

    #ProductContentWrapper .ProductVariantListWrapper,
    #ProductContentWrapper .ActionSection #OrderQuantitySection,
    #ProductContentWrapper .ActionSection #OrderDetailSection,
    #ProductContentWrapper .ActionSection #OrderPurchaseSummary,
    .ProductContentSection .Content > div {
        background-color: #ffffff1a;
        border-radius: 1.5em;
        padding: 1.7em;
        border-bottom: 2px solid var(--theme-color-light);
    }

    #ProductContentWrapper .ProductVariantListWrapper,
    #ProductContentWrapper .ActionSection #OrderQuantitySection,
    #ProductContentWrapper .ActionSection #OrderDetailSection,
    #ProductContentWrapper .ActionSection #OrderPurchaseSummary {
        display: flex;
        flex-direction: column;
        gap: 1.5em;
        border-bottom: 2px solid var(--theme-color-light);
    }

    #ProductContentWrapper .SectionTitle {
        display: flex;
        gap: .8em;
        align-items: center;
    }

        #ProductContentWrapper .SectionTitle::before {
            content: attr(section-puchase-steps);
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: var(--theme-color);
            color: #fff;
            font-size: 1em;
            font-weight: 800;
            width: 2.5em;
            height: 2.5em;
            border-radius: .8em;
        }

        #ProductContentWrapper .SectionTitle h5 {
            font-weight: 800;
            font-size: 1.1em;
            text-transform: uppercase;
        }

    #ProductContentWrapper .ProductVariantList {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(28em, 1fr));
        gap: 1em;
        align-items: start;
    }

    #ProductContentWrapper.ProductUnavailable > .InnerContent {
        grid-template-columns: minmax(0, 1fr);
    }

    #ProductContentWrapper.ProductUnavailable .ProductVariantList {
        display: flex;
        min-height: 8em;
        align-items: center;
        justify-content: center;
    }

    #ProductContentWrapper.ProductUnavailable .ProductUnavailableMessage {
        margin: 0;
        color: rgba(255, 255, 255, 0.85);
        font-size: 1.2em;
        font-weight: 700;
        text-align: center;
    }

        #ProductContentWrapper .ProductVariantList .VariantItemOption {
            display: grid;
            grid-template-columns: auto 1fr auto;
            gap: 1em;
            padding: 1em;
            border-radius: 1em;
            align-items: center;
            cursor: pointer;
            background-color: rgb(67 71 102);
        }

        #ProductContentWrapper .ProductVariantList .VariantItemOption[data-availability="1"],
        #ProductContentWrapper .ProductVariantList .VariantItemOption[data-availability="2"] {
            background-color: #373a56;
            border: 1px solid #5a5e70;
            color: #d4d6df;
            cursor: not-allowed;
        }

        #ProductContentWrapper .ProductVariantList .VariantItemOption[aria-disabled="true"] .Icon img {
            filter: grayscale(1);
        }

        #ProductContentWrapper .ProductVariantList .VariantItemOption[aria-disabled="true"] .VariantPrice {
            filter: grayscale(1);
            opacity: .7;
        }

        #ProductContentWrapper .ProductVariantList .VariantItemOption[data-availability="1"] .VariantPrice,
        #ProductContentWrapper .ProductVariantList .VariantItemOption[data-availability="2"] .VariantPrice {
            text-decoration: line-through;
        }

        #ProductContentWrapper .ProductVariantList .VariantAvailabilityLabel {
            display: block;
            font-size: .75em;
            font-weight: 800;
            color: #e0e0e5;
            text-decoration: none;
        }

        #ProductContentWrapper .ProductVariantList .VariantAvailabilityLabel:empty { display: none; }

        #ProductContentWrapper .ActionSection[hidden] { display: none !important; }

            #ProductContentWrapper .ProductVariantList .VariantItemOption[is-selected="true" i] {
                border: 2px solid var(--theme-color-light);
            }

            #ProductContentWrapper .ProductVariantList .VariantItemOption .Icon {
                width: 4em;
                height: 4em;
                overflow: hidden;
                border-radius: 25%;
                position: relative;
            }

                #ProductContentWrapper .ProductVariantList .VariantItemOption .Icon img {
                    width: 100%;
                    height: 100%;
                }


            #ProductContentWrapper .ProductVariantList .VariantItemOption .VariantName {
                font-size: 1em;
                font-weight: 800;
                flex-wrap: wrap;
            }

            #ProductContentWrapper .ProductVariantList .VariantItemOption .VariantPrice {
                font-size: 1em;
                text-align: right;
            }

                #ProductContentWrapper .ProductVariantList .VariantItemOption .VariantPrice .SellingPrice {
                    font-weight: 800;
                    color: var(--theme-color-light);
                    white-space: nowrap;
                }

                #ProductContentWrapper .ProductVariantList .VariantItemOption .VariantPrice .OriginalPrice {
                    opacity: .5;
                    text-decoration: line-through;
                    white-space: nowrap;
                }

    #ProductContentWrapper .ActionSection {
        display: grid;
        gap: 1em;
    }

        #ProductContentWrapper .ActionSection #QtyWrapper {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 2em;
            align-items: center;
            overflow: hidden;
            background-color: rgb(67 71 102);
            padding: 1em;
            border-radius: .8em;
        }

            #ProductContentWrapper .ActionSection #QtyWrapper .QtyAdjustBox {
                display: flex;
                width: 13em;
                height: 3em;
                background-color: #ffffff1a;
                border-radius: .8em;
                align-items: center;
            }

                #ProductContentWrapper .ActionSection #QtyWrapper .QtyAdjustBox:has(> input:focus) {
                    border: 2px solid var( --theme-color-light);
                }

                #ProductContentWrapper .ActionSection #QtyWrapper .QtyAdjustBox > .ActionBtn[is-disabled="true" i] {
                    cursor: not-allowed;
                    pointer-events: none;
                    opacity: .5;
                }

                #ProductContentWrapper .ActionSection #QtyWrapper .QtyAdjustBox > .ActionBtn > i {
                    display: block;
                    overflow: hidden;
                    padding: .35em;
                }

                    #ProductContentWrapper .ActionSection #QtyWrapper .QtyAdjustBox > .ActionBtn > i:before {
                        display: flex;
                        width: 2.3em;
                        height: 2.3em;
                        justify-content: center;
                        align-items: center;
                        border-radius: .5em;
                        background-color: rgb(25 31 62);
                        color: #fff;
                        padding: 1em;
                    }

                #ProductContentWrapper .ActionSection #QtyWrapper .QtyAdjustBox > .ActionBtn:hover > i:before {
                    background-color: var(--theme-color-light);
                }

                #ProductContentWrapper .ActionSection #QtyWrapper .QtyAdjustBox .IncreaseQty {
                    order: 1;
                }

                #ProductContentWrapper .ActionSection #QtyWrapper .QtyAdjustBox .DeductQty {
                    order: -1;
                }

                #ProductContentWrapper .ActionSection #QtyWrapper .QtyAdjustBox input {
                    font-size: 1.1em;
                    font-weight: 900;
                    color: rgba(255, 255, 255, 0.85);
                    border: 0;
                    padding: 0;
                    line-height: 1.5;
                    height: 3em;
                    appearance: textfield;
                    -webkit-appearance: none;
                    -moz-appearance: textfield;
                }

                    #ProductContentWrapper .ActionSection #QtyWrapper .QtyAdjustBox input::-webkit-outer-spin-button,
                    #ProductContentWrapper .ActionSection #QtyWrapper .QtyAdjustBox input::-webkit-inner-spin-button,
                    #ProductContentWrapper .ActionSection #OrderDetailSection .DirectTopUpField input::-webkit-outer-spin-button,
                    #ProductContentWrapper .ActionSection #OrderDetailSection .DirectTopUpField input::-webkit-inner-spin-button {
                        -webkit-appearance: none;
                        margin: 0;
                    }

        #ProductContentWrapper .ActionSection #OrderDetailSection .DirectTopUpFieldWrapper {
            display: flex;
            flex-direction: column;
            gap: 1em;
        }

        #ProductContentWrapper .ActionSection #OrderDetailSection .DirectTopUpField {
            display: flex;
            align-items: center;
            background: rgb(67 71 102);
            border-radius: .7em;
            padding-inline-end: 0.7em;
        }

            #ProductContentWrapper .ActionSection #OrderDetailSection .DirectTopUpField > span {
                flex: none;
                padding-inline: 1.5em;
                font-weight: 600;
                color: rgba(255, 255, 255, 0.5);
            }

            #ProductContentWrapper .ActionSection #OrderDetailSection .DirectTopUpField > span,
            #ProductContentWrapper .ActionSection #OrderDetailSection .DirectTopUpField > input,
            #ProductContentWrapper .ActionSection #OrderDetailSection .DirectTopUpField > select {
                font-size: 1em;
                line-height: 1.5;
                display: flex;
                align-items: center;
                padding-inline-start: 1em;
                text-align: start;
            }

            #ProductContentWrapper .ActionSection #OrderDetailSection .DirectTopUpField > input,
            #ProductContentWrapper .ActionSection #OrderDetailSection .DirectTopUpField > select {
                all: unset;
                display: flex;
                align-items: center;
                background-color: transparent;
                padding: 0 1em;
                width: 100%;
                height: 3.5em;
                color: rgba(255 255 255 / .85);
                outline: 0;
                box-sizing: border-box;
                -webkit-appearance: textfield;
                -moz-appearance: textfield;
                appearance: textfield;
            }

                #ProductContentWrapper .ActionSection #OrderDetailSection .DirectTopUpField > select option {
                    color: #000;
                }

            #ProductContentWrapper .ActionSection #OrderDetailSection .DirectTopUpField:has(> input:focus),
            #ProductContentWrapper .ActionSection #OrderDetailSection .DirectTopUpField:has(> select:focus) {
                border: 1px solid var( --theme-color-light);
            }


        #ProductContentWrapper .ActionSection #OrderPurchaseSummary #SummaryDetail {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: .5em;
            align-items: center;
            background-color: rgb(67 71 102);
            padding: 1em;
            border-radius: .8em;
        }

            #ProductContentWrapper .ActionSection #OrderPurchaseSummary #SummaryDetail .T {
                color: #ffffff80;
            }

            #ProductContentWrapper .ActionSection #OrderPurchaseSummary #SummaryDetail .C {
                text-align: right;
                font-weight: 700;
            }

            #ProductContentWrapper .ActionSection #OrderPurchaseSummary #SummaryDetail #TotalPriceDisplay {
                font-size: 1.3em;
                color: var(--theme-color);
            }

        #ProductContentWrapper .ActionSection #PurchaseActionSection {
            display: grid;
            grid-template-columns: max(6em, 15%) 1fr;
            gap: 0.9em;
        }

            #ProductContentWrapper .ActionSection #PurchaseActionSection button {
                border-radius: 0.5rem;
                font-size: 1.4em;
                font-weight: 800;
            }

            #ProductContentWrapper .ActionSection #PurchaseActionSection #AddToCartBtn {
                background-color: #ffffff1a;
                color: #fff;
                font-size: 1.5em;
                min-height: 2.4em;
            }

            #ProductContentWrapper .ActionSection #PurchaseActionSection #BuyNowBtn {
                background-color: var(--theme-color-light);
                color: #fff;
                text-transform: uppercase;
                font-size: 1.4em;
                padding: 0.6em 0;
            }

.ProductContentSection .Content {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
}

    .ProductContentSection .Content > div {
        padding: 2.5em;
    }

        .ProductContentSection .Content > div > .ContentTitle {
            display: flex;
            gap: 0.5em;
            text-transform: uppercase;
            font-weight: 700;
            font-size: 1.2em;
            margin-bottom: 2.5em;
        }

            .ProductContentSection .Content > div > .ContentTitle:before {
                content: '';
                display: block;
                width: 4px;
                height: auto;
                background-color: var(--theme-color-light);
            }

        .ProductContentSection .Content > div > article {
            max-width: 70em;
            color: #adb0bc;
        }

            .ProductContentSection .Content > div > article :is(.product-copy-list, .product-copy-steps) > li,
            .ProductContentSection .Content > div > article :is(.product-copy-list, .product-copy-steps) > li::marker {
                font-weight: 400;
            }

            .ProductContentSection .Content > div > article :is(.product-copy-list, .product-copy-steps) > li strong {
                color: #f5f5f7;
                font-weight: 800;
            }

            /* Keep product body copy at the original regular weight. */
            .ProductContentSection .Content > div > article p,
            .ProductContentSection .Content > div > article li {
                font-weight: 400;
            }

            #ProductFAQ article h3 {
                font-weight: 800;
            }

    .ProductContentSection .Content #ProductGuidance {
        scroll-margin-block-start: calc(var(--header-height) + 1em);
    }

@media only screen and (min-width: 801px) {
    #ProductContentWrapper .ActionSection {
        position: sticky;
        top: calc(var(--header-height) + 2em);
        grid-column: 2;
        grid-row: 1 / 3;
    }
}

@media only screen and (max-width: 800px) {

    :root {
        --SetMaxWidthForSmallScreen: 40em;
    }

    #ProductDisplayWrapper > .InnerContent {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        max-width: var(--SetMaxWidthForSmallScreen);
        gap: 2em;
        padding-inline: unset;
        margin-block-start: 3em;
    }

    #ProductDisplayWrapper .ProductImage[product-classification="Card" i] {
        --width: 12em;
    }

    #ProductDisplayWrapper .ProductInfo {
        margin: 0;
    }

        #ProductDisplayWrapper .ProductInfo .ProductTitle h1 {
            font-size: 2em;
            text-align: center;
        }

        #ProductDisplayWrapper .ProductInfo .Specification {
            justify-content: center;
            align-items: center;
        }

        #ProductDisplayWrapper .ProductInfo #ImportantNotes {
            text-align: center;
        }

    #ProductContentWrapper > .InnerContent {
        grid-template-columns: 1fr;
        max-width: var(--SetMaxWidthForSmallScreen);
        gap: 1em;
        padding-inline: unset;
    }

    #ProductContentWrapper .ProductVariantSection[data-display="show" i] {
        position: fixed;
        inset: 0;
        z-index: 2000000100; /* Need to be higher than chat widget */
        display: flex;
        align-items: end;
        opacity: 1;
        visibility: visible;
        transition: .3s;
        background: rgb(0 0 0 / .53);
        backdrop-filter: blur(.5em);
        -webkit-backdrop-filter: blur(.5em);
    }

        #ProductContentWrapper .ProductVariantSection[data-display="show" i] > .exit-overlay {
            position: absolute;
            inset: 0;
            z-index: -1;
        }

        #ProductContentWrapper .ProductVariantSection[data-display="show" i] .ProductVariantListWrapper {
            width: 100%;
            max-width: 40em;
            min-height: calc(calc(100vh - var(--header-height))* .572);
            max-height: calc(100vh - var(--header-height) - 5em);
            margin: 0 auto;
            background: rgb(19, 25, 56);
            border-radius: 1.6em 1.6em 0 0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            padding: 0;
            gap: 0;
            border: 0;
        }

            #ProductContentWrapper .ProductVariantSection[data-display="show" i] .ProductVariantListWrapper .SectionTitle {
                display: grid;
                grid-template-columns: auto 1fr;
                padding: 1.5em;
                justify-content: center;
                align-items: center;
                gap: 0 1em;
            }

                #ProductContentWrapper .ProductVariantSection[data-display="show" i] .ProductVariantListWrapper .SectionTitle h3 {
                    font-size: 1.1em;
                    font-weight: 700;
                }


        #ProductContentWrapper .ProductVariantSection[data-display="show" i] .ProductVariantList {
            flex: auto;
            overflow: hidden;
            overflow-y: auto;
            padding: 1.5em;
            background: #9377ff26;
            border-radius: 2em 2em 0 0;
            scrollbar-width: none;
            -ms-overflow-style: none;
            grid-auto-rows: min-content;
        }

            #ProductContentWrapper .ProductVariantSection[data-display="show" i] .ProductVariantList::-webkit-scrollbar {
                display: none;
            }

            #ProductContentWrapper .ProductVariantSection[data-display="show" i] .ProductVariantList .VariantItemOption {
                padding: 1.1em;
                background-color: #ffffff1a;
            }

            #ProductContentWrapper .ProductVariantSection[data-display="show" i] .ProductVariantList .VariantItemOption[aria-disabled="true"] {
                background-color: #373a56;
            }

                #ProductContentWrapper .ProductVariantSection[data-display="show" i] .ProductVariantList .VariantItemOption .Icon,
                #ProductContentWrapper .ProductVariantSection[data-display="show" i] .ProductVariantList .VariantItemOption[is-selected="true" i] .Icon:after {
                    width: 3em;
                    height: 3em;
                }

                #ProductContentWrapper .ProductVariantSection[data-display="show" i] .ProductVariantList .VariantItemOption[is-selected="true" i] .Icon:after {
                    left: 0;
                    top: 0;
                }

                #ProductContentWrapper .ProductVariantSection[data-display="show" i] .ProductVariantList .VariantItemOption[is-selected="true" i] {
                    border: 1.5px solid var(--theme-color-light);
                }

        #ProductContentWrapper .ProductVariantSection[data-display="show" i] .SelectDonmationCloseAction {
            cursor: pointer;
            font-family: "Font Awesome 6 Free";
            font-weight: 800;
            font-size: 1.1em;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 1.5em;
        }

            #ProductContentWrapper .ProductVariantSection[data-display="show" i] .SelectDonmationCloseAction::after {
                content: "\f00d";
                transition: transform 0.3s ease-in-out;
            }

            #ProductContentWrapper .ProductVariantSection[data-display="show" i] .SelectDonmationCloseAction[data-display="closed" i]::after {
                content: "\f00d";
                color: var(--theme-color);
                transform: rotate(180deg);
            }

    body.product-overlay-content-activated {
        overflow: hidden;
    }

    #ProductContentWrapper .ProductVariantSection:not([data-display="show" i]) .VariantItemOption[is-selected="false"],
    #ProductContentWrapper .ProductVariantSection:not([data-display="show" i]) .VariantItemOption[is-selected="true" i] .Icon:after,
    #ProductContentWrapper .ProductVariantSection .ProductVariantListWrapper .Title {
        display: none;
    }

    #ProductContentWrapper.AllVariantsUnavailable .ProductVariantSection:not([data-display="show" i]) .ProductVariantList {
        grid-template-columns: minmax(0, 1fr);
    }

    #ProductContentWrapper.AllVariantsUnavailable .ProductVariantSection:not([data-display="show" i]) .VariantItemOption[is-selected="false"] {
        display: grid;
    }

    #ProductContentWrapper .ProductVariantSection:not([data-display="show" i]) .VariantItemOption[is-selected="true" i] {
        border: 0;
        grid-template-columns: auto 1fr auto auto;
    }

        #ProductContentWrapper .ProductVariantSection:not([data-display="show" i]) .VariantItemOption[is-selected="true" i] .Icon img {
            opacity: 1;
        }

    #ProductContentWrapper .ProductVariantSection:not([data-display="show" i]) .VariantItemOption .Icon {
        width: 3em;
        height: 3em;
    }

    #ProductContentWrapper .ProductVariantSection:not([data-display="show" i]) .VariantItemOption[is-selected="true" i]::after {
        content: "\f054";
        font-family: "Font Awesome 6 Free";
        display: flex;
        font-size: 0.8em;
        width: 2.5em;
        height: 2.5em;
        font-weight: 700;
        line-height: 1;
        color: currentColor;
        background: rgb(25 31 62);
        border-radius: 50%;
        justify-content: center;
        align-items: center;
    }

    #ProductContentWrapper .ProductContentSection .Content > div {
        padding-inline: 2em;
    }

    #ProductContentWrapper .ProductContentSection .Content {
        gap: 1em;
    }
}

@media only screen and (max-width: 480px) {

    #ProductContentWrapper .ActionSection #OrderDetailSection {
        padding: 1.5em;
    }

    #ProductDisplayWrapper .ProductInfo #ImportantNotes {
        margin-inline: 1em;
    }
}

/* <!-- PRODUCT DETAIL CSS END HERE  --!> */


/* ===== 2026-10-14 浅色新设计 ===== */
/* ===== page ===== */
@layer sxinline{
body>main{background-color:transparent !important;color:rgb(26, 29, 36) !important}
div#ProductDisplayWrapper{color:rgb(26, 29, 36) !important}
div#ProductDisplayWrapper>div.InnerContent{color:rgb(26, 29, 36) !important}
div#ProductDisplayWrapper>div.InnerContent>div.ProductImage{color:rgb(26, 29, 36) !important}
div#ProductDisplayWrapper>div.InnerContent>div.ProductInfo{color:rgb(26, 29, 36) !important}
div#ProductDisplayWrapper>div.InnerContent>div.ProductInfo>div.ProductTitle{color:rgb(26, 29, 36) !important}
div#ProductDisplayWrapper>div.InnerContent>div.ProductInfo>div.ProductTitle>h1{color:rgb(26, 29, 36) !important}
div#ProductDisplayWrapper>div.InnerContent>div.ProductInfo>ul.Specification{color:rgb(26, 29, 36) !important}
div#ProductDisplayWrapper>div.InnerContent>div.ProductInfo>ul.Specification>li{color:rgb(26, 29, 36) !important}
div#ProductDisplayWrapper>div.InnerContent>div.ProductInfo>ul.Specification>li>div.T{color:rgb(26, 29, 36) !important}
div#ProductDisplayWrapper>div.InnerContent>div.ProductInfo>ul.Specification>li>div.C{color:rgb(26, 29, 36) !important}
div.InnerContent>div.ProductInfo>ul.Specification>li>div.C>b{color:rgb(26, 29, 36) !important}
div#InstantIcon.T{color:#F29A00 !important}
div#InstantIcon.T>i.fa.fa-bolt{color:#F29A00 !important}
div#ImportantNotes{color:rgb(26, 29, 36) !important}
div#ImportantNotes>div{color:rgb(26, 29, 36) !important}
div#ProductContentWrapper{color:rgb(26, 29, 36) !important}
div#ProductContentWrapper>div.InnerContent{color:rgb(26, 29, 36) !important}
div#ProductContentWrapper>div.InnerContent>div.ProductVariantSection{color:rgb(26, 29, 36) !important}
div#ProductContentWrapper>div.InnerContent>div.ProductVariantSection>div.exit-overlay{color:rgb(26, 29, 36) !important}
div#ProductContentWrapper>div.InnerContent>div.ProductVariantSection>div.ProductVariantListWrapper{background-color:rgb(255, 255, 255) !important;box-shadow:rgb(230, 232, 236) 0px 0px 0px 1px !important;color:rgb(26, 29, 36) !important;border-bottom-color:rgb(230, 232, 236) !important;overflow:hidden !important}
div#ProductContentWrapper>div.InnerContent>div.ProductVariantSection>div.ProductVariantListWrapper>div.SectionTitle{color:rgb(26, 29, 36) !important;--lt-m:-20.4px -20.4px 16px -20.4px !important;--lt-p:16px 20.4px 16px 20.4px !important}
div#ProductContentWrapper>div.InnerContent>div.ProductVariantSection>div.ProductVariantListWrapper>div.SectionTitle>h5{color:rgb(26, 29, 36) !important}
div#SelectDonmationCloseAction{color:rgb(26, 29, 36) !important}
div#ProductContentWrapper>div.InnerContent>div.ProductVariantSection>div.ProductVariantListWrapper>div.ProductVariantList{color:rgb(26, 29, 36) !important}
div.InnerContent>div.ProductVariantSection>div.ProductVariantListWrapper>div.ProductVariantList>div.VariantItemOption>div.Icon{color:rgb(26, 29, 36) !important}
div.InnerContent>div.ProductVariantSection>div.ProductVariantListWrapper>div.ProductVariantList>div.VariantItemOption>div.VariantName{color:rgb(26, 29, 36) !important}
div.ProductVariantSection>div.ProductVariantListWrapper>div.ProductVariantList>div.VariantItemOption>div.VariantName>span.VariantAvailabilityLabel{color:rgb(26, 29, 36) !important}
div.InnerContent>div.ProductVariantSection>div.ProductVariantListWrapper>div.ProductVariantList>div.VariantItemOption>div.VariantPrice{color:rgb(26, 29, 36) !important}
div.ProductVariantSection>div.ProductVariantListWrapper>div.ProductVariantList>div.VariantItemOption>div.VariantPrice>div.SellingPrice{color:#F29A00 !important}
div.ProductVariantSection>div.ProductVariantListWrapper>div.ProductVariantList>div.VariantItemOption>div.VariantPrice>div.OriginalPrice{}
div#ProductContentWrapper>div.InnerContent>div.ActionSection{color:rgb(26, 29, 36) !important}
div#OrderQuantitySection{background-color:rgb(255, 255, 255) !important;box-shadow:rgb(230, 232, 236) 0px 0px 0px 1px !important;color:rgb(26, 29, 36) !important;border-bottom-color:rgb(230, 232, 236) !important;overflow:hidden !important}
div#OrderQuantitySection>div.SectionTitle{color:rgb(26, 29, 36) !important;--lt-m:-20.4px -20.4px 16px -20.4px !important;--lt-p:16px 20.4px 16px 20.4px !important}
div#OrderQuantitySection>div.SectionTitle>h5{color:rgb(26, 29, 36) !important}
div#QtyWrapper{background-color:rgb(255, 255, 255) !important;box-shadow:rgba(16, 24, 40, 0.04) 0px 1px 2px, rgb(230, 232, 236) 0px 0px 0px 1px !important;color:rgb(26, 29, 36) !important}
div#QtyWrapper>div.T{color:rgb(26, 29, 36) !important}
div#QtyWrapper>div.C{color:rgb(26, 29, 36) !important}
div#QtyWrapper>div.C>div.QtyAdjustBox{background-color:rgb(255, 255, 255) !important;box-shadow:rgb(230, 232, 236) 0px 0px 0px 1px !important;color:rgb(26, 29, 36) !important}
div#QtyWrapper>div.C>div.QtyAdjustBox>a.ActionBtn.IncreaseQty{color:#F29A00 !important}
div#QtyWrapper>div.C>div.QtyAdjustBox>a.ActionBtn.IncreaseQty>i.fa.fa-plus{color:#F29A00 !important}
div#QtyWrapper>div.C>div.QtyAdjustBox>a.ActionBtn.IncreaseQty>span{position:absolute !important;width:1px !important;height:1px !important;padding:0px !important;margin:-1px !important;overflow:hidden !important;clip:rect(0px, 0px, 0px, 0px) !important;white-space:nowrap !important;border:0px !important;color:#F29A00 !important}
div#QtyWrapper>div.C>div.QtyAdjustBox>a.ActionBtn.DeductQty{color:#F29A00 !important}
div#QtyWrapper>div.C>div.QtyAdjustBox>a.ActionBtn.DeductQty>i.fa.fa-minus{color:#F29A00 !important}
div#QtyWrapper>div.C>div.QtyAdjustBox>a.ActionBtn.DeductQty>span{position:absolute !important;width:1px !important;height:1px !important;padding:0px !important;margin:-1px !important;overflow:hidden !important;clip:rect(0px, 0px, 0px, 0px) !important;white-space:nowrap !important;border:0px !important;color:#F29A00 !important}
div#QtyWrapper>div.C>div.QtyAdjustBox>input{color:rgb(26, 29, 36) !important}
div#OrderPurchaseSummary{background-color:rgb(255, 255, 255) !important;box-shadow:rgb(230, 232, 236) 0px 0px 0px 1px !important;color:rgb(26, 29, 36) !important;border-bottom-color:rgb(230, 232, 236) !important;overflow:hidden !important}
div#OrderPurchaseSummary>div.SectionTitle{color:rgb(26, 29, 36) !important;--lt-m:-20.4px -20.4px 16px -20.4px !important;--lt-p:16px 20.4px 16px 20.4px !important}
div#OrderPurchaseSummary>div.SectionTitle>h5{color:rgb(26, 29, 36) !important}
div#SummaryDetail{background-color:rgb(244, 245, 247) !important;color:rgb(26, 29, 36) !important}
div#SummaryDetail>div.T{color:rgb(26, 29, 36) !important}
div#DenominationDisplay.C{color:rgb(26, 29, 36) !important}
div#TotalPriceDisplay.C{color:#F29A00 !important}
div#PurchaseActionSection{color:rgb(26, 29, 36) !important}
div#ProductContentWrapper>div.InnerContent>div.ProductContentSection{color:rgb(26, 29, 36) !important}
div#ProductContentWrapper>div.InnerContent>div.ProductContentSection>div.Content{color:rgb(26, 29, 36) !important}
div#ProductDescriptionContent{background-color:rgb(255, 255, 255) !important;box-shadow:rgb(230, 232, 236) 0px 0px 0px 1px !important;color:rgb(26, 29, 36) !important;border-bottom-color:rgb(230, 232, 236) !important;overflow:hidden !important}
@media (min-width:768px) and (max-width:1199px),(min-width:1200px){div#ProductDescriptionContent>div.ContentTitle{color:rgb(26, 29, 36) !important;--lt-m:-30px -30px 22px -30px !important;--lt-p:16px 30px 16px 30px !important}}
@media (max-width:767px){div#ProductDescriptionContent>div.ContentTitle{color:rgb(26, 29, 36) !important;--lt-m:-30px -24px 22px -24px !important;--lt-p:16px 24px 16px 24px !important}}
div#ProductDescriptionContent>article{color:rgb(107, 114, 128) !important}
div#ProductDescriptionContent>article>h2{color:rgb(26, 29, 36) !important}
div#ProductDescriptionContent>article>p{}
div#ProductDescriptionContent>article>hr{color:rgb(107, 114, 128) !important}
div#ProductDescriptionContent>article>p>strong{}
div#ProductDescriptionContent>article>p>a.decorated-link{}
div#ProductGuidance{background-color:rgb(255, 255, 255) !important;box-shadow:rgb(230, 232, 236) 0px 0px 0px 1px !important;color:rgb(26, 29, 36) !important;border-bottom-color:rgb(230, 232, 236) !important;overflow:hidden !important}
@media (min-width:768px) and (max-width:1199px),(min-width:1200px){div#ProductGuidance>div.ContentTitle{color:rgb(26, 29, 36) !important;--lt-m:-30px -30px 22px -30px !important;--lt-p:16px 30px 16px 30px !important}}
@media (max-width:767px){div#ProductGuidance>div.ContentTitle{color:rgb(26, 29, 36) !important;--lt-m:-30px -24px 22px -24px !important;--lt-p:16px 24px 16px 24px !important}}
div#ProductGuidance>article{color:rgb(107, 114, 128) !important}
div#ProductGuidance>article>h2{color:rgb(26, 29, 36) !important}
div#ProductGuidance>article>ol{color:rgb(107, 114, 128) !important}
div#ProductGuidance>article>ol>li{}
body>script{color:rgb(26, 29, 36) !important}
div#LiveChatWidgetSection{color:rgb(26, 29, 36) !important}
script#ss_chat{color:rgb(26, 29, 36) !important}
body>div{color:rgb(26, 29, 36) !important}
body>div>div{color:rgb(26, 29, 36) !important}
body>div>div>div.nice-toast-wrapper.top-left{color:rgb(26, 29, 36) !important}
body>div>div>div.nice-toast-wrapper.top-center{color:rgb(26, 29, 36) !important}
body>div>div>div.nice-toast-wrapper.top-right{color:rgb(26, 29, 36) !important}
body>div>div>div.nice-toast-wrapper.bottom-left{color:rgb(26, 29, 36) !important}
body>div>div>div.nice-toast-wrapper.bottom-center{color:rgb(26, 29, 36) !important}
body>div>div>div.nice-toast-wrapper.bottom-right{color:rgb(26, 29, 36) !important}
body>salesmartly-chat-widget{color:rgb(26, 29, 36) !important}
@media (min-width:768px) and (max-width:1199px),(min-width:1200px){{--header-height:73px !important;background:rgb(243, 242, 239) !important}}
@media (max-width:767px){{--header-height:66px !important;background:rgb(243, 242, 239) !important}}
a#GiftCardMenu>span{display:inline-flex !important;align-items:center !important;gap:8px !important}
a#DirectTopUpMenu>span{display:inline-flex !important;align-items:center !important;gap:8px !important}
a#GiftCardMenu{--sxUl:0px !important}
a#DirectTopUpMenu{--sxUl:0px !important}
div#OrderDetailSection{background-color:rgb(255, 255, 255) !important;box-shadow:rgb(230, 232, 236) 0px 0px 0px 1px !important;color:rgb(26, 29, 36) !important;border-bottom-color:rgb(230, 232, 236) !important;overflow:hidden !important}
@media (min-width:768px) and (max-width:1199px),(min-width:1200px){div#OrderDetailSection>div.SectionTitle{color:rgb(26, 29, 36) !important;--lt-m:-20.4px -20.4px 16px -20.4px !important;--lt-p:16px 20.4px 16px 20.4px !important}}
@media (max-width:767px){div#OrderDetailSection>div.SectionTitle{color:rgb(26, 29, 36) !important;--lt-m:-18px -18px 16px -18px !important;--lt-p:16px 18px 16px 18px !important}}
div#OrderDetailSection>div.SectionTitle>h5{color:rgb(26, 29, 36) !important}
div#OrderDetailSection>div.DirectTopUpFieldWrapper{color:rgb(26, 29, 36) !important}
div#OrderDetailSection>div.DirectTopUpFieldWrapper>div.DirectTopUpField{background-color:#fff !important;color:rgb(26, 29, 36) !important}
div#OrderDetailSection>div.DirectTopUpFieldWrapper>div.DirectTopUpField>span{color:rgb(26, 29, 36) !important}
div#OrderDetailSection>div.DirectTopUpFieldWrapper>div.DirectTopUpField>input{color:rgb(26, 29, 36) !important;background:transparent !important}
div#ProductDescriptionContent>article>ul.product-copy-list{color:rgb(107, 114, 128) !important}
div#ProductDescriptionContent>article>ul.product-copy-list>li{}
div#ProductDescriptionContent>article>ul.product-copy-list>li>strong{}
div#ProductDescriptionContent>article>ul.product-copy-list>li>a.decorated-link{}
h2#MLBBTopUp{color:rgb(26, 29, 36) !important}
div#ProductGuidance>article>ol.product-copy-steps{color:rgb(107, 114, 128) !important}
div#ProductGuidance>article>ol.product-copy-steps>li{}
div#ProductGuidance>article>ol.product-copy-steps>li>strong{}
div#ProductGuidance>article>ol.product-copy-steps>li>a.decorated-link{}
h2#MLBBAccount{color:rgb(26, 29, 36) !important}
div#ProductFAQ{background-color:rgb(255, 255, 255) !important;box-shadow:rgb(230, 232, 236) 0px 0px 0px 1px !important;color:rgb(26, 29, 36) !important;border-bottom-color:rgb(230, 232, 236) !important;overflow:hidden !important}
@media (min-width:768px) and (max-width:1199px),(min-width:1200px){div#ProductFAQ>h2.ContentTitle{color:rgb(26, 29, 36) !important;--lt-m:-30px -30px 22px -30px !important;--lt-p:16px 30px 16px 30px !important}}
@media (max-width:767px){div#ProductFAQ>h2.ContentTitle{color:rgb(26, 29, 36) !important;--lt-m:-30px -24px 22px -24px !important;--lt-p:16px 24px 16px 24px !important}}
div#ProductFAQ>article{color:rgb(107, 114, 128) !important}
#ProductFAQ .faq-item{color:rgb(107, 114, 128) !important}
#ProductFAQ .faq-item>h3{color:rgb(26, 29, 36) !important}
#ProductFAQ .faq-item>p{}
#ProductFAQ .faq-item{color:rgb(107, 114, 128) !important}
#ProductFAQ .faq-item>h3{color:rgb(26, 29, 36) !important}
#ProductFAQ .faq-item>p{}
#ProductFAQ .faq-item{color:rgb(107, 114, 128) !important}
#ProductFAQ .faq-item>h3{color:rgb(26, 29, 36) !important}
#ProductFAQ .faq-item>p{}
#ProductFAQ .faq-item{color:rgb(107, 114, 128) !important}
#ProductFAQ .faq-item>h3{color:rgb(26, 29, 36) !important}
#ProductFAQ .faq-item>p{}
#ProductFAQ .faq-item{color:rgb(107, 114, 128) !important}
#ProductFAQ .faq-item>h3{color:rgb(26, 29, 36) !important}
#ProductFAQ .faq-item>p{}
#ProductFAQ .faq-item>ul.product-copy-list{color:rgb(107, 114, 128) !important}
#ProductFAQ .faq-item>ul.product-copy-list>li{}
#ProductFAQ .faq-item>ul.product-copy-list>li>strong{}
#ProductFAQ .faq-item>p>a.decorated-link{}
#ProductFAQ .faq-item{color:rgb(107, 114, 128) !important}
#ProductFAQ .faq-item>h3{color:rgb(26, 29, 36) !important}
#ProductFAQ .faq-item>p{}
#ProductFAQ .faq-item{color:rgb(107, 114, 128) !important}
#ProductFAQ .faq-item>h3{color:rgb(26, 29, 36) !important}
#ProductFAQ .faq-item>p{}
#ProductFAQ .faq-item>p>a.decorated-link{}
#ProductFAQ .faq-item{color:rgb(107, 114, 128) !important}
#ProductFAQ .faq-item>h3{color:rgb(26, 29, 36) !important}
#ProductFAQ .faq-item>p{}
#ProductFAQ .faq-item>p>a.decorated-link{}
#ProductFAQ .faq-item{color:rgb(107, 114, 128) !important}
#ProductFAQ .faq-item>h3{color:rgb(26, 29, 36) !important}
#ProductFAQ .faq-item>p{}
#ProductFAQ .faq-item{color:rgb(107, 114, 128) !important}
#ProductFAQ .faq-item>h3{color:rgb(26, 29, 36) !important}
#ProductFAQ .faq-item>p{}
#ProductFAQ .faq-item>p>a.decorated-link{}
}

/* 商品页顶部（Jacky 2026-10-17，设计稿 设计稿/商品页顶部-20261017 第 27/28 张）：
   小图在左、名字 + 标签放在图的高度中间、说明不要框（电脑在国旗下面，手机在图下面整行）；
   深色背景（颜色由 product-detail.js 从商品图取，放进 --sxHeroD/M/Da/Db/Dc）：
   游戏（.sxGame）右边放淡出的商品大图；礼品卡用单色 + 斜光。背景延伸到下面格子后面再淡掉。 */
html body #ProductDisplayWrapper{position:relative;overflow:hidden;isolation:isolate;background:none!important;padding-bottom:56px!important}
html body #ProductContentWrapper{position:relative;z-index:1;margin-top:-56px!important;padding-top:0!important} /* 原本上面 30px：顶部图下面的空比上面多 30（Jacky 2026-10-17）→ 0，上下一样 */
html body #ProductDisplayWrapper::before,html body #ProductDisplayWrapper::after{content:"";display:block;position:absolute;inset:0;z-index:-2;pointer-events:none;-webkit-mask-image:linear-gradient(#000 0,#000 calc(100% - 150px),transparent 100%);mask-image:linear-gradient(#000 0,#000 calc(100% - 150px),transparent 100%)}
html body #ProductDisplayWrapper::before{background:linear-gradient(160deg,var(--sxHeroD,#1F2A3A) 0%,var(--sxHeroM,#3B4E66) 100%)}
html body #ProductDisplayWrapper::after{z-index:-1;background:linear-gradient(115deg,transparent 0 16%,rgba(255,255,255,.08) 16.3% 29%,transparent 29.3% 50%,rgba(255,255,255,.05) 50.3% 56%,transparent 56.3% 68%,rgba(255,255,255,.10) 68.3% 85%,transparent 85.3%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
html body #ProductDisplayWrapper.sxGame::before{background:linear-gradient(90deg,var(--sxHeroDa) 0%,var(--sxHeroDa) 39%,var(--sxHeroDb) 64%,var(--sxHeroDc) 100%),var(--sxHeroImg) right 30%/62% auto no-repeat,var(--sxHeroD);filter:saturate(1.1)}
html body #ProductDisplayWrapper.sxGame::after{background:linear-gradient(115deg,transparent 0 62%,rgba(255,255,255,.06) 62.3% 74%,transparent 74.3%)}
@media (max-width:767px){html body #ProductDisplayWrapper.sxGame::before{background:linear-gradient(90deg,var(--sxHeroDa) 0%,var(--sxHeroDa) 25%,hsl(0 0% 0%/0) 100%),linear-gradient(var(--sxHeroDb),var(--sxHeroDb)),var(--sxHeroImg) right top/100% auto no-repeat,var(--sxHeroD)}}
@media (min-width:768px){html body #ProductDisplayWrapper{padding-bottom:96px!important}html body #ProductContentWrapper{margin-top:-96px!important}}
/* 排法 */
html body #ProductDisplayWrapper .InnerContent{display:grid!important;grid-template-columns:auto 1fr!important;grid-template-areas:"img top" "img title" "img spec" "img bot" "note note"!important;grid-template-rows:1fr auto auto 1fr auto!important;column-gap:16px!important;row-gap:0!important;align-items:start!important;justify-items:start!important;text-align:left!important;max-width:1392px!important;margin:0 auto!important;padding:20px 16px!important}
html body #ProductDisplayWrapper .ProductInfo{display:contents!important}
html body #ProductDisplayWrapper .ProductImage{grid-area:img!important;width:96px!important;height:auto!important;margin:0!important;align-self:start!important}
html body #ProductDisplayWrapper .ProductImage img{width:100%!important;height:auto!important;aspect-ratio:auto!important;object-fit:contain!important;border-radius:12px!important;box-shadow:0 14px 34px rgba(16,24,40,.25)!important}
html body #ProductDisplayWrapper .ProductTitle{grid-area:title!important;margin:0 0 6px!important;width:auto!important;align-self:start!important}
html body #ProductDisplayWrapper .ProductTitle h1{text-align:left!important;font-size:20px!important;line-height:1.2!important;margin:0!important}
html body #ProductDisplayWrapper .Specification{grid-area:spec!important;justify-content:flex-start!important;margin:0!important;flex-wrap:wrap!important;gap:6px 14px!important}
html body #ProductDisplayWrapper #ImportantNotes{grid-area:note!important;display:flex!important;align-items:flex-start!important;gap:8px!important;margin:16px 0 0!important;padding:0!important;width:100%!important;max-width:none!important;justify-self:stretch!important}
html body #ProductDisplayWrapper #ImportantNotes>div{background:none!important;box-shadow:none!important;border:0!important;border-radius:0!important;padding:0!important;margin:0!important;line-height:18.6px!important}
html body #ProductDisplayWrapper #ImportantNotes .sxNi{flex:none!important;margin:0!important;position:static!important;transform:none!important;line-height:18.6px!important;height:18.6px!important;display:flex!important;align-items:center!important}
@media (min-width:768px){
 html body #ProductDisplayWrapper .InnerContent{grid-template-areas:"img top" "img title" "img spec" "img note" "img bot"!important;grid-template-rows:1fr auto auto auto 1fr!important;column-gap:28px!important;padding:28px 0!important;width:calc(100% - 40px)!important}
 html body #ProductDisplayWrapper .ProductImage{width:150px!important}
 html body #ProductDisplayWrapper .ProductTitle h1{font-size:24px!important}
 html body #ProductDisplayWrapper #ImportantNotes{margin-top:14px!important;max-width:620px!important}
}
@media (min-width:1024px){html body #ProductDisplayWrapper .InnerContent{width:calc(100% - 48px)!important}}
/* 字白色、灯泡黄色（原本的深色字规则在 sxinline 层，要放同一层才盖得过） */
@layer sxinline{
 html body div#ProductDisplayWrapper > div.InnerContent > div.ProductInfo > div.ProductTitle > h1,
 html body div#ProductDisplayWrapper > div.InnerContent > div.ProductInfo > ul.Specification > li > div.C,
 html body div#ProductDisplayWrapper > div.InnerContent > div.ProductInfo > ul.Specification > li > div.C *{color:#fff!important;-webkit-text-fill-color:#fff!important}
 html body div#ProductDisplayWrapper > div.InnerContent > div.ProductInfo > div#ImportantNotes > div,
 html body div#ProductDisplayWrapper > div.InnerContent > div.ProductInfo > div#ImportantNotes > div *{color:rgba(255,255,255,.9)!important;-webkit-text-fill-color:rgba(255,255,255,.9)!important}
 html body div#ProductDisplayWrapper #ImportantNotes .sxNi,html body div#ProductDisplayWrapper #ImportantNotes .sxNi *{color:#FFD24A!important;-webkit-text-fill-color:#FFD24A!important}
}
html body #ProductDisplayWrapper .ProductTitle h1,html body #ProductDisplayWrapper .Specification,html body #ProductDisplayWrapper .Specification *{color:#fff!important}
html body #ProductDisplayWrapper #ImportantNotes>div{color:rgba(255,255,255,.9)!important}
/* 购买区拿掉 3 条标题（选面额 / 填资料 / 总价）；手机弹出的选面额面板照样有标题和关闭按钮。
   「面板打开」的判断只限手机（≤800）：电脑按面额时原本程序也会加同一个 class，标题会跑回来（Jacky 2026-10-17 截图） */
@media (min-width:801px){html body #ProductContentWrapper .SectionTitle.LtHead{display:none!important}html body #ProductContentWrapper .ProductVariantListWrapper{padding-top:16px!important}}
@media (max-width:800px){html body:not(.product-overlay-content-activated) #ProductContentWrapper .SectionTitle.LtHead{display:none!important}}
@media (max-width:800px){html body:not(.product-overlay-content-activated) #ProductContentWrapper .ProductVariantListWrapper,html body #ProductContentWrapper .ActionSection>div{padding-top:16px!important}}
/* 手机选面额面板：标题贴齐面板顶部（原本上面多一条 16px 白边），标题条上下 16 → 12（Jacky 2026-10-17：太高） */
@media (max-width:800px){html body.product-overlay-content-activated #ProductContentWrapper .ProductVariantListWrapper{padding-top:0!important}}
@media (max-width:800px){html body.product-overlay-content-activated #ProductContentWrapper .ProductVariantListWrapper>.SectionTitle{padding-top:12px!important;padding-bottom:12px!important;margin-top:0!important}}
/* Important Notes 灯泡图标（Material Symbols Rounded「tips_and_updates」，只留这一个图示） */
@font-face{font-family:"Material Symbols Rounded";font-style:normal;font-weight:500;font-display:block;src:url("Tools/material/tips_and_updates.woff2") format("woff2")}
/* 2026-10-14 字统一（照 SEAGM，全站）：原价、订单摘要标签灰一般 */
html body .VariantItemOption .VariantPrice .OriginalPrice{font-weight:400!important}
html body #OrderPurchaseSummary #SummaryDetail .T{font-weight:400!important;color:#6B7280!important}
html body #OrderPurchaseSummary #SummaryDetail #DenominationDisplay.C{font-weight:600!important}

/* 2026-10-17 Jacky：卡片标题条下面空太多（标题 16 + 里面间距 18 = 34），手机变很长 → 拿掉标题下面的 16，只留里面间距，跟两边差不多 */
html body main .ProductVariantListWrapper>.LtHead.LtHead,html body main .ActionSection>*>.LtHead.LtHead{margin-bottom:0!important}
/* 2026-10-17 Jacky：手机打开选面额面板时，底部栏要藏起来（原本盖在面板最下面） */
@media (max-width:800px){html body.product-overlay-content-activated .SxTab{display:none!important}}
@layer sxinline{@media (max-width:800px){html body.product-overlay-content-activated .SxTab{display:none!important}}}
/* 选面额面板标题不放号码 1（商品页已经没有 1、2、3，Jacky 2026-10-17） */
@media (max-width:800px){html body.product-overlay-content-activated #ProductContentWrapper .ProductVariantListWrapper>.SectionTitle::before{display:none!important;content:none!important}}
@layer sxinline{@media (max-width:800px){html body.product-overlay-content-activated #ProductContentWrapper .ProductVariantListWrapper>.SectionTitle::before{display:none!important;content:none!important}}}
/* 选面额面板：灰色清单上面两个角改直角（原本圆角贴着标题条，角露出白色缺口） */
@media (max-width:800px){html body.product-overlay-content-activated #ProductContentWrapper .ProductVariantListWrapper>.ProductVariantList{border-top-left-radius:0!important;border-top-right-radius:0!important}}
@layer sxinline{@media (max-width:800px){html body.product-overlay-content-activated #ProductContentWrapper .ProductVariantListWrapper>.ProductVariantList{border-top-left-radius:0!important;border-top-right-radius:0!important}}}
/* 灯泡用金色渐变（跟商标一样）Jacky 2026-10-17 选 C */
html body div#ProductDisplayWrapper #ImportantNotes .sxNi .msb{background:linear-gradient(135deg,#FFE27A,#FFB400 55%,#E08A00)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent!important}
@layer sxinline{html body div#ProductDisplayWrapper #ImportantNotes .sxNi .msb{background:linear-gradient(135deg,#FFE27A,#FFB400 55%,#E08A00)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent!important}}
/* 购买区三个框：上下空位一样，跟左右一样（手机 18、电脑 20；框底有 2px 边线，所以下面 padding 少 2）；最后一行下面不再多 2px（Jacky 2026-10-17） */
@media (max-width:800px){html body:not(.product-overlay-content-activated) #ProductContentWrapper .ProductVariantListWrapper,html body #ProductContentWrapper .ActionSection>div{padding-top:18px!important;padding-bottom:16px!important}}
@media (min-width:801px){html body #ProductContentWrapper .ProductVariantListWrapper,html body #ProductContentWrapper .ActionSection>div{padding-top:20px!important;padding-bottom:18px!important}}
html body #ProductContentWrapper .ProductVariantListWrapper>:last-child,html body #ProductContentWrapper .ActionSection>div>:last-child,html body #ProductContentWrapper .ActionSection>div>:last-child>:last-child,html body #ProductContentWrapper .ProductVariantList>:last-child{margin-bottom:0!important}
@layer sxinline{
/* 购买区三个框：上下空位一样，跟左右一样（手机 18、电脑 20；框底有 2px 边线，所以下面 padding 少 2）；最后一行下面不再多 2px（Jacky 2026-10-17） */
@media (max-width:800px){html body:not(.product-overlay-content-activated) #ProductContentWrapper .ProductVariantListWrapper,html body #ProductContentWrapper .ActionSection>div{padding-top:18px!important;padding-bottom:16px!important}}
@media (min-width:801px){html body #ProductContentWrapper .ProductVariantListWrapper,html body #ProductContentWrapper .ActionSection>div{padding-top:20px!important;padding-bottom:18px!important}}
html body #ProductContentWrapper .ProductVariantListWrapper>:last-child,html body #ProductContentWrapper .ActionSection>div>:last-child,html body #ProductContentWrapper .ActionSection>div>:last-child>:last-child,html body #ProductContentWrapper .ProductVariantList>:last-child{margin-bottom:0!important}
}
/* 数量框：按了 + / − 后不要留灰底（按住/滑鼠停时才淡金），框长一点 112 → 132（Jacky 2026-10-17） */
html body .QtyAdjustBox.QtyAdjustBox .ActionBtn,html body .QtyAdjustBox.QtyAdjustBox .ActionBtn:focus,html body .QtyAdjustBox.QtyAdjustBox .ActionBtn:focus-visible{background:transparent!important;outline:none!important;box-shadow:none!important;-webkit-tap-highlight-color:transparent}
@media (hover:hover){html body .QtyAdjustBox.QtyAdjustBox .ActionBtn:not([is-disabled="true"]):hover{background:rgba(242,154,0,.12)!important}}
html body .QtyAdjustBox.QtyAdjustBox .ActionBtn:not([is-disabled="true"]):active{background:rgba(242,154,0,.18)!important}
html body #ProductContentWrapper .QtyAdjustBox.QtyAdjustBox{width:132px!important}
html body #ProductContentWrapper .QtyAdjustBox.QtyAdjustBox .ActionBtn{width:36px!important}
html body #ProductContentWrapper .QtyAdjustBox.QtyAdjustBox input{flex:1 1 auto!important;width:auto!important;min-width:0!important}
@layer sxinline{
/* 数量框：按了 + / − 后不要留灰底（按住/滑鼠停时才淡金），框长一点 112 → 132（Jacky 2026-10-17） */
html body .QtyAdjustBox.QtyAdjustBox .ActionBtn,html body .QtyAdjustBox.QtyAdjustBox .ActionBtn:focus,html body .QtyAdjustBox.QtyAdjustBox .ActionBtn:focus-visible{background:transparent!important;outline:none!important;box-shadow:none!important;-webkit-tap-highlight-color:transparent}
@media (hover:hover){html body .QtyAdjustBox.QtyAdjustBox .ActionBtn:not([is-disabled="true"]):hover{background:rgba(242,154,0,.12)!important}}
html body .QtyAdjustBox.QtyAdjustBox .ActionBtn:not([is-disabled="true"]):active{background:rgba(242,154,0,.18)!important}
html body #ProductContentWrapper .QtyAdjustBox.QtyAdjustBox{width:132px!important}
html body #ProductContentWrapper .QtyAdjustBox.QtyAdjustBox .ActionBtn{width:36px!important}
html body #ProductContentWrapper .QtyAdjustBox.QtyAdjustBox input{flex:1 1 auto!important;width:auto!important;min-width:0!important}
}
/* 订单摘要不放 Denomination（上面选面额已经显示）Jacky 2026-10-17：只留 Total */
html body #SummaryDetail#SummaryDetail > .T:first-child,html body #SummaryDetail#SummaryDetail > #DenominationDisplay,html body #SummaryDetail#SummaryDetail > .Sep{display:none!important}
@layer sxinline{
/* 订单摘要不放 Denomination（上面选面额已经显示）Jacky 2026-10-17：只留 Total */
html body #SummaryDetail#SummaryDetail > .T:first-child,html body #SummaryDetail#SummaryDetail > #DenominationDisplay,html body #SummaryDetail#SummaryDetail > .Sep{display:none!important}
}
/* Total 不要灰色框（Jacky 2026-10-17）：直接放在白卡片上 */
html body #OrderPurchaseSummary #SummaryDetail#SummaryDetail{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;border-radius:0!important}
@layer sxinline{
/* Total 不要灰色框（Jacky 2026-10-17）：直接放在白卡片上 */
html body #OrderPurchaseSummary #SummaryDetail#SummaryDetail{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;border-radius:0!important}
}
@media (min-width:801px){html body #ProductContentWrapper #OrderPurchaseSummary#OrderPurchaseSummary{gap:20px!important}} /* 电脑 Total→按钮 也 20 */
@layer sxinline{@media (min-width:801px){html body #ProductContentWrapper #OrderPurchaseSummary#OrderPurchaseSummary{gap:20px!important}} /* 电脑 Total→按钮 也 20 */
}
/* 游戏 ID 框：名字一律 104 宽（最长 Character ID 放得下），每个游戏灰字起点一样；Server 选单不要灰底（Jacky 2026-10-17） */
html body #ProductContentWrapper .DirectTopUpField.DirectTopUpField > span{min-width:104px!important;width:104px!important;flex:0 0 104px!important}
html body #ProductContentWrapper .DirectTopUpField.DirectTopUpField select{background-color:transparent!important}
@layer sxinline{
/* 游戏 ID 框：名字一律 104 宽（最长 Character ID 放得下），每个游戏灰字起点一样；Server 选单不要灰底（Jacky 2026-10-17） */
html body #ProductContentWrapper .DirectTopUpField.DirectTopUpField > span{min-width:104px!important;width:104px!important;flex:0 0 104px!important}
html body #ProductContentWrapper .DirectTopUpField.DirectTopUpField select{background-color:transparent!important}
}
/* Buy Now 下面阴影往下 8：卡片下面多留 4，看起来上下一样（Jacky 2026-10-17） */
@media (max-width:800px){html body #ProductContentWrapper .ActionSection>#OrderPurchaseSummary{padding-bottom:20px!important}}
@media (min-width:801px){html body #ProductContentWrapper .ActionSection>#OrderPurchaseSummary{padding-bottom:22px!important}}
@layer sxinline{
/* Buy Now 下面阴影往下 8：卡片下面多留 4，看起来上下一样（Jacky 2026-10-17） */
@media (max-width:800px){html body #ProductContentWrapper .ActionSection>#OrderPurchaseSummary{padding-bottom:20px!important}}
@media (min-width:801px){html body #ProductContentWrapper .ActionSection>#OrderPurchaseSummary{padding-bottom:22px!important}}
}


/* 灯泡图标是用字体画的（字 tips_and_updates）：字体还没下载时会占一整个字的宽度，说明往右推，下载好才跳回来 → 先固定 1 个字的大小（2026-10-18） */
html body #ImportantNotes .sxGt .msb{width:1em!important;height:1em!important;overflow:hidden!important;white-space:nowrap!important;display:block!important}
html body #ImportantNotes .sxNi{width:auto!important;max-width:26px!important;overflow:hidden!important}
@layer sxinline{
/* 灯泡图标是用字体画的（字 tips_and_updates）：字体还没下载时会占一整个字的宽度，说明往右推，下载好才跳回来 → 先固定 1 个字的大小（2026-10-18） */
html body #ImportantNotes .sxGt .msb{width:1em!important;height:1em!important;overflow:hidden!important;white-space:nowrap!important;display:block!important}
html body #ImportantNotes .sxNi{width:auto!important;max-width:26px!important;overflow:hidden!important}
}