/* Original BOOKOO styles are loaded before these static-page adaptations. */
:root{--font-body-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif;--font-heading-family:"Mona Sans","PingFang SC","Microsoft YaHei",sans-serif;--header-height:0px;--announcement-height:0px}
body{margin:0}.main-content{padding:0!important}split-words,media-element{display:block}.js-invisible{visibility:visible!important;opacity:1!important}
.banner__image{opacity:1!important}.button[aria-disabled="true"]{cursor:default;pointer-events:none}
a:focus-visible{outline:3px solid #0b61cd;outline-offset:5px}.heading{letter-spacing:-.03em}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Keep the original text slots when shorter Chinese translations need less room. */
#shopify-section-template--29555796213944__custom_section_wDz7ty .group-block__content > .rte{min-height:3.2em}
@media(max-width:767px){
#shopify-section-template--29555796213944__custom_section_wDz7ty .group-block__content > .rte{min-height:4.8em}
}

/* Huawei AppGallery entry uses the official AppGallery icon with a localized label. */
.huawei-download{display:block;width:100%}
.huawei-badge{display:flex;align-items:center;gap:4%;width:100%;aspect-ratio:996/320;padding:4% 5%;border:1px solid #a3aaa0;border-radius:8px;background:#20231f;color:#fff;container-type:inline-size;box-sizing:border-box}
.huawei-badge>img{position:static!important;width:22%!important;height:auto!important;flex:none}
.huawei-badge-copy{display:flex;flex-direction:column;align-items:flex-start;gap:2cqw;white-space:nowrap}
.huawei-badge-copy>span{font-size:5.5cqw;line-height:1}
.huawei-badge-copy>strong{font-family:"PingFang SC","Microsoft YaHei",sans-serif;font-size:11.5cqw;font-weight:500;line-height:1}

/* User-supplied banner: original product photo, cleaned wall, and live Chinese type. */
.motto-hero{position:relative;background:#f3eee7;color:#000}
.motto-hero-copy{position:absolute;z-index:2;left:8%;top:33%;width:43%;text-align:left}
.motto-hero-logo{position:absolute;left:0;bottom:calc(100% + 24px);display:block;width:160px;height:auto;max-width:none;object-fit:contain}
.motto-hero-copy h1{margin:0;font-family:var(--font-heading-family);font-size:clamp(24px,2.5vw,50px);font-weight:700;line-height:1.2;letter-spacing:-.025em}
.motto-hero-copy p{margin:3vw 0 0;font-family:var(--font-body-family);font-size:clamp(15px,1.55vw,30px);font-weight:400;line-height:1.6;letter-spacing:0}
.motto-hero-photo{position:relative;aspect-ratio:4000/1866;overflow:hidden;container-type:size}
.motto-hero-art{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max(100cqw,calc(100cqh * 4000 / 1866));height:max(100cqh,calc(100cqw * 1866 / 4000))}
.motto-hero-art>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:fill}
.motto-hero-original{mask-image:linear-gradient(to right,transparent 48%,#000 50%)}
@media(max-width:767px){
 .motto-hero{display:flex;flex-direction:column}
 .motto-hero-copy{position:relative;left:auto;top:auto;width:100%;padding:32px 20px 24px}
 .motto-hero-copy h1{font-size:27px;line-height:1.3}
 .motto-hero-copy p{font-size:16px;line-height:1.7;margin-top:16px}
 .motto-hero-photo{aspect-ratio:1.1}
 .motto-hero-art{left:79%;transform:translate(-79%,-50%)}
}

/* Shared grid tracks align images, titles, descriptions and buttons across all four cards. */
.guide-intro{font-size:16px;line-height:1.6;margin:12px 0 0;text-align:center}
.guide-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:12px;row-gap:12px;margin-top:calc(12px + max(20px,calc(var(--spacing-scale,1) * 45px)))}
.guide-card{display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:12px;justify-items:center;min-width:0;text-align:center}
.guide-card-media{display:block;width:90%;aspect-ratio:1;overflow:hidden;border-radius:30px;align-self:start}
.guide-card-media img{display:block;width:100%;height:100%;object-fit:cover}
.guide-card h3,.guide-card p{margin:0;width:100%;font-family:var(--font-body-family);font-size:16px;line-height:1.6;letter-spacing:0}
.guide-card h3{font-weight:700}
.guide-card-button{width:60%;min-height:52px;align-self:end;white-space:nowrap}
@supports not (grid-template-rows:subgrid){.guide-card{display:flex;flex-direction:column;align-items:center;gap:12px}.guide-card p{flex:1}.guide-card-button{align-self:center}}
@media(max-width:767px){.guide-intro{text-align:left}.guide-grid{grid-template-columns:minmax(0,1fr)}.guide-card{display:flex;flex-direction:column;align-items:center;gap:12px;grid-row:auto}.guide-card-media,.guide-card-button{width:100%}.guide-card-button{align-self:center}}

/* Dedicated portrait artwork supplied by the user for mobile. */
.motto-hero-art>picture{position:absolute;inset:0;display:block;width:100%;height:100%}
.motto-hero-art>picture>img{display:block;width:100%;height:100%;object-fit:fill}
@media(max-width:767px){
 .motto-hero{display:block}
 .motto-hero-photo{aspect-ratio:2026/3208}
 .motto-hero-art{width:100%;height:100%;left:0;top:0;transform:none}
 .motto-hero-original{mask-image:linear-gradient(to bottom,transparent 35%,#000 38%)}
 .motto-hero-copy{position:absolute;left:0;top:11%;width:100%;padding:0 20px;text-align:center}
 .motto-hero-logo{left:50%;transform:translateX(-50%);width:120px;bottom:calc(100% + 20px)}
 .motto-hero-copy h1{font-size:clamp(24px,6.8vw,36px);line-height:1.3}
 .motto-hero-copy p{font-size:clamp(13px,3.9vw,18px);line-height:1.65;margin-top:clamp(18px,5.2vw,28px)}
}
/* Keep guide content above the original theme's decorative section background layer. */
.guide-section>.page-width{position:relative;z-index:1}
.site-filing{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 20px;padding:24px 20px;text-align:center;background:#fff;border-top:1px solid #eee;font-family:var(--font-body-family);font-size:12px;line-height:1.6;color:#767676}
.site-filing a{display:inline-flex;align-items:center;gap:5px;color:inherit;text-decoration:none;white-space:nowrap}
.site-filing img{display:block;width:20px;height:20px;object-fit:contain;flex:none}
.site-filing a:hover{text-decoration:underline;color:#171717}
@media(max-width:480px){.site-filing{flex-direction:column}}