/*WoocommerceSleeve*/

/*Vars Overwrite*/

:root{
    --woocommerce: var(--wp--preset--color--ci) !important;
    --wc-green: var(--wp--preset--color--ci) !important;
    --wc-red: var(--wp--preset--color--ci) !important;
    --wc-orange: var(--wp--preset--color--ci) !important;
    --wc-blue: var(--wp--preset--color--ci) !important;
    --wc-primary: var(--wp--preset--color--ci) !important;
    --wc-primary-text:  var(--wp--preset--color--light) !important;
    --wc-secondary: var(--wp--preset--color--mid) !important;
    --wc-secondary-text: var(--wp--preset--color--text) !important;
    --wc-highlight: var(--wp--preset--color--ci) !important;;
    --wc-highligh-text: white;
    --wc-content-bg: var(--wp--preset--color--light) !important;
    --wc-subtext:  var(--wp--preset--color--text) !important;
    --wc-form-border-color: rgba(32, 7, 7, 0.8);
    --wc-form-border-radius: var(--border-radius);
    --wc-form-border-width: 2px;    
}


.wp-container-woocommerce-product-template-is-layout-edd8cd53{
    align-items: stretch !important;

    
}

.is-product-collection-layout-carousel .wc-block-product{
        display: flex;
        flex-direction: column;

        .wp-block-button.wc-block-components-product-button{
            margin-top: auto;
        }
    }

.woocommerce-cart,
.woocommerce-checkout{
--wp--preset--font-size--small: 1em !important;
}

/*Elements*/

section{

    &.products{
        margin-top: var(--mainpadding);
    }
}

.woocommerce div.product div.images,
.woocommerce div.product div.summary{
    margin-bottom: var(--mainpadding);
}

.cart-link{
    position: relative;

    svg{
        width: 2rem;
        height: auto;
    }

    .bullet{
        position: absolute;
        top: -1.25rem;
        right: -1.25rem;
        background-color: var(--wp--preset--color--ci);
        color: var(--wp--preset--color--light);
        font-size: 1rem;
        border-radius: 5rem;
        padding: .5rem;
        transition: var(--maintrans);
        aspect-ratio: 1 / 1;
        width: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    &:hover{

        .bullet{
            background: var(--wp--preset--color--dark);
        }
    }
}


    .woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price, .woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price{
        color: var(--wp--preset--color--ci) !important;
    }

    .woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price, .woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price{
        color: var(--wp--preset--color--ci) !important; 
    }

    .woocommerce span.onsale,
    .wc-block-components-product-sale-badge{
        background: var(--wp--preset--color--ci) !important;
        color: var(--wp--preset--color--light) !important;
        aspect-ratio: 1 / 1;
        display: flex !important;
        align-items: center;
        font-weight: normal;
        padding: 1em;
        line-height: 1;
        top: -2em;
        left: -2em;
        border-radius: 100% !important;
    }

    .woocommerce ul.products li.product .onsale{
        margin: -1.5em -1.5em 0 0;
    }

    .wc-block-components-product-badge{
        background: var(--wp--preset--color--ci) !important;
        color: var(--wp--preset--color--light) !important;
        border-radius: var(--border-radius);
        padding: .5em !important;
    }

   

    .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt,
    .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button{
        background: var(--wp--preset--color--ci) !important;
        transition: var(--maintrans);
        color: var(--wp--preset--color--light) !important;
        font-weight: 600 !important;
        padding: .5em 1em !important;
        font-size: initial !important;
        border-radius: var(--border-radius) !important;


        &:hover{
            background: var(--wp--preset--color--dark) !important;
        }
    }


    .woocommerce div.product div.images .flex-control-thumbs{
        display: flex;
        flex-wrap: wrap;

        li{
            width: 10%;
        }
    }

    .woocommerce ul.products li.product .woocommerce-loop-product__title,
    .wc-block-product h2{
        font-size: 1.25em !important;
        text-transform: none;
        text-align: center;
    }

    .woocommerce:where(body:not(.woocommerce-uses-block-theme)) ul.products li.product .price{
        color: var(--wp--preset--color--ci) !important;
       
    }

    .woocommerce ul.products li.product, .woocommerce-page ul.products li.product{
        text-align: center !important;
    }


    /*Shopseite abstellen*/

    .woocommerce-shop .woocommerce{
        display: none;
    }

    .woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images{
        width: 35vw;
    }

    .woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary{
        width: 45vw;
    }

    .wc-block-product-template__responsive{
        gap: var(--mainpadding) !important;
    }

    .woocommerce-error, .woocommerce-info, .woocommerce-message {
        margin: 0 0 var(--mainpadding);
        background-color: var(--wp--preset--color--dark);
        color: var(--wp--preset--color--light);
        border-top: 0;
        border-radius: var(--border-radius);
        outline: none;

        &::before{
            color: var(--wp--preset--color--ci);
        }
    }

    .wc-block-components-totals-wrapper,
    .wc-block-cart__main .wc-block-cart-items td{
        border-top: var(--mainborder) !important;
    }

    .wc-block-cart .wp-block-woocommerce-cart-order-summary-block,
    .wc-block-cart__main .wc-block-cart-items{
        border-bottom: var(--mainborder) !important;
    }

    .wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]{
        border: var(--mainborder) !important;
    }


    @media screen and (max-width: 768px) {
         .woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images{
            width: 100%;
        }

        .woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary{
            width: 100%;
        }
    }

    .wp-block-woocommerce-checkout-order-summary-block,
    .wc-block-components-form .wc-block-components-text-input input[type=email], .wc-block-components-form .wc-block-components-text-input input[type=number], .wc-block-components-form .wc-block-components-text-input input[type=password], .wc-block-components-form .wc-block-components-text-input input[type=tel], .wc-block-components-form .wc-block-components-text-input input[type=text], .wc-block-components-form .wc-block-components-text-input input[type=url], .wc-block-components-text-input input[type=email], .wc-block-components-text-input input[type=number], .wc-block-components-text-input input[type=password], .wc-block-components-text-input input[type=tel], .wc-block-components-text-input input[type=text], .wc-block-components-text-input input[type=url],
    .wc-blocks-components-select .wc-blocks-components-select__select{
        border: var(--mainborder) !important;
        height: auto !important;
    }

    .wc-block-components-form .wc-block-components-text-input input[type=email], .wc-block-components-form .wc-block-components-text-input input[type=number], .wc-block-components-form .wc-block-components-text-input input[type=password], .wc-block-components-form .wc-block-components-text-input input[type=tel], .wc-block-components-form .wc-block-components-text-input input[type=text], .wc-block-components-form .wc-block-components-text-input input[type=url], .wc-block-components-text-input input[type=email], .wc-block-components-text-input input[type=number], .wc-block-components-text-input input[type=password], .wc-block-components-text-input input[type=tel], .wc-block-components-text-input input[type=text], .wc-block-components-text-input input[type=url],
    .wc-blocks-components-select .wc-blocks-components-select__select{
        padding: 1em !important;
    }

    .wc-block-components-form .wc-block-components-text-input label, .wc-block-components-text-input label{
        top: 1.8em !important;
        left: 1em !important;
    }

    .wc-block-components-form .wc-block-components-text-input input:-webkit-autofill+label, .wc-block-components-form .wc-block-components-text-input.is-active label, .wc-block-components-text-input input:-webkit-autofill+label, .wc-block-components-text-input.is-active label {
        top: 0 !important;
        transform: scale(.5);
        opacity: 0;
    }

    .wc-blocks-components-select .wc-blocks-components-select__label{
        display: none;
    }

    .wp-block-woocommerce-checkout-order-summary-totals-block .wc-block-components-totals-wrapper{
        border: 0 !important;
    }

    .wp-block-woocommerce-checkout-order-summary-totals-block,
    .wc-block-checkout__terms.wc-block-checkout__terms--with-separator{
        border-top: var(--mainborder) !important;
    }


    .input-text.qty.text{
        height: 32px;
        box-sizing: border-box;
    }


    .single-product .product{
        .summary .price{
            font-weight: 600 !important;
            font-size: 1.85em !important;
        }

        

    }

    .woocommerce div.product .woocommerce-tabs ul.tabs::before,
        .woocommerce div.product .woocommerce-tabs ul.tabs li,
        .woocommerce div.product .woocommerce-tabs ul.tabs li::after, .woocommerce div.product .woocommerce-tabs ul.tabs li::before{
            border-color: var(--wp--preset--color--ci);
        }

        .woocommerce div.product .woocommerce-tabs ul.tabs li.active a{
            color: var(--wp--preset--color--ci) !important;
            font-weight: 600 !important;
        }