/* Shared dimensions keep navigation stationary across all pages. */
@property --glass-x{syntax:'<percentage>';inherits:true;initial-value:24%}
.header,.detail-page .header{
  display:grid;grid-template-columns:220px minmax(0,1fr) 220px;
  align-items:center;gap:0;box-sizing:border-box;
  top:24px;height:66px;padding:0 25px;
  width:calc(100% - 80px);max-width:1160px;
  transition:--glass-x .4s ease;
}
.header .brand,.detail-page .header .brand{justify-self:start;gap:9px;white-space:nowrap}
.header .brand img,.detail-page .header .brand img{width:36px;height:36px;flex:none}
.header .brand strong,.detail-page .header .brand strong{font-size:19px;font-weight:650;letter-spacing:.6px}
.header .brand>span,.detail-page .header .brand>span{display:inline;font-size:8px;letter-spacing:2px}
.header nav,.detail-page .header nav{display:flex;justify-content:center;align-items:center;gap:28px;height:100%;font-size:12px;min-width:0;flex-wrap:nowrap}
.header nav a,.detail-page .header nav a{display:block;white-space:nowrap;flex:none;font-weight:400}
.header .nav-contact,.detail-page .header .nav-contact{justify-self:end;width:128px;min-height:38px;justify-content:center;white-space:nowrap;font-size:11px;padding:10px 12px;gap:7px}
html{scrollbar-gutter:stable}
@media(max-width:1100px){
 .header,.detail-page .header{grid-template-columns:180px minmax(0,1fr) 180px}
 .header .brand>span,.detail-page .header .brand>span{display:none}
 .header nav,.detail-page .header nav{gap:22px;font-size:11px}
}
@media(max-width:850px){
 .header,.detail-page .header{top:18px;height:60px;width:calc(100% - 40px);padding:0 18px;grid-template-columns:160px minmax(0,1fr) 160px}
 .header .brand strong,.detail-page .header .brand strong{font-size:17px}
 .header nav,.detail-page .header nav{gap:15px;font-size:10px}
 .header .nav-contact,.detail-page .header .nav-contact{width:115px;font-size:10px;min-height:35px;padding:9px 11px}
}
@media(max-width:760px){
 .header,.detail-page .header{grid-template-columns:145px minmax(0,1fr) 120px}
 .header nav a:last-child,.detail-page .header nav a:last-child{display:none}
 .header nav .product-nav,.detail-page .header nav a:not(.active):not(:first-child){display:block}
 .detail-page .header nav a:last-child{display:none!important}
 .header nav,.detail-page .header nav{gap:13px;font-size:10px}
 .header .nav-contact,.detail-page .header .nav-contact{width:105px;font-size:9px}
}
@media(max-width:540px){
 .header,.detail-page .header{top:15px;height:56px;width:calc(100% - 28px);padding:0 12px;grid-template-columns:98px minmax(0,1fr) 76px}
 .header .brand,.detail-page .header .brand{gap:5px}
 .header .brand img,.detail-page .header .brand img{width:26px;height:26px}
 .header .brand strong,.detail-page .header .brand strong{font-size:14px;letter-spacing:0}
 .header nav,.detail-page .header nav{gap:9px;font-size:9px}
 .header nav a,.detail-page .header nav a{font-size:9px}
 .header .nav-contact,.detail-page .header .nav-contact{width:76px;min-height:32px;font-size:8px;padding:8px 5px;gap:4px}
 .header .nav-contact>span,.detail-page .header .nav-contact>span{display:none}
 .header .nav-contact>i{width:4px;height:4px}
}
@media(max-width:360px){
 .header,.detail-page .header{grid-template-columns:87px minmax(0,1fr) 65px;padding:0 10px}
 .header .brand img,.detail-page .header .brand img{width:24px;height:24px}
 .header .brand strong,.detail-page .header .brand strong{font-size:13px}
 .header nav,.detail-page .header nav{gap:6px;font-size:8px}
 .header nav a,.detail-page .header nav a{font-size:8px}
 .header .nav-contact,.detail-page .header .nav-contact{width:65px;font-size:7.5px}
}
@media(prefers-reduced-motion:reduce){.header,.detail-page .header{transition:none}}

@media(max-width:760px){.header nav a:last-child,.detail-page .header nav a:last-child{display:block!important}}

/* Stronger labels and a quiet glass highlight without shifting layout. */
.header nav,.detail-page .header nav{gap:26px}
.header nav a,.detail-page .header nav a{
  font-size:14px;font-weight:650;padding:9px 6px;border-radius:11px;
  transition:color .22s ease,background .22s ease,box-shadow .22s ease,text-shadow .22s ease;
}
.header nav a.active::after{bottom:0;left:6px;right:6px}
@media(hover:hover) and (pointer:fine){
 .header nav a:hover,.detail-page .header nav a:hover{
  color:#2867c6;background:rgba(255,255,255,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 3px 12px rgba(95,148,206,.09);
  text-shadow:0 0 13px rgba(220,242,255,.85);
 }
 .header .brand:hover{filter:brightness(1.06)}
 .header .nav-contact:hover,.detail-page .header .nav-contact:hover{
  background:linear-gradient(140deg,#355680f5,#203d65f2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 13px rgba(169,219,255,.32),0 4px 10px rgba(27,48,80,.16);
 }
}
.header .nav-contact,.detail-page .header .nav-contact{font-size:12px;font-weight:600;transition:background .25s ease,box-shadow .25s ease}
@media(max-width:1100px){.header nav,.detail-page .header nav{gap:17px}.header nav a,.detail-page .header nav a{font-size:13px;padding:9px 5px}}
@media(max-width:850px){.header nav,.detail-page .header nav{gap:10px}.header nav a,.detail-page .header nav a{font-size:12px;padding:8px 4px}.header .nav-contact,.detail-page .header .nav-contact{font-size:11px}}
@media(max-width:760px){.header nav,.detail-page .header nav{gap:10px}.header nav a,.detail-page .header nav a{font-size:11px;padding:8px 3px}.header .nav-contact,.detail-page .header .nav-contact{font-size:10px}}
@media(max-width:540px){.header nav,.detail-page .header nav{gap:5px}.header nav a,.detail-page .header nav a{font-size:10px;padding:8px 2px;border-radius:8px}.header nav a.active::after{left:2px;right:2px}.header .nav-contact,.detail-page .header .nav-contact{font-size:9px}}
@media(max-width:360px){.header nav,.detail-page .header nav{gap:3px}.header nav a,.detail-page .header nav a{font-size:9px;padding:8px 1px}.header .nav-contact,.detail-page .header .nav-contact{font-size:8px}}
@media(prefers-reduced-motion:reduce){.header nav a,.detail-page .header nav a,.header .nav-contact,.detail-page .header .nav-contact{transition:none!important}}
@media(max-width:360px){.header,.detail-page .header{grid-template-columns:83px minmax(0,1fr) 62px}.header nav a,.detail-page .header nav a{font-size:8.5px}.header .nav-contact,.detail-page .header .nav-contact{width:62px}}

/* Hover illuminates the whole glass bar, without a tile behind each label. */
.header,.detail-page .header{transition:--glass-x .4s ease,box-shadow .45s ease,border-color .45s ease}
@media(hover:hover) and (pointer:fine){
 .header:hover,.detail-page .header:hover{
  border-color:rgba(246,255,255,.94);
  box-shadow:inset 0 1.5px 2px rgba(255,255,255,1),inset 1px 0 3px rgba(227,252,255,.7),inset -1px -1.5px 4px rgba(175,220,255,.4),0 0 9px rgba(237,255,255,.75),0 0 25px rgba(149,213,255,.46),0 0 44px rgba(170,193,255,.23),0 9px 28px rgba(47,75,121,.10);
 }
 .header nav a:hover,.detail-page .header nav a:hover{background:transparent;box-shadow:none;text-shadow:none}
}
@media(prefers-reduced-motion:reduce){.header,.detail-page .header{transition:none!important}}