/* =========================================
   🛡️ MX Matrix 终极防御：产品列表单层绝对控制
   ========================================= */

/* 1. 外部绝对清零：彻底干掉 WordPress 主题（GeneratePress）默认的嵌套留白 */
body .inside-article:has(.mx-product-section),
body .entry-content:has(.mx-product-section) {
    padding: 0 !important; 
}

/* 2. 内部独揽大权：仅在电脑端（>=769px）接管容器边界 */
@media (min-width: 769px) {
    .mx-matrix-wrapper.mx-product-section .mx-container {
        /* ✅ 修改 1：直接在这里改成 30px（电脑端上下左右 30px） */
        padding: 30px !important; 
        max-width: 1640px; 
        margin: 0 auto;    
    }
}

/* 外层矩阵容器，配合 mx-container 维持内部排版 */
.mx-product-grid-wrapper {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 40px 20px; 
    padding: 0; /* 👈 必须清零，将排版权完全交给外层的 .mx-container */
}

/* 独立卡片：极简低调 */
.mx-product-card {
    background-color: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    height: 100%; 
}

/* 图片外层容器：自适应宽度 + 强制正方形 */
.mx-prod-thumb-wrap {
    width: 100%;
    max-width: 180px;
    aspect-ratio: 1 / 1;
    background-color: transparent; 
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 15px;
}

/* 产品图片本体 */
.mx-prod-thumb {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;     
    display: block;
    border: none !important; 
    padding: 0 !important;   
    transition: transform 0.4s ease, opacity 0.3s ease;
}

/* 鼠标滑过：纯图片放大 5% */
.mx-product-card:hover .mx-prod-thumb {
    transform: scale(1.05); 
    opacity: 0.9; 
}

/* 文本内容区域 */
.mx-prod-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 220px; 
    flex-grow: 1; 
}

/* 标题：强制重置边框和间距 */
.mx-product-grid-wrapper .mx-prod-title {
    font-size: 15px !important;
    line-height: 1.4 !important;
    color: var(--mx-text-dark, #111418); /* 接入全局字典颜色 */
    margin: 0 0 8px 0 !important;
    font-weight: 400 !important; 
    transition: color 0.2s ease;
    border: none !important; 
    padding: 0 !important;
    text-align: center; 
    background: transparent;
}

.mx-product-grid-wrapper .mx-product-card:hover .mx-prod-title {
    color: var(--mx-accent-blue, #2b4c9b) !important; 
}

/* 响应式断点控制 */
@media (max-width: 1200px) {
    .mx-product-grid-wrapper {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 900px) {
    .mx-product-grid-wrapper {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    /* 1. 抹除分类模板中硬编码的内联格式 */
    .tax-product_cat .inside-article {
        background-color: transparent !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }

    /* 2. 将全宽魔法直接赋予外层 wrapper，融合底层防御体系 */
    .mx-matrix-wrapper.mx-product-section {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        background-color: var(--mx-bg-white, #ffffff) !important;
        
        /* ✅ 修改 2：去掉 wrapper 层的 20px，真正实现清零，防止双层叠加 */
        padding: 0 !important; 
        
        box-sizing: border-box !important;
    }

    /* mx-container 已经全局设定了左右留白，这里无需再次为底层网格赋 padding */
    .mx-product-grid-wrapper {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 12px;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        padding: 0 !important;
        background-color: transparent !important;
    }

    .mx-product-card {
        width: 100%;
    }

    .mx-product-grid-wrapper .mx-prod-thumb-wrap {
        max-width: 100%;     
    }

    /* 4. 分页器适配 */
    .mx-pagination {
        margin: 30px auto 0 auto !important; 
    }
}

/* =========================================
   分页导航样式 (Pagination) 
   ========================================= */
.mx-pagination {
    text-align: center;
    margin: 30px auto 0 auto; /* ✅ 修改这里：上 30px，左右 auto，下 0 (彻底去掉底部留白) */
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mx-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;  
    min-height: 48px; 
    padding: 0 12px;
    background-color: #f4f5f7; 
    color: var(--mx-text-dark, #222222); 
    font-size: 14px;
    font-weight: 600; 
    text-decoration: none;
    border-radius: 0; 
    border: none; 
    transition: background-color 0.2s ease, color 0.2s ease;
}

.mx-pagination a.page-numbers:hover,
.mx-pagination a.page-numbers:focus-visible {
    background-color: var(--mx-border-light, #e5e7eb);
    color: var(--mx-text-dark, #222222);
    outline: none;
}

.mx-pagination .page-numbers.current {
    background-color: var(--mx-accent-blue, #0056b3); 
    color: var(--mx-bg-white, #ffffff);
    pointer-events: none;
}

.mx-pagination span.dots {
    background-color: transparent;
    color: var(--mx-text-gray, #666);
    min-width: auto;
}

/* 针对手机端统一修改安全留白 */
@media (max-width: 600px) {
    /* ✅ 修改 3：统一接管手机端留白，上下 30px，左右 10px */
    .mx-matrix-wrapper.mx-product-section .mx-container {
        padding: 30px 10px !important;
    }
}