/* ========================================
   Responsive Design for All Pages
   Mobile, Tablet, Desktop Adaptation
   ======================================== */

/* ========================================
   Base: brand logo & hamburger (原内联样式迁移)
   ======================================== */
.envor-logo {
    color: #E25303;
    font-style: italic;
    font-weight: bold;
    font-family: Georgia, "Times New Roman", Times, serif;
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    line-height: 1.1;
}
.envor-logo .logo-img {
    vertical-align: unset;
}
.envor-logo-header {
    font-size: 45px;
}
.envor-logo-header .logo-img {
    width: 60px;
    height: 55px;
}
.envor-logo-footer {
    font-size: 40px;
}
.envor-logo-footer .logo-img {
    width: 55px;
    height: 50px;
}

/* .menu 在壳层里由 <span> 升级为 <button>，先重置浏览器默认按钮样式，
   保证 769~1420px 区间仍是原来的纯图标外观 */
.menu {
    cursor: pointer;
    position: relative;
    z-index: 100001;
    flex-shrink: 0;
    width: 36px;
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: 0;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.menu img {
    width: 100%;
    height: auto;
    display: block;
}

/* ========================================
   Base: footer columns (原内联样式迁移)
   ======================================== */
.footer-col {
    box-sizing: border-box;
}
.footer-col-logo {
    width: 30%;
}
.footer-col-contact {
    width: 30%;
}
.footer-col-mail {
    width: 40%;
    padding-right: 50px;
}
.footer-col-contact .contact-dl {
    margin-left: 70px;
}

/* ========================================
   Base: footer brand row + QR codes
   (三个二维码等宽、居中、等间距；标题行垂直间距)
   ======================================== */
.footer-col-logo .qrcode {
    width: 100%;
    max-width: 400px;
    margin: 0 0 6px;
}
.footer-col-logo .footer-logo-row {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 52px;
    margin: 0 0 22px;
}
.footer-col-logo .qr-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    gap: 26px;
    width: 100%;
}
.footer-col-logo .qr-row .qr-item {
    flex: 0 1 auto;
    min-width: 0;
    width: 110px;
    margin: 0;
    text-align: center;
}
.footer-col-logo .qr-row .qr-item dd {
    margin: 0;
    padding-top: 0;
}
.footer-col-logo .qr-row .qr-item .qr-img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
}
.footer-col-logo .qr-row .qr-item dt {
    margin-top: 12px;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    white-space: nowrap;
}

/* 标题行统一垂直节奏 */
.footer-col-contact .contact-dl dt,
.footer-col-mail .footer-mail-heading {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    margin: 0;
}
.footer-col-contact .contact-dl dd {
    padding-top: 12px;
}
.footer-col-mail .footer-mail-heading {
    margin-bottom: 12px;
}
.footer-col-mail .footer-mail-intro {
    margin: 0 0 12px;
    line-height: 20px;
}

/* ========================================
   Base: Quality Control 证书网格 (原内联 grid 迁移)
   ======================================== */
.cert-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    margin: 20px 0;
}
.cert-grid .cert-img {
    display: block;
    width: 100%;
    height: auto;
}

/* ========================================
   Base: 新闻列表卡片 (原 JS 内联宽高迁移)
   ======================================== */
.news-card-media {
    flex-shrink: 0;
    width: 45%;
    height: 200px;
    margin: 1%;
}
.news-card-media .news-card-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 新闻页副标题（原内联 24px/60px 迁移）
   注意：style.css 的 .home-about .home-about-info p 权重更高，必须带祖先前缀 */
.home-about .home-about-info p.news-subtitle {
    max-width: 80rem;
    margin: 20px 5px 0;
    padding-bottom: 15px;
    font-size: 24px;
    font-weight: 300;
    line-height: 60px;
    color: #000000;
    text-align: left;
}

/* ========================================
   Base: 分页每页条数下拉框 (原内联样式迁移)
   ======================================== */
.p_page .page-size-select {
    box-sizing: border-box;
    width: 55px;
    height: 32px;
    padding: 0 5px;
    font-size: 14px;
    line-height: 32px;
    text-align: center;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
}

/* ========================================
   Tablet & Small Desktop (max-width: 1024px)
   ======================================== */
@media screen and (max-width: 1024px) {
    /* Brand logo scale */
    .envor-logo-header {
        font-size: 34px;
    }
    .envor-logo-header .logo-img {
        width: 44px;
        height: 40px;
    }

    /* Card Grid - 3 columns */
    .mt1440 .card-grid {
        width: 95%;
    }
    .card-grid .market-card,
    .card-grid .product-card {
        width: 31%;
    }
    
    /* About section */
    .home-about-info {
        flex-direction: column;
    }
    .info2 {
        width: 100%;
        padding: 20px;
    }
    .home-about .about-company-img {
        width: 95%;
    }
    
    /* Products page */
    .w_grid-000 {
        width: 100%;
    }
    
    /* News page */
    .news-card {
        flex-direction: column;
    }
    .news-card-media {
        width: 100%;
        height: 200px;
        margin: 0 0 14px;
    }

    /* 证书网格：平板一行两个 */
    .cert-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
    }

    .home-about .home-about-info p.news-subtitle {
        font-size: 20px;
        line-height: 1.6;
    }

    /* 页脚二维码：三列并排时收紧，避免挤到 Get In Touch 列 */
    .footer-col-logo .qr-row {
        gap: 12px;
    }
    .footer-col-logo .qr-row .qr-item {
        width: 96px;
    }
    .footer-col-logo .qr-row .qr-item dt {
        font-size: 13px;
    }
    
    /* Datasheet download */
    .grid-cols-2 {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   Tablet Portrait (max-width: 768px)
   ======================================== */
@media screen and (max-width: 768px) {
    /* Base font size */
    body {
        font-size: 14px;
    }

    /* Brand logo scale —— 手机端公司字标放大一档 */
    .envor-logo-header {
        font-size: 22px;
    }
    .envor-logo-header .logo-img {
        width: 34px;
        height: 30px;
    }
    .envor-logo-footer {
        font-size: 22px;
    }
    .envor-logo-footer .logo-img {
        width: 32px;
        height: 30px;
    }

    /* 顶部栏整体压矮：内层是内联 height:6rem，只能用 !important 覆盖；
       header 本身在文档流里撑出内容区偏移，两者必须一起改 */
    header {
        height: 64px;
    }
    header > .mt1440 {
        height: 64px !important;
    }
    /* 右侧 search/cart/EN 组的 32px 间距是桌面设定，手机端收紧，给字标让位 */
    header .other-btn .lang {
        gap: 14px !important;
    }
    
    /* Container */
    .mt1440 {
        width: 100%;
        padding: 0 15px;
    }
    
    /* Mobile Navigation Menu —— 面板必须贴在压矮后的 64px 顶栏下方 */
    header .nav {
        display: none;
        position: absolute;
        top: 64px;
        left: 0;
        width: 100%;
        background-color: #fff;
        border-top: 4px solid #3D3D3D;
        border-bottom: 4px solid #3D3D3D;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        z-index: 999;
        max-height: calc(100vh - 64px);
        overflow-y: auto;
    }
    
    header .nav.active {
        display: block;
    }
    
    header .nav a {
        display: block;
        padding: 15px 20px;
        border-bottom: 1px solid #eee;
        font-size: 16px;
        text-align: left;
        color: #333;
    }
    
    header .nav a:hover {
        background-color: #f5f5f5;
        color: #E25303;
    }
    
    /* Menu Icon —— 手机端只把图标放大并加闪烁提示，不加边框和底色 */
    .menu {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        background-color: transparent;
        border: 0 !important;
        box-shadow: none;
        line-height: 1;
        transition: transform .12s ease;
    }

    .menu img {
        width: 40px !important;
        height: 40px !important;
        display: block !important;
        max-width: 100%;
        flex-shrink: 0;
    }

    .menu:active {
        transform: scale(.9);
    }

    /* 首页轮播图 —— 手机端加高，避免 1920x700 原图被压成一条窄带。
       系数 50vw 是按原图最右侧文案（electronica 2026 / Munich, Germany，
       约在原图 72% 宽处结束）反推的：可见区域 = 视口宽 x 700/高度，
       50vw 时正好留到 1400/1920，再高就会裁掉字尾 */
    .bannerswiper.mySwiper {
        height: clamp(150px, 50vw, 300px);
    }
    .bannerswiper.mySwiper .swiper-slide {
        width: 100%;
        height: 100%;
    }
    .bannerswiper.mySwiper .swiper-slide > a.item {
        display: block;
        width: 100%;
        height: 100%;
    }
    .bannerswiper.mySwiper .swiper-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: left center;
    }

    /* 直尺分隔条 —— 原样式 background-size: contain 会把 4724x55 的整条刻度
       压进屏宽，手机上缩放比只有 0.076（刻度周期 11px -> 0.8px），抗锯齿后
       糊成一条纯灰带。这里改成按高度定缩放（auto 15px -> 周期 3px，刻度清晰），
       带高同时从 20px 收到 10px。双类名 .rules.rules 是为了压过后加载的片段样式 */
    .rules.rules {
        height: 10px;
        background-size: auto 15px;
        background-position: left top;
        background-repeat: repeat-x;
    }
    
    /* Card Grid - 2 columns */
    .mt1440 .card-grid {
        width: 100%;
        gap: 15px;
    }
    .card-grid .market-card,
    .card-grid .product-card {
        width: 48%;
    }
    
    /* Text sizes */
    .home-about .about-welcome-text {
        font-size: 18px;
    }
    .home-about .about-body-text,
    .home-about .about-desc-text,
    .home-about .markets-desc-text,
    .home-about .products-desc-text {
        font-size: 15px;
        line-height: 26px;
    }
    
    /* Images */
    .home-about .about-company-img {
        width: 100%;
        height: auto;
        max-height: 300px;
    }
    
    /* Headers */
    h1 {
        font-size: 24px !important;
    }
    h2 {
        font-size: 20px !important;
    }
    h3 {
        font-size: 18px !important;
    }
    
    /* Products page layout */
    .w_grid signal {
        width: 100%;
    }
    #w_grid-1585718765130 {
        flex-direction: column;
    }
    
    /* Category sidebar */
    .categrayBox {
        width: 100%;
    }
    
    /* Product detail */
    .p_ProInfo {
        padding: 15px;
    }
    .pd_contct p {
        font-size: 14px;
    }
    
    /* News */
    .news-info {
        flex-direction: column;
    }
    .news-l,
    .news-r {
        width: 100%;
    }

    /* Footer: stack columns vertically, fix Mail Us / Get In Touch overlap */
    footer .footer-box {
        flex-direction: column;
        align-items: stretch;
        padding-left: 0;
    }
    .footer-col-logo,
    .footer-col-contact,
    .footer-col-mail {
        width: 100%;
    }
    .footer-col-mail {
        padding-right: 0;
        margin-top: 24px;
    }
    .footer-col-contact {
        margin-top: 24px;
    }
    .footer-col-contact .contact-dl {
        margin-left: 0;
        width: 100%;
    }
    .footer-col-contact .contact-dl dd p {
        width: auto;
        word-break: normal;
    }
    /* 二维码整组居中，随列宽自适应 */
    .footer-col-logo .qrcode {
        max-width: 100%;
        margin: 0;
    }
    .footer-col-logo .footer-logo-row {
        justify-content: center;
        min-height: 44px;
        margin-bottom: 20px;
    }
    .footer-col-logo .qr-row {
        gap: 20px;
    }
    .footer-col-logo .qr-row .qr-item {
        width: 96px;
    }
    
    /* 分页：vendor 的 .p_page 全套样式写在 min-width:769px 媒体查询里，
       手机端等于没有样式 -> 页码变成块级元素竖排。这里补齐手机端横向居中样式 */
    .p_page {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 8px;
        padding: 16px 0;
    }
    .p_page .pre,
    .p_page .next,
    .p_page .pageNum {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        min-width: 40px;
        height: 40px;
        padding: 0 12px;
        font-size: 14px;
        line-height: 1;
        color: #595959;
        background-color: #fff;
        border: 1px solid #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
    }
    .p_page .pageNum.active {
        color: #fff;
        background-color: #E25303;
        border-color: #E25303;
    }
    .p_page .pre .iconfont,
    .p_page .next .iconfont {
        display: none;
    }
    .p_page .pre .i_pre,
    .p_page .next .i_next {
        display: inline;
        font-size: 16px;
    }
    .p_page select {
        height: 40px;
    }
    .p_page .page-size-select {
        width: auto;
        height: 40px;
        line-height: 40px;
        color: #595959;
        border: 1px solid #d9d9d9;
        border-radius: 6px;
    }

    /* 证书：一行一个 */
    .cert-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    .cert-grid .certificate-card h3 {
        font-size: 1rem;
    }

    /* 新闻卡片：图片占满整行，消除右侧空白 */
    .news-card-media {
        width: 100%;
        height: 190px;
        margin: 0 0 12px;
    }

    /* 新闻页副标题：手机端收紧字号与行距，左对齐不拉伸 */
    .home-about .home-about-info p.news-subtitle {
        margin: 12px 0 0;
        padding-bottom: 0;
        font-size: 17px;
        line-height: 1.55;
    }

    /* Buttons */
    .btn {
        padding: 8px 20px !important;
        font-size: 14px !important;
    }
}

/* ========================================
   Mobile (max-width: 576px)
   ======================================== */
@media screen and (max-width: 576px) {
    /* Card Grid - 2 columns on phones (一行两个) */
    .mt1440 .card-grid {
        width: 100%;
    }
    .card-grid .market-card,
    .card-grid .product-card {
        width: calc(50% - 8px);
    }
    .card-grid .market-card-title {
        font-size: 14px;
    }
    .card-grid .market-card-desc {
        font-size: 12px;
        line-height: 18px;
    }
    
    /* Market card image height */
    .card-grid .market-card-img {
        height: 180px;
    }
    .card-grid .product-card-img {
        height: 200px;
    }
    
    /* Text sizes */
    .home-about .about-welcome-text {
        font-size: 16px;
    }
    .home-about .about-body-text,
    .home-about .about-desc-text,
    .home-about .markets-desc-text,
    .home-about .products-desc-text {
        font-size: 14px;
        line-height: 24px;
    }
    
    /* About section */
    .home-about {
        padding: 15px 0;
    }
    .info2 {
        padding: 15px;
    }
    
    /* Headers */
    h1 {
        font-size: 20px !important;
    }
    h2 {
        font-size: 18px !important;
    }
    h3 {
        font-size: 16px !important;
    }
    
    /* Product detail */
    .p_ProInfo {
        padding: 10px;
    }
    .pd_contct {
        padding: 10px;
    }
    .pd_contct p {
        font-size: 13px;
        word-break: break-word;
    }
    
    /* Buttons */
    .btn {
        padding: 8px 15px !important;
        font-size: 13px !important;
    }
    
    /* Category */
    .cat-parent {
        padding: 8px 10px;
        font-size: 13px;
    }
    .cat-children li a {
        padding: 6px 10px 6px 20px;
        font-size: 12px;
    }
    
    /* News */
    .news-card {
        margin-bottom: 15px;
    }
    
    /* Datasheet */
    .grid-cols-2 {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   Small Mobile (max-width: 480px)
   ======================================== */
@media screen and (max-width: 480px) {
    /* Container padding */
    .mt1440 {
        padding: 0 10px;
    }

    /* Brand logo scale —— 480px 以下顶栏放不下 22px，退到 20px（仍比原来的 17px 大） */
    .envor-logo-header {
        font-size: 20px;
    }
    .envor-logo-header .logo-img {
        width: 30px;
        height: 27px;
    }
    .envor-logo-footer {
        font-size: 18px;
    }
    .envor-logo-footer .logo-img {
        width: 26px;
        height: 24px;
    }

    /* Footer QR codes */
    .footer-col-logo .footer-logo-row {
        margin-bottom: 18px;
    }
    .footer-col-logo .qr-row {
        gap: 22px;
    }
    .footer-col-logo .qr-row .qr-item {
        width: 96px;
    }
    .footer-col-logo .qr-row .qr-item dt {
        font-size: 13px;
        margin-top: 10px;
    }

    /* 新闻卡片图片 */
    .news-card-media {
        height: 175px;
    }
    
    /* Card Grid */
    .mt1440 .card-grid {
        gap: 10px;
    }
    
    /* Market card */
    .card-grid .market-card-body {
        padding: 12px;
    }
    .card-grid .market-card-title {
        font-size: 13px;
    }
    .card-grid .market-card-desc {
        font-size: 11px;
    }
    
    /* Product card */
    .card-grid .product-card-body {
        padding: 12px;
    }
    .card-grid .product-card-title {
        font-size: 13px;
    }
    
    /* Images */
    .home-about .about-company-img {
        max-height: 250px;
    }
    
    /* Text */
    .home-about .about-welcome-text {
        font-size: 15px;
    }
    .home-about .about-body-text,
    .home-about .about-desc-text,
    .home-about .markets-desc-text,
    .home-about .products-desc-text {
        font-size: 13px;
        line-height: 22px;
    }
    
    /* Headers */
    h1 {
        font-size: 18px !important;
    }
    h2 {
        font-size: 16px !important;
    }
    h3 {
        font-size: 15px !important;
    }
    
    /* Buttons */
    .btn {
        padding: 6px 12px !important;
        font-size: 12px !important;
    }
    
    /* Category */
    .cat-parent {
        padding: 6px 8px;
        font-size: 12px;
    }
    .cat-children li a {
        padding: 5px 8px 5px 16px;
        font-size: 11px;
    }
    
    /* Product detail */
    .pd_contct p {
        font-size: 12px;
    }
}

/* ========================================
   Extra Small Mobile (max-width: 375px)
   ======================================== */
@media screen and (max-width: 375px) {
    /* Further reduce sizes for very small screens */
    .mt1440 {
        padding: 0 8px;
    }
    
    .mt1440 .card-grid {
        gap: 8px;
    }
    
    .card-grid .market-card-body,
    .card-grid .product-card-body {
        padding: 10px;
    }
    
    .card-grid .market-card-title,
    .card-grid .product-card-title {
        font-size: 12px;
    }
    
    .card-grid .market-card-desc {
        font-size: 11px;
    }
    
    h1 {
        font-size: 16px !important;
    }
    h2 {
        font-size: 15px !important;
    }
    
    .home-about .about-welcome-text {
        font-size: 14px;
    }
    
    .home-about .about-body-text,
    .home-about .about-desc-text,
    .home-about .markets-desc-text,
    .home-about .products-desc-text {
        font-size: 12px;
        line-height: 20px;
    }
}

/* ========================================
   Narrow phones (max-width: 320px)
   ======================================== */
@media screen and (max-width: 320px) {
    .footer-col-logo .qr-row {
        gap: 12px;
    }
    .footer-col-logo .qr-row .qr-item {
        width: 84px;
    }
    .footer-col-logo .qr-row .qr-item dt {
        font-size: 12px;
    }
}

/* ========================================
   Landscape Orientation (max-height: 500px)
   ======================================== */
@media screen and (max-height: 500px) and (orientation: landscape) {
    /* Reduce padding in landscape mode */
    .home-about {
        padding: 10px 0;
    }
    
    .home-about .about-company-img {
        max-height: 200px;
    }
    
    .card-grid .market-card-img {
        height: 150px;
    }
}

/* ========================================
   Print Styles
   ======================================== */
@media print {
    body {
        background: white;
        color: black;
    }
    
    .btn,
    .menu,
    .swiper-button-next,
    .swiper-button-prev {
        display: none;
    }
}

/* ========================================
   Touch Device Optimizations
   ======================================== */
@media (hover: none) and (pointer: coarse) {
    /* Increase touch targets */
    .btn {
        min-height: 44px;
        min-width: 44px;
    }
    
    .cat-parent,
    .cat-children li a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    
    /* Remove hover effects on touch devices */
    .market-card:hover,
    .product-card:hover {
        transform: none;
    }
}

/* ========================================
   High DPI Displays
   ======================================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Ensure crisp images on high DPI screens */
    img {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* ========================================
   Safe Area Insets (iPhone X and newer)
   ======================================== */
@supports (padding: max(0px)) {
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

/* ========================================
   汉堡按钮的闪烁提示（仅手机端、且用户未开启"减弱动态效果"）
   每 2.4s 淡下去再淡回来一次，纯透明度动效，不影响布局
   ======================================== */
@media screen and (max-width: 768px) and (prefers-reduced-motion: no-preference) {
    .menu {
        animation: menu-hint 2.4s ease-in-out .6s infinite;
    }
}
@keyframes menu-hint {
    0%, 22%, 100% { opacity: 1; }
    8%, 15%       { opacity: .25; }
}

/* 360px 及以下的窄屏（老机型/小屏安卓）：顶部栏同一行还有字标和购物车，
   图标与字标各收一档，避免贴在一起 */
@media screen and (max-width: 360px) {
    .menu {
        width: 38px !important;
        height: 38px !important;
    }
    .menu img {
        width: 34px !important;
        height: 34px !important;
    }
    .envor-logo-header {
        font-size: 17px;
    }
    .envor-logo-header .logo-img {
        width: 24px;
        height: 22px;
    }
    header .other-btn .lang {
        gap: 10px !important;
    }
}