/* =====================================================================
   Runjinzhan 品牌官网 · 小屏（手机）布局微调  v12
   仅作用于 max-width:767px（手机/小屏）；PC 与 768px+ 完全不动。
   作用域沿用 html[data-page="…"]/html[data-page="index"]；本文件最后加载。
   原则：小屏下不让单元素独占整行（首页大标题除外）——
         · 双按钮同行；资讯/四时 2 图一排；商品「左图右文」、图等比不裁剪；
         · 一二三竖排、步骤间距=商品间距；标题→内容间距大于块间距；
         · 导航：Logo 与首页靠拢、语言选择收窄为地球 icon；更多导航保持原「方块三条线」图标。
   ===================================================================== */
@media (max-width: 767px) {

  /* ── 导航：Logo 与首页靠拢 + 语言选择器收窄；更多按钮保持原图标 ── */
  html[data-page] .rjz-site-nav {
    justify-content: flex-start;
    column-gap: 0.5rem;
  }
  html[data-page] .rjz-nav-actions { margin-left: auto; }

  html[data-page] .brand-lang-select {
    /* 小屏：语言选择缩成一个地球 icon，无文字；点击仍弹语言下拉 */
    width: 30px;
    height: 30px;
    min-width: 30px !important;
    max-width: 30px;
    padding: 0 !important;
    font-size: 0;
    color: transparent;
    text-indent: -9999px;
    border: none !important;
    background-color: transparent !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%233A7558" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c2.5 2.4 3.8 5.5 3.8 9s-1.3 6.6-3.8 9c-2.5-2.4-3.8-5.5-3.8-9S9.5 5.4 12 3z"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
    appearance: none;
    -webkit-appearance: none;
  }

  html[data-page] .rjz-main-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;          /* 首页不被裁掉 */
    gap: 0.4rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    min-width: 0;
  }
  html[data-page] .rjz-main-nav::-webkit-scrollbar { display: none; }
  html[data-page] .rjz-main-nav .nav-link {
    white-space: nowrap;
    font-size: 0.6rem;
    letter-spacing: 0.04em;
    flex: 0 0 auto;
  }

  /* ── 1) Hero 双按钮：手机下同行（左/右各一）── */
  html[data-page="index"] .rjz-home-hero-actions {
    flex-direction: row;
    gap: 0.75rem;
    flex-wrap: wrap;
  }
  html[data-page="index"] .rjz-home-hero-actions .rjz-button {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    white-space: nowrap;
  }

  /* ── 1b) 底部收尾 CTA 双按钮同样同行 ── */
  html[data-page="index"] .rjz-page-closing-cta .flex-col {
    flex-direction: row;
    gap: 0.75rem;
  }

  /* ── 2) 四时/资讯卡：2 图一排、卡片变矮，图上标题精简 ── */
  html[data-page="index"] #season-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
  html[data-page="index"] #season-grid > a { height: 11rem; }
  html[data-page="index"] .rjz-season-card-copy { padding: 0.6rem; }
  html[data-page="index"] .rjz-season-card-title { font-size: 1rem; line-height: 1.25; }
  html[data-page="index"] .rjz-season-card-summary { display: none; }
  html[data-page="index"] #season-grid > a .text-\[10px\] { font-size: 0.55rem; }

  /* ── 3) 商品：左图(近正方/更宽、等比不裁剪) + 右文；项间距 ≥50px、价格缩小 ── */
  html[data-page="index"] #product-grid {
    grid-template-columns: 1fr;
    gap: 3.25rem;              /* 52px */
  }
  html[data-page="index"] #product-grid .product-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    text-align: left;
    border: none !important;
    box-shadow: none !important;
  }
  html[data-page="index"] #product-grid .product-item::before,
  html[data-page="index"] #product-grid .product-item::after { display: none !important; }
  html[data-page="index"] #product-grid .product-link { flex: 0 0 min(46%, 10rem); }
  html[data-page="index"] #product-grid .item-bg {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 0.5rem;
    overflow: hidden;
    background: #fff;
    margin-bottom: 0 !important;
  }
  html[data-page="index"] #product-grid .product-link img {
    object-fit: contain;
    width: 100%;
    height: 100%;
  }
  html[data-page="index"] #product-grid .product-item > div.text-center {
    flex: 1;
    padding: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  html[data-page="index"] #product-grid .product-item h3 { font-size: 0.9rem; margin-top: 0; }
  html[data-page="index"] #product-grid .rjz-product-card-summary {
    font-size: 0.7rem;
    line-height: 1.35;
    max-width: none;
    margin: 0.1rem 0;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  html[data-page="index"] #product-grid .rjz-type-price { font-size: 0.5rem; text-align: left; margin-top: 0.1rem; }
  html[data-page="index"] #product-grid .rjz-product-detail-link { display: none !important; }

  /* ── 4) 品牌故事：标题居中；一二三竖排，步骤间距=商品间距(52px) ── */
  html[data-page="index"] .rjz-brand-story-grid .rjz-brand-section-title { text-align: center; }
  html[data-page="index"] .rjz-brand-story-grid .space-y-12 {
    display: block;            /* 竖排：每步占一行 */
    margin-top: 0;
  }
  html[data-page="index"] .rjz-brand-story-grid .space-y-12 > div {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
  }
  html[data-page="index"] .rjz-brand-story-grid .space-y-12 > div + div {
    margin-top: 3.25rem !important;  /* 步骤之间=商品间距(52px) */
  }
  html[data-page="index"] .rjz-brand-story-grid .space-y-12 .w-12 { width: 2.2rem; height: 2.2rem; margin-bottom: 0; }
  html[data-page="index"] .rjz-brand-story-grid .space-y-12 .w-12 span { font-size: 0.85rem; }
  html[data-page="index"] .rjz-brand-story-grid .space-y-12 h3 {
    font-size: 0.85rem;
    line-height: 1.25;
    margin-bottom: 0.1rem;
    font-weight: 500;
  }
  html[data-page="index"] .rjz-brand-story-grid .space-y-12 p {
    font-size: 0.7rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* ── 5) 品牌故事：图片合理高度 ── */
  html[data-page="index"] #brandImg { height: 15rem; }
  html[data-page="index"] .rjz-brand-story-grid { gap: 1.5rem; }

  /* ── 6) 标题→内容间距；其余边距收紧 ── */
  html[data-page="index"] #hero h1.rjz-home-hero-title { font-size: 2.25rem; }
  html[data-page="index"] .rjz-brand-story-grid .mb-12 { margin-bottom: 3.75rem; }

  /* ── 通用：各品牌页大图/大高块在小屏下不超高占满整屏 ── */
  html[data-page] .h-\[500px\]:not(.breath-circle),
  html[data-page] .h-\[520px\]:not(.breath-circle),
  html[data-page] .h-\[600px\]:not(.breath-circle),
  html[data-page] .h-\[620px\]:not(.breath-circle) {
    height: 18rem !important;
  }

  /* ── 通用：各页大尺寸标题在小屏缩小（原则⑦：标题不占屏）── */
  html[data-page] #main-content h1.font-title,
  html[data-page] #main-content h2.font-title {
    font-size: 1.9rem;
    line-height: 1.25;
  }

  /* ── bencaoji 商品：小屏 2 图一排，卡片文字收紧，服务段堆叠 ── */
  html[data-page="bencaoji"] #productGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
  html[data-page="bencaoji"] .product-card .product-copy h3 { font-size: 1rem; }
  html[data-page="bencaoji"] .product-card .product-summary {
    font-size: 0.72rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  html[data-page="bencaoji"] .product-card .product-price { font-size: 1.05rem; }
  html[data-page="bencaoji"] .rjz-page-product-service .grid {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;     /* 让「前往移动端」按钮在小屏居中 */
  }

  /* ── xundao 四时卡：小屏 2 图一排 ── */
  html[data-page="xundao"] .md\:grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
}