header .top{
    background-color: #ff6801;
    color: #fff;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直*/
    padding: 5px;
}
header .site-logo{
    width: 5vw;
    height: auto;
}

.navbar-box{
    margin-left: 30px;
    width: 60vw;
}

.navbar-box >ul {
    justify-content: left;
    height: 100%;
    list-style: none; /* 去掉原点 */
    margin: 0 0 0 20px;
    padding: 0;
    align-items: center;
    gap: 20px; /* 固定间隔 */
    display: flex; /* 让菜单项横向排列 */
    width: 100%;
}

.navbar-box li {

    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中，如果需要的话 */
   /* height: 100%;  占满父元素的高度 */

}

header .navbar-box a {
    font-family: "Poppins", sans-serif;
    text-decoration: none; /* 可选：去掉链接下划线 */
    font-size:0.7vw;
    font-weight: 500;
    text-transform: uppercase;
    color: #fff; /* 设置链接颜色 */
}
.default-header a{
    color: #000 !important;
}

.navbar-box li:last-child {
    margin-right: 0; /* 移除最后一个菜单项右边距 */
}
.account-button ,.cart-button{
    display: flex;
    justify-content: center;
}
.account-button{
    margin: 10px;
}
.cart-button img {
    vertical-align: middle;
}

.nav-menu a {
    display: block;
    padding: 0.5rem 1rem;
    text-decoration: none;
    color: #000;
}

/* 隐藏汉堡按钮 */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}
.main-navigation{
    display: none;
}
.menu-toggle .hamburger-icon {
    width: 30px;
    height: 30px;
    fill: none; /* 移除填充色 */
    stroke: red; /* 设置描边颜色 */
    stroke-width: 2; /* 设置线条粗细 */
    stroke-linecap: round; /* 圆角结束 */
}
/* .menu-toggle svg {
    width: 30px;
    height: 30px;
    fill: #000;
} */
#phone-menu{
    display: none;
}
@media (max-width: 1600px) {
    header .container{
        padding-right: 100px;
        padding-left: 100px;
        display: flex;
    }
    .whole-btn {
        border: none;
        height: 26px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgb(0, 0, 0,0);
    }
    .text {
        font-family: "Poppins", sans-serif;
        font-weight: 500;
        color: #ff6801;
        font-size: 12px;
    }
}
@media (min-width: 1600px) {
    header .container{
        padding-right: 14vw;
        padding-left: 14vw;
        display: flex;
    }
}
@media (min-width: 768px) {
    .text {
        font-family: "Poppins", sans-serif;
        font-weight: 300;
        color: #fff;
        font-size: 12px;
    }
    .whole-btn {
        border: none;
        margin-right: 5px;
        width: 10em;
        height: 26px;
        border-radius: 2em;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        background: #ff6801 linear-gradient(180deg, #ff6801 0%, #ff6801 70%);
        cursor: pointer;
        transition: all 450ms ease-in-out;
    }
    .account-contents,.cart-contents{
        display: flex;
        justify-content: center;
    }
    .site-right{
        margin-left: auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    header .name{
        padding-left: 20px;
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直*/
    }
    .default-header .container{
        background-color: #ffffff !important;
        color: #000!important;;
    }
    /*
子菜单样式
*/
  .sub-menu {
    position: absolute;
    display: none ;
    top: 100%;
    left: 0;
      padding-top: 20px;
    color: #000;
    background-color: #ffffff;
    z-index: 1000;
    border-radius: 0 0 10px 10px;
    min-width: 250px; /* 确保子菜单有足够的宽度 */
    list-style-type: none;
  }

  .sub-menu li {
    width: 100%;
    white-space: nowrap;
    border-radius: 10px;
    margin-right: 0px !important;
  }
  /* .sub-menu li:hover {
    background-color: #aaa
  } */

.sub-menu a {
    padding: 10px 20px;
    display: block; /* 确保子菜单项显示为块级元素 */
    text-decoration: none;
    color: #000 !important;
}
.navbar-nav li:hover > .sub-menu {
    display: block ;
}
}
/* 响应式样式 *


/* 固定 header 在顶部 */
.container.fixed {
    position: fixed;
    top: 0px;
    width: 100%;
    background-color: #ffffff !important;;
    z-index: 1000;
    transition: box-shadow 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* 确保内容不会被固定的 container 遮挡 */
.container.scrolled .navbar-box a {
    color: #111111;
}
.popup.scrolled {
    top: 84px;
}
.container {
    background-color: transparent !important;
    transition: none !important;
    display: flex;
    width: 100%;
    height: 50px;
    background: #ffffff;
}
#primary-menu{
    width: 50%;
}
.phone-close-button{
    width: 30%;
    padding-top: 20px;
    text-align: right;
    padding-left: 20px;
}


/* 可选：添加导航栏样式 */
.navbar-nav {
    list-style: none; /* 移除原点 */
    padding: 0;
    margin: 0;
    width: 100%;
}

.navbar-nav li {
    white-space: nowrap;
    display: flex;
    align-items: center; /* 垂直居中 */
    position: relative;
    text-align: right;
}
.sub-menu li{
    display: flex;
    justify-content: flex-start;
}

.navbar-nav a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #000;
}

.navbar-nav a:hover {
    background-color: #f0f0f0;
}

.gtranslate_wrapper{
    display: flex !important;
    align-items: center !important;
    padding-right: 10px !important;
}
.gt_switcher{
    width: 89px !important;

    border-radius:16px !important;
    :is(img) {
        width: 18px !important;
        height: 18px !important;
    }

}
 .gt_selected a {
     font-size: 8px !important;
     width: 80px !important;
     color: white !important;
    border: none !important;

}
.gt_switcher .gt_option {
    position: absolute !important;
}
#nav-bar li >a {
    background: transparent;
    position: relative; /* 使伪元素相对于a标签定位 */
    text-decoration: none;
    display: inline-block;
    overflow: hidden; /* 确保伪元素不会溢出 */
}

#menu-example li a:hover {
    background-color: transparent !important;
    /* 使用边框来创建下划线效果 */
    border-bottom: 3px solid #eb7345; /* 你可以设置为你想要的颜色 */
    /* 如果需要，调整元素的padding或margin以适应新的下划线 */
    padding-bottom: 2px; /* 根据实际情况调整 */
}
/* 伪元素初始状态 */
#nav-bar li >a::after {
    background-color: transparent !important;
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px; /* 下划线的高度 */
    border-bottom: 3px solid #eb7345; /* 下划线的颜色 */
    transition: width 0.5s ease, left 0.5s ease; /* 动画效果 */
    transform: translateX(-50%); /* 初始位置居中 */
}

/* 鼠标悬停时的状态 */
#nav-bar li >a:hover::after {
    background-color: transparent !important;
    width: 100%; /* 完全宽度 */
    left: 0; /* 左对齐 */
    transform: translateX(0); /* 移动到最终位置 */
}
.phone-menu >.icon{
    padding-top: 12px;
}
.phone-menu-icon{
    padding-top: 12px;
    position: absolute;
}
.navbar-phone{
    padding-top: 10px;
}
.phone-a{
        height: 60px;
}
.popup {
    text-transform: uppercase;
     display: none;
    position: fixed;
    width: 100%;
    z-index: 99999;
}

/* 弹窗内容框样式 */
.popup-content {
    background-color: white;
    padding: 0 14vw 0 14vw;
    height: 30vh;
    border-radius: 10px;
    display: flex;
}
.product-item-pop.active {
    color: #000; /* 变色后的颜色 */
    text-decoration: underline;
    text-decoration-thickness: 2px;
    font-weight: 500;
}
.popup-brand-name{
   width: 40vw;

}
#popup-product-url{
    width: 30vw;
    display: block;

    :is(img) {
        margin-top: 5px;
        width: 100%;
        height: auto;
        border-radius: 5px;
    }
}

#cool-ul{
    display: none;
    width: 50%;
}
#feemo-ul{
    width: 100%;
}
.popup-product-name{
    width: 30vw;
    ul li{
        padding: 10px 20px 10px 20px;
        color: #cccccc;
        font-family: "Poppins", sans-serif;
    }
}


#coolmountain-ul{
    display: none;
}
.product-url{
    width: 100%;
}
/* 关闭按钮样式 */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.header-product-image{
    width: 200px;
    height: 200px;
}
.header-product-item{
    padding: 25px;
}
.products{
    padding-left: 50px;
    padding-right: 50px;
}
.header-product-title{
    text-align: center;
    font-size: 15px;
    font-weight: 400;
    color: #000;
    text-decoration: none;
}
.header-product-a{
    text-decoration: none;
}

.phone-navbar-nav a{
    color: #888;
    text-decoration: none;
    padding-bottom: 10px;
}
.phone-navbar-nav{
    margin: 0;
    padding: 0;
}




/* header.css */
/* From Uiverse.io by satyamchaudharydev */
/* === removing default button style ===*/
.feemo-button {
    margin: 0;
    height: auto;
    background: transparent;
    padding: 0;
    border: none;
    cursor: pointer;
}

/* button styling */
.feemo-button {
    --border-right: 6px;
    --animation-color: #fdf9fa;
    --fs-size: 2em;
    color: #000;
    letter-spacing: 3px;
    text-decoration: none;
    font-size: var(--fs-size);
    font-family: "Wittgenstein", serif;
    position: relative;
    text-transform: uppercase;
    background-color:#fff;
}
/* this is the text, when you hover on button */
.feemo-hover-text {
    position: absolute;
    box-sizing: border-box;
    background-color: var(--animation-color);
    width: 0%;
    inset: 0;
    border-right: var(--border-right) solid var(--animation-color);
    overflow: hidden;
    transition: 0.5s;
    color: #000;
}

/* hover */
.feemo-button:hover .feemo-hover-text {
    width: 100%;
    filter: drop-shadow(0 0 46px var(--animation-color))
}

.keep-hover-style {
    width: 100% !important;
    filter: drop-shadow(0 0 46px var(--animation-color)) !important;
}


.cool-button {
    margin: 0;
    height: auto;
    background: transparent;
    padding: 0;
    border: none;
    cursor: pointer;
}

/* button styling */
.cool-button {
    --border-right: 6px;
    --text-stroke-color: rgba(255,255,255,0.6);
    --animation-color: #37FF8B;
    --fs-size: 2em;
    letter-spacing: 3px;
    text-decoration: none;
    font-size: var(--fs-size);
    font-family: "Wittgenstein", serif;
    position: relative;
    text-transform: uppercase;
    color:#000;
    -webkit-text-stroke: 1px var(--text-stroke-color);
}
/* this is the text, when you hover on button */
.cool-hover-text {
    position: absolute;
    box-sizing: border-box;
    content: attr(data-text);
    color: var(--animation-color);
    width: 0%;
    inset: 0;
    border-right: var(--border-right) solid var(--animation-color);
    overflow: hidden;
    transition: 0.5s;
    -webkit-text-stroke: 1px var(--animation-color);
}

/* hover */
.cool-button:hover .cool-hover-text {
    width: 100%;
    filter: drop-shadow(0 0 46px var(--animation-color))
}

.cool-hover-style {
    width: 100% !important;
    filter: drop-shadow(0 0 46px var(--animation-color)) !important;
}


/* 基础样式 */
.animated-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.animated-list li {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.animated-li {
    background-color: white; /* 初始背景色为白色 */
    color: black; /* 文字颜色 */
    width: 300px;
    height: 8vh;
    position: relative; /* 相对定位 */
    overflow: hidden; /* 隐藏超出范围的内容 */
    animation: slideIn 1s forwards; /* 应用动画，持续2秒，完成后保持最终状态 */
    transition: background-color 1s ease; /* 添加背景颜色过渡效果 */
}
.animated-list li::after {
    content: '';
    position: absolute;
    left: 33%; /* 左侧 1/4 不显示边框 */
    right: 0; /* 右侧到末尾 */
    bottom: 0; /* 放置在底部 */
    height: 1px; /* 边框高度 */
    background: #dedddd; /* 边框颜色 */
}
/* 动画效果：从左到右的覆盖 */
.animated-li::before {
    content: ''; /* 必须定义内容 */
    position: absolute;
    top: 0;
    left: -100%; /* 初始位置在左边外 */
    width: 100%;
    height: 100%;
    display: flex;
    background-color: #fdf9fa; /* 覆盖的颜色 */
    transition: left 1s ease-in-out; /* 缓慢过渡效果，持续时间为2秒 */
    z-index: -1; /* 放置在内容后面 */
}

/* 鼠标悬停时移动覆盖层 */
.animated-li:hover::before {
    left:0; /* 移动到完整覆盖 */
}

/* 如果需要在悬停时也改变背景颜色（可选） */
.animated-li:hover {
    animation: slideIn 1s forwards; /* 应用动画，持续2秒，完成后保持最终状态 */
}

@keyframes slideIn {
    from {
        transform: translateX(-100%); /* 从左侧开始 */
        opacity: 0; /* 开始时完全透明 */
    }
    to {
        transform: translateX(0); /* 移动到原位 */
        opacity: 1; /* 完全不透明 */
    }
}
.slide-in {
    animation: slideIn 0.5s ease-in-out forwards; /* 动画持续时间为 0.5 秒 */
}
.feemo-li,.cool-li{
    font-weight: 500;
    font-size: 16px;
    font-family: "Poppins", sans-serif;
    padding-left: 165px;
    justify-content: center;
    text-align: left;
}
.feemo-first{
    background-color: #fdf9fa;
}
#feemo-svg,#cool-svg{
    margin-right: 20px;
}
.feemo-icon{
    animation: slideIn 1s forwards;
}
.hidden {
    display: none; /* 初始隐藏 */
}

/* 显示状态 */
.visible {
    display: block; /* 显示元素 */
}
.gt_container-rkedxg{
    padding-right: 30px;
}

/* From Uiverse.io by AlimurtuzaCodes */


.sparkle {
    fill: #ffffff;
    transition: all 800ms ease;
}



.whole-btn:hover {
    background: linear-gradient(0deg,#A47CF3,#683FEA);
    transform: translateY(-2px);
}

.whole-btn:hover .text {
    color: white;
}

.whole-btn:hover .sparkle {
    fill: white;
    transform: scale(1.2);
}
.label {
    position: relative;
    bottom: 10px;
    text-decoration: none !important;
    color: red;
    padding: 15px 0 0 0;
    font-size: 12px;
    border-radius: 5px;
    transform: translate(50%, -50%);
}