main{
    #products, #product, #checkout, #page, #order, #orders{
        display: none;
    }
    &[tab="products"]{
        #products{
            display: initial;
        }
    }
    &[tab="product"]{
        #product{
            display: initial;
        }
    }
    &[tab="checkout"]{
        #checkout{
            display: initial;
        }
    }
    &[tab="page"]{
        #page{
            display: initial;
        }
    }
    &[tab="order"]{
        #order{
            display: initial;
        }
    }
    &[tab="orders"]{
        #orders{
            display: initial;
        }
    }
}

[cart_itemcount]:not([cart_itemcount="0"]){
    &::after{
        content: attr(cart_itemcount);
        --background-color: var(--color-tertiary);
        --color: var(--color-tertiary-contrast);
        padding: calc(var(--layout-padding) /2);
    }
}

#product, #products, #checkout, #checkout_items, #order, #order_items, #orders, .overlay-widerruf .overlay-main {
    overflow-y: scroll;
    >table{
        display: flex;
        flex-direction: column;
        >caption{
            margin-bottom: var(--layout-padding-outside);
            padding: var(--layout-padding);
            --text-scale: 1.5;
            font-weight: 900;
            >details{
                >div{
                    padding: var(--layout-padding);
                    --text-scale: 1;
                    text-align: justify;
                }
            }
        };
        >thead>tr, >caption{
            --background-color: var(--color-secondary);
            --color: var(--color-secondary-contrast);
        }
        >thead>tr{
            display: grid;
            padding: var(--layout-padding);
            &:not(:has(:not(:empty))){
                display: none;
            }
        }
        >tbody, >tfoot{
            >tr{
                display: grid;
                padding: var(--layout-padding);
                box-sizing: border-box;
                >td,>th{
                    padding: var(--layout-padding);
                    box-sizing: border-box;
                }
                >th{
                    &, *{
                        font-weight: bold;
                    }
                }
                >td{
                    display: grid;
                    grid-template-columns: 100%;
                }
            }
        }
    }
}

#product>table>tbody>tr{
    grid-template-columns: 50% 50%;
    grid-template-areas: 
        'i v'
        'i w'
        'i s'
        'i l'
        'i c'
        'i t'
        'd d'
        'g g'
        ;
}

@media (orientation: landscape){
    #product>table>tbody>tr{
        grid-template-columns: 1fr 1fr 2fr;
        grid-template-areas: 
            'i v d'
            'i w d'
            'i s d'
            'i l d'
            'i c d'
            'i t d'
            'g g g'
            ;
    }
}

#product_title::before{
    margin-left: 0;
    margin-top: 0;
    margin-bottom: 0;
}

#product_description{
    grid-area: d;
}

#product_images{
    grid-area: i;
}

#product_variants{
    grid-area: v;
}

#product_weight{
    grid-area: w;
}

#product_stock{
    grid-area: s;
}

#product_legal{
    grid-area: l;
}

#product_cart{
    grid-area: c;
}

#product_tags{
    grid-area: t;
}

#product_tables{
    grid-area: g;
}

#product_description, #product_legal{
    text-align: justify
}

#product_cart, #product_weight, #product_stock, #product_tags{
    text-align: center;
    display: block !important;
}

#product_stock{ 
    &, *{
        font-weight: bold;
    }
}

#product_cart{
    visibility: hidden;
}

#product:not(:has(fieldset:invalid)){

    #product_stock:has([itemprop="availability"][href="https://schema.org/InStock"]){
        &~#product_cart{
            visibility: visible;
        }
    }
}

#product:has(form:invalid){
    #product_stock{
        :not(.price_unit){
            visibility: hidden;
        }
    }
}

#product_tags, .products-tags{
    >*{
        margin: var(--layout-margin);
        display: inline-block;
    }
}

#product_tables, .payment-widget span{
    >table{
        table-layout: fixed;
        width: 100%;
        td, th, caption{
            padding: var(--layout-padding);
        }
        th{
            --color: var(--color-primary-contrast);
            --background-color: var(--color-primary);
            text-align: end;
        }
        th[scope="col"]{
            text-align: start;
        }
        td, caption{
            --color: var(--color-secondary-contrast);
            --background-color: var(--color-secondary);
        }
        &:not(:first-child){
            margin-top: var(--layout-padding-outside);
        }
    }
}

#checkout:not(:has(#checkout_items_body>tr)){
    >table>tbody>tr:not(:first-child){
        display: none;
    }
}

#checkout:has(#checkout_items_body>tr) #checkout_empty{
    display: none;
}

#checkout:not(.checkout_items_invalid)>table>tbody>tr:has(#checkout_validation){
    display: none;
}

#checkout{
    &.checkout_items_invalid, &:has(.product_out_of_stock){
    >table>tbody>tr{
        &:not(:has(#checkout_items)):not(:has(#checkout_validation)){
            display: none;
        }
    }
}
}

#checkout_items_body, #order_items_body, #products_body:not(.products_cards), #orders_body{
    display: table !important;
    border-collapse: collapse;
    img, td:has(>img:only-child){
        width: calc(min(10vw, 10vh));
        height: calc(min(10vw, 10vh));
        object-fit: cover;
    }
    >tr{
        display: table-row !important;
        border-top: var(--color) var(--layout-border-width) solid;
        border-bottom: var(--color) var(--layout-border-width) solid;
        border-radius: 0;
        >td, >th{
            align-content: center;
            text-align: left;
            display: table-cell !important;
            >.toggler{
                margin: calc(var(--layout-padding)/2);
                &:first-child{
                    margin-left: 0;
                }
                &:last-child{
                    margin-right: 0;
                }
            }
        }
    }
}

tr:has(#order_subtotal), tr:has(#order_shipping), tr:has(#order_total),
tr:has(#checkout_subtotal), tr:has(#checkout_shipping), tr:has(#checkout_total){
    >*{
        text-align: right;
    }
}

@media (orientation: landscape){
    #checkout_addresses, #order_addresses{
        grid-auto-flow: column;
        grid-template-columns: 1fr 1fr;
    }
}

#order_items_body, #checkout_items_body{
    input:disabled{
        display: none;
    }
    .price_unit+span+span{
        font-weight: 900;
        --text-scale: 1.5;
    }
}

#order_items .price_unit~span, #order_subtotal, #order_shipping, #order_total{
    >span{
        padding: 0;
        text-decoration-thickness: calc(var(--layout-font-size) * var(--text-scale) / 7);
        text-decoration-color: var(--color-highlight);
    }
}

table>thead:has(#products_filter){
    position: sticky;
    top: var(--real-header-height);
    margin-left: calc( -1 * var(--layout-padding-outside));
    margin-right: calc( -1 * var(--layout-padding-outside));
    >tr{
        border-radius: 0;
    }
}

#products_filter{
    .range{
       width:  calc(var(--layout-font-size)*20);
       input{
        height: calc(var(--layout-font-size));
       }
    }
    .toggler{
       width:  calc(var(--layout-font-size)*13);
    }
    >details>summary{
        >span{
            width: 80vw;
            display: inline-flex;
            >input{
                flex-grow: 1;
            }
        }
        .products_filtered{
            display: none;
        }
    }
    span{
        display: inline-block;
    }
    &.products_filter_active{
        >details>summary{
            &::marker{
                color: var(--color-highlight);
            }
            &::marker{
                text-shadow: var(--layout-border-width) 0px 0px var(--color-highlight), 0px var(--layout-border-width) 0px var(--color-highlight), calc(-1 * var(--layout-border-width)) 0px 0px var(--color-highlight), 0px calc(-1 * var(--layout-border-width)) 0px var(--color-highlight);
            }
            .products_filtered{
                display: inline-grid;
                justify-content: center;
                align-content: center;
                background: var(--color-highlight);
                margin: var(--layout-margin);
                font-weight: 900;
            }
        }
    }
}

#products_sort{
    --background-color: var(--color-primary);
    --color: var(--color-primary-contrast);
    margin: calc( -1 * var(--layout-padding));
    border-radius: 0;
}

#products_body.products_cards{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    img{
        height: 100%;
        width: 100%;
        object-fit: cover;
        --border-radius: 0;
    }
    >tr{
        border-radius: var(--layout-border-radius);
        >*{
            display: initial;
            align-content: center;
            text-align: center;
            height: 100%;
            width: 100%;
            padding: 0;
            &.products-tags, >*{
                margin: 0;
                overflow: hidden;
                &:not(.toggler, .products-tags){
                    display: inline-block;
                    height: inherit;
                }
            }
        }
        width: calc(15.75 * var(--layout-font-size));
        height: calc(25.5 * var(--layout-font-size));
        flex-grow: 0;
        flex-shrink: 0;
        grid-auto-flow: row;
        grid-template-rows: calc(10% - var(--layout-padding)) calc(45% - var(--layout-padding)) calc(10% - var(--layout-padding)) calc(15% - var(--layout-padding)) calc(10% - var(--layout-padding)) calc(10% - var(--layout-padding));
        grid-template-areas: 
        's'
        'i'
        'n'
        'v'
        'p'
        't';
        margin: var(--layout-padding-outside);
        padding: 0;
        grid-row-gap: var(--layout-padding);
        grid-column-gap: var(--layout-padding);
        border: var(--color) var(--layout-border-width) solid;
        &#products_filter_no_matches{
            grid-template-areas: initial;
            grid-template-rows: 100%;
        }
    }

    .products-title{
        grid-area: n;
    }

    .products-img{
        display: block;
        grid-area: i;
    }

    .products-variants{
        grid-area: v;
    }

    .products-stocked{
        grid-area: s;
    }

    .products-price{
        grid-area: p;
    }

    .products-tags{
        grid-area: t;
    }

    .products-price, .products-tags{
        *~*{
            margin-left: var(--layout-padding);
        }
    }
}

#category_title, #category_description_full summary{
    &::marker{
        content: none;
    }
}

#category_description_full{
    padding: 0 !important;
    text-align: center;
}

#products_filter_no_matches>th, #orders_no_matches>th{
    text-align: center !important;
}

#order{
    tr:has(#order_tracking:empty){
        display: none;
    }
    tr:has(#order_payments:empty){
        display: none;
    }
    tr:has(#order_refund_head:empty){
        display: none;
    }
    tr:has(#order_note:empty){
        display: none;
    }
}


#order_description{
    display: flex;
    flex-direction: column;
    >time{
        padding: var(--layout-padding);
    }
    >meter{
        width: 75%;
        align-self: center;
        height: var(--layout-padding);
    }
    >span{
        display: flex;
        flex-direction: row;
        padding: 0;
        >label{
            text-align: center;
            width: 25%;
            padding: 0;
        }
    }
}

#order_refund>div{
    display: flex;
    flex-direction: column;
}

.overlay-widerruf{
    td{
        display: grid;
    }
}

input[type="submit"]:not([value="Find"]), input[type="button"], input[type="reset"],
#order_refund button, #order_items_body button,
#product_variants>fieldset .toggler{
    --background-color: var(--color-primary);
    --color: var(--color-primary-contrast);
}

#product_variants>fieldset .toggler:has(:checked){
    --background-color: var(--color-secondary);
    --color: var(--color-secondary-contrast);
}

.variant-display{
    display: inline-block;
    text-align: center;
    --font-family: var(--layout-font-family-sans);
}