.cart--cart-block{
    --base-border-radius: var(--border-radius);
    --base-text-color: var(--color-gray-600);
    --btn-primary-bgcolor: var(--color-primary);
    --btn-primary-hover-bgcolor: var(--color-primary);
    height: 3.25rem;
    width: 2.25rem;
}

.cart-block--summary{
    height: 3.25rem;
    width: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
}

.cart-block--link__expand {
    position: relative;
}

.cart-block--summary__icon::before{
    content: url('../../images/cart_blue.svg');
    display: inline-block;
    height: 25px;
    width: 25px;
}

.cart-block--summary__icon span{
    font-size: 0;
}

.cart-block--summary__count{
    position: absolute;
    right: -0.375rem;
    top: -0.375rem;
    height: 1rem;
    width: 1rem;
    font-size: 0.625rem;
    line-height: 0.75rem;
    color: #FFF;
    background-color: hsl(8,80.2%,66.3%);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 50%;
}

.cart-block--contents{
    min-width: 18rem;
    border-radius: var(--base-border-radius);
    -webkit-box-shadow: 3px 7px 10px hsl(200,19%,97%);
    box-shadow: 0px 0px 12px -1px #878787;
    top: 3rem;
    left: auto !important;
    z-index: 99;
    right: -1rem;
}

.cart-block--contents.is-outside-horizontal{
    right: -1.5rem;
}

.cart-block--contents::before{
    content: "";
    border: 1px solid hsl(240,20%,95.1%);
    border-width: 0 10px 11px 10px;
    border-color: white transparent;
    right: 1.85rem;
    position: absolute;
    top: -0.6875rem;
}

.cart-block--contents__inner{
    padding: 1rem 1.5rem 1.5rem;
}

.cart-block--contents__inner .field--name-total-price {
    width: 12rem;
    color: var(--base-text-color);
}

.cart-block--contents__links {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 1rem;
}

.cart--cart-block  .cart-block--contents__links a{
    padding: 0.5rem 0.8rem;
    color: white;
    background-color: var(--btn-primary-bgcolor);
    border-radius: 3px;
    text-align: center;
}

.cart--cart-block .cart-block--contents__links a:hover{
    background-color: var(--btn-primary-hover-bgcolor);
}

.cart--cart-block .cart-block--contents__items{
    max-height: 450px;
    padding-right: 1.25rem;
}

@media (min-width:768px){
    .cart-block--contents{
        min-width: 24rem;
        top: 3rem;
    }

    .cart-block--contents__inner .field--name-total-price {
        width: 16rem;
    }

    .cart-block--contents__links {
        flex-direction: row;
        justify-content: flex-end;
    }
}

/* Page cart */

.cart-form {
    max-width: 76rem;
    margin: 0 auto;
    padding: 1.5rem;
    color: var(--color-gray);
}

.cart-form h1{
    font-weight: 400;
    margin: 2rem 0 4rem;
}

.cart-form .view-commerce-cart-form .view-content .views-form > form {
    overflow-x: auto;
}

.cart-form table {
    width: 100%;
}

.cart-form table thead th{
    text-align: left;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 0.9375rem;
}

.cart-form table tbody td{
    font-size: 0.875rem;
}
.cart-form table thead th,
.cart-form table tbody td{
    padding: 0.325rem 0.9375rem;
}

.cart-form table tbody tr:nth-child(odd){
    background-color: var(--color-gray-050);
}

.cart-form table tbody td a{
    color: var(--color-gray);
}

.cart-form table tbody td a:hover{
    text-decoration: underline;
}

.cart-form table tbody td .form-type-number input{
    border-radius: 1.125rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-gray);
    outline: none;
    text-align: center;
    width: 5.1rem;
    -moz-appearance: number-input;
    appearance: auto;
}

.cart-form table tbody td .form-type-number input::-webkit-outer-spin-button,
.cart-form table tbody td .form-type-number input::-webkit-inner-spin-button {
    opacity: 1;
    background: transparent;
}

.cart-form table thead th.views-field-remove-button{
    text-align: center;
}

.cart-form table tbody td .remove-button{
    display: grid;
    grid-template-areas: "button";
    width: 1.25rem;
    height: 1.25rem;
    margin: 0 auto;
}

.cart-form table tbody td .remove-button input{
    width: 1.25rem;
    height: 1.25rem;
    display: block;
    grid-area: button;
    background-color: initial;
    border: 0;
    font-size: 0;
}

.cart-form table tbody td .remove-button::before{
    grid-area: button;
    content: url('data:image/svg+xml,<svg viewBox="0 0 19 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 4.5H2.5M2.5 4.5H18.5M2.5 4.5V18.5C2.5 19.0304 2.71071 19.5391 3.08579 19.9142C3.46086 20.2893 3.96957 20.5 4.5 20.5H14.5C15.0304 20.5 15.5391 20.2893 15.9142 19.9142C16.2893 19.5391 16.5 19.0304 16.5 18.5V4.5H2.5ZM5.5 4.5V2.5C5.5 1.96957 5.71071 1.46086 6.08579 1.08579C6.46086 0.710714 6.96957 0.5 7.5 0.5H11.5C12.0304 0.5 12.5391 0.710714 12.9142 1.08579C13.2893 1.46086 13.5 1.96957 13.5 2.5V4.5M7.5 9.5V15.5M11.5 9.5V15.5" stroke="%238A8C8E" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    display: block;
    width: 20px;
    height: auto;
}

.cart-form .form-actions{
    text-align: right;
}

.cart-form .form-actions > input{
    border: 1px solid var(--color-primary);
    border-radius: var(--border-radius);
    padding: 0.9375rem 1.125rem;
    background-color: var(--color-primary);
    color: white;
    font-size: 0.9375rem;
    width: fit-content;
    margin-right: 0;
    margin-bottom: 1rem;
}

.cart-form .form-actions > input:hover{
    opacity: 0.8;
}

.cart-form .form-actions > input:first-child{
    background-color: white;
    color: var(--color-primary);
}

.cart-form .form-actions > input:first-child:hover{
    opacity: 1;
    color: white;
    background-color: var(--color-primary);
}

.cart-form .field--name-total-price{
    font-size: 1.25rem;
    margin: 1rem 2.65rem 1rem 0;
    display: flex;
    justify-content: flex-end;
}

.cart-form .field--name-total-price .order-total-line{
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

.cart-form .field--name-total-price  .order-total-line-value{
    min-width: 8rem;
    font-size: 0.875rem;
    
}

/* Empty Cart */

.cart-empty-page{
    max-width: 76rem;
    min-height: 20rem;
    margin: 3rem auto 3rem;
    padding: 1.5rem;
}

/* Back to shop button */
.cart-form .view-commerce-cart-form .back-to-shop{
    margin-bottom: 3rem;
    display: block;
    margin-left: auto;
}
@media(width > 38rem){
    .cart-form .view-commerce-cart-form .back-to-shop{
        margin-top: -5.45rem;
        margin-left: initial;
    }
}