/* ===== 全局 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: #f5f5f5;
  display: flex;
  justify-content: center;
}

.page {
  width: 750px;
  height: 4048px;
  margin: 0 auto;
  background: #f2f2f2;
  position: relative;
}

.page img,
.page .divider,
.page .clickable {
  display: block;
  position: absolute;
}

/* ===== 点击效果 ===== */
.clickable {
  cursor: pointer;
  transition: opacity 0.15s, transform 0.15s;
}
.clickable:hover {
  opacity: 0.75;
}
.clickable:active {
  transform: scale(0.95);
}

/* 点击但不变透明 */
.clickable-no-fade {
  cursor: pointer;
  transition: transform 0.15s;
}
.clickable-no-fade:active {
  transform: scale(0.95);
}

/* 点赞/爱心 变红效果 */
.icon-like-heart {
  z-index: 2;
  filter: grayscale(100%);
  transition: filter 0.2s;
  pointer-events: auto;
}
.icon-like-heart.liked {
  filter: invert(14%) sepia(95%) saturate(6933%) hue-rotate(359deg) brightness(96%) contrast(121%);
}

/* 热区压到图标下面 */
.hit-area {
  z-index: 0;
}

/* 透明点击热区 */
.hit-area {
  position: absolute;
  display: block;
  cursor: pointer;
  transition: background 0.15s;
}
.hit-area:hover {
  background: rgba(0,0,0,0.03);
}
.hit-area:active {
  background: rgba(0,0,0,0.06);
}

/* ===== 公共文本样式 ===== */
.txt-card-title {
  width: 448px;
  height: 73px;
  line-height: 34px;
  color: rgba(51,51,51,1);
  font-size: 28px;
  text-align: left;
  font-family: PingFangSC-regular;
}
.txt-card-price {
  width: 51px;
  height: 39px;
  line-height: 34px;
  color: rgba(153,153,153,1);
  font-size: 28px;
  text-align: left;
  font-family: PingFangSC-regular;
}
.txt-tab {
  line-height: 39px;
  color: rgba(51,51,51,1);
  font-size: 28px;
  text-align: left;
  font-family: PingFangSC-regular;
}
.txt-nav-label {
  height: 30px;
  line-height: 30px;
  color: rgba(51,51,51,1);
  font-size: 22px;
  text-align: left;
  font-family: PingFangSC-regular;
}

/* ===== 公共尺寸 ===== */
.s-card-thumb { width: 174px; height: 130px; }
.s-card-icon-sm { width: 28px; height: 24px; }
.s-card-icon-md { width: 28px; height: 28px; }
.s-divider { left: 25px; width: 700px; height: 2px; background-color: rgba(242,242,242,1); }

/* ===== 底层：背景/区块图 ===== */

.img-rect1-1 {
  left: 0; top: 0; width: 750px; height: 40px;
  background-color: rgba(37,164,255,1);
}
.img-rect1-copy1-1 {
  left: 0; top: 40px; width: 750px; height: 88px;
  line-height: 20px; text-align: center;
  background-color: rgba(37,164,255,1);
  color: rgba(16,16,16,1); font-size: 14px;
  font-family: PingFangSC-regular;
}
.img-pic2  { left: 0;   top: 128px; width: 750px; height: 274px; }
.img-pic3  { left: 17px; top: 239px; width: 716px; height: 310px; }
.img-pic4  { left: 18px; top: 562px; width: 714px; height: 216px; }

/* 群组 26 公共 */
.group26-base {
  line-height: 20px; border-radius: 12px;
  background-color: rgba(255,255,255,1);
  color: rgba(16,16,16,1); font-size: 14px;
  text-align: center; font-family: PingFangSC-regular;
}
.img-group26       { left: 22px; top: 784px;  width: 706px; height: 1358px; }
.img-group26-copy1 { left: 22px; top: 2162px; width: 706px; height: 726px; }
.img-group26-copy2 { left: 22px; top: 2908px; width: 706px; height: 1022px; }

.img-rect3 {
  left: 0; top: 3950px; width: 750px; height: 98px;
  background-color: rgba(255,255,255,1);
}

/* ===== 顶层：UI 小元素 ===== */

.img-statusbar {
  left: 12px; top: 10px; width: 727px; height: 40px;
  background-color: rgba(229,229,229,1);
}
.img-miniprogram { left: 566px; top: 50px; width: 174px; height: 64px; }
.input-search {
  position: absolute;
  left: 23px; top: 148px; width: 634px; height: 70px;
  border: none; outline: none;
  border-radius: 35px;
  padding: 0 60px 0 75px;
  background-color: rgba(255,255,255,0.28);
  font-size: 24px;
  color: #fff;
  font-family: PingFangSC-regular;
}
.input-search::placeholder {
  color: rgba(255,255,255,0.6);
}

/* 搜索框内左侧图标 */
.img-search-icon-left {
  left: 49px; top: 166px; width: 32px; height: 32px;
}
.img-group21 { left: 678px; top: 168px; width: 39px; height: 39px; }

/* ===== 顶层：Section1 内容 (images5) ===== */
.sec1-icon { left: 42px;  top: 810px; width: 28px;  height: 34px; }
.sec1-title {
  left: 80px;  top: 804px; width: 128px; height: 45px;
  line-height: 45px; color: rgba(51,51,51,1);
  font-size: 32px; text-align: left; font-family: PingFangSC-bold;
}
.sec1-link {
  left: 652px; top: 807px; width: 56px;  height: 39px;
  line-height: 39px; color: rgba(15,155,255,1);
  font-size: 28px; text-align: left; font-family: PingFangSC-regular;
}
.sec1-img1 { left: 38px; top: 879px;  width: 674px; height: 398px; }
.sec1-img2 { left: 38px; top: 1291px; width: 674px; height: 398px; }
.sec1-img3 { left: 38px; top: 1704px; width: 674px; height: 398px; }

/* ===== 顶层：Section2 内容 (images6) ===== */
.sec2-icon { left: 38px;  top: 2187px; width: 36px;  height: 35px; }
.sec2-title {
  left: 80px;  top: 2182px; width: 128px; height: 45px;
  line-height: 45px; color: rgba(51,51,51,1);
  font-size: 32px; text-align: left; font-family: PingFangSC-bold;
}
.sec2-link {
  left: 652px; top: 2185px; width: 56px;  height: 39px;
  line-height: 39px; color: rgba(15,155,255,1);
  font-size: 28px; text-align: left; font-family: PingFangSC-regular;
}
.sec2-img1 { left: 42px;  top: 2257px; width: 322px; height: 284px; }
.sec2-img2 { left: 386px; top: 2257px; width: 322px; height: 284px; }
.sec2-img3 { left: 42px;  top: 2556px; width: 322px; height: 294px; }
.sec2-img4 { left: 386px; top: 2556px; width: 322px; height: 294px; }

/* ===== 顶层：tab 栏 ===== */

.img-tab-active {
  left: 42px; top: 3003px; width: 60px; height: 42px;
  line-height: 42px; color: rgba(15,155,255,1);
  font-size: 30px; text-align: left; font-family: PingFangSC-regular;
}
.tab-1  { left: 130px; top: 3003px; width: 112px; height: 39px; }
.tab-2  { left: 270px; top: 3003px; width: 84px; height: 39px; }
.tab-3  { left: 382px; top: 3003px; width: 84px; height: 39px; }
.tab-4  { left: 494px; top: 3003px; width: 84px; height: 39px; }
.tab-5  { left: 606px; top: 3003px; width: 84px; height: 39px; }

/* ===== 顶层：产品卡片 ===== */

/* 第1行 */
.card1-thumb  { left: 42px;  top: 3090px; }
.card1-title  { left: 238px; top: 3090px; }
.card1-icon1  { left: 500px; top: 3197px; }
.card1-price1 { left: 538px; top: 3189px; }
.card1-icon2  { left: 619px; top: 3192px; }
.card1-price2 { left: 657px; top: 3189px; }
.hit-card1    { left: 42px;  top: 3090px; width: 666px; height: 156px; }

/* 第2行 */
.card2-thumb  { left: 42px;  top: 3285px; }
.card2-title  { left: 238px; top: 3284px; }
.card2-icon1  { left: 500px; top: 3391px; }
.card2-price1 { left: 538px; top: 3383px; }
.card2-icon2  { left: 619px; top: 3387px; }
.card2-price2 { left: 657px; top: 3383px; }
.hit-card2    { left: 42px;  top: 3284px; width: 666px; height: 156px; }

/* 第3行 */
.card3-thumb  { left: 42px;  top: 3478px; }
.card3-title  { left: 238px; top: 3478px; }
.card3-icon1  { left: 500px; top: 3585px; }
.card3-price1 { left: 538px; top: 3577px; }
.card3-icon2  { left: 619px; top: 3580px; }
.card3-price2 { left: 657px; top: 3577px; }
.hit-card3    { left: 42px;  top: 3478px; width: 666px; height: 156px; }

/* 第4行 */
.card4-thumb  { left: 42px;  top: 3673px; }
.card4-title  { left: 238px; top: 3672px; }
.card4-icon1  { left: 500px; top: 3779px; }
.card4-price1 { left: 538px; top: 3771px; }
.card4-icon2  { left: 619px; top: 3774px; }
.card4-price2 { left: 657px; top: 3771px; }
.hit-card4    { left: 42px;  top: 3672px; width: 666px; height: 156px; }

.card-thumb-bg { background-color: rgba(229,229,229,1); }

/* ===== 顶层：分割线 ===== */

.d-1 { top: 3252px; }
.d-2 { top: 3446px; }
.d-3 { top: 3640px; }
.d-4 { top: 3834px; }

/* ===== 顶层：底部导航 ===== */

.nav-label-active {
  height: 30px; line-height: 30px;
  color: rgba(15,155,255,1); font-size: 22px;
  text-align: left; font-family: PingFangSC-regular;
}

.nav1-icon  { left: 73px;  top: 3960px; width: 42px; height: 43px; }
.nav1-label { left: 72px;  top: 4008px; width: 44px; height: 30px; }
.nav2-icon  { left: 258px; top: 3962px; width: 46px; height: 46px; }
.nav2-label { left: 258px; top: 4008px; width: 44px; height: 30px; }
.nav3-icon  { left: 451px; top: 3962px; width: 36px; height: 42px; }
.nav3-label { left: 426px; top: 4008px; width: 88px; height: 30px; }
.nav4-icon  { left: 634px; top: 3960px; width: 44px; height: 44px; }
.nav4-label { left: 635px; top: 4008px; width: 44px; height: 30px; }

.hit-nav1 { left: 72px;  top: 3960px; width: 52px;  height: 78px; }
.hit-nav2 { left: 258px; top: 3962px; width: 54px;  height: 76px; }
.hit-nav3 { left: 426px; top: 3962px; width: 88px;  height: 76px; }
.hit-nav4 { left: 634px; top: 3960px; width: 52px;  height: 78px; }