/*--- standard variables ---*/
/*--- product item ratio (thumb + content) ---*/
/* set ProductImageRatio in productOverview! */
/*--- media queries. When using responsive ---*/
/*--- media queries. When using responsive: only mobile & desktop ---
@useResponsive:			false;
@breakPointLargePhone:	~"only screen and (min-width: 480px)";
@breakPointTablet:		~"only screen and (min-width: 999999999px)";
@breakPointTabletLand:	~"only screen and (min-width: 768px)";
@breakPointDesktop:		~"only screen and (min-width: 768px)";

@breakPointUpToTablet:	~"only screen and (max-width: 767px)";
@breakPointUpToDesktop:	~"only screen and (max-width: 767px)";
*/
/*--- media queries. When not using responsive ---
@useResponsive:			false;
@breakPointLargePhone:	~"only screen and (min-width: 1px)";
@breakPointTablet:		~"only screen and (min-width: 1px)";
@breakPointTabletLand:	~"only screen and (min-width: 1px)";
@breakPointDesktop:		~"only screen and (min-width: 1px)";

@breakPointUpToTablet:	~"only screen and (max-width: 1px)";
@breakPointUpToDesktop:	~"only screen and (max-width: 1px)";
*/
/*--- custom class functions ---*/
/*----- LESS functions -----*/
/*wordt vervangen door .border-radius
.rounded(@radius: 3px) {
	-webkit-border-radius:	@radius;
	-moz-border-radius:		@radius;
	border-radius:			@radius;
}*/
/*----- CSS3 Animation functions -----*/
/*wordt vervangen door .box-shadow
.inner-shadow(@horizontal:0, @vertical:1px, @blur:2px, @alpha: 0.4) {
	-webkit-box-shadow:	inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
	-moz-box-shadow:	inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
	box-shadow:			inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
}*/
/*----- Buttons -----*/
/*----- Responsive functions -----*/
.cart,
.invoice {
  position: relative;
}
.cart #productsWrapper,
.invoice #productsWrapper {
  margin-bottom: 15px;
}
.cart .product > .header,
.invoice .product > .header {
  color: #313131;
  font-size: 14px;
  line-height: 21px;
}
.cart .product .articleNumber,
.invoice .product .articleNumber {
  font-size: 13px;
}
.cart .product .deleteButton,
.invoice .product .deleteButton {
  height: auto;
  width: auto;
  text-indent: 0;
  background: none;
  color: #76b9af;
}
.cart table tr th,
.invoice table tr th,
.cart table tr td,
.invoice table tr td {
  padding: 0 1%;
  display: block;
  float: left;
}
.cart table tr th.totalPrice.price,
.invoice table tr th.totalPrice.price,
.cart table tr td.totalPrice.price,
.invoice table tr td.totalPrice.price {
  text-align: right;
  padding-right: 40px;
}
.cart table tr td,
.invoice table tr td {
  padding: 8px 3%;
  vertical-align: middle;
}
.cart table tr + tr,
.invoice table tr + tr {
  border-top: 1px solid #e5e5e5;
}
.cart table tbody td.deliveryOptionsWrapper,
.invoice table tbody td.deliveryOptionsWrapper {
  float: none;
  padding: 30px 10px 0;
}
.cart table tbody td.image,
.invoice table tbody td.image {
  float: left;
}
.cart table tbody td.image > a,
.invoice table tbody td.image > a {
  height: inherit;
  display: block;
}
.cart table tbody td.image > a img,
.invoice table tbody td.image > a img {
  display: block;
}
.cart table tbody td.product,
.invoice table tbody td.product {
  padding: 0 0 20px;
}
.cart table tbody td.totalPrice,
.invoice table tbody td.totalPrice {
  padding: 0 3%;
  float: right;
}
.cart table .deleteButton,
.invoice table .deleteButton {
  float: left;
  margin: 0;
}
.cart table tfoot td,
.invoice table tfoot td {
  width: 44%;
  float: left;
  border-bottom: 1px solid #e5e5e5;
}
.cart table tfoot td.empty,
.invoice table tfoot td.empty {
  border: 0 none;
}
.cart table tfoot td .discount,
.invoice table tfoot td .discount {
  float: right;
}
.cart .priceBlock .subTotal,
.invoice .priceBlock .subTotal,
.cart .priceBlock .shippingCosts,
.invoice .priceBlock .shippingCosts,
.cart .priceBlock .discountCode,
.invoice .priceBlock .discountCode,
.cart .priceBlock .spendBonus,
.invoice .priceBlock .spendBonus,
.cart .priceBlock .collectBonus,
.invoice .priceBlock .collectBonus,
.cart .priceBlock .total,
.invoice .priceBlock .total {
  overflow: hidden;
}
.cart .priceBlock .subTotal .title,
.invoice .priceBlock .subTotal .title,
.cart .priceBlock .shippingCosts .title,
.invoice .priceBlock .shippingCosts .title,
.cart .priceBlock .discountCode .title,
.invoice .priceBlock .discountCode .title,
.cart .priceBlock .spendBonus .title,
.invoice .priceBlock .spendBonus .title,
.cart .priceBlock .collectBonus .title,
.invoice .priceBlock .collectBonus .title,
.cart .priceBlock .total .title,
.invoice .priceBlock .total .title,
.cart .priceBlock .subTotal .price,
.invoice .priceBlock .subTotal .price,
.cart .priceBlock .shippingCosts .price,
.invoice .priceBlock .shippingCosts .price,
.cart .priceBlock .discountCode .price,
.invoice .priceBlock .discountCode .price,
.cart .priceBlock .spendBonus .price,
.invoice .priceBlock .spendBonus .price,
.cart .priceBlock .collectBonus .price,
.invoice .priceBlock .collectBonus .price,
.cart .priceBlock .total .price,
.invoice .priceBlock .total .price,
.cart .priceBlock .subTotal .label,
.invoice .priceBlock .subTotal .label,
.cart .priceBlock .shippingCosts .label,
.invoice .priceBlock .shippingCosts .label,
.cart .priceBlock .discountCode .label,
.invoice .priceBlock .discountCode .label,
.cart .priceBlock .spendBonus .label,
.invoice .priceBlock .spendBonus .label,
.cart .priceBlock .collectBonus .label,
.invoice .priceBlock .collectBonus .label,
.cart .priceBlock .total .label,
.invoice .priceBlock .total .label {
  width: 50%;
  float: left;
  font-size: 13px;
  line-height: 30px;
}
.cart .priceBlock .subTotal .price,
.invoice .priceBlock .subTotal .price,
.cart .priceBlock .shippingCosts .price,
.invoice .priceBlock .shippingCosts .price,
.cart .priceBlock .discountCode .price,
.invoice .priceBlock .discountCode .price,
.cart .priceBlock .spendBonus .price,
.invoice .priceBlock .spendBonus .price,
.cart .priceBlock .collectBonus .price,
.invoice .priceBlock .collectBonus .price,
.cart .priceBlock .total .price,
.invoice .priceBlock .total .price {
  text-align: right;
}
.cart .priceBlock .subTotal .price .price,
.invoice .priceBlock .subTotal .price .price,
.cart .priceBlock .shippingCosts .price .price,
.invoice .priceBlock .shippingCosts .price .price,
.cart .priceBlock .discountCode .price .price,
.invoice .priceBlock .discountCode .price .price,
.cart .priceBlock .spendBonus .price .price,
.invoice .priceBlock .spendBonus .price .price,
.cart .priceBlock .collectBonus .price .price,
.invoice .priceBlock .collectBonus .price .price,
.cart .priceBlock .total .price .price,
.invoice .priceBlock .total .price .price {
  float: right;
  width: auto;
  margin-left: 7px;
}
.cart .priceBlock .subTotal .price .deleteButton,
.invoice .priceBlock .subTotal .price .deleteButton,
.cart .priceBlock .shippingCosts .price .deleteButton,
.invoice .priceBlock .shippingCosts .price .deleteButton,
.cart .priceBlock .discountCode .price .deleteButton,
.invoice .priceBlock .discountCode .price .deleteButton,
.cart .priceBlock .spendBonus .price .deleteButton,
.invoice .priceBlock .spendBonus .price .deleteButton,
.cart .priceBlock .collectBonus .price .deleteButton,
.invoice .priceBlock .collectBonus .price .deleteButton,
.cart .priceBlock .total .price .deleteButton,
.invoice .priceBlock .total .price .deleteButton {
  float: left;
  margin: 8px 0;
}
.cart .priceBlock .spendBonus,
.invoice .priceBlock .spendBonus {
  position: relative;
  line-height: 30px;
  padding-bottom: 10px;
}
.cart .priceBlock .spendBonus .deleteButton.deletePromotionCode,
.invoice .priceBlock .spendBonus .deleteButton.deletePromotionCode {
  display: inline-block;
  position: absolute;
  left: 10px;
  top: 7px;
}
.cart .priceBlock .spendBonus .discount.price,
.invoice .priceBlock .spendBonus .discount.price {
  float: right;
}
.cart .priceBlock .collectBonus,
.invoice .priceBlock .collectBonus {
  overflow: visible;
}
.cart .priceBlock .total,
.invoice .priceBlock .total {
  border-top: 1px solid #e5e5e5;
  padding-top: 15px;
}
.cart .priceBlock .total .label,
.invoice .priceBlock .total .label,
.cart .priceBlock .total .price,
.invoice .priceBlock .total .price {
  font-size: 16px;
}
.cart .priceBlock .discountCode,
.invoice .priceBlock .discountCode {
  text-transform: uppercase;
  line-height: 30px;
  margin-bottom: 20px;
}
.cart .priceBlock .discountCode > a,
.invoice .priceBlock .discountCode > a {
  text-decoration: underline;
}
#reserveInStoreWrapper {
  background: #deeae8;
  padding: 20px;
  margin: 0 10px 30px;
  display: none;
  margin-top: 2px;
}
#reserveInStoreWrapper h2 {
  font-weight: 400;
}
#reserveInStoreWrapper #deliveryMethodDetails {
  margin: 0;
}
@media only screen and (max-width: 767px) {
  .cart table tbody td.product,
  .invoice table tbody td.product {
    width: 55%;
  }
  .cart table tbody td.product .itemPrice > span,
  .invoice table tbody td.product .itemPrice > span,
  .cart table tbody td.product .size > span,
  .invoice table tbody td.product .size > span,
  .cart table tbody td.product .amount > span,
  .invoice table tbody td.product .amount > span {
    display: inline-block;
    width: 25%;
  }
  .cart .priceBlock .subTotal,
  .invoice .priceBlock .subTotal,
  .cart .priceBlock .shippingCosts,
  .invoice .priceBlock .shippingCosts,
  .cart .priceBlock .discountCode,
  .invoice .priceBlock .discountCode,
  .cart .priceBlock .spendBonus,
  .invoice .priceBlock .spendBonus,
  .cart .priceBlock .collectBonus,
  .invoice .priceBlock .collectBonus,
  .cart .priceBlock .total,
  .invoice .priceBlock .total {
    padding: 0 10px;
  }
  .cart .priceBlock .spendBonus .deleteButton.deletePromotionCode,
  .invoice .priceBlock .spendBonus .deleteButton.deletePromotionCode {
    position: static;
  }
  #cartFooter {
    margin-top: 30px;
  }
  #reserveInStoreWrapper {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media only screen and (min-width: 768px) {
  .cart table tr th,
  .invoice table tr th,
  .cart table tr td,
  .invoice table tr td {
    display: table-cell;
    float: none;
    padding: 20px .5%;
  }
  .cart table tr th.price,
  .invoice table tr th.price,
  .cart table tr td.price,
  .invoice table tr td.price {
    float: none;
  }
  .cart table tr th,
  .invoice table tr th {
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    min-width: 70px;
    font-size: 18px;
    padding: 15px .5%;
    width: 12%;
  }
  .cart table tr th.image,
  .invoice table tr th.image {
    padding-left: 40px;
  }
  .cart table tr th.image,
  .invoice table tr th.image,
  .cart table tr th.product,
  .invoice table tr th.product {
    width: auto;
  }
  .cart table thead .delete,
  .invoice table thead .delete {
    width: 2%;
    min-width: 0;
  }
  .cart table tbody td.deliveryOptionsWrapper,
  .invoice table tbody td.deliveryOptionsWrapper {
    width: 100%;
    margin: 0;
    border-top: 1px solid #e5e5e5;
    padding: 30px 10px 0;
    border: 0;
  }
  .cart table tbody td .mobileContent,
  .invoice table tbody td .mobileContent {
    display: none;
  }
  .cart table tbody td.image,
  .invoice table tbody td.image {
    float: none;
  }
  .cart table tbody td.product,
  .invoice table tbody td.product {
    padding: 10px .5%;
  }
  .cart table tbody td.size:before,
  .invoice table tbody td.size:before,
  .cart table tbody td.amount:before,
  .invoice table tbody td.amount:before {
    display: none;
  }
  .cart table tbody td.totalPrice,
  .invoice table tbody td.totalPrice {
    margin: 0;
    padding: 10px .5%;
    float: none;
    text-align: right;
    padding-right: 40px;
  }
  .cart table tbody td .deleteButton,
  .invoice table tbody td .deleteButton {
    position: relative;
    left: auto;
    top: auto;
    float: left;
  }
  .cart table tfoot td,
  .invoice table tfoot td {
    float: none;
    width: auto;
    padding: 5px .5%;
  }
  .cart table tfoot tr.subTotal td,
  .invoice table tfoot tr.subTotal td {
    padding-top: 40px;
  }
  .cart #cartFooter,
  .invoice #cartFooter {
    margin: 30px 0;
  }
  .cart .priceBlock .subTotal,
  .invoice .priceBlock .subTotal,
  .cart .priceBlock .shippingCosts,
  .invoice .priceBlock .shippingCosts,
  .cart .priceBlock .discountCode,
  .invoice .priceBlock .discountCode,
  .cart .priceBlock .spendBonus,
  .invoice .priceBlock .spendBonus,
  .cart .priceBlock .collectBonus,
  .invoice .priceBlock .collectBonus,
  .cart .priceBlock .total,
  .invoice .priceBlock .total {
    padding-left: 30px;
    padding-right: 30px;
  }
  .cart .priceBlock .discountCode,
  .invoice .priceBlock .discountCode {
    margin-top: 10px;
  }
}
@media only screen and (min-width: 1024px) {
  .cart .uspCartWrapper,
  .invoice .uspCartWrapper {
    width: 48%;
    float: left;
    padding: 0 10px;
    box-sizing: border-box;
  }
  .cart .priceBlock,
  .invoice .priceBlock {
    width: 49%;
    float: right;
    padding: 0 10px;
    box-sizing: border-box;
  }
  #reserveInStoreWrapper {
    padding: 40px;
  }
}
@media only screen and (min-width: 1427px) {
  .cart table tr td.price,
  .invoice table tr td.price,
  .cart table tr td .price,
  .invoice table tr td .price {
    font-size: 13px;
    font-weight: normal;
  }
  .cart table tr td.price.finalPrice,
  .invoice table tr td.price.finalPrice,
  .cart table tr td .price.finalPrice,
  .invoice table tr td .price.finalPrice {
    font-size: 16px;
  }
}