/* ===============================
   🌈 Theme & Base
   =============================== */
:root{--purple:#6f42c1;--purple-dark:#5b34a0;}
body{font-family:"Inter",system-ui,sans-serif;background:#fff;color:#212529;overflow-x:hidden;}
.text-purple{color:var(--purple)!important;}

/* ===============================
   💎 Buttons
   =============================== */
.btn-purple{background:var(--purple);color:#fff;border:none;transition:.3s;}
.btn-purple:hover{background:var(--purple-dark);transform:scale(1.05);}
.btn-outline-purple{border:1px solid var(--purple);color:var(--purple);background:transparent;transition:.3s;}
.btn-outline-purple:hover{background:var(--purple);color:#fff;}

/* ===============================
   🪶 Product Cards
   =============================== */
.product-card{display:flex;flex-direction:column;justify-content:space-between;border-radius:12px;overflow:hidden;transition:transform .3s,box-shadow .3s;min-height:360px;}
.product-card:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgba(0,0,0,.1);}
.product-image{width:100%;height:220px;object-fit:contain;background:#fff;padding:10px;border-radius:10px;border:1px solid #eee;transition:transform .3s,box-shadow .3s;}
.product-card:hover .product-image{transform:scale(1.03);box-shadow:0 8px 18px rgba(0,0,0,.08);}

/* ===============================
   💰 Price & Discount
   =============================== */
.price-block{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.price-block .text-decoration-line-through{color:#888;font-size:.9rem;}
.price-block .badge{background:#28a745!important;font-size:.75rem;border-radius:4px;padding:3px 6px;}

/* ===============================
   🛒 Add-to-Cart Button (Stable)
   =============================== */
.product-card .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:100%;height:38px;border-radius:6px;font-size:.9rem;font-weight:500;overflow:hidden;transition:background .25s,color .25s,transform .25s;}
.product-card .btn .btn-text{display:inline-block;width:65px;text-align:center;}
.product-card .btn .spinner-border{position:absolute;left:50%;top:50%;width:16px;height:16px;transform:translate(-50%,-50%);opacity:0;transition:opacity .2s;}
.product-card .btn.loading .spinner-border{opacity:1;}
.product-card .btn.loading .btn-text{opacity:.5;}
.product-card .btn:disabled{pointer-events:none;opacity:.9;}
.product-card .btn-glow{box-shadow:0 0 10px rgba(111,66,193,.5);}

/* ===============================
   ⚡ Shimmer Loading Effect
   =============================== */
.shimmer-card{background:#f6f7f8;border-radius:10px;padding:10px;animation:shimmer 1.5s infinite linear;background:linear-gradient(90deg,#f0f0f0 25%,#e8e8e8 50%,#f0f0f0 75%);background-size:200% 100%;}
@keyframes shimmer{0%{background-position:-200% 0;}100%{background-position:200% 0;}}
.shimmer-img{height:220px;border-radius:10px;background:linear-gradient(90deg,#f0f0f0 25%,#e8e8e8 50%,#f0f0f0 75%);background-size:200% 100%;margin-bottom:10px;}
.shimmer-line{height:12px;background:#ecebeb;border-radius:6px;margin-bottom:6px;}
.shimmer-line.medium{width:80%;}
.shimmer-line.short{width:60%;}

/* ===============================
   ✨ Fade Animations
   =============================== */
.fade-in-up{animation:fadeInUp .4s ease forwards;}
@keyframes fadeInUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.fade-out{opacity:0;transition:opacity .3s ease;}

/* ===============================
   🛍️ Cart Badge Animation
   =============================== */
#cart-count{transition:all .3s ease-in-out;}
#cart-count.animate{animation:cartPop .4s ease-in-out;}
@keyframes cartPop{0%{transform:scale(1);background-color:#6f42c1;}
50%{transform:scale(1.35);background-color:#9b59b6;box-shadow:0 0 10px rgba(111,66,193,.6);}
100%{transform:scale(1);background-color:#6f42c1;}}

/* ===============================
   ✨ Floating Toast Notifications
   =============================== */
.toast-msg{animation:slideIn .3s ease forwards;}
.toast-msg.show{opacity:1;transform:translateY(0);}
@keyframes slideIn{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
/* ===============================
   🖼️ Product Detail Image Fix
   =============================== */
.product-detail-img {
  display: block;
  width: 100%;
  max-height: 420px;       /* ✅ limits image height */
  object-fit: contain;     /* ✅ keeps aspect ratio */
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

@media (max-width: 768px) {
  .product-detail-img {
    max-height: 300px;     /* ✅ smaller image for mobile */
  }
}
/* ===============================
   🩵 Smooth Dropdown Animation
   =============================== */
.fade-dropdown {
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.25s ease-in-out;
  visibility: hidden;
}

.show.fade-dropdown {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

/* ===============================
   📱 Responsive
   =============================== */
@media(max-width:768px){
  .product-card img{height:180px;}
  .product-card{min-height:320px;}
  h6.card-title{font-size:.9rem;}
  .product-card .btn{font-size:.85rem;min-height:32px;}
}