/* ============================================================
   香栖手工床垫 · 官网首页改造样式表 (theme-home.css)
   亢金龙昭 2026-09-07 制作
   - 独立文件，挂载于 index.htm，不覆盖模板原 style.css
   - 规范色：主棕橙 #A84A12 / 深棕 #6E2C08 / 墨棕正文 #3B2114
            奶油底 #FFFBEA / 亚麻 #E8D5B5 / 鼠尾草绿 #788564(仅环保辅助)
   覆盖顺序：style.css → responsive.css → theme-home.css(本文件)
   ============================================================ */

/* ---------- 1. Hero 单图大标题（取代 owl 双图轮播） ---------- */
.banner-hero { position: relative; overflow: hidden; }
.banner-hero .slide-item { position: relative; line-height: 0; }
.banner-hero .slide-item img {
    width: 100%;
    height: min(72vh, 780px);
    object-fit: cover;
    object-position: center;
    display: block;
}
/* 广告位 pid=2 存在多条时，仅展示首张，其余隐藏（保留后台换图能力） */
.banner-hero .slide-item + .slide-item { display: none; }
/* 深棕方向性遮罩：顶部压暗保证 h1 对比，底部过渡进下一区块 */
.banner-hero .slide-item:after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(59, 33, 20, 0.38) 0%,
        rgba(59, 33, 20, 0.10) 42%,
        rgba(110, 44, 8, 0.10) 78%,
        rgba(110, 44, 8, 0.34) 100%);
    z-index: 5;
    pointer-events: none;
}
@media screen and (max-width: 768px) {
    .banner-hero .slide-item img { height: 58vh; }
}

/* ---------- 2. 关于香栖：装饰修正 ---------- */
/* 品牌叙事盒去掉重复数字徽章（全屏数据统一交给下方统计带），
   纯留 tagline 情感句 —— 用隐藏代替删 HTML，随时可恢复 */
.about-section .brand-meta { display: none; }
.about-section .brand-box { margin-bottom: 26px; }
/* 图上小卡的内嵌图标样式(替换 emoji 后) */
.about-section .image-content .icon-box svg {
    width: 40px; height: 40px;
    stroke: #FFFBEA;
    display: block;
}

/* ---------- 3. 4 大系列 · 2×2 网格（取代 owl 轮播，杜绝克隆重复） ---------- */
.home-series {
    position: relative;
    padding: 96px 0 108px;
    background: #FFFBEA;
}
.home-series .sec-title { margin-bottom: 52px; }
.home-series .sec-title p { color: #A84A12; letter-spacing: 3px; }
.home-series .sec-title h2 { color: #3B2114; line-height: 1.4; }
.series-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px;
    max-width: 1120px;
    margin: 0 auto;
}
.series-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(232, 213, 181, 0.55);
    box-shadow: 0 6px 26px rgba(59, 33, 20, 0.07);
    transition: transform .45s ease, box-shadow .45s ease, border-color .45s ease;
    text-decoration: none;
}
.series-card:hover {
    transform: translateY(-6px);
    border-color: rgba(168, 74, 18, 0.4);
    box-shadow: 0 20px 48px rgba(168, 74, 18, 0.15);
    text-decoration: none;
}
.series-card .sc-img { position: relative; aspect-ratio: 1/1; overflow: hidden; background: #E8D5B5; }
.series-card .sc-img img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    transition: transform .7s ease;
}
.series-card:hover .sc-img img { transform: scale(1.05); }
.series-card .sc-body { padding: 24px 28px 28px; }
.series-card .sc-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.series-card .sc-head h3 {
    font-size: 25px; font-weight: 700; color: #6E2C08;
    margin: 0; letter-spacing: 1px;
}
.series-card .sc-head .sc-arrow {
    font-size: 20px; color: #C89B6A;
    transition: transform .4s ease, color .4s ease;
}
.series-card:hover .sc-arrow { transform: translateX(6px); color: #A84A12; }
.series-card .sc-body p {
    font-size: 14.5px; line-height: 1.8; color: #6b5a4d;
    margin: 0 0 14px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.series-card .sc-more {
    font-size: 13px; font-weight: 600; color: #A84A12; letter-spacing: 2px;
    padding-bottom: 3px; border-bottom: 1px solid transparent;
    transition: border-color .35s ease;
}
.series-card:hover .sc-more { border-bottom-color: #A84A12; }

/* ---------- 4. 统计带 funfact：emoji 换 SVG 后的图标规整 ---------- */
.funfact-section .icon-box svg {
    width: 52px; height: 52px;
    stroke: #A84A12; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
    display: inline-block;
}

/* ---------- 5. 定制流程 · 六步交付卡（取代空转的文章列表） ---------- */
.home-flow {
    position: relative;
    padding: 104px 0 116px;
    background: #fff;
}
.home-flow .sec-title { margin-bottom: 54px; }
.home-flow .sec-title p { color: #A84A12; letter-spacing: 3px; }
.home-flow .sec-title h2 { color: #3B2114; line-height: 1.4; }
.flow-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 22px;
    max-width: 1200px;
    margin: 0 auto;
}
.flow-card {
    position: relative;
    background: #FFFBEA;
    border: 1px solid rgba(232, 213, 181, 0.6);
    border-radius: 14px;
    padding: 30px 22px 28px;
    text-align: center;
    transition: transform .4s ease, box-shadow .4s ease, background .4s ease;
}
.flow-card:hover {
    transform: translateY(-5px);
    background: #fff;
    box-shadow: 0 14px 34px rgba(168, 74, 18, 0.12);
}
.flow-card .fc-num {
    display: block;
    font-size: 22px; font-weight: 900; color: #A84A12;
    letter-spacing: 1px; margin-bottom: 14px;
}
.flow-card .fc-num:after {
    content: ''; display: block;
    width: 30px; height: 2px; background: #E8D5B5;
    margin: 12px auto 0;
}
.flow-card h4 {
    font-size: 19px; font-weight: 700; color: #6E2C08;
    margin: 0 0 10px;
}
.flow-card p {
    font-size: 13px; line-height: 1.75; color: #6b5a4d;
    margin: 0;
}
.flow-grid .fc-go {
    grid-column: 1 / -1;
    text-align: center;
    margin-top: 10px;
}

/* ---------- 6. 香栖动态 · 静态 3 卡网格（取代 carousel 伸出布局） ---------- */
.home-news { position: relative; }
.home-news .news-title-side { margin-bottom: 30px; }
.home-news .news-title-side .sec-title { margin-bottom: 24px; }
.home-news .news-title-side .side-sub {
    font-size: 15px; line-height: 1.9; color: #6b5a4d;
    margin-bottom: 24px;
}
.home-news .side-all {
    display: inline-block;
    font-size: 14px; font-weight: 600; color: #A84A12;
    border-bottom: 1px solid #A84A12; padding-bottom: 3px;
    text-decoration: none; letter-spacing: 1px;
}
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}
.article-card {
    display: flex; flex-direction: column;
    background: #fff;
    border-radius: 12px; overflow: hidden;
    border: 1px solid rgba(232, 213, 181, 0.5);
    box-shadow: 0 4px 18px rgba(59, 33, 20, 0.05);
    transition: transform .4s ease, box-shadow .4s ease;
    text-decoration: none; height: 100%;
}
.article-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 36px rgba(59, 33, 20, 0.10);
    text-decoration: none;
}
.article-card .ac-cover { position: relative; aspect-ratio: 16/10; overflow: hidden; background: linear-gradient(135deg, #E8D5B5, #C89B6A); }
.article-card .ac-cover img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    transition: transform .6s ease;
}
.article-card:hover .ac-cover img { transform: scale(1.06); }
/* 无封面图时的品牌占位 */
.article-card .ac-cover .ac-ph {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: rgba(110, 44, 8, 0.55);
    font-size: 22px; font-weight: 700; letter-spacing: 6px;
}
.article-card .ac-cover .ac-date {
    position: absolute; right: 14px; bottom: 12px;
    background: rgba(59, 33, 20, 0.82);
    color: #FFFBEA; font-size: 12px; line-height: 1;
    padding: 7px 11px; border-radius: 6px; z-index: 2;
    backdrop-filter: blur(2px);
}
.article-card .ac-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.article-card .ac-cat {
    display: inline-block; align-self: flex-start;
    font-size: 12px; font-weight: 600; color: #A84A12;
    background: rgba(168, 74, 18, 0.08);
    padding: 4px 10px; border-radius: 4px; margin-bottom: 12px;
    letter-spacing: 1px;
}
.article-card h3 {
    font-size: 16px; line-height: 1.6; font-weight: 700; color: #3B2114;
    margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.article-card:hover h3 { color: #A84A12; }
/* 动态区暂无文章时的品牌空态提示（发布文章后自动消失） */
.news-grid:not(:has(.article-card)) {
    display: block;
    background: #fff;
    border: 1px dashed rgba(200, 155, 106, 0.55);
    border-radius: 12px;
    padding: 64px 30px;
    text-align: center;
    color: #a08a6f;
    font-size: 15px;
    line-height: 2;
    letter-spacing: 1px;
}
.news-grid:not(:has(.article-card))::after {
    content: '香栖手记准备中 —— 睡眠小知识、老师傅的故事将陆续上线';
}

/* ---------- 7. 全局残留修正（不依赖动原 css） ---------- */
/* 导航 hover 残留模板绿 #28aa4a → 品牌棕橙（style.css:804 覆盖） */
.main-menu .navigation li a.hover,
.main-menu .navigation > li:hover > a,
.main-menu .navigation > li.current > a { color: #FFFBEA !important; }
/* 工艺区（深棕渐变）右侧 tab 文字卡留白优化 */
.agency-section .content_block_3 .content-box .text p { color: #4a3a2e; }

/* ---------- 8. 响应式 ---------- */
@media screen and (max-width: 1024px) {
    .flow-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media screen and (max-width: 768px) {
    .home-series { padding: 64px 0 72px; }
    .series-grid { grid-template-columns: 1fr; gap: 24px; }
    .series-card .sc-body { padding: 18px 20px 22px; }
    .series-card .sc-head h3 { font-size: 21px; }
    .home-flow { padding: 68px 0 78px; }
    .flow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .flow-card { padding: 22px 16px 20px; }
    .news-grid { grid-template-columns: 1fr; gap: 20px; }
}
@media screen and (max-width: 420px) {
    .flow-grid { grid-template-columns: 1fr; }
}
/* ===== 第六轮：头部交互 + 页脚信息卡修复（2026-09-07） ===== */
/* 1. sticky-header 层级修复：原 z-index:0 导致下拉到页底时正文内容（电话卡/白色区块）盖在头部上 */
.sticky-header{z-index:999}
/* 2. 导航 hover/current 对比度：橙底上原 hover 色同为橙色导致隐身，改奶油米白 */
.main-menu .navigation > li:hover > a,
.main-menu .navigation > li.current > a,
.sticky-header .main-menu .navigation > li:hover > a,
.sticky-header .main-menu .navigation > li.current > a{color:#FFFBEA}
/* 3. hover 指示器：原 shape-1.png 为绿色残留图，替换为奶油色细线 */
.main-header.style-one .main-menu .navigation > li > a:before{background-image:none;background:#FFFBEA;height:3px;border-radius:2px}
/* 4. footer 三张信息卡统一协调：半透明暖棕 + 亚麻图标，去掉中间卡独橙 */
.footer-top .footer-info .single-item .inner,
.footer-top .footer-info .single-item:nth-child(n) .inner{background:rgba(24,12,5,0.45)}
.footer-top .footer-info .single-item .inner .icon-box{color:#E8D5B5}
.footer-top .footer-info .single-item .inner:hover{background:rgba(24,12,5,0.62)}
/* ===== 第七轮：logo可见性 + 头部单行 + 系列卡比例（2026-09-07） ===== */
/* 1. 深色logo一键反白：主头/sticky/移动菜单/footer 统一白色，橙底深底都有对比 */
.main-header .logo-box .logo img,
.sticky-header .logo-box .logo img,
.mobile-menu .nav-logo img,
.main-footer .footer-logo img{filter:brightness(0) invert(1)}
/* 2. PC头部收紧为单行：导航项边距22px×2太肥导致搜索/客服按钮换行 */
.main-header.style-one .outer-box{padding:0 30px}
.main-menu .navigation > li{margin:0 10px}
.main-header .logo-box .logo img{max-height:56px;width:auto}
.main-header .sticky-header .main-menu .navigation > li{padding:22px 0 !important}
/* 3. 系列卡图 1:1→16:9：现在用的是1920×760横幅，1:1过度放大成平色块 */
.series-card .sc-img{aspect-ratio:16/9}
@media screen and (max-width:768px){
  .series-card .sc-img{aspect-ratio:16/10}
}

/* ===== 第十轮：footer三卡等高（2026-09-08） ===== */
/* 企业地址22字在卡内折2行高142px，邮箱/电话单行124px，背景块参差18px；统一min-height拉平 */
.footer-top .footer-info .single-item .inner{min-height:150px}

/* ===== 第十轮·微信客服弹窗（2026-09-08） ===== */
.wx-modal{position:fixed;top:0;left:0;right:0;bottom:0;z-index:99999;display:none;align-items:center;justify-content:center}
.wx-modal.open{display:flex}
.wx-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(24,12,5,0.6);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.wx-box{position:relative;background:#fff;border-radius:16px;padding:20px 20px 22px;width:min(76vw,292px);box-shadow:0 20px 60px rgba(0,0,0,0.35);text-align:center}
.wx-box img{width:100%;height:auto;border-radius:10px;display:block}
.wx-title{margin-top:16px;font-size:17px;color:#3B2114;font-weight:700;letter-spacing:1px}
.wx-tip{margin-top:7px;font-size:12.5px;color:#8a7664;line-height:1.7}
.wx-close{position:absolute;right:-9px;top:-9px;width:30px;height:30px;border-radius:50%;background:#A84A12;color:#fff;border:2px solid #fff;font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background .2s}
.wx-close:hover{background:#6E2C08}
@media screen and (max-width:768px){.wx-box{width:78vw}}

/* 第十轮·补：微信号辅助说明（龙昭 2026-09-08） */
.wx-id{display:inline-block;margin-top:3px;font-size:14.5px;font-weight:700;color:#A84A12;letter-spacing:.5px}