*,
		*::before,
		*::after {
		  margin: 0;
		  padding: 0;
		  box-sizing: border-box;
		}

		body {
		  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
		  font-size: 16px;
		  line-height: 1.5;
		  color: #333;
		  background: #f5f5f5;
		  -webkit-font-smoothing: antialiased;
		}

		a {
		  text-decoration: none;
		  color: inherit;
		}

		img {
		  max-width: 100%;
		  height: auto;
		  vertical-align: middle;
		}

		.flex {
		  display: flex;
		  flex-wrap: wrap;
		}

		.alitemCenter {
		  align-items: center;
		}

		.juscbtween {
		  justify-content: space-between;
		}

		.productList {
		  max-width: 1260px;
		  margin: 0 auto;
		  padding: 0 20px;
		}

		.productRight {
		  width: 100%;
		}

		.navBox {
		  padding: 16px 0;
		  font-size: 13px;
		  color: #999;
		}

		.navBox a {
		  color: #666;
		}

		.navBox a:hover {
		  color: #222;
		}

		.navBox a::after {
		  content: '/';
		  margin: 0 10px;
		  color: #ccc;
		}

		.navBox a:last-child::after {
		  display: none;
		}

		.navBox .navThree span {
		  color: #FF3030;
		  font-weight: 600;
		}

		.container {
		  display: flex;
		  gap: 24px;
		  align-items: flex-start;
		}

		.classfiy {
		  flex: 0 0 220px;
		  width: 220px;
		  position: sticky;
		  top: 16px;
		}

		.classfiy .name {
		  background: #333;
		  color: #fff;
		  padding: 15px 20px;
		}

		.classfiy .name h1 {
		  font-size: 16px;
		  color: #fff;
		}

		.classfiy .lists {
		  background: #fff;
		}

		.classfiy .lists .items {
		  position: relative;
		  display: flex;
		  align-items: center;
		  border: 1px solid #DEDEDE;
		  border-top: none;
		  transition: transform 0.2s, box-shadow 0.2s;
		}

		.classfiy .lists .items:first-child {
		  border-top: 1px solid #DEDEDE;
		}

		.classfiy .lists .items a {
		  padding: 14px 16px;
		  flex: 1;
		}

		.classfiy .lists .items a h3 {
		  font-size: 14px;
		  color: #333;
		}

		.classfiy .lists .items:hover,
		.classfiy .lists .items.ative {
		  background: #FF3030;
		}

		.classfiy .lists .items:hover h3,
		.classfiy .lists .items.ative h3 {
		  color: #fff;
		}

		.classfiy .lists .items .list {
		  display: none;
		  position: absolute;
		  top: 0;
		  left: 100%;
		  white-space: nowrap;
		  z-index: 10;
		}

		.classfiy .lists .items .list .box {
		  background: #fff;
		  padding: 10px;
		  border-radius: 5px;
		  box-shadow: 3px 2px 5px rgba(31, 45, 61, 0.2);
		}

		.classfiy .lists .items .list .item {
		  padding: 5px 0;
		}

		.classfiy .lists .items .list .item a {
		  padding: 2px 4px;
		  color: #333;
		  font-size: 12px;
		}

		.classfiy .lists .items:hover {
		  transform: scale(1.05);
		  border-radius: 4px;
		  z-index: 2;
		  box-shadow: 0 0 1rem rgba(31, 45, 61, 0.1);
		}

		.classfiy .lists .items:hover .list {
		  display: block;
		}

		.productBox {
		  flex: 1;
		  min-width: 0;
		  padding: 0 0 60px;
		}

		.titleTop {
		  font-size: clamp(1.25rem, 3vw, 1.75rem);
		  font-weight: 700;
		  color: #1a1a1a;
		  margin-bottom: 24px;
		  padding-bottom: 12px;
		  border-bottom: 2px solid #FF3030;
		  display: inline-block;
		}

		.class .list {
		  display: grid;
		  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
		  gap: 20px;
		}

		.class .list .item {
		  background: #fff;
		  border: 1px solid #eee;
		  border-radius: 6px;
		  overflow: hidden;
		  cursor: pointer;
		  display: flex;
		  flex-direction: column;
		}

		.class .list .item:hover {
		  border-color: #ccc;
		}

		.class .list .item .image {
		  width: 100%;
		  aspect-ratio: 1 / 1;
		  overflow: hidden;
		  background: #fafafa;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  padding: 24px;
		}

		.class .list .item .image img {
		  width: 100%;
		  height: 100%;
		  object-fit: contain;
		}

		.class .list .item .title {
		  font-size: 14px;
		  color: #333;
		  line-height: 1.5;
		  padding: 12px 16px 0;
		  overflow: hidden;
		  text-overflow: ellipsis;
		  display: -webkit-box;
		  -webkit-line-clamp: 2;
		  -webkit-box-orient: vertical;
		}

		.goods-price {
		  padding: 12px 16px 16px;
		  margin-top: auto;
		}

		.goods-price .price {
		  flex: 1;
		  min-width: 0;
		}

		.goods-price .putongjia {
		  font-size: clamp(1.125rem, 2vw, 1.375rem);
		  font-weight: 700;
		  color: #1a1a1a;
		}

		.goods-price .vipjia {
		  font-size: 13px;
		  color: #FF3030;
		  margin-top: 4px;
		}

		.goods-price .cartimg {
		  position: relative;
		  width: 40px;
		  height: 40px;
		  flex-shrink: 0;
		  margin-left: 12px;
		}

		.goods-price .cartimg img {
		  position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  object-fit: contain;
		  transition: opacity 0.2s ease;
		}

		.goods-price .cartimg .image1 {
		  opacity: 1;
		}

		.goods-price .cartimg .image2 {
		  opacity: 0;
		}

		.class .list .item:hover .cartimg .image1 {
		  opacity: 0;
		}

		.class .list .item:hover .cartimg .image2 {
		  opacity: 1;
		}

		@media (hover: none) {
		  .class .list .item:hover .cartimg .image1 {
		    opacity: 1;
		  }

		  .class .list .item:hover .cartimg .image2 {
		    opacity: 0;
		  }
		}

		.pagination {
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  gap: 6px;
		  margin-top: 40px;
		  flex-wrap: wrap;
		}

		.pagination a,
		.pagination span {
		  display: inline-flex;
		  align-items: center;
		  justify-content: center;
		  min-width: 40px;
		  height: 40px;
		  padding: 0 12px;
		  font-size: 14px;
		  border: 1px solid #ddd;
		  border-radius: 4px;
		  color: #555;
		  background: #fff;
		}

		.pagination a:hover {
		  border-color: #FF3030;
		  color: #FF3030;
		}

		.pagination .active span,
		.pagination .current {
		  background: #FF3030;
		  color: #fff !important;
		  border-color: #FF3030;
		}

		.pagination .disabled span {
		  color: #ccc;
		  background: #f9f9f9;
		  cursor: not-allowed;
		}

		@media (max-width: 768px) {
		  .productList {
		    padding: 0 12px;
		  }

		  .container {
		    flex-direction: column;
		    gap: 16px;
		  }

		  .classfiy {
		    flex: none;
		    width: 100%;
		    position: static;
		  }

		  .classfiy .lists .items {
		    border-top: 1px solid #DEDEDE;
		  }

		  .classfiy .lists .items:hover {
		    transform: none;
		    box-shadow: none;
		    border-radius: 0;
		  }

		  .classfiy .lists .items .list {
		    display: none !important;
		  }

		  .class .list {
		    grid-template-columns: repeat(2, 1fr);
		    gap: 12px;
		  }

		  .class .list .item .image {
		    padding: 16px;
		  }

		  .class .list .item .title {
		    font-size: 13px;
		    padding: 8px 12px 0;
		  }

		  .goods-price {
		    padding: 8px 12px 12px;
		  }

		  .goods-price .putongjia {
		    font-size: 1rem;
		  }

		  .goods-price .vipjia {
		    font-size: 12px;
		  }

		  .goods-price .cartimg {
		    width: 32px;
		    height: 32px;
		  }
		}

		@media (max-width: 480px) {
		  .class .list {
		    gap: 8px;
		  }

		  .titleTop {
		    font-size: 1.125rem;
		  }

		  .class .list .item .title {
		    font-size: 12px;
		  }

		  .goods-price {
		    padding: 8px 10px 10px;
		  }

		  .goods-price .cartimg {
		    width: 28px;
		    height: 28px;
		  }
		}