/* ============================================================
   中晟农服 · 首页1 · 样式
   来源：用户提供的 zip 中的 variant 1（农资超市 v1）
   ============================================================ */
:root{
  --green:#11a54a;
  --green2:#27b91b;
  --blue:#bde7fb;
  --ink:#222;
  --muted:#909090;
  --bg:#f5f5f5;
  --card:#fff;
  --line:#eee;
  --phone-w:375px;
  --phone-h:812px;
}
*{box-sizing:border-box}
html,body{margin:0;background:#f5f5f5;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",Arial,sans-serif}
body{min-height:100vh;padding:32px 20px 52px}
a{color:inherit;text-decoration:none}     /* ★ 全局链接无下划线 */
button{background:none;border:none;font:inherit;cursor:pointer}

/* 页面标题（开发预览页） */
.page-title{text-align:center;margin:0 0 8px;font-size:24px;font-weight:700;letter-spacing:.02em}
.page-sub{text-align:center;margin:0 0 26px;color:#777;font-size:13px}

/* 双栏容器（左手机 + 右侧操作面板） */
.board{display:flex;justify-content:center;gap:38px;align-items:flex-start;flex-wrap:wrap}

/* ★ 左对齐布局：两个手机并排在左侧，操作面板在右 */
.board-left{
  justify-content:flex-start;
  padding-left:32px;
}

/* 手机模拟器 */
.variant{width:var(--phone-w)}
.variant__title{text-align:center;margin:0 0 10px;font-size:14px;font-weight:600;color:#666}
.phone{
  height:var(--phone-h);
  width:var(--phone-w);
  overflow:hidden;
  border-radius:20px;
  background:#f5f5f5;
  box-shadow:0 18px 45px rgba(0,0,0,.14),0 2px 6px rgba(0,0,0,.08);
  border:8px solid #111;
  position:relative;
  display:flex;flex-direction:column;
}

/* ★ 可滚动内容区：位于状态栏之下、TabBar之上 */
.scroll-area{
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  background:#f5f5f5;
}
.scroll-area::-webkit-scrollbar{width:0}

/* 底部留白（确保最后一个模块不被 TabBar 遮挡） */
.scroll-bottom-spacer{height:20px}

/* ★ 状态栏（白图标：时间 + 信号 + 电池） */
.status{
  height:31px;
  background:var(--green);
  color:#fff;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;font-size:13px;font-weight:600;
}
.status .time{font-weight:700;color:#fff}
.status .icons{display:flex;align-items:center;gap:6px;font-size:0}
/* 信号：4 根递增竖条（白色） */
.status .signal{
  display:inline-flex;align-items:flex-end;
  gap:2px;height:10px;
}
.status .signal i{
  width:3px;background:#fff;border-radius:1px;display:inline-block;
}
.status .signal i:nth-child(1){height:3px}
.status .signal i:nth-child(2){height:5px}
.status .signal i:nth-child(3){height:7px}
.status .signal i:nth-child(4){height:10px}
/* 电池（白色边框 + 实心填充 + 正极） */
.status .battery{
  display:inline-block;
  width:24px;height:11px;
  border:1px solid #fff;border-radius:2px;
  position:relative;background:transparent;
  padding:1px;
}
.status .battery__fill{
  display:block;width:100%;height:100%;
  background:#fff;border-radius:1px;
}
.status .battery::after{
  content:"";
  position:absolute;right:-3px;top:3.5px;
  width:2px;height:4px;
  background:#fff;
  border-radius:0 1px 1px 0;
}

/* ★ 顶部导航 */
.appbar{
  height:55px;
  background:var(--green);
  color:#fff;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 15px 7px;font-size:17px;font-weight:700;
}
.appbar .home{font-size:23px;line-height:1}
.appbar .brand{flex:1;text-align:center;margin-left:20px}
.appbar .tools{display:flex;align-items:center;gap:5px}
/* ★ 右上角胶囊（浅绿胶囊 + 3白点菜单 + 圆环关闭） */
.capsule{
  display:flex;align-items:center;
  height:28px;
  background:rgba(255,255,255,.35);             /* 浅绿色胶囊（白色半透明） */
  border-radius:14px;
  padding:0 4px 0 8px;
  color:#fff;
}
.capsule__menu{
  display:flex;align-items:center;gap:3px;
  padding-right:6px;
  border-right:1px solid rgba(255,255,255,.5);
}
.capsule__menu .dot{
  width:4px;height:4px;border-radius:50%;
  background:#fff;
}
.capsule__close{
  margin-left:6px;
  width:18px;height:18px;
  border:1.5px solid #fff;border-radius:50%;
  display:inline-block;
  position:relative;
}

/* 位置天气条（左右两端贴边框，上下小圆角） */
.weather{
  height:32px;
  margin:6px 0 0;                  /* ★ 贴左右边框，仅上间距 6px */
  background:var(--blue);
  border-radius:6px 6px 0 0;        /* ★ 仅顶部圆角，底部贴边 */
  display:flex;align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 12px;
  font-size:11px;color:#111;font-weight:600;white-space:nowrap;
}
/* 字段容器（图标 + 文字） */
.weather__item{
  display:inline-flex;align-items:center;gap:4px;
  color:#111;
  flex-shrink:0;
}
.weather__ico{
  width:13px;height:13px;
  flex-shrink:0;
  color:var(--green);              /* ★ 默认图标用品牌深绿 */
}
/* 位置图标用绿色（更醒目） */
.weather__item:first-child .weather__ico{color:var(--green)}
/* 天气图标用橙色（突出） */
.weather__item:nth-child(3) .weather__ico{color:#FF9800}
/* 风向图标用蓝色 */
.weather__item:nth-child(5) .weather__ico{color:#1976D2}
/* 消息图标用深色 */
.weather__item--msg .weather__ico{color:var(--green)}
/* 字段分隔竖线 */
.weather__sep{
  width:1px;height:12px;
  background:rgba(0,0,0,.14);
  flex-shrink:0;
}

/* 公告条：图标 + 标题 + 上下滚动文字（左右贴边框） */
.notice{
  height:36px;
  background:#fff;
  margin:6px 0 0;                  /* ★ 贴左右边框，仅上间距 6px */
  border-radius:6px 6px 0 0;        /* ★ 仅顶部圆角 */
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 10px;
  font-size:11px;
  color:#555;
  overflow:hidden;
}
.notice__icon{
  flex-shrink:0;
  width:18px;height:18px;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--green);
}
.notice__icon svg{width:14px;height:14px}
.notice__title{
  flex-shrink:0;
  font-weight:700;
  color:var(--green);
  font-size:11px;
  padding-right:6px;
  border-right:1px solid #eee;
  margin-right:4px;
}
/* 滚动视口：单行高度 + 隐藏溢出 */
.notice__viewport{
  flex:1;
  height:18px;
  overflow:hidden;
  position:relative;
}
/* 列表：4 条公告 + 1 条复制首条（无缝循环） */
.notice__list{
  margin:0;padding:0;list-style:none;
  animation:notice-scroll 14s linear infinite;
}
.notice__item{
  height:18px;
  line-height:18px;
  font-size:11px;
  color:#555;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  padding-right:16px;
}
/* ★ 上下滚动动画：每条停留 3.5s，4 条共用 14s */
@keyframes notice-scroll{
  0%   {transform:translateY(0)}
  18%  {transform:translateY(0)}
  25%  {transform:translateY(-18px)}
  43%  {transform:translateY(-18px)}
  50%  {transform:translateY(-36px)}
  68%  {transform:translateY(-36px)}
  75%  {transform:translateY(-54px)}
  93%  {transform:translateY(-54px)}
  100% {transform:translateY(-72px)}   /* 回到首条（=第5条=第1条复制）位置 */
}

/* ★ 轮播主视觉（左右贴边框，仅顶部圆角；3 张自动滚动） */
.banner-carousel{
  position:relative;
  margin:6px 0 0;                  /* 贴左右边框，仅上间距 6px */
  border-radius:6px 6px 0 0;        /* 仅顶部圆角 */
  overflow:hidden;
  height:63px;                       /* 保持原尺寸 */
  background:#000;
  width:100%;
}
.banner-carousel__track{
  display:flex;
  width:300%;
  height:100%;
  transform:translateX(0%);
  transition:transform .55s ease;
}
.banner-slide{
  position:relative;
  width:calc(100%/3);
  height:100%;
  flex-shrink:0;
  overflow:hidden;
}
.banner-slide img{
  position:absolute;inset:0;
  width:100%;
  height:100%;
  object-fit:cover;                 /* 铺满容器 */
  object-position:center center;
  display:block;
}
/* 广告语（覆盖在图片左下，柔和高对比） */
.banner-slide__caption{
  position:absolute;
  left:8px;bottom:8px;
  max-width:calc(100% - 50px);
  padding:4px 8px;
  border-radius:4px;
  background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,0));
  color:#fff;
  z-index:1;
  text-align:left;
  pointer-events:none;
}
.banner-slide__caption strong{
  display:block;
  font-size:11px;
  font-weight:700;
  line-height:1.2;
  text-shadow:0 1px 2px rgba(0,0,0,.5);
}
.banner-slide__caption small{
  display:block;
  margin-top:2px;
  font-size:9px;
  font-weight:500;
  opacity:.95;
  text-shadow:0 1px 2px rgba(0,0,0,.5);
}

/* 轮播指示点 */
.banner-carousel__dots{
  position:absolute;left:0;right:0;bottom:4px;
  display:flex;justify-content:center;gap:4px;
  z-index:2;
}
.banner-carousel__dots .dot{
  width:4px;height:4px;border-radius:50%;
  background:rgba(255,255,255,.55);
  cursor:pointer;
  transition:background .2s, width .2s;
}
.banner-carousel__dots .dot.active{
  background:#fff;
  width:12px;border-radius:3px;
}

/* 通用 section（白底卡片） */
.section{background:#fff;margin-top:7px;padding:10px 12px}

/* ★ 统一分区标题：13px 粗体 + 左侧色块 + 图标 */
.section__title,
.section-title{
  font-size:13px;
  font-weight:700;
  color:var(--ink);
  margin:0 0 10px;                   /* ★ 与其他标题顶部距离一致 */
  display:flex;
  align-items:center;
  gap:6px;
}
/* 左侧色块（绿色竖条） */
.section__title-bar{
  width:3px;
  height:14px;
  background:var(--green);
  border-radius:2px;
  flex-shrink:0;
}
/* 标题前图标 */
.section__title-ico{
  width:16px;
  height:16px;
  flex-shrink:0;
  color:var(--green);
}

/* 商品类目 */
.product-row{
  display:grid;
  grid-template-columns:54px repeat(4,1fr);
  gap:8px;align-items:stretch;
}
/* ★ 此元素代表模块标题，移除所有边框 */
.logo-tile{
  height:60px;background:#fff;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  color:#48a557;font-weight:800;
  border:none;font-size:9px;
}
.logo-tile__icon{
  width:26px;height:26px;
  object-fit:contain;
  display:block;
  margin-bottom:2px;
}
.logo-tile__label{font-size:9px;font-weight:700;color:#48a557;margin-top:1px}

/* 产品卡：正方形 + 真实图片 */
.product{
  position:relative;
  background:#fff;
  border:1px solid #f0f0f0;     /* ★ 恢复外边框 */
  border-radius:4px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:11px;color:#222;font-weight:500;
  overflow:hidden;
  transition:transform .15s, border-color .15s;
}
.product:hover{
  border-color:var(--green);
  transform:translateY(-1px);
}
.product--square{
  aspect-ratio:1/1;            /* ★ 正方形 */
  height:auto;                 /* 覆盖原 48px 高度 */
  padding:0;
}
.product--square img{
  width:100%;
  height:calc(100% - 22px);    /* 图片占主体，底部留 22px 给名字 */
  object-fit:cover;
  display:block;
  border-bottom:none;          /* ★ 去掉图片底部边框 */
}
.product__name{
  width:100%;
  height:22px;
  line-height:22px;            /* ★ 与 height 一致，文字精准居中 */
  text-align:center;
  font-size:11px;
  color:#444;
  background:transparent;       /* ★ 去除浅灰背景，与卡片融为一体 */
  text-decoration:none;          /* ★ 去除 a 链接下划线 */
  padding:0 4px;                /* ★ 上下 0（由 line-height 控垂直） */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* 专属产品 */
.special{
  display:grid;grid-template-columns:54px repeat(4,1fr);
  gap:8px;align-items:center;
}
.special-label{
  color:#ef316c;font-weight:800;line-height:1.05;font-size:15px;padding-left:2px;
}
.special-label small{display:block;color:#b26d34;font-size:8px;margin-top:5px}
.special .product{height:60px}  /* 与 logo-tile 对齐 */

/* 双入口：满版图块（图片铺满 + 文字叠加） */
.two-btn{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.wide-btn{
  position:relative;
  background:#fff;
  border:1px solid #f1f1f1;
  border-radius:6px;
  overflow:hidden;
  transition:border-color .15s, transform .15s;
}
.wide-btn:hover{
  border-color:var(--green);
  transform:translateY(-1px);
}
/* ★ 满版图块 */
.wide-btn--full{
  height:90px;
  display:block;
}
/* 满版背景图 */
.wide-btn__bg{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  z-index:0;
}
/* 文字叠加层（tag 在上 + title 在下，纵向居中） */
.wide-btn__overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:0 10px;
  z-index:1;
  color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.wide-btn__tag{
  display:inline-block;
  align-self:flex-start;
  font-size:9px;
  background:rgba(255,255,255,.25);
  border:1px solid rgba(255,255,255,.4);
  padding:1px 6px;
  border-radius:8px;
  margin-bottom:3px;
  letter-spacing:0.5px;
  backdrop-filter:blur(4px);
}
.wide-btn__title{
  font-size:18px;
  font-weight:700;
  line-height:1.1;
  letter-spacing:1px;
  margin-bottom:2px;
}
.wide-btn__subtitle{
  font-size:10px;
  opacity:0.92;
  letter-spacing:0.3px;
}
/* 箭头（白色，覆盖在图片上） */
.wide-btn__arrow--light{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  color:#fff;
  font-size:22px;
  font-weight:300;
  text-shadow:0 1px 3px rgba(0,0,0,.4);
  z-index:2;
}

/* 性价首选：促销商品 4 卡网格 */
.promo-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}
.promo-card{
  background:#fff;
  border:1px solid #f0f0f0;     /* ★ 恢复外边框 */
  border-radius:4px;
  overflow:hidden;
  display:flex;flex-direction:column;align-items:center;
  position:relative;
  transition:transform .15s, border-color .15s;
}
.promo-card:hover{
  border-color:var(--green);
  transform:translateY(-1px);
}
.promo-card img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
  border-bottom:none;          /* ★ 去掉图片底部边框 */
}
.promo-card__name{
  width:100%;
  font-size:11px;            /* ★ 与全程方案一致 */
  color:#444;
  text-align:center;
  padding:8px 4px;             /* ★ 上下 8px 较大间距，左右 4px */
  background:transparent;       /* ★ 去除浅灰背景 */
  text-decoration:none;          /* ★ 去除 a 链接下划线 */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* 全程方案 */
.solutions{background:#fff;margin-top:7px;padding:10px 12px}
.solution-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ★ 视频卡：固定 158px 宽，16:9 比例（约 89px 高） */
.solution{
  position:relative;
  width:158px;        /* ★ 宽度固定 158px */
  aspect-ratio:16/9;  /* ★ 16:9 比例（高 ≈89px） */
  border-radius:5px;  /* ★ 5px 圆角 */
  overflow:hidden;
  background:#d0d0d0;
  display:block;
  transition:transform .15s;
}
.solution:hover{transform:translateY(-1px)}
/* 视频画面（铺满） */
.solution__img{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  z-index:0;
}
/* 中央播放按钮 */
.solution__play{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:32px;height:32px;
  z-index:2;
  color:#fff;
}
.solution__play svg{width:32px;height:32px;display:block}
/* 时长（右下角） */
.solution__duration{
  position:absolute;
  right:4px;bottom:4px;
  padding:1px 5px;
  background:rgba(0,0,0,.65);
  color:#fff;
  font-size:10px;
  font-weight:600;
  border-radius:2px;
  z-index:2;
}

.solution-label{text-align:center;font-size:11px;font-weight:600;margin-top:3px}

/* 底部 TabBar（脱离滚动区，固定在 phone 底部） */
.bottom{
  flex-shrink:0;
  height:67px;
  background:#fff;
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid #eee;padding-top:7px;
}
.nav{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  color:#bbb;font-size:10px;cursor:pointer;
}
.nav .ico{font-size:22px;line-height:20px}
.nav.active{color:#1cab52;font-weight:700}
.nav.active .ico{filter:saturate(1.3)}

/* ============================================================
   右侧操作面板
   ============================================================ */
.side-panel{
  width:280px;
  display:flex;flex-direction:column;gap:16px;
  padding-top:40px;
}
.side-panel__card{
  background:#fff;border-radius:12px;padding:18px;
  box-shadow:0 4px 16px rgba(0,0,0,.06);
}
.side-panel__card h3{margin:0 0 12px;font-size:15px;color:#222}
.side-panel__card p{margin:0 0 12px;color:#666;font-size:13px}
.side-panel__btn{
  display:block;text-align:center;
  padding:10px;background:var(--green);color:#fff;
  border-radius:8px;text-decoration:none;font-weight:600;
  margin-bottom:8px;font-size:13px;
}
.side-panel__btn:hover{filter:brightness(1.05)}
.side-panel__btn--ghost{
  background:#f5f5f5;color:var(--green);
  border:1px solid var(--green);
}
.side-panel__list{
  margin:0;padding:0;list-style:none;
}
.side-panel__list li{
  padding:6px 0;border-bottom:1px dashed #eee;
  font-size:12px;color:#555;line-height:1.5;
}
.side-panel__list li:last-child{border-bottom:none}

/* 响应式 */
@media(max-width:820px){
  body{padding:22px 12px 36px}
  .board{gap:28px;flex-direction:column;align-items:center}
  .page-title{font-size:20px}
  .side-panel{width:var(--phone-w);padding-top:0}
}

/* ============================================================
   首页2 独有模块（合并预览页需要）
   ============================================================ */
:root{
  --price:#e23a3a;
  --price-orig:#bbb;
}

/* 猜你喜欢（4 商品网格） */
/* 猜你喜欢：2×2 网格，只展示图标 + 名称 */
.recommend-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.recommend{
  background:#fff;
  border:1px solid #f0f0f0;     /* ★ 恢复外边框 */
  border-radius:4px;
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .15s, border-color .15s;
}
.recommend:hover{
  border-color:var(--green);
  transform:translateY(-1px);
}
.recommend__img{
  width:100%;
  aspect-ratio:1/1;            /* ★ 正方形图标 */
  object-fit:cover;
  display:block;
  border-bottom:none;          /* ★ 去掉图片底部边框 */
}
.recommend__name{
  width:100%;
  font-size:11px;
  color:#444;
  text-align:center;
  padding:8px 4px;             /* ★ 上下 8px 较大间距，左右 4px */
  background:transparent;       /* ★ 去除浅灰背景 */
  text-decoration:none;          /* ★ 去除 a 链接下划线 */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* 专属产品（列表 有价格） */
.exclusive-list{
  display:flex;flex-direction:column;gap:8px;
}
.exclusive-row{
  display:flex;align-items:center;gap:10px;
  padding:8px;
  background:#fafafa;
  border-radius:8px;
  border:1px solid #f0f0f0;
}
.exclusive-row__img{
  width:54px;height:54px;flex-shrink:0;
  background:#fff;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid #eee;
  padding:4px;
}
.exclusive-row__img img{
  width:100%;height:100%;
  object-fit:contain;
  display:block;
}
.exclusive-row__info{
  flex:1;min-width:0;overflow:hidden;
}
.exclusive-row__name{
  font-size:12px;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  margin-bottom:2px;
}
.exclusive-row__spec{
  font-size:10px;color:#999;
}
.exclusive-row__price{
  text-align:right;flex-shrink:0;
}
.exclusive-row__price .price{
  display:flex;align-items:baseline;gap:1px;
  color:var(--price);font-weight:700;
}
.exclusive-row__price .currency{font-size:11px}
.exclusive-row__price .num{font-size:16px}
.price-orig{
  font-size:10px;color:var(--price-orig);
  text-decoration:line-through;
  margin-top:2px;
}