/*
  PRODUCT PREVIEW STYLES
  ========================
  Powers the hover (desktop) / tap (mobile) preview rectangle that
  appears over a product card's image -- flip through photos/videos,
  see the price, and add to cart, without leaving the grid.

  NOTE: this file adds "position: relative" to .product-card__image-wrapper
  so the preview panel (position: absolute) lines up correctly inside it.
  If product-list.css already sets a different position on that class,
  this rule (loaded after it) will safely take over just that one property.
*/

.product-card__image-wrapper {
  position: relative;
  overflow: hidden;
}

.product-preview {
  position: absolute;
  inset: 0;
  background-color: #ffffff;
  display: none;
  flex-direction: column;
  z-index: 5;
}

/* Desktop: show on hover, using the (hover: hover) media query so touch
   devices (which don't have a real hover state) don't get stuck with a
   preview that "hovers" on tap and never fully closes. */
@media (hover: hover) {
  .product-card__image-wrapper:hover .product-preview {
    display: flex;
  }
}

/* Mobile: shown via a JS-added class when the image is tapped once. */
.product-card__image-wrapper.is-preview-active .product-preview {
  display: flex;
}

.product-preview__media-wrapper {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background-color: #f0e6ef;
}

.product-preview__media-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* shows the WHOLE photo, letterboxed if needed, instead of cropping it to fill a square */
  background-color: #f0e6ef; /* fills the letterbox space around non-square photos */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.product-preview__media-el.is-active {
  opacity: 1;
  pointer-events: auto;
}

.product-preview__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 1.3rem;
  color: #372345;
  cursor: pointer;
  z-index: 2;
  padding: 0;
}

.product-preview__arrow:hover {
  background-color: #ffffff;
}

.product-preview__arrow--prev {
  left: 8px;
}

.product-preview__arrow--next {
  right: 8px;
}

.product-preview__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 6px 0;
  z-index: 3;
}

.product-preview__dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
}

.product-preview__dot.is-active {
  background-color: #ffffff;
}

.product-preview__footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10px 14px;
  background: linear-gradient(to top, rgba(55, 35, 69, 0.85) 0%, rgba(55, 35, 69, 0) 100%);
  z-index: 3;
}

.product-preview__price {
  font-family: var(--font-body);
  font-weight: bold;
  font-size: 1.05rem;
  color: #ffffff;
}

.product-preview__cart-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #372345;
  color: #ffffff;
  border: none;
  border-radius: 999px;
  width: 34px;
  height: 34px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.product-preview__cart-btn:hover {
  opacity: 0.85;
}

.product-preview__cart-btn.is-added {
  background-color: #4a7c59;
}