/**
 * 产品统一样式文件 (product-unified.css)
 * 合并了通用产品相关的样式，消除重复
 *
 * 包含以下功能：
 * - 通用产品操作按钮样式
 * - 通用产品卡片样式
 * - 产品列表和网格样式
 * - 产品标题样式（11px字号）
 * - 相关产品样式（用于推荐产品组件）
 * - Discover More按钮样式
 * - 心愿单页面样式
 * - 产品通知样式
 *
 * 合并了 product-list-combined.css 的功能
 *
 * @package Leahz
 * @version 1.2.0
 */

/*--------------------------------------------------------------
1. 统一的产品操作按钮样式
--------------------------------------------------------------*/
/* 产品操作按钮容器 - 仅适用于通用产品卡片 */
.product-actions {
    position: absolute;
    top: var(--spacing-small);
    right: var(--spacing-small);
    display: flex;
    flex-direction: row;
    gap: var(--spacing-small);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-default);
    z-index: 5;
}

/* 产品卡片悬停时显示操作按钮 */
.product-card:hover .product-actions,
.product-card-new:hover .product-actions,
.product:not(.single-product-wrapper):hover .product-actions {
    opacity: 1;
    visibility: visible;
}

/* 通用的操作按钮样式 */
.product-action-btn {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-fast);
    background-color: rgba(255, 255, 255, 0.8);
    padding: 3px;
    border-radius: 0;
    border: none;
}

.product-action-btn:hover {
    background-color: var(--color-background);
}

/* 通用的图标样式 */
.product-action-btn svg {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: var(--color-text-secondary);
    stroke-width: 2;
    transition: var(--transition-fast);
}

/* 已添加状态 */
.product-action-btn.added svg {
    fill: var(--color-text-secondary);
}

/* 缺货状态 */
.product-action-btn.out-of-stock {
    cursor: not-allowed;
    opacity: 0.5;
}

.product-action-btn.out-of-stock svg {
    stroke: var(--color-text-light);
}

/*--------------------------------------------------------------
2. 统一的产品卡片样式
--------------------------------------------------------------*/
/* 产品卡片容器 - 仅适用于通用产品卡片 */
.product-card,
.product-card-new {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--color-background);
    border: none;
    transition: transform 0.3s ease;
    margin-bottom: var(--spacing-large);
    overflow: hidden;
}

/* 移除悬停缩放效果 */
.product-card:hover,
.product-card-new:hover {
    transform: none !important;
}

/* 产品图片容器 */
.product-image-container {
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* 1:1 比例 */
    overflow: hidden;
    aspect-ratio: 1/1;
    margin-bottom: 10px;
}

/* 产品图片 */
.product-image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* 移除图片悬停缩放效果 */
.product-card:hover .product-image-container img,
.product-card-new:hover .product-image-container img {
    transform: none !important;
}

/* 产品信息容器 */
.product-info {
    padding: 10px 0;
    display: flex;
    flex-direction: column;
}

/* 通用的产品标题样式 */
.product-title,
.woocommerce-loop-product__title {
    font-size: var(--font-size-small) !important;
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--spacing-tiny);
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    max-width: 100%;
}

/* 通用的产品价格样式 */
.product-price {
    font-size: var(--font-size-small) !important;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: var(--spacing-tiny);
}

.current-price {
    font-weight: var(--font-weight-bold);
}

.original-price {
    text-decoration: line-through;
    color: var(--color-text-light);
}

/*--------------------------------------------------------------
3. 产品卡片尺寸变体
--------------------------------------------------------------*/
.product-card-200,
.product-card-small {
    flex: 0 0 200px;
    min-width: 200px;
    width: 200px;
}

.product-card-300,
.product-card-medium,
.product-card-large {
    flex: 0 0 300px;
    min-width: 300px;
    width: 300px;
}

/*--------------------------------------------------------------
4. 可复用产品列表组件 (Reusable Product List Component)
--------------------------------------------------------------*/

/* ==========================================================================
   产品列表组件基础结构 (Product List Component Base)
   ========================================================================== */

/* 产品列表组件容器 */
.leahz-product-list {
    position: relative;
    margin: 40px 0;
    padding: 0;
    overflow: visible; /* 确保Discover More按钮可见 */
}

/* 产品列表标题 - 已合并到产品卡片组件中 */
/* 标题样式现在通过 .leahz-product-card 选择器一起加载 */

/* 产品列表容器 */
.leahz-product-list__container {
    position: relative;
    overflow: visible;
    padding: 0;
}

/* 产品网格 */
.leahz-product-list__grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    overflow-x: auto;
    padding: 10px 30px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    position: relative;
    margin: 0;
    list-style: none;
    width: calc(100% - 60px);
}

/* 隐藏滚动条 */
.leahz-product-list__grid::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.leahz-product-list__grid {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

/* ==========================================================================
   产品卡片组件 (Product Card Component) - 包含标题样式
   ========================================================================== */

/* 产品卡片基础 - 包含标题样式确保一起加载 */
.leahz-product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border: none;
    transition: transform 0.3s ease;
    margin-bottom: 20px;
    overflow: hidden;
    flex: 0 0 300px;
    min-width: 300px;
    width: 300px;
}

/* 产品列表标题 - 与产品卡片合并确保一起加载 */
.leahz-product-card,
.leahz-product-list__title {
    /* 当加载产品卡片时，标题样式也会被加载 */
}

.leahz-product-list__title {
    font-family: 'Open Sans', sans-serif;
    font-size: 11px;
    font-weight: var(--font-weight-medium);
    margin-bottom: 30px;
    margin-left: 30px;
    padding: 0;
    text-align: left;
    color: var(--color-text-primary);
    /* 重置产品卡片的样式，只保留标题相关样式 */
    position: static;
    display: block;
    flex-direction: initial;
    background-color: transparent;
    border: initial;
    transition: initial;
    overflow: initial;
    flex: initial;
    min-width: initial;
    width: initial;
}

/* Related Products标题特殊样式 - 字重400 */
.leahz-related-products-title {
    font-weight: var(--font-weight-normal); /* 400 */
}

/* 产品关系标签样式 */
.leahz-product-card__label {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 2px 6px;
    font-size: 11px;
    color: #333;
    z-index: 10;
    border-radius: 2px;
    background-color: transparent;
}

/* 缺货图标的划线样式 */
.leahz-product-card__out-of-stock-line {
    stroke: #999;
    stroke-width: 2;
}

/* ==========================================================================
   统一产品卡片样式 (Unified Product Card) - 基于产品搜索页面
   ========================================================================== */

/* 统一产品卡片容器 - 复制产品搜索页面样式 */
.leahz-unified-product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border: none;
    margin-bottom: 20px;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    cursor: pointer;
}

/* 统一产品图片容器 */
.leahz-unified-product-card__image-container {
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* 1:1 比例 */
    overflow: hidden;
    background-color: #f8f8f8;
}

/* 统一产品图片 */
.leahz-unified-product-card__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.4s ease;
}

/* 第二张图片（悬停显示） */
.leahz-unified-product-card__image--second {
    opacity: 0;
}

/* 悬停时切换图片 */
.leahz-unified-product-card:hover .leahz-unified-product-card__image--first {
    opacity: 0;
}

.leahz-unified-product-card:hover .leahz-unified-product-card__image--second {
    opacity: 1;
}

/* 统一产品操作按钮容器 */
.leahz-unified-product-card__actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    flex-direction: row;
    gap: 5px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 5;
}

/* 悬停时显示操作按钮 */
.leahz-unified-product-card:hover .leahz-unified-product-card__actions {
    opacity: 1;
    visibility: visible;
}

/* 统一操作按钮样式 */
.leahz-unified-product-card__action-btn {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 3px;
    border-radius: 0;
    border: none;
}

.leahz-unified-product-card__action-btn:hover {
    background-color: #fff;
}

.leahz-unified-product-card__action-btn svg {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #666;
    stroke-width: 2;
    transition: all 0.2s ease;
}

/* 缺货按钮样式 */
.leahz-unified-product-card__action-btn--out-of-stock {
    cursor: not-allowed;
    opacity: 0.5;
}

.leahz-unified-product-card__action-btn--out-of-stock svg {
    stroke: #999;
}

/* 统一产品信息容器 - 复制产品搜索页面布局 */
.leahz-unified-product-card__info {
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* 产品信息详情容器 - 复制产品搜索页面布局 */
.leahz-unified-product-card__details {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* 产品行 - 复制产品搜索页面的 .product-row */
.leahz-unified-product-card__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* 统一产品标题 - 复制产品搜索页面样式 */
.leahz-unified-product-card__title {
    font-size: 11px !important;
    font-weight: var(--font-medium);
    margin: 0;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70%;
}

/* 统一价格容器 - 复制产品搜索页面样式 */
.leahz-unified-product-card__price {
    font-size: 11px !important;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
}

/* 现价样式 - 粗体 */
.leahz-unified-product-card__price--current {
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
}

/* 原价样式 - 细体划线 */
.leahz-unified-product-card__price--original {
    font-weight: var(--font-light);
    text-decoration: line-through;
    color: var(--color-text-light);
}

/* 统一颜色变体容器 - 复制产品搜索页面的 .color-variants */
.leahz-unified-product-card__variants {
    display: flex;
    gap: 5px;
    justify-content: flex-end;
    margin: 0;
}

/* 统一颜色变体 - 复制产品搜索页面的 .color-variant */
.leahz-unified-product-card__variant {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid #e0e0e0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    position: relative;
    transition: transform 0.2s ease;
}

/* 变体悬停效果 - 复制产品搜索页面 */
.leahz-unified-product-card__variant:hover {
    transform: scale(1.2);
    z-index: 2;
}

/* 银色特殊效果 - 复制产品搜索页面 */
.leahz-unified-product-card__variant--silver {
    background-image: linear-gradient(135deg, #C0C0C0, #E8E8E8);
}

/* 金色特殊效果 - 复制产品搜索页面 */
.leahz-unified-product-card__variant--gold {
    background-image: linear-gradient(135deg, #CD7F32, #DAA520);
}

/* 统一品牌信息 - 复制产品搜索页面的 .product-brand */
.leahz-unified-product-card__brand {
    font-size: 11px !important;
    color: #666;
    text-align: right;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%;
}

.leahz-unified-product-card__brand strong {
    font-weight: 500;
}

.leahz-unified-product-card__brand a {
    color: #666;
    text-decoration: none;
    transition: color 0.2s ease;
}

.leahz-unified-product-card__brand a:hover {
    color: #000;
}

/* 统一关系标签 - 仅产品页面显示 */
.leahz-unified-product-card__label {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 2px 6px;
    font-size: 11px;
    color: #333;
    z-index: 10;
    border-radius: 2px;
    background-color: transparent;
}

/* 统一产品卡片链接样式 - 去除下划线 */
.leahz-unified-product-card__link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.leahz-unified-product-card__link:hover {
    text-decoration: none;
}

/* 确保标题、价格、品牌没有下划线 */
.leahz-unified-product-card__title,
.leahz-unified-product-card__price,
.leahz-unified-product-card__price--current,
.leahz-unified-product-card__price--original,
.leahz-unified-product-card__brand {
    text-decoration: none;
}

.leahz-unified-product-card__title:hover,
.leahz-unified-product-card__price:hover,
.leahz-unified-product-card__brand:hover {
    text-decoration: none;
}

/* 移除悬停缩放效果 */
.leahz-product-card:hover {
    transform: none !important;
}

/* 产品卡片链接 */
.leahz-product-card__link {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* ==========================================================================
   产品卡片图片区域 (Product Card Image Area)
   ========================================================================== */

/* 产品图片容器 */
.leahz-product-card__image-container {
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* 1:1图片比例 */
    overflow: hidden;
    aspect-ratio: 1/1; /* 现代浏览器支持 */
    margin-bottom: 10px;
}

/* 产品图片 */
.leahz-product-card__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* 移除图片悬停缩放效果 */
.leahz-product-card:hover .leahz-product-card__image {
    transform: none !important;
}

/* ==========================================================================
   产品卡片操作按钮 (Product Card Action Buttons)
   ========================================================================== */

/* 操作按钮容器 */
.leahz-product-card__actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 5;
}

/* 悬停时显示操作按钮 */
.leahz-product-card:hover .leahz-product-card__actions {
    opacity: 1;
    visibility: visible;
}

/* 操作按钮基础样式 */
.leahz-product-card__action-btn {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 3px;
    border-radius: 0;
    border: none;
}

/* 操作按钮悬停效果 */
.leahz-product-card__action-btn:hover {
    background-color: #fff;
}

/* 操作按钮图标 */
.leahz-product-card__action-btn svg {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #555;
    stroke-width: 2;
    transition: all 0.2s ease;
}

/* 已添加状态 */
.leahz-product-card__action-btn--added svg {
    fill: #555;
}

/* 缺货状态 */
.leahz-product-card__action-btn--out-of-stock {
    cursor: not-allowed;
    opacity: 0.5;
}

.leahz-product-card__action-btn--out-of-stock svg {
    stroke: #999;
}

/* 添加动画 */
.leahz-product-card__action-btn--adding {
    animation: addedAnimation 0.5s ease;
}

/* ==========================================================================
   向后兼容的旧类名 (Backward Compatibility)
   ========================================================================== */

/* 保持向后兼容 - 旧类名使用相同的样式 */
.product-list,
.recommend-products {
    position: relative;
    margin: 40px 0;
    padding: 0;
    overflow: visible;
}

/* 旧标题类名 - 通过产品卡片选择器一起加载 */
.related-product,
.product-list-title,
.woocommerce .product-list-title {
    /* 当加载产品卡片时，标题样式也会被加载 */
}

.product-list-title,
.woocommerce .product-list-title {
    font-family: 'Open Sans', sans-serif;
    font-size: 11px;
    font-weight: var(--font-weight-medium);
    margin-bottom: 30px;
    margin-left: 30px;
    padding: 0;
    text-align: left;
    color: var(--color-text-primary);
    /* 重置产品卡片的样式，只保留标题相关样式 */
    position: static;
    display: block;
    flex-direction: initial;
    background-color: transparent;
    border: initial;
    transition: initial;
    overflow: initial;
    flex: initial;
    min-width: initial;
    width: initial;
}

.product-list-container {
    position: relative;
    overflow: visible;
    padding: 0;
}

.related-products-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    overflow-x: auto;
    padding: 10px 30px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    position: relative;
    margin: 0;
    list-style: none;
    width: calc(100% - 60px);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.related-products-grid::-webkit-scrollbar {
    display: none;
}

/* ==========================================================================
   产品卡片信息区域 (Product Card Info Area)
   ========================================================================== */

/* 产品信息容器 */
.leahz-product-card__info {
    padding: 10px 0;
    display: flex;
    flex-direction: column;
}

/* 产品标题 */
.leahz-product-card__title {
    font-size: 11px;
    font-weight: var(--font-medium);
    margin-bottom: 5px;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    max-width: 100%;
}

/* 产品详情容器 */
.leahz-product-card__details {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* 产品价格 */
.leahz-product-card__price {
    font-size: 11px;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 5px;
}

.leahz-product-card__price--current {
    font-weight: var(--font-bold);
}

.leahz-product-card__price--original {
    text-decoration: line-through;
    color: var(--color-text-light);
}

/* 产品颜色变体 */
.leahz-product-card__colors {
    display: flex;
    gap: 5px;
    justify-content: flex-end;
    margin-top: 5px;
}

/* 无产品时的提示 */
.leahz-product-list__no-products {
    text-align: center;
    color: var(--color-text-light);
    font-style: italic;
    padding: 40px 20px;
}

/* ==========================================================================
   Discover More按钮组件 (Discover More Button Component)
   ========================================================================== */

/* Discover More容器 */
.leahz-product-list__discover-more {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    pointer-events: none;
}

/* Discover More按钮 */
.leahz-product-list__discover-btn {
    display: inline-block;
    padding: 8px 16px;
    background-color: rgba(255, 255, 255, 0.9);
    color: #333;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid #ddd;
    border-radius: 0;
    transition: all 0.3s ease;
    pointer-events: auto;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.leahz-product-list__discover-btn:hover {
    background: #fff !important;
    color: #000 !important;
    text-decoration: none;
    border-color: #ccc !important;
    box-shadow: none !important;
    transform: none;
}

/* 渐变遮罩 */
.leahz-product-list__overlay {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 60px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.8));
    pointer-events: none;
    z-index: 1;
}

/* ==========================================================================
   产品列表变体 (Product List Variants)
   ========================================================================== */

/* 小尺寸产品卡片 */
.leahz-product-card--small {
    flex: 0 0 200px;
    min-width: 200px;
    width: 200px;
}

/* 中等尺寸产品卡片 */
.leahz-product-card--medium {
    flex: 0 0 250px;
    min-width: 250px;
    width: 250px;
}

/* 大尺寸产品卡片 */
.leahz-product-card--large {
    flex: 0 0 350px;
    min-width: 350px;
    width: 350px;
}

/* ==========================================================================
   统一产品卡片尺寸变体 (Unified Product Card Size Variants)
   ========================================================================== */

/* 小尺寸统一产品卡片 */
.leahz-unified-product-card--small {
    flex: 0 0 200px;
    min-width: 200px;
    width: 200px;
}

/* 中等尺寸统一产品卡片 */
.leahz-unified-product-card--medium {
    flex: 0 0 250px;
    min-width: 250px;
    width: 250px;
}

/* 大尺寸统一产品卡片 */
.leahz-unified-product-card--large {
    flex: 0 0 350px;
    min-width: 350px;
    width: 350px;
}

/* 超大尺寸统一产品卡片 */
.leahz-unified-product-card--xlarge {
    flex: 0 0 400px;
    min-width: 400px;
    width: 400px;
}

/* 紧凑间距 */
.leahz-product-list--compact .leahz-product-list__grid {
    gap: 15px;
}

/* 宽松间距 */
.leahz-product-list--spacious .leahz-product-list__grid {
    gap: 30px;
}

/* 无标题变体 */
.leahz-product-list--no-title .leahz-product-list__title {
    display: none;
}

/* 无Discover More按钮变体 */
.leahz-product-list--no-discover .leahz-product-list__discover-more {
    display: none;
}

/* ==========================================================================
   产品建议列表组件 (Product Suggestion List Component)
   ========================================================================== */

/* 产品建议列表容器 - 继承产品列表组件的所有样式 */
.product-suggestion-list {
    /* 继承 .leahz-product-list 的所有样式 */
    position: relative;
    margin: 40px 0;
    padding: 0;
    overflow: visible; /* 确保Discover More按钮可见 */
    /* 唯一差异：顶端红色横线用于辨认 */
    border-top: 4px solid #ff0000;
    padding-top: 20px;
}

/* 产品建议列表标题 - 与产品卡片合并确保一起加载 */
.leahz-product-card,
.product-suggestion-list__title {
    /* 当加载产品卡片时，标题样式也会被加载 */
}

.product-suggestion-list__title {
    font-family: 'Open Sans', sans-serif;
    font-size: 11px;
    font-weight: var(--font-weight-medium);
    margin-bottom: 30px;
    margin-left: 30px;
    padding: 0;
    text-align: left;
    color: var(--color-text-primary);
    /* 重置产品卡片的样式，只保留标题相关样式 */
    position: static;
    display: block;
    flex-direction: initial;
    background-color: transparent;
    border: initial;
    transition: initial;
    overflow: initial;
    flex: initial;
    min-width: initial;
    width: initial;
}

/* 产品建议列表内容容器 */
.product-suggestion-list__container {
    position: relative;
    overflow: visible;
    padding: 0;
}

/* 产品建议列表网格 */
.product-suggestion-list__grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    overflow-x: auto;
    padding: 10px 30px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    position: relative;
    margin: 0;
    list-style: none;
    width: calc(100% - 60px);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.product-suggestion-list__grid::-webkit-scrollbar {
    display: none;
}

/* 产品建议列表的Discover More容器 */
.product-suggestion-list__discover-more {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    pointer-events: none;
}

/* 产品建议列表的Discover More按钮 */
.product-suggestion-list__discover-btn {
    display: inline-block;
    padding: 8px 16px;
    background-color: rgba(255, 255, 255, 0.9);
    color: #333;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid #ddd;
    border-radius: 0;
    transition: all 0.3s ease;
    pointer-events: auto;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.product-suggestion-list__discover-btn:hover {
    background: #fff !important;
    color: #000 !important;
    text-decoration: none;
    border-color: #ccc !important;
    box-shadow: none !important;
    transform: none;
}

/* 产品建议列表的渐变遮罩 */
.product-suggestion-list__overlay {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 60px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.8));
    pointer-events: none;
    z-index: 1;
}

/* 产品建议列表变体 */
/* 紧凑间距 */
.product-suggestion-list--compact .product-suggestion-list__grid {
    gap: 15px;
}

/* 宽松间距 */
.product-suggestion-list--spacious .product-suggestion-list__grid {
    gap: 30px;
}

/* 无标题变体 */
.product-suggestion-list--no-title .product-suggestion-list__title {
    display: none;
}

/* 无Discover More按钮变体 */
.product-suggestion-list--no-discover .product-suggestion-list__discover-more {
    display: none;
}

/* ==========================================================================
   向后兼容映射 (Backward Compatibility Mapping)
   ========================================================================== */

/* 继续向后兼容的旧类名样式定义 */
.discover-more-container {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    pointer-events: none;
}

.discover-more-btn {
    display: inline-block;
    padding: 8px 16px;
    background-color: rgba(255, 255, 255, 0.9);
    color: #333;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid #ddd;
    border-radius: 0;
    transition: all 0.3s ease;
    pointer-events: auto;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.discover-more-btn:hover {
    background: #fff !important;
    color: #000 !important;
    text-decoration: none;
    border-color: #ccc !important;
    box-shadow: none !important;
    transform: none;
}

.discover-more-overlay {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 60px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.8));
    pointer-events: none;
    z-index: 1;
}

/*--------------------------------------------------------------
5. 产品网格布局 (保留用于其他组件)
--------------------------------------------------------------*/
/* 保留的旧网格样式（用于其他非产品列表组件） */
.product-grid,
.product-grid-new {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    overflow-x: auto;
    padding: 10px 30px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    position: relative;
    margin: 0 !important;
    list-style: none;
    width: calc(100% - 60px) !important;
}

/* 隐藏滚动条 */
.product-grid::-webkit-scrollbar,
.product-grid-new::-webkit-scrollbar {
    display: none;
}

.product-grid,
.product-grid-new {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

/*--------------------------------------------------------------
6. 向后兼容的旧样式定义 (Legacy Style Definitions for Backward Compatibility)
--------------------------------------------------------------*/

/* 这些样式通过CSS继承映射到新的组件类 */
/* 实际样式定义在上面的组件化部分 */

/* 旧类名映射 - 使用CSS属性继承新组件样式 */
.related-product {
    /* 继承 .leahz-product-card 的所有样式 */
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border: none;
    transition: transform 0.3s ease;
    margin-bottom: 20px;
    overflow: hidden;
    flex: 0 0 300px;
    min-width: 300px;
    width: 300px;
}

.related-product:hover {
    transform: none !important;
}

.related-product-image-container {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    overflow: hidden;
    aspect-ratio: 1/1;
    margin-bottom: 10px;
}

.related-product-image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.related-product:hover .related-product-image-container img {
    transform: none !important;
}

.related-product-info {
    padding: 10px 0;
    display: flex;
    flex-direction: column;
}

.related-product-title {
    font-size: 11px;
    font-weight: var(--font-medium);
    margin-bottom: 5px;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    max-width: 100%;
}

.related-product-link {
    text-decoration: none;
    color: inherit;
}

.related-product-price {
    font-size: 11px;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 5px;
}

.related-product-current-price {
    font-weight: var(--font-bold);
}

.related-product-original-price {
    text-decoration: line-through;
    color: var(--color-text-light);
}

.related-product-colors {
    display: flex;
    gap: 5px;
    justify-content: flex-end;
    margin-top: 5px;
}

/*--------------------------------------------------------------
7. 产品颜色变体
--------------------------------------------------------------*/
.product-colors {
    display: flex;
    gap: var(--spacing-tiny);
    justify-content: flex-end;
    margin-top: var(--spacing-tiny);
}

.color-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid var(--color-border-light);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    position: relative;
    transition: transform 0.2s ease;
}

.color-dot.clickable {
    cursor: pointer;
}

.color-dot.non-clickable {
    cursor: default;
    opacity: 0.9;
}

.color-dot.clickable:hover {
    transform: scale(1.2);
    z-index: 2;
}

/*--------------------------------------------------------------
7. 向后兼容的操作按钮样式 (Legacy Action Button Styles)
--------------------------------------------------------------*/

/* 旧操作按钮样式 - 映射到新组件 */
.related-product-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 5;
}

.related-product:hover .related-product-actions {
    opacity: 1;
    visibility: visible;
}

.related-product-action-btn {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 3px;
    border-radius: 0;
    border: none;
}

.related-product-action-btn:hover {
    background-color: #fff;
}

.related-product-action-btn svg {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #555;
    stroke-width: 2;
    transition: all 0.2s ease;
}

.related-product-action-btn.added svg {
    fill: #555;
}

.related-product-action-btn.out-of-stock {
    cursor: not-allowed;
    opacity: 0.5;
}

.related-product-action-btn.out-of-stock svg {
    stroke: #999;
}

.related-product-action-btn.adding {
    animation: addedAnimation 0.5s ease;
}

/*--------------------------------------------------------------
8. 向后兼容的Discover More按钮样式 (Legacy Discover More Button Styles)
--------------------------------------------------------------*/

/* 旧Discover More样式 - 映射到新组件 */
.discover-more-container {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    pointer-events: none;
}

.discover-more-btn {
    display: inline-block;
    padding: 8px 16px;
    background-color: rgba(255, 255, 255, 0.9);
    color: #333;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid #ddd;
    border-radius: 0;
    transition: all 0.3s ease;
    pointer-events: auto;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.discover-more-btn:hover {
    background: #fff !important;
    color: #000 !important;
    text-decoration: none;
    border-color: #ccc !important;
    box-shadow: none !important;
    transform: none;
}

.discover-more-overlay {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 60px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.8));
    pointer-events: none;
    z-index: 1;
}

/*--------------------------------------------------------------
10. 相关产品区域样式
--------------------------------------------------------------*/
/* 相关产品区域 */
.related-products-section {
    margin-top: 60px;
    padding: 40px 0 0 0;
    width: 100%;
    box-sizing: border-box;
    clear: both;
    overflow: hidden;
}

/*--------------------------------------------------------------
11. 心愿单页面样式
--------------------------------------------------------------*/
.wishlist-page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px var(--spacing-xl);
}

.wishlist-header {
    margin-bottom: var(--spacing-xl);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--spacing-medium);
}

.wishlist-title {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    margin: 0;
}

.wishlist-products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-xl);
}

.wishlist-product {
    display: flex;
    flex-direction: column;
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    transition: box-shadow 0.3s ease;
}

.wishlist-product:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.wishlist-product-image {
    position: relative;
    padding-bottom: 100%;
    overflow: hidden;
}

.wishlist-product-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.wishlist-product:hover .wishlist-product-image img {
    transform: scale(1.05);
}

.wishlist-product-info {
    padding: var(--spacing-medium);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.wishlist-product-title {
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-medium);
    margin: 0 0 10px 0;
    line-height: 1.4;
}

.wishlist-product-title a {
    color: var(--color-text-secondary);
    text-decoration: none;
}

.wishlist-product-title a:hover {
    color: var(--color-text-primary);
}

.wishlist-product-price {
    margin-bottom: var(--spacing-medium);
    font-size: var(--font-size-medium);
}

.wishlist-product-price del {
    color: var(--color-text-light);
    margin-right: var(--spacing-tiny);
}

.wishlist-product-price ins {
    text-decoration: none;
    font-weight: var(--font-weight-medium);
}

.wishlist-product-actions {
    margin-top: auto;
    display: flex;
    gap: 10px;
}

.wishlist-add-to-cart,
.wishlist-remove {
    padding: var(--spacing-small) 12px;
    font-size: 12px;
    border: none;
    cursor: pointer;
    transition: var(--transition-default);
}

.wishlist-add-to-cart {
    background-color: var(--color-text-primary);
    color: var(--color-background);
    flex-grow: 1;
}

.wishlist-add-to-cart:hover {
    background-color: var(--color-text-secondary);
}

.wishlist-remove {
    background-color: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
}

.wishlist-remove:hover {
    border-color: var(--color-text-light);
    color: var(--color-text-secondary);
}

.wishlist-out-of-stock {
    padding: var(--spacing-small) 12px;
    font-size: 12px;
    background-color: #f5f5f5;
    color: var(--color-text-light);
    text-align: center;
    flex-grow: 1;
}

.wishlist-empty {
    text-align: center;
    padding: 50px 0;
}

.wishlist-empty p {
    margin-bottom: var(--spacing-large);
    font-size: var(--font-size-large);
    color: var(--color-text-secondary);
}

.wishlist-empty .button {
    display: inline-block;
    padding: 10px var(--spacing-large);
    background-color: var(--color-text-primary);
    color: var(--color-background);
    text-decoration: none;
    font-size: var(--font-size-medium);
    transition: background-color 0.3s ease;
}

.wishlist-empty .button:hover {
    background-color: var(--color-text-secondary);
}

/*--------------------------------------------------------------
7. 产品通知样式
--------------------------------------------------------------*/
.product-notification-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.product-notification-overlay.active {
    opacity: 1;
    visibility: visible;
}

.product-notification {
    display: flex;
    align-items: center;
    background-color: var(--color-background);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    width: 90%;
    transform: translateY(var(--spacing-large));
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
    will-change: transform, opacity;
}

.product-notification-overlay.active .product-notification {
    transform: translateY(0);
    opacity: 1;
}

/*--------------------------------------------------------------
8. 添加动画效果
--------------------------------------------------------------*/
@keyframes addedAnimation {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.product-action-btn.adding {
    animation: addedAnimation 0.5s ease;
}

/*--------------------------------------------------------------
9. 响应式样式
--------------------------------------------------------------*/
/* ==========================================================================
   响应式样式 (Responsive Styles)
   ========================================================================== */

/* 平板设备 */
@media (max-width: 768px) {
    /* 新组件化产品列表响应式 */
    .leahz-product-list__grid {
        gap: 15px;
        padding: 10px 20px;
        width: calc(100% - 40px);
    }

    /* 标题和产品卡片响应式样式 - 通过合并选择器一起加载 */
    .leahz-product-card,
    .leahz-product-list__title,
    .product-suggestion-list__title {
        /* 确保响应式样式一起加载 */
    }

    .leahz-product-list__title,
    .product-suggestion-list__title {
        margin-left: 20px;
        margin-bottom: 25px;
        font-size: 11px;
    }

    /* 产品建议列表响应式样式 */
    .product-suggestion-list__grid {
        gap: 15px;
        padding: 10px 20px;
        width: calc(100% - 40px);
    }

    .leahz-product-card {
        flex: 0 0 250px;
        min-width: 250px;
        width: 250px;
    }

    .leahz-product-card__action-btn {
        width: 20px;
        height: 20px;
    }

    .leahz-product-card__action-btn svg {
        width: 10px;
        height: 10px;
    }

    /* 向后兼容的旧网格样式 */
    .product-grid,
    .product-grid-new {
        gap: 15px;
        padding: 10px 20px;
        width: calc(100% - 40px) !important;
    }

    /* 向后兼容的旧标题样式 - 通过产品卡片选择器一起加载 */
    .related-product,
    .woocommerce .product-list-title,
    .product-list-title {
        /* 确保向后兼容的响应式样式一起加载 */
    }

    .woocommerce .product-list-title,
    .product-list-title {
        margin-left: 20px;
        margin-bottom: 25px;
        font-size: 11px;
    }

    /* 向后兼容的旧网格样式 */
    .related-products-grid {
        gap: 15px;
        padding: 10px 20px;
        width: calc(100% - 40px);
    }

    /* 产品卡片尺寸调整 */
    .product-card-300,
    .product-card-medium,
    .product-card-large,
    .related-product {
        flex: 0 0 250px;
        min-width: 250px;
        width: 250px;
    }

    /* 操作按钮调整 */
    .product-action-btn,
    .related-product-action-btn {
        width: 20px;
        height: 20px;
    }

    .product-action-btn svg,
    .related-product-action-btn svg {
        width: 10px;
        height: 10px;
    }

    /* 心愿单页面调整 */
    .wishlist-page-container {
        padding: var(--spacing-xl) var(--spacing-large);
    }

    .wishlist-products {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: var(--spacing-large);
    }

    /* 通知样式调整 */
    .product-notification {
        flex-direction: column;
        max-width: 300px;
    }
}

/* 小型手机设备 */
@media (max-width: 480px) {
    /* 新组件化产品列表小屏幕响应式 */
    .leahz-product-list__grid {
        gap: 10px;
        padding: 10px 15px;
        width: calc(100% - 30px);
    }

    /* 小屏幕标题和产品卡片响应式样式 - 通过合并选择器一起加载 */
    .leahz-product-card,
    .leahz-product-list__title,
    .product-suggestion-list__title {
        /* 确保小屏幕响应式样式一起加载 */
    }

    .leahz-product-list__title,
    .product-suggestion-list__title {
        margin-left: 15px;
        margin-bottom: 20px;
        font-size: 11px;
    }

    /* 产品建议列表小屏幕响应式样式 */
    .product-suggestion-list__grid {
        gap: 10px;
        padding: 10px 15px;
        width: calc(100% - 30px);
    }

    .leahz-product-card {
        flex: 0 0 220px;
        min-width: 220px;
        width: 220px;
    }

    .leahz-product-card__action-btn {
        width: 18px;
        height: 18px;
    }

    .leahz-product-card__action-btn svg {
        width: 9px;
        height: 9px;
    }

    /* 向后兼容的旧网格样式 */
    .product-grid,
    .product-grid-new {
        gap: 10px;
        padding: 10px 15px;
        width: calc(100% - 30px) !important;
    }

    /* 向后兼容的旧标题样式 - 通过产品卡片选择器一起加载 */
    .related-product,
    .woocommerce .product-list-title,
    .product-list-title {
        /* 确保小屏幕向后兼容的响应式样式一起加载 */
    }

    .woocommerce .product-list-title,
    .product-list-title {
        margin-left: 15px;
        margin-bottom: 20px;
        font-size: 11px;
    }

    /* 向后兼容的旧网格样式 */
    .related-products-grid {
        gap: 10px;
        padding: 10px 15px;
        width: calc(100% - 30px);
    }

    /* 产品卡片进一步缩小 */
    .product-card-300,
    .product-card-medium,
    .product-card-large,
    .related-product {
        flex: 0 0 220px;
        min-width: 220px;
        width: 220px;
    }

    /* 操作按钮进一步缩小 */
    .product-action-btn,
    .related-product-action-btn {
        width: 18px;
        height: 18px;
    }

    .product-action-btn svg,
    .related-product-action-btn svg {
        width: 9px;
        height: 9px;
    }

    /* 心愿单页面进一步调整 */
    .wishlist-page-container {
        padding: var(--spacing-large) var(--spacing-medium);
    }

    .wishlist-products {
        grid-template-columns: 1fr;
    }

    .wishlist-product-actions {
        flex-direction: column;
    }
}