/* HOME 家具分类视觉层：只用 CSS 做透视承载，不裁切、不重绘产品原图。 */
.product-stage {
  --stage-accent: var(--accent, #31574b);
  --stage-bg: var(--paper, #f6f6f2);
  position: relative;
  isolation: isolate;
  min-height: 490px;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 36px !important;
  border: 1px solid color-mix(in srgb, var(--stage-accent) 18%, #d8ddd7);
  background:
    radial-gradient(circle at 18% 16%, rgba(255,255,255,.9), transparent 34%),
    linear-gradient(145deg, #fff, var(--stage-bg));
  perspective: 1100px;
}

.product-stage::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 9%;
  right: 9%;
  bottom: 7%;
  height: 31%;
  border-radius: 50%;
  transform: rotateX(68deg) translateZ(-35px);
  transform-origin: center bottom;
  background:
    linear-gradient(90deg, transparent 0 9%, rgba(255,255,255,.38) 9% 10%, transparent 10% 22%, rgba(255,255,255,.32) 22% 23%, transparent 23% 100%),
    linear-gradient(0deg, rgba(0,0,0,.08), rgba(255,255,255,.14));
  box-shadow: 0 28px 28px rgba(35, 50, 42, .16);
}

.product-stage::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 180px;
  height: 180px;
  top: -70px;
  right: -42px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--stage-accent) 14%, transparent);
}

.product-stage img#image {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 410px;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 22px 18px rgba(35, 50, 42, .18));
  transform: rotateX(2deg) rotateY(-2deg) translateZ(20px);
  transition: transform .35s ease, filter .35s ease;
}

.product-stage:hover img#image,
.product-stage:focus-within img#image {
  transform: rotateX(0deg) rotateY(0deg) translateY(-5px) translateZ(30px) scale(1.012);
  filter: drop-shadow(0 28px 22px rgba(35, 50, 42, .22));
}

.product-stage__badge {
  position: absolute;
  z-index: 3;
  top: 18px;
  left: 20px;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--stage-accent) 30%, #fff);
  border-radius: 999px;
  background: rgba(255,255,255,.8);
  color: var(--stage-accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  backdrop-filter: blur(7px);
}

.product-stage__axis {
  position: absolute;
  z-index: 1;
  left: 20px;
  bottom: 20px;
  color: color-mix(in srgb, var(--stage-accent) 65%, #66736d);
  font-size: 10px;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.gallery-thumbs {
  grid-template-columns: minmax(120px, 180px);
}

.gallery-thumb {
  position: relative;
}

.gallery-thumb[aria-current='true']::after {
  content: 'PRIMARY VIEW';
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 4px 5px;
  color: #fff;
  background: var(--stage-accent);
  font-size: 8px;
  letter-spacing: .08em;
}

@media (max-width: 800px) {
  .product-stage {
    min-height: 350px;
    padding: 20px !important;
  }

  .product-stage img#image {
    height: 280px;
  }

  .product-stage__badge {
    top: 12px;
    left: 12px;
    font-size: 9px;
  }

  .product-stage__axis {
    left: 12px;
    bottom: 12px;
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-stage img#image {
    transition: none;
    transform: none;
  }
}