/* Mobile presentation layer. Keep desktop layouts and legacy page templates intact. */
@media screen and (max-width: 768px) {
  html body {
    font-size: 16px !important;
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .g_top, .g_top.headFix {
    position: relative !important;
    padding: 10px 16px !important;
    background: #fff !important;
  }
  .g_top .m_top { min-height: 44px !important; }
  .g_top .tlogo { max-width: 46% !important; }
  .g_top .tlogo img { max-height: 40px !important; }
  .g_top .mobile-header-actions { gap: 10px !important; }
  .g_top .lang-switch { padding: 0 6px !important; min-height: 44px; }
  .g_top .lang-switch a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    min-height: 44px;
    font-size: 13px !important;
  }
  .g_top .lang-icon { display: none !important; }
  .g_top .lang-switch a.active { background: #e0eee7 !important; border-radius: 8px !important; }
  .g_top .mobile-nav-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 10px;
    margin: 0;
    border: 1px solid #dce6e8;
    border-radius: 10px;
    color: #174778;
    background: #f6f9fb;
    cursor: pointer;
  }
  button:focus-visible, a:focus-visible {
    outline: 2px solid #167d9c !important;
    outline-offset: 3px;
  }
  .mobile-drawer {
    width: min(88vw, 360px) !important;
    right: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    transform: translateX(105%);
    visibility: hidden;
    transition: transform .25s ease, visibility .25s ease !important;
    overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
  .mobile-drawer.active { transform: translateX(0); visibility: visible; }
  .mobile-drawer-body { min-height: 0; overflow-y: auto; }
  .mobile-drawer-close {
    width: 44px !important;
    height: 44px !important;
    border: 0;
    flex-shrink: 0;
  }
  .mobile-drawer-link { font-size: 16px !important; min-height: 52px; }
  .mobile-drawer-submenu li a { font-size: 15px !important; min-height: 44px; }
  #mobileBottomBar {
    height: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 4px 8px calc(4px + env(safe-area-inset-bottom, 0px)) !important;
    align-items: stretch !important;
  }
  #mobileBottomBar .mobile-bottom-bar-item {
    min-width: 0;
    height: auto !important;
    gap: 4px;
    font-size: 12px !important;
    line-height: 1.25;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font-family: inherit;
  }
  #mobileBottomBar .mobile-bottom-bar-item.active,
  #mobileBottomBar .mobile-bottom-bar-item.highlight { background: #eff7f5; color: #13735f !important; }
  #mobileBottomBar .mobile-bottom-bar-icon { display: flex; margin: 0 !important; }
  .mobile-bottom-bar-icon svg { width: 21px; height: 21px; }

  /* Avoid double gutters and tiny desktop headings on the home page. */
  .g_js, .g_fa, .g_zzzx, .g_honor, .g_video, .g_news { padding: 32px 16px !important; }
  .g_js h2, .g_fa h2, .g_zzzx h2, .g_honor h2, .g_video h2, .g_news h2 {
    height: auto !important;
    font-size: 23px !important;
    line-height: 1.45 !important;
    margin: 0 0 18px !important;
    white-space: normal !important;
  }
  .g_js h2 b, .g_fa h2 b, .g_zzzx h2 b, .g_honor h2 b, .g_video h2 b, .g_news h2 b {
    font-size: 23px !important;
    line-height: 1.45 !important;
  }
  .g_js h2 em { font-size: 18px !important; line-height: 1.6 !important; margin-top: 8px !important; }
  .g_js .jsjs, .g_js .jsjs p, .g_fa .fa-desc,
  .g_zzzx .zzwz, .g_zzzx .zzwz p, .g_video .desc, .g_video .desc p {
    font-size: 15px !important;
    line-height: 1.85 !important;
    text-align: left !important;
    max-height: none !important;
    -webkit-line-clamp: unset !important;
  }
  .g_js .jsjs { max-width: 100% !important; padding: 0 !important; margin-bottom: 24px !important; }
  html[lang="en"] .g_js h2 b { font-size: 23px !important; }
  html[lang="en"] .g_js h2 em { font-size: 20px !important; }
  html[lang="en"] .g_js .jsjs p { font-size: 15px !important; line-height: 1.85 !important; }
  .g_fa .m_fa, .g_zzzx .m_zzzx, .g_news .m_news { padding-left: 0 !important; padding-right: 0 !important; }

  /* Six readable cards replace the desktop hover accordion on touch screens. */
  .g_js .g_super { height: auto !important; background: none !important; overflow: visible !important; }
  .g_js .g_super .sup_m { display: none !important; }
  .g_js .g_super .sup_nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    height: auto !important;
    overflow: visible !important;
  }
  .g_js .g_super .sup_nav dl,
  .g_js .g_super .sup_nav dl.on,
  .g_js .g_super .sup_nav dl:not(.on) {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    padding: 16px 12px !important;
    background: #f1f6f9 !important;
    border: 1px solid #e1eaf0 !important;
    border-radius: 12px;
    backdrop-filter: none !important;
    cursor: default !important;
    transition: none !important;
  }
  .g_js .g_super .sup_nav dl dt { display: none !important; }
  .g_js .g_super .sup_nav dl::before,
  .g_js .g_super .sup_nav dl::after { display: none !important; }
  .g_js .g_super .sup_nav dl dd {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .g_js .g_super .sup_nav dl dd i,
  .g_js .g_super .sup_nav dl dd em,
  .g_js .g_super .sup_nav dl dd span { display: none !important; }
  .g_js .g_super .sup_nav dl dd h4 {
    display: block !important;
    font-size: 16px !important;
    color: #174778 !important;
    line-height: 1.5 !important;
    margin: 0 0 8px !important;
    height: auto !important;
    white-space: normal !important;
    writing-mode: horizontal-tb !important;
    text-align: left !important;
  }
  .g_js .g_super .sup_nav dl dd p {
    display: block !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
    color: #485c6e !important;
    margin: 0 !important;
    height: auto !important;
    max-height: none !important;
    text-align: left !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
  }
  html[lang="en"] .g_js .g_super .sup_nav { grid-template-columns: 1fr; }
  .g_kycg h2, .g_kycg h2 b, .video h2, .video h2 b {
    font-size: 23px !important;
    line-height: 1.5 !important;
    height: auto !important;
    white-space: normal !important;
  }
  .video .spwz, .g_kycg .m_kyleft p {
    font-size: 15px !important;
    line-height: 1.85 !important;
    text-align: left !important;
  }

  /* Product/category pages and long technical articles. */
  .p102-search-1-inp input[type="text"] { font-size: 16px !important; min-height: 44px; }
  .p102-proShow-1-title, .p102-info-blk h1 { font-size: 23px !important; line-height: 1.5 !important; }
  .hyt-product-list-6 dl { height: auto !important; }
  .hyt-product-list-6 dl dt {
    display: block !important;
    height: auto !important;
    aspect-ratio: auto !important;
    flex-shrink: 0;
  }
  .hyt-product-list-6 dl dt > a {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1;
  }
  .hyt-product-list-6 dl dt > a img {
    height: auto !important;
    aspect-ratio: 1 !important;
    object-fit: contain !important;
  }
  .hyt-product-list-6 .product-item-sample-caption {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    width: 100% !important;
    padding: 6px 4px !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
  }
  .hyt-product-list-6 .product-item-sample-caption span { white-space: nowrap; }
  .hyt-product-list-6 dl dd { height: auto !important; overflow: visible !important; }
  .hyt-product-list-6 dl dd h4 { height: auto !important; max-height: none !important; overflow: visible !important; }
  .hyt-product-list-6 dl dd h4 a { -webkit-line-clamp: 3 !important; max-height: none !important; }
  .hyt-product-list-6 dd h4 a { font-size: 16px !important; line-height: 1.5 !important; }
  .hyt-product-list-6 dd p { font-size: 14px !important; line-height: 1.7 !important; }
  .hyt-product-list-6 dl dd p {
    height: auto !important;
    max-height: none !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }
  .p102-info-list dd h4, .p102-info-list dd h4 a { font-size: 18px !important; line-height: 1.5 !important; }
  .p102-info-list-desc { font-size: 15px !important; line-height: 1.8 !important; }
  .p102-info-related-list dl, .p102-info-related-list dd {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .p102-info-related-list dd { width: 100% !important; }
  .p102-info-related-list dd h4,
  .p102-info-related-list dd h4 a {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
  .p102-info-content, .endit-content, .article-body-wrapper,
  .p102-info-content p, .endit-content p, .article-body-wrapper p,
  .p102-info-content li, .endit-content li, .article-body-wrapper li {
    font-size: 16px !important;
    line-height: 1.85 !important;
    text-align: left !important;
    overflow-wrap: anywhere;
  }
  .p102-info-content h2, .endit-content h2, .article-body-wrapper h2 { font-size: 21px !important; }
  .p102-info-content h3, .endit-content h3, .article-body-wrapper h3 { font-size: 18px !important; }
  /* Imported article blocks can carry fixed widths and non-shrinking flex items. */
  .article-body-wrapper section {
    min-width: 0 !important;
    max-width: 100% !important;
    flex-shrink: 1 !important;
  }
  .article-body-wrapper p { max-width: 100% !important; }
  .article-body-wrapper.mobile-article-grid section[style*="grid-column-start"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .mellgen-b2b-section table td { font-size: 15px !important; line-height: 1.8 !important; }
  .p102-pagination-1-main a { min-width: 44px; min-height: 44px; line-height: 44px !important; }
  .p12-sitemap-1 h4, .p12-sitemap-1 h4 a {
    height: auto !important;
    min-height: 44px;
    line-height: 1.6 !important;
    font-size: 15px !important;
    white-space: normal !important;
    overflow: visible !important;
  }
  .nsw-modal .modal-dialog {
    width: calc(100% - 32px) !important;
    max-width: 480px;
    margin-left: 0 !important;
    transform: translateX(-50%);
  }
  .nsw-modal .modal-dialog .css-icon { background-image: none !important; }
  .nsw-modal .modal-body-left, .nsw-modal .modal-logo { display: none !important; }
  .nsw-modal .modal-body-right { width: 100% !important; padding: 20px !important; }
  .nsw-modal .modal-head .close::before { content: "×"; font-size: 24px; }
  .nsw-modal .close-btn { min-height: 44px; line-height: 44px !important; }
  .mobile-image-preview {
    width: calc(100% - 24px);
    max-width: 700px;
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 12px;
    border: 0;
    border-radius: 12px;
    color: #174778;
    background: #fff;
  }
  .mobile-image-preview::backdrop { background: rgba(6, 22, 38, .8); }
  .mobile-image-preview button {
    display: block;
    width: 44px;
    height: 44px;
    margin-left: auto;
    border: 0;
    border-radius: 50%;
    background: #edf3f6;
    color: #174778;
    font-size: 28px;
  }
  .mobile-image-preview img { display: block; width: 100%; max-height: 75dvh; object-fit: contain; }
  .mobile-image-preview figcaption { padding: 12px 4px; font-size: 15px; line-height: 1.6; }
  #mellgen-global-video-modal-close { min-width: 44px; min-height: 44px; }
  #mellgen-global-video-modal-player { height: 100% !important; object-fit: contain !important; }
  .zxlb-3n-ts-02-list dt video { opacity: 1 !important; }
  .zxlb-3n-ts-02-list dt::after { background-position: center !important; background-size: 40px 40px !important; pointer-events: none; }

  /* Footer links can wrap, including their longer English labels. */
  .g_ft .m-ftnav-flat .m-ftnav-row { flex-wrap: wrap !important; gap: 8px !important; }
  .g_ft .m-ftnav-flat .m-ftnav-row a {
    flex: 1 1 calc(50% - 8px) !important;
    max-width: none !important;
    min-height: 44px !important;
    height: auto !important;
    padding: 8px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    white-space: normal !important;
  }
  .g_ft .ftmid .add h3 { font-size: 16px !important; line-height: 1.6 !important; }
  .g_ft .ftmid .add .addlst { font-size: 13px !important; line-height: 1.8 !important; margin: 12px 0 !important; }
  .g_ft .ftmid .add .addcode li { width: 76px !important; height: 76px !important; }
  .g_ft .ftd, .g_ft .ftd a { font-size: 12px !important; line-height: 1.8 !important; }
  #mg-ai-chat-window { height: 100dvh; max-height: 100dvh; padding-bottom: env(safe-area-inset-bottom, 0px); }
}

@media screen and (max-width: 359px) {
  .g_js .g_super .sup_nav { grid-template-columns: 1fr; }
  .g_top .mobile-header-actions { gap: 4px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-drawer, .mobile-drawer-overlay { transition: none !important; }
}