.pronogti-family {
    margin: 16px 0;
    max-width: 100%;
    font-size: 14px;
}

.product-short-features > .pronogti-family {
    margin-bottom: 0;
}

.pronogti-family__axis + .pronogti-family__axis {
    margin-top: 12px;
}

.pronogti-family__title {
    margin-bottom: 7px;
    font-weight: 600;
}

.pronogti-family__options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pronogti-family__option {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    box-sizing: border-box;
    max-width: 100%;
    padding: 7px 10px;
    font-size: 13px;
    border: 1px solid #d7dbe0;
    border-radius: 8px;
    color: inherit;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
}

a.pronogti-family__option:hover {
    border-color: var(--primary-color, #3278cf);
}

.pronogti-family__option_current {
    border-color: var(--primary-color, #3278cf);
    box-shadow: inset 0 0 0 1px var(--primary-color, #3278cf);
    font-weight: 600;
}

.pronogti-family__option_out-of-stock {
    opacity: .62;
}

.pronogti-family__stock {
    margin-top: 3px;
    font-size: 10px;
    font-weight: 400;
}

.pronogti-family__options > li {
    display: flex;
    max-width: min(100%, 220px);
    flex: 0 1 auto;
}

.pronogti-family__option:focus-visible {
    outline: 2px solid var(--primary-color, #3278cf);
    outline-offset: 3px;
}

.pronogti-family__axis_tiles .pronogti-family__option {
    overflow-wrap: anywhere;
}

.pronogti-family__detail {
    margin-top: 2px;
    font-size: 11px;
    font-weight: 400;
}

.pronogti-family__options > li[hidden] {
    display: none !important;
}

.pronogti-family__more {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    margin-top: 4px;
    padding: 4px 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: var(--primary-color, #3278cf);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.pronogti-family__more:focus-visible {
    outline: 2px solid var(--primary-color, #3278cf);
    outline-offset: 3px;
}

/* Imported RGB swatches are not reliable hair colours. Keep their factual
   names visible instead; this is presentation-only and scoped to head cards. */
.product-short-features:has(.pronogti-family__axis_tiles) [data-feature-code="tsvet"] .color__icon-box {
    display: none !important;
}
.product-short-features:has(.pronogti-family__axis_tiles) [data-feature-code="tsvet"] .color__name {
    display: inline !important;
}