/* Yongjian mobile navigation — final visual layer */
@media (max-width:1080px){
  .mobile-panel{
    width:min(368px,92vw)!important;
    background:#fff!important;
    box-shadow:22px 0 55px rgba(7,31,49,.22)!important;
  }
  .mobile-head{
    position:sticky!important;
    top:0;
    z-index:4;
    height:70px!important;
    padding:0 16px!important;
    background:rgba(255,255,255,.97)!important;
    border-bottom:1px solid #e6ecef!important;
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
  }
  .mobile-head img{width:44px!important;height:44px!important}
  .mobile-close{
    width:40px!important;
    height:40px!important;
    border:1px solid #e3e9ec!important;
    border-radius:10px!important;
    background:#f5f8fa!important;
    color:#102f46!important;
  }
  .mobile-menu{
    display:flex!important;
    flex-direction:column;
    gap:4px;
    padding:12px 14px calc(22px + env(safe-area-inset-bottom))!important;
  }
  .mobile-menu>a,
  .mobile-menu .mobile-drop{
    position:relative;
    width:100%;
    min-height:48px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    padding:10px 13px!important;
    border:0!important;
    border-radius:9px!important;
    background:transparent!important;
    color:#1b3545!important;
    font-size:14px!important;
    font-weight:500!important;
    line-height:1.35!important;
    text-align:left!important;
    transition:background-color .18s ease,color .18s ease,box-shadow .18s ease!important;
  }
  .mobile-menu>a:hover,
  .mobile-menu .mobile-drop:hover,
  .mobile-group.open>.mobile-drop{
    color:#0b806f!important;
    background:#f2f8f6!important;
  }
  .mobile-menu>a[aria-current="page"],
  .mobile-menu .mobile-drop.active,
  .mobile-menu .mobile-drop[aria-current="page"]{
    color:#0b806f!important;
    background:#eaf7f3!important;
    box-shadow:inset 3px 0 0 #16aa91!important;
    font-weight:600!important;
  }
  .mobile-group{margin:0!important}
  .mobile-drop .chev{
    flex:0 0 auto;
    width:11px!important;
    height:8px!important;
    margin-left:12px;
    color:#758790;
    transition:transform .2s ease,color .2s ease!important;
  }
  .mobile-group.open>.mobile-drop .chev{color:#0b806f;transform:rotate(180deg)!important}
  .mobile-sub{
    display:none;
    margin:3px 0 6px 15px!important;
    padding:3px 0 3px 12px!important;
    border:0!important;
    border-left:1px solid #dce7e8!important;
    border-radius:0!important;
    background:transparent!important;
  }
  .mobile-group.open>.mobile-sub{display:grid!important;gap:2px}
  .mobile-sub a{
    position:relative;
    min-height:40px!important;
    display:flex!important;
    align-items:center!important;
    padding:8px 10px 8px 21px!important;
    border:0!important;
    border-radius:7px!important;
    color:#526873!important;
    background:transparent!important;
    font-size:13px!important;
    font-weight:400!important;
    line-height:1.4!important;
    transition:background-color .18s ease,color .18s ease!important;
  }
  .mobile-sub a::before{
    content:"";
    position:absolute;
    left:8px;
    top:50%;
    width:4px;
    height:4px;
    border-radius:50%;
    background:#a8b7bd;
    transform:translateY(-50%);
  }
  .mobile-sub a:hover,
  .mobile-sub a[aria-current="page"]{
    color:#0b806f!important;
    background:#f2f8f6!important;
  }
  .mobile-sub a[aria-current="page"]{font-weight:600!important}
  .mobile-sub a[aria-current="page"]::before{background:#16aa91}

  .mobile-contact{
    margin:14px 0 0!important;
    padding:15px!important;
    border:1px solid #dfe9ec!important;
    border-radius:12px!important;
    background:linear-gradient(145deg,#f7fafb,#eef7f4)!important;
    box-shadow:0 8px 22px rgba(10,36,52,.055)!important;
  }
  .mobile-contact-title{
    margin:0 0 10px!important;
    color:#102f46!important;
    font-size:13px!important;
    font-weight:600!important;
    line-height:1.3!important;
  }
  .mobile-contact-link{
    min-height:46px!important;
    display:grid!important;
    grid-template-columns:34px minmax(0,1fr)!important;
    align-items:center!important;
    gap:10px!important;
    margin:0 0 7px!important;
    padding:7px 9px!important;
    border:1px solid #e3eaed!important;
    border-radius:9px!important;
    background:#fff!important;
    color:#36535f!important;
    font-size:12.5px!important;
    font-weight:500!important;
    line-height:1.35!important;
    overflow-wrap:anywhere;
    transition:border-color .18s ease,box-shadow .18s ease,color .18s ease!important;
  }
  .mobile-contact-link:hover{
    color:#0b806f!important;
    border-color:rgba(22,170,145,.42)!important;
    box-shadow:0 5px 14px rgba(10,36,52,.06)!important;
  }
  .mobile-contact-icon{
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    border-radius:8px;
    color:#0b806f;
    background:#e7f7f3;
  }
  .mobile-contact-icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .mobile-contact-text{min-width:0}
  .mobile-contact-text small{
    display:block;
    margin-bottom:1px;
    color:#7a8c95!important;
    font-size:10.5px!important;
    font-weight:500!important;
    line-height:1.2!important;
    text-transform:uppercase;
    letter-spacing:.06em;
  }
  .mobile-contact-text span{display:block;white-space:normal}
  .mobile-contact .btn{
    width:100%!important;
    min-height:45px!important;
    margin:11px 0 0!important;
    padding:10px 16px!important;
    justify-content:center!important;
    color:#fff!important;
    font-size:13px!important;
    font-weight:600!important;
    border-radius:8px!important;
  }
}

@media (max-width:480px){
  .mobile-panel{width:min(344px,92vw)!important}
  .mobile-head{height:64px!important;padding-inline:14px!important}
  .mobile-menu{padding:10px 12px calc(18px + env(safe-area-inset-bottom))!important}
  .mobile-menu>a,.mobile-menu .mobile-drop{min-height:46px!important;padding-inline:12px!important}
  .mobile-contact{padding:13px!important}
}

/* Full Product category submenu */
@media (max-width:1080px){
  .product-mobile-sub a[data-product-category="detail"]{
    margin-top:5px!important;
    padding-top:11px!important;
    border-top:1px solid #e3eaed!important;
  }
  .product-mobile-sub a[data-product-category="detail"]::before{top:calc(50% + 3px)}
}