Nested Product variable

[Milavec]

Hello everyone !
I am working on a shopify theme project. On the product page the customer will need to selection the color then after the size. Which mean that every product got 2 option with 2 to 3 value.

I need to use variant to generate a ID for each different variants. Looping option1 and nesting option2 loop.
But saldy option 1 is not even looping . is my synthax wrong ?

 <header class="c-modal__header">
                    <h2 class="c-modal__title">Please select your{{ product.options[0] }}and{{ product.options[1] }}Before check out !</h2>
                  </header>
                  {% for option1 in product.variants.option1 %}
                  <p class="c-modal__caption">{{ product.option1 }}</p>
                      <ul class="c-modal__content-list">
                        {% for option2 in product.variants.option2 %}
                        <li class="c-modal__content--item c-modal__content--item--sku"><span class="c-modal__content__lineup">{{ variant.option2 }}</span>
                          <div class="c-modal__content__buttonarea">
                            <form class="c-modal__content__button c-button" method="post" action="/cart/add">
                            <input type="hidden" name="id" value="{{ product.variants.first.id }}" />                                            
                            <input type="submit" value="In the cart!" class="btn" />                          
                          </form>
                          </div>
                        </li>
                        {% endfor %}
                      </ul> 
                   {% endfor %}

Thanks a lot !