/* variables */
/* item */
.product-item {--transformX:40%;--height:310px;--headerTop:35px;--logoLeft: 15px;--logoBottom: 8px; --logoWidth: 90px;--logoHeight: 50px;--btnHeight:50px;--fz:2.5rem}
/* small item */
.product-item.product-item-small {--height:220px;--transformX:20%;--headerTop:20px;--logoLeft: 10px;--logoBottom: 10px; --logoWidth: 70px;--logoHeight: 25px;--btnHeight:40px;--fz:2rem}
/*  */
.product-item {height:var(--height);border-bottom: 3px solid var(--color-line);background-color: #F4F6F9;background-image: linear-gradient(180deg, #F5F7FA 0%, #F3F5F9 15%, #EAEBF0 57%, #E3E4E8 60%, rgba(231, 233, 237, 1) 71%, #EDF0F5 100%);transition: 0.5s}
.product-header{top:var(--headerTop);right: 85%;z-index: 5;transition:.5s;font-size:var(--fz)}
.product-header span{white-space: nowrap}
.product-old-price {color: #4a4a4a}
.product-old-price + div {position:relative;z-index:5}
.product-grey {color: #333}
.product-btn {height: var(--btnHeight);text-shadow: none;line-height: 100%;border-radius: 0}
.product-img {position: absolute;left: 5%;bottom: 50%;max-width: 50%;transform: translate(var(--transformX),55%);z-index: 4;filter: drop-shadow(2px 4px 10px rgba(0, 0, 0, 0.4));height: 90%;transition: 1s;object-fit: contain}
.product-item .product-img {	max-width:56%; height: 100%; left:-8%; bottom:55%}
.product-item-small .product-img {	max-width:50%; height: 100%; left:3%; bottom:50%}
/* RED PROMO LABEL */
.product-label {width: 120px;height: 120px;z-index: 6}
.product-promo {top: 20px;right: -64px;z-index: 2;font-size:0.625rem;padding: 5px 0;width: 190px;transform: rotate(45deg)}
/* alutech logo */
.product-logo {bottom: var(--logoBottom);left: var(--logoLeft);width: var(--logoWidth);height: var(--logoHeight); background: url('/image/sectional_doors/alutech-logo.svg') center/100% no-repeat;z-index: 2;border-radius: 5px}
/* ZOOM Thickness BLOCK */
.product-thickness {left: -85%;top: 50%;z-index: 5}
.product-thickness:after,.product-thickness:before{content: '';position: absolute;background-color: #BABABA;top: 50%;transform: translateY(-50%);z-index: 2}
.product-thickness:after {width: 85px;height: 1px;left: 58px;}
.product-thickness:before {width: 8px;height: 8px;left: 140px;border-radius: 50%}
.product-zoom {width: 58px;height: 58px}
.product-zoom strong {transform: translateY(10px);font-size: 9px;font-weight: 700;z-index: 4;text-shadow: none}
.product-zoom svg {fill: none}
/* MEDIA */
.product-btn {font-size: 0.94rem}
.product-btn-sm{font-size: 0.94rem}
@media (min-width: 360px) {
	.product-btn {font-size: 1.0625rem}
	.product-btn-sm{font-size: 1.0625rem}
}
@media screen and (max-width: 1200px) {
		.product-item {--transformX:30%}
		.product-item.product-item-small {--transformX:18%}
}
@media screen and (max-width: 992px) {
		.product-item {--transformX:20%}
}
@media screen and (max-width: 768px) {
		.product-item {--transformX:30%;--btnHeight:40px; height:275px}
		.product-item .product-img {max-width:55%; height: 100%; left:0; bottom:55%}
}
@media screen and (max-width: 576px) {
	.product-item {--transformX:30%;--btnHeight:auto; height:275px}
	.product-item .product-img {max-width:50%; height: 90%; left:0; bottom:50%}
	.product-details{background: linear-gradient(90deg, rgba(250,250,250,0) 0%, rgba(250,250,250,0.7) 25%, rgba(250,250,250,0) 100%);z-index:5}
}
@media screen and (min-width: 992px) {
	.product-btn {font-size: 1.0625rem}
	.product-btn-sm{font-size: 0.95rem}
	/* hover */
	.product-item:hover .product-btn {transition: .3s;filter: brightness(1.1);cursor: pointer;color: #FFF;text-decoration: none}
	.product-item:hover .product-img{transform: translate(var(--transformX),55%) scale(1.03);transition: 1s}
	.product-item-big .product-promo {top:40px; right:-40px; width:200px; }
	.product-item-big .product-label {width: 160px;	height: 160px;}
}
@media screen and (max-width: 1200px) {
		.product-item{--fz:calc(1.375rem + 1.5vw)}
		.product-item.product-item-small{--fz:calc(1.325rem + .9vw)}
}
/* OFF STYLES */
.product-item .product-btn{filter:;pointer-events: none;background: rgba(100,100,100,.4)!important;border:none!important}
.product-item:hover .product-btn{background: rgba(100,100,100,.4)!important}
.product-item:hover{cursor: not-allowed}
.bg-disabled{background: rgba(100,100,100,.4)}