/* 页面顶部滚动公告 */
.announcement-bar-container {
  background-color: #000;
  color: #fff;
  padding: 8px 0;
  text-align: center;
  overflow: hidden;
  width: 100%;
  position: relative;
}

.announcement-bar-slider {
  display: flex;
  transition: transform 0.5s ease;
}

.announcement-bar-slide {
  flex: 0 0 100%;
  padding: 0 15px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.announcement-text {
  font-size: 15px;
  font-weight: 600;
}

.announcement-link-text {
  font-size: 13px;
  opacity: 0.85;
}

/* 整个插件的样式 */
.yith-wfbt-section {
    border: 1px solid #ddd; /* 边框 */
    border-radius: 8px; /* 圆角 */
    padding: 20px; /* 内边距 */
    background-color: #f9f9f9; /* 背景颜色 */
    margin: 20px 0; /* 外边距 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

/* 标题样式 */
.yith-wfbt-section h2 {
    border-bottom: 2px solid #007cba; /* 边框 */
    padding-bottom: 10px; /* 内边距 */
    color: #333; /* 字体颜色 */
}

/* 附加文本样式 */
.additional-text {
    font-style: italic; /* 斜体 */
    color: #666; /* 字体颜色 */
}

/* 图片样式 */
.yith-wfbt-images .image-td {
    text-align: center; /* 中心对齐 */
}

.yith-wfbt-images img {
    border-radius: 5px; /* 圆角 */
    transition: transform 0.3s; /* 动画效果 */
}

.yith-wfbt-images img:hover {
    transform: scale(1.05); /* 鼠标悬停放大效果 */
}

/* 提交按钮样式 */
.yith-wfbt-submit-button {
    background-color: #007cba; /* 按钮背景颜色 */
    color: #fff; /* 按钮字体颜色 */
    border: none; /* 去掉边框 */
    padding: 10px 20px; /* 内边距 */
    border-radius: 5px; /* 圆角 */
    cursor: pointer; /* 鼠标指针 */
    transition: background-color 0.3s; /* 动画效果 */
}

.yith-wfbt-submit-button:hover {
    background-color: #005f8a; /* 鼠标悬停时的背景颜色 */
}

/* 移动端样式 */
@media (max-width: 999.98px) {
    .yith-wfbt-section {
        padding: 15px; /* 内边距 */
    }

    .yith-wfbt-images {
        display: flex; /* 使用 flexbox */
        flex-wrap: wrap; /* 换行 */
        justify-content: center; /* 居中对齐 */
    }

    .yith-wfbt-images .image-td {
        flex: 1 1 45%; /* 每个图片占据45%宽度 */
        margin: 5px; /* 外边距 */
    }

    .yith-wfbt-submit-button {
        width: 100%; /* 按钮宽度100% */
    }
}

/* 移动端样式 */
@media (max-width: 999.98px) {
  .announcement-bar-slide {
    flex-direction: column;
    padding: 5px 15px;
    gap: 2px;
  }
  
  .announcement-text {
    font-size: 14px;
  }
  
  .announcement-link-text {
    font-size: 12px;
  }
}

/* 产品标签菜单样式 - 主要用于PC端 */
.product-tag-menu-container {
    width: 100%;
    padding: 10px;
}

.mega-menu-tags-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
    margin-top: 0;
}

.mega-menu-category {
    flex: 0 0 auto;
    padding: 0 20px;
    margin-bottom: 10px;
    min-width: 150px;
    max-width: 380px;
}

.mega-menu-category h4 {
    font-size: 16px;
    margin-top: 0;
    margin-bottom: 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
}

.mega-menu-tag-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mega-menu-tag-list li {
    margin-bottom: 5px;
}

.mega-menu-tag-list a {
    color: #666;
    text-decoration: none;
    font-size: 16px;
    transition: color 0.2s;
}

.mega-menu-tag-list a:hover {
    color: #000;
}

/* Blocksy 菜单集成样式 */
.ct-mega-menu-content .product-tag-menu-container {
    padding: 0;
}

/* 预加载内容容器 */
.prerendered-content {
    display: none;
}

@media (min-width: 999.99px) {
 #offcanvas {
     display: none;
 }
}

/* =============== 移动端特定样式 =============== */
@media (max-width: 999.98px) {
    
    /* Blocksy主题侧边栏菜单样式适配 */
    .ct-panel-content-inner {
        padding:10px 5px;
    }
    .ct-header-text {
        width:100%;
    }
    /* 子菜单样式 */
    .ct-panel .submenu {
        background: #f9f9f9; /* 更浅的背景色 */
        border-radius: 4px;   /* 轻微的圆角 */
    }
    /* Mega菜单样式调整 */
    .ct-panel .mobile-mega-menu-wrapper {
        margin-top: -25px;
        margin-bottom:-25px;
    }
    
    /* 菜单容器样式 */
    .simple-menu-container {
        display: block;
        position: fixed;
        top: 0;
        left: -85%;
        width: 85%;
        height: 100%;
        background: #fff;
        z-index: 999999;
        overflow-y: auto;
        transition: left 0.3s ease;
        box-shadow: 0 0 10px rgba(0,0,0,0.2);
    }

    .simple-menu-container.active {
        left: 0;
    }

    /* 菜单头部 */
    .menu-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px;
        border-bottom: 1px solid #eee;
        background: #f9f9f9;
    }

    .site-branding {
        display: flex;
        align-items: center;
    }

    .site-branding img {
        margin-right: 8px;
        max-height: 30px;
        width: auto;
    }

    .close-menu {
        background: none;
        border: none;
        font-size: 24px;
        color: #333;
        cursor: pointer;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 菜单内容 */
    .menu-content {
        padding: 0;
    }

    .menu-items, .submenu {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .menu-item, .submenu-item {
        border-bottom: 1px solid #f0f0f0;
        position: relative;
    }

    .menu-item:last-child, .submenu-item:last-child {
        border-bottom: none;
    }

    .menu-item a {
        font-weight: 500;
    }
    /* 激活状态 */
    .ct-panel .menu-item.active > a {
        font-weight: 500;
    }
        
    .menu-item a, .submenu-item a {
        display: block;
        padding: 15px;
        color: #333;
        text-decoration: none;
        font-size: 15px;
    }

    .submenu-toggle {
        position: absolute;
        right: 5px;
        top: 8px;
        width: 30px;
        height: 30px;
        background: none;
        border: none;
        font-size: 20px;
        color: #777;
        cursor: pointer;
    }

    /* 子菜单 */
    .submenu {
        display: none;
        background: #f9f9f9;
    }

    .submenu-item a {
        padding: 12px 15px 12px 30px;
        font-size: 14px;
    }

    /* 打开的菜单样式 */
    .menu-item.active > a, .submenu-item.active > a {
        font-weight: bold;
    }

    .menu-item.active > .submenu-toggle, .submenu-item.active > .submenu-toggle {
        transform: none;
    }

    /* Mega菜单样式 */
    .mega-menu-item .submenu {
        padding: 10px 0;
    }

    .mega-menu-content {
        list-style: none;
    }

    /* 菜单标题样式（非链接标题) */
    .menu-item.is-mega-menu .menu-title {
        display: block;
        padding: 15px;
        color: #333;
        font-size: 15px;
        font-weight: 600;
        background-color: #f5f5f5;
    }

    /* 隐藏Tag-Category标题 */
    .mobile-hidden-title > a,
    .mobile-hidden-title > span.menu-title {
        display: none !important;
    }
    
    /* 让Tag-Category的子菜单直接显示 */
    .mobile-hidden-title > .submenu-toggle {
        display: none !important;
    }
    
    /* 让Tag-Category的子菜单内容在一级展开 */
    .mobile-hidden-title > .submenu {
        display: block !important;
        padding-left: 0 !important;
    }
    
    /* 将mega菜单中的分类标题作为二级菜单 */
    .mega-menu-tags-container {
        flex-direction: column;
        flex-wrap: wrap;
    }
    
    .mega-menu-category {
        width: 100%;
        max-width: none;
        padding: 0;
        margin-bottom: 10px;
        flex: 1 0 100%;
    }

    .mega-menu-category.no-border h4 {
        border-bottom: none;
        margin-bottom: 0;
    }

    /* 二级菜单标题前加 ➤ 符号 */
    .mobile-mega-menu-wrapper .mega-menu-category h4:before,ul.menu-items li.menu-item.has-children ul.submenu .menu-item.has-children > a::before {
        content: "⯈";
        margin-right: 6px;
        color: #999;
        font-size: 12px;
        position: relative;
        left: -6px;
    }

    ul.submenu li.menu-item .has-children a {
        font-weight: 300; /* 更轻的字体 */
        padding-left: 15px; /* 左侧缩进 */
        font-size: 15px; /* 稍微小一点的字体大小 */
    }
    /* 如果有更深层次的子菜单，可以进一步增加缩进 */
    ul.submenu ul.submenu li.menu-item a {
        padding-left: 25px; /* 更多的左侧缩进 */
        font-weight: 300; /* 保持轻量字体 */
    }

    /* h4 是 flex 容器，统一结构 */
    .mobile-mega-menu-wrapper .mega-menu-category h4 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 15px;
        margin: 0;
        padding: 10px 15px;
        position: relative;
        cursor: pointer;
        font-weight: normal;
    }
    
    /* 标题内部的文本容器（a 或 span）统一样式 */
    .mobile-mega-menu-wrapper .mega-menu-category .menu-heading,.mobile-mega-menu-wrapper .mega-menu-category a {
        flex: 1;
        color: inherit;
        text-decoration: none;
        display: block;
        margin: 0;
        padding: 0;
        line-height: 1.4;
    }

    /* 添加展开/折叠指示器 */
    .mobile-mega-menu-wrapper .mega-menu-category h4:after {
        content: '+';
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
    }
    
    .mobile-mega-menu-wrapper .mega-menu-category.expanded h4:after {
        content: '-';
    }
    
    /* 默认隐藏子菜单列表 */
    .mobile-mega-menu-wrapper .mega-menu-tag-list {
        display: none;
        padding-left: 15px;
    }
    
    /* 展开时显示 */
    .mobile-mega-menu-wrapper .mega-menu-category.expanded .mega-menu-tag-list {
        display: block;
    }
    
    /* 子菜单项样式 */
    .mobile-mega-menu-wrapper .mega-menu-tag-list li a {
        padding: 8px 15px;
        display: block;
        font-size: 14px;
        font-weight: 300;
    }
}