/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

/* =======================================================
   Meew 专属：导航栏吸顶 + 解决下方图片侵占菜单问题
======================================================= */

/* 1. 初始化过渡动画 */
#masthead,
.site-header,
.ast-above-header-wrap,
.main-header-bar-wrap,
.site-logo-img img {
    transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* =======================================================
   核心修正：给下方的 Banner 区腾出空间，防止图片上窜
   Astra 主题的默认内容包裹层是 #content，我们给它加一个
   和菜单高度相近的顶边距，把下面的背景图硬生生“顶”下去。
======================================================= */
#content {
    padding-top: 140px !important; /* 电脑端正常状态下的页头总高度 */
}
/* 仅针对分类归档页面（Archive）和产品页，消除顶部巨大空隙 */
.archive #content,
.single-post #content,
.blog #content {
    padding-top: 40px !important; 
}

/* 2. 当滚动激活时 (.meew-sticky-active) */

/* 整体固定总大包围盒 */
.meew-sticky-active #masthead {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 99999 !important; 
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important; 
}

/* 强行隐藏 Above Header */
.meew-sticky-active .ast-above-header-wrap {
    opacity: 0 !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* 【核心修正】：彻底封死图片穿透！
   不管默认主题怎么设置，在滚动和非滚动状态下，
   我们都强行把主菜单的每一层背景都刷成 100% 不透明的纯白
*/
.ast-main-header-wrap,
.main-header-bar-wrap,
.main-header-bar {
    background-color: #FBF3E2 !important; 
    background-image: none !important; /* 防止误吸附任何背景图 */
}

/* 滚动时压缩菜单上下间距 */
.meew-sticky-active .main-header-bar {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

/* 滚动时 Logo 缩小 */
.meew-sticky-active .site-logo-img img {
    max-width: 60px !important;  
    height: auto !important;
}

/* =======================================================
   手机端微调：因为手机端菜单高度不同，需要单独适配顶边距
======================================================= */
@media (max-width: 768px) {
    #content {
        padding-top: 100px !important; /* 手机端菜单矮一些，给 100px 即可 */
    }
    .meew-sticky-active .main-header-bar {
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }
}

/* =======================================================
   终极补丁：利用伪元素抵消 JS 锚点滚动导致的遮挡
======================================================= */

#inquiry-section::before {
    content: "";
    display: block;
    height: 140px;        /* 相当于你吸顶菜单的高度，如果还是挡住，就把这个数值调大 */
    margin-top: -140px;   /* 必须和上面的高度保持一致，且是负数 */
    visibility: hidden;   /* 让它保持隐形 */
    pointer-events: none; /* 防止它遮挡鼠标点击 */
}

/* =======================================================
   B2B 商务级 WhatsApp 悬浮咨询按钮 (底边吸附版)
   - 增加 "Chat On Whatsapp" 文字
   - 底部贴边，更加整洁
   - 丝滑呼吸灯动画特效
======================================================= */

.floating-wa {
    position: fixed;
    /* --- 修改位置：贴边放置 --- */
    bottom: 30px;  /* 距离底部 30px，刚好是一个舒适的视觉距离 */
    right: 30px;   /* 距离右侧 30px */
    
    padding: 10px 24px;
    height: auto;
    width: auto;
    background-color: #25d366;
    
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    z-index: 9999;
    
    /* 保持丝滑过渡 */
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55), 
                box-shadow 0.4s ease, 
                background-color 0.4s ease;
    
    /* 呼吸灯动画 */
    animation: wa-silk-pulse 3.5s infinite; 
}

.floating-wa::after {
    content: "Chat On Whatsapp"; 
    color: #ffffff;             
    font-size: 16px;            
    font-weight: 600;           
    font-family: 'Poppins', sans-serif; 
    white-space: nowrap;        
}

.floating-wa:hover {
    transform: scale(1.08) translateY(-5px); /* 悬停时轻微上浮 */
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.5);
    background-color: #20b858;
}

/* 手机端适配 */
@media (max-width: 768px) {
    .floating-wa {
        bottom: 20px;   /* 手机端更贴边 */
        right: 20px;    
        padding: 8px 18px; 
    }
    .floating-wa::after {
        font-size: 14px; 
    }
}

/* 呼吸灯动画关键帧保持不变 */
@keyframes wa-silk-pulse {
    0% { box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4), 0 0 0 0px rgba(37, 211, 102, 0); }
    40% { box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4), 0 0 0 18px rgba(37, 211, 102, 0.1); }
    80% { box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4), 0 0 0 25px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4), 0 0 0 0px rgba(37, 211, 102, 0); }
}

/* =======================================================
   Meew 专属：彻底消除产品详情页顶部的冗余空白 (高权重覆盖)
======================================================= */
/* 当页面包含分类为 product 的文章时，彻底隐藏整个 Banner 区域 */
body.single-post:has(article.category-products) .ast-single-entry-banner {
    display: none !important;
}

/* （保留此前的代码）消除可能残留的 #content 顶部 140px 空白 */
body.single-post:has(article.category-products) #content {
    padding-top: 0 !important;
}

/* =======================================================
   MEEW 专属：产品底部 分类(强) 与 标签(弱) 样式
======================================================= */
.meew-product-meta-section {
    margin-top: 50px !important;
    padding-top: 30px !important;
    border-top: 1px dashed #e2e8f0; /* 顶部虚线分割，与正文隔开 */
    display: flex;
    flex-direction: column;
    gap: 16px;
    clear: both;
}

/* 统一的左侧前缀标签字样 */
.meew-product-meta-section .meta-label {
    font-weight: 600;
    color: #4a5568;
    margin-right: 8px;
    font-size: 15px;
    min-width: 70px;
    display: inline-block;
}

/* -------------------------------------
   🔥 强视觉：子分类 (Categories) 
------------------------------------- */
.meew-meta-cats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.meew-meta-cats a {
    background-color: #5F7A61; /* MEEW 品牌主色调绿色 */
    color: #ffffff !important; /* 强对比白字 */
    padding: 6px 18px;
    border-radius: 4px; /* 微小圆角，显硬朗工业风 */
    font-size: 14px;
    font-weight: 500;
    text-decoration: none !important;
    transition: all 0.3s ease;
    text-transform: uppercase; /* 字母大写，强调正规感 */
    letter-spacing: 0.5px;
}

.meew-meta-cats a:hover {
    background-color: #4a5e4b; /* 悬停加深 */
    box-shadow: 0 4px 6px rgba(95, 122, 97, 0.2);
    transform: translateY(-2px);
}

/* -------------------------------------
   💧 弱视觉：标签 (Tags) 
------------------------------------- */
.meew-meta-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.meew-meta-tags a {
    color: #a0aec0 !important; /* 低调的灰蓝色 */
    font-size: 13px;
    text-decoration: none !important;
    padding: 4px 12px;
    border: 1px solid #edf2f7; /* 极浅的边框 */
    border-radius: 50px; /* 胶囊圆角，区别于分类的方块 */
    background: transparent;
    transition: all 0.2s;
}

.meew-meta-tags a:hover {
    color: #718096 !important;
    border-color: #cbd5e1;
    background: #f8fafc;
}

ul.meew-category-menu {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
ul.meew-category-menu li {
    border-bottom: 1px solid #e2e8f0; 
    margin: 0 !important;
}
ul.meew-category-menu li:last-child {
    border-bottom: none;
}
ul.meew-category-menu li a {
    display: flex;
    align-items: center;
    padding: 16px 14px;
    color: #4a5568 !important; 
    text-decoration: none !important;
    font-weight: 500;
    font-size: 16px;
    transition: all 0.3s ease; 
}
ul.meew-category-menu li a::after {
    content: "→";
    margin-left: auto; 
    opacity: 0; 
    transform: translateX(-10px); 
    transition: all 0.3s ease;
    color: #5F7A61; 
}
ul.meew-category-menu li a:hover {
    color: #5F7A61 !important; 
    padding-left: 12px; 
    background-color: transparent;
}
ul.meew-category-menu li a:hover::after {
    opacity: 1;
    transform: translateX(0);
}

/* 整个标签区域的外框 */
.wp-block-post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px; /* 标签之间的间距 */
    margin-top: 50px !important;
    padding-top: 30px;
    border-top: 1px dashed #cbd5e1; /* 标签区顶部的虚线分割 */
}

/* 标签前的文字前缀（如果有的情况下） */
.wp-block-post-tags::before {
    content: "Features:";
    font-weight: 600;
    color: #4a5568;
    margin-right: 8px;
    display: flex;
    align-items: center;
}

/* 胶囊标签本体样式 */
.wp-block-post-tags a {
    background-color: #f0fdf4; /* 浅绿底色 */
    color: #166534 !important; /* 深绿文字 */
    padding: 6px 16px;
    border-radius: 50px; /* 变成圆角的胶囊形状 */
    font-size: 14px;
    text-decoration: none !important;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

/* 鼠标悬停时的动态效果 */
.wp-block-post-tags a:hover {
    background-color: #5F7A61; /* MEEW 品牌绿 */
    color: #ffffff !important;
    box-shadow: 0 4px 6px rgba(95, 122, 97, 0.2);
    transform: translateY(-2px); /* 轻轻浮起 */
}

.meew-product-specs {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 0 30px 0 !important;
        border: 1px solid #e2e8f0; 
        border-radius: 6px;
        overflow: hidden;
        font-size: 15px;
        font-family: sans-serif;
        width: 96%; /* 强制占满当前容器的 100% 宽度 */
    }

    .meew-product-specs li {
        display: flex !important;
        flex-direction: row !important; 
        margin: 0 !important;
        border-bottom: 1px solid #e2e8f0;
    }

    .meew-product-specs li:last-child {
        border-bottom: none;
    }

    /* 左侧属性名 */
    .meew-product-specs .spec-name {
        width: 40%; /* 稍微加宽了左侧比例，让长单词不拥挤 */
        background-color: #f8fafc;
        padding: 14px 16px; /* 增加了上下内边距，让整个框撑得更大气 */
        font-weight: 600;
        color: #2d3748;
        border-right: 1px solid #e2e8f0;
        box-sizing: border-box;
        flex-shrink: 0; 
    }

    /* 右侧属性值 */
    .meew-product-specs .spec-value {
        width: 60%;
        padding: 14px 16px;
        color: #4a5568;
        background-color: #ffffff;
        box-sizing: border-box;
        word-break: break-word;
        display: flex;
        align-items: center; /* 确保文字垂直居中 */
    }

    /* 价格行专属高亮 (位于最底部) */
    .meew-product-specs .spec-price-row .spec-name {
        background-color: #f0fdf4; 
        color: #166534; 
    }
    .meew-product-specs .spec-price-row .spec-value {
        background-color: #fbfdfb;
    }
    .meew-product-specs .spec-price-text {
        font-size: 18px; 
        font-weight: 700; 
        color: #5F7A61; 
    }
    .meew-product-specs .spec-price-unit {
        font-size: 13px;
        color: #718096;
        font-weight: normal;
        margin-left: 6px;
    }

    /* 移动端适配 */
    @media (max-width: 768px) {
        .meew-product-specs { font-size: 14px; }
        .meew-product-specs .spec-name { padding: 12px 10px; width: 45%; }
        .meew-product-specs .spec-value { padding: 12px 10px; width: 55%; }
        .meew-product-specs .spec-price-text { font-size: 16px; }
    }

/* =======================================================
   MEEW 专属：底部相关产品 (Related Products) 样式
======================================================= */
.meew-related-box {
    margin-top: 60px !important;
    padding-top: 40px !important;
    border-top: 1px solid #e2e8f0 !important;
    clear: both;
}

.meew-related-box .box-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #2d3748 !important;
    margin: 0 0 24px 0 !important;
    text-align: left;
}

.meew-grid {
    display: flex !important;
    gap: 20px !important;
    width: 100% !important;
}

.meew-grid .prod-card {
    width: 25% !important;
    box-sizing: border-box !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    transition: all 0.3s ease !important;
}

.meew-grid .prod-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05) !important;
    border-color: #5F7A61 !important;
}

.meew-grid .prod-card a {
    text-decoration: none !important;
    display: block !important;
}

.meew-grid .prod-card .img-container {
    width: 100% !important;
    padding-top: 100% !important; /* 1:1 绝对正方形画布 */
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: #f8fafc !important;
}

.meew-grid .prod-card .prod-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #4a5568 !important;
    margin: 12px !important;
    line-height: 1.4 !important;
    /* 两行文字截断 */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    height: 38px !important; 
}

.meew-grid .prod-card:hover .prod-title {
    color: #5F7A61 !important;
}

/* 移动端响应式 */
@media (max-width: 768px) {
    .meew-grid { flex-wrap: wrap !important; gap: 12px !important; }
    .meew-grid .prod-card { width: calc(50% - 6px) !important; }
}

/*blog*/
.meew-blog-wrapper { background-color: #f8fafc; padding: 80px 0; }
.meew-blog-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.meew-blog-header { text-align: center; margin-bottom: 60px; }
.meew-blog-title { font-size: 38px; color: #0f172a; font-weight: 700; margin-bottom: 15px; }
.meew-blog-desc { color: #64748b; font-size: 18px; }

.meew-blog-grid { display: flex; flex-wrap: wrap; gap: 30px; }
/* 纯文字卡片样式升级 */
.text-only-card {
    width: calc(33.333% - 20px);
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}
.text-only-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.06);
    border-color: #cbd5e1;
}
.meew-post-content { padding: 35px 30px; display: flex; flex-direction: column; flex-grow: 1; }

.meew-post-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; font-size: 13px; }
.post-cat { background: #f1f5f9; color: #475569; padding: 4px 10px; border-radius: 20px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.post-date { color: #94a3b8; }

.meew-post-title { font-size: 22px; margin: 0 0 15px 0; line-height: 1.4; font-weight: 700; }
.meew-post-title a { color: #1e293b; text-decoration: none; transition: color 0.2s; }
.meew-post-title a:hover { color: #5F7A61; }

.meew-post-excerpt { color: #64748b; font-size: 16px; line-height: 1.7; margin-bottom: 25px; flex-grow: 1; }

.meew-card-footer { margin-top: auto; padding-top: 20px; border-top: 1px solid #f1f5f9; }
.meew-read-more { color: #5F7A61; font-weight: 600; text-decoration: none; font-size: 15px; display: inline-flex; align-items: center; }
.meew-read-more:hover { color: #405241; }

.meew-blog-pagination { margin-top: 60px; text-align: center; }
.meew-blog-pagination .page-numbers { display: inline-block; padding: 10px 18px; margin: 0 4px; background: #ffffff; border: 1px solid #e2e8f0; color: #475569; text-decoration: none; border-radius: 6px; font-weight: 600; }
.meew-blog-pagination .current { background: #5F7A61; color: #ffffff; border-color: #5F7A61; }

@media (max-width: 992px) { .text-only-card { width: calc(50% - 15px); } }
@media (max-width: 768px) { .text-only-card { width: 100%; } .meew-post-content { padding: 25px 20px; } }