:root{
    /* tweak these to match your brand or taste */
    --bg-top: #efefef;        /* top of background */
    --bg-bottom: #dbdbdb;     /* bottom of background */
    --accent: #ff9a00;        /* brand accent (not used by background but handy) */
    --floor-width: 62%;       /* width of the elliptical floor shadow */
    --floor-height: 14%;      /* height of the elliptical floor shadow */
    --floor-blur: 20px;       /* blur amount for floor shadow */
    --vignette-strength: 0.06;
  }
  
  /* MAIN CANVAS */
  .carousel-canvas{
    position: relative;           /* required for pseudo-elements */
    width: 100%;
    height: 100%;                 /* or fixed px height if you prefer */
    min-height: 420px;            /* safe default for product visibility */
    display: flex;
    align-items: center;
    justify-content: center;
  
    /* soft studio gradient */
    background-image:
      linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
  
    /* subtle 3D feeling by adding a faint top highlight */
    box-shadow: inset 0 18px 50px rgba(255,255,255,0.35);
  
    overflow: hidden;
    isolation: isolate; /* keep pseudo-elements below content easily */
  }
  
  /* Elliptical floor / reflection (blurred) */
  .carousel-canvas::before{
    content: "";
    position: absolute;
    left: 50%;
    bottom: 8%; /* raise/lower shadow relative to product baseline */
    transform: translateX(-50%) translateY(0);
    width: var(--floor-width);
    height: var(--floor-height);
    border-radius: 50%;
    z-index: 0; /* behind product */
    /* radial gradient for realistic falloff */
    background: radial-gradient(closest-side,
        rgba(0,0,0,0.12) 0%,
        rgba(0,0,0,0.06) 45%,
        rgba(0,0,0,0.01) 80%,
        transparent 100%);
    filter: blur(var(--floor-blur));
    pointer-events: none;
    transform-origin: center;
    /* slight scale in X to make the ellipse more natural on wide screens */
    transform: translateX(-50%) scaleX(1.05);
  }
  
  /* Subtle vignette / spotlight to guide eye to center */
  .carousel-canvas::after{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1; /* keep under the product if product has z-index >=2 */
    pointer-events: none;
    background:
      radial-gradient(60% 55% at 50% 40%,
        rgba(255,255,255,0.02) 0%,
        rgba(0,0,0,var(--vignette-strength)) 100%);
    mix-blend-mode: multiply;
  }
  
  /* PRODUCT wrapper should be on top of pseudo-elements */
  .carousel-canvas .product{
    position: relative;
    z-index: 2;
    /* optional: keep the product visually centered and allow transforms */
    transform-style: preserve-3d;
    display: block;
  }
  
  /* Responsive tweaks */
  @media (max-width: 640px){
    :root{
      --floor-width: 85%;
      --floor-height: 24%;
      --floor-blur: 28px;
    }
    .carousel-canvas{
      min-height: 320px;
    }
  }