/* =================================================================================
   1. ARCHIVE LAYOUT (产品列表与搜索结果容器)
   ================================================================================= */
.uyaai-archive-wrap { 
    max-width: 1200px; 
    margin: 30px auto; 
    padding: 0 20px; 
    min-height: 800px; 
}

/* 强制爆破搜索页容器限制 (确保 1200px 宽度) */
.search-results #primary, 
.search-results .site-main {
    max-width: 100% !important;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

/* 隐藏搜索页多余的侧边栏 */
.search-results #right-sidebar { display: none !important; }

/* =================================================================================
   2. FILTER SYSTEM (筛选器 - PC 横向 / 移动端抽屉)
   ================================================================================= */

/* PC 端筛选器样式 */
.uyaai-filter-container { 
    background: #f9f9f9; 
    padding: 25px; 
    border-radius: 12px; 
    margin-bottom: 40px; 
    border: 1px solid var(--uyaai-border); 
}

.filter-grid { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 20px; 
    align-items: flex-end; 
}

.f-item { 
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
    flex: 1; 
    min-width: 160px; 
}

.f-item label { 
    font-size: 11px; 
    font-weight: 700; 
    color: var(--uyaai-muted); 
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
}

.f-item select { 
    padding: 12px 15px; 
    border: 1px solid #ddd; 
    border-radius: 6px; 
    background: #fff; 
    font-size: 14px; 
    width: 100%; 
    height: 45px; 
    cursor: pointer;
}

.btn-apply-filter { 
    background: var(--uyaai-black); 
    color: #fff; 
    border: none; 
    padding: 12px 30px; 
    border-radius: 6px; 
    cursor: pointer; 
    font-weight: 700; 
    transition: var(--transition); 
    height: 45px; 
}

.btn-apply-filter:hover { background: var(--uyaai-pink); }

.filter-reset-link { 
    font-size: 13px; 
    color: var(--uyaai-muted); 
    text-decoration: none; 
    margin-left: 15px; 
    font-weight: 600; 
}

/* 移动端筛选器逻辑 */
@media (max-width: 768px) {
    .mobile-filter-trigger { 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        gap: 10px;
        width: 100%; 
        padding: 14px; 
        background: var(--uyaai-black); 
        color: #fff; 
        border-radius: 8px; 
        margin-bottom: 25px; 
        font-weight: 700; 
        cursor: pointer;
    }
    
    /* 抽屉面板化 */
    .uyaai-filter-container {
        position: fixed; 
        top: 0; 
        right: -100%; /* 初始隐藏 */
        width: 85%; 
        max-width: 320px; 
        height: 100vh; 
        background: #fff; 
        z-index: 1000001; 
        margin: 0; 
        border-radius: 0;
        padding: 30px 20px; 
        transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        overflow-y: auto; 
        box-shadow: -5px 0 25px rgba(0,0,0,0.1);
    }
    .uyaai-filter-container.active { right: 0; }

    .drawer-header { 
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
        margin-bottom: 30px; 
        border-bottom: 1px solid #eee; 
        padding-bottom: 15px; 
    }
    
    .filter-grid { flex-direction: column; align-items: stretch; gap: 25px; }
    .btn-apply-filter { width: 100%; }
}

/* =================================================================================
   3. PRODUCT GRID & CARDS (统一卡片网格系统)
   ================================================================================= */
.uyaai-grid { 
    display: grid !important; 
    grid-template-columns: repeat(4, 1fr) !important; 
    gap: 30px !important; 
    width: 100% !important;
}

.uyaai-card { 
    background: #fff; 
    border: 1px solid var(--uyaai-border); 
    border-radius: 12px; 
    overflow: hidden; 
    display: flex; 
    flex-direction: column; 
    transition: var(--transition); 
    position: relative; 
}

.uyaai-card:hover { 
    transform: translateY(-8px); 
    box-shadow: 0 15px 35px rgba(0,0,0,0.08); 
    border-color: var(--uyaai-pink); 
}

/* 图片区域：1:1 正方形比例锁定 */
.card-thumb { 
    display: block; 
    aspect-ratio: 1/1; 
    background: var(--uyaai-bg); 
    overflow: hidden; 
}
.card-thumb img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    transition: 0.5s; 
}
.uyaai-card:hover .card-thumb img { transform: scale(1.05); }

/* 卡片内容区 (高度极致收紧版) */
.card-body { 
    padding: 12px 15px; 
    text-align: center; 
    flex: 1; 
}

.card-series-tag { 
    font-size: 10px; 
    font-weight: 800; 
    color: var(--uyaai-pink); 
    text-transform: uppercase; 
    margin-bottom: 4px; 
    display: block; 
    letter-spacing: 1px; 
}

.card-title { 
    font-size: 15px; 
    font-weight: 700; 
    color: var(--uyaai-black); 
    margin: 0 0 10px 0; 
    line-height: 1.3; 
    text-decoration: none; 
    display: block; 
    min-height: 20px; 
}

.btn-uyaai-add { 
    width: 100%; 
    background: var(--uyaai-pink) !important; 
    color: #fff !important; 
    border: none; 
    padding: 14px; 
    font-weight: 700; 
    cursor: pointer; 
    transition: 0.3s; 
    font-size: 13px; 
    text-transform: uppercase; 
}

/* =================================================================================
   4. PAGINATION (分页与跳转)
   ================================================================================= */
.uyaai-pagination-area { 
    width: 100% !important; 
    grid-column: 1 / -1; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 25px; 
    margin-top: 60px; 
}

.page-numbers-list, .nav-links { 
    display: flex; 
    gap: 8px; 
    list-style: none; 
    padding: 0; 
}

.page-numbers-list .page-numbers, .nav-links a, .nav-links span { 
    padding: 10px 18px; 
    border: 1px solid var(--uyaai-border); 
    border-radius: 6px; 
    text-decoration: none; 
    color: var(--uyaai-black); 
    font-weight: 600; 
}

.page-numbers-list .current, .nav-links .current { 
    background: var(--uyaai-pink); 
    color: #fff !important; 
    border-color: var(--uyaai-pink); 
}

/* 跳转框 */
.jump-box { display: flex; align-items: center; gap: 12px; font-size: 14px; color: #888; }
.jump-box input { 
    width: 60px; 
    padding: 8px; 
    text-align: center; 
    border: 1px solid #ddd; 
    border-radius: 6px; 
    font-weight: 700; 
    height: 38px; 
}

/* =================================================================================
   5. RESPONSIVE GRID (响应式网格断点)
   ================================================================================= */
@media (max-width: 1024px) { 
    .uyaai-grid { grid-template-columns: repeat(3, 1fr) !important; } 
}

@media (max-width: 768px) { 
    .uyaai-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 15px !important; } 
    .card-body { padding: 10px; }
    .card-title { font-size: 14px; }
}