/*
Theme Name: PrimalHerbs Child
Theme URI: https://47.88.60.211/
Description: 复刻PrimalHerbs的Re Lierre苹果醋软糖独立站子主题
Author: selena
Template: blankslate
Version: 1.0
*/

/* ===================== 根节点强制重置（解决背景/结构核心问题） ===================== */
/* 1. 重置html/body（覆盖Astra父主题最高层级样式） */
html, body {
    background-color: #ffffff !important; /* 参考站主背景：白色 */
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important; /* 禁止横向滚动 */
}

/* 2. 重置所有容器（统一结构，匹配参考站） */
#page, #content, .site-content, .ast-container {
    background: #ffffff !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 3. 全局模块间距重置（匹配参考站的留白逻辑） */
.hero-banner {
    background: #f8f9fa !important; /* Banner浅灰背景，匹配参考站 */
    height: 80vh !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.product-benefits {
    background: #ffffff !important; /* 卖点区白色背景 */
    padding: 80px 0 !important;
    width: 100% !important;
    margin: 0 !important;
}
.product-display {
    background: #f8f9fa !important; /* 产品展示区浅灰背景 */
    padding: 80px 0 !important;
    width: 100% !important;
    margin: 0 !important;
}

/* ===================== 保留之前的核心样式（统一视觉） ===================== */
/* 全局字体/颜色 */
body {
    font-family: 'Helvetica Neue', Arial, sans-serif !important;
    color: #333 !important;
    line-height: 1.6 !important;
}
a {
    text-decoration: none !important;
    color: #e85d75 !important;
    transition: color 0.3s ease !important;
}
a:hover {
    color: #c03950 !important;
}

/* 按钮样式（强制覆盖） */
.woocommerce button.button,
.woocommerce a.button,
.add_to_cart_button,
.hero-banner a {
    background: #e85d75 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 12px 30px !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.add_to_cart_button:hover,
.hero-banner a:hover {
    background: #c03950 !important;
}

/* 产品卡片/价格样式 */
.woocommerce-Price-amount {
    color: #e85d75 !important;
    font-weight: 700 !important;
    font-size: 24px !important;
}
.woocommerce ul.products li.product {
    border: none !important;
    box-shadow: 0 2px 15px rgba(0,0,0,0.05) !important;
    padding: 20px !important;
    margin-bottom: 30px !important;
    transition: all 0.3s ease !important;
}
.woocommerce ul.products li.product:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1) !important;
}

/* 响应式适配 */
@media (max-width: 768px) {
    .hero-banner {
        height: auto !important;
        padding: 40px 0 !important;
    }
    .hero-banner h1 {
        font-size: 32px !important;
    }
    .product-benefits, .product-display {
        padding: 40px 0 !important;
    }
}

/* ========== WooCommerce 加购按钮样式 ========== */
/* 1. 产品列表页的加购按钮 */
.woocommerce ul.products li.product .button {
    background: #e85d75 !important; /* 按钮背景色（你的主色） */
    color: #fff !important; /* 按钮文字白色 */
    border: none !important; /* 去掉默认边框 */
    border-radius: 0 !important; /* 去掉圆角，和参考站一致 */
    padding: 10px 20px !important; /* 按钮大小 */
    width: 100% !important; /* 按钮宽度和产品卡片一样宽 */
    text-align: center !important; /* 文字居中 */
    font-weight: 600 !important; /* 文字加粗 */
    text-transform: uppercase !important; /* 文字大写 */
}
/* 2. 鼠标悬浮在按钮上的效果 */
.woocommerce ul.products li.product .button:hover {
    background: #c03950 !important; /* 悬浮时变深玫红 */
}

/* 3. 产品详情页的加购按钮 */
.woocommerce .single_add_to_cart_button {
    background: #e85d75 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 15px 40px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    text-transform: uppercase !important;
}
.woocommerce .single_add_to_cart_button:hover {
    background: #c03950 !important;
}

/* ========== WooCommerce 产品价格样式 ========== */
/* 产品列表页的价格 */
.woocommerce ul.products li.product .price {
    color: #e85d75 !important; /* 玫红色 */
    font-size: 24px !important; /* 字体大小 */
    font-weight: 700 !important; /* 加粗 */
    text-align: center !important; /* 居中 */
}
/* 产品详情页的价格 */
.woocommerce .product .price {
    color: #e85d75 !important;
    font-size: 28px !important;
    font-weight: 700 !important;
}

/* --- 强制导航栏横排显示 --- */
/* 针对 Astra 主题的主菜单容器 */
.main-header-bar-navigation .main-navigation ul.menu, 
.main-header-bar-navigation .main-navigation ul.nav-menu {
    display: flex !important; /* 强制使用 Flex 布局（横排） */
    flex-wrap: wrap; /* 允许换行 */
    justify-content: flex-end; /* 靠右对齐，如果想靠左改成 flex-start */
    gap: 20px; /* 菜单项之间的间距 */
    padding: 0;
    margin: 0;
    list-style: none !important; /* 去掉圆点 */
}

/* 针对菜单项 li */
.main-header-bar-navigation .main-navigation li {
    display: inline-block; /* 兼容老浏览器 */
    margin: 0;
    padding: 0;
}

/* 针对菜单链接 a */
.main-header-bar-navigation .main-navigation a {
    padding: 10px 15px; /* 增加点击区域 */
    text-decoration: none; /* 去掉下划线 */
    color: #333; /* 字体颜色 */
    font-weight: 600; /* 加粗 */
    display: block;
}

/* 鼠标悬停效果 */
.main-header-bar-navigation .main-navigation a:hover {
    color: #e85d75; /* 悬停变品牌粉 */
}

/* 去掉默认的列表圆点 (以防万一) */
ul.menu, ul.nav-menu {
    list-style: none !important;
    padding-left: 0 !important;
}

/* 强制显示头部菜单 */
.main-navigation {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}