.mix-and-match-product {
    display: flex;
    flex-direction: column;
    gap: 20px;

    .mm-product-list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        margin-bottom: 20px;
        gap: 15px;
    }

    .mm-selection {
        font-weight: bold;
        color: var(--info-color);
    }

    .mm-product {
        border-radius: 6px;
        border: 1px solid #EEE;
        padding: 10px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: center;

        img {
            width: 100%;
            object-fit: contain;
            height: auto;
        }

        p {
            font-size: 13px;
        }

        .quantity {
            margin-top: auto;
            width: 100%;
            border: 1px solid transparent;

            &.mm-quantity-disabled {
                opacity: 0.5;
                pointer-events: none;
            }

            &.mm-quantity-active {
                border: 1px solid var(--blue-button);
                border-radius: 4px;
            }

            .qty {
                flex: 1;
            }
        }
    }

    .mm-product-total {
        display: flex;
        padding: 10px 0;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border-radius: 4px;
        background: var(--Body-Background, #F5F6F7);
        margin-bottom: 20px;
    }
}