/* Cart */
.wpsc_product {
    position: relative;
    width: auto;
    background-color: var(--body-bg-50);
    color: var(--body-color);
    border-radius: .25rem;
    box-shadow: var(--box-shadow-sm);

    @media (width > 576px) {
        margin-inline: .25rem;
        margin-bottom: .5rem;
        width: calc(50% - .5rem);
    }

    @media (width > 992px) {
        width: calc(33.334% - .5rem);
    }

    @media (width > 1200px) {
        width: calc(25% - .5rem);
    }

    & .wp_cart_product_display_box {
        width: 100%;
        margin: 0;
        padding-bottom: 1rem;
        border: none;

        & a,
        & img {
            display: block;
            width: 100%;
            min-height: 100%;
            aspect-ratio: 1/1;
            -o-object-fit: cover;
            object-fit: cover;
            margin: 0;
            padding: 0;
            box-shadow: none;
            background-image: none;
        }
    }
}

.wp_cart_product_name {
    margin: 1rem 0 .5rem;
    color: var(--body-color);
    font-family: var(--font-family-header);
    font-size: var(--font-size-h5);
    font-weight: normal;
    line-height: 1.2;
    text-transform: uppercase;
}

.wp_cart_product_description {
    font-style: normal;
}

.wp_cart_product_price {
    margin-bottom: 1rem;
    padding-block: .5rem 2rem;
    color: var(--body-color);
    font-size: 1rem;

    &::after {
        content: ' + shipping';
        font-size: .875rem;
        font-weight: normal;
    }
}

.wspsc_add_cart_submit {
    position: absolute;
    inset: auto auto 1rem;

    anchor-name: --submit;

    &:where(:hover, :active, :focus, :focus-visible) {
        background-color: var(--primary-color-hover);
        cursor: pointer;
    }
}

.wpsc_add_cart_response_div,
.wpsc-error-message {
    position: absolute;
    position-anchor: --submit;
    top: anchor(--submit top);
    left: anchor(--submit right);

    margin-top: .25rem;
    padding-inline: 1ch;
    font-size: .875rem;
    line-height: 1;
    color: var(--primary-color);
}

.wpsc-success-message+div a {
    display: none !important;
}

body.fi .wp_cart_product_price::after {
    content: ' + toimituskulu' !important;
}

.ostoskori {
    anchor-scope: --cart;
    anchor-name: --cart;
}

@media (prefers-reduced-motion: no-preference) {
    .cart-toggler.show {
        background-color: var(--primary-color);

        & svg {
            -webkit-animation: cartshow 1.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite forwards;
            animation: cartshow 1.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite forwards;
        }
    }
}

.cartbar:not(:popover-open) {
    display: none;
}

.cartbar {
    position: fixed;
    position-anchor: --cart;
    top: anchor(--cart bottom);
    right: anchor(--cart right);
    bottom: auto;
    left: auto;
    width: calc(100% - 2rem);
    max-width: 30rem;
    max-height: 85dvh;
    padding: 1.5rem;
    background-color: var(--body-bg);
    border: .075rem solid currentColor;
    border-radius: .15rem;

    @media (prefers-reduced-motion: no-preference) {
        -webkit-animation: navitranslate 1.25s cubic-bezier(0.390, 0.575, 0.565, 1.000) forwards;
        animation: navitranslate 1.25s cubic-bezier(0.390, 0.575, 0.565, 1.000) forwards;
    }

    @media (width < 32rem) {
        right: 0;
        left: 0;
    }

    & a[name="wpsc_cart_anchor"] {
        display: none;
    }

    &::-webkit-backdrop {
        margin-top: var(--header-height);
    }

    &::backdrop {
        margin-top: calc(var(--header-height) + 12px);
    }
}

.shopping_cart {
    padding: 0;

    & a {
        box-shadow: none;
    }

    & .wpsc-cart-change-quantity-msg {
        padding-left: 1rem;
    }

    & .wp_cart_item_info {
        display: flex;
        align-items: center;

        @media (width < 576px) {
            & .wp_cart_item_thumbnail {
                display: none;
            }
        }
    }

    & table {
        max-width: 100%;
        margin-block: .5rem;


        & th,
        & td {
            padding: .5rem .1rem;

            &:first-child {
                min-width: 60%;

                & a {
                    margin-left: 0;
                    padding: 2px 1px;
                }
            }
        }

        & th.wspsc_cart_qty_th {
            visibility: hidden;
        }

        & tr:nth-child(even) td {
            background-color: rgb(0 0 0 / 0.2);
            border: 1px solid rgb(255 255 255 / 0.1);
            border-inline: none;
        }

        & input {
            border: none;
            box-shadow: none;
            background-color: transparent;
            color: white;
        }

        & input[src*="svg"] {
            -webkit-filter: invert(1) grayscale(1);
            filter: invert(1) grayscale(1);
        }

        & .wpsc-stripe-payment-form {
            min-height: 100px;
            background: transparent url('img/loading.png') no-repeat 50% 50%;
            text-align: right;

            & input[type="image"] {
                max-width: 100%;
                max-height: 5rem;
                border-radius: .25rem;
                transition: scale ease .25s;

                &:hover {
                    opacity: 1;
                    scale: 1.025;
                }

                &:active,
                &:focus {
                    scale: 0.975;
                }
            }
        }
    }
}

.wpsc_empty_cart_form,
.wp_cart_remove_item_form {
    display: flex;
}

.wp_cart_visit_shop_link {
    margin-block: 1rem;
}

.popcookie {
    display: none;
}

.noscript,
.popcookie.show {
    display: block;
    position: fixed;
    inset: auto 2rem 2.25rem auto;
    z-index: 100;
    width: 20rem;
    margin: 0 auto;
    padding: .75rem 1rem;
    font-size: .875rem;
    line-height: 1.2;
    text-align: center;
    background-color: var(--body-bg-50);
    color: currentColor;
    border: 0.075rem solid currentColor;
    border-radius: .25rem;
    box-shadow: var(--box-shadow-sm);

    @supports (-webkit-backdrop-filter: blur(1rem)) or (backdrop-filter: blur(1rem)) {
        background-color: var(--body-bg-10);
        -webkit-backdrop-filter: blur(1rem);
        backdrop-filter: blur(1rem);
    }
}