/* style.css */
.pd-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px; /* 图片之间的间距 */
    padding: 0 10px;
}

.pd-list > div {
    flex: 0 0 auto;
    width: 258px; /* 固定宽度，与你的HTML中定义的宽度一致 */
    margin-bottom: 20px;
}

.pd-list img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 桌面端 - 4列 */
@media screen and (min-width: 1024px) {
    .pd-list > div {
        width: calc(25% - 15px); /* 4列，减去间距 */
    }
}

/* 平板 - 3列 */
@media screen and (max-width: 1023px) and (min-width: 768px) {
    .pd-list > div {
        width: calc(33.33% - 13.33px); /* 3列，减去间距 */
    }
}

/* 手机 - 2列 */
@media screen and (max-width: 767px) {
    .pd-list > div {
        width: calc(50% - 10px); /* 2列，减去间距 */
    }
}

/* 超小屏幕 - 1列 */
@media screen and (max-width: 480px) {
    .pd-list > div {
        width: 100%;
    }
}

/* 清除浮动（备用，虽然这里使用了flex布局不需要） */
.clear {
    clear: both;
}
.pd-list .product-name {
    max-width: 100%;
    white-space: nowrap;        /* 强制单行显示 */
    overflow: hidden;           /* 隐藏溢出内容 */
    text-overflow: ellipsis;    /* 显示省略号 */
    font-size: 14px;            /* 调整字体大小，适配容器 */
    line-height: 1.2;           /* 调整行高 */
    margin: 5px 0 0;           /* 增加顶部间距，使文本与图片分离 */
    color: #333;               /* 文本颜色，可根据主题调整 */
}

.pd-list a {
    display: block;             /* 确保链接作为块级元素 */
    text-decoration: none;      /* 移除默认下划线 */
}

.pd-list a:hover {
    text-decoration: underline; /* 鼠标悬停显示下划线 */
}

/* 确保图片和名称的垂直对齐 */
.pd-list > div {
    text-align: center;         /* 居中对齐文本 */
    width: 258px;               /* 保持原有宽度 */
    margin-bottom: 20px;
}

/* 如果名称在 <strong> 标签内，确保样式应用 */
.pd-list strong {
    display: block;             /* 确保 <strong> 作为块级元素 */
    font-weight: normal;        /* 可选：调整粗细，保持一致 */
}

/* 响应式调整：确保小屏幕下字体大小适配 */
@media screen and (max-width: 767px) {
    .pd-list .product-name {
        font-size: 12px;        /* 手机端缩小字体 */
    }
}

@media screen and (max-width: 480px) {
    .pd-list .product-name {
        font-size: 11px;        /* 超小屏幕进一步缩小 */
    }
}