/*
I wanted to go with a mobile first approach, but it actually lead to more verbose CSS in this case, so I've gone web first. Can't always force things...

Side note: I know that this style of nesting in SASS doesn't result in the most performance efficient CSS code... but on the OCD/organizational side, I like it. So for CodePen purposes, CSS selector performance be damned.
*/
/* Global settings */
/* Global "table" column settings */
.product-image {
  float: left;
  width: 20%;
}

.product-details {
  float: left;
  width: 37%;
}

.product-price {
  float: left;
  width: 15%;
}

.product-quantity {
  float: left;
  width: 9%;
}

.product-removal {
  float: left;
  width: 7%;
}

.remove-item-cart{
  color: #999;
  font-size: 20px;
}

.product .product-line-price {
  float: left;
  width: 12%;
  text-align: right;
}

/* This is used as the traditional .clearfix class */
.group:before, .shopping-cart:before, .column-labels:before, .product:before, .totals-item:before,
.group:after,
.shopping-cart:after,
.column-labels:after,
.product:after,
.totals-item:after {
  content: '';
  display: table;
}

.group:after, .shopping-cart:after, .column-labels:after, .product:after, .totals-item:after {
  clear: both;
}

.group, .shopping-cart, .column-labels, .product, .totals-item {
  zoom: 1;
}


/* Body/Header stuff */

label {
  color: rgb(114 127 135);
}


/* Column headers */
.column-labels  {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(214 227 235);
  padding: 5px 20px 10px;
}
.column-labels .product-image, .column-labels .product-removal {
  text-indent: -9999px;
}

/* Product entries */
.product {
  padding: 5px 20px;
  border-bottom: 1px solid rgb(214 227 235);
  display: flex;
  align-items: center;
}
.product .product-image {
  text-align: center;
}
.product .product-image img {
  width: 100px;
}
.product .product-details .product-description {
  margin: 5px 20px 5px 0;
  line-height: 1.4em;
}
.product .product-quantity input {
  border: 1px solid rgb(214 227 235);
  text-align: center;
  color: #999;
  padding: 6px 12px;
  width: 60px;
  height: 40px;
  vertical-align: middle;
  line-height: 1.4;
  background: none;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
}

button.remove-product{
  border: 1px solid rgb(214 227 235);
  padding: 12px 14px;
  border-radius: 3px;
}

/* Totals section */
.totals .totals-item {
  float: right;
  clear: both;
  width: 100%;
  margin-bottom: 0px;
  padding: 20px;
  text-align: right;
  background-color: #f9f9f9;  
}

.totals .totals-item.totals-item-total {
  //background-color: #d9edf7;
  background-color: rgb(214 227 235);
}

.totals .totals-item .totals-title{
  width: 88%;
  text-align: right;
  float: left;
}

.totals .totals-item .totals-value {
  float: right;
  width: 12%;
  text-align: right;
}

.checkout {
  float: right;
  border: 0;
  margin-top: 20px;
  padding: 6px 25px;
  background-color: #6b6;
  color: #fff;
  font-size: 25px;
  border-radius: 3px;
}

.checkout:hover {
  background-color: #494;
}

.panel-cross_sell{
  border: 1px solid rgb(214 227 235);
  width: 100%;
  height: auto;
  display: inline-block;
  margin-top: 30px;
  padding: 20px;
  border-radius: 3px;
  box-shadow: 0 2px 4px rgb(0 0 0 / 15%), 0 2px 3px rgb(0 0 0 / 17%);
}

.panel-cross_sell h4{
  margin-bottom: 20px
}

.product-cross_sell{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0
}

.product-cross_sell h5{
  margin: 0;
  margin-bottom: 5px;
  font-family: "Figtree", sans-serif;
  font-weight: 600;
  font-size: 15px
}

.btn-cross_sell{
  display: inline-block;
  margin-left: 0px;
  margin-right: 10px;
  margin-top: 10px;
  text-align: center;
  padding: 8px 12px;
  font-size: 13px;
  background-color: #0072cf;
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  box-shadow: none;
  float: left;
  border-radius: 3px;
  -webkit-transition: all .3s cubic-bezier(.645,.045,.355,1);
  -moz-transition: all .3s cubic-bezier(.645,.045,.355,1);
  -ms-transition: all .3s cubic-bezier(.645,.045,.355,1);
  -o-transition: all .3s cubic-bezier(.645,.045,.355,1);
  transition: all .3s cubic-bezier(.645,.045,.355,1);
}

.btn-cross_sell:hover{
  background-color: #0fad21;
  cursor: pointer;
  -webkit-transition: all .3s cubic-bezier(.645,.045,.355,1);
  -moz-transition: all .3s cubic-bezier(.645,.045,.355,1);
  -ms-transition: all .3s cubic-bezier(.645,.045,.355,1);
  -o-transition: all .3s cubic-bezier(.645,.045,.355,1);
  transition: all .3s cubic-bezier(.645,.045,.355,1);
}

.cross_sell-image{
  width: 30%;
  float: left;
}

.cross_sell-image img{
  width: 100px;
  max-width: 100%;
  border: 2px solid rgb(214 227 235);
  border-radius: 10px;
}

.cross_sell-details{
  width: 70%; 
  float: left; 
  text-align: left;
  margin: 0;
  padding-left: 15px;
  font-size: 14px;
  line-height: 1;
}

.cross_sell-price-old {
  text-decoration: line-through;
  color: #abb5c3;
  line-height: 16px
}

.cross_sell-price-deals {
  font-size: 20px;
  color: #5c697f;
  font-weight: 600;
  line-height: 16px
}

.cross_sell-percentage-off {
  color: #0fad21;
  font-weight: 600;
  font-size: 16px;
}



/* Make adjustments for tablet */
@media screen and (max-width: 767px) {
  .shopping-cart {
    margin: 0;
    padding-top: 40px;
    //border-top: 1px solid #ddd;
  }

  .column-labels {
    display: none;
  }

  .product{
    display: block;
    padding: 17px 20px;
  }

  .product .product-image {
    float: left;
    width: 30%;
    text-align: left;
    padding-bottom: 10px
  }

  .product .product-image img{
    width: auto;
    max-width: 100%;
  }

  .product .product-details {
    float: right;
    clear: right;
    width: 70%;
    margin-bottom: 0px;
    padding: 24px 0;
  }

  .product .product-details h4{
    font-size: 20px;
    font-family: "Figtree", sans-serif;
    font-weight: 600;
  }

  .product .product-price {
    clear: left;
    width: 20%;
    height: 40px;
    padding: 10px 20px 10px 0;
  }

  .product .product-quantity {
    width: 30%;
  }
  .product .product-quantity input {
    margin-left: 15px;
  }

  .product .product-quantity:before {
    content: 'x';
  }

  .product .product-removal {
    width: 20%;
    padding: 13px 20px 10px 0;
  }

  .product .product-line-price {
    width: 30%;
    height: 40px;
    padding: 10px 0px 10px 20px;
  }

  .totals .totals-item .totals-title{
    width: 70%;
    text-align: left;
    float: left;
  }

  .totals .totals-item .totals-value{
    width: 30%
  }

  .panel-cross_sell{
    padding: 20px 10px 20px 5px;
  }

  .product-cross_sell{
    padding: 0;
    margin-bottom: 30px;
  }

  .panel-cross_sell h4{
    margin-bottom: 30px;
  }

  .product-cross_sell:last-child{
    margin-bottom: 0
  }

  .cross_sell-image{
    text-align: center;
    width: 20%;
    float: left;
    padding-right: 1%;
  }

  .cross_sell-details {
    text-align: left;
    width: 80%; 
    float: left;
    padding-left: 10px;
    display: flex;
    align-items: center;
    vertical-align: middle;
    justify-content: space-between;
  }

  .cross_sell-details-desc {
    width: calc(100% - 100px);
    float: left;
  }
  
  .btn-cross_sell {
    float: right;
    font-size: 13px;
    margin: 0;
    padding: 6px 9px;
  }

  /* Bottone fixed come schede prodotto */
  .cont-button {
    background-color: #fff;
    border-top: 1px solid rgb(236 239 241 / 100%);
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 13px;
    z-index: 9;
    -webkit-box-shadow: 1px -1px 10px 2px rgba(153 153 153 / 35%);
    box-shadow: 1px -1px 10px 2px rgba(153 153 153 / 35%);
  }
  .cont-button .button-cart {
    position: relative;
    bottom: auto;
    left: auto;
    width: inherit;
    padding: 4px 30px;
    z-index: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    border-radius: 8px;
    line-height: 36px;
    margin-top: 0 !important
  }
  .ecommerce-payment-cart{
    margin-top: 30px
  }


}