

/* Start:/local/templates/grifon/components/bitrix/catalog.element/.default/style.css?17453933838315*/
.product-card{
	.btn-orange{
		min-width: 280px;
		@media screen and (max-width: 575.98px) {
			font-weight: 800;
		}
	}
	h2{
		font-size: 48px !important;
		margin-left: 10rem !important;
		text-transform: uppercase;
		@media screen and (max-width: 575.98px) {
			font-size: 20px !important;
			margin-left: 0 !important;
		}
	}
	.anounce_section{
		.product-frame{
			padding-left: 120px;
			display: flex;
			flex: 0 0 40%;
			justify-content: end;
			min-height: 280px;
			height: 50vh;
			max-height: 500px;
			background-image: url("/upload/products/Product_frame.svg");
			background-repeat: no-repeat;
			background-size: 100% auto;
			background-position: bottom;
			img{
				max-width: 100%;
				height: 100%;
				padding: 15px;
			}
			@media screen and (max-width: 1399.98px) {
				padding-left: 50px;
			}
			@media screen and (max-width: 767.98px) {
				padding-left: 0px;
			}
			@media screen and (max-width: 575.98px) {
				width: 100%;
				justify-content: center;
			}
		}
		.product_anounce{
			padding-right: 120px;
			font-size: 32px;
			.product_confirm_certificate{
				p{
					color: #5369FA;
					font-size: 40px;
					font-weight: 700;
				}

			}
			@media screen and (max-width: 1399.98px) {
				padding-right: 50px;
			}
			@media screen and (max-width: 767.98px) {
				padding-right: 0px;
			}
			@media screen and (max-width: 575.98px) {
				padding-right: 0px;
				.product_confirm_certificate{
					p{
						font-size: 16px;

					}
				}
			}
		}

	}

	.product_catigories_menu{
		list-style-type: none;
		display: flex;
		flex-direction: column;
		padding-left: 0;
		width: 420px;
		a{
			width: 100%;
			height: 85px;
			padding-left: 36px;
			text-align: start;
			align-content: center;
			border-left: 8px solid #F8F4F2;
			color: black;
			font-size: 24px;
			&.active{
				font-weight: bold;
				border-left: 16px solid #FF5500;
				padding-left: 28px;
			}
		}
	}

	.adventages {
		max-width: 375px;
		width: 100%;
		height: 100%;
		margin-left: 45px;
		display: inline-flex;
		flex-direction: column;
		justify-content: start;
		gap: 25px;

		img {
			width: 55px;
			height: auto;
			margin-right: 15px;
		}

		p {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: clip;
		}
	}
	.product_description_container{
		min-height: 700px;
		@media (prefers-reduced-motion: no-preference) {
			scroll-behavior: smooth;
		}
		.child{
			display: none; /* По умолчанию все блоки скрыты */
			width: 100%;
			height: fit-content;
			background-color: #F8F4F2;
			&.active{
				display: flex; /* Показываем активный блок */
				flex-direction: column;
			}
			article{
				color: transparent;
				padding-top: 60px;
				background-color: white;
			}
			.product_description{
				display: -webkit-flex;
				flex-direction: column;
				padding: 0 40px 40px 40px;
				font-size: 24px;
				table{
					border-radius: 10px;
					tr{
						border-bottom: 1px solid black;
						td{
							border-right: 1px solid black;
						}
					}
				}
				
				b{
					font-weight: bolder;
					font-size: 24px !important;
				}
				span{
					font-size: 24px !important;
					line-height: 144% !important;
				}
				p{
					font-size: 24px;
					line-height: 144%;
					strong{
						font-size: 24px;
					}

				}
				h2{
					padding-top: 25px;
					margin-left: 0 !important;
					font-size: 32px !important;
					text-transform: uppercase;
					font-weight: 700;
				}
				.file_download{
					height: 300px;
					display: flex;
					flex-direction: column;
					justify-content: start;
					align-items: end;

					text-transform: uppercase;
					border-radius: 15px;
					box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.1);
					div{
						width: 100%;
						height: 80%;
						background-image: url("data:image/svg+xml,%3Csvg width='130' height='162' viewBox='0 0 130 162' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.5234 0.167969C8.5001 0.167969 0.335938 8.32405 0.335938 18.3555V143.647C0.335938 153.679 8.5001 161.835 18.5234 161.835H111.482C121.505 161.835 129.669 153.679 129.669 143.647V48.668H87.2318C83.8853 48.668 81.1693 45.952 81.1693 42.6055V0.167969H18.5234ZM93.2943 0.578451V36.543H129.259C128.96 35.7023 128.524 34.9239 127.885 34.2853L95.5519 1.95199C94.9133 1.3134 94.1269 0.877534 93.2943 0.578451ZM38.7318 72.918H91.2734C94.6199 72.918 97.3359 75.634 97.3359 78.9805C97.3359 82.327 94.6199 85.043 91.2734 85.043H38.7318C35.3853 85.043 32.6693 82.327 32.6693 78.9805C32.6693 75.634 35.3853 72.918 38.7318 72.918ZM38.7318 97.168H91.2734C94.6199 97.168 97.3359 99.884 97.3359 103.23C97.3359 106.577 94.6199 109.293 91.2734 109.293H38.7318C35.3853 109.293 32.6693 106.577 32.6693 103.23C32.6693 99.884 35.3853 97.168 38.7318 97.168ZM38.7318 121.418H75.1068C78.4533 121.418 81.1693 124.134 81.1693 127.48C81.1693 130.827 78.4533 133.543 75.1068 133.543H38.7318C35.3853 133.543 32.6693 130.827 32.6693 127.48C32.6693 124.134 35.3853 121.418 38.7318 121.418Z' fill='%235369FA'/%3E%3C/svg%3E");
						background-size: 130px 162px;
						background-repeat: no-repeat;
						background-position: center;
					}
					a{
						padding: 12px;
						font-size: 14px;
						width: 100%;
						color: black;
					}
				}
				.sertificate{
					height: 100%;
					display: flex;
					flex-direction: column;
					padding: 2rem;
					box-shadow: 0 0px 5px 8px rgba(0, 0, 0, 0.1);
					border-radius: 15px;
					border: solid 1px white;
					background-color: white;
					canvas{
						width: 100% !important;
						height: 90% !important;
						max-height: 90%;
					}
					div{
						width: 100%;
						height:10%;
						font-size: 14px;
					}
				}
			}
		}
	}
	@media screen and (max-width: 575.98px){
		padding-top: 0;
		.product_catigories_menu{
			margin-top: 5rem;
			padding-left: 30px;
			width: 100%;
			-moz-appearance: none;
			-webkit-appearance: none;
			appearance: none;
			background-repeat: no-repeat;
			background-position: 97% 50%;
			background-size: 20px auto;
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
			option{
				text-align: left;
				align-content: start;
			}
			&.btn-orange:hover{
				background-repeat: no-repeat;
				background-position: 97% 50%;
				background-size: 20px auto;
				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
				box-shadow: none;
			}
		}
		.product_description_container{
			background-color: #F8F4F2;
			height: auto; /* Убираем фиксированную высоту */
			min-height: 100px; /* Минимальная высота, если нужно */
			display: flex;
			flex-direction: column; /* Элементы располагаются вертикально */
			scroll-behavior: auto;
			margin-left: -1.5rem;
			margin-right: -1.5rem;
			position: relative;
			overflow: hidden;
			.child {
				display: none; /* По умолчанию все блоки скрыты */
				width: 100%;
				&.active{
					display: block; /* Показываем активный блок */
				}
				article{
					color: transparent;
					padding-top: 40px;
					background-color: white;
					border-bottom-left-radius: 25px;
					border-bottom-right-radius: 25px;
					box-shadow: 0px 3px 15px 3px rgba(0, 0, 0, 0.1);
				}
				.product_description{
					background-color: #F8F4F2;
					padding: 0px 1.5rem 40px 1.5rem;
					.sertificate{
						padding: 0.5rem;


						canvas{
							width: 100% !important;
							height: 70% !important;
							max-height: 90%;
						}
						div{
							width: 100%;
							height:30%;
							font-size: 14px;
						}
					}
				}
			}
		}
	}
}

.row{
	margin-left: 0 !important;
	margin-right: 0 !important;
}
#tr_PROPERTY_19{
	.adm-detail-valign-top.adm-detail-content-cell-l{
		
	}
	.adm-detail-content-cell-r{
		
	}
}
/* End */


/* Start:/local/templates/grifon/components/bitrix/catalog.section/elem_bottom_sections/style.css?17441933952309*/
.catalog-section{
    .product-item-small-card{
        width: 18% !important;
        display: block;
    }
    .product__card {
        border: 1px solid #eee;
        border-radius: 8px;
        background-color: white;
        box-shadow: lightgray 0px 0px 13px 0px;
        overflow: hidden;
        transition: all 0.3s ease;
        height: -webkit-fill-available !important;
        display: flex;
        margin-bottom: 20px;
        flex-direction: column;

    }
    @media screen and (max-width: 575.98px) {
        .product-item-small-card{
            flex-basis: 47%;
        }
        .product-item-small-card:nth-child(n+3) {
            display: none;
        }
    }


    .product__card:hover {
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }

    .product-card__image {
        position: relative;
        padding-top: 75%;
        overflow: hidden;
    }

    .product-card__image img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }

    .product__card:hover .product-card__image img {
        transform: scale(1.05);
    }
    .product-card__body {
        padding: 15px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

    .product-card__title {
        font-size: 16px;
        margin-bottom: 10px;
        font-weight: 600;
    }

    .product-card__title a {
        color: inherit;
        text-decoration: none;
    }

    .product-card__title a:hover {
        color: #0066cc;
    }

    .product-card__preview {
        font-size: 14px;
        color: #666;
        margin-bottom: 15px;
        -webkit-line-clamp: 2; /* number of lines to show */
        line-clamp: 2;
        flex-grow: 1;
    }

    .product-card__buttons {
        display: flex;
        gap: 10px;
    }

    .product-card__buttons .btn {
        flex: 1;
        white-space: nowrap;
        padding: 8px 10px;
        font-size: 14px;
    }

    .btn-buy {
        background-color: #ff5722;
        border-color: #ff5722;
    }

    .btn-buy:hover {
        background-color: #e64a19;
        border-color: #e64a19;
    }
}

/* End */


/* Start:/local/templates/grifon/components/bitrix/catalog.item/In_bottom_of_detail/style.css?17443565633795*/
.product__card {
    border: 1px solid #eee;
    margin: 10px;
    border-radius: 8px;
    background-color: white;
    box-shadow: lightgray 0px 0px 13px 0px;
    overflow: hidden;
    transition: all 0.3s ease;
    height: -webkit-fill-available !important;
    display: flex;
    flex-direction: column;

    .product__card:hover {
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    .image {
        position: relative;
        padding-top: 75%;
        overflow: hidden;

        img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
            transition: transform 0.3s ease;
        }

        img:hover {
            transform: scale(1.05);
        }
    }

    .product-card__body {
        padding: 15px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        height: -webkit-fill-available !important;
    }

    .product-card__title {
        font-size: 24px;
        margin-bottom: 10px;
        font-weight: 600;
        min-height: 55px;
    }

    .product-card__title a {
        color: inherit;
        text-decoration: none;
    }

    .product-card__title a:hover {
        color: #0066cc;
    }

    .product-card__preview {
        font-size: 14px;
        color: #666;
        margin-bottom: 15px;
        display: -webkit-inline-box;
        -webkit-line-clamp: 2; /* number of lines to show */
        line-clamp: 2;
        text-overflow: ellipsis;
        word-break: break-word;
        flex-grow: 1;
    }

    .product-card__buttons {
        display: flex;
        gap: 10px;
    }

    .product-card__buttons .btn {
        flex: 1;
        white-space: nowrap;
        padding: 8px 10px;
        font-size: 14px;
    }

    @media screen and (max-width: 575.98px) {
        margin: 3px;

        .product__card:hover {
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .image {
            position: relative;
            padding-top: 75%;
            overflow: hidden;

            img {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                object-fit: contain;
                transition: transform 0.3s ease;
            }

            img:hover {
                transform: scale(1.05);
            }
        }

        .product-card__body {
            padding: 12px;
        }

        .product-card__title {
            font-size: 13px;
            margin-bottom: 10px;
            font-weight: 600;
        }

        .product-card__title a {
            color: inherit;
            text-decoration: none;
        }

        .product-card__title a:hover {
            color: #0066cc;
        }

        .product-card__preview {
            font-size: 10px;
            color: #666;
            margin-bottom: 15px;
            display: -webkit-inline-box;
            -webkit-line-clamp: 2; /* number of lines to show */
            line-clamp: 2;
            text-overflow: ellipsis;
            word-break: break-word;
            flex-grow: 1;
        }

        .product-card__buttons {
            display: flex;
            gap: normal;
            justify-content: space-between;
        }

        .product-card__buttons .btn {
            white-space: nowrap;
            padding: 4px !important;
            margin: 2px;
            width: fit-content !important;
            font-size: 10px;
        }
        .btn + .btn{
            margin-right: 0;
            margin-left: 5px;
        }

    }
}
/* End */
/* /local/templates/grifon/components/bitrix/catalog.element/.default/style.css?17453933838315 */
/* /local/templates/grifon/components/bitrix/catalog.section/elem_bottom_sections/style.css?17441933952309 */
/* /local/templates/grifon/components/bitrix/catalog.item/In_bottom_of_detail/style.css?17443565633795 */
