/**
 * 产品分类页样式
 * Shop Archive Page Styles
 */

/* ============================================
   容器布局
   ============================================ */

.yanjing-shop-wrapper {
    padding: 60px 0 100px;
    background: #fff;
}

.yanjing-container {
    max-width: 1700px;
    margin: 0 auto;
    padding: 0 30px;
}

/* ============================================
   页面标题
   ============================================ */

.yanjing-shop-header {
    text-align: center;
    padding-bottom: 30px;
}

.yanjing-page-title {
    font-size: 36px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin: 0;
    color: #000;
}

/* ============================================
   内容布局
   ============================================ */

.yanjing-shop-content {
    position: relative;
}

/* ============================================
   Filter 按钮
   ============================================ */

.yanjing-filter-button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    background: transparent;
    color: #000;
    border: none;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s ease;
}

.yanjing-filter-button:hover {
    color: #ab8e66;
}

.yanjing-filter-button i {
    font-size: 20px;
}

.yanjing-filter-button span {
    text-transform: capitalize;
}

/* ============================================
   左侧筛选侧边栏（默认隐藏，点击弹出）
   ============================================ */

.yanjing-shop-sidebar {
    position: fixed;
    top: 0;
    left: -350px;
    width: 350px;
    height: 100vh;
    background: #fff;
    z-index: 10001; /* 确保高于蒙版(10000) */
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 2px 0 15px rgba(0, 0, 0, 0.1);
}

/* 侧边栏包装器 - 使用 Flexbox 布局 */
.yanjing-sidebar-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 侧边栏打开状态 */
.yanjing-shop-sidebar.active {
    left: 0;
}

/* ============================================
   侧边栏顶部区域
   ============================================ */

.yanjing-sidebar-header {
    position: relative;
    padding: 30px 30px 20px;
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
}

.yanjing-sidebar-close {
    display: flex;
    position: absolute;
    top: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #666;
    z-index: 10;
    transition: all 0.3s ease;
    border-radius: 50%;
}

.yanjing-sidebar-close:hover {
    color: #000;
    background: #f5f5f5;
}

.yanjing-sidebar-title {
    font-size: 16px;
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    margin: 0;
    color: #000;
    padding-right: 40px;
}

/* ============================================
   侧边栏内容区域（可滚动）
   ============================================ */

.yanjing-sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 30px 30px 20px;
}

/* 侧边栏小部件样式 */
.yanjing-shop-sidebar .widget {
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid #e0e0e0;
}

.yanjing-shop-sidebar .widget:last-child {
    border-bottom: none;
}

.yanjing-shop-sidebar .widget-title {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 20px;
    color: #000;
}

.yanjing-shop-sidebar .widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.yanjing-shop-sidebar .widget ul li {
    margin-bottom: 12px;
}

.yanjing-shop-sidebar .widget ul li a {
    color: #666;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.yanjing-shop-sidebar .widget ul li a:hover {
    color: #ab8e66;
}

.yanjing-shop-sidebar .widget ul li.current-cat > a {
    color: #ab8e66;
    font-weight: 600;
}

/* 数量标签 */
.yanjing-shop-sidebar .widget .count {
    color: #999;
    font-size: 12px;
}

/* ============================================
   价格筛选小工具样式
   ============================================ */

/* 价格筛选容器 */
.yanjing-shop-sidebar .widget_price_filter,
.yanjing-shop-sidebar .widget_yanjing_price_filter {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
}

/* 价格输入框区域 - 上方左右两个输入框并排 */
.yanjing-shop-sidebar .widget_price_filter .price_slider_amount,
.yanjing-shop-sidebar .widget_yanjing_price_filter .price_slider_amount {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 10px;
    margin-bottom: 25px;
}

/* 价格分隔符 "-" 在两个输入框之间 */
.yanjing-shop-sidebar .widget_price_filter .price_slider_amount::before,
.yanjing-shop-sidebar .widget_yanjing_price_filter .price_slider_amount::before {
    content: '-';
    color: #666;
    font-size: 14px;
    order: 1;
    flex-shrink: 0;
}

/* 价格输入框 */
.yanjing-shop-sidebar .widget_price_filter .price_slider_amount input[type="text"],
.yanjing-shop-sidebar .widget_price_filter .price_slider_amount input[type="number"],
.yanjing-shop-sidebar .widget_yanjing_price_filter .price_slider_amount input[type="text"],
.yanjing-shop-sidebar .widget_yanjing_price_filter .price_slider_amount input[type="number"] {
    flex: 1;
    width: 0;
    padding: 10px 12px;
    border: 1px solid #ddd;
    background: #fff;
    font-size: 14px;
    color: #333;
    text-align: center;
    transition: border-color 0.3s ease;
}

/* 第一个输入框在分隔符前面 */
.yanjing-shop-sidebar .widget_price_filter .price_slider_amount input:first-child,
.yanjing-shop-sidebar .widget_yanjing_price_filter .price_slider_amount input:first-child {
    order: 0;
}

/* 第二个输入框在分隔符后面 */
.yanjing-shop-sidebar .widget_price_filter .price_slider_amount input:last-child,
.yanjing-shop-sidebar .widget_yanjing_price_filter .price_slider_amount input:last-child {
    order: 2;
}

.yanjing-shop-sidebar .widget_price_filter .price_slider_amount input:focus,
.yanjing-shop-sidebar .widget_yanjing_price_filter .price_slider_amount input:focus {
    outline: none;
    border-color: #ab8e66;
}

/* 移除 .price_label 样式（如果 WooCommerce 生成的话） */
.yanjing-shop-sidebar .widget_price_filter .price_slider_amount .price_label,
.yanjing-shop-sidebar .widget_yanjing_price_filter .price_slider_amount .price_label {
    display: contents;
}

/* 价格滑块容器 */
.yanjing-shop-sidebar .widget_price_filter .price_slider_wrapper,
.yanjing-shop-sidebar .widget_yanjing_price_filter .price_slider_wrapper {
    padding: 10px 0 20px;
}

.yanjing-shop-sidebar .widget_price_filter .price_slider,
.yanjing-shop-sidebar .widget_yanjing_price_filter .price_slider {
    margin-bottom: 20px;
}

/* jQuery UI 滑块样式 - 很细的滑块 */
.yanjing-shop-sidebar .widget_price_filter .ui-slider,
.yanjing-shop-sidebar .widget_yanjing_price_filter .ui-slider {
    position: relative;
    height: 2px !important;
    background: #e0e0e0 !important;
    border: none;
    border-radius: 1px;
}

/* 滑块激活区域 - 金棕色 */
.yanjing-shop-sidebar .widget_price_filter .ui-slider .ui-slider-range,
.yanjing-shop-sidebar .widget_yanjing_price_filter .ui-slider .ui-slider-range {
    position: absolute;
    height: 100%;
    background: #ab8e66 !important;
    border-radius: 1px;
}

/* 滑块手柄 - 圆形，金棕色 */
.yanjing-shop-sidebar .widget_price_filter .ui-slider .ui-slider-handle,
.yanjing-shop-sidebar .widget_yanjing_price_filter .ui-slider .ui-slider-handle {
    position: absolute;
    width: 16px !important;
    height: 16px !important;
    background: #ab8e66 !important;
    border: 2px solid #fff !important;
    border-radius: 50% !important;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    outline: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
    margin-left: -8px;
}

.yanjing-shop-sidebar .widget_price_filter .ui-slider .ui-slider-handle:hover,
.yanjing-shop-sidebar .widget_yanjing_price_filter .ui-slider .ui-slider-handle:hover {
    transform: translateY(-50%) scale(1.15);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}

.yanjing-shop-sidebar .widget_price_filter .ui-slider .ui-slider-handle:active,
.yanjing-shop-sidebar .widget_yanjing_price_filter .ui-slider .ui-slider-handle:active {
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 价格筛选按钮 */
.yanjing-shop-sidebar .widget_price_filter .price_slider_amount button[type="submit"],
.yanjing-shop-sidebar .widget_yanjing_price_filter .price_slider_amount button[type="submit"] {
    display: none; /* 隐藏，使用底部的 Apply 按钮 */
}

/* ============================================
   产品分类筛选小工具样式
   ============================================ */

.yanjing-shop-sidebar .widget_yanjing_category_filter {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
}

.yanjing-category-filter .category-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.yanjing-category-filter .cat-item {
    margin-bottom: 12px;
}

.yanjing-category-filter .cat-item label {
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: color 0.2s ease;
}

.yanjing-category-filter .cat-item label:hover {
    color: #ab8e66;
}

/* 复选框样式 */
.yanjing-category-filter .cat-item input[type="checkbox"] {
    width: 12px;
    height: 12px;
    margin: 0 8px 0 0;
    cursor: pointer;
    flex-shrink: 0;
}

/* 分类名称 */
.yanjing-category-filter .cat-name {
    font-size: 12px;
    color: #333;
    line-height: 1.4;
    transition: color 0.2s ease;
}

.yanjing-category-filter .cat-item label:hover .cat-name {
    color: #ab8e66;
}

/* 选中状态 */
.yanjing-category-filter .cat-item input[type="checkbox"]:checked + .cat-name {
    color: #ab8e66;
    font-weight: 500;
}

/* 产品数量 */
.yanjing-category-filter .count {
    color: #999;
    font-size: 11px;
    margin-left: 4px;
}

/* 子分类容器 */
.yanjing-category-filter .children {
    list-style: none;
    padding: 0;
    margin: 8px 0 0 0;
}

/* 层级缩进 */
.yanjing-category-filter .level-1 {
    padding-left: 20px;
}

.yanjing-category-filter .level-2 {
    padding-left: 40px;
}

.yanjing-category-filter .level-3 {
    padding-left: 60px;
}

/* 子分类项 */
.yanjing-category-filter .children .cat-item {
    margin-bottom: 10px;
}

/* 子分类名称稍小 */
.yanjing-category-filter .children .cat-name {
    font-size: 11px;
}

/* 子分类复选框 */
.yanjing-category-filter .children input[type="checkbox"] {
    width: 10px;
    height: 10px;
}

/* ============================================
   产品属性筛选小工具样式
   ============================================ */

.yanjing-shop-sidebar .widget_yanjing_attribute_filter {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
}

.yanjing-attribute-filter .attribute-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 1列布局 */
.yanjing-attribute-filter.columns-1 .attribute-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 2列布局 */
.yanjing-attribute-filter.columns-2 .attribute-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.yanjing-attribute-filter .attr-item {
    margin: 0;
}

.yanjing-attribute-filter .attr-item label {
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: color 0.2s ease;
}

.yanjing-attribute-filter .attr-item label:hover {
    color: #ab8e66;
}

/* 复选框样式 */
.yanjing-attribute-filter .attr-item input[type="checkbox"] {
    width: 12px;
    height: 12px;
    margin: 0 8px 0 0;
    cursor: pointer;
    flex-shrink: 0;
}

/* 属性图片 */
.yanjing-attribute-filter .attr-image {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    flex-shrink: 0;
}

.yanjing-attribute-filter .attr-image img.term-image {
    /* 高度由内联样式控制（自定义），宽度自动 */
    max-width: 50px; /* 最大宽度限制 */
    height: auto; /* 如果没有内联样式，则自动 */
    object-fit: contain; /* 保持图片比例 */
    border-radius: 2px;
    display: block;
}

/* 属性名称 */
.yanjing-attribute-filter .attr-name {
    font-size: 12px;
    color: #333;
    line-height: 1.4;
    transition: color 0.2s ease;
}

.yanjing-attribute-filter .attr-item label:hover .attr-name {
    color: #ab8e66;
}

/* 选中状态 */
.yanjing-attribute-filter .attr-item input[type="checkbox"]:checked ~ .attr-name {
    color: #ab8e66;
    font-weight: 500;
}

/* 当有图片时，调整复选框和图片的对齐 */
.yanjing-attribute-filter .attr-item label:has(.attr-image) {
    gap: 0;
}

/* ============================================
   品牌筛选小工具样式
   ============================================ */

.yanjing-shop-sidebar .widget_yanjing_brand_filter {
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid #e0e0e0;
}

.yanjing-brand-filter .brand-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.yanjing-brand-filter .brand-item {
    margin-bottom: 12px;
}

.yanjing-brand-filter .brand-item label {
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: color 0.2s ease;
}

.yanjing-brand-filter .brand-item label:hover {
    color: #ab8e66;
}

/* 复选框样式 */
.yanjing-brand-filter .brand-item input[type="checkbox"] {
    width: 12px;
    height: 12px;
    margin: 0 8px 0 0;
    cursor: pointer;
    flex-shrink: 0;
}

/* 品牌名称 */
.yanjing-brand-filter .brand-name {
    font-size: 12px;
    color: #333;
    line-height: 1.4;
    transition: color 0.2s ease;
}

.yanjing-brand-filter .brand-item label:hover .brand-name {
    color: #ab8e66;
}

/* 选中状态 */
.yanjing-brand-filter .brand-item input[type="checkbox"]:checked + .brand-name {
    color: #ab8e66;
    font-weight: 500;
}

/* 产品数量 */
.yanjing-brand-filter .count {
    color: #999;
    font-size: 11px;
    margin-left: 4px;
}

/* 子品牌容器 */
.yanjing-brand-filter .children {
    list-style: none;
    padding: 0;
    margin: 8px 0 0 0;
}

/* 层级缩进 */
.yanjing-brand-filter .level-1 {
    padding-left: 20px;
}

.yanjing-brand-filter .level-2 {
    padding-left: 40px;
}

.yanjing-brand-filter .level-3 {
    padding-left: 60px;
}

.yanjing-brand-filter .level-4 {
    padding-left: 80px;
}

/* 子品牌项 */
.yanjing-brand-filter .children .brand-item {
    margin-bottom: 10px;
}

/* 子品牌名称稍小 */
.yanjing-brand-filter .children .brand-name {
    font-size: 11px;
}

/* 子品牌复选框 */
.yanjing-brand-filter .children input[type="checkbox"] {
    width: 10px;
    height: 10px;
}

/* ============================================
   手风琴样式（所有筛选小工具通用）
   ============================================ */

.yanjing-shop-sidebar .filter-header {
    cursor: pointer;
    position: relative;
    user-select: none;
    transition: all 0.3s ease;
}

.yanjing-shop-sidebar .filter-header:hover {
    opacity: 0.8;
}

.yanjing-shop-sidebar .filter-header .widget-title {
    padding-right: 30px;
    margin: 0;
}

.yanjing-shop-sidebar .filter-header .toggle-icon {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    font-weight: 300;
    color: #666;
    transition: transform 0.3s ease, color 0.3s ease;
}

.yanjing-shop-sidebar .filter-header .toggle-icon::before {
    content: '+';
    display: block;
}

.yanjing-shop-sidebar .filter-header.is-open .toggle-icon::before {
    content: '−';
}

.yanjing-shop-sidebar .filter-header.is-open .toggle-icon {
    color: #ab8e66;
}

.yanjing-shop-sidebar .filter-content {
    margin-top: 20px;
    overflow: hidden;
    transition: opacity 0.3s ease;
}

/* ============================================
   侧边栏底部按钮区域
   ============================================ */

.yanjing-sidebar-footer {
    padding: 20px 30px 30px;
    border-top: 1px solid #e0e0e0;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.yanjing-filter-clear,
.yanjing-filter-apply {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 1px;
}

.yanjing-filter-clear {
    background: #f5f5f5;
    color: #333;
}

.yanjing-filter-clear:hover {
    background: #e8e8e8;
    border-color: #d0d0d0;
}

.yanjing-filter-apply {
    background: #000;
    color: #fff;
}

.yanjing-filter-apply:hover {
    background: #ab8e66;
}

.yanjing-filter-clear:active,
.yanjing-filter-apply:active {
    transform: scale(0.98);
}

/* 侧边栏遮罩 - 半透明黑色背景 */
.yanjing-sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000; /* 蒙版层级，低于侧边栏 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    cursor: pointer;
}

.yanjing-sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ============================================
   产品列表区域
   ============================================ */

.yanjing-shop-main {
    width: 100%;
}

/* ============================================
   工具栏
   ============================================ */

.yanjing-shop-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e0e0e0;
}

.yanjing-result-count {
    font-size: 14px;
    color: #666;
}

.yanjing-ordering-desktop {
    display: block;
}

.yanjing-ordering-mobile {
    display: none;
}

/* 排序表单 */
.yanjing-ordering-form {
    margin: 0;
}

.yanjing-orderby-select {
    padding: 8px 35px 8px 15px;
    border: 1px solid #ddd;
    border-radius: 0;
    font-size: 14px;
    color: #333;
    background-color: #fff;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="rgb(102,102,102)" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

.yanjing-orderby-select:hover {
    border-color: #ab8e66;
}

.yanjing-orderby-select:focus {
    outline: none;
    border-color: #ab8e66;
}

/* ============================================
   产品网格
   ============================================ */

.yanjing-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    list-style: none;
    padding: 0;
    margin: 0 0 60px;
}

/* ============================================
   加载占位动画 - 骨架屏
   ============================================ */

.yanjing-loading-skeleton {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin: 0 0 60px;
}

.skeleton-item {
    animation: skeletonFadeIn 0.5s ease;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
}

/* 图片包装器 */
.skeleton-image-wrapper {
    position: relative;
    width: 100%;
    padding-top: 100%;
    background: #fafafa;
    margin-bottom: 15px;
}

/* 图片占位 */
.skeleton-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        #f0f0f0 25%,
        #e0e0e0 50%,
        #f0f0f0 75%
    );
    background-size: 200% 100%;
    animation: skeletonLoading 1.5s infinite;
}

/* 图标按钮占位（右上角） */
.skeleton-icons {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 2;
}

.skeleton-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(
        90deg,
        #f5f5f5 25%,
        #e8e8e8 50%,
        #f5f5f5 75%
    );
    background-size: 200% 100%;
    animation: skeletonLoading 1.5s infinite;
    border-radius: 50%;
}

.skeleton-icon-1 {
    animation-delay: 0.1s;
}

.skeleton-icon-2 {
    animation-delay: 0.2s;
}

/* 产品信息区域 */
.skeleton-info {
    padding: 0 8px 15px;
}

/* 文字占位通用样式 */
.skeleton-text {
    height: 14px;
    background: linear-gradient(
        90deg,
        #f0f0f0 25%,
        #e0e0e0 50%,
        #f0f0f0 75%
    );
    background-size: 200% 100%;
    animation: skeletonLoading 1.5s infinite;
    border-radius: 3px;
    margin-bottom: 10px;
}

/* 品牌占位 */
.skeleton-brand {
    width: 50%;
    height: 12px;
    opacity: 0.8;
    margin-bottom: 8px;
}

/* 标题占位（两行） */
.skeleton-title {
    height: 16px;
    margin-bottom: 6px;
}

.skeleton-title-1 {
    width: 95%;
}

.skeleton-title-2 {
    width: 70%;
    margin-bottom: 12px;
}

/* 价格区域 */
.skeleton-price-wrapper {
    margin-top: 10px;
}

.skeleton-price {
    width: 45%;
    height: 18px;
    margin-bottom: 0;
}

/* 动画定义 */
@keyframes skeletonLoading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

@keyframes skeletonFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 为不同的骨架元素添加不同的动画延迟 */
.skeleton-item:nth-child(1) { animation-delay: 0s; }
.skeleton-item:nth-child(2) { animation-delay: 0.05s; }
.skeleton-item:nth-child(3) { animation-delay: 0.1s; }
.skeleton-item:nth-child(4) { animation-delay: 0.15s; }
.skeleton-item:nth-child(5) { animation-delay: 0.2s; }
.skeleton-item:nth-child(6) { animation-delay: 0.25s; }
.skeleton-item:nth-child(7) { animation-delay: 0.3s; }
.skeleton-item:nth-child(8) { animation-delay: 0.35s; }
.skeleton-item:nth-child(9) { animation-delay: 0.4s; }
.skeleton-item:nth-child(10) { animation-delay: 0.45s; }
.skeleton-item:nth-child(11) { animation-delay: 0.5s; }
.skeleton-item:nth-child(12) { animation-delay: 0.55s; }

/* ============================================
   分页
   ============================================ */

.yanjing-pagination {
    display: flex;
    justify-content: center;
    margin-top: 60px;
}

.yanjing-page-numbers {
    display: flex;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.yanjing-page-numbers li {
    margin: 0;
}

.yanjing-page-link,
.yanjing-prev-page,
.yanjing-next-page,
.yanjing-current-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #ddd;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
}

.yanjing-page-link:hover,
.yanjing-prev-page:hover,
.yanjing-next-page:hover {
    border-color: #ab8e66;
    color: #ab8e66;
}

.yanjing-current-page {
    background: #000;
    border-color: #000;
    color: #fff;
}

/* ============================================
   无产品提示
   ============================================ */

.yanjing-no-products {
    text-align: center;
    padding: 60px 20px;
}

.yanjing-no-products p {
    color: #666;
    font-size: 16px;
    margin: 0;
}

/* ============================================
   响应式布局 - 平板
   ============================================ */

@media (min-width: 768px) and (max-width: 1199px) {
    .yanjing-shop-content {
        gap: 30px;
    }
    
    .yanjing-shop-sidebar {
        width: 240px;
    }
    
    .yanjing-products-grid,
    .yanjing-loading-skeleton {
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
    }
}

/* ============================================
   响应式布局 - 手机
   ============================================ */

@media (max-width: 767px) {
    .yanjing-shop-wrapper {
        padding: 40px 0 60px;
    }
    
    .yanjing-shop-wrapper .container {
        padding: 0 20px;
    }
    
    .yanjing-shop-header {
        margin-bottom: 30px;
        padding-bottom: 20px;
    }
    
    .yanjing-page-title {
        font-size: 24px;
        letter-spacing: 2px;
    }
    
    /* 侧边栏移动端样式 */
    .yanjing-shop-sidebar {
        position: fixed;
        top: 0;
        left: -100%;
        width: 85%;
        max-width: 320px;
        height: 100vh;
        background: #fff;
        z-index: 10001; /* 确保高于蒙版(9998) */
        
        overflow-y: auto;
        transition: left 0.3s ease;
    }
    
    .yanjing-shop-sidebar.active {
        left: 0;
    }
    
    .yanjing-sidebar-close {
        display: flex;
    }
    
    /* 工具栏 */
    .yanjing-shop-toolbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        margin-bottom: 25px;
    }
    
    /* 产品网格 */
    .yanjing-products-grid,
    .yanjing-loading-skeleton {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        margin-bottom: 40px;
    }
    
    /* 分页 */
    .yanjing-pagination {
        margin-top: 40px;
    }
    
    .yanjing-page-link,
    .yanjing-prev-page,
    .yanjing-next-page,
    .yanjing-current-page {
        min-width: 36px;
        height: 36px;
        font-size: 13px;
    }
}