/* =========================
   PRODUCT CARD
========================= */

.product-card {
  display: flex;
  flex-direction: column;
  cursor: pointer;

  will-change: transform;

  transition:
  transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-card:hover {
  transform: translateY(-1px);
}


/* =========================
   PRODUCT MEDIA
========================= */

.product-card__media {
  position: relative;

  width: 100%;
  aspect-ratio: 4 / 5;

  overflow: hidden;

  border-radius: 12px;

  transform: translateZ(0);

  transition:
  transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
  box-shadow 0.7s cubic-bezier(0.22, 1, 0.36, 1);

  will-change:
  transform,
  box-shadow;
}

.product-card:hover .product-card__media {
  transform: translateY(0);

  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.06);
}


/* =========================
   PRODUCT IMAGES
========================= */

.product-card__image {

  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  backface-visibility: hidden;

  will-change: transform;

  transform:
    scale(1.008)
    translateZ(0);

  transition:
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* =========================
   HOVER IMAGE FEEL
========================= */

.product-card:hover .product-card__image {
  transform:
    scale(1.012)
    translateZ(0);
}

/* =========================
   PRODUCT IMAGE MODE
========================= */

.product-card:not(.product-card--model) .product-card__image {
  object-fit: contain;
  object-position: center center;
}


/* =========================
   MODEL IMAGE MODE
========================= */

.product-card.product-card--model .product-card__image {
  object-fit: cover;

  object-position: center 24%;
}

/* =========================
   IMAGE LAYERS
========================= */

.product-card__image--front {
  opacity: 1;
  z-index: 2;
}

.product-card__image--back {
  opacity: 0;
  z-index: 1;
}


/* =========================
   PRODUCT INFO
========================= */

.product-card__info {
  margin-top: 8px;

  text-align: center;
}

.product-card__title {
  margin-top: 6px;

  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product-card__price {
  margin-top: 2px;

  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;

  opacity: 0.7;
}


/* =========================
   SWATCHES
========================= */

.product-card__swatches {
  display: flex;
  justify-content: center;
  gap: 8px;

  margin-top: 6px;
}

.product-card__swatch {
  width: 10px;
  height: 10px;

  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);

  cursor: pointer;

  opacity: 0.6;

  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

.product-card__swatch:hover,
.product-card__swatch.active {
  opacity: 1;

  transform: scale(1.2);
}


/* =========================
   QUICK ADD
========================= */

.product-card__quick-add {
  position: absolute;

  bottom: 16px;
  left: 50%;

  width: 42px;
  height: 42px;

  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 50%;

  background: rgba(255,255,255,0.92);

  backdrop-filter: blur(10px);

  color: #000;

  font-size: 14px;

  cursor: pointer;

  z-index: 5;
  opacity: 0;

  transform: translate(-50%, 10px);

  transition:
  transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
  opacity 0.35s ease;
}

.product-card:hover .product-card__quick-add {
  opacity: 1;

  transform: translate(-50%, -2px);
}

.product-card__quick-add:hover {
  transform:
    translate(-50%, 0)
    scale(1.04);
}


/* =========================
   BADGE
========================= */

.product-card__badge {
  position: absolute;

  top: 12px;
  left: 12px;

  padding: 4px 8px;

  background: var(--color-black);
  color: var(--color-white);

  font-size: 10px;
}


/* =========================
   QUICK ADD COLORS
========================= */

.product-card__qa-colors {
  display: flex;
  justify-content: center;
  gap: 8px;

  margin: 10px 0;
}

.product-card__qa-swatch {
  width: 14px;
  height: 14px;

  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);

  cursor: pointer;

  transition: all 0.2s ease;
}

.product-card__qa-swatch:hover {
  transform: scale(1.1);
}

.product-card__qa-swatch.active {
  border-color: #000;
}

/* =========================
   MOBILE SWATCHES + QUICK ADD
========================= */

@media (max-width: 768px) {

  .product-card__swatches {
  gap: 10px;

  margin-top: 8px;
}

.product-card__swatch {
  width: 14px;
  height: 14px;
}

  .product-card__quick-add {

    opacity: 1;

    transform: translate(-50%, 0);

    width: 38px;
    height: 38px;

    bottom: 18px;

    border: 1px solid rgba(0,0,0,0.08);

    background: rgba(255,255,255,0.94);

    backdrop-filter: blur(10px);

    font-size: 16px;
  }

  .product-card__image--front {

    opacity: 1 !important;

    z-index: 2;
  }

  .product-card__image--back {

    opacity: 0 !important;

    z-index: 1;
  }

    .product-card:hover {

    transform: none;
  }

  .product-card:hover .product-card__media {

    transform: none;

    box-shadow: none;
  }

  .product-card:hover .product-card__image {

    transform:
      scale(1.008)
      translateZ(0);

    filter: brightness(1);
  }

  .product-card__info {
  margin-top: 6px;
}

.product-card__title {
  margin-top: 4px;

  font-size: 11px;
}

.product-card__price {
  margin-top: 1px;

  font-size: 11px;
}

}