/* ================================================
   quality.html 移动端响应式样式（品质保障页）
   - 仅 @media only screen and (max-width: 767px) 生效（全站唯一断点）
   - 顶部导航/页脚公共部分见 css/responsive/common-responsive.css，此处不重复
   - 页面内含大量 inline style（calc(x/1920*100vw)），
     关键布局属性使用 !important 覆盖
   ================================================ */
@media only screen and (max-width: 767px) {

    /* ---------- 顶部导航汉堡按钮对齐修复 ----------
       公共 header.html 的 DOM 顺序为 logo → nav → 汉堡 → 搜索表单，
       flex space-between 下汉堡不会自动靠右，而是悬在中间偏左；
       首页（index.css）给汉堡设置了 margin-left:auto 使其靠右。
       此处复刻首页写法：margin-left:auto 把汉堡推到最右，
       右侧间距与首页完全一致。 */
    header .nav-toggle,
    .header .nav-toggle {
        margin-left: auto !important;
    }

    /* 强制导航容器 flex 两端对齐（覆盖各内页自身 header 布局差异） */
    header,
    .header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0 16px !important;
        box-sizing: border-box;
    }

    /* 清除 Logo 区多余左内边距，保证左右视觉对齐 */
    header .logo-area,
    .header .logo-area {
        padding-left: 0 !important;
    }

    /* ---------- Banner ---------- */
    .banner {
        height: 180px !important;
        background-size: cover !important;
        background-position: center center;
    }
    .banner-text {
        left: 16px !important;
        top: 38% !important;
    }
    .banner h1 {
        font-size: 22px !important;
        border-left: 3px solid #fff !important;
        padding-left: 10px !important;
        line-height: 1.3 !important;
    }

    /* ---------- 通用标题（section-title） ---------- */
    .section-title {
        width: auto !important;
        height: auto !important;
        font-size: 26px !important;
        line-height: 1.3 !important;
        margin: 28px auto 16px !important;
    }
    .styled-section .section-title {
        margin-top: 20px !important;
        margin-bottom: 16px !important;
    }

    /* ---------- 区块背景（styled-section） ---------- */
    .styled-section {
        background-size: cover !important;
        background-position: center center !important;
        padding-bottom: 30px !important;
    }

    /* ---------- 品质密码（三图横排 → 纵向堆叠） ---------- */
    .numbers-section-image {
        display: flex !important;
        flex-direction: column;
        width: 100% !important;
        height: auto !important;
        position: relative;
        overflow: hidden;
    }
    /* 三张切片图：每张整幅显示，抵消内联 margin-left: -6.33vw */
    .numbers-section-image > img {
        flex: none !important;
        width: 100% !important;
        height: auto !important;
        margin-left: 0 !important;
        display: block;
    }
    /* 三个文字标签（偶数子元素）：改为随图片堆叠、居中悬浮的胶囊，覆盖内联定位 */
    .numbers-section-image > div:nth-child(even) {
        position: relative !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: 84% !important;
        height: auto !important;
        margin: -46px auto 22px !important;
        z-index: 5;
    }
    .numbers-section-image > div:nth-child(even) > img {
        display: block;
        width: 100% !important;
        height: auto !important;
    }
    /* 标签文字：覆盖继承的 font-size:0 / line-height:0，铺满胶囊 */
    .text-xtys {
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    /* ---------- 道地原料（标签胶囊两列 → 单列） ---------- */
    .ingredients-tags {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 20px !important;
        padding: 0 14px;
        margin-bottom: 24px !important;
    }
    .tag-capsule {
        width: 100% !important;
        height: auto !important;
        min-height: 96px;
        border-width: 3px !important;
        font-size: 14px !important;
        line-height: 1.6;
        padding: 14px 12px !important;
        gap: 10px;
        box-sizing: border-box;
    }
    /* 胶囊内文字块：覆盖内联 width/margin/transform */
    .tag-capsule > div {
        width: auto !important;
        flex: 1;
        min-width: 0;
        margin: 0 !important;
        transform: none !important;
    }
    .tag-capsule-img {
        width: 64px !important;
        height: 76px !important;
        transform: none !important;
        flex-shrink: 0;
        object-fit: contain;
    }
    /* 两胶囊之间的装饰圆环：由绝对定位改为居中衔接 */
    .ingredients-tags .out-sise {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        width: 64px !important;
        height: 64px !important;
        margin: -30px auto -30px !important;
        flex-shrink: 0;
        z-index: 10;
    }
    .ingredients-tags .inner-sise {
        width: 34px !important;
        height: 34px !important;
    }
    .ingredients-tags .out-sise::before,
    .ingredients-tags .out-sise::after {
        width: 14px !important;
        height: 14px !important;
    }

    /* ---------- Tabs 切换 ---------- */
    .wine-tabs {
        width: 92% !important;
        max-width: 400px;
        height: 44px !important;
        margin: 0 auto 24px !important;
        gap: 0 !important;
        border-radius: 8px;
        overflow: hidden;
    }
    .tab {
        width: 50% !important;
        height: 44px !important;
        min-height: 44px;
        font-size: 16px !important;
    }

    /* ---------- 原料卡片（4 列 → 单列） ---------- */
    .slider-window {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden;
    }
    .cards-list-page {
        gap: 16px !important;
    }
    .ing-card {
        flex: 0 0 100% !important;
        width: 100% !important;
        aspect-ratio: auto !important;
        height: auto !important;
        padding: 16px !important;
        border-radius: 12px !important;
        box-sizing: border-box;
    }
    .card-main-area {
        gap: 12px !important;
        margin-bottom: 12px !important;
    }
    .card-img-wrapper {
        width: 108px !important;
        height: 108px !important;
        aspect-ratio: auto !important;
        flex-shrink: 0;
        border-radius: 10px !important;
    }
    .card-img-wrapper img {
        width: 90% !important;
        height: 85% !important;
        max-width: 100%;
        object-fit: contain;
    }
    .card-right-info {
        gap: 6px !important;
        justify-content: center !important;
    }
    .card-double-text {
        gap: 8px !important;
        margin-top: 0 !important;
        padding: 8px !important;
        border-radius: 10px !important;
    }
    .double-col-left {
        padding-left: 6px !important;
    }
    .double-col-left .herb-name {
        font-size: 16px !important;
    }
    .double-col-left .herb-origin {
        font-size: 12px !important;
    }
    .double-col-right p {
        font-size: 12px !important;
        padding: 2px 6px !important;
        line-height: 1.5;
    }
    .card-footer-badge {
        font-size: 14px !important;
        padding: 10px 8px !important;
        gap: 8px !important;
    }
    .footer-eight-words {
        font-size: 13px !important;
        padding: 3px 8px !important;
    }

    /* ---------- 中药材基地 ---------- */
    .base-section-bg {
        height: auto !important;
        margin-top: 20px !important;
        position: relative;
    }
    .base-section-bg-img {
        width: 100% !important;
        height: auto !important;
        display: block;
    }
    .base-info-box {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        padding: 16px !important;
        font-size: 14px !important;
        line-height: 1.7 !important;
        text-align: left;
        box-sizing: border-box;
    }

    /* ---------- 产品·工艺（左右布局 → 上下堆叠，图片保持 716:495） ---------- */
    .roles-section-title {
        width: auto !important;
        height: auto !important;
        font-size: 26px !important;
        line-height: 1.3 !important;
        margin: 30px auto 14px !important;
    }
    .roles-process {
        width: 100% !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 16px !important;
        padding: 16px !important;
        box-sizing: border-box;
    }
    .roles-process-text {
        flex: none !important;
        width: 100% !important;
        font-size: 14px !important;
        line-height: 1.8 !important;
        padding: 18px 16px !important;
        border-radius: 12px !important;
        box-sizing: border-box;
    }
    .roles-process-text p + p {
        margin-top: 12px !important;
    }
    .roles-process-img {
        flex: none !important;
        width: 100% !important;
        padding: 12px !important;
        border-radius: 12px !important;
        box-sizing: border-box;
    }
    .roles-process-img img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 716 / 495;
        object-fit: contain;
    }

    /* ---------- 药食同源 ---------- */
    .homology-section {
        height: auto !important;
        flex-direction: column !important;
        align-items: stretch !important;
        margin-top: 20px !important;
    }
    .homology-bg-img {
        position: relative !important;
        width: 100% !important;
        height: 240px !important;
        background-size: cover !important;
        background-position: center !important;
    }
    .homology-text-box {
        position: static !important;
        left: auto !important;
        bottom: auto !important;
        width: 100% !important;
        height: auto !important;
        padding: 24px 16px !important;
        box-sizing: border-box;
        align-items: flex-start !important;
    }
    .homology-text-box h1 {
        font-size: 20px !important;
        line-height: 1.4;
        margin: 0;
    }
    .homology-text-style {
        height: auto !important;
        margin-top: 12px !important;
        font-size: 14px !important;
        line-height: 1.8 !important;
        letter-spacing: 0 !important;
        text-align: justify !important;
    }
}

/* ================================================
   第二层：品质保障页 移动端专项适配 + 样式故障修复（专项改造）
   - 覆盖第一层同断点规则，仅 (max-width: 767px) 生效，PC 端 100% 不受影响
   - 对应需求：
     1. 顶部菜单/导航样式故障修复（还原全站统一表现，重点）
     2. Banner 降高 + 英文副题缩小 / 中文标题放大
     3. 品质密码三图：横向一行滚动（图片在上、古风文案在下、隐藏滚动条）
     4. 原料板块：移除圆形装饰、整体紧凑化、Tab 热区≥44px、药材卡片收紧
     5. 细节：16px 安全边距、全局 border-box、防横向溢出、底纹弱化、底部悬浮按钮安全边距
   ================================================ */
@media only screen and (max-width: 767px) {

    /* ---------- 0. 顶部菜单/导航故障修复（与全站其他页面头部一致） ----------
       清除误操作引入的异常 margin/padding/transform/宽度溢出，
       还原移动端菜单原始正常表现。 */
    header,
    .header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0 16px !important;
        box-sizing: border-box;
    }
    /* 汉堡按钮推到最右（对齐首页/responsibility 页面写法） */
    header .nav-toggle,
    .header .nav-toggle {
        margin-left: auto !important;
    }
    /* 清除 Logo 区多余左内边距 */
    header .logo-area,
    .header .logo-area {
        padding-left: 0 !important;
    }
    /* 清除 header 内误操作 transform/margin 干扰（搜索表单移动端隐藏，兜底复位） */
    header .header-actions,
    .header .header-actions,
    header .search-container,
    .header .search-container {
        transform: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    /* 菜单容器/列表兜底复位：防错位、防文字错乱、防宽度溢出 */
    header nav ul,
    .header nav ul {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-wrap: nowrap !important;
        box-sizing: border-box;
    }
    header nav li > a,
    header nav li > a.menu-item-box {
        white-space: nowrap !important;
    }

    /* ---------- 1. Banner 降高 + 文字响应式缩放 ---------- */
    .banner {
        width: 100% !important;
        max-width: 100% !important;
        height: 150px !important;                /* 降低高度，保证下方内容自然露出 */
        background-size: cover !important;       /* 完整显示不变形 */
        background-position: center center !important;
        box-sizing: border-box;
    }
    .banner-text {
        left: 16px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        box-sizing: border-box;
    }
    .banner h1 {
        font-size: 26px !important;              /* 中文「品质保障」主标题放大 */
        border-left: 3px solid #fff !important;
        padding-left: 10px !important;
        line-height: 1.35 !important;
        color: #fff;
    }
    /* 第一行（英文副标题）缩小字号，保证小屏清晰可读 */
    .banner h1::first-line {
        font-size: 16px !important;
        letter-spacing: 1px;
        font-weight: 400;
    }

    /* ---------- 2. 品质密码：三图横向一行滚动（核心） ----------
       覆盖第一层纵向堆叠，改为一行三卡 + 横向滚动容器：
       - grid 三列两行：图片在上、古风边框文案在下，一一对应
       - 固定卡片宽度、横向滚动、隐藏原生滚动条、iOS 顺滑滑动 */
    .numbers-section-image {
        display: grid !important;
        grid-template-columns: repeat(3, 72vw);
        grid-auto-rows: auto;
        column-gap: 12px;
        row-gap: 12px;
        width: 100% !important;
        height: auto !important;
        position: relative;
        padding: 0 16px 6px;                     /* 左右 16px 安全边距 */
        box-sizing: border-box;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;       /* iOS 滑动顺滑 */
        scrollbar-width: none;                   /* Firefox 隐藏滚动条 */
        -ms-overflow-style: none;                /* 旧 Edge 隐藏滚动条 */
    }
    .numbers-section-image::-webkit-scrollbar {
        display: none;                           /* Chrome/Safari 隐藏滚动条 */
    }

    /* 三张切片图：等比例缩放、不变形，置于每列第一行 */
    .numbers-section-image > img {
        flex: none !important;
        width: 100% !important;
        height: auto !important;
        margin-left: 0 !important;               /* 抵消内联 margin-left: -6.33vw */
        display: block;
        object-fit: contain;
        border-radius: 10px;                     /* 卡片统一圆角 */
    }
    .numbers-section-image > img:nth-of-type(1) { grid-column: 1; grid-row: 1; }
    .numbers-section-image > img:nth-of-type(2) { grid-column: 2; grid-row: 1; }
    .numbers-section-image > img:nth-of-type(3) { grid-column: 3; grid-row: 1; }

    /* 三句文案框（古风边框）：随各自图片置于同一列第二行，一一对应 */
    .numbers-section-image > div:nth-of-type(1) { grid-column: 1; grid-row: 2; }
    .numbers-section-image > div:nth-of-type(2) { grid-column: 2; grid-row: 2; }
    .numbers-section-image > div:nth-of-type(3) { grid-column: 3; grid-row: 2; }
    .numbers-section-image > div:nth-of-type(n) {
        position: relative !important;           /* 覆盖内联 absolute 定位 */
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;              /* 清除 translateY 等异常位移 */
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        z-index: 5;
        box-sizing: border-box;
    }
    .numbers-section-image > div:nth-of-type(n) > img {
        display: block;
        width: 100% !important;
        height: auto !important;
    }
    /* 古风文案框内文字：移动端字号适配，保证清晰可读 */
    .text-xtys {
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        font-size: 12px !important;
        line-height: 1.5 !important;
        padding: 0 4px;
        box-sizing: border-box;
    }

    /* ---------- 3. 原料板块整体紧凑化（核心） ---------- */
    /* 移除顶部中间圆形装饰元素，只保留两侧文字标题 */
    .ingredients-tags .out-sise {
        display: none !important;
    }
    .ingredients-tags .inner-sise {
        display: none !important;
    }
    /* 标题留白收紧 */
    .styled-section .section-title {
        margin-top: 14px !important;
        margin-bottom: 10px !important;
    }
    /* 标签胶囊列：压缩间距与留白 */
    .ingredients-tags {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 0 16px !important;
        margin-bottom: 16px !important;
    }
    /* 「道、地」说明文本框：缩小上下内边距、压缩盒子间距，字号保持可读 */
    .tag-capsule {
        width: 100% !important;
        height: auto !important;
        min-height: 72px;
        border-width: 3px !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
        padding: 9px 12px !important;
        gap: 8px;
        box-sizing: border-box;
    }
    .tag-capsule-img {
        width: 52px !important;
        height: 62px !important;
        transform: none !important;
        flex-shrink: 0;
        object-fit: contain;
    }
    /* 清清酒/亲亲酒 Tab：保留原切换交互，触控热区 ≥44px */
    .wine-tabs {
        width: 92% !important;
        max-width: 400px;
        height: 44px !important;
        min-height: 44px;
        margin: 0 auto 16px !important;
        gap: 0 !important;
        border-radius: 8px;
        overflow: hidden;
    }
    .tab {
        width: 50% !important;
        height: 44px !important;
        min-height: 44px;
        font-size: 16px !important;
    }

    /* 药材卡片区：16px 安全边距（覆盖内联 calc padding） */
    .ingredients-section > div[style*="space-between"] {
        padding: 0 16px !important;
        box-sizing: border-box;
    }
    /* 卡片之间垂直间距压缩 */
    .cards-list-page {
        gap: 12px !important;
    }
    /* 药材条目卡片：缩小上下内边距、紧凑排布，不改内部结构与 CMS 标签 */
    .ing-card {
        flex: 0 0 100% !important;
        width: 100% !important;
        aspect-ratio: auto !important;
        height: auto !important;
        padding: 12px 14px !important;
        border-radius: 12px !important;
        box-sizing: border-box;
    }
    .card-main-area {
        gap: 10px !important;
        margin-bottom: 8px !important;
    }
    /* 圆形药材头像：适度缩小，不占过大屏幕 */
    .card-img-wrapper {
        width: 84px !important;
        height: 84px !important;
        aspect-ratio: auto !important;
        flex-shrink: 0;
        border-radius: 10px !important;
    }
    .card-img-wrapper img {
        width: 90% !important;
        height: 85% !important;
        max-width: 100%;
        object-fit: contain;
    }
    .card-right-info {
        gap: 4px !important;
        justify-content: center !important;
    }
    .card-double-text {
        gap: 6px !important;
        margin-top: 0 !important;
        padding: 6px 8px !important;
        border-radius: 10px !important;
    }
    .double-col-left {
        padding-left: 6px !important;
    }
    .double-col-left .herb-name {
        font-size: 15px !important;
    }
    .double-col-right p {
        font-size: 12px !important;
        padding: 2px 6px !important;
        line-height: 1.5;
    }
    .card-footer-badge {
        font-size: 13px !important;
        padding: 8px !important;
        gap: 8px !important;
    }
    .footer-eight-words {
        font-size: 12px !important;
        padding: 3px 8px !important;
    }

    /* ---------- 4. 细节体验优化 ---------- */
    /* 全局盒模型统一 border-box，避免内边距撑破布局 */
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }
    /* 彻底杜绝横向溢出滚动 */
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }
    /* 背景装饰底纹：降低不透明度弱化（inset 阴影只作用于背景层，
       不影响正文阅读） */
    .styled-section {
        box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.62);
    }
    /* 页面底部为右下角「联系我们」悬浮按钮预留安全边距，不遮挡内容 */
    footer {
        margin-bottom: 88px !important;
    }
    /* 悬浮按钮：保持安全距离，不遮挡卡片内容 */
    .float-message-btn {
        right: 16px !important;
    }
}

/* ================================================
   第三层：品质密码板块 移动端三图并排（专项改造）
   - 覆盖上层横向滚动方案：取消滚动、三图等分一行、文案叠加图底、移除古风边框
   - 仅 (max-width: 767px) 生效；PC 端三图全景拼接结构 100% 原样保留
   ================================================ */
@media only screen and (max-width: 767px) {

    /* ---------- 品质密码：三图同一行三列并排（无滚动） ---------- */
    .numbers-section-image {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);  /* 三等分内容区域宽度 */
        grid-template-rows: auto;
        column-gap: 10px;                       /* 卡片间合理小间距 */
        width: 100% !important;
        height: auto !important;
        position: relative;
        padding: 0 16px !important;             /* 16px 左右安全边距 */
        box-sizing: border-box;
        overflow: visible !important;           /* 取消横向滚动，禁止左右滑动 */
        -webkit-overflow-scrolling: auto;
    }

    /* 三张切片图：同一行三列并排、高度与 PC 相同比例，
       保留原斜切角度视觉效果，object-fit:cover 不变形 */
    .numbers-section-image > img {
        width: 100% !important;
        height: calc(988 / 1920 * 100vw) !important;  /* 与 PC 版同高比例 */
        object-fit: cover !important;
        margin-left: 0 !important;              /* 抵消内联负边距，不重叠拼接 */
        display: block;
        align-self: start;                      /* 高度由自身决定，不被拉伸变形 */
        justify-self: stretch;
    }

    /* 图片与文案浮层在各自卡片格内重叠：图占满、文案叠于其底部 */
    .numbers-section-image > img:nth-of-type(1) { grid-area: 1 / 1; }
    .numbers-section-image > img:nth-of-type(2) { grid-area: 1 / 2; }
    .numbers-section-image > img:nth-of-type(3) { grid-area: 1 / 3; }
    .numbers-section-image > div:nth-of-type(1) { grid-area: 1 / 1; }
    .numbers-section-image > div:nth-of-type(2) { grid-area: 1 / 2; }
    .numbers-section-image > div:nth-of-type(3) { grid-area: 1 / 3; }

    /* 文案浮层容器：铺满卡片、叠于图片之上、文字悬浮图片底部，
       移除独立古风装饰边框容器（边框底图 display:none） */
    .numbers-section-image > div:nth-of-type(n) {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;             /* 清除 translateY 等异常位移 */
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        z-index: 5;
        box-sizing: border-box;
        display: flex;
        align-items: flex-end;                  /* 文案贴图片底部之上 */
        justify-content: center;
        pointer-events: none;
        background: linear-gradient(            /* 底部暗色渐变，保证白字可读 */
            to top,
            rgba(0, 0, 0, 0.5),
            rgba(0, 0, 0, 0) 55%
        );
    }
    .numbers-section-image > div:nth-of-type(n) > img {
        display: none !important;               /* 移动端隐藏古风边框装饰 */
    }

    /* 文案文字：缩小字号、白色字体、悬浮图片底部、不超出卡片边界 */
    .text-xtys {
        position: static !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        font-size: 12px !important;
        line-height: 1.5 !important;
        padding: 0 2px 10px;                    /* 底部留白，贴合图片底缘 */
        color: #fff;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
        box-sizing: border-box;
    }
}

/* ================================================
   第四层：品质密码无缝拼接 + 原料药材两列布局（专项改造）
   - 仅 (max-width: 767px) 生效，PC 端 100% 原样
   - 覆盖上层：品质密码取消间距/边距无缝拼接成整图；药材列表一行两列
   说明：Tab 显隐由 js/quality.js 用 inline display:flex/none 切换，
         故列表容器不使用 grid!important 强制 display，仅用 flex-wrap 实现两列，
         保证原切换交互完全不受影响。
   ================================================ */
@media only screen and (max-width: 767px) {

    /* ---------- 品质密码：三图无缝拼接成一整张图 ---------- */
    .numbers-section-image {
        padding: 0 !important;                  /* 取消左右 16px 边距，撑满内容容器 */
        column-gap: 0 !important;               /* 取消卡片间距，三图紧密相连 */
        row-gap: 0 !important;
        margin: 0 !important;
        overflow: visible !important;           /* 禁止横向滚动 */
        -webkit-overflow-scrolling: auto;
    }

    /* ---------- 原料药材列表：一行两列网格 ---------- */
    .cards-list-page {
        gap: 12px !important;                   /* 列间隙 / 行间隙 */
    }
    .ing-card {
        flex: 0 0 calc(50% - 6px) !important;   /* 两列等宽自适应（12px 间隙各占一半） */
        width: auto !important;
        min-width: 0;                           /* 防止内容撑破卡片 */
        max-width: 100%;
    }
    /* 卡片内部：仅调整布局排版为纵向居中（图片上、文字下），元素样式全部保留 */
    .ing-card .card-main-area {
        flex: none !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center;
    }
}

/* ================================================
   第五层：品质密码斜切叠加 + 药材产地精简（专项改造）
   - 仅 (max-width:767px) 生效，PC 端 100% 原样
   - 品质密码：还原 PC flex 横排 + 负 margin 交错层叠
     （第1张 z3 压第2张左上角 → 第2张 z2 压第3张左上角 → 第3张 z1 最底）
   - 药材列表：隐藏「道地产地」标签、产地文本不折行
   ================================================ */
@media only screen and (max-width: 767px) {

    /* ---------- 1. 品质密码：三图负 margin 交错层叠 ---------- */
    .numbers-section-image {
        display: flex !important;               /* 还原 PC flex 横排，负 margin 生效 */
        flex-direction: row !important;
        flex-wrap: nowrap !important;           /* 三图严格同一行 */
        position: relative;                     /* 父容器开启相对定位 */
        gap: 0 !important;
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;                  /* 取消左右边距 */
        margin: 0 !important;
        overflow: visible !important;           /* 禁止横向滚动、不裁切 */
        -webkit-overflow-scrolling: auto;
    }
    /* 三张图：等分宽度、占满卡片、object-fit cover 不变形 */
    .numbers-section-image > img {
        flex: 1 1 0 !important;
        width: auto !important;
        height: calc(988 / 1920 * 100vw) !important;  /* 与 PC 同高比例，占满 */
        object-fit: cover !important;
        display: block;
        position: relative;                     /* 让 z-index 生效 */
    }
    /* z-index：第1张最高压第2张左上角，第2张压第3张左上角，第3张最底 */
    .numbers-section-image > img:nth-of-type(1) {
        margin-left: 0 !important;
        z-index: 3;
    }
    .numbers-section-image > img:nth-of-type(2) {
        margin-left: -6.33vw !important;        /* 与第1张交错覆盖，消除缝隙 */
        z-index: 2;
    }
    .numbers-section-image > img:nth-of-type(3) {
        margin-left: -6.33vw !important;        /* 与第2张交错覆盖，消除缝隙 */
        z-index: 1;
    }
    /* 文字浮层：恢复 absolute 定位，悬浮各图片底部 */
    .numbers-section-image > div:nth-of-type(n) {
        position: absolute !important;          /* 还原 absolute 金框定位 */
        top: auto !important;
        right: auto !important;
        left: auto !important;
        bottom: 3vw !important;                 /* 悬浮图片底部之上 */
        transform: none !important;             /* 清除 PC translateY 居中位移 */
        width: 28.9vw !important;               /* 对应 PC 555/1920 金框宽度 */
        height: auto !important;
        min-height: 8vw;
        margin: 0 !important;
        z-index: 6;                             /* 文字始终位于图片上层 */
        box-sizing: border-box;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        pointer-events: none;
        background: linear-gradient(            /* 底部暗色渐变，保证白字可读 */
            to top,
            rgba(0, 0, 0, 0.5),
            rgba(0, 0, 0, 0) 55%
        );
    }
    .numbers-section-image > div:nth-of-type(1) { left: 1vw !important; }
    .numbers-section-image > div:nth-of-type(2) { left: 35.5vw !important; }
    .numbers-section-image > div:nth-of-type(3) { left: 71vw !important; }
    .numbers-section-image > div:nth-of-type(n) > img {
        display: none !important;               /* 移动端隐藏古风边框装饰 */
    }

    /* ---------- 2. 原料药材：隐藏产地标签、产地不折行 ---------- */
    .double-col-right p:first-child {
        display: none !important;               /* 隐藏「道地产地」标签，不占空间 */
    }
    .double-col-right p:last-child {
        white-space: nowrap !important;         /* 产地文本禁止折行 */
        overflow: hidden;
        text-overflow: ellipsis;                /* 超长省略，防溢出卡片 */
    }
}