.wp-block-woocommerce-cart {
    .cart-collaterals {
        display: none;
    }

    .woocommerce {
        max-width: none !important;
    }
}

table.woocommerce-cart-form__contents {
    display: block;
    border: none !important;

    .woocommerce-cart-form__cart-item {
        position: relative;
        display: grid !important;
        column-gap: var(--wp--preset--spacing--40);
        grid-template-areas:
            'thumbnail thumbnail'
            'title remove'
            'quantity price'
        ;
        grid-template-columns: 1fr 1fr;
        align-items: center;

        @media screen and (min-width: 1025px) {
            grid-template-areas:
                'thumbnail title remove'
                'thumbnail quantity price'
            ;
            grid-template-columns: auto 1fr 1fr;
            padding-inline-end: var(--wp--preset--spacing--40);
        }

        @media screen and (max-width: 1279px) {
            row-gap: var(--wp--preset--spacing--20);
        }

        @media screen and (min-width: 1280px) {
            grid-template-areas: 'thumbnail title quantity price remove';
            grid-template-columns: auto 1fr repeat(3, auto);
            padding-inline-end: var(--wp--preset--spacing--60);
        }

        width: 100%;
        margin-block-end: 80px;
        border-radius: var(--wp--custom--border-radius--block);
        background-color: white;
        box-shadow: var(--box-shadow-bottom);

        &::after {
            content: "";
            position: absolute;
            display: block;
            left: 0;
            right: 0;
            bottom: -40px;
            border-bottom: 1px solid var(--wp--preset--color--accent-4);
            z-index: 0;
        }
    }

    .product-thumbnail { grid-area: thumbnail; }
    .product-name,
    .product-metadata { grid-area: title; }
    .product-price { grid-area: price; }
    .product-quantity { grid-area: quantity; }
    .product-remove { grid-area: remove; }
    .product-prices,
    .product-remove { justify-self: end; }

    td,
    tbody {
        display: block;
    }

    td {
        display: flex;
        align-items: center;
        padding: 0 !important;
        text-align: left !important;
        border: none !important;
        background: none !important;

        &::before {
            display: none;
        }
    }

    thead {
        display: none;
    }

    .actions .wp-element-button {
        display: none;
    }

    .product-thumbnail {
        order: 0;
        display: block !important;
        width: auto !important;
        overflow: clip;
        border-top-left-radius: var(--wp--custom--border-radius--block);
        background-color: #E0E0E0 !important;

        img {
            aspect-ratio: 23 / 13;
            object-fit: cover;
            width: auto !important;
            height: 100%;
        }

        @media screen and (max-width: 1024px) {
            border-top-right-radius: var(--wp--custom--border-radius--block);

            img {
                min-width: 100%;
            }
        }

        @media screen and (min-width: 1025px) {
            max-width: 460px;
            border-bottom-left-radius: var(--wp--custom--border-radius--block);

            img {
                max-width: 460px;
            }
        }
    }

    .product-name {
        display: block;
        align-items: start;
        order: 1;
        color: var(--wp--preset--color--accent-2);
        font-size: 32px;
        font-weight: 700;
    }

    .product-name__title {
        display: block;
    }

    .product-name__category {
        color: var(--wp--preset--color--accent-5);
        font-size: 16px;
        font-weight: 700;
    }

    .product-price {
        order: 3;
        justify-content: end;
        font-size: 25px;
        font-weight: 700;
        color: var(--wp--preset--color--accent-2);
    }

    .product-quantity {
        order: 2;

        input {
            width: 44px !important;
            height: 44px !important;
            border-radius: 10px;
            border: 1px solid var(--wp--preset--color--accent-4);
        }

        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            /*display: none;*/
            /* display: none; <- Crashes Chrome on hover */
            -webkit-appearance: none;
            margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
        }

        input[type=number] {
            -moz-appearance:textfield;
        }

        @media screen and (min-width: 1280px) {
            margin-inline-start: auto;
        }
    }

    .product-remove {
        order: 5;
        width: auto !important;

        a {
            position: relative;
            width: 30px;
            height: 30px;
            text-indent: -9999px;

            &:hover {
                background: none !important;
            }
        }

        a::after {
            content: url('data:image/svg+xml,<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><rect y="22.6274" width="32" height="2" rx="1" transform="rotate(-45 0 22.6274)" fill="%23999999"/><rect x="1.41406" width="32" height="2" rx="1" transform="rotate(45 1.41406 0)" fill="%23999999"/></svg>');
            position: absolute;
            inset: 0;
            text-indent: 0;
        }
    }

    .product-subtotal {
        display: none !important;
    }

    @media screen and (max-width: 1024px) {
        tr {
            flex-direction: column;
            padding-block-end: 20px;
        }

        .product-name,
        .product-quantity {
            padding-inline-start: 20px !important;
        }

        .product-remove,
        .product-price {
            padding-inline-end: 20px !important;
        }
    }
}

@media screen and (max-width: 1024px) {
    .woocommerce,
    .woocommerce-page {
        table.shop_table_responsive tr.woocommerce-cart-form__cart-item {
            td.product-name,
            td.product-quantity {
                text-align: left !important;
            }
        }
    }
}

.wc-block-cart__sidebar,
.wp-block-woocommerce-cart-totals-block {
    display: none !important;
}

.wc-block-cart .wp-block-woocommerce-cart-items-block {
    padding: 0;
    margin: 0;
    width: 100%;
    border-radius: var(--wp--custom--border-radius--block);
}

.wc-block-cart-item__image {
    overflow: clip;
    border-top-left-radius: var(--wp--custom--border-radius--block);
    background-color: #E0E0E0 !important;

    img {
        object-fit: cover;
        max-width: none;
        height: 100%;
    }

    a {
        aspect-ratio: 23 / 13;
        display: block;
    }


    @media screen and (max-width: 1024px) {
        border-top-right-radius: var(--wp--custom--border-radius--block);
    }

    @media screen and (min-width: 1025px) {
        border-bottom-left-radius: var(--wp--custom--border-radius--block);

        a {
            max-width: 460px;
        }
    }
}

.wp-block-woocommerce-cart {
    margin-block-start: 0;
}

.wp-block-woocommerce-cart-header {
    @media screen and (min-width: 769px) {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;

        .wp-block-button {
            margin-block-start: 0;
        }
    }
}

.wp-block-woocommerce-cart-items-block :where(table, tbody, tr, td) {
    display: block;
}

.wc-block-cart-item__total,
.wp-block-woocommerce-cart-items-block thead {
    display: none;
}

.wp-block-woocommerce-cart-items-block tbody > * + * {
    margin-top: 20px;
}

:is(
.is-mobile,
.is-small,
.is-medium,
.is-large
).wc-block-cart table.wc-block-cart-items {
    border: none;

    .wc-block-cart-items__row {
        position: relative;
        padding: 0;
        box-shadow: var(--box-shadow-bottom);
        margin-block-end: 80px;

        &::after {
            content: "";
            position: absolute;
            display: block;
            left: 0;
            right: 0;
            bottom: -40px;
            border-bottom: 1px solid var(--wp--preset--color--accent-4);
            z-index: 0;
        }

        .wc-block-cart-item__image {
            padding-right: 0;
        }

        @media screen and (max-width: 1024px) {
            display: block;
        }

        @media screen and (min-width: 1025px) {
            display: grid;
            grid-template-columns: max(460px) 1fr;
        }
    }

    td {
        padding: 0;
        margin: 0;
        border: none;
        background-color: #fff !important;
    }

    .wc-block-cart-item__product {
        padding: var(--wp--preset--spacing--20);
        align-content: center;

        overflow: clip;
        border-bottom-right-radius: var(--wp--custom--border-radius--block);

        @media screen and (max-width: 1024px) {
            border-bottom-left-radius: var(--wp--custom--border-radius--block);
        }

        @media screen and (min-width: 1024px) {
            padding: 0 var(--wp--preset--spacing--40);
            border-top-right-radius: var(--wp--custom--border-radius--block);
        }

        @media screen and (min-width: 1280px) {
            padding: 0 var(--wp--preset--spacing--60);
        }
    }
}

.wc-block-components-product-name {
    color: var(--wp--preset--color--accent-2);
    font-size: 32px;
    font-weight: 700;
}

.wc-block-components-product-name__category {
    color: var(--wp--preset--color--accent-5);
    font-size: 16px;
    font-weight: 700;
}

.wc-block-components-quantity-selector {
    width: 44px;
}

.wc-block-components-quantity-selector__button {
    display: none;
}

.wc-block-cart-item__prices {
    font-size: 25px;
    font-weight: 700;
    color: var(--wp--preset--color--accent-2);
}

.wc-block-cart-item__remove-link {
    position: relative;
    display: block;
    width: 30px;
    height: 30px;
    text-indent: -9999px;
}

.wc-block-cart-item__remove-link::after {
    content: url('data:image/svg+xml,<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><rect y="22.6274" width="32" height="2" rx="1" transform="rotate(-45 0 22.6274)" fill="%23999999"/><rect x="1.41406" width="32" height="2" rx="1" transform="rotate(45 1.41406 0)" fill="%23999999"/></svg>');
    position: absolute;
    inset: 0;
    text-indent: 0;
}

.wc-block-cart-item__wrap {
    display: grid;
    column-gap: var(--wp--preset--spacing--40);
    grid-template-areas:
        'title remove'
        'quantity price'
    ;
    grid-template-columns: 1fr 1fr;
    align-items: center;

    @media screen and (max-width: 1279px) {
        row-gap: var(--wp--preset--spacing--20);
    }

    @media screen and (min-width: 1280px) {
        grid-template-areas: 'title quantity price remove';
        grid-template-columns: 1fr repeat(3, auto);
    }
}

.wc-block-cart-item__wrap > * {
    align-content: center;
}

.editor-styles-wrapper table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__wrap>*,
.editor-styles-wrapper table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-quantity-selector,
table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__wrap>*,
table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-quantity-selector {
    margin-bottom: 0;
}

.wc-block-components-product-name,
.wc-block-components-product-metadata { grid-area: title; }

.wc-block-cart-item__prices { grid-area: price; }

.wc-block-cart-item__quantity { display: contents; }

.wc-block-components-quantity-selector { grid-area: quantity; }
.wc-block-cart-item__remove-link { grid-area: remove; }

.wc-block-cart-item__prices,
.wc-block-cart-item__remove-link { justify-self: end; }

.is-large.wc-block-cart {
    margin-block-end: 0;
}