/* ==========================================================================
   Mobile-first overrides for the Eyou PC template. Loaded after the legacy styles.
   ========================================================================== */

/* Default desktop rules for mobile components */
.m-drawer-header,
.m-nav-contact,
.head-mask,
.main2-mobile-swiper {
  display: none !important;
}
.m-submenu,
.m-submenu-toggle {
  display: none;
}

/* ==========================================================================
   Header & Banner Mobile Adaptation (Screens <= 991px)
   Black semi-transparent header designed for white logo
   ========================================================================== */
@media screen and (max-width: 991px) {
  body {
    padding-top: 70px !important;
  }
  body.m-nav-open {
    overflow: hidden !important;
    touch-action: none !important;
  }

  /* Fixed Header Bar - Black semi-transparent for white logo */
  .head {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 70px !important;
    z-index: 1002 !important;
    background: rgb(37 90 166 / 88%) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 3px 14px rgba(7, 32, 57, 0.2) !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Hide the top bar on mobile (contacts moved into nav drawer) */
  .head-top {
    display: none !important;
  }

  .head-main {
    position: static !important;
    background: transparent !important;
    height: 70px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .head-main .l-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 70px !important;
    padding: 0 14px !important;
    margin: 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
  }

  /* Logo adjustment for white logo */
  .head-main .head-logo {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-decoration: none !important;
    max-width: calc(100% - 64px) !important;
  }

  .head-main .head-logo img,
  .head-logo img {
    margin-left: 0 !important;
    margin: 0 !important;
    max-height: 54px !important;
    max-width: 260px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* Hamburger Nav Container & Button */
  .head-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 46px !important;
    min-width: 46px !important;
    margin: 0 !important;
    position: relative !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .head-nav .nav-btn {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 6px !important;
    background-color: #f47920 !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 1004 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    transition: background-color 0.25s ease, transform 0.2s ease !important;
    pointer-events: auto !important;
  }

  .head-nav .nav-btn:active {
    transform: scale(0.95) !important;
  }

  .head-nav .nav-btn span {
    display: block !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 22px !important;
    height: 2.5px !important;
    background: #ffffff !important;
    border-radius: 2px !important;
    margin: 2.5px 0 !important;
    transition: transform 0.25s ease, opacity 0.25s ease !important;
    pointer-events: none !important;
  }

  /* Hamburger Active Animation -> X */
  .head-nav.is-active .nav-btn span:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg) !important;
  }

  .head-nav.is-active .nav-btn span:nth-child(2) {
    opacity: 0 !important;
    transform: scaleX(0) !important;
  }

  .head-nav.is-active .nav-btn span:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg) !important;
  }

  /* ==========================================================================
     Mobile Side Navigation Drawer - Clean Minimalist Dark Style
     ========================================================================== */
  .head-nav > ul {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: min(84vw, 320px) !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    background: #141414 !important;
    z-index: 1003 !important;
    box-shadow: 10px 0 35px rgba(0, 0, 0, 0.55) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-bottom: none !important;
    padding: 0 0 40px 0 !important;
    margin: 0 !important;
    list-style: none !important;
    box-sizing: border-box !important;
    cursor: default !important;
    pointer-events: none !important;
    transform: translateX(-105%) !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, visibility 0.28s !important;
  }

  .head-nav > ul::-webkit-scrollbar {
    width: 3px !important;
  }
  .head-nav > ul::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12) !important;
    border-radius: 3px !important;
  }

  .head-nav:not(.is-active) > ul {
    display: block !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .head-nav.is-active > ul {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) !important;
    pointer-events: auto !important;
  }

  /* 1. Drawer Header (Brand Logo + Clean Close Button) */
  .m-drawer-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 60px !important;
    padding: 0 20px !important;
    background: #181818 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin-bottom: 6px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    box-sizing: border-box !important;
  }

  .m-drawer-brand {
    display: flex !important;
    align-items: center !important;
  }

  .m-drawer-brand img {
    max-height: 28px !important;
    max-width: 150px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
  }

  .m-drawer-close {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    position: relative !important;
    padding: 0 !important;
  }

  .m-drawer-close:active {
    opacity: 0.5 !important;
  }

  .m-drawer-close span {
    display: block !important;
    position: absolute !important;
    width: 18px !important;
    height: 1.5px !important;
    background: #ffffff !important;
    border-radius: 1px !important;
  }

  .m-drawer-close span:nth-child(1) {
    transform: rotate(45deg) !important;
  }

  .m-drawer-close span:nth-child(2) {
    transform: rotate(-45deg) !important;
  }

  /* 2. Top-Level Menu Items */
  .head-nav > ul > li:not(.m-drawer-header):not(.m-nav-contact) {
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    list-style: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
  }

  .head-nav > ul > li:not(.m-drawer-header):not(.m-nav-contact) > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 15px 48px 15px 22px !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px !important;
    color: #e0e0e0 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    line-height: 1.3 !important;
    box-sizing: border-box !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
    border-left: 3px solid transparent !important;
  }

  /* Minimal chevron indicator for leaf items without submenus */
  .head-nav > ul > li:not(.m-drawer-header):not(.m-nav-contact):not(.has-submenu) > a::after {
    content: "" !important;
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    border-top: 1.5px solid rgba(255, 255, 255, 0.2) !important;
    border-right: 1.5px solid rgba(255, 255, 255, 0.2) !important;
    transform: rotate(45deg) !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }

  /* Hover & Touch feedback */
  .head-nav > ul > li:not(.m-drawer-header):not(.m-nav-contact) > a:hover,
  .head-nav > ul > li:not(.m-drawer-header):not(.m-nav-contact) > a:active {
    background: rgba(255, 255, 255, 0.03) !important;
    color: #ffffff !important;
  }

  /* Active Menu Item - Pure Brand Green */
  .head-nav > ul > li.on > a,
  .head-nav > ul > li > a.is-active-link {
    color: #00A848 !important;
    background: rgba(0, 168, 72, 0.06) !important;
    border-left: 3px solid #00A848 !important;
    font-weight: 600 !important;
  }

  .head-nav > ul > li.on > a::after,
  .head-nav > ul > li > a.is-active-link::after {
    border-color: #00A848 !important;
  }

  /* 3. Submenu Toggle Button (Clean Transparent Accordion Arrow) */
  .head-nav .m-submenu-toggle {
    display: flex !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 48px !important;
    height: 50px !important;
    z-index: 2 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
  }

  .head-nav .m-submenu-toggle span {
    display: block !important;
    width: 7px !important;
    height: 7px !important;
    border-right: 1.5px solid rgba(255, 255, 255, 0.4) !important;
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.4) !important;
    transform: rotate(45deg) translateY(-2px) !important;
    transition: transform 0.25s ease, border-color 0.2s ease !important;
  }

  .head-nav .is-submenu-open > .m-submenu-toggle span {
    transform: rotate(225deg) translate(-2px, -2px) !important;
    border-color: #00A848 !important;
  }

  /* 4. Submenu Accordion Container */
  .head-nav .m-submenu {
    display: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 4px 0 8px 0 !important;
    list-style: none !important;
    background: rgba(0, 0, 0, 0.25) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
  }

  .head-nav .is-submenu-open > .m-submenu {
    display: block !important;
  }

  .head-nav .m-submenu > li {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    list-style: none !important;
    width: 100% !important;
  }

  .head-nav .m-submenu > li > a {
    display: flex !important;
    align-items: center !important;
    padding: 11px 20px 11px 36px !important;
    color: #a5a5a5 !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    text-transform: capitalize !important;
    transition: color 0.2s ease, background-color 0.2s ease !important;
  }

  .head-nav .m-submenu > li > a::before {
    content: "" !important;
    display: inline-block !important;
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.25) !important;
    margin-right: 10px !important;
    flex-shrink: 0 !important;
    transition: background-color 0.2s ease !important;
  }

  .head-nav .m-submenu > li > a:hover,
  .head-nav .m-submenu > li > a:active {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.03) !important;
  }

  .head-nav .m-submenu > li > a:hover::before,
  .head-nav .m-submenu > li > a:active::before {
    background: #00A848 !important;
  }

  .head-nav .m-submenu > li.on > a,
  .head-nav .m-submenu > li > a.on {
    color: #00A848 !important;
    font-weight: 500 !important;
  }

  .head-nav .m-submenu > li.on > a::before,
  .head-nav .m-submenu > li > a.on::before {
    background: #00A848 !important;
  }

  /* 5. Refined Bottom Contact Section */
  .m-nav-contact {
    display: block !important;
    padding: 20px 18px 12px 18px !important;
    margin-top: 16px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-sizing: border-box !important;
  }

  .m-contact-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .m-contact-title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    color: #00A848 !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    margin-bottom: 2px !important;
  }

  .m-contact-title::before {
    content: "" !important;
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #00A848 !important;
    box-shadow: 0 0 6px rgba(0, 168, 72, 0.6) !important;
  }

  .m-contact-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .m-contact-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: all 0.22s ease !important;
    box-sizing: border-box !important;
  }

  .m-contact-link:hover,
  .m-contact-link:active {
    border-color: #00A848 !important;
    background: rgba(0, 168, 72, 0.08) !important;
  }

  .m-contact-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 8px !important;
    background: rgba(0, 168, 72, 0.12) !important;
    border: 1px solid rgba(0, 168, 72, 0.28) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
  }

  .m-contact-link i {
    color: #00A848 !important;
    font-size: 18px !important;
    line-height: 1 !important;
    transition: transform 0.2s ease, color 0.2s ease !important;
  }

  .m-contact-link:hover .m-contact-icon,
  .m-contact-link:active .m-contact-icon {
    background: #00A848 !important;
    border-color: #00A848 !important;
  }

  .m-contact-link:hover .m-contact-icon i,
  .m-contact-link:active .m-contact-icon i {
    color: #ffffff !important;
    transform: scale(1.1) !important;
  }

  .m-contact-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    overflow: hidden !important;
    min-width: 0 !important;
  }

  .m-contact-sub {
    font-size: 10.5px !important;
    color: #8c8c8e !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
  }

  .m-contact-val,
  .m-contact-link > span:not(.m-contact-text):not(.m-contact-icon) {
    font-size: 13.5px !important;
    color: #ffffff !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    word-break: break-all !important;
    text-decoration: none !important;
  }

  /* Social Icons */
  .m-contact-social {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding-top: 14px !important;
    margin-top: 4px !important;
    border-top: 1px dashed rgba(255, 255, 255, 0.08) !important;
  }

  .m-contact-social a {
    display: inline-flex !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
  }

  .m-contact-social a:hover,
  .m-contact-social a:active {
    background: rgba(0, 168, 72, 0.18) !important;
    border-color: #00A848 !important;
  }

  .m-contact-social a img {
    width: 18px !important;
    height: 18px !important;
    object-fit: contain !important;
    display: block !important;
    opacity: 0.85 !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
  }

  .m-contact-social a:hover img,
  .m-contact-social a:active img {
    opacity: 1 !important;
    transform: scale(1.08) !important;
  }

  /* Backdrop Overlay - Pure Neutral Dark */
  .head-mask {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 1001 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.25s ease, visibility 0.25s !important;
    pointer-events: none !important;
  }

  .head-mask.is-active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* ==========================================================================
     Home Page Banner (index_focus) Full Adaptation
     Override index.css: @media (max-width: 999px) { .index_focus { display:none } }
     ========================================================================== */
  .index_focus {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: 48vw !important;
    min-height: 180px !important;
    max-height: 450px !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    z-index: 9 !important;
    background: #f3f3f3 !important;
  }

  .index_focus .index_focusn {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    left: 0 !important;
    top: 0 !important;
    margin: 0 !important;
    margin-left: 0 !important;
    z-index: 99 !important;
  }

  .index_focus .index_focusn .bd,
  .index_focus .index_focusn .bd ul {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .index_focus .index_focusn .bd li {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .index_focus .index_focusn .bd li a,
  .index_focus .index_focusn .bd li a.pic {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }

  .index_focus .index_focusn .bd li img,
  .index_focus .index_focusn .bd li img.pic {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  .index_focus_pre,
  .index_focus_next {
    display: none !important;
  }

  .index_focus .index_focusn .slide_nav {
    position: absolute !important;
    bottom: 8px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    margin-left: 0 !important;
    z-index: 9998 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .index_focus .index_focusn .slide_nav a {
    float: none !important;
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    margin: 0 !important;
    transition: all 0.25s ease !important;
    cursor: pointer !important;
  }

  .index_focus .index_focusn .slide_nav a.on,
  .index_focus .index_focusn .slide_nav .on {
    background: #f47920 !important;
    width: 18px !important;
    border-radius: 4px !important;
  }
}

/* ==========================================================================
   Page Body and Layout Overrides (Screens <= 768px)
   ========================================================================== */
@media screen and (max-width: 768px) {
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  *, *::before, *::after { box-sizing: border-box; }
  img, video, iframe { max-width: 100%; height: auto; }

  /* Give inner-page banners more visual presence while preserving a centered crop. */
  .inner-banner {
    height: 46vw !important;
    min-height: 0 !important;
    overflow: hidden;
  }
  .inner-banner > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center;
  }

  .picutre_many { width: 100% !important; }
  .product-main .part-con img { height: auto !important; }

  /* Product detail gallery: keep the album visible even when Swiper is unavailable. */
  .pro-detail .pro-preview,
  .pro-detail .preview-container,
  .pro-detail .preview-container .thumbnail-box,
  .pro-detail .preview-container .thumbnail-box .list,
  .pro-detail .preview-container #gallery {
    display: block !important;
    width: 100% !important;
  }
  .pro-detail .preview-container .thumbnail-box { margin: 0 !important; }
  .pro-detail .preview-container .thumbnail-box .list {
    min-height: 0 !important;
    overflow: hidden !important;
  }
  .pro-detail .preview-container .thumbnail-box .list .wrapper {
    display: flex !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pro-detail .preview-container .thumbnail-box .list .wrapper::-webkit-scrollbar { display: none; }
  .pro-detail .preview-container .thumbnail-box .list .wrapper .item {
    display: flex !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    height: 75vw !important;
    max-height: 520px !important;
    margin: 0 !important;
    scroll-snap-align: start;
  }
  .pro-detail .preview-container .thumbnail-box .list .wrapper .item img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    background: #ffffff;
  }
  .pro-detail .preview-container .banner-page {
    display: flex !important;
    z-index: 2;
    pointer-events: none;
  }

  /* Eliminate flex interference from legacy .fix::before and .fix::after pseudo elements */
  .fix::before,
  .fix::after,
  .main1 .cont ul.fix::before,
  .main1 .cont ul.fix::after,
  .main2 .cont .slideBox1 .bd li dl.fix::before,
  .main2 .cont .slideBox1 .bd li dl.fix::after,
  .main3 .m3box.fix::before,
  .main3 .m3box.fix::after,
  .img-list1 ul.fix::before,
  .img-list1 ul.fix::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* The original home page uses a fixed 1200px container. */
  .wp, .zj, .abt, .rong, .bt, .public_footer > p { width: 94% !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; }
  .abd, .hn { width: 100% !important; max-width: 100%; }

  /* ==========================================================================
     Main1 New Products Section (2 per row on mobile)
     ========================================================================== */
  .main1 {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  .main1 .title {
    background: none !important;
    margin-bottom: 16px !important;
    padding-top: 0 !important;
    text-align: center !important;
  }

  .main1 .title a {
    font-size: 22px !important;
    font-size: 2.2rem !important;
    line-height: 1.3 !important;
  }

  .main1 .cont ul {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    gap: 12px 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: 100% !important;
  }

  .main1 .cont ul li,
  .main1 ul li {
    float: none !important;
    width: calc(50% - 5px) !important;
    max-width: calc(50% - 5px) !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    background-color: transparent !important;
  }

  .main1 .cont ul li .libox {
    background-color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    border-radius: 6px !important;
    padding: 8px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    height: 100% !important;
  }

  .main1 .cont ul li .libox .litop {
    width: 100% !important;
    overflow: hidden !important;
    border-radius: 4px !important;
  }

  .main1 .cont ul li .libox .litop a {
    display: block !important;
    width: 100% !important;
  }

  .main1 .cont ul li .libox .litop a img {
    display: block !important;
    width: 100% !important;
    height: 125px !important;
    max-height: 140px !important;
    object-fit: cover !important;
    margin: 0 auto !important;
    border-radius: 4px !important;
    transition: transform 0.3s ease !important;
  }

  .main1 .cont ul li .libox .limid {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    min-height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .main1 .cont ul li .libox .limid a {
    font-size: 13px !important;
    font-size: 1.3rem !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    color: #333333 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
  }

  .main1 .cont ul li .libox .libot {
    padding-bottom: 2px !important;
  }

  .main1 .cont ul li .libox .libot a {
    margin: 0 auto !important;
    display: block !important;
    text-align: center !important;
    text-transform: uppercase !important;
    width: 100% !important;
    max-width: 110px !important;
    height: 24px !important;
    line-height: 24px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
    font-size: 1.1rem !important;
    font-weight: bold !important;
    color: #666666 !important;
    background-color: #f2f2f2 !important;
    transition: all 0.2s ease !important;
  }

  .main1 .cont ul li .libox .libot a:hover {
    color: #ffffff !important;
    background-color: #f47920 !important;
  }

  /* ==========================================================================
     Main2 Main Products Section (2 per row on mobile)
     ========================================================================== */
  .main2 {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
    background: none !important;
  }

  .main2 .title {
    background: none !important;
    margin-bottom: 16px !important;
    padding-top: 0 !important;
    text-align: center !important;
  }

  .main2 .title a {
    font-size: 22px !important;
    font-size: 2.2rem !important;
    line-height: 1.3 !important;
    color: #5f5e5e !important;
    font-weight: 600 !important;
    font-style: italic !important;
    display: block !important;
  }

  .main2 .title a span,
  .main2 .title a .ziti {
    color: #007C36 !important;
    font-style: oblique !important;
  }

  .main2 .cont,
  .main2 .cont .slideBox1,
  .main2 .cont .slideBox1 .tempWrap {
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
    position: static !important;
    left: 0 !important;
  }

  .main2 .slideBox1 {
    display: none !important;
  }
  .main2 .main2-mobile-swiper {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
    padding: 0 2px 30px !important;
  }
  .main2-mobile-swiper .swiper-wrapper { display: flex !important; }
  .main2-mobile-swiper .swiper-slide { flex: 0 0 100% !important; width: 100% !important; height: auto !important; }
  .main2-mobile-swiper .ddbox { overflow: hidden; border: 1px solid #e5e5e5; border-radius: 6px; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
  .main2-mobile-swiper .ddimg a, .main2-mobile-swiper .ddimg img { display: block; width: 100%; }
  .main2-mobile-swiper .ddimg img { height: min(62vw, 280px) !important; object-fit: cover; }
  .main2-mobile-swiper .ddbot a { display: block; min-height: 50px; padding: 13px 16px; color: #333; font-size: 16px; font-weight: 600; line-height: 24px; text-align: center; }
  .main2-swiper-prev, .main2-swiper-next {
    position: absolute;
    top: calc(50% - 36px);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .52);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .24);
    cursor: pointer;
  }
  .main2-swiper-prev { left: 10px; }
  .main2-swiper-next { right: 10px; }
  .main2-swiper-prev::before, .main2-swiper-next::before {
    width: 10px;
    height: 10px;
    content: '';
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
  }
  .main2-swiper-prev::before { transform: rotate(-135deg); margin-left: 4px; }
  .main2-swiper-next::before { transform: rotate(45deg); margin-right: 4px; }
  .main2-swiper-prev:active, .main2-swiper-next:active { background: #f47920; }
  .main2-swiper-pagination { display: flex; justify-content: center; gap: 7px; padding-top: 14px; }
  .main2-swiper-pagination .swiper-pagination-bullet { display: block; width: 8px; height: 8px; margin: 0 !important; border-radius: 50%; background: #b7b7b7; opacity: 1; }
  .main2-swiper-pagination .swiper-pagination-bullet-active { width: 20px; border-radius: 8px; background: #f47920; }

  .main2 .cont .slideBox1 .bd,
  .main2 .cont .slideBox1 .bd ul,
  .main2 .cont .slideBox1 .bd ul li {
    width: 100% !important;
    height: auto !important;
    position: static !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    overflow: visible !important;
    float: none !important;
  }

  .main2 .cont .slideBox1 .bd li dl,
  .main2 .cont .slideBox1 .bd dl,
  .main2 dl.fix {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    gap: 12px 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    float: none !important;
  }

  .main2 .cont .slideBox1 .bd li dl::before,
  .main2 .cont .slideBox1 .bd li dl::after,
  .main2 dl.fix::before,
  .main2 dl.fix::after,
  .main2 dl::before,
  .main2 dl::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .main2 .cont .slideBox1 .bd li dl dd,
  .main2 .cont .slideBox1 .bd dl dd,
  .main2 dl dd {
    float: none !important;
    width: calc(50% - 5px) !important;
    max-width: calc(50% - 5px) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  }

  .main2 .cont .slideBox1 .bd li dl dd .ddbox {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
    box-sizing: border-box !important;
  }

  .main2 .cont .slideBox1 .bd li dl dd .ddbox .ddtop {
    width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .main2 .cont .slideBox1 .bd li dl dd .ddbox .ddtop .ddimg a {
    display: block !important;
    width: 100% !important;
  }

  .main2 .cont .slideBox1 .bd li dl dd .ddbox .ddtop .ddimg a img,
  .main2 .cont .slideBox1 .bd img {
    display: block !important;
    width: 100% !important;
    height: 125px !important;
    max-height: 140px !important;
    object-fit: cover !important;
    border: none !important;
    margin: 0 auto !important;
  }

  .main2 .cont .slideBox1 .bd li dl dd .ddbox .ddtop .ddzz {
    display: none !important;
  }

  .main2 .cont .slideBox1 .bd li dl dd .ddbox .ddbot {
    padding: 8px !important;
    text-align: center !important;
  }

  .main2 .cont .slideBox1 .bd li dl dd .ddbox .ddbot a {
    font-size: 13px !important;
    font-size: 1.3rem !important;
    font-weight: 600 !important;
    color: #333333 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
  }

  /* Other sections */
  .main3, .main5 { padding-top: 24px !important; padding-bottom: 24px !important; }
  .main3 .m3box .recent .title a, .main5 .title a { font-size: 22px !important; line-height: 1.3 !important; }
  .m5_ul { display: flex !important; flex-wrap: wrap; gap: 12px; }
  .m5_ul li { float: none !important; width: calc(50% - 6px) !important; margin: 0 !important; }
  .main3 .m3box .recent { width: 100% !important; float: none !important; }
  .main3 .img-scroll1, .main3 .img-list1 { width: 100% !important; overflow: visible !important; }
  .main3 .img-scroll1 .prev1, .main3 .img-scroll1 .next1 { display: none !important; }
  .main3 .m3box .recent .img-list1 ul {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 12px !important;
  }
  .main3 .m3box .recent .img-list1 ul li {
    float: none !important;
    width: calc(50% - 6px) !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
  .main3 .m3box .recent .img-list1 ul li .litop,
  .main3 .m3box .recent .img-list1 ul li .limg,
  .main3 .m3box .recent .img-list1 ul li .limg a {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
  }
  .main3 .m3box .recent .img-list1 ul li .limg img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  .main3 .m3box .recent .img-list1 ul li .lizz { display: none !important; }
  .main3 .m3box .recent .img-list1 ul li .libot {
    min-height: 48px !important;
    padding: 8px !important;
    border: 1px solid #e5e5e5 !important;
    border-top: 0 !important;
  }
  .main3 .m3box .recent .img-list1 ul li .libot a {
    display: -webkit-box !important;
    overflow: hidden !important;
    color: #333 !important;
    font-size: 13px !important;
    line-height: 18px !important;
    text-align: center !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }
  .m5_ul li .m5_wrap, .m5_ul li .m5_wrap img { width: 100% !important; max-width: 100% !important; }
  .m5_ul li .m5_wrap .wen { min-height: 0; padding: 0 12px; }
  .bout { height: auto !important; min-height: 0; padding: 24px 0 !important; background-attachment: scroll; }
  .zj { height: auto !important; padding: 12px; }
  .zj h1 { height: auto !important; line-height: 1.3 !important; font-size: 24px !important; }
  .zj p { font-size: 14px !important; line-height: 1.7 !important; }
  .zj p img { float: none !important; width: 100% !important; margin: 0 0 15px !important; }

  /* Footer and enquiry form */
  .public_footer { margin-top: 40px !important; padding-top: 60px; background-color: #255aa6; background-repeat: no-repeat; background-position: center top; }
  .public_footer .wp { display: flex; flex-direction: column; gap: 0; margin-bottom: 0 !important; }
  .fon_one, .fon_two, .fon_three { float: none !important; width: 100% !important; margin: 0 !important; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.18); }
  .fon_one { border-top: 0; padding-top: 0; }
  .footer-products { display: none !important; }
  .public_footer .ttile { padding: 0 0 12px !important; font-size: 18px !important; font-weight: 700; letter-spacing: .04em; }
  .public_footer .one_ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
  .public_footer .one_ul li { width: auto !important; margin: 0 !important; }
  .public_footer .one_ul li a, .public_footer .two_ul li, .public_footer .two_ul li a { display: block; padding: 5px 0; line-height: 1.55; }
  .public_footer .two_ul { margin: 0; }
  .fon_three { padding-bottom: 0; }
  .lxy { position: static !important; width: 100% !important; padding: 22px 16px !important; border-radius: 8px; box-shadow: none; }
  .lxtou, .cor { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
  .lxtou { padding: 0 0 18px !important; font-size: 20px !important; line-height: 1.3 !important; text-align: center; }
  .cor .int1, .cor .int4 { padding-left: 0 !important; margin-top: 0 !important; margin-bottom: 12px !important; }
  .cor .int1 input, .cor .int1 textarea { width: 100% !important; min-height: 44px; margin: 0 !important; border-radius: 4px; }
  .cor .int1 textarea { min-height: 110px; padding-top: 10px; }
  .cor .int6 { float: none !important; width: 100% !important; height: 46px !important; margin: 0 !important; border-radius: 4px; font-size: 15px !important; font-weight: 700; }
  .public_footer > p { height: auto !important; line-height: 1.65 !important; padding: 18px 0 !important; text-align: center; font-size: 12px; }
  .public_footer > p span { float: none !important; width: 100% !important; text-align: center !important; }

  /* Prevent wide content in article, category and product pages. */
  .common-main article, .common-content, .pro-detail, .table-responsive { max-width: 100%; overflow-wrap: anywhere; }
  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .basic-grey { padding: 18px 12px; }
  .basic-grey label > span { float: none; display: block; width: auto; text-align: left; }
  .basic-grey input[type="text"], .basic-grey input[type="email"], .basic-grey textarea, .basic-grey select { width: 100%; }

  /* Floating contact toolbar should not cover page content on narrow screens. */
  #wmkc { right: 4px !important; transform: scale(.82) !important; transform-origin: right center; }
}

/* Even on screens <= 480px, main1 and main2 keep 2 columns! */
@media screen and (max-width: 480px) {
  .main1 .cont ul li,
  .main1 ul li,
  .main2 .cont .slideBox1 .bd li dl dd {
    width: calc(50% - 5px) !important;
    max-width: calc(50% - 5px) !important;
  }
  .m5_ul li {
    width: 100% !important;
  }
  .main3 .m3box .recent .img-list1 ul li { width: calc(50% - 6px) !important; margin: 0 !important; }
  .head-main .head-logo img, .head-logo img { max-width: 220px !important; max-height: 50px !important; }
}

/* ===========================================================================
   Tablet and compact desktop home page (769px–1279px)
   =========================================================================== */
@media screen and (min-width: 769px) and (max-width: 1279px) {
  /* Inner pages: replace the desktop 600px minimum with a proportional banner. */
  .inner-banner {
    height: clamp(300px, 32vw, 430px) !important;
    min-height: 0 !important;
    overflow: hidden;
  }
  .inner-banner > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center;
  }
  .inner-banner .inner-content { height: 100% !important; }
  .inner-banner h1,
  .inner-banner h2 { font-size: clamp(26px, 2.5vw, 34px) !important; }

  .index .wp {
    width: calc(100% - 64px) !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Keep the campaign banner visible across tablet widths and crop from center. */
  .index_focus {
    display: block !important;
    height: clamp(420px, 48vw, 620px) !important;
  }
  .index_focus .index_focusn,
  .index_focus .index_focusn .bd,
  .index_focus .index_focusn .bd ul,
  .index_focus .index_focusn .bd li,
  .index_focus .index_focusn .bd li a,
  .index_focus .index_focusn .bd li img {
    width: 100% !important;
    height: 100% !important;
  }
  .index_focus .index_focusn {
    left: 0 !important;
    margin-left: 0 !important;
  }
  .index_focus .index_focusn .bd li img {
    object-fit: cover !important;
    object-position: center center !important;
  }
  .index_focus .index_focus_pre,
  .index_focus .index_focus_next { display: block !important; }

  .main1,
  .main2 { padding-top: 44px !important; padding-bottom: 44px !important; }
  .main1 .title,
  .main2 .title { margin-bottom: 28px !important; }
  .main1 .title a,
  .main2 .title a { font-size: 28px !important; }

  .main1 .cont ul {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
  }
  .main1 .cont ul::before,
  .main1 .cont ul::after { display: none !important; }
  .main1 .cont ul li {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
  }
  .main1 .cont ul li .libox { height: 100%; padding: 8px !important; }
  .main1 .cont ul li .litop a { aspect-ratio: 4 / 3; overflow: hidden; }
  .main1 .cont ul li .litop a img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }
  .main1 .cont ul li .limid { min-height: 44px; margin: 10px 0 !important; }
  .main1 .cont ul li .limid a { font-size: 14px !important; line-height: 1.45 !important; }
  .main1 .cont ul li .libot a { width: 100% !important; max-width: 180px; font-size: 13px !important; }

  .main2 .cont .slideBox1 .bd li dl {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
  .main2 .cont .slideBox1 .bd li dl::before,
  .main2 .cont .slideBox1 .bd li dl::after { display: none !important; }
  .main2 .cont .slideBox1 .bd li dl dd {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
  }
  .main2 .cont .slideBox1 .bd li dl dd .ddtop .ddimg a { aspect-ratio: 4 / 3; overflow: hidden; }
  .main2 .cont .slideBox1 .bd li dl dd .ddtop .ddimg a img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }
  .main2 .cont .slideBox1 .bd li dl dd .ddbox .ddbot { min-height: 56px; padding: 13px 10px !important; }
  .main2 .cont .slideBox1 .bd li dl dd .ddbox .ddbot a { font-size: 14px !important; line-height: 1.45 !important; }

  .main3 { padding: 40px 0 !important; }
  .main3 .m3box .recent { width: 100% !important; float: none !important; }
  .main3 .m3box .recent .title { margin-bottom: 26px !important; }
  .main3 .m3box .recent .title a { font-size: 28px !important; }
  .main3 .m3box .recent .img-scroll1 { overflow: visible !important; }
  .main3 .m3box .recent .img-scroll1 .prev1,
  .main3 .m3box .recent .img-scroll1 .next1 { display: none !important; }
  .main3 .m3box .recent .img-list1 { overflow: visible !important; }
  .main3 .m3box .recent .img-list1 ul {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    width: auto !important;
  }
  .main3 .m3box .recent .img-list1 ul::before,
  .main3 .m3box .recent .img-list1 ul::after { display: none !important; }
  .main3 .m3box .recent .img-list1 ul li {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
  }
  .main3 .m3box .recent .img-list1 ul li .limg a { aspect-ratio: 1 / 1; overflow: hidden; }
  .main3 .m3box .recent .img-list1 ul li .limg img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }
  .main3 .m3box .recent .img-list1 ul li .libot { min-height: 60px; padding: 10px 12px !important; }
}