@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
.container {
max-width: 1200px;
width: calc(100% - 40px);
margin: 0 auto;
}
#select-translations{
display: none;
}
.select2-container, #select-options-container, #select-equipment-container {
width: 100%;
max-width: 320px;
}
.product-custom h1 {
color: #000;
font-family: Inter;
font-size: 40px;
font-style: normal;
font-weight: 500;
line-height: normal;
margin-bottom: 32px;
}
.product-custom__container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: start;
margin-top: 12px;
}
@media (max-width: 992px) {
.product-custom__container {
grid-template-columns: 1fr;
}
}
.product-custom__preview {
background: #f7f7f7;
border-radius: 8px;
border: 1px solid #E2E2E2;
-webkit-box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 10px 15px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 10px 15px 0 rgba(0, 0, 0, 0.1);
min-height: 380px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 20px;
position: sticky;
top: 30px;
}
@media screen and (max-width:992px){
.product-custom__preview{
padding: 0;
}
}
.product-custom__preview img {
max-width: 100%;
height: auto;
}
#select-translations {
display: none;
}
.texture-preview-block, .base-texture-block, .texture-colors-block, .stroke-colors-block {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 15px;
margin: 10px 0px;
max-width: 448px;
}
#texture-preview-block {
display: none;
}
.block-title {
text-align: left;
padding: 2px 0px 10px 0px;
}
img#texture-sota-big,
img#texture-sota-small,
img#texture-kaplya,
img#texture-romb {
width: 74px;
height: 74px;
cursor: pointer;
}
img#texture-sota-big:hover,
img#texture-sota-small:hover,
img#texture-kaplya:hover,
img#texture-romb:hover {
transform: scale(1.05);
}
img.texture-base-color, img.texture-stroke-color {
width: 50px;
height: 50px;
cursor: pointer;
border-radius: 50px;
}
img.texture-base-color.selected, img.texture-stroke-color.selected {
transform: scale(1.25);
}
img.texture-base-color:hover, img.texture-stroke-color:hover {
transform: scale(1.2);
}
img.texture-base-color:active, img.texture-stroke-color:active {
transform: scale(1.3);
}
#texture-sota-big-colors-block,
#texture-sota-small-colors-block,
#texture-kaplya-colors-block,
#texture-romb-colors-block,
#mat-strokes-colors-block {
display: none;
}
div.mat-preview {
display: none;
}
div.mat-preview.mat-active {
display: block;
}
img.texture-selected {
transform: scale(1.05);
border-bottom: 5px solid transparent;
border-image: linear-gradient(to right, #663399, #ff4e2b);
border-image-slice: 1;
}
.image-column svg {
fill: white;
stroke: black;
stroke-width: 1px;
max-width: 530px;
width: 100%;
height: 530px;
}
@media screen and (max-width:480px){
.image-column svg {
height:380px;
}
}
.product-custom__form {
padding: 20px;
border-radius: 8px;
border: 1px solid #E2E2E2;
background: #FFF;
-webkit-box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.1), 0 10px 15px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.1), 0 10px 15px 0 rgba(0, 0, 0, 0.1);
}
.product-custom__form .product-custom__title {
font-size: 20px;
margin-bottom: 20px;
}
.form__step {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 36px;
margin-top: 36px;
}
.form__step-number {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: #f9b233;
color: #000;
font-weight: 600;
margin-right: 8px;
font-size: 14px;
}
.form__step-text {
color: #000;
font-family: Inter;
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.form__row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 15px;
margin-bottom: 15px;
}
.form__row label {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
color: #374151;
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.label{
margin-bottom: 8px;
}
.form__row label select {
margin-top: 4px;
padding: 8px;
border-radius: 8px;
border: 1px solid #636363;
overflow: hidden;
color: #000;
text-overflow: ellipsis;
white-space: nowrap;
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-top: 8px;
}
.form__price {
margin: 20px 0;
font-size: 14px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 16px;
}
.form__price-value {
color: #2563EB;
font-family: Inter;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 32px; margin-top: 24px;
}
.form__price span {
color: #000;
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.btn.button {
max-width: 288px;
width: 100%;
padding: 16px 32px;
font-size: 16px;
border: none;
border-radius: 8px;
border: 1px solid #B4B4B4;
background: #FFAC00;
color: #000;
text-align: center;
font-family: Inter;
font-style: normal;
font-weight: 600;
line-height: normal;
cursor: pointer;
transition:0.3s;
display:inline-block;
justify-content:center;
line-height:normal;
height:auto;
}
.btn.button:after {
content: "";
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M0 1H4.764L5.309 3H23.387L19.721 14H7.78L7.28 16H22V18H4.72L5.966 13.011L3.236 3H0V1ZM4 21C4 20.4696 4.21071 19.9609 4.58579 19.5858C4.96086 19.2107 5.46957 19 6 19C6.53043 19 7.03914 19.2107 7.41421 19.5858C7.78929 19.9609 8 20.4696 8 21C8 21.5304 7.78929 22.0391 7.41421 22.4142C7.03914 22.7893 6.53043 23 6 23C5.46957 23 4.96086 22.7893 4.58579 22.4142C4.21071 22.0391 4 21.5304 4 21ZM18 21C18 20.4696 18.2107 19.9609 18.5858 19.5858C18.9609 19.2107 19.4696 19 20 19C20.5304 19 21.0391 19.2107 21.4142 19.5858C21.7893 19.9609 22 20.4696 22 21C22 21.5304 21.7893 22.0391 21.4142 22.4142C21.0391 22.7893 20.5304 23 20 23C19.4696 23 18.9609 22.7893 18.5858 22.4142C18.2107 22.0391 18 21.5304 18 21Z' fill='black'/%3E%3C/svg%3E");
width: 24px;
height: 24px;
display: inline-block;
margin-left: 8px;
vertical-align: middle;
}
.btn.button.btn-disabled {
background: #D4D4D4;
cursor: not-allowed;
color: #838383;
}
.btn.button.btn-disabled:after{
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M0 1H4.764L5.309 3H23.387L19.721 14H7.78L7.28 16H22V18H4.72L5.966 13.011L3.236 3H0V1ZM4 21C4 20.4696 4.21071 19.9609 4.58579 19.5858C4.96086 19.2107 5.46957 19 6 19C6.53043 19 7.03914 19.2107 7.41421 19.5858C7.78929 19.9609 8 20.4696 8 21C8 21.5304 7.78929 22.0391 7.41421 22.4142C7.03914 22.7893 6.53043 23 6 23C5.46957 23 4.96086 22.7893 4.58579 22.4142C4.21071 22.0391 4 21.5304 4 21ZM18 21C18 20.4696 18.2107 19.9609 18.5858 19.5858C18.9609 19.2107 19.4696 19 20 19C20.5304 19 21.0391 19.2107 21.4142 19.5858C21.7893 19.9609 22 20.4696 22 21C22 21.5304 21.7893 22.0391 21.4142 22.4142C21.0391 22.7893 20.5304 23 20 23C19.4696 23 18.9609 22.7893 18.5858 22.4142C18.2107 22.0391 18 21.5304 18 21Z' fill='%23838383'/%3E%3C/svg%3E");
}
.btn.button.btn-disabled:hover{
background: #ccc;
cursor: not-allowed;
color: #838383;
}
.select2-container {
width: 100% !important;
}
.select2-selection {
height: 40px !important;
border: 1px solid #ccc !important;
border-radius: 6px !important;
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0 10px !important;
font-size: 14px;
}
.select2-selection__arrow {
top: 50% !important;
-webkit-transform: translateY(-50%) !important;
transform: translateY(-50%) !important;
right: 10px !important;
}
.select2-dropdown {
border-radius: 6px !important;
border: 1px solid #ccc !important;
}
.select2-results__option {
padding: 8px 12px !important;
font-size: 14px;
}
.select__row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 12px;
}
.select__row .sel__item {
border-radius: 8px;
border: 1px solid #636363;
-webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.2);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 8px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 8px;
text-align: center;
-webkit-transition: 0.3s;
transition: 0.3s;
cursor: pointer;
}
@media screen and (max-width: 480px) {
.select__row .sel__item {
flex: 0;
}
.select__row .sel__item{
width: 100%;
}
}
.select__row .sel__item:hover {
border: 1px solid #FFAC00;
}
.select__row .el__row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 16px;
width: 100%;
border: 0 solid #E5E7EB;
background: -webkit-gradient(linear, left bottom, left top, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0.5))), lightgray 50%/cover no-repeat;
background: linear-gradient(0deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%), lightgray 50%/cover no-repeat;
}
.select__row .el__row img {
max-width: none;
width: 100%;
border-radius: 4px;
height: 56px;
position: relative;
}
.select__row .el__row img:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.1);
border-radius: 4px;
display: block;
}
.select__row .el__title {
color: #808080;
text-align: center;
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px;
width: 100%;
}
.form__celest {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 16px;
}
.form__celest .celect__radio {
width: 40px;
height: 40px;
-ms-flex-negative: 0;
flex-shrink: 0;
aspect-ratio: 1/1;
border-radius: 50%;
border: 2px solid #636363;
overflow: hidden;
cursor: pointer;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.form__celest .celect__radio:hover {
border: 2px solid #FFAC00;
}
.form__celest .celect__radio img {
width: 100%;
height: 100%;
overflow: hidden;
}
.texture-colors-block .texture-base-color{
width: 40px;
height: 40px;
-ms-flex-negative: 0;
flex-shrink: 0;
aspect-ratio: 1/1;
border-radius: 50%;
border: 2px solid #636363;
overflow: hidden;
cursor: pointer;
-webkit-transition: 0.3s;
transition: 0.3s;
overflow:hidden;
}
.texture-colors-block .texture-base-color:hover{
border: 2px solid #FFAC00;
}
.stroke-colors-block .texture-stroke-color{
width: 40px;
height: 40px;
-ms-flex-negative: 0;
flex-shrink: 0;
aspect-ratio: 1/1;
border-radius: 50%;
border: 2px solid #636363;
overflow: hidden;
cursor: pointer;
-webkit-transition: 0.3s;
transition: 0.3s;
overflow:hidden;
}
.stroke-colors-block .texture-stroke-color:hover{
border: 2px solid #FFAC00;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
overflow: hidden;
color: #000!important;
text-overflow: ellipsis;
white-space: nowrap;
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.select2-container .select2-selection--single .select2-selection__rendered{
padding-left:0!important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
display: block;
max-width: 120px; 
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#price-box {
font-size: 24px;
}
.initial-price {
color: rgb(189, 189, 189);
font-size: 16px;
text-decoration: line-through;
}
.sale-info-box {
display: flex;
flex-direction: row;
gap: 10px;
align-items:center;
}
.sale-info-box span{
color: #2563EB;
font-family: Inter;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 32px; }
.sale-label {
color: rgb(255, 255, 255)!important;
font-size: 14px!important;
background-color: rgb(103, 194, 58);
line-height: 2;
padding: 3px 3px;
border-radius: 8px;
}
.order__text{
font-weight: 900;
color: #000;
font-size: 22px;
}
@media screen and (max-width: 992px) {
.select2-results {
width: 100% !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
display: block;
max-width:none; 
white-space: normal;
overflow: hidden;
text-overflow:clip
}
.form__row{
flex-direction: column;
}
.form__row label {
flex: auto;
}
.select2-container .select2-search__field {
font-size: 16px !important; }
.select2-container input {
font-size: 16px !important;
} .select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-search__field,
.select2-dropdown .select2-search__field,
.select2-container .select2-search__field {
font-size: 16px !important;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
text-size-adjust: 100%;
} .select2-container--default .select2-selection--single .select2-selection__rendered{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
html, body {
overflow-x: hidden !important;
}
.select2-dropdown {
max-width: 100% !important;
box-sizing: border-box;
overflow-x: hidden !important;
}
.select2-container .select2-search__field {
width: 100% !important;
box-sizing: border-box;
}
}