/* ---------- Variables Plants vs Zombies ---------- */
:root{
  --pvz-sky: #9bdbe9;
  --pvz-ground: #6db64b;
  --pvz-soil: #4b2f1f;
  --pvz-sun: #ffd54a;
  --pvz-pea: #9fe07a;
  --pvz-zombie: #6b6f76;
  --pvz-accent: #ff6b6b;
  --pvz-plant-dark: #2f7a2f;
  --pvz-white: #ffffff;
  --pvz-shadow: rgba(0,0,0,0.35);
  --pvz-font: 'ZombiesArt', 'Luckiest Guy', sans-serif;
  --pvz-radius: 14px;
  --pvz-glow: 0 6px 30px rgba(159,224,122,0.14);
}

/* ---------- Layout container ---------- */
.sliderarcade-design-pvz .sliderarcade-container{
  background: linear-gradient(180deg, var(--pvz-sky) 0%, #cbeef8 35%, #d5f0c9 100%);
  border: 6px solid rgba(0,0,0,0.25);
  border-radius: 22px;
  padding: 28px 30px 140px;
  max-width: 1400px;
  margin: 0 auto 120px;
  position: relative;
  overflow: visible;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  font-family: var(--pvz-font);
  text-transform: none;
}

/* ---------- Animated background props (sun, clouds, parallax) ---------- */
.sliderarcade-design-pvz .pvz-sky-layer{
  position: absolute; inset: 16px 16px auto 16px; height: 180px; pointer-events: none;
  overflow: visible;
}
.sliderarcade-design-pvz .pvz-sun{
  position: absolute; right: 36px; top: -40px; width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff7c6 0%, var(--pvz-sun) 40%, #ffb400 100%);
  box-shadow: 0 0 40px rgba(255,213,74,0.45), 0 8px 30px rgba(255,180,0,0.12);
  transform-origin: center;
  animation: sunFloat 8s ease-in-out infinite;
  z-index: 2;
}
@keyframes sunFloat{ 0%{ transform: translateY(0) rotate(0deg);}50%{ transform: translateY(-6px) rotate(6deg);}100%{ transform: translateY(0) rotate(0deg);}}

/* drifting clouds */
.sliderarcade-design-pvz .pvz-cloud{
  position: absolute; top: 8px; left: -10%; width: 260px; height: 80px; border-radius: 60px;
  background: linear-gradient(180deg,#ffffff88,#ffffff44);
  filter: blur(2px); opacity: 0.95; transform: translateX(0);
  animation: cloudDrift 28s linear infinite;
}
@keyframes cloudDrift{ from{ transform: translateX(-10vw);} to{ transform: translateX(120vw);}}

/* ---------- Slides ---------- */
.sliderarcade-design-pvz .sliderarcade-slide{ padding: 0 14px; }

/* ---------- Card / product ---------- */
.sliderarcade-design-pvz .sliderarcade-product{
  background: linear-gradient(180deg, #f7ffef 0%, #eafbdc 100%);
  border: 4px solid rgba(0,0,0,0.14);
  border-radius: var(--pvz-radius);
  padding: 18px;
  position: relative;
  display:flex; flex-direction:column; justify-content:space-between;
  box-shadow: var(--pvz-glow);
  transition: transform .36s cubic-bezier(.2,.9,.2,1), box-shadow .36s;
  aspect-ratio: 4/3;
  overflow: visible;
}

/* garden strip at bottom of card (soil + grass) */
.sliderarcade-design-pvz .sliderarcade-product::after{
  content:""; position:absolute; left:0; right:0; bottom:-26px; height:48px;
  background: linear-gradient(180deg, var(--pvz-ground) 0%, #4caf50 40%, #3f8e3f 100%);
  border-bottom-left-radius: calc(var(--pvz-radius) - 6px); border-bottom-right-radius: calc(var(--pvz-radius) - 6px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.18); z-index:1;
}

/* floating seed/particle effects */
.sliderarcade-design-pvz .pvz-particle{
  position:absolute; border-radius:50%; width:8px; height:8px; background: rgba(255,255,255,0.9);
  box-shadow: 0 0 8px rgba(255,255,255,0.7); opacity:0.9;
  animation: particleRise linear infinite;
}
@keyframes particleRise{
  0%{ transform: translateY(0) scale(0.6); opacity:0.9;}
  100%{ transform: translateY(-120px) scale(1.2); opacity:0;}
}

/* ---------- Product image styling (plant/zombie framed) ---------- */
.sliderarcade-design-pvz .sliderarcade-product-img{
  width:100%; max-height: 320px; object-fit: contain; border-radius:10px;
  border: 6px solid rgba(255,255,255,0.6); background: linear-gradient(180deg,#fff 0%, #f0ffef 100%);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18), inset 0 2px 8px rgba(255,255,255,0.35);
  transform-origin:center;
  transition: transform .6s cubic-bezier(.2,.9,.2,1), box-shadow .36s;
}

/* plant/zombie portrait badge */
.sliderarcade-design-pvz .pvz-badge{
  position:absolute; left:16px; top:16px; z-index:4;
  display:flex; gap:8px; align-items:center;
  background: linear-gradient(135deg, var(--pvz-pea), var(--pvz-plant-dark));
  padding:8px 12px; border-radius:999px; box-shadow: 0 6px 18px rgba(47,122,47,0.18);
  color: var(--pvz-white); font-weight:900; font-size:0.95rem;
  transform: translateY(0); transition: transform .28s ease;
}
.sliderarcade-design-pvz .sliderarcade-product:hover .pvz-badge{ transform: translateY(-6px); }

/* ---------- Title, description, price ---------- */
.sliderarcade-design-pvz .sliderarcade-product-title{
  font-family: var(--pvz-font); font-weight:900; font-size:2rem;
  color: var(--pvz-plant-dark); letter-spacing: 1px;
  text-shadow: 0 6px 0 rgba(0,0,0,0.12), 0 0 18px rgba(159,224,122,0.12);
  display:inline-block; padding:6px 12px; border-radius:10px;
  background: linear-gradient(90deg,#e8ffdb,#d6f7c7);
  border: 2px solid rgba(0,0,0,0.08);
  transition: transform .36s ease, text-shadow .36s;
}
.sliderarcade-design-pvz .sliderarcade-product:hover .sliderarcade-product-title{
  transform: translateY(-6px) scale(1.04);
  text-shadow: 0 10px 18px rgba(47,149,47,0.18), 0 0 28px rgba(255,235,59,0.08);
}

/* subtitle / flavor */
.sliderarcade-design-pvz .sliderarcade-product-sub{
  font-family: 'Arial', sans-serif; font-weight:700; color:var(--pvz-zombie); font-size:0.98rem;
  margin-top:6px;
  opacity:0.95;
}

/* description */
.sliderarcade-design-pvz .sliderarcade-product-description{
  font-size:1.02rem; color: #123512; line-height:1.35; margin:8px 0 12px;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
  transition: color .28s ease;
}

/* price / sun coins counter */
.sliderarcade-design-pvz .sliderarcade-product-price{
  font-size:1.4rem; font-weight:900; color:var(--pvz-plant-dark);
  text-shadow: 0 2px 0 rgba(0,0,0,0.18), 0 0 8px rgba(255,213,74,0.22);
}

/* ---------- Buttons / Qty ---------- */
.sliderarcade-design-pvz .sliderarcade-actions{ display:flex; gap:10px; justify-content:center; align-items:center; margin-top:8px; z-index:5;}
.sliderarcade-design-pvz .sliderarcade-qty{
  width:88px; padding:8px; border-radius:10px; text-align:center; font-weight:900;
  background: linear-gradient(180deg,#fff,#e9f8df); border:3px solid var(--pvz-soil); color:var(--pvz-plant-dark);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08) inset;
}
.sliderarcade-design-pvz .sliderarcade-add-to-cart{
  min-width:180px; padding:10px 18px; border-radius:12px; cursor:pointer; font-weight:900;
  background: linear-gradient(180deg,var(--pvz-pea), var(--pvz-plant-dark));
  color: var(--pvz-white); border:3px solid rgba(0,0,0,0.12);
  box-shadow: 0 6px 18px rgba(47,122,47,0.18);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
.sliderarcade-design-pvz .sliderarcade-add-to-cart:hover{
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 16px 40px rgba(47,122,47,0.28);
  filter: saturate(1.08);
}

/* sun burst effect on click */
.sliderarcade-design-pvz .sliderarcade-add-to-cart:active::after{
  content:""; position:absolute; width:220px; height:220px; left:50%; top:50%; transform:translate(-50%,-50%) scale(0);
  border-radius:50%; background: radial-gradient(circle,#fff3a0 0%, #ffd54a 30%, transparent 60%);
  opacity:0.9; animation: sunBurst .6s ease forwards; pointer-events:none; z-index:3;
}
@keyframes sunBurst{ to{ transform: translate(-50%,-50%) scale(1.8); opacity:0; }}

/* ---------- Dots (lawn holes) ---------- */
.sliderarcade-design-pvz .slick-dots{ position:absolute; bottom:-84px; left:0; right:0; display:flex !important; justify-content:center; gap:14px;}
.sliderarcade-design-pvz .slick-dots li button{
  width:18px; height:18px; border-radius:50%; background: radial-gradient(circle,#3a7a1e,#2e5e16);
  border:3px solid #1c3b0f; box-shadow: 0 6px 12px rgba(0,0,0,0.25) inset;
  transition: transform .28s ease, box-shadow .28s;
}
.sliderarcade-design-pvz .slick-dots .slick-active button{ transform: scale(1.25); box-shadow: 0 6px 22px rgba(47,122,47,0.28); }

/* ---------- Arrows (seed-launcher style) ---------- */
.sliderarcade-design-pvz .slick-arrow{
  position:absolute; top:50%; transform:translateY(-50%); width:56px; height:56px; border-radius:50%;
  background: linear-gradient(180deg,#fff,#e8f9e5); border:4px solid #2f7a2f; cursor:pointer; z-index:8;
  box-shadow: 0 8px 18px rgba(0,0,0,0.2);
  transition: transform .18s ease, box-shadow .18s ease, background .18s;
}
.sliderarcade-design-pvz .slick-prev{ left:-40px; }
.sliderarcade-design-pvz .slick-next{ right:-40px; }
.sliderarcade-design-pvz .slick-arrow:hover{ transform: scale(1.08) rotate(-6deg); box-shadow: 0 12px 30px rgba(0,0,0,0.28); }
.sliderarcade-design-pvz .slick-arrow::before{
  font-family: "Font Awesome 5 Free"; font-weight:900; font-size:22px; color:#225522;
}
.sliderarcade-design-pvz .slick-prev::before{ content:"\f104"; }
.sliderarcade-design-pvz .slick-next::before{ content:"\f105"; }

/* ---------- Hover micro-animations for elements ---------- */
.sliderarcade-design-pvz .sliderarcade-product:hover .sliderarcade-product-img{ transform: scale(1.06) rotate(-3deg); box-shadow: 0 18px 50px rgba(0,0,0,0.28); }
.sliderarcade-design-pvz .sliderarcade-product:hover .pvz-badge{ transform: translateY(-8px) scale(1.04); }

/* ---------- Accessibility: focus states ---------- */
.sliderarcade-design-pvz .slick-arrow:focus, .sliderarcade-design-pvz .sliderarcade-add-to-cart:focus, .sliderarcade-design-pvz .sliderarcade-qty:focus{
  outline: 3px solid rgba(159,224,122,0.28); outline-offset:4px;
}

/* ---------- Responsive tweaks ---------- */
@media (max-width:768px){
  .sliderarcade-design-pvz .sliderarcade-product-title{ font-size:1.5rem; }
  .sliderarcade-design-pvz .sliderarcade-product-img{ max-height:220px; }
  .sliderarcade-design-pvz .slick-prev{ left:-20px; } .sliderarcade-design-pvz .slick-next{ right:-20px; }
  .sliderarcade-design-pvz .slick-dots{ bottom:-92px; }
}

/* ---------- Optional utility classes (use in markup) ---------- */
/* small plant icon left */
.sliderarcade-design-pvz .pvz-icon-plant{ width:36px; height:36px; border-radius:6px; background: linear-gradient(180deg,var(--pvz-pea),var(--pvz-plant-dark)); box-shadow:0 6px 12px rgba(47,122,47,0.18); display:inline-block; margin-right:8px; }
/* small zombie skull right */
.sliderarcade-design-pvz .pvz-icon-zombie{ width:36px; height:36px; border-radius:6px; background: linear-gradient(180deg,#9ca3a8,#6b6f76); box-shadow:0 6px 12px rgba(0,0,0,0.18); display:inline-block; margin-left:8px; }

/* ---------- Notes for integration ---------- */
/* - Place elements .pvz-sky-layer, .pvz-sun and .pvz-cloud inside .sliderarcade-container for parallax flair.
   - Add a few .pvz-particle spans randomly (left/right with different animation-duration/delay) to emulate seeds/pollen.
   - Use .pvz-badge, .pvz-icon-plant and .pvz-icon-zombie in card HTML where appropriate.
   - The font-face path should point to your actual hosted ZombiesArt files; adjust the URLs above as needed. */