:root :where( .wp-block-woocommerce-product-template ) {
    &:is(.columns-1,.columns-2,.columns-3,.columns-4,.columns-5,.columns-6) {
        row-gap: 44px;
        margin: 0;
        display: grid;
        padding: 0;
        list-style: none;
        align-items: flex-start;
    }

    @media(max-width: 425px) {
        &:is(.columns-1,.columns-2,.columns-3,.columns-4,.columns-5,.columns-6) {
            grid-template-columns: repeat(1,minmax(0,1fr));
        }
    }

     @media (min-width: 426px) and (max-width:767px) {
        &:is(.columns-1,.columns-2,.columns-3,.columns-4,.columns-5,.columns-6) {
            grid-template-columns: repeat(2,minmax(0,1fr));
        }
    }

    @media (min-width: 768px) and (max-width:1023px) {
        &:is(.columns-1,.columns-2,.columns-3,.columns-4,.columns-5,.columns-6) {
            grid-template-columns: repeat(3,minmax(0,1fr));
        }

        &:is(.columns-1,.columns-2,.columns-3,.columns-4,.columns-5,.columns-6) {
            grid-template-columns: repeat(3,minmax(0,1fr));
        }
    }

    .wp-block-woocommerce-product-price {
        order: 1;
    }

    .wc-block-components-product-sale-badge {
        padding: 3px 9px;
        display: none;
        place-items: center;
        background-color: color-mix(in srgb, var(--wp--preset--color--danger) 10%, transparent);
        color: var(--wp--preset--color--danger);
        font-size: 12px;
        left: 20px;
        top: 20px;
        font-weight: 500;
        position: absolute;
        text-transform: capitalize;
        z-index: 1;
        border-width: 0;
        line-height: 12px;
        border-radius: 50px;

        @media (min-width:600px) {
            display: flex;
        }
    }

    .wc-block-components-product-image {
        margin-bottom: 24px;
        display: flex;
        background-color: var(--wp--preset--color--gray-100);
        border-radius: clamp(0.875rem, 0.875rem + ((1vw - 0.48rem) * 0.24), 1rem);
        .wc-block-components-product-sale-badge--align-right {
            right: 20px;
            left: auto;
            top: 20px;
        }

        .wc-block-components-product-sale-badge--align-left {
            left: 20px;
            top: 20px;
        }

        a {
            width: 100%;
        }

        img {
            aspect-ratio: 1/1;
            width: 100%;
            object-fit: cover;
            max-height: 330px;
            border-radius: clamp(0.875rem, 0.875rem + ((1vw - 0.48rem) * 0.24), 1rem);

            @media (min-width:768px) {
                aspect-ratio: 4/5;
            }
        }
    }

    .wp-block-post-title {
        font-size: clamp(14px, 0.875rem + ((1vw - 7.68px) * 0.481), 16px);
        text-align: left;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        margin-bottom: 8px;
        margin-top: 0;
        font-weight: 600;

        @media (min-width:768px) {
            -webkit-line-clamp: 2;
        }

        &,a {
            color: var(--wp--preset--color--gray-800);

            &:hover,
            &:focus {
                color: var(--wp--preset--color--primary);
            }
        }
    }

    .wc-block-grid__products .wc-block-grid__product .wc-block-components-product-image .wc-block-components-product-sale-badge--align-right,
    .wc-block-components-product-image .wc-block-components-product-sale-badge--align-right {
        right: 20px;
        left: auto;
        top: 20px;
    }

    .wc-block-grid__products .wc-block-grid__product .wc-block-components-product-image .wc-block-components-product-sale-badge--align-left,
    .wc-block-components-product-image .wc-block-components-product-sale-badge--align-left {
        left: 20px;
        top: 20px;
    }

    .wc-block-components-product-price {
        display: flex;
        flex-wrap: wrap;
        column-gap: 6px;
        color: var(--wp--preset--color--gray-700);
        margin-bottom: 14px;
        font-weight: 400;
        align-items: center;
        font-size: clamp(12px, 0.875rem + (1vw - 0.48rem) * 0.24, 1rem);

        ins {
            order: -1;
        }

        del  {
            font-size: clamp(10px, 0.875rem + (1vw - 0.48rem) * 0.24, 14px);
            color: var(--wp--preset--color--gray-500);
        }
    }

    .product,
    .wc-block-grid__product,
    .wp-block-post {
        display: grid;
        transition: .3s ease-in-out;
        position: relative;
        border-width: 0;

        > .button,
        > .wc-block-grid__product-add-to-cart .wp-element-button,
        > .wc-block-grid__product-add-to-cart .added_to_cart,
        > .wc-block-components-product-button .added_to_cart,
        > .wc-block-components-product-button .add_to_cart_button,
        > .wc-block-components-product-button a.wp-element-button,
        > .added_to_cart {
            width: auto;
            line-height: 1.8;
            padding: 0;
            position: relative;
            align-items: start;
            display: flex;
            gap: 8px;
            font-size: 14px;
            background-color: var(--wp--preset--color--light);
            color: var(--wp--preset--color--gray-800);
            flex-flow: row-reverse;
            overflow: hidden;
            border-radius: 0;
            justify-content: flex-end;
            margin-top: 8px;

            @media (min-width:768px) {
                justify-content: center;
                margin-top: 0;
                text-indent: -999px;
                padding-left: 10px;
            }

            &:is(:hover,:focus) {
                background-color: var(--wp--preset--color--light);
                text-indent: 0;
                color: var(--wp--preset--color--primary);
            }
            
            &::before {
                content: "\F243";
                font-family: "bootstrap-icons";
                text-indent: 0;
                font-size: 16px;
            }
        }

        > .button,
        > .added_to_cart,
        > .wp-block-button {
            @media (min-width:768px) {
                position: absolute;
                right: 0;
                bottom: 10px;
            }
        }

        span[data-wp-bind--hidden="!selectors.woocommerce.displayViewCart"]:not([hidden]),
        span[data-wp-bind--hidden="!state.displayViewCart"]:not([hidden]) {
            position: absolute;
            right: 0px;
            bottom: 0px;
            margin-bottom: 0;

            .added_to_cart {
                overflow: visible;
                text-indent: -74px;
                font-size: 14px;
                color: var(--wp--preset--color--primary);

                &::before{
                    background-image:  url('data:image/svg+xml,<svg width="16px" height="16px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.00016 13.9168C5.95414 13.9168 5.91683 13.9541 5.91683 14.0002C5.91683 14.0462 5.95414 14.0835 6.00016 14.0835C6.04619 14.0835 6.0835 14.0462 6.0835 14.0002C6.0835 13.9541 6.04619 13.9168 6.00016 13.9168ZM4.75016 14.0002C4.75016 13.3098 5.30981 12.7502 6.00016 12.7502C6.69052 12.7502 7.25016 13.3098 7.25016 14.0002C7.25016 14.6905 6.69052 15.2502 6.00016 15.2502C5.30981 15.2502 4.75016 14.6905 4.75016 14.0002Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M13.3335 13.9168C13.2875 13.9168 13.2502 13.9541 13.2502 14.0002C13.2502 14.0462 13.2875 14.0835 13.3335 14.0835C13.3795 14.0835 13.4168 14.0462 13.4168 14.0002C13.4168 13.9541 13.3795 13.9168 13.3335 13.9168ZM12.0835 14.0002C12.0835 13.3098 12.6431 12.7502 13.3335 12.7502C14.0239 12.7502 14.5835 13.3098 14.5835 14.0002C14.5835 14.6905 14.0239 15.2502 13.3335 15.2502C12.6431 15.2502 12.0835 14.6905 12.0835 14.0002Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M0.0834961 0.666829C0.0834961 0.344663 0.344663 0.0834961 0.666829 0.0834961H3.3335C3.61153 0.0834961 3.85092 0.279721 3.90549 0.552346L4.47881 3.41683H15.3335C15.5073 3.41683 15.6721 3.49437 15.783 3.62832C15.8938 3.76227 15.9391 3.93867 15.9065 4.10944L14.839 9.70714C14.7514 10.1484 14.5113 10.5447 14.1609 10.8268C13.8121 11.1076 13.376 11.2573 12.9284 11.2502H6.4586C6.01098 11.2573 5.5749 11.1076 5.22607 10.8268C4.8758 10.5448 4.63582 10.1487 4.54811 9.70764L3.43395 4.14103C3.42974 4.12406 3.42628 4.10679 3.42359 4.08926L2.85535 1.25016H0.666829C0.344663 1.25016 0.0834961 0.988996 0.0834961 0.666829ZM4.71232 4.5835L5.69232 9.47985C5.72661 9.6525 5.82054 9.80759 5.95765 9.91796C6.09476 10.0283 6.26633 10.087 6.44232 10.0836L6.4535 10.0835H12.9335L12.9447 10.0836C13.1207 10.087 13.2922 10.0283 13.4293 9.91796C13.566 9.80799 13.6597 9.65364 13.6943 9.48175L13.6947 9.47985L14.6284 4.5835H4.71232Z" fill="white"/></svg>') !important;
                    background-repeat: no-repeat !important;
                    background-position: center center !important;
                }

                &::after{
                    position: absolute;
                    width: 30px;
                    height: 30px;
                    left: 30px;
                }

                &:not(:hover) {
                    overflow: hidden;
                    text-indent: -80px;
                    padding: 0;
                }
            }
        }

        .price,
        .wc-block-components-product-price {
            margin-bottom: 0;
            width: calc(100% - 34px);
        }

        .wc-block-grid__product-add-to-cart > .added_to_cart,
        > .wc-block-components-product-button .added_to_cart,
        > .added_to_cart {
            background-color: transparent;
            color: var(--wp--preset--color--gray-800);
            font-weight: 600;
            font-size: 14px;

            &:is(:hover,:focus) {
                background-color: transparent;
                color: var(--wp--preset--color--primary);
            }
        }

        .wc-block-grid__product-add-to-cart,
        .wc-block-grid__product-rating {
            margin: 0;
        }

        .wc-block-grid__product-add-to-cart {
            margin-top: auto;
        }

        .wc-block-grid__product-price {
            margin-right: 0;
            margin-left: 0;
        }

        div[data-block-name="woocommerce/product-button"] > button.added,
        > .button.added,
        > .wc-block-grid__product-add-to-cart:not(.wc-block-components-product-button) .wp-element-button.added {
            display: none;
        }
    }


    .product {
       >.wp-block-button .wp-element-button.added {
            display: none;
        }
    } 
}

.products-block-post-template {
    .product {
       >.wp-block-button .wp-element-button.added {
            display: none;
        }
    }
}

.wc-block-grid__product-add-to-cart.wp-block-button {
    .wp-block-button__link {
    margin-right: 0 !important;
    margin-left: 0 !important;

        &.loading:after,
        &.added:after {
            margin: 0;
            font-family: "bootstrap-icons";
            display: none;

            @media (min-width:768px) {
                display: block;
            }
        }

        &.loading.added:after {
            content: "\F116";
        }

        &.added:not(.loading):after {
            content: "\F272";
        }
    }
}

.demo_store {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 0;
    padding: 1em 1.41575em;
    background-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--light);
    z-index: 9998;

}

.demo_store a {
    color: var(--wp--preset--color--light);
    font-weight: 400;
    text-decoration: underline;
}

.demo_store a.woocommerce-store-notice__dismiss-link {
    display: block;
}

@media (min-width: 768px) {
    .demo_store a.woocommerce-store-notice__dismiss-link {
        background: rgba(0,0,0,.1);
        float: right;
        display: inline-block;
        margin: -1em -1.41575em -1em 0;
        padding: 1em 1.41575em;
    }
}