/* Language controls share the established gold/black header; safe areas remain in #app. */
#main-header[data-extrait-navigation]{gap:10px}
#main-header .extrait-languages{display:flex;align-items:center;justify-content:center;gap:4px;flex:0 0 auto;margin-inline:auto}
.extrait-language{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:47px;min-height:48px;padding:5px 4px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--muted);font:500 9.5px/1.2 'DM Sans',sans-serif;letter-spacing:.1px;cursor:pointer}
.extrait-language img{display:block;width:28px;height:19px;object-fit:contain;border-radius:2px;box-shadow:0 1px 5px #0005}
.extrait-language[aria-pressed="true"]{color:var(--gold-lt);background:rgba(201,162,39,.07);border-color:var(--hair2)}
.extrait-language:hover{color:var(--gold-lt);border-color:var(--hair2)}
.extrait-language:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
html[lang="en"] #main-nav .nav-btn{font-size:8px!important;letter-spacing:0!important}
html[lang="en"] #main-nav .nav-btn[data-nav="calc"]{font-size:7.3px!important}
@media(max-width:359px){#main-header[data-extrait-navigation]{flex-wrap:wrap;column-gap:10px;row-gap:5px}#main-header .logo-wrap{order:0}#main-header .header-actions{order:1}#main-header .extrait-languages{order:2;flex-basis:100%;margin:0;gap:10px}.extrait-language{min-height:44px;min-width:60px;flex-direction:column;gap:4px}.extrait-language img{width:24px;height:16px}}
@media(prefers-reduced-motion:reduce){.extrait-language{transition:none}}

/* CSS-generated copy follows the selected language too. */
html[lang="en"] .hb-title::after{content:' fragrance signature'!important}
.extrait-login-languages{position:absolute;top:18px;right:22px;z-index:3;display:flex;align-items:center;gap:6px}
.extrait-login-languages .extrait-language{min-width:58px;min-height:48px}
@media(max-height:600px){#page-login{padding-top:90px!important;overflow-y:auto}.extrait-login-languages{top:12px}}

@media(min-width:360px) and (max-width:430px){#main-header[data-extrait-navigation]{padding-inline:14px!important;gap:6px}#main-header .exn-toggle{min-width:88px;gap:8px;padding-inline:9px}}
@media(max-width:379px){html[lang="en"] .hb-title::after{display:block;vertical-align:baseline;margin:7px 0 0;line-height:1.2;letter-spacing:1px}}