/* 全局样式重置，消除默认边距和内边距 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Microsoft YaHei", sans-serif;
}

/* 商品列表容器：类名从 product-list 改为 goods-list */
.dodo-goods-list {
    width: 99%;
    max-width: 1400px; /* 限制 PC 端最大宽度，避免过宽影响美观 */
    margin: 0 auto; /* 水平居中 */
    display: flex; /* 弹性布局实现商品横向排列 */
    flex-wrap: wrap; /* 自动换行，实现多行排列 */
    gap: 15px; /* 商品之间的间距（水平+垂直），替代传统 margin 更便捷 */
    padding-bottom: 20px;
}

/* 单个商品卡片样式：类名从 product-card 改为 goods-card */
.dodo-goods-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* 隐藏圆角外的内容 */
    transition: transform 0.3s ease; /* 悬停动画过渡 */
}

/* 商品卡片悬停效果，提升交互体验 */
.dodo-goods-card:hover {
    transform: translateY(-5px);
    opacity: 0.8;
}

/* 商品图片容器：类名从 product-img-wrapper 改为 goods-img-wrap */
.dodo-goods-img-wrap {
    width: 100%;
    /* 关键：padding-top: 100% 实现正方形容器，宽高比 1:1 */
    padding-top: 100%;
    position: relative;
    border-bottom: 1px solid #eee;
}

/* 商品图片样式：类名从 product-img 改为 goods-img */
.dodo-goods-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 覆盖填充，保持图片比例，裁剪多余部分，不拉伸变形 */
}

/* 商品信息容器：类名从 product-info 改为 goods-info */
.dodo-goods-info {
    padding: 12px;
}

/* 商品名称样式：类名从 product-name 改为 goods-name */
.dodo-goods-name {
    font-size: 14px;
    color: #333;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 最多显示 2 行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 商品价格容器：类名从 product-price-group 改为 goods-price-group */
.dodo-goods-price-group {
    display: flex;
    align-items: center;
    gap: 8px; /* 现价与原价之间的间距 */
}

/* 商品现价样式：类名从 product-price 改为 goods-price */
.dodo-goods-price {
    font-size: 16px;
    color: #e53e3e;
    font-weight: bold;
}

/* 商品原价样式：类名从 product-original-price 改为 goods-price-old */
.dodo-goods-price-old {
    font-size: 12px;
    color: #999; /* 浅灰色，弱化显示 */
    text-decoration: line-through; /* 核心：实现文字划线效果 */
    /* 可选：增加透明度，进一步弱化 */
    opacity: 0.8;
}

/* ========== 媒体查询（Media Query）：适配不同屏幕宽度 ========== */
/* 1. PC 端：屏幕宽度 ≥ 1250px，每行 5 个商品 */
@media (min-width: 1250px) {
    .dodo-goods-card {
        /* 计算宽度：100% 除以 5 个商品，减去间距带来的误差 */
        flex: 0 0 calc(20% - 12px);
        max-width: calc(20% - 12px);
    }
}

/* 2. 平板过渡端：屏幕宽度 ≥ 768px 且 < 1250px（原 750px 改为 768px） */
@media (min-width: 768px) and (max-width: 1249px) {
    .dodo-goods-card {
        /* 过渡布局，每行 3 个商品，提升适配体验 */
        flex: 0 0 calc(33.333% - 10px);
        max-width: calc(33.333% - 10px);
    }
}

/* 3. 手机端：屏幕宽度 < 768px，每行 2 个商品（原 750px 改为 768px） */
@media (max-width: 767px) {
    .dodo-goods-card {
        /* 计算宽度：100% 除以 2 个商品，减去间距带来的误差 */
        flex: 0 0 calc(50% - 7.5px);
        max-width: calc(50% - 7.5px);
    }
    /* 手机端优化价格字体大小，避免排版拥挤 */
    .dodo-goods-price {
        font-size: 14px;
    }
    .dodo-goods-price-old {
        font-size: 10px;
    }
}








/* 分类列表容器：goods-cate 开头，承载所有分类项 */
.goods-cate-list {
    width: 99%;
    max-width: 1400px; /* 限制 PC 端最大宽度，避免过宽影响美观 */
    margin: 0 auto; /* 水平居中 */
    display: flex; /* 弹性布局实现分类横向排列 */
    flex-wrap: wrap; /* 自动换行，实现多行排列 */
    gap: 15px; /* 分类项之间的间距（水平+垂直），布局更整洁 */
    padding-bottom: 20px;
}

/* 单个分类卡片：goods-cate 开头，基础样式统一 */
.goods-cate-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    overflow: hidden; /* 隐藏圆角外的内容 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 悬停动画过渡 */
    text-align: center; /* 分类名称居中对齐 */
}

/* 分类卡片悬停效果，提升交互体验 */
.goods-cate-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

/* 分类图片容器：goods-cate 开头，保证图片为正方形（核心修改） */
.goods-cate-img-wrap {
    width: 100%;
    padding-top: 100%; /* 关键修改：100% 实现宽高比 1:1，即正方形（原 75% 为 4:3） */
    position: relative;
    border-bottom: 1px solid #f0f0f0;
}

/* 分类图片样式：goods-cate 开头，填充正方形容器且不变形 */
.goods-cate-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 覆盖填充，保持图片比例，裁剪多余部分，不拉伸变形 */
}

/* 分类名称样式：goods-cate 开头，优化排版和视觉 */
.goods-cate-name {
    font-size: 14px;
    color: #333;
    padding: 12px 8px;
    white-space: nowrap; /* 禁止换行，保持分类名称整洁 */
    overflow: hidden; /* 隐藏超出部分 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
}

/* ========== 媒体查询（Media Query）：适配不同屏幕宽度 ========== */
/* 1. PC 端：屏幕宽度 ≥ 1250px，每行 6 个分类（满足需求） */
@media (min-width: 1250px) {
    .goods-cate-card {
        /* 计算宽度：100% 除以 6 个分类，减去间距带来的误差，保证布局整齐 */
        flex: 0 0 calc(16.6667% - 12.5px);
        max-width: calc(16.6667% - 12.5px);
    }
}

/* 2. 平板端：屏幕宽度 ≥ 768px 且 < 1250px，每行 4 个分类（满足需求） */
@media (min-width: 768px) and (max-width: 1249px) {
    .goods-cate-card {
        /* 计算宽度：100% 除以 4 个分类，减去间距带来的误差 */
        flex: 0 0 calc(25% - 11.25px);
        max-width: calc(25% - 11.25px);
    }
}

/* 3. 手机端：屏幕宽度 < 768px，每行 3 个分类（满足需求） */
@media (max-width: 767px) {
    .goods-cate-card {
        /* 计算宽度：100% 除以 3 个分类，减去间距带来的误差 */
        flex: 0 0 calc(33.3333% - 10px);
        max-width: calc(33.3333% - 10px);
    }
    /* 手机端优化分类名称字体大小，避免排版拥挤 */
    .goods-cate-name {
        font-size: 12px;
        padding: 10px 6px;
    }
}