/* Sezam Rodziny - wybor kamienia / koloru kamienia / proby zlota na karcie produktu.
   Miniatury jak .kazka-family (kolor zlota), pigulki = .stan-badge motywu (karaty Kazki, rozmiary). */
.sezam-rodzina {
    margin: 0 0 24px;
    font-family: inherit;
}
.sezam-rodzina__tytul {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #888;
    margin: 0 0 8px;
}
.sezam-rodzina__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.sezam-rodzina__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 80px;
    text-decoration: none;
    color: inherit;
}
.sezam-rodzina__item img,
.sezam-rodzina__brak-zdjecia {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid transparent;
    background: #f8f8f8;
    display: block;
    transition: border-color .2s;
}
.sezam-rodzina__item:hover img,
.sezam-rodzina__item--aktywny img {
    border-color: var(--color-accent, #6f263d);
}
.sezam-rodzina__item:focus-visible {
    outline: 2px solid var(--color-accent, #6f263d);
    outline-offset: 2px;
    border-radius: 6px;
}
.sezam-rodzina__etykieta {
    font-size: 11px;
    line-height: 1.25;
    color: #555;
    text-align: center;
    word-break: break-word;
}
.sezam-rodzina__item--aktywny .sezam-rodzina__etykieta {
    font-weight: 700;
    color: var(--color-accent, #6f263d);
}
@media (min-width: 992px) {
    .sezam-rodzina__item { width: 96px; }
    .sezam-rodzina__item img,
    .sezam-rodzina__brak-zdjecia { width: 96px; height: 96px; }
}


/* Pigulki: wyglad bierzemy z .stan-badge motywu (custom.css), tu tylko uklad.
   custom.css laduje sie po module, wiec selektory maja po dwie klasy. */
.sezam-rodzina .sezam-rodzina__pigulki {
    flex-wrap: wrap;
    gap: 1rem .8rem;
    margin: 0;
    align-items: flex-start;
}
.sezam-rodzina .stan-badge__label {
    display: inline-flex;
    align-items: baseline;
    gap: .7rem;
    text-decoration: none;
    white-space: nowrap;
}
.sezam-rodzina .stan-badge--active .stan-badge__label { cursor: default; }
/* cena w pigulce: oddzielona pionowa kreska (user: "bylo najlepiej"), mniejsza i ciensza od nazwy proby */
.sezam-rodzina .sezam-rodzina__nazwa { font-weight: 600; }
.sezam-rodzina .sezam-rodzina__cena {
    font-size: .85em;
    font-weight: 400;
    padding-left: .7rem;
    border-left: 1px solid rgba(0, 0, 0, .18);
    color: #777;
}
.sezam-rodzina .sezam-rodzina__cena:empty { display: none; }
.sezam-rodzina .stan-badge--active .sezam-rodzina__cena,
.sezam-rodzina .stan-badge:hover .sezam-rodzina__cena {
    color: inherit;
    border-left-color: rgba(111, 38, 61, .3);
}
.sezam-rodzina .sezam-rodzina__opcja--brak .stan-badge__label { opacity: .45; }
.sezam-rodzina .stan-badge__label:focus-visible { outline: 2px solid var(--color-accent, #6f263d); outline-offset: 2px; }