@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Francois+One&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Francois+One&family=Freeman&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');


:root {
    --primary: #0c7b09;
    --heading: #032802;
    --text-color: #3c3c3c;
    --white-color: #ffffff;
    --border-color: #e5e5e5;
    --font-main: "Onest", sans-serif;


    /* new added presets */
    --section-heading: #111110;
    --section-para: #7C7C7C;
    --text-muted: #9E9E9E;

    --outline-border: #EEEEEE;

    --yellow-color: #F07C00;
    --blue-color: #008FB3;
    --red-color: #CC0000;
    --violet-color: #A401AC;
    --green-color: #0C7B09;
    --gray-color: #5C5C5C;


    --deals-primary: #954900;
    --primary-grad: linear-gradient(135deg,
            #0c7b09 0%,
            #3fae2a 30%,
            #6ccf3b 65%,
            #b8f15a 100%);
}

/* modal screen fix */
html,
body {
    width: 100%;
    overflow-x: hidden;
}

body.modal-open {
    padding-right: 0 !important;
}

.modal {
    padding-right: 0 !important;
}

.tilte-dark-g {
    color: #032802;
}

::selection {
    background: var(--green-color);
    color: var(--white-color);
}

.user-select-none {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.warning-outline-btn,
.warning-primary-btn,
.warning-yellow-btn,
.secondary-green-btn,
.primary-green-btn {
    padding: 10px 19px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    border: 0px;
}

.primary-green-btn {
    color: var(--white-color);
    background-color: var(--primary);
}

.secondary-green-btn {
    color: var(--primary);
    background-color: #ecf4eb;
}

.warning-yellow-btn {
    color: var(--yellow-color);
    background-color: #FEF5EB;
}

.warning-primary-btn {
    color: var(--white-color);
    background-color: var(--yellow-color);
}

.warning-outline-btn {
    color: var(--yellow-color);
    background-color: var(--white-color);
    border: 1px solid var(--yellow-color);
}

.disabled {
    color: #A0A09A;
    background-color: #D4D4CE;
    border-color: #D4D4CE;
}

.txt-primary {
    color: var(--primary);
}

.txt-lable {
    font-weight: 700;
    font-size: 16px;
    color: var(--section-heading);
    margin-bottom: 0px;
}

.txt-sub-lable {
    font-weight: 500;
    font-size: 14px;
    color: #9C9C9C;
    margin-bottom: 0px;
}

.txt-orange {
    color: #F07C00;
}

.txt-dark {
    color: #202020;
}

/* =========== My Order =============== */
.border-card {
    border: 1px solid var(--outline-border);
    border-radius: 12px;
        padding: 10px;
    background-color: var(--white-color);
}

.my-orders-main .user-profile {
    width: 68px;
    height: 68px;
    border-radius: 50px;
    overflow: hidden;
}

.my-orders-main .user-profile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.user-name-content h5 {
    font-size: 20px;
    font-weight: 700;
    color: var(--section-heading);
}

.user-name-content p {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-muted);
}

/* Tab header */
.myorders-tab-header {
    width: 100%;
}

.myorders-tab-header .nav-item {
    width: 100%;
}

.myorders-tab-header .nav-link {
    width: 100%;
    border: 0;
    border-radius: 8px;
    padding: 16px 18px;
    font-size: 16px;
    font-weight: 500;
    color: var(--section-heading);
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    background: transparent;
}

.myorders-tab-header .nav-link i {
    font-size: 22px;
    line-height: 1;
}

.myorders-tab-header .nav-link.active {
    background: var(--primary);
    color: var(--white-color);
}


.myorders-tab-header .nav-link.active:hover {
    color: var(--white-color);
}

.myorders-tab-header .nav-link.active .order-tab-icon {
    filter: brightness(0) saturate(100%) invert(100%) sepia(93%) saturate(0%) hue-rotate(201deg) brightness(106%) contrast(106%);
}

.tab-content-center {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ops-image-container {
    width: 150px;
    height: 140px;
}

.ops-image-container img {
    width: 100%;
    height: 100%;
}

.card-order-title,
.tab-order-title {
    color: var(--section-heading);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
}

.card-order-title {
    font-size: 18px;
}

.card-order-para,
.tab-order-para {
    color: var(--section-para);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 15px;
}

/* common select width */
.select2-common {
    width: 150px;
}

.select2-container--default .select2-selection--single {
    height: 38px;
    border: 1px solid var(--border-color);
    border-radius: 22px !important;
    display: flex;
    align-items: center;
    padding: 0 36px 0 14px;
    background: var(--white-color);
}

.select2-container--default.select2-container--open .select2-selection--single {
    border-radius: 22px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--section-heading);
    font-size: 14px;
    font-weight: 600;
    line-height: 38px;
    padding: 0;
}


.select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    width: 14px;
    height: 14px;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background-image: url('../images/icon/drop-arrow-down.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow {
    transform: translateY(-50%) rotate(180deg);
}

.select2-dropdown {
    margin-top: 6px;
    border: 1px solid var(--border-color);
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

.select2-results__option {
    padding: 10px 14px;
    font-size: 14px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: #f3f8f3;
    color: var(--section-heading);
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background: #eaf6ea;
    color: var(--primary);
}

.order-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
}

.order-price-flex {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.order-card {
    /* width: 86px;
    height: 86px; */
    border-radius: 14px;
    background-color: #F5F5F5;
    padding: 5px;
}

/* .order-card-list{
    overflow-x: auto;
} */

.product-count {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-count h6 {
    color: #A0A09A;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 0px;
}

.order-status {
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    margin-bottom: 0px;
    padding: 7px 12px;
}

.order-yellow {
    color: var(--yellow-color);
    background-color: #FEF5EB;
}

.order-blue {
    color: var(--blue-color);
    background-color: #D5F7FF;
}

.order-red {
    color: var(--red-color);
    background-color: #F9EDED;
}

.order-violet {
    color: var(--violet-color);
    background-color: #FEECFF;
}

.order-green {
    color: var(--green-color);
    background-color: #EAF3EA;
}

.card-title-main {
    color: var(--section-heading);
    font-size: 18px;
    font-weight: 700;
}

.card-count-main {
    color: #868686;
    font-size: 14px;
    font-weight: 500;
}

.order-card-mini {
    width: 56px;
    height: 56px;
    border-radius: 6px;
    background-color: #F5F5F5;
    padding: 5px;
}

.order-product-info h6 {
    font-size: 16px;
    font-weight: 600;
    color: var(--section-heading);
    margin-bottom: 5px;
}

.order-product-info p {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-muted);
    margin-bottom: 0px;
}

.order-product-price {
    justify-content: end;
}

.order-product-price h6 {
    font-size: 18px;
    color: var(--section-heading);
}

.order-product-price p {
    font-size: 16px;
    color: var(--text-muted);
}

.bill-info-right,
.bill-info-left {
    font-size: 16px;
    font-weight: 500;
    color: var(--gray-color);
    margin-bottom: 0px;
}

.bill-info-right {
    text-align: end;
}

.txt-green {
    color: var(--green-color);
}

.txt-black {
    color: var(--section-heading);
}

/* Order track icon */
#Order-Cancelled,
#Delivered,
#Out-For-Delivery,
#Order-Confirmed,
#Order-Placed {
    border-radius: 6px;
    margin-bottom: 10px;
}

.stage-active#Order-Placed {
    background-color: #FEF5EB;
}

.stage-active#Order-Confirmed {
    background-color: #D5F7FF;
}

.stage-active#Out-For-Delivery {
    background-color: #FEECFF;
}

.stage-active#Delivered {
    background-color: #E8F5E8;
}


.active_icon {
    display: none;
}

.inactive_icon {
    display: block;
}

.stage-completed .inactive_icon,
.stage-active .inactive_icon {
    display: none;
}

.stage-completed .active_icon,
.stage-active .active_icon {
    display: block;
}

#Order-Cancelled h6,
#Delivered h6,
#Out-For-Delivery h6,
#Order-Confirmed h6,
#Order-Placed h6 {
    color: #6B7280;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
}

.stage-active#Order-Placed h6,
.stage-completed#Order-Placed h6 {
    color: var(--yellow-color);
}

.stage-active#Order-Confirmed h6,
.stage-completed#Order-Confirmed h6 {
    color: var(--blue-color);
}

.stage-active#Out-For-Delivery h6,
.stage-completed#Out-For-Delivery h6 {
    color: var(--violet-color);
}

.stage-active#Delivered h6,
.stage-completed#Delivered h6 {
    color: var(--green-color);
}

.stage-active#Order-Cancelled h6,
.stage-completed#Order-Cancelled h6 {
    color: var(--red-color);
}

#Order-Cancelled p,
#Delivered p,
#Out-For-Delivery p,
#Order-Confirmed p,
#Order-Placed p {
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 0px;
}

.order_icons {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
}

.order_icons::before {
    content: "";
    position: absolute;
    width: 1px;
    height: 90px;
    top: -88px;
    left: 50%;
    background: repeating-linear-gradient(to bottom,
            #b6b5b5,
            #b6b5b5 6px,
            transparent 6px,
            transparent 12px);
    z-index: 3;
}

.stage-completed#Order-Confirmed .order_icons::before,
.stage-active#Order-Confirmed .order_icons::before {
    background: #F07C0033;
}

.stage-completed#Out-For-Delivery .order_icons::before,
.stage-active#Out-For-Delivery .order_icons::before {
    background: #A401AC33;
}

.stage-active#Delivered .order_icons::before,
.stage-completed#Delivered .order_icons::before,
.stage-completed#Order-Placed .order_icons::before,
.stage-active#Order-Placed .order_icons::before {
    background: #0C7B0933;
}

.stage-completed#Order-Cancelled .order_icons::before,
.stage-active#Order-Cancelled .order_icons::before {
    background: #008FB333;
}

li:first-child .order_icons::before {
    display: none;
}


/* popup model */
.modal-title {
    font-size: 20px;
    font-weight: 500;
}

.modal-title,
.reason-box h6 {
    color: var(--section-heading);
}

.cancel-modal {
    border-radius: 12px;
    padding: 10px;
}

.reason-box {
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 15px;
}

.form-check-input:checked {
    background-color: #198754;
    border-color: #198754;
}

.form-check-input:focus {
    box-shadow: none;
}

.form-check-label {
    color: var(--gray-color);
}

#otherReasonBox textarea:focus {
    border: 1px solid var(--primary);
    box-shadow: none;
}

.footer-btn {
    display: flex;
    gap: 10px;
}

.footer-btn button {
    flex: 1;
}


/* Order success and reject model */
.order-success-dialog {
    /* max-width: 370px; */
}

.order-success-modal {
    border-radius: 12px;
    border: 0;
}

.order-success-modal .modal-body {
    padding: 28px 28px 24px;
}

.order-success-icon {
    width: 72px;
    height: 72px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    position: relative;

    animation: pulse 1.8s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(11, 135, 11, 0.4);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(11, 135, 11, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(11, 135, 11, 0);
    }
}

.order-success-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 14px;
    color: var(--section-heading);
}

.order-success-text {
    font-size: 14px;
    color: var(--gray-color);
    max-width: 320px;
    margin: 0 auto 20px;
    line-height: 1.5;
}

#orderSuccessModal .secondary-green-btn {
    border: 1px solid var(--primary);
    background-color: var(--white-color);
}

.order-summary-box {
    background: #f4fbf5;
    border: 1px solid #dcefe0;
    border-radius: 8px;
    padding: 14px;
}

.order-summary-box h6 {
    color: #111;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 14px;
}

.order-summary-box h6 i {
    color: #087b08;
    margin-right: 4px;
}

.summary-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--gray-color);
    margin-bottom: 11px;
}

.summary-flex:last-child {
    margin-bottom: 0px;
}

.summary-flex strong {
    color: var(--section-heading);
    font-weight: 700;
}

.model-view-details {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--primary);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.order-cancelled-icon {
    width: 72px;
    height: 72px;
    background: var(--red-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    position: relative;

    animation: pulse-c 1.8s infinite;
}

@keyframes pulse-c {
    0% {
        box-shadow: 0 0 0 0 rgba(204, 0, 0, 0.425);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(250, 229, 229, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(250, 229, 229, 0);
    }
}

/* toast */
.order-custom-toast {
    background-color: #0AA437;
    color: var(--white-color);
    border-radius: 6px;
    font-size: 14px;
    padding: 6px 10px;
    width: fit-content;
}

.search-expand-wrap {
    position: relative;
    width: 38px;
    height: 38px;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-expand-wrap.active {
    width: 290px;
}

.expand-search-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0 44px 0 16px;
    border: 1px solid transparent;
    border-radius: 50px;
    background: #fff;
    font-size: 14px;
    outline: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s, border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.search-expand-wrap.active .expand-search-input {
    opacity: 1;
    pointer-events: all;
    border-color: var(--border-color);

}

/* Button */
.search-toggle,
.search-toggle:focus,
.search-toggle:active,
.search-toggle:focus-visible,
.search-toggle *,
.search-toggle *:focus,
.search-toggle *:active,
.search-toggle *:focus-visible {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.search-toggle {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 50px;
    border: 1px solid transparent !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: background 0.2s, border-color 0.2s;
}


.search-expand-wrap.active .search-toggle {
    border-color: var(--border-color) !important;
    color: var(--border-color);
}

/* =========== Address Flow ============ */
#My-Order-tab-first .nav-link {
    display: flex;
    flex-direction: column;
    justify-items: center;
    text-align: center;
}

#My-Order-tab-first.myorders-tab-header .nav-link.active {
    background: transparent;
    color: var(--section-heading);
    border: 1px solid var(--primary);
}

#My-Order-tab-first.myorders-tab-header .nav-link.active .order-tab-icon {
    filter: none;
}

#My-Order-tab-first.myorders-tab-header .nav-link {
    padding: 16px 0px;
}

.my-address-details .empty-card-center {
    border: 1px solid var(--outline-border);
    border-radius: 12px;
    background-color: var(--white-color);
    height: 70dvh;
}

.my-address-details .tab-lable {
    font-size: 16px;
    font-weight: 500;
    color: var(--section-heading);
    margin-bottom: 10px;
}

.saved-address-card {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: visible;
    background: var(--white-color);
    margin-bottom: 16px;
    position: relative;
}

.saved-address-header {
    background: #e6f5e6;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 700;
    color: var(--section-heading);
}

.saved-address-body {
    padding: 14px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.saved-address-body h6 {
    color: var(--section-heading);
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 6px;
}

.saved-address-body p {
    font-size: 13px;
    color: var(--gray-color);
    margin-bottom: 0;
    line-height: 1.5;
}

.custom-dropdown {
    position: relative;
    display: inline-block;
}

.custom-dropdown .dropdown-toggle-btn {
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    border-radius: 50%;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s ease;
}

.custom-dropdown .dropdown-toggle-btn:hover {
    background: #f2fbf3;
}

.custom-dropdown .dropdown-toggle-btn i {
    font-size: 18px;
}

.custom-dropdown .custom-dropdown-menu {
    position: absolute;
    top: 42px;
    right: 0;
    min-width: 140px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    display: none;
    z-index: 999;
    animation: dropdownShow 0.2s ease;
}

.custom-dropdown.active .custom-dropdown-menu {
    display: block;
}

.custom-dropdown .dropdown-list {
    width: 100%;
    border: none;
    background: transparent;
    padding: 10px 12px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: 0.2s ease;
}

.custom-dropdown .dropdown-list:hover {
    background: #f5f5f5;
}

.custom-dropdown .dropdown-list.delete {
    color: #e53935;
}

.custom-dropdown .dropdown-list.delete:hover {
    background: #fff1f1;
}

@keyframes dropdownShow {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.membership-card {
    background-image: url('../images/img/membership-card.webp');
    background-position: center;
    background-size: cover;
    border-radius: 12px;
    overflow: hidden;
}

.membership-card-title {
    color: var(--white-color);
    font-size: 25px;
    font-weight: 400;
    font-family: Impact;
    margin-bottom: 0px;
}

.membership-card-btn {
    color: var(--section-heading);
    font-size: 14px;
    font-weight: 600;
    border: 0px;
    border-radius: 50px;
    padding: 5px 10px;
    background: linear-gradient(135deg,
            #f9dc4b 0%,
            #ffe978 18%,
            #f3c11c 35%,
            #fff3a1 50%,
            #dca600 68%,
            #f4cf2b 100%);
    display: flex;
    align-items: center;
}

.membership-card-btn img {
    transform: rotate(135deg);
}

.add-address-details-wrapper {
    background: #F3F5F7;
    padding: 10px;
    border-radius: 8px;
    /* max-width: 720px; */
}

.add-address-details-location-card,
.add-address-details-card {
    background: var(--white-color);
    border-radius: 8px;
    padding: 14px 16px;
}

.add-address-details-location-card {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.add-address-details-map-img {
    width: 60px;
    height: 60px;
    border-radius: 6px;
    object-fit: cover;
}

.add-address-details-location-info {
    flex: 1;
}

.add-address-details-location-info h6 {
    color: var(--section-heading);
    margin: 0;
    font-size: 14px;
    font-weight: 700;
}

.add-address-details-location-info p {
    margin: 2px 0 0;
    font-size: 12px;
    color: #444441;
}

.add-address-details-edit-btn {
    border: 1px solid var(--primary);
    color: var(--primary);
    background: var(--white-color);
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
    padding: 5px 13px;
}

.add-address-details-title {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--section-heading);
}

.add-address-details-tabs {
    gap: 10px;
    margin-bottom: 18px;
    border-bottom: 1px dashed var(--border-color);
    padding-bottom: 14px;
}

.add-address-details-tab-btn {
    border: 1px solid #33333030;
    background: var(--white-color);
    color: #616A7B;
    font-size: 14px;
    font-weight: 400;
    border-radius: 4px;
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.add-address-details-tab-btn.active {
    color: var(--primary);
    border-color: #0C7B0954;
    background: var(--white-color);
}

.add-address-details-tab-btn.active img {
    filter: brightness(0) saturate(100%) invert(27%) sepia(95%) saturate(1527%) hue-rotate(89deg) brightness(90%) contrast(93%);
}

.add-address-details-form {
    width: 100%;
    max-width: 370px;
}

.add-address-details-floating-group {
    position: relative;
    margin-bottom: 16px;
}

.add-address-details-floating-group input {
    width: 100%;
    height: 48px;
    border: 1px solid #EBEBEB;
    border-radius: 6px;
    padding: 18px 14px 8px;
    font-size: 14px;
    background: var(--white-color);
    outline: none;
    transition: 0.3s ease;
}

.add-address-details-floating-group input:focus {
    border-color: #EBEBEB;
}

.add-address-details-floating-group label {
    position: absolute;
    left: 14px;
    top: 13px;
    font-size: 14px;
    color: #A0A09A;
    background: var(--white-color);
    padding: 0 4px;
    transition: 0.25s ease;
    pointer-events: none;
}

.add-address-details-floating-group label span {
    color: red;
}

.add-address-details-floating-group input:focus+label,
.add-address-details-floating-group input:not(:placeholder-shown)+label {
    top: -8px;
    left: 12px;
    font-size: 12px;
    color: #A2A2A2;
    z-index: 2;
}

/*=========== Deals Section================ */
.Deals-main .home-banner {
    padding: 60px 50px;
    margin-top: 130px;
    /* height: 100vh; */
    background: url('../images/deals-img/hero-img/hero-banner-bg.webp') no-repeat;
    background-size: cover;
}

.hero-banner-title {
    font-size: 80px;
    font-weight: 400;
    letter-spacing: -2px;
    text-transform: uppercase;
    line-height: 96px;
    font-family: "Archivo Black", sans-serif;
    color: var(--deals-primary);
}

.hero-banner-content {
    font-size: 20px;
    font-weight: 400;
    letter-spacing: -1%;
    line-height: 34px;
    color: #9D7E5E;
}

.hero-banner-btn:active,
.hero-banner-btn:hover,
.hero-banner-btn {
    font-size: 20px;
    font-weight: 700;
    color: var(--white-color);
    text-wrap: nowrap;
    background-color: #F07C00;
    border-radius: 8px;
    padding: 12px 25px;
}

.banner-card {
    background-color: var(--white-color);
    border-radius: 10px;
}

.banner-card-image {
    /* width: 80px; */
    height: 80px;
    background-color: #FFD9A0;
    border-radius: 4px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-card-image img {
    /* width: 60px; */
    /* height: 60px; */
    object-fit: contain;
}

.banner-card-title {
    color: var(--deals-primary);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -1%;
    line-height: 100%;
    margin-bottom: 10px;
}

.banner-card-text {
    color: #7D5F40;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: -1%;
    line-height: 18px;
    margin-bottom: 0px;
}

.Deals-main .btn-list .text {
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: 0px;
    color: var(--white-color);
}

.Deals-main .btn-list .btn-orange {
    width: auto;
}


/* left section */
.img-wrapper {
    width: 430px;
    height: 430px;
    position: relative;
    overflow: visible;
    isolation: isolate;
}

.cart-img {
    width: 430px;
    height: 430px;
    object-fit: contain;
    position: relative;
    z-index: 11;
    transform: translateY(40px);
    z-index: 40;
}

.cart-products-img {
    object-fit: contain;
    position: absolute;
    z-index: 3;
    opacity: 1;
    transform: translate(0, 0) scale(1);
    transition:
        left 1s ease,
        top 1s ease,
        transform 0.7s ease
}

.img-wrapper:hover .cart-products-img {
    z-index: 10;
    transform: scale(1);
}

/* Start Position */
.img-wrapper .product-1 {
    left: -10px;
    top: 30px;
}

.img-wrapper .product-29 {
    left: 15px;
    top: 110px;
}

.img-wrapper .product-2 {
    left: 70px;
    top: 100px;
}

.img-wrapper .product-3 {
    left: 30px;
    top: 160px;
}

.img-wrapper .product-4 {
    left: 270px;
    top: 150px;
}

.img-wrapper .product-5 {
    left: 40px;
    top: 160px;
}

.img-wrapper .product-6 {
    left: 100px;
    top: 40px;
}

.img-wrapper .product-7 {
    left: 110px;
    top: 180px;
}

.img-wrapper .product-8 {
    left: 140px;
    top: 160px;
}

.img-wrapper .product-9 {
    left: 240px;
    top: 150px;
}

.img-wrapper .product-10 {
    left: 170px;
    top: 180px;
}

.img-wrapper .product-11 {
    left: 180px;
    top: 150px;
}

.img-wrapper .product-12 {
    left: 170px;
    top: 120px;
}

.img-wrapper .product-13 {
    left: 180px;
    top: 230px;
}

.img-wrapper .product-14 {
    left: 230px;
    top: 190px;
}

.img-wrapper .product-15 {
    left: 140px;
    top: 190px;
}

.img-wrapper .product-16 {
    left: 250px;
    top: 220px;
}

.img-wrapper .product-17 {
    left: 240px;
    top: 240px;
}

.img-wrapper .product-18 {
    left: 80px;
    top: 230px;
}

.img-wrapper .product-19 {
    left: 220px;
    top: 150px;
}

.img-wrapper .product-20 {
    left: 260px;
    top: 140px;
}

.img-wrapper .product-21 {
    left: 140px;
    top: 230px;
}

.img-wrapper .product-22 {
    left: 200px;
    top: 190px;
}

.img-wrapper .product-23 {
    left: 260px;
    top: 90px;
}

.img-wrapper .product-24 {
    left: 170px;
    top: 90px;
}

.img-wrapper .product-25 {
    left: 180px;
    top: 80px;
}

.img-wrapper .product-26 {
    left: 220px;
    top: 190px;
}

.img-wrapper .product-27 {
    left: 240px;
    top: 200px;
}

.img-wrapper .product-28 {
    left: 300px;
    top: 130px;
}

.img-wrapper .product-30 {
    left: 220px;
    top: 80px;
}

.img-wrapper .product-31 {
    left: 260px;
    top: 120px;
}

.img-wrapper .product-32 {
    left: 260px;
    top: 120px;
}


/* Hover Positions */
.img-wrapper:hover .product-1 {
    left: -50px;
    top: -40px;
}

.img-wrapper:hover .product-29 {
    left: -10px;
    top: 55px;
}

.img-wrapper:hover .product-2 {
    left: 70px;
    top: 35px;
}

.img-wrapper:hover .product-3 {
    left: 0px;
    top: 6px;
}

.img-wrapper:hover .product-4 {
    left: 300px;
    top: 0px;
}

.img-wrapper:hover .product-5 {
    left: 0px;
    top: 60px;
}

.img-wrapper:hover .product-6 {
    left: 60px;
    top: -60px;
}

.img-wrapper:hover .product-7 {
    left: 110px;
    top: 0px;
}

.img-wrapper:hover .product-8 {
    left: 140px;
    top: 70px;
}

.img-wrapper:hover .product-9 {
    left: 240px;
    top: 60px;
}

.img-wrapper:hover .product-10 {
    left: 170px;
    top: -40px;
}

.img-wrapper:hover .product-11 {
    left: 180px;
    top: 40px;
}

.img-wrapper:hover .product-12 {
    left: 180px;
    top: 10px;
}

.img-wrapper:hover .product-13 {
    left: 180px;
    top: 100px;
}

.img-wrapper:hover .product-14 {
    left: 230px;
    top: 20px;
}

.img-wrapper:hover .product-15 {
    left: 140px;
    top: 80px;
}

.img-wrapper:hover .product-16 {
    left: 290px;
    top: 80px;
}

.img-wrapper:hover .product-17 {
    left: 250px;
    top: 0px;
}

.img-wrapper:hover .product-18 {
    left: 80px;
    top: 100px;
}

.img-wrapper:hover .product-19 {
    left: 220px;
    top: 100px;
}

.img-wrapper:hover .product-20 {
    left: 260px;
    top: 30px;
}

.img-wrapper:hover .product-21 {
    left: 140px;
    top: 60px;
}

.img-wrapper:hover .product-22 {
    left: 200px;
    top: 70px;
}

.img-wrapper:hover .product-23 {
    left: 280px;
    top: 40px;
}

.img-wrapper:hover .product-24 {
    left: 120px;
    top: -80px;
}

.img-wrapper:hover .product-25 {
    left: 220px;
    top: -50px;
}

.img-wrapper:hover .product-26 {
    left: 240px;
    top: -30px;
}

.img-wrapper:hover .product-27 {
    left: 300px;
    top: -20px;
}

.img-wrapper:hover .product-28 {
    left: 340px;
    top: 60px;
}

.img-wrapper:hover .product-30 {
    left: 340px;
    top: 0px;
}

.img-wrapper:hover .product-31 {
    left: 260px;
    top: 0px;
}

.img-wrapper:hover .product-32 {
    left: 260px;
    top: 0px;
}

/* z-index */
.img-wrapper .product-1,
.img-wrapper:hover .product-1 {
    width: 140px;
    height: 174px;
    z-index: 12;
}

.img-wrapper .product-2,
.img-wrapper:hover .product-2 {
    width: 73px;
    height: 100px;
    z-index: 7;
}

.img-wrapper .product-3,
.img-wrapper:hover .product-3 {
    width: 77px;
    height: 87px;
    z-index: 24;
}

.img-wrapper .product-4,
.img-wrapper:hover .product-4 {
    width: 78px;
    height: 109px;
    z-index: 15;
}

.img-wrapper .product-5,
.img-wrapper:hover .product-5 {
    width: 87px;
    height: 108px;
    z-index: 33;
}

.img-wrapper .product-6,
.img-wrapper:hover .product-6 {
    width: 96px;
    height: 149px;
    z-index: 4;
}

.img-wrapper .product-7,
.img-wrapper:hover .product-7 {
    width: 82px;
    height: 92px;
    z-index: 27;
}

.img-wrapper .product-8,
.img-wrapper:hover .product-8 {
    width: 64px;
    height: 90px;
    z-index: 18;
}

.img-wrapper .product-9,
.img-wrapper:hover .product-9 {
    width: 73px;
    height: 96px;
    z-index: 9;
}

.img-wrapper .product-10,
.img-wrapper:hover .product-10 {
    width: 83px;
    height: 101px;
    z-index: 20;
}

.img-wrapper .product-11,
.img-wrapper:hover .product-11 {
    width: 71px;
    height: 60px;
    z-index: 32;
}

.img-wrapper .product-12,
.img-wrapper:hover .product-12 {
    width: 71px;
    height: 50px;
    z-index: 13;
}

.img-wrapper .product-13,
.img-wrapper:hover .product-13 {
    width: 71px;
    height: 50px;
    z-index: 28;
}

.img-wrapper .product-14,
.img-wrapper:hover .product-14 {
    width: 77px;
    height: 50px;
    z-index: 11;
}

.img-wrapper .product-15,
.img-wrapper:hover .product-15 {
    width: 64px;
    height: 49px;
    z-index: 30;
}

.img-wrapper .product-16,
.img-wrapper:hover .product-16 {
    width: 64px;
    height: 49px;
    z-index: 16;
}

.img-wrapper .product-17,
.img-wrapper:hover .product-17 {
    width: 81px;
    height: 50px;
    z-index: 29;
}

.img-wrapper .product-18,
.img-wrapper:hover .product-18 {
    width: 73px;
    height: 42px;
    z-index: 26;
}

.img-wrapper .product-19,
.img-wrapper:hover .product-19 {
    width: 66px;
    height: 56px;
    z-index: 5;
}

.img-wrapper .product-20,
.img-wrapper:hover .product-20 {
    width: 56px;
    height: 51px;
    z-index: 21;
}

.img-wrapper .product-21,
.img-wrapper:hover .product-21 {
    width: 77px;
    height: 36px;
    z-index: 10;
}

.img-wrapper .product-22,
.img-wrapper:hover .product-22 {
    width: 67px;
    height: 51px;
    z-index: 2;
}

.img-wrapper .product-23,
.img-wrapper:hover .product-23 {
    width: 77px;
    height: 55px;
    z-index: 25;
}

.img-wrapper .product-24,
.img-wrapper:hover .product-24 {
    width: 90px;
    height: 93px;
    z-index: 6;
}

.img-wrapper .product-25,
.img-wrapper:hover .product-25 {
    width: 65px;
    height: 55px;
    z-index: 17;
}

.img-wrapper .product-26,
.img-wrapper:hover .product-26 {
    width: 64px;
    height: 48px;
    z-index: 1;
}

.img-wrapper .product-27,
.img-wrapper:hover .product-27 {
    width: 69px;
    height: 48px;
    z-index: 23;
}

.img-wrapper .product-28,
.img-wrapper:hover .product-28 {
    width: 72px;
    height: 48px;
    z-index: 8;
}

.img-wrapper .product-29,
.img-wrapper:hover .product-29 {
    width: 81px;
    height: 85px;
    z-index: 31;
}

.img-wrapper .product-30,
.img-wrapper:hover .product-30 {
    width: 62px;
    height: 79px;
    z-index: 14;
}

.img-wrapper .product-31,
.img-wrapper:hover .product-31 {
    width: 61px;
    height: 79px;
    z-index: 3;
}

.img-wrapper .product-32,
.img-wrapper:hover .product-32 {
    width: 53px;
    height: 67px;
    z-index: 33;
}

.cart-float-icons-1 {
    width: 72px;
    height: 84px;
    position: absolute;
    top: -20px;
    left: -40px;
    z-index: 40;
    animation: floatingProduct 3s ease-in-out infinite;
}

.cart-float-icons-2 {
    width: 216px;
    height: 86px;
    position: absolute;
    top: -20px;
    right: -50px;
    z-index: 40;
    animation: floatingProduct 3s ease-in-out infinite;
}

.cart-float-icons-3 {
    width: 72px;
    height: 80px;
    position: absolute;
    bottom: 100px;
    right: 0px;
    z-index: 40;
    animation: floatingProduct 3s ease-in-out infinite;
}

.cart-float-icons-4 {
    width: 72px;
    height: 84px;
    position: absolute;
    bottom: 60px;
    left: -30px;
    z-index: 40;
    animation: floatingProduct 3s ease-in-out infinite;
}

@keyframes floatingProduct {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-8px);
    }

    100% {
        transform: translateY(0px);
    }
}

@media (max-width: 768px) {

    .home-banner .img-wrapper {
        margin-top: 100px !important;
    }

}

/*======= salad-sec-details ====== */
.my-orders-main {
    margin-top: 140px;
}

.salad-sec-details {
    margin-top: 170px !important;
}

.tab-order-content .border-card {
    height: auto;
}

/* ====== Deals Section ======== */
.deals-cta-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    background-image: url('../images/deals-img/deals-cta-bg.webp');
    background-size: cover;
    padding: 10px 20px;
}

.deals-cta-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.deals-cta-details,
.deals-cta-image {
    position: relative;
    z-index: 2;
}

.deals-cta-image img {
    width: 100%;
    object-fit: contain;
    transform: translateY(25px);
}

.deals-cta-title {
    font-size: 96px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -2%;
    margin-bottom: 18px;
    text-transform: uppercase;
    color: #ffd21c;
    text-shadow:
        0 2px 0 #b67b00,
        0 4px 12px rgba(0, 0, 0, 0.25);
}

.deals-cta-title span {
    color: #fff;
}

.deals-cta-text {
    max-width: 700px;
    color: #F3DE8C;
    font-size: 18px;
    font-weight: 300;
    line-height: 30px;
    letter-spacing: -2%;
    margin-bottom: 24px;
}

.deals-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* min-width: 145px;
    height: 50px; */
    padding: 10 28px;
    border-radius: 10px;
    background: #FFD119;
    color: #744110;
    font-size: 20px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s ease;
}

.deals-cta-btn:hover {
    background: #FFE15F;
    color: #2D1A00;
}

/*=========== Special Offer For You ========= */
.special-offer-main {
    overflow: hidden;
    background-image: url('../images/deals-img/deals-swipper-bg.webp');
    background-size: cover;
    padding: 10px 0px;
}

.special-offer-title {
    color: var(--section-heading);
    font-size: 64px;
    font-weight: 800;
    line-height: 100%;
    letter-spacing: -2%;
    margin-bottom: 14px;
}

.special-offer-text {
    color: #4A4A4A;
    font-size: 24px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: -1%;
    margin-bottom: 0px;
}

.specialOfferSwiper {
    height: 120px;
}

.specialOfferSwiper .swiper-wrapper {
    align-items: center;
}

.specialOfferSwiper .swiper-slide {
    width: 260px !important;
    height: 120px !important;
    display: flex;
}

/* .special-offer-card {
    width: 100%;
    height: 120px;
    border-radius: 12px;
    background: #fff;
} */

.offer-product-card {
    width: 260px;
    height: 120px;
    background: #fff;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    position: relative;
    overflow: hidden;
}

.offer-badge {
    position: absolute;
    top: 0;
    left: 0;
    background: #ff6b00;
    color: #fff;
    font-size: 11px;
    padding: 4px 12px;
    border-bottom-right-radius: 14px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    z-index: 2;
}

.offer-img-box {
    width: 90px;
    height: 90px;
    flex: 0 0 90px;
    border-radius: 12px;
    overflow: hidden;
    background: #f5f5f5;
}

.offer-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.offer-product-details {
    flex: 1;
}

.offer-product-details h4 {
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 3px;
    color: #222;
    letter-spacing: -1%;
    line-height: 16px;
}

.offer-product-details .offer-qty {
    font-size: 12px;
    margin-bottom: 5px;
    color: #5C5C5C;
}

.offer-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.offer-price-row h5 {
    color: var(--section-heading);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: -1%;
    margin: 0;
}

.offer-price-row .offer-price {
    font-size: 12px;
    color: #5C5C5C;
    font-weight: 600;
    margin-bottom: 0px;
}

.offer-action {
    width: 76px;
    height: 38px;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    transition: width 0.35s ease;
    background: #0b7a22;
}

.offer-action.active {
    width: 82px;
}

.offer-add-btn,
.offer-counter {
    position: absolute;
    inset: 0;
    height: 100%;
    border: 0;
}

.offer-add-btn {
    width: 100%;
    background: #0b7a22;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.35s ease;
}

.offer-counter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* padding: 0 10px; */
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.35s ease;
    pointer-events: none;
}

.offer-counter button {
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    padding: 0px 10px;
    /* width: 28px;
    height: 28px;
    line-height: 1; */
}

.offer-counter button:focus,
.offer-counter button:hover {
    border: 0px !important;
    outline: 0px !important;
}

.offer-counter .count {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    min-width: 20px;
    text-align: center;
    display: inline-block;
}

.offer-action.active .offer-add-btn {
    opacity: 0;
    transform: translateX(-40px);
    pointer-events: none;
}

.offer-action.active .offer-counter {
    opacity: 1;
    transform: translateX(0);
    pointer-events: all;
}

/* ============= Fresh Section ============= */
.fresh-main .home-banner {
    padding: 60px 50px;
    margin-top: 130px;
    /* height: 100vh; */
    background: url('../images/fresh-img/fresh-hero-banner-bg.webp') no-repeat;
    background-size: cover;
}

.fresh-main .hero-banner-content,
.fresh-main .hero-banner-title {
    color: var(--white-color);
}

.fresh-main .hero-banner-title {
    font-family: "Montserrat";
    font-weight: 900;
    font-size: 96px;
}

.fresh-main .img-wrapper {
    width: 470px;
    height: 420px;
    position: relative;
    overflow: visible;
    isolation: isolate;
}

.hero-banner-img {
    width: 470px;
    height: 420px;
    object-fit: contain;
    position: relative;
    scale: 1.8;
    z-index: 11;
}

.fresh-main .btn-list .text {
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: 0;
    color: var(--white-color);
}

.fresh-main .cart-float-icons-1 {
    width: 150px;
    height: 150px;
}

.fresh-main .cart-float-icons-2 {
    width: 277px;
    height: 100px;
}

.fresh-main .cart-float-icons-3 {
    width: 94px;
    height: 94px;
}

.fresh-main .cart-float-icons-4 {
    width: 127px;
    height: 127px;
}

/* ========== Every day Fresh Section ========== */
.every-day-fresh-wrapper {
    border-radius: 12px;
    background: url('../images/fresh-img/every-day-fresh-bg.webp') no-repeat;
    background-size: cover;
}

.fresh-cta-img-wrapper {
    width: 390px;
    height: 390px;
    object-position: center;
    padding: 10px 20px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.fresh-cta-title {
    font-family: "Montserrat";
    font-size: 121px;
    font-weight: 900;
    line-height: 124px;
    letter-spacing: -1%;
    text-transform: uppercase;
    margin-bottom: 8px;
    background: linear-gradient(to right, #538A00, #44661A);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.fresh-cta-span {
    width: 137px;
    height: 137px;
    bottom: 0;
    right: 260px;
    /* transform: rotate(12deg); */
}

.fresh-cta-text {
    font-family: "Nunito";
    font-size: 40px;
    font-weight: 600;
    line-height: 100%;
    letter-spacing: -2%;
    color: #5A802D;
    margin-bottom: 0px;
}

.eat-fresh-wrapper {
    border-radius: 20px;
    background: url('../images/fresh-img/eat-fresh-bg.webp') no-repeat;
    background-size: cover;
}

.eat-freshimg-left-wrapper {
    width: 240px;
    height: 270px;
    object-fit: cover;
    object-position: center;
}

.eat-freshimg-left-wrapper img {
    width: 100%;
    height: 100%;
}

.eat-freshimg-right-wrapper {
    width: 270px;
    height: 245px;
    object-fit: cover;
    object-position: center;

    display: flex;
    align-items: center;
    justify-content: center;
}

.eat-freshimg-right-wrapper img {
    width: 100%;
    height: 100%;
}

.eat-freshimg-center {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
}

.eat-freshimg-center h1 {
    font-family: "Francois One";
    color: var(--white-color);
    font-size: 96px;
    font-weight: 400;
    line-height: 96px;
    letter-spacing: -1%;
    text-transform: uppercase;
    margin-bottom: 0px;
}

.fresh-main .explore-categories.gro-category-section .category-card {
    background-color: #F4F8F1;
    border: 2.9px solid #ECF7E4;
}

html.loading,
body.loading {
    overflow: hidden !important;
    height: 100%;
}

html {
    scrollbar-gutter: stable;
}

.page-content {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease;
}

.page-content.show-content {
    opacity: 1;
    visibility: visible;
}

.site-loader {
    position: fixed;
    inset: 0;
    background: #fff;
    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
    pointer-events: none;

    clip-path: circle(150% at 50% 50%);
    transition: clip-path 1.2s cubic-bezier(0.76, 0, 0.24, 1);
    will-change: clip-path;
}

/* inward circle close animation */
.site-loader.hide-loader {
    clip-path: circle(0% at 50% 50%);
}

.loader-gif {
    width: clamp(90px, 10vw, 120px);
    height: clamp(90px, 10vw, 120px);
    object-fit: contain;
    position: relative;
    z-index: 2;
    animation: loaderFloat 2.5s ease-in-out infinite;
}

@keyframes loaderFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* --- */
.policy-section {
    padding: 50px 0;
    background: #fff;
    margin-top: 150px;
}

/* .policy-row {
    align-items: flex-start;
} */

.policy-header {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    align-items: center;
    margin-bottom: 25px;
}

.policy-title {
    font-size: 32px;
    font-weight: 800;
    color: var(--section-heading);
    margin: 0;
}

.policy-updated {
    font-size: 13px;
    font-weight: 600;
    background: #30B325;
    padding: 8px 14px;
    border-radius: 6px;
    color: var(--white-color);
    white-space: nowrap;
}

.policy-desc {
    font-size: 15px;
    line-height: 1.8;
    color: var(--section-para);
    margin-bottom: 25px;
}

.policy-block {
    margin-bottom: 26px;
}

.policy-block h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--section-heading);
    margin-bottom: 10px;
}

.policy-block p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--section-para);
    margin-bottom: 10px;
}

.policy-block ul {
    padding-left: 0;
    margin: 0;
    list-style: none;
}

.policy-block li {
    position: relative;
    font-size: 14px;
    color: var(--section-para);
    margin-bottom: 8px;
    padding-left: 18px;
    line-height: 1.6;
}

.policy-block li::before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--green-color);
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 9px;
}

.policy-block a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

.policy-contact-card {
    background: url('../images/fresh-img/fresh-hero-banner-bg.webp') no-repeat;
    filter: hue-rotate(35deg) saturate(120%) brightness(95%);
    background-position: top;
    background-size: cover;
    border-radius: 12px;
    padding: 28px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
}

.policy-contact-card h3 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 10px;
    color: var(--white-color);
}

.policy-contact-card p {
    font-size: 14px;
    color: var(--white-color);
    line-height: 1.6;
    margin-bottom: 22px;
}

.policy-contact-item {
    height: 100%;
}

.policy-contact-item strong {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: var(--white-color);
    margin-bottom: 6px;
}

.policy-contact-item span {
    display: block;
    font-size: 14px;
    color: var(--white-color);
    line-height: 1.6;
}

/* ========== Limited time offer ====== */
.limited-offer-main {
    margin-top: 160px;
}

.limited-time-offer {
    margin-top: 40px;
    margin-bottom: 40px;
    border-radius: 12px;
    background: linear-gradient(90deg, #FFA647 0%, #F07C00 100%);
}

.limited-offer-img-container {
    position: relative;
    height: 260px;
    background-image: url('../images/deals-img/limited-offer-layer-0.webp');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: cover;
    background-size: 110%;
}

.limited-offer-img-2 {
    position: absolute;
    top: -20px;
    width: 500px;
    height: 280px;
    object-fit: contain;
    opacity: 1;
}


.limited-time-offer-counter {
    height: 165px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: clamp(0px, 1vw, 22px);
    padding: 20px 30px;
}

.offer-time-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
}

.offer-time-box h3 {
    width: clamp(40px, 8vw, 100px);
    height: clamp(40px, 8vw, 100px);

    border-radius: 8px;
    background: #FFBA71;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: clamp(20px, 4vw, 56px);
    font-weight: 700;
    color: #321A00;

    margin-bottom: 10px;
}

.offer-time-box span {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}

.offer-dot {
    color: #FFBA71;
    font-size: 34px;
    font-weight: 800;
    margin-bottom: 20px;
}

.limited-time-products .section-title {
    color: #5C2D00;
}

.section-product-total {
    color: #444441;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -1%;
    margin-bottom: 0px;
}

.nav-inner a:nth-child(1).active {
    filter: brightness(0) saturate(100%) invert(26%) sepia(98%) saturate(1191%) hue-rotate(89deg) brightness(95%) contrast(93%);
}

.nav-inner a:nth-child(2).active {
    filter: brightness(0) saturate(100%) invert(45%) sepia(24%) saturate(5046%) hue-rotate(62deg) brightness(89%) contrast(91%);
}

.nav-inner a:nth-child(3).active {
    filter: brightness(0) saturate(100%) invert(25%) sepia(99%) saturate(1326%) hue-rotate(18deg) brightness(95%) contrast(102%);
}

.nav-inner a:nth-child(4).active {
    filter: brightness(0) saturate(100%) invert(26%) sepia(98%) saturate(1191%) hue-rotate(89deg) brightness(95%) contrast(93%);
}

.nav-inner a:nth-child(5).active {
    filter: brightness(0) saturate(100%) invert(41%) sepia(98%) saturate(816%) hue-rotate(33deg) brightness(90%) contrast(102%);
}

.header-actions .hdr-btn.active {
    background-color: #F07C00;
}

.header-actions .hdr-btn.active img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(340deg) brightness(116%) contrast(103%);
}

.salad-inner-accordion .accordion-collapse {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .45s ease, opacity .25s ease;
}

.salad-inner-accordion .accordion-collapse>.accordion-body {
    min-height: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    transition: padding .35s ease;
}

.salad-inner-accordion .accordion-collapse.open {
    grid-template-rows: 1fr;
    opacity: 1;
}

.salad-inner-accordion .accordion-collapse.open>.accordion-body {
    padding-top: 16px;
    padding-bottom: 16px;
}

.cart-added-wrapper {
    position: relative;
    display: inline-block;
}

.cart-added-box {
    position: absolute;
    top: calc(100% + 30px);
    right: -8px;
    width: 320px;
    background: var(--white-color);
    border-radius: 8px;
    padding: 14px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.22);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: 0.25s ease;
    z-index: 9999;
}

.cart-added-box::before {
    content: "";
    position: absolute;
    top: -10px;
    right: 28px;
    width: 24px;
    height: 24px;
    background: var(--white-color);
    transform: rotate(45deg);
    border-radius: 4px;
}


.cart-added-wrapper.cart-added-active .cart-added-box {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.cart-added-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
}

.cart-added-success {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
}

.cart-added-close {
    display: flex;
    gap: 10px;
    align-items: center;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.cart-added-list {
    max-height: 300px;
    overflow-y: auto;
    padding-right: 6px;
    margin: 12px 0;
}

.cart-added-item {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.cart-added-img {
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    border-radius: 5px;
    background: #f1f1f1;
    overflow: hidden;
}

.cart-added-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
}

.cart-added-info h6 {
    font-size: 13px;
    font-weight: 600;
    margin: 0;
    color: #333;
}

.cart-added-info p {
    font-size: 10px;
    color: #777;
    margin: 2px 0 8px;
}

.cart-added-info .cart-added-price {
    display: inline-block;
    font-size: 15px;
    font-weight: 700;
    color: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 7px;
    padding: 2px 8px;
}

.cart-added-cart-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 11px;
    border: 1px solid var(--primary);
    border-radius: 6px;
    color: var(--primary);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s ease;
    position: relative;
    overflow: hidden;
    background: var(--white-color);
}

.cart-added-cart-btn:hover {
    background: var(--primary);
    color: var(--white-color);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(21, 151, 41, 0.25);
}

.cart-added-cart-btn:active {
    transform: scale(0.98);
}

@media (min-width: 992px) {
    .cart-added-list {
        max-height: 370px;
    }
}

@media (max-width: 575px) {
    .cart-added-box {
        position: fixed;
        left: 50%;
        right: auto;
        top: 90px;
        width: calc(100% - 34px);
        max-width: 320px;
        transform: translate(-50%, 10px);
    }

    .cart-added-wrapper:hover .cart-added-box {
        opacity: 0;
        visibility: hidden;
        transform: translate(-50%, 10px);
    }

    .cart-added-wrapper.cart-added-active .cart-added-box {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
    }

    .cart-added-box::before {
        display: none;
    }

    .cart-added-list {
        max-height: 220px;
    }
}

.view-salad-sec {
    margin-top: 110px;
}

.grocery-tab-sec .tab-panel {
    display: none;
}

.grocery-tab-sec .tab-panel.active {
    display: block;
}

.grocery-tab-sec .tab-panel.active .product-card {
    animation: cardReveal 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    animation-fill-mode: both;
}

@keyframes cardReveal {
    from {
        opacity: 0;
        transform: translateY(35px) scale(.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.fresh_farm_cta .cart-btn.border-0-5 {
    border: 0.5px solid var(--primary) !important;
}

.fresh_farm_cta .cta-products-list.product-section .product-card .cart-btn {
    height: 17px;
    width: 17px;
}

.fresh_farm_cta .cta-products-list.product-section .product-card .minus-btn,
.fresh_farm_cta .cta-products-list.product-section .product-card .count-val {
    font-size: 10px;
}

/* .fresh_farm_cta .cta-products-list.product-section .product-card {
    height: 110px;
}
.fresh_farm_cta .cta-products-list.product-section .product-card {
    height: 110px;
}
.fresh_farm_cta .cta-products-list.product-section .product-card .img-area {
    height: 70px;
}

.fresh_farm_cta .cta-products-list.product-section .product-card .img-area img {
    height: 55px;
} */
.fresh_farm_cta .cta-products-list.product-section .product-card .count-val {
    padding-left: 1rem;
}

.lang-dropdown {
    display: block;
}

.lang-dropdown.dd-close {
    display: none;
}

/* Language dropdown on mobile: the desktop rule anchors the 180px box at
   right:-80px. On phones the language button sits left-of-centre, so anchoring
   to its RIGHT pushed the box off the left edge (hidden) at 320px. Anchor it to
   the button's LEFT edge (extend rightward), cap the width to the viewport, and
   slightly narrow it so it always stays fully on-screen. */
@media (max-width: 767.98px) {
    .main-header .lang-dropdown {
        left: 0;
        right: auto;
        min-width: 160px;
        max-width: calc(100vw - 16px);
    }
}

.goog-te-gadget-icon,
.goog-te-banner-frame,
.goog-te-balloon-frame,
.skiptranslate iframe {
    display: none !important;
}

/* .yt-vlogs-main .yt-vlogs-link {
  color: #6ca84f;
  text-decoration: none;
  font-weight: 600;
} */
/* .yt-vlogs-main .swiper-wrapper{
    height: fit-content;
} */

.yt-vlogs-main .yt-vlogs-swiper {
    width: 100%;
    height: auto !important;
    overflow: hidden;
}

.yt-vlogs-main .swiper-wrapper {
    align-items: stretch;
    height: auto !important;
    transition-timing-function: linear !important;
}

/* Homepage spacing: edit these two variables to adjust every section together. */
.home-section-spacing {
    --home-section-space: 42px;
    --home-section-space-mobile: 24px;
}

.home-section-spacing main > section {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: var(--home-section-space) !important;
    padding-bottom: var(--home-section-space) !important;
}

/* Dynamic home hero keeps the original banner spacing and background design. */
.home-section-spacing main > .home-dynamic-hero {
    /* margin-top: 130px !important; */
    padding: 60px 50px !important;
}

.home-hero-video-wrap {
    width: min(1180px, 100%);
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 18px;
    background: #000;
    box-shadow: 0 18px 45px rgba(3, 40, 2, 0.12);
}

.home-hero-video-wrap iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* All Essentials two-row slider: adjust these heights when card sizing changes.
   Swiper's Grid module splits this height into the two rows, so it has to cover
   2 cards + the row gap. At 340px each row got 152px while a card with a two-line
   label is 170px, so the second row was cut off 12-18px short and the second line of
   every name in it disappeared. 376px = 2x170 + the widest row gap (36px at >=1200px);
   the narrower gaps at 992px/768px (30/24px) just leave a few px of slack. */
.home-section-spacing {
    --home-essentials-slider-height: 376px;
    --home-essentials-slider-height-mobile: 310px;
}

.all-essentials .home-essentials-swiper {
    height: var(--home-essentials-slider-height);
}

.all-essentials .home-essentials-swiper .swiper-wrapper {
    height: 100%;
}

.all-essentials .home-essentials-swiper.swiper-grid > .swiper-wrapper {
    flex-wrap: wrap;
}

@media (max-width: 767px) {
    .home-section-spacing main > section {
        padding-top: var(--home-section-space-mobile) !important;
        padding-bottom: var(--home-section-space-mobile) !important;
    }

    .all-essentials .home-essentials-swiper {
        height: var(--home-essentials-slider-height-mobile);
    }

    .home-section-spacing main > .home-dynamic-hero {
        /* Clear the mobile fixed header (logo + delivery location + search) */
        margin-top: 110px !important;
        padding: 40px 15px !important;
    }

    .home-hero-video-wrap {
        border-radius: 10px;
    }
}

.yt-vlogs-main .swiper-slide {
    height: auto !important;
    cursor: grab;
}

.yt-vlogs-main .swiper-slide:active {
    cursor: grabbing;
}

.yt-vlogs-main .yt-vlogs-card {
    position: relative;
    width: 100%;
    height: 89%;
    aspect-ratio: 8 / 16;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}

.yt-vlogs-main .yt-vlogs-card iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.vlog-swipe-overlay {
    display: none;
}

@media (max-width: 991px) {
    .vlog-swipe-overlay {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 2;
        cursor: pointer;
        background: transparent;
    }
    .vlog-swipe-overlay.tapped {
        display: none;
    }
}

/* =============== About Section ================ */
.about-banner {
    position: relative;
    overflow: hidden;
    height: 100dvh;
}

.about-banner-title,
.about-banner-subtitle {
    position: relative;
    z-index: 2;
    transform-origin: center;
}

.about-banner-content {
    position: relative;
    z-index: 12;
    will-change: transform, opacity;
}

.tree-1,
.tree-leaf,
.cloud-1,
.cloud-2,
.cloud-bar {
    will-change: transform;
}

.about-banner {
    margin-top: 130px;
    background: url('../images/about-us/about-us-banner/about-banner-bg.webp') no-repeat;
    background-position: center;
    background-size: cover;
    overflow: hidden;

    height: 100dvh;
}

.about-banner-title {
    color: var(--white-color);
    font-size: 72px;
    font-weight: 800;
    line-height: 100%;
    letter-spacing: 1px;
    margin-bottom: 14px;
    transform-style: flat;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: subpixel-antialiased;
}

.about-title-zoom-letter {
    display: inline-block;
}

/* .about-banner-title{
    color: var(--white-color);
    font-family: "Freeman", sans-serif;
    font-size: 96px;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 0px;
    margin-bottom: 14px;
} */
.about-banner-subtitle {
    color: var(--white-color);
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    letter-spacing: 0px;

    width: 75%;
    margin: 0 auto;
}

.tree-1 {
    width: clamp(300px, 42vw, 600px);
    height: clamp(182px, 26vw, 370px);

    object-fit: contain;
    object-position: center;

    top: 0;
    left: 0;
    z-index: 1;
}

.tree-leaf {
    width: clamp(350px, 70vw, 900px);
    height: clamp(350px, 42vw, 540px);

    background: url('../images/about-us/about-us-banner/about-leaf.webp');
    background-repeat: repeat;
    background-position: 0 0;
    background-size: clamp(400px, 78vw, 1000px) auto;

    inset: 0;
    z-index: 1;
    position: absolute;

    animation: leafGroupFall 8s linear infinite;
}

@keyframes leafGroupFall {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 180px 220px;
    }
}

.cloud-2,
.cloud-1 {
    width: clamp(180px, 40vw, 530px);
    height: clamp(100px, 23vw, 300px);

    object-fit: contain;
    object-position: center;
    z-index: 3;
}

.cloud-1 {
    top: 15%;
    left: 35%;
    transform: translateX(-50%);

    animation: cloudMoveLeft 18s ease forwards;
}

.cloud-2 {
    top: 30%;
    right: -5%;
    transform: translateX(-50%);

    animation: cloudMoveRight 18s ease forwards;
}

/* @keyframes cloudMoveLeft{
    0%{
        transform: translateX(-50%) translateX(0);
    }

    100%{
        transform: translateX(-50%) translateX(-205px);
    }
}

@keyframes cloudMoveRight{
    0%{
        transform: translateX(-50%) translateX(0);
    }

    100%{
        transform: translateX(-50%) translateX(205px);
    }
} */

.cloud-bar {
    left: 0;
    bottom: -140px;
    transform: scale(1.3);
    width: 100%;
    height: 180px;
    pointer-events: none;

    background-color: white;

    filter: blur(35px);
}

.about-white-overlay {
    --about-wave-x: 50%;
    --about-wave-y: 50%;

    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    z-index: 10;
    clip-path: circle(0 at var(--about-wave-x) var(--about-wave-y));
    will-change: opacity, clip-path;
}

/* ------------------------ */
.simple-section {
    position: relative;
    z-index: 2;
    height: 100vh;
    overflow: hidden;
    background: #fff;
}

.simple-text-wrap {
    position: relative;
    width: 100%;
    height: 100%;
}

.simple-section-title {
    --fill-width: 0%;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;

    font-size: clamp(28px, 5vw, 64px);
    font-weight: 700;
    /* line-height: 1; */
    text-align: center;
    text-transform: uppercase;

    opacity: 0;
    z-index: 2;

    /* outline */
    color: transparent;
    -webkit-text-stroke: 1px var(--primary);

    /* solid primary fill */
    background:
        linear-gradient(to right,
            var(--primary) 0%,
            var(--primary) var(--fill-width),
            transparent var(--fill-width),
            transparent 100%);

    background-repeat: no-repeat;
    background-size: 100% 100%;

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    will-change: transform, opacity;
}

.simple-img {
    width: clamp(38px, 5vw, 70px);
    height: clamp(38px, 5vw, 70px);
    position: absolute;
    object-fit: contain;
    object-position: center;
    z-index: 2;
    will-change: transform;
}

.simple-img-1 {
    top: clamp(-320px, -18vw, -90px);
    left: clamp(10px, 3vw, 20px);
    animation: floatOne 5s ease-in-out infinite alternate;
}

.simple-img-2 {
    top: clamp(-290px, -16vw, -80px);
    left: clamp(22%, 28vw, 350px);
    animation: floatTwo 6.5s ease-in-out infinite alternate;
}

.simple-img-3 {
    top: clamp(-350px, -20vw, -100px);
    left: clamp(55%, 62vw, 750px);
    animation: floatThree 5.8s ease-in-out infinite alternate;
}

.simple-img-4 {
    top: clamp(-290px, -16vw, -80px);
    right: clamp(10px, 3vw, 20px);
    animation: floatFour 7s ease-in-out infinite alternate;
}

.simple-img-5 {
    bottom: clamp(-350px, -20vw, -100px);
    left: clamp(8%, 10vw, 100px);
    animation: floatFive 6s ease-in-out infinite alternate;
}

.simple-img-6 {
    bottom: clamp(-380px, -22vw, -110px);
    left: clamp(45%, 50vw, 600px);
    animation: floatSix 7.5s ease-in-out infinite alternate;
}

.simple-img-7 {
    bottom: clamp(-320px, -18vw, -90px);
    right: clamp(10px, 6vw, 70px);
    animation: floatSeven 6.8s ease-in-out infinite alternate;
}

@keyframes floatOne {
    from {
        transform: translate(0, 0) rotate(0deg);
    }

    to {
        transform: translate(18px, -28px) rotate(5deg);
    }
}

@keyframes floatTwo {
    from {
        transform: translate(0, 0) rotate(0deg);
    }

    to {
        transform: translate(-24px, 20px) rotate(-4deg);
    }
}

@keyframes floatThree {
    from {
        transform: translate(0, 0) rotate(0deg);
    }

    to {
        transform: translate(20px, -18px) rotate(6deg);
    }
}

@keyframes floatFour {
    from {
        transform: translate(0, 0) rotate(0deg);
    }

    to {
        transform: translate(-22px, -30px) rotate(-5deg);
    }
}

@keyframes floatFive {
    from {
        transform: translate(0, 0) rotate(0deg);
    }

    to {
        transform: translate(28px, 16px) rotate(4deg);
    }
}

@keyframes floatSix {
    from {
        transform: translate(0, 0) rotate(0deg);
    }

    to {
        transform: translate(-20px, -26px) rotate(-6deg);
    }
}

@keyframes floatSeven {
    from {
        transform: translate(0, 0) rotate(0deg);
    }

    to {
        transform: translate(24px, -16px) rotate(5deg);
    }
}

/* ----------------------- */
.vision-products-section {
    min-height: 100vh;
    overflow: hidden;
    position: relative;
    padding: 100px 0;
}

.vision-title {
    color: #032802;
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    line-height: 1.2;
}

.vision-para {
    color: #5C5C5C;
    font-size: clamp(14px, 2vw, 18px);
    line-height: 1.6;
    max-width: 620px;
    margin: 0 auto;
}

.vision-content {
    text-align: center;
    margin-bottom: 40px;
}

.vision-main-container {
    position: relative;
    width: min(100%, 900px);
    height: 520px;
    margin: 0 auto;
}

.vision-main-img {
    width: clamp(250px, 45vw, 570px);
    height: auto;
    position: absolute;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    object-fit: contain;
    z-index: 2;
}

.vision-bg {
    width: clamp(520px, 70vw, 990px);
    height: auto;
    position: absolute;
    left: 52%;
    top: 52%;
    transform: translate(-50%, -50%);
    object-fit: contain;
    z-index: 0;
    animation: visionRotate 38s linear infinite;
}

.vision-img-1,
.vision-img-2,
.vision-img-3,
.vision-img-4,
.vision-img-5,
.vision-img-6 {
    position: absolute;
    object-fit: contain;
    object-position: center;
    z-index: 3;
    cursor: pointer;
    will-change: transform;
    transition: filter 0.3s ease;
}

/* positions */
.vision-img-1 {
    width: clamp(70px, 12vw, 150px);
    top: clamp(12%, 20%, 20%);
    left: clamp(-2%, 0vw, 0%);
    animation: visionFloat1 5s ease-in-out infinite alternate;
}

.vision-img-2 {
    width: clamp(90px, 15vw, 190px);
    top: clamp(40%, 48%, 48%);
    left: clamp(-8%, -6vw, -15%);
    animation: visionFloat2 6.5s ease-in-out infinite alternate;
}

.vision-img-3 {
    width: clamp(90px, 14vw, 185px);
    bottom: clamp(4%, 8vw, 10%);
    left: clamp(-2%, 0vw, 0%);
    animation: visionFloat3 5.8s ease-in-out infinite alternate;
}

.vision-img-4 {
    width: clamp(70px, 11vw, 140px);
    top: clamp(12%, 20%, 20%);
    right: clamp(-2%, 0vw, 0%);
    animation: visionFloat4 6s ease-in-out infinite alternate;
}

.vision-img-5 {
    width: clamp(110px, 18vw, 250px);
    top: clamp(40%, 48%, 48%);
    right: clamp(-8%, -6vw, -15%);
    animation: visionFloat5 7s ease-in-out infinite alternate;
}

.vision-img-6 {
    width: clamp(85px, 14vw, 175px);
    bottom: clamp(3%, 7vw, 8%);
    right: clamp(-2%, 0vw, 0%);
    animation: visionFloat6 6.8s ease-in-out infinite alternate;
}

/* hover different animation */
.vision-img-1:hover,
.vision-img-2:hover,
.vision-img-3:hover,
.vision-img-4:hover,
.vision-img-5:hover,
.vision-img-6:hover {
    animation-play-state: paused;
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.18));
}

.vision-img-1:hover {
    transform: translateY(-12px) rotate(-4deg) scale(1.08);
}

.vision-img-2:hover {
    transform: translateX(14px) rotate(4deg) scale(1.08);
}

.vision-img-3:hover {
    transform: translateY(12px) rotate(-3deg) scale(1.08);
}

.vision-img-4:hover {
    transform: translateY(-14px) rotate(5deg) scale(1.08);
}

.vision-img-5:hover {
    transform: translateX(-16px) rotate(-4deg) scale(1.08);
}

.vision-img-6:hover {
    transform: translateY(14px) rotate(4deg) scale(1.08);
}

@keyframes visionRotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes visionFloat1 {
    from {
        transform: translate(0, 0) rotate(0deg);
    }

    to {
        transform: translate(14px, -18px) rotate(3deg);
    }
}

@keyframes visionFloat2 {
    from {
        transform: translate(0, 0) rotate(0deg);
    }

    to {
        transform: translate(-18px, 14px) rotate(-3deg);
    }
}

@keyframes visionFloat3 {
    from {
        transform: translate(0, 0) rotate(0deg);
    }

    to {
        transform: translate(20px, -12px) rotate(4deg);
    }
}

@keyframes visionFloat4 {
    from {
        transform: translate(0, 0) rotate(0deg);
    }

    to {
        transform: translate(-16px, -20px) rotate(-4deg);
    }
}

@keyframes visionFloat5 {
    from {
        transform: translate(0, 0) rotate(0deg);
    }

    to {
        transform: translate(18px, 12px) rotate(3deg);
    }
}

@keyframes visionFloat6 {
    from {
        transform: translate(0, 0) rotate(0deg);
    }

    to {
        transform: translate(-18px, -14px) rotate(-4deg);
    }
}

@media (max-width: 768px) {
    .vision-main-container {
        height: 430px;
    }

    /* .vision-img-1,
    .vision-img-2,
    .vision-img-3,
    .vision-img-4,
    .vision-img-5,
    .vision-img-6 {
        width: 120px;
    } */

    /* .vision-img-5 {
        width: 160px;
        right: -2%;
    } */
}

/* ------------------------------ */
.why-chotekisan-section {
    min-height: 100vh;
    overflow: hidden;
    position: relative;
    /* padding-bottom: 150px !important; */
}

.why-chotekisan-content {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 5;
    will-change: transform;
}

.why-chotekisan-title {
    --fill-width: 0%;

    font-size: clamp(52px, 8vw, 128px);
    font-weight: 700;
    /* line-height: 1.05; */
    text-align: center;

    color: transparent;
    -webkit-text-stroke: 3px var(--primary);

    background: linear-gradient(90deg,
            var(--primary) var(--fill-width),
            transparent var(--fill-width));
    -webkit-background-clip: text;
    background-clip: text;

    transform: scale(0.5);
    will-change: transform;
}

.why-black-overlay {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0%;
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.45) 0%,
            rgba(0, 0, 0, 0.28) 48%,
            rgba(0, 0, 0, 0.1) 78%,
            rgba(0, 0, 0, 0) 100%);
    filter: blur(10px);
    transform: scale(1.03);
    opacity: 0;
    z-index: 10;
    pointer-events: none;
}

.why-chotekisan-title::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;

    color: var(--primary);
    -webkit-text-stroke: 0;

    clip-path: inset(0 calc(100% - var(--fill-width)) 0 0);
}

.why-chotekisan-content img {
    position: absolute;
    object-fit: contain;
    object-position: center;
    z-index: 3;
    cursor: pointer;
    will-change: transform;
    transform-style: preserve-3d;
}

/* random floating */
.why-ch-1 {
    animation: whyFloat1 5s ease-in-out infinite alternate;
}

.why-ch-2 {
    animation: whyFloat2 6.5s ease-in-out infinite alternate;
}

.why-ch-3 {
    animation: whyFloat3 5.8s ease-in-out infinite alternate;
}

.why-ch-4 {
    animation: whyFloat4 7s ease-in-out infinite alternate;
}

.why-ch-5 {
    animation: whyFloat5 6s ease-in-out infinite alternate;
}

.why-ch-6 {
    animation: whyFloat6 7.2s ease-in-out infinite alternate;
}

.why-ch-7 {
    animation: whyFloat7 6.8s ease-in-out infinite alternate;
}

/* hover flip */
.why-chotekisan-content img:hover {
    animation-play-state: paused;
    transform: rotateY(180deg) scale(1.15);
    filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.25));
    transition: transform 0.6s ease, filter 0.4s ease;
}

@keyframes whyFloat1 {
    from {
        transform: translate(0, 0) rotate(0deg);
    }

    to {
        transform: translate(18px, -22px) rotate(5deg);
    }
}

@keyframes whyFloat2 {
    from {
        transform: translate(0, 0) rotate(0deg);
    }

    to {
        transform: translate(-20px, 18px) rotate(-4deg);
    }
}

@keyframes whyFloat3 {
    from {
        transform: translate(0, 0) rotate(0deg);
    }

    to {
        transform: translate(22px, -18px) rotate(6deg);
    }
}

@keyframes whyFloat4 {
    from {
        transform: translate(0, 0) rotate(0deg);
    }

    to {
        transform: translate(-18px, -20px) rotate(-5deg);
    }
}

@keyframes whyFloat5 {
    from {
        transform: translate(0, 0) rotate(0deg);
    }

    to {
        transform: translate(20px, 15px) rotate(4deg);
    }
}

@keyframes whyFloat6 {
    from {
        transform: translate(0, 0) rotate(0deg);
    }

    to {
        transform: translate(-22px, -15px) rotate(-4deg);
    }
}

@keyframes whyFloat7 {
    from {
        transform: translate(0, 0) rotate(0deg);
    }

    to {
        transform: translate(18px, -20px) rotate(5deg);
    }
}

.why-ch-1 {
    width: clamp(45px, 6vw, 90px);
    height: clamp(45px, 6vw, 90px);
    top: clamp(5%, 10%, 10%);
    left: clamp(4%, 10%, 10%);
}

.why-ch-2 {
    width: clamp(42px, 5.5vw, 82px);
    height: clamp(42px, 5.5vw, 82px);
    top: clamp(10%, 20%, 20%);
    left: clamp(42%, 50%, 50%);
}

.why-ch-3 {
    width: clamp(46px, 6vw, 92px);
    height: clamp(46px, 6vw, 92px);
    top: clamp(5%, 10%, 10%);
    right: clamp(4%, 10%, 10%);
}

.why-ch-4 {
    width: clamp(46px, 6vw, 92px);
    height: clamp(46px, 6vw, 92px);
    bottom: clamp(5%, 10%, 10%);
    left: clamp(4%, 10%, 10%);
}

.why-ch-5 {
    width: clamp(36px, 4.5vw, 65px);
    height: clamp(36px, 4.5vw, 65px);
    bottom: clamp(10%, 20%, 20%);
    left: clamp(20%, 30%, 30%);
}

.why-ch-6 {
    width: clamp(36px, 4.5vw, 65px);
    height: clamp(36px, 4.5vw, 65px);
    bottom: clamp(5%, 10%, 10%);
    left: clamp(48%, 60%, 60%);
}

.why-ch-7 {
    width: clamp(40px, 5vw, 75px);
    height: clamp(40px, 5vw, 75px);
    bottom: clamp(10%, 20%, 20%);
    right: clamp(4%, 10%, 10%);
}

/* --------------------------- */
.why-farm-fresh-section {
    position: relative;
    background: url('../images/about-us/why-farm/why-farm-bg.webp') center/cover no-repeat;
    height: 100dvh;
    overflow: hidden;
}

/* Start fully dark like previous section */
.why-farm-overlay {
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 0.28;
    z-index: 10;
    pointer-events: none;
}

.why-farm-fresh-content {
    position: relative;
    z-index: 3;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.why-farm-logo {
    width: clamp(90px, 12vw, 145px);
    height: auto;
    margin-top: clamp(20px, 5vw, 50px);
    margin-bottom: clamp(10px, 8vw, 140px);
}

.why-farm-para p {
    text-align: center;
    color: #DDDDDD;
    font-size: clamp(14px, 1.6vw, 20px);
    font-weight: 500;
    line-height: 1.6;
}

.why-farm-para p span {
    color: #F0B97D;
}

.why-farm-card {
    position: relative;
    overflow: hidden;

    height: 100%;
    padding: 22px 16px;
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(14px);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;

    transition: 0.45s ease;
}

.why-farm-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 80%;
    height: 100%;

    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, 0.38),
            transparent);

    transform: skewX(-20deg);
    transition: 0.65s ease;
}

.why-farm-card:hover {
    background: rgba(12, 123, 9, 0.38);
    border-color: rgba(120, 255, 110, 0.55);
    box-shadow: 0 20px 45px rgba(12, 123, 9, 0.25);
    transform: translateY(-10px) scale(1.03);
}

.why-farm-card:hover::before {
    left: 140%;
}

.why-farm-icon img {
    width: 45px;
    height: 45px;
}

.why-farm-card h6 {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    margin: 0;
    text-align: center;
}

/* --------------------------------- */


/* ---------- Responsive ----------- */
/* Mobile screen  */
@media (max-width: 320px) {

    .deals-cta-title,
    .hero-banner-title {
        font-size: 43px !important;
        letter-spacing: -2px;
        line-height: 62px;
    }

    .deals-cta-text,
    .hero-banner-content {
        font-size: 16px;
        line-height: 32px;
    }

    .deals-cta-btn,
    .Deals-main .btn-list .text {
        font-size: 16px;
    }

    .special-offer-title {
        font-size: 28px !important;
    }

    .policy-header {
        flex-direction: column !important;
        align-items: flex-start;
    }

    .policy-title {
        font-size: 22px !important;
    }

    .policy-contact-card {
        padding: 15px !important;
    }

    .limited-offer-img-container {
        display: none;
    }



}

@media (max-width: 430px) {
    .home-banner .img-wrapper {
        margin-top: 0px !important;
    }

    .img-wrapper {
        height: 330px;
    }

    .cart-float-icons-1 {
        width: 52px !important;
        height: 60px !important;
        top: 40px !important;
        left: 0px !important;
    }

    .cart-float-icons-2 {
        width: 160px !important;
        height: 64px !important;
        top: 50px !important;
        right: 0px !important;
    }

    .cart-float-icons-3 {
        width: 52px !important;
        height: 58px !important;
        bottom: 80px !important;
        right: 8px !important;
    }

    .cart-float-icons-4 {
        width: 52px !important;
        height: 60px !important;
        bottom: 45px !important;
        left: -6px !important;
    }

    .policy-header {
        flex-direction: column !important;
        align-items: flex-start;
    }

    .otp-box {
        gap: 7px;
    }


}

@media (max-width: 580px) {

    .Deals-main .home-banner {
        padding: 60px 15px 30px;
        margin-top: 100px;
    }

    .view-salad-sec {
        margin-top: 140px;
    }

    .deals-cta-title,
    .hero-banner-title {
        font-size: 48px;
        letter-spacing: -2px;
        line-height: 62px;
    }

    .deals-cta-text,
    .hero-banner-content {
        font-size: 16px;
        line-height: 32px;
    }

    .deals-cta-btn,
    .Deals-main .btn-list .text {
        font-size: 16px;
    }

    .img-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .cart-products-img {
        position: absolute;
        left: 50%;
    }

    .cart-img {
        width: 350px;
        height: 300px;
        object-fit: contain;
        position: relative;
        z-index: 11;
        transform: translateY(40px);
        z-index: 40;
    }

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

    .cart-float-icons-1 {
        width: 72px;
        height: 84px;
        top: 0px;
        left: -20px;
    }

    .cart-float-icons-2 {
        width: 216px;
        height: 86px;
        top: 0px;
        right: -30px;
    }

    .cart-float-icons-3 {
        width: 72px;
        height: 80px;
        bottom: 100px;
        right: 10px;
    }

    .cart-float-icons-4 {
        width: 72px;
        height: 84px;
        bottom: 60px;
        left: -10px;
    }

    .home-banner .img-wrapper {
        margin-top: 40px;
    }

    .deals-cta-wrapper {
        padding: 40px 10px;
    }

    .special-offer-title {
        font-size: 32px;
    }

    .special-offer-text {
        font-size: 16px;
    }

    .policy-header {
        flex-direction: column !important;
        align-items: flex-start;
    }

    .limited-offer-img-2 {
        transform: translateX(-70px);
    }

    .limited-time-offer-counter {
        padding: 0px 0px !important;
        justify-content: center !important;
    }

    .offer-time-box span {
        font-size: 10px !important;
    }

    .offer-dot {
        font-size: 20px !important;
    }

    .limited-time-offer-counter {
        height: 100px !important;
    }

    .limited-offer-main {
        margin-top: 130px !important;
    }

    .limited-time-offer {
        margin-top: 20px !important;
        margin-bottom: 20px !important;
    }

    .farm-fresh-cta .cta-title {
        margin-bottom: 5px !important;
    }

    .farm-fresh-cta h4 {
        margin-bottom: 20px !important;
    }

    .search-expand-wrap {
        width: 100% !important;
    }

    .search-expand-wrap.active {
        width: 100% !important;
    }

    .select2-common {
        width: 100% !important;
        max-width: 100% !important;
    }

    .order_icons::before {
        height: 88px !important;
        top: -85px !important;
    }

    .tab-content-center {
        height: 100% !important;
    }

    .w-sm-50 {
        width: 70% !important;
    }

    .my-orders-main .user-profile {
        width: 58px;
        height: 58px;
    }

      .about-banner-title {
        font-size: 60px !important;
        max-width: 262px;
      }

    .about-banner-subtitle {
        font-size: 14px;
        line-height: 20px;
        letter-spacing: 0px;
        width: 100%;
    }

    .cloud-1 {
        top: 30%;
        left: 30%;
        transform: translateX(-50%);

        animation: cloudMoveLeft 18s ease forwards;
    }

    .cloud-2 {
        top: 45%;
        right: -15%;
        transform: translateX(-50%);

        animation: cloudMoveRight 18s ease forwards;
    }

    .vision-content {
        margin-bottom: 0px !important;
    }
    .why-farm-fresh-section {
        height: 100dvh !important;
    }

    .how-works .about-section-content .title{
        font-size: 28px !important;
    }
    .how-works .about-section-content p{
        font-size: 14px !important;
    }

    /* .how-works-card img {
        height: 340px;
    } */

    .about-cta-content h2{
        font-size: 28px !important;
    }
    .our-instagram-sec .title,
    .our-clients-say .title,
    .how-works-card-title {
        font-size: 24px !important;
    }
    .about-cta-content p,
    .our-instagram-sec p,
    .our-clients-say p,
    .how-works-card p{
        font-size: 14px !important;
    }
    /* .about-banner {
        transform: translate(0px, -18px);
    } */

    .simple-img-1 {
        top: -200px;
    }

    .simple-img-2 {
        top: -160px;
    }

    .simple-img-3 {
        top: -240px;
    }

    .simple-img-4 {
        top: -120px;
    }

    .simple-img-5 {
        bottom: -180px;
    }

    .simple-img-6 {
        bottom: -150px;
    }

    .simple-img-7 {
        bottom: -190px;
    }
    .vision-products-section {
        /* Was min-height:100vh with vertically-centred content, which left a big
           empty band below the vision cards (looked like extra white space above
           "Why Chotekisan"). Let the section hug its content on mobile. */
        min-height: auto;
        overflow: hidden;
        position: relative;
        padding: 30px 0;
    }
    .about-cta-sec {
        padding: 40px 0 40px;
        overflow: hidden;
    }

}

/* laptop screen */
@media (max-width: 760px) {}

@media (max-width: 991px) {
    .policy-content {
        padding-right: 0;
    }

    .policy-contact-card {
        position: static;
        margin-top: 30px;
        background-position: right;
    }

    .policy-header {
        flex-direction: row;
        align-items: flex-start;
    }

    .policy-section {
        margin-top: 100px !important;
    }

    .limited-offer-img-2 {
        left: 80px !important;
    }

    .login-modal-content .login-left {
        height: 572px;
    }

    .login-modal-dialog {
        max-width: 750px !important;
    }

    /* .border-card {
        height: 100vh !important;
    } */
    #NotificationsPreferences.active {
        width: auto !important;
    }

    /* .yt-vlogs-main .yt-vlogs-swiper{
        height: 340px !important;
    } */
    .about-banner-title {
        font-size: 52px;
    }
    .why-farm-fresh-section {
        height: 120dvh;
    }

}

@media (max-width:1200px) {
    /* .farm-fresh-cta .cta-title {
        margin-bottom: 5px !important;
    }

    .farm-fresh-cta h4 {
        margin-bottom: 5px !important;
    } */

    .search-expand-wrap.active {
        width: 230px;
    }

    .order_icons::before {
        height: 65px;
        top: -65px;
    }

    .scroll-top-btn.show {
        scale: 0.8;
    }
    /* .about-banner-title {
        font-size: 72px;
    } */
     .about-cta-sec .about-cta-image img {
        transform: translateX(-70px) translateY(-130px);
    }

}

.how-works {
    padding: 80px 0;
    overflow: hidden;
}

/* .how-works .how-works-card {
    padding: 30px 70px;
    border-radius: 20px;
    margin-bottom: 40px;
} */
.how-works .how-works-card {
    padding: clamp(18px, 4vw, 30px) clamp(20px, 7vw, 70px);
    border-radius: clamp(12px, 2vw, 20px);
    margin-bottom: clamp(20px, 5vw, 40px);
}

.how-works .how-works-card.card-1 {
    background-color: #E4EFB3;
}

.how-works .how-works-card.card-2 {
    background-color: #FFE0C4;
}

.how-works .how-works-card.card-3 {
    background-color: #FFED8B;
}

.how-works .how-works-card.card-4 {
    background-color: #FFCC9F;
}

.about-section-content {
    margin-bottom: 50px;
}

.how-works-card-title {
    color: #2E3800;
    font-size: 32px;
    font-weight: bold;
}

/* .how-works-card img {
    height: 480px;
    object-fit: cover;
} */
 .how-works-card img {
    height: clamp(250px, 45vw, 480px);
    width: 100%;
    object-fit: contain;
}

.about-section-content .title {
    color: #032802;
    font-size: 40px;
}

/* .work-img-container {
    position: relative;
    width: 500px;
    height: 500px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
} */
 .work-img-container {
    position: relative;
    width: clamp(220px, 45vw, 500px);
    height: clamp(220px, 55vw, 500px);

    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.work-img-container .rotate-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    animation: rotateShape 12s linear infinite;
}

.work-img-container .center-img {
    position: relative;
    width: clamp(160px, 32vw, 370px);
    height: auto;
    z-index: 2;
}

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

    100% {
        transform: rotate(360deg);
    }
}

/* ===========================
   ABOUT FAQ SECTION
=========================== */

.about-faq .faq-image-container img {
    border-radius: 20px;
}

.about-faq .about-faq-content {
    padding-left: 25px;
}

.about-faq .about-faq-subtitle {
    margin-bottom: 15px;
}

.about-faq .about-faq-subtitle span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(21, 143, 21, 0.1);
    color: var(--primary);
    font-size: 14px;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 50px;
}

.about-faq .about-faq-accordion .accordion-item {
    border: none;
    border-radius: 16px !important;
    overflow: hidden;
    margin-bottom: 18px;
    background: #fff;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
}

.about-faq .about-faq-accordion .accordion-button {
    background: #fff;
    color: #143814;
    font-size: 18px;
    font-weight: 600;
    padding: 18px 20px;
    box-shadow: none;
    border: none;
}

.about-faq .about-faq-accordion .accordion-button:not(.collapsed) {
    background: #0C7B091F;
    color: var(--primary);
    border-bottom: 1px solid #0C7B091F;
    box-shadow: 0px 5px 15px 0px #19213D0F;
}

.about-faq .about-faq-accordion .accordion-button::after {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: var(--primary);
    color: var(--white-color);
    background-position: center;
    background-size: 14px;
    flex-shrink: 0;
}

.about-faq .about-faq-accordion .accordion-button::after {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: var(--primary);

    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 10.854a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0l6 6a.5.5 0 1 1-.708.708L8 5.207l-5.646 5.647a.5.5 0 0 1-.708 0z'/%3e%3c/svg%3e");

    background-position: center;
    background-repeat: no-repeat;
    background-size: 14px;
}

.about-faq .about-faq-accordion .accordion-body {
    background: #edf6ed;
    padding: 10px 10px 17px 24px;
    font-size: 15px;
    line-height: 1.8;
    color: #444;
}

.about-faq .about-faq-accordion .accordion-button:focus {
    box-shadow: none;
}

@media (max-width: 991px) {
    .about-faq .about-faq-content {
        padding-left: 0;
        margin-top: 40px;
    }

    .about-faq .about-faq-title {
        font-size: 32px;
    }

    .about-faq .about-faq-accordion .accordion-button {
        font-size: 17px;
        padding: 20px;
    }
}

@media (max-width: 575px) {
    .about-faq .about-faq-title {
        font-size: 28px;
    }

    .about-faq .about-faq-description {
        font-size: 15px;
    }

    .about-faq .about-faq-accordion .accordion-button {
        font-size: 16px;
    }
}

.our-clients-say {
    position: relative;
    overflow: visible;
    background: #fff;
    padding: 80px 0 80px;
}

.our-clients-say .testimonials-container {
    position: relative;
    width: min(1436px, 100%);
    height: 360px;
    margin: 20px auto 0;
    overflow: visible;
}

.our-clients-say .testimonials-container>svg,
.our-clients-say .testimonial-wave {
    position: absolute;
    inset: 8px 0 auto;
    width: 100%;
    height: 298px;
    z-index: 1;
    pointer-events: none;
}

.our-clients-say .customerSwiper,
.our-clients-say .swiper-wrapper,
.our-clients-say .swiper-slide {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.our-clients-say .swiper-slide {
    position: relative;
    overflow: visible;
}

.our-clients-say .testimonial-fruit {
    --size: 96px;
    --bubble-bg: #f3f8e9;
    position: absolute;
    z-index: 5;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    /* background: var(--bubble-bg); */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .35s ease, box-shadow .35s ease;
}

.our-clients-say .testimonial-fruit::after {
    content: "";
    position: absolute;
    inset: 12%;
    border-radius: inherit;
    background: rgba(255, 255, 255, .35);
    z-index: -1;
}

.our-clients-say .testimonial-fruit img:first-child,
.our-clients-say .testimonial-produce {
    width: 76%;
    max-height: 86%;
    object-fit: contain;
    filter: drop-shadow(0 10px 12px rgba(45, 53, 33, .12));
}

.our-clients-say .testimonial-fruit:hover {
    transform: translateY(-2px);
    z-index: 99;
}

/* The active (shown) card must sit above every other fruit, otherwise a later
   fruit in the DOM (e.g. the eggplant) paints on top of the open card. */
.our-clients-say .testimonial-fruit.show-card {
    z-index: 99;
}

.our-clients-say .fruit-1 {
    --size: 110px;
    top: 30px;
    left: 12.2%;
}

.our-clients-say .fruit-2 {
    --size: 145px;
    top: 150px;
    left: 23.2%;
}

.our-clients-say .fruit-3 {
    --size: 110px;
    top: 15px;
    left: 35.8%;
}

.our-clients-say .fruit-4 {
    --size: 145px;
    top: 132px;
    left: 46%;
}

.our-clients-say .fruit-5 {
    --size: 110px;
    top: 15px;
    left: 60.4%;
}

.our-clients-say .fruit-6 {
    --size: 145px;
    top: 149px;
    left: 69.6%;
}

.our-clients-say .fruit-7 {
    --size: 110px;
    top: 22px;
    left: 81.5%;
}

.our-clients-say .testimonial-card {
    --card-shift-x: 0px;
    position: absolute;
    top: calc(100% + -15px);
    left: 50%;
    width: min(420px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
    padding: 18px 20px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(37, 47, 34, .14);
    opacity: 0;
    visibility: hidden;
    transform: translate(calc(-50% + var(--card-shift-x)), 12px);
    transition: opacity .25s ease, visibility .25s ease, transform .25s ease;
    pointer-events: none;
    z-index: 50;
}

.our-clients-say .testimonial-fruit:hover .testimonial-card,
.our-clients-say .testimonial-fruit:focus .testimonial-card,
.our-clients-say .testimonial-fruit:focus-within .testimonial-card,
.our-clients-say .testimonial-fruit.show-card .testimonial-card {
    opacity: 1;
    visibility: visible;
    transform: translate(calc(-50% + var(--card-shift-x)), 0);
}

.our-clients-say .fruit-6 .testimonial-card,
.our-clients-say .fruit-7 .testimonial-card {
    left: 50%;
    right: auto;
    transform: translate(calc(-50% + var(--card-shift-x)), 12px);
}

.our-clients-say .fruit-6:hover .testimonial-card,
.our-clients-say .fruit-7:hover .testimonial-card,
.our-clients-say .fruit-6:focus .testimonial-card,
.our-clients-say .fruit-7:focus .testimonial-card,
.our-clients-say .fruit-6:focus-within .testimonial-card,
.our-clients-say .fruit-7:focus-within .testimonial-card {
    transform: translate(calc(-50% + var(--card-shift-x)), 0);
}

.our-clients-say .testimonial-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 12px;
    border-bottom: 1px solid #5C5C5C0D;
}

.our-clients-say .testimonial-user {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.our-clients-say .testimonial-user-img {
    width: 60px !important;
    height: 60px;
    max-height: none !important;
    border-radius: 50%;
    object-fit: contain;
    background: #f8f8f8;
    flex: 0 0 auto;
    filter: none;
}

.our-clients-say .client-name {
    margin: 0 0 7px;
    color: #2f2f2f;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
}

.our-clients-say .testimonial-stars,
.our-clients-say .testimonial-rating {
    color: #fbbc04;
    font-size: 16px;
    letter-spacing: 3px;
    line-height: 1;
}

.our-clients-say .testimonial-quote {
    color: rgba(35, 150, 82, .12);
    font-size: 38px;
    line-height: 1;
}

.our-clients-say .review-text {
    margin: 0;
    color: #585858;
    font-size: 16px;
    line-height: 1.65;
}

@media (max-width: 991px) {
    .our-clients-say .testimonials-container {
        height: 560px;
    }

    .our-clients-say .testimonials-container>svg,
    .our-clients-say .testimonial-wave {
        inset: 26px -240px auto;
        width: 1500px;
        max-width: none;
        transform: scaleY(1.18);
        transform-origin: top left;
    }

    .our-clients-say .fruit-1 {
        top: 45px;
        left: 8%;
    }

    .our-clients-say .fruit-2 {
        top: 190px;
        left: 23%;
    }

    .our-clients-say .fruit-3 {
        top: 56px;
        left: 45%;
    }

    .our-clients-say .fruit-4 {
        top: 292px;
        left: 9%;
    }

    .our-clients-say .fruit-5 {
        top: 260px;
        left: 43%;
    }

    .our-clients-say .fruit-6 {
        top: 374px;
        left: 68%;
    }

    .our-clients-say .fruit-7 {
        top: 112px;
        left: 72%;
    }
}

@media (max-width: 575px) {
    .our-clients-say {
        padding-top: 46px;
        padding-bottom: 46px;
    }

    .our-clients-say .testimonials-container {
        height: 650px;
    }

    .our-clients-say .testimonial-fruit {
        --size: 78px;
    }

    .our-clients-say .fruit-2,
    .our-clients-say .fruit-4,
    .our-clients-say .fruit-6 {
        --size: 94px;
    }

    .our-clients-say .fruit-1 {
        left: 6%;
    }

    .our-clients-say .fruit-2 {
        top: 154px;
        left: 38%;
    }

    .our-clients-say .fruit-3 {
        top: 282px;
        left: 9%;
    }

    .our-clients-say .fruit-4 {
        top: 360px;
        left: 52%;
    }

    .our-clients-say .fruit-5 {
        top: 480px;
        left: 15%;
    }

    .our-clients-say .fruit-6 {
        top: 506px;
        left: 62%;
    }

    .our-clients-say .fruit-7 {
        top: 70px;
        left: 70%;
    }

    .our-clients-say .testimonial-card {
        top: calc(100% + 4px);
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
        padding: 14px 16px;
    }

    .our-clients-say .testimonial-header {
        gap: 10px;
        margin-bottom: 10px;
    }

    .our-clients-say .testimonial-user-img {
        width: 48px !important;
        height: 48px;
    }

    .our-clients-say .client-name {
        font-size: 15px;
    }

    .our-clients-say .testimonial-stars {
        font-size: 14px;
        letter-spacing: 2px;
    }

    .our-clients-say .testimonial-quote {
        font-size: 30px;
    }

    .our-clients-say .review-text {
        font-size: 14px;
        line-height: 1.5;
    }
}

.our-clients-say .testimonial-fruit {
    animation: fruitFloat 3s ease-in-out infinite;
}

.our-clients-say .fruit-2,
.our-clients-say .fruit-4,
.our-clients-say .fruit-6 {
    animation-delay: 1.5s;
}

@keyframes fruitFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

.about-cta-sec {
    padding: 40px 0 80px;
    overflow: hidden;
}

.about-cta-sec .about-cta-wrapper {
    position: relative;
    background: url(../images/about-us/about-cta.webp) no-repeat;
    background-size: cover;
    background-position: center center;
    border-radius: 30px;
    overflow: hidden;
    min-height: 300px;
}

.about-cta-sec .about-cta-content {
    padding: 45px;
    position: relative;
    z-index: 2;
}

.about-cta-sec .about-cta-content h2 {
    font-size: 50px;
    line-height: 1.1;
    font-weight: 700;
    color: #fff;
    margin-bottom: 25px;
    max-width: 500px;
}

.about-cta-sec .about-cta-content h2 span {
    color: #FFD400;
}

.about-cta-sec .about-cta-content p {
    font-size: 18px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .95);
    max-width: 520px;
    margin-bottom: 35px;
}

.about-cta-sec .about-cta-btn-group {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.about-cta-sec .about-cta-btn-group img {
    height: 56px;
    transition: .3s;
}

/* IMAGE SECTION */

.about-cta-sec .about-cta-image {
    position: absolute;
    bottom: -265px;
    width: 55%;
    z-index: 2;
}

.about-cta-sec .about-cta-image img {
    width: 580px;
    display: block;
}

.our-instagram-sec {
    padding: 30px 0 60px;
}

.insta-container {
    position: relative;
}

.insta-container .icon {
    top: 50%;
    left: 50%;
    z-index: 2;
    opacity: 0;
    font-size: 40px;
    visibility: hidden;
    position: absolute;
    color: #ffffff;
    transform: translate(-50%, -50%);
    transition: all 0.4s ease-in-out;
}

.insta-container::before {
    content: "";
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    opacity: 0;
    display: block;
    position: absolute;
    visibility: hidden;
    background: #0000003b;
    transition: all 0.4s ease-in-out;
}

.insta-container:hover .icon {
    opacity: 1;
    visibility: visible;
}

.insta-container:hover::before {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 575px) {
    .contact-page-banner {
        background-image: url("../images/contact-us/contact-mbl.png") !important;
        background-position: right bottom !important;
        background-repeat: no-repeat !important;
        background-size: 100% auto !important;
                   margin-top: 130px !important;
    }

.contact-page-banner p {
 font-size: 18px;
}
    .contact-page-banner h1 {
        font-size: 18px !important;
                margin-top: -6px !important;
    }
}


/* === Mobile product-card + category fixes (Keerthika) === */
/* Placed in style2.css (loads last) so these win the cascade and are not
   lost when main.css is re-saved from an editor buffer. */

/* (1) Pre-Order cards: lift the +/cart button ABOVE the orange Pre-Order tag
   on every page, and keep it on top of the tag via z-index. */
.product-card.is-preorder .cart-btn {
    /* keep the + at the bottom corner OVERLAPPING the Pre-Order tag, but on
       top of it (tag is z-index:4) so it's visible instead of hidden. */
    z-index: 6 !important;
}
.product-card.is-preorder .plus-icon {
    z-index: 6 !important;
}

/* (2) Quantity dropdown: keep the amount + unit ("12 Pack", "500 g") on ONE
   line, both in the toggle and the open menu. */
.product-card .product-variant-value,
.product-card .product-variant-option {
    white-space: nowrap !important;
}

@media (max-width: 767.98px) {
    /* slightly smaller so longer labels still fit one line on phones */
    .product-card .product-variant-toggle,
    .product-card .product-variant-value,
    .product-card .product-variant-option {
        font-size: 12px !important;
    }

    /* (3) Wishlist heart pinned to the top-right corner in a clear white
       circle so it no longer covers the product image. */
    .product-section .product-card .wishlist-btn,
    .frequent-sec .product-card .wishlist-btn {
        top: 4px !important;
        right: 4px !important;
        left: auto !important;
        width: 22px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.92);
        border-radius: 50%;
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.14);
    }
    .product-section .product-card .wishlist-btn .heart,
    .frequent-sec .product-card .wishlist-btn .heart {
        width: 13px;
        height: 12px;
    }

    /* (5) Mobile search bar: let the input shrink (min-width:0) so the
       enlarged mic icon stays INSIDE the bar instead of overflowing right. */
    .mobile-search-bar .search-bar input {
        min-width: 0 !important;
        padding-right: 6px !important;
    }
    .mobile-search-bar .search-bar .hdr-mic-btn {
        flex-shrink: 0 !important;
    }

    /* (4) Category page: the sticky category pills must clear the fixed
       header (initial position + sticky offset). */

      .horizontal-tab-strip {
  
        margin-top: 41px !important;
        top: 160px !important;
    }
    
}

/* Home category cards: keep a complete card in view on phones, preserve the
   description, and remove the decorative circle/shadow beneath the image. */
@media (max-width: 767.98px) {
    .home-category-swiper .swiper-slide {
               width: 166px !important;
        margin-right: 20px !important;
    }

    .home-category-swiper .our-products-container {
        width: 100% !important;
        height: auto !important;
        min-height: 300px;
        padding: 22px 0 20px;
        background: linear-gradient(180deg, #fffaf2 0%, #ffe2af 100%);
        justify-content: flex-start;
    }

    .home-category-swiper .product-img-wrapper {
        margin: 20px auto 16px !important;
    }

    .home-category-swiper .product-content-wrapper {
        padding: 0 18px;
    }

    .home-category-swiper .product-img-wrapper,
    .home-category-swiper .product-img-wrapper::before {
        box-shadow: none !important;
    }

    .home-category-swiper .product-img-wrapper::before,
    .home-category-swiper .product-img-wrapper::after {
        display: none;
    }

    .home-category-swiper .sub-heading {
        display: block !important;
        line-height: 1.45;
        margin-top: 6px !important;
    }

    /* The fixed back-to-top control covers the card content on phones. */
    .scroll-top-btn {
        display: none !important;
    }

    .explore-our-products .slider-nav .prev:not(.active-nav),
    .explore-our-products .slider-nav .next:not(.active-nav) {
        pointer-events: none;
    }
}

/* === Product Details page – mobile polish (Keerthika) === */
/* See all -> match home page (bright green, same weight) */
.pro-cate-sec .navi-link,
.pro-cate-sec .navi-link i {
    color: #0aa537 !important;
}
.pro-cate-sec .navi-link {
    font-size: 18px !important;
    font-weight: 600 !important;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    /* (1) Kill the big gap between navbar and product image */
    .prod-details-sec {
        margin-top: 56px !important;
    }
    .prod-details-sec .breadcrumb-nav.pt-4 {
        padding-top: 10px !important;
    }

    /* (2) "Select Quantity: 5Kg" + badge on ONE row; arrows on next row, centered */
    .prod-details-sec .qty-header-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .prod-details-sec .qty-label-group {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
    }
    /* shrink so "Select Quantity: 5Kg" + badge fit on ONE line at 320px */
    .prod-details-sec .qty-section-label {
        font-size: 14px !important;
        white-space: nowrap !important;
    }
    .prod-details-sec .qty-selected-tag {
        font-size: 9px !important;
        padding: 2px 8px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    .prod-details-sec .qty-nav-actions {
        justify-content: center !important;
        width: 100%;
    }

    /* (2b) Price section — align the price box with the MRP / save column,
       give the green price box breathing room, and tidy the OFF badge */
    .prod-details-sec .price-row {
        align-items: center;
        gap: 12px;
        padding: 12px 0 !important;
        margin-bottom: 12px;
    }
    .prod-details-sec .price-now {
        margin-top: 0 !important;
        padding: 5px 10px !important;
        font-size: 22px;
        line-height: 1.1;
    }
    .prod-details-sec .price-mrp {
        font-size: 13px;
    }
    .prod-details-sec .save-tag {
        font-size: 12px;
    }
    .prod-details-sec .off-badge {
        margin-bottom: 16px;
    }

    /* (3) FBT title -> 21px */
    .pro-cate-sec .order-title {
        font-size: 21px !important;
    }
    /* See all mobile size to match home */
    .pro-cate-sec .navi-link {
        font-size: 15px !important;
    }

    /* (5) FBT cards match home format (3 per row) + tidy gutters so first row aligns */
    .pro-cate-sec .frequent-sec {
        --bs-gutter-x: 8px;
        row-gap: 14px;
    }
    .pro-cate-sec .frequent-sec > [class*="col-"] {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
}

/* === FBT quantity -> green pill, exactly like home page cards (Keerthika) === */
/* Home cards show the qty as a green rounded "pill" (.product-variant-toggle:
   bg #f3faf2, text #167713, chevron). The Frequently-Bought cards used plain
   text which looked loose/too spacious. Match the home pill look here. */
.pro-cate-sec .frequent-sec .product-card .prod-qty {
    width: 100%;
    min-height: 34px;
    margin-top: 7px;
    padding: 5px 10px;
    border-radius: 7px;
    background: #f3faf2;
    color: #167713 !important;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.pro-cate-sec .frequent-sec .product-card .prod-qty::after {
    content: "";
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    margin-right: 2px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
}
@media (max-width: 767.98px) {
    .pro-cate-sec .frequent-sec .product-card .prod-qty {
        min-height: 30px;
        margin-top: 6px;
        padding: 4px 8px;
        font-size: 12px !important;
    }
    .pro-cate-sec .frequent-sec .product-card .prod-qty::after {
        width: 7px;
        height: 7px;
        flex-basis: 7px;
    }
}

/* === Cart page – kill blank space above breadcrumb on mobile (Keerthika) === */
/* Same fix as .prod-details-sec: base rule sets margin-top:140px!important which,
   on top of main's padding-top, leaves a big empty band under the navbar. */
@media (max-width: 767.98px) {
    .my-cart-page {
        margin-top: 56px !important;
    }
    .my-cart-page .breadcrumb-bar {
        padding-top: 10px !important;
    }
}

/* === Salad page – tab strip overflow at 320px (Keerthika) === */
/* .tab-toggle is width:fit-content with wide 28px button padding, so 3 tabs
   ("Salad / Pizza / Smoothies") run off the right edge on small phones.
   Shrink padding/font so they fit, and allow horizontal scroll if a store
   has more tabs than fit. */
@media (max-width: 767.98px) {
    .salad-sec .tab-toggle {
        max-width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 4px 5px;
    }
    .salad-sec .tab-toggle::-webkit-scrollbar {
        display: none;
    }
    .salad-sec .tab-toggle button {
        padding: 7px 16px;
        font-size: 13px;
        white-space: nowrap;
        flex: 0 0 auto;
    }
}

/* === Mobile search-bar icons: dial back oversized magnifier + mic (Keerthika) === */
/* Earlier they were bumped to 22px/24px which looks too big at 320px. */
@media (max-width: 767.98px) {
    .mobile-search-bar .search-bar svg,
    .mobile-search-bar .search-bar .icon {
        width: 18px !important;
        height: 18px !important;
    }
    .mobile-search-bar .search-bar .hdr-mic-btn img,
    .mobile-search-bar .search-bar .mic-btn img {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
    }
}

/* === Salad details page – remove big blank space above breadcrumb on mobile (Keerthika) === */
/* .salad-sec-details carries margin-top:170px (desktop header clearance); on
   phones that stacks with main's padding-top and leaves a big empty band. */
@media (max-width: 767.98px) {
    .salad-sec-details {
        margin-top: 56px !important;
    }
}

/* === Add-address / my-orders pages – tighten mobile spacing (Keerthika) === */
/* Removes the big blank band at top (140px margin + py-5) and the heavy
   px-5 side padding that squeezed the cards on small screens. */
@media (max-width: 767.98px) {
    section.my-orders-main {
        margin-top: 44px !important;
        padding-top: 10px !important;
        padding-bottom: 24px !important;
    }
    .my-orders-main > .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    /* trim oversized inner card paddings so content isn't stretched */
    .my-orders-main .tab-order-header {
        padding: 16px !important;
    }
    .my-orders-main .border-card-header {
        padding: 14px !important;
    }
}

/* === Add-address header: bigger title + compact neat button (Keerthika) === */
/* At 320px a readable "My Address" + the full "Add New Address" button can't
   fit on one row, so stack them: big title on top, compact right-aligned
   pill button below. */
@media (max-width: 767.98px) {
    .tab-order-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    .tab-order-header .tab-order-title {
        font-size: 22px !important;
        white-space: nowrap;
    }
    .tab-order-header > div {
        text-align: right;
    }
    /* "Add New Address" – compact single-line pill instead of a tall block */
    .my-address-details .primary-green-btn,
    .tab-order-header .primary-green-btn {
        display: inline-flex !important;
        padding: 8px 14px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
        gap: 6px !important;
        border-radius: 8px;
        line-height: 1.2;
    }
    .my-address-details .primary-green-btn img,
    .tab-order-header .primary-green-btn img {
        width: 14px !important;
        height: 14px !important;
    }
}

/* === Coupon page – remove blank space above breadcrumb on mobile (Keerthika) === */
@media (max-width: 767.98px) {
    .coupon-section {
        margin-top: 56px !important;
        padding-top: 6px !important;
    }
}

/* === Special page – remove blank space above content on mobile (Keerthika) === */
/* .special-section stacks margin-top:90px + padding-top:50px on phones (plus
   the header clearance), leaving a big empty band above the content. */
@media (max-width: 767.98px) {
    .special-section {
        margin-top: 56px !important;
        padding-top: 14px !important;
    }
}

/* === Grocery banner: Shop Now button + slider peek fix (Keerthika) === */
/* The intended swiper styles were written for ".grocery-bannner" (3 n's – a
   typo) so they never applied; images rendered at natural size and overflowed
   their slides, so slivers of the neighbouring images showed. Re-apply the
   styles on the correct class and clip each slide so only ONE image shows. */
.grocery-banner .swiper {
    width: 100%;
    overflow: hidden;
}
.grocery-banner .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: transparent;
    /* A global ".swiper-slide { margin-right:35px !important }" (style.css)
       bleeds in and adds a phantom gap to the slide stride, throwing off the
       loop translate so the active image sits off-centre / clipped. Zero it. */
    margin-right: 0 !important;
    margin-left: 0 !important;
}
.grocery-banner .swiper-slide img {
    max-width: 78%;
    max-height: 320px;
    object-fit: contain;
    margin: 0 auto;
}

@media (max-width: 767.98px) {
    /* "Shop Now" – compact button instead of the big 180px block.
       banner-content is a flex column (align-items:stretch), so the button
       stretched full-width — align-self:flex-start makes it hug its text. */
    .grocery-banner .btn-shop {
        display: inline-flex;
        align-self: flex-start;
        width: auto;
        height: auto;
        padding: 9px 22px;
        font-size: 13px;
        border-radius: 8px;
    }
    .grocery-banner .swiper-slide img {
        max-width: 62%;
        max-height: 240px;
    }
}

/* === Grocery banner: blank space above on phones wider than 320px (Keerthika) === */
/* The small header-clearance margin (45px) was only defined at max-width:320px,
   so 321–767px fell back to the 120px base and showed a big empty band.
   Apply the small margin across all phones. */
@media (max-width: 767.98px) {
    .grocery-banner {
        margin-top: 45px !important;
    }
}

/* === Grocery section "See all" – match home page size/weight (Keerthika) === */
/* Home renders "See all" at 16px/600 green in every section. The grocery
   tab-section link only picked up the base .navi-link mobile size (13px/500),
   so normalise it to the home look. */
@media (max-width: 767.98px) {
    .grocery-tab-sec .navi-link,
    .gro-category-section .navi-link {
        font-size: 16px !important;
        font-weight: 600 !important;
    }
}

/* === Grocery tab section: variant dropdown was clipped (Keerthika) === */
/* .cards-viewport had overflow:hidden (intended for a horizontal cards-row that
   this markup doesn't use), which cut off the open "5 kg" variant menu. */
.grocery-tab-sec .cards-viewport {
    overflow: visible !important;
}

/* === Home-style green "See all" — consistent 16px/600 on mobile (Keerthika) === */
/* .text-light-green marks the home-page "See all" link; the base .navi-link
   mobile size (13px/500) made it smaller than home (16px/600) on inner pages
   (best-seller "Order Again", etc). Enforce the home size wherever it's used. */
@media (max-width: 767.98px) {
    .navi-link.text-light-green {
        font-size: 16px !important;
        font-weight: 600 !important;
    }
}

/* === "See all" links: identical to the home page on EVERY page and breakpoint.
      The grocery page rendered them bigger (base 20px/500 on desktop) and with
      an olive (#878400) arrow instead of the home green. Normalise the link and
      its arrow to the home look — 16px / 600 / green (#0aa537). (Keerthika) === */
.navi-link.text-light-green {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #0aa537 !important;
}
.navi-link.text-light-green i {
    color: #0aa537 !important;
}

/* === Contact-us page – blank space above banner on mobile (Keerthika) === */
/* .contact-page-banner had margin-top 85/110/130px across breakpoints; stacked
   on main's header clearance it left a big empty band above the green banner. */
@media (max-width: 767.98px) {
    .contact-page-banner {
        margin-top: 40px !important;
    }
}

/* === Shop by Price / grocery tab cards: un-clip the open variant menu (Keerthika) === */
/* The tab cards compute overflow:hidden (cardReveal animation card), which cut
   off the open quantity dropdown. When the menu is open, let it overflow. */
.shop-tab-sec .product-card.variant-menu-open,
.grocery-tab-sec .product-card.variant-menu-open {
    overflow: visible !important;
}

/* === Policy / offer / about / subscription pages – comfortable gap between
      the header and the title on mobile (~200px from top) (Keerthika) === */
@media (max-width: 767.98px) {
    /* privacy / terms / return / refund / cancellation policy */
    .policy-section {
        margin-top: 95px !important;
        padding-top: 16px !important;
    }
    /* limited-offer + deals-list */
    .limited-offer-main {
        margin-top: 95px !important;
    }
    /* subscription hero + about banner: sit tight under the header (these are
       hero/banner sections, not a title that needs a gap like the policy pages) */
    .subscription-section {
        margin-top: 15px !important;
        padding-top: 10px !important;
    }
    .about-banner {
        /* Header clearance is already handled by `main { padding-top: 52px }`
           on inner pages; the extra 40px only added a white gap above the hero. */
        margin-top: 0 !important;
    }
}

/* === Subscription plans: click-to-select (orange = selected) (Keerthika) === */
/* Any card can be the selected (orange) one; the rest stay white. The center
   card is selected by default (JS). Works for both the premium and simple
   card structures. */
.subscription-plan .plan-card {
    cursor: pointer;
    transition: box-shadow .2s ease, transform .2s ease;
}

/* --- Selected (orange) state — applies to ANY card --- */
.subscription-plan .plan-card.plan-selected {
    background: linear-gradient(180deg, #F28729 0%, #D12121 147.92%) !important;
    box-shadow: 0 0 25px rgba(242, 134, 41, .5) !important;
    border-color: transparent !important;
}
.subscription-plan .plan-card.plan-selected,
.subscription-plan .plan-card.plan-selected h6,
.subscription-plan .plan-card.plan-selected .plan-type,
.subscription-plan .plan-card.plan-selected .plan-type.basic,
.subscription-plan .plan-card.plan-selected .price,
.subscription-plan .plan-card.plan-selected .price span,
.subscription-plan .plan-card.plan-selected .desc,
.subscription-plan .plan-card.plan-selected .plan-p,
.subscription-plan .plan-card.plan-selected .features li,
.subscription-plan .plan-card.plan-selected .planlist1 {
    color: #fff !important;
}
.subscription-plan .plan-card.plan-selected hr {
    border-color: rgba(255, 255, 255, .35) !important;
}
.subscription-plan .plan-card.plan-selected .features li::before {
    color: #F28729 !important;
    background: #fff !important;
}
.subscription-plan .plan-card.plan-selected .btn {
    background: #fff !important;
    color: #F28729 !important;
    border-color: #fff !important;
}
.subscription-plan .plan-card.plan-selected .family-pack-badge {
    background: #fff !important;
    color: #F28729 !important;
}

/* --- Premium card when NOT selected -> render white like the simple cards --- */
.subscription-plan .plan-card.premium-card1:not(.plan-selected) {
    background: #fff !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .06) !important;
    border: 1px solid #8593a352 !important;
}
.subscription-plan .plan-card.premium-card1:not(.plan-selected) .plan-p,
.subscription-plan .plan-card.premium-card1:not(.plan-selected) .price,
.subscription-plan .plan-card.premium-card1:not(.plan-selected) .price span,
.subscription-plan .plan-card.premium-card1:not(.plan-selected) .planlist1 {
    color: #1f2937 !important;
}
.subscription-plan .plan-card.premium-card1:not(.plan-selected) .plan-type.text-white {
    color: #F28729 !important;
}
.subscription-plan .plan-card.premium-card1:not(.plan-selected) .features li::before {
    color: #fff !important;
    background: #F28729 !important;
}
.subscription-plan .plan-card.premium-card1:not(.plan-selected) .get-pre {
    background: #F28729 !important;
    color: #fff !important;
}

/* === Home subscription plans: click-to-select (green = active) (Keerthika) ===
   Mirrors the subscription-page pattern but green: the selected card gets the
   premium green look and its text turns white; every other card (including the
   static "premium"/Most-Popular one) renders white. JS toggles .plan-selected.
   Scoped with :not(.subscription-plan) so it never touches the subscription
   page (which shares the .saalad-plan class but must stay orange). */
.saalad-plan:not(.subscription-plan) .plan-card {
    cursor: pointer;
    transition: box-shadow .2s ease, transform .2s ease;
}

/* --- Selected (green) state — applies to ANY card --- */
.saalad-plan:not(.subscription-plan) .plan-card.plan-selected {
    background: url(../images/home/preminum-plan.png) no-repeat !important;
    background-size: cover !important;
    box-shadow: 0px 8px 80px 0px rgba(5, 121, 107, 0.32) !important;
}
.saalad-plan:not(.subscription-plan) .plan-card.plan-selected,
.saalad-plan:not(.subscription-plan) .plan-card.plan-selected .plan-type,
.saalad-plan:not(.subscription-plan) .plan-card.plan-selected .price,
.saalad-plan:not(.subscription-plan) .plan-card.plan-selected .price span,
.saalad-plan:not(.subscription-plan) .plan-card.plan-selected .desc,
.saalad-plan:not(.subscription-plan) .plan-card.plan-selected .features li {
    color: #fff !important;
}
.saalad-plan:not(.subscription-plan) .plan-card.plan-selected hr {
    border-color: rgba(255, 255, 255, .35) !important;
}
.saalad-plan:not(.subscription-plan) .plan-card.plan-selected .features li::before {
    color: var(--primary) !important;
    background: #fff !important;
}
.saalad-plan:not(.subscription-plan) .plan-card.plan-selected .btn {
    background: #fff !important;
    color: var(--primary) !important;
    border-color: #fff !important;
}

/* --- "Most Popular" premium card when NOT selected -> white like the rest --- */
.saalad-plan:not(.subscription-plan) .plan-card.premium:not(.plan-selected) {
    background: #fff !important;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px !important;
}
.saalad-plan:not(.subscription-plan) .plan-card.premium:not(.plan-selected) .plan-type {
    color: #05796b !important;
}
.saalad-plan:not(.subscription-plan) .plan-card.premium:not(.plan-selected) .price,
.saalad-plan:not(.subscription-plan) .plan-card.premium:not(.plan-selected) .desc,
.saalad-plan:not(.subscription-plan) .plan-card.premium:not(.plan-selected) .desc.text-white {
    color: #1f2937 !important;
}
.saalad-plan:not(.subscription-plan) .plan-card.premium:not(.plan-selected) .price span,
.saalad-plan:not(.subscription-plan) .plan-card.premium:not(.plan-selected) p,
.saalad-plan:not(.subscription-plan) .plan-card.premium:not(.plan-selected) li {
    color: #606060 !important;
}
.saalad-plan:not(.subscription-plan) .plan-card.premium:not(.plan-selected) .features li::before {
    color: #fff !important;
    background: var(--primary) !important;
}
.saalad-plan:not(.subscription-plan) .plan-card.premium:not(.plan-selected) .btn-white {
    background: #fff !important;
    color: var(--primary) !important;
    border: 1px solid #8593a352 !important;
}

/* === Inner-page header clearance restore (Keerthika) === */
/* The fixed header (logo row + search bar) covers ~147px on phones. A change
   dropped `main`'s padding-top to 52px, which tucked page content (salad tab,
   address card, breadcrumbs, banners…) behind the header. Restore the ~120px
   clearance the per-page top margins were designed around. */
@media (max-width: 767.98px) {
    body:not(.home-section-spacing) .body_wrap > main {
        padding-top: 120px !important;
    }
    /* shop-by-price used the smallest margin (20px) -> give it a touch more so
       its breadcrumb clears the header too */
    .shop-tab-sec {
        margin-top: 34px !important;
    }
}

/* === Home hero: buttons below the image on stacked (mobile/tablet) layout (Keerthika) === */
/* Desktop keeps text+buttons (col-lg-7) beside the image (col-lg-5). When the
   columns stack, the buttons sat above the image; promote col-lg-7's children
   into the row's flex flow and reorder: title -> image -> buttons. */
@media (max-width: 991.98px) {
    .home-dynamic-hero .row {
        flex-direction: column;
    }
    .home-dynamic-hero .col-lg-7 {
        display: contents;
    }
    .home-dynamic-hero .col-lg-7 > * {
        width: 100%;
    }
    .home-dynamic-hero .title {
        order: 1;
    }
    .home-dynamic-hero .col-lg-7 > p {
        order: 2;
    }
    .home-dynamic-hero .col-lg-5 {
        order: 3;
    }
    .home-dynamic-hero .btn-list {
        order: 4;
        margin-top: 30px;
    }
}

/* === Home hero: fit content height on mobile (was full-viewport 100vh, which
      left a big empty gap below the buttons before the next section) (Keerthika) === */
@media (max-width: 991.98px) {
    .home-dynamic-hero .home-hero-swiper,
    .home-dynamic-hero .home-hero-swiper .swiper-wrapper,
    .home-dynamic-hero .home-hero-slide,
    .home-dynamic-hero .home-hero-swiper .swiper-slide {
        height: auto !important;
        min-height: 0 !important;
    }
    .home-dynamic-hero .home-hero-slide {
        padding-bottom: 8px;
    }
}

/* === Explore Our Products slider: first card fully visible on large phones
      (480-767px) — was slidesPerView:1 (full-width slide, empty space) (Keerthika) === */
@media (min-width: 480px) and (max-width: 767.98px) {
    .home-category-swiper .swiper-slide {
        width: 280px !important;
        height: auto;
    }
    .home-category-swiper .our-products-container {
        width: 100% !important;
    }
}

/* === OTP modal: 4 input boxes overflowed on mobile (fixed 70px each ≈ 328px).
      Make them share the row so all four fit. (Keerthika) === */
@media (max-width: 767.98px) {
    .otp-box {
        gap: 10px;
        width: 100%;
        justify-content: space-between;
    }
    .otp-input {
        width: auto !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
        height: 54px;
    }
}
@media (max-width: 360px) {
    .otp-box { gap: 8px; }
    .otp-input { height: 50px; }
}

/* === Cart page: responsive items + content-height card on mobile (Keerthika) === */
@media (max-width: 767.98px) {
    /* card grows with its items instead of a fixed 477px (kills the empty gap) */
    .my-cart-page .cart-items-scroll {
        height: auto !important;
        max-height: 62vh;
    }
    .my-cart-page .cart-item {
        padding: 10px 12px;
        margin: 10px;
    }
    /* single nowrap row so the qty control can't overlap the name/price */
    .my-cart-page .cart-item .row {
        flex-wrap: nowrap !important;
        align-items: center;
        --bs-gutter-x: 8px;
    }
    .my-cart-page .cart-item .row > [class*="col-"] {
        width: auto;
        flex: 0 0 auto;
        max-width: none;
    }
    .my-cart-page .cart-item .row > [class*="col-"]:nth-child(2) {
        flex: 1 1 auto;      /* info column fills the middle, name ellipsizes */
        min-width: 0;
    }
    /* smaller image */
    .my-cart-page .item-img {
        width: 56px;
        height: 56px;
        padding: 3px;
    }
    .my-cart-page .item-img img {
        width: 46px;
        height: 46px;
    }
    /* reduced fonts */
    .my-cart-page .item-name  { font-size: 14px; }
    .my-cart-page .item-price { font-size: 15px; }
    .my-cart-page .item-mrp   { font-size: 12px; }
    .my-cart-page .item-size  { font-size: 12px; }
    /* compact quantity control */
    .my-cart-page .qty-ctrl button {
        width: 30px;
        height: 28px;
        font-size: 12px;
    }
    .my-cart-page .qty-ctrl span {
        font-size: 13px;
        min-width: 16px;
    }
}
@media (max-width: 360px) {
    .my-cart-page .item-name  { font-size: 13px; }
    .my-cart-page .item-price { font-size: 14px; }
    .my-cart-page .qty-ctrl button { width: 26px; }
    .my-cart-page .item-img { width: 50px; height: 50px; }
}

/* === Cart page: smaller title + title & "N items" on one row on mobile (Keerthika) === */
@media (max-width: 767.98px) {
    .my-cart-page .cart-title {
        font-size: 20px;
    }
    /* wrapper holding the title + subtitle -> lay them side by side */
    .my-cart-page .cart-header > div {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 4px 8px;
    }
    .my-cart-page .cart-subtitle {
        margin-top: 0;
    }
}

/* === Home "Healthy Made Your Way": trim space above/below the title on mobile (Keerthika) === */
@media (max-width: 767.98px) {
    .health-made.space {
        padding-top: 18px !important;
        padding-bottom: 18px !important;
    }
    .health-made .row.my-4.mb-5 {
        margin-top: 6px !important;
        margin-bottom: 12px !important;
    }
}

/* also tighten the promo card's internal top space on mobile */
@media (max-width: 767.98px) {
    .health-made .top-banner.mt-5 {
        margin-top: 18px !important;
    }
}

/* === Mobile: hide Fresh & Healthy description; compact salad-subscription title (Keerthika) === */
@media (max-width: 767.98px) {
    /* Fresh and Healthy section: hide the description paragraph */
    .fresh-products .title-container p {
        display: none;
    }
    /* "Salad Subscription" title -> smaller, one line */
    .saalad-plan .title-container .section-title {
        font-size: 22px !important;
        white-space: nowrap;
    }
}

/* === Mobile: bolder section titles (Keerthika) === */
@media (max-width: 767.98px) {
    .title-container .section-title {
        font-weight: 700 !important;
    }
}

/* === Task 4: All Essentials — tighter item spacing on mobile (was wide columns
      with small centered items -> big gaps) (Keerthika) === */
@media (max-width: 767.98px) {
    .all-essentials .home-essentials-swiper .swiper-wrapper {
        grid-auto-columns: 104px !important;
        column-gap: 10px !important;
    }
}

/* === Task 1: home Salad Subscription plans — only the selected card is green,
      the rest white; click to select (mobile) (Keerthika) === */
@media (max-width: 767.98px) {
    .saalad-plan .plan-card { cursor: pointer; }
    /* green (premium) card rendered white unless it is the selected one */
    .saalad-plan .plan-card.premium:not(.plan-selected) {
        background: #fff !important;
        color: #1f2937 !important;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px !important;
    }
    .saalad-plan .plan-card.premium:not(.plan-selected) h6,
    .saalad-plan .plan-card.premium:not(.plan-selected) p,
    .saalad-plan .plan-card.premium:not(.plan-selected) li,
    .saalad-plan .plan-card.premium:not(.plan-selected) .plan-type,
    .saalad-plan .plan-card.premium:not(.plan-selected) .price,
    .saalad-plan .plan-card.premium:not(.plan-selected) .price span,
    .saalad-plan .plan-card.premium:not(.plan-selected) .plan1-text {
        color: #1f2937 !important;
    }
    .saalad-plan .plan-card.premium:not(.plan-selected) .features li::before {
        color: #fff !important;
        background: #05796b !important;
    }
    /* the selected card -> green premium look (works on any card) */
    .saalad-plan .plan-card.plan-selected {
        background: url(../images/home/preminum-plan.png) no-repeat !important;
        background-size: cover !important;
        color: #fff !important;
        box-shadow: 0px 8px 40px 0px rgba(5, 121, 107, 0.32) !important;
    }
    .saalad-plan .plan-card.plan-selected h6,
    .saalad-plan .plan-card.plan-selected p,
    .saalad-plan .plan-card.plan-selected li,
    .saalad-plan .plan-card.plan-selected .plan-type,
    .saalad-plan .plan-card.plan-selected .price,
    .saalad-plan .plan-card.plan-selected .price span,
    .saalad-plan .plan-card.plan-selected .plan1-text {
        color: #fff !important;
    }
}

/* === Product details FBT cards: keep struck price beside the current price (Keerthika) === */
@media (max-width: 767.98px) {
    .pro-cate-sec .frequent-sec .product-card .price-row {
        flex-wrap: nowrap !important;
        gap: 4px !important;
        white-space: nowrap;
    }
    .pro-cate-sec .frequent-sec .product-card .price-now {
        font-size: 13px !important;
    }
    .pro-cate-sec .frequent-sec .product-card .price-old {
        font-size: 11px !important;
        white-space: nowrap;
    }
}
@media (max-width: 360px) {
    .pro-cate-sec .frequent-sec .product-card .price-now { font-size: 12px !important; }
    .pro-cate-sec .frequent-sec .product-card .price-old { font-size: 10px !important; }
}

/* === Profile pages – mobile responsiveness (Keerthika) === */
@media (max-width: 767.98px) {
    /* 1. Your Salads tabs (Upcoming / Delivered / Paused) — fit 3 across */
    .salad-tabs {
        gap: 6px !important;
    }
    .salad-tabs .salad-tab {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        height: auto;
        min-height: 38px;
        font-size: 13px;
        padding: 8px 10px;
        line-height: 1.2;
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
    }

    /* 2. Notification preference toggle — keep a proper pill switch */
    #NotificationsPreferences .custom-toggle {
        width: 46px !important;
        height: 26px !important;
        flex: 0 0 auto;
    }
    #NotificationsPreferences .slider:before {
        height: 18px !important;
        width: 18px !important;
        left: 4px !important;
        bottom: 4px !important;
    }
    #NotificationsPreferences input:checked + .slider:before {
        transform: translateX(20px) !important;
    }

    /* 3. Invite Friends — smaller fonts, less padding. The base .refer-header has
       a FIXED height:380px; on phones its content is taller, so the wallet summary
       overflowed down and overlapped the "My Referrals" section. Let it grow. */
    .refer-header {
        padding: 20px 14px !important;
        height: auto !important;
    }
    .refe-title {
        font-size: 20px !important;
    }
    .refer-link-container {
        padding: 8px !important;
    }
    .refer-link-container .fw-medium {
        font-size: 12px !important;
        word-break: break-all;
    }
    .ref-copy-sec {
        font-size: 12px !important;
        white-space: nowrap;
    }
    .refer-header .d-flex.gap-4 {
        gap: 16px !important;
    }

    /* 5. Need Help — smaller fonts, tighter padding */
    .faq-card-sec {
        padding: 14px !important;
        margin-bottom: 14px !important;
    }
    .faq-card-sec .fw-bold,
    .faq-card-sec .list-group-item {
        font-size: 14px !important;
    }
    .faq-card-sec .py-3 {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
    .tab-opt-title {
        font-size: 18px !important;
    }
}

/* ============================================================
   GROUP-GRID section ("ChoteKisan Collection" / "All Essentials")
   mobile fixes (Keerthika):
   1. TITLE + ARROWS OVERLAP — .slider-nav was position:absolute; top:-82px
      sitting on top of the title. Anchor it to the section's top-right so
      the title can wrap freely underneath without ever running into it.
   2. CARD CUTTING — force scroll-snap so the grid always rests on a full
      card (only the peeked next card is partially shown, never the first).
   (Arrow-sliding is wired in index.blade.php — native grid has no Swiper.)
   ============================================================ */
@media (max-width: 767.98px) {
    /* make the whole section the positioning context for the nav */
    .all-essentials {
        position: relative !important;
    }
    .all-essentials .products-slider-wrapper {
        position: static !important;
    }
    /* gap under the title row so the cards clear the title + arrows */
    .all-essentials .row.mb-5 {
        margin-bottom: 1.5rem !important;
    }

    /* pin the arrows to the top-right of the section (title band) */
    .all-essentials .slider-nav {
        position: absolute !important;
        top: 20px !important; /* vertically centre the arrows on the title line */
        right: 12px !important;
        bottom: auto !important;
        left: auto !important;
        z-index: 6;
        gap: 8px;
    }
    .all-essentials .slider-nav .prev-1,
    .all-essentials .slider-nav .next-1 {
        width: 32px !important;
        height: 32px !important;
    }
    .all-essentials .slider-nav .prev-1 svg,
    .all-essentials .slider-nav .next-1 svg {
        width: 14px !important;
        height: 14px !important;
    }

    /* let the title wrap to a new line; reserve room so it never sits under
       the arrows (2 x 32px + gap ≈ 72px, pinned at right:12px) */
    .all-essentials .title-container {
        padding-right: 82px !important;
    }
    .all-essentials .title-container .section-title {
        font-size: 19px !important;
        line-height: 1.3 !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        margin-bottom: 0 !important;
    }

    /* card cutting: snap so a full card is always the left-most view */
    .all-essentials .home-essentials-swiper .swiper-wrapper {
        scroll-snap-type: x mandatory !important;
        scroll-padding-left: 0 !important;
    }
}

/* ============================================================
   FOOTER credit: keep "Design & Developed by Cloudi5 Technologies"
   together so "Cloudi5" never drops onto its own line on mobile
   (was flex-direction:column stacking the link below). (Keerthika)
   ============================================================ */
.footer-bottom .footer-dev-credit,
.footer-bottom .footer-company {
    white-space: nowrap;
}
@media (max-width: 767.98px) {
    .footer-bottom .footer-com-sec {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        text-align: center;
    }
    /* let the copyright wrap, but the credit span stays a single unit */
    .footer-bottom .footer-com-sec p {
        white-space: normal !important;
        text-align: center;
    }
    .footer-bottom .footer-dev-credit {
        white-space: nowrap !important;
    }
}

/* ============================================================
   SUBSCRIPTION PAGE mobile fixes (Keerthika)
   ============================================================ */
@media (max-width: 767.98px) {
    /* Task 3: the long plan title "Choose Your Perfect Plan for Salads" was
       forced onto one line by the shared .saalad-plan nowrap rule (meant for
       the home page's short "Salad Subscription"), so it ran off-screen.
       Allow it to wrap and give it the full row width. */
    .subscription-plan .title-container .section-title {
        white-space: normal !important;
        font-size: 21px !important;
        line-height: 1.3 !important;
    }
    .subscription-plan .row.my-4 > .col-8 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Task 4: "What You'll Get" title (h2 has mb-0) sat only ~15px above the
       first card image. Add breathing room under the heading block. */
    .subscription-cards .title-container h2 {
        margin-bottom: 6px !important;
    }
    .subscription-cards .row.align-items-center {
        margin-top: 24px !important;
    }
}

/* ============================================================
   SUBSCRIPTION PAGE mobile: cleaner, even sections (Keerthika)
   1. Hide the paragraph description under each section title
      (main title is enough on small screens).
   2. Reduce the large 80px gaps above/below the sections
      (esp. "How You'll Get") so the page reads evenly.
   ============================================================ */
@media (max-width: 767.98px) {
    /* 1. hide section descriptions (only descriptions live in .title-container p) */
    .subscription-plan .title-container p,
    .subscription-cards .title-container p,
    .subscription-work .title-container p,
    .subscription-faq .title-container p {
        display: none !important;
    }

    /* 2. tighter, even inter-section spacing */
    .subscription-cards {
        margin-top: 36px !important;
    }
    .subscription-work {
        margin-top: 36px !important;
    }
    .subscription-faq {
        margin-top: 36px !important;
    }
    /* internal gap between the "How You'll Get" title and its cards */
    .subscription-work .work-title {
        margin-bottom: 26px !important;
    }
}

/* === Explore Our Products nav arrows: match the smaller "All Essentials"
      arrow size on mobile (were 40px vs 32px). Desktop stays 40px. (Keerthika) === */
@media (max-width: 767.98px) {
    .explore-our-products .slider-nav .prev,
    .explore-our-products .slider-nav .next {
        width: 32px !important;
        height: 32px !important;
    }
}

/* === Deals hero (mobile/tablet): show the two feature cards BELOW the cart
      image. The cards live inside the left text column, so we flatten that
      column (display:contents) and re-order text → cart image → cards.
      Desktop (>= 992px) is untouched. (Keerthika) === */
@media (max-width: 991.98px) {
    .Deals-main .home-banner .row > .deals-hero-left {
        display: contents;
    }
    .Deals-main .home-banner .deals-hero-text {
        order: 1;
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
        padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
    }
    .Deals-main .home-banner .deals-hero-img {
        order: 2;
    }
    .Deals-main .home-banner .deals-hero-cards {
        order: 3;
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

/* === "Healthy Made Your Way" cards on mobile (Keerthika) ===
   Keep each produce image ON its card, small, tucked into the TOP-RIGHT corner
   so it never covers the title (34px title leaves room on the right). The salad
   image was display:none — re-show it; and the salad card's text is left-aligned
   on mobile so its top-right image has clear space. */
@media (max-width: 767.98px) {
    .top-banner-container,
    .bottom-banner-container {
        position: relative;
    }
    .top-banner-container .img-box,
    .bottom-banner-container .img-box {
        position: absolute !important;
        top: 2px !important;
        right: 6px !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: 120px !important;
        margin: 0 !important;
        z-index: 3 !important;
    }
    /* both product images: visible (salad was display:none) and small; the
       max-height keeps the image inside the title band so it never drops onto
       the description text below, whatever the image's aspect ratio */
    .top-banner-container .img-box img,
    .bottom-banner-container .img-box .bottom-main-img,
    .img-box.left img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 92px !important;
        object-fit: contain !important;
    }
    /* salad card: left-align text so the top-right image never covers it */
    .bottom-banner-container .content {
        align-items: flex-start !important;
        text-align: left !important;
    }
    .bottom-banner .desc,
    .bottom-banner .title {
        text-align: left !important;
    }
    /* "Order Now!" badge: small, on the image's top-right corner */
    .top-banner-container .badge-circle,
    .bottom-banner-container .badge-circle {
        top: -6px !important;
        right: -6px !important;
        left: auto !important;
        bottom: auto !important;
        padding: 0 !important;
    }
    .top-banner-container .badge-circle img,
    .bottom-banner-container .badge-circle img,
    .bottom-banner-container .badge-circle .bottom-cir-img {
        width: 40px !important;
    }
}

/* === About-us app-download CTA on mobile (Keerthika) ===
   The store-badge buttons were oversized and the phone mock-up was absolutely
   positioned, so it got clipped by the wrapper and looked small. Shrink the
   badges and drop the phone into normal flow so it displays fully and larger. */
@media (max-width: 767.98px) {
    .about-cta-sec .about-cta-btn-group img {
        height: 40px;
    }
    .about-cta-sec .about-cta-image {
        position: static;
        width: 100%;
        text-align: center;
        margin-top: 6px;
    }
    .about-cta-sec .about-cta-image img {
        position: static;
        width: 90%;
        max-width: 420px;
        margin: 0 auto;
        transform: none;
    }
    .about-cta-sec .about-cta-wrapper {
        height: auto;
    }
}

/* === Home hero image on laptop/desktop (Keerthika) ===
   The right-side basket image was a fixed 460px wide, which on laptop screens
   grew too tall and got clipped at the top and bottom. Cap its height so it
   stays compact and fully visible; mobile keeps its own smaller sizes. */
@media (min-width: 992px) {
    .home-banner .img-container img {
        width: auto;
        max-width: 100%;
        max-height: 360px;
    }
}

/* === Quantity dropdown (.qty-dropdown): unify with the green-pill design used
   by .product-variant-dropdown, so the quantity selector looks identical on
   EVERY page (best-seller, cart, wishlist, limited-offer, product-details,
   profile…). Matches the reference: light-green pill toggle, white menu opening
   downward, dark-green selected item. (Keerthika) === */
.qty-dropdown {
    position: relative;
    display: inline-block;
    width: auto;
    min-width: 92px;
}
/* toggle → light-green pill */
.qty-dropdown .qty-selected {
    width: 100%;
    min-height: 34px;
    padding: 5px 8px 5px 12px;
    border: 0;
    border-radius: 7px;
    background: #f3faf2;
    color: #167713;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
}
.qty-dropdown .qty-selected i {
    font-size: 11px;
    transition: transform 0.2s ease;
}
.qty-dropdown.active .qty-selected i {
    transform: rotate(180deg);
}
/* menu → white box BELOW the pill (was opening upward at -130px) */
.qty-dropdown .qty-menu {
    position: absolute;
    left: 0;
    top: calc(100% + 5px);
    width: 100%;
    min-width: 110px;
    max-height: 180px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e1e8df;
    border-radius: 9px;
    box-shadow: 0 10px 28px rgba(24, 62, 22, 0.16);
    padding: 5px;
    margin: 0;
    list-style: none;
    display: none;
    z-index: 10;
}
.qty-dropdown.active .qty-menu {
    display: block;
}
.qty-dropdown .qty-menu li {
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #394239;
    list-style: none;
}
.qty-dropdown .qty-menu li.active {
    background: #167713;
    color: #fff;
}
.qty-dropdown .qty-menu li:not(.active):hover {
    background: #edf7ec;
    color: #126b10;
}

/* === Filter offcanvas (mobile modal): the accordion group is capped at
   max-width:320px for the DESKTOP sidebar, which in the full-width modal left a
   big gap after the chevron. Let it fill the modal so the chevron sits flush at
   the right edge. (Keerthika) === */
.offcanvas .catalog-filter-form,
.offcanvas .drp-filter-group,
.offcanvas .filter-section {
    max-width: none !important;
    width: 100%;
}
.offcanvas .drp-filter-group summary {
    padding-right: 16px;
}
/* "Filter … Clear all" header: fill the modal so "Clear all" sits at the right end */
.offcanvas .filter-header {
    padding-right: 4px;
}

/* === Product-details "Frequently Bought Together" cards (Keerthika) ===
   Tighter, home-like cards: smaller image box so the image fills it (was gappy),
   compact spacing, and the quantity dropdown sits below the name in its own row
   OUTSIDE the card link (so tapping it opens instead of navigating). */
.pro-cate-sec .frequent-sec .product-card {
    padding: 8px 8px 12px;
}
.pro-cate-sec .frequent-sec .product-card .img-area {
    height: 120px;
}
.pro-cate-sec .frequent-sec .product-card .img-area img {
    width: 100%;
    height: 100%;
    padding: 8px;
}
.pro-cate-sec .frequent-sec .product-card .info {
    padding: 8px 2px 0;
}
.pro-cate-sec .frequent-sec .product-card .prod-name {
    margin: 3px 0 0;
    min-height: 0;
}
.pro-cate-sec .frequent-sec .fbt-variant {
    padding: 6px 2px 0;
}
.pro-cate-sec .frequent-sec .fbt-variant .qty-dropdown {
    width: 100%;
    min-width: 0;
}

/* === Coupon page: small breathing space above the breadcrumb on large screens
   (it was sitting tight against the top / header). Mobile already has its own
   tighter spacing. (Keerthika) === */
@media (min-width: 768px) {
    .coupon-section .custom-breadcrumb {
        margin-top: 16px;
    }
}

/* === Sticky cart indicator — compact pill (Keerthika) ===
   Small rounded box: the added product's image (white thumb) with a red item-count
   badge + "View Cart". Shrinks to its content (the old 420px width left a big blank
   right side) and stays visible on every page while the cart has items
   (window.updateCartBadge drives the count/visibility). */
.cart-toast-wrap.cart-sticky {
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    cursor: pointer;
}
.cart-toast-wrap.cart-sticky .cart-toast {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 10px 18px 10px 10px;
    border-radius: 12px;
}
.cart-toast-wrap.cart-sticky .cart-sticky-thumb {
    position: relative;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    background: #fff;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cart-toast-wrap.cart-sticky .cart-sticky-thumb img {
    width: 100%;
    height: 100%;
    padding: 4px;
    object-fit: contain;
    border-radius: 9px;
}
.cart-toast-wrap.cart-sticky .cart-sticky-count {
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 10px;
    background: #e11d1d;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #0c7b09;
}
.cart-toast-wrap.cart-sticky .cart-sticky-label {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

/* === Profile "Your Salads" tab (Keerthika) ===
   1. The heading carried margin-right:200px which pushed "Your Salads" into
      wrapping / overflowing the narrow profile tab — drop it, keep one line.
   2. The empty-state illustration had margin-left:80px, shoving it off-centre —
      centre it and cap its width. */
.my-salad-page .heading-salad {
    margin-right: 0 !important;
    white-space: nowrap;
}
.empty-delivered-inner img {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block;
    max-width: 100%;
}

/* ===================================================================
   Order tracking timeline — unified single-orange accent (design match).
   Overrides the older per-stage multi-colour scheme (blue/violet/green)
   so every reached step reads orange with a soft peach highlight, and
   upcoming steps stay clean hollow-grey. Appended last so it wins. */

/* Active step highlight box — peach for whichever stage is current */
.stage-active#Order-Placed,
.stage-active#Order-Confirmed,
.stage-active#Out-For-Delivery,
.stage-active#Delivered {
    background-color: #FEF5EB;
}

/* Reached-step labels: orange (was blue / violet / green per stage) */
.stage-active#Order-Placed h6,     .stage-completed#Order-Placed h6,
.stage-active#Order-Confirmed h6,  .stage-completed#Order-Confirmed h6,
.stage-active#Out-For-Delivery h6, .stage-completed#Out-For-Delivery h6,
.stage-active#Delivered h6,        .stage-completed#Delivered h6 {
    color: #F07C00;
}

/* Connector line: solid orange once a step is reached, dashed grey while
   upcoming (the base rule already renders the dashed-grey default). */
.stage-active#Order-Placed .order_icons::before,     .stage-completed#Order-Placed .order_icons::before,
.stage-active#Order-Confirmed .order_icons::before,  .stage-completed#Order-Confirmed .order_icons::before,
.stage-active#Out-For-Delivery .order_icons::before, .stage-completed#Out-For-Delivery .order_icons::before,
.stage-active#Delivered .order_icons::before,        .stage-completed#Delivered .order_icons::before {
    background: #F07C00 !important;
}

/* ===================================================================
   My Orders — empty state vertical centering.
   The orders card is min-vh-100, so the "No Orders Yet" illustration used
   to sit near the bottom. Give the empty wrapper a matching min-height and
   centre its content so it lands in the middle of the page. */
#Product_List_Empty {
    min-height: 78vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#Product_List_Empty .tab-content-center {
    height: auto;
}
/* the intro paragraph is width:50% inline — too narrow/awkward on phones */
#Product_List_Empty .tab-order-para {
    max-width: 420px;
    width: auto !important;
}

/* ===================================================================
   My Orders — responsive polish for the order-list cards. */
@media (max-width: 575.98px) {
    /* keep the status/date block and the price+arrow on one row but let it
       wrap gracefully instead of overflowing on very narrow screens */
    .order-card-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    .order-price-flex {
        margin-left: auto;
    }
    /* "Order Again" full-width and easy to tap under the product thumbnails */
    .order-card-content .text-end .secondary-green-btn {
        display: block;
        width: 100%;
        text-align: center;
    }
    /* long addresses / values in the detail bill shouldn't overflow */
    .bill-info-left,
    .bill-info-right {
        word-break: break-word;
    }
    #Product_List_Empty {
        min-height: 70vh;
    }
}

/* ═══ Profile & cart tweaks (Keerthika) ═══════════════════════════════ */

/* Content card: was min-vh-100, which left a large empty gap above the
   footer on short screens (empty subscription / salads / address). A more
   modest min-height keeps the panel substantial without the dead space. */
.profile-page .profile-content-card {
    min-height: 60vh;
}

/* Trim the extra bottom padding under the profile section so the footer
   sits closer to the content on every profile sub-screen. */
section.profile-page.py-5 {
    padding-bottom: 1.5rem !important;
}

@media (max-width: 767.98px) {
    .profile-page .profile-content-card {
        min-height: 50vh;
    }
    #Product_List_Empty {
        min-height: 50vh;
    }
}

/* Cart popup opens from the bottom-right, just above the scroll-to-top
   button, instead of dropping down from the header cart icon. */
.cart-added-wrapper.cart-added-active .cart-added-box {
    position: fixed;
    top: auto;
    left: auto;
    right: 25px;
    bottom: 95px;
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.cart-added-box::before {
    display: none !important;
}

@media (max-width: 575px) {
    .cart-added-wrapper.cart-added-active .cart-added-box {
        right: 12px;
        bottom: 88px;
        width: calc(100% - 24px);
        max-width: 320px;
        transform: translateY(0);
    }
}

/* === Sticky "View Cart" pill: bottom-right, beside the back-to-top button (Keerthika) ===
   It sat at top:12% (14% on small screens), i.e. floating over the middle of the
   page, where it covered whatever happened to be there — the app-store badges in
   the footer, product card content, etc. Park it at the bottom instead, directly
   left of the round scroll-to-top control (58px at right:25px/bottom:25px), so the
   two sit side by side without overlapping. `top`/`right` need !important to beat
   the `top: 14% !important` in style.css. The slide-in-from-the-right transition
   on .cart-toast-wrap.show is unchanged and still reads correctly down here. */
.cart-toast-wrap.cart-sticky {
    top: auto !important;
    bottom: 23px !important;
    right: 95px !important;
}

@media (max-width: 767.98px) {
    /* The back-to-top control is hidden on phones (see above), so the pill has the
       bottom-right corner to itself. */
    .cart-toast-wrap.cart-sticky {
        bottom: 16px !important;
        right: 12px !important;
    }
}

/* === Product card variant dropdown: lower options were unclickable (Keerthika) ===
   Every product section carries data-aos, and AOS keeps a `transform` on it even
   after the animation finishes (translate3d -> translateZ(0)). A transform makes
   the section a stacking context, which traps `.product-card.variant-menu-open`'s
   z-index:20 *inside* that section — so the part of the open menu that hangs past
   the section's bottom edge got painted under the FOLLOWING section and swallowed
   its clicks. Result: the first option worked, the second (and third) did nothing.
   Lifting the section that owns the open menu above its later siblings fixes it.
   30 stays well under the fixed header (.header-wrapper, z-index 1050). */
[data-aos]:has(.product-card.variant-menu-open),
section:has(.product-card.variant-menu-open) {
    position: relative;
    z-index: 30;
}

/* === Navbar cart popup: was cut off against the top of the screen (Keerthika) ===
   The markup moved out of .header-wrapper (see header.blade.php) so that the
   position:fixed rule above it — right:25px/bottom:95px — resolves against the
   viewport instead of the header's 138px-tall box. Now that its wrapper sits at the
   end of the page, keep it out of the flow: the closed popup is a position:absolute
   box hanging off the wrapper, and left in flow it would add dead scroll height to
   the bottom of every page.

   z-index is required, not decorative: position:fixed makes this a stacking context
   even at z-index:auto, which would scope the popup's own z-index:9999 inside a
   level-0 parent and let .header-wrapper (1050) paint over the top of a tall popup. */
.cart-added-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    z-index: 9999;
}

/* A full cart made the popup tall enough to run up behind the fixed header. Cap it
   against the viewport — allowing for the header above and the 95px bottom offset —
   and let the item list take whatever room is left and scroll inside it, rather than
   the list carrying its own fixed max-height and pushing the box past the header. */
.cart-added-wrapper.cart-added-active .cart-added-box {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 250px);
}

.cart-added-wrapper.cart-added-active .cart-added-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
}

.cart-added-wrapper.cart-added-active .cart-added-header,
.cart-added-wrapper.cart-added-active .cart-added-cart-btn {
    flex: 0 0 auto;
}

@media (max-width: 575px) {
    /* Shorter header (72px) and an 88px bottom offset on phones. */
    .cart-added-wrapper.cart-added-active .cart-added-box {
        max-height: calc(100vh - 180px);
    }
}

/* === Dynamic section tabs: brand pill strip, not Bootstrap's blue (Keerthika) ===
   The tabs rendered by home-sections/tabs.blade.php were plain .nav-pills, so they
   picked up Bootstrap's default --bs-nav-pills-link-active-bg (#0d6efd) and blue link
   colour, which reads as unstyled next to the rest of the site. Reuse the pill strip
   already used for Shop By Price (.price-tabs .tab-btn): rounded outline chips that
   fill with the accent when active, and scroll sideways instead of wrapping.
   The accent is a variable so each page can supply its own — the deals page takes the
   orange of its hero (.btn-orange / --secondary), everywhere else the brand green. */
.category-products .nav-pills {
    --section-tab-accent: var(--primary);
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}

.category-products .nav-pills::-webkit-scrollbar {
    display: none;
}

.category-products .nav-pills .nav-item {
    flex-shrink: 0;
}

.category-products .nav-pills .nav-link {
    display: inline-flex;
    align-items: center;
    height: 48px;
    padding: 0 22px;
    border: 1.8px solid #ddd;
    border-radius: 50px;
    background: #fff;
    color: #868686;
    font-size: 18px;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.22s ease;
}

.category-products .nav-pills .nav-link:hover {
    border-color: var(--section-tab-accent);
    background: #fff;
    color: var(--section-tab-accent);
}

.category-products .nav-pills .nav-link.active {
    border-color: var(--section-tab-accent);
    background: var(--section-tab-accent);
    color: #fff;
}

.category-products .nav-pills .nav-link:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(12, 123, 9, 0.22);
}

.Deals-main .category-products .nav-pills {
    --section-tab-accent: var(--secondary);
}

@media (max-width: 767.98px) {
    .category-products .nav-pills .nav-link {
        height: 40px;
        padding: 0 16px;
        font-size: 14px;
    }
}

/* === Slider section: same outer gutter as every other section (Keerthika) ===
   "Explore Our Products" sat noticeably further in than its neighbours. The section
   itself has no horizontal padding (space-y zeroes left/right), and then
   .section-title-row added padding-left:60px/right:80px of its own — so at 1440px the
   title started at 118px while every other section title started at 72px. The card row
   took a further 20px from .productSwiper .swiper-wrapper, so the cards didn't even
   line up with the section's own title.

   Drop those ad-hoc insets and give the section the same 60px gutter as .space-x, with
   the same responsive steps. It has to be done here rather than by adding the space-x
   class in the markup: .space-y is declared *after* .space-x in main.css and its
   `padding: 60px 0px` shorthand would win and zero the horizontal padding again. */
.explore-our-products {
    padding-left: 60px;
    padding-right: 60px;
}

/* The neighbouring product sections use .container-fluid, so their content sits on the
   section gutter at every width. Both slider sections use a centered .container, whose
   max-width steps (720/960/1140/1320) pushed them much further in again — 133px and
   145px vs 42px for a product row at 991px. Let them span the section like the others. */
.explore-our-products > .container,
.all-essentials > .container {
    max-width: none;
}

.explore-our-products .section-title-row {
    padding-left: 0;
    padding-right: 0;
}

/* Restore the normal Bootstrap column gutter the markup's `p-0` removes, so the title
   and cards land on the same 12px column padding as every other section's .col-* — 72px
   from the window edge at desktop, matching the product rows exactly. */
.explore-our-products .products-slider-wrapper {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

/* !important only to beat `.productSwiper .swiper-wrapper { padding-left: 4px !important }`
   in main.css's max-width:576px block. */
.explore-our-products .productSwiper .swiper-wrapper {
    padding-left: 0 !important;
}

@media (max-width: 991px) {
    .explore-our-products { padding-left: 30px; padding-right: 30px; }
}
@media (max-width: 767px) {
    .explore-our-products { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 575px) {
    .explore-our-products { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 375px) {
    .explore-our-products { padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 320px) {
    .explore-our-products { padding-left: 8px; padding-right: 8px; }
}

/* === Card titles/descriptions: clamp with an ellipsis instead of a ragged cut ===
   .our-products-container is a fixed 300px tall with overflow:hidden, and the essentials
   cards are a fixed width, so a long group name or description was simply sliced off
   mid-word at the card edge with no visual cue that text was missing. Clamp both to a
   set number of lines — -webkit-line-clamp adds the … itself. A two-line name still
   leaves room for the two-line description inside the same 300px. (.product-card
   .prod-name already does this in style.css; this brings the slider/group and essentials
   cards in line with it.)

   !important on display because the phone rule earlier in this file
   (.home-category-swiper .sub-heading { display: block !important }) would otherwise
   drop the flexbox the clamp needs and let the text run to nine lines. (Keerthika) */
.our-products-container .heading,
.our-products-container .sub-heading,
.essentials-container .heading {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.our-products-container .heading,
.essentials-container .heading,
.our-products-container .sub-heading {
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* Reserve both lines whether or not the name needs them, so every essentials card is
   the same height and the two grid rows stay level — otherwise a row of one-line names
   sits shorter than its neighbours and the row heights drift out of the slider height
   budgeted above. */
.all-essentials .essentials-container .heading {
    line-height: 1.3;
    min-height: 2.6em;
}

/* === Phase 2: header Subscription button restyle ==========================
   Visual only — the link, its route, the active state and the mobile drawer
   entry are untouched. Placed in style2.css (loads last) so it wins over the
   .special-btn rules in style.css without editing them.

   The old treatment layered four effects on one pill: an orange gradient, a
   ::before ring, a ::after gloss, an animated falling-particle texture, and a
   clip-path "text reveal" loop that left the label invisible most of the time.
   The new design is a single flat gold gradient with the label always shown. */

.special-btn {
    background: linear-gradient(100deg, #e6c134 0%, #f2d95d 26%, #f7e58a 48%, #efd151 70%, #e3bc2b 100%) !important;
    color: #56430a !important;
    border-radius: 999px !important;
    padding: 9px 24px !important;
    box-shadow: 0 2px 6px rgba(86, 67, 10, 0.18) !important;
    overflow: hidden;
}

/* Ring, gloss and the falling-particle layer all go. */
.special-btn::before,
.special-btn::after,
.special-btn .fall-items {
    display: none !important;
}

/* Label was clip-path animated and spent most of the loop hidden. */
.special-btn .btn-content,
.special-btn.lock-active .btn-content {
    animation: none !important;
    clip-path: none !important;
    opacity: 1 !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: inherit;
}

.special-btn .btn-content img {
    width: 18px;
    height: 18px;
    margin: 0 !important;
    object-fit: contain;
}

.special-btn:hover {
    background: linear-gradient(100deg, #dfb824 0%, #efd350 26%, #f5e07c 48%, #ebc93f 70%, #d9b11d 100%) !important;
    box-shadow: 0 4px 10px rgba(86, 67, 10, 0.24) !important;
}