/* ===================================================================
   CMS 前台补充样式（Stella Orr'e 主题之上的业务微调，不覆盖设计体系）
   =================================================================== */

/* ---------- 顶部语言切换 ---------- */
.header-top .info-list .lang-switch {
    margin-left: 14px;
    padding-left: 14px;
    border-left: 1px solid rgba(255, 255, 255, 0.25);
    font-weight: 600;
}
.header-top .info-list .lang-switch a {
    padding: 0 3px;
    opacity: 0.7;
}
.header-top .info-list .lang-switch a.on,
.header-top .info-list .lang-switch a:hover {
    opacity: 1;
}

/* ---------- 用户上传 Logo 限高 ---------- */
.main-header .logo img,
.main-header .nav-logo img {
    max-height: 62px;
    width: auto;
}
.main-footer .footer-widget.logo-widget .logo img {
    max-height: 70px;
    width: auto;
}

/* ---------- 蜜罐字段 ---------- */
form .hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* ---------- 表单提示 ---------- */
.form-alert {
    position: relative;
    margin-bottom: 20px;
    padding: 12px 18px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.7;
}
.form-alert.error {
    color: #8a3b2e;
    background: #fbeee9;
    border: 1px solid #f0c8bb;
}
.form-alert.info {
    color: #6b5326;
    background: #fbf6e8;
    border: 1px solid #ecdcb0;
}

/* ---------- 空数据 ---------- */
.empty-tip {
    padding: 70px 0;
    text-align: center;
    color: #777;
    font-size: 16px;
}

/* ---------- 富文本正文 ---------- */
.rich img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}
.rich p { margin-bottom: 14px; }
.rich h1, .rich h2, .rich h3, .rich h4 {
    margin: 24px 0 12px;
    font-family: 'Poppins', sans-serif;
    color: #222;
}
.rich ul, .rich ol { margin: 0 0 14px 22px; }
.rich li { margin-bottom: 6px; }
.rich table {
    width: 100%;
    margin-bottom: 18px;
    border-collapse: collapse;
}
.rich th, .rich td {
    padding: 10px 14px;
    border: 1px solid #e5e5e5;
}
.rich blockquote {
    margin: 0 0 18px;
    padding: 12px 22px;
    border-left: 3px solid #c5a47e;
    background: #faf7f2;
    color: #555;
}

/* ---------- 详情封面 ---------- */
.detail-cover {
    margin-bottom: 26px;
}
.detail-cover img {
    width: 100%;
    border-radius: 4px;
}

/* ---------- 产品元信息 ---------- */
.basic-details .product-meta {
    margin: 14px 0 22px;
    list-style: none;
    padding: 0;
}
.basic-details .product-meta li {
    padding: 4px 0;
    color: #666;
    font-size: 15px;
}

/* ---------- 新闻详情相关阅读 ---------- */
.related-box {
    margin-top: 36px;
    padding-top: 26px;
    border-top: 1px solid #e8e8e8;
}
.related-box .group-title h4 {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    margin-bottom: 16px;
}

/* ---------- 侧栏分类激活态 ---------- */
.sidebar .cat-list a.active {
    color: #c5a47e;
    font-weight: 600;
}

/* ---------- 联系页社交图标 ---------- */
.contact-social {
    margin-top: 8px;
}
.contact-social a {
    display: inline-block;
    width: 38px;
    height: 38px;
    margin-right: 8px;
    line-height: 38px;
    text-align: center;
    border-radius: 50%;
    background: #f2ede5;
    color: #4a4338;
    transition: all 0.3s ease;
}
.contact-social a:hover {
    background: #c5a47e;
    color: #fff;
}

/* ---------- 分页与结果页 ---------- */
.styled-pagination {
    margin-top: 36px;
}
.result-section {
    padding: 90px 0 110px;
}
.result-box {
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
}
.result-icon {
    width: 84px;
    height: 84px;
    margin: 0 auto 26px;
    line-height: 84px;
    border-radius: 50%;
    background: #f2ede5;
    color: #c5a47e;
    font-size: 38px;
}
.result-box h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 30px;
    margin-bottom: 14px;
}
.result-box .text {
    color: #777;
    margin-bottom: 32px;
}


/* ===================================================================
   移动端 App 风格样式（≤767px）—— 底部Tab导航 / 悬浮按钮 / 卡片优化
   =================================================================== */

/* ---------- App 底部 Tab 导航栏（桌面端隐藏） ---------- */
.app-tabbar {
    display: none;
}

/* ---------- App 悬浮询盘按钮（桌面端隐藏） ---------- */
.app-float-action {
    display: none;
}

@media only screen and (max-width: 767px) {

    /* === 1. 简化顶栏：隐藏 header-top，header-upper 精简 === */
    .main-header .header-top {
        display: none !important;
    }
    .main-header .header-upper {
        position: sticky;
        top: 0;
        z-index: 999;
        background: #fff;
        box-shadow: 0 1px 8px rgba(0,0,0,0.08);
    }
    .main-header .header-upper .inner-container {
        padding: 0 !important;
    }
    .main-header .logo-outer {
        padding: 8px 12px !important;
    }
    .main-header .logo img {
        max-height: 42px !important;
    }
    /* 隐藏桌面搜索按钮（用底部Tab替代） */
    .main-header .outer-box .search-box-btn {
        display: none;
    }
    /* 移动端汉堡按钮位置优化 */
    .main-header .mobile-nav-toggler {
        font-size: 22px;
        color: #333;
        padding: 8px 12px;
    }

    /* === 2. 底部 Tab 导航栏 === */
    .app-tabbar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 56px;
        background: #fff;
        box-shadow: 0 -2px 12px rgba(0,0,0,0.1);
        z-index: 1000;
        max-width: 480px;
        margin: 0 auto;
        border-top: 1px solid #eee;
    }
    .app-tabbar .tab-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        color: #999;
        text-decoration: none;
        transition: color 0.2s ease;
        -webkit-tap-highlight-color: transparent;
        position: relative;
    }
    .app-tabbar .tab-item i {
        font-size: 20px;
        margin-bottom: 3px;
        transition: transform 0.2s ease;
    }
    .app-tabbar .tab-item.active {
        color: #c5a47e;
        font-weight: 600;
    }
    .app-tabbar .tab-item.active i {
        transform: translateY(-2px);
    }
    .app-tabbar .tab-item.active::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 30px;
        height: 3px;
        border-radius: 0 0 3px 3px;
        background: #c5a47e;
    }
    .app-tabbar .tab-item.tab-tapped i {
        transform: scale(0.85);
    }

    /* === 3. 内容区域底部留白，避免被 Tab Bar 遮挡 === */
    .page-wrapper {
        padding-bottom: 56px;
    }

    /* === 4. 悬浮询盘按钮（详情页才显示） === */
    .app-float-action.show {
        display: flex;
        position: fixed;
        bottom: 62px;
        left: 0;
        right: 0;
        z-index: 999;
        max-width: 480px;
        margin: 0 auto;
        padding: 8px 12px;
        gap: 10px;
        align-items: center;
    }
    .app-float-action .float-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        border-radius: 28px;
        font-size: 15px;
        font-weight: 600;
        transition: all 0.2s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .app-float-action .float-call {
        width: 48px;
        height: 48px;
        background: #4caf50;
        color: #fff;
        font-size: 20px;
        flex-shrink: 0;
        box-shadow: 0 2px 8px rgba(76,175,80,0.35);
    }
    .app-float-action .float-inquiry {
        flex: 1;
        height: 48px;
        background: linear-gradient(135deg, #c5a47e, #b8956a);
        color: #fff;
        gap: 6px;
        box-shadow: 0 2px 10px rgba(197,164,126,0.4);
    }
    .app-float-action .float-inquiry i {
        font-size: 18px;
    }

    /* === 5. 首页轮播优化 === */
    .main-slider .slide .content {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
    .main-slider .slide .content h2 {
        font-size: 26px !important;
        line-height: 1.3 !important;
        margin-bottom: 12px !important;
    }
    .main-slider .slide .content .text {
        font-size: 14px !important;
        margin-bottom: 20px !important;
    }
    .main-slider .btns-box {
        display: flex;
        gap: 10px;
    }
    .main-slider .btns-box .theme-btn {
        padding: 10px 20px !important;
        font-size: 13px !important;
    }

    /* === 6. 卡片式布局：服务/产品/新闻 === */
    /* 产品网格 → 单列或双列卡片 */
    .shop-section .shop-item,
    .related-products .shop-item {
        width: 50% !important;
        padding: 0 5px 12px !important;
    }
    .shop-item .inner-box {
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(0,0,0,0.06);
        margin-bottom: 0;
    }
    .shop-item .lower-content {
        padding: 10px 12px 12px !important;
    }
    .shop-item .lower-content h3 {
        font-size: 14px !important;
        margin-bottom: 4px !important;
    }
    .shop-item .lower-content .price {
        font-size: 15px !important;
    }
    .shop-item .overlay-box .option-box li a {
        width: 36px !important;
        height: 36px !important;
        line-height: 36px !important;
        font-size: 14px !important;
    }

    /* 服务卡片 → 单列 */
    .services-section .service-block,
    .services-page-section .service-block-three {
        width: 100% !important;
        padding: 0 0 16px !important;
    }
    .service-block .inner-box,
    .service-block-three .inner-box {
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    }
    .service-block .lower-content,
    .service-block-three .lower-content {
        padding: 12px 14px 14px !important;
    }

    /* 新闻列表 → 横向卡片（图左文右） */
    .news-section .news-block {
        width: 100% !important;
        padding: 0 0 16px !important;
    }
    .news-block .inner-box {
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    }
    /* 新闻列表页（blog-classic）→ 横向卡片 */
    .news-block-three .inner-box {
        display: flex;
        flex-direction: row;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        margin-bottom: 14px;
    }
    .news-block-three .image-box {
        width: 120px;
        flex-shrink: 0;
        position: relative;
    }
    .news-block-three .image-box .image img {
        width: 120px;
        height: 100%;
        object-fit: cover;
    }
    .news-block-three .image-box .date {
        position: absolute;
        top: 6px;
        left: 6px;
        font-size: 10px;
        padding: 2px 6px;
    }
    .news-block-three .lower-content {
        flex: 1;
        padding: 10px 12px !important;
    }
    .news-block-three .lower-content h3 {
        font-size: 15px !important;
        line-height: 1.4 !important;
        margin-bottom: 6px !important;
    }
    .news-block-three .lower-content .text {
        font-size: 13px !important;
        line-height: 1.5 !important;
        margin-bottom: 8px !important;
    }
    .news-block-three .lower-content .post-info {
        font-size: 11px !important;
    }
    .news-block-three .lower-content .post-info li {
        margin-right: 8px !important;
    }

    /* === 7. 标题排版优化 === */
    .sec-title h2,
    .title-box h2 {
        font-size: 22px !important;
        margin-bottom: 10px !important;
    }
    .sec-title .text,
    .title-box .text {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
    .sec-title.centered {
        text-align: center;
    }

    /* === 8. 侧栏布局 → 堆叠在内容下方 === */
    .sidebar-page-container .content-side,
    .sidebar-page-container .sidebar-side {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    .sidebar-page-container .sidebar-side {
        margin-top: 30px;
    }
    .blog-classic {
        padding-right: 0 !important;
    }
    /* 侧栏分类 → 横向滚动标签 */
    .sidebar .sidebar-blog-category .cat-list {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
    }
    .sidebar .sidebar-blog-category .cat-list li {
        flex-shrink: 0;
    }
    .sidebar .sidebar-blog-category .cat-list a {
        display: inline-block;
        padding: 6px 14px;
        border-radius: 20px;
        background: #f5f2ee;
        color: #666;
        font-size: 13px;
        white-space: nowrap;
    }
    .sidebar .sidebar-blog-category .cat-list a.active {
        background: #c5a47e;
        color: #fff;
    }
    /* 侧栏搜索框 */
    .sidebar .search-box {
        margin-bottom: 16px;
    }
    .sidebar .search-box input {
        border-radius: 24px;
        padding: 10px 16px;
        font-size: 14px;
    }

    /* === 9. 产品详情页 App 化 === */
    .basic-details .image-column,
    .basic-details .info-column {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
    .basic-details .image-box img {
        border-radius: 10px;
    }
    .basic-details .info-column .inner-column {
        padding-left: 0 !important;
        padding-top: 16px;
    }
    .basic-details h4 {
        font-size: 20px !important;
        margin-bottom: 8px !important;
    }
    .basic-details .text {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
    .basic-details .price {
        font-size: 18px !important;
    }
    .basic-details .other-options .theme-btn {
        display: block;
        width: 100%;
        text-align: center;
        padding: 14px !important;
        font-size: 15px !important;
        border-radius: 28px;
    }
    /* 产品详情 Tab → 横向滚动标签 */
    .product-info-tabs .tab-btns {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 0;
        -webkit-overflow-scrolling: touch;
        border-bottom: 2px solid #f0f0f0;
    }
    .product-info-tabs .tab-btn {
        flex-shrink: 0;
        padding: 10px 18px !important;
        font-size: 14px !important;
        white-space: nowrap;
        border-bottom: none;
    }
    .product-info-tabs .tab-btn.active-btn {
        border-bottom: 2px solid #c5a47e;
    }

    /* === 10. 新闻详情页优化 === */
    .blog-single .lower-content {
        padding: 16px 0 0 !important;
    }
    .blog-single h3 {
        font-size: 20px !important;
        line-height: 1.4 !important;
    }
    .blog-single .bold-text {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
    .blog-single .text {
        font-size: 14px !important;
        line-height: 1.7 !important;
    }

    /* === 11. 关于/服务详情 === */
    .story-section .content-column,
    .story-section .image-column {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
    .story-section .content-column .inner-column {
        padding-right: 0 !important;
        margin-bottom: 20px;
    }
    .story-section h2 {
        font-size: 22px !important;
    }
    .story-section .bold-text,
    .story-section .text,
    .services-detail .text {
        font-size: 14px !important;
        line-height: 1.7 !important;
    }

    /* === 12. 页脚简化 === */
    .main-footer .widgets-section .footer-column {
        width: 100% !important;
        margin-bottom: 24px;
    }
    .main-footer .footer-widget h2 {
        font-size: 16px !important;
        margin-bottom: 12px !important;
    }
    .main-footer .footer-widget .text {
        font-size: 13px !important;
        line-height: 1.6 !important;
    }
    .main-footer .footer-bottom {
        text-align: center;
    }
    .main-footer .footer-bottom .pull-left,
    .main-footer .footer-bottom .pull-right {
        float: none !important;
        display: block;
        text-align: center;
    }

    /* === 13. CTA 区域 === */
    .call-to-action-section {
        padding: 40px 0 !important;
    }
    .call-to-action-section h2 {
        font-size: 20px !important;
        line-height: 1.4 !important;
        margin-bottom: 12px !important;
    }
    .call-to-action-section .text {
        font-size: 14px !important;
        margin-bottom: 20px !important;
    }
    .call-to-action-section .theme-btn {
        padding: 12px 24px !important;
        font-size: 14px !important;
    }

    /* === 14. page-title 优化 === */
    .page-title {
        padding: 50px 0 40px !important;
    }
    .page-title h2 {
        font-size: 24px !important;
        margin-bottom: 6px !important;
    }
    .page-title .page-breadcrumb li {
        font-size: 12px !important;
    }

    /* === 15. 联系页表单 === */
    .contact-form-section .form-column,
    .contact-form-section .info-column {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
    .contact-form .form-group input,
    .contact-form .form-group textarea {
        border-radius: 8px;
        padding: 12px 14px;
        font-size: 15px;
        border: 1px solid #e0e0e0;
    }
    .contact-form .theme-btn {
        display: block;
        width: 100%;
        text-align: center;
        padding: 14px !important;
        font-size: 15px !important;
        border-radius: 28px;
    }
    .contact-info-list li {
        font-size: 14px !important;
        line-height: 1.6 !important;
        margin-bottom: 12px !important;
    }

    /* === 16. 隐藏桌面端回顶按钮（Tab Bar 已有导航） === */
    .scroll-to-top {
        display: none !important;
    }

    /* === 17. 分页样式 === */
    .styled-pagination {
        display: flex;
        justify-content: center;
        margin-bottom: 10px;
    }
    .styled-pagination li a {
        min-width: 38px;
        height: 38px;
        line-height: 38px;
        padding: 0 10px;
        font-size: 14px;
        border-radius: 8px;
    }

    /* === 18. 搜索弹窗优化 === */
    .search-popup .search-form input {
        font-size: 16px;
        border-radius: 8px;
    }
    .search-popup .search-form .theme-btn {
        border-radius: 8px;
    }

    /* === 19. 结果页（404/success） === */
    .result-section {
        padding: 50px 0 70px;
    }
    .result-box h2 {
        font-size: 22px !important;
    }
    .result-box .text {
        font-size: 14px !important;
    }

    /* === 20. auto-container 移动端减边距 === */
    .auto-container {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

} /* End @media max-width:767px */

/* ---------- 超小屏（≤380px）进一步优化 ---------- */
@media only screen and (max-width: 380px) {
    .shop-section .shop-item,
    .related-products .shop-item {
        width: 100% !important;
    }
    .app-tabbar .tab-item {
        font-size: 10px;
    }
    .app-tabbar .tab-item i {
        font-size: 18px;
    }
}