/**
 * 产品列表主CSS文件 (Product List Main CSS)
 * 
 * 包含所有必要的基础样式：
 * - 产品列表容器和布局
 * - 横向滚动功能
 * - Discover More按钮
 * - 动态尺寸控制（通过CSS变量）
 * - 响应式设计
 * 
 * 自动包含：product-card-base.css
 * 
 * @package Leahz
 * @version 3.0.0
 */

/* ==========================================================================
   注意：产品卡片基础样式通过PHP单独加载 (product-card-base.css)
   ========================================================================== */

/* ==========================================================================
   CSS变量定义
   ========================================================================== */
:root {
    --product-list-gap: 20px;
    --product-list-padding: 30px;
    --discover-more-width: 120px;
    --font-medium: 500;
    --color-text: #333;
    --color-background: #fff;
    --transition-default: all 0.3s ease;
}

/* ==========================================================================
   产品列表容器 (Product List Container)
   ========================================================================== */

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

/* 产品列表标题 */
.leahz-product-list__title {
    font-size: 11px;
    font-weight: var(--font-medium);
    margin: 0 0 30px 30px;
    color: var(--color-text);
    /* 移除强制大写，保持自定义字符的原始大小写 */
    letter-spacing: 0.5px;
}

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

/* ==========================================================================
   横向滚动布局 (Horizontal Scroll Layout)
   ========================================================================== */

/* 横向滚动网格 - 用于首页和产品页面 */
.leahz-product-list__grid {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--product-list-gap);
    overflow-x: auto;
    padding: 10px var(--product-list-padding);
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    position: relative;
    margin: 0;
    list-style: none;
    width: calc(100% - calc(var(--product-list-padding) * 2));
    
    /* 向子卡片传递宽度变量 */
    --card-width: var(--dynamic-card-width, 300px);
    --card-min-width: var(--dynamic-card-width, 300px);
    --card-max-width: none;
}

/* 隐藏滚动条 */
.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 */
}

/* ==========================================================================
   布局模式 (Layout Modes)
   ========================================================================== */

/* 首页模式 - 左右边距 */
.leahz-product-list--homepage .leahz-product-list__container {
    margin: 0 30px;
    width: calc(100% - 60px);
}

.leahz-product-list--homepage .leahz-product-list__grid {
    padding: 10px 0;
    width: 100%;
}

/* 产品页面模式 - 全宽 */
.leahz-product-list--product-page {
    margin: 40px 0;
}

.leahz-product-list--product-page .leahz-product-list__grid {
    padding: 10px var(--product-list-padding);
    width: calc(100% - calc(var(--product-list-padding) * 2));
}

/* ==========================================================================
   Discover More 按钮样式
   ========================================================================== */

/* 新版Discover More按钮容器 */
.leahz-product-list__discover-more {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: var(--discover-more-width);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.leahz-product-list__overlay {
    position: absolute;
    right: 0;
    top: 0;
    width: var(--discover-more-width);
    height: 100%;
    background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.8) 30%, rgba(255, 255, 255, 0.95) 70%, #ffffff 100%);
    pointer-events: none;
    z-index: 1;
}

.leahz-product-list__discover-btn {
    position: relative;
    z-index: 2;
    background: #fff;
    color: #000;
    padding: 12px 20px;
    text-decoration: none;
    font-size: 11px;
    font-weight: var(--font-medium);
    letter-spacing: 0.5px;
    border: 1px solid #ddd;
    border-radius: 0;
    transition: var(--transition-default);
    white-space: nowrap;
    box-shadow: none;
}

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

/* 旧版本兼容性 - discover-more-container */
.discover-more-container {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: var(--discover-more-width);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.discover-more-overlay {
    position: absolute;
    right: 0;
    top: 0;
    width: var(--discover-more-width);
    height: 100%;
    background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.8) 30%, rgba(255, 255, 255, 0.95) 70%, #ffffff 100%);
    pointer-events: none;
    z-index: 1;
}

.discover-more-btn {
    position: relative;
    z-index: 2;
    background: #fff;
    color: #000;
    padding: 12px 20px;
    text-decoration: none;
    font-size: 11px;
    font-weight: var(--font-medium);
    letter-spacing: 0.5px;
    border: 1px solid #ddd;
    border-radius: 0;
    transition: var(--transition-default);
    white-space: nowrap;
    box-shadow: none;
}

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

/* ==========================================================================
   响应式设计 (Responsive Design)
   ========================================================================== */

/* 平板设备 */
@media (max-width: 768px) {
    .leahz-product-list__title {
        margin-left: 20px;
        margin-bottom: 25px;
    }
    
    .leahz-product-list__grid {
        gap: 15px;
        padding: 10px 20px;
        width: calc(100% - 40px);
    }
    
    .leahz-product-list--homepage .leahz-product-list__container {
        margin: 0 20px;
        width: calc(100% - 40px);
    }
    
    .leahz-product-list--homepage .leahz-product-list__grid {
        padding: 10px 0;
        width: 100%;
    }
    
    /* 移动端隐藏Discover More按钮 */
    .leahz-product-list__discover-more,
    .discover-more-container {
        display: none;
    }
}

/* 小屏幕设备 */
@media (max-width: 480px) {
    .leahz-product-list__title {
        margin-left: 15px;
        font-size: 10px;
    }
    
    .leahz-product-list__grid {
        gap: 10px;
        padding: 10px 15px;
        width: calc(100% - 30px);
    }
}