unavailable badge less prominant

sites/demo/static/demo/less/page/product_lists.less

@@ -5,6 +5,28 @@
   font-weight:bold;
 }
 
+//Product badges default
+.product-badge {
+  position:absolute;
+  right:0;
+  top:0;
+  //Default display none
+  display:none;
+}
+
+//Unavailable badge
+.product-unavailable {
+  .product-badge {
+    display:block;
+    width:113px;
+    height:86px;
+    background:url(/static/demo/img/ui/unavailable.png) 0 0;
+  }
+  img {
+    .opacity(35);
+  }
+}
+
 .product_pod {
   position:relative;
   height:430px;
@@ -13,14 +35,6 @@
   & p {
     margin-bottom:0;
   }
-  .unavailable {
-    width:113px;
-    height:86px;
-    position:absolute;
-    right:0;
-    top:0;
-    background:url(/static/demo/img/ui/unavailable.png) 0 0;
-  }
   h3 {
     font-size:@headingFourSize;
     margin-bottom:0;

sites/demo/templates/catalogue/partials/product.html

@@ -6,12 +6,12 @@
 
 <article class="product_pod">
     {% block product_image %}
-    <div class="image_container">
+    <div class="image_container {% if not product.is_available_to_buy %}product-unavailable{% endif %}">
         {% with image=product.primary_image %}
             {% thumbnail image.original "150x150" upscale=False as thumb %}
                 <a href="{{ product.get_absolute_url }}">
                     <img src="{{ thumb.url }}" alt="{{ product.get_title }}">
-                    {% if not product.is_available_to_buy %}<i class="unavailable"></i>{% endif %}
+                    <i class="product-badge"></i>
                 </a>
             {% endthumbnail %}
         {% endwith %}