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

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

   .price-total-summary {
      order: 1;
   }

   @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;
      }
   }
}
