.product-bottle {
  position: relative;
  z-index: 2;
  max-width: 260px;
  max-height: 430px;
  object-fit: contain;
  filter: drop-shadow(20px 24px 12px rgba(0, 0, 0, .28));
  transform: rotate(-5deg);
}

.hero-products{position:absolute;inset:0;z-index:3}
.hero-product{position:absolute;border:0;background:transparent;padding:0;cursor:pointer;--tilt:0deg;--lift:0px;transition:transform .28s cubic-bezier(.2,.8,.2,1),filter .28s ease;filter:drop-shadow(15px 18px 12px rgba(0,0,0,.22));}
.hero-product img{display:block;width:100%;height:100%;object-fit:contain}
.hero-pumpkin{width:56%;height:82%;left:5%;bottom:-3%;transform:translateY(var(--lift)) rotate(calc(-8deg + var(--tilt)))}
.hero-garlic{width:58%;height:84%;right:-2%;bottom:-4%;z-index:2;transform:translateY(var(--lift)) rotate(calc(8deg + var(--tilt)))}

.hero-stage {
  background: radial-gradient(circle at var(--glow-x,50%) var(--glow-y,50%), #f58b4d 0%, var(--orange) 42%, var(--orange) 100%);
  transition: background .3s ease;
}

@media (hover: hover) {
  .hero-product:hover { filter:drop-shadow(26px 32px 18px rgba(0,0,0,.34)); }
  .hero-pumpkin:hover { transform:translateY(calc(var(--lift) - 18px)) rotate(calc(-4deg + var(--tilt))) scale(1.06); }
  .hero-garlic:hover { transform:translateY(calc(var(--lift) - 18px)) rotate(calc(4deg + var(--tilt))) scale(1.06); }

  .hero-stage:hover .orbit-a { transform: rotate(10deg) scale(1.04); }
  .hero-stage:hover .orbit-b { transform: rotate(42deg) scale(.96); }
}

.pouch {
  mix-blend-mode: normal;
  border-radius: 8px;
}

.pouch-brand {
  position: absolute;
  z-index: 4;
  top: 16%;
  left: 50%;
  transform: translateX(-50%);
  padding: .28rem .8rem;
  background: #171712;
  color: #fff;
  font: 700 1rem/1 "DM Mono", monospace;
  letter-spacing: .14em;
  box-shadow: 3px 3px 0 #e9682a;
}

.pouch-card .product-bottle {
  width: 286px;
  max-width: none;
  max-height: 440px;
  transform: rotate(-3deg);
}
.product-image-buy{position:relative;z-index:2;border:0;background:transparent;padding:0;cursor:pointer;transition:transform .24s ease,filter .24s ease}
.product-image-buy:hover{transform:translateY(-8px) rotate(2deg);filter:drop-shadow(14px 18px 10px rgba(0,0,0,.22))}
.second-product{margin-top:42px}

.hero-stage .decoration {
  width: 86px;
  height: 62px;
}

.product-brand {
  top: 22%;
  font-size: .76rem;
}

@media (max-width: 560px) {
  .product-bottle {
    max-width: 210px;
    max-height: 330px;
  }

  .hero-pumpkin{width:62%;height:76%;left:-1%;bottom:2%}
  .hero-garlic{width:62%;height:76%;right:-5%;bottom:0}

  .pouch-brand {
    font-size: .75rem;
  }
}