/*
 Theme Name:   Gomax Child
 Theme URI:    http://example.com/gomax-child/
 Description:  Gomax Child Theme
 Author:       Your Name
 Author URI:   http://example.com
 Template:     gomax
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  gomax-child
*/

/* ==========================================================================
   Mobile Black Blank容器的宽度
   ========================================================================== */

/* 基础样式 */
.mobile-black-blank {
    max-width: 1400px !important;
    margin: 0px !important;
    padding: 0px !important;
    height: 40px !important;
    background-color: #000000;
}

/* ==========================================================================
   Hero Slider 容器的宽度
   ========================================================================== */

/* 桌面端基础样式 - 实现全宽效果 */
.hero-slider-container {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
}

/* 手机端样式 - 修正版 */
@media (max-width: 768px) {
    .hero-slider-container {
        /* 重置桌面端的全宽样式 */
        width: 100% !important;
        max-width: 100% !important; /* 确保容器不会超出屏幕 */
        position: static;
        left: auto;
        transform: none;
        
        /* 移除我们之前添加的内边距(padding)，让Elementor和插件自行处理间距 */
        /* 这是解决显示不全问题的关键 */
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ==========================================================================
   Icon Box 容器的宽度
   ========================================================================== */

/* --- 桌面端样式 --- */

/* 1. 设置包含5个Icon Box的容器 */
.e-con.icon-box-container {
  display: flex; /* 启用Flex布局 */
  /* 关键改动：将 justify-content 从 center 改为 space-between */
  justify-content: space-between; 
  flex-wrap: wrap; /* 保险措施：如果屏幕实在太窄，允许换行 */
  max-width: 1400px; /* 容器的最大宽度 */
  margin: 0 auto; /* 让容器本身在页面上居中 */
  /* 注意：gap 属性可以移除，因为 space-between 会自动计算间距。
     如果希望在自动计算的间距之外再增加最小间距，可以保留它，但通常是不必要的。*/
}

/* 2. 设置桌面端的每一个Icon Box */
.e-con.icon-box-container .elementor-widget-icon-box {
  width: 220px; /* 设置一个固定的宽度 */
  /* 您还可以在这里添加一个固定的高度 */
  height: 100px; /* 示例：您可以根据需要设置一个固定的高度 */
  flex-shrink: 0; /* 防止Icon Box在空间不足时被压缩变形 */
}


/* --- 平板和手机端样式 (屏幕宽度 <= 1024px) --- */
/* (移动端代码保持不变，符合响应式设计的需求) */
@media (max-width: 1024px) {

  /* 3. 设置移动端的容器 */
  .e-con.icon-box-container {
    flex-direction: column; /* 关键：将排列方向从水平改为垂直 */
    align-items: center; /* 在垂直布局下，此属性可将项目水平居中 */
  }

  /* 4. 设置移动端的每一个Icon Box */
  .e-con.icon-box-container .elementor-widget-icon-box {
    width: 90%; /* 让宽度占屏幕的90%，看起来很饱满 */
    max-width: 450px; /* 在平板上，限制一个最大宽度，防止拉得太宽 */
    margin-bottom: 20px; /* 在垂直排列时，增加一些底部间距 */
  }

  /* 最后一个元素在移动端不需要底部间距 */
  .e-con.icon-box-container .elementor-widget-icon-box:last-child {
      margin-bottom: 0;
  }
}

/* ==========================================================================
   产品容器的宽度
   ========================================================================== */

/* 基础样式 */
.products-container {
    max-width: 1400px !important;
    margin-top: 60px !important;
    margin-bottom: 60px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 60px !important;
    box-sizing: border-box !important;
    background-color: #000000;
}

/* 平板端 */
@media (max-width: 1024px) {
    .products-container {
        max-width: 95% !important;
        padding: 40px !important;
    }
}

/* 手机端 */
@media (max-width: 768px) {
    .products-container {
        max-width: 98% !important;
        padding: 30px 20px !important;
    }
}

/* ==========================================================================
   产品容器左上角渐变边框角
   ========================================================================== */

.featured-container::before {
    content: '';
    position: absolute;
    z-index: 2;
    top: -1;
    left: -1;
    box-sizing: border-box;
    width: 200px;
    height: 200px;
    
    /* 定义可见的边框 */
    border-top: 4px solid;
    border-left: 4px solid;
    
    /* 
     * 关键修正: 明确禁用不需要的边框
     * 这会覆盖掉 Elementor 的默认样式，从而移除右边和下边的边框。
    */
    border-right: none;
    border-bottom: none;
    
    /* 边框渐变色 */
    border-image-slice: 1;
    border-image-source: linear-gradient(45deg, #ef008e, #00b3ff);
}


/* ==========================================================================
   Product Grid 自定义CSS - 暗黑模式
   ========================================================================== */

.dark-product-grid-style {
    /* -- 定义颜色变量 -- */
    --themeasy-primary-bg-color:      #000000;
    --themeasy-secondary-bg-color:    transparent;
    --themeasy-primary-border-color:  #2c2e33;
    --themeasy-secondary-border-color:#4a4a4a;
    --themeasy-primary-text-color:    #a9aec3;
    --themeasy-secondary-text-color:  #ffffff;
    --themeasy-link-color:            #61afef;
    --themeasy-link-hover-color:      #ffffff;
    
    /* 应用基础样式 */
    background-color: var(--themeasy-primary-bg-color);
    color: var(--themeasy-primary-text-color);
}

/* --- 暗黑模式下的具体元素样式 --- */
.dark-product-grid-style .product {
    background-color: transparent !important;
    border: none !important;
    transition: transform 0.3s ease; 
}
.dark-product-grid-style .product:hover {
    transform: translateY(-8px);
}
.dark-product-grid-style .product .woocommerce-loop-product__title,
.dark-product-grid-style .product .woocommerce-loop-product__title a {
    color: #FFFFFF !important;
    transition: color 0.3s ease;
}
.dark-product-grid-style .product:hover .woocommerce-loop-product__title,
.dark-product-grid-style .product:hover .woocommerce-loop-product__title a {
    color: var(--themeasy-link-hover-color) !important;
}
.dark-product-grid-style .product .price {
    color: var(--themeasy-primary-text-color) !important;
}
.dark-product-grid-style .product .price ins {
    color: var(--themeasy-secondary-text-color) !important;
    background: none;
    text-decoration: none;
}
.dark-product-grid-style .product .price del {
    opacity: 0.5;
}
.dark-product-grid-style .product .product-button a.button {
    background-color: var(--themeasy-secondary-border-color) !important;
    color: #ffffff !important;
    border: none !important;
    transition: all 0.3s ease;
}
.dark-product-grid-style .product:hover .product-button a.button {
    background-color: #ffffff !important;
    color: #000000 !important;
}
.dark-product-grid-style .product .product-action {
    background: none !important;
    border: none !important;
}
.dark-product-grid-style .product .product-action .icon-wrapper {
    background-color: #000000 !important;
    border: 1px solid var(--themeasy-secondary-border-color) !important;
}
.dark-product-grid-style .product .product-action .icon {
    color: #ffffff !important;
    stroke: #ffffff !important;
}
.dark-product-grid-style .product .product-action:hover .icon-wrapper {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
}
.dark-product-grid-style .product .product-action:hover .icon {
    color: #000000 !important;
    stroke: #000000 !important;
}
.dark-product-grid-style .product .tms-vsw-label-option {
    border: 1px solid var(--themeasy-primary-border-color) !important;
    color: var(--themeasy-primary-text-color) !important;
    background-color: transparent !important;
    transition: all 0.3s ease;
}
.dark-product-grid-style .product .tms-vsw-label-option:not(.tms-vsw-selected-swatch):hover {
    border-color: #ffffff !important;
    color: #ffffff !important;
}
.dark-product-grid-style .product .tms-vsw-selected-swatch,
.dark-product-grid-style .product .tms-vsw-selected-swatch:hover {
    background-color: #000000 !important;
    border: 1px solid #ffffff !important;
    color: #ffffff !important;
}

/* ==========================================================================
   分类容器的背景--父容器
   ========================================================================== */

/* --- 桌面端默认样式 --- */
.category-container {
    /* 明确设置宽度为100%，作为一道保险 */
    width: 100%;

    /* 1. 设置底色 (整个画布) */
    background-color: #000000;

    /* 2. 创建一个纯色的“渐变”作为我们的条带 */
    background-image: linear-gradient(#1D1D1D, #1D1D1D);

    /* 3. 确保条带不重复平铺 */
    background-repeat: no-repeat;

    /* 4. 定义条带的尺寸 (桌面端：高度占80%) */
    background-size: 100% 80%;

    /* 5. 定义条带的位置 (桌面端：垂直居中) */
    background-position: center center;
}


/* ==========================================================================
   分类容器的内图片和文字布局--子容器--图片在左
   ========================================================================== */

/* 桌面端布局 */
.category-title-container-left {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important; /* 这个属性会把第一个和最后一个元素推到两端，中间的元素居中 */
    align-items: center !important;
    gap: 30px !important;
}

/* 覆盖 Elementor 的 widget 宽度行为 */
.category-title-container-left > .elementor-widget-width-auto {
    flex-grow: 0 !important;
    flex-shrink: 1 !important;
}

/* 第一个元素 Image */
.category-title-container-left > *:nth-child(1) {
    flex: 0 0 200px !important; /* 不放大，不缩小，基础宽度 200px */
    max-width: 200px !important;
}

/* 第二个元素 Text Intro 1 */
.category-title-container-left > *:nth-child(2) {
    flex-grow: 0; /* 不需要它去占据额外空间 */
    flex-shrink: 1; /* 允许它在空间不足时被压缩 */
    max-width: 600px !important;
    text-align: center; /* 建议让中间的文字也居中对齐 */
    padding-top: 30px !important;
}

/* 第三个元素 Text Intro 2 */
.category-title-container-left > *:nth-child(3) {
    flex: 0 0 auto !important; /* 不放大，不缩小，宽度由内容决定 */
    max-width: 500px !important;
}


/* ==========================================================================
   分类容器的内图片和文字布局--子容器--图片在右
   ========================================================================== */

/* 桌面端布局 */
.category-title-container-right {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 8px 0 !important; 
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 30px !important;
}

.category-title-container-right h1.title {
    padding-left: 0 !important;
}

.category-title-container-right > .elementor-widget-width-auto {
    flex-grow: 0 !important;
    flex-shrink: 1 !important;
}

.category-title-container-right > *:nth-child(1) {
    flex: 0 0 500px !important;
    max-width: 500px !important;
}

.category-title-container-right > *:nth-child(2) {
    flex-grow: 0;
    flex-shrink: 1;
    max-width: 600px !important;
    text-align: center;
    padding-top: 30px !important;
}

.category-title-container-right > *:nth-child(3) {
    flex: 0 0 auto !important;
    max-width: 200px !important;
}


/* ===================================================================
 自定义全局面包屑样式 (最终版)
===================================================================
 描述: 本代码旨在统一由Elementor Header模板输出的Rank Math面包屑
       在全站（包括Shop页面和单一产品页面）的视觉样式。
===================================================================*/

/* 1. 强制隐藏【单一产品页面】上由主题输出的多余面包屑 */
body.single-product #breadcrumb.breadcrumb-nav {
    display: none !important;
}

/* 2. 定义面包屑的【基础布局和边框】样式 */
/* 我们使用Header的ID作为前缀，来确保这些规则有足够高的优先级 */
#themeasy-gs-header-24250 .rank-math-breadcrumb {
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #4a4a4a;
    font-size: 14px;
}

#themeasy-gs-header-24250 .rank-math-breadcrumb p {
    margin: 0;
    padding: 0;
    line-height: 1;
}

/* 3. 【核心】为面包屑的文字和链接【强制设定】统一的颜色 */
/* 无论在哪种页面，都使用这套颜色，覆盖掉所有继承来的样式 */

/* (A) 面包屑中的链接 (例如 "Home", "Accessories") */
#themeasy-gs-header-24250 .rank-math-breadcrumb a {
    color: #FFFFFF !important; /* 强制设为白色 */
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* (B) 链接的悬停效果 */
#themeasy-gs-header-24250 .rank-math-breadcrumb a:hover {
    opacity: 0.8;
}

/* (C) 当前页面项 (例如 "Jeans Toiletry Bag", "Shop") */
#themeasy-gs-header-24250 .rank-math-breadcrumb .last {
    color: #a9aec3 !important; /* 强制设为亮灰色 */
    font-weight: 600;
    font-style: italic;
}

/* (D) 分隔符 */
#themeasy-gs-header-24250 .rank-math-breadcrumb .separator {
    color: #4a4a4a;
    font-style: normal;
    margin: 0 0.5rem;
}


/* 4. 定义面包屑在【移动端】的响应式样式 */
@media (max-width: 991px) {
    #themeasy-gs-header-24250 .rank-math-breadcrumb {
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 15px;
    }

    #themeasy-gs-header-24250 .rank-math-breadcrumb::-webkit-scrollbar {
        height: 6px;
        background-color: transparent;
    }

    #themeasy-gs-header-24250 .rank-math-breadcrumb::-webkit-scrollbar-thumb {
        background-color: #4a4a4a;
    }

    #themeasy-gs-header-24250 .rank-math-breadcrumb p {
        flex-wrap: nowrap;
        white-space: nowrap;
    }
    
    #themeasy-gs-header-24250 .rank-math-breadcrumb p > * {
        font-size: 85%;
    }
}


/* 
仅为 Page ID 为 11 的页面添加顶部内边距 
*/
body.page-id-11 main#main.main-section {
    padding-top: 120px; /* 这个数值约等于您黑色页眉的高度，请根据需要调整 */
    padding-left: 20px;  /* 增加左边距 */
    padding-right: 20px; /* 增加右边距 */
}

/* 
===================================================================
 为所有博客文章详情页添加顶部内边距
===================================================================
 描述: 调整博客文章内容与顶部黑色 Header 之间的距离。
===================================================================
*/
body.single-post main#main.main-section {
    padding-top: 120px; /* 这个数值约等于您黑色页眉的高度，请根据需要调整 */
}

/*
===================================================================
 (最终版) 强制 Banner 图片遮罩完全覆盖
===================================================================
 描述: 覆盖 core.min.css 中的默认样式，将原本只在底部的渐变背景
       修改为覆盖全图的、均匀的半透明遮罩，并重新调整了内容布局。
===================================================================
*/
.post-grid.style-3 .post-content {
    /* 1. 关键修复：让容器从顶部开始并占满整个高度 */
    top: 0 !important;
    height: 100% !important;

    /* 2. 关键修复：将渐变背景替换为均匀的半透明黑色 */
    background: rgba(0, 0, 0, 0.5) !important;

    /* 3. 优化布局：使用 Flexbox 将文字内容重新定位到底部 */
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding: 4.5% !important; /* 统一内边距，让文字不会贴边 */
}


/* --- WooCommerce 我的账户页面 - 最终完美版 V12 --- */

/* =================================================================== */
/* 1. 基础布局设定
/* =================================================================== */

/* 这个基础规则只设定了flex，宽度由具体状态决定 */
.page-id-27301 .my-account-main-section > .elementor-container {
    display: flex;
    margin-left: auto;
    margin-right: auto;
}

/* 始终隐藏 WooCommerce 原生导航 */
.page-id-27301 .woocommerce-MyAccount-navigation {
    display: none !important;
}


/* =================================================================== */
/* 2. 未登录状态 (body:not(.logged-in))
/* =================================================================== */

/* 未登录时：设定最大宽度，使其居中 */
body:not(.logged-in).page-id-27301 .my-account-main-section > .elementor-container {
    max-width: 1140px;
    min-height: 80vh;
    align-items: center;
    justify-content: center;
    gap: 5%;
}

/* 核心：强制隐藏“登录后”的元素 */
body:not(.logged-in).page-id-27301 .elementor-element.elementor-element-47d831b,
body:not(.logged-in).page-id-27301 .elementor-widget.account-dashboard-title {
    display: none !important;
}

/* 未登录时各栏宽度 */
body:not(.logged-in).page-id-27301 .elementor-column.login-form-container { width: 40% !important; max-width: 450px; }
body:not(.logged-in).page-id-27301 .elementor-column.login-image-column { width: 60% !important; max-width: 650px; }

/* 最终宽度修正：覆盖 Bootstrap 的 .col-md-6 */
body:not(.logged-in).page-id-27301 #customer_login .col-md-6 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}


/* =================================================================== */
/* 3. 登录后的状态 (body.logged-in)
/* =================================================================== */

/* 
 * ===============================================
 * 【新增】登录后全宽布局修正
 * 覆盖基础设定，让容器变为100%宽度，并用 padding 控制留白
 * ===============================================
*/
body.logged-in.page-id-27301 .my-account-main-section > .elementor-container {
    width: 100%;
    max-width: 100%; /* 移除最大宽度限制 */
    padding: 0 40px; /* 上下0，左右40px的内边距，您可以微调这个数值 */
    box-sizing: border-box; /* 确保 padding 不会撑破容器 */
}

/* 强制隐藏“未登录”时的图片栏 */
body.logged-in.page-id-27301 .elementor-column.login-image-column { display: none !important; }

/* 确保“登录后”的元素正确显示 */
body.logged-in.page-id-27301 .elementor-element.elementor-element-47d831b,
body.logged-in.page-id-27301 .elementor-widget.account-dashboard-title { display: block !important; }

/* 登录后布局设定 */
body.logged-in.page-id-27301 .my-account-main-section > .elementor-container { align-items: stretch; }
body.logged-in.page-id-27301 .elementor-element.elementor-element-47d831b { width: 250px !important; flex-shrink: 0; }
body.logged-in.page-id-27301 .elementor-column.login-form-container {
    flex-grow: 1 !important;
    width: auto !important;
    border-left: 1px solid #eeeeee;
}
body.logged-in.page-id-27301 .login-form-container > .elementor-widget-wrap { padding: 40px; }


/* =================================================================== */
/* 4. 导航项“选中”高亮效果 (保持不变)
/* =================================================================== */
.my-account-nav .elementor-widget-card { position: relative; margin-bottom: 0 !important; }
.my-account-link-active { background-color: #0073aa; color: #ffffff !important; }
.my-account-nav .elementor-widget-card .elementor-card-body { padding: 15px 20px !important; }
.my-account-link-active .elementor-card-body,
.my-account-link-active .elementor-card-description,
.my-account-link-active .elementor-card-icon i { color: #ffffff !important; }
.my-account-link-active::after {
    content: ''; position: absolute; top: 50%; right: 0px; transform: translateY(- ৫০%);
    width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent;
    border-right: 12px solid #ffffff;
}

/* --- 自定义购物车侧边栏 --- */

/* 
 * 为侧边栏容器设置白色背景
 * 尝试使用更具体的选择器以避免全局影响
 */
.tms-mini-cart .offcanvas-dialog {
    background-color: #ffffff !important;
}

/* 
 * 将侧边栏内的主要文字、价格、标签统一设为黑色
 */
.offcanvas-content .offcanvas-header h5.text,
.offcanvas-content .offcanvas-header .btn-close, /* 针对关闭按钮的更具体选择器 */
.offcanvas-content .woocommerce-mini-cart-item a,
.offcanvas-content .woocommerce-mini-cart-item .item-variation label,
.offcanvas-content .woocommerce-mini-cart-item .quantity,
.offcanvas-content .woocommerce-mini-cart-item .woocommerce-Price-amount,
.offcanvas-content .woocommerce-mini-cart__total.total,
.offcanvas-content .woocommerce-Price-amount.amount {
    color: #000000 !important;
}

/* 针对 SVG 图标，应直接设置其 'stroke' (描边) 颜色 */
.offcanvas-header svg.close-button {
    stroke: #000000 !important;
}

/*
 * ========================================================================
 * (最终优化版) 强制指定页面的 Header 为黑色
 * 目标页面：
 * - 多个指定静态页面 (通过 page-id)
 * - 所有博客文章详情页 (通过 single-post 类)
 * 技术: 使用合并选择器简化代码，并使用背景图技巧绕过 JS 的样式重置。
 * ========================================================================
 */

/* 
 * 1. 定义一个统一的选择器列表，包含所有需要黑色 Header 的页面。
 *    以后再有新页面，只需要在这里添加一个新的 body 类即可！
 */
body.page-id-11 .header-section .navbar,
body.page-id-22409 .header-section .navbar,
body.page-id-25430 .header-section .navbar, 
body.page-id-26172 .header-section .navbar, 
body.page-id-26347 .header-section .navbar,
body.page-id-26334 .header-section .navbar,
body.page-id-26183 .header-section .navbar,
body.single-post .header-section .navbar /* <-- 新增：这行代码会应用到所有博客文章页！ */
{
    /* 核心规则：添加纯黑背景 */
    background-image: linear-gradient(to right, #000000, #000000) !important;

    /* 覆盖颜色变量，确保所有状态下的文字和图标默认为白色 */
    --themeasy-secondary-text-color: #FFFFFF !important;
}

/* 2. 强制设置文字和图标的具体颜色 */
body.page-id-11 .header-section .navbar .nav-link,
body.page-id-22409 .header-section .navbar .nav-link,
body.page-id-25430 .header-section .navbar .nav-link,
body.page-id-26172 .header-section .navbar .nav-link,
body.page-id-26183 .header-section .navbar .nav-link,
body.page-id-26347 .header-section .navbar .nav-link,
body.page-id-26334 .header-section .navbar .nav-link,
body.single-post .header-section .navbar .nav-link {
    color: #FFFFFF !important;
}

/* 3. 移动端汉堡菜单按钮 */
body.page-id-11 .header-section .navbar .navbar-toggler .navbar-toggler-icon .line,
body.page-id-22409 .header-section .navbar .navbar-toggler .navbar-toggler-icon .line,
body.page-id-25430 .header-section .navbar .navbar-toggler .navbar-toggler-icon .line,
body.page-id-26172 .header-section .navbar .navbar-toggler .navbar-toggler-icon .line,
body.page-id-26347 .header-section .navbar .navbar-toggler .navbar-toggler-icon .line,
body.page-id-26334 .header-section .navbar .navbar-toggler .navbar-toggler-icon .line,
body.page-id-26183 .header-section .navbar .navbar-toggler .navbar-toggler-icon .line,
body.single-post .header-section .navbar .navbar-toggler .navbar-toggler-icon .line {
    background-color: #FFFFFF !important;
}

/* 4. 修复菜单项在鼠标悬停 (hover) 或激活时的颜色 */
body.page-id-11 .header-section .navbar .navbar-nav:not(.navbar-icons) .nav-link:hover,
body.page-id-22409 .header-section .navbar .navbar-nav:not(.navbar-icons) .nav-link:hover,
body.page-id-25430 .header-section .navbar .navbar-nav:not(.navbar-icons) .nav-link:hover,
body.page-id-26172 .header-section .navbar .navbar-nav:not(.navbar-icons) .nav-link:hover,
body.page-id-26183 .header-section .navbar .navbar-nav:not(.navbar-icons) .nav-link:hover,
body.page-id-26347 .header-section .navbar .navbar-nav:not(.navbar-icons) .nav-link:hover,
body.page-id-26334 .header-section .navbar .navbar-nav:not(.navbar-icons) .nav-link:hover,
body.single-post .header-section .navbar .navbar-nav:not(.navbar-icons) .nav-link:hover,
body.page-id-11 .header-section .navbar .navbar-nav .nav-link.show,
body.page-id-22409 .header-section .navbar .navbar-nav .nav-link.show,
body.page-id-25430 .header-section .navbar .navbar-nav .nav-link.show,
body.page-id-26172 .header-section .navbar .navbar-nav .nav-link.show,
body.page-id-26347 .header-section .navbar .navbar-nav .nav-link.show,
body.page-id-26334 .header-section .navbar .navbar-nav .nav-link.show,
body.page-id-26183 .header-section .navbar .navbar-nav .nav-link.show,
body.single-post .header-section .navbar .navbar-nav .nav-link.show {
    color: #E0E0E0 !important; /* 使用一个稍暗的白色以示区分 */
}

/* 5. 移动端展开菜单的背景 */
@media (max-width: 991px) {
    body.page-id-11 .header-section .navbar .navbar-collapse,
    body.page-id-22409 .header-section .navbar .navbar-collapse, 
    body.page-id-25430 .header-section .navbar .navbar-collapse,
    body.page-id-26172 .header-section .navbar .navbar-collapse,
    body.page-id-26183 .header-section .navbar .navbar-collapse,
    body.page-id-26347 .header-section .navbar .navbar-collapse,
    body.page-id-26334 .header-section .navbar .navbar-collapse,
    body.single-post .header-section .navbar .navbar-collapse {
        background-color: #000000 !important;
    }
}

/* 针对幻灯片的深色样式 */
.dark-slider-style .pre-title {
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
}

.dark-slider-style .text-1 {
    color: #a9aec3;
    font-size: 32px;
    font-weight: bold;
}

.dark-slider-style .text-2 {
    color: #a9aec3;
    font-size: 22px;
    font-weight: normal; /* 确保不加粗 */
}

.dark-slider-style .button-text .when-hover {
    color: #8f94a6;
}

/* 针对Card小部件的深色样式 */
.dark-card-style .elementor-widget-themeasy-card .card .title {
    color: #a9aec3;
    font-size:100%;
}

.dark-card-style .elementor-widget-themeasy-card .card .description p {
    color: #8f94a6;
    font-size:84%;
}

/*
===================================================================
 GOMAX 主题 - 产品详情页自定义CSS样式-暗黑模式(V5 - 最终修正版)
===================================================================
 作者: xiaobingb
 日期: 2025-07-09
 描述: 本代码通过 WPCode 插件加载，旨在为 Gomax 主题的
       单一产品页面提供一套完整的暗黑模式视觉风格。
       (V5版修正了产品尺寸、数量按钮和添加到购物车按钮的样式)
===================================================================
*/

/*
 * -----------------------------------------------------------------
 * 第一部分：定义全局暗黑调色板 (核心)
 * -----------------------------------------------------------------
*/

body.single-product {
    /* -- 背景颜色 -- */
    --themeasy-primary-bg-color:      #000000;
    --themeasy-secondary-bg-color:    #1a1a1a;

    /* -- 边框颜色 -- */
    --themeasy-primary-border-color:  #2c2e33;
    --themeasy-secondary-border-color:#4a4a4a;

    /* -- 文本颜色 -- */
    --themeasy-primary-text-color:    #a9aec3;
    --themeasy-secondary-text-color:  #ffffff;

    /* -- 链接颜色 -- */
    --themeasy-link-color:            #61afef;
    --themeasy-link-hover-color:      #ffffff;
}


/*
 * -----------------------------------------------------------------
 * 第二部分：微调特定元素
 * -----------------------------------------------------------------
*/

/* --- 2.1) 所有产品动作图标的样式 (统一处理) --- */
body.single-product .product-action {
    background: none !important;
    border: none !important;
}
body.single-product .product-action .icon-wrapper {
    background-color: #000000 !important;
    border: 1px solid #4a4a4a !important;
    border-radius: 50% !important;
    width: 38px;
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}
body.single-product .product-actions .product-action .text {
    display: none !important;
}
body.single-product .product-action .icon {
    color: #ffffff !important;
    stroke: #ffffff !important;
}
body.single-product .product-action:hover .icon-wrapper {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
}
body.single-product .product-action:hover .icon {
    color: #000000 !important;
    stroke: #000000 !important;
}


/* --- 2.2) 分享弹出菜单中的社交媒体图标 (特殊处理) --- */
body.single-product .share-this-item {
    background-color: transparent !important;
    border: none !important;
}
body.single-product .share-this-item .icon {
    color: #ffffff !important;
    stroke: #ffffff !important;
}
body.single-product .share-this-item:hover .icon {
    color: #61afef !important;
    stroke: #61afef !important;
}


/*
 * ===================================================================
 * 第三部分: 核心交互元素样式修正
 * ===================================================================
*/

/* --- 3.1) 尺码/属性选择框 --- */
body.single-product .tms-vsw-swatches-container .tms-vsw-label-option {
    border: 1px solid var(--themeasy-primary-border-color) !important;
    color: var(--themeasy-primary-text-color) !important;
    background-color: transparent !important;
    transition: all 0.3s ease;
}
body.single-product .tms-vsw-swatches-container .tms-vsw-label-option:not(.tms-vsw-selected-swatch):hover {
    border-color: #ffffff !important;
    color: #ffffff !important;
}
body.single-product .tms-vsw-swatches-container .tms-vsw-selected-swatch,
body.single-product .tms-vsw-swatches-container .tms-vsw-selected-swatch:hover {
    background-color: #000000 !important;
    border: 1px solid #ffffff !important;
    color: #ffffff !important;
}


/* 
 * --- 3.2) 数量增减按钮 (V8 最终修正) --- 
 * 目标：鼠标放上去后，整个容器的边框变为白色。
*/

/* (A) 默认样式：覆盖主题的边框颜色，确保与我们的暗黑主题一致 */
body.single-product .product-quantity-button {
    border-color: var(--themeasy-primary-border-color) !important;
}

/* (B) 悬停样式 (关键修正)：当鼠标悬停在整个容器上时，边框变白 */
body.single-product .product-quantity-button:hover {
    border-color: #ffffff !important;
}

/* (C) 额外优化：当鼠标悬停在单个 +/- 按钮上时，给一个更好的反馈 */
body.single-product .product-quantity-button .more:hover,
body.single-product .product-quantity-button .less:hover {
    background-color: #ffffff !important; /* 背景变白 */
    color: #000000 !important;             /* 图标变黑 */
}


/* --- 3.3) 添加到购物车 (Add to Cart) 和 立即购买 (Buy Now) 按钮 --- */
/* (A) 添加到购物车按钮：默认样式 */
body.single-product .product-button a.add_to_cart_button {
    background-color: transparent !important;
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
    transition: all 0.3s ease;
}

/* (B) 添加到购物车按钮：悬停样式 */
body.single-product .product-button a.add_to_cart_button:hover {
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* (C) 立即购买按钮：默认样式 */
body.single-product .buy_now_button {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #ffffff !important;
    transition: all 0.3s ease;
}

/* (D) 立即购买按钮：悬停样式 */
body.single-product .buy_now_button:hover {
    background-color: #f0f0f0 !important;
    border-color: #f0f0f0 !important;
    color: #000000 !important;
}


/* ============================================= */
/*          文章网格组件中的特色图片添加遮罩         */
/* ============================================= */

/* 0. (关键) 设置整个文章卡片 .post-item 为定位锚点 (不变) */
.post-grid-image-overlay .post-item {
    position: relative !important;
    overflow: hidden !important;
}

/* 1. 图片容器和遮罩层 (不变，已正确) */
.post-grid-image-overlay .image-wrapper {
    position: relative !important;
    display: block !important;
    z-index: 0 !important;
}
.post-grid-image-overlay .image-wrapper::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: #151515 !important;
    opacity: 0.5 !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* 2. (核心修改) 将 .post-content 容器作为一个整体，并从底部抬高 */
.post-grid-image-overlay .post-content {
    position: absolute !important;
    bottom: 100px !important; /* 修改点：从0改为30px，将整体从底部抬高 */
    left: 0 !important;
    width: 100% !important;
    z-index: 2 !important;

    /* 修改点：调整内边距，让左右有空间，上下由子元素margin控制 */
    padding: 0 30px !important; 
    box-sizing: border-box !important;
}

/* 3. 在 .post-content 内部创建元素之间的间距和样式 */

/*    第一步: 为分类标签添加下边距 (不变) */
.post-grid-image-overlay .post-categories {
    margin-bottom: 15px !important;
}

/*    第二步: 为标题设置最大宽度以强制换行 */
.post-grid-image-overlay h3.entry-title {
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    max-width: 100% !important; /* 新增：限制最大宽度，使其能够自动换行 */
}

/*    第三步: 让作者和日期紧挨着 */
.post-grid-image-overlay .post-metadata {
    display: flex !important;
    /* 修改点：移除 justify-content: space-between; */
    align-items: center !important;
    gap: 10px !important; /* 新增：在作者和日期之间创建一个固定的小间距 */
}

/* ============================================= */
/*          图片小组件添加遮罩        */
/* ============================================= */
.image-dark-overlay {
    position: relative !important;
}

.image-dark-overlay::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: #151515 !important;
    opacity: 0.65 !important;
    z-index: 1 !important; 
}
    
/* ==========================================================================
   PERFORMANCE OPTIMIZATION FOR PRODUCT GRID HOVER EFFECT
   ========================================================================== */

/* 1. Set up the container for the lightweight hover effect.
      This targets the product items we marked with our custom class. */
.type-product .lightweight-hover-slider {
    position: relative; /* This is crucial for positioning the images inside. */
}

/* 2. Style the images within the container.
      We stack them on top of each other. */
.type-product .lightweight-hover-slider img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Prevents image distortion. */
    transition: opacity 0.35s ease-in-out; /* Adds a smooth fade effect. */
}

/* 3. By default, hide the second image (and any others after it). */
.type-product .lightweight-hover-slider img:not(:first-child) {
    opacity: 0;
}

/* 4. When the container is hovered over, fade out the first image... */
.type-product .lightweight-hover-slider:hover img:first-child {
    opacity: 0;
}

/* 5. ...and fade in the second image. */
.type-product .lightweight-hover-slider:hover img:nth-child(2) {
    opacity: 1;
}