@charset 'utf-8';
/* ============================================================
   移动端适配（max-width: 768px）
   统一覆盖所有公共页面的 PC 固定布局：
   1. 隐藏固定左侧导航，改用顶部栏 + 抽屉
   2. 内容区全宽，去掉 margin-left: 15vw
   3. 各页面固定 px 宽度改自适应/百分比
   ============================================================ */

@media (max-width: 768px) {
  /* ---------- 1. 隐藏 PC 左侧导航，显示移动端顶栏 ---------- */
  #leftNav {
    display: none !important;
  }

  .mobile-header {
    display: flex !important;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    padding: 0 16px;
    background: #a5151d;
    z-index: 1001;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  }
  .mobile-menu-btn {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    width: 26px;
    height: 20px;
    cursor: pointer;
  }
  .mobile-menu-btn i {
    display: block;
    height: 3px;
    background: #fff;
    border-radius: 2px;
  }
  .mobile-logo {
    height: 36px;
    width: auto;
    margin-left: 16px;
    cursor: pointer;
  }

  /* 抽屉遮罩 */
  .mobile-menu-overlay {
    display: block !important;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1002;
  }
  /* 抽屉 */
  .mobile-drawer {
    display: block !important;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 70vw;
    max-width: 300px;
    background: #a5151d;
    z-index: 1003;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    padding-top: 56px;
  }
  .mobile-drawer.open {
    transform: translateX(0);
  }
  .mobile-drawer > ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .mobile-drawer > ul > li {
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.15);
  }
  .mobile-drawer > ul > li > span,
  .mobile-drawer > ul > li > .drawer-item,
  .mobile-drawer .drawer-item span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    font-size: 16px;
    cursor: pointer;
  }
  .mobile-drawer .drawer-item span {
    display: inline;
    padding: 0;
    font-size: 16px;
  }
  .mobile-drawer > ul > li.active > span,
  .mobile-drawer > ul > li.active .drawer-item span {
    color: #ffd;
    font-weight: bold;
  }
  .drawer-arrow {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 2px solid rgba(255,255,255,0.7);
    border-bottom: 2px solid rgba(255,255,255,0.7);
    transform: rotate(45deg);
    transition: transform 0.3s;
  }
  .mobile-drawer li.expanded .drawer-arrow {
    transform: rotate(-135deg);
  }
  .drawer-sub {
    list-style: none;
    margin: 0;
    padding: 0;
    background: rgba(0,0,0,0.2);
  }
  .drawer-sub li {
    padding: 14px 40px;
    font-size: 14px;
    color: rgba(255,255,255,0.9);
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .drawer-sub li:active {
    background: rgba(255,255,255,0.1);
  }

  /* body 顶部留出移动栏高度 */
  body {
    padding-top: 56px;
  }

  /* ---------- 2. 全局：内容区去掉 margin-left: 15vw，全宽 ---------- */
  #aboutUsPage,
  #contactPage,
  #productClassPage,
  .news-banner,
  .news-container,
  .news-detail-page,
  .news-box,
  #baseFooter,
  .index-footer,
  .product-class-bg,
  .product-class-box,
  .yiyantang-box,
  .company-item-1,
  .additive-box,
  .big-salt-box,
  .capsule-nav,
  .class-content,
  .class-banner {
    margin-left: 0 !important;
    width: 100% !important;
  }

  #baseFooter {
    margin-left: 0 !important;
    width: 100% !important;
  }
  .index-footer {
    left: 0 !important;
    width: 100% !important;
  }

  /* ---------- 3. 首页：禁用全屏滚动锁，改为正常竖向滚动 ---------- */
  #pageContain {
    height: auto !important;
    overflow: visible !important;
    position: relative !important;
  }
  .page {
    position: relative !important;
    left: 0 !important;
    height: 50vh !important;
    display: block !important;
  }
  .contain {
    height: 100%;
  }
  #navBar {
    left: 0 !important;
    right: 0 !important;
    bottom: 12px !important;
  }
  .home-wrapper {
    height: auto !important;
  }
  body {
    overflow: auto !important;
  }

  /* ---------- 4. about 各页：固定 px 宽度自适应 ---------- */
  .about-center,
  .product-center,
  .about-nav,
  .product-nav-wrapper {
    position: relative !important;
    left: 0 !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    text-align: center;
    padding: 60px 20px 30px;
  }
  .about-nav,
  .product-nav-row {
    flex-direction: column !important;
    align-items: center;
    gap: 14px !important;
  }
  .about-nav-card,
  .nav-card {
    width: 80% !important;
    max-width: 280px;
  }
  .about-center h1,
  .product-center h1 {
    font-size: 30px !important;
    letter-spacing: 4px !important;
  }
  .about-center p,
  .product-center p {
    font-size: 14px !important;
    letter-spacing: 2px !important;
  }
  #aboutPage,
  #productPage {
    height: auto !important;
  }
  .about-bg,
  .product-bg {
    height: auto !important;
    min-height: 300px;
  }

  /* about us / histroy / advantage / honor 内容区 */
  .about-us-content {
    padding: 30px 20px !important;
  }
  /* 移动端：视频独占一行显示（取消 PC 端左浮动并排） */
  .nav-movie-inline {
    float: none !important;
    width: 100% !important;
    margin: 0 0 24px 0 !important;
  }
  .nav-movie-inline video {
    max-height: none !important;
  }
  .text-box {
    padding: 0 16px;
  }
  .text-box h1 {
    font-size: 20px !important;
  }
  .text-box h2 {
    font-size: 17px !important;
  }
  .text-box p {
    font-size: 14px !important;
    line-height: 1.7 !important;
  }
  .about-us-content ul {
    margin: 30px 0 !important;
  }
  .about-us-content ul li {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding: 0 0 20px 20px !important;
  }
  .time-bold {
    font-size: 16px !important;
  }

  /* 企业历程/优势标题块 */
  .histroy-title {
    padding-left: 12px;
  }
  .histroy-title p,
  .title-bold {
    font-size: 18px !important;
  }

  /* ---------- 5. 新闻列表：单栏 ---------- */
  .news-banner {
    aspect-ratio: 1616 / 351;
  }
  .banner-inner h2 {
    font-size: 24px !important;
  }
  .banner-inner p {
    font-size: 13px !important;
  }
  .news-container {
    padding: 20px 16px 40px !important;
  }
  .news-layout {
    flex-direction: column !important;
  }
  .news-sidebar {
    flex: 1 1 auto !important;
    width: 100% !important;
    margin-top: 30px;
  }
  .news-item {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .news-item-cover {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 200px !important;
  }
  .news-item-title {
    font-size: 15px !important;
  }
  .news-tabs .tab-item {
    padding: 6px 14px !important;
    font-size: 13px !important;
  }

  /* 新闻详情 */
  .news-detail-page {
    padding: 20px 16px 40px !important;
  }
  .news-detail-title {
    font-size: 20px !important;
  }
  .news-detail-content :deep(p),
  .news-detail-content p {
    font-size: 15px !important;
    text-indent: 0 !important;
  }

  /* ---------- 6. 产品分类页 ---------- */
  .class-banner {
    aspect-ratio: 1920 / 800;
  }
  .capsule-nav {
    padding: 10px 12px !important;
  }
  .capsule-inner {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 6px !important;
  }
  .capsule-item {
    flex-shrink: 0;
    padding: 6px 14px !important;
    font-size: 13px !important;
  }
  .class-content {
    padding: 24px 14px 50px !important;
  }
  .cat-product-showcase {
    flex-direction: column !important;
    gap: 20px !important;
  }
  .cat-product-img {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: none !important;
  }
  .cat-product-list {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px 14px !important;
  }
  .cat-product-title h2 {
    font-size: 20px !important;
  }
  .cat-product-desc {
    font-size: 13px !important;
    max-width: 100% !important;
  }

  /* ---------- 7. 联系我们 ---------- */
  .contact-content {
    padding: 40px 20px !important;
    min-height: calc(100vh - 220px);
  }
  .about-info-wrap {
    flex-direction: column !important;
    align-items: center !important;
    gap: 30px !important;
  }
  .about-img-box {
    flex: 0 0 auto !important;
    max-width: 160px !important;
  }
  #contactPage .text-box {
    text-align: center !important;
  }
  .contact-content ul li {
    font-size: 15px !important;
    padding-top: 20px !important;
    line-height: 1.6;
  }
  #contactPage .about-us-bg i span {
    font-size: 26px !important;
  }

  /* ---------- 8. 产品购买页固定宽度 ---------- */
  .buy-tmall,
  .buy-tmall img {
    width: 100% !important;
    height: auto !important;
  }
  .buy-tmall {
    margin-top: 0 !important;
  }
  .buy-tmall span {
    position: relative !important;
    right: auto !important;
    margin-right: 0 !important;
    bottom: auto !important;
    top: auto !important;
    display: inline-block !important;
    margin-top: 10px;
  }
  .buy-jd span {
    top: auto !important;
  }

  /* ---------- 9. footer 关注区 ---------- */
  .about-follow-inner {
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
    padding: 40px 20px !important;
    display: flex !important;
    width: 100% !important;
    max-width: 360px;
    margin: 0 auto !important;
  }
  .about-follow-text {
    text-align: center !important;
  }
  .follow-qrcode {
    align-items: center !important;
  }
  .follow-qrcode img {
    width: 80px !important;
    height: 80px !important;
  }
  .social-icons {
    justify-content: center !important;
    flex-wrap: wrap !important;
  }
  .social-xhs {
    width: 80px !important;
    height: 32px !important;
  }
  .copyright {
    padding: 0 12px 30px !important;
  }
  .copyright a,
  .copyright-no-border,
  .index-footer .copyright a {
    font-size: 12px !important;
  }
  .index-footer .copyright {
    padding: 12px 12px !important;
    line-height: 20px !important;
  }
  .index-footer .copyright a {
    margin: 0 6px;
  }

  /* ---------- 10. 旧版品牌子页固定宽度（yiyantang/green 等） ---------- */
  .yiyantang-1,
  .enyiyantang-1,
  .green-1,
  .yibaiwei-1,
  .yanboshi-1,
  .qingqingguosu-1,
  .rare-salt-1,
  .happy-kitchen-1 {
    width: 100% !important;
    height: auto !important;
    line-height: 1.5 !important;
    margin: 40px auto !important;
  }
  .yiyantang-1 i,
  .enyiyantang-1 i,
  .green-1 i,
  .yibaiwei-1 i,
  .yanboshi-1 i,
  .qingqingguosu-1 i,
  .rare-salt-1 i,
  .happy-kitchen-1 i {
    float: none !important;
    display: block !important;
    margin: 0 auto 12px !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }
  .yiyantang-1 span,
  .enyiyantang-1 span,
  .green-1 span,
  .yibaiwei-1 span,
  .yanboshi-1 span,
  .qingqingguosu-1 span,
  .rare-salt-1 span,
  .happy-kitchen-1 span {
    float: none !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    font-size: 24px !important;
    letter-spacing: 6px !important;
  }
  .yiyantang-2 ul,
  .yanboshi-color ul,
  .rare-salt-color ul,
  .happy-kitchen-color ul {
    width: 100% !important;
    float: none !important;
    margin-bottom: 20px;
  }
  .yiyantang-2,
  .yanboshi-color,
  .rare-salt-color,
  .happy-kitchen-color,
  .qingqingguosu-color {
    margin: 30px 5% !important;
  }
  .additive-item-1 img,
  .additive-item-2 img {
    float: none !important;
    width: 100% !important;
    padding: 20px 0 !important;
  }
  .left-item {
    float: none !important;
    width: 100% !important;
    padding: 10px 0 !important;
  }
  .big-salt-box {
    margin: 0 5% 40px !important;
  }
  .big-salt-box h1 {
    font-size: 28px !important;
    padding: 40px 0 30px !important;
  }
  .big-salt-item-img1,
  .big-salt-item-img2,
  .big-salt-item-img3,
  .big-salt-item-img5 {
    width: 100% !important;
    margin-left: 0 !important;
  }

  /* ---------- 11. 图片/表格防溢出 ---------- */
  img {
    max-width: 100%;
    height: auto;
  }
  table {
    width: 100% !important;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}