.product-attributes .product-attributes-item {
    margin-bottom: 10px;
}

.product-attributes .attribute-name {
    display: block;
    text-align: center;
}

.product-attributes .attribute-box {
    border: 2px transparent solid;
    background: #fff;
    margin: 5px;
    border-radius: 99em;
    padding: 0 5px;
}

.product-attributes .attribute-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    max-height: 125px;
    position: relative;
    overflow: clip;

}

.product-attributes .attribute-group.image-type {
    max-height: inherit;
}

.product-attributes .attribute-group.open {
    max-height: 1000px;
}

/* :root{
    --gap-count: calc(var(--grid-column-count) - 1);
    --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
    --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));
}
.product-attributes .attribute-group{
    /* grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr)); */
/*  grid-template-columns: repeat(auto-fill,  minmax(92px, auto));
    display: grid;
    grid-auto-columns: minmax(92px, auto);
    grid-template-rows: 1fr;
    overflow: clip;

    position: relative;

}
.product-attributes .attribute-group.long-group.closed{
    grid-template-rows: minmax(60px, 1fr) minmax(60px, 1fr) repeat(100, minmax(0px, 0));
    grid-template-areas: 
    ". . . . ."
    ". . . . showmore"; 
}
.product-attributes .attribute-group.long-group.open{
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    /* grid-template-rows: repeat(auto-fill, minmax(60px, 1fr));  
    grid-template-areas:  ". . . . ."
    ". . . . .";    
    max-width: 100%;
}
.product-attributes #attribute_2.attribute-group,
.product-attributes #attribute_8.attribute-group{
    grid-template-columns: repeat(auto-fill, 115px);
} */
.product-attributes .attribute-box.attribute-current {
    color: #1b1b1b;
}

.product-attributes .attribute-box.show-more-attributes {
    /* grid-area: showmore; */
    cursor: pointer;

    /* position: absolute;
    top:0;
    left:0; */
}


.product-attributes .attribute-group.image-type .attribute-box {
    max-height: 62px;
    max-width: 62px;
    padding: 8px;
}

.product-attributes .attribute-group.image-type .attribute-box.show-more-attributes {
    min-height: 62px;
    min-width: 62px;
}

.product-attributes .attribute-group.image-type .attribute-box .attribute-value-item {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
}

.product-attributes .attribute-group.image-type .attribute-box .attribute-value-item img {
    width: 100%;
    object-fit: contain;
    transform: scale(1.2);

}

.product-attributes .attribute-box.show-more-attributes .attribute-value-item {
    font-size: 13px;
}

.product-attributes .attribute-group.long-group.open .attribute-box.show-more-attributes {
    grid-area: unset;
}

.product-attributes .attribute-box.disabled {
    border: 2px transparent solid;
    opacity: 0.3;
    color: #6b7383;
}

.product-attributes .attribute-box.attribute-current {
    border-color: #f7941c;
    background: #f7941c;
    opacity: 1;
}


.product-attributes .attribute-box.hover {
    border-color: var(--mexen-blue);
    opacity: 1;
}

.product-attributes .attribute-box.hover {
    color: #1b1b1b;
}

.product-attributes .attribute-box .attribute-value-item {
    display: block;
    padding: 5px 10px;
    font-size: .875rem;
    color: #6b7383;
    text-decoration: none;
}

.product-attributes .attribute-box.attribute-current .attribute-value-item {
    color: #fff;
}

.product-attributes .attribute-box .attribute-value-item--smaller {
    padding: 3px 6px;
    font-size: 12px;
}

.simattrs-selection-grid {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: flex-start;
}

.simattrs-grid-product-reset-button {
    display: block;
}

.row.simattrs-grid-product-feature:hover {
    background: lightblue;
    cursor: pointer;
}

.row.simattrs-grid-product-feature.feature-selected {
    background: steelblue;
    cursor: pointer;
}