/* 产品卡片样式已移至 fixStyles.css，避免重复定义 */

/* 产品容器样式 */
.products-container.wide {
    --card-height: 75px;
    --card-width: calc((100% - var(--card-spacing) * (var(--wide-card-num) - 1)) / var(--wide-card-num));
}

.products-container.wide .rank_item {
    width: var(--card-width);
}

.products-container.square {
    --card-height: 224px;
    --blur-height: 128px;
    --img-height: 80px;
    --blur-value: calc(var(--img-height) / 2);
}

.products-container.square .rank_item {
    width: var(--card-width);
}

/* 产品组样式 */
.product-group {
    display: block;
    position: relative;
    --card-border: 1px;
    --card-spacing: var(--sl-spacing-small);
}

.product-group .main-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sl-spacing-small);
}

/* 产品滚动容器 */
.products-and-scroll-container {
    position: relative;
}

.products-and-scroll-container.wide {
    --card-height: 75px;
    --card-width: calc((100% - var(--card-spacing) * (var(--wide-card-num) - 1)) / var(--wide-card-num));
}

.products-and-scroll-container.square {
    --card-height: 224px;
    --blur-height: 128px;
    --img-height: 80px;
    --blur-value: calc(var(--img-height) / 2);
}

.products-and-scroll-container.square .rank_item {
    width: var(--card-width);
}

/* 产品容器方向样式 */
.products-container.direction-row {
    flex-direction: row;
}

.products-container.direction-column {
    flex-direction: column;
}

.products-container.wrap {
    flex-wrap: wrap;
}

.products-container .rank_item {
    display: inline;
}

.products-container.wide .rank_item {
    width: var(--card-width);
    min-width: var(--card-width);
}

.products-container.square .rank_item {
    width: var(--card-width);
    min-width: var(--card-width);
}

/* 确保产品链接正确显示 */
.product {
    display: flex;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.product-wide {
    display: flex;
}

.product-square {
    display: block;
}

/* 响应式调整 */
@media (max-width: 1024px) {
    .product-group {
        padding: 0;
    }
}

