/**
 * Bembi Color Switcher v9 — стилі в стилі shop.bembi.ua.
 *
 * - чипи кольорів: круглі 30px, зображення атрибута/градієнт, активний з ✓ (як у джерела);
 * - розміри: недоступні в активному кольорі — закреслені діагоналлю (як у джерела);
 * - кольори без обраного розміру — приглушені.
 */

.bembi-colors {
    margin-block-end: 1.25rem;
}

.bembi-colors--title {
    /* типографіку задають класи теми: sc-control-label fw-600 dark-text fsz-14 */
    font-family: inherit;
    margin-block-end: 0.625rem;
}

.bembi-colors--options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    align-items: center;
}

.bembi-colors--options > .bembi-colors--chip {
    display: block;
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 50%;
    flex-shrink: 0;
    scale: 1;
    transition: scale 0.25s;
    overflow: hidden;
    text-decoration: none;
    position: relative;
    box-shadow: none;
}

.bembi-colors--options > .bembi-colors--chip:is(:hover, :focus-visible) {
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.1);
    scale: 1.2;
}

/* активний колір — з позначкою ✓, як на shop.bembi.ua */
.bembi-colors--options > .bembi-colors--chip.active {
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.1);
    scale: 1.2;
}

.bembi-colors--options > .bembi-colors--chip.active::after {
    content: "\2713";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.85);
}

/* світлі кольори — рамка */
.bembi-colors--options > .bembi-colors--chip.color-bordered {
    position: relative;
}

.bembi-colors--options > .bembi-colors--chip.color-bordered::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 0.0625rem solid rgba(153, 153, 153, 0.5);
    border-radius: 50%;
    pointer-events: none;
}

/* зображення кольору в чипі (бібліотека image/catalog/colors/...) */
.bembi-colors--options > .bembi-colors--chip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

/* колір без обраного розміру / без власної картки — лише приглушений,
   але ЗАЛИШАЄТЬСЯ клікабельним (перехід на картку кольору корисний завжди) */
.bembi-colors--chip.bembi-color-unavailable {
    opacity: 0.5;
    filter: grayscale(0.6);
}

/* приховування наявного рядка опції «Колір» (Bootstrap d-flex має !important —
   наш клас теж з !important, інакше inline display:none не діє) */
.bembi-color-option-hidden {
    display: none !important;
}

/* миттєве приховування рядка «Колір» з ПЕРШОГО кадру (до завантаження даних модуля) —
   щоб при переході між кольорами не «спалахували» старі квадратні свотчі */
#sc-product-options .form-group:has(label.option.radio-img) {
    display: none !important;
}

/* розмір недоступний в активному кольорі — діагональне закреслення (як у джерела) */
#sc-product-options label.bembi-size-unavailable {
    position: relative;
    opacity: 0.55;
    pointer-events: none;
    color: #999 !important;
    border-color: #ccc !important;
    background: #fff !important;
}

#sc-product-options label.bembi-size-unavailable::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top left,
        transparent calc(50% - 1px),
        #999 calc(50% - 1px),
        #999 calc(50% + 1px),
        transparent calc(50% + 1px));
    pointer-events: none;
}

@media (max-width: 768px) {
    .bembi-colors--options > .bembi-colors--chip {
        height: 1.875rem;
        width: 1.875rem;
    }
}