/* The EN | FR switch: every page loads brand.css, so its look lives here (the header rules below adjust it). */
.language-switch{display:inline-flex;border:1px solid #cdd2c2;border-radius:20px;overflow:hidden;margin-left:auto}
.language-switch button{border:0;background:none;padding:5px 10px;font-size:11px;color:var(--muted,#7d8376);min-width:36px}
.language-switch button[aria-pressed=true]{background:var(--ink,#25473b);color:var(--paper,#f8f6ee)}
.brand.brand-wordmark{display:inline-flex;align-items:center;gap:0;line-height:1;letter-spacing:normal;flex-shrink:0}
.brand-wordmark .brand-image{display:block;height:1.4em;width:auto;max-width:none;flex:none}
.brand-wordmark:focus-visible{outline:3px solid #a77e4c;outline-offset:7px;border-radius:3px}

/* The account icon and menu (user-menu.js), the same in every header. */
.user-menu{position:relative;margin-left:8px}
.user-button{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;border:1px solid #c9cfbf;background:#f2f1e7;color:var(--ink);padding:0;transition:background .15s,border-color .15s}
.user-button:hover,.user-button[aria-expanded=true]{background:#e6e9da;border-color:var(--ink)}
.user-panel{position:absolute;right:0;top:calc(100% + 10px);z-index:60;width:min(260px,calc(100vw - 32px));background:var(--paper);border:1px solid #d9dccf;border-radius:10px;box-shadow:0 18px 40px #1e3d3226;padding:16px 8px 8px}
.user-panel-label{margin:0 10px;font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:#7d8376}
.user-email{margin:4px 10px 12px;font-size:13px;font-weight:550;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-panel-item{display:flex;align-items:center;width:100%;min-height:44px;padding:0 10px;border:0;border-top:1px solid #e3e4d9;background:none;border-radius:0;font-size:13px;color:var(--ink);text-decoration:none;text-align:left;cursor:pointer}
.user-panel-item:hover{background:#eeefe4}
.user-logout{color:#a03f35}
.user-panel-status{margin:0 10px;font-size:12px;color:#a03f35}.user-panel-status:empty{display:none}
@media(max-width:720px){.user-menu{margin-left:4px}.user-button{width:38px;height:38px}}
.site-header .user-menu[hidden],.site-header .account-actions[hidden]{display:none!important}
/* Keep the header (and its account menu) above the page beneath it. The full-width
   paper band is drawn by a pseudo-element, so the header itself needn't clip and
   the account menu can drop below it. */
.site-header{z-index:40}
body:not(.home-page) .site-header{clip-path:none;box-shadow:none}
body:not(.home-page) .site-header::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--paper);box-shadow:0 1px 0 #25473b14,0 0 0 100vmax var(--paper);clip-path:inset(0 -100vmax -1px)}
/* The page links sit at the right, beside Log in / Join or the account icon. */
@media(min-width:721px){body:not(.home-page) .site-header{gap:26px}}
body:not(.home-page) .site-header .user-menu{margin-left:0}
body:not(.home-page) .site-header>.nav-link+.account-actions{margin-left:0}
/* Header links: a larger, easier-to-read size; My cards carries a little card icon. */
body .site-header .nav-link{font-size:15px}
@media(max-width:720px){body .site-header .nav-link{font-size:13px}}
@media(max-width:360px){body .site-header .nav-link{font-size:12px}}
.site-header .nav-link.nav-cards{display:inline-flex;align-items:center;gap:7px}
.site-header .nav-cards .nav-icon{flex:none;color:var(--accent)}
.site-header .nav-cards:hover .nav-icon,.site-header .nav-cards.active .nav-icon{color:var(--ink)}
@media(max-width:720px){.site-header .nav-link.nav-cards{gap:5px}.site-header .nav-cards .nav-icon{width:17px;height:17px}}
body .site-header .nav-link{white-space:nowrap}
.site-header .nav-cards .nav-icon{width:20px;height:20px}
/* The narrowest phones, signed out: My cards shows as its icon so Log in and Join fit. */
@media(max-width:360px){.site-header:has(.account-actions:not([hidden])) .nav-cards .nav-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .site-header:has(.account-actions:not([hidden])) .nav-cards .nav-icon{width:22px;height:22px}}

/* EN | FR in every header, after the account links */
.site-header .language-switch{flex:none;margin-left:0}
/* Phones: one button that switches to the other language */
@media(max-width:720px){.site-header .language-switch{border-radius:6px}.site-header .language-switch button{padding:5px 7px;min-width:0;font-size:10px;font-weight:600;color:var(--ink,#25473b)}.site-header .language-switch button[aria-pressed=true]{display:none}}

/* Phone headers, in both languages: back links become an arrow (their text stays for
   screen readers), My cards shows its icon, and the logo and gaps tighten. */
@media(max-width:720px){
  .site-header > a.nav-link:not(.nav-cards){font-size:0;padding:8px 4px}
  .site-header > a.nav-link:not(.nav-cards)::before{content:"←";font-size:18px;line-height:1}
  .site-header .nav-cards .nav-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .site-header .nav-cards .nav-icon{width:22px;height:22px}
  .site-header .account-actions .button.small{padding:8px 11px}
}
@media(max-width:420px){
  body:not(.home-page) .site-header,.site-header{gap:12px}
  .site-header .brand-image{width:104px;height:auto}
  .site-header .account-actions{gap:10px}
}
@media(max-width:380px){
  body:not(.home-page) .site-header,.site-header{gap:8px;padding-left:12px;padding-right:12px}
  .site-header .brand-image{width:94px}
  .site-header .account-actions{gap:8px}
  .site-header .account-actions .button.small{padding:7px 9px}
  .site-header .account-actions .button.small [aria-hidden]{display:none}
}
@media(max-width:340px){
  .site-header .brand-image{width:80px}
  .site-header .account-actions .nav-link,.site-header .account-actions .button.small{font-size:12px}
}
.user-panel-item[hidden]{display:none}
/* The partner code box (partner-code.js): on the order page and in the studio's order box. */
.partner-code{margin:16px 0 4px;padding:12px 14px;border:1px dashed #cdd2c2;border-radius:8px;background:#fffdf6}.partner-code[hidden]{display:none}.partner-code-label{display:block;font-size:13px;font-weight:600;color:var(--ink)}.partner-code-label small{font-weight:400;color:var(--muted)}.partner-code-row{display:flex;gap:8px;margin-top:8px;align-items:center}.partner-code-row input{flex:1;min-width:0;text-transform:uppercase}.partner-code-row .button{width:auto!important;flex:none}.partner-code-status{margin:8px 0 0;font-size:12px;line-height:1.6}.partner-code-status:empty{display:none}
.partner-code-row input::placeholder{text-transform:none}