/* ===== 页面Banner ===== */

.page-banner {

  width: 100%;

  height: 16vw;

  overflow: hidden;

}



.page-banner img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



/* ===== 产品列表布局 ===== */

.product-list-section {

  padding: 3vw 0;

  background-color: #fff;

}



.product-layout {

  display: grid;

  grid-template-columns: 18vw 1fr;

  gap: 3vw;

  align-items: start;

}



/* ===== 左侧分类 ===== */

.product-sidebar {

  border-radius: 0.5vw;

  padding: 0 1.5vw 2vw 1.5vw;

  position: sticky;

  top: calc(var(--header-height) + 2vw);

}



.sidebar-title {

  font-size: 1.25vw;

  font-weight: 600;

  color: var(--text-dark);

  margin-bottom: 1.5vw;

}



.category-list {

  list-style: none;

  padding: 0;

}



.category-group {

  margin-bottom: 0.375vw;

}



/* 一级分类 */

.category-l1 {

  cursor: pointer;

  padding: 0.595vw 1vw;

  border-radius: 0.375vw;

  font-size: 0.9375vw;

  color: var(--text-dark);

  font-weight: 500;

  transition: all 0.3s ease;

  background-color: #f2ece7;

  border-radius: 8888.5vw;

}



.category-l1:hover {

  background-color: rgba(139, 105, 20, 0.08);

}



.category-l1.active-l1 {

  background-color: #4e5140;

  color: #fff;

}



/* 二级列表 */

.l2-list {

  margin-top: 0.25vw;

}



.category-l2 {

  cursor: pointer;

  padding: 0.5vw 1vw;

  border-radius: 0.25vw;

  font-size: 0.875vw;

  color: var(--text-gray);

  margin-bottom: 0.125vw;

}



.category-l2:hover {

  color: var(--primary-color);

  background-color: rgba(139, 105, 20, 0.06);

   border-radius: 8888.25vw;

}



.category-l2.active-l2 {

  color: var(--text-dark);

  font-weight: 500;

  background-color: transparent;

  border: 0.0625vw solid #000;

  background-image: url('../../../images/product-img/arrow-4.png');

  background-repeat: no-repeat;

  background-position: right 0.75vw center;

  background-size: 0.4vw auto;

  border-radius: 8888.25vw;

  -webkit-border-radius: 8888.25vw;

  -moz-border-radius: 8888.25vw;

  -ms-border-radius: 8888.25vw;

  -o-border-radius: 8888.25vw;

}



/* 三级列表 */

.l3-list {

  margin: 0.125vw 0 0.25vw 0.5vw;

  border-left: 0.125vw solid #ece5db;

  padding-left: 0.5vw;

}



.category-l3 {

  position: relative;

  padding: 0.375vw 0.5vw;

  border-radius: 0.25vw;

  font-size: 0.8125vw;

  color: var(--text-gray);

  transition: all 0.25s ease;

}



.category-l3 a {

  display: block;

  color: inherit;

  text-decoration: none;

}



.category-l3:hover {

  color: var(--primary-color);

}



.category-l3.active-l3 {

  color: var(--primary-color);

  font-weight: 500;

}



.category-l3.active-l3::before {

  content: '';

  position: absolute;

  left: 0;

  top: 50%;

  transform: translateY(-50%);

  width: 0.25vw;

  height: 0.75vw;

  background-color: var(--primary-color);

  border-radius: 0.125vw;

}



/* ===== 右侧产品网格 ===== */

.product-main {

  min-height: 40vw;

}



/* PC端隐藏移动端分类触发按钮和弹框 */

@media (min-width: 769px) {

  .mobile-category-trigger,

  .mobile-category-modal {

    display: none;

  }

}



.product-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 2vw;

}



.product-card {

  background-color: transparent;

  border-radius: 0.5vw;

  overflow: hidden;

  cursor: pointer;

}



.product-card:hover {

  transform: translateY(-0.5vw);

}



.product-card .product-img {

  width: 100%;

  aspect-ratio: 1 / 1;

  overflow: hidden;

  background-color: #f2ece7;

  border-radius: 0.375vw;

  display: flex;

  align-items: center;

  justify-content: center;

}



.product-card .product-img img {

  width: 15.2vw;

  height: 12.4vw;

  object-fit: contain;

  transition: transform 0.6s ease;

}



.product-card:hover .product-img img {

  transform: scale(1.03);

}



.product-info {

  padding: 1vw 0.5vw;

  text-align: left;

}



.product-info h4 {

  font-size: 0.9375vw;

  color: var(--text-dark);

  font-weight: 500;

  margin-bottom: 0.5vw;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}



.product-price {

  font-size: 1vw;

  color: var(--primary-color);

  font-weight: 600;

}



/* ===== 分页 ===== */

.pagination {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 0.75vw;

  margin-top: 3vw;

}



.pagination a {

  min-width: 2.25vw;

  height: 2.25vw;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 0.375vw;

  text-decoration: none;

  color: var(--text-gray);

  font-size: 0.875vw;

  transition: all 0.3s ease;

  background-color: #fff;

  border: 1px solid #e0e0e0;

  padding: 0 0.75vw;

}



.pagination a:hover,

.pagination a.active {

  background-color: var(--primary-color);

  color: #fff;

  border-color: var(--primary-color);

}