/* ==========================================================
   Blueprint schema v3 dynamic option groups
   Loaded only for Blueprint-configured products.
   ========================================================== */

.blueprint-choice-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(170px, 1fr)
        );
    gap: 12px;
    min-width: 0;
}

.blueprint-choice {
    position: relative;
    display: grid;
    min-width: 0;
    overflow: hidden;
    border:
        1px solid
        var(--color-border);
    border-radius:
        var(--radius-md, 14px);
    background:
        rgba(255, 255, 255, .84);
    cursor: pointer;
    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease,
        background .2s ease;
}

.blueprint-choice:hover {
    border-color:
        color-mix(
            in srgb,
            var(--color-primary)
            58%,
            var(--color-border)
        );
    transform: translateY(-2px);
}

.blueprint-choice:has(
    input:checked
) {
    border-color:
        var(--color-primary);
    background:
        color-mix(
            in srgb,
            var(--color-primary)
            7%,
            #fff
        );
    box-shadow:
        0 0 0 2px
        color-mix(
            in srgb,
            var(--color-primary)
            14%,
            transparent
        );
}

.blueprint-choice:has(
    input:focus-visible
) {
    outline:
        3px solid
        color-mix(
            in srgb,
            var(--color-primary)
            24%,
            transparent
        );
    outline-offset: 3px;
}

.blueprint-choice > input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.blueprint-choice__visual {
    display: grid;
    place-items: center;
    min-width: 0;
}

.blueprint-choice--cards
.blueprint-choice__visual {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background:
        linear-gradient(
            180deg,
            #f6f1e9,
            #ece4d8
        );
}

.blueprint-choice--cards
.blueprint-choice__visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blueprint-choice--swatches {
    grid-template-columns:
        66px
        minmax(0, 1fr);
    align-items: center;
    padding: 12px;
}

.blueprint-choice--swatches
.blueprint-choice__visual {
    width: 52px;
    height: 52px;
}

.blueprint-choice__swatch {
    display: block;
    width: 46px;
    height: 46px;
    border:
        1px solid
        rgba(0, 0, 0, .12);
    border-radius: 50%;
    background:
        var(
            --blueprint-swatch,
            #8c8378
        );
    box-shadow:
        inset
        0 0 0 4px
        rgba(255, 255, 255, .58);
}

.blueprint-choice--buttons {
    grid-template-columns:
        42px
        minmax(0, 1fr);
    align-items: center;
    min-height: 74px;
    padding: 12px 14px;
}

.blueprint-choice--buttons
.blueprint-choice__visual {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background:
        color-mix(
            in srgb,
            var(--color-primary)
            10%,
            #fff
        );
    color:
        var(--color-primary);
    font-weight:
        var(--fw-bold);
}

.blueprint-choice__content {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 12px 13px 13px;
}

.blueprint-choice--swatches
.blueprint-choice__content,
.blueprint-choice--buttons
.blueprint-choice__content {
    padding: 0;
}

.blueprint-choice__content strong {
    color:
        var(--color-text);
    font-size: .96rem;
    line-height: 1.2;
}

.blueprint-choice__content small {
    color:
        var(--color-text-light);
    font-size: .78rem;
    line-height: 1.45;
}

.blueprint-choice__content em {
    width: fit-content;
    margin-top: 2px;
    color:
        var(--color-primary);
    font-size: .75rem;
    font-style: normal;
    font-weight:
        var(--fw-bold);
}

.configurator-preview__selection em {
    color:
        var(--color-text-light);
    font-style: normal;
}

.blueprint-dynamic-preview-layer {
    object-fit: contain;
}

@media (max-width: 760px) {
    .blueprint-choice-grid {
        display: grid;
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns:
            minmax(84%, 1fr);
        gap: .8rem;
        width: 100%;
        padding:
            .1rem
            .1rem
            .75rem;
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type:
            inline mandatory;
        overscroll-behavior-inline:
            contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling:
            touch;
    }

    .blueprint-choice-grid::-webkit-scrollbar {
        display: none;
    }

    .blueprint-choice-grid > * {
        min-width: 0;
        scroll-snap-align: start;
    }

    .blueprint-choice--swatches,
    .blueprint-choice--buttons {
        min-height: 86px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .blueprint-choice {
        transition: none;
    }
}


@media (max-width: 760px) {
    /*
     * Schema v2 assumed exactly 3 choices + Review.
     * v3 may have any number of configuration groups.
     */
    .configurator-stepper__buttons {
        grid-template-columns:
            repeat(
                auto-fit,
                minmax(64px, 1fr)
            );
    }
}