:root {
  --h5-primary: #167DFB;
  --h5-primary-rgb: 22, 125, 251;
  --h5-primary-soft: #e8f3ff;
  --h5-primary-soft-2: #d6eaff;
  --h5-primary-border: #cfe5ff;
  --h5-primary-shadow: rgba(22, 125, 251, .18);
  --h5-bg: #f7f8fa;
  --h5-text: #222;
  --h5-muted: #999;
  --h5-price: #e54d42;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--h5-bg);
  color: var(--h5-text);
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
.h5-page {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--h5-bg);
  position: relative;
  padding-bottom: 72px;
}
.h5-header {
  background: linear-gradient(180deg, #167DFB 0%, #4da3fc 70%, transparent 100%);
  padding: 16px 16px 36px;
}
.search {
  background: #fff;
  border-radius: 999px;
  height: 36px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 6px;
}
.search input {
  border: 0;
  outline: none;
  flex: 1;
  font-size: 13px;
  background: transparent;
}
.search-ico { color: #999; }
.banner {
  margin: -22px 12px 12px;
  min-height: 140px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--h5-primary-soft), #9ec9ff);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  padding: 18px;
  box-shadow: 0 4px 12px var(--h5-primary-shadow);
}
.banner-text h2 { margin: 0 0 8px; font-size: 18px; color: #0b4ea8; }
.banner-text p { margin: 0 0 10px; font-size: 12px; color: #3d6fa3; }
.banner-btn {
  display: inline-block;
  background: #222;
  color: #fff;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
}
.cate-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px 6px;
  padding: 4px 10px 14px;
  background: #fff;
  margin: 0 12px 12px;
  border-radius: 12px;
}
.cate-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #444;
}
.cate-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}
.cate-icon.c1 { background: #f56c6c; }
.cate-icon.c2 { background: #167DFB; }
.cate-icon.c3 { background: #e6a23c; }
.cate-icon.c4 { background: #67c23a; }
.cate-icon.c5 { background: #9b6dff; }
.cate-icon.c6 { background: #36cfc9; }
.cate-icon.c7 { background: #ff7875; }
.cate-icon.c8 { background: #597ef7; }
.cate-icon.c9 { background: #ffa940; }
.cate-icon.more { background: var(--h5-primary); }
.cate-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}
.section { padding: 0 12px 12px; }
.section h3 { margin: 4px 0 12px; font-size: 16px; }
.product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.product-card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
}
.product-card .thumb {
  height: 140px;
  background: #f0fafa;
  display: grid;
  place-items: center;
  color: var(--h5-primary);
  font-size: 13px;
  position: relative;
  overflow: hidden;
}

/* 装修模块 */
.home-page .h5-header.mod-search {
  background: linear-gradient(180deg, var(--h5-primary) 0%, #4da3fc 70%, transparent 100%);
  padding-bottom: 28px;
}

/* DIY 头部 */
.diy-home-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 14px;
  color: #1a1a1a;
  box-sizing: border-box;
}
.diy-home-header.is-scrolled[data-scroll-type="color"] {
  background: var(--diy-scroll-bg, #167DFB) !important;
  background-image: none !important;
}
.diy-home-header.is-scrolled[data-scroll-type="image"] {
  background-image: var(--diy-scroll-image) !important;
  background-size: cover !important;
  background-position: center !important;
}
.diy-hdr-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 0;
  margin: 0;
}
.diy-hdr-row.brand-row { min-height: 36px; margin: 0; }
.diy-hdr-row.action-row { margin: 0; gap: 8px; min-height: 34px; }
.diy-hdr-slot { flex-shrink: 0; }
.diy-hdr-slot.empty { width: 0; min-width: 0; }
.diy-hdr-slot.grow { flex: 1; min-width: 8px; }
.diy-hdr-slot.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 72%;
  text-decoration: none;
  color: inherit;
}
.diy-hdr-logo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255,255,255,.4);
  border: 1.5px solid rgba(0,0,0,.16);
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.diy-hdr-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.diy-hdr-brand-text {
  min-width: 0;
  overflow: hidden;
  line-height: 1.15;
}
.diy-hdr-brand-text strong {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.diy-hdr-brand-text small {
  display: block;
  margin-top: 1px;
  font-size: 10px;
  font-weight: 500;
  color: #333;
  letter-spacing: .3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: .88;
}
.diy-hdr-ph {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 13px;
  color: #666;
  background: rgba(255,255,255,.55);
}
.diy-hdr-slot.icon img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: cover;
  display: block;
  background: rgba(255,255,255,.35);
}
.diy-hdr-capsule {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(0,0,0,.14);
  border: 1px solid rgba(255,255,255,.42);
  flex-shrink: 0;
  backdrop-filter: blur(4px);
}
.diy-hdr-capsule i,
.diy-hdr-capsule b {
  display: block;
  width: 18px;
  height: 18px;
  position: relative;
}
.diy-hdr-capsule i::before {
  content: '';
  position: absolute;
  left: 2px; top: 8px;
  width: 3px; height: 3px; border-radius: 50%; background: #fff;
  box-shadow: 5px 0 0 #fff, 10px 0 0 #fff;
}
.diy-hdr-capsule span {
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,.5);
  margin: 0 9px;
}
.diy-hdr-capsule b::before {
  content: '';
  position: absolute;
  inset: 2px;
  border: 1.5px solid #fff;
  border-radius: 50%;
}
.diy-hdr-capsule b::after {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1.5px solid #fff;
  border-radius: 50%;
}
.diy-hdr-slot.location {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 108px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  color: #1a1a1a;
}
.diy-hdr-pin {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5c-1.4 0-2.5-1.1-2.5-2.5S10.6 6.5 12 6.5s2.5 1.1 2.5 2.5S13.4 11.5 12 11.5z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5c-1.4 0-2.5-1.1-2.5-2.5S10.6 6.5 12 6.5s2.5 1.1 2.5 2.5S13.4 11.5 12 11.5z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.diy-hdr-slot.location em {
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diy-hdr-slot.location b {
  font-style: normal;
  font-weight: 500;
  flex-shrink: 0;
  font-size: 15px;
  opacity: .65;
  line-height: 1;
  margin-left: 1px;
}
.diy-hdr-slot.search {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 3px 3px 3px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  box-sizing: border-box;
  margin: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.diy-hdr-search-ico {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.diy-hdr-slot.search input[type="search"] {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 13px;
  height: 100%;
}
.diy-hdr-search-btn {
  border: 0;
  height: 30px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.home-page .diy-home-header + .mod-banner-wrap { margin-top: 0; }

.mod-banner-wrap {
  position: relative;
  overflow: hidden;
}
.mod-banner-wrap.style-shadow .mod-banner-slide {
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
}
.mod-banner-wrap.style-stroke .mod-banner-slide {
  border: 1px solid rgba(0,0,0,.08);
  box-sizing: border-box;
}
.mod-banner-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mod-banner-track::-webkit-scrollbar { display: none; }
.mod-banner-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  min-height: 168px;
  display: block;
  background: linear-gradient(135deg, #4da3fc, #167DFB);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  text-decoration: none;
}
.mod-banner-slide img {
  width: 100%;
  height: 168px;
  object-fit: cover;
  display: block;
}
.mod-banner-slide .banner-text {
  padding: 28px 20px;
  color: #fff;
}
.mod-banner-slide .banner-text h2 {
  margin: 0;
  font-size: 18px;
  color: #fff;
}
.mod-banner-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  display: flex;
  justify-content: center;
  gap: 5px;
  pointer-events: none;
}
.mod-banner-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
  font-style: normal;
}
.mod-banner-dots i.active { background: #fff; width: 14px; border-radius: 999px; }

.mod-banner-wrap { margin-top: 0; }
.mod-banner {
  margin: 0 12px 12px;
  min-height: 140px;
  display: block;
}
.mod-notice {
  margin: 0 12px 10px;
  background: #fff7e6;
  color: #d48806;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
}
.mod-nav.cols-3 { grid-template-columns: repeat(3, 1fr); }
.mod-nav.cols-4 { grid-template-columns: repeat(4, 1fr); }
.mod-nav.cols-5 { grid-template-columns: repeat(5, 1fr); }
.mod-nav-wrap { overflow: hidden; }
.mod-nav.cate-grid,
.mod-nav {
  display: grid;
  gap: 10px 2px;
  margin: 0;
  padding: 12px 10px 14px;
  background: transparent;
  border-radius: 0;
}
.mod-nav .cate-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: inherit;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 400;
  text-decoration: none;
}
.mod-nav .cate-icon {
  width: 52px;
  height: 52px;
  position: relative;
  overflow: visible;
  background: #f3f5f8;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  flex-shrink: 0;
}
.mod-nav .cate-icon.c1 { background: linear-gradient(145deg, #7edaf5, #3ec6e8); }
.mod-nav .cate-icon.c2 { background: linear-gradient(145deg, #ffb27a, #ff8f4a); }
.mod-nav .cate-icon.c3 { background: linear-gradient(145deg, #ff9ec4, #f768a1); }
.mod-nav .cate-icon.c4 { background: linear-gradient(145deg, #c5a8ff, #9b6dff); }
.mod-nav .cate-icon.c5 { background: linear-gradient(145deg, #9be7c4, #52c41a); }
.mod-nav .cate-icon.c6 { background: linear-gradient(145deg, #ffd666, #faad14); }
.mod-nav .cate-icon.c7 { background: linear-gradient(145deg, #ff9c9c, #ff4d4f); }
.mod-nav .cate-icon.c8 { background: linear-gradient(145deg, #91b5ff, #597ef7); }
.mod-nav .cate-icon.c9 { background: linear-gradient(145deg, #ffc069, #fa8c16); }
.mod-nav.shape-square .cate-icon,
.mod-nav.shape-square .cate-icon img { border-radius: 4px !important; }
.mod-nav.shape-round .cate-icon,
.mod-nav.shape-round .cate-icon img { border-radius: 12px !important; }
.mod-nav.shape-circle .cate-icon,
.mod-nav.shape-circle .cate-icon img { border-radius: 50% !important; }
.mod-nav-badge {
  position: absolute;
  top: -3px;
  left: -2px;
  right: auto;
  z-index: 2;
  min-width: 28px;
  height: 16px;
  padding: 0 5px;
  border-radius: 8px 8px 8px 2px;
  font-size: 10px;
  line-height: 16px;
  font-style: normal;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(248,50,135,.28);
}
.mod-nav .cate-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}
.mod-products.layout-grid1 { grid-template-columns: 1fr; }
.mod-products.layout-grid2 { grid-template-columns: 1fr 1fr; }
.mod-products.layout-grid3 { grid-template-columns: 1fr 1fr 1fr; }
.mod-products.layout-list { grid-template-columns: 1fr; }
.mod-products.layout-list .product-card {
  display: flex;
  flex-direction: row;
}
.mod-products.layout-list .product-card .thumb {
  width: 110px;
  height: 110px;
  flex-shrink: 0;
  padding-bottom: 0 !important;
}
.mod-products.layout-list .product-card .body { flex: 1; }
.mod-products.style-default .product-card { box-shadow: none; border: 1px solid #f0f0f0; }
.mod-products.style-shadow .product-card { box-shadow: 0 4px 14px rgba(22, 125, 251, .12); border: 0; }
.mod-products.style-float .product-card {
  box-shadow: 0 6px 18px rgba(22, 125, 251, .16);
  transform: translateY(0);
  border: 0;
}
.mod-products.radius-sharp .product-card,
.mod-products.radius-sharp .product-card .thumb { border-radius: 0; }
.mod-products.radius-round .product-card,
.mod-products.radius-round .product-card .thumb { border-radius: 10px; }
.mod-products .thumb.ratio-box {
  height: 0;
  padding-bottom: var(--ratio, 100%);
}
.mod-products .thumb.ratio-box img,
.mod-products .thumb.ratio-box span {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.mod-products .thumb.ratio-box span {
  display: grid;
  place-items: center;
  background: #f5f7fa;
  color: #c0c4cc;
}
.mod-products .empty-box { grid-column: 1 / -1; }
.mod-products-sec {
  box-sizing: border-box;
  padding-left: 0;
  padding-right: 0;
  margin: 0;
}
.mod-products-sec h3 {
  margin: 0 0 10px;
  padding: 0 12px;
}
.mod-products .product-card {
  position: relative;
  display: flex;
  flex-direction: column;
}
.mod-products .card-main { display: block; color: inherit; flex: 1; }
.mod-products .price-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding-right: 36px;
  min-height: 24px;
}
.mod-badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  padding: 2px 6px;
  font-size: 10px;
  color: #fff;
  border-radius: 0 0 6px 0;
  line-height: 1.4;
}
.mod-cart-btn {
  position: absolute;
  right: 8px;
  bottom: 10px;
  z-index: 2;
  height: 26px;
  min-width: 26px;
  padding: 0 8px;
  border: 0;
  font-size: 12px;
  line-height: 1;
  color: #fff;
  cursor: pointer;
}
.mod-cart-btn.style-plus,
.mod-cart-btn.style-cart,
.mod-cart-btn.style-cart_fill {
  width: 26px;
  padding: 0;
  border-radius: 50% !important;
}
.product-card .thumb img,
.list-item .thumb img,
.detail-swiper img,
.cart-row .thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-card .body { padding: 10px; }
.product-card .title-row {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin-bottom: 6px;
}
.product-card .title-row .tag {
  flex-shrink: 0;
  margin-right: 0;
  margin-top: 3px;
  font-style: normal;
  font-weight: 600;
}
.product-card .title {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  height: auto;
  max-height: 40px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.price { color: var(--h5-price); font-weight: 700; }
.market {
  color: var(--h5-muted);
  font-size: 12px;
  text-decoration: line-through;
  margin-left: 6px;
  font-weight: 400;
}
.meta-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 6px;
}
.sold { font-size: 11px; color: var(--h5-muted); }
.tag {
  display: inline-block;
  background: var(--h5-primary);
  color: #fff;
  font-size: 10px;
  padding: 1px 4px;
  border-radius: 3px;
  margin-right: 4px;
}
.tabbar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: 480px;
  height: 56px;
  background: #fff;
  border-top: 1px solid #eee;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  z-index: 20;
}
.tabbar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #888;
  gap: 2px;
  position: relative;
}
.tabbar a i.tab-ico {
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  display: grid;
  place-items: center;
}
.tabbar a i.tab-ico .icon { display: block; }
.tabbar a em {
  position: absolute;
  top: 4px;
  right: 18px;
  background: var(--h5-price);
  color: #fff;
  font-size: 10px;
  min-width: 14px;
  height: 14px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-style: normal;
  padding: 0 3px;
}
.tabbar a em[hidden] {
  display: none !important;
}
.tabbar a.active { color: var(--h5-primary); }

.page-nav {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  height: 46px;
  background: #fff;
  padding: 0 8px;
  border-bottom: 1px solid #f0f0f0;
  font-weight: 600;
  text-align: center;
}
.page-nav a { font-size: 22px; color: #333; }
.page-nav.light { background: transparent; border: 0; position: absolute; left: 0; right: 0; z-index: 2; max-width: 480px; margin: 0 auto; }

.search-bar {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  background: #fff;
}
.search-bar input {
  flex: 1;
  height: 36px;
  border: 1px solid #e5e5e5;
  border-radius: 999px;
  padding: 0 12px;
}
.search-bar button {
  border: 0;
  background: var(--h5-primary);
  color: #fff;
  border-radius: 999px;
  padding: 0 14px;
}

.list-item {
  display: flex;
  gap: 10px;
  background: #fff;
  padding: 12px;
  border-bottom: 1px solid #f5f5f5;
}
.list-item.compact { padding: 10px 0; border: 0; }
.list-item .thumb {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  background: #f0fafa;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: #bbb;
}
.list-item .info { flex: 1; min-width: 0; }
.list-item .title {
  font-size: 14px;
  line-height: 1.4;
  max-height: 40px;
  overflow: hidden;
}

.categ-page { display: flex; background: #fff; padding-bottom: 56px; }
.categ-side {
  width: 92px;
  background: #f7f8fa;
  overflow-y: auto;
  max-height: calc(100vh - 56px);
  flex-shrink: 0;
}
.categ-side a {
  display: block;
  padding: 14px 10px;
  font-size: 13px;
  color: #666;
  text-align: center;
}
.categ-side a.active {
  background: #fff;
  color: var(--h5-primary);
  font-weight: 600;
  position: relative;
}
.categ-side a.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  background: var(--h5-primary);
  border-radius: 0 2px 2px 0;
}
.categ-main { flex: 1; overflow-y: auto; max-height: calc(100vh - 56px); }
.categ-item {
  position: relative;
  align-items: stretch;
}
.categ-item-main {
  display: flex;
  gap: 10px;
  flex: 1;
  min-width: 0;
  color: inherit;
}
.categ-item .info {
  display: flex;
  flex-direction: column;
  padding-right: 4px;
}
.categ-item .title { flex: 1; }
.categ-item-foot {
  display: flex;
  align-items: center;
  margin-top: 8px;
  min-height: 28px;
  padding-right: 40px;
}
.categ-item .price {
  color: var(--h5-price);
  font-weight: 700;
  font-size: 15px;
}
.categ-cart-btn {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1.5px solid var(--h5-primary);
  border-radius: 50%;
  background: #fff;
  color: var(--h5-primary);
  font-size: 26px;
  font-weight: 400;
  line-height: 30px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}
.categ-cart-btn::before {
  content: '+';
  display: block;
  line-height: 1;
  transform: translateY(-0.5px);
}
.categ-cart-btn:active {
  background: var(--h5-primary);
  color: #fff;
  opacity: 1;
}

.product-detail { background: #fff; padding-bottom: 70px; }
.detail-swiper {
  width: 100%;
  height: auto;
  background: #f5f5f5;
  overflow-x: auto;
  display: flex;
  align-items: flex-start;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.detail-swiper img {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  scroll-snap-align: start;
}
.detail-swiper .no-img {
  width: 100%;
  min-height: 200px;
  display: grid;
  place-items: center;
  color: #bbb;
}
.product-detail .content img {
  max-width: 100%;
  width: 100%;
  height: auto;
  display: block;
}
.detail-panel { padding: 14px 16px; border-bottom: 8px solid var(--h5-bg); }
.detail-panel .price { font-size: 22px; color: var(--h5-price); font-weight: 700; }
.detail-panel .price .market {
  margin-left: 8px;
  font-size: 13px;
  color: var(--h5-muted);
  font-weight: 400;
  text-decoration: line-through;
}
.detail-panel .name { margin-top: 8px; font-size: 16px; line-height: 1.5; }
.detail-panel .name .tag {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 5px;
  font-size: 10px;
  color: #fff;
  background: var(--h5-primary);
  border-radius: 3px;
  vertical-align: middle;
}
.page-nav .page-nav-title.is-hidden {
  visibility: hidden;
  font-size: 0;
}
.detail-panel .sub { margin-top: 8px; font-size: 12px; color: var(--h5-muted); }
.detail-panel .sub-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.detail-panel .sub-stock {
  flex-shrink: 0;
  text-align: right;
}
.detail-sku-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.sku-entry-label { color: var(--h5-muted); font-size: 13px; flex-shrink: 0; }
.sku-entry-value { flex: 1; font-size: 14px; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sku-entry-arrow { color: #bbb; font-size: 18px; }

.sku-sheet[hidden] { display: none !important; }
.sku-sheet {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.sku-sheet-mask {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
}
.sku-sheet-panel {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 78vh;
  background: #fff;
  border-radius: 16px 16px 0 0;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 1;
  animation: skuUp .22s ease;
}
@keyframes skuUp {
  from { transform: translateY(24px); opacity: .6; }
  to { transform: translateY(0); opacity: 1; }
}
.sku-sheet-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 24px;
  color: #999;
  cursor: pointer;
}
.sku-sheet-head { display: flex; gap: 12px; padding-right: 28px; }
.sku-sheet-thumb {
  width: 88px;
  height: 88px;
  border-radius: 10px;
  overflow: hidden;
  background: #f5f5f5;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: #bbb;
}
.sku-sheet-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sku-sheet-price { font-size: 20px; color: var(--h5-price); font-weight: 700; }
.sku-sheet-stock { margin-top: 4px; font-size: 12px; color: var(--h5-muted); }
.sku-sheet-picked { margin-top: 6px; font-size: 13px; color: #333; }
.sku-sheet-body {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding: 4px 0;
}
.sku-group { margin-bottom: 14px; }
.sku-group-name { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.sku-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sku-chip {
  border: 1px solid #e8e8e8;
  background: #f7f8fa;
  color: #333;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 13px;
  cursor: pointer;
}
.sku-chip.on {
  border-color: var(--h5-primary);
  background: rgba(22, 125, 251, 0.1);
  color: var(--h5-primary);
}
.sku-chip.disabled,
.sku-chip:disabled {
  opacity: .35;
  cursor: not-allowed;
  text-decoration: line-through;
}
.sku-sheet-qty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0 8px;
  font-size: 14px;
}
.sku-sheet .btn.block { height: 44px; border-radius: 12px; }
.panel-title { font-weight: 600; margin-bottom: 8px; }
.detail-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: 480px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid #eee;
  z-index: 20;
}
.detail-bar .btn {
  width: 100%;
  height: 44px;
  border-radius: 12px;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 14px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  background: var(--h5-primary);
  color: #fff;
  font-size: 14px;
  box-shadow: 0 4px 12px var(--h5-primary-shadow);
}
.btn.block { width: 100%; border-radius: 12px; height: 44px; }
.btn.ghost { background: #fff7e6; color: #d48806; box-shadow: none; }
.btn.sm { height: 32px; font-size: 12px; padding: 0 12px; }

.cart-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0 12px 10px;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  position: relative;
}
.cart-row .chk {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  padding: 0;
}
.cart-row .cart-card {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 12px;
  align-items: stretch;
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  padding: 14px;
  box-shadow: none;
}
.cart-row .thumb {
  width: 84px;
  height: 84px;
  border-radius: 10px;
  overflow: hidden;
  background: #f5f5f5;
  flex-shrink: 0;
  align-self: flex-start;
}
.cart-row .info {
  flex: 1;
  min-width: 0;
  position: relative;
  padding-right: 0;
  display: flex;
  flex-direction: column;
  min-height: 84px;
}
.cart-row .info .title {
  padding-right: 40px;
  margin-right: 0;
}
.cart-row .sku {
  margin-top: 4px;
  padding-right: 40px;
  font-size: 12px;
  color: var(--h5-muted);
}
.cart-row .del {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  font-size: 12px;
  color: #999;
  line-height: 1.2;
  padding: 2px 0 2px 8px;
}
.cart-row .del:active { color: var(--h5-price); }
.cart-row .cart-foot {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  padding-top: 6px;
  width: 100%;
}
.cart-row .cart-foot .price {
  margin: 0;
  line-height: 26px;
  flex-shrink: 0;
}
.cart-row .qty-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin: 0;
  flex-shrink: 0;
}
.qty-row { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.qty-btn {
  width: 26px;
  height: 26px;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 4px;
}
.qty-input {
  width: 40px;
  height: 26px;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.cart-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 56px;
  width: 100%;
  max-width: 480px;
  height: 50px;
  background: #fff;
  border-top: 1px solid #eee;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  z-index: 15;
}
.cart-bar .sum { margin-left: auto; font-size: 13px; }
.cart-bar .sum strong { color: var(--h5-price); font-size: 16px; }
.cart-bar .btn { height: 36px; }
.checkout-bar { bottom: 0; }
.checkout-bar .sum {
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}
.checkout-bar .btn {
  margin-left: auto;
  flex-shrink: 0;
}
.cart-page { padding-bottom: 120px; }
.cart-page .cart-row:first-of-type { margin-top: 10px; }
.cart-page .empty-box { margin: 24px 12px; border-radius: 12px; background: #fff; padding: 40px 16px; }

/* 确认订单：主题色顶栏 + 配送方式圆角 Tab */
.checkout-page {
  padding-bottom: 72px;
  background: #f5f6f8;
}
.checkout-top {
  background: var(--h5-primary);
  padding-bottom: 0;
}
.checkout-nav {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  height: 46px;
  padding: 0 8px;
  color: #fff;
  font-weight: 600;
  text-align: center;
}
.checkout-nav a {
  font-size: 26px;
  line-height: 1;
  color: #fff;
  width: 44px;
  text-align: left;
  padding-left: 6px;
}
.checkout-nav span {
  font-size: 17px;
  letter-spacing: .02em;
}
.checkout-nav em { display: block; }
.checkout-ship-tabs {
  display: flex;
  align-items: stretch;
  gap: 6px;
  padding: 6px 10px 0;
  background: transparent;
}
.checkout-ship-tabs .ship-tab {
  flex: 1;
  min-width: 0;
  height: 44px;
  border: 0;
  padding: 0 8px 8px;
  margin: 0;
  cursor: pointer;
  font-size: 14px;
  color: rgba(0, 0, 0, .72);
  background: rgba(255, 255, 255, .28);
  border-radius: 16px 16px 0 0;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-tap-highlight-color: transparent;
}
.checkout-ship-tabs .ship-tab.is-active {
  background: #f5f6f8;
  color: #222;
  font-weight: 600;
  z-index: 1;
}
.checkout-ship-tabs .ship-tab.is-active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--h5-primary);
}
.checkout-main {
  background: #f5f6f8;
  min-height: 40vh;
  padding-top: 2px;
}
.checkout-page .addr-card {
  margin-top: 10px;
}
.checkout-page .checkout-bar .btn {
  background: var(--h5-primary);
  border-color: var(--h5-primary);
}

.panel {
  background: #fff;
  margin: 10px 12px;
  border-radius: 10px;
  padding: 12px;
}
.form-panel .form-item { margin-bottom: 12px; }
.form-panel label { display: block; font-size: 13px; margin-bottom: 6px; color: #666; }
.form-panel input,
.form-panel select {
  width: 100%;
  height: 40px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 0 10px;
  background: #fff;
  font-size: 14px;
  color: #333;
  box-sizing: border-box;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.form-panel select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23909999' d='M1.4 0.6L6 5.2 10.6.6 12 2 6 8 0 2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
.form-panel input:focus,
.form-panel select:focus { border-color: var(--h5-primary); }
.addr-default-check {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin-bottom: 0 !important;
  color: #333 !important;
  font-size: 14px !important;
  font-weight: 400;
  cursor: pointer;
  line-height: 1.2;
}
.addr-default-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  border-radius: 4px;
  accent-color: var(--h5-primary);
  flex-shrink: 0;
  appearance: auto;
  -webkit-appearance: checkbox;
}
.addr-card {
  display: block;
  background: #fff;
  margin: 10px 12px;
  border-radius: 10px;
  padding: 14px;
}
.addr-card.block .addr-ops {
  display: flex;
  gap: 14px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--h5-primary);
}
.addr-name { font-weight: 600; margin-bottom: 6px; }
.addr-detail { font-size: 13px; color: #666; line-height: 1.5; }
.addr-empty { color: var(--h5-primary); }

.addr-manage-page {
  padding-bottom: 88px;
}
.addr-manage-page .page-nav em {
  display: block;
  width: 40px;
}
.addr-manage-page .addr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.addr-manage-page .addr-head .addr-name {
  margin-bottom: 0;
  flex: 1;
  min-width: 0;
}
.addr-manage-page .addr-head .tag {
  flex-shrink: 0;
  margin-right: 0;
}
.addr-manage-page .addr-ops {
  justify-content: flex-end;
}
.addr-add-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: 480px;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(245,246,248,0) 0%, #f5f6f8 28%, #f5f6f8 100%);
  box-sizing: border-box;
  z-index: 15;
}
.addr-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 46px;
  border-radius: 12px;
  background: var(--h5-primary);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .06em;
  box-shadow: 0 6px 16px var(--h5-primary-shadow);
}

.order-tabs {
  display: flex;
  background: #fff;
  overflow-x: auto;
  border-bottom: 1px solid #f0f0f0;
}
.order-tabs a {
  flex: 1;
  text-align: center;
  padding: 12px 8px;
  font-size: 13px;
  color: #666;
  white-space: nowrap;
}
.order-tabs a.active {
  color: var(--h5-primary);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--h5-primary);
}
.order-card {
  display: block;
  background: #fff;
  margin: 10px 12px;
  border-radius: 10px;
  padding: 12px;
}
.order-head {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
}
.order-head em { color: var(--h5-primary); font-style: normal; }
.order-card .sku,
.panel .list-item .sku {
  margin-top: 4px;
  font-size: 12px;
  color: var(--h5-muted);
  line-height: 1.4;
}
.order-foot { text-align: right; font-size: 13px; margin-top: 8px; }
.status-panel .st { font-size: 18px; font-weight: 700; color: var(--h5-primary); }
.status-panel .sub { margin-top: 6px; font-size: 12px; color: #999; }
.muted-lines p { margin: 6px 0; font-size: 13px; color: #666; }
.detail-actions { padding: 12px; }
.detail-actions .btn { width: 100%; border-radius: 10px; height: 44px; }

.mine-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 28px 16px 22px;
  background: linear-gradient(135deg, #167DFB, #4da3fc);
  color: #fff;
}
.mine-head .avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 700;
  overflow: hidden;
  flex-shrink: 0;
}
.mine-head .avatar.has-img {
  background: #fff;
  padding: 0;
}
.mine-head .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mine-head .nick { font-size: 18px; font-weight: 700; }
.mine-head .mobile { font-size: 12px; opacity: .85; margin-top: 4px; }
.mine-head .link { margin-left: auto; color: #fff; font-size: 13px; }
.panel-title.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.panel-title.row a { font-size: 12px; color: #999; font-weight: 400; }
.order-entry {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  text-align: center;
  padding-top: 8px;
}
.order-entry a {
  font-size: 12px;
  color: #444;
  position: relative;
}
.order-entry i.mine-ico {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: 0 auto 6px;
  border-radius: 50%;
  background: #f0fafa;
  color: var(--h5-primary);
  font-style: normal;
  font-size: 18px;
}
.order-entry i.mine-ico .icon { display: block; }
.order-entry em {
  position: absolute;
  top: -2px;
  right: 12px;
  background: var(--h5-price);
  color: #fff;
  font-size: 10px;
  min-width: 14px;
  height: 14px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-style: normal;
}
.menu-list a {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid #f5f5f5;
  font-size: 14px;
}
.tip-line { margin-top: 10px; font-size: 12px; color: #999; }

.login-wrap {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: #fff;
  padding: 40px 24px;
}
.login-wrap h1 { margin: 0 0 8px; color: var(--h5-primary); }
.login-wrap p { margin: 0 0 24px; color: var(--h5-muted); font-size: 13px; }
.wx-login-card { margin-top: 8px; }
.wx-login-tip {
  font-size: 14px;
  color: #303133;
  margin-bottom: 18px;
  line-height: 1.5;
}
.wx-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 18px 12px;
  background: #f7f8fa;
  border-radius: 12px;
}
.wx-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(22, 125, 251, .12);
}
.wx-nick {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}
.wx-auth-btn {
  background: #07c160 !important;
  margin-bottom: 10px;
}
.wx-auth-btn:active { opacity: .92; }
.form-item { margin-bottom: 16px; }
.form-item label { display: block; margin-bottom: 6px; font-size: 13px; }
.form-item input {
  width: 100%;
  height: 44px;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  padding: 0 12px;
  outline: none;
}
.form-item input:focus { border-color: var(--h5-primary); }
.tip { margin-top: 12px; font-size: 12px; color: var(--h5-muted); }
.empty-box {
  text-align: center;
  padding: 40px 16px;
  color: #999;
  font-size: 13px;
  line-height: 1.8;
}
.empty-box a { color: var(--h5-primary); }
.pager-wrap { padding: 12px; text-align: center; }
.muted { color: #999; }
.product-list { background: #fff; }