/*
Author: Kolen Mackey for Design911 by Datadial Ltd. 13/11/25

basket & checkout v.3.0.0

/*Css Variables*/
:root {
}

/*------------------------------------------------------------------------ Base Styles*/
#checkout #container {
    padding-top: 70px;
}
#checkout #masthead {
    height:75px;
    box-shadow: 0 8px 10px -10px rgba(33, 43, 59, 0.3);
}
    #checkout #masthead .navframe {
        display:none;
    }
    #checkout #masthead > .innerframe {
        height: 65px;
        padding-right:250px;        
    }
#checkout #masthead #logo {
    height: 45px;
}
#checkout .uppernav {
    margin-top: 0.45rem;
    width: fit-content;
}
#checkout #footer{
    padding:1.85rem 0;
    margin:4rem 0 0;
}
p.copyright{
    margin:0;
}

/*#masthead*/
.checkoutBox {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 220px;
    position: absolute;
    inset: 20px 0 auto auto;
}
/*#checkout #masthead.docked .checkoutBox {
    top: 20px;
}*/
    .checkoutBox h6 {
        margin: 0;
        font-size: 1.13rem;
        line-height: 1.13rem;
        text-transform: uppercase;
        font-weight: 500;
    }




/*#mainContent*/
    .basket-page-frame {
        display: flex;
        justify-content: space-between;
        gap: 4rem;
        margin: 0 0 6rem;
    }
    .basket-page-frame .main-basket-content {
        width:100%;
    }
    .basket-page-frame .main-basket-side {
        width: 400px;
        position: sticky;
        top: 180px;
        height: fit-content;
        border-bottom: 1px solid var(--site-border);
        max-height: 75vh;
    }

    /*main-basket-side*/
    .headedPanel {
        display:block;
        padding:0;
        text-align: center;
        
    }
    .headedPanel .h3 {
        font-size: 1.5rem;
    }
    .headedPanel svg {
        fill: #23a9be;
        width: 50px;
        height: 50px;
    }



    /*basket and login sidebars*/
    .basketFrame,
    .loginFrame {
        display: block;
        position: fixed;
        top: 0;
        left: auto;
        right: -101%;
        width: 100%;
        height: 100vh;
        padding: 0;
        background: #fff;
        color: var(--dd-grey);
        z-index: 1000;
        box-shadow: -1px -1px 6px rgba(0, 0, 0, 0.13);
        transition: right ease-out 0.4s;
        border-top: 2px solid var(--dd-light-grey);
        max-width: 850px;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .basketFrame.active,
    .loginFrame.active {
        right: 0;
    }

.close {
    display: flex;
    width: 40px;
    height: 50px;
    position: sticky;
    z-index:100;
    inset: 0 auto auto 0;
    background: var(--dd-bkg1);
    color: var(--dd-grey);
    padding: 0;
    justify-content: center;
    align-items: center;
    border-radius: 0 0 4px 0;
    border-right: 1px solid var(--site-border);
    border-bottom: 1px solid var(--site-border);
}
    .close svg {
        width: 16px;
        height: 16px;
    }

/*sidebar basket head*/
.popout-basket-container .sticky-header {
    position: sticky;
    z-index: 1;
    padding: 0 0 0 60px;
    background: #fff;
    height: auto;
    min-width: 100%;
    top: 0;
    box-shadow: 0 17px 10px -19px rgba(0, 0, 0, 0.26);
    margin: -50px 0 0;
    border-bottom: 1px solid var(--dd-bkg1);
}


.basket-head {

}

.current-basket {
    display: flex;
    width: 100%;
    gap: 0.85rem;
    justify-content: space-between;
    margin: 0 0 1.85rem;
}
.basketFrame .current-basket {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content:space-between;
    color: var(--dd-grey);
    padding-bottom: 0.6rem;
    width: 100%;
    max-width: 730px;
    margin:0;
}

    .current-basket .list-label {
        margin: 0;
        font-weight: 500;
    }

    .current-basket .list-name {
        margin: 0;
        color: var(--d911-teal);
    }

    .current-basket .basket-txt {
        margin: 0;
        width: 60%;
        display: flex;
        gap: 1.85rem;
        align-items: center;
        justify-content: space-between;
        font-weight: 400;
    }
.current-basket .user-checkout {
    flex-shrink: 0;
    width:fit-content;
}
.current-basket .empty-basket {
    margin: 0;
    flex-shrink: 0;
    width: 130px;
    background: var(--dd-bkg1);
    color: var(--dd-grey);
    border-color: transparent;
    padding: 0.5rem;
}
.navlink .txt span {
    display: block;
    min-height: 28px;
}

.basket-head .empty-basket {
    flex-shrink: 0;
}
.basket-header-nav {
    padding: 0.85rem 0 0;
    margin: 0 1.85rem 0 0;
    margin-right: 3.75rem;
    display: grid;
    grid-template-columns: repeat(2,minmax(45%,50%));
    gap: 0 1.85rem;
}

    .basket-header-nav .navlink {
        margin: 0 0 0.5rem;
        min-height:60px;
    }
        .basket-header-nav .navlink.ladda-button{
            background:transparent;
        }

        .sticky-header .basket-title {
            display: block;
            margin: 0 auto;
            width: 100%;
            padding: 0.85rem 0;
        }

/*sidebar basket*/
.basketFrame .all-basket-content {
    display: block;
    padding: 1.85rem;
    width: 100%;
    margin: 0px auto;
    max-width: 790px;
    overscroll-behavior: contain;

}


/*notifications*/
.alert {
    background: var(--site-black);
    color: #fff;
    padding:0.85rem;
    text-align: center;
    margin:0.85rem 0;
    display: block;
    border-radius: 6px 0;
}


/*basket item frame*/
.basket_item_frame {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin: 0 auto;
    color: var(--dd-grey);
    
    /*max-width:750px;*/
}

    .basket_item_frame .basket_item {
        display: flex;
        width: 100%;
        border: 1px solid var(--site-border);
        border-radius: 4px;
        padding: 0.85rem 0.85rem 1.85rem;
        align-items: flex-start;
        position: relative;
        margin: 0 auto;
    }

/*.basket_item .product_image*/
/*remove basket item*/
.basket_item .remove-basket-item {
    position: absolute;
    inset: auto 0 0 auto;
    margin: 0;
    width: 30px;
    height: 40px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem;
    border-top: 1px solid var(--site-border);
    border-left: 1px solid var(--site-border);
    border-radius: 4px 0;
    color: var(--dd-light-grey);
}

    .basket_item .remove-basket-item svg {
        height: 16px;
        width: 16px;
    }

    .basket_item .remove-basket-item:hover {
        color: #fff;
        background:var(--site-red);
        border:none;
    }

.basket_item .product_image {
    width:20%;
}

    .basket_item .product_image img {
        display: block;
        margin: 0 auto;
        width: 100%;
        height: auto;
        aspect-ratio: 1/1;
        border-radius: 4px;
        object-fit: contain;
        min-width: 80px;
        max-width: 150px;
    }

/*.basket_item .product_info*/
.basket_item .product_info {
    width: 50%;
    padding: 0 0 0 0.85rem;
    display: flex;
    flex-direction: column;
}

    .basket_item .product_info a {
        display: block;
        padding: 5px 0;
        font-size: 0.96rem;
        line-height: 1.06rem;
        margin: 0 0 0.85rem;
    }

    .basket_item .product_info .code {
        display: block;
        padding: 0;
        font-size: 0.68rem;
        text-transform: uppercase;
        font-weight: 600;
        color: #23a9be;
    }
    .basket_item .product_info .basket-line-badges {
        display: flex;
        align-items: center;
        gap:0.45rem;
    }
.basket-line-badges img{
    width:40px;
    height:40px;
    object-fit:contain;
}
/*.basket_item .product_price*/
.basket_item .product_price {
    font-size: 16px;
}

    .basket_item .product_price small {
        color: #606770;
        padding: 0;
        font-weight: 500;
    }



/*.basket-item: product info*/
.basket_item .product_info .pi-footer {
    font-size: 0.75rem;
    line-height: 0.75rem;
    border-top: 1px solid var(--site-border);
    margin: 0.85rem 0 0;
    padding: 0.45rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

    .basket_item .product_info .pi-footer .section-item {
        padding-bottom: 5px;
    }


    .basket_item .product_info .pi-footer .offer {
        display: block;
        background: var(--site-highlight);
        font-weight: 600;
        padding: 0.25rem 0.85rem;
        color: #fff;
        border-radius: 0 4px 0 2px;
        position: absolute;
        inset: auto auto 2px 2px;
    }

.basket_item .product_price {
    min-width:fit-content;
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.85rem;
    padding:0;
    
}
.product_price .figure{
    color: var(--dd-green);
}

    .basket_item .product_price input {
        width: 40px;
        text-align: center;
        margin: 0px;
        border-radius: 4px;
        height: 40px;
        color: var(--dd-grey);
    }
.product_price .quantity {
    width:40px;
    position:relative;
}
.product_price .update-quantity-link {
    display: block;
    padding: 0.25rem 0;
    font-size: 0.68rem;
    font-weight: 500;
    text-transform: uppercase;
    position: absolute;
    top: 43px;
    left: 0;
}

/*basket payment summary*/

.summary-container {
    display: flex;
    justify-content: space-between;
    border-top: 2px solid var(--dd-light-grey);
    border-bottom: 1px solid var(--site-border);
    position: relative;
    margin: 0 auto 1.85rem;
    padding: 1.85rem 0 0.85rem;
}
.main-basket-content .summary-container {
    gap: 4rem;
    padding-bottom: 1.85rem;
    margin:0;
}
    .main-basket-content .summary-container .total-sidebar{
        width:400px;
    }
    .summary-container .summary {
        margin: 0 auto;
        display: block;
        justify-content: space-between;
        padding: 0;
        max-width: 400px;
    }
    .summary-container select{
        max-width:100%;
    }

.summary .summary_inner {
    margin: 0 0 1.85rem;
    width: 100%;
    
}
.summary_inner dl {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 30px;
}
.summary_inner dl dt {
    width: 50%;
    margin: 5px 0;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--site-border);
    color: var(--dd-grey);
}
.summary_inner dl dd {
    width: 50%;
    margin: 5px 0;
    text-align: right;
    font-size:1.0rem;
    color: #08a972;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--site-border);
}
    .summary_inner dl .total {
        font-size: 1.3rem;
        padding-top:0.85rem;
    }
    .summary_inner .vat-frame {
        padding: 0.65rem;
        background: var(--site-black);
        color: #fff;
    }
.vat-frame .amount{
    color:#fff;
} 
.summary .amount {
    text-align: right;
}
.summary .amount .icon {
    width: 15px;
    height: 15px;
    cursor: pointer;
}

            .summary .amount select {
                margin: 0;
                height: 30px;
                padding: 6px;
                font-size: 12px;
            }
.summary .important-basket-message{
    width:100%;
    margin:0.45rem 0;
}

.summary-container dl {
    display: flex;
    justify-content: space-between;
    margin: 0 0 10px;
}

.summary-container .h6 {
    font-weight: 400;
}

    .summary-container .h6 svg {
        width: 15px;
        height: 15px;
        margin-right: 5px;
    }

    .summary-container .h4 > div,
    .summary-container .h6 > div {
        width: 130px;
    }

.summary-container .border-none {
    border: none !important;
}

.summary {
    flex: 2;
}

.basket .summary > div.h6 small a {
    color: #eb6a2e;
    text-decoration: underline;
}

.basket .summary > div.popout-basket-vat-number-form {
    display: block;
    text-align: left;
    border: 1px solid #eb6a2e;
    padding: 10px;
    margin-top: 10px;
}

    .basket .summary > div.popout-basket-vat-number-form h6 {
        margin: 0;
    }

    .basket .summary > div.popout-basket-vat-number-form .the-form {
        display: flex;
    }

        .basket .summary > div.popout-basket-vat-number-form .the-form input {
            margin-right: 10px;
        }

        .basket .summary > div.popout-basket-vat-number-form .the-form #vat-number-verify-button {
            width: 150px;
        }

.basket .summary > div.important-basket-message {
    display: block;
    text-align: left;
    border: 1px solid #eb6a2e;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

    .basket .summary > div.important-basket-message p {
        padding: 0;
        margin: 0;
    }

.basket .summary .checkout-buttons-container {
    width:100%;
    display: block;    
}

#fast-checkout-button-2 {
    min-height: 50px;
    margin:0;
}

/*basket-messages*/
.basket-messages{

}
    .basket-messages .important-basket-message {
        display: block;
        padding: 1.85rem 0.85rem;
        margin: 0.85rem 0;
        border: 1px solid var(--site-border);
        background: var(--dd-bkg1);
    }
    .important-basket-message a{
        text-decoration:underline;
    }
    
    .basket-messages p {
        margin: 0;
    }
.basket_item_frame .info {
    background: var(--dd-bkg1);
    border: 1px solid var(--site-border);
    padding: 0.85rem;
    text-align: center;
    margin: 0 0 0.85rem;
    display: block;
    border-radius: 6px 0;
}
    /*basket offers*/
    .basket_offer {
        background: #fff;
        border: 1px solid var(--site-border);
        width: 100%;
        display: flex;
        padding: 0;
        margin: 0 0 1.85rem;
        border-radius: 4px;
        overflow: hidden;
    }

.basket_offer span {
    padding: 0.85rem;
}

        .basket_offer .label {
            background: var(--site-highlight);
            color: #fff;
            width: 25%;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
        }

.basket_offer .txt {
    width: 55%;
    text-align: left;
    padding: 5px 15px;
    display: flex;
    align-items: center;
}

.basket_offer .figure {
    display: block;
    text-align: right;
    font-size: 16px;
    width: 20%;
    color: #eb6a2e;
    align-self: center;
}

/*offersFrame*/
.offersFrame{

}
.discount-code .add-code{
    display:flex;
    gap:0.85rem;
    justify-content:flex-end;
}
/*notifications*/
.minimum-order-value-not-reached {
    display: flex;
    gap: 1.85rem;
    align-items: center;
    border: 1px solid var(--site-border);
    padding: 15px;
    font-size: 1.13rem;
    margin: 0 0 0.85rem;
    border-radius: 4px;
    background: var(--dd-bkg1);
    line-height: 1.33rem;
}

    .minimum-order-value-not-reached .info-flag {
        width: 40px;
        margin: 0;
    }

    .minimum-order-value-not-reached .info-flag img {
        
    }

    .minimum-order-value-not-reached .message {
        padding:0;        
    }

.delivery-warnings {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 10px;
}

    .delivery-warnings .delivery-warning {
        width: 49%;
    }

.delivery-warning {
    border: 1px solid #a5adb6;
    background: #fff;
    padding: 10px;
    margin: 10px 0;
    display: flex;
    align-items: center;
}

    .delivery-warning .image {
        width: 30%;
    }

    .delivery-warning .description {
        width: 70%;
        padding-left: 10px;
    }

    .delivery-warning .description {
        width: 70%;
        padding-left: 10px;
    }

        .delivery-warning .description .important {
            font-weight: bold;
            text-transform: uppercase;
            padding-bottom: 5px;
            font-size: 13px;
        }

        .delivery-warning .description .message {
            font-size: 12px;
        }

/*basket-footer*/
.basketFrame .creditcards {
    margin:1.85rem 0 0.85rem;
    background: url('../images/affiliate/PAYMENT_STRIP_UK.svg') center / contain no-repeat;
    height: 30px;
    width: 100%;
}

.basket-footer-badges {    
    display:flex;
    justify-content:center;
    gap: 0.85rem;
    padding: 0.85rem 0;
    margin: 0 0 1.85rem;
}

    .basket-footer-badges .basket-footer-badge {
        display: block;
        width:16%;/*6col*/
        text-align: center;
        font-size: 0.68rem;
        font-weight: 600;
        line-height: 0.84rem;
        color: #728294;
        border: 1px solid var(--site-border);
        padding: 0.45rem;
        border-radius: 4px;
    }

.basket-footer-badge img {
    display: block;
    width: 60px;
    margin: 0 auto 0.45rem;
    aspect-ratio: 1/1;
    object-fit: contain;
}


/*checkout*/
.checkout-steps {
    display: flex;
    padding: 0.85rem;
    width: 100%;
    margin: 0 0 30px;
    list-style: none;
    position: sticky;
    top:70px;
    background: #fff;
    z-index: 10;
    border: 1px solid var(--site-border);
    box-shadow: 0 18px 10px -18px rgba(0, 0, 0, 0.24);
    border-radius: 0 0 4px 4px;
}

.checkout-steps li {
    padding: 0;
    margin: 0 10px 0 0;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
}
    .checkout-steps li.selected {
        border-right: 1px solid var(--site-border);
    }
    .checkout-steps li .step {
        display: inline-block;
        vertical-align: middle;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background: #efefef;
        border-radius: 2px;
        font-size: 16px;
        font-weight: 400;
    }
    .checkout-steps li.selected .step {
        background: #23a9be;
        color: #fff;
    }

    .checkout-steps li .step + span {
        display: none;
        padding: 0 20px;
        letter-spacing: 1px;
    }
        .checkout-steps li.selected .step + span {
            display: inline-block;
            color: #23a9be;
        }
    .checkout-steps li.done .step {
        background: var(--dd-bkg1);
        color: var(--dd-grey);
    }

/*checkout-sections*/
#mainContent.main-checkout {
    display: block;
    margin: 0 auto;
    max-width: 940px;
    min-height:80vh;
}
.main-checkout{

}
    .main-checkout .borderbox {
        display: block;
        border: 1px solid var(--site-border);
        padding: 1.85rem;
        margin: 0.85rem auto;
        background: #fff;
        border-radius: 4px;
    }
        .main-checkout .borderbox.accordion-frame{
            padding:0.85rem 1.85rem;
        }
            .main-checkout .borderbox.accordion-frame .accordion-title {
                padding: 0;
                margin: 0;                             
            }
            .main-checkout.order-payment .borderbox.accordion-frame .accordion-title {
                padding: 0;
                margin: 0 0 0.85rem;
                text-transform: uppercase;
                font-size: 0.68rem;                
            }




        /*address-form*/
        .main-checkout .address-summary {
        }
        .main-checkout.order-payment .address-summary {
            margin:0.85rem 0;
        }

    .main-checkout.order-payment .order-summary {
        width: 100%;
        display: flex;
        align-items: center;
        margin: 0 0 1.85rem;
        justify-content: space-between;
    }

        .main-checkout.order-payment .order-summary .os-total {
        }

        .main-checkout.order-payment .order-summary .os-total-amount {
            color: var(--dd-green);
        }

    .main-checkout.order-payment .address-summary .txtbox {
        width: 48%;
    }
.address-summary .txtbox p {
    color: var(--dd-grey);
}



.address-summary button.user-edit {
    background: var(--dd-bkg1);
    color: var(--dd-grey);
    border-radius: 4px;
    min-width: 130px;
    font-size: 0.68rem;
    text-transform:uppercase;
    font-weight:500;
}
    .address-summary button.user-edit:hover {
        color: var(--dd-light-grey);
    }
    .address-input .searchPostcode input[type="text"]:not(.q-field__native) {
        width: 100%;
    }
.address-input .postcode {
    display: block;
    margin: 1.85rem 0 0;
}

.main-checkout .terms .buttonBox {
    margin: 0.85rem 0;
    display: inline-block;
    position: relative;
}
.main-checkout .user-action {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin: 0 0 1.85rem;
}
.main-checkout .yourAddress{
    width:100%;
    /*border:1px solid #fc0;*/
    display:flex;
    justify-content:space-between;
}
.yourAddress > .row {
    width: 100%;    
    display: flex;
    justify-content: space-between;
}
.yourAddress .deliveryAddress,
.yourAddress .billingAddress {    
    padding: 0;
    margin: 0;
    width: 48%;
}

.yourAddress .deliveryAddress {
}
.yourAddress .billingAddress{

}
.billingAddress .buttonBox {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    margin: 0 0 0.85rem;
}

.billingAddress .user-action {
    /* background: #efefef; */
    margin-bottom: 2.0rem;
}


/*checkout-car-details*/
.checkout-car-details{

}
.accordion-frame.borderbox.checkout-car-details .accordion {
    margin: 1.85rem 0 0;
    padding:0;
    border:none;
}
.accordion-frame.borderbox.checkout-car-details.active .accordion{
    display:flex;
    padding:0;
    border:none;
}
.checkout-car-details .accordion > div{
    width:32%;
}
/*checkout-optional-info*/
.checkout-optional-info .accordion {
    margin: 0.85rem 0;
    border: none;
}
    .checkout-optional-info .accordion > .block1 {
        width: 100%;
        /* border: 1px solid #fc0; */
        margin: 1.85rem 0 0;
    }
    /*optional-info textarea*/
.checkout-optional-info .block1 label,
.checkout-optional-info .block1 input {
    min-height: 220px;
}
.checkout-optional-info .block1 .q-field__label,
.checkout-optional-info .block1 input {
    font-size: 0.85rem;
    color: var(--dd-grey);
    white-space: break-spaces;
}
    .checkout-optional-info .block1 input{
        padding:0.85rem;
    }

/*terms*/
.main-checkout .terms {
    display: flex;
    justify-content: flex-end;
    gap: 0.85rem;
}
    .main-checkout .terms .buttonBox {
        margin: 0 0 0.45rem;
    }
.main-checkout .checkoutLinks .button.line,
.main-checkout .terms .button.line {
    height: 44px;
    border: none;
    background: var(--dd-bkg1);
    font-size: 0.68rem;
}
    .main-checkout .checkoutLinks .button.line:hover,
    .main-checkout .terms .button.line:hover {
        color: var(--dd-light-grey);
    }

/*continue-to-payment*/
.main-checkout .sectionFooter {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    border-top: 2px solid var(--dd-light-grey);
    padding: 0.85rem 0;
}



/*order-summary-frame*/
#checkout:has(#masthead.docked):not(:has(.order-summary-frame.active)) .order-summary-frame {
    position: sticky;
    top: 70px;
    height: 80px;
    background: #fff;
    overflow: hidden;
    z-index: 100;
    box-shadow: 0 18px 10px -18px rgba(0, 0, 0, 0.24);
    border-radius: 0 0 4px 4px;
}

#checkout:has(#masthead.docked) .order-summary-frame .txtbox {
    display: none;
}

    .main-checkout.order-payment .order-summary-frame .total-sidebar,
    .main-checkout.order-payment .order-summary-frame .offerBox,
    .main-checkout.order-payment .order-summary-frame .current-basket {
        display: none;
    }

.main-checkout.order-payment .order-summary-frame .accordion {
    margin-top: 1.85rem;
    border:none;
}
.main-checkout.order-payment .summary-container {
    border: none;
    padding-bottom:0;
    margin:0;
}
.main-checkout.order-payment {
}
.order-payment .checkoutLinks {
    display: flex;
    gap: 0.85rem;
    position: sticky;
    inset: 85px 0 auto auto;
    width: fit-content;
    justify-content: flex-end;
    /* background: #fc0; */
    z-index: 12;
    padding: 0 0.85rem;
    right: 0;
    margin: 0 0 0 auto;
}

/*order-payment*/
.order-payment .placeOrder {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    border-top: 2px solid var(--dd-light-grey);
    padding: 0.85rem 0 0;
}
.order-payment .buttonBox input[type='radio']:checked + label{
    background-color:var(--site-black);
}
    .order-payment .buttonBox input[type="radio"]:checked + label svg {
        fill: var(--dd-green);
    }
/*----------------------------------------------------------------------------------------------------------------------- Begin Responsive Queries*/
/* ----------------------------------------------------------------------- Min Withs Smallest to largest */
@media only screen and (min-width: 768px) {
}

@media only screen and (min-width: 1024px) {
}

@media only screen and (min-width: 1180px) {
}

@media only screen and (min-width: 1280px) {
}

@media only screen and (min-width: 1440px) {
}

@media only screen and (min-width: 1680px) {
}

/* ----------------------------------------------------------------------- MAX Withs Largest to smallest */

@media only screen and (max-width: 1679px) {
}

@media only screen and (max-width: 1439px) {
    .basket-page-frame {        
        gap: 3rem;        
    }
}

@media only screen and (max-width: 1279px) {
    
    .basket-page-frame {
        gap: 2rem;
        flex-direction: column;
        padding: 2.85rem 0 0;
    }
}

@media only screen and (max-width: 1179px) {
    #checkout #masthead #logo {
        height: 45px;
        margin: 0;
        width: fit-content;
    }
    #checkout #masthead > .innerframe {
        height: 65px;
        padding: 0 1.85rem;
    }
    #checkout #search_icon{
        display:none;
    }
    #checkout #icon_menu {
        display: none;
    }
    .checkoutBox{
        width:fit-content;
        position:relative;
        inset:initial;
        margin:0;
        min-width:initial;
    }

    .basket-page-frame .main-basket-side {
        position: initial;
        height: fit-content;
        max-height: initial;
    }
    .checkout-steps {
        position: relative;
        border: none;
        padding: 0;
        box-shadow:none;
        inset: initial;
        margin: 2rem 0 4rem;
    }
    .sectionFooter p {
        width: 100%;
        margin: 1.85rem 0 0;
    }
    .sectionFooter .button.checkoutb {
        width: 100%;        
    }
}

@media only screen and (max-width: 1023px) {
    .basket-page-frame {
        gap: 2rem;
        flex-direction: column;
    }
    .basket-page-frame .main-basket-side{
        width:100%;
        display:flex;
        justify-content:space-between;
        gap:1.85rem;
    }
    .headedPanel{
        padding:1.85rem;
    }
    .main-checkout .terms,
    .accordion-frame.borderbox.checkout-car-details.active .accordion,
    .yourAddress > .row {
        flex-direction: column;
    }
    .checkout-car-details .accordion > div,
    .yourAddress .deliveryAddress, 
    .yourAddress .billingAddress {        
        width: 100%;
    }
}

@media only screen and (max-width: 767px) {
    #logo img {
        object-position: center;
    }
    .checkoutBox h6 {
        margin: 0;
        font-size: 0.86rem;
        line-height: 0.96rem;
    }
    /*main-basket-content*/
    .main-basket-content {

    }
        .main-basket-content .current-basket .basket-txt span{
            margin:0.45rem 0 0;
        }
    .current-basket .basket-txt {
        justify-content: center;
        flex-direction: column;
        gap: 0.45rem;
    }
               
        .basket-txt .basket-item-count {
            width: 100%;
        }
        .basket-txt .basket-item-total {
            width: 100%;
        }

    
    
    /*basket line items*/
    .basket_item_frame .basket_item {
        flex-wrap: wrap;
        justify-content: space-between;
        flex-direction: row;
        gap: 0.85rem 0;
    }
    .basket_item .product_image {
        width: 100%;
    }
        .basket_item .product_info {
            width:60%;
            padding:0;
        }
            .product_info .basket-item-total {
                width: 48%;
            }
            .product_info a {
                
            }
    .basket_item .product_price {
        width: 38%;
        
    }
    .product_price .update-quantity-link{
        position:relative;
        inset:initial;
        
    }

    .main-basket-content .summary-container {
        gap: 4rem;
        padding-bottom: 1.85rem;
        margin: 0;
        flex-direction: column-reverse;
        align-items: center;
    }
    /*basket-sidebar*/

}

@media only screen and (max-width: 599px) {
    .basket-page-frame {
        padding: 1.85rem 0 0;
    }
        .basket-page-frame .main-basket-side{
            flex-direction:column;
        }
        .main-basket-content .summary-container .total-sidebar {
            width: 100%;
        }
    
    
    /*basket conetnt*/
    .current-basket {
        flex-direction: column;
    }
        .current-basket .basket-txt{
            width:100%;
        }
    .basket_item_frame{
        margin:0 0 0.85rem;
    }
    .basket-txt .basket-item-total,
    .basket-txt .basket-item-count {
        width: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
    }
    .current-basket .user-checkout{
        width:100%;
        margin:0.85rem 0 0;
    }
    .basket_item .product_price,
    .basket_item .product_info {
        width: 100%;
        
    }
    .basket_offer{
        flex-wrap:wrap;
    }
        .basket_offer .label{
            width:100%;
        }
        .basket_offer .txt {
            width: 60%;
        }
        .basket_offer .figure {
            width: 40%;
        }
        /*basket-sidebar*/
    .basket-header-nav {
        padding: 0.85rem 0 0;
        margin: 0 1.85rem 0 0;
        grid-template-columns: repeat(1,1fr);
    }
    .basketFrame .current-basket {
        max-width: 90%;
        gap: 0.45rem;
    }
    .current-basket .empty-basket{
        width:100%;
    }
    .basket-header-nav .navlink{
        min-height:initial;
    }
    .basket-header-nav .navlink .txt span {
        display: none;
    }
    /*checkout*/
    #checkout #masthead{
        height:80px;
    }
    #checkout #masthead > .innerframe {
        height: 100%;
        padding: 0 0.85rem;
    }
    #checkout .uppernav {
        margin: 1.25rem 0 auto auto;
        width: fit-content;
        gap: 0.85rem;
    }
    

    .checkoutBox {
        gap:0.45rem;
        position: absolute;
        inset: auto 0.85rem 0 auto;
    }
        .checkoutBox h6 {
            font-size: 0.66rem;
            color:var(--dd-grey);
        }

        .checkoutBox svg.icon {
            width: 26px;
            height: 26px;
            fill: var(--dd-grey);
        }
   

    .main-checkout .borderbox {
        padding: 0;
        border: none;
        margin: 0 0 1.85rem 0;
    }
        
    .buttonBox label{
        width:100%;
    }
    .main-checkout .borderbox.accordion-frame {
        padding:0;
    }
    /*.order-payment */
    #checkout:has(#masthead.docked):not(:has(.order-summary-frame.active)) .order-summary-frame {
        position:relative;
        inset:initial;
        height:auto;        
        box-shadow:none;
        border-radius:0;
    }
    #checkout:has(#masthead.docked) .order-summary-frame .txtbox {
        display:flex;
        flex-direction:column;
        gap:0;
        margin:0.85rem 0;
    }
    .main-checkout.order-payment .address-summary .txtbox {
        width:100%;
    }
    .address-summary .txtbox h6{
        margin-bottom:0.45rem;
    }
    .address-summary .txtbox p {
        margin: 0;
    }
    .order-payment .checkoutLinks {
        width: 100%;
        padding: 0;
        flex-direction: column;
        gap: 0.45rem;
        margin: 0 0 1.85rem;
    }
    .main-checkout.order-payment .order-summary {
        margin: 0 0 0.85rem;
    }
    .buttonBox{
        width:100%;
        margin:0;
    }


}
/*iphone6 + regular android*/
@media only screen and (max-width: 479px) {
}
/*Iphone 4&5*/
@media only screen and (max-width: 359px) {
}

/* Size and Orientation */
@media only screen and (max-width: 479px) and (orientation: portrait) {
}
/* Landscape Orientation */
@media screen and (orientation: landscape) {
}

/* Portrait Orientation */
@media screen and (orientation: portrait) {
}

/*--------------------------------------------------------------------- End Responsive Queries*/