:root {
  --h1: 2.5rem;
  --h2: 2rem;
  --h3: 1.5rem;
  --h4: 1.2rem;
  --text-large: 1.5rem;    
  --text-medium: 1.15rem;
  --text-small: 0.875rem;
}


.configurator {
    display: grid;
    grid-template-columns: 5fr 2fr;
    gap: 4em;
    width: 100%;
}

.configurator__content-wrapper {
    display: flex;
    flex-direction: column;  
    gap: 4em;
}

/* Fonts */

h2 {
    font-size: var(--h2);
    font-weight: 600;
}

/* Grids */

.grid--2 {
    display: grid;
    grid-template-columns: 1fr 1fr; /* две равные колонки */
    gap: 16px; /* отступ между колонками (по желанию) */
    /*align-items: flex-start;*/
}

.grid--3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* две равные колонки */
    gap: 16px; /* отступ между колонками (по желанию) */
}

/* Answer card */
.answer {
    display: flex;
    flex-direction: column;    
    line-height: 1.2;
    overflow: hidden;
    border-radius: 1em;
    border: 1px solid #d7d7d7;
    transition: border-color 0.2s;
    cursor: pointer;
}

.answer:has(input[type="radio"]:checked), .answer:has(input[type="checkbox"]:checked) {
  border-color: #1e1e1e;
  border-width: 1px; /* Жирнее */
}

.answer__content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1em;
    padding: 1em;
    height: 100%;
    justify-content: space-between;
}

.answer__label-title-wrapper {
    display: flex;
    justify-content: space-between;   
}

.answer__text-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

/*
.answer__image-wrapper {
    width: 100%;
    min-height: 250px;
    height: 250px;       
    overflow: hidden;     
    position: relative;     
} 

.answer__image {
    width: 100%;
    height: 100%;
    object-fit: cover;  
    object-position: center center;  
} 

*/

.answer__image-wrapper {
    position: relative;
    width: 100%;
    /* 7/9 = 0.777..., поэтому 77.78% */
    padding-bottom: 77.78%;
    overflow: hidden;
    background: #f2f2f2; /* Опционально — цвет-заглушка */
}

.answer__image {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;   /* Картинка вписывается, не "вытягивается" */
    object-position: center;
    display: block;
}

.answer__title {
    font-size: var(--text-medium);
    font-weight: 600;
}

.answer__input-wrapper {
    display: flex;
    gap: 0.5em;
    align-items: center;
    padding-top: 1em;
    border-top: 1px solid #d7d7d7;
}

[type=checkbox], [type=radio] {
    box-sizing: border-box;
    padding: 0;
    width: 1.5em!important;
    height: 1.5em!important;
}

.answer__label-title {
   font-weight: 600; 
}

.answer__label-description {
    font-size: var(--text-small);
    margin: 0;
}

.answer__input-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    width: 100%;
}

.answer__price {
    min-width: 70px;
}


/* Sidebar */
.configurator__sidebar {
    position: relative;
}

.configurator__wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.25em;
    position: sticky;
    top: 50px;
}

.configurator__title-sidebar {
    font-size: var(--h3);    
    font-weight: 600;    
}

.configurator__separator {
    display: block;
    width: 100%;
    height: 1px;
    background: #d7d7d7;
}

.summary {
    display: flex;
    flex-direction: column;
    gap: 1.25em;
}

.summary__price-line {
    display: flex;
    justify-content: space-between;
    line-height: 1.75;
}


/* Buttons */
.button-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.btn {
    width: 100%;
    border: solid 1px #ff6600;
    color: white;
    border-radius: 0.5em!important;
    cursor: pointer;
}

.btn-dark {
    background: #ff6600!important;
}

.btn-outline-dark {
    color: #ff6600!important; 
    background: #f9f9f5!important;
}

.btn:hover {
    background: #222222!important;
    border-color: #222222!important;
    color: #fff!important;
}

/* Адаптивность */
@media (max-width: 1280px) {
        .configurator {            
            grid-template-columns: 3fr 2fr;
    }
    
}

@media (max-width: 1024px) {
        .configurator {            
            grid-template-columns: 1fr;
    }
    
}

@media (max-width: 728px) {
    .grid--2 {
        display: grid;
        grid-template-columns: 1fr; 
        gap: 16px;         
    }
    
}

/* Elementor Form */
.elementor-field-group-selected_options_cf7 {
    display: none!important;
}

.elementor-field-option input:checked {
    background-color: #ff6600 !important;
}