/*
* Responsive breakpoints based on content widths
*/

/* Devices smaller then the width of the template */
@media only screen and (max-width: 1200px) {
    body:has(#scws_webshop) footer {
        display: none;
    }

    #scws_webshop nav#steps ul {
        gap: 0.25em;
    }

    #scws_webshop nav#steps ul li:not(.active) {
        width: 10%;
    }

    #scws_webshop nav#steps ul li:not(.complete):after {
        font-family: 'Font Awesome 5 Free';
        -webkit-font-smoothing: antialiased;
        content: '\f192';
        margin-left: calc(50% - 0.5em);
    }

    #scws_webshop nav#steps ul li:not(.enabled).complete:before {
        font-family: 'Font Awesome 5 Free';
        -webkit-font-smoothing: antialiased;
        content: '\f192';
        margin-left: calc(50% - 0.5em);
    }

    #scws_webshop nav#steps ul li.enabled.complete:after,
    #scws_webshop nav#steps ul li.enabled:after {
        margin-left: 2px;
    }

    #scws_webshop nav#steps ul li:not(.active) span {
        display: none;
    }

    #scws_webshop #step_main {
        flex-direction: column;
    }

    #scws_webshop #step_main_content #products {
        flex-direction: column;
    }

    #scws_webshop #step_main_content .main_content_step {
        padding: 0 1em;
        margin: 0;
    }

    #scws_webshop #step_main_content #products .product {
        width: 100%;
    }

    #scws_webshop #step_main_content #step_subscription #subscriptions {
        flex-direction: column;
    }

    #scws_webshop #step_main_content #step_product-color #product-colors .product_color {
        max-width: calc(50% - 1em);
        flex: auto;
    }

    #scws_webshop #step_main_content #step_product-options #product-options .product_option,
    #scws_webshop #step_main_content #step_product-options-2 #product-options-2 .product_option {
        max-width: calc(50% - 1em);
        flex: auto;
    }

    #scws_webshop #step_main_content #step_product-options #product-options .product_option:last-of-type,
    #scws_webshop #step_main_content #step_product-options-2 #product-options-2 .product_option:last-of-type {
        max-width: 100%;
        flex: 3;
    }

    body:has(#scws_webshop, #CookiebotWidget) #CookiebotWidget {
        display: none;
    }

}