/* ===================================================
   牛夫人 牛肝菌 品牌官网 - 公共样式
   =================================================== */
:root {
  --gold: #9c7c3c;
  --gold-dark: #7d6230;
  --gold-light: #b59a63;
  --brown: #4a3a1e;
  --text: #333;
  --muted: #888;
  --bg: #f3f2ef;
  --line: #e5e2dc;
  --red: #641e14;
  --header-h: 90px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* 保持 PC 字号比例，避免手机浏览器自动放大文字后挤乱布局。 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: #fff;
  font-size: 15px;
  line-height: 1.8;
}
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img { max-width: 100%; display: block; }
.container { width: 1200px; max-width: 1200px; margin: 0 auto; }

/* ===================== 顶部导航 ===================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
.header-inner {
  height: var(--header-h);
  display: flex; align-items: center; gap: 48px;
}
.logo img { height: 56px; width: auto; }
.main-nav { flex: 1; }
.main-nav > ul { display: flex; gap: 44px; }
.main-nav > ul > li { position: relative; }
.main-nav > ul > li > a {
  display: block; line-height: var(--header-h);
  font-size: 16px; font-weight: 600; color: #3c3c3c;
  white-space: nowrap; transition: color .2s;
}
.main-nav > ul > li > a:hover,
.main-nav > ul > li.active > a { color: var(--gold); }
/* 下拉弹窗 */
.dropdown {
  position: absolute; top: calc(var(--header-h) - 14px); left: -18px;
  min-width: 150px;
  background: #fff;
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
  border-radius: 4px;
  padding: 8px 0;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: all .22s ease;
}
.main-nav li:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 20px; font-size: 14px; color: #555;
}
.dropdown a::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold-light); flex: none;
}
.dropdown a:hover { color: var(--gold); background: #faf7f0; }

/* ===================== 页面标题横幅 =====================
   对应设计稿 .group：英文半透明金 + 中文深棕，两行同为 47px，叠压 22px
   =================================================== */
.page-banner {
  text-align: center; padding: 72px 0 40px; position: relative;
}
.page-banner .en {
  font-size: 47px; font-weight: 700; line-height: 82px;
  letter-spacing: 0; color: rgba(139, 110, 61, .37);
  text-transform: uppercase;
  user-select: none;
}
.page-banner .cn {
  font-size: 47px; font-weight: 700; line-height: 82px;
  color: #4f401d; letter-spacing: 0;
  margin-top: -60px; position: relative;
}
@media (max-width: 992px) {
  .page-banner { padding: 44px 0 26px; }
  .page-banner .en,
  .page-banner .cn { font-size: 30px; line-height: 52px; }
  .page-banner .cn { margin-top: -38px; }
}

/* ===================== 内页布局：侧栏 + 内容 ===================== */
.page-body { background: var(--bg); padding: 40px 0 80px; }
/* 关于牛夫人 / 总经理致辞 / 愿景与规划 / 食品安全 / 新闻中心：主体背景色 #FFFFFF */
.about-page, .speech-page, .resp-page, .news-page { background: #ffffff; }
.about-page .page-body {
  background: #ffffff url(/assets/images/bg/homebg1.png) center top / 100% auto no-repeat;
}
.speech-page .page-body,
.resp-page .page-body,
.news-page .page-body { background: #ffffff; }
.page-layout { display: flex; gap: 40px; align-items: flex-start; }
/* 内页侧栏统一使用 .contact-nav / .contact-pill（与新闻中心一致） */
.page-layout > .contact-nav { position: sticky; top: calc(var(--header-h) + 20px); }
.content-area { flex: 1; min-width: 0; }
.content-card {
  background: #fff; border-radius: 6px; padding: 40px 48px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.content-card + .content-card { margin-top: 28px; }
.content-card h2 {
  font-size: 22px; color: var(--brown); margin-bottom: 22px; font-weight: 700;
}
.content-card p { margin-bottom: 14px; text-align: justify; color: #444; }
.section-label {
  font-size: 18px; font-weight: 700; color: var(--brown);
  border-left: 4px solid var(--gold); padding-left: 10px; margin-bottom: 16px;
}

/* ===================== 按钮等 ===================== */
.btn-gold {
  display: inline-block; background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: #fff; padding: 10px 36px; border-radius: 999px; font-size: 15px;
  border: 0; cursor: pointer; letter-spacing: 2px; transition: all .2s;
}
.btn-gold:hover { box-shadow: 0 6px 16px rgba(156,124,60,.4); transform: translateY(-1px); }

/* ===================== 首页 - 像素级还原 ===================== */
.home-hero img { width: 100%; height: auto; display: block; }

.home-full-page,
.page-full {
  position: relative; width: 100%; line-height: 0;
}
.home-full-page > img,
.page-full > img {
  width: 100%; height: auto;
  display: block;
}
.hp-link, .pf-link {
  position: absolute; z-index: 2;
  font-size: 13px; color: var(--gold-dark); letter-spacing: 1px;
  padding: 8px 12px; line-height: 1;
}
.hp-link:hover, .pf-link:hover { color: var(--brown); }
.hp-hotzone, .pf-hotzone {
  position: absolute; z-index: 2; display: block;
  background: rgba(255,255,255,0); border-radius: 4px;
  transition: background .2s;
}
.hp-hotzone:hover, .pf-hotzone:hover { background: rgba(255,255,255,.08); }
.hp-hotzone.round, .pf-hotzone.round { border-radius: 50%; }

/* ===================== 内页通用横幅图（公司文化等） ===================== */
.inner-hero img { width: 100%; height: auto; }

/* ===================================================
   新闻中心（对应 新闻中心 设计稿）
   灰色面板 + 左侧胶囊 + 白色列表 + 分页，与消费者咨询/联系我们同一套侧栏
   =================================================== */
.news-panel {
  position: relative;
  background: rgba(176, 176, 176, .10);
  border-radius: 8px;
  display: flex; align-items: flex-start; gap: 55px;
  padding: 60px 47px 70px 35px;
}
.news-main { flex: 1; min-width: 0; }
.news-card {
  background: #fff;
  padding: 25px 15px 25px 45px;
  display: flex; flex-direction: column; gap: 20px;
}
.news-item { display: flex; gap: 49px; align-items: flex-start; }
.news-item .thumb { flex: none; width: 243px; height: 182px; overflow: hidden; background: #fff; }
.news-item .thumb img { width: 100%; height: 100%; object-fit: cover; }
.news-item .txt { flex: 1; min-width: 0; max-width: 480px; }
.news-item h3 {
  height: 45px; padding-top: 9px;
  border-bottom: 1px solid #cccccc;
  font-size: 22px; line-height: 25px; font-weight: 500; color: #171717;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .2s;
}
.news-item:hover h3 { color: #8b6e3d; }
.news-item .date {
  margin-top: 13px; font-size: 13px; line-height: 17px;
  color: #bababa; font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
}
.news-item p {
  margin-top: 9px; height: 96px; overflow: hidden;
  font-size: 16px; line-height: 24px; color: #bababa;
}
.pagination { display: flex; justify-content: center; gap: 6px; margin-top: 30px; }
.pagination a, .pagination span {
  min-width: 40px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #d6d6d6; border-radius: 3px; background: #fff;
  color: #7d7d7d; font-size: 15px; line-height: 1; padding: 0 10px;
}
.pagination .current { background: #cf0011; border-color: #cf0011; color: #fdfdfd; }
.pagination .dots { font-size: 13.8px; }
.pagination .next,
.pagination .prev { min-width: 77px; }
.pagination a:hover { border-color: #8b6e3d; color: #8b6e3d; }
.pagination .disabled { opacity: .45; cursor: not-allowed; }

/* 新闻加载中 / 空数据 / 加载失败 */
.news-state {
  background: #fff; padding: 90px 20px; text-align: center;
  color: #bababa; font-size: 16px; line-height: 1.8;
}
.news-state p { margin-bottom: 14px; }
.news-retry {
  display: inline-block; padding: 8px 26px; border-radius: 37px;
  border: 1px solid var(--gold); color: var(--gold-dark);
  font-size: 14px; transition: all .2s;
}
.news-retry:hover { background: var(--gold); color: #fff; }

/* 新闻详情富文本正文（后端返回 HTML） */
.detail-content { color: #444; font-size: 15px; line-height: 1.9; }
/* 正文段落首行缩进（中文新闻阅读习惯）；图片单独用 .detail-img 包一层，不受缩进影响 */
.detail-content p { margin-bottom: 20px; text-align: justify; text-indent: 2em; }
.detail-content .detail-img { margin: 26px 0 30px; text-align: center; }
.detail-content img { max-width: 100%; height: auto; display: block; margin: 0 auto; border-radius: 6px; }
/* 富文本内嵌视频：自适应宽度，不撑破正文 */
.detail-content video { max-width: 100%; height: auto; display: block; margin: 26px auto 30px; border-radius: 6px; background: #000; }
/* 若编辑时用了 summernote 原生 video 外链（iframe 嵌入），同样自适应 */
.detail-content iframe { max-width: 100%; display: block; margin: 26px auto 30px; }
.detail-content h2,
.detail-content h3 { margin: 26px 0 14px; color: var(--brown); }
.detail-content ul,
.detail-content ol { margin: 0 0 18px; padding-left: 22px; list-style: revert; }
.detail-content table { width: 100%; border-collapse: collapse; margin-bottom: 18px; }
.detail-content td,
.detail-content th { border: 1px solid var(--line); padding: 8px 12px; }
@media (max-width: 992px) {
  .news-panel { flex-direction: column; gap: 24px; padding: 30px 20px 40px; }
  .news-card { padding: 20px; gap: 18px; }
  .news-item { flex-direction: column; gap: 14px; }
  .news-item .thumb { width: 100%; height: 190px; }
  .news-item .txt { max-width: 100%; }
  .news-item p { height: auto; max-height: 96px; }
}

/* ===================== 产品页 ===================== */
.products-band {
  background: url(/assets/images/bg/282_background_only10.png) center / cover no-repeat;
  padding: 80px 0 100px;
}
.products-band .sec-head { color: #fff; }
.products-band .sec-head .cn { color: #fff; }
.products-band .sub { text-align: center; color: rgba(255,255,255,.85); margin: -30px 0 40px; }
/* 详情区：白色文字卡（红色微旋底层 + #886E3E 内边框）+ 右下角无背景商品主图 */
.prod-detail { position: relative; margin-left: 234px; }
/* 红色底卡：与文字卡等大，整体下移 + 微微旋转，从卡片下方露出。
   放在容器伪元素上（不能用卡片伪元素 + 负 z-index，会被区块背景盖住） */
.prod-detail::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: #d6281a; border-radius: 14px;
  transform: translate(16px, 18px) rotate(-1.6deg);
}
.prod-story {
  background: #fff; border-radius: 14px; padding: 34px 40px 96px;
  position: relative; z-index: 1; margin-left: 0;
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
}
/* 商品主图：透明底 PNG，绝对定位叠在文字卡右下角，不套色块 */
.prod-cover {
  position: absolute; right: -8px; bottom: -44px; z-index: 2;
  width: 290px; height: auto;
  background: transparent;
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.4));
}
/* 文字周围的 #886E3E 内边框（不占布局，纯装饰） */
.prod-story::after {
  content: ""; position: absolute; inset: 16px;
  border: 2px solid #886E3E; border-radius: 9px;
  pointer-events: none;
}
/* 切换产品分类时，四段文案叠放在同一格：容器高度恒等于最高的一段，
   避免页面高度变化导致背景图（cover）重新缩放而「跳动」 */
.prod-stories { display: grid; }
.prod-stories .prod-story { grid-area: 1 / 1; }
.prod-story.is-hidden { visibility: hidden; }
.prod-story h3 { font-size: 24px; color: var(--brown); margin-bottom: 20px; }
.prod-story p { margin-bottom: 14px; text-align: justify; color: #444; }
/* 购买区：保持原有样式，仅底图换成客户提供的背景图 */
.prod-product-card {
  margin: 60px 0 0 234px;
  background: url(/assets/images/bg/287_background_raw.png) center / cover no-repeat;
  border-radius: 8px; padding: 34px 40px;
  display: flex; gap: 34px; align-items: center; color: #fff;
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
}
/* 图框不填色：商品主图为透明底 PNG，直接露出购买区底图 */
.prod-product-card .ph { flex: none; width: 300px; height: 210px; border-radius: 6px; overflow: hidden; background: transparent; }
.prod-product-card .ph img { width: 100%; height: 100%; object-fit: contain; background: transparent; filter: drop-shadow(0 10px 20px rgba(0,0,0,.35)); }
.prod-product-card h4 { font-size: 22px; margin-bottom: 6px; }
.prod-product-card .spec { font-size: 15px; opacity: .9; margin-bottom: 16px; }
.prod-product-card .tags { font-size: 13px; opacity: .8; margin-bottom: 18px; }

/* ===================== 消费者咨询（表单 + QA） ===================== */
.qa-tag {
  display: inline-block; background: var(--gold); color: #fff;
  font-size: 13px; padding: 3px 12px; border-radius: 3px; margin-bottom: 8px;
}
.qa-item { border: 1px solid var(--line); border-radius: 6px; padding: 16px 20px; margin-bottom: 14px; background: #fff; }
.qa-item .q { font-weight: 700; color: #444; font-size: 15px; }
.qa-item .a { color: #777; font-size: 14px; margin-top: 6px; text-align: justify; }
.form-card { background: #fff; border-radius: 6px; padding: 36px 60px; box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.form-row { display: flex; align-items: center; margin-bottom: 18px; gap: 14px; }
.form-row label { width: 60px; flex: none; text-align: right; color: #555; font-size: 14px; }
.form-row input, .form-row textarea {
  flex: 1; border: 1px solid #ddd; border-radius: 4px; padding: 9px 12px; font-size: 14px; outline: none;
}
.form-row input:focus, .form-row textarea:focus { border-color: var(--gold); }
.captcha-row { display: flex; gap: 12px; align-items: center; }
.captcha-code {
  width: 92px; height: 38px; flex: none; border-radius: 4px;
  background: linear-gradient(135deg, #f2e3c8, #e4cba0);
  display: flex; align-items: center; justify-content: center;
  font-family: Georgia, serif; font-size: 20px; font-style: italic; font-weight: 700;
  letter-spacing: 4px; color: #8a5a2a; user-select: none;
}
.form-tip { font-size: 13px; color: var(--gold); margin: 4px 0 0 74px; min-height: 20px; }

/* ===================== 联系我们 ===================== */
.contact-flex { display: flex; gap: 0; align-items: stretch; }
.qr-box { text-align: center; padding: 20px 28px; }
.qr-box img { width: 150px; height: 150px; object-fit: cover; border: 1px solid var(--line); }
.qr-box p { margin-top: 10px; font-size: 14px; color: #555; }
.hotline {
  border-left: 1px solid var(--line); padding: 20px 40px; display: flex; flex-direction: column; justify-content: center; gap: 22px;
}
.hotline .item { display: flex; gap: 16px; align-items: flex-start; }
.hotline .item svg { width: 42px; height: 42px; stroke: var(--gold); flex: none; fill: none; }
.hotline .item h5 { font-size: 16px; color: var(--brown); }
.hotline .item p { font-size: 20px; font-weight: 700; color: #333; letter-spacing: 1px; }
.hotline .item small { color: #888; font-size: 13px; }

/* 联系我们：面板 + 胶囊入口 + 二维码 + 热线（对应 沟通合作-联系我们 设计稿） */
/* 联系我们页：整体背景色 #FFFFFF */
.contact-page { background: #ffffff; }
.contact-body { background: #ffffff; padding: 40px 0 96px; }
.contact-panel {
  position: relative;
  background: rgba(176, 176, 176, .10);
  border-radius: 8px;
  padding: 60px 70px 56px 35px;
  display: flex;
  align-items: flex-start;
  gap: 44px;
}
/* 消费者咨询 / 联系我们 共用同一套侧边胶囊导航（尺寸、位置完全一致，避免切页跳位） */
.contact-nav { flex: none; width: 188px; display: flex; flex-direction: column; gap: 15px; }
.contact-pill {
  display: flex; align-items: center; gap: 12px;
  width: 188px; height: 44px; border-radius: 37px;
  padding: 0 12px 0 24px;
  font-size: 20px; color: #555; background: #fff;
  border: 1px solid #d8d3c6; transition: all .2s;
}
.contact-pill img, .contact-pill svg { flex: none; width: 28px; height: 28px; object-fit: contain; }
.contact-pill:hover { color: var(--gold-dark); border-color: var(--gold); }
.contact-pill.active {
  background: #8b6e3d; border-color: #8b6e3d; color: #fff;
  box-shadow: 0 6px 16px rgba(139, 110, 61, .32);
}
.contact-cols {
  flex: 1; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  gap: 30px;
}
.contact-qr { flex: none; width: 200px; text-align: center; }
.contact-qr img {
  width: 180px; height: 180px; object-fit: cover; margin: 0 auto;
  border: 1px solid #e5e2dc; background: #fff; padding: 8px;
}
.contact-qr figcaption { margin-top: 12px; font-size: 15px; color: #555; }
.contact-hotline {
  flex: 1; min-width: 300px; padding-left: 40px;
  border-left: 1px solid rgba(0, 0, 0, .06);
  display: flex; flex-direction: column; gap: 30px;
}
.ch-row { display: flex; gap: 20px; align-items: center; }
.ch-row svg { flex: none; width: 54px; height: 54px; stroke: var(--gold); fill: none; }
.ch-txt h4 { font-size: 15px; font-weight: 600; color: var(--gold-dark); letter-spacing: 1px; margin-bottom: 2px; }
.ch-txt p { font-size: 22px; font-weight: 700; color: #333; letter-spacing: 1px; margin: 0; }
/* 服务时间：字号比服务热线小一号，整行不换行 */
.ch-row-time .ch-txt p { font-size: 17px; font-weight: 600; letter-spacing: .5px; white-space: nowrap; }
.contact-mush {
  position: absolute; right: -122px; bottom: -106px;
  width: 286px; height: auto; border-radius: 12px;
  /*box-shadow: 0 16px 30px rgba(0, 0, 0, .18);*/
}
@media (max-width: 992px) {
  .contact-body { padding: 26px 0 60px; }
  .contact-panel { flex-direction: column; padding: 30px 24px 40px; gap: 30px; }
  .contact-nav { width: 100%; flex-direction: row; justify-content: center; }
  .contact-pill { width: auto; flex: 1; max-width: 230px; justify-content: center; }
  .page-layout > .contact-nav { position: static; }
  .contact-cols { flex-direction: column; }
  .contact-qr img { width: 160px; height: 160px; }
  .contact-hotline { min-width: 0; width: 100%; padding-left: 0; border-left: 0; align-items: center; }
  /* 窄屏仍不换行，再降一档字号避免溢出 */
  .ch-row-time .ch-txt p { font-size: 15px; letter-spacing: .3px; }
  .contact-mush { display: none; }
}

/* ===================================================
   官方店铺页（/shop）：淘宝 / 天猫店铺入口
   =================================================== */
.shop-body { padding: 40px 0 96px; }
.shop-tip {
  text-align: center; font-size: 18px; color: #666;
  letter-spacing: 1px; margin-bottom: 36px;
}
.shop-cols {
  display: flex; align-items: stretch; justify-content: center;
  gap: 44px;
}
.shop-card {
  width: 380px;
  background: rgba(176, 176, 176, .10);
  border-radius: 8px;
  padding: 40px 30px 44px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  transition: box-shadow .2s, transform .2s;
}
.shop-card:hover {
  box-shadow: 0 12px 28px rgba(0, 0, 0, .10);
  transform: translateY(-3px);
}
.shop-name {
  font-size: 24px; font-weight: 700; color: #333;
  letter-spacing: 2px; margin-bottom: 24px;
}
.shop-qr {
  width: 280px; height: 280px; object-fit: contain;
  border: 1px solid #e5e2dc; background: #fff; padding: 12px;
  border-radius: 4px;
}
.shop-url {
  margin-top: 16px; font-size: 14px; color: #888;
  letter-spacing: .5px; word-break: break-all;
}
.shop-btn {
  margin-top: 24px;
  display: inline-block;
  padding: 11px 28px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: #fff; font-size: 16px; letter-spacing: 1px;
  transition: all .2s;
}
.shop-btn em { font-style: normal; }
.shop-btn:hover { background: var(--gold-dark); color: #fff; box-shadow: 0 6px 16px rgba(139, 110, 61, .32); }
.shop-note {
  margin-top: 40px; text-align: center;
  font-size: 14px; color: #999; letter-spacing: .5px;
}
@media (max-width: 768px) {
  .shop-body { padding: 26px 0 60px; }
  .shop-cols { flex-direction: column; align-items: center; gap: 30px; }
  .shop-card { width: 100%; max-width: 380px; padding: 30px 20px 36px; }
  .shop-qr { width: 240px; height: 240px; }
}

/* ===================================================
   社会责任子页（愿景与规划 / 食品安全）内容面板
   =================================================== */
.resp-body { padding: 40px 0 96px; }
.resp-panel {
  position: relative;
  background: rgba(176, 176, 176, .10);
  border-radius: 8px;
  padding: 60px 70px 64px;
  display: flex;
  align-items: flex-start;
  gap: 44px;
}
.resp-nav { flex: none; width: 188px; display: flex; flex-direction: column; gap: 15px; }
.resp-pill {
  display: flex; align-items: center; gap: 12px;
  width: 188px; height: 44px; border-radius: 37px;
  padding: 0 12px 0 24px;
  font-size: 20px; color: #555; background: #fff;
  border: 1px solid #d8d3c6; transition: all .2s;
}
.resp-pill img, .resp-pill svg { flex: none; width: 28px; height: 28px; object-fit: contain; }
.resp-pill:hover { color: var(--gold-dark); border-color: var(--gold); }
.resp-pill.active {
  background: #8b6e3d; border-color: #8b6e3d; color: #fff;
  box-shadow: 0 6px 16px rgba(139, 110, 61, .32);
}
.resp-cols { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.v-card {
  background: #fff; border-radius: 6px;
  padding: 34px 42px; box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}
.v-card h3 {
  font-size: 25px; font-weight: 700; color: var(--brown);
  margin-bottom: 16px;
}
.v-card .v-lead { color: #666; font-size: 15px; line-height: 24px; text-align: justify; }
.v-quote {
  position: relative;
  background: #f8f4ea;
  border: 1px solid #e9e2d2; border-radius: 6px;
  padding: 18px 26px 16px 42px;
  color: #666; font-size: 15px; line-height: 24px;
  text-align: justify; margin-bottom: 28px;
}
.v-quote::before {
  content: "\201C";
  position: absolute; left: 15px; top: 12px;
  font-family: Georgia, serif; font-size: 36px; line-height: 1;
  color: var(--gold-light);
}
.v-imgs { display: flex; gap: 14px; margin-bottom: 26px; }
.v-imgs img {
  flex: 1; min-width: 0; height: 160px;
  object-fit: cover; border-radius: 4px;
}
.v-sec { margin-bottom: 26px; }
.v-sec:last-child { margin-bottom: 0; }
.v-sec h4 {
  font-size: 16px; font-weight: 600; color: #4f401d;
  border-bottom: 1px solid #c3c3c3;
  padding-bottom: 10px; margin-bottom: 14px;
}
.v-sec p { color: #666; font-size: 15px; line-height: 24px; text-align: justify; }
@media (max-width: 992px) {
  .resp-body { padding: 26px 0 60px; }
  .resp-panel { flex-direction: column; padding: 30px 24px 40px; gap: 30px; }
  .resp-nav { width: 100%; flex-direction: row; justify-content: center; }
  .resp-pill { width: auto; flex: 1; max-width: 230px; justify-content: center; }
  .v-card { padding: 26px 22px; }
  .v-quote { padding: 16px 18px 14px 34px; }
  .v-imgs { flex-direction: column; }
  .v-imgs img { width: 100%; height: 200px; }
}

/* ===================== 食品安全引言 ===================== */
.quote-block {
  display: flex; gap: 18px; margin: 26px 0 30px; padding: 0 10px;
}
.quote-block .mark { font-size: 60px; line-height: .8; color: var(--red); font-family: Georgia, serif; }
.quote-block .mark.last { align-self: flex-end; }
.quote-block p { font-style: normal; color: #555; text-align: justify; }
.img-row { display: flex; gap: 16px; margin-bottom: 26px; }
.img-row img { width: calc(33.33% - 11px); height: 160px; object-fit: cover; border-radius: 4px; }

/* ===================== 页脚 ===================== */
.site-footer {
  background:
    linear-gradient(rgba(30,24,14,.92), rgba(30,24,14,.92)),
    url(/assets/images/culture-value.jpg) center/cover;
  color: rgba(255,255,255,.75); padding: 54px 0 0; margin-top: 0;
}
.footer-top { display: flex; gap: 48px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.12); }
.footer-brand { flex: none; max-width: 300px; }
.footer-brand img { height: 60px; margin-bottom: 16px; }
.footer-brand p { font-size: 13px; line-height: 1.9; max-width: 300px; }
.footer-brand-en { color: rgba(255,255,255,.5); letter-spacing: 1px; margin-bottom: 6px; }
.footer-col h5 { color: #fff; font-size: 15px; margin-bottom: 16px; letter-spacing: 2px; }
.footer-col a { display: block; font-size: 13px; margin-bottom: 10px; color: rgba(255,255,255,.65); }
.footer-col a:hover { color: var(--gold-light); }
/* 「联系方式」列：内容来自后台基础信息设置，长地址换行不撑破布局 */
.footer-contact { max-width: 220px; }
.footer-address { line-height: 1.7; }
.footer-qr { display: flex; gap: 16px; margin-top: 16px; }
.footer-qr figure { margin: 0; text-align: center; }
.footer-qr img { width: 84px; height: 84px; object-fit: cover; display: block; background: #fff; padding: 3px; border-radius: 3px; }
.footer-qr figcaption { margin-top: 6px; font-size: 11px; line-height: 1.4; color: rgba(255,255,255,.55); }
.copyright { text-align: center; font-size: 12px; color: rgba(255,255,255,.4); padding: 18px 0; }
.copyright a { color: inherit; text-decoration: none; transition: color .2s; }
.copyright a:hover { color: rgba(255,255,255,.75); }
/* 备案号紧跟版权行：版权行收掉下间距，两行之间只留 6px（padding 不合并，必须减上面那一行） */
.copyright-main { padding-bottom: 6px; }
.copyright.beian { padding-top: 0; }

/* 全图页面上的表单覆盖层：设计图在下，交互控件透明覆盖，保持像素级还原 */
.pf-form {
  position: absolute; z-index: 3;
  left: 0; top: 0; width: 100%; height: 100%;
  pointer-events: none;
}
.pf-form input, .pf-form textarea, .pf-form button {
  position: absolute; pointer-events: auto;
  font-family: inherit; font-size: 14px;
  border: 0; border-radius: 2px;
  background: rgba(255,255,255,0);
  color: #444; padding: 0 12px;
  outline: none; transition: background .2s, box-shadow .2s;
}
.pf-form input::placeholder, .pf-form textarea::placeholder { color: transparent; }
.pf-form input:focus, .pf-form textarea:focus {
  background: rgba(255,255,255,.92);
  box-shadow: 0 0 0 1px rgba(156,124,60,.25);
}
.pf-form textarea { resize: none; padding: 10px 12px; line-height: 1.6; }
.pf-form button {
  cursor: pointer; background: rgba(156,124,60,0); color: transparent;
  font-size: 15px; letter-spacing: 2px; padding: 0;
}
.pf-form button:hover { background: rgba(156,124,60,.08); }

/* 返回顶部 */
.back-top {
  position: fixed; right: 26px; bottom: 40px; z-index: 90;
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--gold); color: #fff; font-size: 18px;
  opacity: 0; visibility: hidden; transition: all .25s;
  box-shadow: 0 6px 16px rgba(156,124,60,.45);
}
.back-top.show { opacity: 1; visibility: visible; }
.back-top:hover { background: var(--gold-dark); }


/* ===================================================
   SPA 壳与新闻详情页扩展（Vue 迁移后新增）
   =================================================== */
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
.app-main { flex: 1; display: flex; flex-direction: column; }
.app-main > * { width: 100%; }

/* 新闻详情页 */
.detail-page { background: var(--bg); padding: 40px 0 80px; }
.detail-card {
  background: #fff; border-radius: 6px;
  padding: 52px 64px; box-shadow: 0 2px 10px rgba(0,0,0,.04);
  max-width: 980px; margin: 0 auto;
}
.detail-card h1 {
  font-size: 28px; color: var(--brown); line-height: 1.45;
  text-align: center; margin-bottom: 18px; font-weight: 700;
}
.detail-meta {
  text-align: center; color: var(--gold); font-size: 14px;
  padding-bottom: 24px; margin-bottom: 30px;
  border-bottom: 1px solid var(--line); letter-spacing: 1px;
}
.detail-card .detail-hero { margin-bottom: 30px; }
.detail-card .detail-hero img {
  width: 100%; max-height: 460px; object-fit: cover; border-radius: 6px;
}
.detail-card p {
  margin-bottom: 20px; text-align: justify; color: #444; font-size: 16px; line-height: 2;
}
.detail-back { margin-bottom: 24px; }
.detail-back a {
  display: inline-flex; align-items: center; gap: 6px;
  color: #777; font-size: 14px; transition: color .2s;
}
.detail-back a:hover { color: var(--gold); }

/* ===================================================
   区块大标题（产品&菜系 / 公司文化，与 page-banner 同设计语言）
   =================================================== */
.sec-head { text-align: center; color: var(--brown); margin-bottom: 34px; }
.sec-head .en {
  font-size: 52px; font-weight: 800; letter-spacing: 4px;
  color: transparent; -webkit-text-stroke: 1px rgba(216,210,194,.85);
  text-transform: uppercase; line-height: 1; user-select: none; display: block;
}
.sec-head .cn {
  font-size: 38px; font-weight: 800; color: inherit;
  letter-spacing: 6px; position: relative; margin-top: -30px; display: block;
}
.products-band .sec-head { margin-bottom: 0; }
.products-band .sub { margin: 16px 0 44px; }

/* 产品页：左「分类胶囊」+ 右「内容」双栏（对应「菜品菜系」设计稿） */
.prod-layout { display: flex; align-items: flex-start; gap: 34px; }
.prod-main { flex: 1; min-width: 0; }
.prod-title {
  font-size: 45px; font-weight: 600; color: #fff;
  text-align: center; letter-spacing: 0; margin: 0 0 6px;
}
.prod-sub {
  font-size: 24px; color: #fff; text-align: center; margin: 0 0 40px;
}

/* 产品分类 tab 竖排胶囊（对应「菜品菜系」设计稿） */
.prod-tabs { width: 188px; flex: none; display: flex; flex-direction: column; gap: 13px; }
.prod-tabs a {
  display: flex; align-items: center; gap: 10px;
  width: 188px; height: 42px; border-radius: 37px;
  padding: 0 10px 0 18px;
  border: 1px solid transparent;
  color: #333333; font-size: 18px; letter-spacing: 0; transition: all .2s;
}
.prod-tabs a img, .prod-tabs a svg { flex: none; width: 24px; height: 24px; object-fit: contain; }
/* 冻品 / 零食两组图标原图偏小，稍放大补齐视觉尺寸 */
.prod-tabs a:nth-child(n+3) img, .prod-tabs a:nth-child(n+3) svg { width: 28px; height: 28px; }
.prod-tabs a:hover { color: #cf0011; }
.prod-tabs a.active {
  background: #cf0011; border-color: #cf0011;
  color: #fbfaf5; font-weight: 400;
  box-shadow: 0 6px 16px rgba(207, 0, 17, .28);
}
/* 「牛肝菌菜谱」外链页签（产品&菜系页侧边栏末尾，跳 /recipes）：
   默认显示深色图标，hover 时切换为白色图标 */
.prod-tabs a.prod-tab-recipes .ico-on { display: none; }
.prod-tabs a.prod-tab-recipes:hover { color: #cf0011; }
.prod-tabs a.prod-tab-recipes:hover .ico-off { display: none; }
.prod-tabs a.prod-tab-recipes:hover .ico-on { display: block; }

/* 双栏布局下故事/购买区不再额外左移 */
.products-band .prod-story,
.products-band .prod-detail,
.products-band .prod-product-card { margin-left: 0; }
.products-band .prod-cover { width: 240px; right: -26px; bottom: -56px; }

/* ===================================================
   公司文化（对应 公司文化 设计稿）
   =================================================== */
/* 整页背景图（公司文化设计稿背景图） */
.culture-bg {
  background: url(/assets/images/bg/culturebg.png) center/cover no-repeat;
}
.culture-body { padding: 40px 0 96px; }
/* 与「消费者咨询 / 联系我们」保持同一套侧栏位置：距容器左 35px、距横幅底 100px */
.culture-panel { display: flex; align-items: flex-start; gap: 55px; padding: 60px 0 0 35px; }
.culture-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.culture-pic { width: 100%; height: 335px; object-fit: cover; display: block; }
.culture-mt {
  margin-top: 37px; width: 558px; max-width: 100%;
  font-size: 33.7px; line-height: 55px; font-weight: 700;
  color: #4f401d; text-align: center;
}
.culture-text {
  margin-top: 10px; width: 864px; max-width: 100%;
  font-size: 17.7px; line-height: 29px; color: #000; text-align: center;
}
@media (max-width: 992px) {
  .culture-panel { flex-direction: column; gap: 30px; padding: 30px 0 0; }
  .culture-pic { height: 220px; }
  .culture-mt { margin-top: 24px; font-size: 24px; line-height: 38px; }
  .culture-text { font-size: 15px; line-height: 26px; }
}

/* ===================================================
   首页（真实排版版式）
   =================================================== */

/* ① 首屏 Banner */
.home-hero {
  position: relative;
  height: 800px;
  background: url(/assets/images/home-hero.jpg) center / cover no-repeat;
}
.hero-text { position: absolute; left: 6.5%; bottom: 11%; color: #fff; }
.hero-text h2 { font-size: 42px; letter-spacing: 6px; font-weight: 700; text-shadow: 0 2px 12px rgba(0,0,0,.45); }
.hero-text p { font-size: 36px; letter-spacing: 5px; margin-top: 10px; font-weight: 700; text-shadow: 0 2px 12px rgba(0,0,0,.45); }
.hero-text .fresh { color: #74a845; }
.hero-btn {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 34px; padding: 13px 46px;
  border: 1px solid rgba(255,255,255,.92); border-radius: 999px;
  color: #fff; font-size: 17px; letter-spacing: 4px;
  transition: all .25s;
}
.hero-btn em { font-style: normal; letter-spacing: 0; }
.hero-btn:hover { background: rgba(255,255,255,.16); }

/* ② 品牌介绍 */
.home-about {
  position: relative;
  height: 950px;
  background: url(/assets/images/home/homebg1.png) center / cover no-repeat;
  overflow: hidden;
}
.about-content { position: relative; margin-left: 26.3%; padding: 160px 4% 0 0; }
.about-content .sec-head { margin-bottom: 40px; }
.home-about .sec-head .en,
.home-products .sec-head .en,
.home-news .sec-head .en,
.home-social .sec-head .en,
.home-contact .sec-head .en {
  color: transparent;
  background: linear-gradient(180deg, #976b01 0%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 0;
}
.about-paras { max-width: 980px; margin: 0 auto; }
.about-paras p {
  font-size: 16px; line-height: 2; color: #666;
  text-align: center; margin-bottom: 4px;
}
.about-more {
  display: block;
  text-align: center;
  margin: 26px 0 0;
  color: #8b6e3d;
  font-size: 16px;
  letter-spacing: 4px;
}
.about-more:hover { color: var(--brown); }
.about-bands { display: flex; gap: 10px; margin: 36px 0 0 -10%; }
/* 图片点击放大（后台可换图，不再跳转），给一个可点的视觉提示 */
.about-bands a { flex: 1; display: block; overflow: hidden; cursor: zoom-in; }
.about-bands img { width: 100%; height: 300px; object-fit: cover; display: block; transition: transform .4s; }
.about-bands a:hover img { transform: scale(1.04); }

/* ③ 系列产品 */
.home-products {
  position: relative;
  height: 948px;
  background: url(/assets/images/home/homebg2.png) center / cover no-repeat;
  overflow: hidden;
  padding: 0;
}
.home-products .container { padding-top: 150px; }
.home-products .sec-head { color: var(--brown); }
.home-products .sec-head .cn { color: var(--brown); }
.home-products .sub { margin: 8px 0 42px; color: #6b5636; }
.home-prod-wrap {
  display: flex; flex-direction: row; align-items: center; gap: 44px;
  background: rgba(255,255,255,.4);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 10px;
  padding: 70px 60px 96px;
}
.home-prod-wrap .prod-tabs {
  width: 210px; flex: none;
  display: flex; flex-direction: column; gap: 16px;
}
.home-prod-wrap .prod-tabs a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 10px; border-radius: 999px;
  background: transparent; border: 1px solid transparent;
  color: #666; font-size: 15px; letter-spacing: 1px;
  transition: all .2s;
}
/* 首页系列产品 tab 图标：与产品页共用 01~04 图标 */
.home-prod-wrap .prod-tabs a img { width: 22px; height: 22px; object-fit: contain; }
.home-prod-wrap .prod-tabs a:hover { color: #8b6e3d; }
.home-prod-wrap .prod-tabs a.active {
  background: #8b6e3d; border-color: #8b6e3d;
  color: #fff; font-weight: 600;
  box-shadow: 0 8px 18px rgba(0,0,0,.16);
}
.home-prod-panel {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 24px;
}
.home-prod-panel figure { flex: 1; min-width: 0; text-align: center; }
.home-prod-panel img { height: 165px; width: auto; display: block; margin: 0 auto; }
.home-prod-panel figcaption {
  margin-top: 20px; color: #c81622; font-size: 14px; letter-spacing: 1px;
}

/* ④ 新闻中心 */
.home-news {
  position: relative;
  height: 948px;
  background: url(/assets/images/home/homebg3.png) center / cover no-repeat;
  overflow: hidden;
  padding: 0;
}
.home-news .container { padding-top: 150px; }
.home-news-grid { display: flex; gap: 30px; max-width: 1220px; margin: 0 auto; }
.news-col { flex: 1; display: block; color: inherit; }
/* 透明底图片（PNG）也要有白色衬底，避免透出板块背景 */
.news-col img { width: 100%; height: 300px; object-fit: cover; display: block; background: #fff; }
.news-body {
  background: #fff;
  border: 1px solid #e3e3e3;
  padding: 22px 24px 24px;
  min-height: 190px;
}
.news-col .date { color: #c81622; font-size: 14px; margin: 0 0 10px; letter-spacing: 1px; }
.news-col h3 {
  font-size: 16px; line-height: 1.75; color: #444; font-weight: 600;
  margin-bottom: 0; transition: color .2s;
}
.news-col:hover h3 { color: var(--gold); }

/* ⑤ 社会责任 */
.home-social {
  position: relative;
  height: 948px;
  background: url(/assets/images/home/homebg4.png) center / cover no-repeat;
  overflow: hidden;
  padding-top: 150px;
  text-align: center;
}
.home-social .sec-head { margin-bottom: 44px; }
.social-card {
  width: 1200px; margin: 0 auto;
  background: rgba(255,255,255,.4);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 10px;
  padding: 26px;
  display: flex; gap: 44px; align-items: stretch;
  text-align: left;
}
.social-card > img { flex: none; width: 44%; height: 380px; object-fit: cover; border-radius: 4px; align-self: flex-start; }
/* 主图点击可放大（后台可换图，不跳转） */
.social-card-img { cursor: zoom-in; }
.social-text { flex: 1; padding: 26px 10px 10px 0; }
.social-text p { font-size: 15px; line-height: 2.05; color: #555; text-align: justify; margin-bottom: 26px; }

/* ⑥ 沟通合作 */
.home-contact {
  position: relative;
  height: 948px;
  background: url(/assets/images/home/homebg5.png) center / cover no-repeat;
  overflow: hidden;
  padding: 150px 0 0;
  text-align: center;
}
.home-contact .sec-head { margin-bottom: 10px; }
.contact-icons { display: flex; justify-content: center; gap: 66px; margin: 34px 0 52px; }
.contact-icons a { color: #c81622; font-size: 14px; letter-spacing: 1px; }
.contact-icons .ci {
  width: 58px; height: 58px; margin: 0 auto 10px;
  display: flex; align-items: center; justify-content: center;
  transition: all .25s;
}
.contact-icons .ci img { width: 100%; height: 100%; object-fit: contain; display: block; }
.contact-icons a:hover .ci { transform: scale(1.1); }
.contact-icons em { font-style: normal; }
.join-card {
  width: 900px; margin: 0 auto;
  background: transparent;
  border: 1px solid #866d3f;
}
.join-body { background: transparent; padding: 40px 60px 34px; }
.join-body h3 { font-size: 28px; color: #6b5636; letter-spacing: 6px; margin-bottom: 22px; }
.join-body p { font-size: 15px; color: #666; line-height: 2; }
.join-btn {
  display: block; background: #886d3e; color: #fff;
  font-size: 16px; letter-spacing: 4px; padding: 15px 0;
  transition: background .25s;
}
.join-btn:hover { background: var(--gold-dark); color: #fff; }
/* SUPPORT */
/* 消费者咨询页：整体背景色 #F8F8F8 */
.support-page{background:#f8f8f8;}
.support-body{background:#f8f8f8;padding:40px 0 96px;}
.support-panel{display:flex;align-items:flex-start;gap:55px;padding:60px 0 0 35px;}
.support-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:30px;}
.support-question-card{position:relative;background:#fff;border:1px solid #a9a29a;height:150px;margin-top:20px;}
.support-question-badge{position:absolute;top:-21px;left:50%;transform:translateX(-50%);width:195px;height:41px;}
.support-question-card textarea{display:block;width:100%;height:100%;border:none;padding:14px 16px;font-size:14px;line-height:1.8;resize:none;font-family:inherit;color:#333;outline:none;}
.support-form-card{background:#fff;border:1px solid #a9a29a;padding:32px 38px 30px;}
.support-form-card .form-row{align-items:center;margin-bottom:14px;gap:10px;}
.support-form-card .form-row label{width:57px;flex:none;text-align:left;color:#666;font-weight:700;font-size:15px;}
.support-form-card .form-row input{flex:1;height:34px;border:1px solid #a7a7a7;border-radius:0;padding:0 12px;font-size:14px;}
.support-form-card .form-row input:focus{border-color:var(--gold);outline:none;}
.support-form-card .captcha-row{flex:1;gap:8px;}
.support-form-card .captcha-code{flex:none;width:60px;height:30px;border-radius:0;font-size:16px;letter-spacing:2px;}
.support-form-card .form-inner{width:400px;margin:0 auto;}
.support-form-card .form-tip{margin-left:67px;min-height:18px;}
.support-form-card .submit-wrap{text-align:center;margin-top:20px;}
.support-form-card .btn-gold{width:240px;height:38px;border-radius:19px;font-size:16px;letter-spacing:0;}
.support-qa-card{background:#fff;padding:28px 30px 40px;}
.support-qa-head{display:flex;align-items:baseline;gap:10px;margin-bottom:26px;}
.support-qa-head h2{font-size:25px;color:#4f401d;font-weight:700;}
.support-qa-head small{font-size:11.8px;color:#4f401d;font-weight:700;}
.support-qa-list{display:flex;flex-direction:column;gap:30px;}
.support-qa-item{position:relative;border:1px solid #4f401d;padding:30px 21px 24px;}
.support-qa-item .qa-badge{position:absolute;top:-9px;left:-9px;width:58px;height:40px;object-fit:cover;}
.support-qa-item .q{font-size:15px;font-weight:700;color:#4f401d;line-height:22.5px;}
.support-qa-item .a{margin-top:14px;font-size:14.9px;color:#666;line-height:22.5px;text-align:justify;}
@media (max-width:992px){
  .support-panel{flex-direction:column;gap:30px;padding:30px 0 0;}
  .support-form-card .form-inner{width:100%;}
  .support-form-card .btn-gold{width:100%;}
  .support-question-card{height:120px;}
}


/* ===================================================
   图文混排单页（后台「单页内容维护」富文本内容）
   正文由 summernote 图文混排编辑器维护，可能插入任意 HTML，
   这里只做保底约束：图片不撑破容器、长链接不溢出。
   注意：选择器特异性刻意保持较低，避免覆盖 .v-imgs img 等既有排版。
   =================================================== */
.content-area img,
.culture-col img,
.resp-cols img,
.about-paras img,
.social-text img { max-width: 100%; }
.content-area,
.culture-col,
.resp-cols,
.about-paras,
.social-text { word-break: break-word; overflow-wrap: break-word; }


/* ===================================================
   滚动入场动画（v-reveal 全局指令，src/directives/reveal.js）
   元素滚动进入视口时加 .reveal-in，其「直接子元素」逐层从下往上淡入：
   首页 ② 品牌介绍 / ③ 系列产品 / ④ 新闻中心 / ⑤ 社会责任 / ⑥ 沟通合作，
   以及单页正文（关于牛夫人 / 总经理致辞 / 公司文化 / 愿景与规划 / 食品安全等）。
   初始几乎不可见（opacity .12 + 上移 170px、缩放 .96），触发后上浮归位并完全显示，节奏整体偏慢。
   =================================================== */
.reveal > * {
  opacity: .12;
  transform: translateY(170px) scale(.96);
  transition: opacity 1.6s ease, transform 1.6s cubic-bezier(.16, .84, .44, 1);
}
/* 富文本常整篇只包一层（如「总经理致辞」的 .content-card、「食品安全」的 .v-card）：
   此时包装层自身不动（免得整块一起平移），改由它内部的区块逐层错落。
   用 :has() 判断「唯一子元素自己还有子元素」；不支持 :has 的浏览器整条规则失效，
   自动退化成上面的「整块淡入」，不会出问题。 */
.reveal > *:only-child:has(> *) {
  opacity: 1;
  transform: none;
}
.reveal > *:only-child:has(> *) > * {
  opacity: .12;
  transform: translateY(170px) scale(.96);
  transition: opacity 1.6s ease, transform 1.6s cubic-bezier(.16, .84, .44, 1);
}
.reveal.reveal-in > *,
.reveal.reveal-in > *:only-child:has(> *) > * {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.reveal > *:nth-child(1),
.reveal > *:only-child:has(> *) > *:nth-child(1) { transition-delay: 0s; }
.reveal > *:nth-child(2),
.reveal > *:only-child:has(> *) > *:nth-child(2) { transition-delay: .24s; }
.reveal > *:nth-child(3),
.reveal > *:only-child:has(> *) > *:nth-child(3) { transition-delay: .48s; }
.reveal > *:nth-child(4),
.reveal > *:only-child:has(> *) > *:nth-child(4) { transition-delay: .72s; }
.reveal > *:nth-child(n + 5),
.reveal > *:only-child:has(> *) > *:nth-child(n + 5) { transition-delay: .96s; }
/* 尊重系统「减少动态效果」设置 */
@media (prefers-reduced-motion: reduce) {
  .reveal > *,
  .reveal > *:only-child:has(> *) > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ===================================================
   牛肝菌菜谱页 —— 图片墙末尾的视频区
   由后台「产品管理 → 菜品管理 → 菜谱页视频」维护；
   未上传视频时官网这一整块不渲染（v-if="video"，见 views/Recipes.vue），
   所以这里不用写「空态」样式。
   底纹是设计稿 282_background_only.png（无缝蘑菇图案），视频居中叠在上面。
   =================================================== */
.recipes-video {
  /* 与上方图片墙按同一整屏宽度等比缩放，从图片顶边开始衔接。 */
  background: #987c4d url(/assets/images/bg/282_background_only10.png) center top / 100% auto no-repeat;
  background-origin: border-box;
  padding: 90px 0;
  display: flex; justify-content: center; align-items: center;
}
.recipes-video video {
  width: 100%; max-width: 1000px; aspect-ratio: 16 / 9;
  display: block; border-radius: 8px; background: #000;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .35);
}
@media (max-width: 992px) {
  .recipes-video { padding: 40px 16px; }
}