/**
===== Theme Settings =====

=== Variables ===
--theme-pri-color
--theme-pri-bg-text-color
--theme-pri-bg-text-hover-color
--theme-sec-color
--theme-sec-bg-text-color
--theme-sec-bg-text-hover-color
--theme-success-color
--theme-fail-color
--theme-warning-color
--theme-body-bg-color

**/
/*
Template: Grid Box - Poducts

TODO we shouldnt need this because we should use the WooCommerce styles instead so it works on archive pages as well
*/
.box-template-products {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr !important;
}
.tem-sidebar-act .box-template-products {
  grid-template-columns: 1fr 1fr 1fr 1fr !important;
}
@media only screen and (max-width: 1200px) {
  .tem-sidebar-act .box-template-products {
    grid-template-columns: 1fr 1fr 1fr !important;
  }
}
@media screen and (max-width: 43.6875rem) {
  .tem-sidebar-act .box-template-products {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media screen and (max-width: 63.9375rem) {
  .box-template-products {
    grid-template-columns: 1fr 1fr 1fr !important;
  }
}
@media screen and (max-width: 43.6875rem) {
  .box-template-products {
    grid-template-columns: 1fr 1fr !important;
  }
}
.box-template-products .grid-box {
  padding: 1rem;
  position: relative;
  border: 1px solid var(--theme-light-gray, #eaeaea);
  display: flex;
  flex-direction: column;
}
.box-template-products .box-title {
  text-transform: none;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.2rem;
  margin-bottom: 0;
  margin-top: 0.5rem;
}
.box-template-products .sku {
  border-bottom: 1px solid var(--theme-light-gray, #eaeaea);
}
.box-template-products .price-wrap {
  font-weight: 600;
  margin-top: auto;
}
.box-template-products .price-wrap .amount {
  color: #555555;
  font-size: 1.3rem;
}
.box-template-products .price-wrap del .amount {
  color: #d82525 !important;
  font-size: 1rem;
  font-weight: normal;
}
.box-template-products .price-wrap ins .amount {
  margin-top: auto;
  font-weight: bold;
}
.box-template-products .onsale {
  background: var(--theme-sec-color, #d2d52c);
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 5rem;
  height: 5rem;
  border-radius: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  font-weight: 700;
  z-index: 1;
}
.box-template-products .product-actions .v-tooltip-wrapper {
  display: none;
}