/* resize images that the style makes too big */
li.comments img{
  width: 18px;
  height: auto;
} 
li.author img{
  width: 20px;
  height: auto;
} 
div.read-more img{
  height: auto;
  width: 15px;
}
/* resize input box */
.input-text.qty.text{
  width: 5em;
}

/* remove automatically placed data in product page */
.entry-header ul.top-meta{
  display: none;
}
.entry-header ul.bottom-meta{
  display: none;
}

/* attempt to make product cards same height, doesn't work yet
.products{
  display: table;
}
.products .product{
  display: table-cell;
}
   chose for the hard code strategy*/
li.product{
  min-height: 370px;
}
li.product a.button{
  position: absolute;
  bottom: 0;
}
li.product a .price{ /*button doesn't 'take space' anymore */
  margin-bottom: 69px !important;
}

/* alter number of product cards next to each other in related products
  if product 1 needs more space, product 3 jumps to the right, making product 4
  jump way lower...
.related.products .products .product{
  width: 45% !important;
}*/

/* alter the number of product cards next to each other for phones */
@media only screen and (max-width: 360px) {
  li.product{
    width: 100% !important;
  }
  div.product, article.product {
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
}

/* resize the border for the productcards */
.product:hover{
  border: 1px solid #0b2a46 !important;
}
/* remove border and pointerchange from product article
   This is posible, because the product cards are in  elements */
div.product, article.product{
  border: 0px solid #ffffff !important;
}
div.product:hover, article.product:hover{
  border: 0px solid #ffffff !important;
  cursor: default !important;
}

/* change button design for product cards */
li.product a.button{
  background: #0b2a46 !important;
  color: #ffffff !important;
  border: 2px solid #0b2a46 !important;
  width: 100% !important;
  text-align: center !important;
}
  /* de onderstaande properties worden overschreven door de theme, helaas, 
    dus de hover ziet eruit zoals hij eruit ziet 
a.button.product_type_simple:hover{
  border: 2px solid #0b2a46 !important;
  background: #ffffff !important;
  color: #0b2a46 !important;
}*/

/* give padding to text in product cards */
.woocommerce-Price-amount.amount, .woocommerce-loop-product__title{
  padding-left: 5px !important;
  padding-right: 5px !important;
}

/* lower the padding for the 'in winkelwagen' knop */
.single_add_to_cart_button{
  padding: 0px 28px !important;
}

/* remove add to cart form */
div.summary form.cart{
  display: none;
}

/*make product meta (artikelnr, category, tags) not in line */
.summary.entry-summary .product_meta span{
  display: table;
}
.summary.entry-summary .product_meta span .sku{
  display: inline-block;
}
.summary.entry-summary .product_meta{
  margin-bottom: 10px;
}