/*  header.css - 仅基础样式，无额外修改 */
.header-section {
    position: sticky; /* 粘性定位，滚动时固定在顶部 */
    top: 0; /* 固定在视口顶部 */
    z-index: 9999; /* 确保头部在其他内容上方 */
    background: #fff; /* 防止滚动时背景透明穿透内容 */
}

    /* 扩展头部左右宽度 */
.header-section .container {
    max-width: 100%; /* 取消默认的固定最大宽度限制 */
    padding-left: 3.5rem; /* 左侧内边距，可根据需要调整（比如3rem/4rem） */
    padding-right: 3.5rem; /* 右侧内边距，和左侧保持一致 */
}
/* 响应式适配（和目标站保持一致） */
@media (max-width: 1440px) {
    .header-section .container {
        max-width: 100%; /* 屏幕小于1440px时，撑满宽度 */
    }
}

@media (max-width: 768px) {
    .header-section .container {
        padding-left: 1.5rem; /* 移动端内边距缩小为24px（1.5rem） */
        padding-right: 1.5rem;
    }
}

/* 顶部头部 */
.top-header {
    background-color: #ffffff !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: 100px !important;
    display: flex !important;
    align-items: center !important;
    border-bottom: 1px solid #e9ecef;
    /* 移除不必要的居中属性 */
    justify-content: flex-start !important;
}

    /* 关键：让 row 占满宽度，且子列分布合理 */
    .top-header .row {
        width: 100% !important;
        margin: 0 !important; /* 移除 row 默认的左右外边距 */
    }

/* Logo样式 */
.header-logo {
    height: 40px; /* 固定占位高度 */
    width: auto;
    /*transform: scale(2) translate(12px, -3px);*/ /* 新增-2px向上微调，抵消偏下问题 */
    transform: scale(1.8) translate(8px, -3px); /* 稍微减小缩放比例，从2改为1.8，减少偏移 */
    transform-origin: left center;
    max-width: 100%; /* 新增：确保Logo不超出列宽度 */
}


.search-container {
    width: 100%;
    max-width: none !important;
    margin: 0 !important; /* 关键：删除原有的 margin: 0 0 0 15% */
    display: flex;
    justify-content: stretch;
}


/* 输入组 - 确保不换行 */
.search-form .input-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
}

.search-category {
    font-size: 0.8rem;
    flex: 0 0 180px !important; /* 固定宽度180px，可根据需要调整 */
    min-width: 150px !important; /* 最小宽度保障 */
    border-radius: 0 !important; /* 取消圆角，和搜索框衔接更自然 */
    border-left: 1px solid #ced4da !important;
    border-right: 1px solid #ced4da !important;
    border-top: 1px solid #ced4da !important;
    border-bottom: 1px solid #ced4da !important;
    height: 44px !important; /* 和搜索框高度一致 */
}


.search-input {
    flex: 1 !important; /* 占据所有剩余空间 */
    min-width: 300px !important; /* 最小宽度从150px提升到300px */
    padding: 0.4rem 1.2rem;
    border-radius: 50px 0 0 50px;
    border: 1px solid #ced4da;
    outline: none;
    box-shadow: none;
    font-size: 1rem;
    height: 44px;
    box-sizing: border-box;
}

.search-input::placeholder {
    font-size: 0.85rem; /* 字体变小（原1rem，可按需改为0.8rem/0.9rem） */
    /*font-weight: bold ;*/ /* 字体加粗 */
    color: #1a1a1a !important; /* 极深的灰色，接近纯黑 */

}

.search-input:focus {
    outline: none !important; /* 取消默认外边框 */
    box-shadow: none !important; /* 取消Boostrap默认的聚焦发光阴影（核心增亮效果） */
    border-color: #ced4da !important; /* 聚焦时边框颜色保持默认，不变化 */
    background-color: #ffffff !important; /* 背景色保持白色，不增亮 */
}


.search-btn {
    flex-shrink: 0;
    height: 44px;
    padding: 0.4rem 0.8rem;
    border-radius: 0 50px 50px 0;
    background-color: #495057;
    border: 1px solid #495057;
    color: #ffffff;
    white-space: nowrap;
}

.search-btn:hover {
    opacity: 0.8; /* 直接改变透明度 */
}

.col-lg-9.col-md-8.col-sm-7 {
    flex: 0 0 76% !important; 
    max-width: 76% !important;
    min-width: 600px !important;
    padding-left: 12rem !important; /* 核心：添加左侧间距，让搜索框右移 */
}

/* Logo列减小 */
.col-lg-1.col-md-2.col-sm-3 {
    flex: 0 0 12% !important; 
    max-width: 12% !important;
    min-width: 120px !important;
}

/* 工具列减小 */
.col-lg-2.col-md-2.col-sm-2 {
    flex: 0 0 12% !important;
    max-width: 12% !important;
    min-width: 100px !important; /* 新增：最小宽度，避免工具区域挤压 */
}

/* 头部工具区域 */
.header-tools {
    font-size: 0.875rem;
    width: 100%; /* 占满列宽，确保 justify-content-end 生效 */
    padding-right: 0.5rem !important; /* 预留少量右侧间距，不贴边 */
}

.cart-section {
    /* 确保购物车模块和登录模块对齐 */
    display: flex;
    align-items: center;
}

.cart-section a {
        /* 横向排列图标和金额 */
        display: flex !important;
        align-items: center !important;
        gap: 1.0rem !important; /* 图标和金额之间的间距 */
}

.cart-icon-wrapper {
    /* 角标定位容器 */
    position: relative;
    display: inline-block;
}

.cart-count {
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 0.75rem;
    padding: 0.2rem 0.4rem;
}

.cart-total {
    font-size: 0.875rem !important; /* 和工具区域字体一致 */
    margin: 0 !important; /* 取消默认边距 */
}

    .cart-total .fw-bold {
        font-size: 0.875rem !important;
        color: #212529 !important; /* 深色文字，和图标一致 */
    }

/* 底部导航 */
/* 第二行：导航菜单和联系信息 */
.dropdown-hover {
    position: relative; /* 让下拉菜单相对于父元素定位 */
    height: 100%; /* 关键：占满底部导航的高度，扩大hover交互区域 */
    display: flex; /* 确保和其他导航项对齐 */
    align-items: center; /* 垂直居中 */
}

    /* 修复：hover触发显示下拉菜单（提升优先级） */
    .dropdown-hover:hover > .dropdown-menu {
        display: block !important; /* 强制显示，覆盖Bootstrap默认样式 */
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }

    /* 初始状态：隐藏下拉菜单（提升优先级） */
    .dropdown-hover .dropdown-menu {
        display: none !important; /* 强制隐藏 */
        opacity: 0;
        visibility: hidden;
        transform: translateY(5px);
        transition: all 0.2s ease-in-out;
        top: 100% !important; /* 强制在分类项下方 */
        left: 0 !important; /* 强制左对齐 */
        z-index: 1050 !important;
        min-width: 200px;
        padding: 0.5rem 0;
        border: 1px solid rgba(0,0,0,.15);
        border-radius: 0.25rem;
        box-shadow: 0 0.5rem 1rem rgba(0,0,0,.175);
        background-color: #fff !important; /* 强制白色背景，避免透明 */
    }

    /* 保留下拉箭头样式 */
    .dropdown-hover .dropdown-toggle::after {
        display: inline-block;
        margin-left: 0.255em;
        vertical-align: 0.255em;
        content: "";
        border-top: 0.3em solid;
        border-right: 0.3em solid transparent;
        border-bottom: 0;
        border-left: 0.3em solid transparent;
    }

    /* 分类菜单选项样式（确保数据显示清晰） */
    .dropdown-hover .dropdown-menu .dropdown-item {
        padding: 0.25rem 1.5rem;
        font-size: 0.9rem;
        color: #212529 !important; /* 强制文字颜色 */
        background-color: transparent !important;
    }

        .dropdown-hover .dropdown-menu .dropdown-item:hover {
            background-color: #e9ecef !important;
            color: #0d6efd !important;
        }

/* 移动端禁用hover（仅保留点击） */
@media (max-width: 992px) {
    .dropdown-hover:hover > .dropdown-menu {
        display: none !important;
    }
}
.bottom-header {
    background-color: #e9ecef !important; /* 改为更浅的灰色背景 */
    padding-top: 0.4rem !important; /* 减小上下内边距 */
    padding-bottom: 0.4rem !important;
    height: 45px !important; /* 固定高度 */
    border-top: 1px solid #e9ecef; /* 添加上边框分隔 */
}

/* 导航菜单调整 */
.main-navigation .nav {
    margin-bottom: 0; /* 移除底部边距 */
}

.main-navigation .nav-link {
    color: #212529;
    padding: 0.3rem 0.8rem !important; /* 减小内边距 */
    font-size: 0.9rem !important; /* 稍微减小字体 */
    display: flex;
    align-items: center;
    transition: color 0.2s ease;
}

    .main-navigation .nav-link:hover {
        color: #0d6efd;
    }

    .main-navigation .nav-link.active {
        color: #0d6efd;
        font-weight: 500;
    }

/* 联系信息调整 */
.contact-info {
    font-size: 1rem !important; /* 从原来的0.85rem增大到1rem */
}

.contact-details .fw-bold {
    font-size: 1rem !important; /* 从原来的0.85rem增大到1rem */
    font-weight: 600 !important; /* 可以适当加粗 */
}

.contact-details .small {
    font-size: 0.875rem !important; /* 从原来的0.75rem增大到0.875rem */
    color: #495057 !important; /* 可以使用深一点的灰色 */
}

/* 响应式调整 */
@media (max-width: 1200px) {
    .main-navigation .nav-link {
        padding: 0.3rem 0.6rem !important;
        font-size: 0.85rem !important;
    }

    .contact-info {
        gap: 2rem !important;
    }
}

@media (max-width: 992px) {
    .bottom-header {
        height: auto !important; /* 在小屏幕上自动高度 */
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .d-flex.justify-content-between.align-items-center {
        flex-direction: column; /* 改为垂直布局 */
        gap: 0.5rem;
    }

    .main-navigation .nav {
        justify-content: center;
        flex-wrap: wrap;
    }

    .main-navigation .nav-link {
        padding: 0.2rem 0.5rem !important;
        font-size: 0.8rem !important;
    }

    .contact-info {
        justify-content: center;
        gap: 1.5rem !important;
    }
    .col-lg-1.col-md-2.col-sm-3 {
        min-width: 100px !important; /* 平板端Logo列最小宽度 */
    }

    .col-lg-9.col-md-8.col-sm-7 {
        min-width: 400px !important;
        padding-left: 1rem !important; /* 平板端减小左侧间距 */
        flex: 0 0 72% !important;
        max-width: 72% !important;
    }

    .col-lg-2.col-md-2.col-sm-2 {
        min-width: 80px !important;
    }

    .search-category {
        flex: 0 0 150px !important; /* 平板端分类框宽度150px */
    }

    .search-input {
        min-width: 200px !important; /* 平板端搜索框最小宽度200px */
    }
}

@media (max-width: 768px) {
    .bottom-header {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .main-navigation .nav-link {
        padding: 0.2rem 0.4rem !important;
        font-size: 0.75rem !important;
    }

        .main-navigation .nav-link i {
            margin-right: 0.3rem !important;
        }

    .contact-info {
        flex-wrap: wrap;
        gap: 1rem !important;
    }

    .contact-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

        .contact-item i {
            margin-right: 0 !important;
            margin-bottom: 0.2rem;
        }
    .col-lg-1.col-md-2.col-sm-3 {
        min-width: 80px !important;
    }

    .col-lg-9.col-md-8.col-sm-7 {
        min-width: 300px !important;
        padding-left: 0.5rem !important; /* 移动端最小间距 */
        flex: 0 0 70% !important;
        max-width: 70% !important;
    }

    .col-lg-2.col-md-2.col-sm-2 {
        min-width: 70px !important;
    }

    .search-category {
        flex: 0 0 120px !important; /* 移动端分类框宽度120px */
    }

    .search-input {
        min-width: 150px !important; /* 移动端搜索框最小宽度150px */
    }
}

/* 强制联系信息标签和内容同行显示 */
.contact-details {
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important; /* 禁止换行 */
}
    /* 微调标签和内容的间距 */
    .contact-details .small.text-muted {
        margin-bottom: 0 !important; /* 移除默认的上下外边距 */
    }

/* 分类菜单样式优化 */
.category-menu-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    color: #212529;
    text-decoration: none;
    transition: all 0.2s ease;
    border-radius: 0.25rem;
    gap: 0.5rem;
}

.category-menu-item-top {
    font-weight: 600;
    font-size: 0.95rem;
    color: #343a40;
}

.category-menu-item-top:hover {
    color: #0d6efd;
}

.category-menu-item-sub {
    font-size: 0.9rem;
    color: #6c757d;
}

.category-menu-item-sub:hover {
    color: #0d6efd;
}

.category-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: #6c757d;
    transition: color 0.2s ease;
}

.category-menu-item-top:hover .category-icon {
    color: #0d6efd;
}

.category-menu-item-sub:hover .category-icon {
    color: #0d6efd;
}

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

.category-submenu {
    list-style: none;
    padding: 0.25rem 0 0.25rem 1.5rem;
    margin: 0;
    border-left: 2px solid #e9ecef;
}

.category-submenu li {
    margin: 0.25rem 0;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .category-menu-item {
        padding: 0.4rem 0.75rem;
    }

    .category-menu-item-top {
        font-size: 0.9rem;
    }

    .category-menu-item-sub {
        font-size: 0.85rem;
    }

    .category-submenu {
        padding-left: 1rem;
    }

    .category-icon {
        width: 18px;
        height: 18px;
    }
}