@charset "UTF-8";

/* ===== 增强手机适配 (max-width: 480px) ===== */
@media (max-width: 480px) {
    /* 全局调整 */
    body {
        overflow-x: hidden; /* 防止水平溢出 */
    }

    .product-section-first,
    .product-section {
        margin: 20px 0;              /* 减小上下边距 */
        padding: 30px 15px;           /* 左右添加安全内边距 */
        border-radius: 24px;          /* 略微缩小圆角，更协调 */
    }

    .benefits-section {
        padding: 40px 15px;
        border-radius: 30px;
        margin: 20px 0;
    }

    .section-header {
        margin-bottom: 30px;
    }

    .section-header h4 {
        font-size: 24px;              /* 主标题缩小 */
        padding: 0 30px;
        display: block;                /* 避免内联元素溢出 */
        word-break: break-word;        /* 长标题换行 */
    }

    .section-header h4::before,
    .section-header h4::after {
        font-size: 18px;              /* 叶子图标缩小 */
    }

    .section-header p {
        font-size: 14px;
        padding: 0 10px;               /* 增加文字左右边距 */
    }

    /* 网格布局：手机上一列显示，充分利用宽度 */
    .product-grid,
    .benefits-grid {
        grid-template-columns: 1fr;     /* 强制一列 */
        gap: 20px;
        padding: 10px 0;                /* 减少内边距 */
    }

    /* 卡片内边距调整 */
    .product-info-modern,
    .benefit-info {
        padding: 15px;
    }

    .product-name-modern,
    .benefit-name {
        font-size: 16px;                /* 名称稍小 */
        min-height: auto;                /* 取消固定最小高度，让内容自然撑开，防止空白 */
        -webkit-line-clamp: 3;           /* 最多显示三行 */
        line-height: 1.4;
        margin-bottom: 8px;
    }

    /* 价格区域调整，保证按钮不挤在一起 */
    .product-price-modern {
        flex-wrap: wrap;                 /* 允许换行 */
        gap: 12px;
        justify-content: center;         /* 居中 */
        margin-top: 10px;
        padding-top: 10px;
    }

    .price-tag {
        justify-content: center;
        width: 100%;                     /* 价格占满一行，按钮下一行居中 */
    }

    .price-value {
        font-size: 22px;                 /* 保持醒目但略缩 */
    }

    .product-btn {
        width: 100%;                     /* 按钮宽度铺满，更容易点击 */
        justify-content: center;
        padding: 12px 20px;               /* 增大点击区域 */
        font-size: 16px;                  /* 字号稍大，便于阅读 */
        gap: 10px;
    }

    .benefit-price {
        font-size: 20px;
    }

    /* 图片高度调整，使卡片更紧凑 */
    .benefit-image {
        height: 180px;
    }

    /* 福利卡片特殊调整 */
    .benefits-section::before {
        font-size: 100px;                 /* 背景装饰缩小 */
        top: -10px;
        right: -10px;
    }

    /* 加载更多按钮 */
    .load-more-btn {
        width: 100%;                      /* 铺满方便点击 */
        justify-content: center;
        padding: 14px 20px;               /* 左右内边距减少 */
        font-size: 16px;
    }

    /* 空状态 */
    .no-products {
        padding: 50px 15px;
    }

    .no-products i {
        font-size: 48px;
    }

    .no-products p {
        font-size: 16px;
    }

    /* 移除或调整动画延迟，避免手机卡顿且视觉效果不变 */
    .product-card-modern:nth-child(n) {
        animation-delay: 0s;               /* 手机上一同出现更简洁 */
    }

    /* 优化叶子装饰，防止影响交互或溢出 */
    .leaf-decoration {
        display: none;                     /* 手机上可隐藏装饰，提升性能 */
    }
}

/* ===== 增强小屏手机 (max-width: 360px) 的极端情况 ===== */
@media (max-width: 360px) {
    .section-header h4 {
        font-size: 20px;
        padding: 0 20px;
    }

    .section-header h4::before,
    .section-header h4::after {
        font-size: 14px;
    }

    .product-name-modern,
    .benefit-name {
        font-size: 15px;
    }

    .price-value {
        font-size: 20px;
    }

    .product-btn {
        font-size: 14px;
        padding: 10px 16px;
    }
    .product-filter{
	    text-align:center;
	    margin-bottom:30px;
	}
}

@media (max-width:768px){
    .product-filter{
        display:flex;
        justify-content:flex-start;
        overflow-x:auto;
        gap:10px;
        padding:10px;
    }
}