/* Compact desktop navigation and an optional mobile menu. */
body header.compact-header{width:100%;max-width:1200px;min-height:66px;height:auto;display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;padding:10px 18px;gap:10px}
body header.compact-header>a{flex:0 0 auto}body header.compact-header .wordmark{display:block;width:130px;max-width:100%;object-fit:contain}
body header.compact-header>nav{display:flex;flex:1 1 650px;min-width:0;max-width:100%;flex-wrap:wrap;justify-content:flex-end;gap:6px;margin:0}
body header.compact-header nav>:is(a,button,div){flex:0 0 auto;max-width:100%}
body header.compact-header :is(nav .dixa-btn,.header-credit){min-height:36px;padding:6px 8px;font-size:11px;gap:5px;white-space:nowrap;overflow:visible}
body header.compact-header .dixa-button-icon{width:22px;height:22px;border-radius:7px}body header.compact-header .dixa-button-symbol{width:14px;height:14px}
body header.compact-header #catalogCredits{margin:0;flex:0 0 auto}body header.compact-header #catalogNoticeCount{flex-shrink:0}
body header.compact-header>.compact-menu-toggle{display:none}
@media(max-width:760px){
 body header.compact-header{display:grid;grid-template-columns:minmax(80px,1fr) auto auto;grid-template-areas:"logo wallet toggle" "nav nav nav";min-height:58px;padding:8px 12px;gap:6px;background:var(--theme-surface)}
 body header.compact-header>a{grid-area:logo;justify-self:start;min-width:0;max-width:100%}body header.compact-header .wordmark{width:156px;max-height:none;padding:4px}
 body header.compact-header>#catalogCredits{grid-area:wallet;min-width:0}body header.compact-header>.compact-menu-toggle{grid-area:toggle;display:inline-flex;min-height:40px;font-size:11px;padding:7px 8px}
 body header.compact-header>.compact-menu-toggle .dixa-button-icon{display:none}body header.compact-header>.compact-menu-toggle:before{display:none}
 body header.compact-header>nav{grid-area:nav;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;max-width:100%;padding:6px 0 0;gap:6px;overflow:visible;flex:none}
 body header.compact-header>nav[hidden]{display:none!important}body header.compact-header nav>:is(a,button,div){width:100%;max-width:100%;min-width:0}
 body header.compact-header nav .dixa-btn{width:100%;min-height:42px;white-space:normal;overflow-wrap:anywhere;line-height:1.3;padding:6px;justify-content:center;font-size:11px}
 body header.compact-header .header-credit{width:auto;min-height:40px;padding:6px 8px;gap:5px!important;flex-wrap:nowrap;font-size:10px}
 body header.compact-header .header-credit strong{font-size:12px}body header.compact-header .header-credit>span:last-child[aria-hidden=true]{display:none}
 body:has(header.compact-header) .appearance-bar{padding:5px 12px}
}
@media(max-width:350px){body header.compact-header .wordmark{width:132px}body header.compact-header .header-credit .dixa-button-icon{display:none}body header.compact-header>nav{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media(max-width:760px){
 body:has(header.compact-header) .announcement{display:none}
 body:has(header.compact-header) .appearance-bar{max-width:none;margin:0;padding:5px 12px}
 body:has(header.compact-header) .appearance-control{width:auto;max-width:100%;padding:3px;gap:3px;flex-wrap:wrap;border-radius:10px}
 body:has(header.compact-header) .appearance-label{width:auto;padding:0 4px;font-size:10px}
 body:has(header.compact-header) .appearance-control .dixa-btn{min-height:30px;padding:5px 7px;font-size:10px;gap:4px}
 body:has(header.compact-header) .theme-swatch{width:12px;height:12px}
 body:has(header.compact-header) .catalog{padding-top:12px}
 body:has(header.compact-header) .catalog .section-head{padding:16px;margin-bottom:18px;border-radius:16px}
 body:has(header.compact-header) .catalog .section-head h2{font-size:24px;line-height:1.25;margin:10px 0}
 body:has(header.compact-header) .catalog .section-head>.eyebrow{font-size:10px;letter-spacing:2px}
 body:has(header.compact-header) .catalog .section-head>p{font-size:12px;line-height:1.6;margin:10px 0 0}
 body:has(header.compact-header) .catalog-stats{gap:6px;margin:10px 0}
 body:has(header.compact-header) .catalog-stats>span{font-size:11px;padding:8px 9px;min-height:0}
}

/* A moving light stays inside the header; the edge mask fades it without overflow. */
body header.compact-header{position:relative;isolation:isolate}
body header.compact-header:after{content:"";position:absolute;pointer-events:none;bottom:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,#23d6ed 30%,#7889ff 55%,#ad68f5 75%,transparent) no-repeat;background-size:38% 100%;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);animation:dixa-header-light 6s ease-in-out infinite alternate}
@keyframes dixa-header-light{from{background-position:-65% 0}to{background-position:165% 0}}
@media(prefers-reduced-motion:reduce){body header.compact-header:after{animation:none;background-position:50% 0;background-size:100% 100%}}

/* The header itself spans the viewport, so its background and animated edge align.
   Keep the desktop controls centered without viewport units or sideways overflow. */
html,body{overflow-x:clip}
body header.compact-header{width:100%;max-width:none;margin-inline:0;box-sizing:border-box}
body header.compact-header:after{left:0;width:100%;max-width:none}
@media(min-width:761px){body header.compact-header{padding-inline:max(18px,calc((100% - 1164px)/2))}}