/* ========== 全局变量 ========== */
:root {
    --primary: #007bff;
    --primary-hover: #0069d9;
    --gray-light: #f8f9fa;
    --gray-border: #e9ecef;
    --text-dark: #212529;
    --text-muted: #6c757d;
    --card-shadow: 0 2px 10px rgba(0,0,0,0.05);
    --card-shadow-hover: 0 12px 20px rgba(0,0,0,0.1);
    --border-radius: 0.5rem;
    --transition: all 0.3s ease;
}

/* ========== 基础布局 ========== */
#sp-component > .sp-column,
#sp-right > .sp-column {
    background: #fff;
    border-radius: var(--border-radius);
    overflow: hidden;
}

#sp-main-body {
    background: var(--gray-light);
    padding: 2rem 0;
}

.bg-white #sp-main-body {
    background: #fff;
}

/* ========== 文章列表卡片优化 ========== */
.com-content-category-blog__item.xblog-item {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--gray-border);
    transition: var(--transition);
}

/* 卡片悬浮效果（可选，若需要卡片化布局可启用） */

.xblog-item {
    background: #fff;
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    transition: var(--transition);
}
.xblog-item:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-2px);
}


/* 文章标题 */
.item-title a {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-dark);
    text-decoration: none;
}
.item-title a:hover {
    color: var(--primary);
}

/* 摘要 */
.article-intro-text,
.article-desc {
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0.75rem 0;
}

/* 元数据信息 */
.article-info {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

/* 阅读更多 */
.readmore a {
    display: inline-flex;
    align-items: center;
    font-weight: 500;
    color: var(--primary);
    text-decoration: none;
    transition: var(--transition);
}
.readmore a:hover {
    color: var(--primary-hover);
}
.readmore a::after {
    content: '→';
    margin-left: 0.25rem;
    transition: transform 0.2s;
}
.readmore a:hover::after {
    transform: translateX(4px);
}

/* ========== 侧边栏模块优化 ========== */
#sp-right .sp-module {
    margin-top: 1.5rem;
    padding: 0;
    border: none;
    background: transparent;
}
#sp-right .sp-module .sp-module-title {
    font-size: 1.125rem;
    font-weight: 600;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--primary);
    display: inline-block;
}
#sp-right .sp-module ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
#sp-right .sp-module li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--gray-border);
}
#sp-right .sp-module li:last-child {
    border-bottom: none;
}
#sp-right .sp-module li a {
    color: var(--text-dark);
    text-decoration: none;
    transition: var(--transition);
}
#sp-right .sp-module li a:hover {
    color: var(--primary);
    padding-left: 0.25rem;
}

/* 搜索模块 */
.mod-finder {
    margin-bottom: 1rem;
}
.mod-finder .awesomplete {
    width: 100%;
}
.mod-finder .awesomplete > input {
    border-radius: 2rem;
    border: 1px solid var(--gray-border);
    padding: 0.5rem 1rem;
    width: 100%;
    transition: var(--transition);
}
.mod-finder .awesomplete > input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
    outline: none;
}

/* ========== 商城相关样式优化 ========== */
/* 商品列表卡片 */
.zlist.grid .zitem-wrap .zitem {
    background: #fff;
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    transition: var(--transition);
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.zlist.grid .zitem-wrap .zitem:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-2px);
}
.zi-price {
    color: #f96868;
    font-weight: 600;
    margin: 0.5rem 0;
    text-align: center;
}

/* 购物车、支付页面 */
.com-zmaxshop.view-shopcart #sp-component > .sp-column,
.com-zpaycenter #sp-component > .sp-column {
    background: transparent;
}
.zmax-mini-shopcart {
    background: var(--gray-light);
    border-radius: var(--border-radius);
    padding: 0.5rem;
    font-size: 0.875rem;
}
.zmax-mini-shopcart .fa-shopping-cart {
    font-size: 1.5rem;
    line-height: 2rem;
    min-width: 2rem;
}

/* 商品详情页 */
.item-detail-container {
    background: var(--gray-light);
    padding: 2rem 0;
}
.item-detail-container .detail-content-wrap,
.item-detail-container .zmaxshop-content-sidebar {
    background: #fff;
    padding: 1.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
}

/* ========== 技术区块（首页等） ========== */
.tech {
    text-align: center;
    padding: 3rem 0;
}
.tech i {
    width: 7.5rem;
    height: 7.5rem;
    background: var(--gray-light);
    border-radius: 50%;
    font-size: 3rem;
    line-height: 7.5rem;
    color: var(--text-dark);
    transition: var(--transition);
    display: inline-block;
}
.tech i:hover {
    background: var(--primary);
    color: #fff;
}
.tech h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 1rem 0;
}

/* 首页关于我们区块 */
.home-about-us .mod-custom {
    background: #fff;
    border-radius: var(--border-radius);
    padding: 1.5rem;
    box-shadow: var(--card-shadow);
}

/* ========== 模块标题通用样式 ========== */
.zmod-title {
    font-size: 1.75rem;
    font-weight: 300;
    text-align: center;
    margin-bottom: 0.5rem;
    color: var(--text-dark);
}
.zmod-desc {
    font-size: 1rem;
    font-weight: 300;
    text-align: center;
    color: var(--text-muted);
    margin-bottom: 2rem;
}

/* ========== 响应式适配 ========== */
@media (max-width: 768px) {
    #sp-component > .sp-column,
    #sp-right > .sp-column {
        padding: 1rem;
    }
    .item-title a {
        font-size: 1.125rem;
    }
    .tech {
        padding: 2rem 0;
    }
    .tech i {
        width: 5rem;
        height: 5rem;
        line-height: 5rem;
        font-size: 2rem;
    }
    .zmod-title {
        font-size: 1.5rem;
    }
    .zlist.grid .zitem-wrap .zitem {
        margin-bottom: 1rem;
    }
    /* 两列网格改为单列 */
    .blog-items {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }
}

/* 可选：使文章列表变为网格布局（配合 blog.php 的网格类） */
.blog-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}
@media (max-width: 768px) {
    .blog-items {
        grid-template-columns: 1fr;
    }
}