/* 1. 页眉样式 - 所有页面通用 */
/* 页眉基础样式 */
header {
    font-family: 'Open Sans', sans-serif; /* 使用Open Sans字体作为主要字体 */
    position: fixed; /* 固定定位在页面顶部 */
    width: 100%;
    background: transparent; /* 透明背景 */
    padding: 30px 80px; /* 上下30px，左右80px的内边距 */
    z-index: 1000; /* 确保页眉始终显示在其他元素上方 */
    font-weight: var(--font-light); /* 调整为轻量字重 */
}

/* 深色背景下的导航链接、logo和图标颜色 */
header.light-bg .nav-links a,
header.light-bg .logo,
header.light-bg .nav-icons a,
header.light-bg .menu-item {
    color: #000000; /* 纯黑色 */
}

/* 当header有dark-bg类时的样式 */
header.dark-bg .nav-icons a {
    color: white;
}

/* 页面滚动时的样式变化 */
header.scrolled .logo,
header.scrolled .nav-icons a,
header.scrolled .menu-item {
    opacity: 0.7; /* 降低透明度 */
    transition: opacity 0.3s ease; /* 平滑过渡效果 */
}

/* 滚动时鼠标悬停效果 */
header.scrolled .logo:hover,
header.scrolled .nav-icons a:hover,
header.scrolled .menu-item:hover {
    opacity: 1;
}

/* 主导航栏样式 */
.main-nav {
    position: fixed;
    top: 4px; /* 下移10px */
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 40px;
    background: transparent;
    z-index: 1000;
    transition: all 0.3s ease;
    color: white; /* 默认白色文字 */
}

/* 导航图标组样式 */
.nav-icons {
    display: flex;
    align-items: center;
    width: 33.33%; /* 三等分布局 */
    height: 14px;
}

/* 左侧图标组对齐 */
.nav-icons.left {
    justify-content: flex-start;
}

/* 右侧图标组对齐 */
.nav-icons.right {
    justify-content: flex-end;
}

/* 导航图标链接样式 */
.nav-icons a {
    display: flex;
    align-items: center;
    height: 24px;
    color: inherit;
    text-decoration: none;
    margin-left: 30px;
    opacity: 0.7;
    transition: all 0.3s ease;
    font-style: normal;
    font-weight: 100;
}

/* 第一个图标无左边距 */
.nav-icons a:first-child {
    margin-left: 0;
}

/* 图标悬停效果 */
.nav-icons a:hover {
    opacity: 1;
}

/* 图标本身的样式 */
.nav-icons a i {
    font-size: 12px; /* 调整为5号字体 */
    display: flex;
    align-items: center;
    height: 24px;
    font-weight: var(--font-medium); /* 调整为中量字重 */
}

/* Logo样式 */
.logo {
    text-align: center;
    width: 33.33%;
    font-size: 48px;
    font-family: 'Open Sans', sans-serif;
    font-weight: var(--font-medium); /* 调整为中量字重 */
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    will-change: transform;
}

/* Logo悬停效果 */
.logo:hover {
    opacity: 0.8;
}

/* 菜单项样式 */
.menu-wrapper {
    display: flex;
    align-items: left;
    gap: 5px; /* 更小的间距 */
    width: 100%;
    white-space: nowrap;
}

.menu-item {
    color: inherit;
    text-decoration: none;
    font-size: var(--font-size-small); /* 统一使用小号字体 */
    opacity: 0.7;
    transition: opacity 0.3s ease;
    font-style: normal;
    font-weight: var(--font-medium); /* 调整为中量字重 */
    font-family: 'Open Sans', sans-serif;
}

.menu-item:hover {
    opacity: 1;
}

/* 搜索框样式 */
.search-bar {
    display: flex;
    align-items: center;
    position: relative;
    margin-right: 30px;
}

.search-bar input {
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 6px;
    color: inherit;
    padding: 3px 36px 3px 12px;
    width: 150px;
    font-size: var(--font-size-small); /* 使用小号字号 */
    height: 20px;
    font-weight: var(--font-light); /* 调整为轻量字重 */
    font-family: 'Open Sans', sans-serif;
}

.search-bar input::placeholder {
    color: currentColor;
    opacity: 0.7;
}

.search-bar button {
    background: transparent;
    border: none;
    color: inherit;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
}

.search-bar button:hover {
    opacity: 1;
}

.search-bar button i {
    font-size: 10px; /* 调整为5号字体 */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 16px;
    font-weight: 300; /* 调整为300字重 */
}

/* 2. 产品网格样式 - 产品列表通用 */
.products-grid, .product-grid {
    display: flex;
    flex-wrap: nowrap; /* 不换行 */
    gap: 20px;
    padding: 0; /* 移除内边距 */
    margin: 0; /* 移除外边距 */
    width: 100%; /* 全宽度 */
    overflow-x: auto; /* 水平滚动 */
    -webkit-overflow-scrolling: touch; /* 平滑滚动效果 */
    scroll-behavior: smooth; /* 平滑滚动 */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #ccc transparent; /* Firefox */
}

/* 隐藏Webkit浏览器的滚动条 */
.products-grid::-webkit-scrollbar, .product-grid::-webkit-scrollbar {
    height: 2px; /* 滚动条高度 */
}

.products-grid::-webkit-scrollbar-track, .product-grid::-webkit-scrollbar-track {
    background: transparent;
}

.products-grid::-webkit-scrollbar-thumb, .product-grid::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 10px;
}

/* 特色产品区域样式 */
.featured-products {
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    position: relative;
}

/* 产品卡片基础样式 */
.product-card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    /* 移除固定宽度限制，允许在各页面中单独设置 */
}

/* 产品图片容器 */
.product-images {
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* 1:1图片比例 */
    overflow: hidden;
}

/* 产品图片样式 */
.product-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.4s ease;
}

/* 第二张产品图片（悬停时显示） */
.product-img.second-img, .second-img {
    opacity: 0;
}

/* 产品卡片悬停效果 - 在产品页面禁用，改为滚动切换 */
.product-card:hover .product-img.first-img, .product-card:hover .first-img {
    opacity: 0;
}

.product-card:hover .product-img.second-img, .product-card:hover .second-img {
    opacity: 1;
}

/* 产品页面禁用图片悬停效果 */
.single-product .product-card:hover .product-img.first-img,
.single-product .product-card:hover .first-img {
    opacity: 1; /* 保持第一张图片显示 */
}

.single-product .product-card:hover .product-img.second-img,
.single-product .product-card:hover .second-img {
    opacity: 0; /* 隐藏第二张图片 */
}

/* 产品信息样式 */
.product-info {
    padding: 5px 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
    gap: 5px; /* 元素间的间距 */
}

/* 产品标题样式 - 只针对产品列表，不影响单产品页面 */
body:not(.single-product) .product-title {
    font-size: var(--font-size-medium);
    margin: 0;
    font-weight: var(--font-light);
    flex: 0 0 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 30%;
}

/* 产品标题链接样式 */
.product-title a {
    color: #333;
    text-decoration: none;
    transition: none;
}

/* 产品价格样式 */
.product-price {
    font-size: var(--font-size-small);
    color: #666;
    margin: 0;
    font-weight: var(--font-light);
    flex: 0 0 auto;
    max-width: 25%;
}

/* 颜色变体样式 */
.color-variants {
    display: flex;
    gap: 3px;
    margin-left: 0;
    flex: 0 0 auto;
}

.color-variant {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    cursor: pointer;
}

/* 产品列表容器 - 包含产品网格和Discover More按钮 */
.product-list-container {
    position: relative;
    margin: 0; /* 移除左右margin */
    width: 100%; /* 占满全宽 */
    overflow: hidden; /* 隐藏溢出内容 */
}

/* 首页产品列表容器特殊处理 */
.home .product-list-container {
    margin: 0 30px; /* 左右与屏幕边框只有30px的margin */
    width: calc(100% - 60px); /* 考虑左右margin */
}

/* 新的产品网格样式 - 一行显示6个产品卡片 */
.product-grid-new {
    display: flex;
    flex-wrap: nowrap;
    gap: 15px;
    padding: 0;
    margin: 0;
    width: calc(100% - 150px); /* 留出空间给Discover More按钮 */
    overflow-x: auto; /* 水平滚动 */
    overflow-y: visible; /* 防止垂直滚动条 */
    -webkit-overflow-scrolling: touch; /* 平滑滚动效果 */
    scroll-behavior: smooth; /* 平滑滚动 */
    scrollbar-width: thin; /* Firefox滚动条样式 */
    scrollbar-color: #ccc transparent; /* Firefox滚动条颜色 */
    background-color: transparent; /* 确保背景透明 */
}

.product-grid-new::-webkit-scrollbar {
    height: 4px; /* 滚动条高度 */
}

.product-grid-new::-webkit-scrollbar-track {
    background: transparent;
}

.product-grid-new::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 10px;
}

/* 隐藏滚动条的左右箭头 */
.product-grid-new::-webkit-scrollbar-button {
    display: none;
}

/* 右侧"discover more"按钮容器样式已移至discover-more-hover.css */

/* 新的产品卡片样式 - 左侧标题，右侧价格和颜色变体 */
.product-card-new {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

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

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

.product-card-new .product-images {
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* 1:1图片比例 */
    overflow: hidden;
}

.product-card-new .product-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.4s ease;
}

.product-card-new .product-img.second-img {
    opacity: 0;
}

.product-card-new:hover .product-img.first-img {
    opacity: 0;
}

.product-card-new:hover .product-img.second-img {
    opacity: 1;
}

.product-card-new .product-info {
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    min-height: 80px; /* 确保有足够空间显示内容 */
}

/* 左侧信息区域 */
.product-card-new .product-left-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    flex: 1;
    max-width: 60%;
}

/* 产品标题样式已移至product-text-display.css */

/* 产品描述样式已移至product-text-display.css */

/* 右侧信息区域 */
.product-card-new .product-details {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

/* 产品价格容器 */
.product-card-new .product-price-container {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
    margin: 0 0 5px 0;
    text-align: right;
    flex-wrap: nowrap; /* 确保价格不换行 */
}

/* 原价样式 */
.product-card-new .product-regular-price {
    font-size: var(--font-size-small);
    color: #999;
    font-weight: var(--font-light);
    text-decoration: line-through;
    margin: 0;
}

/* 现价/特价样式 */
.product-card-new .product-sale-price {
    font-size: var(--font-size-small);
    color: #e74c3c; /* 红色特价 */
    font-weight: var(--font-medium);
    margin: 0;
}

/* 当只有一个价格时的样式 */
.product-card-new .product-price-container .product-regular-price:only-child {
    color: #666;
    text-decoration: none;
    font-weight: var(--font-light);
}

.product-card-new .color-variants {
    display: flex;
    gap: 5px;
    justify-content: flex-end;
    margin-top: 5px;
}

.product-card-new .color-variant {
    width: 12px;
    height: 12px;
    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;
}

/* 颜色变体悬停效果 */
.product-card-new .color-variant:hover {
    transform: scale(1.2);
    z-index: 2;
}

/* 银灰色特殊效果 */
.product-card-new .color-variant[style*="C0C0C0"] {
    background-image: linear-gradient(135deg, #C0C0C0, #E8E8E8);
}

/* 金棕色特殊效果 */
.product-card-new .color-variant[style*="CD7F32"] {
    background-image: linear-gradient(135deg, #CD7F32, #DAA520);
}

/* 语言选择器 */
.language-selector {
    display: flex;
    align-items: center;
    margin-left: 10px; /* 与其他图标保持一致的间距 */
    height: 20px;
    overflow: hidden; /* 隐藏溢出内容 */
}

.language-option {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #333;
    transition: all 0.3s ease;
    width: 20px;
    height: 20px;
    font-size: 9px;
    font-weight: var(--font-light);
    text-transform: uppercase;
}

.language-option.en {
    background-color: #ff0000; /* 红色背景 */
    color: #fff;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}

.language-option.nl {
    background-color: #ffcc00; /* 黄色背景 */
    color: #333;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
}

.language-option:hover {
    opacity: 0.9;
}

.language-option.active {
    font-weight: var(--font-medium);
}

/* 响应式样式 */
@media (max-width: 1200px) {
    .product-card-large {
        flex: 0 0 350px;
        min-width: 350px;
        width: 350px;
    }
}

@media (max-width: 992px) {
    .product-card-large {
        flex: 0 0 300px;
        min-width: 300px;
        width: 300px;
    }

    header {
        padding: 20px 40px;
    }
}

@media (max-width: 768px) {
    .product-card-large {
        flex: 0 0 250px;
        min-width: 250px;
        width: 250px;
    }

    header {
        padding: 15px 20px;
    }

    .main-nav {
        padding: 10px 20px;
    }

    .search-bar {
        display: none;
    }
}

@media (max-width: 576px) {
    .product-card-large {
        flex: 0 0 200px;
        min-width: 200px;
        width: 200px;
    }

    .product-card-new .product-info {
        flex-direction: column;
        align-items: flex-start;
    }

    .product-card-new .product-details {
        align-items: flex-start;
        margin-top: 5px;
    }

    /* 移动设备上的价格容器 */
    .product-card-new .product-price-container {
        justify-content: flex-start;
        margin-bottom: 5px;
    }

    .product-card-new .color-variants {
        justify-content: flex-start;
        margin-top: 8px;
    }

    .product-card-new .color-variant {
        width: 10px;
        height: 10px;
    }
}