@layer components {
    shopping-cart,
    order-checkout {
        display: flex;
        flex-direction: column;
        gap: var(--size-7);

        /* > *:not(script,style) {
            display: flex;
            flex-direction: column;
            gap: var(--size-7);
        } */

        :is(order-summary) {
            display: grid;
            align-content: start;

            &:not(:is([collapsible])) {
                gap: inherit;
            }

            :is(h2) {
                font-size: var(--font-size-2);
                font-weight: var(--font-weight-5);
            }

            :is(section) {
                border: var(--border-size-1) solid var(--color-border-grey);
                border-top: none;
                padding: var(--size-7) var(--size-3);

                > header {
                    margin-bottom: var(--size-4);

                    :is(a) {
                        text-decoration: none;
                    }
                }

                &:first-child {
                    border-top: var(--border-size-1) solid var(--color-border-grey);
                }

                & .summary-details {
                    display: flex;
                    flex-direction: column;
                    gap: var(--size-4);

                    > :is(shipping-total, strong) {
                        display: flex;
                        justify-content: space-between;
                    }

                    :is(strong) {
                        font-size: var(--font-size-0);
                        font-weight: var(--font-weight-3);

                        @media screen and (min-width: 960px) {
                            font-size: var(--font-size-2);
                            font-weight: var(--font-weight-5);
                        }
                    }

                    :is(select) {
                        width: 100%;
                        padding: var(--size-2);
                        font-weight: var(--font-weight-5);
                    }

                    :is(form) {
                        width: 100% !important;
                    }

                    & .cart-discounts-wrapper {
                        display: none;

                        &.show-discounts {
                            display: flex;
                        }
                    }
                }
            }

            & product-info header h3 {
                font-size: var(--font-size-00);
            }

            &[collapsible]:defined {
                > :first-child > header {
                    background: center right no-repeat url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3e%3crect width='256' height='256' fill='none'/%3e%3cpolyline points='208 96 128 176 48 96' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='20'/%3e%3c/svg%3e");
                    cursor: pointer;

                    &:hover {
                        color: color-mix(in srgb, currentColor 80%, transparent);
                    }

                    /* hide on mobile */
                    :is(a) {
                        display: none;
                    }
                }

                @media screen and (max-width: 959px) {
                    &:is(:not([open])) {
                        .summary-details > *:not(#cart-summary-total) {
                            display: none;
                        }

                        checkout-items {
                            display: none;
                        }
                    }
                }

                #cart-summary-total {
                    gap: var(--size-2);
                    justify-content: start;
                }

                @media screen and (min-width: 960px) {
                    > :first-child > header {
                        background: none;

                        :is(a) {
                            display: flex;
                        }
                    }

                    #cart-summary-total {
                        justify-content: space-between;
                    }
                }
            }
        }

        :is(shipping-total) {
            display: flex;
            gap: var(--size-2);
            justify-content: space-between;
            width: 100%;
            font-weight: var(--font-weight-4);
            font-size: var(--font-size-00);
        }

        :is(cart-items) {
            display: grid;
            gap: inherit;
            align-content: start;

            :is(section) {
                outline: var(--border-size-1) solid var(--color-border-grey);

                > header {
                    padding: var(--size-6) var(--size-3);
                    background-color: var(--color-light-blue-alt);
                    color: var(--color-blue);

                    :is(h2) {
                        font-size: var(--font-size-2);
                        font-style: normal;
                        font-weight: var(--font-weight-5);
                    }
                }
            }

            :is(product-list) {
                display: flex;
                flex-direction: column;

                > cart-item {
                    border-top: var(--border-size-1) solid var(--color-border-grey);
                    padding: var(--size-9) var(--size-3);
                    display: block;

                    > product-info {
                        display: grid;
                        grid-template-columns: 1fr 1fr minmax(auto, 150px);
                        grid-template-areas:
                            "image . price"
                            "image . quantity"
                            "name name name"
                            ". . ."
                            "delivery delivery delivery"
                            "timeframe timeframe timeframe"
                            "stock actions actions";
                        /* grid-template-rows: min-content min-content 1fr 1fr auto min-content; */
                        gap: var(--size-3);

                        .product-image {
                            grid-area: image;
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;

                            :is(picture, img) {
                                width: 100px;
                                height: 100px;
                                object-fit: contain;
                            }
                        }

                        :is(header) {
                            grid-area: name;
                            display: flex;
                            flex-direction: column;
                            gap: var(--size-2);

                            :is(discount-amount) {
                                color: var(--color-green-alt);
                                max-width: 250px;
                            }

                            & .quantity-warning {
                                font-size: var(--font-size-0);
                            }
                        }

                        .pickup-location {
                            grid-area: delivery;
                            display: flex;
                            flex-direction: column;
                            gap: var(--size-3);

                            :is(h3) {
                                display: flex;
                                align-items: center;
                                gap: var(--size-1);
                                color: var(--color-blue);
                                font-size: var(--font-size-0);
                            }

                            :is(select) {
                                width: 100%;
                                padding: var(--size-2);
                            }
                        }

                        .price-section {
                            grid-area: price;
                            text-align: right;
                            display: flex;
                            flex-direction: column;
                            gap: var(--size-2);
                            min-width: 95px;

                            :is(total-amount) {
                                font-weight: var(--font-weight-7);
                            }
                        }

                        .quantity-section {
                            grid-area: quantity;
                            display: flex;
                            flex-direction: column;
                            gap: var(--size-2);

                            & input.product-quantity {
                                border: none;
                            }
                        }

                        .stock-levels {
                            grid-area: stock;
                        }

                        .timeframe {
                            grid-area: timeframe;
                        }

                        .actions {
                            grid-area: actions;
                            display: flex;
                            align-items: center;
                            justify-content: flex-end;
                            gap: var(--size-1);
                            color: var(--color-blue);

                            :is(button) {
                                background-color: transparent;
                                border: none;
                                cursor: pointer;
                                color: var(--color-blue);
                                padding: 0;
                            }
                        }
                    }
                }
            }
        }

        :is(checkout-items) {

            :is(section):first-child {
                border-top: none;
            }

            :is(product-list) {
                display: flex;
                flex-direction: column;
                gap: var(--size-8);

                > cart-item {

                    > product-info {
                        display: grid;
                        grid-template-columns: minmax(auto, 50px) 1fr 1fr;
                        grid-template-areas:
                            "image name name"
                            "quantity quantity price";

                        &.for-pickup {
                            grid-template-areas:
                                "image name name"
                                "delivery delivery delivery"
                                "timeframe timeframe timeframe"
                                "quantity quantity price";
                        }

                        align-items: start;
                        gap: var(--size-3);

                        .product-image {
                            grid-area: image;
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;

                            :is(picture, img) {
                                width: 50px;
                                height: 50px;
                                object-fit: contain;
                            }
                        }

                        :is(header) {
                            grid-area: name;
                            display: flex;
                            flex-direction: column;
                            gap: var(--size-2);

                            :is(discount-amount) {
                                color: var(--color-green-alt);
                                max-width: 250px;
                            }

                            & .quantity-warning {
                                display: none;
                            }

                            :is(h3) {
                                line-height: 1.4;
                            }
                        }

                        .pickup-location {
                            grid-area: delivery;
                            display: flex;
                            flex-direction: column;
                            gap: var(--size-3);

                            :is(h3) {
                                display: flex;
                                align-items: center;
                                gap: var(--size-1);
                                color: var(--color-blue);
                                font-size: var(--font-size-0);
                            }

                            :is(select) {
                                width: 100%;
                                padding: var(--size-2);
                            }
                        }

                        .price-section {
                            grid-area: price;
                            text-align: right;
                            display: flex;
                            flex-direction: column;
                            gap: var(--size-2);

                            :is(total-amount) {
                                font-weight: var(--font-weight-7);
                            }
                        }

                        .quantity-section {
                            grid-area: quantity;
                            display: flex;
                            flex-direction: column;
                            gap: var(--size-2);

                            & input.product-quantity {
                                border: none;
                            }
                        }
                    }
                }
            }
        }

        & .payment-options,
        .credit-options {
            display: flex;
            flex-direction: column;
            gap: var(--size-3);
            align-items: center;

            :is(h4) {
                font-weight: var(--font-weight-3);
                font-size: var(--font-size-00);
                margin: 0;
            }

            & ul {
                display: flex;
                flex-wrap: wrap;
                gap: var(--size-1);
                list-style-type: none;
                padding: 0;
                margin: 0;

                :is(li) {
                    border: var(--border-size-1) solid var(--color-border-grey);
                    padding: var(--size-1) var(--size-2);
                    cursor: default;
                    display: flex;
                    align-items: center;

                    :is(img) {
                        width: 48px;
                        height: 30px;
                    }
                }
            }
        }

        & .checkout-button {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: var(--size-2);
            width: 100%;
            background-color: var(--color-button-blue);
            color: var(--color-light);
            padding: var(--size-3);
            text-decoration: none;
            font-size: var(--font-size-2);
            border: none;

            &.disabled {
                background-color: var(--color-border-grey);
            }

            &:is(:hover,:focus-visible) {
                background-color: hsl(from var(--color-button-blue) h s calc(l * 0.8));
            }

            &:is(:focus-visible) {
                outline: 1px solid var(--color-button-blue);
                outline-offset: 2px;
            }

            &.wide-button {
                width: 100%;
                max-width: 400px;
            }
        }

        /* tablet and up */
        @media screen and (min-width: 768px) {

            & cart-items product-list > cart-item > product-info {
                display: grid;
                grid-template-columns: 110px 1fr 150px max-content;
                grid-template-areas:
                    "image name quantity price"
                    "image delivery delivery delivery"
                    "image timeframe timeframe timeframe"
                    "image stock actions actions";
                grid-template-rows: 1fr min-content auto;
                gap: var(--size-3);

                & .pickup-location :is(select) {
                    width: auto;
                }
            }
        }

        /* desktop and up */
        @media screen and (min-width: 960px) {
            flex-direction: row;

            :is(cart-items) {
                flex: 1;
            }

            :is(order-summary) {
                max-width: var(--summary-max-width);
            }
        }
    }

    shopping-cart {
        --summary-max-width: 320px;
    }

    order-checkout {
        --summary-max-width: 420px;
        flex-direction: column-reverse;

        /* desktop and up */
        @media screen and (min-width: 960px) {
            flex-direction: row;
        }
    }

    /* Safari <= 16.4 and other older browsers */
    @supports not (selector(& p)) {
        body > header cart-basket svg {
        }

        info-badge {
            position: relative;
            color: white;
        }

        info-badge .badge-wrapper {
            position: absolute;
            top: -8px;
            right: -16px;
            background: var(--color-brand-yellow);
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}