/*--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------*/
/*-------------------------------------@DEFAULT-----------------------------------*/
/*--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------*/

.product-faqs {
    display:grid;
    grid-template-columns: repeat( 2, minmax( auto, 1fr ) );
    grid-gap:var(--gap-s);
}

.product-faqs .faq {
    width:100%;
    height:fit-content;

    border:1px solid var(--color-purple-09);

    overflow:hidden;

    cursor:pointer;

    transition:all calc(1/3*1s) ease-in-out;
}

/*--------------------------------------------------------------------------------*/
/*------------------------------------@QUESTION-----------------------------------*/
/*--------------------------------------------------------------------------------*/

.product-faqs .faq .faq__question {
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    padding:24px;

    transition: all calc(1/3*1s) ease-in-out;
}

.product-faqs .faq .faq__question *:not( svg ) {
    margin:0;

    font-family:var(--text-family-secondary);
    font-size:var(--text-body-xl-size);
    line-height:var(--text-body-xl-line-height);
    letter-spacing: 0em;
    text-transform:initial;
    font-weight:400;
    text-align:left;
    color:var(--color-purple-09);
    text-decoration: none;
}

.product-faqs .faq .faq__question svg {
    transform: rotate( 0deg );

    transition:all calc( 1/6*1s ) ease-in-out;
}
.product-faqs .faq.active .faq__question svg {
    transform: rotate( 180deg );
}

/*--------------------------------------------------------------------------------*/
/*-------------------------------------@ANSWER------------------------------------*/
/*--------------------------------------------------------------------------------*/

.product-faqs .faq .faq__answer {
    display:none;

    padding:0 24px 24px;

    margin:0;

    font-family:var(--text-family-secondary);
    font-size:var(--text-body-xl-size);
    line-height:var(--text-body-xl-line-height);
    letter-spacing: 0em;
    text-transform:initial;
    font-weight:400;
    text-align:left;
    color:var(--color-gray-dim);
    text-decoration: none;

    opacity:0;
    visibility: hidden;

    transition: all 1s ease-in-out;
}

@media ( min-width: 1025px ) {

    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*-------------------------------------#DEFAULT-----------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/

}

@media ( min-width:768px ) and ( max-width:1024px ) {

    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*-------------------------------------$DEFAULT-----------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/

}

@media ( max-width:767px ) {

    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*-------------------------------------%DEFAULT-----------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    
    .product-faqs {
        grid-template-columns: 1fr;
    }

}