/* Homepage product arrangement only; all original imagery and branding are reused. */
.hero--tiered-products {
  --hero-stage-height: 602px;
  --hero-floor-height: 60px;
  --hero-display-center: 44%;
}
.hero--tiered-products .hero-inner,
.hero--tiered-products .hero-scene--tiered {
  min-height: calc(var(--hero-stage-height) + var(--hero-floor-height));
}
.hero--tiered-products .hero-copy { align-self: start; }
.hero-scene--tiered .hero-products {
  width: 82%;
  left: calc(var(--hero-display-center) - 41%);
  bottom: calc(100% - var(--hero-stage-height) * .755);
  z-index: 2;
  filter: drop-shadow(0 7px 5px #0005);
}
.hero-stage-contacts {
  position: absolute;
  top: calc(var(--hero-stage-height) * .755 - 8px);
  left: calc(var(--hero-display-center) - 41%);
  width: 82%;
  height: 14px;
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr 1.1fr;
  gap: 2%;
  z-index: 1;
  pointer-events: none;
}
.hero-stage-contacts i { background: radial-gradient(ellipse,#000c 10%,#0005 42%,transparent 72%); }
.hero-floor-products {
  position: absolute;
  width: 48%;
  left: calc(var(--hero-display-center) - 24%);
  bottom: calc(7% + 60px);
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  align-items: end;
  gap: 10px;
  z-index: 3;
}
.hero-floor-product { position: relative; min-width: 0; }
.hero-floor-product::after {
  content: '';
  position: absolute;
  left: 20%;
  bottom: -1px;
  width: 60%;
  height: 10px;
  background: radial-gradient(ellipse,#000e 12%,#0007 40%,transparent 72%);
  z-index: 1;
  pointer-events: none;
}
.hero-floor-product .hero-diffuser {
  position: relative;
  width: 100%;
  height: auto;
  z-index: 2;
  filter: drop-shadow(2px 5px 4px #0004);
}
.hero-floor-reflection {
  position: absolute;
  top: calc(100% - 2px);
  left: 0;
  width: 100%;
  height: 24%;
  object-fit: cover;
  object-position: center bottom;
  transform: scaleY(-1);
  opacity: .17;
  filter: blur(.6px);
  mask-image: linear-gradient(to top,#000 0%,transparent 100%);
  -webkit-mask-image: linear-gradient(to top,#000 0%,transparent 100%);
  pointer-events: none;
}
/* Extend only the existing lower marble texture to make room beneath the stage. */
@media (min-width: 701px) {
  .hero.hero--tiered-products { background-size: 100% var(--hero-stage-height); background-position: center top; }
  .hero--tiered-products::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--hero-floor-height) + 32px);
    z-index: -1;
    background: url('../img/home/hero-marble-stage.webp') center bottom / 100% 800% no-repeat;
    mask-image: linear-gradient(to bottom,transparent,#000 32px);
    -webkit-mask-image: linear-gradient(to bottom,transparent,#000 32px);
    pointer-events: none;
  }
}
@media (min-width: 1500px) {
  .hero--tiered-products {
    --hero-stage-height: 650px;
    --hero-floor-height: 65px;
    --hero-display-center: calc(50% + clamp(0px,(100vw - 1600px) * .18,70px));
  }
}
@media (max-width: 1199px) { .hero--tiered-products { --hero-stage-height: 550px; --hero-floor-height: 55px; } }
@media (min-width: 701px) and (max-width: 991px) { .hero--tiered-products { --hero-stage-height: 490px; --hero-floor-height: 45px; } }
@media (max-width: 700px) {
  .hero--tiered-products { --hero-stage-height: calc(100vw / 1.02); --hero-floor-height: clamp(60px,12vw,90px); --hero-display-center: 46.5%; }
  .hero--tiered-products .hero-inner { min-height: 0; }
  .hero--tiered-products .hero-scene--tiered {
    aspect-ratio: auto;
    height: calc(var(--hero-stage-height) + var(--hero-floor-height));
    background-size: 180% var(--hero-stage-height);
    background-position: right top;
  }
  .hero-scene--tiered::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--hero-floor-height) + 32px);
    z-index: -1;
    background: url('../img/home/hero-marble-stage.webp') right bottom / 180% 800% no-repeat;
    mask-image: linear-gradient(to bottom,transparent,#000 32px);
    -webkit-mask-image: linear-gradient(to bottom,transparent,#000 32px);
    pointer-events: none;
  }
  .hero-floor-products { width: 55%; left: calc(var(--hero-display-center) - 27.5%); gap: 12px; bottom: calc(7% + 35px); }
  .hero-floor-product::after { height: 8px; }
}