﻿/*# Product list */


/* Title sections */

#content .bestsellers h2, #content .discounts h2, #content .suggestions h2, #content .relatedcategories h2, #content .productreviews h2 { color: #fff; margin: 0; padding: 0 0 0; font-weight: normal; font-size: 1.5em; }
#content .bestsellers p, #content .discounts p, #content .suggestions p, #content .relatedcategories p { color: #fff; font-size: 1em; line-height: 150%; }

    #content .relatedcategories h2 {
    }

#content .bestsellers, #content .discounts, #content .suggestions { padding-bottom: 1.5em; }
#content .productlist .plitem.bestsellers { background-color: #40638E; border:none;  }
#content .productlist .plitem.suggestions { background-color: #47a3da; border: none; }
#content .productlist .plitem.discounts { background-color: #c00; border: none; }

.discounttab {position:absolute; background:#d00; text-align:center; margin:0.5em auto; color:#fff; font-size:1.2em; padding:0.3em 0.5em; z-index:999;   }
.discountbanner { background-color:#d00; padding:0.5em 1em; text-align:center; width: auto; font-size:1.2em; color:#fff; margin-bottom:1em;}

#content .plitem.link { cursor: pointer; }
#content .plitem a { text-decoration: none; }

#content .productlist .plitem.bestsellers:hover, #content .productlist .plitem.discounts:hover, #content .productlist .plitem.suggestions:hover { border: none; }

#content .paleblue { background-color: #d3dfed !important; background-color: rgba(211,223,237,0.8); }
#content .brightblue { background: #47a3da !important; background-color: rgba(71,163,218,0.8); }
#content .relatedcategories{ background-color:rgba(64,99,142,0.8);}

#content .plitem .plitemblock { color: #fff; font-size: 1.4em; padding: 1em; text-align: left; line-height: 1.5em; }


/* Main List */

#content .productlist { position: relative; padding: 1em 1em 0; margin: 0em auto 0; }
#content .productlist .plitem { padding: 0px; background: #fff; width: auto; position: relative; border: 1px solid #fff; padding-bottom: 6em; }
#content .productlist .plitem.link{padding-bottom:0px;}
/*  */ /* This breaks mobile friendly */
#content .productlist .plitem:hover { border-color: #47a3da; }

#content .productlist .plitem2 { background: #fff; padding: 1em; }


#content .plitem .qty, #content .plitem .buybuttons { padding: 0.35em 0.5em; text-align: center; border: 1px solid #47a3da;border-collapse: collapse; margin: 0 0.2em; outline: none; line-height: 1.1em; font-size: 1.2em; display: inline-block;  box-sizing:border-box; border-radius:3px;}
#content .plitem .qty {
    width: 3em;
    text-align: center;
     box-sizing:border-box;
}



#content .plimage { margin: 1em;  text-align: center; background-repeat: no-repeat; background-size: contain; background-position: center center; height: 8em; display: block; }

#content .plimage img {width:100%; /*width of parent container*/ height: 8em; /*height of parent container*/ object-fit: contain; position: relative; top: 50%; transform: translateY(-50%); }

#content .buyremove {  padding: 0px; border-radius: 0px;  }
#content .buyremove { padding: 0px; border-radius: 0px; display: inline-block; clear: both; position:relative; }
#content .productlist .plitem .buyremove { position: absolute; bottom: 1em; right: 1em; left: 1em; }
#content .buyremove .buybuttons { background-color: #47a3da; color: #fff; cursor: pointer; }
#content .plitem .buyremove .buybuttons:disabled { background-color: #666; color: #ccc; }
#content .addremovebutton:hover { text-decoration: none; }
#content .plitem .buybuttons.addremovebutton { display: none; }

#content .shoppingcart .plitem .buybuttons.addremovebutton { display: inline-block; user-select: none; -webkit-user-select:none; }

#content .plitem.plitemadded .buybuttons { display: inline-block; }
    #content .plitem.plitemadded .buybuttons.addbutton { display: none; }
#content .plitem .buyremovedisabled .buybuttons, #content .plitem .buyremovedisabled  .qty {
    border: 1px solid #ccc;
    background: #ccc;

}


#content .plitem .buyremovedisabled .addbutton { background: #999 !important; cursor: default; }

#content .pldetails { padding: 0 1em 1em; text-align: center; }

#content .plheading { padding: 0.5em; color: #333; font-size: 1.1em; text-align: center; }
#content .plitem select, #content .productbuy select { border: solid 1px #ccc; width: 100%; border-collapse: collapse; margin: 4px auto; }
#content .productlist .plitem .favourite { display: none; }
#content .productlist .plitem .codeandstock { line-height: 200%;   }

#content .plitem select option:disabled, #content .productbuy select option:disabled{ background-color:#ddd; }


#content .plitem .plcode { float: left; width: 50%; text-align: left; }
#content .plitem .plstock { float: right; width: 50%; text-align: right; }
#content .stockerror { color: #c00; font-weight: 500; }
#content .plstockerror { color: #c00; text-align: center; clear: both; line-height: 150%; display: block; }
#content .plitem .buyremovedisabled { display: none; }
#content .outofstock { padding:0.6em 0.8em; background-color:#999; color:#fff; font-size:1.2em; text-align:center; clear:both;}

#content .productlist .plitem .plprice { padding: 0.4em 0 0; font-size: 1.2em; display: block; text-align: center; position: absolute; bottom: 3.5em;  left: 1em; right: 1em; }
#content .pricevat, #content .plfromvat { font-size: 0.7em; color: #333; display: block; clear: both; text-align: right; padding: 6px 0; }
#content .wasprice { font-size: 0.8em; text-decoration: line-through; color: #d00; margin-right: 1em; }
#content .plfrom { color: #666; }
#content .incvat { color: #666;  }
#content .plfromprice, #content .plrealprice { color: #000; font-weight: bold; font-size: 1.1em; text-align: right; }
#content .unitarea { clear: both; }
#content .unitvalue { font-size: 1.1em; text-align: center; padding: 0.5em 0; }

#content .plitem .plrating { text-align: center; height: 1.2em; }
    
/* End List*/
/**/

#content .productlist { position: relative; display: grid; grid-template-columns: repeat(auto-fill,minmax(200px, 1fr)); grid-gap: 1em; }


    

/*#region Categories */
.categorydescription { max-width: 50em; background-color: #fff; padding: 1em; box-sizing: border-box; }
.categoryproducts { width: 67%; float: right; }
.subcategorydescription { width: 48%; float: left; box-sizing: border-box; background-color: #fff; }
.description { border: 0px; line-height: 1.3em; }
.description p, .description ul { line-height: 150%; }

#content ul { padding: 2px 0px 5px 30px; }
#content ul li { list-style: disc; margin: 2px 0px 5px 0px; }

#content .OutOfStock { color: #990000; font-weight: 500; }
/*#endregion*/


/*#region Sub category list  */
#content .subcats { margin: 0em auto 0em; position: relative; display: grid; grid-template-columns: repeat(auto-fill,minmax(10em, 1fr)); grid-gap: 1em; padding: 1em 1em 0; }
#content .subcats a{ text-decoration:none;}
#content .subcats .subcat { padding: 0px; text-align: center; padding: 1em 0.5em; background: #fff; border: solid 1px #fff; box-sizing: border-box; }
a.subcat { font-size: 1.2em; }
#content .subcats div.subcat { background-color: rgba(64,99,142,1); color: #fff; padding-left: 1em; text-align: left; border: solid 1px rgba(64,99,142,1); }
#context .subcats div.subcat div { background-color: darkorange; }
#content .subcats .subcat span.catname { display: block; padding: 0px; margin: 0px; padding: 0.5em 0em; line-height: 1.5em }
#content .subcats a:hover { border: solid 1px #8AA8CB; text-decoration: none; color: #990000; }
#content .subcats a span.catimg { text-align: center; background-repeat: no-repeat; background-position: center center; width: 10%; padding: 40%; display: block; margin: 0.6em 0em; background-size: contain; margin: 3% auto; }
.readmore { display: none; }
.readmorebutton .fa { display: inline; }
.readmorebutton { cursor: pointer; white-space: nowrap; }
#content .readmoreup { display: none; }

/*#endregion*/
#content #cookiecrumb { margin: 0 auto 0; position:relative; text-align: left;  padding: 1em 1em 0; color: #999;  }
#content #cookiecrumb a { color: #666; white-space: nowrap; display: block; background-color: #fff; float: left; padding: 1em; margin-right: 0; }
#content #cookiecrumb a.d1000 { display: none; }
#content #cookiecrumb a:hover { background-color: #47a3da; text-decoration: none; color: #fff; }
#content #cookiecrumb a:hover svg{ fill:#fff;}

/* Product tables */
.startable { break-inside: avoid-column; -webkit-column-break-inside: avoid; }
.startable tr th { background-color: #fff; padding-left: 1em; }
.startable tr.Titles th { text-align: center; width: 20%; background-color: transparent; }

.startable th { vertical-align: middle !important; }
.startable tr td { text-align: center; color: #900; font-size: 1.2em; }
.startable .Titles a { color: #900; }
.startable tr td, .startable tr th { border-bottom: solid 1px #ccc; font-weight: normal; }

.startable svg{fill:#900;}

.plitemblock svg { float:right; font-size:70%; }




@media screen and (min-width:420px) {
    #content .plitem.link { grid-column-start: 1; grid-column-end: 3; }
    #content .productlist .plitem2 { grid-column-start: 1; grid-column-end: 3;  }
}



@media screen and (min-width:625px){
  
    #content .productlist { position: relative; display: grid; grid-template-columns: repeat(auto-fill,minmax(14em, 1fr)); grid-gap: 1em; padding:1em 1em 0; }
    #content .plitem.link { grid-column-start: auto; grid-column-end: auto; }
    #content .plitem .plitemblock { font-size: 1.6em; }
    .plitemblock svg { display: block; margin-top: 2em; clear: both; float: none; }
    #content .plitem.link svg { transform: rotate(-90deg); }
}

@media screen and (min-width:1000px) {

    #content #cookiecrumb span.current { color: #000; white-space: nowrap; display: block; background-color: #fff; float: left; padding: 1em; margin-right: 0; }
    #content #cookiecrumb a.d1000 { display: block; }
    #cookiecrumb .cookiespace { display: block; padding: 0.5em 1em 0.5em 1em; float: left; }
}
