/* 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;overflow:hidden;border-width:0;border-style:solid;margin: 0 15px 30px !important; padding-top: 1rem !important; box-sizing: border-box;float: left;clear: none !important; border-radius: 0px !important; box-shadow: #ccc 0 0 20px; 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;float: left;width: 100%;}
.Product .ProductIntroduction span{white-space: normal !important;}
.Product .ProductIntroduction p {margin: 0;}
/* Title area */
.Product .ProductTitle {font-size: 1.5em;font-weight: 600;margin: 0.4em 0;text-transform: uppercase;}
/* Product image*/
.Product .ProductImageGroupContainer {overflow:hidden;display:table-row;}
.Product .ProductImageContainer {text-align: center;background-color: transparent;width: auto !important;padding-bottom: 0px;box-sizing: content-box;overflow: hidden;}
.pro_wrap_col {margin: auto !important;float: none !important;display: inline-block;z-index: 1;position: relative;background: #fff;height: 100%;text-align: left;}
.ProductIntroduction .pro_list {padding: 0;margin: 0;list-style: none;float: left;width: 100%;text-align: left;}
.ProductIntroduction .pro_list li {margin-bottom: 12px;border-bottom: 1px solid #ccc;padding-bottom: 12px;position: relative;padding-left: 28px;}
.Product .column.full.pro_wrap_col {box-sizing: border-box !important;}
.line_green_col2 {width: 50px;display: block;height: 2px;margin: 15px auto;float: left;margin-top: 0;}
.ProductIntroduction .pro_list li::before {content: '';background: url('../media/check_col.png');background-repeat: no-repeat;width: 20px;height: 20px;position: absolute;left: 0;top: 5px;left: 0;}
.Product .ProductImageContainer > .ImgLink.HasSlider {width:80%;}
.Product .ProductImageContainer > .ThumbnailSliderContainer {width:19%;}
.Product .ProductImageContainer .ProductImageCaption {line-height: 1.3em;margin-bottom: 15px; font-size:0.9em;padding: 4px 0;text-align: center;}
.Product .ProductImageContainer .ProductImageCaptionIcon.Icon {opacity:0.3;}
.Product .NoImage .ProductImage {min-height:130px;}
.Product .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);}
.Product .ProductImage {display:inline-block;margin:0 auto;}
.Product .ProductImage img {max-width:350px;max-height:350px;width:auto;height:auto; margin-top: 0 !important;}
.Product .ProductImage > a > span {display:block!important;}
.Product .ThumbnailSliderContainer {background-color:transparent;}
.Product .ThumbnailSlider .ThumbnailSliderItem {border-width:1px;border-style:solid;}
.Product .ThumbnailSlider {width:auto!important;}
.Product .ProductImageContainer .ProductImageCaptionIcon.Icon{display: none;}
/* Product pricing */
.Product .ProductPriceContainer {min-height:1px;padding:0;display:block;margin:0 0 10px 0;}
.Product .ProductMoreDetails {display: inline-block;font-size: 0.875em;font-weight: bold;padding: 0;margin: 0;line-height: 45px;height: 45px;min-height: 45px;border-style: solid;border-width: 1px;width: 99%;text-align: center;}
.Product .ProductMoreDetails a {color:inherit;background-color:transparent;padding:0 10px;line-height:36px;display:inline-block;}
.Product .ProductPriceOriginal {margin:0.3em 0 0;text-decoration:line-through;font-size:1em;line-height: 20px;display:inline-block;}/* old price */
.Product .ProductPrice {display:inline-block;vertical-align:middle;line-height:1em;font-size:1.875em;font-weight:bold;margin-right:5px; padding:0;} /* current price */
.Product .ProductPriceCalculated {display:inline-block;line-height: 0.9em;font-size: 1.875em;font-weight: bold;margin: 0 0 0.1em 0;padding:0 0 0 10px;} /* discounted price */
.Product .ProductCurrencySymbol {font-size:.7em;vertical-align:baseline;padding-right:3px;}
.Product .ProductPriceOriginal .ProductCurrencySymbol {font-size:1em;}
.Product .ProductPriceOtherInformation {padding:1px 0px;line-height:15px;font-size:0.75em;margin:0 0 20px 0;}
.Product .ProductPriceOtherInformation a{background: transparent;}
.ProductPriceOtherInformation *:empty { display: none; }
.ProductPriceOtherInformation:empty {display:none;}
.ProductPriceOtherInformationPart {display:inline-block;padding:0 3px 0 0;}
.ProductPriceOtherInformationPart * {padding:0 3px 0 0;white-space:nowrap;}
.ProductPriceOtherInformationPart::before {content:"|";margin-right:4px;display:inline-block;}
span.ProductPriceOtherInformationPart::before {content:"";}
.ProductPriceOtherInformationPart:empty + .ProductPriceOtherInformationPart::before {content:"";margin-right:0;display:none;}
:first-child.ProductPriceOtherInformationPart::before {content:"";margin-right:0;display:none;}
.ProductIncTaxes + .ProductWeight::before, .ShippingChargeForProduct + .ProductWeight::before {content:"("!important;display:inline-block!important;margin-right:0;}
.ProductIncTaxes + .ProductWeight::after, .ShippingChargeForProduct + .ProductWeight::after {content:")";}
.ProductPriceOriginal:empty, .ProductPrice:empty, .ProductPriceCalculated:empty  {display:none;}
.Product .ProductPriceIntro {font-size:1em;width:auto;display:inline-block;}
.Product .ProPercentage {display:inline-block;}
.center-content{text-align: center;}
#ProductLoop{max-width: 100%; padding-top: 20px;}
/* Discount */
.Product .ProductContainer1 {padding:5px;display:inline-block;margin:0 0 10px 0;line-height:1;display: none;}
.Product .ProductContainer1 div {vertical-align:middle;display:inline-block;}
#SideBar_R ~ #ProductLoop{width: calc(100% - 200px - 10px) !important;}
#ProductLoop .ProductMoreDetails {border-radius: 0 !important;}
#ProductLoop .Product {padding: 0 !important;box-sizing: border-box !important;box-shadow: none;text-align: center;}
.sf-cb .column.full {padding: 0 !important;}
.sf-cb.clearfix > :not(.column) {margin-right: 0 !important;}
.sf-cb .column {padding-left: 0 !important;padding-right: 0 !important;}




@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: 100% !important;padding: 5px !important;float: none;display: inline-block;width: 85% !important;}
.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: 1em;}
.Product .column.full.pro_wrap_col {padding: 10px 10px !important;} 
.line_green_col2 {margin: 0px auto;}
.ProductIntroduction .pro_list li {margin-bottom: 5px;padding-bottom: 5px;padding-left: 18px;font-size: 0.9em;}    
}
 
@media all and (min-width:320px) and (max-width:767px){
#ProductLoop {text-align: center;margin: auto;max-width: 100%;width: 100% !important;}
.pro_wrap_col {display: block;max-width: 100%;} 
}
@media all and (max-width: 992px){
    #ProductLoop .Product {
        max-width: 49% !important;
        margin: 0 !important;
        width: 49% !important;
        clear: initial !important;
        display: inline-block;
        vertical-align: top;
        margin-bottom: 20px !important;
        box-sizing: border-box;
    }
}

@media all and (max-width: 369px){
    #ProductLoop .Product {
        max-width: 100% !important;
        width: 100% !important;
    }
}


/*
Version tag, please don't remove
$Revision: 46135 $
$HeadURL: svn://localhost/ShopFactory/branches/V14_60/bin/SFXTemplates/ProductLoops/SFX-TS_2/stylesheet.css $
*/