﻿.card-product .card-product-wrapper {
  aspect-ratio: 1 / 1;
}

/*轮播图插件*/
.nop-slider .slider-img {
  max-width: 100%;
  margin: auto;
  display: block;
}


.product_mode {
  padding: 1px 5px;
  border: 1px solid #000000;
  border-radius: 5px;
  font-weight: bold;
  display: inline-block;
  margin-bottom: 5px;
}

.tf-sw-mobile-1 .card-product-wrapper {
  height: 400px;
}


@media only screen and (max-width: 767px) {

  .tf-sw-mobile-1 .product-img {
    text-align: center;
  }

  .tf-sw-mobile-1 .card-product-info {
    height: 100px;
  }

  .tf-sw-mobile-1 .card-product-wrapper {
    height: 300px;
  }

  .tf-sw-mobile-1 .card-product-wrapper img {
    height: 300px;
    width: auto;
  }

  .tf-sw-mobile-1 .card-product .card-product-wrapper img {
    height: 300px !important;
    width: auto !important;
    margin: auto;
  }
  .sw-dots .swiper-pagination-bullet {
    width:30px;
    height: 16px;
  }
}

/*商品详情页*/
.variant-picker-item .variant-picker-values input:checked + label.style-text:not(.color-btn) span {
  color: white
}

/*商品分类 增加标题左右间距*/
@media (min-width: 1150px) {
  .collection-item-v4.lg .collection-content {
    left: 10px;
    right: 10px;
  }
}

.sw-dots .swiper-pagination-bullet.swiper-pagination-bullet-active:before {
  background-color:var(--primary);
  height: 5px;
  border-radius: 5px;
  width: 25px;
}

.sw-dots .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: revert;
}

.footer .footer-wrap .footer-body {
  padding-top: 40px;
  padding-bottom: 10px;
  position: relative;
}


.card-product-info .product_mode_2 {
  background: var(--bs-primary);
  color: #fff;
  border: 1px solid var(--bs-primary);
}

.card-product-info .product_mode:hover {
  background: var(--bs-primary);
  color: #fff;
  border: 1px solid var(--bs-primary);
}

.text-discount {
  top: -0px !important;
}

.text-discount i {
  color: #ff3232;
  font-size: 50px;
}


.text-discount-text {
  position: relative;
  color: #fff;
  top:-50px;
  text-align: center;
}

.swiper {
  --swiper-theme-color: var(--bs-primary);
}

.old-price {
  text-decoration: line-through;
}

.new-price {
  font-weight: bold;
  color: var(--bs-primary);
}

:dir(rtl) .rtl-img {
  transform: scaleX(-1);
}


.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);

  --bs-btn-hover-bg: #228C55;
  --bs-btn-hover-border-color: #228C55;

  --bs-btn-active-bg: var(--primary);
  --bs-btn-active-border-color: #228C55;

  --bs-btn-disabled-bg: #A9D7BD;
  --bs-btn-disabled-border-color: #A9D7BD;
}

.btn-outline-primary {
  color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.btn-outline-primary:hover {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.btn-outline-primary:active {
  background-color:var(--bs-primary) !important;    /* 背景填充主色 */
  border-color: var(--bs-primary) !important;      /* 边框主色 */
}


.tf-toolbar-bottom a{
  color:black;
}


.form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}


img.lazyload:not([src]) {
    visibility: hidden;
}

.lazyload {
    opacity: 0;
}

.lazyloading {
    opacity: 0;
}

.lazyloaded {
    opacity: 1;
    transition: opacity 300ms;
}

.form-control:focus{
  box-shadow:0 0 0 .25rem rgba(144,238,144,.25);
  border-color:var(--bs-primary);
}

.form-select:focus{
  box-shadow:0 0 0 .25rem rgba(144,238,144,.25);
  border-color:var(--bs-primary);
}


@media(min-width: 1440px) {
  .container,.container-sm,.container-md,.container-lg,.container-xl {
    max-width:1440px
  }
}


@media (max-width: 1439px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl {
    max-width: 100%;
    padding-block-start: 20px;
    padding-block-end: 20px;
  }
}

.text-black-5 {
  color: #555;
}


.link {
  transition: all 0.3s ease;
}

.link-hover-primary:hover {
  color: var(--bs-primary) !important;
}

.link-hover-underline:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.link-hover-bold:hover {
  font-weight: bold;
}



