/********* webshop related products ************/
/**********  related products, inside product details **********/
.relatedProduct h4 {
  margin-bottom: 8px;
}
.relatedItem {
  display: grid;
  margin-bottom: 12px;
  padding: 4px 12px;
  grid-gap: 12px;
  grid-template-columns: 60px 24px minmax(40px, auto) 4fr auto;
  grid-template-areas: "imgContainer lpChkContainer relatedQuantity relatedName relatedPrice";
}
.relatedItem .lpChkContainer {
  grid-area: lpChkContainer;
  align-self: center;
}
.relatedItem .imgContainer {
  grid-area: imgContainer;
  align-self: center;
  justify-self: center;
  line-height: 0;
}
.relatedItem .imgContainer img {
  max-width: 100%;
  max-height: 60px;
  font-size: 8px;
}
.relatedItem .relatedQuantity {
  grid-area: relatedQuantity;
  justify-self: end;
  align-self: center;
  font-weight: bold;
}
.relatedItem .relatedName {
  grid-area: relatedName;
  align-self: center;
}
.relatedItem .relatedPrice {
  grid-area: relatedPrice;
  justify-self: end;
  font-weight: bold;
  line-height: 1.1;
}
.relatedItem .relatedPrice .priceInstead {
  display: inline-block;
  width: 100%;
  text-align: right;
  font-weight: normal;
  font-size: 0.8em;
}
.relatedItem .relatedPrice .priceBlock {
  display: inline-block;
  width: 100%;
  text-align: right;
}
/**********  related products, separate module **********/
.relatedProductGrid {
  display: grid;
  width: 100%;
  grid-gap: 8px;
  margin-bottom: 8px;
  padding: 8px;
  line-height: 1.2;
  grid-template-columns: 100px 1fr 1fr auto;
  grid-template-areas: "relatedProductImg relatedProductName relatedProductName relatedProductName" "relatedProductImg relatedProductPriceInstead relatedProductPrice relatedProductCartBtn";
}
.relatedProductGrid h3 {
  margin-bottom: 0;
}
.relatedProductGrid .relatedProductImg {
  grid-area: relatedProductImg;
  line-height: 0;
}
.relatedProductGrid .relatedProductImg img {
  width: 100%;
}
.relatedProductGrid .relatedProductName {
  grid-area: relatedProductName;
}
.relatedProductGrid .relatedProductPrice {
  grid-area: relatedProductPrice;
  align-self: end;
  justify-self: right;
}
.relatedProductGrid .relatedProductPriceInstead {
  grid-area: relatedProductPriceInstead;
  align-self: end;
  justify-self: right;
  text-decoration: line-through;
}
.relatedProductGrid .relatedProductCartBtn {
  grid-area: relatedProductCartBtn;
  align-self: end;
}
.relatedProductGrid .addToCart32.icon-w2cart {
  margin: 0;
  padding: 0;
}
@media (min-width: 1000px) and (max-width: 1600px), (max-width: 500px) {
  .relatedProductGrid {
    grid-template-columns: 50px 1fr 1fr auto;
    grid-template-areas: "relatedProductName relatedProductName relatedProductName relatedProductName" "relatedProductImg relatedProductPriceInstead relatedProductPriceInstead ." "relatedProductImg relatedProductPrice relatedProductPrice relatedProductCartBtn";
  }
}
@media (max-width: 500px) {
  .relatedItem {
    grid-gap: 6px 10px;
    grid-template-columns: minmax(30px, auto) 60px minmax(40px, auto) 4fr 1fr;
    grid-template-areas: "relatedQuantity relatedName relatedName relatedName relatedName" "lpChkContainer imgContainer relatedPrice relatedPrice relatedPrice";
  }
  .relatedItem .relatedName {
    line-height: 1.1;
  }
}