/* Explain: Styles for interactive UI elements and rich text content. - */
.variant-option {
    transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.variant-option:hover {
    transform: translateY(-1px);
}

.variant-option.is-selected {
    border-color: var(--brand-dark);
    background-color: #eef7f1;
    box-shadow: 0 10px 25px rgba(7, 71, 48, 0.1);
}

.variant-option.is-selected .variant-dot {
    background-color: var(--brand-dark);
    border-color: var(--brand-dark);
}

.variant-option.is-selected .variant-dot::after {
    content: "";
    display: block;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background-color: #ffffff;
    margin: 0.18rem;
}

.richtext-content ul {
    list-style-type: disc !important;
    padding-left: 1.25rem !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

.richtext-content ol {
    list-style-type: decimal !important;
    padding-left: 1.25rem !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

.richtext-content li {
    margin-bottom: 0.375rem !important;
    line-height: 1.6 !important;
    display: list-item !important;
}

.richtext-content li::marker {
    color: var(--brand-green) !important;
}

.richtext-content p {
    margin-bottom: 0.5rem;
}

.richtext-content p:last-child {
    margin-bottom: 0;
}