.product .product-list { display: flex; flex-wrap: wrap; padding: 50px 0; }

.product .product-list .product-item { border: 1px solid #ddd; width: calc(25% - 15px); margin-right: 20px; margin-bottom: 20px; }

.product .product-list .product-item:nth-child(4n) { margin-right: 0; }

.product .product-list .product-item .v-flex img { position: absolute; width: 100%; height: 100%; object-fit: cover; }

.product .product-list .product-item .product-item-content { padding: 10px 20px 20px; }

.product .product-list .product-item .product-item-content .product-item-title { line-height: 1.8; }

.product .product-list .product-item .product-item-content .product-item-more { margin: 30px 0; width: 100px; height: 30px; border: 1px solid #ccc; font-size: 13px; }

.product .product-list .product-item .product-item-content .product-item-footer { display: flex; align-items: center; font-size: 12px; color: #999; }

.product .product-list .product-item .product-item-content .product-item-footer .product-item-icon { height: 16px; margin-right: 4px; }

.product .product-list .product-item:hover { border-width: 3px; }

.product .product-list .product-item:hover .product-item-more { border-color: #2c9a89; background-color: #2c9a89; color: #fff; }

.product .product-cate { margin-top: 50px; }

.product .product-cate .product-cate-item { display: flex; line-height: 40px; border-bottom: 1px solid #ddd; }

.product .product-cate .product-cate-item:last-child { border-bottom: none; }

.product .product-cate .product-cate-item .product-cate-item-name { width: 220px; font-weight: bold; padding: 0 20px 0 30px; background-color: #f8f8f8; }

.product .product-cate .product-cate-item .product-cate-children { flex: 1; display: flex; flex-wrap: wrap; color: #787878; }

.product .product-cate .product-cate-item .product-cate-children .product-cate-children-item { padding: 0 20px; display: block; }

.product .product-toolbar { display: flex; justify-content: space-between; align-items: center; margin-top: 50px; height: 50px; background-color: #f8f8f8; padding: 0 20px; }

.product .product-toolbar .product-toolbar-left, .product .product-toolbar .product-toolbar-right { display: flex; align-items: center; }

.product .product-toolbar .product-toolbar-filter { margin-right: 30px; }

.product .product-toolbar .product-toolbar-filter.theme-color { font-weight: bold; }

.product .product-toolbar .product-toolbar-control { width: 40px; height: 26px; border: 1px solid #ddd; margin-left: 20px; cursor: pointer; text-align: center; background-color: #fff; }

.product .product-toolbar .product-toolbar-control:last-child { border-left: none; margin-left: 0; }

.product .product-toolbar .product-toolbar-control .product-toolbar-icon { height: 100%; width: auto; }

@media (max-width: 768px) { .product .product-cate-all { display: flex; justify-content: space-between; width: 100%; align-items: center; height: 40px; }
  .product .product-cate-all.active .product-cate-all-arrow { transform: rotate(90deg); }
  .product .product-cate-all-arrow, .product .product-cate-item-arrow { transform: rotate(270deg); width: 16px; height: 16px; margin-top: 2px; top: 2px; right: 0; transition: transform 0.3s; }
  .product .product-cate { max-height: 0; margin-top: 0; transition: all 0.5s; overflow: hidden; }
  .product .product-cate.active { max-height: 1000px; }
  .product .product-cate .product-cate-item { display: block; margin-bottom: 0; line-height: normal; }
  .product .product-cate .product-cate-item .product-cate-item-name { display: flex; justify-content: space-between; width: 100%; align-items: center; height: 40px; }
  .product .product-cate .product-cate-item.product-cate-item.active .product-cate-item-arrow { transform: rotate(90deg); }
  .product .product-cate .product-cate-item.product-cate-item.active .product-cate-children { max-height: 500px; }
  .product .product-cate .product-cate-item .product-cate-children { transition: all 0.5s; max-height: 0; overflow: hidden; }
  .product .product-cate .product-cate-item .product-cate-children .product-cate-children-item { margin: 0; padding: 10px; }
  .product .product-toolbar { margin-top: 20px; }
  .product .product-list { padding: 20px 0; }
  .product .product-list .product-item { width: calc(50% - 5px); margin-right: 10px; }
  .product .product-list .product-item:nth-child(2n) { margin-right: 0; }
  .product .product-list .product-item .product-item-content { padding: 0 10px 10px; } }