/* custom-theme.css — keep small, overrides for theme tweaks */

/* 导航及子菜单统一字体为16px */
.navbar-wrap .navs,
.navbar-wrap .navs a,
.navbar-wrap .submenu a,
.header-style-two .coming-text {
    font-size: 16px !important;
}

/* 恢复‘触媒之家’为更大字号 */
.header-style-two .coming-text {
    font-size: 16px !important;
}

/* 顶部导航——确保首页及所有顶级菜单项字体为16px */
.navbar-wrap ul > li > a {
    font-size: 16px !important;
}

/* ===== 白蓝主题覆盖样式（新增） ===== */
:root{
    --blue-primary: #0b66cc;
    --blue-dark: #054a89;
    --blue-light: #eaf4ff;
    --text-dark: #123a56;
    --muted: #6b7f8f;
    --bg-white: #ffffff;
}

/* 基本文字与链接颜色 */
body, .site-wrapper, .main-content{
    background-color: var(--bg-white) !important;
    color: var(--text-dark) !important;
}

a, .btn-link, .text-primary{
    color: var(--blue-primary) !important;
}

a:hover, a:focus{
    color: var(--blue-dark) !important;
    text-decoration: none;
}

/* 表单占位符颜色（更柔和的蓝灰） */
::placeholder{ color: rgba(11,102,204,0.35) !important; }
*::-webkit-input-placeholder{ color: rgba(11,102,204,0.35) !important; }
*::-moz-placeholder{ color: rgba(11,102,204,0.35) !important; }

/* 图片缺失 / 占位样式：针对常见缩略图容器 */
.product-thumbnail, .product-thumb, .product-image, .product-card .product-img, .no-image, .img-placeholder{
    background-color: var(--blue-light) !important;
    border: 1px solid rgba(11,102,204,0.08) !important;
    border-radius: 6px !important;
}

/* 针对 img 未设置 src 的情况显示占位底色 */
img:not([src]), img[src=""], img[data-src=""]{
    background-color: var(--blue-light) !important;
    color: var(--blue-dark) !important;
}

/* 标签 / 小按钮（tag/badge）风格 */
.tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

.tag, .tag.flexs, .list-product-tag .tag, .exclusive-item-two .tag, .article-sidebar-tag ul li a, .labels, .list-product-tag a{
    background: var(--blue-light) !important;
    color: var(--blue-dark) !important;
    border: 1px solid rgba(11,102,204,0.12) !important;
    border-radius: 4px !important;
    padding: 5px 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.tag.flexs {
    min-width: 0 !important;
}

/* 修复加入购物车按钮文字和背景 */
.add-cart-btn {
    color: #ffffff !important;
    background: #0ac1a4 !important;
    border-color: transparent !important;
    min-width: 120px !important;
    text-align: center !important;
}

.add-cart-btn:hover,
.add-cart-btn:focus {
    background: #0ac1a4 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* 立即采购 / 了解更多按钮颜色修复 */
.purchase .product a,
.purchase .learn a,
.product a,
.learn a {
    color: #ffffff !important;
}

.purchase .learn {
    border-color: rgba(255,255,255,.7) !important;
}

/* 小标签 Hover 效果 */
.tag:hover, .list-product-tag a:hover{
    background: #d7ecff !important;
    color: var(--blue-dark) !important;
}

/* 头部背景与字体色 */
.header-style-two {
    background-color: #071d44 !important;
}

.header-style-two .header-search-area,
.header-style-two .main-header,
.header-style-two .navbar-wrap,
.header-style-two .menu-area,
.header-style-two .custom-container-two,
.header-style-two .row {
    background-color: transparent !important;
}

/* 顶部主导航、搜索、工具区一行布局 */
.header-style-two .main-header .custom-container-two {
    padding: 0 !important;
}

.header-style-two .header-left {
    width: 100%;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
}

.header-style-two .header-left .navbar-wrap.main-menu {
    flex: 0 0 auto !important;
}

.header-style-two .header-left .navbar-wrap.main-menu ul {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.header-style-two .header-left .navbar-wrap.main-menu ul li {
    display: inline-flex !important;
    align-items: center !important;
}

.header-style-two .header-left .category-area {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
    position: relative !important;
}

.header-style-two .header-left .category-toggle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 16px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    background: rgba(255,255,255,0.08) !important;
    color: #f7fbff !important;
    cursor: pointer !important;
    min-width: 140px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.header-style-two .header-left .category-toggle:hover {
    background: rgba(255,255,255,0.16) !important;
    border-color: rgba(255,255,255,0.28) !important;
}

.header-style-two .category-toggle .iconfont {
    font-size: 16px !important;
}

.header-style-two .category-dropdown {
    display: none !important;
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 0 !important;
    width: 280px !important;
    max-height: 360px !important;
    overflow: auto !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15) !important;
    z-index: 1000 !important;
}

.header-style-two .category-dropdown.visible {
    display: block !important;
}

.header-style-two .category-dropdown-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 10px 0 16px 0 !important;
    max-height: 320px !important;
    overflow-y: auto !important;
}

.header-style-two .category-dropdown-list li a:hover {
    color: var(--blue-dark) !important;
    background-color: rgba(11,102,204,0.06) !important;
}

.header-style-two .category-dropdown-header {
    padding: 16px 16px 10px 16px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #163b61 !important;
    border-bottom: 1px solid #f1f4f8 !important;
}

.header-style-two .category-dropdown-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 10px 0 16px 0 !important;
}

.header-style-two .category-dropdown-list li {
    padding: 0 16px !important;
}

.header-style-two .category-dropdown-list li a {
    display: block !important;
    padding: 10px 0 !important;
    color: #1f3c70 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    border-bottom: 1px solid #f1f4f8 !important;
}

.header-style-two .category-dropdown-list li:last-child a {
    border-bottom: none !important;
}

.header-style-two .header-left .inputw {
    flex: 1 1 360px !important;
    min-width: 320px !important;
}

.header-style-two .header-left .inputw .input2 {
    width: 100% !important;
    border-radius: 24px !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    padding: 10px 52px 10px 18px !important;
    background: rgba(255,255,255,0.12) !important;
    color: cornflowerblue !important;
}

.header-style-two .header-left .inputw .input2::placeholder,
.header-style-two .header-left .inputw .input2::-webkit-input-placeholder,
.header-style-two .header-left .inputw .input2:-ms-input-placeholder,
.header-style-two .header-left .inputw .input2::-ms-input-placeholder {
    color: cornflowerblue !important;
    opacity: 1 !important;
}

/* 中央固定功能导航（图3 红色1） */
.header-style-two .center-main-nav {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: 12px !important;
}
.header-style-two .center-main-nav .center-nav-list{
    display:flex !important;
    gap:22px !important;
    list-style:none !important;
    margin:0 !important;
    padding:0 !important;
}
.header-style-two .center-main-nav .center-nav-list li a{
    color: #f7fbff !important;
    padding: 10px 8px !important;
    display:inline-block !important;
    font-weight:600 !important;
}
.header-style-two .center-main-nav .center-nav-list li a:hover{
    color: #b8d7ff !important;
}

/* 侧边热门分类面板（图3 红色2） */
.home-side-categories{
    position: fixed !important;
    left: 20px !important;
    top: 90px !important;
    width: 220px !important;
    background: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
    z-index: 999 !important;
    padding: 12px !important;
}
.home-side-categories .hot-cats-title{
    font-size: 16px !important;
    color: var(--blue-primary) !important;
    font-weight: 600 !important;
    padding: 6px 8px !important;
}
.home-side-categories .hot-cats-list{margin: 8px 0 0 0; padding:0; list-style:none;}
.home-side-categories .hot-cat-item{position:relative; padding:8px 6px; cursor:pointer; border-radius:6px;}
.home-side-categories .hot-cat-link{color:#123a56; text-decoration:none; display:block;}
.home-side-categories .hot-cat-item:hover{background:#f6fbff}
.home-side-categories .subtags{display:none; position:absolute; left:100%; top:0; margin-left:12px; width:360px; background:#fff; border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,0.08); padding:12px; z-index:1000}
.home-side-categories .subtags .tag{display:inline-block; margin:6px 8px; background:var(--blue-light); color:var(--blue-dark); padding:4px 10px; border-radius:4px; font-size:13px}
.home-side-categories .hot-cat-item:hover .subtags{display:block}

@media (max-width: 1199px){
    .home-side-categories{display:none !important}
    .header-style-two .center-main-nav{position:static !important; transform:none !important; margin: 8px auto !important}
}

.header-style-two .header-left .inputw .button12 {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: none !important;
    width: auto !important;
    padding: 0 !important;
}

.header-style-two .header-left .inputw {
    position: relative !important;
}

.header-style-two .header-top-right ul {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.header-style-two .header-top-right ul li {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.header-style-two .header-top-right ul li a,
.header-style-two .header-top-right ul li div {
    color: #f7fbff !important;
}

.header-style-two .avatar-img {
    gap: 8px !important;
}

.header-style-two .avatar-img img {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
}

.header-style-two .inverted-triangle {
    width: 0 !important;
    height: 0 !important;
    border-left: 5px solid transparent !important;
    border-right: 5px solid transparent !important;
    border-top: 6px solid #fff !important;
}

.header-style-two .header-top-right ul li .icons {
    color: #f7fbff !important;
}

@media (max-width: 1199px) {
    .header-style-two .header-left {
        flex-wrap: wrap !important;
    }

    .header-style-two .header-left .inputw {
        width: 100% !important;
        min-width: 0 !important;
    }
}

@media (max-width: 767px) {
    .header-style-two .header-left {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .header-style-two .header-top-right {
        justify-content: flex-end !important;
    }
}

.header-style-two .navbar-wrap ul > li > a,
.header-style-two .navbar-wrap .submenu a,
.header-style-two .coming-text,
.header-style-two .header-top-right ul li a,
.header-style-two .header-top-right .icons,
.header-style-two .header-top-right ul li div,
.header-style-two .header-top-right ul li,
.header-style-two .main-header .menu-nav .button12 i {
    color: #f7fbff !important;
}

.header-style-two .navbar-wrap ul > li > a:hover,
.header-style-two .navbar-wrap .submenu a:hover,
.header-style-two .header-top-right ul li a:hover {
    color: #b8d7ff !important;
}

/* 顶部用户菜单与头像弹窗文字色 */
.header-style-two .header-top-right ul li a,
.header-style-two .header-top-right ul li div,
.header-style-two .header-top-right ul li span,
.header-style-two .header-top-right ul li i,
.header-style-two .header-top-right .icons {
    color: #f7fbff !important;
}

.header-style-two .header-top-right ul li a:hover,
.header-style-two .header-top-right .icons:hover {
    color: #b8d7ff !important;
}

/* 用户头像弹窗恢复白底、深色文字 */
.forms {
    background: #ffffff !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15) !important;
    border-radius: 12px !important;
    color: #333333 !important;
}

.forms .from,
.forms .frheader,
.forms .texts,
.forms .out,
.forms .out a,
.forms .centre,
.forms .centre div,
.forms .buyerCenter,
.forms .buyerCenter a,
.forms .easy,
.forms .easy a,
.forms .pending,
.forms .received,
.forms .personal {
    color: #000 !important;
}

.forms .out {
    border-color: #dcdfe6 !important;
    background: #ffffff !important;
}

.forms .out a {
    color: #000 !important;
}

.forms .centre {
    color: #000 !important;
}

.forms .buyerCenter a,
.forms .easy a {
    color: #000 !important;
}

.forms .received span,
.forms .pending span {
    color: #000 !important;
}

.forms .personal {
    background: #30c492 !important;
    color: #ffffff !important;
}

/* 优先覆盖一些深色按钮/背景，保持白蓝主题一致性 */
.bg-dark, .btn-dark{
    background-color: var(--bg-white) !important;
}

.header-style-two {
    background-color: #071d44 !important;
}

/* 保持对导航字体大小的覆盖（保底） */
.navbar-wrap ul > li > a, .navbar-wrap .submenu a{ font-size: 16px !important; }

/* 小屏幕适配：避免占位过大 */
@media (max-width:767px){
    .product-thumbnail, .product-thumb, .product-image{ border-radius:4px !important; }
}

/* 热销产品分类标签、产品名称和价格颜色 */
.catelist-a,
.catelist a,
.product-title a,
.product-price {
    color: #0ac1a4 !important;
}

/* 立即购买按钮样式 */
.hover .buy-btn {
    color: #fff !important;
    background: #0ac1a4 !important;
    border-color: #0ac1a4 !important;
}
.hover .buy-btn:hover,
.hover .buy-btn:hover a {
    color: #fff !important;
    background: #09a58a !important;
}

/* 查看更多按钮样式 */
.view-more {
    color: #0ac1a4 !important;
    border-color: #0ac1a4 !important;
    background: #fff !important;
    border: 1px solid #30c58f !important;
}

/* channel页面产品按钮样式 */
.sub-category-container .btn {
    color: #0ac1a4 !important;
    border: 1px solid #30c58f !important;
    background: transparent !important;
}

.sub-category-container .btn:hover,
.sub-category-container .btn a:hover {
    color: #0ac1a4 !important;
    border: 1px solid #3b82f6 !important;
    background: transparent !important;
}

/* channel页面view-more按钮hover */
.sub-category-container .view-more:hover,
.sub-category-container .view-more a:hover {
    color: #0ac1a4 !important;
    border: 1px solid #3b82f6 !important;
    background: #fff !important;
}

/* channel页面分类信息区域背景 */
.sub-category-container .category-info {
    background: #f7f8fa !important;
}

/* channel页面产品区域边框 */
.sub-category-container .product-wrap {
    border: 1px solid #f7f8fa !important;
}

/* 面包屑导航样式 */
.breadcrumb-area {
    height: 30px !important;
    padding: 0 !important;
    margin-top: 20px !important;
}

.breadcrumb-content {
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
}

.breadcrumb-content .breadcrumb {
    padding: 0 !important;
    margin-bottom: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
}

.breadcrumb-content .breadcrumb li,
.breadcrumb-content .breadcrumb li a {
    font-size: 16px !important;
    color: #3778e2 !important;
    padding: 0 !important;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: ">" !important;
    padding: 0 8px !important;
    color: #3778e2 !important;
    display: inline-block !important;
    height: auto !important;
    width: auto !important;
    background: transparent !important;
    border-radius: 0 !important;
    margin-right: 8px !important;
    margin-left: 8px !important;
}

/* ===== 结束新增样式 ===== */

/* 新品推荐和道尔顿严选模块样式 */
.sidebar-product-list .selection,
.related-product-active .selection {
    width: 226px !important;
    height: 310px !important;
    background: #fff !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .08) !important;
    box-sizing: border-box !important;
    margin-right: 21px !important;
    display: block !important;
    position: relative !important;
}

.sidebar-product-list .selection .name,
.sidebar-product-list .selection .specification,
.related-product-active .selection .name,
.related-product-active .selection .specification {
    color: #0ac1a4 !important;
}

.sidebar-product-list .selection .tag,
.related-product-active .selection .tag {
    color: #fff !important;
    background: #0ac1a4 !important;
    border-color: #0ac1a4 !important;
}

.sidebar-product-list .selection .cas,
.related-product-active .selection .cas {
    color: #666 !important;
}

.related-product-wrap {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    min-height: auto !important;
    height: 380px !important;
    overflow: hidden !important;
}

.product-reviews-wrap {
    margin-top: 20px !important;
    padding-top: 0 !important;
}

.related-product-wrap .row {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.related-product-active {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    height: auto !important;
}

.related-product-active .slick-track {
    height: auto !important;
    margin-bottom: 0 !important;
}

.cartlist-area .table thead th {
    border-bottom: 1px solid #bbb !important;
    border-top: 1px solid #bbb !important;
}

.cartlist-area .table td, .cartlist-area .table th {
    border-bottom: 1px solid #bbb !important;
}

/* 用户中心页面按钮样式 */
#content-container .el-button--primary,
#content-container .el-button.grid-button.el-button--primary,
#content-container .primary-bg-color {
    background-color: #fff !important;
    color: #0ac1a4 !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04) !important;
}