/* Shared storefront header: keep controls legible at split-screen widths. */
.header .brand-mark{flex:0 0 auto;display:flex;align-items:center}
.header .brand-mark img{display:block;width:210px;max-width:100%;height:auto}
.header .nav{min-width:0}
.header .nav a,.header .actions .btn{white-space:nowrap}
.header .actions{flex:0 0 auto;gap:12px}
.header .actions .btn{flex:0 0 auto;min-height:44px;width:auto;max-width:none;padding:11px 20px;border-radius:999px;line-height:1.25}
.header .actions .iconbtn{flex:0 0 44px;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
@media(max-width:1050px){
.header{display:flex;flex-wrap:wrap;gap:12px 20px;padding:14px 0;min-height:0}
.header .brand-mark{margin-right:auto}
.header .nav{order:3;flex:1 0 100%;width:100%;display:flex;justify-content:center;gap:24px;overflow-x:auto;padding:6px 0;scrollbar-width:thin}
.header .nav a{flex:0 0 auto;font-size:14px}
}
@media(max-width:480px){
.header .brand-mark img{width:155px}
.header .actions{gap:4px}
.header .actions .btn{font-size:12px;padding:10px 12px}
.header .nav{justify-content:flex-start;gap:20px}
}

.header .actions .iconbtn img{display:block;position:static;flex:0 0 24px;width:24px!important;height:24px!important;max-width:none;object-fit:contain;object-position:center;image-rendering:auto;transform:none}
@media(max-width:480px){.header .brand-mark{width:155px;height:60px}.header .brand-mark img{width:155px;height:155px;top:-48px}.header{column-gap:10px}.header .actions{margin-left:auto}}

/* A passing glass reflection over the wordmark, without changing its shape. */
.header .brand-mark{isolation:isolate;overflow:hidden}
.header .brand-mark::after{content:"";position:absolute;z-index:2;inset:-30% auto -30% 0;width:38%;pointer-events:none;background:linear-gradient(105deg,transparent 12%,rgba(205,234,255,.22) 30%,rgba(255,255,255,.94) 49%,rgba(215,241,255,.4) 63%,transparent 84%);mix-blend-mode:screen;transform:translateX(-240%) skewX(-18deg);animation:koolfactoryCrystal 5.8s ease-in-out infinite}
.header .brand-mark:hover::after,.header .brand-mark:focus-visible::after{animation-duration:2.2s}
@keyframes koolfactoryCrystal{0%,12%{transform:translateX(-240%) skewX(-18deg);opacity:0}17%{opacity:1}43%{transform:translateX(360%) skewX(-18deg);opacity:1}48%,100%{transform:translateX(360%) skewX(-18deg);opacity:0}}
@media(prefers-reduced-motion:reduce){.header .brand-mark::after{animation:none;opacity:0}}

/* Moving crystal background across the entire navigation bar. */
.header{isolation:isolate;background:#edf2f5;border-bottom-color:#d5dfe6;box-shadow:0 2px 18px #12293912}
.header::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;background:radial-gradient(ellipse at 18% 20%,#d7e8efaa 0,transparent 45%),radial-gradient(ellipse at 80% 85%,#dddff0aa 0,transparent 42%),repeating-linear-gradient(118deg,#fff5 0%,#dce5eb88 12%,#fff 20%,#e0e9ef99 29%,#f4f8fb 38%);background-size:180% 200%,170% 200%,260% 100%;animation:koolfactoryGlassFlow 14s ease-in-out infinite alternate}
.header::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(112deg,transparent 25%,#ffffff00 40%,#ffffffd9 49%,#c6e1ed55 53%,transparent 64%);background-size:300% 100%;animation:koolfactoryGlassLight 9s ease-in-out infinite}
.header>*{position:relative;z-index:1}
.header .brand-mark{mix-blend-mode:multiply}
@keyframes koolfactoryGlassFlow{0%{background-position:0% 0%,100% 100%,0% 50%}100%{background-position:100% 100%,0% 0%,100% 50%}}
@keyframes koolfactoryGlassLight{0%,10%{background-position:120% 0;opacity:.3}45%,65%{opacity:.85}90%,100%{background-position:-20% 0;opacity:.3}}
@media(prefers-reduced-motion:reduce){.header::before,.header::after{animation:none}.header::after{opacity:.2}}

/* Full-bleed glass bar, with navigation aligned to the page content. */
body{overflow-x:clip}
.header{width:100vw;max-width:none;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding-left:max(4vw,calc((100vw - 1320px)/2));padding-right:max(4vw,calc((100vw - 1320px)/2));border-radius:0}