/* Quiet language controls across the catalog and customer guides. */
.language-control{position:relative;display:inline-grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:50%;color:#30372c;background:transparent}
.language-globe{display:block;width:22px;height:22px;pointer-events:none}
.language-control:hover{background:#e8ecdc}
.language-control:focus-within{outline:2px solid #728346;outline-offset:3px}
.language-switcher{position:absolute;inset:0;width:100%;min-width:0;height:100%;min-height:44px;margin:0;padding:0;border:0;opacity:0;cursor:pointer;font:16px/1.4 Arial,sans-serif}
@media(forced-colors:active){.language-control{color:ButtonText;border:1px solid ButtonText}.language-control:focus-within{outline-color:Highlight}}
#detail-language{position:absolute;top:10px;right:62px;z-index:4}
#detail-language .language-control{background:#f7f5f0f2;border:1px solid #dedfd4}
@media(max-width:600px){
 header{gap:10px}
 header .brand{font-size:22px;flex:none}
 header nav{gap:6px;font-size:11px}
 header nav{flex:none}
 header nav>a{white-space:nowrap}
 header nav>a:not([href*="instagram.com"]){display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;flex-shrink:0}
 header nav .contact>.mobile-icon{display:none}
 header nav .contact:after{font-size:11px}
 #detail-language{position:fixed}
 html[lang=en] .announcement{letter-spacing:1.2px}
 html[lang=en] .announcement span{font-size:9px}
 html[lang=en] .hero .thai-intro{font-size:18px}
 html[lang=en] .fit-heading h2{font-size:26px}
 html[lang=en] .fit-instagram{white-space:normal}
 html[lang=en] .results-bar{gap:5px}
 html[lang=en] .results-bar select{max-width:115px}
 html[lang=en] .detail-copy h2{font-family:inherit}
}
@media(max-width:370px){
 header{gap:4px}
 header nav{gap:2px}
 header .brand{font-size:20px}
 html[lang=en] .results-bar select{max-width:105px}
}
/* Guide labels need more room than the catalog's short navigation labels. */
@media(max-width:600px){
 .customer-guide header{gap:12px}
 .customer-guide header nav{gap:8px;font-size:12px}
 .customer-guide header nav>a{padding:0 4px}
}
@media(max-width:370px){
 .customer-guide header{flex-wrap:wrap;gap:8px}
 .customer-guide header nav{width:100%;gap:12px;justify-content:space-between;font-size:13px}
 .customer-guide header nav>a{padding:0 6px}
}