/* Product cards */
.card {
  border: 0px solid rgb(242 242 242);
  border-radius: 15pt;
  background: rgb(255 255 255 / 10%);
  background-color: rgb(189 187 182 / 35%);
  /*backdrop-filter: blur(10px);*/
  /* cursor: pointer; */
  transition: all .2s ease-in-out;
  /* height: 26em; */
  margin: 0.5rem;
  /* padding: .5em; */
}

.card-img-top {
  width: auto !important;
  height: 20em;
  padding: 1rem;
  padding-bottom: 0;
  margin-top: -55%;
  max-height: 40vh;
  bottom: 0;
  filter: drop-shadow(0.25rem 0.5rem 0.75rem rgba(0, 0, 0, 0.25));
  transition: all .15s ease-in-out;
}

@media (min-width: 576px) {
  .card-img-top {
    width: 45% !important;
    width: auto !important;
    padding: 1rem;
    padding-bottom: 0;
    margin-top: -20%;
    height: 25em;
    margin-top: -50%;
  }

  #products-list .card:hover {
    transform: scale(1.1);
    z-index: 9999;
  }

  #products-list .card:hover .card-img-top {
    transform: translateY(-1rem);
    filter: drop-shadow(0.25rem 1.5rem 0.75rem rgba(0, 0, 0, 0.35));
    transition: all .25s ease-in-out;
  }
}





.card-title {
  /* margin-bottom: .65rem; */
  /*v2*/
  margin-bottom: 1rem;
  font-size: 30pt;
  font-weight: 700;
  display: grid;
  display: inline-block;
  font-family: 'Source Sans Pro';
  /* margin-bottom: 0; */
}

.card-title>.title-text {
  order: 2;
  padding-right: 0.25rem;
}

.card-title>.subtitle {
  font-size: .5em;
  /* display: block; */
  padding-left: .1rem;
  font-weight: 600;
}

.card-title>.badge {
  order: 1
}


.card-body {
  /* padding: .5rem; */
  /* margin-bottom: 1em; */
}

.card>.card-body:nth-of-type(2) {
  padding-top: 0;
}

.size-list {
  gap: .5rem;
  display: flex;
}

.size {
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 1em;
  display: block;
  border-radius: 2rem;
  background-color: #bdc4bd;
  width: fit-content;
  padding: .4rem .8rem;
}

.price {
  font-size: 1rem;
  margin-bottom: .75rem;
  margin-bottom: 0;
  display: none;
}

.price-info-euro {
  font-size: 0.85rem;
}

.price-amount {
  font-weight: 600;
  font-size: 1.75rem;
}

.price-decimal {
  font-size: .65em;
  /* vertical-align: text-top; */
  /* margin-left: .05rem; */
  /* font-weight: 500; */
}

.card-body.inline {
  /*display: flex;*/
  align-content: center;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: nowrap;
}

.card-body.buttons {
  display: flex;
  align-content: baseline;
  justify-content: center;
  align-items: end;
  /* padding: 1.5rem 1rem; */
  /* margin: 0 1rem; */
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 1rem;
}

.card-text {
  /* margin-bottom: 1.75rem; */
  font-size: 14pt;
  /* padding-bottom: 4em; */
}

@media (min-width: 576px) {
  .card {
    margin: .5rem;
    padding: .25rem;
  }

  .owl-stage-outer {
    padding-top: 35vw;
  }
}

@media (max-width: 576px) {
  #products-list .card-text {
    /* display: none; */
  }

  .card-title {
    font-size: 28pt;
  }

  .price-amount {
    font-size: 18pt;
  }

  .owl-stage-outer {
    padding-top: 35vw;
  }
}

@media (min-width: 768px) {
  .card {
    margin: 1rem;
    padding: .25rem;
    /* height: 29em; */
  }

  .owl-stage-outer {
    padding-top: 18vw;
  }

}

@media (min-width: 992px) {
  .card {
    margin: 1rem;
    padding: .5rem;
    /* height: 23em; */
  }
}

@media (min-width: 1200px) {
  .card {
    /* margin: 2rem; */
    /* padding: 1.5rem; */
    /* height: 35em; */
  }

  .owl-stage-outer {
    padding-top: 12vw;
  }
}

.cardheader {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.badge {
  font-size: 1rem;
  width: fit-content;
  height: fit-content;
  display: block;
  z-index: 9;
  padding: .8rem 1.6rem;
  font-weight: 600;
  font-size: 1.25rem;
  background-color: #6c7b71;
  border-radius: 1rem;
}

.badge:hover {
  animation: shake 1.5s;
  animation-iteration-count: 2;
}

@keyframes shake {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }

  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }

  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }

  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }

  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }

  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }

  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }

  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }

  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }

  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }

  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}