/* 修复样式 - 确保所有必要的 CSS 变量都有默认值 */
/* 注意：此文件应最后加载，以确保样式优先级正确 */

:root {
    /* 卡片相关变量 */
    --card-padding: var(--sl-spacing-medium, 1rem);
    --card-border: 1px;
    --card-spacing: var(--sl-spacing-small, 0.75rem);
    
    /* 确保卡片数量变量有默认值 */
    --wide-card-num: var(--wide-card-num, 4);
    --square-and-tall-card-num: var(--square-and-tall-card-num, 8);
    --whalf-card-num: var(--whalf-card-num, 2);
    
    /* 主题相关变量 */
    --theme-border-color: var(--sl-color-neutral-200, #e5e7eb);
    --theme-subtitle-color: var(--sl-color-neutral-600, #4b5563);
    --apps-primary-color: var(--theme-primary-element-color, #4285f4);
    --apps-primary-color-hover: var(--sl-color-primary-700, #3367d6);
}

/* 产品卡片通用样式 - 使用更具体的选择器避免冲突 */
.rank_item,
.rank_item-wide,
.rank_item-square,
.rank_item-tall,
.rank_item-collect,
.rank_item-card,
.rank_item-recommend,
.rank_item-square-details,
.rank_item-wide-details,
.rank_item-collect-banner,
.rank_item-trend-item {
    position: relative;
    width: var(--card-width);
    flex-shrink: 0;
    --real-card-width: 0px;
    --real-card-height: 0px;
    --light-theme-background-color: var(--sl-color-neutral-0);
    --dark-theme-background-color: var(--sl-color-neutral-50);
    --common-background-color: var(--light-theme-background-color);
    box-sizing: border-box;
}

/* 为不同组件类型添加更具体的选择器，避免 scoped 样式冲突 */
.rank_item-wide {
    /* Wide 类型卡片特定样式 */
}

.rank_item-square {
    /* Square 类型卡片特定样式 */
}

.rank_item-tall {
    /* Tall 类型卡片特定样式 */
}

.rank_item-collect {
    /* Collect 类型卡片特定样式 */
    width: var(--card-width) !important;
    flex-shrink: 0 !important;
    position: relative;
    display: block;
}

.rank_item-card {
    /* Card 类型卡片特定样式 */
}

.rank_item-recommend {
    /* Recommend 类型卡片特定样式 */
}

.rank_item-square-details {
    /* SquareDetails 类型卡片特定样式 */
}

.rank_item-wide-details {
    /* WideDetails 类型卡片特定样式 */
}

.rank_item-collect-banner {
    /* CollectBanner 类型卡片特定样式 */
}

.rank_item-trend-item {
    /* TrendItem 类型卡片特定样式 */
}

/* 产品容器基础样式修复 */
.products-container {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    gap: var(--card-spacing, 0.75rem);
    --shadow-spacing: 8px;
    padding: var(--shadow-spacing, 8px);
    margin: calc(-1 * var(--shadow-spacing, 8px));
    box-sizing: border-box;
}

.products-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* 确保容器有正确的对齐方式 */
.products-container {
    align-items: stretch;
}

/* Wide 类型容器 - 使用 !important 确保优先级 */
/* styleId 为 2 时，使用水平滚动，显示两行，每行4个卡片 */
.wide-column-collection .products-container.wide.wrap.direction-column {
    --card-height: 75px !important;
    --wide-card-num: 4 !important;
    --card-width: calc((100% - var(--card-spacing) * (var(--wide-card-num) - 1)) / var(--wide-card-num)) !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
    /* max-height: calc((var(--card-height) + var(--card-spacing)) * 2) !important; */
    overflow-y: hidden !important;
    overflow-x: auto !important;
    align-items: stretch !important;
    /* height: calc((var(--card-height) + var(--card-spacing)) * 2) !important; */
    min-height: calc((var(--card-height) + var(--card-spacing)) * 2) !important;
    scroll-behavior: smooth !important;
}

/* 非 styleId 2 的 wide 容器保持垂直换行 */
.product-group:not(.wide-column-collection) .products-container.wide.wrap.direction-column {
    --card-height: 75px !important;
    --card-width: calc((100% - var(--card-spacing) * (var(--wide-card-num) - 1)) / var(--wide-card-num)) !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
    max-height: 300px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    align-items: stretch !important;
    height: auto !important;
    min-height: var(--card-height) !important;
}

.products-container.wide .rank_item {
    width: var(--card-width) !important;
    min-width: var(--card-width) !important;
    max-width: var(--card-width) !important;
    /* margin-bottom: var(--card-spacing) !important; */
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

/* styleId 2 的评分显示样式 */
.wide-column-collection .product-wide .subtitle {
    display: flex !important;
    align-items: center;
    gap: var(--sl-spacing-2x-small, 0.5rem);
}

.wide-column-collection .product-wide .subtitle .rating-element {
    display: flex !important;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.wide-column-collection .product-wide .subtitle .rating-element .label {
    font-size: var(--sl-font-size-x-small, 0.75rem);
    color: var(--sl-color-neutral-600, #4b5563);
    line-height: 1;
}

.wide-column-collection .product-wide .subtitle .categories {
    flex: 1;
    min-width: 0;
}

/* styleId 为 2 时，使用水平滚动，需要 margin-right，同时需要 margin-bottom 用于换行 */
.wide-column-collection .products-container.wide .rank_item {
    /* margin-bottom: var(--card-spacing) !important;
    margin-right: var(--card-spacing) !important; */
}

/* 每行的最后一个卡片不需要右边距 */
/* .wide-column-collection .products-container.wide .rank_item:nth-child(4n) {
    margin-right: 0 !important;
} */

/* 最后一行的卡片不需要下边距 */
/* .wide-column-collection .products-container.wide .rank_item:nth-last-child(-n+4) {
    margin-bottom: 0 !important;
} */

/* Wide-half 类型容器 - styleId 3 */
/* 水平滚动，显示三行，每行2个卡片 */
.products-container.wide-half {
    --card-height: 75px;
    --whalf-card-num: 2 !important;
    --card-width: calc((100% - var(--card-spacing) * (var(--whalf-card-num) - 1)) / var(--whalf-card-num)) !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
    max-height: calc((var(--card-height) + 2.5rem + var(--card-spacing)) * 3) !important;
    height: calc((var(--card-height) + 2.5rem + var(--card-spacing)) * 3) !important;
    overflow-y: hidden !important;
    overflow-x: auto !important;
    scroll-behavior: smooth !important;
}

.products-container.wide-half .rank_item {
    width: var(--card-width) !important;
    min-width: var(--card-width) !important;
    max-width: var(--card-width) !important;
    /* margin-bottom: var(--card-spacing) !important;
    margin-right: var(--card-spacing) !important; */
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

/* Square 类型容器 - 使用 !important 确保优先级 */
.products-container.square.direction-row {
    --card-height: 224px !important;
    --blur-height: 128px !important;
    --img-height: 80px !important;
    --blur-value: calc(var(--img-height) / 2) !important;
    --square-and-tall-card-num: 8 !important;
    --card-width: calc((100% - var(--card-spacing) * (var(--square-and-tall-card-num) - 1)) / var(--square-and-tall-card-num)) !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
    scroll-behavior: smooth !important;
}

/* Square 类型容器 - collectlist 模式（应用列表页面） */
.products-container.square.direction-row.wrap {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    --square-and-tall-card-num: 8 !important;
    --card-width: calc((100% - var(--card-spacing) * (var(--square-and-tall-card-num) - 1)) / var(--square-and-tall-card-num)) !important;
}

.products-container.square .rank_item {
    width: var(--card-width) !important;
    min-width: var(--card-width) !important;
    max-width: var(--card-width) !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    /* margin-right: var(--card-spacing) !important;
    margin-bottom: 0 !important; */
}

.products-container.square .rank_item:last-child {
    margin-right: 0 !important;
}

/* Tall 类型容器 */
.products-container.tall {
    --card-height: 300px;
    --img-height: 300px;
    --card-width: calc((100% - var(--card-spacing) * (var(--square-and-tall-card-num) - 1)) / var(--square-and-tall-card-num));
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    flex-wrap: nowrap;
}

.products-container.tall .rank_item {
    width: calc((100% - 0.75rem * (8 - 1)) / 8);
    min-width: calc((100% - var(--card-spacing) * (var(--square-and-tall-card-num) - 1)) / var(--square-and-tall-card-num)) !important;
    flex-shrink: 0;
}

/* Tall 类型 - styleId 6：所有卡片完全可见，水平滚动 */
.products-container.tall.direction-row {
    /* 使用默认的 square-and-tall-card-num，通常是 8 */
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    scroll-behavior: smooth !important;
}

/* BannerCard 特定样式：每页显示5个应用（优先级更高） */
.collection-has-bg .products-container.tall.direction-row .rank_item {
    /* BannerCard 使用固定的5个卡片宽度 */
    width: calc((100% - var(--card-spacing) * (5 - 1)) / 5) !important;
    min-width: calc((100% - var(--card-spacing) * (5 - 1)) / 5) !important;
    max-width: calc((100% - var(--card-spacing) * (5 - 1)) / 5) !important;
    flex-shrink: 0 !important;
}

.products-container.tall.direction-row .rank_item {
    /* 所有卡片使用相同的宽度计算 */
    flex-shrink: 0 !important;
}

/* 确保产品卡片正确显示 - 已在上面定义，这里删除重复 */

/* Wide Item 样式修复 - 使用更具体的选择器，避免 scoped 样式冲突 */
.rank_item-wide .product.product-wide,
.rank_item .product.product-wide,
.product.product-wide {
    --real-card-width: calc(var(--card-width) - (2 * var(--card-border)) - (2 * var(--card-padding)));
    --real-card-height: var(--card-height);
    display: flex !important;
    padding: var(--card-padding, 1rem);
    border: var(--card-border, 1px) solid var(--theme-border-color, #e5e7eb);
    border-radius: var(--sl-border-radius-large, 8px);
    box-shadow: var(--sl-shadow-small, 0 1px 3px rgba(0,0,0,0.1));
    background-color: var(--common-background-color, #fff);
    min-height: var(--card-height, 75px);
    height: var(--card-height, 75px);
    gap: var(--sl-spacing-x-small, 0.5rem);
    text-decoration: none;
    color: inherit;
    position: relative;
}

.product-wide .product-image {
    /* width: 75px;
    height: 75px; */
    height: var(--card-height);
    width: auto;
    border-radius: var(--sl-border-radius-large);
    flex-shrink: 0;
    object-fit: cover;
    background-color: transparent;
}

.product-wide .info-container {
    flex: 1;
    min-width: 0;
    /* margin-left: var(--sl-spacing-x-small, 0.5rem); */
}

.product-wide .title {
    font-size: var(--sl-font-size-medium, 1rem);
    font-weight: var(--sl-title-font-weight, 600);
    color: var(--sl-color-neutral-800, #1f2937);
    margin: 0;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.product-wide .subtitle {
    display: flex;
    align-items: center;
    gap: var(--sl-spacing-x-small, 0.5rem);
}

.product-wide .categories {
    font-size: var(--sl-font-size-x-small, 0.75rem);
    color: var(--theme-subtitle-color, #6b7280);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-wide .right_btn {
    position: absolute;
    right: var(--sl-spacing-medium, 1rem);
    bottom: var(--sl-spacing-medium, 1rem);
    z-index: 1;
}

/* Square Item 样式修复 - 使用更具体的选择器，避免 scoped 样式冲突 */
.rank_item-square .product.product-square,
.rank_item .product.product-square,
.product.product-square {
    --real-card-width: var(--card-width);
    --real-card-height: var(--card-height);
    display: block !important;
    width: 100%;
    height: var(--card-height, 224px);
    border: var(--card-border, 1px) solid var(--theme-border-color, #e5e7eb);
    border-radius: var(--sl-border-radius-large, 8px);
    box-shadow: var(--sl-shadow-small, 0 1px 3px rgba(0,0,0,0.1));
    background-color: var(--common-background-color, #fff);
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
    padding: 0;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.product-square .blur {
    width: 100% !important;
    height: var(--blur-height, 128px) !important;
    position: relative !important;
    overflow: hidden !important;
}

.product-square .gradual-blur {
    position: absolute !important;
    inset: 0 !important;
    background-size: 100% var(--blur-height) !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-blend-mode: luminosity, overlay, normal;
    filter: var(--filter-params) !important;
    transform: scale(1.5) translate3d(0, 0, 0) !important;
    z-index: 0 !important;
}

.product-square .img-bg {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: calc(var(--img-height, 80px) - 2px) !important;
    height: calc(var(--img-height, 80px) - 2px) !important;
    border-radius: var(--sl-border-radius-large, 8px) !important;
    background-color: transparent !important;
    z-index: 1 !important;
    aspect-ratio: 1 / 1 !important;
}

.product-square > img,
.product-square .product-image {
    position: absolute !important;
    left: 0;
    right: 0;
    top: calc((var(--blur-height, 128px) - var(--img-height, 80px)) / 2) !important;
    margin: auto;
    height: calc(var(--img-height, 80px) - 2px) !important;
    min-width: var(--img-height, 80px) !important;
    aspect-ratio: 1 / 1 !important;
    z-index: 2 !important;
    border-radius: var(--sl-border-radius-large);
    display: block !important;
}

.product-square .desc {
    padding: var(--sl-spacing-2x-small, 0.25rem) var(--sl-spacing-medium, 1rem) var(--sl-spacing-small, 0.75rem) !important;
    height: calc(var(--card-height, 224px) - var(--blur-height, 128px)) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 1 !important;
}

.product-square .title {
    font-size: var(--sl-font-size-small, 0.875rem);
    font-weight: var(--sl-title-font-weight, 600);
    color: var(--sl-color-neutral-800, #1f2937);
    margin: var(--sl-spacing-x-small, 0.5rem) 0;
    line-height: 16px;
    height: 32px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.product-square .rating-price-row {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: auto !important;
    gap: var(--sl-spacing-x-small, 0.5rem) !important;
}

.product-square .rating-price-row > div {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.product-square .rating-price-row .rating-element {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.product-square .rating-price-row .rating-element .label {
    font-size: var(--sl-font-size-x-small, 0.75rem) !important;
    color: var(--sl-color-neutral-600, #4b5563) !important;
    white-space: nowrap !important;
}

.product-square .rating-price-row .rating-element .label.old_price {
    text-decoration: line-through !important;
    color: var(--sl-color-neutral-400, #9ca3af) !important;
}

/* Tall Card 样式修复 */
.rank_item-tall .product.product-tall,
.rank_item .product.product-tall,
.product.product-tall {
    --real-card-width: var(--card-width);
    --real-card-height: var(--card-height);
    padding: 0;
    box-sizing: border-box;
    flex-direction: column;
    position: relative;
    display: flex !important;
    border: var(--card-border, 1px) solid var(--theme-border-color, #e5e7eb);
    border-radius: var(--sl-border-radius-large, 8px);
    box-shadow: var(--sl-shadow-small, 0 1px 3px rgba(0,0,0,0.1));
    background-color: var(--common-background-color, #fff);
    text-decoration: none;
    color: inherit;
    min-width: var(--real-card-width);
    overflow: hidden;
    aspect-ratio: var(--aspect-ratio);
}

.product-tall .image {
    position: absolute;
    left: 0%;
    right: 0%;
    top: -46.47%;
    bottom: 0%;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: bottom;
    background-blend-mode: luminosity, normal;
    --filter-params: blur(25px) contrast(0.5) saturate(1.2);
    filter: var(--filter-params);
    transform: translate3d(0, 0, 0);
}

.product-tall .blur-and-overlay {
    position: absolute;
    inset: -4px;
    background-size: cover;
    background-position: bottom;
    background-blend-mode: luminosity, normal;
    --filter-params: blur(25px) saturate(1.5);
    filter: var(--filter-params);
    transform: translate3d(0, 0, 0);
    z-index: 0;
}

.product-tall .img-wrap {
    position: relative;
    aspect-ratio: 3 / 4;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    -webkit-mask-image: linear-gradient(to top, transparent, white 55%, black);
    mask-image: linear-gradient(to top, transparent, white 55%, black);
    z-index: 1;
}

.product-tall .img-wrap img,
.product-tall .product-image {
    display: inline-block;
    z-index: 1;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
    vertical-align: middle;
}

.product-tall .desc {
    position: absolute;
    left: var(--sl-spacing-medium, 1rem);
    right: var(--sl-spacing-medium, 1rem);
    bottom: var(--sl-spacing-small, 0.75rem);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    z-index: 2;
}

.product-tall .title-wrap {
    height: 40px;
    display: flex;
    align-items: flex-start;
    margin-bottom: var(--sl-spacing-2x-small, 0.25rem);
}

.product-tall .title {
    width: 100%;
    margin: 0;
    color: var(--sl-default-white, #fff);
    font-size: var(--sl-font-size-medium, 1rem);
    font-weight: var(--sl-title-font-weight, 600);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.product-tall .rating-price-row {
    display: flex;
    align-items: center;
    gap: var(--sl-spacing-x-small, 0.5rem);
    margin-top: var(--sl-spacing-2x-small, 0.25rem);
}

.product-tall .rating-element {
    display: flex;
    align-items: center;
    gap: 4px;
}

.product-tall .rating-element img {
    width: 10px;
    height: auto;
    padding-top: 2px;
}

.product-tall .label {
    color: var(--sl-default-white, #fff);
    font-size: var(--sl-font-size-x-small, 0.75rem);
}

.collection-has-bg .rank_item-tall {
    --common-background-color: var(--theme-collection-background-mixed-color);
}

/* 产品组样式 */
.product-group {
    display: block;
    position: relative;
    --card-border: 1px;
    --card-spacing: var(--sl-spacing-small);
}

/* s-card 类型的 product-group 需要并排显示，覆盖默认的 block */
.product-group.s-card {
    display: inline-block !important;
}

/* 产品组标题样式 */
.product-group .main-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: var(--sl-spacing-small, 0.75rem) !important;
    padding: 0 !important;
    position: relative !important;
    min-height: 32px !important;
}

.product-group .main-title h1 {
    font-size: 1.5em;
    font-weight: 600;
    margin: 0;
    color: var(--sl-color-neutral-800, #1f2937);
}

.product-group .main-title .collection-title {
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    gap: 4px;
}

.product-group .main-title .collection-title svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* 切换按钮位置修复 - 使用更具体的选择器 */
.product-group .main-title {
    position: relative;
}

/* 确保 change_btns 在 main-title 中正确定位 */
.product-group .main-title .change_btns,
.main-title .change_btns {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center;
    gap: 6px;
    z-index: 1;
    margin-left: 0 !important;
    padding-bottom: 0 !important;
    justify-content: flex-end !important;
}

.product-group .main-title .change_btns .btns_item,
.main-title .change_btns .btns_item {
    width: 28px !important;
    height: 28px !important;
    opacity: 0.6;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.2s ease;
    background-color: transparent;
    margin-left: 0;
}

.product-group .main-title .change_btns .btns_item:first-child,
.main-title .change_btns .btns_item:first-child {
    margin-left: 0;
}

.product-group .main-title .change_btns .btns_item:hover:not(.b_none),
.main-title .change_btns .btns_item:hover:not(.b_none) {
    background-color: var(--sl-color-neutral-100, #f3f4f6);
    border-color: var(--apps-primary-color, #4285f4);
    transform: none !important;
}

.product-group .main-title .change_btns .btns_item.b_none,
.main-title .change_btns .btns_item.b_none {
    opacity: 0.3;
    cursor: not-allowed;
}

.product-group .main-title .change_btns .btns_item:active,
.main-title .change_btns .btns_item:active {
    transform: scale(0.9) !important;
}

.product-group .main-title .change_btns .btns_item svg,
.main-title .change_btns .btns_item svg {
    width: 28px;
    height: 28px;
    color: var(--sl-color-neutral-700, #374151);
}

.product-group .main-title .change_btns .btns_item:hover:not(.b_none) svg,
.main-title .change_btns .btns_item:hover:not(.b_none) svg {
    color: var(--apps-primary-color, #4285f4);
}

/* 确保产品容器有正确的高度 */
.products-and-scroll-container {
    position: relative !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.products-and-scroll-container.wide .products-container {
    max-height: 300px !important;
    height: auto !important;
}

.products-and-scroll-container.square .products-container {
    min-height: var(--card-height, 224px) !important;
    height: auto !important;
}

/* Card Group 容器样式修复 - styleId 为 4 */
/* 使用水平滚动布局，而不是 grid */
.products-and-scroll-container.card-group .products-container {
    display: flex !important;
    flex-direction: row !important;
    gap: var(--card-spacing, 0.5rem) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-behavior: smooth !important;
    max-height: none !important;
}

.products-and-scroll-container.card-group .products-container.wrap.direction-column {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
}

/* 第一个卡片更大，其他卡片正常大小 */
/* 根据图片，第一个卡片应该比第二个卡片大约2倍，使用固定像素值或基于容器宽度的计算 */
.products-and-scroll-container.card-group {
    --first-card-width-ratio: 0.45;
    --other-card-width-ratio: 0.22;
}

.products-and-scroll-container.card-group .rank_item.first_rank_item {
    --card-width: calc(var(--first-card-width-ratio) * 100%) !important;
    /* 移除 aspect-ratio，让高度自适应 */
    /* --aspect-ratio: 0.855 !important; */
    flex-shrink: 0 !important;
    min-width: calc((100% - 0.8rem * (5 - 1)) / 5) !important;
    max-width: calc((100% - 0.8rem * (5 - 1)) / 5) !important;
    width: calc((100% - 0.8rem * (5 - 1)) / 5) !important;
}

.products-and-scroll-container.card-group .rank_item:not(.first_rank_item) {
    --card-width: calc(var(--other-card-width-ratio) * 100%) !important;
    /* 移除 aspect-ratio，让高度自适应 */
    /* --aspect-ratio: 16 / 9 !important; */
    flex-shrink: 0 !important;
    min-width: calc((100% - 0.8rem * (5 - 1)) / 5) !important;
    max-width: calc((100% - 0.8rem * (5 - 1)) / 5) !important;
    width: calc((100% - 0.8rem * (5 - 1)) / 5) !important;
}

/* 确保 card-group 中的卡片正确显示 */
.products-and-scroll-container.card-group .rank_item {
    width: var(--card-width) !important;
}

.products-and-scroll-container.card-group .rank_item:last-child {
    margin-right: 0 !important;
}

/* Collection Group 容器样式修复 - styleId 为 7 */
.products-and-scroll-container.collection-group {
    --collection-group-num: 4 !important;
    --aspect-ratio: 16 / 9 !important;
}

.products-and-scroll-container.collection-group .products-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: var(--card-spacing, 0.5rem) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-behavior: smooth !important;
}

#row-list-card-collect {
    flex-wrap: wrap !important;
}

.products-and-scroll-container.collection-group .rank_item {
    flex-shrink: 0 !important;
    width: calc((100% - 2.3rem) / 4) !important;
    min-width: calc((100% - 2.3rem) / 4) !important;
    max-width: calc((100% - 2.3rem) / 4) !important;
}

.products-and-scroll-container.collection-group .rank_item:last-child {
    margin-right: 0 !important;
}

/* 确保 collection-group 中的卡片有正确的高度 */
.products-and-scroll-container.collection-group .rank_item-collect {
    --aspect-ratio: 16 / 9 !important;
}

.products-and-scroll-container.collection-group .rank_item-collect .product {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: var(--aspect-ratio, 16 / 9) !important;
    min-height: 200px !important;
}

/* 兼容不支持 aspect-ratio 的浏览器，使用 padding-bottom 方式 */
@supports not (aspect-ratio: 16 / 9) {
    .products-and-scroll-container.collection-group .rank_item-collect .product {
        height: 0 !important;
        padding-bottom: calc(100% / var(--aspect-ratio, 16 / 9)) !important;
    }
}

/* 文本溢出处理 */
.text-two-line-overflow {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 隐藏评分元素（如果需要） */
.rating-element.hidden {
    display: none;
}

/* 确保安装按钮正确显示 */
.rating-price-row > div[data-install-btn] {
    flex-shrink: 0;
}

/* 确保产品组在响应式下正确显示 */
@media (max-width: 1024px) {
    .product-group {
        padding: 0 24px !important;
    }
    
    .products-container.wide.wrap.direction-column {
        --wide-card-num: 2 !important;
    }
    
    .products-container.square.direction-row {
        --square-and-tall-card-num: 4 !important;
    }
}

/* 确保安装按钮容器正确显示 */
.rank_item [data-install-btn] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.rank_item-square-details {
    height: 100%;
}