/* Prepend .Product selector to override the rules in the Block Editor stylesheet. It will still work in Customise Design. */

#ProductLoop {clear:both;}

/* Major elements */
.Product {position:relative;border-width:0;border-style:solid;margin: 0 15px 30px !important; padding-top: 0.5rem !important; box-sizing: border-box;float: left;clear: none !important;transition: all 0.2s ease-in-out;
-moz-transition: 0.15s cubic-bezier(0.88, 0.04, 0.43, 0.33);
    -webkit-transition: 0.15s cubic-bezier(0.88, 0.04, 0.43, 0.33);
    -o-transition: 0.15s cubic-bezier(0.88, 0.04, 0.43, 0.33);
    -ms-transition: 0.15s cubic-bezier(0.88, 0.04, 0.43, 0.33);
    transition: 0.15s cubic-bezier(0.88, 0.04, 0.43, 0.33);
    -moz-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0)
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.Product:hover{-moz-transform: translate3d(0, -10px, 0);
    -webkit-transform: translate3d(0, -10px, 0);
    -o-transform: translate3d(0, -10px, 0);
    -ms-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0); }
.Product .ProductIntroduction {margin:0 0 20px 0;font-size:1em;}
.Product .ProductIntroduction span{white-space: normal !important;}
.Product .ProductIntroduction p {margin: 0;}

/* Dimensions */
.Product {}
.Product a[href] {overflow:hidden;}
.ProductImageGroupContainer, .ProductImage {} 
/* Layout */
.Product {position:relative;float:left;clear:none ! important;margin:0px 8px 15px 8px;position:relative;text-align:left;}
.ProductImageGroupContainer {overflow:hidden;display:table-row;}
.ProductImageContainer {width:auto!important;margin:0 0 15px 0;}
.ProductImageContainer > * {position:relative;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);}
.ProductImageContainer .ImgLink {float:none!important;}
.ProductImage {position:relative;vertical-align:top;text-align:center;}
.ProductImage img {position:relative;border:0;margin:0 auto;display:block;}
.NoImage .ProductImage {min-height:130px;}
.NoImage .ProductImage [class^='icon-'] {min-height:1px;vertical-align:middle;position:absolute;margin-left:-12px;left:50%;margin-top:-12px;top:50%;opacity:0.3;filter:alpha(opacity=30);}
 .ProductImageCaptionIcons {height:18px;}
 .ProductImageCaptionIcons div {display:inline;float:right;}
 .ProductImageCaption {line-height:12px;font-size:0.625em;padding:2px;}
 .ProductImageCaptionIcon.Icon {opacity:0.3;filter:alpha(opacity=30);}
/* Product options */
.ProductOptionInner{max-height: 200px;overflow-y: auto;}
.ProductOptionName {color: #888;font-size: .875em; border-bottom: 1px solid #888; display: inline-block; }
.ProductChoiceName select {display: none;}
.ProductChoiceName {width: 100% !important;color: #888 !important;font-size: .875em;}
.ProductChoiceName label div {color: #f00;background: #ff0; padding: 0px 4px; font-weight: bold;}
/* More details */
.ProductMoreDetails {}
.ProductMoreDetails a {}
/* Discount */
.ProductContainer1{position:absolute;z-index:100;font-size:0.875em;font-weight:bold;right:-5px;top:12px;padding:2px 8px;-webkit-box-shadow:0px 1px 4px 0px rgba(50,50,50,0.5);-moz-box-shadow:0px 1px 4px 0px rgba(50,50,50,0.5);box-shadow:0px 1px 4px 0px rgba(50,50,50,0.5);color: #f00;background: #ff0;}
.Product .ProductContainer1 div {vertical-align:middle;display:inline-block;color: red;} 
/* Product title */
.ProductTitle {font-size:1em;position:relative;overflow:hidden;padding:5px 0;margin:0;text-align:left;font-weight:bold;line-height:1.25em;overflow:hidden;}
.ProductIntroduction {font-size:1em;padding:0;text-align:left;font-weight:normal;overflow:hidden;} 
.ProductNumber {position:relative;overflow:hidden;padding:3px 0;text-align:left;} 
/* Product pricing */
.ProductPriceContainer {position:relative;min-height:1px;padding:0 8px;overflow:hidden;vertical-align:bottom;text-align: right;}
.ProductContainer2 {min-height:1px;vertical-align:bottom;padding:0 8px 8px 8px;}
a.isParagraph ~ #ProductContainer2 {width:100%;border:none;}
.Product .ProductContainer2 .ProductIcons + .ProductMoreDetails {position:static;float:left;} 
.ProductPriceOriginal {margin-right:5px;font-size:0.8125em;display:inline-block;color: #6F6F6F;}/* old price */
.ProductPriceOriginal span:not(.ProductPriceOtherInformation) {text-decoration:line-through;}
.ProductPrice {clear:left;font-size:1.25em;font-weight:bold;margin-right:5px;display:inline-block;} /* current price */
.ProductPrice > span:not(.ProductPriceOtherInformation):not(:empty), .ProductPriceCalculated:not(:empty) {font-size:20px;font-weight:bold;display:inline-block;color: #f00 !important;background: #ff0;padding: 2px 8px;} /* discounted price */
.ProductCurrencySymbol {font-size:.7em;vertical-align:baseline;padding-right:3px;}
.ProductPriceOriginal .ProductCurrencySymbol {font-size:1em;}
.ProductPriceOtherInformation {line-height:1.5em;font-size:0.6875em;margin:3px 0 5px 0;display:inline;color: #6f6f6f;}
.ProductPriceOtherInformation *:empty {display:none;}
.ProductPriceOtherInformationPart * {white-space:nowrap;}
.ProductPriceOtherInformationPart::before {content:"|";margin-right:4px;display:inline;}
:nth-of-type(1).ProductPriceOtherInformationPart::before {content:"";display:none;}
.ProductPriceOtherInformation .ProductIncTaxes {display:inline-block;}
.ProductPriceOtherInformation .ProductIncTaxes:empty {display:none;}
.ProductPriceOtherInformation .ProductPriceTax {clear:left;display:block;}
.ProductIncTaxes + .ProductWeight::before, .ShippingChargeForProduct + .ProductWeight::before {content:"("!important;display:inline-block!important;margin-right:0;}
.ProductIncTaxes + .ProductWeight::after, .ShippingChargeForProduct + .ProductWeight::after {content:")";}
.ProductDiscountMessage {font-weight:normal;margin:5px 10px;padding:2px;}
.ProductPriceOriginal:empty, .ProductPrice:empty, .ProductPriceCalculated:empty  {display:none;} 
.ProductStockContainer{padding: 5px 0; float: left;list-style: none;}
.ProductStockTlight {display:none;float:left;margin-right:3px;margin-top: 5px;}
.ProductStockTlight > span {display:block;float:left;height:10px;width:17px;margin:0px 2px 0px 0px;border-radius:2px;border-width:1px;border-style:solid;}
.ProductStockTlight > span > span {display:block;height:8px;width:15px;margin:1px;border-radius:2px;}
.ProductStockTlight1 span {background-color:#65B00F;background:-webkit-gradient(linear, left top, left bottom, from(#65b00f), to(#006837));background:-moz-linear-gradient(top,#65b00f,#006837);background:-ms-linear-gradient(top,#65b00f,#006837);background:linear-gradient(top,#65b00f,#006837);}
.ProductStockTlight2 span {background-color:#ff7733;background:-webkit-gradient(linear, left top, left bottom, from(#ff7733), to(#ed4f00));background:-moz-linear-gradient(top,#ff7733,#ed4f00);background:-ms-linear-gradient(top,#ff7733,#ed4f00);background:linear-gradient(top,#ff7733,#006837);}
.ProductStockTlight3 span {background-color:#ff0000;background:-webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#b00000));background:-moz-linear-gradient(top,#ff0000,#b00000);background:-ms-linear-gradient(top,#ff0000,#b00000);background:linear-gradient(top,#ff0000,#b00000);}
.AvailabilityText{float: left; padding-right: 10px;}
/* Buttons */
.ProductContainer3 {padding:0 8px 8px;height: auto !important;}
.QntyBox input {font-size:0.9375em;}
.ProductQuantityUnit {font-size:.75em;}
.AddToBasketQnty {border-width:1px;border-style:solid;clear: left;}
.AddToBasketButton {width: 200px;}
.AddToBasketButton .ImgLink [class^='icon-'] {font-size:1.2em;}
.AddToBasketButton .ImgLink span {vertical-align: -4px;}
.FavoritesButton {font-size:1em;font-weight:bold;border-style:solid;border-width:1px;} 
#ProductLoopInner{overflow:hidden;margin:0 auto!important;padding:0 5px;box-sizing:border-box;float:none;}

@media all and (min-width:965px) and (max-width:1240px){
}
@media all and (min-width:768px) and (max-width:964px){
}
@media all and (max-width:964px){
    #SideBar_R ~ #ProductLoop{width: 100% !important;}
}
@media all and (max-width:768px){
	body {font-size: 100%;}
	.Product {width:100%;margin:10px auto;padding:0 10px;}
	.ProductPriceOtherInformation {font-size: 1em;}
	.ThemeVersion-11 .ImgLink{margin: 0 auto;}
}

@media all and (max-width: 480px){
}

@media all and (min-width:320px) and (max-width:505px){
#ProductLoop {text-align: center;}
#ProductLoop .Product {margin: 5px !important;max-width: 45% !important;padding: 5px !important;float: none;display: inline-block;}
.Product .ProductTitle {font-size: 1.1em;}
.Product .ProductPrice {font-size: 1.075em;}
.Product .ProductImageContainer {padding-bottom: 10px;}
}
@media all and (min-width:506px) and (max-width:767px){
#ProductLoop {text-align: center;}
#ProductLoop .Product {margin: 10px !important;max-width: 50% !important;
	padding: 10px !important;
	display: inline-block;
	width: 45% !important;
    float: none;
}
.Product .ProductTitle {font-size: 1.3em;}
.Product .ProductPrice {font-size: 1.375em;}
.Product .ProductImageContainer {padding-bottom: 10px;}
}
@media all and (min-width:768px) and (max-width:964px){
.Product .ProductTitle {font-size: 1.3em;}
}
 
@media all and (min-width:320px) and (max-width:767px){
#ProductLoop {
	text-align: center;
	margin: auto;
	max-width: 100%;
	width: 100% !important;
}
.ProductImageContainer {
	margin: 0px 0px 15px 0px;
}    
}
@media (max-width: 414px){
    #ProductLoop .Product {
        margin: 0 auto 30px auto !important;
        width: 90% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        float: none;
    }
}


/*
Version tag, please don't remove
$Revision: 44618 $
$HeadURL: svn://3d3-p432/ShopFactory/branches/V14_50/bin/SFXTemplates/ProductLoops/SFX-BASE_4/stylesheet.css $
*/