.modal .btn-warning {
    background: #ffeb3b;
    color: #333;
    border: none;
    transition: all 0.3s;
  }
  .modal .btn-warning:hover {
    background: #ffd700;
  }
  .modal .btn-secondary {
    border-color: #2193b0;
    color: #2193b0;
    transition: all 0.3s;
  }
  .modal .btn-secondary:hover {
    background: #2193b0;
    color: white;
  }
  
  @media (max-width: 768px) {
    .product-card {
      margin-bottom: 1.5rem;
    }
    .col-md-4 {
      flex: 0 0 50%;
      max-width: 50%;
    }
  }
  @media (max-width: 576px) {
    .col-md-4 {
      flex: 0 0 100%;
      max-width: 100%;
    }
  }
  
    .card {
        background: var(--primary-gradient);
        color: white;
        border: none;
        border-radius: 8px;
        transition: all 0.3s ease-in-out;
    }

    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.3);
    }

    .card-img-top {
        height: 180px;
        object-fit: contain;
        padding: 1rem;
    }

    .badge {
        background-color: var(--accent-color);
        color: #fef8f8;
        position: absolute;
        top: 1rem;
        right: 1rem;
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        font-size: 0.8rem;
    }

    .card-body {
        padding: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .card-title {
        font-size: clamp(0.9rem, 2.5vw, 1rem);
        font-family: var(--font-family-inter);
        color: white;
        margin-bottom: 0.5rem;
    }

    .card-text {
        font-size: clamp(0.9rem, 2.5vw, 1rem);
        font-family: var(--font-family-inter);
        color: rgba(255, 255, 255, 0.9);
        margin-bottom: 0.25rem;
    }

    
    .size-select:focus {
        border-color: var(--accent-color);
        box-shadow: 0 0 5px rgba(255, 235, 59, 0.5);
    }

    .button-group {
        display: flex;
        gap: 0.5rem;
    }

    
 
    @media (max-width: 768px) {
        .card-img-top {
            height: 150px;
        }
        .add-to-cart, .remove-wishlist {
            font-size: 0.8rem;
            padding: 0.2rem 0.5rem;
        }
        .button-group {
            display: flex;
            gap: 0.5rem;
        }
        .empty-wishlist img {
            max-width: 150px;
        }
    }

.product-card
 {
    /* Very light blue-white gradient → subtle & clean look */
    background:white!important;
    border: 1px solid #dbd4ba !important;          /* very light blue border */
    border-radius: 12px !important;
    box-shadow: 0 3px 10px rgba(33, 150, 243, 0.08) !important;  /* subtle blue shadow */
    color: #222 !important;                         /* dark text */
    transition: all 0.28s ease;
    overflow: hidden;
}

.product-card:hover,
.card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(33, 150, 243, 0.14) !important;
}

/* Image – clean white/light bg behind */
.card-img-top {
    height: 250px !important;
    object-fit: contain !important;
    padding: 14px !important;
    background: #fafcff !important;                /* almost white with tiny blue hint */
    border-bottom: 1px solid #e8f0fa !important;
}

/* Title – dark instead of white */
.card-title {
    color: #1a1f36 !important;                     /* deep dark blue-gray */
    font-weight: 700 !important;
    font-size: clamp(0.95rem, 2.1vw, 1.05rem) !important;
}

/* Price area – green offer + red %off like index page */
.card-body .fw-bold.mb-2 {
    color: #1e8e3e !important;                     /* nice green */
    font-size: 1.18rem !important;
}

.card-body .fw-bold.mb-2 span[style*="line-through"] {
    color: #6b7280 !important;
    font-size: 0.92rem !important;
}

.card-body .fw-bold.mb-2 span[style*="color:#e53935"],
.card-body .fw-bold.mb-2 span[color="#e53935"] {
    background: #fee2e2;
    color: #dc2626 !important;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.78rem !important;
    font-weight: 600;
}

/* Small texts (category, brand, gender) */
.card-text.small {
    color: #4b5563 !important;
    font-size: 0.84rem !important;
}

/* Rating stars – gold */
.mb-2 [style*="color:#ff9800"] {
    color: #f59e0b !important;
}

.add-to-cart-btn {
    color: white !important;
    border: none !important;
}

.add-to-cart-btn:hover {
    background: #d4af37 !important;
}

/* Wishlist heart button – subtle improvement */
.wishlist-btn {
    background: white !important;
    border: 1px solid #dbeafe !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

/* Optional: very small discount tag top-left (index പോലെ) */
.product-card::after {
    content: "Offer";
    position: absolute;
    top: 10px;
    left: 10px;
    background: #dc2626;
    color: white;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 3px 7px;
    border-radius: 4px;
    z-index: 2;
    opacity: 0.92;
}

@media (max-width: 768px) {
    .card-img-top {
        height: 160px !important;
        padding: 12px !important;
    }
}
/* Remove any fixed "Offer" badge if you added it earlier (like ::after) */
.product-card::after,
.card::after,
.product-card::before,
.card::before {
    content: none !important;  /* Remove old fixed "Offer" or any other ::after/before */
}

/* Style the new % OFF badge (top-left) - make it look good */
.badge.bg-danger {
    background-color: #dc2626 !important;  
    font-size: 0.8rem;
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    z-index: 3;
}


/*smaller on mobile */
@media (max-width: 768px) {
    .badge.bg-danger {
        font-size: 0.7rem;
        padding: 0.3rem 0.5rem;
    }
}