/*
 * Shared mobile product header for Compute, AI Gateway, and SCRM.
 * Keep all three product shells aligned by changing this file, not page-local CSS.
 */
@media (max-width:1120px){
  .product-header{
    position:sticky;
    top:0;
    z-index:60;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(30px,max-content);
    grid-template-rows:44px 40px;
    gap:2px clamp(7px,2.5vw,10px);
    width:100%;
    height:auto;
    min-height:96px;
    padding:4px clamp(8px,3.1vw,12px) 6px;
    border-bottom:1px solid rgba(65,91,124,.48);
    background:#050914;
    box-shadow:0 10px 28px rgba(0,0,0,.18);
    backdrop-filter:none;
  }
  .product-brand{
    grid-column:1;
    grid-row:1;
    align-self:center;
    display:flex;
    align-items:center;
    gap:clamp(7px,2.3vw,9px);
    width:auto;
    min-width:0;
  }
  .product-brand img{
    width:34px;
    height:34px;
    flex:0 0 34px;
    border-radius:9px;
  }
  .product-brand>div{min-width:0}
  .product-brand b{
    display:block;
    overflow:hidden;
    color:#f4f8ff;
    font-size:clamp(12px,3.6vw,14px);
    line-height:1.2;
    letter-spacing:.06em;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .product-brand span{
    display:block;
    overflow:hidden;
    margin-top:2px;
    color:#91a0b6;
    font-size:9px;
    line-height:1.2;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .product-status{
    grid-column:2;
    grid-row:1;
    align-self:center;
    display:flex;
    align-items:center;
    gap:7px;
    max-width:min(44vw,168px);
    min-height:30px;
    margin:0;
    padding:0 clamp(8px,2.6vw,10px);
    overflow:hidden;
    border:1px solid rgba(45,214,163,.24);
    border-radius:999px;
    background:rgba(45,214,163,.08);
    color:#bcefdc;
    font-size:10px;
    line-height:1;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .product-status:before{
    content:"";
    width:6px;
    height:6px;
    flex:0 0 6px;
    border-radius:50%;
    background:#2dd6a3;
    box-shadow:0 0 10px rgba(45,214,163,.65);
  }
  .product-header > .product-nav{
    position:static;
    grid-column:1/3;
    grid-row:2;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:center;
    gap:clamp(4px,1.55vw,6px);
    width:100%;
    height:40px;
    min-height:40px;
    overflow:visible;
    transform:none;
  }
  .product-header .product-nav-link{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:clamp(4px,1.8vw,7px);
    width:100%;
    min-width:0;
    height:36px;
    padding:0 clamp(3px,1.8vw,7px);
    border:1px solid transparent;
    border-radius:9px;
    color:#aab8ca;
    font-size:clamp(10px,3.1vw,12px);
    font-weight:750;
    line-height:1;
    white-space:nowrap;
  }
  .product-header .product-nav-link:before{
    content:"";
    width:6px;
    height:6px;
    flex:0 0 6px;
    border-radius:50%;
    background:currentColor;
    opacity:.5;
  }
  .product-header .product-nav-link.active,
  .product-header .product-nav-link:hover{
    border-color:#24547a;
    background:linear-gradient(135deg,rgba(18,52,82,.92),rgba(10,34,55,.92));
    color:#fff;
  }
  .product-header .product-nav-link.active:before{
    background:#2dd6a3;
    opacity:1;
    box-shadow:0 0 10px rgba(45,214,163,.65);
  }
  .product-header + .side{top:96px}
}

@media (max-width:380px){
  .product-header{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:44px auto 44px;
    column-gap:7px;
    padding-right:8px;
    padding-left:8px;
    min-height:132px;
  }
  .product-brand{grid-column:1;grid-row:1}
  .product-status{
    grid-column:1;
    grid-row:2;
    justify-self:stretch;
    width:100%;
    max-width:none;
    min-height:30px;
    padding:6px 9px;
    overflow:visible;
    font-size:9px;
    line-height:1.35;
    text-overflow:clip;
    white-space:normal;
  }
  .product-header > .product-nav{
    grid-column:1;
    grid-row:3;
    gap:4px;
    height:44px;
    min-height:44px;
  }
  .product-header .product-nav-link{
    gap:5px;
    height:40px;
    padding:0 4px;
    font-size:11px;
    line-height:1.15;
    text-align:center;
    white-space:normal;
  }
  .product-header + .side{position:relative;top:auto}
  .product-header + .side .nav{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
    width:100%;
    min-width:0;
  }
  .product-header + .side .nav-btn,
  .product-header + .side .primary-nav{
    width:100%;
    min-width:0;
    min-height:42px;
    height:auto;
    padding:8px 9px;
    white-space:normal;
  }
}

@media (max-width:300px){
  .product-brand span{font-size:8px}
  .product-status{font-size:8px}
  .product-header .product-nav-link{
    gap:3px;
    padding:0 2px;
    font-size:10px;
  }
  .product-header .product-nav-link:before{
    width:4px;
    height:4px;
    flex-basis:4px;
  }
}