.woocommerce{
    opacity:0;
    pointer-events: none;
    position:absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

main#checkout{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.product__info{
    display: grid; 
    grid-auto-columns: 1fr; 
    grid-template-columns: 201px 1fr; 
    gap: 22px 0px; 
}

.product__info div{
    font-size:var(--large-text);
}

.product__info div:nth-child(2n+1){
    color:var(--disabled-text);
}

.checkout__wrapper{
    border:1px solid var(--border-color);
    padding:23px 60px 70px 60px;
    border-radius:22px;
    width:fit-content;
}

.checkout__wrapper h1{
    text-align: center;
    margin:0 0 22px 0;
    color:var(--highlighted-text);
    font-size:var(--gigantic-text);
    font-weight: 500;
}

.checkout__inner{
    min-width:709px;
}

.payment__wrapper{
    margin:50px 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.payment__wrapper p{
    margin:0 0 20px 0;
    text-align: center;
    font-size:var(--input-size);
}

.payment__wrapper .to-pay{
    font-size:var(--large-text);
    margin:0 0 20px 0;
}

.payment__wrapper a{
    background:var(--highlighed-background);
    text-align: center;
    border-radius:50px;
    width:520px;
    padding:13px 0;
	cursor:pointer;
    border: 1px solid var(--border-color);
    text-transform: uppercase;
    transition:.2s ease;
}
.payment__wrapper a:hover{
    background:transparent;
}
.payment__wrapper a::after{
    display:none;
}

.payment-info{
    margin-top:20px;
    text-align: center;
}

.back{
    margin:10px auto 0 auto;
}

.back a{
    font-size:var(--large-text);
    font-weight:400;
    text-align: center;
    display: flex;
    align-items: center;
    gap:5px;
}

.back a:hover::after{
    width:0%;
}

.back a span{
    position: relative;
}
.back a span:after{
    content:'';
    width:100%;
    height:1px;
    background-color:var(--default-text);
    transition:.2s ease;
    border-radius:15px;
    position:absolute;
    bottom:-5px;
    left:0;
}

.back a span:hover::after{
    width:0%;
}

@media screen and (max-width:1020px) {
    .checkout__wrapper, .checkout__inner{
        width: 100%;
        min-width: auto;
    }
}

@media screen and (max-width:800px) {
    .payment__wrapper a{
        width:100%;
    }
}

@media screen and (max-width:520px) {
    .checkout__wrapper{
        padding: 23px 13px 53px 13px;
    }
}

@media screen and (max-width:420px) {
    .product__info{
        grid-template-columns: 141px 1fr;
    }

    .back a{
        font-size:var(--default-size);
    }
}