﻿/*#region Product details*/

#productbuy{ }
#productimages{  }
#productinfo { }
#productratingtop{ cursor:pointer; height:2.5em; line-height: 1.5em; }
#prodflex .col {
    padding: 1em;
    box-sizing: border-box;
    background-color: white;
    margin-bottom: 1em;
   
}
.maxqty { padding: 0.5em 0.5em; background: #f3ca00; margin: 1em 0; font-size: 1.2em; line-height: 130%; text-decoration: none; text-align: center; }

#productbuy, #productinfo, #productimages { float: none; width: auto; margin: 2em 0 0em; padding: 0; }

/* Read More for long descriptions */
.proddescription { max-height: 320px; overflow: hidden; transition: max-height 0.3s ease; }
.proddescription.expanded { max-height: none; }
/* Optional fade-out effect at bottom */
.proddescription::after { content: ""; position: absolute; bottom: 2.2em; /* Height of the button */ left: 0; right: 0; height: 3em;  pointer-events: none; display: block; }

.proddescription.expanded::after { display: none; }

#content a.buttons.toggle-description { display:none; }


@media screen and (min-width:600px) {

    #productbuy, #productinfo, #productimages { margin: 0; }

    #prodflex { display: -webkit-flex; display: -ms-flexbox; display: flex; overflow: hidden; flex-wrap: wrap; display: flex; flex-direction: row; }
   
    #prodflex .col { flex: 1 1 250px; padding: 1em; box-sizing: border-box; background-color: white; }
    #prodflex .col:nth-child(1) { order: 0; margin: 0 1em 1em 0;  }
        #prodflex .col:nth-child(2) {   }
    #prodflex .col:nth-child(3) { margin-bottom: 0em; }
    .productddls { padding: 0em 0 0; }
}

@media screen and (min-width:800px) {
    #prodflex { display: -webkit-flex; display: -ms-flexbox; display: flex; overflow: hidden; flex-wrap: wrap; display: flex; flex-direction: row; }
        #prodflex .col { flex: 1; }
        #prodflex .col { flex: 1 1 350px; padding: 1em; box-sizing: border-box; background-color: white; }
    .productddls { padding: 0em 0 0; }
}

@media screen and (min-width:1000px) {
    #prodflex .col { flex: 1; margin-bottom:0; background-color: white; }
        #prodflex .col:nth-child(1) { order: 0; margin-bottom: 0; }
        #prodflex .col:nth-child(2) { order: 2;  padding: 1em; }
        #prodflex .col:nth-child(3) { order: 1; margin-right: 1em; padding: 1em; flex: 1; }
    .productddls { padding: 0em 0 0; }
}

@media screen and (max-width: 600px) {
    
}

#productimages .responsive-container { position: relative; width: 100%; border: 0px solid #ccc; margin-bottom:10px; float:left;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;    box-sizing: border-box; cursor:zoom-in;}
#productimages .dummy { padding-top: 80%; /* forces 1:1 aspect ratio */  }
#productimages .img-container { position: absolute; top: 0; bottom: 0; left: 0; right: 0; text-align: center; /* Align center inline elements */ font: 0/0 a;background-color:#fff; }
#productimages .img-container .centerer { display: inline-block; vertical-align: middle; height: 100%;  }
#productimages .img-container img { vertical-align: middle; display: inline-block; max-height: 100%; height:auto; /* <-- Set maximum height to 100% of its parent */ max-width: 100%; /* <-- Set maximum width to 100% of its parent */ }

#productimages .smallerimages{width:95%; clear:both;}
#productimages .smallerimage { padding: 8.4%; background-position: center center; background-repeat: no-repeat; float: left; margin-right: 2%; margin-bottom: 2%; border: 1px solid #ccc; -webkit-background-size: contain; -ms-behavior: url(/css/backgroundsize.min.htc); -moz-background-size: contain; -o-background-size: contain; background-size: contain; background-color: white; cursor: pointer;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;    box-sizing: border-box;	 }
#productimages .smallerimageselected{ border-color:#999;}

#content  #price{ font-size:1.7em ; text-align:right; }
#content #productbuy .productddls {  }
#content #productbuy .productddls select { width: 100%; margin: 0.3em 0; padding: 0.3em 0.3em; }
#productbuy .plpricearea{ float:right; }
#productbuy .productcodestock{   height:4em; float:left;  }
#content #productbuy.plitem .plcode { float: left; width: auto; text-align: right; margin-bottom:0; font-weight:bold; }
#content #productbuy.plitem .plstock { float: left; width: auto; text-align: right; clear: left; margin-bottom: 0; }
#content #productbuy .plrealprice{ display:block; float:right}
#content #productbuy .wasprice{ display:block; float:right;}
#content #productbuy.plitem .buyremove { clear: both; display:block; }
#content .stockerror { color: #c00; font-weight: 500; }
#productbuy .productcodestock div, #productbuy .unitarea {  padding:0.3em 0; display:block; }

#productbuy .productddls div.opt { float: left; padding: 0.6em 1em; background-color: #fff; border: 1px solid #ccc; color: #333; margin: 0 0.5em 0.5em 0; text-decoration: none; user-select: none; cursor: pointer; }
#productbuy .productddls div.opt.enabled{}
#productbuy .productddls div.opt.disabled { background: #ccc; color: #666; border-color:#ccc; }
#productbuy .productddls div.opt.disabledselected { background: #666; color: #ddd; border-color: #666; }
#productbuy .productddls div.opt.selected { background-color: #47a3da; border-color: #47a3da; color: #fff; text-decoration: none; }

#productbuy .productcodestock div { margin-bottom: 0.5em; }
#content .ProductImageSingle{ border:solid 1px #666666;}
#content .ProductFiles{ clear:both; padding-top:10px; float:left; margin-bottom:30px;}

#content #productbuy.plitemadded input[type="submit"]{ display:none;}
#productbuy input[type="text"].quantity{ width:2em; border:none; height:1.5em; text-align:center; padding:0.3em 0.5em; background-color:white;outline: none; }

#socialshare{ padding:1em 0px 1em;}
#socialshare a{ font-size:1.7em; color:#fff; display:block; width:1.2em; height:1.2em; line-height:1.3em; text-align:center; font-weight:normal; float:right; margin-right:0.2em;}
#socialshare a.facebook svg{ fill:#3b5998;}
#socialshare a.twitter svg{ fill:#00aced;}

#socialshare a.googleplus{background-color:#990000;}

#socialshare a.facebook:hover svg{fill:#900;  }
#socialshare a.twitter:hover svg{ fill:#900;}
#socialshare .share{font-size:1.7em; height:1.2em; line-height:1.25em; padding:0 0.5em; float:left; background-color:#999; color:white;margin-right:0.2em;}

.fb-like.fb_iframe_widget span{ top:-1px;}

#content #productbuy .buyremove{ margin:0.4em 0px; float:right;}
#content #productinfo .favourite { cursor:pointer; padding-left:0em; float:left; display:block; line-height:2em; padding-right:2em;}
#content #productinfo .favourite span:hover{ color:#900;}
#content #productinfo .favourite svg { font-size: 1.4em; fill: #900; float: left; padding: 0.2em 0 0 0; }
#content #productinfo .favourite span{ font-size:1.1em; display:block; float:left; padding:0.1em 0 0 0.5em;}

#content ul.productdownloads{ margin:0px; padding:0px;}
#content ul li.filetypepdf{ list-style: none; background: url(https://cdn.hygienedepot.co.uk/hd/pdf.gif) no-repeat top left; padding: 1px 0px 10px 24px; margin: 0px 0px 10px 0px; }

#productinfo h3{ margin-top:40px;}
#content #productinfo h2{ margin:0 0 0.8em; line-height:140%;}

.productreviews{background-color:white; padding:0 1em; }
.productreviews .swiper-button-next svg, .productreviews .swiper-button-prev svg { fill: #666; }
.showreplies{font-weight:bold; cursor:pointer;}
.reviewreplies{display:none; color:#000;}
.showreplies .hidebtn{display:none;}


*.unselectable {  -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none;}

#content #productinbasketcount{ margin:1em 0 1em;}
#content #productinbasketcount a { padding: 0.5em 0.5em; background: #47a3da; color: #fff; text-align: center; display: block; text-decoration: none; text-decoration: none; }
#content p.subtitle{font-size:1.2em; color:#900; margin:0.5em 0 0; margin:0;}


#stocknotification { background-color: #eee; padding: 1em; }
#stocknotification input, #stocknotification button { width: 100%; float: none; margin-bottom: 1em; box-sizing: border-box; }
#stocknotificationtitle { background-color: #666; color: #eee; font-size: 1.4em; padding: 0.5em; text-align: center; }
/*#endregion*/
