#attributesContainer {
display: flex;
flex-direction: column;
gap: 18px;
margin-top: 20px;
font-family: Arial, sans-serif;
}
.attr-group {
padding-bottom: 12px;
border-bottom: 1px solid #eee;
}
.attr-name {
font-size: 13px;
font-weight: 600;
margin-bottom: 10px;
margin-top: 10px;
color: #333;
letter-spacing: 0.3px;
text-transform: uppercase;
}
.attr-values {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.attr-btn {
padding: 7px 14px;
border-radius: 999px;
border: 1px solid #ddd;
background: #fff;
font-size: 13px;
cursor: pointer;
transition: all 0.2s ease;
color: #333;
}
.attr-btn:hover {
border-color: #999;
background: #f7f7f7;
}
.attr-btn.active {
background: #111;
color: #fff;
border-color: #111;
}
.attr-btn.disabled {
opacity: 0.3;
cursor: not-allowed;
background: #f5f5f5;
border-color: #e0e0e0;
color: #999;
}
.attr-btn.disabled:hover {
background: #f5f5f5;
border-color: #e0e0e0;
}
#attributesContainer.hidden {
display: none;
}
#toggleVariants {
padding: 8px 16px;
border: 1px solid #ddd;
border-radius: 999px;
background: #fff;
cursor: pointer;
margin-bottom: 15px;
}
#toggleVariants:hover {
background: #f5f5f5;
}
#selectedAttributes {
margin-bottom: 15px;
}
.selected-row {
display: flex;
align-items: center;
justify-content:flex-start;
gap: 10px;
padding: 8px 0;
border-bottom: 1px solid #f0f0f0;
}
.selected-name {
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
color: #333;
}
.selected-value {
color: #666;
}
.selected-pill {
background: #111;
color: #fff;
border-color: #111;
cursor: default;
pointer-events: none;
}
.variant-summary-hidden {
display: none !important;
}