.home .yy-main .brand, .archive-product .yy-main .brand, .search .yy-main .brand {
  padding: 40px 15px;
  text-align: center; }
  .home .yy-main .brand .desc, .archive-product .yy-main .brand .desc, .search .yy-main .brand .desc {
    color: #888; }
  .home .yy-main .flex, .archive-product .yy-main .flex, .search .yy-main .flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
  .home .yy-main .card, .archive-product .yy-main .card, .search .yy-main .card {
    width: 23.7%;
    margin: 12px 0;
    box-shadow: 0 0 1.25rem rgba(31, 45, 61, 0.05);
    transition: all 0.2s ease; }
  .home .yy-main .card .card-body, .archive-product .yy-main .card .card-body, .search .yy-main .card .card-body {
    border-radius: 8px;
    padding: 0;
    line-height: 1;
    padding: 0; }
  .home .yy-main .card .thumbnail, .archive-product .yy-main .card .thumbnail, .search .yy-main .card .thumbnail {
    flex-shrink: 0;
    display: block;
    width: 100%;
    height: 220px; }
    .home .yy-main .card .thumbnail img, .archive-product .yy-main .card .thumbnail img, .search .yy-main .card .thumbnail img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 4px 4px 0 0; }
  .home .yy-main .card .card-title, .archive-product .yy-main .card .card-title, .search .yy-main .card .card-title {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5;
    margin: 0 0 10px; }
  .home .yy-main .card .data, .archive-product .yy-main .card .data, .search .yy-main .card .data {
    margin-left: 0;
    margin: 15px 0;
    padding: 0 10px; }
    .home .yy-main .card .data .bottom-data, .archive-product .yy-main .card .data .bottom-data, .search .yy-main .card .data .bottom-data {
      display: flex;
      justify-content: space-between;
      font-size: 12px; }
      .home .yy-main .card .data .bottom-data .time, .archive-product .yy-main .card .data .bottom-data .time, .search .yy-main .card .data .bottom-data .time {
        color: #999; }
      .home .yy-main .card .data .bottom-data .price, .archive-product .yy-main .card .data .bottom-data .price, .search .yy-main .card .data .bottom-data .price {
        color: var(--yy-main-color);
        font-size: 16px;
        text-align: right; }
        .home .yy-main .card .data .bottom-data .price del .woocommerce-Price-amount, .archive-product .yy-main .card .data .bottom-data .price del .woocommerce-Price-amount, .search .yy-main .card .data .bottom-data .price del .woocommerce-Price-amount {
          display: inline-block;
          margin-left: 10px;
          font-size: 12px;
          color: #999;
          text-decoration: line-through; }
        .home .yy-main .card .data .bottom-data .price ins, .archive-product .yy-main .card .data .bottom-data .price ins, .search .yy-main .card .data .bottom-data .price ins {
          text-decoration: none; }
/* 只有在页面完全加载后，卡片才拥有过渡和悬浮动画 */
.page-loaded  .yy-main .card, 
.page-loaded  .yy-main .card, 
.page-loaded  .yy-main .card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    will-change: transform; /* 提前告知浏览器 */
}

.page-loaded  .yy-main .card:hover, 
.page-loaded .yy-main .card:hover, 
.page-loaded  .yy-main .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 1rem 3rem rgba(31, 45, 61, 0.125);
}

.page-loaded .yy-main .card, 
.page-loaded .yy-main .card, 
.page-loaded.yy-main .card {
    will-change: transform, box-shadow;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}


/* archive-product */
.single-product .yy-main .field {
  margin-bottom: 20px;
  font-size: 14px;
  color: #888; }
  .single-product .yy-main .post-title {
    margin-top: 20px;
    line-height: 1.5; }
  .single-product .yy-main .post-title a {
    text-align: center;
    font-size: 16px; }
  .single-product .yy-main .post-title .badge-secondary {
    color: #fff; }
  .single-product .yy-main .excerpt {
    color: #888;
    font-size: 14px; }
  .single-product .yy-main .category a {
    color: #fff; }
  .single-product .yy-main .tag a {
    margin-right: 5px;
    background-color: #eee;
    padding: 3px 10px;
    font-size: 14px;
    white-space: nowrap;
    margin-bottom: 5px;
    display: inline-block; }
  .single-product .yy-main .right .flex {
    flex-direction: column; }
  .single-product .yy-main .flex .price {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px; }
  .single-product .yy-main .flex .price ins {
    text-decoration: none; }
  .single-product .yy-main .flex .price .woocommerce-Price-amount {
    font-size: 24px;
    color: var(--yy-main-color); }
    .single-product .yy-main .flex .price .woocommerce-Price-amount .woocommerce-Price-currencySymbol {
      font-size: 24px;
      color: var(--yy-main-color); }
  .single-product .yy-main .flex .price del .woocommerce-Price-amount {
    display: inline-block;
    margin-left: 10px;
    font-size: 16px;
    color: #999;
    text-decoration: line-through; }
    .single-product .yy-main .flex .price del .woocommerce-Price-amount .woocommerce-Price-currencySymbol {
      display: inline-block;
      font-size: 16px;
      color: #999; }
  .single-product .yy-main .flex .btn {
    min-width: 100%;
    margin: 5px 0; }
  .single-product .yy-main .row {
    margin-top: 15px; }
  .single-product .yy-main .post {
    padding: 20px;
    box-shadow: 0 0 1.25rem rgba(31, 45, 61, 0.05);
    transition: all 0.2s ease; }
  .single-product .yy-main .comments {
    padding: 20px;
    box-shadow: 0 0 1.25rem rgba(31, 45, 61, 0.05);
    transition: all 0.2s ease; }
  .single-product .yy-main .service {
    text-align: center;
    margin: 0 auto;
    max-width: 480px; }
  .single-product .yy-main .service ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0; }
  .single-product .yy-main .service ul li {
    color: #999;
    list-style-type: none;
    text-align: center;
    margin: 0 auto;
    font-size: 14px;
    margin: 0 5px; }
  .single-product .yy-main .service ul li .fa-check {
    color: #08c308; }
  .single-product .yy-main .flex {
    text-align: center;
    margin: 0 auto;
    margin-bottom: 20px;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 1.25rem rgba(31, 45, 61, 0.05);
    transition: all 0.2s ease;
    border-radius: 5px; }
  .single-product .yy-main .flex img {
    width: 100%;
    height: auto;
    border-radius: 5px; }
  .single-product .yy-main .flex .bottom .cover {
    position: relative; }
    .single-product .yy-main .flex .bottom .cover .bg-warning {
      position: absolute;
      left: 10px;
      top: 10px;
      color: #fff;
      font-weight: 500;
      background-color: rgba(255, 193, 7, 0.7) !important; }
  .single-product .yy-main .right {
    padding-left: 0; }
  .single-product .yy-main .right .hot li {
    margin: 10px 0;
    display: flex;
    padding: 15px;
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 0 1.25rem rgba(31, 45, 61, 0.05);
    transition: all 0.2s ease; }
    .single-product .yy-main .right .hot .thumbnail {
      flex-shrink: 0;
      width: 120px;
      height: 110px; }
    .single-product .yy-main .right .hot .thumbnail img {
      border-radius: 5px;
      width: 100%;
      height: 100%;
      object-fit: cover; }
    .single-product .yy-main .right .hot .meta {
      flex-grow: 1;
      padding-left: 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-between; }
    .single-product .yy-main .right .hot .meta h4 {
      line-height: 1;
      font-weight: normal;
      text-align: left; }
    .single-product .yy-main .right .hot .meta h4 a {
      font-size: 14px; }
    .single-product .yy-main .right .hot .meta .bottom-data {
      display: flex;
      justify-content: space-between;
      font-size: 12px; }
      .single-product .yy-main .right .hot .meta .bottom-data .time {
        color: #999; }
      .single-product .yy-main .right .hot .meta .bottom-data .price {
        color: var(--yy-main-color);
        font-size: 16px; }
        .single-product .yy-main .right .hot .meta .bottom-data .price .regular {
          display: inline-block;
          margin-left: 10px;
          font-size: 12px;
          color: #999;
          text-decoration: line-through; }
/* single-product */
.customer-service {
  list-style: none;
  padding: 0;
  margin: 0;
  min-width: 200px; }
  .customer-service li {
    list-style: none;
    padding: 0px;
    margin: 0px;
    display: flex;
    line-height: 1; }
  .customer-service .icon {
    font-size: 22px;
    border: 1px solid #ccc;
    margin: 5px;
    border-radius: 5px;
    width: 42px;
    height: 42px;
    line-height: 1.7;
    text-align: center; }
  .customer-service .fa-weixin {
    color: #7bd172; }
  .customer-service .fa-qq {
    color: #f67585; }
  .customer-service .text {
    padding: 8px; }
  .customer-service .t1 {
    font-size: 14px;
    color: #999;
    margin-bottom: 5px; }
/* .customer-service */
@media screen and (max-width: 960px) {
  .home .yy-main .card, .archive-product .yy-main .card, .search .yy-main .card {
    width: 31%; } }



@media screen and (max-width: 767px) {
  .home .yy-main .brand, .archive-product .yy-main .brand, .search .yy-main .brand {
    padding: 30px 15px; }
    .home .yy-main .brand h2, .archive-product .yy-main .brand h2, .search .yy-main .brand h2 {
      font-size: 24px; }
    .home .yy-main .brand .desc, .archive-product .yy-main .brand .desc, .search .yy-main .brand .desc {
      font-size: 14px; }
    .home .yy-main .card, .archive-product .yy-main .card, .search .yy-main .card {
      width: 48%;
      margin: 8px 0; }
    .home .yy-main .card .data, .archive-product .yy-main .card .data, .search .yy-main .card .data {
      margin: 10px 0; }
    .home .yy-main .card .data .card-title, .archive-product .yy-main .card .data .card-title, .search .yy-main .card .data .card-title {
      white-space: wrap;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      font-size: 13px; }
    .home .yy-main .card .thumbnail, .archive-product .yy-main .card .thumbnail, .search .yy-main .card .thumbnail {
      height: 280px; }
    .home .yy-main .card-title, .archive-product .yy-main .card-title, .search .yy-main .card-title {
      font-size: 16px; }

  .single-product .yy-main .yy-group .breadcrumb {
    padding: 10px; }
    .single-product .yy-main .yy-group .container {
      padding-left: 0;
      padding-right: 0; }
    .single-product .yy-main .yy-group .row {
      margin-right: 0;
      margin-left: 0; }
    .single-product .yy-main .detail-show .container {
      margin-top: 10px;
      padding-left: 0;
      padding-right: 0; }
      .single-product .yy-main .detail-show .container .row {
        margin-top: 10px; }
        .single-product .yy-main .detail-show .container .row .col-md-8 {
          padding: 0;
          margin-bottom: 10px; }
        .single-product .yy-main .detail-show .container .row .col-md-4 {
          padding: 0; }
        .single-product .yy-main .detail-show .container .row .right h3 {
          margin-left: 10px; }
          .single-product .yy-main .detail-show .container .row .right .hot li {
            margin: 5px 0;
            border-radius: 0; }
    .single-product .yy-main .detail-show > .container {
      margin-top: 0; }
    .single-product .yy-main .post, .single-product .yy-main .comments {
      padding: 20px;
      border-radius: 0;
      margin-bottom: 10px; }
    .single-product .yy-main .flex {
      flex-wrap: wrap;
      border-radius: 0; }
    .single-product .yy-main .col-md-8 {
      margin-bottom: 30px; } }