@font-face {
    font-family: 'Watterbite';
    src: url('/assets/fonts/Watterbite.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.sticky-top {
    z-index: 2;
}

.text-normal {
    font-weight: 500;
}

.text-dark {
    color: #898489 !important;
    font-weight: 500 !important;
}

.deliver-to {
    color: #afafaf;
    font-size: 8pt;
    font-weight: 500;
    display: block;
    text-transform: uppercase;
    text-align: left;
}

.deliver-to-with-address {
    position: relative;
    left: 0;
    top: -2px;
    font-family: 'Gilroy-Medium-Rupee';
    font-weight: 600;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: -0.35px;
    color: rgba(2, 6, 12, 0.92);
}

.deliver-to-with-address > img {
    width: 13px;
    height: 17px;
}

.deliver-to-with-address > span {
    position: relative;
    left: 4px;
    top: 4px;
    font-family: 'Gilroy-Medium-Rupee';
    font-weight: 200;
    font-size: 13px;
    line-height: 17px;
    letter-spacing: -0.33px;
    color: rgba(2, 6, 12, 0.6);
}

/* .nav-location {
    height: 3.2rem;
} */

.mock-search-block img {
    width: 17px;
}

.mock-search-block span {
    font-size: 1rem;
    position: relative;
    top: 2px;
}

.mock-search-block > div {
    height: 4rem;
}

.slider-wrapper__img-wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.slider-wrapper__img {
    width: 100%;
    height: auto;
    border-radius: 0.8rem;
}

.slider-wrapper {
    /* margin-top: 0.7rem; */
}

.secondary-slider-wrapper {
    padding: 22px 0px;
}

.shop-by-category-title-section, 
.deal-title-section,
.combos-title-section,
.frequently-bought-title-section {
    position: relative;
}

.shop-by-category-content-section .single-category-section {
    display: inline-block;
    position: relative;
    width: 25%;
}

.deal-content-section .single-deal-section {
    position: relative;
    display: inline-block;
    float: none;
}

.single-item-combo-section .single-deal-section {
    position: relative;
    display: block;
    float: left;
}

.single-item-combo-section .single-deal-section .item-image-section {
    min-height: 160px;
    line-height: 150px;
}

.single-item-combo-section .single-deal-section .item-image-section > img {
    width: 80%;
}

.single-item-combo-section .single-deal-section .item-details .item-title,
.single-item-combo-section .single-deal-section .item-details .item-variants {
    font-size: 11pt;
}

.single-item-combo-section .single-deal-section .item-details .item-variants {
    color: #f29900;
}

.shop-by-category-title-section span.title, 
.deal-title-section span.title,
.combos-title-section span.title,
.frequently-bought-title-section span.title {
    display: block;
    font-size: 12pt;
}

.shop-by-category-title-section span.subtitle, 
.deal-title-section span.subtitle,
.combos-title-section span.subtitle,
.frequently-bought-title-section span.subtitle {
    color: #898489;
    font-size: 9.5pt;
    letter-spacing: 0;
    position: relative;
    top: -2px;
}

.shop-by-category-title-section .view-all, 
.deal-title-section .view-all,
.combos-title-section .view-all,
 .view-all {
    position: absolute;
    top: 10px;
    right: 0;
    text-transform: uppercase;
    font-size: 9.5pt;
    font-weight: 600 !important;
    color: #908889 !important;
    letter-spacing: 0.02rem;
}
.deal-title-section, .frequently-bought-title-section{
background-color: #f0f0f5;
}
.shop-by-category-title-section .nav-location-icon, 
.deal-title-section .nav-location-icon,
.combos-title-section .nav-location-icon {
    font-size: 0.625rem;
}

.shop-by-category-content-section {
    margin-left: -5px;
    margin-right: -5px;
    /* Was `overflow-x: auto`. The category grid wraps onto multiple rows — it is
       not a horizontal rail (no white-space:nowrap, no flex). But the negative
       margins above make this box 400px wide inside a 390px viewport, and with
       the nested Bootstrap .row margins the content measured 407px. `auto` then
       turned those 7 stray pixels into a draggable horizontal scroller covering
       most of the home screen, so every vertical swipe starting here had to be
       axis-arbitrated first and often rubber-banded sideways instead of
       scrolling. `clip` hides the bleed without creating a scroll container.
       (`clip` is used rather than `hidden` because `hidden` would compute
       overflow-y to `auto` and make this a nested vertical scroller instead.) */
    overflow-x: clip;
    overflow-y: visible;
    scrollbar-width: none;
}
.fruit-text {
    font-family: 'Gilroy-Medium-Rupee';
    font-weight: 200;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: -0.35px;
    color: rgba(2, 6, 12, 0.45);
    transition: transform 0.5s ease 0s; /* Adjust as needed */
    transform: translateY(calc(30px)); /* Initial position off-screen */
  }
  
  .fruit-carousel.show .fruit-text {
    transform: translateY(0); /* Final position on screen */
  }

.deal-content-section {
    scrollbar-width: none;
    margin-left: -5px;
    margin-right: -5px;
    overflow-x: auto;
    white-space: nowrap;
    /* background-color: #f0f0f5; */
    padding: 15px;
    padding-bottom: 0px;
    display: flex;
    padding-left:20px;
}
.combos-content-section {
    margin-left: -5px;
    margin-right: -5px;
    overflow-x: auto;
    white-space: nowrap;
    height: 346px;
}
.faq-title{
    border-bottom: none !important;
    margin-bottom: 10px;
}
.faq-body{
	padding:0px !important;
    border:none !important;
}
section{  
    /* desktop view Like before uncompent this */
    /* padding: 0px !important; */
   
}
.apply-heading {
    color: rgba(2, 6, 12, .92);
    letter-spacing: -.6px;
    margin-top: 0;
    margin-bottom: 0;
    font-weight: bold;
    line-height: 2.5rem;
    font-size: 30px;
}
.apply-subtext {
    color: rgba(2, 6, 12, .45);
    letter-spacing: -.3px;
    font-size: 15px;
    font-family: 'Basis_Grotesque_Regular';
    line-height: 1.25rem;
}
.firstScreenDiv ::before{
    background-color: rgba(50,50,50,0.3);
}
.get-card-button{
    
    width: 90%;
    color: #fff;
    text-align: center;
    background-color: #f15700;
    border-radius: 12px;
    padding: 1.0625rem 1.5rem;
    font-family: 'Basis_Grotesque_Pro_Bold';
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 2.125rem;
    box-shadow: 0 4px 8px rgba(27, 30, 36, .08);
    font-weight: bold;
    font-size: 18px;
}
.shop-by-category-content-section .single-category-section {
    padding: 5px;
}

.deal-content-section .single-deal-section .deal-content a .item-image-section {
    min-height: 110px;
    line-height: 100px;
}

.deal-content-section .single-deal-section .deal-content a .item-image-section > img {
    width: 70%;
    text-align: center;
    /* min-height: 80px; */
}

.combos-content-section .single-combos-section .combos-content {
    position: relative;
    height: 200px;
    border-radius: 10px;
}

.combos-content-section .single-combos-section .combos-content .item-discount-tag > img {
    position: absolute;
    right: 15px;
    top: -10px;
    text-align: right;
}

.combos-content-section .single-combos-section .combos-content .item-discount-tag .discount-price {
    position: absolute;
    text-align: center;
    right: 25px;
    font-size: 9pt;
    color: #FFF;
    line-height: 12px;
    top: 5px;
    width: 25px;
    white-space: normal;
}

.combos-content-section .single-combos-section .combos-content a .item-details {
    width: 70%;
    position: absolute;
    top: 10px;
    padding: 5px 15px;
    white-space: normal;
    font-weight: 500;
}

.combos-content-section .single-combos-section .combos-content a .item-details .desc-text p {
    margin-bottom: 0;
}

.combos-content-section .single-combos-section .combos-content a .item-details .sale-price {
    font-size: 18pt;
}

.combos-content-section .single-combos-section .combos-content a .item-details .regular-price {
    font-size: 10pt;
}

.combos-content-section .single-combos-section .combos-content a .item-image-section > img {
    width: 50%;
    position: absolute;
    right: 0;
    bottom: 10px;
}

.combos-content-section .single-combos-section .combos-content .item-actions .btn-group {
    width: 30%;
    position: absolute;
    top: 160px;
    left: 15px;
}

.deal-content-section .single-deal-section {
    padding: 5px;
    width: 210px;
    height: auto;
    border-radius: 12px;
}

.deal-content-section .single-deal-section .deal-content {
    border: 1px solid #ddd;
    padding: 2px;
    border-radius: 8px;
    /* text-align: center; */
}

.deal-content-section .single-deal-section .deal-content .item-details {
    position: relative;
    padding: 5px;
    margin-bottom: 10px;
}

.deal-content-section .single-deal-section .deal-content .item-favorites .item-ribbon {
    background: #f29900;
    border-radius: 5px;
    color: #FFF;
    padding: 0 5px;
    float: left;
    font-size: 8.5pt;
    text-transform: uppercase;
}
.deal-content-name {
    font-family: 'Basis_Grotesque_Pro_Bold';
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: -0.3px;
    color: rgba(2, 6, 12, 0.75);
    white-space: normal;
    text-align: start;
    height: 24px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-width: 100%;
    overflow: hidden;
    word-break: break-word;
    hyphens: auto;
}
.deal-content-section .single-deal-section .deal-content .item-favorites {
    position: relative;
    height: 15px;
}

.deal-content-section .single-deal-section .deal-content .item-favorites .item-favorite {
    top: -41px;
    right: -45px;
    z-index: 1 !important;
}

.heart {
    left: inherit !important;
    z-index: 1 !important;
}

.deal-content-section .single-deal-section .deal-content .item-details > .item-badge {
    position: absolute;
    top: 9px;
    right: 0;
}

.deal-content-section .single-deal-section .deal-content .item-details > .item-badge > img {
    width: 1rem;
    top: 0;
}

.deal-content-section .single-deal-section .deal-content .item-details .sale-price {
    font-size: 10pt;
}

.deal-content-section .single-deal-section .deal-content .item-details .regular-price {
    font-size: 9pt;
    padding-left: 2px;
    color: #908889;
}

.category-list-item .item-discount-tag {
    position: absolute;
    top: -22px;
    z-index: 99;
    left: -5px;
} 

.Collapsible .category-list-item .item-discount-tag {
    top: -18px;
}

.category-list-item .item-discount-tag > img {
    width: 35px;
}

.category-list-item .item-discount-tag .discount-price {
    position: absolute;
    text-align: center;
    right: 0;
    font-size: 7.5pt;
    color: #FFF;
    line-height: 12px;
    top: 9px;
}

.category-list-item .sale-price {
    font-size: 11pt;
}

.category-list-item .regular-price {
    font-size: 10pt;
    padding-left: 5px;
    color: #908889;
}
.desc-title{
    color: rgb(54, 57, 62);
    font-size: 16px;
    font-weight: 600;
}

.deal-content-section .single-deal-section .deal-content span.item-title,
.category-list-item div.item-name {
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: -0.3px;
    color: rgba(2, 6, 12, 0.75);
    width: 150px;
}

.deal-content-section .single-deal-section .deal-content span.item-subtitle,
.category-list-item span.item-subtitle {
    color: #898489;
    font-size: 8.5pt;
    letter-spacing: 0;
    position: relative;
    top: -2px;
}

.category-list-item .inclusive-tax-text {
    font-size: 7.5pt;
}

.category-list-item .item-actions .btn-group {
    /* width: 50%; */
    border: 1px solid rgb(226, 226, 231);;
}

.single-frequently-bought-grid-section .item-actions .btn-group{
    width: 100% !important;
    background: none !important;
    border:1px solid rgb(226, 226, 231);
}

.single-frequently-bought-grid-section .item-actions .btn-group .btn-add-remove:not(.btn-custom-add) {
    width: 100% !important;
    background: none !important;
    border: none !important;
}



.category-list-item .item-actions .item-favorite {
    top: -40px;
    right: -40px;
}

.Collapsible .category-list-item .item-actions .item-favorite {
    top: -40px;
    right: -40px;
}

.Collapsible .react-tabs__tab-panel {
    margin-top: 20px;
}

.Collapsible .react-tabs__tab--selected,
.combos-content-section .react-tabs__tab--selected {
    background: none !important;
    color: inherit !important;
    border-bottom: 5px solid #089d49;
    border-color: #089d49 !important;
    border-radius: 0px !important;
    border-top: none;
    border-left: none;
    border-right: none;
}
.deal-content-name-1{
    line-height: 17px;
    letter-spacing: -0.33px;
    overflow: hidden;
    width: 100%;
    display: -webkit-box;
    overflow-wrap: break-word;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-family: 'Basis_Grotesque_Pro_Bold';
    font-weight: 700;
    white-space: normal;
    text-align: center;
}

.category-list-item .veg-non-veg-badge {
    bottom: 0;
    left: 0;
    top: inherit !important;
}

.item-actions .btn-group {
    width: 100%;
    /* border: 2px solid #089d49; */
    border-radius: 6px;
    background: none !important; 
}

.item-actions .btn-group .btn-custom-add {
    color: #FFF;
    text-transform: uppercase;
    border: none;
    font-size: 10pt;
    height: 23px !important;
}

.item-actions .btn-group .btn-add-remove {
    min-width: 48px;
    padding: 8px 16px;
    background-color: rgb(255, 255, 255) !important;
    justify-content: space-between;
    box-shadow: rgba(27, 30, 36, 0.06) 0px 1px 1px !important;
    border-radius: 8px;
    height: 40px !important;
    min-height: 40px;
    text-align: center;
    border:1px solid rgb(226, 226, 231);
    color: rgb(27, 166, 114);
    letter-spacing: -0.02px;
    line-height: 20px;
    font-size: 16px;
}

.homeLottie svg{
    height: 108% !important;
}


.secondary-slider-wrapper .carousel .slide {
    margin: 0 5px;
}

.secondary-slider-wrapper .carousel .slide img {
    border-radius: 10px;
}

.secondary-slider-wrapper .carousel .slider {
    width: 94%;
}

.single-item .category-list-item .carousel .slide img {
    width: 100%;
}

.single-item .category-list-item .item-veg-badge {
    position: absolute;
    left: 19px;
    /* bottom: 60px; */
    /* height: 25px; */
    top: 274px;
}

/* .single-item .category-list-item .carousel .control-dots {
    margin: 0;
}

.single-item .category-list-item .carousel .control-dots .dot {
    width: 20px;
    height: 5px;
    background: #d5d3d3;
    border-radius: 30%;
    opacity: 1;
    box-shadow: none;
}

.single-item .category-list-item .carousel .control-dots .dot.selected, 
.single-item .category-list-item .carousel .control-dots .dot:hover {
    background: #089d49;
} */
.slider-container{
    position: relative;
}
.slider-arrowPrevious{
  position: absolute;
  left: -14px;
  top: 50%;
  background-color: rgba(0,0,0,0.5);
  border: none;
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
  padding: 10px;
  color: white;
}
.slider-arrowNext{
    position: absolute;
  right: -14px;
  top: 50%;
  background-color: rgba(0,0,0,0.5);
  border: none;
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
  padding: 10px;
  color: white;
}
.gallery-container{
    width: 100%;
    overflow-x: auto;
    height: 70px;
    display: flex;
}
.single-item .category-list-item .sale-price {
    font-size: 15pt;
}

.single-item .category-list-item .regular-price {
    font-size: 10pt;
    padding-left: 5px;
    color: #908889;
}

.single-item .category-list-item .single-item-meta .item-variant-actions .btn {
    background: none;
    border: 1px solid #ddd;
    height: 28px;
    padding: 0 10px;
    font-weight: 500;
    border-radius: 5px;
    font-size: 9pt;
}

.single-item .category-list-item .item-discount-tag {
    position: absolute;
    right: 10px;
    bottom: -4px;
    top: inherit;
    left: inherit;
}


.single-item .category-list-item .item-product-information {
    margin-top: -20px;
}

.single-item .category-list-item .item-discount-tag .discount-price {
    position: absolute;
    text-align: center;
    right: 0;
    font-size: 8.5pt;
    color: #FFF;
    line-height: 12px;
    top: 12px;
}

.item-discount-tag .discount-price {
    position: absolute;
    text-align: center;
    right: 0;
    font-size: 8.5pt;
    color: #FFF;
    line-height: 12px;
    top: 12px;
}

.single-item .category-list-item .item-discount-tag > img {
    width: 40px;
}

.single-item-meta .item-variant-actions {
    position: sticky;
    right: 150px;
}

.single-item-meta .item-variant-actions .btn .si {
    font-size: 8pt;
    margin-left: 5px;
    color: #ffa604;
    font-weight: bold;
}

.quantity-badge-list {
    display: none !important;
}

.single-item .category-list-item .inclusive-tax-text {
    font-size: 6.5pt;
}

.single-item .category-list-item .single-item-meta .section-desc p.desc-title {
    font-size: 12pt;
    font-weight: 500;
    margin-bottom: 10px;
}

.single-item .category-list-item .single-item-meta .section-desc {
    /* height: 110px; */
    border-bottom: 1px solid #ddd;
}

.single-item .category-list-item .single-item-meta .section-desc ul {
    padding-inline-start: 30px;
}

.single-item .category-list-item .single-item-meta .section-desc .desc-text > p {
    margin-bottom: 0;
    line-height: 19px;
}

.single-item .category-list-item .single-item-meta .section-desc a.show-more {
    display: block;
    text-align: right;
    color: #ffa604;
}

.styles_overlay__CLSq- {
    top: inherit;
    border-top: 1px solid #ddd;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: 0px 5px 20px 0px;
    padding: 0;
    bottom: -2px;
    overflow-x: scroll;
    scrollbar-width: none;
    overflow-x: initial;
    scrollbar-width: none;
    overflow-y: initial;
}

.styles_overlay__CLSq- svg {
    height: 20px;
}

.styles_overlay__CLSq- .btn-customization-done {
    position: relative;
    margin-left: 0;
    width: 100%;
    height: 3rem;
    text-transform: uppercase;
}

.styles_overlay__CLSq- h4 {
    font-weight: 500;
}

.styles_overlay__CLSq- .single-variant {
    /* border-bottom: 1px solid #ddd; */

}

.styles_overlay__CLSq- .item-actions .btn-group {
  
    top: 5px;
}

.styles_overlay__CLSq- .single-variant .variant-name {
    font-weight: 600;
    font-size: 1.15rem;
    text-transform: capitalize;
}

.styles_overlay__CLSq- .single-variant .sale-price {
    font-size: 13pt;
}

.styles_overlay__CLSq- .single-variant .regular-price {
    font-size: 10pt;
    color: #908889;
}

.styles_overlay__CLSq- .single-variant .discount-percent {
    background: #ffad00;
    color: #FFF;
    padding: 2px 5px;
    border-radius: 5px;
    font-size: 10pt;
}

.scheduled-order-timeline .pulse {
    position: relative;
    top: 25px;
    left: 12px;
    float: left;
}

.scheduled-order-timeline .loadingCartStatus.pulse {
    display: inline-block;
    width: 12.5px;
    height: 12.5px;
    border-radius: 50%;
    -webkit-animation: none;
    animation: none;
    vertical-align: middle;
    margin: -3px 0 0 3px;
    background: #60b246;
    left: 16px;
}

.list-timeline-modern-cancelled .loadingCartStatus.pulse,
.list-timeline-modern-cancelled .pulse {
    background: #ff0000;
}

.order-timeline {
    background-color: #f2faf6;
    padding: 10px;
}

.order-timeline h4 {
    margin-bottom: 5px;
}

.order-timeline img {
    width: 20px;
}

.order-timeline .date-location {
    position: relative;
}

.order-timeline .date-location span.otp-label {
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 2.5px;
    background-color: #079d49;
    color: #FFF;
    padding: 2px 5px;
    font-weight: 600;
}

.btn-update-location {
    border: 1px solid #079d49;
    color: #079d49;
    font-size: 12pt;
    background: none;
}

.category-list-item .flex-item-image {
    width: 78px;
}

.category-list-item .flex-quantity {
    position: absolute;
    bottom: -3px;
    right: 0;
    font-size: 11pt;
    font-weight: 600;
}

.order-timeline .date-location > div {
    margin-bottom: 10px;
}

.order-timeline .date-location > div > span {
    position: relative;
    top: 3px;
    left: 5px;
    font-weight: 500;
}

.scheduled-order-timeline.list-timeline-modern::before {
    width: 2px;
    background-color: #e8e8ec;
    height: 160px;
}

.scheduled-order-timeline .loadingCartStatus {
    width: 12.5px;
    height: 12.5px;
    background: #d7d4d4;
    border-radius: 50%;
    text-align: center;
    font-size: 24pt;
    /* top: 0px; */
    position: relative;
    color: #b4b0b0;
    left: 18.5px;
    top: 20px;
    float: left;
}

.list-timeline .list-timeline-content hr {
    display: none !important;
}

.deal-content .btn-group input[type=text] {
    width: 110% !important;
    color: rgb(27, 166, 114) !important;
    letter-spacing: -0.02px;
    line-height: 20px;
    font-size: 16px !important;
}

.react-tabs__tab-list {
    border-bottom: 1px solid #aaa;
    margin: 0 0 10px;
    padding: 0;
    overflow-x: auto;
    justify-content: none;
}

.change-address-text {
    color: rgb(94, 64, 127);
    border-radius: 5px;
    padding: 5px 10px !important;
    background: none;
    border: none;
}

.view-all-deal-of-the-day-section .deal-content-section,
.view-all-category-section .shop-by-category-content-section {
    overflow-y: hidden;
    max-height: 100%;
}

.view-all-deal-of-the-day-section .deal-content-section,
.view-all-category-section .shop-by-category-content-section {
    white-space: normal;
}

.view-all-category-section .shop-by-category-content-section .single-category-section {
    width: 50%;
}

.account-logout {
    background: none;
    border: none;
    text-align: center;
    padding: 20px 10px 0;
    border-radius: 8px;
}

.logout-text {
    font-size: 12pt;
}

.user-account-info .account-banner {
    width: 100%;
    height: 170px;
    background-image: url('/assets/img/various/account-banner-v1.jpg');
    background-size: cover;
    background-position: center;
    border-radius: 20px;
    text-align: center;
}

.user-account-info .account-banner h1,
.user-account-info .account-banner p {
    color: #FFF;
    margin-bottom: 0;
}

.user-account-info .account-banner p {
    font-size: 16pt;
    margin-bottom: 40px;
    font-weight: 500;
}

.user-account-info .account-banner p:last-child {
    font-size: 12pt;
}

.my-account-menu-item-block {
    width: 100%;
    min-width: inherit;
    max-width: inherit;
    min-height: inherit;
    border-radius: 10px;
    background: none;
    border: none;
}

.my-account-menu-item-block .display-flex {
    background-color: #f4f5f9;
    border: 1px solid #f4f5f9;
}

.my-account-menu-item-block img {
    width: 15px;
}

.my-account-menu-item-block .text-center {
    font-size: 1.2rem;
    font-weight: 500;
}

.cust-auth-header {
    position: relative;
    height: 180px;
    background-color: #fff !important;
}
.login-welcome-text {
    font-family: 'Watterbite', cursive;
    color: #F37A20;
    font-size: 28px;
    line-height: 34px;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}
.desktopKapil p{
    margin-bottom: 10px;
}

.cust-auth-header .back-button {
    position: relative;
    color: rgb(2, 6, 12);
}

.cust-auth-header .login-texts {
    color: rgb(2, 6, 12);
    font-size: 24px;
    letter-spacing: -0.02px;
    position: absolute;
    bottom: 10px;
    left: 10px;
}

.cust-auth-body {
    /* border-radius: 30px; */
    overflow: hidden;
    height: 100vh;
    max-height: 100vh;
}

.login-title {
    font-size: 1.5rem;
    text-transform: inherit;
}

.login-subtitle {
    font-size: 13px;
}
.login-white-title{
    color: rgb(2, 6, 12);
    font-size: 24px;
    line-height: 30px;
    letter-spacing: -0.02px;
    font-weight: 800;
    text-transform: uppercase;
}
.login-white-subtitle{
    color: rgb(102, 104, 110);
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.02px;
    margin-top: 4px;
}
.dashes-outcss {
    align-items: stretch;
    background-color: rgba(0, 0, 0, 0);
    border: 0px solid black;
    box-sizing: border-box;
    display: flex;
    flex-basis: auto;
    flex-direction: column;
    flex-shrink: 0;
    list-style: none;
    margin: 0px;
    min-height: 0px;
    min-width: 0px;
    padding: 0px;
    position: relative;
    text-decoration: none;
    z-index: 0;
}
.dashes-outcss-1 {
    align-items: center;
    justify-content: center;
    top: 0px;
    position: absolute;
    bottom: 0px;
}
.r-vrz42v {
    line-height: 28px;
}
.r-1x35g6 {
    font-size: 24px;
}
.css-1rynq56 {
    background-color: rgba(0, 0, 0, 0);
    border: 0px solid black;
    box-sizing: border-box;
    color: rgb(0, 0, 0);
    display: inline;
    list-style: none;
    margin: 0px;
    padding: 0px;
    text-align: inherit;
    text-decoration: none;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    font-size: 32px;
}
.dashes-outcss {
    align-items: stretch;
    background-color: rgba(0, 0, 0, 0);
    border: 0px solid black;
    box-sizing: border-box;
    display: flex;
    flex-basis: auto;
    flex-direction: column;
    flex-shrink: 0;
    list-style: none;
    margin: 0px;
    min-height: 0px;
    min-width: 0px;
    padding: 0px;
    position: relative;
    text-decoration: none;
    z-index: 0;
}

.r-12vffkv {
    pointer-events: none !important;
}
.r-1otgn73 {
    touch-action: manipulation;
}
.r-1loqt21 {
    cursor: pointer;
}
.r-12vffkv > * {
    pointer-events: auto;
}
.css-11aywtz {
    appearance: none;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 0px;
    border: 0px solid black;
    box-sizing: border-box;
    font: 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0px;
    padding: 0px;
    resize: none;
}
.catName{
    font-family: 'Gilroy-Medium-Rupee';
    line-height: 18px;
    letter-spacing: -0.3px;
    overflow: hidden;
    width: 100%;
    display: -webkit-box;
    overflow-wrap: break-word;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: calc(36px);
}
.bottomOffsetPadBottom{
    font-family: 'Gilroy-Medium-Rupee';
    
}
._2KJ7c{
    font-weight: 700;
    font-size: 13px;
    padding:5px;
    width:100% !important;
    color:rgba(2, 6, 12, 0.6);
}

.regular-price{
    font-family: 'Gilroy-Medium-Rupee';
}
.sale-price{
    font-family: 'Gilroy-Medium-Rupee';
}
.cust-auth-body .country-code-indian-icon {
    width: 25px;
    position: absolute;
    left: 25px;
    margin-top: 12px;
}

.cust-auth-body .country-code {
    left: 50px;
}

.cust-auth-body .btn-main {
    font-size: 1.5rem;
}

.phone-number-country-code {
    min-height: 56px;
    background-color: #ffffff !important;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid rgb(186, 187, 192);
    margin-bottom: 20px;
    --placeholderTextColor: #909197;
    color: rgb(2, 6, 12);
    font-size: 17px;
}
.boxotp-form-group input{
    min-height: 56px;
    background-color:white;
    padding: 6px;
    border-radius: 12px;
    border: 1px solid rgb(186, 187, 192);
    --placeholderTextColor: #909197;
    color: rgb(2, 6, 12);
    font-size: 17px;
}
.boxotp-form-group input:focus{
    border:1px solid rgb(8, 157, 73);
    background: #E8F0FE;
}
.login-with-otp-input-container {
	justify-content: space-between;
	gap: 8px;
}
.login-with-otp-input {
	width: 48px !important;
	height: 44px !important;
	background-color: #f2f4f9 !important;
	padding: 0 !important;
	border-radius: 12px !important;
	border: 1.5px solid #e0e0e0 !important;
	font-weight: 600 !important;
	font-size: 20px !important;
	text-align: center !important;
	color: #000 !important;
	outline: none !important;
	transition: border-color 0.2s ease;
}
.login-with-otp-input:focus {
	border-color: var(--store-color, #f48131) !important;
	background-color: #fff !important;
}
.login-with-otp-input-green {
	width: 48px !important;
	height: 44px !important;
	padding: 0 !important;
	border-radius: 12px !important;
	font-weight: 600 !important;
	font-size: 20px !important;
	text-align: center !important;
	color: #000 !important;
    border: 1.5px solid rgb(8, 157, 73) !important;
    background: #E8F5EE !important;
	outline: none !important;
}
.login-with-otp-input-invalid {
    width: 48px !important;
	height: 44px !important;
	background-color: #fff0f0 !important;
	padding: 0 !important;
	border-radius: 12px !important;
	font-weight: 600 !important;
	font-size: 20px !important;
	text-align: center !important;
	color: #000 !important;
    border: 1.5px solid red !important;
	outline: none !important;
}
.login-with-otp-input-container div {
	margin-right: 0px !important;
	flex: 1;
}
.login-with-otp-input-container div:last-child {
	margin-right: 0px !important;
}
.form-group input{
    min-height: 56px;
    background-color:white;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid rgb(186, 187, 192);
    margin-bottom: 20px;
    --placeholderTextColor: #909197;
    color: rgb(2, 6, 12);
    font-size: 17px;
}
.form-group input:focus{
    border:1px solid rgb(8, 157, 73);
}

input:focus{
    outline: none;
    /* border:1px solid rgb(8, 157, 73); */
}

.bill-details .bill-list-item {
    padding: 16px 16px 12px 16px;
    
}

.bill-details .bill-left-content {
    width: 71%;
}

.bill-details .bill-left-content p {
    line-height: 25px;
    margin-bottom: 0;
}

.bill-details .bill-right-content {
    position: relative;
    /* top: -10px; */
}

.bill-details .order-completed-status-button,
.bill-details .order-ongoing-status-button {
    width: 100%;
    border: 2px solid #089d49;
    border-radius: 6px;
    background: #089d49;
    color: #FFF;
    height: 23px;
    line-height: 5px;
    max-width: 120px;
    text-align: center;
}

.bill-details .order-cancelled-status-button {
    width: 100%;
    border: 2px solid #FF0000;
    border-radius: 6px;
    background: #FF0000;
    color: #FFF;
    height: 23px;
    line-height: 5px;
    max-width: 120px;
    text-align: center;
}

.bill-details .delivery-date {
    color: orange;
    font-weight: 500;
    white-space: nowrap;
}

.bill-details .delivery-date.delivered-status {
    color: #089d49;
    font-weight: 500;
}

.bill-details .delivery-date.cancelled-status {
    color: #ff0000;
    font-weight: 500;
}

.bill-details .order-cancel-btn,
.bill-details .order-rating-btn {
    border-radius: 6px !important;
    height: 23px;
    line-height: 5px;
}

.bill-details .order-rating-btn {
    color: #ff9800;
    border: 0;
}

.account-orders .react-tabs__tab--selected {
    color: #000 !important;
    border-bottom: 5px solid #089d49 !important;
    border-radius: 0 !important;
    background: none !important;
}

.item-variant-actions .btn {
    width: auto;
    height: 23px;
    font-size: 8.5pt;
    padding: 0 10px;
    font-weight: 500;
    line-height: 0;
    border: 1px solid #e1e2e6;
    background: none;
    margin-bottom: 10px;
}
.item-discount-tag > img {
    width: 35px;
    height: 45px;
}

.catItems:first-child{
    color:pink;
}

.single-item-combo-section .item-variant-actions .btn {
    width: auto;
    height: 20px;
    font-size: 8.5pt;
    padding: 0px 5px;
    font-weight: 500;
    line-height: 0;
    border: 1px solid #e1e2e6;
    background: none;
}

.item-variant-actions .btn .si { 
    color: #f29900;
}

.deal-content-section .item-actions .position-relative .item-variant-actions {
    position: absolute;
    top: -50px;
    left: 5px;
}

.category-list-item .item-actions .position-relative {
    position: inherit !important;
}

.frequently-bought-content-section .category-list-item .item-actions .position-relative .item-variant-actions {
    position: absolute;
    left: 100px;
    top: 25px;
}

.category-search-section img {
    position: absolute;
    z-index: 99;
    width: 20px;
    top: 8px;
    left: 8px;
}

.category-search-section input {
    padding-left: 45px;
}

.items-search-box, .items-search-box:focus {
    border-right: 1px solid #ddd;
    border-radius: 0.775rem !important;
    background-color: #f4f4f4;
}

.btn, .btn-main {
    border-radius: 5px important;
}

.cust-auth-header .search-navs-btns {
    height: 3rem;
    border: 0;
    width: 45px;
}

.scheduled-order-timeline.list-timeline-modern-cancelled::before {
    height: 60px;
}

.react-tabs__tab {
    width: 100%;
}

.blur-content-section {
    /* -webkit-filter: blur(0.05rem);
    -moz-filter: blur(0.05rem);
    -o-filter: blur(0.05rem);
    -ms-filter: blur(0.05rem);
    filter: blur(0.05rem); */
}

.blur-content-section .item-actions {
    pointer-events: none;
}

.blur-content-grid {    
    position: absolute;
    z-index: 1;
    border: 1px solid #888787;
    color: #888787;
    border-radius: 4px;
    padding: 5px 10px;
    font-weight: bold;
    background: #FFF;
    top: 80px;
    left: 20%;
    line-height: 20px;
    font-size: 9.5pt;
    width: 60%;
    text-align: center;
}

.blur-content-list {
    position: absolute;
    z-index: 1;
    border: 1px solid #888787;
    color: #888787;
    border-radius: 4px;
    padding: 0;
    font-weight: bold;
    background: #FFF;
    top: 25px;
    line-height: 20px;
    font-size: 8pt;
    width: 23%;
    text-align: center;
}

.blur-content-single {
    position: absolute;
    z-index: 1;
    border: 1px solid #888787;
    color: #888787;
    border-radius: 4px;
    padding: 5px 10px;
    font-weight: bold;
    background: #FFF;
    top: 47px;
    right: 5%;
    line-height: 15px;
    font-size: 9.5pt;
    width: 30%;
    text-align: center;
}

.blur-content-single-variant {
    position: absolute;
    z-index: 1;
    border: 2px solid #888787;
    color: #888787;
    border-radius: 4px;
    padding: 5px 0;
    font-weight: bold;
    background: #FFF;
    top: 8px;
    right: 0;
    line-height: 15px;
    font-size: 9.5pt;
    width: 29%;
    text-align: center;
}

.pointer-events-none {    
    pointer-events: none;
}

.order-star-ratings .checked {
    color: orange;
  }

  .styles_overlay__CLSq-.accountPagesModal {
      top: -1px;
      border-radius: 0;
  }

  .Collapsible .react-tabs__tab-panel--selected .react-tabs__tab--selected {
      border: 3px solid #089d49;
      border-radius: 10px !important;
  }

  .Collapsible .react-tabs__tab-panel--selected .react-tabs__tab {
      border: 3px solid #FFF;
      border-radius: 10px !important;
  }

  .dynamic-featured-sections .deal-content-section {
      white-space: normal;
  }

/* ─────────────────────────────────────────────────────────────────────────────
   Scroll behaviour for horizontal rails.

   DO NOT put `touch-action: pan-x` on these containers. `pan-x` does not mean
   "prefer horizontal" — it means the browser may perform ONLY horizontal
   panning for gestures starting here, so a vertical swipe that begins on a deal
   rail scrolls nothing at all. Measured: 0px of page travel with `pan-x`, 345px
   with the default `auto`. The browser's own axis arbitration is the correct
   behaviour for a native overflow rail, because both axes have somewhere to go
   (the rail sideways, the page down).

   `overscroll-behavior-x: contain` is safe and worth keeping: it stops the rail
   from chaining into the page — or into the iOS back-swipe — once it hits its
   end. `-webkit-overflow-scrolling: touch` keeps momentum on older iOS.
   ───────────────────────────────────────────────────────────────────────────── */
.deal-content-section,
.combos-content-section,
.gallery-container,
.frequently-bought-content-section,
.react-tabs__tab-list {
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

/* ─────────────────────────────────────────────────────────────────────────────
   react-simply-carousel tracks (the promo sliders and dynamic-section styles
   2/4/8). These are JS drag carousels, not native scrollers: the mask is
   `overflow: hidden` and the track is moved with a transform.

   The library hardcodes `touch-action: auto` inline on the track and only flips
   it to `none` once its own drag has begun, which means every swipe first waits
   on the browser's scroll/drag arbitration before the carousel reacts — that is
   the "have to hard-swipe, never quite smooth" feel.

   The hint goes on the MASK, not the track, and deliberately WITHOUT
   `!important`. touch-action is resolved as the intersection of the hit element
   and its ancestors, and the library flips the track between `auto` (idle) and
   `none` (drag in progress) for a reason:

       idle:     track auto ∩ mask pan-y  =  pan-y   horizontal reaches the
                                                     carousel with no arbitration
       dragging: track none ∩ mask pan-y  =  none    browser steals nothing
                                                     mid-swipe

   An earlier attempt put `touch-action: pan-y !important` on the *track*. That
   overrode the library's `none`, so the browser stayed free to pan vertically
   during an active drag — every slightly-diagonal thumb swipe scrolled the page
   while the slider was being dragged, which is what made the sliders feel like
   they were fighting back. Putting it on the mask keeps the idle benefit and
   lets the drag lock work. The mask's own style has no touchAction, so ordinary
   specificity is enough.
   ───────────────────────────────────────────────────────────────────────────── */
.hs-carousel-mask {
    touch-action: pan-y;
}

/* NOTE: do NOT put `overscroll-behavior-y: contain` on html/body here.
   On desktop the app renders itself inside a 390px <iframe> (see the centered
   phone-frame wrapper), and this stylesheet loads inside that frame too. With
   `contain` on the frame document's root, Chrome stops the wheel from scrolling
   the framed document at all — desktop scrolling dies completely. Verified by
   dispatching real wheel events: 0px of travel with the rule, the full 287px
   without it. Any scroll-chaining tweak has to be scoped to the touch/mobile
   case, not applied to the document root. */


/* ─────────────────────────────────────────────────────────────────────────────
   Native momentum rail for the long product rows (dynamic-section styles 2 & 4).

   Those rows used react-simply-carousel, which advances exactly `itemsToScroll`
   cards per gesture and has no inertia — measured: a gentle 70px drag and a hard
   360px flick both moved exactly one card. A 27-item row therefore needed 27
   separate swipes, which is the "very hard scroll" complaint.

   A native overflow scroller gets the OS's own inertial flick, rubber-banding
   and GPU-composited scrolling for free, and `scroll-snap-type: x mandatory`
   still parks each card cleanly on its edge. One flick now carries across many
   cards and settles aligned.

   This is only applied to styles 2 and 4, which had `infinite={false}`,
   `centerMode={false}` and no autoplay — so nothing is lost. Style 8 (infinite +
   centre zoom) and the banner sliders (autoplay + infinite loop + dot nav) keep
   their carousel exactly as it was.
   ───────────────────────────────────────────────────────────────────────────── */
.hs-snap-rail {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    /* Cards align just past the rail's own left padding rather than under it. */
    scroll-padding-left: 15px;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.hs-snap-rail::-webkit-scrollbar {
    display: none;
}

.hs-snap-rail > * {
    scroll-snap-align: start;
    /* Cards must keep their intrinsic width; flex would otherwise shrink them
       to fit and the rail would stop scrolling altogether. */
    flex: 0 0 auto;
}

/* Promo sliders rendered by SnapSlider. The generic .hs-snap-rail rules above
   already supply the scroller, snapping and hidden scrollbar; these only adjust
   the snap line to the slider's own 10px gutter and keep each slide from being
   squeezed by the flex container. */
.hs-promo-slider {
    /* One uniform gap for every slide. Previously each slide but the first
       carried its own 10px side margins, so the first pitch was 20px shorter
       than the rest and the snap points drifted out of alignment. */
    gap: 20px;
    scroll-padding-left: 10px;
}

.hs-snap-item {
    scroll-snap-align: start;
    flex: 0 0 auto;
}