.esh-app-footer {
    background-color: #000;
    border-top: 1px solid #eee;
    margin-top: 2.5rem;
    padding-bottom: 2.5rem;
    padding-top: 2.5rem;
    width: 100%
}

.esh-app-footer-brand {
    height: 50px;
    width: 230px;
}

.esh-app-header {
    margin: 15px;
}

.medListSelected {
    background-color: #cef0ea;
}
.container
{
    max-width: 100%;
}
.modal-profile-body {
    background: #ec7400;
}
@media (min-width: 576px){
    .modal-dialog-width {
    max-width: 250px !important;
}
}
.custom-input {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    padding-left: 0px;
}
.custom {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    width: 30px !important;
}
.custom-input:focus {
    border-color: #ec7400 !important;
    box-shadow: none !important;
}
.custom-button {
    box-shadow: none !important; /* Remove box shadow on focus */
}
.style_font {
    font-family: "Segoe UI",sans-serif;
    font-size: 11pt;
}
.esh-app-footer {
    background-color: #E5E4E2;
    border-top: 1px solid #eee;
    margin-top: 2.5rem;
    padding-bottom: 0rem !important;
    padding-top: 0rem !important;
    width: 100%
}

.esh-app-footer-brand {
    height: 50px;
    width: 230px;
}

.esh-app-header {
    margin: 15px;
}
.home_category_list {
    max-width: 100%;
    padding-top: 0px;
    padding-bottom: 20px;
    padding-left: 0px !important;
    padding-right: 0px !important;
}
.home_category_list .card {
    margin-top: 20px !important;   
}
@media (max-width: 1020px) {
    .mobile_location {
        padding: 0px !important
    }
    .header_StoreSearch {
        width: 200px;
    }
    .searchbar_padding{
        padding-right: 0!important;
    }
}
@media (min-width: 1021px) {

    .header_StoreSearch {
        width: 250px !important;
    }
}



.dropdown-item:hover, .dropdown-item:focus {
    background-color: #c96402;
    border-color: #ec7400;
    color: white;
}

/*@media (min-width: 576px){
    .modal-dialog {
        max-width: 300px !important;
    }
}
*/
.location-icon-width {
    width: 5% !important;
}
.location-searchbar-width {
    width: 80% !important;
}
@media screen and (min-width: 1025px) {
    .width-lg-screen {
        width: 386px !important;
    }
    .widthSearchbar-lg-screen{
        width: 400px !important;
        float: right;
    }
}

    @media(min-width:1025px) {
        .header_SearchBar {
            width: 300px !important;
        }
    }

    @media(max-width:992px) {
        .footer_Address {
            text-align: center !important;
        }
    }

    @media(min-width:560px) {
        .carousel_homebanner_images img {
            height: 450px;
        }
      
    }


    /* font-display: swap — text paints immediately in the fallback face and re-renders once
       Montserrat arrives, instead of being INVISIBLE until then. The default (block) hides every
       heading and label for up to 3 seconds, which both delays LCP (the browser does not report
       text it has not painted) and fails the "ensure text remains visible during webfont load"
       audit outright. There was no font-display anywhere in this stylesheet.

       woff2 added and listed FIRST so browsers pick it: both .woff2 files were already sitting in
       wwwroot/fonts and simply were never referenced, so every visitor downloaded the ~30% larger
       .woff instead (17 KB vs 12 KB per face). .eot and .svg are kept for the legacy tail but moved
       last — they are dead weight for every browser in use and were being offered AHEAD of the
       formats those browsers actually want. */
    @font-face {
        font-family: Montserrat;
        font-weight: 400;
        font-display: swap;
        src: url("../fonts/Montserrat-Regular.woff2") format("woff2"), url("../fonts/Montserrat-Regular.woff") format("woff"), url("../fonts/Montserrat-Regular.ttf") format("truetype"), url("../fonts/Montserrat-Regular.eot?") format("eot"), url("../fonts/Montserrat-Regular.svg#Montserrat") format("svg");
    }

    @font-face {
        font-family: Montserrat;
        font-weight: 700;
        font-display: swap;
        src: url("../fonts/Montserrat-Bold.woff2") format("woff2"), url("../fonts/Montserrat-Bold.woff") format("woff"), url("../fonts/Montserrat-Bold.ttf") format("truetype"), url("../fonts/Montserrat-Bold.eot?") format("eot"), url("../fonts/Montserrat-Bold.svg#Montserrat") format("svg");
    }

    .homeaboutsection {
        color: #4D4D4D;
        font-family: 'Open Sans',sans-serif !important;
        font-size: 16px;
        background-color: #f8f9fa;
    }

    @media (max-width: 767px) {
        .homeaboutsection {
            font-size: 14px;
        }
    }

    body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    .wrapper {
        flex: 1;
    }

    .quotation_addMedicine-textbox-container {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }

    .quotation_medicine-delete-button {
        margin-left: 10px;
        /* background-color: red;
        color: white; */
        /* border: none;
        cursor: pointer; */
    }

.Order-Type {
    color: #ff8800 !important;
    border-color: #ff8800;
    cursor: pointer;
    padding: 0px;
    padding-bottom: 0px !important;
    padding-top: 0px !important;
    text-align: center;
    border-radius: 0.25rem;
}
.Order-Type-Text {
    color: #ec7400 !important;
}
@media(max-width:992px) {
    .Order-Type {
        height: 30px;
        font-size: 14px;
    }
}

    .quotationForm_medicineQuantity-input {
        width: 70px; /* You can adjust the width as needed */
    }

    .overlay-button {
        position: absolute;
        top: 50%; /* Adjust as needed */
        left: 50%; /* Adjust as needed */
        transform: translate(-50%, -50%);
        z-index: 2; /* Ensure the button is above the banner */
    }

    .bg-skyblue {
        background: rgb(150,222,209);
        background: linear-gradient(0deg, rgba(150,222,209,1) 0%, rgba(255,255,255,1) 100%);
    }

    .bg-orange {
        background: rgb(236,116,0);
        background: linear-gradient(0deg, rgba(236,116,0,1) 0%, rgba(255,255,255,1) 100%);
    }

    .bg-green {
        background: rgb(112,213,72);
        background: linear-gradient(0deg, rgba(112,213,72,1) 0%, rgba(255,255,255,1) 100%);
    }

    .bg-pink {
        background: rgb(248,94,142);
        background: linear-gradient(0deg, rgba(248,94,142,1) 0%, rgba(255,255,255,1) 100%);
    }

    .bg-darkgreen {
        background: rgb(31,193,122);
        background: linear-gradient(0deg, rgba(31,193,122,1) 0%, rgba(255,255,255,1) 100%);
    }

    .bg-blue {
        background: rgb(52,188,242);
        background: linear-gradient(0deg, rgba(52,188,242,1) 0%, rgba(255,255,255,1) 100%);
    }

    .cateogory_icon_color {
        color: #ec7400;
        font-size: 60px;
    }

    .label_text_white_color {
        color: white !important;
    }

    .setCurLoc:hover {
        background-color: #ec7400 !important;
        color: white !important;
    }


    .incre_decre_btn_quant {
        border-color: #ec7400;
        border-radius: 50%;
        color: #ec7400;
    }

        .incre_decre_btn_quant:hover {
            border-color: #ec7400;
            color: white;
            background-color: #ec7400;
        }

    .label_text_orange_color {
        color: #ec7400 !important;
    }

    .background_orange {
        background-color: #ec7400 !important;
    }

    .background_lightorange {
        background-color: #fbe1c7 !important;
    }

    .strikethrough {
        text-decoration: line-through;
        color: red;
        text-decoration-color: red;
    }

    .btn-style {
        border-color: #ec7400;
        background-color: #ec7400;
        color: white !important;
    }

        .btn-style:hover {
            background-color: #c96402;
            border-color: #ec7400;
        }

        .btn-style:focus {
            border-color: #ec7400;
        }

            .btn-style:active,
            .btn-style:focus,
            .btn-style:focus:active {
                box-shadow: inset 0 0 0 0px #ec7400, 0 0 0px 3px #ff9733;
                outline: none;
            }

    .btn-style-cart {
        border-color: #ec7400;
    }

        .btn-style-cart:hover {
            border-color: #ec7400;
        }

        .btn-style-cart:focus {
            border-color: #ec7400;
        }

            .btn-style-cart:active,
            .btn-style-cart:focus,
            .btn-style-cart:focus:active {
                box-shadow: none;
                outline: none;
            }

    .srch_btn {
        background-color: #fbe4cb;
        color: #ec7400;
        border-color: #ec7400
    }

    .brdr_orange {
        border-color: #ec7400
    }

    .btn-orange {
        color: #fff;
        background-color: #ec7400;
        border-color: #ec7400;
    }

    .btn-outline-orng {
        color: #ec7400;
        background-color: transparent;
        background-image: none;
        border-color: #ec7400;
    }

        .btn-outline-orng:hover {
            color: #fff;
            background-color: #ec7400;
            border-color: #ec7400;
        }

    .ctgry_padding {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    html, body {
        font-family: Montserrat, sans-serif;
        font-size: 16px;
        font-weight: 400;
        z-index: 10;
    }
    
    .cart_card-registration .select-input.form-control[readonly]:not([disabled]) {
        font-size: 1rem;
        line-height: 2.15;
        padding-left: .75em;
        padding-right: .75em;
    }

    .cart_card-registration .select-arrow {
        top: 13px;
    }

    .cart_bg-grey {
        background-color: #eae8e8;
    }

    .red_txt_color {
        color: red !important;
    }

    .orderDetail_bg-grey {
        /*background: rgb(234,232,232);
    background: linear-gradient(0deg, rgba(234,232,232,1) 0%, rgba(255,255,255,1) 100%);*/
        background: rgb(150,222,209);
        background: linear-gradient(0deg, rgba(150,222,209,1) 0%, rgba(255,255,255,1) 100%);
    }

    .basket_bg-grey {
        background: rgb(150,222,209);
        background: linear-gradient(0deg, rgba(150,222,209,1) 0%, rgba(255,255,255,1) 100%);
    }

    @media (min-width: 992px) {
        .cart_card-registration-2 .cart_bg-grey {
            border-top-right-radius: 16px;
            border-bottom-right-radius: 16px;
        }
    }

    @media (max-width: 991px) {
        .cart_card-registration-2 .cart_bg-grey {
            border-bottom-left-radius: 16px;
            border-bottom-right-radius: 16px;
        }
    }

    /* Hide arrows from number input */
    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    input[type="number"] {
        -moz-appearance: textfield;
    }

    .search_input_focus:focus {
        border-color: #ec7400 !important;
    }

    .cart_product_quant {
        width: 40px;
        border: none;
        background-color: white !important;
        padding: 0px;
        text-align: center;
    }

    .cart_login_btn {
        color: white !important;
    }

    .cart_card-body {
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        /*padding: 1.25rem;*/
        padding-top: 1.25rem;
        padding-right: 1.25rem;
        padding-left: 1.25rem;
    }

    /*CartScreen CSS End*/
    .containerStyle {
        max-width: 100% !important;
        padding-top: 85px;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
    }

    .homeContainerStyle {
        max-width: 100% !important;
        padding-top: 0px;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
    }

    .header_Menu {
        /*position: fixed !important;*/
        /*z-index: 999 !important;*/
        width: 100% !important;
    }

    .sign_btn {
        color: white !important;
        background-color: #ec7400;
        border-radius: 10px;
    }

    .profile_drpdwn {
        color: white !important;
        background-color: #ec7400;
        border-radius: 10px;
    }

    .white_color {
        color: white !important;
    }


    .nav-pills .nav-link {
        color: #ec7400;
    }

    /*.selectedMenuClass {*/
        /*background-color: #ec7400 !important;*/
        /*border-radius: 0px !important;*/
        /*color: white !important;*/
        /*font-size: 17px !important;
        border-bottom: 2px solid;
    }*/

    *, *::after, *::before {
        box-sizing: border-box;
    }

    .preloading {
        color: #00a69c;
        display: block;
        font-size: 1.5rem;
        left: 50%;
        position: fixed;
        top: 50%;
        transform: translate(-50%, -50%);
    }


    /* Style the empty cart message */
    .empty-cart {
        text-align: center;
    }

        .empty-cart h2 {
            font-size: 2rem;
            margin-bottom: 1rem;
        }

        .empty-cart p {
            font-size: 1.2rem;
            margin-bottom: 2rem;
        }

    .empty-cart-image {
        width: 12%;
    }


/*New Homepage UI CSS*/
.category-wrapper {
    display: flex;
    align-items: center;
    position: relative;
    padding-right: 15px;
    padding-left: 15px;
}

@media (max-width: 767px){
    .category-wrapper {
        padding-right: 0px;
        padding-left: 0px;
    }
}

.category-container {
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
    scroll-behavior: smooth;
}

.category-list {
    display: flex;
    /*gap: 10px;*/
    padding: 10px 0;
    margin: 0;
}

/* Reserved height for the category strip WHILE IT IS STILL EMPTY.
 *
 * This <ul> ships empty and is filled by /category/GetBusinessCategories, which takes about a
 * second. Until then the element is 20px tall (its own padding), so when the categories arrive the
 * strip snaps to roughly 150px and shoves the whole page down — a layout shift at the very top of
 * the homepage, above the fold, on every cold load, and the largest single contributor to CLS.
 *
 * Scoped to :empty rather than applied unconditionally, and that distinction is the important part.
 * A plain min-height is a bet on the rendered height being at least this tall; lose the bet — every
 * category name happens to fit on one line, say, because the one containing " & " was renamed — and
 * the strip is permanently padded with whitespace nobody asked for. :empty cannot do that: the
 * moment home-page.js inserts the first <li> the selector stops matching and the strip takes its
 * natural height, whatever that turns out to be. The value only has to be in the right area.
 *
 * ~150px is that area, from the box model: 10px padding-top + 4px li margin + 70px image + 8px
 * label margin + ~42px for a two-line label + 8px + 4px + 10px padding-bottom.
 *
 * NOTE: :empty does not match an element containing a whitespace text node, so the <ul> in
 * Index.cshtml is closed with no newline inside it. Reformatting that tag disables this rule.
 *
 * Known trade-off: if the categories request fails outright the strip stays empty and this leaves a
 * ~150px blank band instead of a 20px sliver. That is the rare, already-degraded case, and it is
 * the price of the reservation being correct in the normal one.
 *
 * The real fix is to server-render the first page of categories — no empty state to reserve for at
 * all, and the 1s fetch leaves the critical path. This is the cheap half. */
.category-list:empty {
    min-height: 150px;
}

    .category-list li {
        flex: 0 0 auto;
    }

.scroll-left,
.scroll-right {
    color: white !important;
    background-color: #ef8f32 !important;
    border-radius: 50%;
    border: none;
    /*padding: 7.5px 15px;*/
    cursor: pointer;
    font-weight: 1000 !important;
    font-size: 24px;
    transition: 0.3s;
    width: 40px;
    height: 40px;
}

.scroll-left {
    margin-right: 10px;
}

.scroll-right {
    margin-left: 10px;
}

.scroll-left:hover,
.scroll-right:hover {
    background-color: #ec7400 !important;
}

@media (max-width: 767px) {
    .scroll-left {
        font-size: 14px;
        position: absolute;
        left: 0;
        top: 30%;
    }
}

    



@media (max-width: 767px) {
    .scroll-right {
        font-size: 14px;
        position: absolute;
        right: 0;
        top: 30%;
    }
}

    

    /* Hide arrows initially */
    /* .d-none { */
    /*     display: none !important; */
    /* } */

.homePageBusiCtgryImg {
    height: 70px;
    width: 70px;
    border-radius: 15px;
    box-shadow: rgb(236, 116, 0) 0px 4px 8px;
}

    .homePageBusiCtgryLi {
        /* height: 150px; */
        /*width: 100px;*/
        margin-left: 1rem !important;
        margin-right: 1rem !important;
        margin-bottom: .25rem !important;
        margin-top: .25rem !important;
    }

    @media (max-width: 767px) {
        .homePageBusiCtgryLi {
            margin-left: 0.5rem !important;
            margin-right: 0.5rem !important;
        }
    }

    .homePageBusiCtgryTxt {
        text-align: center;
        font-weight: 300;
        font-size: 14px;
    }

    .active-category {
        border-bottom: 2px solid #ec7400; /* Orange highlight */
        font-weight: bold;
    }

    .no-store-available-img{
        width: 160px !important;
        text-align: center;
    }
.no-store-available-message {
    text-align: center;
    margin: 1.5rem;
    color: #6c757d;
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: .5;
    }
}

.skeleton-card {
    height: 300px;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.skeleton-image {
    height: 180px;
    background-color: #e5e7eb;
}

.skeleton-content {
    padding: 16px;
}

.skeleton-title {
    height: 20px;
    background-color: #e5e7eb;
    margin-bottom: 12px;
    width: 80%;
    border-radius: 4px;
}

.skeleton-text {
    height: 14px;
    background-color: #e5e7eb;
    margin-bottom: 8px;
    width: 60%;
    border-radius: 4px;
}

    /* Style the No Medicines or Products found message */
    .no-product-found {
        margin-top: 5%;
        text-align: center;
    }

        .no-product-found h2 {
            font-size: 2rem;
            margin-bottom: 1rem;
        }

        .no-product-found p {
            font-size: 1.2rem;
            margin-bottom: 2rem;
        }

    .no-product-found-image {
        width: 12%;
    }

    .contact-send-button {
        border-color: #ec7400;
        background-color: #ec7400;
        color: white !important;
    }

        .contact-send-button:hover {
            background-color: #c96402;
            border-color: #ec7400;
        }

        .contact-send-button:focus {
            border-color: #ec7400;
        }

            .contact-send-button:active,
            .contact-send-button:focus,
            .contact-send-button:focus:active {
                box-shadow: inset 0 0 0 0px #ec7400, 0 0 0px 3px #ff9733;
                outline: none;
            }

    .custom-buttons {
        border-color: #ec7400 !important;
        background-color: white;
        color: #ec7400 !important;
    }

        .custom-buttons:hover {
            background-color: #ec7400;
            border-color: #ec7400;
            color: white !important;
        }

        .custom-buttons:focus {
            border-color: #ec7400;
            background-color: #ec7400;
            color: white !important;
        }

        .custom-buttons:active {
            border-color: #ec7400;
            background-color: #ec7400;
            box-shadow: inset 0 0 0 0px #ec7400, 0 0 0px 3px #ff9733 !important;
        }

        .custom-buttons:active,
        .custom-buttons:focus,
        .custom-buttons:focus:active {
            box-shadow: inset 0 0 0 0px #ec7400, 0 0 0px 3px #ff9733;
            outline: none;
            background-color: #ec7400 !important;
            border-color: #ec7400 !important;
            color: white !important;
        }
        /* Apply disabled styles */
        .custom-buttons[disabled] {
            border-color: #ec7400 !important;
            background-color: white !important;
            color: #ec7400 !important;
            pointer-events: stroke;
            opacity: 0.6; /* Reduce opacity to show it's disabled */
            cursor: not-allowed; /* Show the "not-allowed" cursor */
            box-shadow: none !important; /* Remove any box-shadow */
        }

            /* Ensure hover, focus, and active states don’t apply when disabled */
            .custom-buttons[disabled]:hover,
            .custom-buttons[disabled]:focus,
            .custom-buttons[disabled]:active {
                background-color: white !important;
                border-color: #ec7400 !important;
                color: #ec7400 !important;
                box-shadow: none !important;
            }

    /* Style the "Continue Shopping" button */
    .btn-continue-shopping {
        font-size: 1.2rem;
    }

    select::-ms-expand {
        display: none;
    }

.logoclass {
    /*width: 75px !important;*/
    height: 60px !important;
    /*width: 110px !important;
    box-shadow: 0px 0px 12px 11px white;
    border-radius: 2%;*/
}

    @media (max-width: 767px) {
        .logoclass {
/*            width: 65px !important;
            height: 35px !important;*/
        }
    }

    .modal {
        z-index: 999;
        margin-top: 50px;
    }

    .modal-backdrop {
        z-index: 10;
    }

    .priceTxtOnStoreMenu {
        /*color: #3871c1;*/
        color: #ec7400;
        font-size: 16px;
        font-weight: bold;
    }

    .footerAboutContentFont {
        font-size: 15px;
    }

    .footerAddressContentFont {
        margin-bottom: 0;
        font-size: 15px;
    }

    @media screen and (min-width:992px) {
        .form-input {
            max-width: 360px;
            width: 360px;
        }
    }

    .form-input {
        border-radius: 0;
        height: 45px;
        padding: 10px;
    }

    .form-input-small {
        max-width: 100px !important;
    }

    .form-input-medium {
        width: 150px !important;
    }

    .alert {
        padding-left: 0;
    }

    .alert-danger {
        background-color: transparent;
        border: 0;
        color: #fb0d0d;
        font-size: 12px;
    }



    a:hover, a:active {
        text-decoration: none;
    }


    .aln-icns button:hover {
        font-size: 17px;
    }
    /* Styles for desktop screens */
    @media (min-width: 770px) {

        .chemistMenusSection {
            /*  background-color: #f8f9fa;*/
            width: 100%;
            position: sticky;
            align-self: flex-start;
            /* Under the desktop slim header — see _CompactHeader.cshtml. */
            top: calc(var(--d2s-compact-h, 0px) + 1px);
            z-index: 1;
            text-transform: uppercase;
            /*   padding-top: 1vw;*/
            padding-right: 5px;
            padding-bottom: 1vw;
            padding-left: 5px;
            /*z-index: 99;*/
            /*width: 20%;*/
            height: calc(-65px + 100vh); /* Set your desired height here */
            overflow-y: auto; /* Add scrollbar if content exceeds the height */
        }

            .chemistMenusSection::-webkit-scrollbar {
                width: 12px;
            }

            .chemistMenusSection::-webkit-scrollbar-thumb {
                background-color: #ccc;
            }

        .chemistMenusSectionitems {
            width: 100%;
        }

        .selectedMenuClass {
            width: fit-content;
        }
    }

    .star-rating .fa {
        font-size: 40px;
        cursor: pointer;
        color: #ddd;
    }

        .star-rating .fa.checked {
            color: #f39c12;
        }

    @media (max-width: 769px) {
        .chemistMenusSection {
            width: 100%;
            display: flex;
            position: sticky;
            align-items: flex-end;
            flex-wrap: nowrap;
            padding: 0;
            overflow-x: auto;
            background: #fff;
            /* 0 below 769px; at exactly 769 this rule and the slim header are both live. */
            top: var(--d2s-compact-h, 0px);
            margin-right: -10px;
            margin-left: -10px;
            z-index: 2;
            border-bottom: 1px solid #ececec;
            box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.1);
            scrollbar-color: transparent transparent;
        }

        .selectedMenuClass {
            font-size: 12px !important;
        }

        .chemistMenusSectionitems {
            font-size: 14px;
        }

        .container-fluid h3 {
            font-size: 20px;
        }
    }


    .chemist-Detail {
        padding-bottom: 5px;
        padding-top: 10px;
        background-color: #f8f9fa;
    }

    .chemist_Img-InWeb {
        width: 130px;
        height: 130px;
        box-sizing: content-box;
    }

    .store_Img-InMobile {
        width: 64px;
        height: 64px;
        box-sizing: content-box;
    }

    footer {
        /*position: absolute;*/
        /*bottom: 0;*/
        width: 100%;
        z-index: 100;
    }


    /*.aboutProductDescription {
        font-size: 15px;
    }*/
.aboutProductDescription {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Show only 3 lines initially */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.3s ease;
    font-size: 14px;
}

.expanded {
    -webkit-line-clamp: unset; /* Show full text */
}

.toggleDescription {
    color: #ec7400; /* Blue color */
    text-decoration: none;
    font-size: 13px;
    display: inline-block;
}

    .toggleDescription:hover {
        text-decoration: underline;
    }

    .card-footer {
        padding: 0.25rem 1.25rem;
        background-color: transparent;
        border: none;
    }

    .card-body {
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        /*padding: 1.25rem;*/
        /* padding-top: 3.25rem;*/
        padding-right: 1.25rem;
        /* padding-bottom: 0.75rem !important;*/
        padding-left: 1.25rem;
    }

    .card-title-color {
        color: #212529;
    }

    .order_details_card-body {
        padding-top: 1.25rem;
        padding-bottom: 1.25rem !important;
    }

    .card-img-top {
        /* border-bottom: 1px solid rgba(0, 0, 0, 0.125);*/
    }

    .productImgCarousel img {
        height: 200px;
        width: 100%;
        margin-top: 2px;
        margin-bottom: 2px;
        object-fit: contain;
        object-position: center;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
    }

    .product-no-image {
        height: 200px;
        width: 100%;
        object-fit: fill;
        object-position: center;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
    }

    .esh-basket {
        min-height: 80vh;
    }

    #basketItemsCount {
        font-size: 13px;
        color: #fff;
        background: #ec7400;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        position: relative;
        left: -20px;
        top: -21px;
        opacity: 0.9;
    }

    #basketItemsCountMobile {
        font-size: 12px;
        color: #fff;
        background: #ec7400;
        border-radius: 50%;
        text-align: center;
        line-height: 20px;
        position: relative;
        left: -19px;
        top: -21px;
        opacity: 0.9;
        width: 20px;
        height: 20px;
        display: inline-block;
    }

    .esh-basket-titles {
        padding-bottom: 1rem;
        padding-top: 2rem;
    }

    .esh-basket-titles--clean {
        padding-bottom: 0;
        padding-top: 0;
    }

    .esh-basket-title {
        text-transform: uppercase;
    }

    .esh-basket-items--border {
        border-bottom: 1px solid #eee;
        padding: .5rem 0;
    }

        .esh-basket-items--border:last-of-type {
            border-color: transparent;
        }

    .esh-basket-items-margin-left1 {
        margin-left: 1px;
    }

    .esh-basket-item {
        font-size: 1rem;
        font-weight: 300;
    }

    .esh-basket-item--middle {
        line-height: 8rem;
    }

    @media screen and (max-width:1024px) {
        .esh-basket-item--middle {
            line-height: 1rem;
        }
    }

    .esh-basket-item--mark {
        color: #00a69c;
    }

    .esh-basket-image {
        height: 8rem;
    }

    .esh-basket-input {
        line-height: 1rem;
        width: 100%
    }

    .esh-basket-checkout {
        background-color: #83d01b;
        border: 0;
        border-radius: 0;
        color: #fff;
        display: inline-block;
        font-size: 1rem;
        font-weight: 400;
        margin-top: 1rem;
        padding: 1rem 1.5rem;
        text-align: center;
        text-transform: uppercase;
        transition: all .35s;
    }

        .esh-basket-checkout:hover {
            background-color: #4a760f;
            transition: all .35s;
        }

    .esh-basket {
        min-height: 80vh;
    }

    .esh-basket-titles {
        padding-bottom: 1rem;
        padding-top: 2rem;
    }

    .esh-basket-titles--clean {
        padding-bottom: 0;
        padding-top: 0;
    }

    .esh-basket-title {
        text-transform: uppercase;
    }

    .esh-basket-items--border {
        border-bottom: 1px solid #eee;
        padding: .5rem 0;
    }

        .esh-basket-items--border:last-of-type {
            border-color: transparent;
        }

    .esh-basket-items-margin-left1 {
        margin-left: 1px;
    }

    .esh-basket-item {
        font-size: 1rem;
        font-weight: 300;
    }

    .esh-basket-item--middle {
        line-height: 8rem;
    }

    @media screen and (max-width:1024px) {
        .esh-basket-item--middle {
            line-height: 1rem;
        }
    }

    .esh-basket-item--mark {
        color: #00a69c;
    }

    .esh-basket-image {
        height: 8rem;
    }

    .esh-basket-input {
        line-height: 1rem;
        width: 100%
    }

    .esh-basket-checkout {
        background-color: #83d01b;
        border: 0;
        border-radius: 0;
        color: #fff;
        display: inline-block;
        font-size: 1rem;
        font-weight: 400;
        margin-top: 1rem;
        padding: 1rem 1.5rem;
        text-align: center;
        text-transform: uppercase;
        transition: all .35s;
    }

        .esh-basket-checkout:hover {
            background-color: #4a760f;
            transition: all .35s;
        }

    .esh-basketstatus {
        cursor: pointer;
        display: inline-block;
        float: right;
        position: relative;
        transition: all .35s;
    }

        .esh-basketstatus.is-disabled {
            opacity: .5;
            pointer-events: none;
        }

    .esh-basketstatus-image {
        height: 36px;
        margin-top: .5rem;
    }

    .esh-basketstatus-badge {
        background-color: #83d01b;
        border-radius: 50%;
        color: #fff;
        display: block;
        height: 1.5rem;
        left: 50%;
        position: absolute;
        text-align: center;
        top: 0;
        transform: translateX(-38%);
        transition: all .35s;
        width: 1.5rem;
    }

    .esh-basketstatus-badge-inoperative {
        background-color: #f00;
        border-radius: 50%;
        color: #fff;
        display: block;
        height: 1.5rem;
        left: 50%;
        position: absolute;
        text-align: center;
        top: 0;
        transform: translateX(-38%);
        transition: all .35s;
        width: 1.5rem;
    }

    .esh-basketstatus:hover .esh-basketstatus-badge {
        background-color: transparent;
        color: #75b918;
        transition: all .35s;
    }

    .esh-basketstatus {
        cursor: pointer;
        display: inline-block;
        float: right;
        position: relative;
        transition: all .35s;
    }

        .esh-basketstatus.is-disabled {
            opacity: .5;
            pointer-events: none;
        }

    .esh-basketstatus-image {
        height: 36px;
        margin-top: .5rem;
    }

    .esh-basketstatus-badge {
        background-color: #83d01b;
        border-radius: 50%;
        color: #fff;
        display: block;
        height: 1.5rem;
        left: 50%;
        position: absolute;
        text-align: center;
        top: 0;
        transform: translateX(-38%);
        transition: all .35s;
        width: 1.5rem;
    }

    .esh-basketstatus-badge-inoperative {
        background-color: #f00;
        border-radius: 50%;
        color: #fff;
        display: block;
        height: 1.5rem;
        left: 50%;
        position: absolute;
        text-align: center;
        top: 0;
        transform: translateX(-38%);
        transition: all .35s;
        width: 1.5rem;
    }

    .esh-basketstatus:hover .esh-basketstatus-badge {
        background-color: transparent;
        color: #75b918;
        transition: all .35s;
    }

    .esh-catalog-hero {
        background-image: url("../images/main_banner.png");
        background-size: cover;
        height: 260px;
        width: 100%
    }

    .location-map_background {
        background-image: url("../images/location_map.png");
        background-size: cover;
    }

    /* Style for the custom file input */
    .custom-file-input {
        display: none; /* Hide the native file input */
    }

    .custom-file-label {
        /* background-color: #007BFF; 
        color: #fff;
        padding: 8px 12px;
        border-radius: 5px;
        cursor: pointer; */
        width: 92%;
        position: absolute;
        height: calc(1.5em + 0.75rem + 2px);
        padding: 0.375rem 0.75rem;
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
        top: auto;
        right: auto;
        left: auto;
    }

        /* Style to visually replace the native file input */
        .custom-file-label::after {
            content: 'Upload Prescription'; /* Label text to indicate the action */
        }

    .esh-catalog-title {
        position: relative;
        top: 74.28571px;
    }

    .esh-catalog-filters {
        background-color: #00a69c;
        height: 65px;
    }

    .esh-catalog-filter {
        -webkit-appearance: none;
        background-color: transparent;
        border-color: #00d9cc;
        color: #fff;
        cursor: pointer;
        margin-right: 1rem;
        margin-top: .5rem;
        min-width: 140px;
        outline-color: #83d01b;
        padding-bottom: 0;
        padding-left: .5rem;
        padding-right: .5rem;
        padding-top: 1.5rem;
    }

        .esh-catalog-filter option {
            background-color: #00a69c;
        }

    .esh-catalog-label {
        display: inline-block;
        position: relative;
        z-index: 0;
    }

        .esh-catalog-label::before {
            color: rgba(255, 255, 255, .5);
            content: attr(data-title);
            font-size: .65rem;
            margin-left: .5rem;
            margin-top: .65rem;
            position: absolute;
            text-transform: uppercase;
            z-index: 1;
        }

        .esh-catalog-label::after {
            background-image: url("../images/arrow-down.png");
            content: '';
            height: 7px;
            position: absolute;
            right: 1.5rem;
            top: 2.5rem;
            width: 10px;
            z-index: 1;
        }

    .esh-catalog-send {
        background-color: #83d01b;
        color: #fff;
        cursor: pointer;
        font-size: 1rem;
        margin-top: -1.5rem;
        padding: .5rem;
        transition: all .35s;
        margin-bottom: -6px;
    }

        .esh-catalog-send:hover {
            background-color: #4a760f;
            transition: all .35s;
        }

    .esh-catalog-items {
        margin-top: 1rem;
    }

    .esh-catalog-item {
        margin-bottom: 1.5rem;
        text-align: center;
        width: 33%;
        display: inline-block;
        float: none !important;
    }

    @media screen and (max-width:1024px) {
        .esh-catalog-item {
            width: 50%
        }
    }

    @media screen and (max-width:768px) {
        .esh-catalog-item {
            width: 100%
        }
    }

    .esh-catalog-thumbnail {
        max-width: 370px;
        width: 100%
    }

    .esh-catalog-button {
        background-color: #83d01b;
        border: 0;
        color: #fff;
        cursor: pointer;
        font-size: 1rem;
        height: 3rem;
        margin-top: 1rem;
        transition: all .35s;
        width: 80%
    }

        .esh-catalog-button.is-disabled {
            opacity: .5;
            pointer-events: none;
        }

        .esh-catalog-button:hover {
            background-color: #4a760f;
            transition: all .35s;
        }

    .esh-catalog-name {
        font-size: 1rem;
        font-weight: 300;
        margin-top: .5rem;
        text-align: center;
        text-transform: uppercase;
    }

    .esh-catalog-price {
        font-size: 28px;
        font-weight: 900;
        text-align: center;
    }

        .esh-catalog-price::before {
            content: '$'
        }

    .esh-catalog-hero {
        background-image: url("../images/main_banner.png");
        background-size: cover;
        height: 260px;
        width: 100%
    }

    .esh-catalog-title {
        position: relative;
        top: 74.28571px;
    }

    .esh-catalog-filters {
        background-color: #00a69c;
        height: 65px;
    }

    .esh-catalog-filter {
        -webkit-appearance: none;
        background-color: transparent;
        border-color: #00d9cc;
        color: #fff;
        cursor: pointer;
        margin-right: 1rem;
        margin-top: .5rem;
        min-width: 140px;
        outline-color: #83d01b;
        padding-bottom: 0;
        padding-left: .5rem;
        padding-right: .5rem;
        padding-top: 1.5rem;
    }

        .esh-catalog-filter option {
            background-color: #00a69c;
        }

    .esh-catalog-label {
        display: inline-block;
        position: relative;
        z-index: 0;
    }

        .esh-catalog-label::before {
            color: rgba(255, 255, 255, .5);
            content: attr(data-title);
            font-size: .65rem;
            margin-left: .5rem;
            margin-top: .65rem;
            position: absolute;
            text-transform: uppercase;
            z-index: 1;
        }

        .esh-catalog-label::after {
            background-image: url("../images/arrow-down.png");
            content: '';
            height: 7px;
            position: absolute;
            right: 1.5rem;
            top: 2.5rem;
            width: 10px;
            z-index: 1;
        }

    .esh-catalog-send {
        background-color: #83d01b;
        color: #fff;
        cursor: pointer;
        font-size: 1rem;
        margin-top: -1.5rem;
        padding: .5rem;
        transition: all .35s;
        margin-bottom: -6px;
    }

        .esh-catalog-send:hover {
            background-color: #4a760f;
            transition: all .35s;
        }

    .esh-catalog-items {
        margin-top: 1rem;
    }

    .esh-catalog-item {
        margin-bottom: 1.5rem;
        text-align: center;
        width: 33%;
        display: inline-block;
        float: none !important;
    }

    @media screen and (max-width:1024px) {
        .esh-catalog-item {
            width: 50%
        }
    }

    @media screen and (max-width:768px) {
        .esh-catalog-item {
            width: 100%
        }
    }

    .esh-catalog-thumbnail {
        max-width: 370px;
        width: 100%
    }

    .esh-catalog-button {
        background-color: #83d01b;
        border: 0;
        color: #fff;
        cursor: pointer;
        font-size: 1rem;
        height: 3rem;
        margin-top: 1rem;
        transition: all .35s;
        width: 80%
    }

        .esh-catalog-button.is-disabled {
            opacity: .5;
            pointer-events: none;
        }

        .esh-catalog-button:hover {
            background-color: #4a760f;
            transition: all .35s;
        }

    .esh-catalog-name {
        font-size: 1rem;
        font-weight: 300;
        margin-top: .5rem;
        text-align: center;
        text-transform: uppercase;
    }

    .esh-catalog-price {
        font-size: 28px;
        font-weight: 900;
        text-align: center;
    }

        .esh-catalog-price::before {
            content: '$'
        }

    .esh-orders {
        min-height: 80vh;
        overflow-x: hidden;
    }

    .esh-orders-header {
        background-color: #00a69c;
        height: 4rem;
    }

    .esh-orders-back {
        color: rgba(255, 255, 255, .4);
        line-height: 4rem;
        text-decoration: none;
        text-transform: uppercase;
        transition: color .35s;
    }

        .esh-orders-back:hover {
            color: #fff;
            transition: color .35s;
        }

    .esh-orders-titles {
        padding-bottom: 1rem;
        padding-top: 2rem;
    }

    .esh-orders-title {
        text-transform: uppercase;
    }

    .esh-orders-items {
        height: 2rem;
        line-height: 2rem;
        position: relative;
    }

        .esh-orders-items:nth-of-type(2n+1):before {
            background-color: #eef;
            content: '';
            height: 100%;
            left: 0;
            margin-left: -100vw;
            position: absolute;
            top: 0;
            width: 200vw;
            z-index: -1;
        }

    .esh-orders-item {
        font-weight: 300;
    }

    .esh-orders-item--hover {
        opacity: 0;
        pointer-events: none;
    }

    .esh-orders-items:hover .esh-orders-item--hover {
        opacity: 1;
        pointer-events: all;
    }

    .esh-orders-link {
        color: #83d01b;
        text-decoration: none;
        transition: color .35s;
    }

        .esh-orders-link:hover {
            color: #75b918;
            transition: color .35s;
        }

    .esh-orders {
        min-height: 80vh;
        overflow-x: hidden;
    }

    .esh-orders-header {
        background-color: #00a69c;
        height: 4rem;
    }

    .esh-orders-back {
        color: rgba(255, 255, 255, .4);
        line-height: 4rem;
        text-decoration: none;
        text-transform: uppercase;
        transition: color .35s;
    }

        .esh-orders-back:hover {
            color: #fff;
            transition: color .35s;
        }

    .esh-orders-titles {
        padding-bottom: 1rem;
        padding-top: 2rem;
    }

    .esh-orders-title {
        text-transform: uppercase;
    }

    .esh-orders-items {
        height: 2rem;
        line-height: 2rem;
        position: relative;
    }

        .esh-orders-items:nth-of-type(2n+1):before {
            background-color: #eef;
            content: '';
            height: 100%;
            left: 0;
            margin-left: -100vw;
            position: absolute;
            top: 0;
            width: 200vw;
            z-index: -1;
        }

    .esh-orders-item {
        font-weight: 300;
    }

    .esh-orders-item--hover {
        opacity: 0;
        pointer-events: none;
    }

    .esh-orders-items:hover .esh-orders-item--hover {
        opacity: 1;
        pointer-events: all;
    }

    .esh-orders-link {
        color: #83d01b;
        text-decoration: none;
        transition: color .35s;
    }

        .esh-orders-link:hover {
            color: #75b918;
            transition: color .35s;
        }

    .esh-orders_detail {
        min-height: 80vh;
    }

    .esh-orders_detail-section {
        padding: 1rem 0;
    }

    .esh-orders_detail-section--right {
        text-align: right;
    }

    .esh-orders_detail-titles {
        padding-bottom: 1rem;
        padding-top: 2rem;
    }

    .esh-orders_detail-title {
        text-transform: uppercase;
    }

    .esh-orders_detail-items--border {
        border-bottom: 1px solid #eee;
        padding: .5rem 0;
    }

        .esh-orders_detail-items--border:last-of-type {
            border-color: transparent;
        }

    .esh-orders_detail-item {
        font-size: 1rem;
        font-weight: 300;
    }

    .esh-orders_detail-item--middle {
        line-height: 8rem;
    }

    @media screen and (max-width:768px) {
        .esh-orders_detail-item--middle {
            line-height: 1rem;
        }
    }

    .esh-orders_detail-item--mark {
        color: #83d01b;
    }

    .esh-orders_detail-image {
        height: 8rem;
    }

    .esh-orders_detail {
        min-height: 80vh;
    }

    .esh-orders_detail-section {
        padding: 1rem 0;
    }

    .esh-orders_detail-section--right {
        text-align: right;
    }

    .esh-orders_detail-titles {
        padding-bottom: 1rem;
        padding-top: 2rem;
    }

    .esh-orders_detail-title {
        text-transform: uppercase;
    }

    .esh-orders_detail-items--border {
        border-bottom: 1px solid #eee;
        padding: .5rem 0;
    }

        .esh-orders_detail-items--border:last-of-type {
            border-color: transparent;
        }

    .esh-orders_detail-item {
        font-size: 1rem;
        font-weight: 300;
    }

    .esh-orders_detail-item--middle {
        line-height: 8rem;
    }

    @media screen and (max-width:768px) {
        .esh-orders_detail-item--middle {
            line-height: 1rem;
        }
    }

    .esh-orders_detail-item--mark {
        color: #83d01b;
    }

    .esh-orders_detail-image {
        height: 8rem;
    }

    .esh-orders_new {
        min-height: 80vh;
    }

    .esh-orders_new-header {
        background-color: #00a69c;
        height: 4rem;
    }

    .esh-orders_new-back {
        color: rgba(255, 255, 255, .4);
        line-height: 4rem;
        text-decoration: none;
        text-transform: uppercase;
        transition: color .35s;
    }

        .esh-orders_new-back:hover {
            color: #fff;
            transition: color .35s;
        }

    .esh-orders_new-section {
        padding: 1rem 0;
    }

    .esh-orders_new-section--right {
        text-align: right;
    }

    .esh-orders_new-placeOrder {
        background-color: #83d01b;
        border: 0;
        border-radius: 0;
        color: #fff;
        display: inline-block;
        font-size: 1rem;
        font-weight: 400;
        margin-top: 1rem;
        padding: 1rem 1.5rem;
        text-align: center;
        text-transform: uppercase;
        transition: all .35s;
    }

        .esh-orders_new-placeOrder:hover {
            background-color: #4a760f;
            transition: all .35s;
        }

    .esh-orders_new-titles {
        padding-bottom: 1rem;
        padding-top: 2rem;
    }

    .esh-orders_new-title {
        font-size: 1.25rem;
        text-transform: uppercase;
    }

    .esh-orders_new-items--border {
        border-bottom: 1px solid #eee;
        padding: .5rem 0;
    }

        .esh-orders_new-items--border:last-of-type {
            border-color: transparent;
        }

    .esh-orders_new-item {
        font-size: 1rem;
        font-weight: 300;
    }

    .esh-orders_new-item--middle {
        line-height: 8rem;
    }

    @media screen and (max-width:768px) {
        .esh-orders_new-item--middle {
            line-height: 1rem;
        }
    }

    .esh-orders_new-item--mark {
        color: #83d01b;
    }

    .esh-orders_new-image {
        height: 8rem;
    }

    .esh-orders_new-alert {
        margin-top: 10px;
    }

    .esh-orders_new {
        min-height: 80vh;
    }

    .esh-orders_new-header {
        background-color: #00a69c;
        height: 4rem;
    }

    .esh-orders_new-back {
        color: rgba(255, 255, 255, .4);
        line-height: 4rem;
        text-decoration: none;
        text-transform: uppercase;
        transition: color .35s;
    }

        .esh-orders_new-back:hover {
            color: #fff;
            transition: color .35s;
        }

    .esh-orders_new-section {
        padding: 1rem 0;
    }

    .esh-orders_new-section--right {
        text-align: right;
    }

    .esh-orders_new-placeOrder {
        background-color: #83d01b;
        border: 0;
        border-radius: 0;
        color: #fff;
        display: inline-block;
        font-size: 1rem;
        font-weight: 400;
        margin-top: 1rem;
        padding: 1rem 1.5rem;
        text-align: center;
        text-transform: uppercase;
        transition: all .35s;
    }

        .esh-orders_new-placeOrder:hover {
            background-color: #4a760f;
            transition: all .35s;
        }

    .esh-orders_new-titles {
        padding-bottom: 1rem;
        padding-top: 2rem;
    }

    .esh-orders_new-title {
        font-size: 1.25rem;
        text-transform: uppercase;
    }

    .esh-orders_new-items--border {
        border-bottom: 1px solid #eee;
        padding: .5rem 0;
    }

        .esh-orders_new-items--border:last-of-type {
            border-color: transparent;
        }

    .esh-orders_new-item {
        font-size: 1rem;
        font-weight: 300;
    }

    .esh-orders_new-item--middle {
        line-height: 8rem;
    }

    @media screen and (max-width:768px) {
        .esh-orders_new-item--middle {
            line-height: 1rem;
        }
    }

    .esh-orders_new-item--mark {
        color: #83d01b;
    }

    .esh-orders_new-image {
        height: 8rem;
    }

    .esh-orders_new-alert {
        margin-top: 10px;
    }

    .esh-catalog-button {
        background-color: #83d01b;
    }

    .esh-header {
        background-color: #00a69c;
        height: 4rem;
    }

    .esh-header-back {
        color: rgba(255, 255, 255, .5);
        line-height: 4rem;
        text-decoration: none;
        text-transform: uppercase;
        transition: color .35s;
    }

        .esh-header-back:hover {
            color: #fff;
            transition: color .35s;
        }

    .esh-header {
        background-color: #00a69c;
        height: 4rem;
    }

    .esh-header-back {
        color: rgba(255, 255, 255, .5);
        line-height: 4rem;
        text-decoration: none;
        text-transform: uppercase;
        transition: color .35s;
    }

        .esh-header-back:hover {
            color: #fff;
            transition: color .35s;
        }

    .esh-identity {
        line-height: 3rem;
        position: relative;
        text-align: right;
    }

    .esh-identity-section {
        display: inline-block;
        width: 100%
    }

    .esh-identity-name {
        display: inline-block;
    }

    .esh-identity-name--upper {
        text-transform: uppercase;
    }

    @media screen and (max-width:768px) {
        .esh-identity-name {
            font-size: .85rem;
        }
    }

    .esh-identity-image {
        display: inline-block;
    }

    .esh-identity-drop {
        background: #fff;
        height: 10px;
        width: 10rem;
        overflow: hidden;
        padding: .5rem;
        position: absolute;
        right: 0;
        top: 2.5rem;
        transition: height .35s;
        z-index: 1;
    }

    .esh-identity:hover .esh-identity-drop {
        border: 1px solid #eee;
        height: 10rem;
        transition: height .35s;
    }

    .esh-identity-item {
        cursor: pointer;
        transition: color .35s;
    }

        .esh-identity-item:hover {
            color: #75b918;
            transition: color .35s;
        }

    .esh-identity {
        line-height: 3rem;
        position: relative;
        text-align: right;
    }

    .esh-identity-section {
        display: inline-block;
        width: 100%
    }

    .esh-identity-name {
        display: inline-block;
    }

    .esh-identity-name--upper {
        text-transform: uppercase;
    }

    @media screen and (max-width:768px) {
        .esh-identity-name {
            font-size: .85rem;
        }
    }

    .esh-identity-image {
        display: inline-block;
    }

    .esh-identity-drop {
        background: #fff;
        height: 10px;
        width: 10rem;
        overflow: hidden;
        padding: .5rem;
        position: absolute;
        right: 0;
        top: 2.5rem;
        transition: height .35s;
    }

    .esh-identity:hover .esh-identity-drop {
        border: 1px solid #eee;
        height: 10rem;
        transition: height .35s;
    }

    .esh-identity-item {
        cursor: pointer;
        transition: color .35s;
    }

        .esh-identity-item:hover {
            color: #75b918;
            transition: color .35s;
        }

    .esh-pager-wrapper {
        padding-top: 1rem;
        text-align: center;
    }

    .esh-pager-item {
        margin: 0 5vw;
    }

        .esh-pager-item.is-disabled {
            opacity: 0;
            pointer-events: none;
        }

    .esh-pager-item--navigable {
        cursor: pointer;
        display: inline-block;
    }

        .esh-pager-item--navigable:hover {
            color: #83d01b;
        }

    @media screen and (max-width:1280px) {
        .esh-pager-item {
            font-size: .85rem;
        }
    }

    @media screen and (max-width:1024px) {
        .esh-pager-item {
            margin: 0 2.5vw;
        }
    }

    .esh-pager-wrapper {
        padding-top: 1rem;
        text-align: center;
    }

    .esh-pager-item {
        margin: 0 5vw;
    }

        .esh-pager-item.is-disabled {
            opacity: 0;
            pointer-events: none;
        }

    .esh-pager-item--navigable {
        cursor: pointer;
        display: inline-block;
    }

        .esh-pager-item--navigable:hover {
            color: #83d01b;
        }

    @media screen and (max-width:1280px) {
        .esh-pager-item {
            font-size: .85rem;
        }
    }

    @media screen and (max-width:1024px) {
        .esh-pager-item {
            margin: 0 2.5vw;
        }
    }

    .toast-title {
        font-weight: bold;
    }

    .toast-message {
        -ms-word-wrap: break-word;
        word-wrap: break-word;
    }

        .toast-message a, .toast-message label {
            color: #fff;
        }

            .toast-message a:hover {
                color: #ccc;
                text-decoration: none;
            }

    .toast-close-button {
        position: relative;
        right: -.3em;
        top: -.3em;
        float: right;
        font-size: 20px;
        font-weight: bold;
        color: #fff;
        -webkit-text-shadow: 0 1px 0 #fff;
        text-shadow: 0 1px 0 #fff;
        opacity: .8;
        -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
        filter: alpha(opacity=80);
        line-height: 1;
    }

        .toast-close-button:hover, .toast-close-button:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
            opacity: .4;
            -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
            filter: alpha(opacity=40);
        }

    .rtl .toast-close-button {
        left: -.3em;
        float: left;
        right: .3em;
    }

    button.toast-close-button {
        padding: 0;
        cursor: pointer;
        background: transparent;
        border: 0;
        -webkit-appearance: none;
    }

    .toast-top-center {
        top: 0;
        right: 0;
        width: 100%
    }

    .toast-bottom-center {
        bottom: 0;
        right: 0;
        width: 100%
    }

    .toast-top-full-width {
        top: 0;
        right: 0;
        width: 100%
    }

    .toast-bottom-full-width {
        bottom: 0;
        right: 0;
        width: 100%
    }

    .toast-top-left {
        top: 12px;
        left: 12px;
    }

    .toast-top-right {
        top: 12px;
        right: 12px;
    }

    .toast-bottom-right {
        right: 12px;
        bottom: 12px;
    }

    .toast-bottom-left {
        bottom: 12px;
        left: 12px;
    }

    #toast-container {
        position: fixed;
        z-index: 999999;
        pointer-events: none;
    }

        #toast-container * {
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        #toast-container > div {
            position: relative;
            pointer-events: auto;
            overflow: hidden;
            margin: 0 0 6px;
            padding: 15px 15px 15px 50px;
            width: 300px;
            -moz-border-radius: 3px 3px 3px 3px;
            -webkit-border-radius: 3px 3px 3px 3px;
            border-radius: 3px 3px 3px 3px;
            background-position: 15px center;
            background-repeat: no-repeat;
            -moz-box-shadow: 0 0 12px #999;
            -webkit-box-shadow: 0 0 12px #999;
            box-shadow: 0 0 12px #999;
            color: #fff;
            opacity: .8;
            -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
            filter: alpha(opacity=80);
        }

            #toast-container > div.rtl {
                direction: rtl;
                padding: 15px 50px 15px 15px;
                background-position: right 15px center;
            }

            #toast-container > div:hover {
                -moz-box-shadow: 0 0 12px #000;
                -webkit-box-shadow: 0 0 12px #000;
                box-shadow: 0 0 12px #000;
                opacity: 1;
                -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
                filter: alpha(opacity=100);
                cursor: pointer;
            }

        #toast-container > .toast-info {
            background-image: url("data:image/png; base64, iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=") !important;
        }

        #toast-container > .toast-error {
            background-image: url("data:image/png; base64, iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=") !important;
        }

        #toast-container > .toast-success {
            background-image: url("data:image/png; base64, iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==") !important;
        }

        #toast-container > .toast-warning {
            background-image: url("data:image/png; base64, iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=") !important;
        }

        #toast-container.toast-top-center > div, #toast-container.toast-bottom-center > div {
            width: 300px;
            margin-left: auto;
            margin-right: auto;
        }

        #toast-container.toast-top-full-width > div, #toast-container.toast-bottom-full-width > div {
            width: 96%;
            margin-left: auto;
            margin-right: auto;
        }

    .toast {
        background-color: #030303;
    }

    .toast-success {
        background-color: #51a351;
    }

    .toast-error {
        background-color: #bd362f;
    }

    .toast-info {
        background-color: #2f96b4;
    }

    .toast-warning {
        background-color: #f89406;
    }

    .toast-progress {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 4px;
        background-color: #000;
        opacity: .4;
        -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
        filter: alpha(opacity=40);
    }

    @media all and (max-width:240px) {
        #toast-container > div {
            padding: 8px 8px 8px 50px;
            width: 11em;
        }

            #toast-container > div.rtl {
                padding: 8px 50px 8px 8px;
            }

        #toast-container .toast-close-button {
            right: -.2em;
            top: -.2em;
        }

        #toast-container .rtl .toast-close-button {
            left: -.2em;
            right: .2em;
        }
    }

    @media all and (min-width:241px) and (max-width:480px) {
        #toast-container > div {
            padding: 8px 8px 8px 50px;
            width: 18em;
        }

            #toast-container > div.rtl {
                padding: 8px 50px 8px 8px;
            }

        #toast-container .toast-close-button {
            right: -.2em;
            top: -.2em;
        }

        #toast-container .rtl .toast-close-button {
            left: -.2em;
            right: .2em;
        }
    }

    @media all and (min-width:481px) and (max-width:768px) {
        #toast-container > div {
            padding: 15px 15px 15px 50px;
            width: 25em;
        }

            #toast-container > div.rtl {
                padding: 15px 50px 15px 15px;
            }
    }
    /*Stores Page CSS*/
    .store {
        background: #ececec;
        width: 100%;
        position: sticky;
        /* Under the desktop slim header — see _CompactHeader.cshtml. */
        top: var(--d2s-compact-h, 0px);
        z-index: 2; /* Adjust the z-index value as needed */
        /* padding: 1rem;*/
    }

    .storedetail h1 {
        font-size: 20px;
        font-weight: 600;
    }

    .storedetail h4 {
        font-size: 12px;
        opacity: 10;
    }

    .detail h1 {
        font-size: 28px;
        font-weight: 600;
    }

    .detail h4 {
        font-size: 16px;
        opacity: 0.6;
    }

    @media (max-width: 991px) {
        .closed-overlay {
            position: absolute;
            top: -4px;
            background-color: rgba(255, 0, 0, 0.8);
            color: white;
            padding: 0px 5px;
            font-weight: bold;
            border-radius: 4px;
            z-index: 10;
        }
    }

    @media (min-width: 768px) {
        .closed-overlay {
            position: absolute;
            top: -4px;
            background-color: rgba(255, 0, 0, 0.8);
            color: white;
            padding: 0px 5px;
            font-weight: bold;
            border-radius: 4px;
            z-index: 10;
            font-size: 13px;
        }
    }

    @media (max-width: 480px) {
        .closed-overlay {
            position: absolute;
            top: -4px;
            background-color: rgba(255, 0, 0, 0.8);
            color: white;
            padding: 0px 5px;
            font-weight: bold;
            border-radius: 4px;
            z-index: 10;
            font-size: 12px;
        }
    }

    @media (min-width: 768px) {
        .allstores-card:hover {
            box-shadow: 1px 1px 10px 1px lightgray;
            border-radius: 20px;
        }
    }
    /* Mobile and Tablet screens */
    @media (max-width: 991px) {
        .stores-image {
            width: 85px;
            height: 85px;
            border-radius: 4px;
        }

        .stores-name {
            font-size: 16px;
            color: black;
        }

        .stores-address {
            font-size: 14px;
            opacity: 0.6;
            color: black;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
    }

    .product-card {
        border-radius: 15px;
    }
    /* Desktop screens */
    @media (min-width: 992px) {
        .stores-image {
            width: 100px;
            height: 100px;
            border-radius: 16px;
        }

        .stores-name {
            font-size: 18px;
            color: black;
        }

        .stores-address {
            font-size: 14px;
            opacity: 0.6;
            color: black;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
        }

        .categoryimage {
            height: 64px;
            width: 64px;
        }
    }

    @media (max-width: 767px) {
        .homecategoryimages {
            height: 150px;
        }

        .detail h7 {
            opacity: 0.7;
            font-size: 14px;
        }

        .productImgCarousel img {
            height: 100px;
        }
    }

    /* Adjust button size on smaller screens */
    @media (max-width: 576px) {
        .custom-btn {
            padding: 3px 4px;
            font-size: 12px;
        }
    }

    /* Adjust button size on medium screens */
    @media (min-width: 576px) and (max-width: 992px) {
        .custom-btn {
            padding: 10px 20px;
            font-size: 16px;
        }
    }

    /* Adjust button size on large screens */
    @media (min-width: 992px) {
        .custom-btn {
            padding: 12px 24px;
            font-size: 20px;
        }
    }

    @media (max-width: 575px) {
        .ordDetlMobScrn {
            text-align: left !important; /*Reset to left alignment */
        }
    }

    .schedule-option.active {
        background-color: #007aff;
        color: #fff;
    }

    .confirm-btn {
        background-color: #007aff;
        color: #fff;
        padding: 10px 15px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 16px;
        transition: background-color 0.3s ease;
    }

        .confirm-btn:hover {
            background-color: #005bb5;
        }

    .date-selection {
        display: flex;
        justify-content: space-between;
        overflow-x: auto;
        padding-bottom: 10px;
    }

        .date-selection .btn {
            flex: 1;
            min-width: 60px;
            margin-right: 5px;
            text-align: center;
            font-size: 12px;
            padding: 10px 5px;
            border: none !important;
        }

            .date-selection .btn:hover {
                background-color: transparent !important;
            }

    .time-selection {
        max-height: 250px; /* Set the fixed height you prefer */
        overflow-y: auto; /* Add vertical scrolling if needed */
    }

        .time-selection label {
            display: block;
            cursor: pointer;
            font-size: 16px;
        }

        .time-selection input {
            margin-right: 10px;
        }

    .date-selection-wrapper {
        overflow-x: auto; /* Allows horizontal scrolling */
        padding: 10px 0;
    }

    .date-selection {
        white-space: nowrap; /* Prevents wrapping of buttons */
    }

        .date-selection .btn {
            min-width: 80px; /* Increase the width of each date box */
            min-height: 60px; /* Increase the height of each date box */
            font-size: 16px; /* Adjust the font size if needed */
            margin-right: 10px; /* Add some spacing between boxes */
            display: inline-block;
            text-align: center;
        }

            .date-selection .btn.active {
                background-color: #ec7400 !important;
                color: #fff !important;
            }

    .custom-modal-header {
        border-bottom: none;
        text-align: center;
        display: block;
    }

    .custom-modal-title {
        font-weight: bold;
        margin: 0;
    }

    .custom-modal-footer {
        display: flex;
        justify-content: space-between;
        padding: 15px;
        border-top: none;
    }
    /*New css*/
    footer {
        background-color: #404042 !important;
    }
    /*header*/

    .header-cart {
        color: #ec7400;
        font-size: 20px;
        margin-left: 40px;
        margin-top: 18px;
    }

    .conttext {
        align-items: baseline;
    }

    .address {
        width: 250px;
    }

    .about-footer {
        margin-top: 0px !important;
    }

    .nabul {
        display: flex;
        grid-area: 10px;
        align-items: center;
    }

    .paddinginherit {
        padding: inherit;
    }

    .address {
        width: 250px;
    }

    @media screen and (max-width: 992px) {
        .nabul {
            display: flex;
            gap: 10px;
        }

        .form-control-custom {
            border-radius: 4px !important;
        }

        .loaction {
            border-radius: 4px !important;
        }

        .togg {
            border: 1px solid white;
            padding: 10px !important;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
    }

    @media screen and (max-width: 992px) {
        .nabul {
            align-items: baseline !important;
        }

        .nav12 {
            align-items: baseline !important;
            margin: 10px;
        }

            .nav12 i {
                margin: 0;
                margin-top: 10px;
            }

        .pas {
            left: 34px !important;
            bottom: 64px !important;
            position: absolute;
            font-size: 10px;
            background: #ec7400;
            color: #fff;
            width: auto;
            height: 12px;
            max-width: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            padding: 4px;
        }
    }

    .loaction:hover {
        background-color: black !important;
    }

    .btn-outline-light {
        color: #ffffff !important;
        background-color: #ec7400 !important;
        border-radius: 0 8px 8px 0 !important;
    }

    @media screen and (min-width: 992px) {
        .loaction {
            padding: 0.375rem 0.375rem;
        }
    }

    /* Search-bar */
    .input-box {
        position: relative;
        width: 100%;
        max-width: 60px;
        height: 38px;
        background-color: #fff;
        border-radius: 6px;
        transition: all 0.5s ease-in-out;
    }

        .input-box input[type="text"]::placeholder {
            color: black;
            opacity: 1;
        }

        .input-box input {
            position: relative;
            width: 100%;
            height: 100%;
            font-size: 16px;
            font-weight: 400;
            color: #495057;
            padding: 0 15px;
            border: none;
            border-radius: 6px;
            outline: none;
            transition: all 0.5s ease-in-out;
            background-color: #fff;
            box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
        }

        .input-box.open input {
            padding: 0 15px 0 54px;
        }

        .input-box .search {
            position: absolute;
            top: 0;
            left: 0;
            width: 45px;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #ec7400;
            border-radius: 6px;
            cursor: pointer;
        }

        .input-box.open .search {
            border-radius: 6px 0 0 6px;
        }

    .search .search-icon {
        font-size: 20px;
        color: #ffffff;
    }

    .input-box .close-icon {
        position: absolute;
        right: 3px;
        top: 3px;
        font-size: 26px;
        background: #ffffff;
        color: #ec7400;
        display: inline-block;
        padding: 3px 4px 7px 9px;
        width: 32px;
        height: 32px;
        border-radius: 4px;
    }


    .input-box input[type="text"]::placeholder {
        color: #ffffff;
    }

    .header-cart {
        color: #ec7400;
        font-size: 20px;
        margin-left: 40px;
    }

    @media screen and (min-width: 992px) {
        .pas {
            position: absolute;
            font-size: 10px;
            top: 22px;
            right: 122px;
            background: #ec7400;
            color: #fff;
            width: auto;
            height: 12px;
            max-width: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            padding: 4px;
        }
    }

    @media screen and (max-width: 992px) {
        .nabul {
            align-items: baseline !important;
        }

        .nav12 {
            align-items: baseline !important;
            margin: 10px;
        }

            .nav12 i {
                margin: 0;
                margin-top: 10px;
            }

        .pas {
            left: 34px !important;
            bottom: 64px !important;
            position: absolute;
            font-size: 10px;
            background: #ec7400;
            color: #fff;
            width: auto;
            height: 12px;
            max-width: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            padding: 4px;
        }
    }

    .nav12 {
        display: flex;
        align-items: center;
    }
    /*  
Grocery
*/
    .grocery-card {
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
        border-radius: 10px !important;
        overflow: hidden !important;
        position: relative !important;
        transition: all .5s ease-in;
    }

    .grocery-overlay {
        position: absolute;
        bottom: -100%;
        left: 0;
        width: 100%;
        height: 100%;
        background: #00000075;
        color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: bottom 0.3s;
    }

    .grocery-card:hover .grocery-overlay {
        bottom: 0 !important;
    }

    .grocery-overlay h5 {
        border: 1px solid white;
        padding: 10px 12px;
    }

    .grocery-product-carousel {
        position: relative;
        display: flex !important;
        align-items: center;
    }

        .grocery-product-carousel .owl-nav {
            position: absolute;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }

        .grocery-product-carousel .owl-prev,
        .grocery-product-carousel .owl-next {
            background-color: #ed7b0f !important;
            height: 30px;
            color: #fff !important;
            width: 30px;
            border-radius: 50% !important;
        }

        .grocery-product-carousel img {
            height: 150px;
        }

    /* Slider-css */

    .slide-bg-image {
        position: relative;
    }

        .slide-bg-image::before {
            position: absolute;
            width: 100%;
            height: 100%;
            background: #00000075;
            content: "";
        }

    .hero-slider {
        width: calc(100% - 62px);
        margin: auto;
        height: 360px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        position: relative;
        z-index: 0;
    }

    @media (max-width: 992px) {
        .hero-slider {
            width: calc(100% - 32px);
        }
    }



    .hero-slider .swiper-slide {
        overflow: hidden;
        color: #fff;
    }

    .hero-slider .swiper-container {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }

    .hero-slider .slide-inner {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
        background-size: cover;
        background-position: center;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: left;
    }

    .hero-slider .swiper-button-prev,
    .hero-slider .swiper-button-next {
        background: transparent;
        width: 55px;
        height: 55px;
        line-height: 53px;
        margin-top: -30px;
        text-align: center;
        border: 2px solid #d4d3d3;
        border-radius: 55px;
        opacity: 0;
        visibility: hidden;
        transition: all .3s ease;
    }

    .hero-slider:hover .swiper-button-prev,
    .hero-slider:hover .swiper-button-next {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
    }

    @media (max-width: 767px) {
        .hero-slider .swiper-button-prev,
        .hero-slider .swiper-button-next {
            display: none;
        }
    }

    .hero-slider .swiper-button-prev {
        left: 25px;
        transform: translateX(50px);
    }

        .hero-slider .swiper-button-prev:before {
            font-family: "Font Awesome 5 Free";
            content: "\f060";
            font-size: 15px;
            color: #d4d3d3;
            font-style: normal;
            display: inline-block;
            vertical-align: middle;
            font-weight: 900;
        }

    .hero-slider .swiper-button-next {
        right: 25px;
        transform: translateX(-50px);
    }

        .hero-slider .swiper-button-next:before {
            font-family: "Font Awesome 5 Free";
            content: "\f061";
            font-size: 15px;
            color: #d4d3d3;
            font-style: normal;
            display: inline-block;
            vertical-align: middle;
            font-weight: 900;
        }

    .hero-slider .swiper-pagination-bullet {
        width: 12px;
        height: 12px;
        text-align: left;
        line-height: 12px;
        font-size: 12px;
        color: #000;
        opacity: 0.3;
        background: #fff;
        transition: all .2s ease;
    }

    .hero-slider .swiper-pagination-bullet-active {
        opacity: 1;
    }

    .hero-slider .swiper-container-horizontal > .swiper-pagination-bullets,
    .hero-slider .swiper-pagination-custom,
    .hero-slider .swiper-pagination-fraction {
        bottom: 30px;
    }

    @media screen and (min-width: 992px) {
        .swiper-pagination {
            text-align: left;
        }

        .hero-slider .swiper-container-horizontal > .swiper-pagination-bullets {
            bottom: 50px;
            max-width: 1200px;
            padding: 0 15px;
            margin: 0 auto;
            left: 50%;
            transform: translateX(-50%);
        }
    }

    @media (min-width: 767px) {
        .hero-slider .swiper-container-horizontal > .swiper-pagination-bullets {
            bottom: 30px;
        }
    }
    /*--------------------------------------------------------------
	#hero-style
--------------------------------------------------------------*/
    .hero-style .container
    .hero-style {
        height: 360px;
        transition: all .4s ease;
    }



    .hero-style .slide-title,
    .hero-style .slide-text,
    .hero-style .slide-btns {
        /* max-width: 690px;*/
        text-align: center !important;
    }

        .hero-style .slide-title h2 {
            font-size: 80px;
            font-weight: 600;
            line-height: 1;
            color: #ffffff;
            margin: 0 0 40px;
            text-transform: capitalize;
            transition: all .4s ease;
        }

    @media (max-width: 991px) {
        .hero-style .slide-title h2 {
            font-size: 50px;
            margin: 0 0 35px;
        }
    }

    @media (max-width: 767px) {
        .hero-style .slide-title h2 {
            font-size: 35px;
            margin: 0 0 30px;
        }
    }

    .hero-style .slide-text p {
        opacity: 0.8;
        font-family: Rajdhani;
        font-size: 32px;
        font-weight: 500;
        line-height: 1.25;
        letter-spacing: normal;
        color: #ffffff;
        margin: 0 0 40px;
        transition: all .4s ease;
    }

    @media (max-width: 767px) {
        .hero-style .slide-text p {
            font-size: 16px;
            font-size: 1rem;
            font-weight: normal;
            margin: 0 0 30px;
        }
    }

    .hero-style .slide-btns > a:first-child {
        margin-right: 10px;
    }
    /*--------------------------------------------------------------
	#button-style
--------------------------------------------------------------*/

    .theme-btn,
    .theme-btn-s2 {
        background-color: #ec7400;
        font-size: 20px;
        font-weight: 500;
        line-height: 1.4;
        text-align: center;
        color: #ffffff;
        padding: 9px 32px;
        border: 0;
        border-radius: 3px;
        text-transform: uppercase;
        display: inline-block;
        line-height: initial;
        transition: all .4s ease;
    }

    a {
        text-decoration: none;
        transition: all 0.2s ease;
    }

    .theme-btn:hover,
    .theme-btn-s2:hover,
    .theme-btn:focus,
    .theme-btn-s2:focus,
    .theme-btn:active,
    .theme-btn-s2:active {
        background-color: #f3f3f3;
        color: #ec7400;
    }

    .theme-btn-s3 {
        font-size: 16px;
        font-weight: 500;
        line-height: 1.5;
        color: #ffffff;
        text-transform: uppercase;
    }

    i.fa-chevron-circle-right {
        height: 22px;
        width: 22px;
    }

    a:hover {
        text-decoration: none;
    }

    @media (max-width: 991px) {
        .theme-btn,
        .theme-btn-s2,
        .theme-btn-s3 {
            font-size: 13px;
            padding: 15px 25px;
        }
    }


    .header_Menu a {
        padding-top: 0px !important;
    }

    .navbar-toggler i {
        color: #ec7400;
    }

    .btn-signin {
        background-color: #ec7400;
        color: #ffffff;
        border-radius: 6px;
    }

    @media (max-width: 480px) {
        .text-follow {
            font-size: 12px !important;
            display: block !important;
        }
    }

    @media (max-width: 480px) {
        .text-reserved {
            font-size: 12px !important;
            width: 120px !important;
        }
    }

    .address {
        display: flex;
        position: relative;
    }

    .remove {
        position: absolute;
        right: 3px;
        top: 3px;
        display: inline-block;
        width: 32px;
        height: 32px;
        border-radius: 4px;
        background: #ffffff;
        color: #ec7400;
        padding: 3px 4px 7px 9px;
        font-size: 26px;
    }

    @media (max-width: 480px) {
        .list-unstyled {
            margin-top: 3px;
        }
    }





    .nav12 {
        align-items: end;
    }

    .header_Menu a {
        padding-bottom: 0px !important;
    }

    .navbar-collapse {
        margin-top: 6px;
    }

    @media (max-width: 992px) {
        .locate-icon {
            padding-top: 4px !important;
        }
    }


    @media (max-width: 991px) {

        .locate-btn {
            margin-right: 0px;
        }


        .nabul {
            margin-left: 0px !important;
            margin-right: 0px !important;
        }
    }


    .about-footer {
        margin-top: 0px !important;
    }

    /*Storelist*/

    .popular-item-box {
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
        border-radius: 10px;
        overflow: hidden;
    }

    .popular-item-box-img {
        position: relative;
        overflow: hidden;
        height: 100%;
    }

        .popular-item-box-img:after {
            position: absolute;
            content: "";
            top: 0;
            left: -75%;
            z-index: 2;
            display: block;
            width: 50%;
            height: 100%;
            background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
            transform: skewX(-25deg);
        }

        .popular-item-box-img img {
            transition: all 0.3s ease-out 0s;
        }

    .popular-item-box img {
        height: 100%;
        width: 100%;
    }

    .popular-item-box-img-overlay {
        width: 100px;
        display: flex;
        align-items: center;
        padding: 4px 6px;
        border-radius: 6px;
        background: rgba(0, 9, 41, 0.8);
        z-index: 11;
        margin-top: 10px;
    }

        .popular-item-box-img-overlay .icon i {
            color: #ffb23e;
        }

    .popular-item-box-img p {
        margin-bottom: 0px;
    }

    .popular-item-box-img-overlay .text {
        color: #fff;
        padding-left: 8px;
    }

    .popular-item-box .col-md-7 {
        padding: 0px;
    }

    .card-body {
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        /* padding: 1.25rem; */
        /* padding-top: 3.25rem; */
        padding-right: 1.25rem;
        /* padding-bottom: 0.75rem !important; */
        padding-left: 1.25rem;
    }

    .popular-inner-box h5 {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .popular-inner-item {
        display: flex;
        align-items: center;
        gap: 8px;
        /*        margin-bottom: 12px;*/
        margin-top: 10px;
    }

        .popular-inner-item i {
            color: #ec7400;
        }

        .popular-inner-item p {
            margin-bottom: 0px;
            font-size: 16px;
        }

    .store-inner-item {
        margin-bottom: 6px !important;
        margin-top: 6px !important;
    }

    .main-inner-item i {
        color: #ec7400;
    }

    .main-inner-item p {
        margin-bottom: 0px;
        font-size: 16px;
    }


    @media screen and (max-width: 767px) {
        .main-inner-item p {
            font-size: 12px;
        }
    }

    @media screen and (max-width: 480px) {
        .popular-inner-box .main-inner-item {
            margin-bottom: 0px !important;
        }

        .card-title {
            font-size: 20px;
        }
    }




    .popular-inner-box .main-inner-item {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 5px;
    }

    /*marchentlanding*/
    .background-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        background: url("../images/SkyTower.jpg") no-repeat center center fixed;
        background-size: cover;
        opacity: 0.7;
    }

    .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
    }

    .container-fluid {
        height: 100%;
        font-family: Arial, sans-serif;
    }

    .logo img {
        height: 50px !important;
        margin-right: 10px;
    }

    .features {
        color: white;
    }

        .features h1 {
            color: #ec7400;
            font-weight: bold;
            margin-bottom: 3rem;
        }

        .features ul li {
            font-size: 1.4em;
            font-weight: bold;
            margin-bottom: 10px;
        }

    @media (min-width: 767px) {

        .contact {
            padding-left: 100px;
            padding-top: 0px !important;
        }
    }

    .contact .button {
        background-color: rgba(255, 255, 255, 0.9);
        padding: 10px;
        border-radius: 10px;
    }

        .contact .button h2 {
            color: #ec7400;
            font-size: 1.8em;
            font-weight: bold;
        }


    .contact .btn-submit {
        background-color: #ec7400;
        color: black;
        font-weight: 400;
        border: none;
        border-radius: 10px;
        padding: 10px;
        font-size: 1.4em;
    }

        .contact .btn-submit:hover {
            background-color: #D15A1F;
        }

    .contact-icons {
        margin-top: 20px;
    }

        .contact-icons a {
            color: #ec7400;
            text-decoration: none;
            display: flex;
            font-size: 1.4em;
            font-weight: bold;
        }

    /* Loading Animation */
    .spinner {
        width: 50px;
        height: 50px;
        border: 4px solid rgba(255, 255, 255, 0.3);
        border-top: 4px solid #ffffff;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }
    /* Loading Spinner */
    .loading-spinner {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        z-index: 9999;
        background: rgba(255, 255, 255, 0.2);
        padding: 30px;
        border-radius: 15px;
        backdrop-filter: blur(10px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
    /* Redirect Message */
    .redirect-text {
        color: white;
        font-size: 18px;
        font-weight: 300;
        margin-top: 15px;
    }
    /* Fallback Link */
    #fallback-link {
        color: #FFD700;
        font-weight: 500;
        text-decoration: none;
        cursor: pointer;
        transition: color 0.3s ease-in-out;
    }

        #fallback-link:hover {
            color: #ffffff;
        }
    /* Mobile-Friendly Adjustments */
    @media (max-width: 768px) {
        .loading-spinner {
            width: 80%;
            padding: 20px;
        }

        .redirect-text {
            font-size: 16px;
        }
    }

    .contact-icons a i {
        margin-right: 10px;
        background: white;
        padding: 10px;
        border-radius: 50%;
        font-size: 1.0em;
    }

    .form-label {
        font-size: 1.4em;
        font-weight: 400;
    }

    .phone, .email {
        padding: 10px;
        border-radius: 5px;
        color: white;
    }

    .form-control-merchantlanding {
        height: 50px !important;
        border-radius: 10px;
        font-size: 1.4em;
    }

    .form-control-textarea-merchantlanding {
        border-radius: 10px;
        font-size: 1.4em;
    }



    .modal-header {
        border-bottom: none !important;
    }



    /*Cart Page*/

    .table-title {
        align-items: center;
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
        margin-bottom: 20px;
    }

        .table-title h5 span {
            color: #222;
            font-size: 18px;
            font-weight: 600;
        }

        .table-title button {
            background-color: transparent;
            border: unset;
            color: #ff4f4f;
            font-size: 18px;
            font-weight: 500;
            text-decoration: underline;
        }

    .table thead tr th:first-child {
        border-radius: 6px 0 0 0;
        /* text-align: left;*/
    }

    .table thead tr th {
        background-color: #f8f8f8;
        border-bottom: none;
        color: #767676;
        font-weight: 500;
        padding: 14px;
        white-space: nowrap;
    }

    .table thead tr th {
        font-size: calc(12.8px + .375vw);
    }

    .table tbody tr {
        border-bottom: 1px solid #e9e9e9;
    }

    .cart-table .table tbody tr td:first-child {
        max-width: 330px !important;
    }

    .cart-table .table tbody tr td:first-child {
        text-align: left;
    }

    .cart-table table tbody tr td {
        font-weight: 500;
        text-align: center;
        background-color: #fff;
        border-bottom: none;
        color: #222;
        padding: 10px;
        vertical-align: middle;
        white-space: nowrap;
    }

    .cart-box {
        align-items: center;
        display: flex;
        gap: 10px;
    }

        .cart-box img {
            width: 100px;
        }

        .cart-box a h5 {
            display: -webkit-box !important;
            line-height: 1.2;
            overflow: hidden;
            text-overflow: ellipsis;
            /*  -webkit-line-clamp: 2;*/
            /*   -webkit-box-orient: vertical;*/

            white-space: nowrap;
            color: #000;
            margin-bottom: 10px;
            max-width: 200px;
            height: 100%;
        }

    .cart-table p {
        font-weight: 400;
        margin-bottom: 0;
    }

    .cart-box p, .cart-box span {
        color: #767676;
    }

    .cart-table table tbody tr td .quantity {
        gap: 10px;
        justify-content: center;
        width: auto;
    }

    .quantity, .quantity button {
        align-items: center;
        display: flex;
    }

    .cart-table table tbody tr td .quantity button, .cart-table table tbody tr td .quantity input {
        border-radius: 4px;
    }

    .quantity button {
        background-color: #f8f8f8;
        border: 1px solid #e9e9e9;
        /*border-radius: 50px;*/
        height: 35px;
        justify-content: center;
        width: 35px;
    }

    .quantity input {
        background-color: #f8f8f8 !important;
        border: 1px solid #e9e9e9 !important;
        /* border-radius: 50px;*/
        height: 35px;
        padding: 6px 0;
        text-align: center;
        width: 70px;
    }

    .cart-table .delete-btn {
        border: none;
        background-color: transparent;
    }

    #cart-table h5 {
        white-space: normal;
        word-wrap: break-word;
    }


    /*Summary part*/


    .cart-items .cart-body ul li {
        align-items: center;
        display: flex;
        justify-content: space-between;
        padding: 4px 0;
        width: 100%;
    }

    .cart-items .cart-body ul {
        padding-left: 0px;
    }

    .cart-items {
        background-color: #f8f8f8cc;
        border-radius: 6px;
        padding: 30px 15px;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    }

    .cart-bottom p {
        color: #ff4f4f;
        font-size: 14px;
        font-weight: 500;
        text-align: end;
    }

    .cart-bottom > span {
        display: block;
        width: 100%;
    }

    .cart-bottom h6 span {
        float: right;
        font-size: 16px;
    }

    .cart-bottom > span {
        display: block;
        width: 100%;
        color: #767676;
    }

    .cart-countdown {
        align-items: start;
        background-color: #ec7400;
        border-radius: 4px;
        display: flex;
        gap: 12px;
        justify-content: center;
        padding: 16px;
        color: #ffffff;
    }


    .btn_black {
        align-items: center;
        background-color: #ec7400;
        background-size: 200% auto;
        border-radius: 0;
        color: #fff;
        display: inline-flex;
        font-weight: 500;
        gap: 6px;
        justify-content: center;
        padding: calc(5.6px + .125vw) calc(4.8px + 1vw);
        transition: all .5s ease;
    }

    .schedule-delivery-modal .modal-footer .btn-primary
    .btn_black:hover {
        color: #fff;
    }


    .theme-color {
        color: #ec7400;
    }

    .order-type-section .btn {
        background-color: transparent;
        border-color: #ff8800;
        color: #ff8800;
    }

        .order-type-section .btn:active, .schedule-delivery-modal .modal-footer .btn-primary:active {
            background-color: #ff8800 !important;
            border-color: #ff8800 !important;
            box-shadow: none !important;
        }

        .order-type-section .btn:focus {
            box-shadow: none !important;
        }

    .product-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 200px;
    }

    /*Schedule-Deliveryw
*/
    .schedule-delivery-modal .modal-header {
        background-color: #ec7400;
        color: #ffffff;
    }

    .schedule-delivery-modal .form-check {
        margin-bottom: 10px;
    }


    .schedule-delivery-modal .modal-footer {
        justify-content: center;
    }

    .schedule-delivery-modal .nav-item p {
        margin-bottom: 0px;
    }

    .schedule-delivery-modal .nav-pills {
        justify-content: space-between;
    }

    .schedule-delivery-modal .modal-footer .btn-primary {
        background-color: #ec7400;
        border-color: #ec7400;
        /* width: 30% !important;*/
    }

    .schedule-delivery-modal .modal-footer .btn-secondary {
        color: #fff;
        background-color: #6c757d;
        border-color: #6c757d;
        /*  width: 30% !important;*/
    }

    .schedule-delivery-modal .form-check-input {
        position: static;
        margin-left: 0px;
        margin-top: 0px;
    }

    .schedule-delivery-modal .form-check {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 0px;
    }


    /* Hide the default radio button */
    .schedule-delivery-modal input[type="radio"] {
        height: 25px;
        width: 25px;
        opacity: 1;
        cursor: pointer;
        accent-color: chocolate;
    }

    /* Create a custom radio button */
    .schedule-delivery-modal .custom-radio {
        display: inline-block;
        position: relative;
        cursor: pointer;
        font-size: 16px;
        width: 100%;
    }



    /* The radio mark (the outer circle) */
    .schedule-delivery-modal .radio-mark {
        position: absolute;
        top: 0;
        right: 0;
        height: 20px;
        width: 20px;
        background-color: #fff;
        border: 2px solid #ec7400;
        border-radius: 50%;
        transition: background-color 0.2s, border-color 0.2s;
    }

    /* Inner circle when the radio button is checked */
    .schedule-delivery-modal input[type="radio"]:checked + .radio-mark {
        background-color: #ec7400;
        border-color: #ec7400;
    }

        .schedule-delivery-modal input[type="radio"]:checked + .radio-mark::after {
            content: "";
            position: absolute;
            top: 4px;
            left: 4px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: white;
        }

    .schedule-delivery-modal .custom-radio:hover input[type="radio"] + .radio-mark {
        border-color: #ff8800;
    }


    .schedule-delivery-modal .radio-mark {
        height: 30px; /* Increase size */
        width: 30px; /* Increase size */
        border-radius: 50%; /* Ensure it stays circular */
    }

    .schedule-delivery-modal input[type="radio"]:checked + .radio-mark::after {
        top: 6px;
        left: 6px;
        width: 14px;
        height: 14px;
    }



    .schedule-delivery-modal .modal-header .close {
        color: #ffffff;
    }

    .order-type-section {
        margin-top: 10px;
        margin-bottom: 10px;
    }

        .order-type-section p {
            margin-bottom: 0px;
        }



        .order-type-section .btn:active, .schedule-delivery-modal .modal-footer .btn-primary:active {
            background-color: #ff8800 !important;
            border-color: #ff8800 !important;
            box-shadow: none !important;
        }

        .order-type-section .btn:focus {
            box-shadow: none !important;
        }


    .basketcount-text {
        color: black !important;
        font-size: 1.25rem;
        font-weight: 500;
    }

    .custom-card {
        border: 0px !important;
    }

    /*Store-Lise Page*/

    .popular-item-box-img-overlay .text p {
        margin-bottom: 0px;
    }

    .rating-item-box {
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
        border-radius: 10px;
        overflow: hidden;
    }

    .rating-item-box-img img {
        transition: all 0.3s ease-out 0s;
    }

    .product-store-box {
        background-color: #f8f9fa !important;
    }

        .product-store-box .rating-item-box-img img {
            padding: 10px;
        }


    .rating-item-box img {
        height: 154px;
        width: 154px;
    }

    .rating-item-box-img {
        overflow: hidden;
        position: relative;
        overflow: hidden;
        height: 100%;
    }

    .rating-item-box:hover .rating-item-box-img img {
        transform: scale(1.2);
    }

    .rating-item-box-img:after {
        position: absolute;
        content: "";
        top: 0;
        left: -75%;
        z-index: 2;
        display: block;
        width: 50%;
        height: 100%;
        background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
        transform: skewX(-25deg);
    }

    .rating-item-box-img img {
        transition: all 0.3s ease-out 0s;
    }


    .rating-item-box-img-overlay {
        position: absolute;
        top: 3px;
        left: 12px;
        display: flex;
        align-items: center;
        padding: 4px 6px;
        border-radius: 6px;
        background: rgba(0, 9, 41, 0.8);
        z-index: 11;
    }


    .rating-item-box-text {
        padding: 0px 0 12px 0;
    }

    .rating-inner-box .rating-inner-item {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 12px;
    }

    .rating-inner-box .rating-inner-item-btm {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 20px;
        border-top: 1px solid rgba(229, 230, 235, 0.4);
    }

    .rating-item-box-img-overlay .text {
        color: #fff;
        padding-left: 8px;
    }

        .rating-item-box-img-overlay .text p {
            margin-bottom: 0px;
        }

    .rating-item-box-img-overlay .icon i {
        color: #ffb23e;
    }


    .popular-inner-box h6 {
        color: red;
    }

    .our-products .products-lists .navtabs {
        /* display: flex; */
        /* justify-content: space-around; */
        margin-top: 20px;
        background: white;
        box-shadow: 0 2px 4px #ebcdb0;
        border-radius: 8px;
        padding: 10px 0px 20px 0px;
        position: sticky;
        /* Under the desktop slim header — see _CompactHeader.cshtml. */
        top: calc(var(--d2s-compact-h, 0px) + 10px);
        flex-wrap: wrap;
        text-transform: capitalize;
        justify-content: left;
        padding: 15px;
    }

    .our-products .products-lists .navtab.active {
        color: #fff;
        font-weight: 700;
        border-radius: 5px;
        background-color: #ec7400;
        width: 95%;
    }

    .our-products .products-lists .navtab {
        margin: 0 10px;
        padding: 15px 0px;
        cursor: pointer;
        color: #333;
        transition: color 0.3s;
        text-align: start;
    }

    .our-products .navtabs li {
        list-style: none;
    }

    .our-products .products-lists .navtab :hover {
        color: #ec7400;
    }


    .our-products .products-lists .underline {
        position: absolute;
        bottom: 0;
        height: 4px;
        background: #ec7400;
        transition: left 0.3s ease, width 0.3s ease;
    }
    /*Product-image*/

    .product-cards {
        border: 1px solid #f4f5f6;
        border-radius: 10px;
    }

        .product-cards:hover {
            box-shadow: 0 16px 32px 0 rgba(7, 28, 31, 0.1);
        }

        .product-cards img {
            width: 100%;
        }

    .product-card-content {
        padding: 20px 25px;
        border-top: 1px solid #f4f5f6;
    }
        /*.product-card-content-price {
    padding: 20px 25px;
   
}*/
        .product-card-content p {
            font-size: 18px;
            /* font-weight: 600;*/
            color: #1b1c1d;
            margin: 10px 0;
            text-align: center;
        }

    @media screen and (max-width: 1024px) {

        .product-card-content p {
            font-size: 16px;
        }
    }

    .product-card-content-price .product-price {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .product-price span {
        display: block;
        font-size: 18px;
        letter-spacing: 1px;
        font-weight: 500;
        color: #ec7400;
    }

    .product-card-content-price .product-price .cart-button {
        color: #ec7400;
        border: 1px solid;
        padding: 5px 20px;
        border-radius: 5px;
        text-decoration: none;
        cursor: pointer;
        font-size:12px;
    }

        .product-card-content-price .product-price .cart-button:hover {
            color: #ec7400;
            border: 1px solid;
            padding: 5px 20px;
            border-radius: 5px;
            text-decoration: none;
            cursor: pointer;
            font-size: 13px;
        }

    .cart-close-button {
        color: #ec7400 !important;
        opacity: 0.5;
        border: 1px solid;
        padding: 5px 20px;
        border-radius: 5px;
        text-decoration: none;
        font-size: 12px;
    }

    .product-card-content-price .product-price .cart-close-button:hover {
        color: #ec7400 !important;
        opacity: 0.5;
        border: 1px solid;
        padding: 5px 20px;
        border-radius: 5px;
        text-decoration: none;
    }

    .our-products .products-lists .navtab a {
        margin: 0 10px;
        /* padding: 15px 0px;*/
        cursor: pointer;
        color: #333;
        transition: color 0.3s;
        text-align: start;
        text-transform: uppercase;
    }

    .our-products .products-lists .navtab.active a {
        color: #fff;
        font-weight: 700;
        border-radius: 5px;
        background-color: #ec7400;
        /*  width: 95%;*/
    }

.magnify > .magnify-lens {
    width: 150px;
    height: 150px;
}

    /*for mobile screen*/

    @media (max-width: 769px) {
        .our-products .products-lists .navtabs {
            display: flex;
            padding: 10px 10px;
            text-align: center;
            flex-wrap: nowrap;
            align-items: center;
            overflow-x: scroll;
        }
    }

    @media (max-width: 769px) {
        .our-products .products-lists .navtab {
            padding: 10px 15px;
            margin: 0px;
            font-size: 12px;
            white-space: nowrap;
        }
    }

    @media (max-width: 425px) {
        .product-store-box .rating-item-box-img {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

    @media (max-width: 425px) {
        .product-store-box .rating-item-box-img img {
            height: 150px;
        }
    }
    /*@media (max-width: 425px) {
    .product-store-box .rating-item-box-img-overlay {
        top: 40px;
        left: 10px;
    }
}*/



    @media (max-width: 425px) {
        .product-store-box .popular-inner-box .popular-inner-item {
            margin-bottom: 0px;
        }
    }

    .product-store-box .card-body {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    @media (max-width: 500px) {
        .rating-item-box-img {
        }
    }

    .product-store-box .popular-inner-box, .product-store-box .card-body {
        height: 100%;
    }

    @media (max-width: 425px) {
        .product-store-box .card-body {
            padding: 0px;
        }

        .image-padding {
            padding-right: 0px !important;
        }

        .card-padding {
            padding-left: 0px !important;
        }

        .product-store-box .rating-item-box-img img {
            padding-left: 0px !important;
        }
    }

    .Items h2 {
        font-size: 22px !important;
        margin-left: 20px;
    }



    .alertify .ajs-footer .ajs-buttons .ajs-button.ajs-ok {
        color: lawngreen !important;
    }

    .alertify .ajs-footer .ajs-buttons .ajs-button {
        color: orangered !important;
    }

    .alertify .ajs-body .ajs-content {
        text-align: center !important;
        color: red !important;
        font-size: 24px !important;
    }

    .alertify .ajs-header {
        text-align: center !important;
    }

    /*Product-Detail Page*/


    .modal-header {
        border-bottom: none !important;
    }

    .product-carousel {
        width: 80%;
        margin: 0px auto;
        text-align: center;
    }

    .product-main-carousel .owl-stage {
        display: -webkit-inline-box !important;
    }


    .product-main-carousel .item img {
        display: block;
        width: 100%;
        cursor: pointer;
        background-color: #ebebeb;
    }

    .owl-carousel .owl-stage-outer {
        position: relative;
        overflow: hidden;
        -webkit-transform: translate3d(0,0,0);
    }

    .owl-carousel .owl-dots.disabled, .owl-carousel .owl-nav.disabled {
        display: none;
    }

    .owl-theme .owl-nav {
        margin-top: 10px;
    }

.thumbnail-container {
    display: flex !important;
    justify-content: flex-start; /* Changed to start from left */
    margin-top: 20px;
    gap: 0px;
    overflow-y: hidden; /* Prevent vertical scrolling */
}

        .thumbnail-container img {
            width: 80px;
            cursor: pointer;
            border: 2px solid transparent;
            transition: border 0.8s ease;
            margin: 5px;
        }

    @media screen and (max-width:998px) {
        .thumbnail-container img {
            width: 60px;
        }
    }

/* Hide scrollbar but keep functionality */
.thumbnail-container::-webkit-scrollbar {
    height: 6px;
}

.thumbnail-container::-webkit-scrollbar-thumb {
    background-color: #cccccc;
    border-radius: 3px;
}

.thumbnail-container::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}

    .thumb {
        opacity: 0.5; /* Set lower opacity for inactive thumbnails */
        transition: opacity 0.3s ease; /* Smooth transition effect */
    }

        .thumb.active {
            opacity: 1; /* Full opacity for the active thumbnail */
        }


    /*  Navbar New Work*/


    .input-box.open {
        max-width: 260px;
    }

    .address {
        width: 250px;
    }

    @media (max-width: 480px) {
        .locate-btn {
            margin-right: 0 !important;
        }

        .locationwidth {
            width: 100% !important;
        }

        .address {
            width: 100% !important;
        }

        .searchwidth {
            width: 100%;
        }

        .input-box.open {
            width: 100%;
            max-width: none !important;
        }

        .input-box {
            max-width: none !important;
        }

        .hero-style {
            display: none;
        }
    }

    @media (min-width: 991px) {
        .ftrMrgnBtm {
            margin-bottom: -15px !important;
        }
    }

    @media screen and (min-width: 992px) {
        .loaction {
            padding: 7px 0.375rem !important;
        }
    }

    @media (min-width: 481px) and (max-width: 992px) {
        .input-box.open {
            max-width: none;
            width: 291px;
        }
    }

    .form-control {
        border-radius: 0.25rem 0 0 0.25rem !important;
    }

    .fas-cart {
        color: #ec7400;
    }

    .nav-sign {
        color: white;
    }

    .ft-img {
        width: 100px;
        height: 30px;
        border-radius: 2px;
    }

    .line {
        border: 1px solid white;
    }

    .text-reserved {
        font-size: 15px;
    }

    .text-follow {
        gap: 10px;
        margin-right: 80px;
    }

    .icon-gap {
        gap: 10px;
    }

    .icon-size {
        font-size: 19px;
    }

    .text-follow {
        font-size: 14px;
    }

    .size-download {
        font-size: 15px;
    }

    .srchLocationTxtBox {
        border-width: 1px !important;
    }

    @media (max-width: 480px) {
        .homeabout-section {
            padding: 0 15px !important;
        }

        .homeaboutsection {
            font-size: 13px;
        }

        .size-download {
            font-size: 13px;
        }

        .footerAboutContentFont {
            font-size: 13px;
        }
    }

    @media (max-width: 767px) {

        .icon-size {
            font-size: 18px;
        }
    }
.coupon-box ul li:first-child {
    margin-bottom: 10px;
}

.coupon-box ul li {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    width: 100%;
}

    .coupon-box ul li button {
        background-color: transparent;
        border: 1px solid #ec7400;
        color: #ec7400;
        padding: 8px 20px;
        transition: all .4s ease-in-out;
    }

    .coupon-box ul li span input {
        border: none;
        border-radius: 4px;
        padding: 10px 6px 10px 32px;
        width: 100%;
        background-color: #fff;
    }

.coupon-box ul {
    padding-left: 0px;
}

    .coupon-box ul li span i {
        left: 10px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    .coupon-box ul li span i {
        left: 10px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    .coupon-box ul li span {
        position: relative;
        width: 100%;
    }

.coupon-box h6 {
    border-top: 1px solid #e9e9e9;
    font-weight: 500;
    margin: 12px 0 15px;
    padding-top: 12px;
}

.coupon-applied {
    display: flex;
    align-items: center;
    color: #28a745;
    font-size: 0.9rem;
    width: 100%;
}

    .coupon-applied i {
        margin-right: 8px;
        font-size: 1.1rem;
    }

#couponMessage {
    font-weight: 500;
}

.coupon-box ul li:last-child {
    margin-top: 0.5rem;
    margin-bottom: 0.25rem;
}


/* Filter Styles */
/*.filter-section {
    border-radius: 10px;
    margin-bottom: 20px;
}


    .filter-section .card-header {
        background-color: white;
        padding: 15px;
    }

    .filter-section .btn-link {
        color: #ec7400;
        text-decoration: none;
        width: 100%;
        text-align: left;
        font-weight: 600;
        padding: 0;
    }

    .filter-section .card-body {
        padding: 15px;
    }

.filter-title {
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: #ec7400;
    border-color: #ec7400;
}

#applyFiltersBtn {
    background-color: #ec7400;
    border-color: #ec7400;
}

    #applyFiltersBtn:hover {
        background-color: #d96c00;
        border-color: #d96c00;
    }*/


/* Mobile Responsive Styles */
  /*@media (max-width: 991px) {
     #toggleMobileFilters {
            width: 100%;
            margin-bottom: 15px;
     }
  }*/


/* Modern Filter Styles */
.filter-container {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 8px rgba(0,0,0,0.06);
    padding: 0;
    margin-bottom: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.filter-header {
    background: #f8f9fa;
    padding: 12px 15px;
    border-bottom: 1px solid #eaeaea;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

    .filter-header h3 {
        margin: 0;
        font-size: 0.95rem;
        font-weight: 600;
        color: #333;
        display: flex;
        align-items: center;
    }

        .filter-header h3 i {
            margin-right: 8px;
            color: #ec7400;
        }

    .filter-header .toggle-icon {
        transition: transform 0.3s;
    }

    .filter-header[aria-expanded="true"] .toggle-icon {
        transform: rotate(180deg);
    }

.filter-body {
    padding: 15px;
}

.filter-group {
    margin-bottom: 18px;
}

    .filter-group:last-child {
        margin-bottom: 0;
    }

.filter-group-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #555;
    margin-bottom: 10px;
    border-bottom: 1px solid #f1f1f1;
    padding-bottom: 6px;
}

/* Price Range Slider */
.price-range {
    padding: 0 5px;
}

.price-slider {
    height: 4px;
    position: relative;
    background: #e1e1e1;
    border-radius: 4px;
    margin-bottom: 20px;
}

    .price-slider .ui-slider-range {
        height: 4px;
        background: #ec7400;
        position: absolute;
    }

    .price-slider .ui-slider-handle {
        height: 16px;
        width: 16px;
        background: #fff;
        border: 2px solid #ec7400;
        border-radius: 50%;
        cursor: pointer;
        position: absolute;
        top: -6px;
        margin-left: -8px;
    }

.price-inputs {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.price-input {
    width: 45%;
}

    .price-input input {
        width: 100%;
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 6px 8px;
        font-size: 13px;
    }

.price-separator {
    font-weight: 500;
    color: #888;
    font-size: 13px;
}

/* Custom Checkbox Styles */
.custom-checkbox {
    display: block;
    position: relative;
    padding-left: 26px;
    margin-bottom: 8px;
    cursor: pointer;
    font-size: 13px;
    color: #555;
    user-select: none;
}

    .custom-checkbox:hover {
        color: #333;
    }

    .custom-checkbox input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

.checkmark {
    position: absolute;
    top: 1px;
    left: 0;
    height: 16px;
    width: 16px;
    background-color: #f7f7f7;
    border: 1px solid #ddd;
    border-radius: 3px;
    transition: all 0.2s ease;
}

.custom-checkbox:hover input ~ .checkmark {
    background-color: #f0f0f0;
    border-color: #ccc;
}

.custom-checkbox input:checked ~ .checkmark {
    background-color: #ec7400;
    border-color: #ec7400;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.custom-checkbox input:checked ~ .checkmark:after {
    display: block;
}

.custom-checkbox .checkmark:after {
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Filter Actions */
.filter-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid #f1f1f1;
}

.btn-filter {
    padding: 6px 12px;
    border-radius: 4px;
    font-weight: 500;
    font-size: 13px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn-clear {
    background: #f8f9fa;
    color: #555;
    border: 1px solid #ddd;
}

    .btn-clear:hover {
        background: #f1f1f1;
        color: #333;
    }

.btn-apply {
    background: #ec7400;
    color: white;
    border: 1px solid #ec7400;
}

    .btn-apply:hover {
        background: #d35400;
        border-color: #d35400;
    }

/* Mobile styles */
 @media (max-width: 767px) {
        .filter-toggle-mobile

    {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 15px;
        width: 100%;
        padding: 8px;
        background: #f8f9fa;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-weight: 500;
        color: #555;
        font-size: 13px;
    }

    .filter-toggle-mobile i {
        margin-right: 6px;
        color: #ec7400;
    }

    } 

/* Badge and count styles */
.filter-badge {
    display: inline-flex;
    align-items: center;
    background: #f8f9fa;
    border: 1px solid #e6e6e6;
    border-radius: 30px;
    padding: 4px 10px;
    margin-right: 6px;
    margin-bottom: 6px;
    font-size: 12px;
    color: #555;
}

    .filter-badge i {
        margin-left: 5px;
        font-size: 9px;
        color: #999;
        cursor: pointer;
    }

        .filter-badge i:hover {
            color: #ec7400;
        }

.active-filters {
    margin-bottom: 15px;
    padding: 10px 15px;
    background: #f9f9f9;
    border-radius: 6px;
    border: 1px solid #eee;
}

.active-filters-title {
    font-size: 0.8rem;
    color: #777;
    margin-bottom: 8px;
}

/* Animation for transitions */
.filter-animate {
    animation: fadeIn 0.3s ease-in-out;
}

.hideFilterSection {
    display: none !important; /* Hide mobile filter container */
    visibility: hidden;
    opacity: 0;
}

  @keyframes fadeIn {
        0%

    {
        opacity: 0;
        transform: translateY(5px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }

    }

/* Show/hide divs based on screen size */
@media (min-width: 768px) {
    /* Desktop/tablet view (md and up) */
    #desktopFilterContainer {
        display: block !important; /* Show desktop filter container */
    }

    #mobileFilterContainer {
        display: none !important; /* Hide mobile filter container */
    }

    /*#mobileFilterToggle {
        display: none !important;*/ /* Hide mobile toggle button */
    /*}*/
}

@media (max-width: 767px) {
    /* Mobile view */
    #desktopFilterContainer {
        display: none !important; /* Hide desktop filter container */
    }

    #mobileFilterContainer {
        display: block; /* Show mobile filter container (when active) */
    }

    /*#mobileFilterToggle {
        display: block;*/ /* Show mobile toggle button */
    /*}*/
}

.product-variations {
    margin-top: 5px;
    font-size: 0.85rem;
    width: 100%;
}

.variation-item {
    display: block;
    margin-bottom: 4px;
    background-color: #f8f9fa;
    padding: 2px 8px;
    border-radius: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.variation-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.variation-type {
    font-weight: 600;
    margin-right: 3px;
    white-space: nowrap;
}

.variation-value {
    color: #333;
    margin-right: 3px;
    word-break: break-word;
}

.variation-price {
    color: #ec7400;
    font-size: 0.8rem;
    white-space: nowrap;
}

/* Media queries for responsive design */
@media (max-width: 767px) {
    .cart-box {
        display: flex;
        flex-direction: column;
    }

        .cart-box img {
            max-width: 80px;
            margin-bottom: 8px;
        }

    .product-variations {
        font-size: 0.8rem;
    }

    .variation-item {
        padding: 2px 5px;
    }
}

@media (max-width: 575px) {
    .cart-box h5 {
        font-size: 0.95rem;
    }

    .product-variations {
        font-size: 0.75rem;
    }
}


.product-details-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.order-variations {
    margin-top: 5px;
    width: 100%;
}

    .order-variations .variation-item {
        display: block;
        padding: 2px 5px;
        margin-bottom: 3px;
        background-color: #f8f9fa;
        border-radius: 4px;
        font-size: 0.8rem;
        text-align: center;
    }

    .order-variations .variation-type {
        font-weight: 600;
        margin-right: 3px;
    }

    .order-variations .variation-value {
        color: #333;
    }

    .order-variations .variation-price {
        color: #ec7400;
        margin-left: 3px;
        font-size: 0.75rem;
    }

@media (max-width: 767px) {
    .order-variations {
        padding-left: 0;
        padding-right: 0;
    }

        .order-variations .variation-item {
            font-size: 0.75rem;
        }
}

.serviceBookingDateTimeTxt {
    font-size: medium;
    background-color: #f8f9fa;
}

@media (min-width: 767px) {
   .catArrowPosition{
       margin-top: -45px !important;
   }
}



.voice-search-badge {
    background: linear-gradient(135deg, #ec7400 0%, #764ba2 100%);
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(102, 126, 234, 0.3);
}

.voice-search-query {
    color: #ec7400;
    font-weight: 600;
}

.voice-result-card {
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid #e0e0e0;
}

    .voice-result-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    }

.stock-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
}

.out-of-stock-badge {
    background-color: #dc3545;
    color: white;
}

.product-cards.out-of-stock {
    opacity: 0.7;
}

    .product-cards.out-of-stock::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(255, 255, 255, 0.3);
        z-index: 5;
        pointer-events: none;
    }

/* Store Header Card Styles */
.store-header-card {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-left: 4px solid #ec7400;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.store-info-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.store-name-voice {
    color: #333;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

    .store-name-voice i {
        color: #ec7400;
    }

.store-detail-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #666;
    font-size: 0.95rem;
}

    .store-detail-item i {
        color: #ec7400;
        width: 20px;
    }

/* Voice Search Product Image Styles */
.voice-result-card .card-img-top,
.voice-result-card .product-image,
.voice-result-card .product-no-image {
    height: 180px;
    object-fit: contain;
    object-position: center;
    width: 100%;
    /*background-color: #f8f9fa;*/
}

/* Responsive styles */
@media (max-width: 768px) {
    .voice-result-card .card-img-top,
    .voice-result-card .product-image,
    .voice-result-card .product-no-image {
        height: 160px;
    }

    .store-header-card {
        padding: 1rem;
    }

    .store-name-voice {
        font-size: 1.25rem;
    }
}

@media (max-width: 576px) {
    .voice-result-card .card-img-top,
    .voice-result-card .product-image,
    .voice-result-card .product-no-image {
        height: 150px;
    }

    .store-detail-item {
        font-size: 0.85rem;
    }
}

/* ==================== Voice Toggle Button (Navbar) ==================== */
.voice-toggle-btn {
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform 0.2s ease;
}

.voice-toggle-btn:hover {
    transform: scale(1.1);
}

.voice-toggle-btn:focus {
    outline: none;
    box-shadow: none;
}

.voice-toggle-icon {
    width: 35px;
    height: 35px;
    object-fit: contain;
}

/* Pulse ring animation when voice is active */
.voice-toggle-btn.voice-active::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #ec7400;
    transform: translate(-50%, -50%);
    animation: voice-pulse 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes voice-pulse {
    0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0.8; }
    50%  { transform: translate(-50%, -50%) scale(1.3); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(1);   opacity: 0; }
}

/* ===== DoorToShop Header ===== */

.d2s-header {
    position: sticky;
    top: 0;
    z-index: 999;
    background: linear-gradient(135deg, #ec7400 0%, #c96402 100%);
    padding: 0 16px;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 4px 20px rgba(236, 116, 0, 0.3);
}

/* Row 1: Logo left, actions right */
.d2s-row1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0 8px;
    gap: 12px;
}

.d2s-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.d2s-logo-img {
    height: 56px;
    /* Pairs with the width/height attributes on the <img> — see the matching rule in
       _Header.cshtml. Without an explicit width the attribute's presentational hint sizes the box
       to the file's full 648px. */
    width: auto;
    object-fit: contain;

}

/* Actions group — right side */
.d2s-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Location textbox */
.d2s-loc-wrap {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.18);
    border: 1.5px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    padding: 0 10px;
    width: 420px;
    max-width: 45vw;
    min-width: 280px;
    transition: all 0.2s;
}

.d2s-loc-wrap:focus-within {
    background: rgba(255,255,255,0.28);
    border-color: rgba(255,255,255,0.45);
}

.d2s-loc-icon {
    color: #fff;
    font-size: 12px;
    margin-right: 6px;
    flex-shrink: 0;
}

.d2s-loc-input {
    background: none;
    border: none;
    outline: none;
    color: #fff;
    font-size: 13px;
    padding: 8px 0;
    min-width: 0;
    flex: 1;
}

.d2s-loc-input::placeholder {
    color: rgba(255,255,255,0.6);
}

.d2s-loc-clear {
    color: rgba(255,255,255,0.5);
    font-size: 10px;
    cursor: pointer;
    padding: 2px;
    flex-shrink: 0;
}

.d2s-loc-clear:hover {
    color: #fff;
}

.d2s-locate-btn {
    background: rgba(255,255,255,0.15);
    border: none;
    border-radius: 5px;
    color: #fff;
    font-size: 11px;
    padding: 3px 5px;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 2px;
    transition: background 0.2s;
}

.d2s-locate-btn:hover {
    background: rgba(255,255,255,0.3);
}

/* Icon buttons (voice, cart) */
.d2s-icon-btn {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: none;
    background: rgba(255,255,255,0.2);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    text-decoration: none;
    position: relative;
    flex-shrink: 0;
    line-height: 1;
    padding: 0;
}

.d2s-icon-btn:hover {
    background: rgba(255,255,255,0.3);
    color: #fff;
    text-decoration: none;
}

.d2s-icon-btn .voice-toggle-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

/* Cart */
.d2s-cart-link {
    position: relative;
}

.d2s-cart-link > .fas {
    position: relative;
    z-index: 0;
}

.d2s-cart-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    background: #d32f2f;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    z-index: 2;
    pointer-events: none;
    border: 2px solid #ec7400;
}

/* Sign in */
.d2s-signin-btn {
    padding: 7px 18px;
    border-radius: 10px;
    border: 1.5px solid rgba(255,255,255,0.4);
    background: transparent;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s;
    flex-shrink: 0;
}

.d2s-signin-btn:hover {
    background: #fff;
    border-color: #fff;
    color: #ec7400;
    text-decoration: none;
}

/* Profile dropdown */
.d2s-profile-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255,255,255,0.15);
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: all 0.2s;
    flex-shrink: 0;
}

.d2s-profile-btn::after {
    display: none;
}

.d2s-profile-btn:hover {
    background: rgba(255,255,255,0.3);
    color: #fff;
    text-decoration: none;
}

.d2s-dropdown {
    border: none;
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
    padding: 0;
    margin-top: 10px;
    min-width: 220px;
    overflow: hidden;
}

.d2s-dropdown-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #ec7400, #f59e3f);
    color: #fff;
}

.d2s-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255,255,255,.2);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: .5px;
}

.d2s-user-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.d2s-dropdown-user-name {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
    line-height: 1.2;
}

.d2s-dropdown-user-role {
    font-size: 11px;
    color: rgba(255,255,255,.75);
    line-height: 1.2;
}

.d2s-dropdown-nav {
    padding: 6px 0;
}

.d2s-dropdown-link {
    padding: 9px 16px !important;
    font-size: 13px;
    font-weight: 500;
    color: #444 !important;
    display: flex !important;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    transition: all .15s;
}

.d2s-link-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #888;
    flex-shrink: 0;
    transition: all .15s;
}

.d2s-dropdown-link:hover {
    background: #fef5eb !important;
    color: #ec7400 !important;
}

.d2s-dropdown-link:hover .d2s-link-icon {
    background: #ec7400;
    color: #fff;
}

.d2s-dropdown-footer {
    padding: 8px 16px;
    border-top: 1px solid #f0f0f0;
    background: #fafafa;
}

.d2s-logout-link {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 500;
    color: #999;
    text-decoration: none;
    transition: color .15s;
    padding: 4px 0;
}

.d2s-logout-link:hover {
    color: #c62828;
    text-decoration: none;
}

.d2s-logout-link i {
    font-size: 12px;
}

/* Row 2: Search bar */
.d2s-row2 {
    padding: 0 0 10px;
}

.d2s-search-wrap {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.18);
    border: 1.5px solid rgba(255,255,255,0.2);
    border-radius: 10px;
    padding: 0 12px;
    transition: all 0.2s;
}

.d2s-search-wrap:focus-within {
    background: rgba(255,255,255,0.28);
    border-color: rgba(255,255,255,0.45);
}

.d2s-search-icon {
    color: rgba(255,255,255,0.6);
    font-size: 13px;
    margin-right: 10px;
    flex-shrink: 0;
}

.d2s-search-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    padding: 9px 0;
    font-size: 13px;
    color: #fff;
    min-width: 0;
}

.d2s-search-input::placeholder {
    color: rgba(255,255,255,0.6);
}

.d2s-search-go {
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    padding: 4px 6px;
    flex-shrink: 0;
}

.d2s-search-go:hover {
    color: rgba(255,255,255,0.7);
}

.d2s-search-clear {
    color: rgba(255,255,255,0.5);
    font-size: 12px;
    cursor: pointer;
    padding: 4px;
    flex-shrink: 0;
}

.d2s-search-clear:hover {
    color: #fff;
}

/* Deliver button */
.d2s-deliver-btn {
    background: #fff;
    color: #ec7400;
    border: none;
    border-radius: 10px;
    padding: 9px 24px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.d2s-deliver-btn:hover {
    background: rgba(255,255,255,0.85);
}

/* Override old header_Menu */
.header_Menu {
    padding: 0;
    margin: 0;
}

/* Responsive */
@media (max-width: 576px) {
    .d2s-header {
        padding: 0 10px;
        border-radius: 0 0 12px 12px;
    }

    .d2s-row1 {
        flex-wrap: wrap;
        padding: 8px 0 6px;
        gap: 8px;
    }

    .d2s-logo-img {
        height: 44px;
    }

    .d2s-actions {
        gap: 6px;
    }

    .d2s-loc-wrap {
        width: 260px;
        max-width: 40vw;
        min-width: 180px;
    }

    .d2s-icon-btn {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .d2s-signin-btn {
        padding: 5px 12px;
        font-size: 11px;
    }
}

/* ===== AI-First Homepage Styles ===== */

.ai-homepage-section {
    margin-top: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f0f0f0;
}

.ai-homepage-section:last-of-type {
    border-bottom: none;
}

.ai-section-header {
    font-weight: 600;
    color: #333;
    margin-bottom: 0.75rem;
    font-size: 1rem;
}

/* Horizontal scroll container for product cards */
.buy-again-scroll {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.buy-again-scroll::-webkit-scrollbar {
    height: 4px;
}

.buy-again-scroll::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

/* Trending scroll container (same as buy-again-scroll) */
.trending-scroll {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.trending-scroll::-webkit-scrollbar {
    height: 4px;
}

.trending-scroll::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

/* Compact product card for Buy Again / Budget / Trending */
.product-card-mini {
    flex: 0 0 auto;
    width: 140px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    overflow: hidden;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s;
}

.product-card-mini:hover {
    box-shadow: 0 2px 8px rgba(236,116,0,0.15);
}

/* Only cards that carry a product id open the detail modal, so only those get the clickable
   affordance. The Shopping Agent proposal card reuses .product-card-mini without a product id — its
   action is the "Review" link inside it, and a pointer cursor on the whole tile would promise a
   click that does nothing. */
.product-card-mini[data-product-id] {
    cursor: pointer;
}

/* The product page's related-products rail (#pdSimilarRail) renders each card as
   an <a> rather than a <div>, so an alternative is a real link — crawlable, middle-clickable, and
   openable in a new tab, which matters because these rails exist for customers arriving from Google.
   text-decoration has to be cancelled on the anchor itself: it is painted by the ancestor, so the
   colour rules on .product-card-mini-name cannot remove the underline from inside. */
/* Deals cards on the product page carry a +Add button, so the link wraps only the card BODY and
   the button is its sibling — a <button> inside an <a> is invalid and would navigate on every add.
   .product-card-mini is a column flexbox, so the link has to become one too and take the free
   space; otherwise the info block will not stretch and the button will not sit on the bottom edge.
   Same text-decoration cancellation as the similar rail above, for the same reason: the underline
   is painted by the anchor, so colour rules on the name cannot remove it from inside. */
/* Heading + "Show More" on one line, with the heading CENTRED to match the rail above it.

   A three-column grid rather than flex with space-between: the heading has to be centred on the
   RAIL, not on the space left over beside the link, or it sits half the link's width off-centre.
   The two outer columns are equal, so column 2 lands on the true centre whatever the link says —
   and unlike absolute positioning, column 3 reserves real space, so the link can never overlap the
   heading on a narrow screen.

   minmax(0, ...) lets the outer columns shrink below their content width instead of one of them
   growing to fit the link and pushing the heading sideways. */
.pd-rail-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

/* .ai-section-header carries a bottom margin for the stacked case. Inside this row the row
   itself owns the spacing, so the heading would otherwise sit visibly high against the link. */
.pd-rail-head .ai-section-header {
    grid-column: 2;
    margin-bottom: 0;
}

.pd-rail-head + .buy-again-scroll {
    margin-top: 0.75rem;
}

.pd-rail-more {
    grid-column: 3;
    justify-self: end;
    font-size: 13px;
    font-weight: 600;
    color: #ec7400;
    text-decoration: none;
    white-space: nowrap;
}

.pd-rail-more:hover,
.pd-rail-more:focus {
    color: #c96200;
    text-decoration: underline;
}

.pd-similar-rail .product-card-mini > .pd-card-link {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    text-decoration: none;
    color: inherit;
}

/* Pushes the button to the bottom so cards of differing name lengths still line their buttons up. */
.pd-similar-rail .product-card-mini > .product-card-mini-add {
    margin-top: auto;
}

.pd-similar-rail a.product-card-mini {
    text-decoration: none;
    color: inherit;
}

/* Related-products band on the product page — a panel BELOW the product card, not content inside it.

   Spans the page rather than the card's 800px column, deliberately: constrained to the card width
   the rail showed about five cards on a desktop, so most alternatives sat off-screen behind a
   scrollbar. It stops short of the viewport edges — see the gutter below — because a rounded panel
   needs its corners on screen to read as a panel at all.

   Widening works here without a breakout trick because _Layout renders @RenderBody directly inside a
   bare <main id="main-content"> with no .container and no width rule. If a container is ever
   introduced there, this band will inherit its width and need
   `width:100vw; margin-left:calc(50% - 50vw)` to escape it. */
.pd-related-band {
    max-width: none;
    margin: 0 0 1.75rem;
    /* Side breathing space rather than true edge-to-edge: a rounded panel needs its corners on
       screen to read as a panel at all. clamp scales the gutter with the viewport — tight on a
       phone, generous on a desktop — without a media query. */
    padding: 0 clamp(12px, 2.5vw, 40px);
}

.pd-related-band .pd-similar-rail {
    background: #fff;
    border-radius: 16px;
    /* Same corner radius as the product card above, and a lighter shadow: stacked panels of equal
       weight read as two equal subjects, and this one is secondary to the product being sold. */
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
    padding: 18px 20px;
    /* .ai-homepage-section is built for the homepage, where sections are separated by rules and top
       margins. Inside a panel both are wrong — the panel itself is the separator. */
    margin-top: 0;
    border-bottom: none;
}

/* Centred only here. On the homepage these headers label rails that sit in a left-aligned stack and
   must stay flush with it; on the product page the rail is a lone panel, so a centred title reads as
   the panel's own caption rather than a stray left-hanging label. */
.pd-related-band .pd-similar-rail .ai-section-header {
    text-align: center;
}

.product-card-mini-img {
    position: relative;
    width: 100%;
    height: 100px;
    overflow: hidden;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.deal-discount-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background: #ec7400;
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    z-index: 2;
    pointer-events: none;
}

.product-card-mini-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-card-mini-placeholder {
    width: 100%;
    height: 100%;
    background: #eee;
}

.product-card-mini-info {
    padding: 6px 8px 4px;
    flex: 1;
}

.product-card-mini-name {
    font-size: 0.75rem;
    font-weight: 500;
    color: #333;
    margin: 0 0 2px;
    /* Two lines, not one truncated line. Cards are 130-160px wide depending on breakpoint, so a
       single line fits roughly 18-22 characters — shorter than most real product names, and
       "KITCHEN D'LITE RICE FLOUR 1KG" arrived as "KITCHEN D'LITE ...". Grocery names carry their
       identity at the END (the variant, the size), so truncating the tail hides the one thing that
       tells two cards apart. Two lines covers the great majority at every breakpoint.

       min-height reserves the second line even for short names, so prices and store names stay on a
       common baseline across a row. The clamp supplies its own ellipsis, which is why the old
       white-space/text-overflow pair is gone. Cards grow by about one line of text; no rail
       container has a fixed height, so nothing clips. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.25;
    min-height: 2.5em;
}

.product-card-mini-price {
    font-size: 0.8rem;
    font-weight: 600;
    color: #ec7400;
    margin: 0;
}

.product-card-mini-store {
    font-size: 0.65rem;
    color: #999;
    margin: 2px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-card-mini-add {
    margin: 4px 8px 6px;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 4px;
    color: #ec7400;
    border-color: #ec7400;
    background: transparent;
}

.product-card-mini-add:hover {
    background: #ec7400;
    color: #fff;
    border-color: #ec7400;
}

/* Deals tile — strikethrough old price + expiry pill */
.deal-old-price {
    text-decoration: line-through;
    color: #999;
    font-weight: 400;
    margin-right: 4px;
}

.deal-expiry-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    max-width: 100%;
    margin: 2px 0 6px;
    padding: 3px 9px;
    background: #fff4e6;
    border: 1px solid #f39200;
    border-radius: 12px;
    color: #b85400;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.1px;
    white-space: nowrap;
}

.deal-expiry-pill i {
    font-size: 9px;
    line-height: 1;
}

/* Urgency tiers — closer to expiry = louder colour */
.deal-expiry-pill.critical {
    background: #ffe5e5;
    border-color: #d93025;
    color: #b71c1c;
}

.deal-expiry-pill.warning {
    background: #fff4d6;
    border-color: #f5a623;
    color: #8a4a00;
}

/* Budget chip (pill-shaped quick filter buttons) */
.budget-chip {
    display: inline-block;
    padding: 6px 16px;
    background: #fef5eb;
    border: 1px solid #ec7400;
    border-radius: 20px;
    color: #ec7400;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.budget-chip:hover {
    background: #ec7400;
    color: #fff;
}

/* Responsive: 2 columns mobile, wider cards on desktop */
@media (max-width: 576px) {
    .product-card-mini {
        width: 130px;
    }

    .product-card-mini-img {
        height: 80px;
    }

    /* Cards are only 130px wide on mobile — shrink the pill so the full
       "Expires in N days" label fits inside the tile instead of being clipped. */
    .deal-expiry-pill {
        box-sizing: border-box;
        min-width: 0;
        overflow: hidden;
        gap: 3px;
        padding: 2px 6px;
        font-size: 8px;
        letter-spacing: 0;
    }

    .deal-expiry-pill i {
        font-size: 8px;
        flex-shrink: 0;
    }

    .deal-expiry-pill span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ai-section-header {
        font-size: 0.9rem;
    }
}

@media (min-width: 768px) {
    .product-card-mini {
        width: 160px;
    }

    .product-card-mini-img {
        height: 120px;
    }
}


/* ========== Product Detail Modal - Improved UI ========== */

.pd-modal .modal-content {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.pd-modal .modal-header {
    border-bottom: none;
    padding: 12px 16px 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;
}

.pd-close-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.06);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
    line-height: 1;
}

.pd-close-btn:hover {
    background: rgba(0, 0, 0, 0.12);
    color: #333;
}

/* Share button — borrows .pd-close-btn's shape, sits opposite it in brand orange. */
.pd-share-btn {
    position: absolute;
    left: 16px;
    top: 12px;
    z-index: 10;
    color: #ec7400;
}

/* .pd-close-btn:hover would otherwise grey it out mid-hover. */
.pd-share-btn:hover {
    color: #ec7400;
}

/* The standalone product page hides .pd-close-btn to strip modal chrome; share must survive
   that. Three classes so it outranks the page's own .pd-as-page .pd-close-btn rule. */
.pd-as-page .pd-modal .pd-share-btn {
    display: flex;
}

.pd-modal .modal-body {
    padding: 0;
}

/* Image Section */
.pd-image-section {
    background: #f9f5f0;
    padding: 20px;
    position: relative;
}

.pd-badges {
    position: absolute;
    /* Shifted down from 16px: the share button occupies the top-left corner. */
    top: 56px;
    left: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 5;
}

.pd-badge {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    display: inline-block;
}

.pd-badge.oos {
    background: #F44336;
    color: #fff;
}

.pd-badge.in-stock {
    background: #4CAF50;
    color: #fff;
}

.pd-badge.offer {
    background: #ec7400;
    color: #fff;
}

/* Main Image with Zoom */
.pd-main-image-wrap {
    position: relative;
    border-radius: 12px;
    background: #fff;
    margin-bottom: 12px;
}

.pd-main-image-wrap .owl-carousel .item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    max-height: 340px;
    overflow: hidden;
    position: relative;
}

.pd-main-image-wrap .owl-carousel .item img {
    max-width: 100%;
    max-height: 320px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Zoom: in-place background zoom on hover */
.pd-zoom-container {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
    margin-bottom: 12px;
    cursor: crosshair;
}

.pd-zoom-container .pd-zoom-img {
    display: block;
    width: 100%;
    max-height: 340px;
    object-fit: contain;
    transition: opacity 0.2s;
}

.pd-zoom-container.zooming .pd-zoom-img {
    opacity: 0;
}

/* In carousel mode, only hide the carousel images — not the nav arrows */
.pd-zoom-container.pd-main-image-wrap.zooming .owl-carousel .image-popup {
    opacity: 0;
}

.pd-zoom-container.pd-main-image-wrap.zooming .owl-nav,
.pd-zoom-container.pd-main-image-wrap.zooming .owl-dots {
    opacity: 1;
}

.pd-zoom-container .pd-zoom-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 250%;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
}

.pd-zoom-container.zooming .pd-zoom-bg {
    opacity: 1;
}

.pd-zoom-hint {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    z-index: 5;
    transition: opacity 0.2s;
    pointer-events: none;
}

.pd-zoom-container:hover .pd-zoom-hint {
    opacity: 0;
}

/* Owl Carousel overrides in product detail */
.pd-main-image-wrap .owl-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    display: flex;
    z-index: 5;
    justify-content: space-between;
    padding: 0 8px;
    pointer-events: none;
    margin: 0;
}

.pd-main-image-wrap .owl-nav button {
    pointer-events: auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #333;
    transition: all 0.2s;
}

.pd-main-image-wrap .owl-nav button:hover {
    background: #ec7400;
    color: #fff;
}

.pd-main-image-wrap .owl-nav button span {
    line-height: 1;
    font-size: 20px;
}

.pd-main-image-wrap .owl-dots {
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
    z-index: 5;
}

.pd-main-image-wrap .owl-dots .owl-dot span {
    width: 8px;
    height: 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
}

.pd-main-image-wrap .owl-dots .owl-dot.active span {
    background: #ec7400;
    width: 20px;
    border-radius: 4px;
}

/* Thumbnails */
.pd-thumbnails {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 2px 6px;
    scrollbar-width: thin;
    scrollbar-color: #ec7400 #f1f1f1;
}

.pd-thumbnails::-webkit-scrollbar {
    height: 8px;
}

.pd-thumbnails::-webkit-scrollbar-track {
    background-color: #f1f1f1;
    border-radius: 4px;
}

.pd-thumbnails::-webkit-scrollbar-thumb {
    background-color: #ec7400;
    border-radius: 4px;
}

.pd-thumbnails::-webkit-scrollbar-thumb:hover {
    background-color: #d36800;
}

.pd-thumb {
    width: 60px;
    height: 60px;
    min-width: 60px;
    border-radius: 8px;
    object-fit: cover;
    border: 2px solid transparent;
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.2s;
    background: #fff;
}

.pd-thumb.active,
.pd-thumb:hover {
    border-color: #ec7400;
    opacity: 1;
}

.pd-thumb.grayscale {
    filter: grayscale(100%);
}

/* Info Section */
.pd-info-section {
    padding: 20px 24px 24px;
}

.pd-category {
    font-size: 11px;
    font-weight: 600;
    color: #ec7400;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.pd-name {
    font-size: 20px;
    font-weight: 700;
    color: #222;
    margin: 0 0 10px 0;
    line-height: 1.3;
}

/* Stock badges */
.pd-stock-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 12px;
}

.pd-stock-badge.oos {
    background: #FDECEA;
    color: #D32F2F;
}

.pd-stock-badge.low {
    background: #FFF3E0;
    color: #E65100;
}

.pd-stock-badge.in-stock {
    background: #E8F5E9;
    color: #2E7D32;
}

/* Price */
.pd-price-wrap {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.pd-price {
    font-size: 24px;
    font-weight: 800;
    color: #ec7400;
}

.pd-price-old {
    font-size: 16px;
    color: #bbb;
    text-decoration: line-through;
}

.pd-discount-tag {
    background: #FFF3E0;
    color: #ec7400;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
}

/* Description */
.pd-desc-label {
    font-size: 12px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.pd-desc {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
    margin-bottom: 4px;
}

.pd-desc.short-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pd-desc.expanded {
    -webkit-line-clamp: unset;
}

.pd-toggle-desc {
    color: #ec7400;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    margin-bottom: 12px;
    display: inline-block;
}

.pd-toggle-desc:hover {
    text-decoration: underline;
    color: #d46800;
}

/* Variations */
.pd-variations {
    margin-bottom: 16px;
}

.pd-variations-title {
    font-size: 13px;
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.pd-variation-group {
    margin-bottom: 12px;
}

.pd-variation-label {
    font-size: 12px;
    font-weight: 600;
    color: #666;
    margin-bottom: 4px;
}

.pd-variation-select {
    width: 100%;
    padding: 8px 12px;
    border: 1.5px solid #E0D8D0;
    border-radius: 8px;
    font-size: 13px;
    color: #333;
    background: #fff;
    outline: none;
    transition: border-color 0.2s;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
}

.pd-variation-select:focus {
    border-color: #ec7400;
    box-shadow: 0 0 0 3px rgba(236, 116, 0, 0.1);
}

.pd-variation-stock-info {
    font-size: 11px;
    margin-top: 3px;
    padding-left: 2px;
}

.pd-variation-stock-info.oos { color: #D32F2F; }
.pd-variation-stock-info.low { color: #E65100; }
.pd-variation-stock-info.in-stock { color: #2E7D32; }

/* Quantity + Cart Row */
.pd-cart-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.pd-qty-wrap {
    display: flex;
    align-items: center;
    border: 1.5px solid #E0D8D0;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.pd-qty-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: #fff;
    color: #ec7400;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.pd-qty-btn:hover {
    background: #FFF3E0;
}

.pd-qty-input {
    width: 44px;
    height: 36px;
    border: none;
    border-left: 1px solid #E0D8D0;
    border-right: 1px solid #E0D8D0;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    background: #fff;
    outline: none;
    -moz-appearance: textfield;
}

.pd-qty-input::-webkit-outer-spin-button,
.pd-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pd-add-cart-btn {
    flex: 1;
    padding: 9px 20px;
    border: none;
    border-radius: 8px;
    background: #ec7400;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.pd-add-cart-btn:hover {
    background: #d46800;
}

.pd-add-cart-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    color: #888;
}

/* Total Price */
.pd-total {
    font-size: 18px;
    font-weight: 700;
    color: #ec7400;
    margin-bottom: 16px;
}

/* Quantity validation */
.pd-qty-validation {
    font-size: 11px;
    color: #D32F2F;
    margin-top: -8px;
    margin-bottom: 8px;
    display: none;
}

/* Product Details / Specs Section */
.pd-details-section {
    border-top: 1px solid #F0E8E0;
    padding: 16px 24px 20px;
}

.pd-details-title {
    font-size: 13px;
    font-weight: 700;
    color: #ec7400;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.pd-details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 16px;
}

.pd-detail-item {
    font-size: 13px;
    color: #555;
}

.pd-detail-item strong {
    color: #333;
    font-weight: 600;
}

/* No-image placeholder */
.pd-no-image {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
}

.pd-no-image img {
    max-width: 280px;
    max-height: 260px;
}

/* Responsive */
@media (max-width: 768px) {
    .pd-info-section {
        padding: 16px;
    }

    .pd-name {
        font-size: 17px;
    }

    .pd-price {
        font-size: 20px;
    }

    .pd-details-section {
        padding: 12px 16px 16px;
    }

    .pd-details-grid {
        grid-template-columns: 1fr;
    }

    /* This block used to switch the lens off here entirely — background display:none, the base
       image left opaque while .zooming, hint hidden. Reasonable when the only way to drive it was
       a mouse: a hover lens on a phone is dead UI. It is now driven by tap-and-drag, so the
       switch has to come back on, and the hint is the affordance that tells anyone it exists. */

    /* Panning must move the lens, not scroll the page — but only once the customer has tapped
       into zoom. Until then this panel scrolls like everything else. */
    .pd-zoom-container.pd-zoom-touch {
        touch-action: none;
    }
}

/* ========== Voice Search Results - BC-Style Product Grid ========== */

.vs-page {
    background: #FDF8F3 !important;
    padding-bottom: 20px !important;
}

/* Results Header */
.vs-header {
    background: linear-gradient(135deg, #ec7400, #d46800) !important;
    padding: 14px 16px !important;
    border-radius: 0 0 16px 16px !important;
    margin-bottom: 10px !important;
    box-shadow: 0 2px 8px rgba(236, 116, 0, 0.3) !important;
}

.vs-header-top {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.vs-header-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
}

.vs-header-info {
    flex: 1 !important;
    min-width: 0 !important;
}

.vs-header-query {
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.vs-header-stats {
    color: rgba(255,255,255,0.85) !important;
    font-size: 12px !important;
    margin: 2px 0 0 0 !important;
}

.vs-header-badge {
    background: rgba(255,255,255,0.2) !important;
    color: #fff !important;
    padding: 4px 12px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    flex-shrink: 0 !important;
}

/* Content Area */
.vs-content {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 10px !important;
}

/* Product Grid - Same as BusinessCategory */
.vs-product-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 8px !important;
}

.vs-product-card {
    background: #fff !important;
    border-radius: 10px !important;
    border: 1px solid #F0E8E0 !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
    position: relative !important;
}

.vs-product-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}

.vs-product-card.out-of-stock {
    opacity: 0.6 !important;
}

.vs-product-img-wrap {
    width: 100% !important;
    aspect-ratio: 4/3 !important;
    overflow: hidden !important;
    background: #f9f5f0 !important;
    position: relative !important;
}

.vs-product-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 4px !important;
}

.vs-product-img.grayscale {
    filter: grayscale(100%) !important;
}

.vs-stock-badge {
    position: absolute !important;
    top: 6px !important;
    left: 6px !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    z-index: 2 !important;
}

.vs-stock-badge.oos {
    background: rgba(244, 67, 54, 0.9) !important;
    color: #fff !important;
}

.vs-stock-badge.low-stock {
    background: rgba(255, 152, 0, 0.9) !important;
    color: #fff !important;
}

.vs-stock-hint {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #e65100 !important;
    background: #fff3e0 !important;
    padding: 1px 6px !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
    animation: vs-pulse-stock 2s ease-in-out infinite !important;
}

.vs-stock-hint.oos {
    color: #c62828 !important;
    background: #ffebee !important;
    animation: none !important;
}

@keyframes vs-pulse-stock {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.vs-product-info {
    padding: 6px 8px 8px !important;
}

.vs-product-name {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #333 !important;
    margin: 0 0 3px 0 !important;
    line-height: 1.25 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.vs-product-price-row {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 4px !important;
    gap: 4px !important;
}

.vs-product-price {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #ec7400 !important;
}

.vs-store-badge {
    display: inline-block !important;
    padding: 1px 6px !important;
    border-radius: 6px !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    margin-bottom: 5px !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.vs-add-btn {
    width: 100% !important;
    border: 1.5px solid #ec7400 !important;
    background: #fff !important;
    color: #ec7400 !important;
    border-radius: 6px !important;
    padding: 4px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
}

.vs-add-btn:hover {
    background: #ec7400 !important;
    color: #fff !important;
}

.vs-add-btn.vs-select-btn {
    border-style: dashed !important;
    background: #FDF8F3 !important;
    color: #ec7400 !important;
}

.vs-add-btn.vs-select-btn:hover {
    background: #ec7400 !important;
    color: #fff !important;
    border-style: solid !important;
}

.vs-add-btn.disabled {
    border-color: #ddd !important;
    color: #bbb !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* Empty State */
.vs-empty {
    text-align: center !important;
    padding: 80px 20px !important;
}

.vs-empty i {
    font-size: 48px !important;
    color: #ddd !important;
    margin-bottom: 16px !important;
}

.vs-empty h3 {
    color: #666 !important;
    font-size: 18px !important;
    margin-bottom: 8px !important;
}

.vs-empty p {
    color: #999 !important;
    font-size: 14px !important;
    margin-bottom: 20px !important;
}

.vs-empty-btn {
    background: #ec7400 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 10px 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

.vs-empty-btn:hover {
    background: #d46800 !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* Error State */
.vs-error {
    text-align: center !important;
    padding: 60px 20px !important;
}

.vs-error i {
    font-size: 48px !important;
    color: #F44336 !important;
    margin-bottom: 16px !important;
}

.vs-error h3 {
    color: #666 !important;
    font-size: 18px !important;
    margin-bottom: 8px !important;
}

.vs-error p {
    color: #999 !important;
    font-size: 14px !important;
}

/* Responsive - Same breakpoints as BusinessCategory */
@media (max-width: 1200px) {
    .vs-product-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

@media (max-width: 992px) {
    .vs-product-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 576px) {
    .vs-product-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }

    .vs-content {
        padding: 0 6px !important;
    }

    .vs-header {
        padding: 10px 12px !important;
        border-radius: 0 0 12px 12px !important;
    }

    .vs-header-query {
        font-size: 14px !important;
    }
}

/* ========== Business Category Page Styles ========== */

.bc-page {
    background: #FDF8F3 !important;
    min-height: 100vh !important;
    padding-bottom: 40px !important;
}

/* Sticky Sub-header */
.bc-subheader {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background: linear-gradient(135deg, #ec7400, #d46800) !important;
    padding: 12px 16px !important;
    box-shadow: 0 2px 8px rgba(236, 116, 0, 0.3) !important;
}

.bc-subheader-top {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 10px !important;
}

.bc-back-btn {
    background: rgba(255,255,255,0.2) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    font-size: 18px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: background 0.2s !important;
    text-decoration: none !important;
}

.bc-back-btn:hover {
    background: rgba(255,255,255,0.35) !important;
    color: #fff !important;
    text-decoration: none !important;
}

.bc-category-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    object-fit: cover !important;
    background: rgba(255,255,255,0.2) !important;
    flex-shrink: 0 !important;
}

.bc-category-title {
    color: #fff !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    flex: 1 !important;
}

.bc-search-wrap {
    position: relative !important;
}

.bc-search-input {
    width: 100% !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 10px 40px 10px 38px !important;
    font-size: 14px !important;
    background: rgba(255,255,255,0.95) !important;
    color: #333 !important;
    outline: none !important;
}

.bc-search-input::placeholder {
    color: #999 !important;
}

.bc-search-icon {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #999 !important;
    font-size: 14px !important;
}

.bc-search-clear {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: #ec7400 !important;
    border: none !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: none;
    width: 22px !important;
    height: 22px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    line-height: 22px !important;
    text-align: center !important;
    z-index: 2 !important;
}

.bc-search-clear:hover {
    background: #d46800 !important;
}

.bc-search-count {
    color: rgba(255,255,255,0.85) !important;
    font-size: 12px !important;
    margin-top: 6px !important;
    text-align: center !important;
    display: none !important;
}

/* Main Content */
.bc-content {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 8px 10px !important;
}

/* Loading */
.bc-loading {
    text-align: center !important;
    padding: 60px 20px !important;
    color: #999 !important;
}

.bc-loading i {
    font-size: 32px !important;
    color: #ec7400 !important;
    margin-bottom: 12px !important;
}

/* Menu Card */
.bc-menu-card {
    background: #fff !important;
    border-radius: 12px !important;
    margin-bottom: 8px !important;
    border: 1.5px solid #F0E8E0 !important;
    overflow: hidden !important;
    transition: border-color 0.3s, box-shadow 0.3s !important;
}

.bc-menu-card.expanded {
    border-color: #ec740050 !important;
    box-shadow: 0 4px 16px rgba(236, 116, 0, 0.1) !important;
}

.bc-menu-header {
    display: flex !important;
    align-items: center !important;
    padding: 14px 16px !important;
    cursor: pointer !important;
    user-select: none !important;
    gap: 12px !important;
    transition: background 0.2s !important;
}

.bc-menu-header:hover {
    background: #FEFAF5 !important;
}

.bc-menu-icon-wrap {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
}

.bc-menu-info {
    flex: 1 !important;
    min-width: 0 !important;
}

.bc-menu-name {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin: 0 !important;
}

.bc-menu-subtitle {
    font-size: 12px !important;
    color: #999 !important;
    margin: 2px 0 0 0 !important;
}

.bc-menu-badge {
    background: #ec740015 !important;
    color: #ec7400 !important;
    padding: 4px 10px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    flex-shrink: 0 !important;
}

.bc-menu-chevron {
    color: #ccc !important;
    font-size: 14px !important;
    transition: transform 0.3s !important;
    flex-shrink: 0 !important;
}

.bc-menu-card.expanded .bc-menu-chevron {
    transform: rotate(180deg) !important;
}

/* Category Chips */
.bc-menu-chips {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    padding: 0 16px 10px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
}

.bc-menu-chips::-webkit-scrollbar {
    display: none !important;
}

.bc-menu-chip {
    font-size: 11px !important;
    color: #888 !important;
    background: #f5f0eb !important;
    padding: 3px 10px !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* Menu Body (expanded) */
.bc-menu-body {
    display: none !important;
    border-top: 1px solid #F0E8E0 !important;
}

.bc-menu-card.expanded .bc-menu-body {
    display: block !important;
}

/* Category Tabs */
.bc-cat-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid #F0E8E0 !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
}

.bc-cat-tabs::-webkit-scrollbar {
    display: none !important;
}

.bc-cat-tab {
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    background: #f5f0eb !important;
    color: #666 !important;
    border: none !important;
    transition: all 0.2s !important;
}

.bc-cat-tab.active {
    background: #ec7400 !important;
    color: #fff !important;
}

.bc-cat-tab:hover:not(.active) {
    background: #ec740015 !important;
    color: #ec7400 !important;
}

/* Category Section */
.bc-cat-section {
    padding: 10px 12px !important;
}

.bc-cat-title-row {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 10px !important;
    gap: 8px !important;
}

.bc-cat-title-line {
    flex: 1 !important;
    height: 1px !important;
    background: #F0E8E0 !important;
}

.bc-cat-title-text {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #555 !important;
    white-space: nowrap !important;
}

.bc-cat-count {
    font-size: 12px !important;
    color: #999 !important;
    white-space: nowrap !important;
}

/* Product Grid */
.bc-product-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 8px !important;
}

.bc-product-card {
    background: #fff !important;
    border-radius: 10px !important;
    border: 1px solid #F0E8E0 !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
    position: relative !important;
}

.bc-product-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}

.bc-product-card.out-of-stock {
    opacity: 0.6 !important;
}

.bc-product-img-wrap {
    /* The card is a flex column now; without this the photo would be the thing that gives way when
       a row stretches to match a taller neighbour. */
    flex: 0 0 auto !important;
    width: 100% !important;
    aspect-ratio: 4/3 !important;
    overflow: hidden !important;
    background: #f9f5f0 !important;
    position: relative !important;
}

.bc-product-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 4px !important;
}

.bc-product-img.grayscale {
    filter: grayscale(100%) !important;
}

.bc-stock-badge {
    position: absolute !important;
    top: 6px !important;
    left: 6px !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    z-index: 2 !important;
}

.bc-stock-badge.oos {
    background: rgba(244, 67, 54, 0.9) !important;
    color: #fff !important;
}

.bc-stock-badge.low {
    background: rgba(255, 152, 0, 0.9) !important;
    color: #fff !important;
}

.bc-offer-badge {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    background: #ec7400 !important;
    color: #fff !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    z-index: 2 !important;
}

/* A card carrying an expiry pill has one element more than its neighbours, so its Add button used
   to sit lower than theirs — the grid stretches every cell to the tallest, but the content inside
   still stacked from the top. Making the card a column and letting the info area grow pins the
   button to the bottom of every card, so a row of them lines up whether or not a pill is there. */
.bc-product-card {
    display: flex !important;
    flex-direction: column !important;
}

.bc-product-info {
    padding: 6px 8px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
}

.bc-product-info .bc-add-btn,
.bc-product-info .dts-qty {
    margin-top: auto !important;
}

/* Its own line on a card. Beside the store badge the two compete for a strip barely wide enough
   for either, and "Easy Grocery" next to "Expires in 5 days" reads as one run-on phrase. */
.bc-product-info .deal-expiry-pill {
    display: flex !important;
    margin: 0 0 6px !important;
}

.bc-product-name {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #333 !important;
    margin: 0 0 3px 0 !important;
    line-height: 1.25 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.bc-product-price-row {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 4px !important;
    gap: 4px !important;
}

.bc-product-price {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #ec7400 !important;
}

.bc-product-price-old {
    font-size: 10px !important;
    color: #bbb !important;
    text-decoration: line-through !important;
}

.bc-store-badge {
    /* The info area is a flex column, and a flex child stretches to the cross axis by default —
       which overrides inline-block and paints the tinted background across the whole card. This
       keeps the badge hugging its text. */
    align-self: flex-start !important;
    display: inline-block !important;
    padding: 1px 6px !important;
    border-radius: 6px !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    margin-bottom: 5px !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.bc-add-btn {
    width: 100% !important;
    border: 1.5px solid #ec7400 !important;
    background: #fff !important;
    color: #ec7400 !important;
    border-radius: 6px !important;
    padding: 4px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
}

.bc-add-btn:hover {
    background: #ec7400 !important;
    color: #fff !important;
}

.bc-add-btn.disabled {
    border-color: #ddd !important;
    color: #bbb !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.bc-add-btn.bc-select-btn {
    border-style: dashed !important;
    background: #FDF8F3 !important;
    color: #ec7400 !important;
}

.bc-add-btn.bc-select-btn:hover {
    background: #ec7400 !important;
    color: #fff !important;
    border-style: solid !important;
}

.bc-variation-tag {
    font-size: 9px !important;
    color: #999 !important;
    margin-bottom: 4px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.bc-variation-tag i {
    font-size: 8px !important;
    margin-right: 2px !important;
}

/* Empty State */
.bc-empty {
    text-align: center !important;
    padding: 80px 20px !important;
}

.bc-empty i {
    font-size: 48px !important;
    color: #ddd !important;
    margin-bottom: 16px !important;
}

.bc-empty h3 {
    color: #666 !important;
    font-size: 18px !important;
    margin-bottom: 8px !important;
}

.bc-empty p {
    color: #999 !important;
    font-size: 14px !important;
    margin-bottom: 20px !important;
}

.bc-empty-btn {
    background: #ec7400 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 10px 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

.bc-empty-btn:hover {
    background: #d46800 !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* Menu loading spinner */
.bc-menu-loading {
    text-align: center !important;
    padding: 30px !important;
    color: #999 !important;
}

/* Responsive */
@media (max-width: 1200px) {
    .bc-product-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

@media (max-width: 992px) {
    .bc-product-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 576px) {
    .bc-product-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }

    .bc-content {
        padding: 6px 6px !important;
    }

    .bc-menu-header {
        padding: 10px 12px !important;
    }

    .bc-menu-chips {
        padding: 0 12px 8px !important;
    }

    .bc-category-title {
        font-size: 17px !important;
    }

    .bc-menu-name {
        font-size: 14px !important;
    }

    .bc-cat-section {
        padding: 8px !important;
    }
}

/* Page heading for content pages that have no orange sub-header to carry their name —
   /Deals is one. Sits under the breadcrumb, on the same gutter. */
.pg-title {
    /* 16 here plus the 2px .bcv leaves below the trail puts 18px between them — the same gap the
       10 below leaves before the grid, once .bc-content's own 8px padding is counted. Even air
       above and below is what stops the heading reading as part of the breadcrumb. */
    margin: 16px 0 10px;
    padding: 0 12px;
    font-size: 22px;
    font-weight: 700;
    color: #222;
    line-height: 1.25;
}

@media (max-width: 576px) {
    .pg-title {
        font-size: 19px;
        margin-top: 13px;
    }
}

/* ═══════════════════════════════════════════════════════
   PRODUCT PAGE — SOLD BY + ASSURANCES (pd-soldby / pd-assure)
   Sold by sits above the button because it is part of deciding what to buy; the assurances sit
   below it because they answer what happens once it is pressed.
   ═══════════════════════════════════════════════════════ */

/* Deliberately not a link. It is here to say who the merchant is, not to route anyone away from
   the button sitting under it — so no hover state and no chevron, because both would promise a
   destination that is not on offer. */
.pd-soldby {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #F0E8E0;
    border-radius: 10px;
    margin-bottom: 12px;
}

.pd-soldby-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #ec740015;
    color: #ec7400;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

/* One line, not two: "Sold by" is a preposition, not a heading, and stacking it above the name
   gave a two-word label its own row. The clamp lives here rather than on the name because an
   inline element cannot be ellipsised — the line has to be the thing that truncates. */
.pd-soldby-text {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.35;
}

.pd-soldby-label {
    font-size: 13px;
    color: #8a8078;
}

.pd-soldby-name {
    font-size: 13px;
    font-weight: 700;
    color: #333;
}


/* Assurances */
.pd-assure {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #F0E8E0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pd-assure-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.pd-assure-icon {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #FFF3E0;
    color: #ec7400;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.pd-assure-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12.5px;
    color: #666;
    line-height: 1.45;
}

.pd-assure-text strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #222;
}

@media (max-width: 768px) {
    .pd-assure {
        margin-top: 12px;
        padding-top: 12px;
    }
}

/* ═══════════════════════════════════════════════════════
   VISIBLE BREADCRUMB (bcv-) — Shared/_BreadcrumbVisible.cshtml
   Paired with the sr-only _Breadcrumb and the JSON-LD trail, which are unchanged. Used by the
   product page and /Deals, where a visitor arriving from search has no route into the rest of
   the catalogue and no way to tell where in it they have landed.
   ═══════════════════════════════════════════════════════ */

/* Gutter for pages that put the trail against the viewport rather than inside a column.
   The product page uses its own .pd-page-crumbs instead, to line up with the card. */
.bcv-wrap {
    padding: 0 12px;
}

.bcv {
    padding: 10px 0 2px;
}

.bcv-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.bcv-item {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    font-size: 12.5px;
    color: #8a8078;
}

.bcv-link {
    color: #ec7400;
    text-decoration: none;
}

.bcv-link:hover {
    color: #d46800;
    text-decoration: underline;
}

/* The current page, and any rung that has no page to link to. Clamped because a product name is
   the last rung and some of them are very long. */
.bcv-current,
.bcv-plain {
    color: #8a8078;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 260px;
}

.bcv-sep {
    margin: 0 7px;
    color: #cfc5bb;
}

@media (max-width: 576px) {
    .bcv-item {
        font-size: 12px;
    }

    .bcv-sep {
        margin: 0 5px;
    }

    .bcv-current,
    .bcv-plain {
        max-width: 170px;
    }
}

/* ═══════════════════════════════════════════════════════
   OPEN SHELF (bc-sec / bc-rail / bc-sk) — BusinessCategory/Index.cshtml
   Every menu renders as a visible section instead of a collapsed accordion card, so these sit
   ALONGSIDE the .bc-menu-card rules above rather than replacing them: the accordion still runs
   when BusinessCategoryOpenShelf:Enabled is false.
   ═══════════════════════════════════════════════════════ */

/* Menu rail. Third sticky bar on this page — #bcCatNavWrap (z 101) pins at top:0, .bc-subheader
   (z 100) pins under it, and this pins under both. Its `top` is set at runtime by
   syncStickyOffset() in _BusinessCategoryNav.cshtml, which is also why the z-index is LOWEST of
   the three: during the sub-header's collapse transition the offset is briefly a few pixels
   stale, and if anything has to overlap it should be this bar that goes under, not the search. */
.bc-menu-rail {
    position: sticky;
    top: 0;
    z-index: 99;
    background: #fff;
    border-bottom: 1px solid #F0E8E0;
    box-shadow: 0 1px 3px rgba(0,0,0,.03);
}

.bc-rail-row {
    display: flex;
    gap: 18px;
    padding: 0 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.bc-rail-row::-webkit-scrollbar {
    display: none;
}

/* Deliberately NOT a pill: #bcCatNavWrap directly above is a row of pills, and two pill rails
   stacked read as one confused control. Text with an underline separates the two jobs —
   that bar changes category, this one moves within the category you are already in. */
.bc-rail-item {
    flex: 0 0 auto;
    padding: 11px 1px 9px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 13px;
    font-weight: 600;
    color: #888;
    white-space: nowrap;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}

.bc-rail-item:hover {
    color: #ec7400;
}

.bc-rail-item.active {
    color: #ec7400;
    border-bottom-color: #ec7400;
}

/* Every control on this shelf is a <button> with its border removed, so a click leaves the
   browser's own focus ring behind — a hard black rectangle sitting over an orange-and-white bar.

   Replaced rather than removed: a keyboard user still has to be able to see where they are. The
   ring is suppressed only for the pointer case, and redrawn in the brand orange for :focus-visible,
   which is what a Tab press produces.

   Ordered so :focus-visible comes FIRST and the suppression second. A browser too old to know
   :focus-visible discards both rules as invalid and keeps its default ring — visually worse, but
   still usable. Writing `:focus { outline: none }` on its own would leave those browsers with no
   focus indicator at all. */
.bc-rail-item:focus-visible,
.bc-sec-chip:focus-visible,
.bc-sec-more:focus-visible {
    outline: 2px solid #ec7400;
    outline-offset: -2px;
    border-radius: 4px;
}

.bc-rail-item:focus:not(:focus-visible),
.bc-sec-chip:focus:not(:focus-visible),
.bc-sec-more:focus:not(:focus-visible) {
    outline: none;
}

/* Section. No card wrapper: with nothing left to expand, the white .bc-menu-card border was
   chrome around nothing, and a white card holding white product cards fights them for
   attention. The product cards are the only things raised off the page now. */
.bc-sec {
    margin-bottom: 6px;
}

.bc-sec-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px 6px 8px;
}

.bc-sec-head {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Content width, not a share of the row: the title and its count read as one thing, and
       whatever is left over belongs to the chips. */
    flex: 0 1 auto;
    min-width: 0;
}

.bc-sec-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}

.bc-sec-name {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Own row on phones, inline beside the title once there is width for it. */
.bc-sec-chips {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    flex: 1 1 100%;
    /* Without this a flex item refuses to shrink below its content width, so the row would push
       the section wider instead of scrolling inside itself. */
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
}

.bc-sec-chips::-webkit-scrollbar {
    display: none;
}

.bc-sec-body {
    padding: 0 6px;
}

.bc-sec-more-wrap {
    display: flex;
    justify-content: center;
    padding: 12px 0 4px;
}

.bc-sec-more {
    border: 1.5px solid #ec7400;
    background: #fff;
    color: #ec7400;
    border-radius: 8px;
    padding: 7px 20px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, color .2s;
}

.bc-sec-more:hover {
    background: #ec7400;
    color: #fff;
}

/* Skeleton. Holds the exact height a real card will occupy so nothing below jumps when the
   products land — the whole point of hydrating a section before it is scrolled to. */
.bc-sk-card {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #F0E8E0;
    overflow: hidden;
}

.bc-sk-img {
    width: 100%;
    aspect-ratio: 4/3;
    background: #f4eee8;
}

.bc-sk-lines {
    padding: 8px 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bc-sk-line {
    height: 9px;
    border-radius: 4px;
    background: #efe7df;
    animation: bcSkPulse 1.4s ease-in-out infinite;
}

.bc-sk-btn {
    height: 22px;
    width: 100%;
    border-radius: 6px;
    margin-top: 2px;
}

@keyframes bcSkPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .45; }
}

@media (prefers-reduced-motion: reduce) {
    .bc-sk-line { animation: none; }
}

@media (min-width: 993px) {
    /* Beside the section title once there is room, filling whatever the title leaves.

       NOT justify-content: flex-end. On a container that scrolls, end-alignment pushes the
       overflow out past the START edge, and no browser lets you scroll back to it — the row
       opens mid-chip with the first categories permanently out of reach. Growing from the left
       keeps every chip reachable. */
    .bc-sec-chips {
        flex: 1 1 auto;
        /* And they WRAP here rather than scroll. The horizontal scroll that suits a phone is a
           dead end with a mouse: the scrollbar is hidden on this page by design and there are no
           arrows, so anything past the right edge cannot be reached at all. With this much width
           a second line costs nothing and every category stays clickable. */
        flex-wrap: wrap;
        overflow-x: visible;
        row-gap: 6px;
    }
}

@media (max-width: 576px) {
    .bc-sec-top {
        padding: 10px 6px 8px;
    }

    .bc-sec-name {
        font-size: 15px;
    }

    .bc-sec-body {
        padding: 0 6px;
    }

    .bc-rail-item {
        font-size: 12.5px;
    }
}

/* ═══════════════════════════════════════════════════════
   ORDER SUMMARY (os-) — _Create.cshtml partial
   ═══════════════════════════════════════════════════════ */

.ct-summary-panel {
    position: sticky;
    top: 1rem;
}

.ct-summary-body {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 16px rgba(0,0,0,.07);
    overflow: hidden;
}

/* Panel header */
.os-panel-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .85rem 1.25rem;
    background: linear-gradient(135deg, #ec7400, #f59e3f);
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
}

.os-panel-header-icon {
    font-size: .9rem;
    opacity: .9;
}

.os-panel-content {
    padding: 1.25rem 1.25rem .85rem;
}

/* Order type */
.os-order-type {
    margin-bottom: 1rem;
}

.os-label {
    font-weight: 600;
    font-size: .82rem;
    color: #555;
    display: block;
    margin-bottom: .35rem;
}

.os-label-icon {
    color: #ec7400;
    margin-right: .35rem;
    font-size: .78rem;
}

.os-section-label {
    font-weight: 600;
    font-size: .82rem;
    color: #555;
    margin-bottom: .4rem;
}

.ct-order-select {
    width: 100%;
    padding: .5rem .65rem;
    border: 1.5px solid #eee;
    border-radius: 8px;
    font-size: .88rem;
    background: #fafafa;
    transition: all .2s;
    color: #333;
}

.ct-order-select:focus {
    border-color: #ec7400;
    outline: none;
    box-shadow: 0 0 0 3px rgba(236,116,0,.12);
    background: #fff;
}

/* Summary lines */
.os-summary {
    background: #fafafa;
    border-radius: 10px;
    padding: .85rem 1rem;
    margin-bottom: 1rem;
}

.os-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .35rem 0;
    font-size: .88rem;
    color: #555;
}

.os-amount {
    font-weight: 600;
    color: #333;
}

.os-item-count {
    color: #999;
    font-size: .8rem;
    font-weight: 400;
}

.os-line.os-muted {
    color: #aaa;
}

.os-line.os-sub {
    padding-left: .5rem;
    font-size: .8rem;
    color: #777;
}

.os-sub-icon {
    color: #ccc;
    font-size: .68rem;
    margin-right: .3rem;
}

.os-line.os-discount {
    color: #28a745;
    font-weight: 500;
    font-size: .82rem;
}

.os-discount-icon {
    margin-right: .3rem;
    font-size: .72rem;
}

.os-badge-self {
    font-size: .72rem;
    background: #e9ecef;
    color: #888;
    padding: .1rem .45rem;
    border-radius: 4px;
    font-weight: 500;
}

.os-badge-free {
    font-size: .72rem;
    background: #d4edda;
    color: #155724;
    padding: .1rem .45rem;
    border-radius: 4px;
    font-weight: 600;
}

.os-free-unlocked span {
    color: #155724;
    font-size: 12px;
    font-weight: 600;
}

.os-line.os-total {
    font-size: 1.05rem;
    font-weight: 700;
    color: #ec7400;
    padding-top: .5rem;
}

/* GST is inclusive (subtotal * 3/23) and is never added into TotalPrice — see the comment in
   Views/Order/_Create.cshtml. Muted and tagged so it stops reading as an additive charge that
   the Total fails to account for. */
.os-line-gst {
    font-size: .82rem;
    color: #999;
}

.os-gst-tag {
    display: inline-block;
    margin-left: .3rem;
    padding: .05rem .35rem;
    border-radius: 3px;
    background: #f1f3f5;
    color: #868e96;
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    vertical-align: 1px;
}

.os-gst-amount {
    font-weight: 500;
    color: #999;
}

.os-divider {
    border: none;
    border-top: 1.5px dashed #e0e0e0;
    margin: .4rem 0;
}

/* ── CRO Priority 9 — Free-delivery progress bar ── */
.os-free-progress {
    margin: .5rem 0 .15rem;
    padding-left: .5rem;
}

.os-free-progress-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    margin-bottom: .35rem;
}

.os-free-progress-label {
    font-size: .8rem;
    color: #555;
    line-height: 1.25;
}

    .os-free-progress-label i {
        color: #ec7400;
        font-size: .72rem;
        margin-right: .35rem;
    }

    .os-free-progress-label strong {
        color: #333;
        font-weight: 700;
    }

.os-free-progress-save {
    flex: none;
    font-size: .7rem;
    font-weight: 700;
    color: #155724;
    background: #d4edda;
    padding: .12rem .45rem;
    border-radius: 4px;
    white-space: nowrap;
}

.os-free-progress-track {
    height: 8px;
    background: #efe7df;
    border-radius: 999px;
    overflow: hidden;
}

.os-free-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #ec7400, #f59e3f);
    transition: width .4s ease;
}

/* ── CRO step 1 — reward nudge text lift (out of grey-noise, brand icon + bold values) ── */
.os-line.os-reward {
    color: #555;
}

.os-reward-icon {
    color: #ec7400;
    font-size: .72rem;
    margin-right: .3rem;
}

.os-line.os-reward strong {
    color: #333;
    font-weight: 700;
}

/* ── CRO step 2 — slim SUBORDINATE reward bar (thinner + flat muted tone, so it never
      competes with the free-delivery hero bar; shown only when that bar is absent) ── */
.os-reward-progress {
    margin: .1rem 0 .4rem;
    padding-left: .5rem;
}

.os-reward-progress-track {
    height: 5px;
    background: #eee;
    border-radius: 999px;
    overflow: hidden;
}

.os-reward-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: #f0a860;
    transition: width .4s ease;
}

/* ── CRO Priority 8 — Trust & benefits strip ── */
.os-trust {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .9rem;
    margin: 0 0 1rem;
    padding: 0 .25rem;
}

.os-trust-item {
    display: inline-flex;
    align-items: center;
    font-size: .74rem;
    color: #666;
    font-weight: 500;
    white-space: nowrap;
}

    .os-trust-item i {
        color: #ec7400;
        font-size: .72rem;
        margin-right: .35rem;
    }

/* Coupon section */
.os-coupon-section {
    border: 1.5px dashed #f5d5a8;
    border-radius: 10px;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    background: #fffaf5;
}

.os-coupon-toggle {
    display: flex;
    align-items: center;
    color: #ec7400;
    font-weight: 600;
    font-size: .85rem;
    text-decoration: none;
}

.os-coupon-tag-icon {
    margin-right: .3rem;
}

.os-coupon-toggle:hover {
    color: #d46800;
    text-decoration: none;
}

.os-chevron {
    transition: transform .2s;
    font-size: .7rem;
}

.os-chevron-open {
    transform: rotate(180deg);
}

.os-coupon-body {
    padding-top: .75rem;
}

.os-coupon-input-row {
    display: flex;
    gap: .5rem;
}

.os-coupon-input {
    flex: 1;
    padding: .4rem .65rem;
    border: 1.5px solid #eee;
    border-radius: 8px;
    font-size: .85rem;
    transition: border-color .2s;
    background: #fff;
}

.os-coupon-input:focus {
    border-color: #ec7400;
    outline: none;
    box-shadow: 0 0 0 3px rgba(236,116,0,.1);
}

.os-apply-btn {
    background: #ec7400;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: .4rem 1rem;
    font-weight: 600;
    font-size: .85rem;
    white-space: nowrap;
    transition: all .2s;
}

.os-apply-btn:hover {
    background: #d46800;
    color: #fff;
    transform: translateY(-1px);
}

.os-coupon-status {
    margin-top: .5rem;
    font-size: .82rem;
    color: #28a745;
    font-weight: 500;
}

.os-coupon-store-select label {
    font-size: .8rem;
}

/* Delivery address */
.os-address-box {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;
}

.os-address-text {
    font-size: .85rem;
    color: #333;
    flex: 1;
    min-width: 0;
}

.os-address-change-btn {
    background: #fef5eb;
    color: #ec7400;
    border: 1px solid #f5d5a8;
    border-radius: 6px;
    padding: .25rem .65rem;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
}

.os-address-change-btn:hover {
    background: #ec7400;
    color: #fff;
    border-color: #ec7400;
}

.os-address-input {
    width: 100%;
    padding: .45rem .65rem;
    border: 1.5px solid #eee;
    border-radius: 8px;
    font-size: .85rem;
    transition: border-color .2s;
}

.os-address-input:focus {
    border-color: #ec7400;
    outline: none;
    box-shadow: 0 0 0 3px rgba(236,116,0,.1);
}

.os-address-warn {
    font-size: .78rem;
    color: #dc3545;
    display: block;
    margin-top: .25rem;
}

/* Note section */
.os-note-section {
    margin-bottom: .5rem;
}

.os-note-input {
    width: 100%;
    padding: .5rem .65rem;
    border: 1.5px solid #eee;
    border-radius: 8px;
    font-size: .85rem;
    resize: vertical;
    transition: border-color .2s;
    background: #fafafa;
}

.os-note-input:focus {
    border-color: #ec7400;
    outline: none;
    box-shadow: 0 0 0 3px rgba(236,116,0,.1);
    background: #fff;
}

/* Pay button */
.ct-pay-btn {
    display: block;
    width: calc(100% - 2rem);
    padding: .75rem;
    margin: 0 1rem;
    background: linear-gradient(135deg, #ec7400, #f59e3f);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    cursor: pointer;
    transition: all .3s;
    text-align: center;
}

.ct-pay-btn:hover {
    background: linear-gradient(135deg, #d46800, #ec7400);
    box-shadow: 0 4px 16px rgba(236,116,0,.35);
}

.ct-pay-btn.ct-pay-disabled {
    background: #bbb;
    box-shadow: none;
    cursor: not-allowed;
}

.ct-pay-btn.ct-pay-disabled:hover {
    background: #bbb;
    box-shadow: none;
}

/* Bank Payment button */
.ct-payment-divider {
    display: flex;
    align-items: center;
    padding: 0 1.25rem;
    margin: .5rem 0;
}

.ct-payment-divider::before,
.ct-payment-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #ddd;
}

.ct-payment-divider span {
    padding: 0 .75rem;
    color: #999;
    font-size: .8rem;
    font-weight: 500;
    text-transform: uppercase;
}

.ct-bank-pay-btn {
    display: block;
    width: calc(100% - 2rem);
    padding: .75rem;
    margin: 0 1rem;
    background: linear-gradient(135deg, #ec7400, #f59e3f);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    cursor: pointer;
    transition: all .3s;
    text-align: center;
}

.ct-bank-pay-btn:hover {
    background: linear-gradient(135deg, #d46800, #ec7400);
    box-shadow: 0 4px 16px rgba(236,116,0,.35);
}

.ct-bank-pay-btn.ct-pay-disabled {
    background: #bbb;
    box-shadow: none;
    cursor: not-allowed;
}

.ct-bank-pay-btn.ct-pay-disabled:hover {
    background: #bbb;
    box-shadow: none;
}

.ct-pay-note {
    text-align: center;
    font-size: .78rem;
    color: #dc3545;
    margin-top: .5rem;
    padding: 0 1.25rem .75rem;
}

/* Reassurance line under each pay button — tells the customer where they're headed
   (reduces hesitation when the external gateway page opens). Muted, hugs the button. */
.ct-pay-method-note {
    text-align: center;
    font-size: .74rem;
    color: #7a7a7a;
    padding: 0 1.25rem;
    line-height: 1.3;
}

    .ct-pay-method-note i {
        color: #9aa0a6;
        margin-right: .4rem;
    }

/* Login section */
.ct-login-msg {
    text-align: center;
    color: #888;
    font-size: .85rem;
    padding: 0 1.25rem;
    margin-bottom: .5rem;
}

.ct-login-btn {
    display: block;
    width: 100%;
    padding: .85rem;
    background: linear-gradient(135deg, #ec7400, #f59e3f);
    color: #fff;
    border: none;
    border-radius: 0 0 14px 14px;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: all .3s;
}

.ct-login-btn:hover {
    background: linear-gradient(135deg, #d46800, #ec7400);
    color: #fff;
    text-decoration: none;
}

/* ═══════════════════════════════════════════════════════
   NEW DELIVERY ADDRESS MODAL (nda-)
   ═══════════════════════════════════════════════════════ */

.nda-modal {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.15);
    border: none;
    padding: 0;
}

.nda-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.5rem;
    background: linear-gradient(135deg, #ec7400, #f59e3f);
    color: #fff;
}

.nda-header-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.nda-header-icon {
    font-size: 1.15rem;
}

.nda-close-btn {
    background: rgba(255,255,255,.2);
    border: none;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    cursor: pointer;
    transition: background .2s;
}

.nda-close-btn:hover {
    background: rgba(255,255,255,.35);
}

.nda-body {
    padding: 1.5rem 1.5rem 1rem;
}

.nda-field {
    margin-bottom: 1rem;
}

.nda-label {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    color: #555;
    margin-bottom: .35rem;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.nda-label-icon {
    color: #ec7400;
    font-size: .75rem;
    margin-right: 2px;
}

.nda-input {
    width: 100%;
    padding: .65rem .9rem;
    font-size: .92rem;
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    background: #fff;
    color: #333;
    transition: border-color .2s, box-shadow .2s;
    outline: none;
}

.nda-input:focus {
    border-color: #ec7400;
    box-shadow: 0 0 0 3px rgba(236,116,0,.1);
}

.nda-input-search {
    background: #fafafa;
    border-style: dashed;
    border-color: #ccc;
}

.nda-input-search:focus {
    background: #fff;
    border-style: solid;
    border-color: #ec7400;
}

.nda-input-readonly {
    background: #f7f7f7;
    color: #555;
    cursor: default;
}

.nda-row {
    display: flex;
    gap: 1rem;
}

.nda-half {
    flex: 1;
}

.nda-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .75rem;
    padding: 1rem 1.5rem;
    background: #fafafa;
    border-top: 1px solid #f0f0f0;
}

.nda-btn-cancel {
    padding: .55rem 1.3rem;
    font-size: .88rem;
    font-weight: 500;
    color: #666;
    background: #fff;
    border: 1.5px solid #ddd;
    border-radius: 10px;
    cursor: pointer;
    transition: all .2s;
}

.nda-btn-cancel:hover {
    background: #f5f5f5;
    border-color: #ccc;
    color: #333;
}

.nda-btn-save {
    padding: .55rem 1.5rem;
    font-size: .88rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #ec7400, #f59e3f);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all .2s;
    box-shadow: 0 2px 8px rgba(236,116,0,.25);
}

.nda-btn-save:hover {
    background: linear-gradient(135deg, #d56800, #ec7400);
    box-shadow: 0 4px 14px rgba(236,116,0,.35);
    transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════
   CART PAGE (ct-) — Details.cshtml
   ═══════════════════════════════════════════════════════ */

.ct-page {
    background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
    min-height: 70vh;
    padding: 1.5rem 0;
    padding-top: 0.50rem !important;
}

.ct-back-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: #888;
    font-size: .85rem;
    text-decoration: none;
    margin: 0.50rem;
    padding: 0;
    line-height: 1;
    transition: color .2s;
}

.ct-back-link:hover {
    color: #ec7400;
    text-decoration: none;
}

.ct-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 1.5rem;
    align-items: start;
}

/* Flat list card */
.ct-list-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    overflow: hidden;
}

.ct-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .85rem 1.25rem;
    border-bottom: 2px solid #fef5eb;
}

.ct-list-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #333;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.ct-list-title-icon {
    color: #ec7400;
    font-size: .95rem;
}

/* .ct-list-count removed with the count pill it styled — the cart list header now carries the
   title only, and "Subtotal (N items)" in the summary is the page's single item count. */

/* Cart item card */
.ct-item {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #f0f0f0;
    transition: background .15s;
}

.ct-item:last-child {
    border-bottom: none;
}

.ct-item:hover {
    background: #fffaf5;
}

.ct-item.ct-item-oos {
    background: rgba(248,215,218,.15);
    border-left: 3px solid #dc3545;
}

.ct-item-img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #eee;
    flex-shrink: 0;
    transition: border-color .2s;
}

.ct-item:hover .ct-item-img:not(.ct-img-oos) {
    border-color: #f5d5a8;
}

.ct-item-img.ct-img-oos {
    opacity: .45;
    filter: grayscale(50%);
}

.ct-item-body {
    flex: 1;
    min-width: 0;
}

.ct-item-name {
    font-weight: 600;
    color: #212529;
    font-size: .95rem;
    margin-bottom: .2rem;
}

.ct-item-name.ct-text-oos {
    color: #999;
    text-decoration: line-through;
}

.ct-item-sold-by {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    color: #777;
    margin-bottom: .35rem;
}

.ct-sold-by-icon {
    color: #999;
    font-size: .7rem;
}

.ct-item-variations {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-bottom: .3rem;
}

.ct-item-var {
    background: #fef5eb;
    padding: .15rem .5rem;
    border-radius: 4px;
    font-size: .75rem;
    color: #b85e00;
    border: 1px solid #f5d5a8;
}

.ct-booking-date {
    font-size: .78rem;
    color: #6c757d;
    font-style: italic;
    margin-bottom: .3rem;
}

/* Stock messages */
.ct-stock-msg {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .55rem;
    border-radius: 5px;
    font-size: .75rem;
    font-weight: 500;
    margin-top: .25rem;
}

.ct-stock-oos {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.ct-stock-low {
    background: #fff3cd;
    color: #856404;
}

.ct-stock-adj {
    background: #d1ecf1;
    color: #0c5460;
}

.ct-svc-warn {
    background: #fff3cd;
    color: #856404;
    font-size: .75rem;
    padding: .2rem .5rem;
    border-radius: 4px;
    margin-top: .25rem;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

/* Quantity + price row */
.ct-item-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: .5rem;
}

.ct-qty {
    display: flex;
    align-items: center;
    gap: 0;
}

.ct-qty-btn {
    background: #fff;
    border: 1px solid #dee2e6;
    color: #495057;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    cursor: pointer;
    transition: all .15s;
    padding: 0;
}

.ct-qty-btn:first-child {
    border-radius: 6px 0 0 6px;
}

.ct-qty-btn:last-child {
    border-radius: 0 6px 6px 0;
}

.ct-qty-btn:hover:not(:disabled) {
    background: #fef5eb;
    border-color: #ec7400;
    color: #ec7400;
}

.ct-qty-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.ct-qty-val {
    width: 40px;
    height: 32px;
    text-align: center;
    font-weight: 600;
    border: 1px solid #dee2e6;
    border-left: none;
    border-right: none;
    background: #f8f9fa;
    font-size: .85rem;
}

.ct-item-price {
    font-weight: 700;
    font-size: .95rem;
    color: #ec7400;
}

.ct-item-price.ct-price-oos {
    color: #999;
    text-decoration: line-through;
    font-weight: 500;
}

.ct-remove-btn {
    background: transparent;
    border: none;
    color: #aaa;
    font-size: .9rem;
    cursor: pointer;
    padding: .35rem;
    border-radius: 6px;
    transition: all .2s;
    margin-left: .5rem;
}

.ct-remove-btn:hover {
    color: #dc3545;
    background: rgba(220,53,69,.08);
}

.ct-remove-oos {
    color: #dc3545;
    background: rgba(220,53,69,.08);
}

/* Empty cart */
.ct-empty {
    text-align: center;
    padding: 4rem 2rem;
    background: #fff;
    border-radius: 15px;
    margin: 2rem auto;
    max-width: 420px;
    box-shadow: 0 4px 15px rgba(0,0,0,.08);
}

.ct-empty-icon {
    width: 80px;
    height: 80px;
    background: #f0f0f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2rem;
    color: #ccc;
}

.ct-empty h2 {
    color: #888;
    font-weight: 400;
    margin-bottom: 1.5rem;
    font-size: 1.3rem;
}

.ct-empty-btn {
    display: inline-block;
    padding: .7rem 1.5rem;
    background: #ec7400;
    color: #fff;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    transition: all .3s;
}

.ct-empty-btn:hover {
    background: #d46800;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 992px) {
    .ct-grid {
        grid-template-columns: 1fr;
    }

    .ct-summary-panel {
        position: static;
    }
}

/* ── Mobile cart list — compact row (CRO) ──
   The cart is a review-and-confirm screen, not a discovery screen: the customer has already
   chosen these products and does not need to be re-sold them. Two overlapping mobile blocks
   used to live here (a 576px one and a 575px one that overrode it with !important) and between
   them they stacked every line into a full-width card with a 200px image — roughly 330px per
   item. An eight-item basket ran ~2,600px, about three screens of items before the Order
   Summary even started, and pushed the pay button ~4,000px down the page.

   Keeping the desktop row (image left, body right) is what Swiggy, Blinkit, JioMart and Amazon
   all do on mobile for exactly this reason; it brings the same basket to roughly 850px. The
   200px `object-fit: contain` image was also rendering packaged goods as a small label adrift
   in white space next to full-bleed lifestyle shots, so the list read as visually inconsistent;
   a 64px cover tile normalises that.

   No !important anywhere: these rules share the specificity of the base .ct-* rules above and
   simply win on source order, which is how the cascade is supposed to settle this. */
@media (max-width: 576px) {
    .ct-item {
        flex-direction: row;
        align-items: flex-start;
        gap: 12px;
        padding: 12px;
    }

    .ct-item-img {
        width: 64px;
        height: 64px;
        object-fit: cover;
        border-radius: 8px;
        flex-shrink: 0;
    }

    /* .ct-item-body needs no override — the base rule already carries flex:1 and min-width:0,
       which is exactly what the row layout wants. The width:100% the old stacked block forced
       on it here is deliberately NOT carried over: alongside a 64px image it would overflow
       the row rather than share it. */

    /* Clamp to two lines. Grocery names in this catalogue run long
       ("BEYOND SNACKS HOT&SWEET CHILLI BANANA CHIPS 100G") and left to wrap freely they give
       back the row height this layout exists to save. */
    .ct-item-name {
        font-size: 14px;
        font-weight: 600;
        line-height: 1.3;
        margin-bottom: 3px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .ct-item-sold-by {
        font-size: .72rem;
        margin-bottom: 2px;
    }

    .ct-item-var {
        font-size: .68rem;
        padding: .1rem .4rem;
    }

    /* Left as wrap, not nowrap. The three zones fit comfortably at every realistic width — at
       360px the body column is 260px against ~208px of content — but a four-figure line total
       on a 320px phone would overflow, and an overflowing row scrolls sideways whereas a wrapped
       one just puts price and remove on a second line. The margin-left:auto below means the
       one-line case still lays out identically. */
    .ct-item-footer {
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 8px;
    }

    /* Pushes price and the remove button together on the right, leaving the stepper alone on
       the left. Keeping the trash icon away from the "−" button matters at this density —
       they are 8px apart and one of them is destructive with no undo. */
    .ct-item-price {
        margin-left: auto;
        font-size: 15px;
        font-weight: 700;
    }

    /* Row height comes down, tap targets do not. */
    .ct-qty-btn {
        width: 34px;
        height: 34px;
        font-size: 13px;
    }

    .ct-qty-val {
        width: 38px;
        height: 34px;
        font-size: 14px;
    }

    .ct-remove-btn {
        width: 34px;
        height: 34px;
        font-size: 15px;
        margin-left: 0;
    }

    .ct-summary-panel {
        width: 100%;
    }
}

/* ── Sticky mobile checkout bar (cart page) ──
   Markup: Views/Basket/Details.cshtml. Behaviour: wwwroot/js/cart-checkout-bar.js.

   Breakpoint is 992px, matching the .ct-grid collapse above — that is the width at which the
   summary panel stops sitting beside the item list and drops to the bottom of the page, which
   is the whole reason this bar exists.

   Hidden by default and only revealed inside the media query, so a desktop viewport never
   pays for it even for the frame before the JS runs. */
.d2s-checkout-bar {
    display: none;
}

/* ── Where a "jump to pay" scroll parks the page ──
   scrollIntoView aligns an element's MARGIN box, which is what scroll-margin exists to adjust.
   Both callers below align to the END of the last pay CTA, so without an inset the button sits
   flush against the bottom edge and the "Secure card payment powered by Stripe" note under it
   falls below the fold.

   NOT inside the 992px media query, because the two callers do not share a breakpoint:

     - cart-checkout-bar.js (mobile only) — 88px matches its CLEARANCE_PX, the distance from the
       bottom at which the bar decides a CTA is visible and stands down. Same number both sides
       means the scroll comes to rest just past that boundary, so the bar is guaranteed to have
       got out of the way rather than covering what it just scrolled to.
     - landOnPay() in Views/Basket/Details.cshtml (ALL widths) — the post-OTP-verify landing.
       There is no bar on desktop, so there the 88px is simply the room the note needs. */
#payByBankButton,
#submitButton,
.ct-pay-btn {
    scroll-margin-bottom: 88px;
}

/* The guest identity card is aligned to its TOP instead (block:'start' — it is a form, not a
   button), so it only needs a gap above it. There is no fixed header on this page; this is
   breathing room, not clearance. */
#checkoutIdentity {
    scroll-margin-top: 16px;
}

@media (max-width: 992px) {
    .d2s-checkout-bar {
        display: flex;
        align-items: center;
        gap: 12px;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 900;
        padding: 10px 14px;
        background: #fff;
        border-top: 1px solid #eee;
        box-shadow: 0 -6px 20px rgba(0,0,0,.12);
        transform: translateY(110%);
        transition: transform .25s cubic-bezier(.2,.8,.3,1);
    }

    .d2s-checkout-bar[hidden] {
        display: none;
    }

    .d2s-checkout-bar.is-visible {
        transform: translateY(0);
    }

    .d2s-checkout-bar-info {
        display: flex;
        flex-direction: column;
        min-width: 0;
        line-height: 1.25;
    }

    /* The amount is the hero of the left column — it is the single figure the customer is
       deciding on. nowrap because a wrapped price is unreadable; it never needs to wrap since
       the sub-line beneath it is the one that truncates. */
    .d2s-checkout-bar-amount {
        font-size: 17px;
        font-weight: 800;
        color: #212529;
        white-space: nowrap;
    }

    .d2s-checkout-bar-sub {
        font-size: 11.5px;
        color: #777;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* A flex item's min-width defaults to auto, and nowrap makes that the full text width, so
       this button does NOT in fact shrink — the info column absorbs the squeeze instead, which
       is what min-width:0 plus the ellipsis on the sub-line above are there to make graceful. */
    .d2s-checkout-bar-btn {
        margin-left: auto;
        flex: 0 0 auto;
        /* Hard cap so the button can never squeeze the amount out of the info column. Without
           it, the longer blocked-state label on a 320px screen leaves the left column ~64px for
           a price that needs ~85px, and the amount overflows onto the button. */
        max-width: 62%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        padding: 12px 16px;
        border: none;
        border-radius: 999px;
        background: #ec7400;
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        white-space: nowrap;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .d2s-checkout-bar-btn:active {
        background: #d16800;
    }

    /* The UA default focus ring is low contrast on an orange fill; keyboard users get an
       explicit one. :focus-visible so it never fires on touch or mouse. */
    .d2s-checkout-bar-btn:focus-visible {
        outline: 3px solid #212529;
        outline-offset: 2px;
    }

    .d2s-checkout-bar-chevron {
        flex: 0 0 auto;
        margin-left: 6px;
    }

    /* Blocked: grey, and the label is a phrase rather than a word, so it drops a size and is
       allowed to wrap. Wrapping inside the max-width cap above is what keeps it from pushing
       into the amount on the narrowest screens — the button grows a line instead. */
    .d2s-checkout-bar[data-blocked="true"] .d2s-checkout-bar-btn {
        background: #adb5bd;
        font-size: 13px;
        white-space: normal;
        line-height: 1.2;
    }

    /* Reserved space goes on the footer, not the body: padding on a white body below a dark
       footer renders as a mismatched band at the end of the scroll. Putting it inside the
       footer means the space always adopts whatever background the footer itself has.

       Keyed off the body class so the space disappears WITH the bar — same convention as the
       "View cart" pill below. That coupling is the point, not an oversight: the bar hides as
       soon as the pay buttons come into view, which is always before you reach the bottom of
       the page, so a reserve that outlived the bar would just be 84px of empty footer under
       nothing. It survives where it is actually needed — the blocked state, where the bar is
       anchored to an out-of-stock row further up and stays visible all the way down. */
    body.d2s-has-checkout-bar #footer {
        padding-bottom: 84px;
    }

    /* Add-to-cart toasts default to the bottom of the viewport at z-index 99999 and would land
       on top of the bar. Same fix as the sticky "View cart" pill. */
    body.d2s-has-checkout-bar .alertify-notifier.ajs-bottom {
        bottom: 84px;
    }

    body.d2s-has-checkout-bar #toast-container.toast-bottom-center,
    body.d2s-has-checkout-bar #toast-container.toast-bottom-right,
    body.d2s-has-checkout-bar #toast-container.toast-bottom-left {
        bottom: 84px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .d2s-checkout-bar {
        transition: none;
    }
}

/* ─── Delivery Promo Band ─── */
.delivery-promo-band {
    background: #fff7ed;
    border-top: 1px solid #fed7aa;
    border-bottom: 1px solid #fed7aa;
    padding: 10px 0;
    margin: 12px 0;
}

.delivery-promo-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    row-gap: 6px;
    column-gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

.delivery-promo-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #374151;
}

.delivery-promo-item strong {
    color: #ec7400;
    font-weight: 700;
}

.delivery-promo-ic {
    font-size: 16px;
    color: #ec7400;
    flex-shrink: 0;
}

@media (max-width: 576px) {
    .delivery-promo-inner {
        column-gap: 14px;
    }

    .delivery-promo-item {
        font-size: 12px;
        gap: 5px;
    }

    .delivery-promo-ic {
        font-size: 13px;
    }
}

/* Worldline Online EFTPOS — Pay by Bank button (independent of Windcave) */
.ct-pay-by-bank-btn {
    display: block;
    width: calc(100% - 2rem);
    padding: .75rem;
    margin: 0 1rem .75rem;
    background: #fff;
    color: #00529b;
    border: 2px solid #00529b;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    cursor: pointer;
    transition: all .3s;
    text-align: center;
}

.ct-pay-by-bank-btn:hover {
    background: #00529b;
    color: #fff;
    box-shadow: 0 4px 16px rgba(0,82,155,.25);
}

.ct-pay-by-bank-btn.ct-pay-disabled {
    background: #f3f3f3;
    color: #999;
    border-color: #ccc;
    box-shadow: none;
    cursor: not-allowed;
}

/* ==========================================================================
   My Rewards page (Views/Wallet/Index.cshtml)
   Brand orange #ec7400 (hover #D15A1F) — matched to existing site styles.
   ========================================================================== */

.rw-page {
    padding: 32px 15px;
    max-width: 960px;
}

.rw-page-header {
    margin-bottom: 24px;
}

.rw-page-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 4px;
    color: #1a1a1a;
}

.rw-page-header .rw-subtitle {
    color: #6b7280;
    font-size: 0.95rem;
    margin: 0;
}

/* Balance hero card — gradient brand orange with subtle decorative circles */
.rw-balance-card {
    background: linear-gradient(135deg, #ec7400 0%, #b35900 100%);
    color: #fff;
    border-radius: 16px;
    padding: 28px 32px;
    box-shadow: 0 8px 24px rgba(236, 116, 0, 0.25);
    position: relative;
    overflow: hidden;
    margin-bottom: 28px;
}

.rw-balance-card::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
}

.rw-balance-card::after {
    content: '';
    position: absolute;
    bottom: -60px;
    right: 60px;
    width: 140px;
    height: 140px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50%;
}

.rw-balance-label {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    opacity: 0.9;
    margin-bottom: 8px;
    font-weight: 600;
    position: relative;
    z-index: 1;
}

.rw-balance-amount {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 6px;
    position: relative;
    z-index: 1;
    color: #fff;
}

.rw-balance-amount .rw-currency {
    font-size: 1rem;
    font-weight: 500;
    margin-left: 8px;
    opacity: 0.85;
}

.rw-balance-expiry {
    margin: 16px 0 0;
    font-size: 0.9rem;
    opacity: 0.95;
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.15);
    padding: 8px 14px;
    border-radius: 8px;
    display: inline-block;
}

.rw-balance-expiry i {
    margin-right: 6px;
}

/* Three explainer pills below the balance card */
.rw-info-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 32px;
}

.rw-info-pill {
    background: #fff8f3;
    border: 1px solid #fde0cc;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.rw-info-icon {
    flex: 0 0 36px;
    height: 36px;
    width: 36px;
    border-radius: 10px;
    background: #ec7400;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.rw-info-text {
    font-size: 0.85rem;
    color: #4b4b4b;
    line-height: 1.4;
}

.rw-info-text strong {
    color: #1a1a1a;
    display: block;
    margin-bottom: 2px;
    font-size: 0.95rem;
}

/* Activity section header */
.rw-activity-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 16px;
}

.rw-activity-header h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    color: #1a1a1a;
}

.rw-activity-count {
    color: #6b7280;
    font-size: 0.9rem;
}

/* Empty state for first-time users */
.rw-empty {
    background: #fff8f3;
    border: 2px dashed #fde0cc;
    border-radius: 12px;
    padding: 40px 24px;
    text-align: center;
}

.rw-empty-icon {
    font-size: 2.5rem;
    color: #ec7400;
    margin-bottom: 12px;
    opacity: 0.7;
}

.rw-empty p {
    margin: 0;
    color: #6b7280;
    font-size: 0.95rem;
}

/* Activity table — clean rounded borders, subtle hover */
.rw-activity-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    overflow: hidden;
}

.rw-activity-table thead {
    background: #fafafa;
}

.rw-activity-table th {
    text-align: left;
    padding: 14px 16px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    font-weight: 600;
    border-bottom: 1px solid #e9ecef;
}

.rw-activity-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #f1f3f5;
    font-size: 0.95rem;
    vertical-align: middle;
    color: #2b2b2b;
}

.rw-activity-table tbody tr:last-child td {
    border-bottom: none;
}

.rw-activity-table tbody tr:hover {
    background: #fffaf5;
}

.rw-order-link {
    color: #ec7400;
    font-weight: 600;
    text-decoration: none;
}

.rw-order-link:hover {
    color: #b35900;
    text-decoration: underline;
}

.rw-muted {
    color: #9aa0a6;
}

/* Type badges — Earned green, Redeemed orange, Expired grey, Reversed indigo */
.rw-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.rw-badge i {
    font-size: 0.75rem;
}

.rw-badge--earned {
    background: #e6f7ed;
    color: #1c7c43;
}

.rw-badge--redeemed {
    background: #fff1e6;
    color: #b85a1d;
}

.rw-badge--expired {
    background: #f1f3f5;
    color: #6b7280;
}

.rw-badge--reversed {
    background: #eef2ff;
    color: #3730a3;
}

/* Amount column — green for credits, orange for debits */
.rw-amount {
    font-weight: 600;
}

.rw-amount--positive {
    color: #1c7c43;
}

.rw-amount--negative {
    color: #b85a1d;
}

/* Pagination — orange theme matching brand */
.rw-pagination {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 20px;
    list-style: none;
    padding: 0;
}

.rw-pagination .page-item .page-link {
    border: 1px solid #e9ecef;
    color: #4b4b4b;
    padding: 8px 14px;
    font-size: 0.9rem;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.15s ease;
    background: #fff;
}

.rw-pagination .page-item .page-link:hover {
    background: #fff8f3;
    border-color: #ec7400;
    color: #ec7400;
}

.rw-pagination .page-item.active .page-link {
    background: #ec7400;
    border-color: #ec7400;
    color: #fff;
    box-shadow: 0 2px 6px rgba(236, 116, 0, 0.3);
}

/* Responsive — pills stack, balance shrinks on mobile */
@media (max-width: 768px) {
    .rw-info-row {
        grid-template-columns: 1fr;
    }

    .rw-balance-amount {
        font-size: 2.25rem;
    }

    .rw-balance-card {
        padding: 24px;
    }

    .rw-activity-table {
        font-size: 0.85rem;
    }

    .rw-activity-table th,
    .rw-activity-table td {
        padding: 10px 12px;
    }

    .rw-page-header h1 {
        font-size: 1.4rem;
    }
}

/* ============================================================================
   Inline one-page checkout identity (CRO) — the mobile → OTP → auto-signed-in
   card embedded in the cart's Order Summary panel (Views/Order/_Create.cshtml).
   On-brand DoorToShop orange (#ec7400) accents; the card matches the panel
   content inset (.os-panel-content = 1.25rem) so it's centered with equal
   left/right space, aligned with the Note / price rows above.
   ============================================================================ */
/* Hidden-input wrapper between Note and the identity card — no visible content,
   so drop the inherited .form-group bottom margin that left dead white space. */
.ct-hidden-fields {
    margin-bottom: 0;
}

.ct-identity {
    padding: 2px 1.25rem 18px;
}

.ct-identity-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    font-size: 1.02rem;
    color: #1f2937;
}

    .ct-identity-header i {
        color: #ec7400;
    }

.ct-identity-sub {
    color: #6b7280;
    font-size: .84rem;
    margin: 4px 0 10px;
}

/* Trust reassurances under the Secure Checkout heading (brand-orange ticks). */
.ci-trust {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .ci-trust li {
        display: flex;
        align-items: center;
        font-size: .8rem;
        color: #4b5563;
    }

        .ci-trust li i {
            color: #ec7400;
            font-size: .72rem;
            margin-right: .45rem;
        }

.ci-label {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    color: #374151;
    margin: 8px 0 4px;
}

.ci-required {
    color: #ec7400;
    font-weight: 700;
}

.ci-input {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: .95rem;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

    .ci-input:focus {
        border-color: #ec7400;
        box-shadow: 0 0 0 3px rgba(236,116,0,.15);
    }

.ci-phone {
    display: flex;
    align-items: stretch;
}

.ci-phone-cc {
    display: flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid #d1d5db;
    border-right: none;
    border-radius: 8px 0 0 8px;
    background: #f9fafb;
    color: #374151;
    font-size: .95rem;
    font-weight: 600;
    white-space: nowrap;
}

.ci-phone-input {
    border-radius: 0 8px 8px 0;
}

.ci-otp-input {
    letter-spacing: .5em;
    text-align: center;
    font-size: 1.15rem;
    font-weight: 600;
}

.ci-btn {
    width: 100%;
    margin: 12px 0 0;
}

.ci-otp-title {
    font-weight: 700;
    margin: 2px 0 2px;
    color: #1f2937;
}

.ci-otp-sub {
    color: #6b7280;
    font-size: .82rem;
    margin: 0 0 6px;
}

/* "Enter the 6-digit code sent to +64 21 234 5678  Change" line on the OTP step. */
.ci-otp-sent {
    color: #374151;
    font-size: .86rem;
    line-height: 1.45;
    margin: 2px 0 12px;
}

    .ci-otp-sent strong {
        color: #1f2937;
    }

    .ci-otp-sent #ci-dest {
        white-space: nowrap;
    }

    .ci-otp-sent #ci-dest-email {
        word-break: break-all;
    }

.ci-hint {
    color: #6b7280;
    font-size: .78rem;
    margin: 2px 0 0;
}

.ci-link {
    display: inline-block;
    margin-top: 10px;
    padding: 0;
    background: none;
    border: none;
    color: #ec7400;
    font-weight: 600;
    font-size: .84rem;
    cursor: pointer;
}

    .ci-link:hover {
        color: #d46800;
        text-decoration: underline;
    }

    .ci-link:disabled {
        color: #9ca3af;
        cursor: default;
        text-decoration: none;
    }

    /* Inline variant used inside the "sent to …" line — no block top margin. */
    .ci-link.ci-inline {
        margin-top: 0;
        margin-left: 6px;
    }

.ci-otp-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Inline per-field validation: red error text directly under its field, red field
   outline, and a green positive note (e.g. "code sent") — never a detached message. */
.ci-err {
    display: block;
    margin: 5px 0 0;
    color: #dc2626;
    font-size: .8rem;
    line-height: 1.3;
}

    .ci-err:empty {
        margin: 0;
    }

.ci-err-block {
    margin-top: 10px;
}

.ci-input-invalid {
    border-color: #dc2626 !important;
}

    .ci-input-invalid:focus {
        box-shadow: 0 0 0 3px rgba(220,38,38,.15) !important;
    }

.ci-note {
    display: block;
    margin: 6px 0 0;
    color: #047857;
    font-size: .82rem;
    line-height: 1.3;
}

    .ci-note:empty {
        margin: 0;
    }

/* ============================================================================
   Sticky mobile cart bar  —  markup in Views/Shared/_StickyCartBar.cshtml,
                              behaviour in wwwroot/js/sticky-cart-bar.js

   A solid brand-coloured pill, floating and centred, shown on every browse page
   once the basket is non-empty. One tap target, chevron affordance.
   ============================================================================ */

/* No `html { scroll-padding-top }` for the slim header, deliberately. It was tried: the browser's
   scroll anchoring picks its anchor from the scroll-padding region, so with it in place the Business
   Category sub-header collapsing (at 40px) made anchoring yank the page back to the top, which
   un-collapsed it, and so on — a visible flicker on every scroll past that point. */

/* Mobile-only. On desktop the route to the cart after scrolling is the slim header
   (_CompactHeader.cshtml), whose cart link sticky-cart-bar.js draws from this bar's own state.

   This comment used to say desktop kept "the sticky header cart (.d2s-header)". It never did:
   .d2s-header is position:sticky inside <header class="header_Menu">, a wrapper exactly its own
   height, so it has no room to stick and scrolls away with the page. */
.d2s-cart-bar {
    display: none;
}

/* Top level, NOT inside the media query below. @keyframes names are global wherever they are
   declared, so nesting bought nothing — and the bundler's CSS parser reports
   "Unexpected token, found '@keyframes'" on at-rules nested inside @media, which fails the build.
   Same reason the 360px media query further down is flat rather than nested. */
@keyframes d2sCartBump {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.04);
    }

    100% {
        transform: scale(1);
    }
}

@media (max-width: 768px) {
    .d2s-cart-bar {
        display: block;
        position: fixed;
        /* Content-sized pill, centred by auto margins against a full-viewport containing block.
           Note the deliberate left:0 / right:0 — with left:50% instead, a shrink-to-fit box may
           only use the space from the 50% mark to the right edge, capping the pill at 50vw and
           forcing the row to overflow. Spanning both edges gives it the full width to shrink
           within, and auto margins do the centring, which also keeps the slide-in transform to
           a single axis. */
        left: 0;
        right: 0;
        margin: 0 auto;
        width: fit-content;
        /* Floor only guards against an absurdly narrow pill; content runs ~210px (one thumbnail,
           two-figure subtotal) to ~270px (three thumbnails, four-figure subtotal), so it normally
           just hugs. The 86vw cap is 275px at 320px wide, which the widest realistic basket still
           clears — and line 2 ellipsises rather than reflowing if it ever doesn't. */
        min-width: 160px;
        max-width: 86vw;
        /* Sits above page content but deliberately BELOW the voice assistant panel
           (.vc-panel is z-index 1000 and covers the full width at bottom:0 on mobile) and
           below the alertify notifier, so the bar can never trap either surface. */
        z-index: 900;
        /* Plain px, not calc(12px + env(safe-area-inset-bottom)): _Layout's viewport meta has no
           viewport-fit=cover, so the visual viewport already excludes the home-indicator area and
           env() always resolves to 0 here — the calc was inert. It also introduced a function this
           bundle's minifier has never had to handle, and a dropped `bottom` would leave the pill
           unpositioned. Revisit only if viewport-fit=cover is ever added to the layout. */
        bottom: 12px;
        /* Solid brand fill. A white bar disappeared into predominantly white listing pages;
           with no button inside the pill any more, the orange no longer competes with the
           orange add-to-cart buttons around it — it IS the action. */
        background: #ec7400;
        /* !important guards against the global anchor rules further up this file. */
        color: #fff !important;
        text-decoration: none !important;
        border-radius: 999px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
        -webkit-tap-highlight-color: transparent;
        transform: translateY(160%);
        opacity: 0;
        transition: transform .28s cubic-bezier(.2, .8, .3, 1), opacity .2s ease;
    }

        .d2s-cart-bar[hidden] {
            display: none;
        }

        .d2s-cart-bar.is-visible {
            transform: translateY(0);
            opacity: 1;
        }

        .d2s-cart-bar:active {
            background: #d16800;
        }

        /* Brief pop when an item lands, so the add registers without a blocking toast. */
        .d2s-cart-bar.is-bumped .d2s-cart-bar-inner {
            animation: d2sCartBump .32s ease;
        }

    .d2s-cart-bar-inner {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 50px;
        padding: 6px 12px 6px 8px;
    }

    .d2s-cart-thumbs {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
    }

        /* Circular and ringed in the pill's own colour, so overlapping thumbnails read as
           cut out of the orange rather than outlined on top of it. */
        .d2s-cart-thumbs img {
            width: 28px;
            height: 28px;
            object-fit: cover;
            border-radius: 50%;
            border: 2px solid #ec7400;
            background: rgba(255, 255, 255, .25);
        }

            .d2s-cart-thumbs img + img {
                margin-left: -10px;
            }

        /* A zero-width thumbnail container is still a flex item and still claims the parent
           gap, leaving the text oddly indented on baskets whose items have no images.
           NOTE: :empty only matches with NO whitespace inside the tag — keep the markup's
           opening and closing span tags together or the fallback icon below stops appearing. */
        .d2s-cart-thumbs:empty {
            display: none;
        }

    /* Cart glyph stands in for the thumbnails when there are none — driven entirely by the
       adjacent-sibling :empty match, so no JS has to know about the fallback. */
    .d2s-cart-fallback-icon {
        display: none;
        flex: 0 0 auto;
        margin-left: 6px;
        color: #fff;
    }

        .d2s-cart-thumbs:empty + .d2s-cart-fallback-icon {
            display: block;
        }

    .d2s-cart-bar-text {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-width: 0;
    }

    .d2s-cart-bar-line1 {
        font-weight: 700;
        font-size: 14px;
        line-height: 1.2;
        color: #fff;
        /* Without this the label wraps to two lines if the text column is ever squeezed, which
           breaks the pill's height. Ellipsis is the graceful floor rather than a reflow. */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .d2s-cart-bar-line2 {
        font-size: 12px;
        line-height: 1.3;
        color: rgba(255, 255, 255, .92);
        /* Carries "N items · $NN.NN". nowrap + ellipsis is the graceful floor: the pill is
           width:fit-content, so it grows with the amount and only clips at the 86vw cap. */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        /* Full white and bolder than the item count beside it, so the running total is scannable
           at a glance. Weight and opacity do the work — a second colour inside a solid orange pill
           reads as an alert. */
        .d2s-cart-bar-amount {
            font-weight: 700;
            color: #fff;
        }

    .d2s-cart-chevron {
        flex: 0 0 auto;
        color: #fff;
        /* Full opacity: this was muted to .85 back when a separate price zone sat to its left. The
           subtotal now lives in the text column instead, so the chevron is still the only thing on
           the right — and the affordance should read clearly. */
    }

    /* Reserves room so the pill never covers the end of the page. Applied to #footer, NOT to
       body: body's background is white while the footer is #404042, so padding on body rendered
       as a blank white strip below the dark footer once you scrolled to the bottom. Putting it
       inside the footer extends the footer's own dark background instead, and the pill floats
       over that. Still keyed off the body class so the space disappears with the bar. */
    body.d2s-has-cart-bar #footer {
        padding-bottom: 76px;
    }

    /* alertify's notifier is pinned bottom-centre site-wide (_Layout sets the notifier position
       to bottom-center) and every add-to-cart handler fires an alertify.success toast. At
       z-index 99999 that toast lands squarely on top of this pill for its full display duration
       — i.e. it would cover the CTA at the exact moment the shopper is deciding. Lift the
       notifier above the pill instead of moving it site-wide, so both stay readable. Scoped to
       the class so it reverts the moment the bar isn't showing.
       Specificity, not source order, is what beats alertify's own CDN stylesheet here — which
       matters now that these rules load from head rather than a style block at end of body. */
    body.d2s-has-cart-bar .alertify-notifier.ajs-bottom {
        bottom: 76px;
    }

    /* Same treatment for toastr, which is also used in places. */
    body.d2s-has-cart-bar #toast-container.toast-bottom-center,
    body.d2s-has-cart-bar #toast-container.toast-bottom-right,
    body.d2s-has-cart-bar #toast-container.toast-bottom-left {
        bottom: 76px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .d2s-cart-bar {
        transition: none;
    }

        .d2s-cart-bar.is-bumped .d2s-cart-bar-inner {
            animation: none;
        }
}

/* ── Card-level cart quantity stepper (wwwroot/js/cart-quantity.js) ───────────────────────────────
   Replaces a product card's Add button once that product is in the cart. The script picks one of
   the three skins below to match whichever button it is standing in for, so the control looks
   native on the homepage rails, the business-category grid and the store menus alike rather than
   importing one shape into three different card designs. Shared here (not per screen) so all three
   stay the same control. */

.dts-qty-replaced {
    display: none !important;
}

.dts-qty {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #ec7400;
    background: #fff;
    color: #ec7400;
    overflow: hidden;
    /* The card sits inside a link on some screens and opens a modal on others; the stepper must
       read as a control in its own right and never pass a tap through as navigation. */
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.dts-qty-btn {
    border: 0;
    background: transparent;
    color: inherit;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    /* 28px minimum on the smallest skin; a stepper that is hard to hit is worse than the Add button
       it replaced, because every miss is a tap on the card behind it. */
    min-width: 28px;
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .dts-qty-btn:hover {
        background: #ec7400;
        color: #fff;
    }

.dts-qty-val {
    flex: 1;
    text-align: center;
    font-weight: 600;
    /* Fixed floor so the control does not resize as the number changes — a stepper that shifts
       width under the finger sends the next tap to the wrong button. */
    min-width: 24px;
    padding: 0 2px;
}

/* Homepage rails and homepage search results: matches .product-card-mini-add, whose margin is what
   keeps the card's bottom spacing. */
.dts-qty--mini {
    margin: 4px 8px 6px;
    font-size: 0.75rem;
    border-radius: 4px;
    min-height: 28px;
}

/* Business-category grid, Deals, and the AI/voice search results: matches .bc-add-btn and
   .vs-add-btn, which are declaration-for-declaration identical and both full width inside their
   card. The !important flags mirror those rules — they set their own with them, and a stepper that
   lost the width would sit half-way across the card. */
.dts-qty--bc {
    width: 100% !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-width: 1.5px !important;
    min-height: 30px;
}

/* Store menus, search results and filtered listings: matches .cart-button, which is inline beside
   the price. */
.dts-qty--cart {
    border-radius: 5px;
    font-size: 12px;
    min-height: 30px;
    vertical-align: middle;
}