/**
Product card, blog card and album card common styles

*/

/* Border and shadow */

.card {
  /* overflow: hidden; */
}

.card:hover .card-hover-visible {
  visibility: visible;
}

.card__inner {
  position: relative;
  box-sizing: border-box;
  border-radius: var(--border-radius);
  border: var(--border-width) solid var(--color-border);
  isolation: isolate
}

.card__images {
  padding: var(--image-padding) var(--image-padding) var(--image-padding) var(--image-padding);
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
  isolation: isolate
}

.card__images:hover .card__images-hover-visible {
  visibility: visible;
}

.card__images .collection-entry-image__default {
  display: block;
}

.card--standard .card__texts {
  padding: 16px 0 16px 0;
}

.card--card .card__texts {
  padding: 16px;
}

.card__texts > div,
.card__texts > p,
.card__texts h5,
.card__texts > button,
.card__images .overlay-title,
.card__texts h3 {
  text-align: var(--text-alignment);
}

.collection-card .overlay-title {
  color: #fff;
  height: 40px;
  background: linear-gradient(360deg, rgba(0, 0, 0, 0.8) 0%, rgba(102, 102, 102, 0) 100%);
  border-radius: var(--border-radius);
}

@media (min-width: 960px) {
  .product-image:hover .product-image__second-image {
    opacity: 1;
    transition: opacity var(--duration-default) ease-in-out;
    background-color: white;
  }

  .collection-card .overlay-title {
    height: 80px;
  }
}

.product-card__image {
  min-height: 110px;
}

.product-image__carousel {
  width: 100%;
}

.image-carousel__control {
  gap: 6px;
}

.image-carousel__control .i-spzhtml-slide-indicator__dot.i-spzhtml-slide-indicator__dot--active,
.image-carousel__control .i-spzhtml-slide-indicator__progress-bar.i-spzhtml-slide-indicator__progress-bar--active {
  background-color: var(--color-text-0);
}

.image-carousel__control .i-spzhtml-slide-indicator__dot,
.image-carousel__control .i-spzhtml-slide-indicator__progress-bar {
  background-color: var(--color-text-3);
}

.product-snippet__thumbnails-item__img {
  text-align: left;
}

/* Sliding mode */
.product-snippet__thumbnails__carousel
  .product-snippet__thumbnails-item
  > input:checked
  + .product-snippet__thumbnails-item__img::after,
.product-snippet__thumbnails__carousel .product-snippet__thumbnails-item:hover::after {
  right: 6px !important;
}

.product-snippet__thumbnails-item:hover::after,
.product-snippet__thumbnails-item input:checked + .product-snippet__thumbnails-item__img::after {
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  content: '';
  position: absolute;
  border: 1px solid var(--color-input-border);
  border-radius: var(--variant-pills-radius);
}
@media (max-width: 958.98px) {
  .product-snippet__thumbnails-item:hover::after {
    border: none ;
  }
}

.product-snippet__thumbnails-item__img > spz-img {
  border-radius: var(--variant-pills-radius);
}

.product-snippet__thumbnails-item {
  width: 32px;
  height: 40px;
}

.product-snippet__thumbnails__carousel .product-snippet__thumbnails-item {
  width: 38px;
}

.product-snippet__thumbnails.sliding,
.product-snippet__thumbnails.tile {
  gap: 6px;
  flex-wrap: wrap;
}

/* Scroll thumbnails left and right buttons */
.product-snippet__thumbnails {
  position: relative;
}
/* Left and right arrows must be based on the upper element to locate, otherwise the edge will be transparent when the card is hovered and enlarged, the -5px below is to cover the edge */
.product-snippet__thumbnails__carousel {
  position: static !important;
}

.product-snippet__thumbnails__carousel .spz-carousel-button {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  cursor: pointer;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
.product-snippet__thumbnails__carousel .spz-carousel-button.spz-disabled {
  opacity: 0;
  pointer-events: none;
}
.product-snippet__thumbnails__carousel .spz-carousel-button-next {
  right: 0px !important;
}
.product-snippet__thumbnails__carousel .spz-carousel-button-prev {
  left: 0px !important;
}

.product-thumbnail-one-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.product-thumbnail-one-line .product-snippet__thumbnails-item {
  display: none;
}

.product-thumbnail-one-line.expanded .product-snippet__thumbnails-item {
  display: block;
}
.product-thumbnail-one-line.expanded .product-thumbnail-one-line__remain {
  display: none;
}

.product-variant-render[finish] spz-loading[role='loading'] {
  display: none;
}

.product-variant-popup {
  max-height: 90%;
  overflow-y: auto;
}
.product-variant-popup + .i-spzhtml-lightbox-mask {
  display: none;
}

.atlas-product-snippet {
  overflow: visible !important;
}
.atlas-product-snippet.open-variant-popup .shoplazza-productLabel-wrapper.painter  {
  visibility: hidden;
}

.product-card__form[status*="unavailable"] button[role='addToCart'],
.product-card__form[status='soldout'] button[role='addToCart'] {
  background-color: var(--color-disabled-background) !important;
  color: var(--color-disabled-text) !important;
  border-color: var(--color-disabled-border) !important;
  pointer-events: none;
  cursor: default;
}
.atlas-product-snippet .product__quick-add, .atlas-product-snippet .quick-wishlist {
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

.product__quick-add .button[disabled] {
  display: none;
}


.card__texts spz-text>spz-currency {
  display: inline-block;
}