/**
 * GPBox Product Grid Layout
 */
ul.products {
  margin: 0;
  padding: 0;
  display: grid;
  row-gap: 1.5rem;
  column-gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  list-style: none;
  justify-items: stretch;
  align-items: start;
  min-height: 20vh;
}

ul.products li.product-grid_item {
  list-style: none;
  position: relative;
  justify-self: stretch;
}

ul.products .woocommerce-price-suffix {
  display: none !important;
}

/* Loop
--------------------------------------------- */
/* Link */
.loop-product__link {
  display: block;
  margin-bottom: 1rem;
}

@media (hover: hover) and (pointer: fine) {
  .loop-product__link:hover {
    color: var(--dark-grey-clr);
  }
}

/* Image */
.loop-product__thumbnail {
  overflow: hidden;
  z-index: 0; /*Safari fix*/
  transform: translateZ(0); /*Safari fix*/
  -webkit-transform: translateZ(0); /*Safari fix*/
  mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); /*Safari fix*/
  -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); /*Safari fix*/
  border-radius: 8px;
  border: var(--border);
  margin-bottom: 0.25rem;
  position: relative;
  padding: 100% 0 0 0;
  max-width: 100%;
  width: 100%;
}

.loop-product__link img {
  height: 100%;
  width: 100%;
  position: absolute;
  inset: 0;
  border-radius: 8px;
  object-fit: cover;
  transition: transform 295ms var(--bezier-nobounce);
  aspect-ratio: 1/1;
}

.loop-product__link img.loop-product__image-second {
  opacity: 0;
  transition: opacity 595ms var(--bezier-nobounce), transform 395ms var(--bezier-nobounce);
}

@media (hover: hover) and (pointer: fine) {
  .loop-product__link:hover .loop-product__thumbnail:not(.product-pip) img {
    transform: scale(1.15);
  }

  .loop-product__link:hover .loop-product__thumbnail.product-pip img.loop-product__image-second {
    opacity: 1;
    transform: scale(1.05);
  }
  body.loaded .loop-product__link .loop-product__thumbnail.product-pip img.loop-product__image-second {
    display: block !important;
  }
}

.product-grid__item a:target .loop-product__thumbnail img,
.product-grid__item a:focus .loop-product__thumbnail img,
.product-grid__item a:active .loop-product__thumbnail img {
  opacity: 0.75;
}

.loop-product__admin-overlay {
  background: var(--ultra-light-grey-clr);
  color: var(--text-black-clr);
  padding: 0.25rem;
  border-radius: 8px;
  margin-bottom: 0.25rem;
}

.loop-product__thumbnail-overlay {
  position: absolute;
  bottom: 0;
  background: #9e9e9cbd;
  color: white;
  padding: 0.25rem;
}

/* Seller name */
.loop-vendor__name {
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0.75rem;
  line-height: 20px;
  height: 20px;
  font-weight: 700;
  color: var(--light-grey-clr);
  text-transform: uppercase;
}

/* Product title */
.product-grid__item .loop-product__title {
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  color: var(--dark-grey-clr);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
}

/* Price */
.loop-product__details .price {
  display: block;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.loop-product__details .price del,
.loop-product__details .price .sale-off {
  color: var(--dark-green-clr);
  font-weight: 400;
}

/* No products info message */
ul.products > .woocommerce-info {
  grid-column-end: span 5;
}

/* Actions - Container */
.loop-product__actions {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  gap: 0.25rem;
}

.loop-product__actions > * {
  cursor: pointer;
  opacity: 0;
  transition: opacity 295ms var(--bezier-nobounce);
}

.mobile .loop-product__actions > * {
  opacity: 1;
}

.product-grid__item:hover .loop-product__actions > *:not(.no-hover, [data-is-favourited="true"]) {
  opacity: 1 !important;
}

/* Actions - Delete product */
.myaccount-product-history__item-delete.display-none-soft {
  display: none;
}
#myaccount-product-history .myaccount-product-history__item-delete.display-none-soft {
  display: flex;
}
#myaccount-product-history .product-favourite__item {
  display: none;
}
#myaccount-product-history .loop-product__link {
  margin-bottom: 0;
}
#myaccount-product-history .loop-product__link img {
  max-width: 260px;
  max-height: 260px;
}

#myaccount-product-history ul.products {
  display: flex;
  flex-shrink: 0;
  gap: 0;
  min-height: unset;
  justify-items: flex-start;
}

/* Actions - Favourites */
.add-to-favourites svg {
  width: 20px;
  height: 20px;
}

.add-to-favourites[data-is-favourited="true"] {
  opacity: 1;
  transform: unset !important;
}
.add-to-favourites[data-is-favourited="true"] svg {
  fill: var(--accent-clr);
  -webkit-animation-name: gpbox-bounce-up;
  -ms-animation-name: gpbox-bounce-up;
  -moz-animation-name: gpbox-bounce-up;
  animation-name: gpbox-bounce-up;
  -webkit-animation-duration: 295ms;
  -ms-animation-duration: 295ms;
  -moz-animation-duration: 295ms;
  animation-duration: 295ms;
  -webkit-animation-timing-function: var(--bezier);
  -ms-animation-timing-function: var(--bezier);
  -moz-animation-timing-function: var(--bezier);
  animation-timing-function: var(--bezier);
}
.add-to-favourites[data-is-favourited="true"] svg path {
  stroke: var(--accent-clr);
}

@keyframes gpbox-bounce-up {
  from {
    transform: scale(0.4);
  }
  to {
    transform: scale(1);
  }
}

/* Product Grid Contracted Theme */
.contracted .loop-product__details .loop-vendor__info,
.contracted .loop-product__details .loop-product__title,
.contracted .loop-product__details .star-rating,
.contracted .loop-product__details .product-badges,
.contracted .loop-product__details .sale-off {
  display: none;
}

.contracted .loop-product__details .price {
  text-align: right;
}

/* Product row list section */
.myaccount-flexslider-wrapper ul.products {
  display: flex;
  flex-shrink: 0;
  row-gap: unset;
  column-gap: unset;
  padding: unset;
  grid-template-columns: unset;
  justify-items: unset;
  align-items: unset;
  min-height: unset;
}

body:not(.mobile):not(.myaccount) #myaccount-product-history .product-grid__item {
  min-width: 260px;
  min-height: 260px;
  margin-right: 1.5rem;
}

body.mobile .myaccount-flexslider-wrapper ul.products .product-grid__item {
  min-width: calc((100vw - 2.25rem) / 2);
  margin-right: 0.75rem;
}

.myaccount-flexslider-wrapper ul.products .loop-product__thumbnail,
.myaccount-flexslider-wrapper ul.products .loop-product__link img {
  max-height: 260px;
  max-width: 260px;
}

body.mobile .flex-viewport .product-grid__item {
  width: calc((100vw - 2.25rem) / 2) !important;
  max-width: calc((100vw - 2.25rem) / 2) !important;
  margin-right: 0.75rem !important;
}

#myaccount-product-history .product-badges,
#myaccount-product-history .loop-vendor__info,
#myaccount-product-history .loop-product__title,
#myaccount-product-history .loop-product__details .star-rating {
  display: none;
}

@media screen and (max-width: 37.5rem) {
  ul.products {
    grid-template-columns: repeat(auto-fill, minmax(150px, 0.5fr));
    row-gap: 1rem;
    column-gap: 0.75rem;
  }
  .loop-vendor__name {
    max-height: 18px;
  }
  .product-grid__item .loop-product__title {
    max-height: 25px;
  }
}

@media screen and (min-width: 37.5rem) {
  body.mobile ul.products {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    row-gap: 1.5rem;
    column-gap: 1.5rem;
  }
  body.mobile .loop-vendor__name {
    max-height: 18px;
  }
  body.mobile .product-grid__item .loop-product__title {
    max-height: 25px;
  }

  body.mobile .myaccount-flexslider-wrapper ul.products .loop-product__thumbnail,
  body.mobile .myaccount-flexslider-wrapper ul.products .loop-product__link img {
    width: 180px;
    height: 180px;
    padding: 0;
  }

  .home.mobile .myaccount-flexslider-wrapper ul.products .product-grid__item,
  .category.mobile .myaccount-flexslider-wrapper ul.products .product-grid__item,
  .product-body.mobile .myaccount-flexslider-wrapper ul.products .product-grid__item {
    min-width: unset !important;
    width: unset !important;
  }
}