:root{
  --brand-green: #4CAF50;
  --brand-green-600:#3e9a42;
  --brand-green-700:#2f7d33;
  --mint:#E9F8ED;
  --soft-mint:#F6FBF7;
  --text-dark:#233328;
  --text-muted:#5b6b61;
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.06);
  --shadow-md: 0 6px 18px rgba(0,0,0,0.08);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
}

.product-bundle-options{
  width:100%;
  margin:15px 0;
  padding:16px;
  background:var(--soft-mint);
  box-shadow:var(--shadow-sm);
  border:1px solid rgba(76,175,80,0.18);
  border-radius:var(--radius-lg);
}

.product-bundle-options h3{
  font-size:1.2rem !important;
  margin-bottom:14px;
  font-weight:700;
  color:var(--text-dark);
  text-align:center;
  position:relative;
  padding-bottom:8px;
}
.product-bundle-options h3:after{
  content:"";
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:64px;
  height:3px;
  border-radius:3px;
  background:var(--brand-green);
}

.bundle-options-container{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
}

.bundle-option{
  border:1px solid rgba(0,0,0,0.06);
  padding:12px;
  width:calc(33.33% - 8px);
  cursor:pointer;
  position:relative;
  transition:all .25s ease;
  background:#fff;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  border-radius:var(--radius-md);
}
.bundle-option:hover{
  border-color:var(--brand-green);
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
}
.bundle-option.selected{
  border-color:var(--brand-green);
  background:linear-gradient(180deg, #ffffff 0%, var(--mint) 100%);
  box-shadow:0 4px 14px rgba(76,175,80,.18);
}

.bundle-image{
  text-align:center;
  margin-bottom:10px;
  height:120px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  border-radius:calc(var(--radius-md) - 4px);
  background:linear-gradient(180deg,#ffffff 0%, #f7fff8 100%);
}
.bundle-image:after{
  content:"";
  position:absolute;
  bottom:0; left:0; width:100%; height:22px;
  background:linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0));
  opacity:.8; pointer-events:none;
}
.bundle-image img{
  max-height:100%; width:auto; max-width:100%;
  transition:transform .35s ease;
  border-radius:8px;
}
.bundle-option:hover .bundle-image img{ transform:scale(1.05); }

.bundle-option h4{
  font-size:.98rem !important;
  margin:0 0 6px;
  text-align:center;
  font-weight:700;
  color:var(--text-dark);
  transition:color .25s ease;
}
.bundle-option.selected h4{ color:var(--brand-green); }

.bundle-price{
  text-align:center;
  font-weight:700;
  color:var(--text-dark);
  margin-bottom:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px;
}
.bundle-price *{ font-size:1.15rem !important; }

.original-price{
  color:#8aa093;
  margin-right:0;
  font-weight:500;
  position:relative;
}
.original-price *{ font-size:1rem !important; }
.original-price:after{
  content:"";
  position:absolute;
  top:50%; left:0; right:0; height:2px;
  background:rgba(244,67,54,.9);
  transform:rotate(-6deg);
  border-radius:2px;
}

.current-price{
  color:var(--brand-green);
  font-weight:800;
  transition:all .25s ease;
}

.discount-badge{
  position:absolute;
  top:8px; right:8px;
  background:var(--brand-green);
  color:#fff;
  padding:4px 8px;
  font-size:10px;
  font-weight:800;
  box-shadow:0 2px 6px rgba(76,175,80,.28);
  z-index:10;
  transition:all .25s ease;
  border-radius:999px;
  animation:pulse-badge 2s infinite;
}
@keyframes pulse-badge{
  0%{ transform:scale(1); }
  50%{ transform:scale(1.06); }
  100%{ transform:scale(1); }
}
.bundle-option:hover .discount-badge{
  background:var(--brand-green-600);
  box-shadow:0 4px 10px rgba(76,175,80,.36);
}

@keyframes pulse{
  0%{ transform:scale(1); }
  50%{ transform:scale(1.03); }
  100%{ transform:scale(1); }
}
.pulse-animation{ animation:pulse .35s ease-in-out; }

.bundle-cart-info{
  font-size:.9em;
  color:var(--text-muted);
  margin-top:6px;
}

.bundle-discount-badge{
  background:var(--brand-green);
  color:#fff;
  padding:2px 8px;
  font-size:.8em;
  font-weight:800;
  margin-left:6px;
  border-radius:999px;
}

@media (max-width:992px){
  .bundle-option{ width:calc(50% - 6px); }
}
@media (max-width:600px){
  .bundle-option{ width:100%; }
}