/* Product image container */
.ProductImage {
  position: relative;
  background: rgba(255, 255, 255, 0.08);
  padding: 14px;
  border-radius: 14px;
  overflow: hidden;
}

/* Gold accent border */
.ProductImage::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(212, 175, 55, 0.4),
    rgba(255, 215, 130, 0.2),
    rgba(212, 175, 55, 0.4)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Make sure images fit nicely */
.ProductImage img {
  border-radius: 10px;
  width: 100%;
  height: auto;
  display: block;
}

/* Optional: hover polish */
li:hover .ProductImage {
  transform: translateY(-2px);
  transition: transform 0.2s ease;
}

.ProductImage::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(212, 175, 55, 0.22),
    rgba(255, 220, 160, 0.12),
    rgba(212, 175, 55, 0.22)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Make the product image box behave nicely */
.ProductImage {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

/* Center the actual image */
.ProductImage img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* keeps full model visible */
  object-position: center;
  display: block;
}

/* Force consistent frame size */
.ProductImage {
  aspect-ratio: 3 / 4;   /* fashion friendly */
  height: auto !important;
}

.ProductImage {
  background: rgba(255, 255, 255, 0.06); /* was 0.08+ */
}

/* SPACE BETWEEN PRODUCT TILES */
ul.ProductList li {
  padding: 16px;            /* space between items */
}

/* PRODUCT IMAGE CONTAINER */
.ProductImage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(255, 255, 255, 0.06);
  padding: 20px;

  border-radius: 18px;      /* rounded container */
  aspect-ratio: 3 / 4;
  min-height: 380px;

  overflow: hidden;
}

/* CENTER & ROUND THE IMAGE */
.ProductImage img {
  max-width: 100%;
  max-height: 100%;

  object-fit: contain;      /* keeps full model */
  object-position: center;

  border-radius: 14px;      /* rounded image */
  display: block;
}

/* SUBTLE GOLD ACCENT (SOFT) */
.ProductImage::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(212, 175, 55, 0.18),
    rgba(255, 220, 160, 0.08),
    rgba(212, 175, 55, 0.18)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ROUND THE OUTER PRODUCT TILE */
ul.ProductList li {
  border-radius: 22px;
  overflow: hidden;        /* IMPORTANT */
}

/* NUDGE IMAGE SLIGHTLY LEFT */
.ProductImage img {
  transform: translateX(-6%);
}

/* CENTER TEXT IN PRODUCT HOVER OVERLAY */
.productHover .Inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  text-align: center;
  height: 100%;
}

/* REMOVE WHITE BACKGROUND INSIDE IMAGE CONTAINER */
.ProductImage {
  background: transparent !important;
  box-shadow: none !important;
}

/* Make sure overlay clips to the same rounded corners */
.ProductImage {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
}

/* Turn the hover into a simple tint (not a second box) */
.productHover {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.55);
}

/* Center overlay text perfectly */
.productHover .Inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
}

.ProductImage {
  position: relative;
}

.ProductImage::before {
  z-index: 5;
}

.productHover {
  z-index: 2;
}

.ProductImage img {
  position: relative;
  z-index: 1;
}

.ProductImage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 18px;              /* space between gold + image */
  border-radius: 18px;
  overflow: hidden;
}

.ProductImage img {
  position: relative;
  z-index: 1;

  max-width: 100%;
  max-height: 100%;

  object-fit: contain;
  object-position: center;

  margin: auto;               /* TRUE centering */
  border-radius: 14px;
}

.ProductImage::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  padding: 1px;

  background: linear-gradient(
    135deg,
    rgba(212, 175, 55, 0.22),
    rgba(255, 220, 160, 0.12),
    rgba(212, 175, 55, 0.22)
  );

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  z-index: 3;
  pointer-events: none;
}

/* REMOVE GOLD BORDER COMPLETELY */
.ProductImage::before {
  content: none !important;
}