updating store

assets/less/site/store.less

@@ -1,3 +1,11 @@
+// product vars
+@shirt-kellygreen: #249265;
+@shirt-black: #151010;
+@shirt-royalblue: #2A4DB3;
+@shirt-navy: #2E2737;
+@shirt-silver: #D4D2D3;
+@shirt-asphalt: #535059;
+
 .content-underlay {
   margin-bottom: -180px;
   border-bottom: 1px solid @jumbotron-border;
@@ -7,6 +15,8 @@
 
 
 .product {
+  transition: box-shadow 0.25s ease-in-out, transform 0.25s ease-in-out;
+  transform: scale(0.99);
   z-index: 2;
   position: relative;
   display: block;
@@ -14,32 +24,62 @@
   color: @text-color;
   text-decoration: none;
   background-color: #fff;
-  border-radius: @border-radius-base;
+  border-radius: @border-radius-small;
   padding: @buffer-lg;
   .box-shadow(0 4px 2px 0 rgba(127,127,127,.2));
+
   &:hover, &:focus {
+    transform: scale(1.0);
+    .box-shadow(0 4px 2px 0 rgba(127,127,127,.4));
     text-decoration: none;
     color: @text-color;
-  }
+
-  &:hover {
+    .product-sizes {
-    .box-shadow(0 4px 2px 0 rgba(127,127,127,.6));
+      opacity: 0.75;
+    }
   }
   img { max-width: 100%; }
   li {
-    color: @link-color;
+    padding: @buffer-sm;
-    &:hover, &:focus {
-      color: @link-hover-color;
-      text-decoration: underline;
-    }
   }
   li.active {
-    color: @text-muted;
     cursor: default;
     text-decoration: none;
   }
+
+  .swatch {
+    display: inline-block;
+    width: 30px;
+    height: 30px;
+
+    &.swatch-kellygreen {
+      background-color: @shirt-kellygreen;
+    }
+
+    &.swatch-black {
+      background-color: @shirt-black;
+    }
+
+    &.swatch-navy {
+      background-color: @shirt-navy;
+    }
+
+    &.swatch-silver {
+      background-color: @shirt-silver;
+    }
+
+    &.swatch-asphalt {
+      background-color: @shirt-asphalt;
+    }
+
+    &.swatch-royalblue {
+      background-color: @shirt-royalblue;
+    }
+  }
 }
 
 .product-sizes {
+  transition: opacity 0.25s ease-in-out;
   position: absolute;
   top: 6px;
   right: 6px;
@@ -49,6 +89,27 @@
   line-height: 21px;
   padding: @buffer-sm @buffer-md;
   color: @text-muted;
+  opacity: 0.25;
 }
 
-.product-title { height: 52px; }
+.product-title {
+  height: 52px;
+}
+
+// calls-to-action
+.product-cta {
+  display: block;
+  margin-top: @buffer-xl;
+  color: @text-color;
+  text-decoration: none;
+  border-radius: @border-radius-base;
+  padding: @buffer-lg;
+}
+
+.cta-content {
+  margin-bottom: @buffer-lg;
+}
+
+.cta-fine-print {
+  margin-top: @buffer-lg;
+}

icons.yml

@@ -70,6 +70,7 @@ icons:
       - night
       - rating
       - score
+      - favorite
     categories:
       - Web Application Icons
 
@@ -83,6 +84,7 @@ icons:
       - night
       - rating
       - score
+      - favorite
     categories:
       - Web Application Icons
 
@@ -215,6 +217,9 @@ icons:
     id:         signal
     unicode:    f012
     created:    1.0
+    filter:
+      - graph
+      - bars
     categories:
       - Web Application Icons
 
@@ -394,6 +399,7 @@ icons:
       - sound
       - listen
       - music
+      - audio
     categories:
       - Web Application Icons
 
@@ -402,6 +408,7 @@ icons:
     unicode:    f026
     created:    1.0
     filter:
+      - audio
       - mute
       - sound
       - music
@@ -413,6 +420,7 @@ icons:
     unicode:    f027
     created:    1.0
     filter:
+      - audio
       - lower
       - quieter
       - sound
@@ -425,6 +433,7 @@ icons:
     unicode:    f028
     created:    1.0
     filter:
+      - audio
       - higher
       - louder
       - sound
@@ -704,6 +713,7 @@ icons:
     filter:
       - social
       - send
+      - arrow
     categories:
       - Web Application Icons
 
@@ -1122,6 +1132,7 @@ icons:
     filter:
       - eco
       - nature
+      - plant
     categories:
       - Web Application Icons
 
@@ -1387,6 +1398,7 @@ icons:
       - message
       - texting
       - sms
+      - chat
     categories:
       - Web Application Icons
 
@@ -1536,6 +1548,8 @@ icons:
     id:         lemon-o
     unicode:    f094
     created:    1.0
+    filter:
+      - food
     categories:
       - Web Application Icons
 
@@ -1710,6 +1724,7 @@ icons:
       - right
       - next
       - forward
+      - finger
     categories:
       - Directional Icons
       - Hand Icons
@@ -1723,6 +1738,7 @@ icons:
       - left
       - previous
       - back
+      - finger
     categories:
       - Directional Icons
       - Hand Icons
@@ -1733,6 +1749,7 @@ icons:
     created:    2.0
     filter:
       - point
+      - finger
     categories:
       - Directional Icons
       - Hand Icons
@@ -1743,6 +1760,7 @@ icons:
     created:    2.0
     filter:
       - point
+      - finger
     categories:
       - Directional Icons
       - Hand Icons
@@ -1865,6 +1883,7 @@ icons:
       - move
       - reorder
       - resize
+      - arrow
     categories:
       - Video Player Icons
       - Directional Icons
@@ -1930,6 +1949,8 @@ icons:
     created:    2.0
     filter:
       - duplicate
+      - clone
+      - copy
     aliases:
       - copy
     categories:
@@ -2117,6 +2138,7 @@ icons:
       - dropdown
       - menu
       - triangle down
+      - arrow
     categories:
       - Directional Icons
 
@@ -2126,6 +2148,7 @@ icons:
     created:    2.0
     filter:
       - triangle up
+      - arrow
     categories:
       - Directional Icons
 
@@ -2137,6 +2160,7 @@ icons:
       - previous
       - back
       - triangle left
+      - arrow
     categories:
       - Directional Icons
 
@@ -2148,6 +2172,7 @@ icons:
       - next
       - forward
       - triangle right
+      - arrow
     categories:
       - Directional Icons
 
@@ -2180,6 +2205,7 @@ icons:
       - dropdown
       - more
       - menu
+      - arrow
     aliases:
       - sort-down
     categories:
@@ -2191,6 +2217,8 @@ icons:
     created:    2.0
     aliases:
       - sort-up
+    filter:
+      - arrow
     categories:
       - Web Application Icons
 
@@ -2281,6 +2309,7 @@ icons:
       - message
       - texting
       - sms
+      - chat
     categories:
       - Web Application Icons
 
@@ -2477,6 +2506,7 @@ icons:
     unicode:    f0f9
     created:    3.0
     filter:
+      - vehicle
       - support
       - help
     categories:
@@ -2559,6 +2589,7 @@ icons:
       - quote
       - previous
       - back
+      - arrows
     categories:
       - Directional Icons
 
@@ -2571,6 +2602,7 @@ icons:
       - quote
       - next
       - forward
+      - arrows
     categories:
       - Directional Icons
 
@@ -2578,6 +2610,8 @@ icons:
     id:         angle-double-up
     unicode:    f102
     created:    3.0
+    filter:
+      - arrows
     categories:
       - Directional Icons
 
@@ -2585,6 +2619,8 @@ icons:
     id:         angle-double-down
     unicode:    f103
     created:    3.0
+    filter:
+      - arrows
     categories:
       - Directional Icons
 
@@ -2595,6 +2631,7 @@ icons:
     filter:
       - previous
       - back
+      - arrow
     categories:
       - Directional Icons
 
@@ -2605,6 +2642,7 @@ icons:
     filter:
       - next
       - forward
+      - arrow
     categories:
       - Directional Icons
 
@@ -2612,6 +2650,8 @@ icons:
     id:         angle-up
     unicode:    f106
     created:    3.0
+    filter:
+      - arrow
     categories:
       - Directional Icons
 
@@ -2619,6 +2659,8 @@ icons:
     id:         angle-down
     unicode:    f107
     created:    3.0
+    filter:
+      - arrow
     categories:
       - Directional Icons
 
@@ -2756,6 +2798,7 @@ icons:
     unicode:    f118
     created:    3.1
     filter:
+      - face
       - emoticon
       - happy
       - approve
@@ -2769,6 +2812,7 @@ icons:
     unicode:    f119
     created:    3.1
     filter:
+      - face
       - emoticon
       - sad
       - disapprove
@@ -2781,6 +2825,7 @@ icons:
     unicode:    f11a
     created:    3.1
     filter:
+      - face
       - emoticon
       - rating
       - neutral
@@ -2979,6 +3024,9 @@ icons:
     id:         eraser
     unicode:    f12d
     created:    3.1
+    filter:
+      - remove
+      - delete
     categories:
       - Text Editor Icons
       - Web Application Icons
@@ -3072,6 +3120,7 @@ icons:
     filter:
       - previous
       - back
+      - arrow
     categories:
       - Directional Icons
 
@@ -3082,6 +3131,7 @@ icons:
     filter:
       - next
       - forward
+      - arrow
     categories:
       - Directional Icons
 
@@ -3089,6 +3139,8 @@ icons:
     id:         chevron-circle-up
     unicode:    f139
     created:    3.1
+    filter:
+      - arrow
     categories:
       - Directional Icons
 
@@ -3100,6 +3152,7 @@ icons:
       - more
       - dropdown
       - menu
+      - arrow
     categories:
       - Directional Icons
 
@@ -3239,6 +3292,8 @@ icons:
     id:         level-up
     unicode:    f148
     created:    3.1
+    filter:
+      - arrow
     categories:
       - Web Application Icons
 
@@ -3246,6 +3301,8 @@ icons:
     id:         level-down
     unicode:    f149
     created:    3.1
+    filter:
+      - arrow
     categories:
       - Web Application Icons
 
@@ -3670,6 +3727,7 @@ icons:
     created:    3.2
     filter:
       - osx
+      - food
     categories:
       - Brand Icons
 
@@ -3686,6 +3744,8 @@ icons:
     id:         android
     unicode:    f17b
     created:    3.2
+    filter:
+      - robot
     categories:
       - Brand Icons
 
@@ -3955,6 +4015,10 @@ icons:
     id:         slack
     unicode:    f198
     created:    4.1
+    filter:
+      - hashtag
+      - anchor
+      - hash
     categories:
       - Brand Icons
 
@@ -4487,6 +4551,8 @@ icons:
     id:         sliders
     unicode:    f1de
     created:    4.1
+    filter:
+      - settings
     categories:
       - Web Application Icons
 
@@ -4542,6 +4608,9 @@ icons:
     id:         plug
     unicode:    f1e6
     created:    4.2
+    filter:
+      - power
+      - connect
     categories:
       - Web Application Icons
 
@@ -5221,6 +5290,8 @@ icons:
     created:    4.4
     aliases:
       - battery-4
+    filter:
+      - power
     categories:
       - Web Application Icons
 
@@ -5230,6 +5301,8 @@ icons:
     created:    4.4
     aliases:
       - battery-3
+    filter:
+      - power
     categories:
       - Web Application Icons
 
@@ -5239,6 +5312,8 @@ icons:
     created:    4.4
     aliases:
       - battery-2
+    filter:
+      - power
     categories:
       - Web Application Icons
 
@@ -5248,6 +5323,8 @@ icons:
     created:    4.4
     aliases:
       - battery-1
+    filter:
+      - power
     categories:
       - Web Application Icons
 
@@ -5257,6 +5334,8 @@ icons:
     created:    4.4
     aliases:
       - battery-0
+    filter:
+      - power
     categories:
       - Web Application Icons
 
@@ -5392,6 +5471,8 @@ icons:
     created:    4.4
     aliases:
       - hand-stop-o
+    filter:
+      - stop
     categories:
       - Web Application Icons
       - Hand Icons
@@ -5559,6 +5640,10 @@ icons:
     created:    4.4
     aliases:
       - tv
+    filter:
+      - display
+      - computer
+      - monitor
     categories:
       - Web Application Icons
 
@@ -5886,6 +5971,8 @@ icons:
     unicode:    f299
     created:    4.6
     url:        enviragallery.com
+    filter:
+      - leaf
     categories:
       - Brand Icons
 

store/index.html

@@ -180,7 +180,7 @@
 
     
     <h1><i class="fa fa-shopping-cart fa-lg valign-baseline" aria-hidden="true"></i>&nbsp; Awesome Swag</h1>
-    <p>Support Font Awesome with some official merchandise!</p>
+    <p>Show your love &amp; support of Font Awesome with official merchandise!</p>
     
   </div>
 
@@ -194,7 +194,8 @@
     <div class="col-sm-6 col-lg-4">
       <a class="product" href="http://www.amazon.com/Father-T-shirt-Small-Kelly-Green/dp/B01ELXTKW0">
   <div class="product-sizes">
-    <i class="fa fa-male"></i>
+    <span class="sr-only">Available in the following sizes: </span>
+    <i class="fa fa-male" title="Men"></i>
   </div>
   <div class="tab-content">
     <div class="tab-pane active" id="father-kelly-green">
@@ -205,16 +206,16 @@
     </div>
   </div>
 
-  <ul class="list-inline text-center margin-bottom-lg">
+  <ul class="list-inline text-center margin-bottom-0">
-    <li class="active"><span data-target="#father-kelly-green" data-toggle="tab">Kelly Green</span></li>
+    <li class="active"><span data-target="#father-kelly-green" data-toggle="tab"><span class="swatch swatch-kellygreen" title="Kelly Green"></span> <span class="sr-only"> Kelly Green</span></span></li>
-    <li><span data-target="#father-navy" data-toggle="tab">Navy</span></li>
+    <li><span data-target="#father-navy" data-toggle="tab"><span class="swatch swatch-navy" title="Navy"></span><span class="sr-only"> Navy</span></span></li>
   </ul>
 
   <hr />
 
-  <div class="gg margin-bottom">
+  <div class="gg margin-bottom-sm">
-    <h3 class="gg-col product-title">Fa-ther Tee</h3>
+    <h3 class="gg-col product-title margin-top-0 margin-bottom-0 padding-right-sm">Fa-ther Tee</h3>
-    <h3 class="gg-col text-right text-success">$28</h3>
+    <h3 class="gg-col text-right text-success margin-top-0 margin-bottom-0">$28</h3>
   </div>
   <div class="text-muted">
     American Apparel Fine Jersey Short Sleeve T-Shirt
@@ -225,9 +226,10 @@
     <div class="col-sm-6 col-lg-4">
       <a class="product" href="http://www.amazon.com/Space-Shuttle-T-shirt-Small-Black/dp/B01ELRXO14">
   <div class="product-sizes">
-    <i class="fa fa-male"></i>
+    <span class="sr-only">Available in the following sizes: </span>
-    <i class="fa fa-female"></i>
+    <i class="fa fa-male" title="Men"></i>
-    <i class="fa fa-child"></i>
+    <i class="fa fa-female" title="Women"></i>
+    <i class="fa fa-child" title="Kids"></i>
   </div>
   <div class="tab-content">
     <div class="tab-pane active" id="shuttle-black">
@@ -238,16 +240,16 @@
     </div>
   </div>
 
-  <ul class="list-inline text-center margin-bottom-lg">
+  <ul class="list-inline text-center margin-bottom-0">
-    <li class="active"><span data-target="#shuttle-black" data-toggle="tab">Black</span></li>
+    <li class="active"><span data-target="#shuttle-black" data-toggle="tab"><span class="swatch swatch-black" title="Black"></span><span class="sr-only"> Black</span></span></li>
-    <li><span data-target="#shuttle-navy" data-toggle="tab">Navy</span></li>
+    <li><span data-target="#shuttle-navy" data-toggle="tab"><span class="swatch swatch-navy" title="Navy"></span><span class="sr-only"> Navy</span></span></li>
   </ul>
 
   <hr />
 
-  <div class="gg margin-bottom">
+  <div class="gg margin-bottom-sm">
-    <h3 class="gg-col product-title">Space Shuttle Tee</h3>
+    <h3 class="gg-col product-title margin-top-0 margin-bottom-0 padding-right-sm">Space Shuttle Tee</h3>
-    <h3 class="gg-col text-right text-success">$28</h3>
+    <h3 class="gg-col text-right text-success margin-top-0 margin-bottom-0">$28</h3>
   </div>
   <div class="text-muted">
     American Apparel Fine Jersey Short Sleeve T-Shirt
@@ -258,9 +260,10 @@
     <div class="col-sm-6 col-lg-4">
       <a class="product" href="http://www.amazon.com/Paper-Scissors-Lizard-Spock-T-shirt/dp/B01ELX6N7U">
   <div class="product-sizes">
-    <i class="fa fa-male"></i>
+    <span class="sr-only">Available in the following sizes: </span>
-    <i class="fa fa-female"></i>
+    <i class="fa fa-male" title="Men"></i>
-    <i class="fa fa-child"></i>
+    <i class="fa fa-female" title="Women"></i>
+    <i class="fa fa-child" title="Kids"></i>
   </div>
   <div class="tab-content">
     <div class="tab-pane active" id="rpsls-blue">
@@ -268,15 +271,15 @@
     </div>
   </div>
 
-  <ul class="list-inline text-center margin-bottom-lg">
+  <ul class="list-inline text-center margin-bottom-0">
-    <li class="active"><span data-target="#rpsls-blue" data-toggle="tab">Royal Blue</span></li>
+    <li class="active"><span data-target="#rpsls-blue" data-toggle="tab"><span class="swatch swatch-royalblue" title="Royal Blue"></span><span class="sr-only"> Royal Blue</span></span></li>
   </ul>
 
   <hr />
 
-  <div class="gg margin-bottom">
+  <div class="gg margin-bottom-sm">
-    <h3 class="gg-col product-title">Rock Paper Scissors Lizard Spock Tee</h3>
+    <h3 class="gg-col product-title margin-top-0 margin-bottom-0 padding-right-sm">Rock Paper Scissors Lizard Spock Tee</h3>
-    <h3 class="gg-col text-right text-success">$28</h3>
+    <h3 class="gg-col text-right text-success margin-top-0 margin-bottom-0">$28</h3>
   </div>
   <div class="text-muted">
     American Apparel Fine Jersey Short Sleeve T-Shirt
@@ -287,9 +290,10 @@
     <div class="col-sm-6 col-lg-4">
       <a class="product" href="http://www.amazon.com/Mens-Schmancy-White-T-shirt-Small/dp/B01ELYG428">
   <div class="product-sizes">
-    <i class="fa fa-male"></i>
+    <span class="sr-only">Available in the following sizes: </span>
-    <i class="fa fa-female"></i>
+    <i class="fa fa-male" title="Men"></i>
-    <i class="fa fa-child"></i>
+    <i class="fa fa-female" title="Women"></i>
+    <i class="fa fa-child" title="Kids"></i>
   </div>
   <div class="tab-content">
     <div class="tab-pane active" id="white-logo-kelly-green">
@@ -303,17 +307,17 @@
     </div>
   </div>
 
-  <ul class="list-inline text-center margin-bottom-lg">
+  <ul class="list-inline text-center margin-bottom-0">
-    <li class="active"><span data-target="#white-logo-kelly-green" data-toggle="tab">Kelly Green</span></li>
+    <li class="active"><span data-target="#white-logo-kelly-green" data-toggle="tab"><span class="swatch swatch-kellygreen" title="Kelly Green"></span> <span class="sr-only"> Kelly Green</span></span></li>
-    <li><span data-target="#white-logo-navy" data-toggle="tab">Navy</span></li>
+    <li><span data-target="#white-logo-navy" data-toggle="tab"><span class="swatch swatch-navy" title="Navy"></span><span class="sr-only"> Navy</span></span></li>
-    <li><span data-target="#white-logo-silver" data-toggle="tab">Silver</span></li>
+    <li><span data-target="#white-logo-silver" data-toggle="tab"><span class="swatch swatch-silver" title="Silver"></span><span class="sr-only"> Silver</span></span></li>
   </ul>
 
   <hr />
 
-  <div class="gg margin-bottom">
+  <div class="gg margin-bottom-sm">
-    <h3 class="gg-col product-title">White Logo Tee</h3>
+    <h3 class="gg-col product-title margin-top-0 margin-bottom-0">White Logo Tee</h3>
-    <h3 class="gg-col text-right text-success">$28</h3>
+    <h3 class="gg-col text-right text-success margin-top-0 margin-bottom-0">$28</h3>
   </div>
   <div class="text-muted">
     American Apparel Fine Jersey Short Sleeve T-Shirt
@@ -324,9 +328,10 @@
     <div class="col-sm-6 col-lg-4">
       <a class="product" href="http://www.amazon.com/Camera-Retro-T-shirt-Small-Asphalt/dp/B01ELWGV14">
   <div class="product-sizes">
-    <i class="fa fa-male"></i>
+    <span class="sr-only">Available in the following sizes: </span>
-    <i class="fa fa-female"></i>
+    <i class="fa fa-male" title="Men"></i>
-    <i class="fa fa-child"></i>
+    <i class="fa fa-female" title="Women"></i>
+    <i class="fa fa-child" title="Kids"></i>
   </div>
   <div class="tab-content">
     <div class="tab-pane active" id="camera-asphalt">
@@ -337,16 +342,16 @@
     </div>
   </div>
 
-  <ul class="list-inline text-center margin-bottom-lg">
+  <ul class="list-inline text-center margin-bottom-0">
-    <li class="active"><span data-target="#camera-asphalt" data-toggle="tab">Asphalt</span></li>
+    <li class="active"><span data-target="#camera-asphalt" data-toggle="tab"><span class="swatch swatch-asphalt" title="Asphalt"></span><span class="sr-only"> Asphalt</span></span></li>
-    <li><span data-target="#camera-kelly-green" data-toggle="tab">Kelly Green</span></li>
+    <li><span data-target="#camera-kelly-green" data-toggle="tab"><span class="swatch swatch-kellygreen" title="Kelly Green"></span> <span class="sr-only"> Kelly Green</span></span></li>
   </ul>
 
   <hr />
 
-  <div class="gg margin-bottom">
+  <div class="gg margin-bottom-sm">
-    <h3 class="gg-col product-title">Camera Retro Tee</h3>
+    <h3 class="gg-col product-title margin-top-0 margin-bottom-0 padding-right-sm">Camera Retro Tee</h3>
-    <h3 class="gg-col text-right text-success">$28</h3>
+    <h3 class="gg-col text-right text-success margin-top-0 margin-bottom-0">$28</h3>
   </div>
   <div class="text-muted">
     American Apparel Fine Jersey Short Sleeve T-Shirt
@@ -357,9 +362,10 @@
     <div class="col-sm-6 col-lg-4">
       <a class="product" href="http://www.amazon.com/Mens-Skool-T-shirt-Small-Navy/dp/B01ELWVHJ0">
   <div class="product-sizes">
-    <i class="fa fa-male"></i>
+    <span class="sr-only">Available in the following sizes: </span>
-    <i class="fa fa-female"></i>
+    <i class="fa fa-male" title="Men"></i>
-    <i class="fa fa-child"></i>
+    <i class="fa fa-female" title="Women"></i>
+    <i class="fa fa-child" title="Kids"></i>
   </div>
   <div class="tab-content">
     <div class="tab-pane active" id="old-skool-kelly-green">
@@ -370,16 +376,16 @@
     </div>
   </div>
 
-  <ul class="list-inline text-center margin-bottom-lg">
+  <ul class="list-inline text-center margin-bottom-0">
-    <li class="active"><span data-target="#old-skool-kelly-green" data-toggle="tab">Kelly Green</span></li>
+    <li class="active"><span data-target="#old-skool-kelly-green" data-toggle="tab"><span class="swatch swatch-kellygreen" title="Kelly Green"></span> <span class="sr-only"> Kelly Green</span></span></li>
-    <li><span data-target="#old-skool-navy" data-toggle="tab">Navy</span></li>
+    <li><span data-target="#old-skool-navy" data-toggle="tab"><span class="swatch swatch-navy" title="Navy"></span><span class="sr-only"> Navy</span></span></li>
   </ul>
 
   <hr />
 
-  <div class="gg margin-bottom">
+  <div class="gg margin-bottom-sm">
-    <h3 class="gg-col product-title">Old Skool Tee</h3>
+    <h3 class="gg-col product-title margin-top-0 margin-bottom-0 padding-right-sm">Old Skool Tee</h3>
-    <h3 class="gg-col text-right text-success">$28</h3>
+    <h3 class="gg-col text-right text-success margin-top-0 margin-bottom-0">$28</h3>
   </div>
   <div class="text-muted">
     American Apparel Fine Jersey Short Sleeve T-Shirt
@@ -390,9 +396,10 @@
     <div class="col-sm-6 col-lg-4">
       <a class="product" href="http://www.amazon.com/Mens-Classics-T-shirt-Small-Navy/dp/B01ELY5MT4">
   <div class="product-sizes">
-    <i class="fa fa-male"></i>
+    <span class="sr-only">Available in the following sizes: </span>
-    <i class="fa fa-female"></i>
+    <i class="fa fa-male" title="Men"></i>
-    <i class="fa fa-child"></i>
+    <i class="fa fa-female" title="Women"></i>
+    <i class="fa fa-child" title="Kids"></i>
   </div>
   <div class="tab-content">
     <div class="tab-pane active" id="classics-kelly-green">
@@ -403,16 +410,16 @@
     </div>
   </div>
 
-  <ul class="list-inline text-center margin-bottom-lg">
+  <ul class="list-inline text-center margin-bottom-0">
-    <li class="active"><span data-target="#classics-kelly-green" data-toggle="tab">Kelly Green</span></li>
+    <li class="active"><span data-target="#classics-kelly-green" data-toggle="tab"><span class="swatch swatch-kellygreen" title="Kelly Green"></span> <span class="sr-only"> Kelly Green</span></span></li>
-    <li><span data-target="#classics-navy" data-toggle="tab">Navy</span></li>
+    <li><span data-target="#classics-navy" data-toggle="tab"><span class="swatch swatch-navy"></span><span class="sr-only" title="Navy"> Navy</span></span></li>
   </ul>
 
   <hr />
 
-  <div class="gg margin-bottom">
+  <div class="gg margin-bottom-sm">
-    <h3 class="gg-col product-title">Classics Tee</h3>
+    <h3 class="gg-col product-title margin-top-0 margin-bottom-0 padding-right-sm">Classics Tee</h3>
-    <h3 class="gg-col text-right text-success">$28</h3>
+    <h3 class="gg-col text-right text-success margin-top-0 margin-bottom-0">$28</h3>
   </div>
   <div class="text-muted">
     American Apparel Fine Jersey Short Sleeve T-Shirt
@@ -423,9 +430,10 @@
     <div class="col-sm-6 col-lg-4">
       <a class="product" href="http://www.amazon.com/Mens-Schmancy-Green-Small-Black/dp/B01ELYOYY8">
   <div class="product-sizes">
-    <i class="fa fa-male"></i>
+    <span class="sr-only">Available in the following sizes: </span>
-    <i class="fa fa-female"></i>
+    <i class="fa fa-male" title="Men"></i>
-    <i class="fa fa-child"></i>
+    <i class="fa fa-female" title="Women"></i>
+    <i class="fa fa-child" title="Kids"></i>
   </div>
   <div class="tab-content">
     <div class="tab-pane active" id="green-logo-black">
@@ -436,16 +444,16 @@
     </div>
   </div>
 
-  <ul class="list-inline text-center margin-bottom-lg">
+  <ul class="list-inline text-center margin-bottom-0">
-    <li class="active"><span data-target="#green-logo-black" data-toggle="tab">Black</span></li>
+    <li class="active"><span data-target="#green-logo-black" data-toggle="tab"><span class="swatch swatch-navy" title="Navy"></span><span class="sr-only"> Navy</span></span></li>
-    <li><span data-target="#green-logo-kelly-green" data-toggle="tab">Kelly Green</span></li>
+    <li><span data-target="#green-logo-kelly-green" data-toggle="tab"><span class="swatch swatch-kellygreen" title="Kelly Green"></span> <span class="sr-only"> Kelly Green</span></span></li>
   </ul>
 
   <hr />
 
-  <div class="gg margin-bottom">
+  <div class="gg margin-bottom-sm">
-    <h3 class="gg-col product-title">Green Logo Tee</h3>
+    <h3 class="gg-col product-title margin-top-0 margin-bottom-0 padding-right-sm">Green Logo Tee</h3>
-    <h3 class="gg-col text-right text-success">$28</h3>
+    <h3 class="gg-col text-right text-success margin-top-0 margin-bottom-0">$28</h3>
   </div>
   <div class="text-muted">
     American Apparel Fine Jersey Short Sleeve T-Shirt
@@ -453,6 +461,47 @@
 </a>
 
     </div>
+    <div class="col-sm-12 col-lg-4">
+      <div class="product-cta">
+  <h3 class="cta-title">Have Ideas or Requests?</h3>
+
+  <div class="cta-content">
+    <p>
+      Got a great idea for a Font Awesome goodie or shirt? Don't see your favorite icon in a wear-able or share-able format?
+    </p>
+
+    <p>
+      We're all ears! Spend a few minutes and let us know what you'd want. If we end up using your idea, we'll send you a free copy.
+    </p>
+  </div>
+
+  <a class="btn btn-success btn-block btn-lg" href="mailto:suggestions@fortawesome.com?subject=I have a store idea!">Make a Store Suggestion!</a>
+
+
+  <p class="text-muted cta-fine-print">
+    Please note: While we appreciate all suggestions, not every idea might be right for Font Awesome nor could we physically make every idea.
+  </p>
+</div>
+
+    </div>
+  </div>
+
+  <hr>
+
+  <div class="row">
+    <div class="col-sm-12 col-md-6">
+      <h4>About Font Awesome Products</h4>
+      <p>
+        There might be times where you want to insert a bit of Font Awesome in the real world. That's why we're trying out some schwag. We hope you enjoy our icons and their fun spirit out in the wild and appreciate the support you're showing and giving by doing so. <strong>You're putting the Awesome in Font Awesome!</strong>
+      </p>
+    </div>
+
+    <div class="col-sm-12 col-md-6">
+      <h4>Shipping, Tracking, &amp; Refunding Orders</h4>
+      <p>
+        All of our products are managed through <a href="http://www.amazon.com/s/ref=w_bl_sl_s_ap_web_7141123011?ie=UTF8&node=7141123011&field-brandtextbin=Font+Awesome"><i class="fas fas-amazon"></i> Amazon</a>. Shipping rates and schedules are managed through their storefront. You'll be able to track your placed orders and contact Amazon's responsive support about refunds, issues, or questions. Ratings and feedback are always welcome either on the product page or <a href="mailto:suggestions@fortawesome.com">directly to us</a>.
+      </p>
+    </div>
   </div>
 </div>