/* ============================================================
   Prisma Products Grid — v5.0
   ============================================================ */

@keyframes prismaFadeInUp{
  from{opacity:0;transform:translateY(50px) scale(0.9)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes prismaZoomIn{
  0%{opacity:0;transform:scale(0.2) rotate(-20deg)}
  65%{transform:scale(1.1) rotate(3deg)}
  100%{opacity:1;transform:scale(1) rotate(0deg)}
}
@keyframes prismaFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}

.prisma-products-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  width:100%;
  padding:10px 0 20px;
  align-items:end;
}

.prisma-product-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:0;
  background:var(--card-color,transparent);
  text-decoration:none;
  cursor:pointer;
  overflow:visible;
  animation:prismaFadeInUp 0.7s cubic-bezier(0.22,1,0.36,1) both;
  transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.prisma-product-card:nth-child(1){animation-delay:0ms}
.prisma-product-card:nth-child(2){animation-delay:110ms}
.prisma-product-card:nth-child(3){animation-delay:220ms}
.prisma-product-card:nth-child(4){animation-delay:330ms}
.prisma-product-card:nth-child(5){animation-delay:440ms}
.prisma-product-card:nth-child(6){animation-delay:550ms}

.prisma-product-card:hover{
  transform:rotate(var(--hover-rotate,4deg)) scale(var(--hover-scale,1.08)) translateY(-14px);
  z-index:20;
}

.prisma-bag-wrap{
  position:relative;
  width:100%;
  padding-bottom:10%;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  animation:prismaFloat 3.8s ease-in-out infinite;
}
.prisma-product-card:hover .prisma-bag-wrap{
  animation-play-state:paused;
}

.prisma-bag-img{
  width:105%;
  max-width:105%;
  height:auto;
  object-fit:contain;
  display:block;
  position:relative;
  z-index:2;
  filter:drop-shadow(0 16px 24px rgba(0,0,0,0.16));
  transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1),filter 0.3s ease;
}
.prisma-product-card:hover .prisma-bag-img{
  transform:scale(1.05) rotate(2deg);
  filter:drop-shadow(0 24px 36px rgba(0,0,0,0.26));
}

.prisma-ingredient-img{
  position:absolute;
  width:48%;
  max-width:130px;
  height:auto;
  object-fit:contain;
  z-index:3;
  pointer-events:none;
  animation:prismaZoomIn 0.55s cubic-bezier(0.34,1.56,0.64,1) both;
  animation-delay:440ms;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,0.2));
  transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1),filter 0.3s ease;
}

.prisma-ingredient-bottom-right .prisma-ingredient-img{bottom:-15%;right:-10%}
.prisma-ingredient-bottom-right:hover .prisma-ingredient-img{transform:scale(1.12) translate(5px,-6px) rotate(-5deg)}
.prisma-ingredient-bottom-left .prisma-ingredient-img{bottom:-15%;left:-10%}
.prisma-ingredient-bottom-left:hover .prisma-ingredient-img{transform:scale(1.12) translate(-5px,-6px) rotate(5deg)}
.prisma-ingredient-bottom-center .prisma-ingredient-img{bottom:-18%;left:50%;transform:translateX(-50%)}
.prisma-ingredient-bottom-center:hover .prisma-ingredient-img{transform:translateX(-50%) scale(1.12) translateY(-6px)}
.prisma-ingredient-top-right .prisma-ingredient-img{top:-8%;right:-8%}
.prisma-ingredient-top-right:hover .prisma-ingredient-img{transform:scale(1.12) translate(5px,5px) rotate(-5deg)}
.prisma-ingredient-top-left .prisma-ingredient-img{top:-8%;left:-8%}
.prisma-ingredient-top-left:hover .prisma-ingredient-img{transform:scale(1.12) translate(-5px,5px) rotate(5deg)}

.prisma-product-name{
  margin:8px 0 0;
  font-size:13px;
  font-weight:700;
  color:#2d2d2d;
  text-align:center;
  letter-spacing:0.5px;
  line-height:1.4;
  text-transform:uppercase;
}

@media(max-width:1100px){
  .prisma-products-grid{grid-template-columns:repeat(3,1fr) !important}
}
@media(max-width:768px){
  .prisma-products-grid{grid-template-columns:repeat(2,1fr) !important;padding-bottom:40px}
  .prisma-ingredient-img{width:36%;max-width:90px}
  .prisma-product-card:hover{transform:rotate(2deg) scale(1.05) translateY(-8px)}
}
@media(max-width:480px){
  .prisma-products-grid{grid-template-columns:repeat(2,1fr) !important;gap:4px}
  .prisma-ingredient-img{width:32%;max-width:80px}
}