/* ============================================================
   茶叶产品电子画册 前台样式（复刻 xf.106917.com 视觉 + PC 响应式）
   设计稿宽 1418px，1rem = 100px（手机端由 JS 计算）
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body { font-family: "SourceHanSansCN", "PingFang SC", "Microsoft YaHei", sans-serif; color: #333; background: #fff; }
#app, .h5 { height: 100%; overflow: hidden; }
.h5 { overflow-y: scroll; -webkit-overflow-scrolling: touch; }
img { display: block; border: none; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }

/* ---------- header ---------- */
.header-bar {
    display: flex; justify-content: space-between; align-items: center;
    background: #fff; padding: 1.3rem 1.42rem .55rem 1.55rem; flex-shrink: 0;
    position: relative; z-index: 20;
}
.header-bar .header_logo { width: auto; max-width: 4.5rem; height: 1.16rem; }
.header-left, .header-aside { display: flex; align-items: center; }
/* 内容页右侧 logo */
.header_logo--right { display: flex; justify-content: flex-end; }
/* 返回按钮：纯大号箭头（无背景无描边） */
.header-back {
    display: inline-flex; align-items: center; justify-content: center;
    color: #5a4936; cursor: pointer; flex-shrink: 0; user-select: none;
    padding: .16rem .3rem .16rem 0; margin-left: -.08rem;
    transition: opacity .2s;
}
.header-back svg { width: .96rem; height: .96rem; }
.header-back:active { opacity: .55; }
/* logo 图片：按高度等比显示，不变形 */
.header_logo img { height: 100%; width: auto; max-width: 100%; object-fit: contain; }
/* 品牌区（设计稿：书法字 + 红色印章） */
.brand { display: flex; align-items: center; height: 100%; }
.brand-name {
    font-family: "STKaiti", "KaiTi", "Kaiti SC", "SimSun", serif;
    font-size: .64rem; font-weight: 700; color: #1f1b16; letter-spacing: .08rem; line-height: 1;
}
.brand-seal {
    display: inline-block; width: .3rem; height: .3rem; line-height: .3rem; text-align: center;
    background: #a8322a; color: #fff; border-radius: .05rem; font-size: .19rem;
    margin-left: .06rem; margin-top: .2rem; font-family: "SimSun", serif; letter-spacing: 0;
}
/* 首页两行标语（设计稿：英文墨绿 + 中文深灰） */
.slogan-two { text-align: right; }
.slogan-two .slogan-en { font-size: .26rem; color: #33502f; letter-spacing: .03rem; line-height: 1.3; font-weight: 500; }
.slogan-two .slogan-cn { font-size: .28rem; color: #4a4a4a; letter-spacing: .04rem; line-height: 1.4; margin-top: .05rem; }
.logo-text { font-size: .6rem; font-weight: 700; color: #856d51; letter-spacing: .1rem; line-height: 1.16rem; }
.slogon-text { height: .41rem; font-size: .44rem; font-weight: 400; color: #856d51; letter-spacing: .05rem; }

/* 首页分类横幅（设计稿：米褐色 + 左侧标题 + 右侧茉莉花线条） */
.home-banner {
    background: #c4b7a5; display: flex; align-items: center; justify-content: space-between;
    /* 宽度与产品区对齐（左右外边距 = 产品网格 padding） */
    margin: 0 .98rem .1rem; padding: .5rem .6rem;
    border-radius: .06rem;
}
.home-banner .banner-text { flex: 1; min-width: 0; }
.home-banner .banner-text h1 {
    font-size: .5rem; color: #fff; font-weight: 700; letter-spacing: .05rem; line-height: 1.3;
    font-family: "SourceHanSerifCN", "STSong", "SimSun", serif;
}
.home-banner .banner-text p {
    font-size: .26rem; color: rgba(255, 255, 255, .88); letter-spacing: .03rem; margin-top: .08rem;
}
.home-banner .banner-flower { width: 1.4rem; height: 1.4rem; margin-left: .4rem; flex-shrink: 0; opacity: .95; }
.home-banner .banner-flower svg { width: 100%; height: 100%; }
/* 横幅带背景图（文字叠加白字 + 阴影保证可读） */
.home-banner.banner-has-bg {
    background-size: cover; background-position: center; background-repeat: no-repeat;
    min-height: 2.2rem;
}
.home-banner.banner-has-bg .banner-text h1 { text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
.home-banner.banner-has-bg .banner-text p { color: rgba(255, 255, 255, .92); text-shadow: 0 1px 4px rgba(0, 0, 0, .35); }

/* 首页加载更多提示 */
.load-more {
    text-align: center; color: #bbb; font-size: .32rem; letter-spacing: .04rem;
    padding: .5rem 0 .9rem;
}

/* 3D 展示按钮 */
.tap-3d-link {
    width: 2rem; height: 2rem; border-radius: 50%; background: rgba(129,109,85,.9); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: .6rem; font-weight: 700;
}

/* ---------- 首页产品两列网格 ---------- */
.h5-content > .category-list { padding: 0 .98rem; }
.category-content { padding: 0 .98rem .98rem; }
.category-list { display: flex; flex-wrap: wrap; }
.category-list-item {
    width: 5.93rem; flex-shrink: 0; margin: .6rem 0 0; cursor: pointer;
    animation: slideDown .6s ease-in-out forwards; opacity: 0;
}
.category-list-item:active { filter: brightness(.9); }
.category-list-item:nth-of-type(2n-1) { margin-right: .31rem; }
.category-list-item .category_image {
    width: 5.93rem; height: 3.66rem; overflow: hidden; background: #f7f7f7; position: relative;
    display: flex; align-items: center; justify-content: center;
}
/* 首页产品图：按 1070×660 比例完整显示（不裁切） */
.category_image img { width: 100%; height: 100%; object-fit: contain; }
.suit_image img { min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%; }
.product-tag {
    position: absolute; top: 0; right: 0; z-index: 2;
    background: #a8322a; color: #fff; font-size: .24rem; line-height: 1.5;
    padding: .04rem .14rem; border-radius: 0 0 0 .12rem; letter-spacing: .02rem;
}
.product-tag.detail-tag { position: absolute; top: .2rem; right: .2rem; font-size: .3rem; padding: .06rem .2rem; border-radius: .1rem; }
/* 首页卡片文字（设计稿：居中，中文暖棕 + 英文浅灰） */
.category-list-item .category_title {
    height: auto; padding: 0; margin: .22rem 0 0; font-size: .44rem; font-weight: 400;
    color: #8a7050; line-height: 1.4; position: static; font-family: "SourceHanSansCN", "PingFang SC", sans-serif;
    letter-spacing: .05rem; text-align: center;
}
.category-list-item .category_title:after { display: none; }
.category-list-item .category_title_en {
    font-size: .27rem; color: #aaaaaa; text-align: center; margin-top: .06rem;
    letter-spacing: .02rem; line-height: 1.3;
}

/* ---------- 套系卡片（分类页） ---------- */
.suit-item {
    width: 5.93rem; margin-top: .25rem; margin-bottom: .7rem; cursor: pointer;
    animation: slideDown .6s ease-in-out forwards; opacity: 0;
}
.suit-item:active { filter: brightness(.9); }
.suit-item:nth-of-type(2n-1) { margin-right: .32rem; }
.suit-item .suit_image { width: 5.93rem; height: 3.56rem; overflow: hidden; }
.suit-item .suit__info { margin-top: .22rem; display: flex; justify-content: space-between; align-items: center; }
.suit__info .suit_title { font-family: "SourceHanSansCN"; color: #666; font-size: .45rem; font-weight: 700; letter-spacing: .05rem; }
.suit__info .suit_price { font-size: .45rem; font-weight: 700; font-family: "SourceHanSerifCN", serif; color: #333; letter-spacing: .05rem; }
.suit_price .price-prefix { font-size: .95em; padding-right: .06rem; }

/* ---------- 详情页 ---------- */
.suit-content { position: relative; }
/* 产品标题区（轮播图下方） */
.product-head { padding: .42rem .84rem .06rem; }
.product-head h1 { font-size: .56rem; font-weight: 700; color: #8a7050; letter-spacing: .04rem; line-height: 1.4; }
.product-head .p-en { font-size: .32rem; color: #aaaaaa; letter-spacing: .03rem; margin-top: .08rem; }
.product-head .p-sub { font-size: .38rem; color: #666666; margin-top: .2rem; line-height: 1.6; }
.product-head .p-price { font-size: .48rem; color: #a8322a; font-weight: 700; margin-top: .2rem; font-family: "SourceHanSerifCN", serif; }
.product-head .p-price .price-prefix { font-size: .8em; padding-right: .04rem; }
/* 产品详情区块 */
.detail-section { padding: .4rem .84rem 1rem; }
.detail-section .spec-title { font-size: .5rem; color: #333; margin-bottom: .3rem; font-weight: 700; }
.unit-swiper { position: relative; }
.unit-swiper .tap-3d-link { width: 2rem; height: 2rem; position: absolute; right: .8rem; bottom: 1rem; z-index: 100; }
.unit-swiper-image__wrapper { height: 9.55rem; width: 14.18rem; }
.unit-swiper-image { min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%; }
.swiper-pagination-bullet { background-color: transparent; border: 1px solid #fff; height: .17rem; width: .17rem; }
.swiper-pagination .swiper-pagination-bullet-active { background-color: #fff; opacity: 1; }
:root { --swiper-theme-color: #fff; }

/* 变体 */
.variant-section { padding: .4rem .84rem; }
.variant-tabs { display: flex; gap: .3rem; margin-bottom: .3rem; overflow-x: auto; }
.variant-tab {
    padding: .15rem .4rem; border-radius: .1rem; font-size: .36rem;
    background: #f0f0f0; color: #666; white-space: nowrap; cursor: pointer;
}
.variant-tab.active { background: #856d51; color: #fff; }
.variant-image__wrapper { width: 14.18rem; }
.variant-image { min-width: 100%; max-width: 100%; height: auto; }

/* 分组 */
.unit-group-section { margin-bottom: .4rem; }
.unit-group-title {
    font-size: .52rem; font-weight: 700; color: #333;
    padding: .4rem .84rem .2rem; display: flex; align-items: center;
}
.unit-group-title:before {
    content: ""; display: inline-block; width: .22rem; height: .22rem;
    background: #856d51; border-radius: 50%; margin-right: .2rem; flex-shrink: 0;
}
.unit-group-image { padding: 0 .84rem; margin-bottom: .2rem; }
.unit-group-image img { width: 100%; height: auto; border-radius: .16rem; }

/* 单品 3 列 */
.suit .unit-list { display: flex; flex-wrap: wrap; padding: .56rem .84rem; }
.unit-item {
    margin-bottom: .39rem; margin-right: .15rem; width: 4.06rem; overflow: hidden;
    color: #333; animation: zoomIn .3s ease-out;
}
.unit-item:nth-of-type(3n) { margin-right: 0; }
.unit-item .unit_image { width: 4.06rem; height: 2.942rem; overflow: hidden; cursor: pointer; }
.unit_image img { min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%; }
.unit-item .unit_title { margin-top: .22rem; font-size: .45rem; font-family: "SourceHanSansCN"; font-weight: 700; color: #333; word-break: break-all; }
.unit-item .unit_size { margin-top: .25rem; font-size: .45rem; font-family: "SourceHanSansCN"; font-weight: 700; color: #666; text-overflow: ellipsis; word-break: keep-all; width: 100%; }
.unit-item .unit_size_multi { font-size: .36rem; line-height: 1.5; }
.unit-item .unit_price { margin-top: .2rem; font-size: .45rem; font-family: "SourceHanSansCN"; font-weight: 700; color: #333; }
.unit_price .price-prefix { padding-right: .06rem; }

/* 规格参数表 */
.spec-section { padding: .4rem .84rem; background: #f8f6f3; }
.spec-title { font-size: .5rem; color: #333; margin-bottom: .3rem; font-weight: 700; }
.spec-table { background: #fff; border-radius: .2rem; overflow: hidden; }
.spec-row { display: flex; justify-content: space-between; padding: .3rem .4rem; border-bottom: 1px solid #f0f0f0; font-size: .4rem; }
.spec-row:last-child { border-bottom: none; }
.spec-name { color: #333; font-weight: 500; }
.spec-dims { color: #888; }

/* 富文本详情 */
.info { font-size: .6em; padding: .2rem; word-break: break-word; overflow: hidden; }
.info img { max-width: 100%; height: auto; }
.info p { padding: 0 1.2rem; }

/* ---------- 返回按钮 ---------- */
.nav-back-button {
    padding: .2rem .4rem; width: .5rem; word-break: break-all; border-radius: .9rem;
    font-size: .5rem; position: fixed; right: .4rem; bottom: 20%;
    display: flex; align-items: center; justify-content: center;
    background-color: #816d55; color: #fff; z-index: 100; cursor: pointer;
    opacity: 0; animation: navZoomIn .6s ease-in-out forwards;
}
.nav-back-button img { max-width: 100%; }
@keyframes navZoomIn { 0% { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: .9; } }

/* ---------- 继续下滑指示 ---------- */
.more-indicator { position: relative; height: 2rem; }
.more-icon {
    position: fixed; bottom: 1rem; left: 50%; width: .7rem; height: .7rem;
    border-left: 2px solid #856d51; border-bottom: 2px solid #856d51;
    transform: translateX(-50%) rotate(-45deg) scale(.5); opacity: 0;
    transition: all .6s ease-in-out;
}
.more-icon--shown { opacity: 1; transform: translateX(-50%) rotate(-45deg) scale(1); }
.more-icon--hidden { opacity: 0; transform: translateX(-50%) rotate(-45deg) scale(.5); }
#touched-bottom-el { height: 1px; }

/* ---------- 动画 ---------- */
@keyframes slideDown { 0% { opacity: 0; transform: translateY(-30%); } to { opacity: 1; transform: translateY(0); } }
@keyframes zoomIn { 0% { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------- OEM / 关于 / 联系 内容页 ---------- */
.content-page { padding: .3rem .98rem 1.5rem; }
.content-block { margin-bottom: .8rem; }
.content-block h2 {
    font-size: .56rem; font-weight: 700; color: #333; margin-bottom: .3rem;
    padding-left: .22rem; border-left: .08rem solid #856d51;
}
.content-block .block-img { width: 100%; border-radius: .16rem; margin-bottom: .25rem; }
.content-block .block-desc { font-size: .45rem; color: #666; line-height: 1.7; }
.content-rich { font-size: .45rem; color: #333; line-height: 1.8; }
.content-rich img { max-width: 100%; height: auto; border-radius: .12rem; }
.content-rich p { margin-bottom: .3rem; }

/* OEM 流程 */
.flow-list { padding: .1rem .2rem; }
.flow-item { display: flex; margin-bottom: .5rem; }
.flow-item .flow-no {
    width: .8rem; height: .8rem; border-radius: 50%; background: #856d51; color: #fff;
    font-size: .42rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; margin-right: .3rem; margin-top: .05rem;
}
.flow-item .flow-body h3 { font-size: .48rem; color: #333; margin-bottom: .08rem; }
.flow-item .flow-body p { font-size: .42rem; color: #666; line-height: 1.6; }

/* 资质 */
.cert-grid { display: flex; flex-wrap: wrap; gap: .3rem; }
.cert-item { width: 4.2rem; }
.cert-item img { width: 100%; height: 3rem; object-fit: cover; border-radius: .12rem; }
.cert-item p { font-size: .38rem; color: #666; text-align: center; margin-top: .1rem; }

/* OEM 实力图文块 */
.gallery-grid { display: flex; flex-wrap: wrap; gap: .3rem; }
.gallery-item { width: 4.2rem; }
.gallery-item img { width: 100%; height: 3rem; object-fit: cover; border-radius: .12rem; }
.gallery-item h4 { font-size: .42rem; color: #333; margin-top: .08rem; }
.gallery-item p { font-size: .36rem; color: #999; line-height: 1.5; }

/* 联系 */
.contact-info { background: #fff; border-radius: .2rem; padding: .4rem .5rem; box-shadow: 0 2px 12px rgba(0,0,0,.04); }
.contact-row { display: flex; padding: .25rem 0; border-bottom: 1px solid #f5f5f5; font-size: .45rem; }
.contact-row:last-child { border-bottom: none; }
.contact-row .c-label { color: #856d51; font-weight: 700; width: 2.2rem; flex-shrink: 0; }
.contact-row .c-value { color: #333; word-break: break-all; }
.contact-qr { text-align: center; margin-top: .3rem; }
.contact-qr img { width: 3.5rem; height: 3.5rem; border-radius: .12rem; margin: 0 auto; }
.contact-qr p { font-size: .38rem; color: #999; margin-top: .1rem; }
.person-card {
    background: #fff; border-radius: .2rem; padding: .35rem .45rem; margin-bottom: .3rem;
    box-shadow: 0 2px 12px rgba(0,0,0,.04); display: flex; justify-content: space-between; align-items: center;
}
.person-card .p-info .p-name { font-size: .48rem; font-weight: 700; color: #333; }
.person-card .p-info .p-pos { font-size: .38rem; color: #999; margin-top: .04rem; }
.person-card .p-tels { text-align: right; font-size: .4rem; color: #666; line-height: 1.7; }
.person-card .p-tels a { color: #856d51; }

/* ---------- 空状态 / 404 ---------- */
.empty-box { text-align: center; padding: 2rem 0; color: #999; font-size: .45rem; }
.empty-box a { color: #856d51; text-decoration: underline; }

/* ---------- 图片预览 ---------- */
.img-preview {
    position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 9999;
    display: flex; align-items: center; justify-content: center;
}
.img-preview img { max-width: 100%; max-height: 100%; }
.img-preview .pv-close {
    position: absolute; top: .8rem; right: .8rem; width: .8rem; height: .8rem; line-height: .8rem;
    text-align: center; color: #fff; font-size: .7rem; cursor: pointer; border: 1px solid rgba(255,255,255,.6); border-radius: 50%;
}
.img-preview .pv-prev, .img-preview .pv-next {
    position: absolute; top: 50%; transform: translateY(-50%); width: .8rem; height: .8rem; line-height: .8rem;
    text-align: center; color: #fff; font-size: .6rem; cursor: pointer; border: 1px solid rgba(255,255,255,.6); border-radius: 50%; background: rgba(0,0,0,.3);
}
.img-preview .pv-prev { left: .4rem; }
.img-preview .pv-next { right: .4rem; }

/* ============================================================
   PC 响应式（> 768px）
   ============================================================ */
@media screen and (min-width: 769px) {
    html { font-size: 100px; }
    body { background: #f5f3f0; }
    #app, .h5 { max-width: 1200px; margin: 0 auto; background: #fff; box-shadow: 0 0 30px rgba(0,0,0,.06); }
    .header-bar { padding: 30px 40px 18px; }
    .header-bar .header_logo { width: auto; max-width: 450px; height: 76px; }
    .header-back { padding: 10px 18px 10px 0; }
    .header-back svg { width: 46px; height: 46px; }
    .slogon-text { font-size: 20px; }
    .h5-content > .category-list { padding: 0 40px 30px; }
    .category-list-item, .suit-item { width: 260px; margin: 16px 18px 20px 0; }
    .category-list-item:nth-of-type(2n-1), .suit-item:nth-of-type(2n-1) { margin-right: 18px; }
    .category-list-item .category_image { width: 260px; height: 160px; }
    .suit-item .suit_image { width: 260px; height: 156px; }
    .category-list-item .category_title { font-size: 19px; height: auto; line-height: 1.4; padding: 0; }
    .category-list-item .category_title_en { font-size: 13px; }
    .home-banner { margin: 0 40px 12px; padding: 22px 24px; border-radius: 6px; }
    .home-banner .banner-text h1 { font-size: 24px; }
    .home-banner .banner-text p { font-size: 14px; }
    .home-banner .banner-flower { width: 52px; height: 52px; }
    .brand-name { font-size: 30px; }
    .brand-seal { width: 15px; height: 15px; line-height: 15px; font-size: 10px; margin-top: 8px; }
    .slogan-two .slogan-en { font-size: 13px; }
    .slogan-two .slogan-cn { font-size: 14px; }
    .suit__info .suit_title, .suit__info .suit_price { font-size: 20px; }
    .suit .unit-list { padding: 20px 40px; }
    .unit-item { width: 200px; margin-right: 12px; margin-bottom: 16px; }
    .unit-item:nth-of-type(3n) { margin-right: 12px; }
    .unit-item:nth-of-type(5n) { margin-right: 0; }
    .unit-item .unit_image { width: 200px; height: 145px; }
    .unit-item .unit_title, .unit-item .unit_size, .unit-item .unit_price { font-size: 20px; }
    .unit-swiper-image__wrapper { width: 1200px; height: 808px; }
    .variant-image__wrapper { width: 1200px; }
    .unit-group-title { font-size: 24px; padding: 16px 40px 8px; }
    .unit-group-image { padding: 0 40px; }
    .variant-section { padding: 16px 40px; }
    .variant-tab { font-size: 16px; }
    .spec-section { padding: 16px 40px; }
    .spec-title { font-size: 22px; }
    .spec-row { font-size: 18px; padding: 12px 18px; }
    .product-head { padding: 22px 40px 6px; }
    .product-head h1 { font-size: 26px; }
    .product-head .p-en { font-size: 15px; }
    .product-head .p-sub { font-size: 17px; }
    .product-head .p-price { font-size: 22px; }
    .detail-section { padding: 16px 40px 40px; }
    .detail-section .spec-title { font-size: 22px; }
    .product-tag { font-size: 12px; }
    .product-tag.detail-tag { font-size: 14px; top: 20px; right: 20px; }
    .content-page { padding: 20px 40px 60px; }
    .content-block h2 { font-size: 26px; }
    .content-block .block-desc { font-size: 20px; }
    .content-rich { font-size: 20px; }
    .flow-item .flow-no { width: 36px; height: 36px; font-size: 20px; }
    .flow-item .flow-body h3 { font-size: 22px; }
    .flow-item .flow-body p { font-size: 19px; }
    .cert-item, .gallery-item { width: 230px; }
    .cert-item img, .gallery-item img { height: 160px; }
    .cert-item p { font-size: 17px; }
    .gallery-item h4 { font-size: 19px; }
    .gallery-item p { font-size: 16px; }
    .contact-row { font-size: 20px; }
    .contact-qr img { width: 160px; height: 160px; }
    .person-card .p-name { font-size: 22px; }
    .person-card .p-tels { font-size: 18px; }
    .nav-back-button { width: 44px; font-size: 22px; }
    .more-icon { width: 30px; height: 30px; }
}