@import "@css[shared]/page/order/_order-products-summary";

.order-products-summary {
   .price-summary {
      display: flex;
      flex-direction: column;
   }

   .price-total-summary {
      order: 1;

      .summary-gift-price,
      div strong {
         font-size: $font-size-larger;
      }
   }

   .cart-product-charges,
   .cart-product-sets {
      padding-left: 0;
   }

   .cart-product-charges {
      .charge-item {
         padding: 12px;

         > span {
            display: flex;
            justify-content: space-between;
            width: 100%;
         }

         .charge-price {
            font-weight: $font-weight-bold;
            margin: 0;
         }
      }
   }

   .cart-product-sets {
      .set-item {
         justify-content: space-between;
         padding: 12px;
      }

      .set-label,
      .set-price {
         font-size: $font-size-base;
      }

      .set-label {
         display: flex;
         flex-direction: column;

         a {
            @include underline-hover;

            font-weight: $font-weight-base;
            white-space: normal;
         }
      }
   }

   @media screen and (max-width: $xs - 1) {
      .product {
         flex-wrap: wrap;
         align-items: flex-start;
         justify-content: flex-start;
         min-height: 90px;
         padding-left: 80px;
         position: relative;
      }

      .image {
         position: absolute;
         top: 5px;
         left: 0;
         width: 80px;
      }

      .title {
         padding-right: 0;
         width: 100% !important;
      }

      .variation {
         margin-bottom: 3px;
      }

      .price-summary {
         padding-left: 10px;
         text-align: left;
      }
   }
}
