/* One public typography scale, based on the approved Chinese homepage.
 * Loaded after the theme, home and legacy page styles. These narrowly scoped
 * !important declarations also override Gutenberg's inline preset sizes.
 * Language changes the glyph family only; it never changes the size tokens.
 */
:root{
 --ys-type-sans:Manrope,Arial,"Noto Sans SC","Noto Sans JP",sans-serif;
 --ys-type-heading:var(--ys-type-sans);
 --ys-type-h1:clamp(30px,2.8vw,44px);
 --ys-type-h2:clamp(28px,2.8vw,40px);
 --ys-type-h3:clamp(24px,2.2vw,30px);
 --ys-type-body:15px;--ys-type-lead:18px;--ys-type-card:18px;
 --ys-type-caption:11px;--ys-type-control:12px;--ys-type-nav:12px;
 --ys-type-title-leading:1.38;
}
html[lang^="zh"]{--ys-type-heading:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;--ys-type-sans:Manrope,"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif}
html[lang^="ja"]{--ys-type-heading:Manrope,"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;--ys-type-sans:var(--ys-type-heading)}
html[lang^="ko"]{--ys-type-heading:Manrope,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;--ys-type-sans:var(--ys-type-heading)}
body{font-family:var(--ys-type-sans);font-size:var(--ys-type-body)}
body :is(main,.ys-home) :is(h1,h2,h3,h4,h5,h6){
 font-family:var(--ys-type-heading)!important;font-weight:300!important;
 line-height:1.35!important;letter-spacing:.02em!important;
 overflow-wrap:break-word;
}
body :is(main,.ys-home) h1{font-size:var(--ys-type-h1)!important;line-height:var(--ys-type-title-leading)!important;letter-spacing:.035em!important;white-space:normal!important}
body :is(main,.ys-home) h2{font-size:var(--ys-type-h2)!important}
body :is(main,.ys-home) h3{font-size:var(--ys-type-h3)!important}
body :is(main,.ys-home) h4{font-size:22px!important}
body :is(main,.ys-home) h5{font-size:18px!important}
body :is(main,.ys-home) h6{font-size:16px!important}
body :is(main,.ys-home) :is(h1,h2,h3,h4,h5,h6) :is(em,i,a){font:inherit!important;letter-spacing:inherit!important;white-space:normal!important}
body :is(main,.ys-home) :is(p,li,dt,dd){font-family:var(--ys-type-sans)!important;font-size:var(--ys-type-body)!important;line-height:1.65!important;letter-spacing:normal!important}
body :is(main,.ys-home) :is(.yunsilver-lead,.yunsilver-closing){font-size:var(--ys-type-lead)!important;line-height:1.5!important}
body :is(main,.ys-home) :is(figcaption,figcaption p,.ys-carousel-caption,.ys-scene-caption,.ys-film-status,.wc-block-components-product-rating,.product_meta){font-family:var(--ys-type-sans)!important;font-size:var(--ys-type-caption)!important;line-height:1.5!important;letter-spacing:.02em!important}
body .ys-home .ys-kicker{font-size:var(--ys-type-caption)!important;line-height:1.6!important;letter-spacing:.12em!important}
body .ys-home .ys-small{font-size:13px!important}
body :is(.wc-block-product-template,.wc-block-grid__products,ul.products) :is(h2,h3,.wp-block-post-title,.wc-block-grid__product-title){font-family:var(--ys-type-heading)!important;font-size:var(--ys-type-card)!important;font-weight:400!important;line-height:1.4!important;letter-spacing:normal!important}
body :is(main,.ys-home) :is(button,.button,.wp-block-button__link,.wp-element-button,.ys-button,.ys-text-link,.ys-play,summary){font-family:var(--ys-type-sans)!important;font-size:var(--ys-type-control)!important;font-weight:400!important;line-height:1.5!important;letter-spacing:normal!important}
body :is(main,.ys-home) :is(input,select,textarea){font-family:var(--ys-type-sans)!important;font-size:16px!important;font-weight:400!important;line-height:1.5!important;letter-spacing:normal!important}
body :is(main,.ys-home) label{font-family:var(--ys-type-sans)!important;font-size:14px!important;line-height:1.65!important;letter-spacing:normal!important}
body :is(.ys-nav,.ys-shared-nav,.wp-block-navigation) a{font-family:var(--ys-type-sans)!important;font-size:var(--ys-type-nav)!important;font-weight:400!important;line-height:1.65!important;letter-spacing:normal!important}
body :is(.ys-language,.ys-shared-language) :is(select,label){font-family:var(--ys-type-sans)!important;font-size:var(--ys-type-control)!important;letter-spacing:normal!important}
body :is(footer,.yunsilver-footer) :is(p,a,li){font-family:var(--ys-type-sans)!important;font-size:12px!important;line-height:1.65!important;letter-spacing:normal!important}
body :is(footer,.yunsilver-footer) :is(.wp-block-site-tagline,.ys-footer-top>p){font-family:var(--ys-type-heading)!important;font-size:22px!important;font-weight:300!important;line-height:1.4!important}
body :is(footer,.yunsilver-footer) :is(h2,h3,h4){font-family:var(--ys-type-sans)!important;font-size:12px!important;font-weight:400!important;line-height:1.5!important;letter-spacing:normal!important}
@media(max-width:640px){
 :root{--ys-type-h1:clamp(30px,7.5vw,34px);--ys-type-h2:32px;--ys-type-h3:23px;--ys-type-body:14px;--ys-type-lead:17px;--ys-type-card:15px;--ys-type-nav:10px;--ys-type-title-leading:1.46}
 body :is(footer,.yunsilver-footer) :is(.wp-block-site-tagline,.ys-footer-top>p){font-size:18px!important}
 /* Native selects size themselves to their longest translated option. */
 body main .wp-block-group:has(>.wc-block-catalog-sorting){flex-wrap:wrap!important;gap:12px!important}
 body main .wc-block-catalog-sorting{flex-basis:100%;width:100%;min-width:0;max-width:100%}
 body main .wc-block-catalog-sorting :is(form,select){box-sizing:border-box;width:100%;min-width:0;max-width:100%;margin:0}
 body :is(.ys-nav,.ys-shared-nav){align-items:center!important;gap:4px!important}
 body :is(.ys-nav,.ys-shared-nav) a{min-width:0;white-space:normal!important;overflow-wrap:break-word;text-align:center}
}
@media(max-width:380px){body .ys-language-label{display:none}}

@media(max-width:640px){body :is(.ys-nav,.ys-shared-nav){gap:8px!important}}

/* Home joined the navigation and the language menu gained a flag. Below 1100px the language control shrinks to flag + arrow (the names are in the menu), and a nav item never shrinks below its longest word, so long German and Spanish labels wrap between words instead of running together or pushing the header past the screen. */
@media(max-width:1100px){
 body .ys-lang-label{display:none}
 body .ys-lang-menu>summary{padding-right:28px}
 body .ys-lang-menu>summary .ys-lang-current{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 body :is(.ys-nav,.ys-shared-nav) a{min-width:min-content}
}
@media(min-width:761px) and (max-width:1100px){
 body :is(.ys-shared-header,.ys-header){gap:16px}
 body :is(.ys-nav,.ys-shared-nav){flex:1 1 0;min-width:0;gap:12px}
 body :is(.ys-nav,.ys-shared-nav) a{white-space:normal;text-align:center;overflow-wrap:normal}
}