/*
设计哲学：临床植物学编辑风（Clinical Botanical Editorial）。本样式文件以深松针绿、雾白、冷灰、浅蓝水感色为核心；布局遵循顶部企业导航、横幅、左侧产品目录、右侧咨询资料栏和深绿页脚，动效保持克制、专业、资料库式稳定。
*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Noto+Sans+SC:wght@400;500;600;700;800&display=swap');

:root {
  --ink: #17221f;
  --muted: #65746f;
  --line: #e7eeeb;
  --soft-line: #f0f5f3;
  --paper: #ffffff;
  --wash: #f7faf9;
  --wash-2: #eef6f3;
  --green: #075b43;
  --green-2: #0b6b50;
  --green-3: #dbeee7;
  --aqua: #e7f6f8;
  --blue: #eef7fb;
  --gold: #fff6dd;
  --shadow: 0 18px 44px rgba(12, 55, 43, 0.08);
  --soft-shadow: 0 10px 24px rgba(12, 55, 43, 0.055);
  font-family: "Noto Sans SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background: #fff;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { border: 0; }

.site-shell { min-height: 100vh; background: #fff; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  height: 96px;
  padding: 0 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}
.brand-mark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  color: var(--green);
  border: 2px solid var(--green-3);
  border-radius: 16px 16px 16px 5px;
  background: linear-gradient(145deg, #ffffff, #eff8f4);
}
.brand-copy {
  display: flex;
  flex-direction: column;
  letter-spacing: .02em;
  line-height: 1.05;
}
.brand-copy strong {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 24px;
  letter-spacing: .045em;
}
.brand-copy small {
  margin-top: 4px;
  font-family: "Montserrat", sans-serif;
  font-size: 9px;
  color: var(--muted);
  letter-spacing: .09em;
}
.desktop-nav {
  display: flex;
  align-items: center;
  gap: 46px;
  font-weight: 600;
  font-size: 15px;
  color: #22342f;
  white-space: nowrap;
}
.desktop-nav a {
  position: relative;
  padding: 38px 0 34px;
  transition: color .2s ease;
}
.desktop-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 25px;
  width: 0;
  height: 3px;
  border-radius: 999px;
  background: var(--green);
  transform: translateX(-50%);
  transition: width .22s ease;
}
.desktop-nav a:hover, .desktop-nav a.active { color: var(--green); }
.desktop-nav a.active::after, .desktop-nav a:hover::after { width: 48px; }
.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--wash-2);
  color: var(--green);
  align-items: center;
  justify-content: center;
}
.mobile-nav {
  display: none;
  padding: 12px 28px 26px;
  border-top: 1px solid var(--line);
  background: #fff;
}
.mobile-nav a {
  display: block;
  padding: 14px 4px;
  border-bottom: 1px solid var(--soft-line);
  color: #2b3c37;
  font-weight: 600;
}
.mobile-nav a.active { color: var(--green); }

.hero {
  position: relative;
  min-height: 276px;
  display: grid;
  grid-template-columns: minmax(360px, 47%) 1fr;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(248, 251, 250, .97) 0%, rgba(248, 251, 250, .96) 42%, rgba(248, 251, 250, .38) 64%, rgba(248, 251, 250, .18) 100%),
    radial-gradient(circle at 78% 42%, rgba(89, 159, 125, .18), transparent 34%);
}
.hero-copy {
  max-width: 600px;
  width: 100%;
  margin-left: auto;
  padding: 54px 64px 52px 48px;
  animation: riseIn .55s ease both;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 30px;
  color: #667772;
  font-size: 13px;
  font-weight: 500;
}
.hero h1 {
  margin: 0;
  font-size: 42px;
  letter-spacing: .04em;
  line-height: 1.12;
  font-weight: 800;
}
.title-rule {
  display: block;
  width: 31px;
  height: 3px;
  margin: 20px 0 20px;
  background: var(--green);
}
.hero p {
  margin: 0 0 10px;
  color: #3b4945;
  font-weight: 600;
  font-size: 15px;
}
.hero .hero-sub {
  color: #667772;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.85;
}
.hero-visual {
  position: relative;
  min-height: 276px;
  isolation: isolate;
  background:
    linear-gradient(115deg, rgba(255,255,255,.3), rgba(255,255,255,.8)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0, rgba(255,255,255,.55) 38px, rgba(224,238,234,.5) 39px, rgba(224,238,234,.5) 41px),
    linear-gradient(135deg, #edf7f5 0%, #e9f3f0 38%, #f8fbfb 100%);
}
.hero-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 52% 60%, rgba(255,255,255,.88) 0 16%, transparent 17% 19%, rgba(255,255,255,.54) 20% 28%, transparent 29%),
              radial-gradient(circle at 78% 28%, rgba(255,255,255,.72), transparent 18%);
  filter: blur(.2px);
  z-index: -1;
}
.hero-path {
  position: absolute;
  right: 32px;
  bottom: 22px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  color: rgba(7,91,67,.7);
  border: 1px solid rgba(7,91,67,.14);
  font-size: 12px;
}
.petri {
  position: absolute;
  border: 2px solid rgba(255,255,255,.84);
  border-radius: 50%;
  box-shadow: inset 0 0 28px rgba(11, 107, 80, .08), 0 22px 42px rgba(18, 76, 62, .12);
  background: rgba(255,255,255,.24);
}
.petri-one { width: 310px; height: 126px; left: 18%; top: 86px; transform: rotate(-5deg); }
.petri-two { width: 210px; height: 82px; right: 14%; top: 56px; transform: rotate(8deg); }
.hero-leaf {
  position: absolute;
  color: #45a12a;
  filter: drop-shadow(0 18px 16px rgba(23,83,38,.18));
}
.leaf-one { left: 36%; top: 44px; transform: rotate(34deg); }
.leaf-two { left: 51%; top: 80px; transform: rotate(-18deg) scaleX(-1); color: #62b33e; }

.main-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 34px 32px 76px 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 36px;
  align-items: start;
}
.search-bar {
  display: grid;
  grid-template-columns: 1fr 48px;
  height: 46px;
  margin-bottom: 28px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 5px 18px rgba(7, 91, 67, 0.025);
}
.search-bar:focus-within {
  border-color: rgba(7, 91, 67, .38);
  box-shadow: 0 0 0 4px rgba(7,91,67,.07);
}
.search-bar input {
  min-width: 0;
  border: 0;
  outline: none;
  padding: 0 22px;
  color: #273832;
  background: transparent;
  font-size: 14px;
}
.search-bar input::placeholder { color: #9aa7a3; }
.search-bar button {
  background: var(--green);
  color: #fff;
  display: grid;
  place-items: center;
  transition: background .18s ease, transform .18s ease;
}
.search-bar button:hover { background: var(--green-2); }
.product-list {
  border-top: 1px solid var(--line);
}
.product-row {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 28px;
  padding: 24px 0 24px;
  border-bottom: 1px solid var(--line);
  animation: riseIn .42s ease both;
}
.product-row:hover .image-slot {
  transform: translateY(-2px);
  box-shadow: var(--soft-shadow);
}
.product-row:hover .view-more svg { transform: translateX(3px); }
.image-slot {
  position: relative;
  min-height: 130px;
  overflow: hidden;
  border-radius: 3px;
  border: 1px solid rgba(223,235,231,.9);
  background: linear-gradient(135deg, #eff8fb, #ffffff);
  transition: transform .2s ease, box-shadow .2s ease;
}
.image-slot::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,.1), rgba(255,255,255,.86)), radial-gradient(circle at 31% 38%, rgba(255,255,255,.92), transparent 19%);
}
.image-slot::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.72);
  filter: blur(.1px);
}
.tint-aqua { background: linear-gradient(135deg, #ecfbff, #f6fcfd 54%, #d7eef1); }
.tint-sky, .tint-blue { background: linear-gradient(135deg, #eef8ff, #fbfdff 52%, #dfeff8); }
.tint-gold { background: linear-gradient(135deg, #fff1cb, #fffaf0 50%, #f8d67d); }
.tint-water, .tint-glass { background: linear-gradient(135deg, #edf8ff, #ffffff 55%, #cbe9fa); }
.tint-milk, .tint-powder { background: linear-gradient(135deg, #f8faf9, #ffffff 42%, #edf1f0); }
.tint-shield { background: linear-gradient(135deg, #eef8ff, #ffffff 48%, #dceff8); }
.tint-plant { background: linear-gradient(135deg, #eef7ef, #ffffff 42%, #d8ebdc); }
.bubble {
  position: absolute;
  z-index: 2;
  display: block;
  border-radius: 50%;
  border: 1px solid rgba(100, 151, 168, .28);
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.95), rgba(255,255,255,.24) 52%, rgba(71,131,152,.12));
}
.bubble-a { width: 54px; height: 54px; left: 28%; top: 29%; }
.bubble-b { width: 34px; height: 34px; left: 58%; top: 18%; }
.bubble-c { width: 22px; height: 22px; left: 68%; top: 58%; }
.path-label {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  padding: 5px 8px;
  border-radius: 999px;
  color: rgba(7,91,67,.72);
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(7,91,67,.09);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-body { padding: 4px 0 0; min-width: 0; }
.product-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 24px;
}
.product-heading h2 {
  margin: 0 0 10px;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 800;
  color: #17221f;
}
.product-heading p {
  margin: 0;
  color: #64736f;
  font-size: 16px;
  line-height: 1.75;
}
.view-more {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: 2px;
  color: var(--green);
  font-weight: 700;
  font-size: 16px;
}
.view-more svg { transition: transform .2s ease; }
.tag-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(74px, 1fr));
  gap: 16px 18px;
}
.tag-item {
  min-width: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #506963;
  font-size: 12px;
  text-align: center;
  line-height: 1.3;
  white-space: nowrap;
}
.tag-item svg { color: var(--green); }
.all-products {
  display: block;
  min-width: 210px;
  height: 44px;
  margin: 28px auto 0;
  color: var(--green);
  background: #fff;
  border: 1px solid rgba(7,91,67,.55);
  border-radius: 4px;
  font-weight: 700;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.all-products:hover, .outline-button:hover {
  background: var(--green);
  color: #fff;
  transform: translateY(-1px);
}
.side-column {
  display: flex;
  flex-direction: column;
  gap: 34px;
}
.side-card {
  background: linear-gradient(180deg, #fff, #fbfdfc);
  border: 1px solid var(--soft-line);
  padding: 30px 28px;
  box-shadow: 0 12px 30px rgba(26, 57, 49, .04);
}
.side-card h3 {
  margin: 0 0 12px;
  font-size: 21px;
  line-height: 1.2;
  font-weight: 800;
}
.side-card p {
  margin: 0 0 26px;
  color: #5f6f6a;
  font-size: 14px;
  line-height: 1.72;
}
.help-card button, .side-card .outline-button {
  width: 100%;
  height: 43px;
  border-radius: 4px;
  font-weight: 700;
}
.help-card button {
  margin-top: 22px;
  color: #fff;
  background: var(--green);
  transition: background .2s ease, transform .2s ease;
}
.help-card button:hover { background: var(--green-2); transform: translateY(-1px); }
.contact-line {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-top: 22px;
  color: var(--green);
}
.contact-line span { display: flex; flex-direction: column; gap: 4px; }
.contact-line strong { font-size: 15px; font-weight: 700; color: #35524a; }
.contact-line small { font-size: 12px; color: #75827e; }
.recommend-list { display: flex; flex-direction: column; gap: 18px; margin: 22px 0 24px; }
.recommend-item {
  display: grid;
  grid-template-columns: 72px minmax(0,1fr);
  gap: 14px;
  align-items: center;
}
.recommend-item .image-slot { min-height: 62px; }
.recommend-item .path-label { display: none; }
.recommend-item .bubble-a { width: 26px; height: 26px; }
.recommend-item .bubble-b { width: 16px; height: 16px; }
.recommend-item .bubble-c { display: none; }
.recommend-item strong, .download-item strong {
  display: block;
  margin-bottom: 6px;
  color: #253631;
  font-size: 14px;
  font-weight: 800;
}
.recommend-item small, .download-item small {
  display: block;
  color: #697976;
  font-size: 12px;
  line-height: 1.45;
}
.outline-button {
  color: var(--green);
  background: #fff;
  border: 1px solid rgba(7,91,67,.45);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.download-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 20px 0;
  color: var(--green);
}
.download-item svg {
  flex: 0 0 auto;
  padding: 4px;
  width: 28px;
  height: 28px;
  border: 1px solid #f2cccc;
  color: #c84d42;
  background: #fff8f7;
  border-radius: 2px;
}
.site-footer {
  color: rgba(255,255,255,.86);
  background:
    radial-gradient(circle at 19% 20%, rgba(62, 143, 104, .34), transparent 32%),
    linear-gradient(135deg, #064731 0%, #03452f 52%, #033b2a 100%);
}
.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 42px 48px 38px;
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr) 210px;
  gap: 42px;
  align-items: start;
}
.site-footer .brand-mark {
  color: #fff;
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
}
.site-footer .brand-copy strong, .site-footer .brand-copy small { color: #fff; }
.footer-brand p {
  margin: 20px 0 22px;
  font-size: 13px;
  line-height: 1.8;
  color: rgba(255,255,255,.72);
}
.socials { display: flex; gap: 11px; }
.socials span {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  font-size: 11px;
}
.footer-links {
  display: grid;
  grid-template-columns: repeat(6, minmax(84px, 1fr));
  gap: 22px;
}
.footer-links h4, .footer-contact h4 {
  margin: 0 0 16px;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
}
.footer-links a {
  display: block;
  margin: 0 0 10px;
  color: rgba(255,255,255,.7);
  font-size: 13px;
  transition: color .2s ease;
}
.footer-links a:hover { color: #fff; }
.footer-contact p {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 10px;
  color: rgba(255,255,255,.72);
  font-size: 12px;
  line-height: 1.5;
}
.qr {
  width: 96px;
  height: 96px;
  margin: 16px 0 8px auto;
  padding: 8px;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  word-break: break-all;
  font-size: 9px;
  line-height: 1.3;
  color: var(--green);
  background: #fff;
  border: 4px solid rgba(255,255,255,.22);
}
.footer-contact small { display: block; text-align: right; color: rgba(255,255,255,.72); }

@keyframes riseIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1180px) {
  .header-inner { padding: 0 28px; }
  .desktop-nav { gap: 24px; }
  .main-wrap { grid-template-columns: 1fr 240px; gap: 24px; padding-left: 20px; padding-right: 20px; }
  .product-row { grid-template-columns: 220px 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-links { grid-template-columns: repeat(3, 1fr); }
  .footer-contact .qr, .footer-contact small { margin-left: 0; text-align: left; }
}
@media (max-width: 920px) {
  .header-inner { height: 76px; }
  .desktop-nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .mobile-nav { display: block; }
  .hero { grid-template-columns: 1fr; }
  .hero-copy { margin: 0; max-width: none; padding: 38px 28px 34px; }
  .hero-visual { min-height: 220px; }
  .main-wrap { grid-template-columns: 1fr; }
  .side-column { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .download-card { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .brand-copy strong { font-size: 19px; }
  .brand-mark { width: 40px; height: 40px; }
  .hero h1 { font-size: 34px; }
  .main-wrap { padding: 24px 18px 54px; }
  .product-row { grid-template-columns: 1fr; gap: 18px; }
  .image-slot { min-height: 160px; }
  .product-heading { flex-direction: column; margin-bottom: 18px; }
  .tag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .tag-item { align-items: flex-start; flex-direction: row; justify-content: flex-start; text-align: left; }
  .side-column { grid-template-columns: 1fr; }
  .download-card { grid-column: auto; }
  .footer-inner { padding: 34px 22px 28px; }
  .footer-links { grid-template-columns: repeat(2, 1fr); }
  .footer-bottom { padding: 0 22px 24px; flex-direction: column; }
}
@media (max-width: 430px) {
  .header-inner { padding: 0 16px; }
  .brand-copy small { font-size: 7px; }
  .hero-copy { padding-left: 20px; padding-right: 20px; }
  .footer-links { grid-template-columns: 1fr; }
}
/* Standalone HTML export helpers */
.brand-mark { font-size: 28px; font-weight: 800; }
.hero-leaf { font-size: 92px; line-height: 1; }
.leaf-two { font-size: 70px; }
.mini-icon { color: var(--green); font-size: 18px; line-height: 1; }
.pdf-badge { flex: 0 0 auto; width: 34px; height: 28px; display: grid; place-items: center; border: 1px solid #f2cccc; color: #c84d42; background: #fff8f7; border-radius: 2px; font-size: 10px; font-weight: 800; }
.mobile-nav[hidden] { display: none !important; }

/* ===================================================================
   产品行 — 图片区域（静态 HTML 版）
   .product-row-image / .product-img / .tag-icon
   =================================================================== */

/* 覆盖原 .product-row 的 grid 列定义，使图片列宽与设计一致 */
.product-row {
  grid-template-columns: 220px minmax(0, 1fr);
}

/* 图片容器：固定宽高比，圆角，裁剪溢出 */
.product-row-image {
  width: 220px;
  height: 150px;
  flex: 0 0 220px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--soft-line);
  border: 1px solid var(--line);
}

/* 图片本身：填满容器，保持比例裁剪 */
.product-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.product-row:hover .product-img {
  transform: scale(1.04);
}

/* tag-icon：小 SVG 图标容器，与文字对齐 */
.tag-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--wash-2);
  color: var(--green);
  flex-shrink: 0;
}

.tag-icon svg {
  width: 14px;
  height: 14px;
}

/* tag-item 在有 tag-icon 时调整为横向排列 */
.tag-item {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  text-align: left;
  white-space: normal;
  font-size: 14px;
  color: #506963;
}

/* ===== 响应式适配 ===== */
@media (max-width: 1180px) {
  .product-row {
    grid-template-columns: 180px 1fr;
  }
  .product-row-image {
    width: 180px;
    height: 135px;
    flex: 0 0 180px;
  }
}

@media (max-width: 720px) {
  .product-row {
    grid-template-columns: 1fr;
  }
  .product-row-image {
    width: 100%;
    height: 180px;
    flex: none;
  }
}