@keyframes swingUp {
  0% {
      transform: translateY(30px); /* Only translateY here */
      opacity: 0;
  }
  100% {
      transform: translateY(0); /* Reset the Y translation */
      opacity: 1;
  }
}

.card.product-tile {
  width: 100%;
  height: 100%;
  aspect-ratio: 8/10; /* Taller card for more content space */
  border: none;
  background-color: #343a40;
  position: relative;
  overflow: hidden;
  opacity: 0;
  animation: swingUp 0.5s ease-out forwards;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card.product-tile:hover {
  -webkit-transform: scale(1.05); /* For older Safari */
  -ms-transform: scale(1.05); /* For older IE */
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(23, 162, 184, 0.5);
}

.image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.card.product-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease-in-out;
}

.main-img {
  opacity: 1; /* Main image is visible initially */
  position: relative;
  z-index: 1;
}

.alt-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0; /* Alternate image is initially hidden */
  z-index: 2;
  transition: opacity 0.3s ease-in-out;
}
.card.product-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease-in-out;
}
.main-img {
  opacity: 1; /* Main image is visible initially */
  position: relative;
  z-index: 1;
}


.card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 2em; /* Dynamic padding */
}

.card-text-wrapper {
  opacity: 1; /* Always visible */
  transition: opacity 0.3s ease;
}

a {
  color: inherit;
  text-decoration: none;
}



/* 

<div class="col-12 col-sm-6 col-md-4 mb-5 pb-4">
<a href="/products/<%= product.nev_url %>" class="text-decoration-none text-white" > 
  <div class="card product-tile bg-dark text-white mb-5 pb-4">
    <div class="image-wrapper">
      <div class="ratio ratio-4x3">
        <img 
          src="/pictures/<%= product.kategnev %>/<%= product.kepfajl %>" 
          class="img-fluid" 
          alt="Main Product Image"
          style="object-fit: cover;">
      </div>
      
    </div>
    <div class="card-body card-text-wrapper text-center mb-5 pb-4">
      <h5 class="card-title"><%= product.nev %> </h5>
      <p class="card-text"><%= product.leiras_rovid %> </p>
            <hr />
        <div class="mb-5 pb-4">
          <a href="/products/<%= product.nev_url %> " class="btn btn-info">Details</a> 
        </div>
       
    </div>

 
  </div>
    </a>
</div>

*/


hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #f8f9fa;
margin: 1em 0;
padding: 0;
}


.cart-number {
background-color: #fa3e3e;
border-radius: 2px;
color: white;

padding: 1px 3px;
font-size: 10px;

position: absolute; /* Position the badge within the relatively positioned button */
top: 0;
right: 0
}

.cart-bounce {
animation: bounce 0.5s;
}

@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}