/* 基础样式 */
* {
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f8f9fa;
}
.fs-7 {
    font-size: 0.85rem !important;
}
.fs-8 {
    font-size:0.7rem !important;
}
/* 导航栏样式 */
.navbar {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.navbar-brand i {
    font-size: 1.25rem;
}
/* 针对手机端（d-lg-none 控制仅手机端显示）的文字容器 */
.navbar-custom-text {
    /* 让文字在容器内水平居中 */
    text-align: center;
    /* 允许文字换行，但这里主要是为了配合 overflow 等属性，也可设为 nowrap 强制不换行，结合 text-overflow */
    white-space: nowrap;
    /* 当文字超出容器宽度时，隐藏超出部分 */
    overflow: hidden;
    /* 超出部分用省略号表示 */
    text-overflow: ellipsis;
    /* 给容器设置合适的宽度，通过 flex 布局的 flex 属性来分配空间，这里设为 flex: 1，使其尽可能占据可用空间，同时不挤压筛选按钮 */
    flex: 1;
}

/* 调整导航栏的 flex 布局，让子元素在一行显示 */
.navbar-expand-lg .container {
    display: flex;
    align-items: center;
}

/* 确保菜单按钮、文字容器、筛选按钮在一行，且各自有合适的布局 */
.navbar-toggler,
.navbar-custom-text,
.btn-outline-light.d-lg-none {
    /* 让这几个元素在 flex 布局中按顺序排列 */
    flex-shrink: 0; 
}
/* 主内容区域样式 */
main {
    min-height: calc(100vh - 200px);
}

/* 商品卡片样式 */
.product-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.product-card .card-img-top {
    height: 200px;
    object-fit: cover;
    /* opacity:0 */
}

/* 筛选区域样式 */
.bg-light {
    background-color: #fff !important;
}

/* 缩略图样式 */
.thumbnail-item {
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.thumbnail-item.active {
    border-color: #0d6efd;
}

.thumbnail-item:hover {
    border-color: #0d6efd;
}

/* 规格选项样式 */
.btn-outline-primary.active {
    background-color: #0d6efd;
    color: white;
}

/* 数量输入框样式 */
/* .input-group .form-control {
    max-width: 80px;
} */

/* 选项卡样式 */
.nav-tabs {
    border-bottom: 1px solid #dee2e6;
}

.nav-tabs .nav-link {
    color: #6c757d;
    border: none;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}

.nav-tabs .nav-link:hover {
    color: #0d6efd;
    border-bottom-color: #0d6efd;
}

.nav-tabs .nav-link.active {
    color: #0d6efd;
    border-bottom-color: #0d6efd;
}

/* 评价项样式 */
.review-item {
    transition: background-color 0.3s ease;
}

.review-item:hover {
    background-color: #f8f9fa;
}

/* 页脚样式 */
footer {
    background-color: #343a40;
    color: white;
}

footer a {
    color: #adb5bd;
    transition: color 0.3s ease;
}

footer a:hover {
    color: white;
}

/* 社交链接样式 */
.social-links a {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.social-links a:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-3px);
}

/* 返回按钮样式 */
.btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
}

/* 购物车和购买按钮样式 */
.btn-primary {
    transition: all 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(13, 110, 253, 0.4);
}

.btn-danger {
    transition: all 0.3s ease;
}

.btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(220, 53, 69, 0.4);
}
/* 模态框整体背景色（模拟第一张图的深棕色调） */
#contactUsModal .modal-content {
    background-color: #5a4535;
    color: #fff;
}

/* 模态框标题样式 */
#contactUsModal .modal-title {
    font-size: 1.5rem;
    font-weight: bold;
}

/* 关闭按钮颜色（白色更显眼） */
/* #contactUsModal .btn-close {
    filter: invert(1);
} */

/* 卡片背景（白色，与第一张图左侧二维码区域匹配） */
#contactUsModal .card {
    background-color: #fff;
    color: #000;
    border-radius: 8px;
}

/* 卡片标题样式 */
#contactUsModal .card-title {
    font-size: 1rem;
    font-weight: bold;
}

/* 卡片文本样式 */
#contactUsModal .card-text {
    font-size: 0.9rem;
}

/* 列表项样式（与第一张图右侧文字对齐、颜色匹配） */
#contactUsModal ul li {
    margin-bottom: 8px;
    font-size: 0.95rem;
}

/* 底部提示文字样式（模拟第一张图底部的客服电话提示） */
#customerServiceTip {
    text-align: center;
    margin-top: 15px;
    font-size: 0.9rem;
}
/* 固定按钮容器样式 */ 
.fixed-buttons {
    position: fixed;
    bottom: 94px;
    right: 25px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 9999;
 }

 /* 按钮通用样式 */
 .fixed-btn {
     width: 50px;
     height: 50px;
     border-radius: 50%;
    background-color: rgb(67, 102, 227);
     color: #fff;
     border: none;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
     transition: background-color 0.3s ease;
 }

 .fixed-btn:hover {
     background-color: #0056b3;
 }

 /* 模态框相关样式（联系我们用模态框示例） */
 .modal-content {
     background-color: #fff;
 }

 /* 关于我们侧边栏 整体美化 */
#aboutUsOffcanvas {
    background-color: #fcfaf6; /* 浅米色背景，营造柔和质感 */
    color: #333; /* 深灰色文字，提升可读性 */
}

/* 头部区域：标题 + 关闭按钮 */
#aboutUsOffcanvas .offcanvas-header {
    border-bottom: 1px solid #e0d8c8; /* 浅棕色分隔线，区分标题与内容 */
    padding: 1.5rem; /* 增加内边距，避免拥挤 */
}

#aboutUsOffcanvas .offcanvas-title {
    font-size: 1.5rem; /* 标题字号放大，更醒目 */
    font-weight: 700; /* 标题加粗，强化层级 */
    color: #5a4535; /* 深棕色标题，与背景形成对比 */
}

/* 内容区域：段落排版 */
#aboutUsOffcanvas .offcanvas-body {
    padding: 1.5rem; /* 内容区內边距，让文字有呼吸感 */
    line-height: 1.8; /* 行高调整，提升阅读流畅度 */
}

#aboutUsOffcanvas .offcanvas-body p {
    margin-bottom: 1.2rem; /* 段落底部间距，优化呼吸感 */
    text-align: justify; /* 文字两端对齐，排版更整齐专业 */
}

/* 关闭按钮：颜色适配浅背景 */
/* #aboutUsOffcanvas .btn-close {
    filter: invert(0.5) sepia(1) saturate(2) hue-rotate(340deg); 
} */

#aboutUsModal {
    /* background-color: #fcfaf6; 浅米色背景，营造柔和质感 */
    color: #333; /* 深灰色文字，提升可读性 */
}
#aboutUsModal .modal-content {
    background-color: #5a4535;
    color: #fff;
}
/* 头部区域：标题 + 关闭按钮 */
#aboutUsModal .modal-header {
    border-bottom: 1px solid #e0d8c8; /* 浅棕色分隔线，区分标题与内容 */
    padding: 1.5rem; /* 增加内边距，避免拥挤 */
}

#aboutUsModal .modal-title {
    font-size: 1.5rem; /* 标题字号放大，更醒目 */
    font-weight: 700; /* 标题加粗，强化层级 */
    /* color: #5a4535; 深棕色标题，与背景形成对比 */
}

/* 内容区域：段落排版 */
#aboutUsModal .modal-body {
    padding: 1.5rem; /* 内容区內边距，让文字有呼吸感 */
    line-height: 1.8; /* 行高调整，提升阅读流畅度 */
}

#aboutUsModal .modal-body p {
    margin-bottom: 1.2rem; /* 段落底部间距，优化呼吸感 */
    text-align: justify; /* 文字两端对齐，排版更整齐专业 */
}

/* 关闭按钮：颜色适配浅背景 */
/* #aboutUsModal .btn-close {
    filter: invert(0.5) sepia(1) saturate(2) hue-rotate(340deg); 调整为棕色调，与整体风格统一
} */

/* 筛选侧边栏 整体美化 */
#filterOffcanvas {
    background-color: #5a4535;
    color:#fff;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1); /* 右侧阴影，增强层次感 */
}

/* 头部区域：标题 + 关闭按钮 */
#filterOffcanvas .offcanvas-header {
    border-bottom: 1px solid #eee; /* 浅灰分隔线，区分标题与内容 */
    padding: 1rem 1.5rem; /* 内边距优化，避免拥挤 */
}

#filterOffcanvas .offcanvas-title {
    font-size: 1.25rem; /* 标题字号放大，更醒目 */
    font-weight: 600; /* 标题加粗，强化层级 */
    /* color: #333; 深灰色标题，提升可读性 */
}

/* 内容区域：表单元素排版 */
#filterOffcanvas .offcanvas-body {
    padding: 1.5rem; /* 内容区內边距，让元素有呼吸感 */
}

/* 标签样式 */
#filterOffcanvas .form-label {
    font-weight: 500; /* 标签加粗，突出引导性 */
    /* color: #555; 标签浅灰色，避免与内容抢视觉 */
    margin-bottom: 0.35rem; /* 标签与选择框的间距优化 */
}
#filterOffcanvas .btn-close ,
#contactUsModal .btn-close,
#aboutUsModal .btn-close {
    --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    --bs-btn-close-opacity: 1;
    /* filter: invert(1); */
}
/* 选择框样式 */
#filterOffcanvas .form-select {
    border: 1px solid #ddd; /* 浅灰边框，柔和不刺眼 */
    border-radius: 0.375rem; /* 圆角优化，更现代 */
    padding: 0.5rem 0.75rem; /* 内边距调整，让选择框更饱满 */
    font-size: 0.95rem; /* 字体大小适配移动端 */
    transition: border-color 0.2s ease, box-shadow 0.2s ease; /*  hover/聚焦过渡动画 */
}

#filterOffcanvas .form-select:hover {
    border-color: #aaa; /* hover时边框加深，增强交互感 */
}

#filterOffcanvas .form-select:focus {
    border-color: #0d6efd; /* 聚焦时边框用Bootstrap主题色 */
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); /* 聚焦阴影，明确交互状态 */
    outline: none; /* 清除默认outline，避免样式冲突 */
}

/* 筛选组间距 */
#filterOffcanvas .mb-3 {
    margin-bottom: 1.25rem !important; /* 增加筛选组之间的间距，确保透气感 */
}

/* 应用筛选按钮（若启用） */
#apply-filter-btn {
    background-color: #0d6efd; /* Bootstrap 主题蓝色，增强识别性 */
    border-color: #0d6efd;
    font-weight: 500; /* 按钮文字加粗 */
    padding: 0.6rem 0; /* 按钮内边距优化，更饱满 */
    transition: background-color 0.2s ease; /* hover过渡动画 */
}

#apply-filter-btn:hover {
    background-color: #0b5ed7; /* hover时深色，增强交互反馈 */
    border-color: #0a58ca;
}

/* 响应式设计调整 */
@media (max-width: 768px) {
    /* .product-card .card-img-top {
        height: 150px;
    } */
    
    .social-links a {
        width: 35px;
        height: 35px;
        line-height: 35px;
    }
    
    .btn-primary, .btn-danger {
        width: 100%;
        margin-bottom: 10px;
    }
    
    .input-group.w-50 {
        width: 100% !important;
    }
}

@media (max-width: 576px) {
    h1 {
        font-size: 1.75rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
    
    h3 {
        font-size: 1.25rem;
    }
    
    /* .product-card .card-img-top {
        height: 120px;
    } */
}