.btn {
    min-height: 2.4rem;
}

.page-header {
    text-align: center;
}

div.j2store-cart-item-box {
    background-color: var(--color-background);
    color: var(--color-text);
    right: 0;
    padding: 1rem;

    h3 {
        text-align: center;
    }
}

div#j2store-checkout {
    padding: 2rem;
}


div.j2store-cart-with-filter {
    padding: clamp(1vw, 1rem, 10%);
    display: flex;
    gap: var(--grid-gap);
    flex-wrap: wrap;
    justify-content: center;

    form#productFilters {
        flex: 0 1 20%;
    }
}

.card__product {
    flex: 0 1 clamp(285px, 25vw, 300px);
    padding: 0;
}

.j2store-products-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.product-title {
    font-size: 1.4rem;
    font-weight: 800;

    a {
        color: white;
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }
    }
}

.j2store-img-responsive {
    width: 100%;
}

.j2store-single-product {
    display: grid;
    grid-template-areas: "image image" "title price" "description description" "add-to-cart add-to-cart";
    gap: 1rem;
    grid-template-rows: auto 2rem 3rem auto;
    align-items: center;
    justify-content: start;
}

.j2store-single-product>* {
    padding: 0 1rem;
    margin: 0;
}

.ingredients {
    grid-area: ingredients;
    display: flex;
    flex-wrap: wrap;

    dt {
        font-weight: 800;
    }
}

.allergens {
    grid-area: allergens;

    ul {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        gap: var(--grid-gap-sm);
        padding-left: 0;
    }

    .badge {
        border: 2px solid var(--color-text);
        padding: .25rem .5rem;
        border-radius: var(--border-radius);
        color: var(--color-background);
        background-color: var(--color-text);
    }

    .badge:has(.icon) {
        display: flex;
        align-items: end;

        .icon {
            margin-bottom: .35rem
        }
    }
}

.j2store-single-product .j2store-product-images {
    grid-area: image;
    padding: 0;
}

.j2store-single-product .product-title {
    grid-area: title;
}

.j2store-single-product .product-short-description {
    grid-area: description;
}

.j2store-single-product .product-price-container,
.j2store-single-product .discount-percentage {
    grid-area: price;
}

.j2store-single-product .j2store-addtocart-form {
    grid-area: add-to-cart;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    justify-content: center;

    div.product-qty input[type="text"],
    div.product-qty input[type="number"] {
        padding: .3rem !important;
        height: auto !important;
        width: 2.5rem !important;
    }

    .product-qty {
        display: none;
    }

    input {
        margin-bottom: 0;
    }

    .j2store-cart-button {
        width: 100%;
        height: auto;
        text-wrap: wrap;
    }
}

.text-success a {
    color: white;
}

.j2store-product-list .j2store-single-product {
    margin-top: 0;
    border-radius: var(--border-radius);
}

.j2store-product-images,
.j2store-product-images * {
    border-radius: var(--border-radius);
}

.j2store-thumbnail-image {
    border-radius: var(--border-radius);
}

.j2store-add-to-cart {
    margin: 0;
    width: 64%;
}

.options:popover-open {
    border: 1px solid var(--color-text);
    padding: 1rem;
    border-radius: var(--border-radius);
    width: clamp(9rem, 20vw, 20%);
}

/* Cart summary page */

.j2store-cart {
    display: flex;
    gap: var(--grid-gap);
    flex-wrap: wrap;
}

.view-carts {
    .page-header {
        padding: clamp(1vw, 1rem, 10%);
        border-bottom: 1px solid var(--color-light);
        margin-bottom: 2rem;
        display: flex;
        flex-wrap: wrap;
        align-items: center;

        .header-title {
            flex: 1 1 clamp(300px, 70%, 100vw);
        }

    }

    .area-component {}
}

.cart-summary__coupons {
    display: none;
}

.cart-item {
    width: 100%;
}

.cart-items {
    display: flex;
    flex-wrap: wrap;
    gap: var(--grid-gap);
    justify-content: center;
    flex: 1 1 clamp(350px, 50%, 50vw);

    .row__cart {
        flex: 1 1 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        background-color: var(--color-background);
        border-radius: var(--border-radius);
        border: 1px solid var(--color-text);
        padding: 1rem;
    }
}

.cart-summary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--grid-gap);
    flex: 1 1 min-content;
    max-width: 100%;

    &>div {
        background-color: var(--color-background);
        border-radius: var(--border-radius);
        border: 1px solid var(--color-text);
        padding: 1rem;
    }
}

.cart-summary__coupons,
.cart-summary__totals {
    width: clamp(300px, 30vw, 400px);
    margin: auto;
}


.cart-thumbnail {
    flex: 1 1 150px;
    max-width: 150px;

    @media (max-width: 768px) {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

.cart-data {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1 1;
    gap: var(--grid-gap);
}

.cart-line {
    display: flex;
    clear: both;
    flex: 1 1 auto;
}

.cart-line__product-thumbnail {
    display: 100%;
}

.cart-thumb-image {}

.cart-line__product-name {
    justify-content: space-between;
    width: 100%;
}

.cart-line__product-quantity {
    justify-content: space-between;
    align-items: flex-end;

    input {
        margin-bottom: 0;
        margin-left: -1rem;
    }
}

.cart-product-name {
    font-size: 1.5rem;
}

.cart-thumb-image {
    img {
        border-radius: var(--border-radius);
        width: 100%;
        max-width: 100%;
        float: none;
        margin: 0;
    }
}

.cart-product-quantity {
    width: 3rem;
}

.cart-line .remove-icon {
    font-size: 1rem;
    line-height: 1.4rem;
    min-height: 1.4rem;
    max-height: 1.4rem;
}

.j2store-cart-buttons {
    display: flex;
    gap: var(--grid-gap);
    justify-content: space-between;
    margin-top: 2rem;
}

.voucher,
.coupon {
    input {
        box-sizing: border-box;
    }

    input[type=text] {
        padding: 1rem;
    }
}


.player-type {
    display: flex;
    gap: var(--grid-gap);
    justify-content: center;
    margin-bottom: var(--grid-row-gap);
    flex-wrap: wrap;

    label {
        height: 100%;
        width: 100%;
        padding: 3rem 1rem;
        box-sizing: border-box;
    }
}

.new-player.card.card__option,
.loan-player.card.card__option,
.team-player.card.card__option {
    padding: 0;
}

.option-description {
    display: block;
    margin-top: var(--grid-gap);
}

.card__option {
    position: relative;
    border-radius: 12px;
    background: hsl(90, 1%, 67%);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden;
    text-align: center;

    input {
        display: none;
    }
}

.card__option:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(77, 171, 247, 0.2);
    transform: translateY(-2px);
}

.card__option:has(input:checked) {
    border-color: white;
    border-width: 3px;
    background-color: hsl(90, 1%, 67%);
    box-shadow: 0 6px 16px rgba(25, 113, 194, 0.15);

    label {

        color: var(--color-background);
    }
}

#login {
    display: none;
}

.checkout-heading {
    height: 4rem;

    a {
        margin: var(--grid-gap-sm);
        border: 1px solid var(--color-text);
        border-radius: var(--border-radius);
        padding: .4rem .4rem .2rem;
        cursor: pointer;
    }
}

.checkout__register_form {
    .buttons {
        width: min-content;
    }
}

.cart-category {
    width: auto;
    margin: 0 4rem;

    &:nth-child(n+1) {
        margin-top: 2rem;
    }
}

h2.cart-category {
    text-align: center;
}

.j2store-product-list {
    .j2store-products-row {
        width: clamp(300px, 90vw, 90%);
        max-width: 90%;
        margin: var(--grid-gap) auto;

        .card.card__product {
            padding: 0;
        }

        .j2store-single-product {
            display: grid;
            grid-template-areas: "title" "description" "ingredients" "price" "add-to-cart" "allergens";
            gap: 1rem;
            grid-template-columns: auto;
            grid-template-rows: auto;
            align-items: center;
            justify-items: center;
            padding: var(--grid-gap) 0;

            &.cat-13 {
                grid-template-areas: "title price" "allergens allergens";
                width: clamp(300px, 90vw, 90%);
                grid-template-columns: 60% 20%;
                justify-items: start;
            }
        }

        .j2store-single-product .j2store-addtocart-form {
            justify-content: end;
        }
    }

    .j2store-products-row {
        .j2store-single-product {
            .sale-price {
                font-weight: 800;
                font-size: 1.5rem;
                color: white;
            }

            .j2store-addtocart-form {
                justify-content: center;
            }

            .ingredients {
                dd {
                    margin-left: 0;
                }
            }

        }
    }
}


@media (max-width: 768px) {
    .j2store-cart-buttons {
        display: flex;
        flex-direction: column;
        gap: var(--grid-gap);
        align-items: center;
    }

    .j2store-minicart-button {
        .j2store-cart-item-box {
            position: fixed;
            bottom: 1rem;
            z-index: 999;
        }
    }


    .checkout-content {
        &.player-details {

            h2 {
                text-align: center;
            }

            legend {
                text-align: center;
                width: 100%;
                margin-bottom: var(--grid-row-gap);
            }
        }
    }

    .j2store.checkout__register_form,
    .ld_checkout_address {
        input {
            height: 2rem;
            width: clamp(14rem, 20rem, 93%);
        }
    }

    .ld_checkout_address_column50 {
        width: clamp(300px, 20%, 20vw);
        display: flex;
        flex-direction: column;
        align-items: start;
    }

    .w_checkout_column-1,
    .ld_checkout_address:has(#comments)>div {
        width: 280px;
    }

    #comments {
        height: 20vh;
        width: 100%;
    }

    .shipping-make-same {
        display: none;
    }

    #delivery-method-step {
        margin-bottom: 30px;
    }

    .delivery-options,
    .address-options,
    .payment-options {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--grid-gap);
        margin-bottom: var(--grid-row-gap);
    }

    .card__option {
        padding: var(--grid-gap);
        min-width: clamp(275px, 15rem, 100%);
    }

    .card__option:has(input:checked) label {
        color: var(--color-background);
    }

    .delivery-options .card {
        padding: 0;

        label {
            margin: 0;

            span {
                display: block;
                padding: var(--grid-gap);

            }
        }
    }

    .w_checkout_column-1 {
        width: clamp(14rem, 20rem, 93%);
    }

    .ld_checkout_address {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        width: clamp(300px, 100%, 96vw);

        label {
            font-size: 1rem;
        }

        .control-label {
            display: flex;
            gap: .5rem;
        }
    }

    .address-list {
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin-top: 15px;
        margin-bottom: 20px;
    }

    .address-details {
        display: block;
        padding: 1rem;
        line-height: 1.6;
    }

    .customer-note {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #j2store-tos-modal {
        max-width: 80vw;
        margin: 2rem;
        border-radius: var(--border-radius);
        background: var(--color-background);
        border: 1px solid var(--color-border);
    }

    button.fancy-close-small {
        padding: .5rem 1rem;
        border: none;
        border-radius: .4rem;
        background-color: var(--color-primary);
        color: white !important;
        font-size: var(--size-font-text);

        &:hover {
            color: var(--color-secondary) !important;
        }
    }

    .customer-note textarea {
        width: clamp(275px, 15rem, 100%);
        height: 20vh;
    }