/**
 * 好物页面插件前端样式
 */

/* 确保所有元素使用border-box盒模型 */
.goods-exhibition-container,
.goods-exhibition-container * {
    box-sizing: border-box;
}

/* 容器样式 */
.goods-exhibition-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
    /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; */ /* 移除，继承默认字体 */
    text-align: center; /* 使内容居中 */
}

/* 网格布局 */
.goods-exhibition-grid {
    display: flex;
    flex-wrap: wrap;
    margin: -10px;
    justify-content: center; /* 使卡片居中 */
}

/* 产品项样式 */
.goods-exhibition-item {
    flex: 0 0 calc(50% - 20px);
    margin: 10px;
    display: flex;
    flex-direction: column;
    background-color: #f3f4f7;
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    max-width: 320px; /* 缩小最大宽度 */
    text-align: left; /* 内容左对齐 */
}

.goods-exhibition-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.goods-exhibition-item-placeholder:hover {
    box-shadow: none;
}

/* 有链接的卡片样式 */
.goods-exhibition-item.has-link {
    position: relative; /* 为绝对定位的伪元素提供容器 */
    cursor: pointer;
}

/* 链接图标样式 (恢复为 SVG) */
.goods-exhibition-item.has-link::after {
    /* content: "\f0c1"; */ /* 移除 Font Awesome 图标 */
    /* font-family: "Font Awesome 5 Free"; */
    /* font-weight: 900; */
    content: ''; /* 恢复为空 content */
    position: absolute;
    bottom: 10px; /* 保持在右下角 */
    right: 10px;  /* 保持在右下角 */
    width: 16px; /* 恢复宽度 */
    height: 16px; /* 恢复高度 */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>'); /* 恢复 SVG 背景 */
    background-repeat: no-repeat; /* 恢复 */
    background-size: contain; /* 恢复 */
    /* font-size: 14px; */ /* 移除 */
    /* color: #007bff; */ /* 移除 */
    opacity: 0.7;
    transition: opacity 0.3s ease;
    z-index: 5; /* 可根据需要调整层级 */
}

.goods-exhibition-item.has-link:hover::after {
    opacity: 1;
}

/* 占位项，用于奇数个产品时保持对齐 */
.goods-exhibition-item-placeholder {
    background: transparent;
    box-shadow: none;
}

/* 图片容器 */
.goods-exhibition-image-container {
    position: relative;
    padding-top: 80%; /* 4:5 比例，更小一些 */
    background-color: #f3f4f7; /* 与卡片背景一致 */
    overflow: hidden;
}

/* 产品图片 */
.goods-exhibition-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 15px;
    transition: transform 0.3s ease;
}

.goods-exhibition-item:hover .goods-exhibition-image {
    transform: scale(1.03);
}

/* 新品标签 */
.goods-exhibition-new-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    color: #98c1d9;
    padding: 3px 8px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 4px;
    z-index: 1;
}

/* 内容区域 */
.goods-exhibition-content {
    padding: 20px; /* 上下左右都设置为 20px */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* 产品标题 */
.goods-exhibition-title {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
}

/* 产品描述 */
.goods-exhibition-description {
    line-height: 1.4;
    flex-grow: 1;
    font-size: 14px;
}

/* 行分隔符 */
.goods-exhibition-row-divider {
    flex-basis: 100%;
    height: 0;
}

/* 空状态 */
.goods-exhibition-empty {
    text-align: center;
    padding: 30px;
    font-size: 14px;
    color: #86868b;
}

/* 响应式布局 */
@media (max-width: 768px) {
    .goods-exhibition-grid {
        margin: -8px;
    }
    
    .goods-exhibition-item {
        flex: 0 0 calc(100% - 16px);
        margin: 8px;
    }
}