/* ------------------------------------------------
   The Whisky Exchange
   Designed and Built by The Whisky Exchange
   All Rights Reserved

   Product List CSS file 

   Content:
   Layout
   Grid View
   Grid Products
   List View
   List Products
   Promotion Flash
   ------------------------------------------------ */
/* ------------------------------------------------
   Layout
   ------------------------------------------------ */
.products-wrapper {
   background: #f6f6f6;
}
/* ------------------------------------------------
   Grid View
   ------------------------------------------------ */
.products-grid {
   width: 100%;
   padding: 10px 0;
   max-width: 960px;
   margin: 0 auto;
}
.products-grid .group {
   width: 100%;
   margin: 0 auto;
}
.products-grid .item {
   float: left;
   width: 50%;
   height: 340px;
   text-align: center;
   padding: 5px;
   background: #f6f6f6;
}
.products-grid .item.large {
   width: 100%;
   height: auto;
}
@media (min-width: 340px) {
   .products-grid .item {
      height: 400px;
   }
}
@media (min-width: 550px) {
   .products-grid .item {
      height: 360px;
   }
}
@media (min-width: 680px) {
   .products-grid {
      padding: 20px 0 10px;
   }
   .products-grid .group {
      float: left;
      width: 50%;
   }
   .products-grid .group.group-list {
      float: left;
      width: 100%;
   }
   .products-grid .group.group-list .item {
      width: 25%;
   }
   .products-grid .group .item.large {
      height: 720px;
   }   
}
@media (min-width: 740px) {
   .products-grid .item {
      height: 400px;
   } 
   .products-grid .group .item.large {
      height: 800px;
   }   
}
@media (min-width: 980px) {
   .products-grid .group .item {
      padding: 10px;
   }
}
/* ------------------------------------------------
   Grid Products
   ------------------------------------------------ */
/* Standard Product */
.products-grid .product {
   display: block;
   position: relative;
   height: 100%;
   padding: 20px 5px;
   background: #fff;
}
.products-grid .product .image {
   display: block;
   width: 100%;
   height: auto;
   max-width: 180px;
   max-height: 240px;
   margin: 0 auto;
}
.products-grid .product .information {
   height: 100px;
   overflow: hidden;
}
.products-grid .product .information .name {
   display: block;
   color: #591b04;
   font-family: 'Fjalla One','Lato',arial,sans-serif;
   text-transform: uppercase;
}
.products-grid .product .information .meta {
   display: block;
   padding-top: 3px;
   font-family: 'Fjalla One','Lato',arial,sans-serif;
   font-size: 0.8em;
   color: #8b8b8b;
}
.products-grid .product .price {
   position: absolute;
   display: block;
   bottom: 10px;
   left: 0;
   width: 100%;
   font-family: 'Fjalla One','Lato',arial,sans-serif;
   color: #990000;
   font-size: 1.3em;
}
/* Promoted Product */
.products-grid .promoted {
   height: auto;
}
.products-grid .promoted .image {
   max-width: 480px;
   max-height: 533px;
}
.products-grid .promoted .information .name {
   font-size: 1.1em;
}
@media (min-width: 680px) {
   /* Standard Product */
   .products-grid .product {
      transition: all 0.5s ease;
      padding: 15px 10px 20px;
   }
   .products-grid .product:hover {
      transition: all 0.5s ease;
      -webkit-box-shadow: 2px 2px 3px 4px #ccc;
         -moz-box-shadow: 2px 2px 3px 4px #ccc;
              box-shadow: 2px 2px 3px 4px #ccc;
   }
   .products-grid .product .name {
      transition: color 0.5s ease;
   }
   .products-grid .product:hover .name {
      transition: color 0.5s ease;
      color: #ff7010;
   }
   .products-grid .promoted {
      height: 100%;
   }
   .products-grid .promoted .information {
      height: 150px;
   }
   .products-grid .promoted .information .name {
      margin-top: 30px;
      font-size: 1.2em;
   } 
}
/* ------------------------------------------------
   List View
   ------------------------------------------------ */
.products-list {
   display: block;
   max-width: 960px;
   margin: 0 auto;
   padding: 10px 0;
}
.products-list .product-list-item {
   display: block;
   padding: 5px;
}
@media (min-width: 680px) {
   .products-list {
      padding: 20px 0 10px;
   }
}
@media (min-width: 980px) {
   .products-list .product-list-item {
      display: block;
      padding: 10px;
   }   
}
/* ------------------------------------------------
   List Products
   ------------------------------------------------ */
/* Container */
.products-list .product {
   display: block;
   position: relative;
   width: 100%;
   padding: 10px 0;
   background: #fff;
   color: #8b8b8b;
}
/* Image */
.products-list .product .product-image {
   float: left;
   width: 40%;
}
.products-list .product .image {
   display: block;
   width: 100%;
   height: auto;
}
/* Content */
.products-list .product .product-content {
   float: left;
   width: 60%;
   padding: 10px 10px 10px 0;
}
.products-list .product .description {
   display: none;
}
.products-list .information {
   padding-left: 10px;
}
.products-list .product span,
.products-list .product .name {
   font-family: 'Fjalla One','Lato',arial,sans-serif;
   font-weight: 400;
}
.products-list .product .name {
   display: block;
   font-size: 1.4em;
   color: #591b04;
   line-height: 1.2;
   text-transform: uppercase;
}
.products-list .product .meta {
   display: block;
   margin: 10px 0;
   font-size: 0.9em;
   line-height: 1;
   color: #686868;
}
.products-list .product .spec {
   display: none;
}
/* Price info */
.products-list .action {
   text-transform: uppercase;
}
.products-list .action .offer-container {
   background: #f6f5f1;
   padding: 15px;
   margin-bottom: 1px;
}
.products-list .action .offer-container .offer {
   display: block;
   font-size: 1.7em;
   color: #ff7010;
   line-height: 1.2;
}
/* Price Box */
.products-list .action .price-container {
   padding: 15px;
   background: #efece3;
   margin-bottom: 1px;
}
.products-list .action .price-content .webonly {
   display: block;
   font-size: 0.8em;
}
.products-list .action .price-content .price {
   display: block;
   color: #960000;
   font-size: 1.8em;
}
.products-list .action .price-content .saving {
   display: block;
   width: 100%;
   margin-top: -2px;
   font-size: 0.8em;
}
/* Note Box */
.products-list .action .note-container {
   display: none;
}
@media (min-width: 500px) {
   /* Image */
   .products-list .product .product-image {
      float: left;
      width: 200px;
   }   
   /* Content */
   .products-list .product .product-content {
      float: none;
      width: auto;
      margin-left: 200px;
      padding: 10px;
   } 
}
@media (min-width: 680px) {
   /* Container */
   .products-list .product {
      padding: 20px 0;
      transition: all 0.5s ease;
   }
   .products-list .product:hover {
      transition: all 0.5s ease;
      -webkit-box-shadow: 2px 2px 3px 4px #ccc;
         -moz-box-shadow: 2px 2px 3px 4px #ccc;
              box-shadow: 2px 2px 3px 4px #ccc;
   }
   /* Content */
   .products-list .product .meta {
      margin: 8px 0 0;
   }
   .products-list .product .spec {
      display: block;
      margin: 8px 0 0;
      font-size: 0.9em;
      line-height: 1;
      text-transform: uppercase;
      color: #686868;
   }
   .products-list .product .description {
      display: block;
      padding-top: 10px;
      line-height: 1.7;
   }
   .products-list .product .information {
      display: block;
      float: left;
      width: 60%;
      padding: 0 10px 0 0;
   }
   .products-list .product .action {
      float: left;
      width: 40%;
   }
   .products-list .product .name {
      transition: color 0.5s ease;
      font-size: 1.6em;
   }
   .products-list .product:hover .name {
      transition: color 0.5s ease;
      color: #ff7010;
   }
   /* Price Box */
   .products-list .product .action .price-container {
      transition: background 0.5s ease;
   }
   .products-list .product:hover .action .price-container {
      transition: background 0.5s ease;
      background: #dad5c5;
   }
   /* Note List */
   .products-list .action .note-container {
      display: block;
      padding: 15px;
      background: #f6f5f1;
      margin-bottom: 1px;
   }
   .products-list .action .note-container .note {
      display: block;
      font-family: 'Fjalla One', 'Lato', arial, sans-serif;
      font-size: 0.8em;
   }
   .products-list .action .note-container .note.green {
      color: #56d64e;
   }
   .products-list .action .note-container .note.blue {
      color: #3a5ba2;
   }
   .products-list .action .note-container .note.red {
      color: #960000;
   }
   .products-list .action .note-container .note.orange {
      color: #ff7010;
   }
}
@media (min-width: 980px) {
   /* Content */
   .products-list .product .information {
      width: 70%;
   }
   .products-list .product .action {
      width: 30%;
   }
   /* Spacing */
   .products-list .product .product-content {
      padding: 10px 20px 10px 10px;
   }
}
/* ------------------------------------------------
   Promotion Flash
   ------------------------------------------------ */
/* Layout */
.promo-flash { 
   display: table;
   position: absolute;
   width: 64px;
   height: 63px;
   top: 0;
   left: 0;
   background: url(../images/widgets/flash.png) left top no-repeat;
   color: #fff;
   font-family: 'Fjalla One', 'Lato', arial, sans-serif;
   line-height: 1.1;
   text-transform: uppercase;
   text-align: center;
}
.promo-flash .text {
   display: table-cell;
   vertical-align: middle;
}
@media (min-width: 500px) {
   .promo-flash {
      top: 10px;
      left: 10px;
   }
}
/* Flash Colours */
.promo-flash.flash-gold {
   background-position: 0 0;
}
.promo-flash.flash-purple {
   background-position: 0 -63px;
}
.promo-flash.flash-red {
   background-position: 0 -126px;
}
.promo-flash.flash-blue {
   background-position: 0 -189px;
}
/* Offer Specific Stles */
.promo-flash.flash-smalltext {
   font-size: 0.8em;
   line-height: 1.1;
}