/* geral */
.product-combination-option {position: relative;}
#product-combination {display: flex; flex-direction: column; gap: 16px;}
/* .combination-options {display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 6px;} */
.combination-options {position: relative;}
.combination-header {margin-bottom: 16px;}
.combination-name {margin-bottom: 4px; line-height: normal; font-weight: 500; font-size: 16px;}
.combination-error {color: #dc3545;}
#combination-loading {display: none; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: #ffffffab; justify-content: center; align-items: center; z-index: 100;}
@media (max-width: 991px) {
	.combination-options .vowt-prev, .combination-options .vowt-next {display: none;}
}
/* geral */

/* observações */
/* .combination-observations {display: flex; color: #514B48; margin-bottom: 16px; font-size: 12px; }
.combination-observations span::after:not(:last-child) {content: '|'; margin: 0 16px;} */

.combination-observation {font-size: 13px; line-height: 150%; color: #393939}
@media (max-width: 991px) {
	.combination-observation {font-size: 12px;}
}
/* observações */

/* opção de cor */
.combination-option-color {display: flex; justify-content: center; align-items: center;}
.combination-option-color .color-select {outline: 1px solid #fff; border-radius: 100px; display: flex; align-items: center; justify-content: center; padding: 2px;}
.combination-option-color .color-select:hover {outline-color: #aaa;}
.combination-option-color .selected,.combination-option-color .selected:hover {outline-color: #000;}
.button-color { border-radius: 50%; width: 24px; height: 24px; border: 1px solid #c4c4c4; cursor: pointer; margin: 0;}
/* opção de cor */

/* opcao de cor com imagem */
.combination-option-color-image .combination-option-name {display: none;}
.combination-option-color-image .img-option-color {border-radius: 50%; width: 54px; height: 54px; filter: brightness(.9);}
/* opcao de cor com imagem */

/* opcao normal */
.button-combination {border: 1px solid #E4E7E7; background: #F4F5F5; width: 100%; padding: 6px; cursor: pointer; display: flex; flex-direction: column-reverse; gap: 8px; align-items: center; justify-content: space-between; height: 100%; text-align: center; font-weight: 500; margin-bottom: 0px; border-radius: 8px;}
.button-combination:hover {background: #eee;}
.button-combination.selected {border-color: #181B1A;}
.button-combination .combination-option-name, .button-combination-image .combination-option-name {min-height: 32px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}

.combination-item:nth-of-type(2) .combination-option-name {min-height: auto; display: -webkit-box; -webkit-line-clamp: 1;} 
@media (max-width: 991px) {
	.button-combination .combination-option-name, .button-combination-image .combination-option-name {font-size: 11px;}
}
/* opcao normal */

/* opcao com imagem */
.button-combination-image {border: 1px solid #E4E7E7; background: #F4F5F5; width: 100%; padding: 8px; cursor: pointer; display: flex; flex-direction: column-reverse; gap: 8px; align-items: center; justify-content: space-between; height: 100%; text-align: center; font-weight: 500; margin-bottom: 0px; border-radius: 8px;}
.button-combination-image:hover {border-color: #888;}
.button-combination-image.selected {border-color: var(--primary);}
/* opcao com imagem */

/* thumb */
.product-combination-colors {width: 100%; margin: 16px 0;}
.product-combination-colors ul {padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 0;}
.product-combination-colors a {display: flex;}
.type-color {display: inline-block; width: 18px; height: 18px; cursor: pointer; background-size: contain; border-radius: 50%; border: 1px solid #ddd;}
.type-image {border: 1px solid #9A9998; padding: 4px; border-radius: 50%; transition: ease all .5s;}
.type-image:hover {border-color: #201E1D;}
.option-image {width: 40px; height: 40px; background-size: contain; background-repeat: no-repeat; border-radius: 50%;}
.type-button {cursor: pointer; min-width: 40px; text-align: center; padding-left: 10px; padding-right: 10px;}
/* thumb */

#no-combination {display: block;}
.inactive {opacity: .6;} 
.active {opacity: 1;}