body[template="new-order"] {
    background:var(--theme-light);
    color:var(--theme-dark);
}




@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.shimmer {
  background: linear-gradient(
    90deg,
    #DA921D 25%,  /* Light blue */
    #FED289 50%,  /* Lighter shimmer */
    #DA921D 75%
  );
  background-size: 200% 100%;
  animation: shimmer 4.5s infinite linear;
}


body[template="new-order"] .open-order-banner {
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    padding: 16px 0;
    text-decoration:none;
    z-index:10;
    
    text-transform:uppercase;
    color:black;
    letter-spacing:1px;
}

body[template="new-order"] #locations .location-list {
    
    padding:16px;
    display:flex;
    flex-direction:column;


    & .location.fav {
        order:-1;
    }
    
    & .location {
        position:relative;
        overflow:hidden;
        text-decoration:none;
        margin-bottom:16px;
    }
    & .location-fav {
        position:absolute;
        right:16px;
        bottom:16px;
        z-index:2;
    }

    & .location-image {
        overflow:hidden;
        position:relative;
    }
    & .location-image:before {
        content: ' ';
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background: linear-gradient(to bottom, transparent, #0000005e);
        height: 70px;
        z-index: 2;
        border-bottom-left-radius:12px;
        border-bottom-right-radius:12px;
    }
    & .location-image img {
        position:absolute;
        z-index:0;
        top:0;
        left:0;
        width: 100%;
        height:100%;
        object-fit:cover;
        border-radius:12px;
    }
    & .location.fav .location-fav svg * {
        fill: var(--theme-color-1);
    }
    & .location {
        height: auto;
    }
    & .location.open-false {
        opacity:0.3;
    }
    & .location-text {
        width:calc(100% - 64px);
        padding:16px;
        flex-direction: column;
        display:flex;
        position:relative;
        z-index:2;
        color:var(--theme-light);
        
    }
    & .location-text .top {
        padding-top:48px;
    }
    & h1 {
        font-family:"Mordova";
        text-transform:none;
        font-size:34px;
    }
    & .bottom {
        display:flex;
        margin-top:auto;
        justify-content: space-between;
        padding:0 16px;
    }


}




body[template="new-order"] div[data-id="delivery"] {
    display:flex;
    height:100%;
    flex-direction:column;

    & .top-img {
        padding: 0 16px;
        width: 100%;
        margin-top: 32px;
    }
    .bottom-img {
        padding: 0 16px;
        width: 100px;
        margin-top: 32px;
        margin:auto;
        display:block;
    }
}


body[template="new-order"] .delivery-options {

    padding: 16px;
    margin: auto;
    width: 100%;

    & a, & span {
        display: flex;
        text-decoration: none;
        margin-bottom: 16px;


        & h2 {
            margin: auto;
            width: 100%;
            margin-left: 32px;
        }

        & img {
            margin-left:8px;
            max-width:60px;
        }
    }

    & .dusty-button.disabled {
        pointer-events:none;
        opacity:0.2;
    }


}





/* ITEM SELECT */
body[template="new-order"] #item-select {

}
body[template="new-order"] #item-select .header-image {
    
    max-height:25vh;
    padding:16px;
    padding-top:4px;
    height:300px;
    min-height:100px;
}
body[template="new-order"] #item-select .header-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius:12px;
}

body[template="new-order"] #item-select .sticky {
    position:sticky;
    top:-1px;
    background:var(--theme-light);
    border-bottom: 1px solid var(--theme-gray-2);
    padding:16px 32px 0px 32px;
    z-index:10;
}
body[template="new-order"] #item-select .sticky hr {
    border:none;
    height:1px;
    width:100%;
    background:var(--theme-gray-2);
    margin:0;
}
body[template="new-order"] #item-select .location-title {
    display:flex;
    justify-content: space-between;
    align-items: center;

    & .fav-location-indicator {
        & img {
            height:12px;
        }
    }
}
body[template="new-order"] #item-select .location-title .change-location {
    font-size:var(--p-size);
    margin-left:16px;
}
body[template="new-order"] #item-select .menu-tabs > div {
    display:flex;
    justify-content:space-between;
}
body[template="new-order"] #item-select .menu-tabs span {
    display:inline-block;
    padding:16px;
    width:33%;
    text-align:center;
    opacity:0.5;
    font-size: var(--p-size);
}
body[template="new-order"] #item-select .menu-tabs span.disabled {
    pointer-events:none;
    text-decoration: line-through;
}
body[template="new-order"] #item-select .menu-tabs span.active {
    opacity:1;
    text-decoration:underline;
}
body[template="new-order"] #item-select .menu-tabs .roots {
    display:none;
}
body[template="new-order"] #item-select .menu-tabs .roots span:first-child {
    text-align:left;
    padding-left:0;
}
body[template="new-order"] #item-select .menu-tabs .roots span:last-child {
    text-align:right;
    padding-right:0;
}

body[template="new-order"] .menu-list .container h2 {
    text-align:center;
}


body[template="new-order"] #item-select .menu-tabs .roots.active {
    display:flex;
}
body[template="new-order"] #item-select .menu-tabs .breadcrumbs {
    display:none;
}
body[template="new-order"] #item-select .menu-tabs .breadcrumbs span {
    opacity:1;
    padding-left:0;
    text-decoration:underline;
    text-align:left;
}
body[template="new-order"] #item-select .menu-tabs .breadcrumbs.active {
    display:flex;
}

/* body[template="new-order"] #item-select .menu-list {
    position:relative;
    overflow:hidden;
} */
body[template="new-order"] .std-list .list-item {
    background:var(--theme-light);
    height:auto;
    min-height:0;

    & .list-image {
        position: relative;
        width: 190px;
        height: auto;
    }
    & .list-image img {
        height:100%;
        width:100%;
        position:absolute;
        object-fit:cover;
    }
    & .list-text {
        padding:32px;
        width:100%;
    }


}


body[template="new-order"] #item-select .cat-child {
    position:absolute;
    top:0;
    height:100%;
    width:100vw;
    left:100vw;
    background:black;
    transition:left 0.2s ease-out;
}
body[template="new-order"] #item-select .cat-child.visible {
    left:0;
}






body[template="new-order"] #category-select .header-image {
    max-height: 25vh;
    padding: 16px;
    height: 300px;
    min-height: 100px;
    
}
body[template="new-order"] #category-select .header-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 12px;
}
body[template="new-order"] #category-select .sticky {
    position: sticky;
    top: -1px;
    background: var(--theme-light);
    border-bottom: 1px solid var(--theme-gray-2);
    padding: 16px 16px 0px 16px;
    z-index: 10;
}
body[template="new-order"] #category-select .sticky hr {
    border: none;
    height: 1px;
    width: 100%;
    background: var(--theme-gray-2);
    margin: 0;
}
body[template="new-order"] #category-select .breadcrumbs a {
    padding:16px;
    padding-left:0;
    display:block;
    font-size:var(--p-size);
    text-decoration:none;
}
body[template="new-order"] #category-select .cat-title {
    margin-bottom: 4px;
}





body[template="new-order"] #customize .early-checkout {
    padding:0 16px 64px;
    display:block;
}
body[template="new-order"] #customize .early-checkout .button {
    width:100%;
    margin-bottom:16px;
    margin-top:0;
}



body[template="new-order"] #customize {
    display:flex;
    flex-direction:column;
    overflow:hidden;
    height:100%;
}
body[template="new-order"] #customize .sticky {
    position:sticky;
    top:-1px;
    background:var(--theme-light);
    padding:16px 32px 0px 32px;
    z-index:10;
    border-bottom:1px solid var(--theme-gray-2);
}

body[template="new-order"] #customize .header-image {
    
    flex: 1;
    height: auto;
    min-height: 0;
    padding:16px;
}
body[template="new-order"] #customize .header-image img {
    height: 100%;
    width: 100%;
    border-radius:12px;
    background:var(--theme-gray-1);
    object-fit: cover;
}
body[template="new-order"] #customize .location-title {
    display:flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom:16px;

    & h1 {
        padding:0 16px;
    }
}
body[template="new-order"] #customize .option-container {
    height:auto;
    overflow:hidden;
    padding-top:16px;
}
body[template="new-order"] #customize .do-go-back {
    text-decoration: none;
    padding:16px 16px;
    white-space: nowrap;
    padding-right:0;
}
body[template="new-order"] #customize .go-prev-slide {
    white-space:nowrap;
}
body[template="new-order"] #customize .swiper.customize {
    height:100%;
    padding-bottom:32px;
}
body[template="new-order"] #customize .swiper-pagination {
    bottom:11px;
    width:100%;
}
body[template="new-order"] #customize .option-group {
    padding-left:32px;
    padding-right:32px;
}
body[template="new-order"] #customize .option-group .option {
    display:flex;
    align-items: center;
    justify-content: center;
    width:50%;
    padding: 32px 16px;
    text-align: center;
    flex-direction: column;
    text-transform: capitalize;
    cursor:pointer;
    max-height:128px;
}
body[template="new-order"] #customize  .option-group.flexy {
    display:flex;
    justify-content: space-evenly;
}
body[template="new-order"] #customize  .option-group.flexy .option {
    width:calc(100% - 8px);
    margin:0 16px;
    margin-bottom:16px;
    
}
body[template="new-order"] #customize  .option-group.long-rects .option {
    width:100%;
    padding:8px;
    display:flex;
    flex-direction: row;
    justify-content: flex-start;
    text-align:left;
    margin-bottom:16px;
}
body[template="new-order"] #customize  .option-group.circles .option {
    border-radius: 1000px;
    aspect-ratio: 1 / 1;
    padding: 16px;
    margin-bottom: 16px;
    width: calc(33% - 16px);
    max-height: none;
}
body[template="new-order"] #customize .option-group.circles  .option img {
    height: auto;
    width: auto;
}
body[template="new-order"] #customize .option-group.circles {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
body[template="new-order"] #customize .option-group .option img {
    object-fit: contain;
    height: 100px;
    width: 100px;
    min-height: 0px;
    filter:brightness(0.2);
}
body[template="new-order"] #customize .option-group {
    max-height:60vh;
    overflow:scroll;
    padding-top:16px;
    padding-bottom:64px;
}
body[template="new-order"] #customize .option-group.long-rects .option img {
    height:40px;
    width:40px;
    margin-bottom:0;
    margin-right:20px;
}
body[template="new-order"] #customize  .option-group.inline {
    padding-bottom:0;
    padding-top:0;
    
}
body[template="new-order"] #customize  .option-group.inline .option > div {
    display:flex;
}
body[template="new-order"] #customize .option-group.inline .option {
    width: 100%;
    border-bottom: 1px solid var(--theme-gray-2);
    flex-direction: row;
    padding: 16px;
    justify-content: space-between;
}
body[template="new-order"] #customize .option-group.inline .box {
    height:16px;
    width:16px;
    margin-left:12px;
    border:1px solid var(--theme-dark);
    border-radius:2px;
}
body[template="new-order"] #customize .option-group.inline .option.selected .box {
    background:var(--theme-dark);
}
body[template="new-order"] #customize .option-group.inline .option.selected {
    background:transparent;
    color:inherit;
}

body[template="new-order"] #customize .extra-price {
    font-size:12px;
    margin-top:4px;
}
body[template="new-order"] #customize .option-group .option.selected {
    background:var(--theme-dark);
    color:var(--theme-light);
}
body[template="new-order"] #customize .option.selected img {
    filter:brightness(1);
}
body[template="new-order"] .swiper-pagination-bullet-active {
    background:white;
}

body[template="new-order"] .swiper-pagination-bullet {
    background:white;
    margin:0 4px;
    height:4px;
    width:4px;
}
body[template="new-order"] #customize .option-group .option:nth-child(even) {
    border-left: none;
}
body[template="new-order"] #customize .swiper-slide {
    display: flex;
    flex-direction: column;
}
body[template="new-order"] #customize .swiper-slide.the-rest > div {
    overflow:scroll;
    padding-bottom:64px;
    /* height: calc(100dvh - var(--title-bar-height)); */
}
body[template="new-order"] #customize .swiper-slide.the-rest .container {
    padding:0px 16px;
}
body[template="new-order"] #customize .swiper-slide.the-rest .container button {
    width:100%;
}
body[template="new-order"] #customize .swiper-slide label {
    padding:0 32px;
}


body[template="new-order"] #customize .qty-slider {
    position:relative;
    overflow:hidden;
}
body[template="new-order"] #customize .qty-slider .swiper-slide {
    font-size:128px;
    opacity:0.3;
    text-align: center;
}
body[template="new-order"] #customize .qty-slider .swiper-slide-active {
    opacity:1;
}
body[template="new-order"] #customize .qty-slider .swiper-button-next, body[template="new-order"] #customize .qty-slider .swiper-button-prev {
    color:var(--theme-color-dark);
}

body[template="new-order"] #customize .swiper-slide.final label {
    text-align:center;
}
body[template="new-order"] #customize .final {
    padding: 0 32px;
}
body[template="new-order"] #customize .final .inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}