switch cart over to table layout

assets/timber.scss.liquid

@@ -29,6 +29,7 @@
   #Links and Buttons
   #Lists
   #Tables
+  #Reponsive Tables
   #OOCSS Media Object
   #Images and Iframes
   #Forms
@@ -744,6 +745,14 @@ body {
   }
 }
 
+.visually-hidden {
+  position: absolute;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  height: 1px; width: 1px;
+  margin: -1px; padding: 0; border: 0;
+}
+
 /*============================================================================
   #Typography
 ==============================================================================*/
@@ -1190,6 +1199,77 @@ th, td {
   border: 1px solid $colorBorder;
 }
 
+/*============================================================================
+  Responsive tables, defined with .table--responsive on table element.
+  Only defined for IE9+
+==============================================================================*/
+.table--responsive {
+  @include at-query($max, $small) {
+    thead {
+      display: none;
+    }
+
+    tr {
+      display: block;
+    }
+
+    // IE9 table layout fixes
+    tr,
+    td {
+      float: left;
+      clear: both;
+      width: 100%;
+    }
+
+    th,
+    td {
+      display: block;
+      text-align: right;
+      padding: 15px;
+    }
+
+    td:before {
+      content: attr(data-label);
+      float: left;
+      text-align: center;
+      font-size: 12px;
+      padding-right: 10px;
+    }
+
+    &.cart-table {
+      img {
+        margin: 0 auto;
+      }
+
+      .js-qty {
+        float: right;
+      }
+    }
+  }
+}
+
+@include at-query($max, $small) {
+  .table--small-hide {
+    display: none !important;
+  }
+
+  .table__section + .table__section {
+    position: relative;
+    margin-top: 10px;
+    padding-top: 15px;
+
+    &:after {
+      content: '';
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 15px;
+      right: 15px;
+      border-bottom: 1px solid $colorBorder;
+    }
+  }
+}
+
 
 /*============================================================================
   #OOCSS Media Object
@@ -1536,11 +1616,7 @@ label.error {
   remaining accessible to screen readers (h5bp.com)
 ==============================================================================*/
 .supports-fontface .icon-fallback-text .fallback-text {
-  clip: rect(0, 0, 0, 0);
-  overflow: hidden;
-  position: absolute;
-  height: 1px;
-  width: 1px;
+  @extend .visually-hidden;
 }
 
 .icon:before {
@@ -2239,14 +2315,25 @@ label.error {
 
   &:first-child {
     padding-top: 0;
-    border-top: 0 none;
   }
 
   .js-qty {
     margin: 0 auto;
   }
 }
 
+.cart-table {
+  th {
+    font-weight: normal;
+  }
+
+  td,
+  th {
+    padding: 30px 15px;
+    border: none;
+  }
+}
+
 @include at-query ($min, $large) {
   .cart__row--table-large {
     display: table;
@@ -2266,6 +2353,7 @@ label.error {
 
   img {
     display: block;
+    max-width: 100%;
   }
 }
 

locales/de.json

@@ -263,7 +263,9 @@
     "general": {
       "previous_product_html": "← Vorheriger Artikel",
       "next_product_html": "Nächster Artikel →",
-      "from_text_html": "Von {{ price }}"
+      "from_text_html": "Von {{ price }}",
+      "sale_price": "Sonderpreis",
+      "regular_price": "Normaler Preis"
     },
     "product": {
       "sold_out": "Ausverkauft",

locales/en.default.json

@@ -263,7 +263,9 @@
     "general": {
       "previous_product_html": "← Previous Product",
       "next_product_html": "Next Product →",
-      "from_text_html": "From {{ price }}"
+      "from_text_html": "From {{ price }}",
+      "sale_price": "Sale price",
+      "regular_price": "Regular price"
     },
     "product": {
       "sold_out": "Sold Out",

locales/es.json

@@ -263,7 +263,9 @@
     "general": {
       "previous_product_html": "← Producto anterior",
       "next_product_html": "Siguiente producto →",
-      "from_text_html": "De {{ price }}"
+      "from_text_html": "De {{ price }}",
+      "sale_price": "Precio de oferta",
+      "regular_price": "Precio habitual"
     },
     "product": {
       "sold_out": "Agotado",

locales/fr.json

@@ -263,7 +263,9 @@
     "general": {
       "previous_product_html": "← Produit précédent",
       "next_product_html": "Produit suivant →",
-      "from_text_html": "À partir de {{ price }}"
+      "from_text_html": "À partir de {{ price }}",
+      "sale_price": "Prix réduit",
+      "regular_price": "Prix régulier"
     },
     "product": {
       "sold_out": "Épuisé",

locales/pt-BR.json

@@ -263,7 +263,9 @@
     "general": {
       "previous_product_html": "← Produto anterior",
       "next_product_html": "Próximo produto →",
-      "from_text_html": "A partir de {{ price }}"
+      "from_text_html": "A partir de {{ price }}",
+      "sale_price": "Preço promocional",
+      "regular_price": "Preço normal"
     },
     "product": {
       "sold_out": "Esgotado",

locales/pt-PT.json

@@ -263,7 +263,9 @@
     "general": {
       "previous_product_html": "← Produto Anterior",
       "next_product_html": "Produto Seguinte →",
-      "from_text_html": "Desde {{ price }}"
+      "from_text_html": "Desde {{ price }}",
+      "sale_price": "Preço de saldo",
+      "regular_price": "Preço normal"
     },
     "product": {
       "sold_out": "Esgotado",

snippets/product-grid-item.liquid

@@ -83,6 +83,7 @@
       <br><strong>{{ 'products.product.sold_out' | t }}</strong>
     {% endif %}
     {% if on_sale %}
+      <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
       <br><s>{{ product.compare_at_price | money }}</s>
     {% endif %}
   </p>