/* Product navigation: no page widths, header, footer or image geometry changes. */
.layer-dock[data-navigation-replaced="true"]{display:none!important}
#weather-product-browser .product-field-options{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
#weather-product-browser .product-field-caption{font:400 12px/1.4 MiSans,sans-serif;color:#627a7d;white-space:nowrap}
@media(max-width:650px){#weather-product-browser .product-field-options{flex:1 1 100%;gap:6px}}
#weather-product-categories{display:flex;align-items:center;gap:6px;margin-left:10px;padding-left:16px;border-left:1px solid #ccd8d8}
#weather-product-categories button,#weather-product-browser button{
  min-height:36px;margin:0;padding:7px 14px;border:1px solid #becdce!important;border-radius:0!important;
  background:#fff!important;color:#465b62!important;font:500 14px/1.4 MiSans,"Microsoft YaHei",sans-serif;
  cursor:pointer;white-space:nowrap;box-shadow:none!important;transition:color .15s,background-color .15s;
}
#weather-product-categories button.is-active,#weather-product-browser button.is-active{
  color:#fff!important;background:#bd4235!important;border-color:#bd4235!important;
}
#weather-product-categories button:hover:not(:disabled):not(.is-active),#weather-product-browser button:hover:not(:disabled):not(.is-active){
  border-color:#bd4235!important;color:#ad3c31!important;background:#fffaf7!important;
}
#weather-product-browser{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap;margin:0 0 12px;padding:0}
#weather-product-browser .product-context{font:400 12px/1.5 MiSans,sans-serif;color:#667e81;margin-left:auto;text-align:right;min-width:0}
#weather-product-browser .product-filter{display:flex;align-items:center;gap:8px;margin:0;font:400 12px/1.4 MiSans,sans-serif;color:#627a7d}
#weather-product-browser select{box-sizing:border-box;width:auto;max-width:240px;min-height:36px;margin:0;padding:7px 30px 7px 10px;border:1px solid #becdce;border-radius:0;background-color:#fff;color:#30474c;font:500 14px/1.4 MiSans,sans-serif;cursor:pointer}
#weather-product-browser .product-satellite-modes{display:flex;gap:6px;margin-left:auto}
#weather-product-categories button:disabled,#weather-product-browser button:disabled{opacity:.45;cursor:not-allowed}
#weather-product-categories button:focus-visible,#weather-product-browser :is(button,select):focus-visible{outline:2px solid #146f69;outline-offset:2px}
@media(max-width:1100px){
  #weather-product-categories{margin-left:2px;padding-left:8px;gap:4px}
  #weather-product-categories button,#weather-product-browser button{padding:7px 10px;font-size:13px}
  #weather-product-browser .product-context{display:none}
}
@media(max-width:650px){
  #weather-product-categories{order:3;flex:1 1 100%;margin:2px 0 0;padding:0;border:0;gap:6px}
  #weather-product-categories button{flex:1;min-height:40px}
  #weather-product-browser{gap:6px;margin-bottom:10px}
  #weather-product-browser button{min-height:40px;flex:1 0 auto;padding:8px 10px}
  #weather-product-browser .product-filter{flex:1 1 calc(50% - 3px);gap:5px;min-width:0;white-space:nowrap}
  #weather-product-browser select{width:100%;max-width:none;min-width:0;min-height:40px;font-size:14px}
  #weather-product-browser .product-satellite-modes{flex:1 1 100%;margin:0}
}

/* Three control groups share typography, but retain distinct selection colours. */
.weather-region-dock [data-map-region]{--product-accent:#bd4235;--product-hover:#bd4235;--product-tint:#fff5f2}
#weather-product-categories{--product-accent:#bd4235;--product-hover:#a33228;--product-tint:#fff5f2}
#weather-product-browser{--product-accent:#137d9b;--product-hover:#137d9b;--product-tint:#eff8fc}
.weather-region-dock [data-map-region],#weather-product-categories button,#weather-product-browser button,#weather-product-browser select{
  font:var(--product-control-font,400 14px MiSans,"Microsoft YaHei",sans-serif)!important;letter-spacing:var(--product-control-spacing,normal)!important;
}
.weather-region-dock [data-map-region],#weather-product-categories button,#weather-product-browser button{
  transition:background-color 160ms ease,color 160ms ease,border-color 160ms ease!important;
}
.analysis-page.unified-page .weather-region-dock a[data-map-region].is-active,#weather-product-categories button.is-active,#weather-product-browser button.is-active{
  background:var(--product-accent)!important;border-color:var(--product-accent)!important;color:#fff!important;
}
@media(hover:hover) and (pointer:fine){
  #weather-product-categories button:hover:not(:disabled):not(.is-active),#weather-product-browser button:hover:not(:disabled):not(.is-active){background:var(--product-tint)!important;color:var(--product-accent)!important;border-color:var(--product-accent)!important}
  .analysis-page.unified-page .weather-region-dock a[data-map-region].is-active:hover,#weather-product-categories button.is-active:hover,#weather-product-browser button.is-active:hover{background:var(--product-accent)!important;border-color:var(--product-accent)!important;color:#fff!important}
}
.weather-region-dock [data-map-region] > .interaction-border,#weather-product-categories button > .interaction-border,#weather-product-browser button > .interaction-border{color:var(--product-accent);inset:-2px!important}
@media(prefers-reduced-motion:reduce){
  .weather-region-dock [data-map-region],#weather-product-categories button,#weather-product-browser button{transition:none!important}
}