/* products */
.products-list {
	display: flex;
	flex-direction: column;
	gap: 40px 0;
}
.products-item__title {
	margin-bottom: 7px;
	padding: 0;
}

/* product components */
.product-components {
	display: flex;
	flex-direction: column;
	gap: 30px 0;
}
.product-components * {
	box-sizing: border-box;
}
.product-component {
	padding: 20px;
	border: 1px solid transparent;
	border-radius: 4px;
}
.product-component h1,
.product-component h2,
.product-component h3,
.product-component h4,
.product-component h5,
.product-component h6 {
	font-weight: 600;
}
.product-component.has-bg-white {
	border-color: #f69f1a;
}
.product-component.has-bg-gray {
	background-color: #f1f1f1;
}
.product-component.has-bg-orange {
	background-color: #f69f1a;
	color: #fff;
}
.product-component.has-bg-orange .component__title,
.product-component.has-bg-orange a,
.product-component.has-bg-orange h1,
.product-component.has-bg-orange h2,
.product-component.has-bg-orange h3,
.product-component.has-bg-orange h4,
.product-component.has-bg-orange h5,
.product-component.has-bg-orange h6 {
	color: #fff;
}
.product-component .component__title {
	margin: 0 0 15px 0;
	padding: 0;
	color: #222;
}
.product-component .component__text > *:last-child {
	margin-bottom: 0;
}
.product-component .component__inside {
	display: flex;
	gap: 20px 20px;
}

/* image left/right */
.product-component.product-component--image-left .component__image,
.product-component.product-component--image-right .component__image {
	display: flex;
	flex-shrink: 0;
	width: 250px;
	margin-bottom: auto;
}
.product-component.product-component--image-left .component__content,
.product-component.product-component--image-right .component__content {
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	gap: 20px 0;
	width: 100%;
}
.product-component.product-component--image-left .component__title,
.product-component.product-component--image-right .component__title {
	margin: 0;
	padding: 0;
}
.product-component.product-component--image-right .component__image {
	order: 10;
}

/* boxes */
.product-component.product-component--boxes {
	padding: 0;
	background-color: transparent;
	border: 0;
}
.product-component.product-component--boxes .component__inside {
	flex-wrap: wrap;
}
.product-component.product-component--boxes .component__item {
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	gap: 10px 0;
	width: calc(50% - 10px);
	padding: 15px;
	border: 1px solid transparent;
	border-radius: 4px;
}
.product-component.product-component--boxes.has-bg-white .component__item {
	border-color: #f69f1a;
}
.product-component.product-component--boxes.has-bg-gray .component__item {
	background-color: #f1f1f1;
}
.product-component.product-component--boxes.has-bg-orange .component__item {
	background-color: #f69f1a;
	color: #fff;
}
.product-component.product-component--boxes.has-bg-orange .component__title {
	color: #000;
}
.product-component.product-component--boxes.has-bg-orange .component__item,
.product-component.product-component--boxes.has-bg-orange .component__item a,
.product-component.product-component--boxes.has-bg-orange .component__item h1,
.product-component.product-component--boxes.has-bg-orange .component__item h2,
.product-component.product-component--boxes.has-bg-orange .component__item h3,
.product-component.product-component--boxes.has-bg-orange .component__item h4,
.product-component.product-component--boxes.has-bg-orange .component__item h5,
.product-component.product-component--boxes.has-bg-orange .component__item h6 {
	color: #fff;
}
.product-component.product-component--boxes.has-bg-orange .component__item .btn {
	background-color: #fff;
	border: 0;
	color: #f69f1a;
}
.product-component.product-component--boxes .component__label {
	margin: 0;
	padding: 0;
}
.product-component.product-component--boxes .component__text + .btn {
	margin-top: auto;
}

/* quote */
.product-component.product-component--quote {
	padding: 20px 0;
	border: 0;
}
.product-component.product-component--quote .component__text {
	margin-bottom: 20px;
	padding: 0 60px 20px 60px;
	position: relative;
	font-size: 140%;
	font-style: italic;
	line-height: 140%;
}
.product-component.product-component--quote .component__text:before,
.product-component.product-component--quote .component__text:after {
	content: '';
	display: block;
	width: 30px;
	height: 30px;
	position: absolute;
	bottom: 0;
	left: 0;
	background: url('../images/icon-quote.png') no-repeat 50% 50%;
	background-size: 100% auto;
}
.product-component.product-component--quote .component__text:after {
	top: 0;
	right: 0;
	bottom: auto;
	left: auto;
	transform: rotate(180deg);
}
.product-component.product-component--quote .component__signature {
	display: block;
	text-align: right;
}

/* openers */
.product-component.product-component--openers {
	padding: 0;
	background-color: transparent;
	border: 0;
}
.product-component.product-component--openers .component__inside {
	flex-direction: column;
}
.product-component.product-component--openers .component__item {
	display: flex;
	flex-direction: column;
	border: 1px solid transparent;
	border-radius: 4px;
}
.product-component.product-component--openers.has-bg-white .component__item {
	border-color: #f69f1a;
}
.product-component.product-component--openers.has-bg-gray .component__item {
	background-color: #f1f1f1;
}
.product-component.product-component--openers.has-bg-orange .component__item {
	background-color: #f69f1a;
	color: #fff;
}
.product-component.product-component--openers.has-bg-orange .component__title {
	color: #000;
}
.product-component.product-component--openers.has-bg-orange .component__item,
.product-component.product-component--openers.has-bg-orange .component__item a,
.product-component.product-component--openers.has-bg-orange .component__item h1,
.product-component.product-component--openers.has-bg-orange .component__item h2,
.product-component.product-component--openers.has-bg-orange .component__item h3,
.product-component.product-component--openers.has-bg-orange .component__item h4,
.product-component.product-component--openers.has-bg-orange .component__item h5,
.product-component.product-component--openers.has-bg-orange .component__item h6 {
	color: #fff;
}
.product-component.product-component--openers.has-bg-orange .component__item .btn {
	background-color: #fff;
	border: 0;
	color: #f69f1a;
}
.product-component.product-component--openers .component__label {
	margin: 0;
	padding: 20px 58px 20px 20px;
	position: relative;
	cursor: pointer;
}
.product-component.product-component--openers .component__label:after {
	content: '';
	display: block;
	width: 18px;
	height: 10px;
	margin: auto 0;
	position: absolute;
	top: 0;
	right: 20px;
	bottom: 0;
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12.707" height="7.338" viewBox="0 0 12.707 7.338"><g id="surface2551" transform="translate(-2.428 -10.428)"><path id="Path_11" data-name="Path 11" d="M3.434,10.781l-.652.652,5.674,5.674.326.312.326-.312,5.674-5.674-.652-.652L8.781,16.129Zm0,0" fill="%23000" stroke="%23000" stroke-width="0.5"/></g></svg>') no-repeat 50% 50%;
	background-size: 18px 10px;
	transition: transform 0.3s;
}
.product-component.product-component--openers.has-bg-orange .component__label:after {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12.707" height="7.338" viewBox="0 0 12.707 7.338"><g id="surface2551" transform="translate(-2.428 -10.428)"><path id="Path_11" data-name="Path 11" d="M3.434,10.781l-.652.652,5.674,5.674.326.312.326-.312,5.674-5.674-.652-.652L8.781,16.129Zm0,0" fill="%23fff" stroke="%23fff" stroke-width="0.5"/></g></svg>');
}
.product-component.product-component--openers .component__label.is-opened:after {
	transform: rotate(-180deg);
}
.product-component.product-component--openers .component__label:hover {
	text-decoration: underline;
}
.product-component.product-component--openers .component__wrap {
	height: 0;
	overflow: hidden;
	transition: height 0.3s;
}
.product-component.product-component--openers .component__text {
	padding: 0 20px 20px 20px;
}

/* appeal */
.product-component.product-component--appeal {
	min-height: 165px;
	margin-left: 36px;
	position: relative;
	background-color: #f69f1a;
	color: #fff;
}
.product-component.product-component--appeal:before {
	content: '';
	width: 36px;
	height: 46px;
	position: absolute;
	top: 72px;
	bottom: auto;
	left: -36px;
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAABLCAMAAAAvfNUlAAAAaVBMVEUAAAD2nxr2nxr2nxr2nxr2nxr2nxr2nxr2nxr2nxr2nxr2nxr2nxr2nxr2nxr2nxr2nxr2nxr2nxr2nxr2nxr2nxr2nxr2nxr2nxr2nxr2nxr2nxr2nxr2nxr2nxr2nxr2nxr2nxr2nxrand/OAAAAInRSTlMABPPq/e+BfBALimoVDAZsYS33sKSFg3FmUhrdyY9ZTS8jnQ4crAAAAL5JREFUSMftzDcSwkAQBdFmV+uELB7hdf9DElFkzI8pdfyqYdy52YjX1s2Vhc5uttF4mc3ohmAjSEFAxCAg9k5A1JWA2puAaH+++KiDgChJQOQoIJqDgGj2AqKpNzYi185GlBhsxOrobQQnLyAGLyBOTkD0lYC6JCBKEhA5CYh8FBC5r2xEu3Y2ohu8jWDtBUTvv8h6YakgIKKCpq2AOAcBNTsBcd9gN16xKxGhB0JPhCaECkIdQqsFLWhBf4/ehC9ir23UfoMAAAAASUVORK5CYII=');
}
.product-component.product-component--appeal .component__title,
.product-component.product-component--appeal a,
.product-component.product-component--appeal h1,
.product-component.product-component--appeal h2,
.product-component.product-component--appeal h3,
.product-component.product-component--appeal h4,
.product-component.product-component--appeal h5,
.product-component.product-component--appeal h6 {
	color: #fff;
}
.product-component.product-component--appeal .btn {
	background-color: #fff;
	border: 0;
	color: #f69f1a;
}
.product-component.product-component--appeal .btn:hover {
	text-decoration: underline;
}
.product-component.product-component--appeal .component__inside {
	align-items: flex-start;
	flex-direction: column;
}
.product-component.product-component--appeal .component__title {
	margin-bottom: 0;
}

@media (max-width: 550px) {
	.product-components {
		gap: 15px 0;
	}
	.product-component {
		padding: 10px;
	}
	.product-component .component__title {
		margin-bottom: 10px;
	}
	.product-component .component__inside {
		gap: 10px 10px;
	}
	.product-component.product-component--image-left .component__inside,
	.product-component.product-component--image-right .component__inside {
		flex-direction: column;
	}
	.product-component.product-component--image-left .component__content,
	.product-component.product-component--image-right .component__content {
		gap: 10px 0;
	}
	.product-component.product-component--image-right .component__image {
		order: initial;
	}
	.product-component.product-component--boxes .component__item {
		width: 100%;
	}
	.product-component.product-component--quote .component__text {
		margin-bottom: 10px;
		font-size: 120%;
	}
	.product-component.product-component--openers .component__label {
		padding: 10px 58px 10px 10px;
	}
	.product-component.product-component--openers .component__text {
		padding: 0 10px 10px 10px;
	}
}