/* ============================================================
   VEGIICART PREMIUM HEADER
============================================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


:root {

    --vc-green: #087426;
    --vc-green-dark: #035d1c;
    --vc-green-deep: #024c17;

    --vc-green-light: #eff9f1;

    --vc-black: #17191c;

    --vc-text: #252b27;
    --vc-muted: #707973;

    --vc-border: #e4ebe5;

    --vc-white: #ffffff;

    --vc-shadow:
        0 10px 35px rgba(13, 70, 32, .09);

    /* Site-wide typography (matches homepage / Why Choose section) */
    --vc-font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --vc-text-xs: 12px;
    --vc-text-sm: 14px;
    --vc-text-md: 15px;
    --vc-text-lg: clamp(18px, 2vw, 22px);
    --vc-text-xl: clamp(26px, 3vw, 36px);
    --vc-text-display: clamp(32px, 4vw, 48px);
    --vc-leading-tight: 1.15;
    --vc-leading-body: 1.65;
    --vc-tracking-label: 0.06em;

}


html {
    font-family: var(--vc-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}


body {

    font-family: var(--vc-font);

    font-size: var(--vc-text-sm);

    line-height: var(--vc-leading-body);

    font-weight: 400;

    color: var(--vc-text);

    background: #fff;

}


body.vc-menu-open {
    overflow: hidden;
}


a {
    text-decoration: none;
}


button,
input,
select,
textarea {
    font-family: inherit;
}


h1, h2, h3, h4, h5, h6 {
    font-family: var(--vc-font);
    color: var(--vc-text);
    line-height: var(--vc-leading-tight);
    font-weight: 800;
}


.vc-container {

    width: min(96%, 1500px);

    margin: 0 auto;

}


/* ============================================================
   MAIN HEADER
============================================================ */

.vc-header {

    width: 100%;

    background: #fff;

    position: relative;

    z-index: 999;

    overflow: visible;

    box-shadow:
        0 4px 25px rgba(0, 0, 0, .06);

}


/* ============================================================
   TOP BAR
============================================================ */

.vc-topbar {

    min-height: 42px;

    display: flex;

    align-items: center;

    background:
        linear-gradient(
            110deg,
            var(--vc-green-deep),
            var(--vc-green),
            #09852c
        );

    color: #fff;

}


.vc-topbar-inner {

    min-height: 42px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}


.vc-topbar-left,
.vc-topbar-right {

    display: flex;

    align-items: center;

    gap: 22px;

}


.vc-topbar-left span {

    display: flex;

    align-items: center;

    gap: 7px;

    font-size: 12px;

    font-weight: 600;

    white-space: nowrap;

}


.vc-topbar-left i {

    color: #dcffe5;

}


.vc-topbar-right {

    font-size: 12px;

    font-weight: 600;

}


.vc-topbar-right a {

    color: #fff;

    display: inline-flex;

    align-items: center;

    gap: 7px;

    transition: .25s;

}


.vc-topbar-right a:hover {
    opacity: .78;
}


.vc-topbar-right i {
    color: #d5ffdf;
}


.vc-top-divider {

    display: block;

    height: 17px;

    width: 1px;

    background: rgba(255,255,255,.32);

}


/* ============================================================
   MAIN AREA
============================================================ */

.vc-main-header {

    background:

        radial-gradient(
            circle at 20% 30%,
            rgba(7, 120, 39, .03),
            transparent 28%
        ),

        #fff;

    overflow: visible;

    position: relative;

    z-index: 1000;

}


.vc-main-header-inner {

    min-height: 118px;

    display: flex;

    align-items: center;

    gap: 22px;

}


/* ============================================================
   LOGO
============================================================ */

.vc-logo-wrap {

    width: 205px;

    flex-shrink: 0;

}


.vc-logo {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

}


.vc-logo img {

    display: block;

    width: 100%;

    max-height: 93px;

    object-fit: contain;

    mix-blend-mode: multiply;

}


/* ============================================================
   LOCATION
============================================================ */

.vc-location {

    width: 205px;

    height: 68px;

    flex-shrink: 0;

    border: 1px solid #e6efe7;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #f7fbf8,
            #eef8f0
        );

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 0 17px;

    cursor: pointer;

    transition: .3s ease;

}


.vc-location-wrap {

    position: relative;

    flex-shrink: 0;

    z-index: 1002;

}


.vc-location-wrap.is-open .vc-location {

    border-color: #12833B;

    box-shadow: 0 8px 22px rgba(18, 131, 59, 0.12);

}


.vc-location-wrap.is-open .vc-location-arrow {

    transform: rotate(180deg);

}


.vc-location-dropdown {

    position: absolute;

    top: calc(100% + 8px);

    left: 0;

    width: min(360px, calc(100vw - 24px));

    background: #fff;

    border: 1px solid #e6efe7;

    border-radius: 16px;

    box-shadow: 0 16px 40px rgba(11, 92, 39, 0.16);

    padding: 12px;

    z-index: 1003;

}


.vc-location-dropdown[hidden] {

    display: none !important;

}


.vc-location-dropdown-head {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    padding: 4px 6px 10px;

    border-bottom: 1px solid #eef2ee;

    margin-bottom: 10px;

}


.vc-location-dropdown-head strong {

    font-size: 14px;

    color: #0B5C27;

}


.vc-location-dropdown-head a {

    font-size: 12px;

    font-weight: 700;

    color: #12833B;

}


.vc-location-dropdown-list {

    max-height: 260px;

    overflow-y: auto;

    display: flex;

    flex-direction: column;

    gap: 8px;

}


.vc-location-dropdown-loading,
.vc-location-dropdown-empty {

    margin: 0;

    padding: 14px 8px;

    color: #5f6b66;

    font-size: 13px;

    line-height: 1.45;

}


.vc-location-option {

    display: flex;

    gap: 12px;

    align-items: flex-start;

    width: 100%;

    padding: 12px;

    border: 1px solid #e6efe7;

    border-radius: 12px;

    background: #f7fbf8;

    cursor: pointer;

    text-align: left;

    font: inherit;

    color: inherit;

    transition: border-color .2s ease, background .2s ease;

}


.vc-location-option:hover,
.vc-location-option.is-active {

    border-color: #12833B;

    background: #eef8f0;

}


.vc-location-option > i {

    color: #12833B;

    margin-top: 2px;

}


.vc-location-option strong {

    display: block;

    color: #0B5C27;

    font-size: 13px;

    margin-bottom: 2px;

}


.vc-location-option span {

    display: block;

    color: #5f6b66;

    font-size: 12px;

    line-height: 1.4;

}


.vc-location-option em {

    display: inline-block;

    margin-top: 6px;

    font-size: 11px;

    font-weight: 700;

    font-style: normal;

    color: #12833B;

}


.vc-location-dropdown-add {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    margin-top: 10px;

    padding: 11px 12px;

    border-radius: 12px;

    border: 1px dashed #b9dbbf;

    color: #12833B;

    font-size: 13px;

    font-weight: 700;

    background: #f7fbf8;

}


.vc-location-dropdown-add:hover {

    background: #eef8f0;

}


.vc-mobile-location-panel {

    margin: 0 16px 8px;

    padding: 12px;

    border-radius: 15px;

    background: #fff;

    border: 1px solid #e6efe7;

}


.vc-mobile-location-panel[hidden] {

    display: none !important;

}


.vc-mobile-location-arrow {

    margin-left: auto;

    color: #12833B;

    font-size: 12px;

    transition: transform .2s ease;

}


.vc-mobile-location[aria-expanded="true"] .vc-mobile-location-arrow {

    transform: rotate(180deg);

}


.vc-location:hover {

    border-color: #b9dbbf;

    box-shadow:
        0 10px 25px rgba(6, 107, 34, .08);

}


.vc-location-icon {

    width: 39px;
    height: 39px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 20px;

    color: var(--vc-green);

    background: #fff;

}


.vc-location-text {

    flex: 1;

    text-align: left;

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.vc-location-text small {

    font-size: 12px;

    color: var(--vc-muted);

}


.vc-location-text strong {

    font-size: 13px;

    font-weight: 750;

    color: var(--vc-black);

    display: block;

    max-width: 120px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}


.vc-location-arrow {

    font-size: 11px;

    color: #444;

}


/* ============================================================
   SEARCH
============================================================ */

.vc-search {

    flex: 1;

    min-width: 270px;

    height: 58px;

    border-radius: 50px;

    border: 1px solid #dce5de;

    background: #fff;

    display: flex;

    align-items: center;

    padding-left: 24px;

    box-shadow:
        inset 0 1px 2px rgba(0,0,0,.025);

    transition: .25s ease;

}


.vc-search:focus-within {

    border-color: #9bcda7;

    box-shadow:
        0 0 0 4px rgba(8, 116, 38, .07);

}


.vc-search input {

    flex: 1;

    min-width: 0;

    border: none;

    outline: none;

    background: transparent;

    font-size: 14px;

    color: var(--vc-text);

}


.vc-search input::placeholder {
    color: #9ba29c;
}


.vc-search button {

    width: 50px;

    height: 50px;

    margin-right: 4px;

    flex-shrink: 0;

    border: none;

    border-radius: 50%;

    cursor: pointer;

    background:
        linear-gradient(
            135deg,
            var(--vc-green),
            var(--vc-green-dark)
        );

    color: #fff;

    font-size: 18px;

    box-shadow:
        0 7px 18px rgba(7, 116, 38, .24);

    transition: .25s;

}


.vc-search button:hover {
    transform: scale(1.04);
}


/* ============================================================
   ACTIONS
============================================================ */

.vc-actions {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 24px;

    flex-shrink: 0;

}


.vc-action {

    min-width: 55px;

    color: var(--vc-black);

    text-align: center;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 7px;

    position: relative;

}


.vc-action-icon {

    height: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    font-size: 25px;

    color: var(--vc-green);

}


.vc-action-name {

    font-size: 12px;

    font-weight: 650;

    white-space: nowrap;

}


.vc-action:hover .vc-action-icon {

    transform: translateY(-2px);

}


.vc-action-icon {

    transition: .25s ease;

}


.vc-count {

    position: absolute;

    top: -7px;

    right: -11px;

    min-width: 20px;

    height: 20px;

    padding: 0 5px;

    border-radius: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 10px;

    font-weight: 800;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #098a2c,
            #04621e
        );

    border: 2px solid #fff;

}


/* ============================================================
   ACCOUNT
============================================================ */

.vc-account {

    min-width: 150px;

    display: flex;

    align-items: center;

    gap: 11px;

    color: var(--vc-text);

}


.vc-account-icon {

    width: 43px;
    height: 43px;

    flex-shrink: 0;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 22px;

    color: var(--vc-green-dark);

    background: var(--vc-green-light);

}


.vc-account-content {

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.vc-account-content small {

    color: #5b655e;

    font-size: 11px;

    font-weight: 600;

}


.vc-account-content strong {

    color: var(--vc-green-dark);

    font-size: 12px;

    font-weight: 750;

}


/* ============================================================
   NAVIGATION
============================================================ */

.vc-navigation {

    background:
        linear-gradient(
            100deg,
            var(--vc-green-deep),
            var(--vc-green),
            #078c2d
        );

}


.vc-nav-inner {

    min-height: 61px;

    display: flex;

    align-items: center;

    gap: 35px;

}


/* CATEGORY */

.vc-category-wrap {

    width: 260px;

    flex-shrink: 0;

    position: relative;

}


.vc-category-btn {

    width: 100%;

    height: 48px;

    border: 1px solid rgba(255,255,255,.75);

    border-radius: 16px;

    color: #fff;

    background: rgba(255,255,255,.07);

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 0 18px;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

}


.vc-category-btn span {
    flex: 1;
    text-align: left;
}


.vc-category-btn:hover {
    background: rgba(255,255,255,.15);
}


/* DROPDOWN */

.vc-category-dropdown {

    position: absolute;

    left: 0;

    top: calc(100% + 10px);

    width: 100%;

    padding: 10px;

    border-radius: 17px;

    background: #fff;

    box-shadow:
        0 20px 55px rgba(0,0,0,.14);

    opacity: 0;

    visibility: hidden;

    transform: translateY(8px);

    transition: .25s;

    z-index: 9999;

}


.vc-category-dropdown.active {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}


.vc-category-dropdown a {

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 13px;

    border-radius: 11px;

    font-size: 13px;

    font-weight: 650;

    color: #303730;

    transition: .2s;

}


.vc-category-dropdown a i {

    width: 24px;

    color: var(--vc-green);

    text-align: center;

}


.vc-category-dropdown a:hover {

    background: #eff8f1;

    color: var(--vc-green-dark);

}


/* DESKTOP MENU */

.vc-desktop-menu {

    flex: 1;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 13px;

}


.vc-desktop-menu a {

    min-height: 60px;

    display: inline-flex;

    align-items: center;

    position: relative;

    color: rgba(255,255,255,.94);

    font-size: 13px;

    font-weight: 600;

    white-space: nowrap;

    transition: .25s;

}


.vc-desktop-menu a::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: 9px;

    width: 0;

    height: 2px;

    border-radius: 10px;

    background: #fff;

    transform: translateX(-50%);

    transition: width .25s;

}


.vc-desktop-menu a:hover::after,
.vc-desktop-menu a.active::after {
    width: 75%;
}


.vc-desktop-menu a:hover {
    color: #fff;
}


/* ============================================================
   FEATURE STRIP
============================================================ */

.vc-features {

    background:
        linear-gradient(
            180deg,
            #f5fbf6,
            #eef7f0
        );

    border-bottom: 1px solid #e4eee6;

}


.vc-features-grid {

    display: grid;

    grid-template-columns: repeat(4,1fr);

    gap: 15px;

    padding-top: 18px;

    padding-bottom: 18px;

}


.vc-feature {

    min-height: 76px;

    padding: 13px 20px;

    border-radius: 15px;

    display: flex;

    align-items: center;

    gap: 16px;

    background: rgba(255,255,255,.86);

    border: 1px solid rgba(229,238,231,.8);

}


.vc-feature-icon {

    width: 44px;
    height: 44px;

    flex-shrink: 0;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 21px;

    color: var(--vc-green);

    background: #eff8f1;

}


.vc-feature div {

    display: flex;

    flex-direction: column;

    gap: 5px;

}


.vc-feature strong {

    color: var(--vc-green-deep);

    font-size: 13px;

    font-weight: 750;

}


.vc-feature small {

    color: #58615a;

    font-size: 11px;

}


/* ============================================================
   MOBILE MENU BUTTON
============================================================ */

.vc-mobile-toggle {

    width: 43px;
    height: 43px;

    flex-shrink: 0;

    border: none;

    border-radius: 12px;

    background: #eff8f1;

    color: var(--vc-green-dark);

    font-size: 20px;

    cursor: pointer;

    display: none;

}


/* ============================================================
   MOBILE SEARCH
============================================================ */

.vc-mobile-search-wrap {
    display: none;
}


.vc-mobile-search {

    width: 100%;

    height: 50px;

    display: flex;

    align-items: center;

    border: 1px solid #dce7de;

    border-radius: 50px;

    background: #fff;

    overflow: hidden;

    padding-left: 20px;

}


.vc-mobile-search input {

    min-width: 0;

    flex: 1;

    border: none;

    outline: none;

    background: transparent;

    font-size: 13px;

}


.vc-mobile-search button {

    width: 46px;

    height: 46px;

    margin-right: 2px;

    border-radius: 50%;

    border: none;

    background: var(--vc-green);

    color: #fff;

}


/* ============================================================
   MOBILE OFFCANVAS
============================================================ */

.vc-mobile-overlay {

    position: fixed;

    inset: 0;

    z-index: 99998;

    background: rgba(4, 21, 9, .55);

    backdrop-filter: blur(3px);

    opacity: 0;

    visibility: hidden;

    transition: .3s;

}


.vc-mobile-overlay.active {

    opacity: 1;

    visibility: visible;

}


.vc-mobile-menu {

    position: fixed;

    top: 0;

    left: 0;

    z-index: 99999;

    width: min(88%, 370px);

    height: 100vh;

    background: #fff;

    transform: translateX(-105%);

    transition:
        transform .35s cubic-bezier(.2,.75,.25,1);

    display: flex;

    flex-direction: column;

    overflow-y: auto;

    box-shadow:
        20px 0 50px rgba(0,0,0,.15);

}


.vc-mobile-menu.active {
    transform: translateX(0);
}


.vc-mobile-menu-head {

    min-height: 90px;

    padding: 15px 18px;

    border-bottom: 1px solid #e9eee9;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.vc-mobile-logo {
    width: 190px;
}


.vc-mobile-logo img {

    display: block;

    width: 100%;

    height: 65px;

    object-fit: contain;

    mix-blend-mode: multiply;

}


.vc-mobile-menu-head button {

    width: 42px;
    height: 42px;

    border: none;

    border-radius: 50%;

    background: #edf7ef;

    color: var(--vc-green-dark);

    font-size: 20px;

    cursor: pointer;

}


.vc-mobile-location {

    margin: 16px;

    padding: 15px;

    border: 0;

    width: calc(100% - 32px);

    text-align: left;

    font: inherit;

    cursor: pointer;

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #f0f9f2,
            #e9f6ec
        );

    display: flex;

    align-items: center;

    gap: 14px;

}


.vc-mobile-location > i {

    width: 42px;
    height: 42px;

    border-radius: 11px;

    background: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--vc-green);

    font-size: 19px;

}


.vc-mobile-location div {

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.vc-mobile-location small {

    color: #687169;

    font-size: 11px;

}


.vc-mobile-location strong {

    color: var(--vc-green-dark);

    font-size: 13px;

    display: block;

    max-width: 200px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}


.vc-mobile-nav {

    padding: 0 14px;

    display: flex;

    flex-direction: column;

}


.vc-mobile-nav a {

    min-height: 52px;

    border-bottom: 1px solid #eef2ee;

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 0 10px;

    color: #262c27;

    font-size: 14px;

    font-weight: 650;

}


.vc-mobile-nav a i {

    width: 27px;

    color: var(--vc-green);

    font-size: 16px;

    text-align: center;

}


.vc-mobile-nav a:hover {

    color: var(--vc-green);

    padding-left: 14px;

}


.vc-mobile-account {

    margin-top: auto;

    padding: 18px;

    background: #f5faf6;

}


.vc-mobile-account a {

    padding: 14px;

    border-radius: 14px;

    color: #252a26;

    background: #fff;

    display: flex;

    align-items: center;

    gap: 12px;

    box-shadow:
        0 8px 22px rgba(8,77,29,.07);

}


.vc-mobile-account a > i:first-child {

    font-size: 27px;

    color: var(--vc-green);

}


.vc-mobile-account div {

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.vc-mobile-account small {

    color: #778078;

    font-size: 10px;

}


.vc-mobile-account strong {

    color: var(--vc-green-dark);

    font-size: 13px;

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1250px) {

    .vc-main-header-inner {
        gap: 14px;
    }


    .vc-logo-wrap {
        width: 170px;
    }


    .vc-location {
        width: 175px;
    }


    .vc-actions {
        gap: 16px;
    }


    .vc-action-name {
        display: none;
    }


    .vc-account {

        min-width: 45px;

    }


    .vc-account-content {
        display: none;
    }


    .vc-desktop-menu a {

        font-size: 12px;

    }


    .vc-nav-inner {
        gap: 22px;
    }


    .vc-category-wrap {
        width: 220px;
    }

}


/* ============================================================
   SMALL DESKTOP / TABLET
============================================================ */

@media (max-width: 1050px) {

    .vc-topbar-left span:nth-child(3),
    .vc-topbar-left span:nth-child(4) {
        display: none;
    }


    .vc-main-header-inner {
        min-height: 95px;
    }


    .vc-mobile-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }


    .vc-logo-wrap {
        width: 180px;
    }


    .vc-location-wrap {
        margin-left: auto;
    }


    .vc-location {
        width: 175px;
    }


    .vc-search {
        display: none;
    }


    .vc-mobile-search-wrap {

        display: block;

        padding-bottom: 15px;

    }


    .vc-navigation {
        display: none;
    }


    .vc-features-grid {

        grid-template-columns:
            repeat(2,1fr);

    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767px) {

    .vc-container {
        width: min(94%, 100%);
    }


    .vc-topbar {
        display: none;
    }


    .vc-main-header-inner {

        min-height: 77px;

        gap: 10px;

    }


    .vc-mobile-toggle {

        width: 39px;
        height: 39px;

        font-size: 18px;

        border-radius: 10px;

    }


    .vc-logo-wrap {

        width: 140px;

    }


    .vc-logo img {

        max-height: 65px;

    }


    .vc-location {

        margin-left: auto;

        width: auto;

        height: 45px;

        padding: 0 11px;

        border-radius: 12px;

    }


    .vc-location-icon {

        width: 31px;
        height: 31px;

        font-size: 15px;

    }


    .vc-location-text small {

        font-size: 9px;

    }


    .vc-location-text strong {

        font-size: 10px;

    }


    .vc-location-arrow {
        display: none;
    }


    .vc-actions {

        gap: 9px;

    }


    .vc-actions .vc-action:first-child,
    .vc-actions .vc-action:nth-child(2) {
        display: none;
    }


    .vc-action {

        min-width: 36px;

    }


    .vc-action-icon {

        font-size: 21px;

    }


    .vc-account {

        min-width: 36px;

    }


    .vc-account-icon {

        width: 36px;
        height: 36px;

        font-size: 18px;

    }


    .vc-mobile-search-wrap {

        padding-bottom: 12px;

    }


    .vc-features-grid {

        display: flex;

        overflow-x: auto;

        gap: 10px;

        padding-top: 11px;

        padding-bottom: 11px;

        scrollbar-width: none;

    }


    .vc-features-grid::-webkit-scrollbar {
        display: none;
    }


    .vc-feature {

        flex: 0 0 225px;

        min-height: 65px;

        padding: 10px 14px;

    }


    .vc-feature-icon {

        width: 38px;
        height: 38px;

        font-size: 18px;

    }


    .vc-feature strong {

        font-size: 12px;

    }


    .vc-feature small {

        font-size: 10px;

    }

}


/* ============================================================
   EXTRA SMALL MOBILE
============================================================ */

@media (max-width: 520px) {

    .vc-logo-wrap {

        width: 120px;

    }


    .vc-location-text small {
        display: none;
    }


    .vc-location-text strong {

        font-size: 9px;

        max-width: 70px;

    }


    .vc-location {

        padding-left: 7px;

        padding-right: 7px;

        gap: 5px;

    }


    .vc-location-icon {

        background: transparent;

        width: 24px;

    }


    .vc-actions {
        gap: 5px;
    }


    .vc-account {
        display: none;
    }

}


/* ============================================================
   VERY SMALL MOBILE
============================================================ */

@media (max-width: 410px) {

    .vc-logo-wrap {
        width: 112px;
    }


    .vc-location-text {
        display: none;
    }


    .vc-location {

        width: 39px;

        height: 39px;

        padding: 0;

        justify-content: center;

    }


    .vc-location-icon {

        width: auto;
        height: auto;

    }


    .vc-count {

        min-width: 17px;

        height: 17px;

        font-size: 8px;

        top: -5px;

        right: -6px;

    }

}

/* ============================================================
   VEGIICART PREMIUM FOOTER
============================================================ */

.vc-footer {

    --footer-green: #087426;
    --footer-green-light: #10a43a;
    --footer-green-dark: #035d1c;
    --footer-green-deep: #013d12;
    --footer-black: #111713;
    --footer-text: #bec9c0;
    --footer-border: rgba(255,255,255,.10);

    position: relative;

    width: 100%;

    font-family: "Inter", sans-serif;

    color: #fff;

    overflow: hidden;

    background: var(--footer-green-deep);

}


.vc-footer-container {

    width: min(94%, 1450px);

    margin: 0 auto;

}


/* ============================================================
   TOP DECORATIVE LINE
============================================================ */

.vc-footer-top-line {

    height: 5px;

    background:
        linear-gradient(
            90deg,
            #034d17 0%,
            #10a43a 30%,
            #30c94f 50%,
            #087426 70%,
            #033f14 100%
        );

}


/* ============================================================
   NEWSLETTER
============================================================ */

.vc-footer-newsletter {

    position: relative;

    padding: 45px 0 0;

    background: #fff;

}


.vc-newsletter-box {

    position: relative;

    z-index: 3;

    min-height: 160px;

    border-radius: 28px;

    padding: 32px 38px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 45px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 95% 20%,
            rgba(93, 232, 111, .24),
            transparent 26%
        ),
        linear-gradient(
            120deg,
            #034d17,
            #087426 55%,
            #0a8a2c
        );

    box-shadow:
        0 20px 50px rgba(3, 78, 24, .18);

}


.vc-newsletter-box::before {

    content: "";

    position: absolute;

    width: 240px;
    height: 240px;

    border: 50px solid rgba(255,255,255,.04);

    border-radius: 50%;

    right: -70px;
    top: -100px;

}


.vc-newsletter-box::after {

    content: "";

    position: absolute;

    width: 110px;
    height: 110px;

    border-radius: 50%;

    background: rgba(255,255,255,.04);

    left: 40%;

    bottom: -70px;

}


.vc-newsletter-left {

    position: relative;

    z-index: 2;

    flex: 1;

    display: flex;

    align-items: center;

    gap: 22px;

}


.vc-newsletter-icon {

    width: 72px;
    height: 72px;

    flex: 0 0 72px;

    border-radius: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    font-size: 29px;

    background: rgba(255,255,255,.13);

    border: 1px solid rgba(255,255,255,.18);

    backdrop-filter: blur(10px);

}


.vc-newsletter-content {

    max-width: 610px;

}


.vc-footer-mini-title {

    display: block;

    margin-bottom: 5px;

    color: #a9f4b9;

    font-size: 12px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1.4px;

}


.vc-newsletter-content h3 {

    margin: 0 0 8px;

    color: #fff;

    font-size: clamp(22px, 2vw, 30px);

    line-height: 1.2;

    font-weight: 800;

}


.vc-newsletter-content p {

    max-width: 560px;

    margin: 0;

    color: rgba(255,255,255,.78);

    font-size: 13px;

    line-height: 1.7;

}


/* FORM */

.vc-newsletter-form {

    position: relative;

    z-index: 2;

    width: min(100%, 480px);

    flex-shrink: 0;

}


.vc-newsletter-input {

    width: 100%;

    height: 64px;

    padding: 6px 6px 6px 20px;

    display: flex;

    align-items: center;

    gap: 12px;

    border-radius: 50px;

    background: #fff;

    box-shadow:
        0 15px 30px rgba(0,0,0,.12);

}


.vc-newsletter-input > i {

    color: #758078;

    font-size: 17px;

}


.vc-newsletter-input input {

    flex: 1;

    min-width: 0;

    height: 100%;

    border: none;

    outline: none;

    color: #263029;

    background: transparent;

    font-size: 13px;

}


.vc-newsletter-input input::placeholder {

    color: #939c95;

}


.vc-newsletter-input button {

    height: 52px;

    padding: 0 23px;

    border: none;

    border-radius: 50px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    cursor: pointer;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #087426,
            #035d1c
        );

    font-size: 13px;

    font-weight: 700;

    transition: .3s ease;

}


.vc-newsletter-input button:hover {

    transform: translateX(2px);

    background:
        linear-gradient(
            135deg,
            #09942e,
            #04651e
        );

}


/* ============================================================
   MAIN FOOTER
============================================================ */

.vc-footer-main {

    position: relative;

    margin-top: -80px;

    padding: 135px 0 50px;

    background:
        radial-gradient(
            circle at 5% 80%,
            rgba(16, 164, 58, .15),
            transparent 28%
        ),
        radial-gradient(
            circle at 95% 10%,
            rgba(44, 201, 74, .08),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #07150c,
            #031108 55%,
            #061b0e
        );

}


.vc-footer-main::before {

    content: "";

    position: absolute;

    inset: 0;

    opacity: .20;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255,255,255,.02) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.02) 1px,
            transparent 1px
        );

    background-size: 35px 35px;

}


.vc-footer-grid {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        1.6fr .8fr 1.1fr 1.25fr;

    gap: 65px;

}


/* ============================================================
   BRAND
============================================================ */

.vc-footer-brand-name {

    position: relative;

    display: inline-flex;

    align-items: flex-end;

    margin-bottom: 4px;

    color: #fff;

    font-size: 34px;

    line-height: 1;

    font-weight: 850;

    letter-spacing: -1.5px;

}


.vc-brand-green {

    color: #21b646;

}


.vc-brand-dark {

    color: #fff;

}


.vc-footer-brand-name small {

    margin: 0 0 2px 3px;

    color: #86b690;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0;

}


.vc-footer-tagline {

    display: block;

    margin-bottom: 19px;

    color: #8ecc9c;

    font-size: 10px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1.6px;

}


.vc-footer-description {

    max-width: 420px;

    margin: 0 0 23px;

    color: #abb7ae;

    font-size: 13px;

    line-height: 1.9;

}


/* TRUST */

.vc-footer-trust {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 25px;

}


.vc-footer-trust > div {

    min-width: 155px;

    padding: 11px 14px;

    display: flex;

    align-items: center;

    gap: 10px;

    border-radius: 12px;

    background: rgba(255,255,255,.045);

    border: 1px solid rgba(255,255,255,.07);

}


.vc-footer-trust i {

    color: #25b94a;

    font-size: 20px;

}


.vc-footer-trust span {

    display: flex;

    flex-direction: column;

    gap: 2px;

}


.vc-footer-trust strong {

    color: #fff;

    font-size: 11px;

}


.vc-footer-trust small {

    color: #839189;

    font-size: 9px;

}


/* ============================================================
   HEADINGS
============================================================ */

.vc-footer-heading {

    position: relative;

    margin: 7px 0 27px;

    padding-bottom: 13px;

    color: #fff;

    font-size: 16px;

    font-weight: 750;

}


.vc-footer-heading::before {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 43px;

    height: 3px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #13a73a,
            #42df60
        );

}


.vc-footer-heading::after {

    content: "";

    position: absolute;

    left: 48px;

    bottom: 0;

    width: 5px;

    height: 3px;

    border-radius: 10px;

    background: #42df60;

}


/* ============================================================
   LINKS
============================================================ */

.vc-footer-links {

    margin: 0;

    padding: 0;

    list-style: none;

}


.vc-footer-links li {

    margin-bottom: 4px;

}


.vc-footer-links a {

    min-height: 37px;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #aeb9b1;

    font-size: 12px;

    font-weight: 500;

    transition: .25s ease;

}


.vc-footer-links a i {

    color: #2aac48;

    font-size: 8px;

    transition: .25s ease;

}


.vc-footer-links a:hover {

    color: #fff;

    transform: translateX(4px);

}


.vc-footer-links a:hover i {

    color: #5ce374;

}


/* ============================================================
   SUPPORT
============================================================ */

.vc-support-text {

    margin: 0 0 18px;

    color: #9da9a0;

    font-size: 12px;

    line-height: 1.75;

}


.vc-footer-contact-card {

    width: 100%;

    min-height: 62px;

    margin-bottom: 10px;

    padding: 10px 12px;

    display: flex;

    align-items: center;

    gap: 12px;

    border-radius: 12px;

    color: #fff;

    background: rgba(255,255,255,.045);

    border: 1px solid rgba(255,255,255,.075);

    transition: .25s ease;

}


.vc-footer-contact-card:hover {

    transform: translateY(-2px);

    background: rgba(255,255,255,.075);

    border-color: rgba(65,220,93,.20);

}


.vc-footer-contact-icon {

    width: 39px;
    height: 39px;

    flex: 0 0 39px;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #3ed35c;

    background: rgba(35, 189, 70, .12);

}


.vc-footer-contact-card > span:last-child {

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.vc-footer-contact-card small {

    color: #7f9185;

    font-size: 9px;

}


.vc-footer-contact-card strong {

    max-width: 100%;

    overflow: hidden;

    color: #dbe6dd;

    font-size: 11px;

    font-weight: 650;

    text-overflow: ellipsis;

    white-space: nowrap;

}


/* WHATSAPP */

.vc-whatsapp-support {

    min-height: 58px;

    margin-top: 13px;

    padding: 9px 14px;

    border-radius: 13px;

    display: flex;

    align-items: center;

    gap: 11px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #086d27,
            #075720
        );

    border: 1px solid rgba(89,230,112,.14);

    transition: .3s;

}


.vc-whatsapp-support:hover {

    transform: translateY(-2px);

    background:
        linear-gradient(
            135deg,
            #0a7d2d,
            #076124
        );

}


.vc-whatsapp-support > i:first-child {

    font-size: 23px;

    color: #66ef7d;

}


.vc-whatsapp-support span {

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 2px;

}


.vc-whatsapp-support small {

    color: #9edaaa;

    font-size: 9px;

}


.vc-whatsapp-support strong {

    font-size: 11px;

}


.vc-whatsapp-support > i:last-child {

    font-size: 11px;

}


/* ============================================================
   SOCIAL MEDIA
============================================================ */

.vc-footer-social-wrap {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 14px;

}


.vc-footer-social-wrap > span {

    color: #fff;

    font-size: 11px;

    font-weight: 650;

}


.vc-footer-social {

    display: flex;

    align-items: center;

    gap: 8px;

}


.vc-footer-social a {

    width: 36px;
    height: 36px;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #d9e3db;

    font-size: 14px;

    background: rgba(255,255,255,.06);

    border: 1px solid rgba(255,255,255,.08);

    transition: .3s ease;

}


.vc-footer-social a:hover {

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #0c9834,
            #056320
        );

    transform: translateY(-3px);

    box-shadow:
        0 7px 18px rgba(5, 116, 36, .25);

}


/* ============================================================
   SERVICE STRIP
============================================================ */

.vc-footer-service-strip {

    border-top: 1px solid rgba(255,255,255,.07);

    border-bottom: 1px solid rgba(255,255,255,.07);

    background:
        linear-gradient(
            90deg,
            #031208,
            #05200e,
            #031208
        );

}


.vc-footer-service-grid {

    min-height: 95px;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

}


.vc-footer-service {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    padding: 16px 25px;

}


.vc-footer-service:not(:last-child)::after {

    content: "";

    position: absolute;

    right: 0;

    top: 24%;

    width: 1px;

    height: 52%;

    background: rgba(255,255,255,.08);

}


.vc-footer-service > span {

    width: 43px;
    height: 43px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #44d961;

    font-size: 19px;

    background: rgba(40, 184, 68, .10);

}


.vc-footer-service div {

    display: flex;

    flex-direction: column;

    gap: 4px;

}


.vc-footer-service strong {

    color: #eaf1eb;

    font-size: 12px;

}


.vc-footer-service small {

    color: #728078;

    font-size: 10px;

}


/* ============================================================
   BOTTOM
============================================================ */

.vc-footer-bottom {

    background: #010b05;

}


.vc-footer-bottom-inner {

    min-height: 73px;

    display: grid;

    grid-template-columns: 1fr auto 1fr;

    align-items: center;

    gap: 30px;

}


.vc-footer-copyright p {

    margin: 0;

    color: #7e8a81;

    font-size: 11px;

}


.vc-footer-copyright strong {

    color: #b7c4b9;

}


.vc-footer-bottom-links {

    display: flex;

    align-items: center;

    gap: 10px;

}


.vc-footer-bottom-links a {

    color: #7d8980;

    font-size: 10px;

    transition: .25s;

}


.vc-footer-bottom-links a:hover {

    color: #4ddd68;

}


.vc-footer-bottom-links span {

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: #34523c;

}


/* PAYMENT */

.vc-footer-payment {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 10px;

}


.vc-footer-payment > span {

    color: #68756b;

    font-size: 9px;

}


.vc-footer-payment > div {

    display: flex;

    gap: 6px;

}


.vc-payment-box {

    min-width: 37px;
    height: 26px;

    padding: 0 6px;

    border-radius: 5px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #b6c2b8;

    background: rgba(255,255,255,.06);

    border: 1px solid rgba(255,255,255,.08);

    font-size: 18px;

}


.vc-payment-box.vc-upi {

    color: #b9c5bb;

    font-size: 9px;

    font-weight: 800;

}


/* ============================================================
   RESPONSIVE - TABLET
============================================================ */

@media (max-width: 1150px) {

    .vc-footer-grid {

        grid-template-columns:
            1.5fr 1fr 1fr;

        gap: 45px;

    }


    .vc-support-column {

        grid-column: span 3;

        display: grid;

        grid-template-columns:
            1fr 1fr 1fr;

        gap: 12px;

    }


    .vc-support-column .vc-footer-heading,
    .vc-support-column .vc-support-text {

        grid-column: 1 / -1;

    }


    .vc-support-column .vc-footer-contact-card,
    .vc-support-column .vc-whatsapp-support {

        margin: 0;

    }


    .vc-newsletter-box {

        gap: 25px;

    }


    .vc-newsletter-form {

        width: 420px;

    }

}


/* ============================================================
   RESPONSIVE - TABLET
============================================================ */

@media (max-width: 900px) {

    .vc-newsletter-box {

        padding: 30px;

        flex-direction: column;

        align-items: stretch;

    }


    .vc-newsletter-form {

        width: 100%;

    }


    .vc-footer-grid {

        grid-template-columns:
            1.4fr 1fr 1fr;

        gap: 35px;

    }


    .vc-footer-service-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .vc-footer-service:nth-child(2)::after {
        display: none;
    }


    .vc-footer-service:nth-child(1),
    .vc-footer-service:nth-child(2) {

        border-bottom:
            1px solid rgba(255,255,255,.06);

    }


    .vc-footer-bottom-inner {

        grid-template-columns:
            1fr 1fr;

        padding: 17px 0;

    }


    .vc-footer-bottom-links {

        justify-content: flex-end;

    }


    .vc-footer-payment {

        grid-column: 1 / -1;

        justify-content: center;

    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767px) {

    .vc-footer-container {

        width: min(92%, 100%);

    }


    .vc-footer-newsletter {

        padding-top: 25px;

    }


    .vc-newsletter-box {

        min-height: 0;

        border-radius: 20px;

        padding: 24px 20px;

        gap: 23px;

    }


    .vc-newsletter-left {

        align-items: flex-start;

        gap: 14px;

    }


    .vc-newsletter-icon {

        width: 52px;
        height: 52px;

        flex-basis: 52px;

        border-radius: 14px;

        font-size: 21px;

    }


    .vc-newsletter-content h3 {

        font-size: 20px;

    }


    .vc-newsletter-content p {

        font-size: 11px;

        line-height: 1.65;

    }


    .vc-footer-mini-title {

        font-size: 9px;

    }


    .vc-newsletter-input {

        height: 57px;

        padding-left: 15px;

    }


    .vc-newsletter-input button {

        height: 45px;

        padding: 0 17px;

    }


    .vc-newsletter-input button span {
        display: none;
    }


    .vc-footer-main {

        margin-top: -65px;

        padding-top: 110px;

        padding-bottom: 35px;

    }


    .vc-footer-grid {

        grid-template-columns:
            repeat(2, 1fr);

        gap: 37px 25px;

    }


    .vc-footer-brand {

        grid-column: 1 / -1;

    }


    .vc-footer-description {

        max-width: 100%;

    }


    .vc-support-column {

        grid-column: 1 / -1;

        display: block;

    }


    .vc-support-column .vc-footer-contact-card {

        margin-bottom: 9px;

    }


    .vc-support-column .vc-whatsapp-support {

        margin-top: 10px;

    }


    .vc-footer-heading {

        margin-bottom: 18px;

        font-size: 14px;

    }


    .vc-footer-links a {

        min-height: 34px;

        font-size: 11px;

    }


    .vc-footer-service {

        justify-content: flex-start;

        padding-left: 20px;

    }


    .vc-footer-bottom-inner {

        display: flex;

        flex-direction: column;

        justify-content: center;

        gap: 14px;

        padding: 20px 0;

        text-align: center;

    }


    .vc-footer-bottom-links {

        justify-content: center;

        flex-wrap: wrap;

    }


    .vc-footer-payment {

        flex-direction: column;

        gap: 7px;

    }

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 520px) {

    .vc-newsletter-left {

        display: block;

    }


    .vc-newsletter-icon {

        margin-bottom: 14px;

    }


    .vc-newsletter-input {

        height: auto;

        min-height: 54px;

    }


    .vc-newsletter-input input {

        font-size: 11px;

    }


    .vc-newsletter-input button {

        width: 44px;

        flex: 0 0 44px;

        padding: 0;

    }


    .vc-footer-grid {

        grid-template-columns:
            1fr;

        gap: 29px;

    }


    .vc-footer-brand,
    .vc-support-column {

        grid-column: auto;

    }


    .vc-footer-brand-name {

        font-size: 29px;

    }


    .vc-footer-description {

        font-size: 11px;

    }


    .vc-footer-trust {

        display: grid;

        grid-template-columns:
            repeat(2, 1fr);

    }


    .vc-footer-trust > div {

        min-width: 0;

        padding: 10px;

    }


    .vc-footer-trust strong {

        font-size: 10px;

    }


    .vc-footer-social-wrap {

        justify-content: space-between;

    }


    .vc-footer-social {

        gap: 6px;

    }


    .vc-footer-social a {

        width: 34px;
        height: 34px;

    }


    .vc-footer-service-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .vc-footer-service {

        min-height: 77px;

        padding: 12px 9px;

        gap: 8px;

    }


    .vc-footer-service > span {

        width: 35px;
        height: 35px;

        flex: 0 0 35px;

        font-size: 15px;

    }


    .vc-footer-service strong {

        font-size: 10px;

    }


    .vc-footer-service small {

        font-size: 8px;

    }


    .vc-footer-service:nth-child(1)::after,
    .vc-footer-service:nth-child(3)::after {

        display: block;

    }


    .vc-footer-service:nth-child(2)::after {

        display: none;

    }

}

/* ============================================================
   VEGIICART FOOTER
   FONT + LINK + ICON SIZE OVERRIDE
   ADD AT VERY END OF CSS
============================================================ */


/* MAIN FOOTER TEXT */
.vc-footer,
.vc-footer p,
.vc-footer span {
    font-size: 16px !important;
    line-height: 1.8 !important;
}


/* ============================================================
   FOOTER HEADINGS
============================================================ */

.vc-footer h2,
.vc-footer h3,
.vc-footer h4,
.vc-footer-title,
.vc-footer-heading {
    font-size: 21px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    margin-bottom: 18px !important;
}


/* ============================================================
   ALL FOOTER LINKS
============================================================ */

.vc-footer a {
    font-size: 16px !important;
    line-height: 1.7 !important;
}


/* QUICK LINKS / POLICY / SUPPORT LINKS */

.vc-footer ul li {
    margin-bottom: 10px !important;
}

.vc-footer ul li a,
.vc-footer-links a,
.vc-footer-menu a,
.vc-footer-list a,
.vc-footer-column ul li a {
    font-size: 16px !important;
    line-height: 1.7 !important;
    font-weight: 500 !important;
}


/* LINK ARROW ICON */

.vc-footer ul li a i,
.vc-footer-links a i,
.vc-footer-menu a i,
.vc-footer-list a i {
    font-size: 14px !important;
    margin-right: 8px !important;
}


/* ============================================================
   ABOUT VEGIICART TEXT
============================================================ */

.vc-footer-about p,
.vc-footer-description,
.vc-footer-about-text {
    font-size: 16px !important;
    line-height: 1.8 !important;
}


/* ============================================================
   CONTACT INFORMATION
============================================================ */

.vc-footer-contact,
.vc-footer-contact p,
.vc-footer-contact span,
.vc-footer-contact a,
.vc-contact-item,
.vc-contact-item a,
.vc-contact-item span {
    font-size: 16px !important;
    line-height: 1.6 !important;
}


/* CONTACT ICON */

.vc-footer-contact i,
.vc-contact-item > i,
.vc-footer-contact-item > i {
    font-size: 22px !important;
}


/* ============================================================
   SOCIAL MEDIA ICON BUTTONS
============================================================ */

.vc-footer-social,
.vc-social-links,
.vc-social-icons {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}


.vc-footer-social a,
.vc-social-links a,
.vc-social-icons a {

    width: 48px !important;
    height: 48px !important;

    min-width: 48px !important;
    min-height: 48px !important;

    padding: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 50% !important;

    background: rgba(255,255,255,0.12) !important;

    border: 1px solid rgba(255,255,255,0.20) !important;

    transition: all 0.3s ease !important;
}


/* ACTUAL SOCIAL ICON SIZE */

.vc-footer-social a i,
.vc-social-links a i,
.vc-social-icons a i {

    font-size: 23px !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    line-height: 1 !important;
}


/* SOCIAL HOVER */

.vc-footer-social a:hover,
.vc-social-links a:hover,
.vc-social-icons a:hover {

    background: #ffffff !important;

    transform: translateY(-4px) !important;
}


.vc-footer-social a:hover i,
.vc-social-links a:hover i,
.vc-social-icons a:hover i {
    color: #087426 !important;
}


/* ============================================================
   NEWSLETTER
============================================================ */

.vc-newsletter-title {
    font-size: 21px !important;
    font-weight: 700 !important;
}


.vc-newsletter-text,
.vc-footer-newsletter p {
    font-size: 15px !important;
    line-height: 1.7 !important;
}


.vc-newsletter-form input {
    font-size: 15px !important;
}


.vc-newsletter-form input::placeholder {
    font-size: 15px !important;
}


.vc-newsletter-form button {
    font-size: 15px !important;
    font-weight: 700 !important;
}


/* ============================================================
   BOTTOM FOOTER / COPYRIGHT
============================================================ */

.vc-footer-bottom,
.vc-footer-bottom p,
.vc-footer-bottom span {
    font-size: 15px !important;
}


.vc-footer-bottom a {
    font-size: 15px !important;
    font-weight: 600 !important;
}


/* Privacy / Terms / Refund etc */

.vc-footer-bottom-links a,
.vc-policy-links a {
    font-size: 15px !important;
}


/* ============================================================
   FONT AWESOME ICONS
============================================================ */

.vc-footer .fa-facebook-f,
.vc-footer .fa-facebook,
.vc-footer .fa-instagram,
.vc-footer .fa-whatsapp,
.vc-footer .fa-youtube,
.vc-footer .fa-linkedin,
.vc-footer .fa-linkedin-in,
.vc-footer .fa-twitter,
.vc-footer .fa-x-twitter {
    font-size: 23px !important;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991px) {

    .vc-footer h2,
    .vc-footer h3,
    .vc-footer h4,
    .vc-footer-title,
    .vc-footer-heading {
        font-size: 20px !important;
    }


    .vc-footer p,
    .vc-footer span,
    .vc-footer a,
    .vc-footer ul li a {
        font-size: 15.5px !important;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767px) {

    /* Footer headings */

    .vc-footer h2,
    .vc-footer h3,
    .vc-footer h4,
    .vc-footer-title,
    .vc-footer-heading {
        font-size: 19px !important;
        margin-bottom: 14px !important;
    }


    /* Normal text */

    .vc-footer,
    .vc-footer p,
    .vc-footer span {
        font-size: 15px !important;
        line-height: 1.7 !important;
    }


    /* Links */

    .vc-footer a,
    .vc-footer ul li a,
    .vc-footer-links a,
    .vc-footer-menu a,
    .vc-footer-list a {
        font-size: 15px !important;
    }


    .vc-footer ul li {
        margin-bottom: 9px !important;
    }


    /* Contact */

    .vc-footer-contact p,
    .vc-footer-contact span,
    .vc-footer-contact a,
    .vc-contact-item,
    .vc-contact-item a {
        font-size: 15px !important;
    }


    /* Social button */

    .vc-footer-social a,
    .vc-social-links a,
    .vc-social-icons a {
        width: 46px !important;
        height: 46px !important;

        min-width: 46px !important;
        min-height: 46px !important;
    }


    /* Social icon */

    .vc-footer-social a i,
    .vc-social-links a i,
    .vc-social-icons a i {
        font-size: 21px !important;
    }


    /* Copyright */

    .vc-footer-bottom,
    .vc-footer-bottom p,
    .vc-footer-bottom span,
    .vc-footer-bottom a {
        font-size: 14px !important;
    }

}

/* ============================================================
   VEGIICART WORKING PREMIUM HERO SLIDER
============================================================ */

.vgh-slider {

    --vgh-green: #087426;
    --vgh-dark-green: #034f19;
    --vgh-light-green: #68e67f;

    position: relative;

    width: 100%;

    height: 540px;

    overflow: hidden;

    background: #04230f;
}


.vgh-slides {

    position: relative;

    width: 100%;

    height: 100%;
}


/* ============================================================
   EACH SLIDE
============================================================ */

.vgh-slide {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    opacity: 0;

    visibility: hidden;

    transform: translateX(40px);

    transition:
        opacity .48s ease,
        transform .48s ease,
        visibility .48s ease;

    z-index: 1;
}


.vgh-slide.active {

    opacity: 1;

    visibility: visible;

    transform: translateX(0);

    z-index: 2;
}


/* ============================================================
   BACKGROUND IMAGE
============================================================ */

.vgh-slide > img {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transform: scale(1.03);

    transition:
        transform 2.5s ease;
}


.vgh-slide.active > img {

    transform: scale(1.08);
}


/* ============================================================
   PREMIUM GREEN OVERLAY
============================================================ */

.vgh-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
            90deg,
            rgba(0, 32, 10, .97) 0%,
            rgba(2, 74, 24, .88) 15%,
            rgba(2, 70, 22, .57) 25%,
            rgba(0, 0, 0, .18) 100%
        );
}


/* ============================================================
   CONTAINER
============================================================ */

.vgh-container {

    position: relative;

    z-index: 4;

    width: min(92%, 1450px);

    height: 100%;

    margin: 0 auto;

    display: flex;

    align-items: center;
}


/* ============================================================
   CONTENT
============================================================ */

.vgh-content {

    width: min(100%, 720px);

    color: #ffffff;
}


.vgh-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 17px;

    padding: 9px 15px;

    border-radius: 50px;

    color: #cdfed7;

    background: rgba(255,255,255,.11);

    border: 1px solid rgba(255,255,255,.18);

    backdrop-filter: blur(10px);

    font-size: 12px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .8px;
}


.vgh-badge i {

    color: var(--vgh-light-green);

    font-size: 14px;
}


/* ============================================================
   HEADING
============================================================ */

.vgh-content h1,
.vgh-content h2 {

    margin: 0 0 18px;

    max-width: 700px;

    color: #ffffff;

    font-size: clamp(42px, 5vw, 70px);

    line-height: 1.03;

    font-weight: 850;

    letter-spacing: -2px;
}


.vgh-content h1 strong,
.vgh-content h2 strong {

    display: block;

    margin-top: 5px;

    color: var(--vgh-light-green);

    font-weight: 850;
}


/* ============================================================
   DESCRIPTION
============================================================ */

.vgh-content > p {

    max-width: 620px;

    margin: 0 0 25px;

    color: rgba(255,255,255,.85);

    font-size: 15px;

    line-height: 1.8;
}


/* ============================================================
   BUTTONS
============================================================ */

.vgh-actions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 11px;

    margin-bottom: 24px;
}


.vgh-primary-btn,
.vgh-secondary-btn {

    min-height: 52px;

    padding: 0 23px;

    border-radius: 12px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    text-decoration: none;

    font-size: 13px;

    font-weight: 750;

    transition: all .3s ease;
}


.vgh-primary-btn {

    color: #ffffff;

    background:

        linear-gradient(
            135deg,
            #14aa3e,
            #087426
        );

    box-shadow:
        0 12px 28px
        rgba(1, 52, 14, .30);
}


.vgh-primary-btn:hover {

    color: #ffffff;

    transform: translateY(-3px);
}


.vgh-secondary-btn {

    color: #ffffff;

    background:
        rgba(255,255,255,.09);

    border:
        1px solid rgba(255,255,255,.38);

    backdrop-filter: blur(8px);
}


.vgh-secondary-btn:hover {

    color: var(--vgh-dark-green);

    background: #ffffff;
}


/* ============================================================
   FEATURES
============================================================ */

.vgh-points {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 19px;
}


.vgh-points span {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    color: rgba(255,255,255,.90);

    font-size: 11px;

    font-weight: 600;
}


.vgh-points i {

    color: var(--vgh-light-green);

    font-size: 13px;
}


/* ============================================================
   CONTENT ENTRANCE
============================================================ */

.vgh-slide .vgh-content {

    opacity: 0;

    transform: translateY(28px);

    transition:
        opacity .55s ease .12s,
        transform .55s ease .12s;
}


.vgh-slide.active .vgh-content {

    opacity: 1;

    transform: translateY(0);
}


/* ============================================================
   ARROWS
============================================================ */

.vgh-arrow {

    position: absolute;

    top: 50%;

    z-index: 20;

    width: 48px;

    height: 48px;

    padding: 0;

    border-radius: 50%;

    border:
        1px solid rgba(255,255,255,.24);

    display: flex;

    align-items: center;

    justify-content: center;

    color: #ffffff;

    background:
        rgba(255,255,255,.10);

    backdrop-filter: blur(8px);

    cursor: pointer;

    transform: translateY(-50%);

    transition: all .3s ease;
}


.vgh-arrow i {

    font-size: 15px;
}


.vgh-arrow:hover {

    background: var(--vgh-green);

    border-color: var(--vgh-green);

    transform:
        translateY(-50%)
        scale(1.07);
}


.vgh-prev {
    left: 20px;
}


.vgh-next {
    right: 20px;
}


/* ============================================================
   DOTS
============================================================ */

.vgh-dots {

    position: absolute;

    z-index: 20;

    left: 50%;

    bottom: 22px;

    display: flex;

    align-items: center;

    gap: 7px;

    transform: translateX(-50%);
}


.vgh-dot {

    width: 25px;

    height: 5px;

    padding: 0;

    border: none;

    border-radius: 20px;

    background:
        rgba(255,255,255,.45);

    cursor: pointer;

    transition: all .3s ease;
}


.vgh-dot.active {

    width: 48px;

    background: var(--vgh-light-green);
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991px) {

    .vgh-slider {
        height: 510px;
    }


    .vgh-content h1,
    .vgh-content h2 {
        font-size: 49px;
    }


    .vgh-content {
        max-width: 620px;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767px) {

    .vgh-slider {
        height: 515px;
    }


    .vgh-container {
        width: 90%;
    }


    .vgh-overlay {

        background:

            linear-gradient(
                90deg,
                rgba(0, 35, 11, .95),
                rgba(2, 70, 22, .82),
                rgba(1, 66, 21, .60)
            );
    }


    .vgh-badge {

        padding: 7px 11px;

        margin-bottom: 13px;

        font-size: 9px;
    }


    .vgh-content h1,
    .vgh-content h2 {

        margin-bottom: 14px;

        font-size: 38px;

        line-height: 1.08;

        letter-spacing: -1px;
    }


    .vgh-content > p {

        margin-bottom: 20px;

        font-size: 12px;

        line-height: 1.7;
    }


    .vgh-primary-btn,
    .vgh-secondary-btn {

        min-height: 47px;

        padding: 0 17px;

        font-size: 11px;
    }


    .vgh-points {

        flex-direction: column;

        align-items: flex-start;

        gap: 8px;
    }


    .vgh-points span {

        font-size: 10px;
    }


    .vgh-arrow {
        display: none;
    }


    .vgh-dots {
        bottom: 14px;
    }

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 480px) {

    .vgh-slider {
        height: 525px;
    }


    .vgh-content h1,
    .vgh-content h2 {

        font-size: 33px;
    }


    .vgh-actions {

        gap: 8px;
    }


    .vgh-primary-btn,
    .vgh-secondary-btn {

        width: 100%;
    }

}

/* ============================================================
   VEGIICART PREMIUM SHOP BY CATEGORY
============================================================ */

.vcat-section {

    --vcat-green: #087426;
    --vcat-green-dark: #035d1c;
    --vcat-green-deep: #013e13;
    --vcat-green-light: #18a943;

    position: relative;

    padding: 75px 0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 5% 15%,
            rgba(12, 135, 44, .07),
            transparent 26%
        ),
        radial-gradient(
            circle at 94% 85%,
            rgba(11, 132, 42, .06),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            #ffffff,
            #f5faf6
        );
}


.vcat-container {

    width: min(94%, 1450px);

    margin: 0 auto;

}


/* ============================================================
   HEADING
============================================================ */

.vcat-heading {

    margin-bottom: 38px;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

}


.vcat-heading-left {

    max-width: 720px;

}


.vcat-subtitle {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 9px;

    color: var(--vcat-green);

    font-size: 12px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1.2px;

}


.vcat-subtitle i {

    font-size: 14px;

}


.vcat-heading h2 {

    margin: 0 0 10px;

    color: #172019;

    font-size: clamp(30px, 3vw, 44px);

    font-weight: 850;

    line-height: 1.1;

    letter-spacing: -1px;

}


.vcat-heading h2 span {

    color: var(--vcat-green);

}


.vcat-heading p {

    max-width: 640px;

    margin: 0;

    color: #748078;

    font-size: 14px;

    line-height: 1.75;

}


/* View all */

.vcat-view-all {

    flex-shrink: 0;

    min-height: 48px;

    padding: 0 19px;

    border-radius: 50px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    color: var(--vcat-green-dark);

    text-decoration: none;

    background: #eaf7ed;

    border: 1px solid #d8eadc;

    font-size: 12px;

    font-weight: 750;

    transition: .3s ease;

}


.vcat-view-all:hover {

    color: #fff;

    background:
        linear-gradient(
            135deg,
            var(--vcat-green),
            var(--vcat-green-dark)
        );

    border-color: var(--vcat-green);

    transform: translateY(-2px);

    box-shadow:
        0 10px 22px rgba(4, 111, 32, .17);

}


/* ============================================================
   GRID
============================================================ */

.vcat-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 22px;

}


/* ============================================================
   CARD
============================================================ */

.vcat-card {

    min-width: 0;

    position: relative;

    border-radius: 24px;

    overflow: hidden;

    text-decoration: none;

    color: #171b18;

    background: #fff;

    border: 1px solid #e4ebe5;

    box-shadow:
        0 12px 36px rgba(9, 69, 25, .07);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}


.vcat-card:hover {

    transform: translateY(-7px);

    border-color: #b7dbbf;

    box-shadow:
        0 22px 45px rgba(8, 81, 29, .13);

}


/* ============================================================
   IMAGE
============================================================ */

.vcat-image {

    position: relative;

    height: 220px;

    margin: 9px;

    overflow: hidden;

    border-radius: 18px;

    background: #edf6ef;

}


.vcat-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            180deg,
            transparent 45%,
            rgba(0, 48, 14, .30)
        );

    pointer-events: none;

}


.vcat-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .5s ease;

}


.vcat-card:hover .vcat-image img {

    transform: scale(1.07);

}


/* ITEM COUNT */

.vcat-count {

    position: absolute;

    z-index: 3;

    top: 13px;

    right: 13px;

    padding: 7px 11px;

    border-radius: 50px;

    color: #fff;

    background:
        rgba(3, 86, 27, .86);

    backdrop-filter: blur(8px);

    border:
        1px solid rgba(255,255,255,.15);

    font-size: 10px;

    font-weight: 750;

}


/* ============================================================
   CONTENT
============================================================ */

.vcat-content {

    min-height: 92px;

    padding: 14px 17px 19px;

    display: flex;

    align-items: center;

    gap: 13px;

}


.vcat-icon {

    width: 46px;

    height: 46px;

    min-width: 46px;

    border-radius: 13px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--vcat-green);

    background:
        linear-gradient(
            135deg,
            #edf8ef,
            #e5f5e9
        );

    font-size: 20px;

    transition: .3s ease;

}


.vcat-card:hover .vcat-icon {

    color: #fff;

    background:
        linear-gradient(
            135deg,
            var(--vcat-green),
            var(--vcat-green-dark)
        );

    transform: rotate(-5deg);

}


.vcat-content > div:nth-child(2) {

    flex: 1;

    min-width: 0;

}


.vcat-content h3 {

    margin: 0 0 5px;

    color: #172019;

    font-size: 16px;

    font-weight: 780;

    line-height: 1.25;

}


.vcat-content p {

    margin: 0;

    color: #7a847c;

    font-size: 11px;

    line-height: 1.5;

}


.vcat-arrow {

    width: 35px;

    height: 35px;

    min-width: 35px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--vcat-green);

    background: #f0f8f2;

    font-size: 11px;

    transition: .3s ease;

}


.vcat-card:hover .vcat-arrow {

    color: #fff;

    background: var(--vcat-green);

    transform: translateX(3px);

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1050px) {

    .vcat-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .vcat-image {

        height: 210px;

    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767px) {

    .vcat-section {

        padding: 50px 0;

    }


    .vcat-container {

        width: 92%;

    }


    .vcat-heading {

        margin-bottom: 27px;

        align-items: flex-start;

    }


    .vcat-heading h2 {

        font-size: 29px;

    }


    .vcat-heading p {

        font-size: 12px;

    }


    .vcat-view-all {

        min-height: 40px;

        padding: 0 13px;

        font-size: 10px;

    }


    .vcat-view-all i {

        display: none;

    }


    .vcat-grid {

        gap: 13px;

    }


    .vcat-image {

        height: 165px;

        margin: 7px;

        border-radius: 14px;

    }


    .vcat-content {

        min-height: 84px;

        padding: 11px 12px 15px;

        gap: 10px;

    }


    .vcat-icon {

        width: 40px;

        height: 40px;

        min-width: 40px;

        font-size: 17px;

    }


    .vcat-content h3 {

        font-size: 13px;

    }


    .vcat-content p {

        font-size: 9px;

    }


    .vcat-arrow {

        width: 30px;

        height: 30px;

        min-width: 30px;

    }

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 520px) {

    .vcat-heading {

        display: block;

    }


    .vcat-view-all {

        margin-top: 15px;

    }


    .vcat-grid {

        grid-template-columns:
            repeat(2, 1fr);

        gap: 10px;

    }


    .vcat-card {

        border-radius: 17px;

    }


    .vcat-image {

        height: 120px;

        margin: 6px;

        border-radius: 12px;

    }


    .vcat-count {

        top: 9px;

        right: 9px;

        padding: 5px 8px;

        font-size: 8px;

    }


    .vcat-content {

        min-height: auto;

        padding: 9px 8px 12px;

        display: block;

        text-align: center;

    }


    .vcat-icon {

        width: 38px;

        height: 38px;

        min-width: 38px;

        margin: -25px auto 8px;

        position: relative;

        z-index: 5;

        border: 3px solid #fff;

        border-radius: 50%;

        font-size: 15px;

    }


    .vcat-content h3 {

        margin-bottom: 3px;

        font-size: 12px;

    }


    .vcat-content p {

        font-size: 8.5px;

    }


    .vcat-arrow {

        display: none;

    }

}

/* ============================================================
   VEGIICART BEST SELLING PRODUCT SLIDER
============================================================ */

.vbest-section {

    --vbest-green: #087426;
    --vbest-green-dark: #035d1c;
    --vbest-green-soft: #edf8ef;
    --vbest-text: #171b18;
    --vbest-muted: #78817a;

    position: relative;

    padding: 75px 0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 95% 10%,
            rgba(8,116,38,.07),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #f8fcf9,
            #eef7f0
        );
}


.vbest-container {

    width: min(94%, 1450px);

    margin: 0 auto;

}


/* ============================================================
   HEADING
============================================================ */

.vbest-heading {

    margin-bottom: 35px;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 25px;

}


.vbest-heading > div:first-child {

    max-width: 700px;

}


.vbest-subtitle {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 8px;

    color: var(--vbest-green);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.2px;

    text-transform: uppercase;

}


.vbest-subtitle i {

    color: #ff7d22;

}


.vbest-heading h2 {

    margin: 0 0 9px;

    color: var(--vbest-text);

    font-size: clamp(30px,3vw,44px);

    line-height: 1.12;

    font-weight: 850;

}


.vbest-heading h2 span {

    color: var(--vbest-green);

}


.vbest-heading p {

    margin: 0;

    color: var(--vbest-muted);

    font-size: 14px;

    line-height: 1.75;

}


/* ============================================================
   HEADING ACTIONS
============================================================ */

.vbest-heading-actions {

    display: flex;

    align-items: center;

    gap: 9px;

    flex-shrink: 0;

}


.vbest-slider-btn {

    width: 44px;

    height: 44px;

    padding: 0;

    border: 1px solid #d7e7da;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--vbest-green);

    background: #fff;

    cursor: pointer;

    transition: .3s;

}


.vbest-slider-btn:hover {

    color: #fff;

    background: var(--vbest-green);

    border-color: var(--vbest-green);

    transform: translateY(-2px);

}


.vbest-view-all {

    min-height: 44px;

    padding: 0 17px;

    border-radius: 50px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    color: var(--vbest-green-dark);

    background: #e7f5ea;

    text-decoration: none;

    font-size: 11px;

    font-weight: 750;

}


/* ============================================================
   SWIPER
============================================================ */

.vbestSlider {

    width: 100%;

    overflow: hidden;

    padding-bottom: 42px;

}


.vbestSlider .swiper-wrapper {

    align-items: stretch;

}


.vbestSlider .swiper-slide {

    height: auto;

}


/* ============================================================
   CARD
============================================================ */

.vbest-card {

    position: relative;

    height: 100%;

    overflow: hidden;

    border-radius: 22px;

    background: #fff;

    border: 1px solid #e3ebe5;

    box-shadow:
        0 12px 35px rgba(9,68,25,.07);

    transition: .35s;

}


.vbest-card:hover {

    transform: translateY(-6px);

    border-color: #b4d9bc;

    box-shadow:
        0 20px 45px rgba(7,79,27,.13);

}


/* ============================================================
   IMAGE
============================================================ */

.vbest-image {

    height: 225px;

    margin: 8px;

    display: block;

    overflow: hidden;

    border-radius: 17px;

    background: #f5f9f6;

}


.vbest-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition: .5s;

}


.vbest-card:hover .vbest-image img {

    transform: scale(1.06);

}


/* ============================================================
   BADGE
============================================================ */

.vbest-badge {

    position: absolute;

    z-index: 5;

    top: 18px;

    left: 18px;

    padding: 6px 10px;

    border-radius: 50px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #0d9834,
            #056321
        );

    font-size: 9px;

    font-weight: 800;

}


/* ============================================================
   WISHLIST
============================================================ */

.vbest-wishlist {

    position: absolute;

    z-index: 5;

    top: 16px;

    right: 16px;

    width: 38px;

    height: 38px;

    padding: 0;

    border: none;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--vbest-green);

    background: #fff;

    box-shadow:
        0 7px 18px rgba(0,0,0,.10);

    cursor: pointer;

}


.vbest-wishlist i {

    font-size: 16px;

}


/* ============================================================
   CONTENT
============================================================ */

.vbest-content {

    padding: 12px 17px 18px;

}


.vbest-category {

    display: block;

    margin-bottom: 5px;

    color: var(--vbest-green);

    font-size: 9px;

    font-weight: 750;

    text-transform: uppercase;

    letter-spacing: .8px;

}


.vbest-content h3 {

    margin: 0 0 8px;

    color: var(--vbest-text);

    font-size: 16px;

    font-weight: 800;

}


/* ============================================================
   RATING
============================================================ */

.vbest-rating {

    margin-bottom: 13px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

}


.vbest-rating > div {

    display: flex;

    gap: 2px;

    color: #f2b419;

    font-size: 9px;

}


.vbest-rating > span {

    color: #9aa19b;

    font-size: 8px;

}


/* ============================================================
   PRICE
============================================================ */

.vbest-price-row {

    padding-top: 12px;

    border-top: 1px solid #edf1ee;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

}


.vbest-price {

    display: flex;

    align-items: baseline;

    gap: 4px;

}


.vbest-price strong {

    color: var(--vbest-green-dark);

    font-size: 19px;

    font-weight: 850;

}


.vbest-price span {

    color: #7f887f;

    font-size: 9px;

}


.vbest-price del {

    margin-left: 4px;

    color: #abb2ad;

    font-size: 9px;

}


/* ============================================================
   CART
============================================================ */

.vbest-cart-btn {

    width: 40px;

    height: 40px;

    flex: 0 0 40px;

    padding: 0;

    border: none;

    border-radius: 11px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            var(--vbest-green),
            var(--vbest-green-dark)
        );

    cursor: pointer;

}


.vbest-cart-btn i {

    font-size: 14px;

}


/* ============================================================
   PAGINATION
============================================================ */

.vbest-pagination {

    bottom: 0 !important;

}


.vbest-pagination .swiper-pagination-bullet {

    width: 8px;

    height: 8px;

    background: #92b59a;

    opacity: .55;

}


.vbest-pagination .swiper-pagination-bullet-active {

    width: 25px;

    border-radius: 20px;

    opacity: 1;

    background: var(--vbest-green);

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991px) {

    .vbest-section {

        padding: 60px 0;

    }


    .vbest-image {

        height: 210px;

    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767px) {

    .vbest-container {

        width: 92%;

    }


    .vbest-section {

        padding: 50px 0;

    }


    .vbest-heading {

        align-items: flex-start;

    }


    .vbest-heading h2 {

        font-size: 29px;

    }


    .vbest-heading p {

        font-size: 12px;

    }


    .vbest-heading-actions {

        gap: 6px;

    }


    .vbest-slider-btn {

        width: 38px;

        height: 38px;

    }


    .vbest-view-all {

        display: none;

    }


    .vbest-image {

        height: 180px;

    }

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 480px) {

    .vbest-heading {

        display: block;

    }


    .vbest-heading-actions {

        margin-top: 15px;

    }


    .vbest-image {

        height: 170px;

    }


    .vbest-card {

        border-radius: 18px;

    }


    .vbest-content {

        padding: 10px 12px 15px;

    }


    .vbest-content h3 {

        font-size: 13px;

    }


    .vbest-price strong {

        font-size: 16px;

    }

}

/* ============================================================
   VEGIICART PREMIUM FRESH ARRIVALS SLIDER
============================================================ */

.vfresh-section {

    --vf-green: #087426;
    --vf-green-dark: #035d1c;
    --vf-green-soft: #edf8ef;

    padding: 75px 0;

    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 4% 10%,
            rgba(8,116,38,.07),
            transparent 25%
        ),
        #ffffff;
}

.vc-home-category-rows .vc-home-cat-row {
    padding-top: 48px;
    padding-bottom: 48px;
}

.vc-home-category-rows .vc-home-cat-row:nth-child(even) {
    background:
        radial-gradient(
            circle at 96% 20%,
            rgba(8,116,38,.06),
            transparent 28%
        ),
        #f7faf6;
}


.vfresh-container {

    width: min(94%, 1450px);

    margin: 0 auto;
}


/* HEADING */

.vfresh-heading {

    margin-bottom: 35px;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 25px;
}


.vfresh-heading > div:first-child {

    max-width: 720px;
}


.vfresh-subtitle {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 8px;

    color: var(--vf-green);

    font-size: 12px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1.1px;
}


.vfresh-heading h2 {

    margin: 0 0 9px;

    color: #172019;

    font-size: clamp(30px,3vw,44px);

    line-height: 1.12;

    font-weight: 850;
}


.vfresh-heading h2 span {

    color: var(--vf-green);
}


.vfresh-heading p {

    margin: 0;

    color: #758078;

    font-size: 14px;

    line-height: 1.75;
}


/* ACTIONS */

.vfresh-heading-actions {

    display: flex;

    align-items: center;

    gap: 8px;
}


.vfresh-nav {

    width: 44px;

    height: 44px;

    border-radius: 50%;

    border: 1px solid #d7e8da;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #fff;

    color: var(--vf-green);

    cursor: pointer;

    transition: .3s;
}


.vfresh-nav:hover {

    color: #fff;

    background: var(--vf-green);

    border-color: var(--vf-green);
}


.vfresh-view-all {

    min-height: 44px;

    padding: 0 17px;

    border-radius: 50px;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: var(--vf-green-dark);

    background: #eaf7ed;

    text-decoration: none;

    font-size: 11px;

    font-weight: 750;
}


/* SLIDER */

.vfreshSlider {

    width: 100%;

    overflow: hidden;

    padding: 5px 2px 44px;
}


.vfreshSlider .swiper-wrapper {

    align-items: stretch;
}


.vfreshSlider .swiper-slide {

    height: auto;
}


/* CARD */

.vfresh-card {

    height: 100%;

    position: relative;

    overflow: hidden;

    border-radius: 22px;

    display: flex;

    flex-direction: column;

    background: #fff;

    border: 1px solid #e3ebe5;

    box-shadow:
        0 12px 35px rgba(8,70,26,.07);

    transition: .35s;
}


.vfresh-card:hover {

    transform: translateY(-6px);

    box-shadow:
        0 20px 45px rgba(7,79,27,.13);
}


/* IMAGE */

.vfresh-image {

    height: 220px;

    margin: 8px;

    overflow: hidden;

    display: block;

    border-radius: 17px;
}


.vfresh-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition: .5s;
}


.vfresh-card:hover .vfresh-image img {

    transform: scale(1.06);
}


/* BADGE */

.vfresh-badge {

    position: absolute;

    z-index: 5;

    top: 18px;

    left: 18px;

    padding: 6px 10px;

    border-radius: 50px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #14a63d,
            #087426
        );

    font-size: 9px;

    font-weight: 800;
}


/* WISHLIST */

.vfresh-wishlist {

    position: absolute;

    z-index: 5;

    top: 16px;

    right: 16px;

    width: 38px;

    height: 38px;

    border: none;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--vf-green);

    background: #fff;

    box-shadow:
        0 7px 18px rgba(0,0,0,.10);

    cursor: pointer;
}


/* CONTENT */

.vfresh-content {

    flex: 1;

    padding: 12px 17px 18px;

    display: flex;

    flex-direction: column;
}


.vfresh-category {

    margin-bottom: 5px;

    color: var(--vf-green);

    font-size: 9px;

    font-weight: 750;

    text-transform: uppercase;

    letter-spacing: .7px;
}


.vfresh-content h3 {

    margin: 0 0 8px;

    color: #172019;

    font-size: 16px;

    font-weight: 800;
}


/* RATING */

.vfresh-rating {

    margin-bottom: 13px;

    display: flex;

    justify-content: space-between;

    align-items: center;
}


.vfresh-rating > div {

    display: flex;

    gap: 2px;

    color: #f2b419;

    font-size: 9px;
}


.vfresh-rating > span {

    color: #98a099;

    font-size: 8px;
}


/* PRICE */

.vfresh-price-row {

    margin-top: auto;

    padding-top: 12px;

    border-top: 1px solid #edf1ee;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


.vfresh-price {

    display: flex;

    align-items: baseline;

    gap: 4px;
}


.vfresh-price strong {

    color: var(--vf-green-dark);

    font-size: 19px;

    font-weight: 850;
}


.vfresh-price span {

    color: #7f887f;

    font-size: 9px;
}


.vfresh-price del {

    margin-left: 4px;

    color: #abb2ad;

    font-size: 9px;
}


/* CART */

.vfresh-cart-btn {

    width: 40px;

    height: 40px;

    flex: 0 0 40px;

    border: none;

    border-radius: 11px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            var(--vf-green),
            var(--vf-green-dark)
        );

    cursor: pointer;
}


/* PAGINATION */

.vfresh-pagination {

    bottom: 0 !important;
}


.vfresh-pagination .swiper-pagination-bullet-active {

    width: 25px;

    border-radius: 20px;

    background: var(--vf-green);
}


/* RESPONSIVE */

@media (max-width: 767px) {

    .vfresh-section {
        padding: 50px 0;
    }

    .vfresh-container {
        width: 92%;
    }

    .vfresh-heading {
        align-items: flex-start;
    }

    .vfresh-heading h2 {
        font-size: 29px;
    }

    .vfresh-heading p {
        font-size: 12px;
    }

    .vfresh-view-all {
        display: none;
    }

    .vfresh-nav {
        width: 38px;
        height: 38px;
    }

    .vfresh-image {
        height: 180px;
    }
}


@media (max-width: 480px) {

    .vfresh-heading {
        display: block;
    }

    .vfresh-heading-actions {
        margin-top: 15px;
    }

    .vfresh-image {
        height: 165px;
    }

    .vfresh-content h3 {
        font-size: 13px;
    }

    .vfresh-price strong {
        font-size: 16px;
    }
}

/* ============================================================
   VEGIICART SEASONAL + RECOMMENDED PRODUCT SLIDER
============================================================ */

.vsr-section {

    --vsr-green: #087426;
    --vsr-green-dark: #035d1c;
    --vsr-green-soft: #edf8ef;
    --vsr-orange: #f28a24;

    position: relative;

    padding: 75px 0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 0% 100%,
            rgba(8,116,38,.07),
            transparent 27%
        ),
        radial-gradient(
            circle at 100% 0%,
            rgba(20,169,67,.07),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #f8fcf9,
            #f1f8f3
        );
}


.vsr-container {

    width: min(94%, 1450px);

    margin: 0 auto;
}


/* ============================================================
   HEADING
============================================================ */

.vsr-heading {

    margin-bottom: 35px;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 25px;
}


.vsr-heading > div:first-child {

    max-width: 720px;
}


.vsr-subtitle {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 8px;

    color: var(--vsr-green);

    font-size: 12px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1.1px;
}


.vsr-heading h2 {

    margin: 0 0 9px;

    color: #172019;

    font-size: clamp(30px,3vw,44px);

    font-weight: 850;

    line-height: 1.12;
}


.vsr-heading h2 span {

    color: var(--vsr-green);
}


.vsr-heading p {

    margin: 0;

    color: #748078;

    font-size: 14px;

    line-height: 1.75;
}


/* ============================================================
   HEADING BUTTONS
============================================================ */

.vsr-heading-actions {

    display: flex;

    align-items: center;

    gap: 8px;

    flex-shrink: 0;
}


.vsr-nav {

    width: 44px;

    height: 44px;

    padding: 0;

    border-radius: 50%;

    border: 1px solid #d6e7da;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--vsr-green);

    background: #fff;

    cursor: pointer;

    transition: .3s;
}


.vsr-nav:hover {

    color: #fff;

    background: var(--vsr-green);

    border-color: var(--vsr-green);
}


.vsr-view-all {

    min-height: 44px;

    padding: 0 17px;

    border-radius: 50px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    color: var(--vsr-green-dark);

    background: #e9f6ec;

    text-decoration: none;

    font-size: 11px;

    font-weight: 750;
}


/* ============================================================
   SWIPER
============================================================ */

.vsrSlider {

    width: 100%;

    padding: 5px 2px 45px;

    overflow: hidden;
}


.vsrSlider .swiper-wrapper {

    align-items: stretch;
}


.vsrSlider .swiper-slide {

    height: auto;
}


/* ============================================================
   CARD
============================================================ */

.vsr-card {

    position: relative;

    height: 100%;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    border-radius: 22px;

    background: #fff;

    border: 1px solid #e3ebe5;

    box-shadow:
        0 12px 35px rgba(8,70,26,.07);

    transition: .35s ease;
}


.vsr-card:hover {

    transform: translateY(-6px);

    border-color: #b5d9bd;

    box-shadow:
        0 20px 45px rgba(7,79,27,.13);
}


/* ============================================================
   TYPE BADGE
============================================================ */

.vsr-type {

    position: absolute;

    z-index: 5;

    top: 18px;

    left: 18px;

    padding: 7px 11px;

    border-radius: 50px;

    color: #fff;

    font-size: 9px;

    font-weight: 800;
}


.vsr-type.seasonal {

    background:
        linear-gradient(
            135deg,
            #f29a32,
            #e66c17
        );
}


.vsr-type.recommended {

    background:
        linear-gradient(
            135deg,
            #11a53b,
            #087426
        );
}


/* ============================================================
   IMAGE
============================================================ */

.vsr-image {

    height: 220px;

    margin: 8px;

    display: block;

    overflow: hidden;

    border-radius: 17px;

    background: #f3f8f4;
}


.vsr-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition: .5s;
}


.vsr-card:hover .vsr-image img {

    transform: scale(1.06);
}


/* ============================================================
   WISHLIST
============================================================ */

.vsr-wishlist {

    position: absolute;

    z-index: 6;

    top: 16px;

    right: 16px;

    width: 38px;

    height: 38px;

    padding: 0;

    border: none;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--vsr-green);

    background: #fff;

    box-shadow:
        0 7px 18px rgba(0,0,0,.10);

    cursor: pointer;

    transition: .3s;
}


.vsr-wishlist:hover {

    color: #fff;

    background: var(--vsr-green);
}


/* ============================================================
   CONTENT
============================================================ */

.vsr-content {

    flex: 1;

    padding: 12px 17px 18px;

    display: flex;

    flex-direction: column;
}


.vsr-category {

    margin-bottom: 5px;

    color: var(--vsr-green);

    font-size: 9px;

    font-weight: 750;

    text-transform: uppercase;

    letter-spacing: .7px;
}


.vsr-content h3 {

    margin: 0 0 10px;

    color: #172019;

    font-size: 16px;

    font-weight: 800;

    line-height: 1.35;
}


/* ============================================================
   META
============================================================ */

.vsr-meta {

    margin-bottom: 13px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;
}


.vsr-meta span {

    color: #8c958e;

    font-size: 9px;
}


.vsr-meta span:first-child {

    color: #d79512;

    font-weight: 700;
}


.vsr-meta i {

    margin-right: 3px;

    color: #f3b51b;
}


/* ============================================================
   PRICE
============================================================ */

.vsr-price-row {

    margin-top: auto;

    padding-top: 12px;

    border-top: 1px solid #edf1ee;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;
}


.vsr-price {

    display: flex;

    align-items: baseline;

    gap: 4px;
}


.vsr-price strong {

    color: var(--vsr-green-dark);

    font-size: 19px;

    font-weight: 850;
}


.vsr-price span {

    color: #7e8880;

    font-size: 9px;
}


.vsr-price del {

    margin-left: 4px;

    color: #abb1ac;

    font-size: 9px;
}


/* ============================================================
   CART BUTTON
============================================================ */

.vsr-cart-btn {

    width: 40px;

    height: 40px;

    flex: 0 0 40px;

    padding: 0;

    border: none;

    border-radius: 11px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            var(--vsr-green),
            var(--vsr-green-dark)
        );

    cursor: pointer;
}


/* ============================================================
   PAGINATION
============================================================ */

.vsr-pagination {

    bottom: 0 !important;
}


.vsr-pagination .swiper-pagination-bullet {

    width: 8px;

    height: 8px;

    opacity: .5;

    background: #84a88c;
}


.vsr-pagination .swiper-pagination-bullet-active {

    width: 25px;

    border-radius: 20px;

    opacity: 1;

    background: var(--vsr-green);
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 767px) {

    .vsr-section {
        padding: 50px 0;
    }


    .vsr-container {
        width: 92%;
    }


    .vsr-heading {
        align-items: flex-start;
    }


    .vsr-heading h2 {
        font-size: 29px;
    }


    .vsr-heading p {
        font-size: 12px;
    }


    .vsr-view-all {
        display: none;
    }


    .vsr-nav {
        width: 38px;
        height: 38px;
    }


    .vsr-image {
        height: 180px;
    }

}


@media (max-width: 480px) {

    .vsr-heading {
        display: block;
    }


    .vsr-heading-actions {
        margin-top: 15px;
    }


    .vsr-image {
        height: 165px;
    }


    .vsr-content h3 {
        font-size: 13px;
    }


    .vsr-price strong {
        font-size: 16px;
    }

}

/* ============================================================
   VEGIICART
   RECENTLY ORDERED + CONTINUE SHOPPING
============================================================ */

.vrc-section {

    --vrc-green: #087426;
    --vrc-dark: #035d1c;
    --vrc-deep: #013e13;
    --vrc-light: #edf8ef;
    --vrc-text: #172019;
    --vrc-muted: #748078;

    position: relative;

    padding: 75px 0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 5% 10%,
            rgba(8,116,38,.07),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #ffffff,
            #f4faf5
        );

}


.vrc-container {

    width: min(94%, 1450px);

    margin: 0 auto;

}


/* ============================================================
   HEADING
============================================================ */

.vrc-heading {

    margin-bottom: 35px;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

}


.vrc-heading-content {

    max-width: 750px;

}


.vrc-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 8px;

    color: var(--vrc-green);

    font-size: 12px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1.1px;

}


.vrc-heading h2 {

    margin: 0 0 10px;

    color: var(--vrc-text);

    font-size: clamp(30px, 3vw, 44px);

    line-height: 1.12;

    font-weight: 850;

}


.vrc-heading h2 span {

    color: var(--vrc-green);

}


.vrc-heading p {

    margin: 0;

    max-width: 660px;

    color: var(--vrc-muted);

    font-size: 14px;

    line-height: 1.75;

}


.vrc-all-btn {

    min-height: 48px;

    padding: 0 19px;

    flex-shrink: 0;

    border-radius: 50px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            var(--vrc-green),
            var(--vrc-dark)
        );

    text-decoration: none;

    font-size: 12px;

    font-weight: 750;

    box-shadow:
        0 10px 25px rgba(7, 111, 34, .18);

}


/* ============================================================
   MAIN GRID
============================================================ */

.vrc-main-grid {

    display: grid;

    grid-template-columns:
        1.25fr .75fr;

    gap: 22px;

    align-items: stretch;

}


/* ============================================================
   RECENT BOX
============================================================ */

.vrc-recent-box {

    padding: 25px;

    border-radius: 26px;

    background: #fff;

    border: 1px solid #e2ebe4;

    box-shadow:
        0 15px 45px rgba(9, 73, 27, .08);

}


.vrc-box-head {

    margin-bottom: 18px;

    padding-bottom: 17px;

    border-bottom: 1px solid #e9efea;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

}


.vrc-box-head span {

    display: block;

    margin-bottom: 3px;

    color: var(--vrc-green);

    font-size: 9px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .8px;

}


.vrc-box-head h3 {

    margin: 0;

    color: var(--vrc-text);

    font-size: 22px;

    font-weight: 800;

}


.vrc-box-head > a {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: var(--vrc-green);

    text-decoration: none;

    font-size: 10px;

    font-weight: 750;

}


/* ============================================================
   ORDER LIST
============================================================ */

.vrc-order-list {

    display: flex;

    flex-direction: column;

    gap: 12px;

}


.vrc-order-item {

    padding: 10px;

    border-radius: 17px;

    display: flex;

    align-items: center;

    gap: 14px;

    background: #f8fbf9;

    border: 1px solid #e7eee8;

    transition: .3s ease;

}


.vrc-order-item:hover {

    transform: translateX(4px);

    background: #f1f9f3;

    border-color: #cce4d1;

}


/* IMAGE */

.vrc-order-image {

    position: relative;

    width: 105px;

    height: 90px;

    flex: 0 0 105px;

    border-radius: 13px;

    overflow: hidden;

}


.vrc-order-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

}


.vrc-order-image > span {

    position: absolute;

    left: 6px;

    bottom: 6px;

    padding: 4px 6px;

    border-radius: 50px;

    color: #fff;

    background: rgba(3,93,28,.88);

    font-size: 7px;

    font-weight: 700;

}


/* ORDER CONTENT */

.vrc-order-content {

    flex: 1;

    min-width: 0;

}


.vrc-order-content small {

    color: var(--vrc-green);

    font-size: 8px;

    font-weight: 750;

    text-transform: uppercase;

}


.vrc-order-content h4 {

    margin: 3px 0 9px;

    color: var(--vrc-text);

    font-size: 14px;

    font-weight: 800;

}


.vrc-order-meta {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 13px;

}


.vrc-order-meta span {

    color: #778078;

    font-size: 9px;

}


.vrc-order-meta span i {

    margin-right: 4px;

    color: var(--vrc-green);

}


.vrc-order-meta strong {

    color: var(--vrc-dark);

    font-size: 11px;

}


/* REORDER */

.vrc-reorder-btn {

    min-height: 40px;

    padding: 0 14px;

    flex-shrink: 0;

    border: none;

    border-radius: 10px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            var(--vrc-green),
            var(--vrc-dark)
        );

    cursor: pointer;

    font-size: 9px;

    font-weight: 750;

}


/* ============================================================
   CONTINUE SHOPPING BANNER
============================================================ */

.vrc-continue-box {

    position: relative;

    min-height: 480px;

    border-radius: 26px;

    overflow: hidden;

    box-shadow:
        0 15px 45px rgba(9, 73, 27, .13);

}


.vrc-continue-bg {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

}


.vrc-continue-overlay {

    position: absolute;

    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            180deg,
            rgba(0, 36, 11, .28),
            rgba(1, 58, 18, .94)
        );

}


.vrc-continue-content {

    position: absolute;

    z-index: 4;

    left: 30px;

    right: 30px;

    bottom: 30px;

    color: #fff;

}


.vrc-continue-label {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 10px;

    padding: 7px 11px;

    border-radius: 50px;

    background: rgba(255,255,255,.12);

    border: 1px solid rgba(255,255,255,.18);

    font-size: 9px;

    font-weight: 750;

    text-transform: uppercase;

}


.vrc-continue-content h3 {

    margin: 0 0 12px;

    color: #fff;

    font-size: clamp(27px, 3vw, 40px);

    line-height: 1.1;

    font-weight: 850;

}


.vrc-continue-content h3 strong {

    display: block;

    color: #70eb86;

}


.vrc-continue-content p {

    margin: 0 0 17px;

    color: rgba(255,255,255,.79);

    font-size: 11px;

    line-height: 1.7;

}


.vrc-continue-features {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 20px;

}


.vrc-continue-features span {

    padding: 6px 9px;

    border-radius: 50px;

    color: #d8f6dd;

    background: rgba(255,255,255,.09);

    font-size: 8px;

}


.vrc-continue-features i {

    margin-right: 4px;

    color: #70ec86;

}


.vrc-shop-btn {

    min-height: 46px;

    padding: 0 17px;

    border-radius: 11px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    color: var(--vrc-dark);

    background: #fff;

    text-decoration: none;

    font-size: 10px;

    font-weight: 800;

}


/* ============================================================
   RECENTLY VIEWED
============================================================ */

.vrc-viewed-area {

    margin-top: 25px;

}


.vrc-viewed-heading {

    margin-bottom: 15px;

}


.vrc-viewed-heading span {

    display: block;

    margin-bottom: 3px;

    color: var(--vrc-green);

    font-size: 9px;

    font-weight: 750;

    text-transform: uppercase;

}


.vrc-viewed-heading h3 {

    margin: 0;

    color: var(--vrc-text);

    font-size: 20px;

    font-weight: 800;

}


.vrc-viewed-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 13px;

}


/* VIEWED CARD */

.vrc-viewed-card {

    min-width: 0;

    padding: 10px;

    border-radius: 16px;

    display: flex;

    align-items: center;

    gap: 11px;

    color: var(--vrc-text);

    text-decoration: none;

    background: #fff;

    border: 1px solid #e4ebe5;

    transition: .3s;

}


.vrc-viewed-card:hover {

    transform: translateY(-4px);

    border-color: #bddcc4;

    box-shadow:
        0 12px 30px rgba(7, 73, 25, .09);

}


.vrc-viewed-image {

    width: 72px;

    height: 72px;

    flex: 0 0 72px;

    border-radius: 11px;

    overflow: hidden;

}


.vrc-viewed-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


.vrc-viewed-content {

    flex: 1;

    min-width: 0;

}


.vrc-viewed-content > span {

    color: var(--vrc-green);

    font-size: 8px;

    font-weight: 700;

    text-transform: uppercase;

}


.vrc-viewed-content h4 {

    margin: 3px 0 5px;

    font-size: 12px;

    font-weight: 800;

}


.vrc-viewed-content strong {

    color: var(--vrc-dark);

    font-size: 13px;

}


.vrc-viewed-content small {

    color: #858e87;

    font-size: 8px;

}


.vrc-viewed-arrow {

    width: 31px;

    height: 31px;

    flex: 0 0 31px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--vrc-green);

    background: var(--vrc-light);

    font-size: 9px;

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1050px) {

    .vrc-main-grid {

        grid-template-columns: 1fr;

    }


    .vrc-continue-box {

        min-height: 380px;

    }


    .vrc-viewed-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767px) {

    .vrc-section {

        padding: 50px 0;

    }


    .vrc-container {

        width: 92%;

    }


    .vrc-heading {

        align-items: flex-start;

    }


    .vrc-heading h2 {

        font-size: 29px;

    }


    .vrc-heading p {

        font-size: 12px;

    }


    .vrc-all-btn {

        display: none;

    }


    .vrc-recent-box {

        padding: 17px;

        border-radius: 20px;

    }


    .vrc-order-image {

        width: 85px;

        height: 78px;

        flex-basis: 85px;

    }


    .vrc-reorder-btn {

        width: 40px;

        height: 40px;

        min-height: 40px;

        padding: 0;

    }


    .vrc-reorder-btn span {

        display: none;

    }


    .vrc-continue-box {

        min-height: 390px;

        border-radius: 20px;

    }


    .vrc-continue-content {

        left: 22px;

        right: 22px;

        bottom: 22px;

    }

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 520px) {

    .vrc-heading {

        display: block;

    }


    .vrc-box-head h3 {

        font-size: 18px;

    }


    .vrc-order-item {

        gap: 10px;

    }


    .vrc-order-image {

        width: 75px;

        height: 72px;

        flex-basis: 75px;

    }


    .vrc-order-content h4 {

        font-size: 12px;

    }


    .vrc-order-meta {

        gap: 6px;

    }


    .vrc-order-meta span {

        font-size: 8px;

    }


    .vrc-viewed-grid {

        grid-template-columns: 1fr;

    }


    .vrc-viewed-card {

        padding: 9px;

    }

}

/* ============================================================
   VEGIICART PREMIUM BULK PURCHASE OFFERS
============================================================ */

.vbulk-section {

    --vbulk-green: #087426;
    --vbulk-green-dark: #035d1c;
    --vbulk-deep: #012d0e;
    --vbulk-light: #65e77e;

    position: relative;

    padding: 78px 0;

    overflow: hidden;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 8% 10%,
            rgba(66, 221, 94, .14),
            transparent 26%
        ),
        radial-gradient(
            circle at 92% 90%,
            rgba(38, 187, 67, .12),
            transparent 24%
        ),
        linear-gradient(
            135deg,
            #011809,
            #033514 50%,
            #052b12
        );
}


.vbulk-container {

    width: min(94%, 1450px);

    margin: 0 auto;
}


/* ============================================================
   HEADING
============================================================ */

.vbulk-heading {

    margin-bottom: 38px;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;
}


.vbulk-heading > div {

    max-width: 760px;
}


.vbulk-subtitle {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 9px;

    color: #70ec87;

    font-size: 12px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1.1px;
}


.vbulk-heading h2 {

    margin: 0 0 10px;

    color: #ffffff;

    font-size: clamp(31px, 3vw, 46px);

    line-height: 1.12;

    font-weight: 850;
}


.vbulk-heading h2 span {

    color: var(--vbulk-light);
}


.vbulk-heading p {

    margin: 0;

    max-width: 700px;

    color: rgba(255,255,255,.68);

    font-size: 14px;

    line-height: 1.8;
}


.vbulk-top-btn {

    min-height: 48px;

    padding: 0 19px;

    flex-shrink: 0;

    border-radius: 50px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    color: var(--vbulk-green-dark);

    background: #ffffff;

    text-decoration: none;

    font-size: 12px;

    font-weight: 800;

    transition: .3s ease;
}


.vbulk-top-btn:hover {

    color: #ffffff;

    background: var(--vbulk-green);

    transform: translateY(-2px);
}


/* ============================================================
   GRID
============================================================ */

.vbulk-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 22px;
}


/* ============================================================
   CARD
============================================================ */

.vbulk-card {

    position: relative;

    padding: 30px;

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.035)
        );

    border:
        1px solid rgba(255,255,255,.10);

    backdrop-filter: blur(10px);

    box-shadow:
        0 18px 45px rgba(0,0,0,.15);

    transition: .35s ease;
}


.vbulk-card:hover {

    transform: translateY(-7px);

    border-color:
        rgba(101, 231, 126, .35);

    background:
        linear-gradient(
            145deg,
            rgba(27, 165, 57, .16),
            rgba(255,255,255,.05)
        );
}


/* FEATURED */

.vbulk-featured {

    transform: translateY(-10px);

    border-color:
        rgba(97, 232, 124, .38);

    background:
        linear-gradient(
            150deg,
            rgba(13, 135, 43, .30),
            rgba(255,255,255,.06)
        );

    box-shadow:
        0 24px 55px rgba(0,0,0,.23);
}


.vbulk-featured:hover {

    transform: translateY(-14px);
}


/* POPULAR */

.vbulk-popular {

    position: absolute;

    top: 17px;

    right: 17px;

    padding: 7px 11px;

    border-radius: 50px;

    color: #073814;

    background: #72eb87;

    font-size: 8px;

    font-weight: 850;

    text-transform: uppercase;

    letter-spacing: .6px;
}


/* ============================================================
   CARD TOP
============================================================ */

.vbulk-card-top {

    margin-bottom: 18px;

    display: flex;

    align-items: center;

    gap: 13px;
}


.vbulk-icon {

    width: 55px;

    height: 55px;

    flex: 0 0 55px;

    border-radius: 16px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #6bea82;

    background:
        rgba(76, 219, 101, .12);

    border:
        1px solid rgba(105, 232, 128, .12);

    font-size: 22px;
}


.vbulk-plan {

    color: #75df88;

    font-size: 10px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1px;
}


/* ============================================================
   TITLE
============================================================ */

.vbulk-card h3 {

    margin: 0 0 10px;

    color: #ffffff;

    font-size: 21px;

    line-height: 1.25;

    font-weight: 800;
}


.vbulk-card > p {

    min-height: 64px;

    margin: 0 0 19px;

    color: rgba(255,255,255,.64);

    font-size: 11px;

    line-height: 1.75;
}


/* ============================================================
   SAVING
============================================================ */

.vbulk-saving {

    min-height: 78px;

    margin-bottom: 20px;

    padding: 13px 15px;

    border-radius: 15px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    background:
        rgba(255,255,255,.06);

    border:
        1px solid rgba(255,255,255,.07);
}


.vbulk-saving span {

    color: #a8bcad;

    font-size: 10px;

    font-weight: 650;
}


.vbulk-saving strong {

    color: #6cec83;

    font-size: 28px;

    line-height: 1;

    font-weight: 850;
}


/* ============================================================
   BENEFITS
============================================================ */

.vbulk-benefits {

    margin: 0 0 24px;

    padding: 0;

    list-style: none;
}


.vbulk-benefits li {

    min-height: 36px;

    display: flex;

    align-items: center;

    gap: 9px;

    color: #d0dbd2;

    font-size: 10px;

    border-bottom:
        1px solid rgba(255,255,255,.05);
}


.vbulk-benefits li:last-child {

    border-bottom: none;
}


.vbulk-benefits i {

    color: #65e77e;

    font-size: 11px;
}


/* ============================================================
   CARD CTA
============================================================ */

.vbulk-card-btn {

    width: 100%;

    min-height: 48px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #0d9634,
            #056421
        );

    text-decoration: none;

    font-size: 11px;

    font-weight: 800;

    transition: .3s ease;
}


.vbulk-card-btn:hover {

    color: var(--vbulk-green-dark);

    background: #ffffff;

    transform: translateY(-2px);
}


/* ============================================================
   BOTTOM CTA STRIP
============================================================ */

.vbulk-bottom {

    margin-top: 28px;

    padding: 18px 22px;

    border-radius: 18px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    background:
        rgba(255,255,255,.055);

    border:
        1px solid rgba(255,255,255,.09);
}


.vbulk-bottom > div {

    display: flex;

    align-items: center;

    gap: 14px;
}


.vbulk-bottom-icon {

    width: 46px;

    height: 46px;

    flex: 0 0 46px;

    border-radius: 13px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #69ea81;

    background:
        rgba(62, 204, 89, .12);

    font-size: 19px;
}


.vbulk-bottom strong {

    display: block;

    margin-bottom: 3px;

    color: #ffffff;

    font-size: 13px;
}


.vbulk-bottom p {

    margin: 0;

    color: #9eafa2;

    font-size: 10px;

    line-height: 1.6;
}


.vbulk-bottom > a {

    min-height: 42px;

    padding: 0 16px;

    flex-shrink: 0;

    border-radius: 10px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    color: var(--vbulk-green-dark);

    background: #ffffff;

    text-decoration: none;

    font-size: 10px;

    font-weight: 800;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1000px) {

    .vbulk-grid {

        grid-template-columns: 1fr;

    }


    .vbulk-featured {

        transform: none;

    }


    .vbulk-featured:hover {

        transform: translateY(-7px);

    }


    .vbulk-card > p {

        min-height: auto;

    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767px) {

    .vbulk-section {

        padding: 50px 0;

    }


    .vbulk-container {

        width: 92%;

    }


    .vbulk-heading {

        align-items: flex-start;

    }


    .vbulk-heading h2 {

        font-size: 29px;

    }


    .vbulk-heading p {

        font-size: 12px;

    }


    .vbulk-top-btn {

        display: none;

    }


    .vbulk-card {

        padding: 23px;

        border-radius: 20px;

    }


    .vbulk-card h3 {

        font-size: 19px;

    }


    .vbulk-saving strong {

        font-size: 24px;

    }


    .vbulk-bottom {

        align-items: flex-start;

        flex-direction: column;

    }


    .vbulk-bottom > a {

        width: 100%;

    }

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 480px) {

    .vbulk-heading {

        display: block;

    }


    .vbulk-icon {

        width: 48px;

        height: 48px;

        flex-basis: 48px;

        font-size: 19px;

    }


    .vbulk-card {

        padding: 20px;

    }


    .vbulk-card h3 {

        font-size: 18px;

    }


    .vbulk-benefits li {

        font-size: 9px;

    }


    .vbulk-saving {

        min-height: 68px;

    }

}

/* ============================================================
   VEGIICART - WHY CHOOSE US
============================================================ */

.vwhy-section {

    --vwhy-green: #087426;
    --vwhy-dark: #035d1c;
    --vwhy-light: #edf8ef;
    --vwhy-text: #172019;
    --vwhy-muted: #748078;

    position: relative;

    padding: 78px 0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 5% 10%,
            rgba(8,116,38,.07),
            transparent 25%
        ),
        #ffffff;
}


.vwhy-container {

    width: min(94%,1450px);

    margin: 0 auto;
}


.vwhy-grid {

    display: grid;

    grid-template-columns:
        .95fr 1.05fr;

    gap: 70px;

    align-items: center;
}


/* IMAGE SIDE */

.vwhy-visual {

    position: relative;

    min-height: 540px;
}


.vwhy-main-image {

    width: 83%;

    height: 480px;

    overflow: hidden;

    border-radius: 30px;

    box-shadow:
        0 20px 50px rgba(8,76,28,.14);
}


.vwhy-main-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;
}


.vwhy-small-card {

    position: absolute;

    right: 0;

    bottom: 0;

    width: 52%;

    padding: 8px;

    border-radius: 20px;

    background: #fff;

    box-shadow:
        0 15px 40px rgba(0,0,0,.12);
}


.vwhy-small-image {

    height: 150px;

    border-radius: 14px;

    overflow: hidden;
}


.vwhy-small-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;
}


.vwhy-small-content {

    padding: 12px 8px 6px;

    display: flex;

    align-items: center;

    gap: 10px;
}


.vwhy-small-content > span {

    width: 38px;

    height: 38px;

    border-radius: 11px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--vwhy-green);

    background: var(--vwhy-light);
}


.vwhy-small-content div {

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.vwhy-small-content strong {

    color: var(--vwhy-text);

    font-size: 11px;
}


.vwhy-small-content small {

    color: var(--vwhy-muted);

    font-size: 8px;
}


.vwhy-floating-badge {

    position: absolute;

    top: 30px;

    right: 4%;

    width: 115px;

    height: 115px;

    border-radius: 50%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #0d9634,
            #056321
        );

    box-shadow:
        0 15px 35px rgba(5,100,31,.25);
}


.vwhy-floating-badge i {

    margin-bottom: 4px;

    font-size: 24px;

    color: #75ec89;
}


.vwhy-floating-badge strong {

    font-size: 14px;
}


.vwhy-floating-badge span {

    font-size: 8px;
}


/* CONTENT */

.vwhy-subtitle {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 10px;

    color: var(--vwhy-green);

    font-size: 12px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1px;
}


.vwhy-content h2 {

    margin: 0 0 16px;

    color: var(--vwhy-text);

    font-size: clamp(32px,4vw,48px);

    line-height: 1.12;

    font-weight: 850;
}


.vwhy-content h2 span {

    display: block;

    color: var(--vwhy-green);
}


.vwhy-intro {

    margin: 0 0 28px;

    color: var(--vwhy-muted);

    font-size: 14px;

    line-height: 1.8;
}


.vwhy-features {

    display: grid;

    grid-template-columns:
        repeat(2,1fr);

    gap: 14px;

    margin-bottom: 28px;
}


.vwhy-feature {

    padding: 15px;

    border-radius: 16px;

    display: flex;

    align-items: flex-start;

    gap: 12px;

    background:
        linear-gradient(
            145deg,
            #f8fcf9,
            #f0f8f2
        );

    border: 1px solid #e1eae3;

    transition: .3s ease;
}


.vwhy-feature:hover {

    transform: translateY(-4px);

    border-color: #b9dcbf;

    box-shadow:
        0 12px 28px rgba(7,80,27,.08);
}


.vwhy-feature-icon {

    width: 42px;

    height: 42px;

    flex: 0 0 42px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--vwhy-green);

    background: #e8f6eb;

    font-size: 17px;
}


.vwhy-feature h3 {

    margin: 0 0 5px;

    color: var(--vwhy-text);

    font-size: 12px;

    font-weight: 800;
}


.vwhy-feature p {

    margin: 0;

    color: var(--vwhy-muted);

    font-size: 9px;

    line-height: 1.55;
}


.vwhy-btn {

    min-height: 50px;

    padding: 0 20px;

    border-radius: 12px;

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            var(--vwhy-green),
            var(--vwhy-dark)
        );

    text-decoration: none;

    font-size: 11px;

    font-weight: 800;

    box-shadow:
        0 10px 25px rgba(7,100,31,.18);
}


/* RESPONSIVE */

@media (max-width: 950px) {

    .vwhy-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .vwhy-visual {
        min-height: 470px;
    }

    .vwhy-main-image {
        height: 410px;
    }
}


@media (max-width: 767px) {

    .vwhy-section {
        padding: 52px 0;
    }

    .vwhy-container {
        width: 92%;
    }

    .vwhy-content h2 {
        font-size: 31px;
    }

    .vwhy-intro {
        font-size: 12px;
    }

    .vwhy-features {
        grid-template-columns: 1fr;
    }

    .vwhy-visual {
        min-height: 390px;
    }

    .vwhy-main-image {
        width: 88%;
        height: 340px;
    }

    .vwhy-small-card {
        width: 52%;
    }

    .vwhy-small-image {
        height: 115px;
    }

    .vwhy-floating-badge {
        width: 90px;
        height: 90px;
    }
}

/* ============================================================
   VEGIICART - BUSINESSES WE SERVE
============================================================ */

.vbiz-section {

    --vbiz-green: #087426;
    --vbiz-dark: #035d1c;
    --vbiz-light: #64e47b;

    position: relative;

    padding: 78px 0;

    overflow: hidden;

    color: #fff;

    background:
        radial-gradient(
            circle at 10% 15%,
            rgba(54,208,83,.14),
            transparent 26%
        ),
        radial-gradient(
            circle at 92% 85%,
            rgba(58,214,86,.10),
            transparent 24%
        ),
        linear-gradient(
            135deg,
            #011b0a,
            #033d16 50%,
            #052b12
        );
}


.vbiz-container {

    width: min(94%,1450px);

    margin: 0 auto;
}


/* HEADING */

.vbiz-heading {

    max-width: 760px;

    margin: 0 auto 42px;

    text-align: center;
}


.vbiz-subtitle {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 9px;

    color: #71ea86;

    font-size: 12px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1px;
}


.vbiz-heading h2 {

    margin: 0 0 11px;

    color: #fff;

    font-size: clamp(32px,3.5vw,46px);

    line-height: 1.12;

    font-weight: 850;
}


.vbiz-heading h2 span {

    color: var(--vbiz-light);
}


.vbiz-heading p {

    margin: 0;

    color: rgba(255,255,255,.68);

    font-size: 14px;

    line-height: 1.8;
}


/* GRID */

.vbiz-grid {

    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 18px;
}


/* CARD */

.vbiz-card {

    position: relative;

    padding: 28px;

    min-height: 260px;

    border-radius: 22px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.035)
        );

    border:
        1px solid rgba(255,255,255,.10);

    transition: .35s ease;
}


.vbiz-card::before {

    content: "";

    position: absolute;

    right: -40px;

    bottom: -40px;

    width: 120px;

    height: 120px;

    border-radius: 50%;

    background:
        rgba(83,224,107,.07);
}


.vbiz-card:hover {

    transform: translateY(-7px);

    background:
        linear-gradient(
            145deg,
            rgba(13,150,46,.20),
            rgba(255,255,255,.05)
        );

    border-color:
        rgba(101,231,125,.30);
}


.vbiz-icon {

    width: 54px;

    height: 54px;

    margin-bottom: 22px;

    border-radius: 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #6bea82;

    background:
        rgba(73,208,97,.12);

    font-size: 22px;
}


.vbiz-number {

    position: absolute;

    top: 20px;

    right: 22px;

    color: rgba(255,255,255,.10);

    font-size: 31px;

    font-weight: 900;
}


.vbiz-card h3 {

    margin: 0 0 9px;

    color: #fff;

    font-size: 18px;

    font-weight: 800;
}


.vbiz-card p {

    margin: 0 0 18px;

    color: #aabaae;

    font-size: 11px;

    line-height: 1.7;
}


.vbiz-card a {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: #6bea82;

    text-decoration: none;

    font-size: 10px;

    font-weight: 750;
}


.vbiz-card a i {

    transition: .3s;
}


.vbiz-card:hover a i {

    transform: translateX(4px);
}


/* BOTTOM CTA */

.vbiz-cta {

    margin-top: 25px;

    padding: 18px 22px;

    border-radius: 18px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    background:
        rgba(255,255,255,.06);

    border:
        1px solid rgba(255,255,255,.09);
}


.vbiz-cta > div {

    display: flex;

    align-items: center;

    gap: 14px;
}


.vbiz-cta-icon {

    width: 48px;

    height: 48px;

    flex: 0 0 48px;

    border-radius: 13px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #6bea82;

    background:
        rgba(70,201,93,.12);

    font-size: 19px;
}


.vbiz-cta strong {

    display: block;

    margin-bottom: 3px;

    color: #fff;

    font-size: 13px;
}


.vbiz-cta p {

    margin: 0;

    color: #9faea2;

    font-size: 10px;
}


.vbiz-cta > a {

    min-height: 43px;

    padding: 0 16px;

    flex-shrink: 0;

    border-radius: 10px;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: var(--vbiz-dark);

    background: #fff;

    text-decoration: none;

    font-size: 10px;

    font-weight: 800;
}


/* RESPONSIVE */

@media (max-width: 1000px) {

    .vbiz-grid {
        grid-template-columns: repeat(2,1fr);
    }

}


@media (max-width: 767px) {

    .vbiz-section {
        padding: 52px 0;
    }

    .vbiz-container {
        width: 92%;
    }

    .vbiz-heading h2 {
        font-size: 30px;
    }

    .vbiz-heading p {
        font-size: 12px;
    }

    .vbiz-card {
        padding: 22px;
        min-height: 230px;
    }

    .vbiz-cta {
        align-items: flex-start;
        flex-direction: column;
    }

    .vbiz-cta > a {
        width: 100%;
        justify-content: center;
    }

}


@media (max-width: 520px) {

    .vbiz-grid {
        grid-template-columns: 1fr;
    }

    .vbiz-card {
        min-height: auto;
    }

}

/* ============================================================
   VEGIICART - QUALITY & FRESHNESS ASSURANCE
============================================================ */

.vqf-section {

    --vqf-green: #087426;
    --vqf-dark: #035d1c;
    --vqf-deep: #013e13;
    --vqf-light: #edf8ef;
    --vqf-text: #172019;
    --vqf-muted: #748078;

    position: relative;

    padding: 78px 0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 95% 10%,
            rgba(8,116,38,.07),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #ffffff,
            #f5faf6
        );
}


.vqf-container {

    width: min(94%,1450px);

    margin: 0 auto;
}


.vqf-grid {

    display: grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap: 70px;

    align-items: center;
}


/* ============================================================
   IMAGE
============================================================ */

.vqf-visual {

    position: relative;

    min-height: 540px;
}


.vqf-main-image {

    width: 90%;

    height: 500px;

    border-radius: 30px;

    overflow: hidden;

    box-shadow:
        0 20px 55px rgba(6,77,27,.15);
}


.vqf-main-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;
}


/* FLOATING CARD */

.vqf-floating-card {

    position: absolute;

    left: 30px;

    bottom: 5px;

    min-width: 250px;

    padding: 15px;

    border-radius: 17px;

    display: flex;

    align-items: center;

    gap: 12px;

    background:
        rgba(255,255,255,.95);

    box-shadow:
        0 15px 35px rgba(0,0,0,.13);

    backdrop-filter: blur(10px);
}


.vqf-floating-icon {

    width: 47px;

    height: 47px;

    flex: 0 0 47px;

    border-radius: 13px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--vqf-green);

    background: var(--vqf-light);

    font-size: 20px;
}


.vqf-floating-card div {

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.vqf-floating-card strong {

    color: var(--vqf-text);

    font-size: 12px;
}


.vqf-floating-card small {

    color: var(--vqf-muted);

    font-size: 9px;
}


/* BADGE */

.vqf-fresh-badge {

    position: absolute;

    top: 30px;

    right: 0;

    width: 115px;

    height: 115px;

    border-radius: 50%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #0d9835,
            #056321
        );

    box-shadow:
        0 15px 35px rgba(5,100,31,.25);
}


.vqf-fresh-badge i {

    margin-bottom: 4px;

    color: #72eb87;

    font-size: 25px;
}


.vqf-fresh-badge strong {

    font-size: 15px;
}


.vqf-fresh-badge span {

    font-size: 8px;
}


/* ============================================================
   CONTENT
============================================================ */

.vqf-subtitle {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 10px;

    color: var(--vqf-green);

    font-size: 12px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1px;
}


.vqf-content h2 {

    margin: 0 0 16px;

    color: var(--vqf-text);

    font-size: clamp(32px,4vw,48px);

    line-height: 1.12;

    font-weight: 850;
}


.vqf-content h2 span {

    display: block;

    color: var(--vqf-green);
}


.vqf-intro {

    margin: 0 0 27px;

    color: var(--vqf-muted);

    font-size: 14px;

    line-height: 1.8;
}


/* ============================================================
   PROCESS
============================================================ */

.vqf-process {

    display: grid;

    grid-template-columns:
        repeat(2,1fr);

    gap: 14px;
}


.vqf-step {

    position: relative;

    min-height: 145px;

    padding: 18px;

    border-radius: 17px;

    display: flex;

    align-items: flex-start;

    gap: 12px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f3faf5
        );

    border: 1px solid #e2ebe4;

    transition: .3s;
}


.vqf-step:hover {

    transform: translateY(-4px);

    border-color: #b8dbbf;

    box-shadow:
        0 12px 28px rgba(7,80,27,.08);
}


.vqf-step-number {

    position: absolute;

    top: 10px;

    right: 13px;

    color: #dcebe0;

    font-size: 23px;

    font-weight: 900;
}


.vqf-step-icon {

    width: 43px;

    height: 43px;

    flex: 0 0 43px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--vqf-green);

    background: #e8f6eb;

    font-size: 17px;
}


.vqf-step h3 {

    margin: 2px 0 5px;

    color: var(--vqf-text);

    font-size: 12px;

    font-weight: 800;
}


.vqf-step p {

    margin: 0;

    color: var(--vqf-muted);

    font-size: 9px;

    line-height: 1.6;
}


/* ============================================================
   BOTTOM
============================================================ */

.vqf-bottom {

    margin-top: 20px;

    display: grid;

    grid-template-columns:
        repeat(2,1fr);

    gap: 12px;
}


.vqf-bottom > div {

    padding: 12px 14px;

    border-radius: 13px;

    display: flex;

    align-items: center;

    gap: 10px;

    background: var(--vqf-dark);

    color: #fff;
}


.vqf-bottom > div > i {

    color: #6feb85;

    font-size: 17px;
}


.vqf-bottom span {

    display: flex;

    flex-direction: column;

    gap: 2px;
}


.vqf-bottom strong {

    font-size: 10px;
}


.vqf-bottom small {

    color: #b2cfb8;

    font-size: 8px;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width:950px) {

    .vqf-grid {

        grid-template-columns: 1fr;

        gap: 45px;
    }

    .vqf-visual {
        min-height: 470px;
    }

    .vqf-main-image {
        height: 430px;
    }
}


@media (max-width:767px) {

    .vqf-section {
        padding: 52px 0;
    }

    .vqf-container {
        width: 92%;
    }

    .vqf-content h2 {
        font-size: 31px;
    }

    .vqf-intro {
        font-size: 12px;
    }

    .vqf-process {
        grid-template-columns: 1fr;
    }

    .vqf-main-image {

        width: 90%;

        height: 350px;
    }

    .vqf-visual {
        min-height: 405px;
    }

    .vqf-fresh-badge {

        width: 92px;

        height: 92px;
    }
}


@media (max-width:520px) {

    .vqf-floating-card {

        left: 12px;

        min-width: 215px;
    }

    .vqf-bottom {

        grid-template-columns: 1fr;
    }
}

/* ============================================================
   VEGIICART - DELIVERY COVERAGE
============================================================ */

.vdc-section {

    --vdc-green: #087426;
    --vdc-dark: #035d1c;
    --vdc-deep: #012d0e;
    --vdc-light: #65e77e;

    position: relative;

    padding: 75px 0;

    overflow: hidden;

    background: #ffffff;
}


.vdc-container {

    width: min(94%,1450px);

    margin: 0 auto;
}


.vdc-box {

    position: relative;

    min-height: 480px;

    padding: 55px;

    border-radius: 30px;

    display: grid;

    grid-template-columns:
        1.1fr .9fr;

    align-items: center;

    gap: 55px;

    overflow: hidden;

    color: #fff;

    background:
        radial-gradient(
            circle at 85% 30%,
            rgba(86,232,112,.18),
            transparent 30%
        ),
        radial-gradient(
            circle at 10% 95%,
            rgba(39,183,68,.11),
            transparent 25%
        ),
        linear-gradient(
            130deg,
            #011d0b,
            #034a19,
            #087426
        );

    box-shadow:
        0 22px 55px rgba(4,80,25,.17);
}


/* ============================================================
   CONTENT
============================================================ */

.vdc-subtitle {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 10px;

    color: #73ed89;

    font-size: 12px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1px;
}


.vdc-content h2 {

    margin: 0 0 16px;

    color: #fff;

    font-size: clamp(32px,4vw,48px);

    line-height: 1.12;

    font-weight: 850;
}


.vdc-content h2 span {

    display: block;

    color: var(--vdc-light);
}


.vdc-content > p {

    max-width: 650px;

    margin: 0 0 25px;

    color: rgba(255,255,255,.72);

    font-size: 13px;

    line-height: 1.8;
}


/* ============================================================
   DELIVERY FEATURES
============================================================ */

.vdc-features {

    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 11px;

    margin-bottom: 25px;
}


.vdc-features > div {

    padding: 12px;

    border-radius: 13px;

    display: flex;

    align-items: center;

    gap: 10px;

    background:
        rgba(255,255,255,.07);

    border:
        1px solid rgba(255,255,255,.09);
}


.vdc-features > div > span {

    width: 39px;

    height: 39px;

    flex: 0 0 39px;

    border-radius: 11px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #70eb86;

    background:
        rgba(81,219,105,.12);

    font-size: 16px;
}


.vdc-features > div div {

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.vdc-features strong {

    color: #fff;

    font-size: 10px;
}


.vdc-features small {

    color: #a9c1af;

    font-size: 8px;
}


/* ============================================================
   PINCODE
============================================================ */

.vdc-pincode {

    max-width: 620px;

    min-height: 62px;

    padding: 6px;

    border-radius: 50px;

    display: flex;

    align-items: center;

    gap: 8px;

    background: #fff;

    box-shadow:
        0 12px 30px rgba(0,0,0,.15);
}


.vdc-pincode > div {

    flex: 1;

    min-width: 0;

    padding-left: 14px;

    display: flex;

    align-items: center;

    gap: 9px;
}


.vdc-pincode > div i {

    color: var(--vdc-green);

    font-size: 17px;
}


.vdc-pincode input {

    width: 100%;

    min-width: 0;

    border: none;

    outline: none;

    color: #253029;

    background: transparent;

    font-size: 12px;
}


.vdc-pincode button {

    min-height: 50px;

    padding: 0 20px;

    border: none;

    border-radius: 50px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            var(--vdc-green),
            var(--vdc-dark)
        );

    cursor: pointer;

    font-size: 10px;

    font-weight: 800;
}


.vdc-note {

    display: flex;

    align-items: center;

    gap: 6px;

    margin-top: 10px;

    color: #a9c7b0;

    font-size: 8px;
}


/* ============================================================
   VISUAL
============================================================ */

.vdc-visual {

    position: relative;

    min-height: 350px;

    display: flex;

    align-items: center;

    justify-content: center;
}


.vdc-map {

    position: relative;

    width: 330px;

    height: 330px;

    display: flex;

    align-items: center;

    justify-content: center;
}


.vdc-map-circle {

    position: absolute;

    border-radius: 50%;

    border:
        1px solid rgba(255,255,255,.13);
}


.vdc-map-circle.circle-one {

    width: 140px;

    height: 140px;
}


.vdc-map-circle.circle-two {

    width: 230px;

    height: 230px;
}


.vdc-map-circle.circle-three {

    width: 320px;

    height: 320px;
}


/* TRUCK */

.vdc-truck {

    position: relative;

    z-index: 5;

    width: 100px;

    height: 100px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #0ca33a,
            #056522
        );

    box-shadow:
        0 20px 45px rgba(0,0,0,.2);

    font-size: 39px;
}


/* LOCATION POINTS */

.vdc-point {

    position: absolute;

    z-index: 4;

    width: 40px;

    height: 40px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #71ec87;

    background:
        rgba(255,255,255,.10);

    border:
        1px solid rgba(255,255,255,.12);

    backdrop-filter: blur(8px);
}


.vdc-point i {

    font-size: 16px;
}


.point-a {

    top: 20px;

    left: 120px;
}


.point-b {

    right: 20px;

    top: 130px;
}


.point-c {

    left: 35px;

    bottom: 55px;
}


.point-d {

    right: 75px;

    bottom: 20px;
}


/* ============================================================
   STATUS
============================================================ */

.vdc-status {

    position: absolute;

    right: 0;

    bottom: 0;

    min-width: 280px;

    padding: 13px 15px;

    border-radius: 15px;

    display: flex;

    align-items: center;

    gap: 11px;

    background:
        rgba(255,255,255,.10);

    border:
        1px solid rgba(255,255,255,.12);

    backdrop-filter: blur(10px);
}


.vdc-status > span {

    width: 40px;

    height: 40px;

    flex: 0 0 40px;

    border-radius: 11px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #6deb84;

    background:
        rgba(83,220,107,.12);
}


.vdc-status div {

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.vdc-status strong {

    font-size: 10px;
}


.vdc-status small {

    color: #adcaB4;

    font-size: 8px;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width:1000px) {

    .vdc-box {

        grid-template-columns: 1fr;

        gap: 35px;
    }


    .vdc-visual {

        min-height: 320px;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width:767px) {

    .vdc-section {

        padding: 52px 0;
    }


    .vdc-container {

        width: 92%;
    }


    .vdc-box {

        padding: 30px 22px;

        border-radius: 23px;
    }


    .vdc-content h2 {

        font-size: 31px;
    }


    .vdc-content > p {

        font-size: 12px;
    }


    .vdc-features {

        grid-template-columns: 1fr;
    }


    .vdc-pincode {

        padding: 9px;

        border-radius: 17px;

        flex-wrap: wrap;
    }


    .vdc-pincode > div {

        min-height: 45px;
    }


    .vdc-pincode button {

        width: 100%;

        border-radius: 11px;
    }


    .vdc-map {

        width: 280px;

        height: 280px;
    }


    .vdc-map-circle.circle-three {

        width: 270px;

        height: 270px;
    }


    .vdc-map-circle.circle-two {

        width: 200px;

        height: 200px;
    }


    .vdc-status {

        position: relative;

        right: auto;

        bottom: auto;

        width: 100%;

        min-width: 0;

        margin-top: 15px;
    }


    .vdc-visual {

        flex-direction: column;
    }

}

/* ============================================================
   VEGIICART - CUSTOMER TESTIMONIALS
============================================================ */

.vtest-section {

    --vtest-green: #087426;
    --vtest-dark: #035d1c;
    --vtest-light: #edf8ef;
    --vtest-text: #172019;
    --vtest-muted: #748078;

    position: relative;

    padding: 75px 0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 5% 15%,
            rgba(8,116,38,.07),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #f8fcf9,
            #eff8f1
        );
}


.vtest-container {

    width: min(94%,1450px);

    margin: 0 auto;
}


/* HEADING */

.vtest-heading {

    margin-bottom: 35px;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 25px;
}


.vtest-heading > div:first-child {
    max-width: 720px;
}


.vtest-subtitle {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 8px;

    color: var(--vtest-green);

    font-size: 12px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1px;
}


.vtest-heading h2 {

    margin: 0 0 9px;

    color: var(--vtest-text);

    font-size: clamp(31px,3vw,44px);

    line-height: 1.12;

    font-weight: 850;
}


.vtest-heading h2 span {
    color: var(--vtest-green);
}


.vtest-heading p {

    margin: 0;

    color: var(--vtest-muted);

    font-size: 14px;

    line-height: 1.75;
}


.vtest-heading-actions {

    display: flex;

    gap: 8px;
}


.vtest-nav {

    width: 44px;

    height: 44px;

    border-radius: 50%;

    border: 1px solid #d6e7da;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--vtest-green);

    background: #fff;

    cursor: pointer;

    transition: .3s;
}


.vtest-nav:hover {

    color: #fff;

    background: var(--vtest-green);

    border-color: var(--vtest-green);
}


/* SLIDER */

.vtestSlider {

    width: 100%;

    overflow: hidden;

    padding: 4px 2px 45px;
}


.vtestSlider .swiper-wrapper {
    align-items: stretch;
}


.vtestSlider .swiper-slide {
    height: auto;
}


/* CARD */

.vtest-card {

    height: 100%;

    min-height: 300px;

    padding: 28px;

    border-radius: 22px;

    display: flex;

    flex-direction: column;

    background: #fff;

    border: 1px solid #e2ebe4;

    box-shadow:
        0 12px 35px rgba(8,69,26,.07);

    transition: .35s;
}


.vtest-card:hover {

    transform: translateY(-6px);

    border-color: #b9dcbf;

    box-shadow:
        0 20px 45px rgba(7,79,27,.13);
}


.vtest-top {

    margin-bottom: 18px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;
}


.vtest-quote {

    width: 47px;

    height: 47px;

    border-radius: 13px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--vtest-green);

    background: var(--vtest-light);

    font-size: 18px;
}


.vtest-stars {

    display: flex;

    gap: 3px;

    color: #f2b419;

    font-size: 11px;
}


.vtest-card > p {

    flex: 1;

    margin: 0 0 22px;

    color: #626d65;

    font-size: 13px;

    line-height: 1.85;
}


/* USER */

.vtest-user {

    padding-top: 16px;

    border-top: 1px solid #e9efea;

    display: flex;

    align-items: center;

    gap: 11px;
}


.vtest-avatar {

    width: 46px;

    height: 46px;

    flex: 0 0 46px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            var(--vtest-green),
            var(--vtest-dark)
        );

    font-size: 11px;

    font-weight: 850;
}


.vtest-user > div {

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.vtest-user strong {

    color: var(--vtest-text);

    font-size: 11px;
}


.vtest-user small {

    color: var(--vtest-muted);

    font-size: 8px;
}


.vtest-verified {

    display: inline-flex;

    align-items: center;

    gap: 4px;

    color: var(--vtest-green);

    font-size: 8px;

    font-weight: 700;
}


/* PAGINATION */

.vtest-pagination {
    bottom: 0 !important;
}


.vtest-pagination .swiper-pagination-bullet-active {

    width: 25px;

    border-radius: 20px;

    background: var(--vtest-green);
}


/* RESPONSIVE */

@media (max-width:767px) {

    .vtest-section {
        padding: 50px 0;
    }

    .vtest-container {
        width: 92%;
    }

    .vtest-heading {
        align-items: flex-start;
    }

    .vtest-heading h2 {
        font-size: 29px;
    }

    .vtest-heading p {
        font-size: 12px;
    }

    .vtest-nav {
        width: 38px;
        height: 38px;
    }

    .vtest-card {
        min-height: 280px;
        padding: 22px;
    }
}


@media (max-width:480px) {

    .vtest-heading {
        display: block;
    }

    .vtest-heading-actions {
        margin-top: 14px;
    }

}

/* ============================================================
   VEGIICART - REGISTRATION CTA
============================================================ */

.vreg-section {

    --vreg-green: #087426;
    --vreg-dark: #035d1c;
    --vreg-light: #67e77e;

    position: relative;

    padding: 65px 0;

    overflow: hidden;

    background: #ffffff;
}


.vreg-container {

    width: min(94%,1450px);

    margin: 0 auto;
}


.vreg-box {

    position: relative;

    padding: 52px;

    border-radius: 30px;

    overflow: hidden;

    display: grid;

    grid-template-columns:
        1.25fr .75fr;

    align-items: center;

    gap: 55px;

    color: #fff;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(91,230,116,.18),
            transparent 27%
        ),
        radial-gradient(
            circle at 0% 100%,
            rgba(54,201,80,.10),
            transparent 25%
        ),
        linear-gradient(
            125deg,
            #011b0a,
            #034819,
            #087426
        );

    box-shadow:
        0 22px 55px rgba(3,77,23,.17);
}


.vreg-box::before {

    content: "";

    position: absolute;

    top: -130px;

    right: -90px;

    width: 300px;

    height: 300px;

    border-radius: 50%;

    border: 55px solid rgba(255,255,255,.035);
}


/* CONTENT */

.vreg-content {

    position: relative;

    z-index: 2;
}


.vreg-subtitle {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 10px;

    color: #73ed89;

    font-size: 12px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1px;
}


.vreg-content h2 {

    margin: 0 0 16px;

    color: #fff;

    font-size: clamp(33px,4vw,49px);

    line-height: 1.12;

    font-weight: 850;
}


.vreg-content h2 span {

    display: block;

    color: var(--vreg-light);
}


.vreg-content > p {

    max-width: 720px;

    margin: 0 0 22px;

    color: rgba(255,255,255,.72);

    font-size: 13px;

    line-height: 1.8;
}


/* BENEFITS */

.vreg-benefits {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;
}


.vreg-benefits span {

    padding: 8px 11px;

    border-radius: 50px;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    color: #d8f5de;

    background: rgba(255,255,255,.08);

    border: 1px solid rgba(255,255,255,.08);

    font-size: 9px;

    font-weight: 650;
}


.vreg-benefits i {
    color: #6ee985;
}


/* ACTION */

.vreg-action {

    position: relative;

    z-index: 3;

    padding: 30px;

    border-radius: 22px;

    text-align: center;

    background: rgba(255,255,255,.10);

    border: 1px solid rgba(255,255,255,.14);

    backdrop-filter: blur(12px);

    box-shadow:
        0 15px 35px rgba(0,0,0,.12);
}


.vreg-action-icon {

    width: 68px;

    height: 68px;

    margin: 0 auto 16px;

    border-radius: 19px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #70eb86;

    background: rgba(255,255,255,.10);

    border: 1px solid rgba(255,255,255,.10);

    font-size: 27px;
}


.vreg-action h3 {

    margin: 0 0 8px;

    color: #fff;

    font-size: 20px;

    font-weight: 800;
}


.vreg-action > p {

    margin: 0 auto 20px;

    max-width: 320px;

    color: #b5cab9;

    font-size: 10px;

    line-height: 1.7;
}


.vreg-main-btn {

    width: 100%;

    min-height: 52px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    color: var(--vreg-dark);

    background: #fff;

    text-decoration: none;

    font-size: 11px;

    font-weight: 850;

    transition: .3s;
}


.vreg-main-btn:hover {

    color: #fff;

    background: var(--vreg-green);

    transform: translateY(-2px);
}


.vreg-login {

    margin-top: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 5px;

    flex-wrap: wrap;
}


.vreg-login span {

    color: #a9c0ae;

    font-size: 9px;
}


.vreg-login a {

    color: #74ec89;

    text-decoration: none;

    font-size: 9px;

    font-weight: 750;
}


/* RESPONSIVE */

@media (max-width:900px) {

    .vreg-box {

        grid-template-columns: 1fr;

        gap: 35px;
    }


    .vreg-action {

        max-width: 520px;
    }

}


@media (max-width:767px) {

    .vreg-section {
        padding: 50px 0;
    }

    .vreg-container {
        width: 92%;
    }

    .vreg-box {

        padding: 31px 22px;

        border-radius: 23px;
    }

    .vreg-content h2 {
        font-size: 31px;
    }

    .vreg-content > p {
        font-size: 12px;
    }

    .vreg-benefits {
        align-items: flex-start;
        flex-direction: column;
    }

    .vreg-action {
        padding: 24px 19px;
    }

}


@media (max-width:480px) {

    .vreg-action-icon {

        width: 58px;

        height: 58px;

        font-size: 23px;
    }

}

/* ============================================================
   VEGIICART - COMPANY INTRODUCTION
============================================================ */

.vintro-section {

    --vi-green: #087426;
    --vi-dark: #035d1c;
    --vi-soft: #edf8ef;
    --vi-text: #172019;
    --vi-muted: #748078;

    position: relative;

    padding: 78px 0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 95% 5%,
            rgba(8,116,38,.07),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #ffffff,
            #f5faf6
        );
}


.vintro-container {

    width: min(94%,1450px);

    margin: 0 auto;
}


.vintro-grid {

    display: grid;

    grid-template-columns:
        .95fr 1.05fr;

    align-items: center;

    gap: 70px;
}


/* IMAGE */

.vintro-visual {

    position: relative;

    min-height: 540px;
}


.vintro-main-image {

    width: 83%;

    height: 475px;

    border-radius: 30px;

    overflow: hidden;

    box-shadow:
        0 20px 50px rgba(6,78,27,.14);
}


.vintro-main-image img,
.vintro-small-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;
}


.vintro-small-image {

    position: absolute;

    right: 0;

    bottom: 0;

    width: 47%;

    height: 220px;

    padding: 8px;

    border-radius: 22px;

    background: #fff;

    box-shadow:
        0 18px 40px rgba(0,0,0,.12);
}


.vintro-small-image img {

    border-radius: 16px;
}


.vintro-badge {

    position: absolute;

    top: 32px;

    right: 3%;

    width: 112px;

    height: 112px;

    border-radius: 50%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #0d9734,
            #056321
        );

    box-shadow:
        0 15px 35px rgba(5,99,31,.25);
}


.vintro-badge i {

    margin-bottom: 4px;

    color: #75eb89;

    font-size: 24px;
}


.vintro-badge strong {

    font-size: 15px;
}


.vintro-badge span {

    font-size: 8px;
}


/* CONTENT */

.vintro-subtitle {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 10px;

    color: var(--vi-green);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1px;

    text-transform: uppercase;
}


.vintro-content h2 {

    margin: 0 0 17px;

    color: var(--vi-text);

    font-size: clamp(32px,4vw,49px);

    line-height: 1.12;

    font-weight: 850;
}


.vintro-content h2 span {

    display: block;

    color: var(--vi-green);
}


.vintro-content p {

    margin: 0 0 14px;

    color: var(--vi-muted);

    font-size: 13px;

    line-height: 1.85;
}


.vintro-content .vintro-lead {

    color: #48524b;

    font-size: 14px;
}


/* POINTS */

.vintro-points {

    display: grid;

    grid-template-columns:
        repeat(2,1fr);

    gap: 13px;

    margin: 27px 0;
}


.vintro-points > div {

    padding: 14px;

    border-radius: 15px;

    display: flex;

    align-items: center;

    gap: 11px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f2f9f4
        );

    border: 1px solid #e2ebe4;
}


.vintro-points > div > span {

    width: 42px;

    height: 42px;

    flex: 0 0 42px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--vi-green);

    background: #e8f6eb;

    font-size: 17px;
}


.vintro-points > div div {

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.vintro-points strong {

    color: var(--vi-text);

    font-size: 11px;
}


.vintro-points small {

    color: var(--vi-muted);

    font-size: 8px;

    line-height: 1.4;
}


.vintro-btn {

    min-height: 50px;

    padding: 0 20px;

    border-radius: 12px;

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            var(--vi-green),
            var(--vi-dark)
        );

    text-decoration: none;

    font-size: 11px;

    font-weight: 800;

    box-shadow:
        0 10px 24px rgba(5,100,31,.18);
}


/* RESPONSIVE */

@media (max-width:950px) {

    .vintro-grid {

        grid-template-columns: 1fr;

        gap: 45px;
    }

    .vintro-visual {
        min-height: 470px;
    }

    .vintro-main-image {
        height: 410px;
    }
}


@media (max-width:767px) {

    .vintro-section {
        padding: 52px 0;
    }

    .vintro-container {
        width: 92%;
    }

    .vintro-content h2 {
        font-size: 31px;
    }

    .vintro-content p,
    .vintro-content .vintro-lead {
        font-size: 12px;
    }

    .vintro-points {
        grid-template-columns: 1fr;
    }

    .vintro-visual {
        min-height: 390px;
    }

    .vintro-main-image {
        width: 88%;
        height: 340px;
    }

    .vintro-small-image {
        width: 50%;
        height: 160px;
    }

    .vintro-badge {
        width: 90px;
        height: 90px;
    }
}

/* ============================================================
   VEGIICART - COMPANY STORY
============================================================ */

.vstory-section {

    --vs-green: #087426;
    --vs-light: #69e780;
    --vs-deep: #011b0a;

    position: relative;

    padding: 80px 0;

    overflow: hidden;

    color: #fff;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(68,218,95,.13),
            transparent 27%
        ),
        radial-gradient(
            circle at 95% 85%,
            rgba(58,203,85,.10),
            transparent 24%
        ),
        linear-gradient(
            135deg,
            #01190a,
            #033b15 52%,
            #052a12
        );
}


.vstory-container {

    width: min(94%,1450px);

    margin: 0 auto;
}


/* HEADING */

.vstory-heading {

    max-width: 800px;

    margin: 0 auto 50px;

    text-align: center;
}


.vstory-subtitle {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 9px;

    color: #72eb88;

    font-size: 12px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1px;
}


.vstory-heading h2 {

    margin: 0 0 13px;

    color: #fff;

    font-size: clamp(32px,4vw,48px);

    line-height: 1.12;

    font-weight: 850;
}


.vstory-heading h2 span {

    color: var(--vs-light);
}


.vstory-heading p {

    margin: 0;

    color: rgba(255,255,255,.67);

    font-size: 14px;

    line-height: 1.8;
}


/* MAIN LAYOUT */

.vstory-layout {

    display: grid;

    grid-template-columns:
        1.05fr .95fr;

    gap: 65px;

    align-items: center;
}


/* TIMELINE */

.vstory-content {

    position: relative;

    padding-left: 10px;
}


.vstory-line {

    position: absolute;

    left: 33px;

    top: 35px;

    bottom: 35px;

    width: 1px;

    background:
        linear-gradient(
            180deg,
            rgba(105,231,128,.15),
            rgba(105,231,128,.75),
            rgba(105,231,128,.15)
        );
}


.vstory-item {

    position: relative;

    padding: 0 0 30px 78px;
}


.vstory-item:last-child {

    padding-bottom: 0;
}


.vstory-number {

    position: absolute;

    left: 0;

    top: 0;

    z-index: 3;

    width: 66px;

    height: 66px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #6eeb84;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.10),
            rgba(255,255,255,.04)
        );

    border:
        1px solid rgba(105,231,128,.25);

    font-size: 17px;

    font-weight: 850;

    backdrop-filter: blur(10px);
}


.vstory-item-content {

    padding: 20px 22px;

    border-radius: 18px;

    background:
        rgba(255,255,255,.055);

    border:
        1px solid rgba(255,255,255,.08);

    transition: .3s;
}


.vstory-item:hover .vstory-item-content {

    transform: translateX(5px);

    background:
        rgba(255,255,255,.08);

    border-color:
        rgba(105,231,128,.20);
}


.vstory-year {

    display: block;

    margin-bottom: 5px;

    color: #70e986;

    font-size: 9px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .8px;
}


.vstory-item h3 {

    margin: 0 0 7px;

    color: #fff;

    font-size: 16px;

    font-weight: 800;
}


.vstory-item p {

    margin: 0;

    color: #a9baad;

    font-size: 10px;

    line-height: 1.7;
}


/* VISUAL */

.vstory-image {

    position: relative;

    min-height: 470px;

    border-radius: 28px;

    overflow: hidden;

    box-shadow:
        0 22px 50px rgba(0,0,0,.22);
}


.vstory-image > img {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;
}


.vstory-image-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.10),
            rgba(1,52,17,.92)
        );
}


.vstory-image-content {

    position: absolute;

    z-index: 3;

    left: 30px;

    right: 30px;

    bottom: 30px;
}


.vstory-image-content > span {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 9px;

    color: #76ea89;

    font-size: 9px;

    font-weight: 750;

    text-transform: uppercase;
}


.vstory-image-content h3 {

    margin: 0 0 9px;

    color: #fff;

    font-size: 28px;

    line-height: 1.2;

    font-weight: 850;
}


.vstory-image-content p {

    margin: 0;

    color: rgba(255,255,255,.72);

    font-size: 10px;

    line-height: 1.7;
}


/* VALUES */

.vstory-values {

    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 10px;

    margin-top: 13px;
}


.vstory-values > div {

    padding: 14px 10px;

    border-radius: 13px;

    text-align: center;

    background:
        rgba(255,255,255,.06);

    border:
        1px solid rgba(255,255,255,.08);
}


.vstory-values strong {

    display: block;

    margin-bottom: 3px;

    color: #fff;

    font-size: 11px;
}


.vstory-values span {

    color: #79df8c;

    font-size: 8px;
}


/* RESPONSIVE */

@media (max-width:950px) {

    .vstory-layout {

        grid-template-columns: 1fr;

        gap: 45px;
    }

}


@media (max-width:767px) {

    .vstory-section {
        padding: 52px 0;
    }

    .vstory-container {
        width: 92%;
    }

    .vstory-heading h2 {
        font-size: 30px;
    }

    .vstory-heading p {
        font-size: 12px;
    }

    .vstory-content {
        padding-left: 0;
    }

    .vstory-line {
        left: 25px;
    }

    .vstory-item {
        padding-left: 63px;
    }

    .vstory-number {

        width: 50px;

        height: 50px;

        font-size: 13px;
    }

    .vstory-item-content {
        padding: 16px;
    }

    .vstory-image {
        min-height: 380px;
    }

    .vstory-image-content {
        left: 22px;
        right: 22px;
        bottom: 22px;
    }

    .vstory-image-content h3 {
        font-size: 23px;
    }

}


@media (max-width:520px) {

    .vstory-values {

        grid-template-columns: 1fr;
    }

}

/* ============================================================
   VEGIICART - VISION & MISSION
============================================================ */

.vvm-section {

    --vvm-green: #087426;
    --vvm-dark: #035d1c;
    --vvm-deep: #012d0e;
    --vvm-light: #67e77e;
    --vvm-soft: #edf8ef;
    --vvm-text: #172019;
    --vvm-muted: #748078;

    position: relative;

    padding: 78px 0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 7% 10%,
            rgba(8,116,38,.07),
            transparent 25%
        ),
        radial-gradient(
            circle at 95% 90%,
            rgba(8,116,38,.06),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #ffffff,
            #f4faf5
        );
}


.vvm-container {

    width: min(94%, 1450px);

    margin: 0 auto;
}


/* ============================================================
   HEADING
============================================================ */

.vvm-heading {

    max-width: 780px;

    margin: 0 auto 42px;

    text-align: center;
}


.vvm-subtitle {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 9px;

    color: var(--vvm-green);

    font-size: 12px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1.1px;
}


.vvm-heading h2 {

    margin: 0 0 11px;

    color: var(--vvm-text);

    font-size: clamp(32px,3.5vw,46px);

    line-height: 1.12;

    font-weight: 850;
}


.vvm-heading h2 span {

    color: var(--vvm-green);
}


.vvm-heading p {

    margin: 0;

    color: var(--vvm-muted);

    font-size: 14px;

    line-height: 1.8;
}


/* ============================================================
   GRID
============================================================ */

.vvm-grid {

    display: grid;

    grid-template-columns:
        repeat(2,1fr);

    gap: 22px;
}


/* ============================================================
   CARD
============================================================ */

.vvm-card {

    position: relative;

    min-height: 500px;

    padding: 35px;

    border-radius: 28px;

    overflow: hidden;

    transition: .35s ease;
}


/* VISION */

.vvm-vision {

    color: var(--vvm-text);

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(8,116,38,.09),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #ffffff,
            #edf8f0
        );

    border: 1px solid #dce9df;

    box-shadow:
        0 16px 45px rgba(7,73,25,.08);
}


/* MISSION */

.vvm-mission {

    color: #ffffff;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(104,231,126,.16),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #011c0b,
            #034b1a,
            #087426
        );

    border:
        1px solid rgba(255,255,255,.10);

    box-shadow:
        0 20px 50px rgba(3,74,23,.17);
}


.vvm-card:hover {

    transform: translateY(-7px);
}


/* ============================================================
   ICON
============================================================ */

.vvm-card-icon {

    width: 62px;

    height: 62px;

    margin-bottom: 20px;

    border-radius: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 25px;
}


.vvm-vision .vvm-card-icon {

    color: var(--vvm-green);

    background: #e5f5e9;
}


.vvm-mission .vvm-card-icon {

    color: #73ec88;

    background:
        rgba(255,255,255,.10);

    border:
        1px solid rgba(255,255,255,.10);
}


/* ============================================================
   LABEL
============================================================ */

.vvm-card-label {

    display: inline-block;

    margin-bottom: 8px;

    font-size: 10px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1.1px;
}


.vvm-vision .vvm-card-label {

    color: var(--vvm-green);
}


.vvm-mission .vvm-card-label {

    color: #73ec88;
}


/* ============================================================
   CARD HEADING
============================================================ */

.vvm-card h3 {

    max-width: 550px;

    margin: 0 0 17px;

    font-size: clamp(25px,2.7vw,37px);

    line-height: 1.15;

    font-weight: 850;
}


.vvm-card h3 strong {

    display: block;

    margin-top: 4px;

    font-weight: 850;
}


.vvm-vision h3 {

    color: var(--vvm-text);
}


.vvm-vision h3 strong {

    color: var(--vvm-green);
}


.vvm-mission h3 {

    color: #ffffff;
}


.vvm-mission h3 strong {

    color: #72eb87;
}


/* ============================================================
   PARAGRAPH
============================================================ */

.vvm-card > p {

    max-width: 590px;

    margin: 0 0 24px;

    font-size: 13px;

    line-height: 1.8;
}


.vvm-vision > p {

    color: var(--vvm-muted);
}


.vvm-mission > p {

    color: rgba(255,255,255,.69);
}


/* ============================================================
   LIST
============================================================ */

.vvm-list {

    display: flex;

    flex-direction: column;

    gap: 10px;
}


.vvm-list > div {

    min-height: 42px;

    padding: 9px 12px;

    border-radius: 11px;

    display: flex;

    align-items: center;

    gap: 9px;
}


.vvm-vision .vvm-list > div {

    background: rgba(255,255,255,.75);

    border: 1px solid #e0eae2;

    color: #4f5952;
}


.vvm-mission .vvm-list > div {

    background:
        rgba(255,255,255,.07);

    border:
        1px solid rgba(255,255,255,.08);

    color: #d0dfd3;
}


.vvm-list i {

    flex-shrink: 0;

    color: #24b64a;

    font-size: 13px;
}


.vvm-mission .vvm-list i {

    color: #6fea84;
}


.vvm-list span {

    font-size: 10px;

    line-height: 1.5;
}


/* ============================================================
   BACKGROUND NUMBER
============================================================ */

.vvm-card-number {

    position: absolute;

    right: 25px;

    bottom: 5px;

    pointer-events: none;

    font-size: 105px;

    line-height: 1;

    font-weight: 900;
}


.vvm-vision .vvm-card-number {

    color: rgba(8,116,38,.045);
}


.vvm-mission .vvm-card-number {

    color: rgba(255,255,255,.04);
}


/* ============================================================
   BOTTOM PROMISE
============================================================ */

.vvm-bottom {

    margin-top: 24px;

    padding: 17px 20px;

    border-radius: 18px;

    display: flex;

    align-items: center;

    gap: 14px;

    background: #ffffff;

    border: 1px solid #dfe9e1;

    box-shadow:
        0 12px 35px rgba(7,72,25,.07);
}


.vvm-bottom-icon {

    width: 48px;

    height: 48px;

    flex: 0 0 48px;

    border-radius: 13px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--vvm-green),
            var(--vvm-dark)
        );

    font-size: 20px;
}


.vvm-bottom > div:nth-child(2) {

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.vvm-bottom > div:nth-child(2) span {

    color: var(--vvm-green);

    font-size: 9px;

    font-weight: 750;

    text-transform: uppercase;

    letter-spacing: .8px;
}


.vvm-bottom > div:nth-child(2) strong {

    color: var(--vvm-text);

    font-size: 13px;
}


.vvm-bottom > a {

    min-height: 43px;

    padding: 0 16px;

    flex-shrink: 0;

    border-radius: 10px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--vvm-green),
            var(--vvm-dark)
        );

    text-decoration: none;

    font-size: 10px;

    font-weight: 800;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 900px) {

    .vvm-grid {

        grid-template-columns: 1fr;
    }


    .vvm-card {

        min-height: auto;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767px) {

    .vvm-section {

        padding: 52px 0;
    }


    .vvm-container {

        width: 92%;
    }


    .vvm-heading {

        margin-bottom: 30px;
    }


    .vvm-heading h2 {

        font-size: 30px;
    }


    .vvm-heading p {

        font-size: 12px;
    }


    .vvm-card {

        padding: 25px 21px;

        border-radius: 21px;
    }


    .vvm-card-icon {

        width: 54px;

        height: 54px;

        font-size: 21px;
    }


    .vvm-card h3 {

        font-size: 25px;
    }


    .vvm-card > p {

        font-size: 12px;
    }


    .vvm-list span {

        font-size: 9px;
    }


    .vvm-card-number {

        font-size: 75px;
    }


    .vvm-bottom {

        align-items: flex-start;

        flex-wrap: wrap;
    }


    .vvm-bottom > a {

        width: 100%;
    }

}

/* ============================================================
   VEGIICART
   BUSINESSES SERVED + PRODUCT SOURCING PROCESS
============================================================ */

.vbsp-section {

    --vbsp-green: #087426;
    --vbsp-dark: #035d1c;
    --vbsp-deep: #011b0a;
    --vbsp-light: #68e77f;
    --vbsp-soft: #edf8ef;
    --vbsp-text: #172019;
    --vbsp-muted: #748078;

    position: relative;

    padding: 80px 0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 5% 10%,
            rgba(8,116,38,.06),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            #ffffff,
            #f5faf6
        );
}


.vbsp-container {

    width: min(94%,1450px);

    margin: 0 auto;
}


/* ============================================================
   MAIN HEADING
============================================================ */

.vbsp-heading {

    max-width: 820px;

    margin: 0 auto 42px;

    text-align: center;
}


.vbsp-subtitle {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 9px;

    color: var(--vbsp-green);

    font-size: 12px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1px;
}


.vbsp-heading h2 {

    margin: 0 0 11px;

    color: var(--vbsp-text);

    font-size: clamp(32px,3.5vw,47px);

    line-height: 1.12;

    font-weight: 850;
}


.vbsp-heading h2 span {

    color: var(--vbsp-green);
}


.vbsp-heading p {

    margin: 0;

    color: var(--vbsp-muted);

    font-size: 14px;

    line-height: 1.8;
}


/* ============================================================
   TWO PANEL GRID
============================================================ */

.vbsp-grid {

    display: grid;

    grid-template-columns:
        .95fr 1.05fr;

    gap: 24px;

    align-items: stretch;
}


/* ============================================================
   LEFT BUSINESS PANEL
============================================================ */

.vbsp-business-panel {

    padding: 34px;

    border-radius: 28px;

    color: #fff;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(97,230,121,.15),
            transparent 27%
        ),
        linear-gradient(
            135deg,
            #011d0b,
            #034519,
            #087426
        );

    box-shadow:
        0 20px 50px rgba(4,75,24,.16);
}


.vbsp-panel-head {

    margin-bottom: 26px;
}


.vbsp-panel-head > span {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 9px;

    color: #72eb87;

    font-size: 10px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .9px;
}


.vbsp-panel-head h3 {

    margin: 0 0 12px;

    color: #fff;

    font-size: clamp(26px,3vw,38px);

    line-height: 1.13;

    font-weight: 850;
}


.vbsp-panel-head h3 strong {

    display: block;

    color: var(--vbsp-light);
}


.vbsp-panel-head p {

    margin: 0;

    color: rgba(255,255,255,.69);

    font-size: 12px;

    line-height: 1.75;
}


/* BUSINESS GRID */

.vbsp-business-grid {

    display: grid;

    grid-template-columns:
        repeat(2,1fr);

    gap: 12px;
}


.vbsp-business-card {

    min-height: 125px;

    padding: 15px;

    border-radius: 16px;

    display: flex;

    align-items: flex-start;

    gap: 11px;

    background:
        rgba(255,255,255,.07);

    border:
        1px solid rgba(255,255,255,.09);

    transition: .3s ease;
}


.vbsp-business-card:hover {

    transform: translateY(-4px);

    background:
        rgba(255,255,255,.11);

    border-color:
        rgba(105,231,128,.22);
}


.vbsp-business-icon {

    width: 44px;

    height: 44px;

    flex: 0 0 44px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #70ea85;

    background:
        rgba(87,220,109,.12);

    font-size: 18px;
}


.vbsp-business-card h4 {

    margin: 1px 0 5px;

    color: #fff;

    font-size: 12px;

    font-weight: 800;
}


.vbsp-business-card p {

    margin: 0;

    color: #aec0b2;

    font-size: 9px;

    line-height: 1.55;
}


/* BUSINESS BOTTOM */

.vbsp-business-bottom {

    margin-top: 18px;

    padding: 14px;

    border-radius: 15px;

    display: flex;

    align-items: center;

    gap: 11px;

    background:
        rgba(255,255,255,.08);

    border:
        1px solid rgba(255,255,255,.09);
}


.vbsp-business-bottom > span {

    width: 43px;

    height: 43px;

    flex: 0 0 43px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #6feb85;

    background:
        rgba(77,211,100,.12);

    font-size: 17px;
}


.vbsp-business-bottom > div {

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.vbsp-business-bottom strong {

    font-size: 11px;
}


.vbsp-business-bottom small {

    color: #a6baaa;

    font-size: 8px;
}


.vbsp-business-bottom > a {

    min-height: 38px;

    padding: 0 13px;

    flex-shrink: 0;

    border-radius: 9px;

    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: var(--vbsp-dark);

    background: #fff;

    text-decoration: none;

    font-size: 9px;

    font-weight: 800;
}


/* ============================================================
   RIGHT SOURCING PROCESS PANEL
============================================================ */

.vbsp-process-panel {

    padding: 34px;

    border-radius: 28px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(8,116,38,.06),
            transparent 25%
        ),
        #fff;

    border: 1px solid #e1eae3;

    box-shadow:
        0 16px 45px rgba(7,72,25,.08);
}


.vbsp-process-head {

    margin-bottom: 24px;
}


.vbsp-process-head > span {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 9px;

    color: var(--vbsp-green);

    font-size: 10px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .9px;
}


.vbsp-process-head h3 {

    margin: 0 0 12px;

    color: var(--vbsp-text);

    font-size: clamp(26px,3vw,38px);

    line-height: 1.13;

    font-weight: 850;
}


.vbsp-process-head h3 strong {

    display: block;

    color: var(--vbsp-green);
}


.vbsp-process-head p {

    margin: 0;

    color: var(--vbsp-muted);

    font-size: 12px;

    line-height: 1.75;
}


/* PROCESS LIST */

.vbsp-process-list {

    position: relative;

    display: flex;

    flex-direction: column;

    gap: 12px;
}


.vbsp-process-list::before {

    content: "";

    position: absolute;

    top: 40px;

    bottom: 40px;

    left: 28px;

    width: 1px;

    background:
        linear-gradient(
            180deg,
            #cce7d1,
            var(--vbsp-green),
            #cce7d1
        );
}


.vbsp-process-item {

    position: relative;

    min-height: 112px;

    padding: 15px 15px 15px 75px;

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            #f8fcf9,
            #f1f8f3
        );

    border: 1px solid #e3ebe5;

    transition: .3s ease;
}


.vbsp-process-item:hover {

    transform: translateX(5px);

    border-color: #b8dbbf;

    box-shadow:
        0 10px 25px rgba(6,76,25,.07);
}


.vbsp-process-number {

    position: absolute;

    left: 13px;

    top: 19px;

    z-index: 3;

    width: 31px;

    height: 31px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            var(--vbsp-green),
            var(--vbsp-dark)
        );

    font-size: 8px;

    font-weight: 850;
}


.vbsp-process-icon {

    position: absolute;

    left: 47px;

    top: 21px;

    width: 38px;

    height: 38px;

    border-radius: 11px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--vbsp-green);

    background: var(--vbsp-soft);

    font-size: 15px;
}


.vbsp-process-content {

    padding-left: 18px;
}


.vbsp-process-content > span {

    display: block;

    margin-bottom: 3px;

    color: var(--vbsp-green);

    font-size: 8px;

    font-weight: 800;

    text-transform: uppercase;
}


.vbsp-process-content h4 {

    margin: 0 0 5px;

    color: var(--vbsp-text);

    font-size: 12px;

    font-weight: 800;
}


.vbsp-process-content p {

    margin: 0;

    color: var(--vbsp-muted);

    font-size: 9px;

    line-height: 1.55;
}


/* PROCESS PROMISE */

.vbsp-process-promise {

    margin-top: 18px;

    padding: 14px;

    border-radius: 15px;

    display: flex;

    align-items: center;

    gap: 11px;

    background:
        linear-gradient(
            135deg,
            #eef8f0,
            #e8f6eb
        );

    border: 1px solid #d7e9da;
}


.vbsp-process-promise > span {

    width: 43px;

    height: 43px;

    flex: 0 0 43px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            var(--vbsp-green),
            var(--vbsp-dark)
        );

    font-size: 17px;
}


.vbsp-process-promise strong {

    display: block;

    margin-bottom: 3px;

    color: var(--vbsp-text);

    font-size: 11px;
}


.vbsp-process-promise p {

    margin: 0;

    color: var(--vbsp-muted);

    font-size: 8px;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width:1000px) {

    .vbsp-grid {

        grid-template-columns: 1fr;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width:767px) {

    .vbsp-section {

        padding: 52px 0;
    }


    .vbsp-container {

        width: 92%;
    }


    .vbsp-heading {

        margin-bottom: 30px;
    }


    .vbsp-heading h2 {

        font-size: 30px;
    }


    .vbsp-heading p {

        font-size: 12px;
    }


    .vbsp-business-panel,
    .vbsp-process-panel {

        padding: 23px;

        border-radius: 21px;
    }


    .vbsp-panel-head h3,
    .vbsp-process-head h3 {

        font-size: 26px;
    }


    .vbsp-business-grid {

        grid-template-columns: 1fr;
    }


    .vbsp-business-card {

        min-height: auto;
    }


    .vbsp-business-bottom {

        align-items: flex-start;

        flex-wrap: wrap;
    }


    .vbsp-business-bottom > a {

        width: 100%;

        justify-content: center;
    }

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width:520px) {

    .vbsp-process-item {

        padding-left: 68px;
    }


    .vbsp-process-icon {

        display: none;
    }


    .vbsp-process-content {

        padding-left: 0;
    }


    .vbsp-process-list::before {

        left: 28px;
    }

}

/* ============================================================
   VEGIICART - QUALITY ASSURANCE + GRADING V2
   LARGE FONT PREMIUM DESIGN
============================================================ */

.vq2-section {

    --vq2-green: #087426;
    --vq2-dark: #035d1c;
    --vq2-deep: #012d0e;
    --vq2-bright: #64e17c;
    --vq2-soft: #edf8ef;
    --vq2-text: #172019;
    --vq2-muted: #647168;

    position: relative;

    padding: 90px 0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(8,116,38,.08),
            transparent 25%
        ),
        radial-gradient(
            circle at 100% 100%,
            rgba(8,116,38,.06),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            #ffffff,
            #f4faf5
        );
}


.vq2-container {

    width: min(94%, 1450px);

    margin: 0 auto;
}


/* ============================================================
   MAIN HEADING
============================================================ */

.vq2-heading {

    max-width: 930px;

    margin: 0 auto 48px;

    text-align: center;
}


.vq2-kicker {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 12px;

    color: var(--vq2-green);

    font-size: 15px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1.3px;
}


.vq2-kicker i {

    font-size: 18px;
}


.vq2-heading h2 {

    margin: 0 0 16px;

    color: var(--vq2-text);

    font-size: clamp(38px, 4vw, 56px);

    line-height: 1.08;

    font-weight: 850;

    letter-spacing: -1px;
}


.vq2-heading h2 span {

    color: var(--vq2-green);
}


.vq2-heading p {

    max-width: 830px;

    margin: 0 auto;

    color: var(--vq2-muted);

    font-size: 17px;

    line-height: 1.8;
}


/* ============================================================
   QUALITY BANNER
============================================================ */

.vq2-quality-banner {

    display: grid;

    grid-template-columns:
        .9fr 1.1fr;

    min-height: 560px;

    overflow: hidden;

    border-radius: 32px;

    background: #ffffff;

    border: 1px solid #dde8df;

    box-shadow:
        0 20px 55px rgba(7,73,26,.10);
}


/* IMAGE */

.vq2-quality-image {

    position: relative;

    min-height: 560px;

    overflow: hidden;
}


.vq2-quality-image > img {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;
}


.vq2-image-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.05),
            rgba(2,68,22,.52)
        );
}


/* IMAGE BADGE */

.vq2-image-badge {

    position: absolute;

    z-index: 4;

    left: 28px;

    bottom: 28px;

    min-width: 290px;

    padding: 17px 20px;

    border-radius: 18px;

    display: flex;

    align-items: center;

    gap: 14px;

    color: #ffffff;

    background:
        rgba(3,91,28,.88);

    border:
        1px solid rgba(255,255,255,.16);

    backdrop-filter: blur(10px);
}


.vq2-image-badge > i {

    width: 48px;

    height: 48px;

    flex: 0 0 48px;

    border-radius: 13px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #76ed8b;

    background:
        rgba(255,255,255,.10);

    font-size: 23px;
}


.vq2-image-badge div {

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.vq2-image-badge strong {

    font-size: 16px;
}


.vq2-image-badge span {

    color: #c4dfca;

    font-size: 12px;
}


/* ============================================================
   QUALITY CONTENT
============================================================ */

.vq2-quality-content {

    padding: 48px;
}


.vq2-small-title {

    display: inline-block;

    margin-bottom: 9px;

    color: var(--vq2-green);

    font-size: 14px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1.1px;
}


.vq2-quality-content h3,
.vq2-grading-head h3 {

    margin: 0 0 16px;

    color: var(--vq2-text);

    font-size: clamp(31px,3vw,43px);

    line-height: 1.12;

    font-weight: 850;
}


.vq2-quality-content h3 strong,
.vq2-grading-head h3 strong {

    display: block;

    color: var(--vq2-green);
}


.vq2-quality-content > p {

    margin: 0 0 28px;

    color: var(--vq2-muted);

    font-size: 16px;

    line-height: 1.8;
}


/* ============================================================
   QUALITY POINTS
============================================================ */

.vq2-quality-points {

    display: grid;

    grid-template-columns:
        repeat(2,1fr);

    gap: 15px;
}


.vq2-quality-points > div {

    min-height: 150px;

    padding: 18px;

    border-radius: 18px;

    display: flex;

    align-items: flex-start;

    gap: 13px;

    background:
        linear-gradient(
            145deg,
            #f9fcfa,
            #eef8f0
        );

    border: 1px solid #dfe9e1;

    transition: .3s;
}


.vq2-quality-points > div:hover {

    transform: translateY(-5px);

    border-color: #b7dcbc;

    box-shadow:
        0 12px 28px rgba(7,76,26,.08);
}


.vq2-quality-points > div > span {

    width: 50px;

    height: 50px;

    flex: 0 0 50px;

    border-radius: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--vq2-green),
            var(--vq2-dark)
        );

    font-size: 20px;
}


.vq2-quality-points strong {

    display: block;

    margin: 2px 0 6px;

    color: var(--vq2-text);

    font-size: 16px;

    font-weight: 800;
}


.vq2-quality-points p {

    margin: 0;

    color: var(--vq2-muted);

    font-size: 13px;

    line-height: 1.65;
}


/* ============================================================
   GRADING AREA
============================================================ */

.vq2-grading-area {

    margin-top: 30px;

    padding: 42px;

    border-radius: 30px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(105,230,128,.13),
            transparent 27%
        ),
        linear-gradient(
            135deg,
            #011b0a,
            #034719,
            #087426
        );

    box-shadow:
        0 20px 55px rgba(3,76,23,.16);
}


.vq2-grading-head {

    margin-bottom: 28px;

    display: grid;

    grid-template-columns:
        1fr .9fr;

    align-items: end;

    gap: 35px;
}


.vq2-grading-head .vq2-small-title {

    color: #76ec8b;
}


.vq2-grading-head h3 {

    margin-bottom: 0;

    color: #ffffff;
}


.vq2-grading-head h3 strong {

    color: #70e987;
}


.vq2-grading-head > p {

    margin: 0;

    color: rgba(255,255,255,.69);

    font-size: 15px;

    line-height: 1.8;
}


/* ============================================================
   GRADING GRID
============================================================ */

.vq2-grading-grid {

    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 15px;
}


.vq2-grade-card {

    position: relative;

    min-height: 305px;

    padding: 25px;

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.09),
            rgba(255,255,255,.045)
        );

    border:
        1px solid rgba(255,255,255,.11);

    transition: .35s;
}


.vq2-grade-card:hover {

    transform: translateY(-7px);

    background:
        rgba(255,255,255,.11);

    border-color:
        rgba(104,231,128,.30);
}


.vq2-grade-number {

    position: absolute;

    top: 18px;

    right: 20px;

    color: rgba(255,255,255,.12);

    font-size: 36px;

    font-weight: 900;
}


.vq2-grade-icon {

    width: 58px;

    height: 58px;

    margin-bottom: 22px;

    border-radius: 16px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #72ec88;

    background:
        rgba(82,211,105,.12);

    border:
        1px solid rgba(107,231,128,.12);

    font-size: 24px;
}


.vq2-grade-card h4 {

    margin: 0 0 10px;

    color: #ffffff;

    font-size: 19px;

    line-height: 1.3;

    font-weight: 800;
}


.vq2-grade-card p {

    margin: 0 0 22px;

    color: #b1c0b5;

    font-size: 13px;

    line-height: 1.7;
}


.vq2-grade-status {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 7px 10px;

    border-radius: 50px;

    color: #77eb8b;

    background:
        rgba(89,215,111,.10);

    font-size: 11px;

    font-weight: 750;
}


/* ============================================================
   BOTTOM PROMISE
============================================================ */

.vq2-bottom {

    margin-top: 28px;

    padding: 19px 22px;

    border-radius: 19px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    background: #ffffff;

    border: 1px solid #dfe9e1;

    box-shadow:
        0 12px 35px rgba(7,72,25,.07);
}


.vq2-bottom > div {

    display: flex;

    align-items: center;

    gap: 14px;
}


.vq2-bottom-icon {

    width: 52px;

    height: 52px;

    flex: 0 0 52px;

    border-radius: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--vq2-green),
            var(--vq2-dark)
        );

    font-size: 21px;
}


.vq2-bottom strong {

    display: block;

    margin-bottom: 4px;

    color: var(--vq2-text);

    font-size: 16px;
}


.vq2-bottom p {

    margin: 0;

    color: var(--vq2-muted);

    font-size: 13px;
}


.vq2-bottom > a {

    min-height: 48px;

    padding: 0 18px;

    flex-shrink: 0;

    border-radius: 11px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--vq2-green),
            var(--vq2-dark)
        );

    text-decoration: none;

    font-size: 13px;

    font-weight: 800;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1050px) {

    .vq2-quality-banner {

        grid-template-columns: 1fr;
    }


    .vq2-quality-image {

        min-height: 430px;
    }


    .vq2-grading-head {

        grid-template-columns: 1fr;

        gap: 15px;
    }


    .vq2-grading-grid {

        grid-template-columns:
            repeat(2,1fr);
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767px) {

    .vq2-section {

        padding: 55px 0;
    }


    .vq2-container {

        width: 92%;
    }


    .vq2-heading {

        margin-bottom: 32px;
    }


    .vq2-kicker {

        font-size: 12px;
    }


    .vq2-heading h2 {

        font-size: 32px;
    }


    .vq2-heading p {

        font-size: 14px;
    }


    .vq2-quality-banner {

        border-radius: 22px;
    }


    .vq2-quality-image {

        min-height: 330px;
    }


    .vq2-quality-content {

        padding: 28px 22px;
    }


    .vq2-quality-content h3,
    .vq2-grading-head h3 {

        font-size: 28px;
    }


    .vq2-quality-content > p {

        font-size: 14px;
    }


    .vq2-quality-points {

        grid-template-columns: 1fr;
    }


    .vq2-quality-points > div {

        min-height: auto;
    }


    .vq2-grading-area {

        padding: 28px 22px;

        border-radius: 22px;
    }


    .vq2-grading-head > p {

        font-size: 13px;
    }


    .vq2-grading-grid {

        grid-template-columns: 1fr;
    }


    .vq2-grade-card {

        min-height: auto;
    }


    .vq2-bottom {

        align-items: flex-start;

        flex-direction: column;
    }


    .vq2-bottom > a {

        width: 100%;
    }

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 480px) {

    .vq2-heading h2 {

        font-size: 29px;
    }


    .vq2-quality-image {

        min-height: 290px;
    }


    .vq2-image-badge {

        left: 15px;

        right: 15px;

        bottom: 15px;

        min-width: 0;
    }


    .vq2-quality-points strong {

        font-size: 15px;
    }


    .vq2-quality-points p {

        font-size: 12px;
    }


    .vq2-grade-card h4 {

        font-size: 18px;
    }


    .vq2-grade-card p {

        font-size: 13px;
    }

}

/* ============================================================
   VEGIICART
   WHOLESALE SUPPLY NETWORK + DELIVERY COVERAGE
============================================================ */

.vwsd-section {

    --vwsd-green: #087426;
    --vwsd-dark: #035d1c;
    --vwsd-deep: #012d0e;
    --vwsd-bright: #66e37d;
    --vwsd-soft: #edf8ef;
    --vwsd-text: #172019;
    --vwsd-muted: #647168;

    position: relative;

    padding: 90px 0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 0% 10%,
            rgba(8,116,38,.08),
            transparent 24%
        ),
        radial-gradient(
            circle at 100% 90%,
            rgba(8,116,38,.06),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            #ffffff,
            #f4faf5
        );
}


.vwsd-container {

    width: min(94%,1450px);

    margin: 0 auto;
}


/* ============================================================
   HEADING
============================================================ */

.vwsd-heading {

    max-width: 900px;

    margin: 0 auto 48px;

    text-align: center;
}


.vwsd-kicker {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 11px;

    color: var(--vwsd-green);

    font-size: 15px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1.2px;
}


.vwsd-heading h2 {

    margin: 0 0 15px;

    color: var(--vwsd-text);

    font-size: clamp(38px,4vw,55px);

    line-height: 1.08;

    font-weight: 850;

    letter-spacing: -1px;
}


.vwsd-heading h2 span {

    color: var(--vwsd-green);
}


.vwsd-heading p {

    max-width: 820px;

    margin: 0 auto;

    color: var(--vwsd-muted);

    font-size: 17px;

    line-height: 1.8;
}


/* ============================================================
   GRID
============================================================ */

.vwsd-grid {

    display: grid;

    grid-template-columns:
        1.12fr .88fr;

    gap: 24px;

    align-items: stretch;
}


/* ============================================================
   WHOLESALE PANEL
============================================================ */

.vwsd-network-panel {

    position: relative;

    padding: 38px;

    border-radius: 30px;

    color: #ffffff;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 95% 5%,
            rgba(105,231,128,.18),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #011b0a,
            #034819,
            #087426
        );

    box-shadow:
        0 22px 55px rgba(3,77,24,.18);
}


.vwsd-panel-top {

    margin-bottom: 30px;

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 25px;
}


.vwsd-panel-top > div:first-child {

    max-width: 650px;
}


.vwsd-panel-label {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 10px;

    color: #72eb88;

    font-size: 14px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1px;
}


.vwsd-panel-top h3,
.vwsd-delivery-head h3 {

    margin: 0 0 14px;

    font-size: clamp(29px,3vw,41px);

    line-height: 1.12;

    font-weight: 850;
}


.vwsd-panel-top h3 {

    color: #ffffff;
}


.vwsd-panel-top h3 strong {

    display: block;

    color: #6fea85;
}


.vwsd-panel-top p {

    margin: 0;

    color: rgba(255,255,255,.70);

    font-size: 15px;

    line-height: 1.8;
}


/* NETWORK BADGE */

.vwsd-network-badge {

    width: 120px;

    min-width: 120px;

    height: 120px;

    border-radius: 24px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    background:
        rgba(255,255,255,.10);

    border:
        1px solid rgba(255,255,255,.13);

    backdrop-filter: blur(10px);
}


.vwsd-network-badge i {

    margin-bottom: 7px;

    color: #70eb86;

    font-size: 28px;
}


.vwsd-network-badge strong {

    color: #ffffff;

    font-size: 15px;
}


.vwsd-network-badge span {

    margin-top: 2px;

    color: #afd0b6;

    font-size: 10px;
}


/* ============================================================
   NETWORK FLOW
============================================================ */

.vwsd-network-flow {

    display: grid;

    grid-template-columns:
        1fr auto 1fr auto 1fr auto 1fr;

    align-items: center;

    gap: 10px;

    margin-bottom: 24px;
}


.vwsd-flow-item {

    min-height: 180px;

    padding: 20px 16px;

    border-radius: 18px;

    text-align: center;

    background:
        rgba(255,255,255,.075);

    border:
        1px solid rgba(255,255,255,.09);

    transition: .3s ease;
}


.vwsd-flow-item:hover {

    transform: translateY(-5px);

    background:
        rgba(255,255,255,.11);

    border-color:
        rgba(105,231,128,.25);
}


.vwsd-flow-icon {

    width: 54px;

    height: 54px;

    margin: 0 auto 12px;

    border-radius: 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #70ea86;

    background:
        rgba(80,213,103,.13);

    font-size: 22px;
}


.vwsd-flow-item small {

    display: block;

    margin-bottom: 4px;

    color: #6ee984;

    font-size: 10px;

    font-weight: 800;
}


.vwsd-flow-item h4 {

    margin: 0 0 7px;

    color: #ffffff;

    font-size: 15px;

    line-height: 1.3;

    font-weight: 800;
}


.vwsd-flow-item p {

    margin: 0;

    color: #aec0b2;

    font-size: 11px;

    line-height: 1.55;
}


.vwsd-flow-line {

    color: rgba(113,235,135,.60);

    font-size: 15px;
}


/* ============================================================
   BENEFITS
============================================================ */

.vwsd-benefits {

    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 11px;

    margin-bottom: 24px;
}


.vwsd-benefits > div {

    min-height: 95px;

    padding: 14px;

    border-radius: 15px;

    display: flex;

    align-items: center;

    gap: 11px;

    background:
        rgba(255,255,255,.065);

    border:
        1px solid rgba(255,255,255,.08);
}


.vwsd-benefits > div > i {

    font-size: 21px;

    color: #6fea85;
}


.vwsd-benefits span {

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.vwsd-benefits strong {

    color: #ffffff;

    font-size: 13px;
}


.vwsd-benefits small {

    color: #acc0b0;

    font-size: 10px;

    line-height: 1.4;
}


.vwsd-network-btn {

    min-height: 50px;

    padding: 0 20px;

    border-radius: 12px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    color: var(--vwsd-dark);

    background: #ffffff;

    text-decoration: none;

    font-size: 13px;

    font-weight: 800;
}


/* ============================================================
   DELIVERY PANEL
============================================================ */

.vwsd-delivery-panel {

    padding: 38px;

    border-radius: 30px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(8,116,38,.07),
            transparent 27%
        ),
        #ffffff;

    border: 1px solid #dfe9e1;

    box-shadow:
        0 18px 48px rgba(7,72,25,.09);
}


.vwsd-delivery-head h3 {

    color: var(--vwsd-text);
}


.vwsd-delivery-head h3 strong {

    display: block;

    color: var(--vwsd-green);
}


.vwsd-delivery-head p {

    margin: 0;

    color: var(--vwsd-muted);

    font-size: 15px;

    line-height: 1.8;
}


/* ============================================================
   MAP
============================================================ */

.vwsd-map {

    position: relative;

    width: 340px;

    height: 340px;

    max-width: 100%;

    margin: 30px auto;

    display: flex;

    align-items: center;

    justify-content: center;
}


.vwsd-map-ring {

    position: absolute;

    border-radius: 50%;

    border:
        1px solid rgba(8,116,38,.14);
}


.vwsd-map-ring.ring-one {

    width: 145px;

    height: 145px;
}


.vwsd-map-ring.ring-two {

    width: 235px;

    height: 235px;
}


.vwsd-map-ring.ring-three {

    width: 325px;

    height: 325px;
}


.vwsd-map-center {

    position: relative;

    z-index: 5;

    width: 120px;

    height: 120px;

    border-radius: 50%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--vwsd-green),
            var(--vwsd-dark)
        );

    box-shadow:
        0 18px 40px rgba(5,100,31,.24);
}


.vwsd-map-center i {

    margin-bottom: 7px;

    font-size: 31px;
}


.vwsd-map-center strong {

    font-size: 14px;
}


.vwsd-map-center span {

    margin-top: 2px;

    color: #c3e1c9;

    font-size: 9px;
}


/* LOCATIONS */

.vwsd-location {

    position: absolute;

    z-index: 4;

    width: 43px;

    height: 43px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--vwsd-green);

    background: #ffffff;

    border: 1px solid #dbe8de;

    box-shadow:
        0 8px 20px rgba(7,72,25,.10);

    font-size: 17px;
}


.location-one {

    top: 20px;

    left: 125px;
}


.location-two {

    right: 15px;

    top: 135px;
}


.location-three {

    left: 25px;

    bottom: 55px;
}


.location-four {

    right: 70px;

    bottom: 20px;
}


/* ============================================================
   DELIVERY POINTS
============================================================ */

.vwsd-delivery-points {

    display: grid;

    grid-template-columns:
        repeat(2,1fr);

    gap: 11px;

    margin-bottom: 18px;
}


.vwsd-delivery-points > div {

    padding: 14px;

    border-radius: 15px;

    display: flex;

    align-items: center;

    gap: 11px;

    background: #f4faf5;

    border: 1px solid #e1eae3;
}


.vwsd-delivery-points > div > i {

    width: 43px;

    height: 43px;

    flex: 0 0 43px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--vwsd-green);

    background: #e8f6eb;

    font-size: 18px;
}


.vwsd-delivery-points span {

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.vwsd-delivery-points strong {

    color: var(--vwsd-text);

    font-size: 13px;
}


.vwsd-delivery-points small {

    color: var(--vwsd-muted);

    font-size: 10px;
}


/* ============================================================
   PINCODE
============================================================ */

.vwsd-pincode {

    padding: 7px;

    border-radius: 16px;

    display: flex;

    align-items: center;

    gap: 8px;

    background: #f3f8f4;

    border: 1px solid #dce8de;
}


.vwsd-pincode > div {

    flex: 1;

    min-width: 0;

    min-height: 50px;

    padding-left: 13px;

    display: flex;

    align-items: center;

    gap: 9px;
}


.vwsd-pincode > div > i {

    color: var(--vwsd-green);

    font-size: 18px;
}


.vwsd-pincode input {

    width: 100%;

    min-width: 0;

    border: none;

    outline: none;

    background: transparent;

    color: var(--vwsd-text);

    font-size: 14px;
}


.vwsd-pincode button {

    min-height: 50px;

    padding: 0 17px;

    border: none;

    border-radius: 11px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--vwsd-green),
            var(--vwsd-dark)
        );

    cursor: pointer;

    font-size: 12px;

    font-weight: 800;
}


.vwsd-delivery-note {

    display: flex;

    align-items: flex-start;

    gap: 7px;

    margin-top: 10px;

    color: var(--vwsd-muted);

    font-size: 11px;

    line-height: 1.5;
}


.vwsd-delivery-note i {

    margin-top: 2px;

    color: var(--vwsd-green);
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1100px) {

    .vwsd-grid {

        grid-template-columns: 1fr;
    }


    .vwsd-network-flow {

        grid-template-columns:
            repeat(4,1fr);
    }


    .vwsd-flow-line {

        display: none;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767px) {

    .vwsd-section {

        padding: 55px 0;
    }


    .vwsd-container {

        width: 92%;
    }


    .vwsd-heading {

        margin-bottom: 32px;
    }


    .vwsd-kicker {

        font-size: 12px;
    }


    .vwsd-heading h2 {

        font-size: 32px;
    }


    .vwsd-heading p {

        font-size: 14px;
    }


    .vwsd-network-panel,
    .vwsd-delivery-panel {

        padding: 24px;

        border-radius: 22px;
    }


    .vwsd-panel-top {

        display: block;
    }


    .vwsd-panel-top h3,
    .vwsd-delivery-head h3 {

        font-size: 28px;
    }


    .vwsd-panel-top p,
    .vwsd-delivery-head p {

        font-size: 14px;
    }


    .vwsd-network-badge {

        width: 100%;

        height: auto;

        min-width: 0;

        margin-top: 20px;

        padding: 16px;

        border-radius: 15px;
    }


    .vwsd-network-flow {

        grid-template-columns:
            repeat(2,1fr);

        gap: 11px;
    }


    .vwsd-flow-item {

        min-height: 170px;
    }


    .vwsd-benefits {

        grid-template-columns: 1fr;
    }


    .vwsd-network-btn {

        width: 100%;
    }


    .vwsd-map {

        width: 280px;

        height: 280px;
    }


    .vwsd-map-ring.ring-three {

        width: 270px;

        height: 270px;
    }


    .vwsd-map-ring.ring-two {

        width: 200px;

        height: 200px;
    }


    .vwsd-map-ring.ring-one {

        width: 130px;

        height: 130px;
    }


    .vwsd-map-center {

        width: 105px;

        height: 105px;
    }


    .location-one {

        top: 10px;

        left: 103px;
    }


    .location-two {

        right: 7px;

        top: 110px;
    }


    .location-three {

        left: 15px;

        bottom: 45px;
    }


    .location-four {

        right: 55px;

        bottom: 10px;
    }


    .vwsd-delivery-points {

        grid-template-columns: 1fr;
    }


    .vwsd-pincode {

        flex-wrap: wrap;
    }


    .vwsd-pincode > div {

        width: 100%;
    }


    .vwsd-pincode button {

        width: 100%;
    }

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 480px) {

    .vwsd-heading h2 {

        font-size: 29px;
    }


    .vwsd-network-panel,
    .vwsd-delivery-panel {

        padding: 20px;
    }


    .vwsd-network-flow {

        grid-template-columns: 1fr;
    }


    .vwsd-flow-item {

        min-height: auto;

        text-align: left;

        display: flex;

        align-items: flex-start;

        gap: 13px;
    }


    .vwsd-flow-icon {

        width: 48px;

        height: 48px;

        min-width: 48px;

        margin: 0;

        font-size: 19px;
    }


    .vwsd-map {

        width: 245px;

        height: 245px;
    }


    .vwsd-map-ring.ring-three {

        width: 235px;

        height: 235px;
    }


    .vwsd-map-ring.ring-two {

        width: 175px;

        height: 175px;
    }


    .vwsd-map-ring.ring-one {

        width: 115px;

        height: 115px;
    }


    .vwsd-map-center {

        width: 95px;

        height: 95px;
    }

}

/* ============================================================
   VEGIICART - CONTACT / REGISTRATION CTA
============================================================ */

.vcta2-section {

    --vcta-green: #087426;
    --vcta-dark: #035d1c;
    --vcta-deep: #011b0a;
    --vcta-bright: #68e780;
    --vcta-soft: #edf8ef;
    --vcta-text: #172019;
    --vcta-muted: #657169;

    position: relative;

    padding: 75px 0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 5% 10%,
            rgba(8,116,38,.07),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            #ffffff,
            #f4faf5
        );
}


.vcta2-container {

    width: min(94%,1450px);

    margin: 0 auto;
}


/* ============================================================
   WRAPPER
============================================================ */

.vcta2-wrap {

    position: relative;

    overflow: hidden;

    padding: 45px;

    border-radius: 32px;

    display: grid;

    grid-template-columns:
        1.15fr .85fr;

    gap: 45px;

    align-items: stretch;

    background:
        radial-gradient(
            circle at 0% 100%,
            rgba(94,230,117,.14),
            transparent 27%
        ),
        linear-gradient(
            135deg,
            #011a0a,
            #034517 52%,
            #087426
        );

    box-shadow:
        0 24px 60px rgba(3,76,23,.18);
}


/* ============================================================
   LEFT SIDE
============================================================ */

.vcta2-contact {

    padding: 15px 5px;

    display: flex;

    flex-direction: column;

    justify-content: center;
}


.vcta2-kicker {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    width: fit-content;

    margin-bottom: 12px;

    color: #70eb86;

    font-size: 14px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1px;
}


.vcta2-kicker i {

    font-size: 17px;
}


.vcta2-contact h2 {

    max-width: 700px;

    margin: 0 0 17px;

    color: #ffffff;

    font-size: clamp(36px,4vw,52px);

    line-height: 1.08;

    font-weight: 850;
}


.vcta2-contact h2 span {

    display: block;

    color: var(--vcta-bright);
}


.vcta2-contact > p {

    max-width: 700px;

    margin: 0 0 27px;

    color: rgba(255,255,255,.72);

    font-size: 16px;

    line-height: 1.8;
}


/* ============================================================
   CONTACT CARDS
============================================================ */

.vcta2-contact-grid {

    display: grid;

    grid-template-columns:
        repeat(2,1fr);

    gap: 13px;

    margin-bottom: 22px;
}


.vcta2-contact-card {

    min-height: 90px;

    padding: 15px;

    border-radius: 16px;

    display: flex;

    align-items: center;

    gap: 13px;

    text-decoration: none;

    background:
        rgba(255,255,255,.08);

    border:
        1px solid rgba(255,255,255,.10);

    transition: .3s;
}


.vcta2-contact-card:hover {

    transform: translateY(-4px);

    background:
        rgba(255,255,255,.12);

    border-color:
        rgba(105,231,128,.28);
}


.vcta2-contact-card > span {

    width: 48px;

    height: 48px;

    flex: 0 0 48px;

    border-radius: 13px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #6fea85;

    background:
        rgba(81,213,104,.12);

    font-size: 20px;
}


.vcta2-contact-card div {

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.vcta2-contact-card small {

    color: #9fbaa5;

    font-size: 11px;
}


.vcta2-contact-card strong {

    color: #ffffff;

    font-size: 14px;

    word-break: break-word;
}


/* ============================================================
   SUPPORT LINE
============================================================ */

.vcta2-support-line {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 25px;
}


.vcta2-support-line span {

    padding: 8px 11px;

    border-radius: 50px;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    color: #d2e7d6;

    background:
        rgba(255,255,255,.065);

    border:
        1px solid rgba(255,255,255,.07);

    font-size: 11px;
}


.vcta2-support-line i {

    color: #6fe985;
}


/* ============================================================
   CONTACT BUTTON
============================================================ */

.vcta2-contact-btn {

    width: fit-content;

    min-height: 50px;

    padding: 0 20px;

    border-radius: 12px;

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: var(--vcta-dark);

    background: #ffffff;

    text-decoration: none;

    font-size: 13px;

    font-weight: 800;

    transition: .3s;
}


.vcta2-contact-btn:hover {

    color: #ffffff;

    background: var(--vcta-green);

    transform: translateY(-2px);
}


/* ============================================================
   RIGHT REGISTER PANEL
============================================================ */

.vcta2-register {

    position: relative;

    padding: 32px;

    border-radius: 25px;

    background:
        rgba(255,255,255,.96);

    box-shadow:
        0 18px 45px rgba(0,0,0,.15);
}


.vcta2-register-icon {

    width: 68px;

    height: 68px;

    margin-bottom: 18px;

    border-radius: 19px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--vcta-green),
            var(--vcta-dark)
        );

    box-shadow:
        0 12px 28px rgba(6,101,32,.20);

    font-size: 27px;
}


.vcta2-register-label {

    display: block;

    margin-bottom: 8px;

    color: var(--vcta-green);

    font-size: 12px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .9px;
}


.vcta2-register h3 {

    margin: 0 0 13px;

    color: var(--vcta-text);

    font-size: clamp(26px,3vw,37px);

    line-height: 1.14;

    font-weight: 850;
}


.vcta2-register h3 strong {

    display: block;

    color: var(--vcta-green);
}


.vcta2-register > p {

    margin: 0 0 21px;

    color: var(--vcta-muted);

    font-size: 14px;

    line-height: 1.75;
}


/* ============================================================
   BENEFITS
============================================================ */

.vcta2-benefits {

    display: grid;

    grid-template-columns:
        repeat(2,1fr);

    gap: 11px;

    margin-bottom: 23px;
}


.vcta2-benefits > div {

    min-height: 92px;

    padding: 13px;

    border-radius: 14px;

    display: flex;

    align-items: center;

    gap: 10px;

    background:
        linear-gradient(
            145deg,
            #f8fcf9,
            #edf8ef
        );

    border: 1px solid #e0e9e2;
}


.vcta2-benefits > div > i {

    width: 39px;

    height: 39px;

    flex: 0 0 39px;

    border-radius: 11px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--vcta-green);

    background: #e3f4e7;

    font-size: 16px;
}


.vcta2-benefits span {

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.vcta2-benefits strong {

    color: var(--vcta-text);

    font-size: 12px;
}


.vcta2-benefits small {

    color: var(--vcta-muted);

    font-size: 9px;

    line-height: 1.4;
}


/* ============================================================
   REGISTER BUTTON
============================================================ */

.vcta2-register-btn {

    width: 100%;

    min-height: 53px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--vcta-green),
            var(--vcta-dark)
        );

    text-decoration: none;

    font-size: 13px;

    font-weight: 800;

    box-shadow:
        0 10px 25px rgba(7,102,32,.17);

    transition: .3s;
}


.vcta2-register-btn:hover {

    color: #ffffff;

    transform: translateY(-3px);
}


/* ============================================================
   LOGIN
============================================================ */

.vcta2-login {

    margin-top: 15px;

    text-align: center;

    color: var(--vcta-muted);

    font-size: 11px;
}


.vcta2-login a {

    margin-left: 4px;

    color: var(--vcta-green);

    text-decoration: none;

    font-weight: 800;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 950px) {

    .vcta2-wrap {

        grid-template-columns: 1fr;

        gap: 35px;
    }


    .vcta2-register {

        max-width: 650px;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767px) {

    .vcta2-section {

        padding: 52px 0;
    }


    .vcta2-container {

        width: 92%;
    }


    .vcta2-wrap {

        padding: 28px 22px;

        border-radius: 23px;
    }


    .vcta2-kicker {

        font-size: 12px;
    }


    .vcta2-contact h2 {

        font-size: 31px;
    }


    .vcta2-contact > p {

        font-size: 14px;
    }


    .vcta2-contact-grid {

        grid-template-columns: 1fr;
    }


    .vcta2-support-line {

        align-items: flex-start;

        flex-direction: column;
    }


    .vcta2-contact-btn {

        width: 100%;

        justify-content: center;
    }


    .vcta2-register {

        padding: 24px 20px;

        border-radius: 20px;
    }


    .vcta2-register h3 {

        font-size: 27px;
    }


    .vcta2-benefits {

        grid-template-columns: 1fr;
    }

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 480px) {

    .vcta2-contact h2 {

        font-size: 29px;
    }


    .vcta2-register-icon {

        width: 58px;

        height: 58px;

        font-size: 23px;
    }


    .vcta2-contact-card strong {

        font-size: 13px;
    }

}

/* ============================================================
   VEGIICART FINAL TYPOGRAPHY OVERRIDE
   HOME PAGE + ABOUT PAGE

   IMPORTANT:
   ADD THIS AT THE ABSOLUTE END OF style.css
============================================================ */


/* ============================================================
   GLOBAL SECTION PARAGRAPHS
============================================================ */

.vcat-section p,
.vbest-section p,
.vfresh-section p,
.vsr-section p,
.vrc-section p,
.vbulk-section p,
.vwhy-section p,
.vbiz-section p,
.vqf-section p,
.vdc-section p,
.vtest-section p,
.vreg-section p,
.vintro-section p,
.vstory-section p,
.vvm-section p,
.vbsp-section p,
.vq2-section p,
.vwsd-section p,
.vcta2-section p {
    font-size: 16px !important;
    line-height: 1.75 !important;
}


/* ============================================================
   MAIN SECTION TITLES
============================================================ */

.vcat-heading h2,
.vbest-heading h2,
.vfresh-heading h2,
.vsr-heading h2,
.vrc-heading h2,
.vbulk-heading h2,
.vwhy-content h2,
.vbiz-heading h2,
.vquality-heading h2,
.vqf-content h2,
.vdc-content h2,
.vtest-heading h2,
.vreg-content h2,
.vintro-content h2,
.vstory-heading h2,
.vvm-heading h2,
.vbsp-heading h2,
.vq2-heading h2,
.vwsd-heading h2,
.vcta2-contact h2 {
    font-size: clamp(38px, 4vw, 54px) !important;
    line-height: 1.12 !important;
    font-weight: 800 !important;
}


/* ============================================================
   SECONDARY / PANEL HEADINGS
============================================================ */

.vcat-content h3,
.vbest-content h3,
.vfresh-content h3,
.vsr-content h3,
.vrc-box-head h3,
.vrc-continue-content h3,
.vrc-viewed-heading h3,
.vbulk-card h3,
.vwhy-feature h3,
.vbiz-card h3,
.vqf-step h3,
.vdc-features strong,
.vtest-user strong,
.vreg-action h3,
.vintro-points strong,
.vstory-item h3,
.vstory-image-content h3,
.vvm-card h3,
.vbsp-panel-head h3,
.vbsp-process-head h3,
.vq2-quality-content h3,
.vq2-grading-head h3,
.vwsd-panel-top h3,
.vwsd-delivery-head h3,
.vcta2-register h3 {
    font-size: 20px !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
}


/* ============================================================
   CARD TITLES
============================================================ */

.vbulk-card h3,
.vbiz-card h3,
.vq2-grade-card h4,
.vwsd-flow-item h4,
.vcta2-benefits strong,
.vrc-viewed-content h4,
.vrc-order-content h4,
.vquality-check h4,
.vgrading-content h4,
.vbsp-business-card h4,
.vbsp-process-content h4,
.vintro-points strong {
    font-size: 17px !important;
    line-height: 1.4 !important;
}


/* ============================================================
   SUBTITLES / EYEBROWS
============================================================ */

.vcat-subtitle,
.vbest-subtitle,
.vfresh-subtitle,
.vsr-subtitle,
.vrc-eyebrow,
.vbulk-subtitle,
.vwhy-subtitle,
.vbiz-subtitle,
.vquality-subtitle,
.vqf-subtitle,
.vdc-subtitle,
.vtest-subtitle,
.vreg-subtitle,
.vintro-subtitle,
.vstory-subtitle,
.vvm-subtitle,
.vbsp-subtitle,
.vq2-kicker,
.vwsd-kicker,
.vcta2-kicker {
    font-size: 14px !important;
    line-height: 1.5 !important;
    font-weight: 800 !important;
}


/* ============================================================
   SMALL CATEGORY / PRODUCT LABELS
============================================================ */

.vbest-category,
.vfresh-category,
.vsr-category,
.vrc-order-content small,
.vrc-viewed-content > span,
.vbulk-plan,
.vquality-assurance-top > div:last-child > span,
.vgrading-content > span,
.vbsp-panel-head > span,
.vbsp-process-head > span,
.vbsp-process-content > span,
.vq2-small-title,
.vcta2-register-label,
.vstory-year,
.vintro-subtitle {
    font-size: 12px !important;
    line-height: 1.5 !important;
}


/* ============================================================
   PRODUCT PRICES
============================================================ */

.vbest-price strong,
.vfresh-price strong,
.vsr-price strong,
.vrc-viewed-content strong {
    font-size: 22px !important;
    line-height: 1.2 !important;
}


.vbest-price span,
.vfresh-price span,
.vsr-price span,
.vbest-price del,
.vfresh-price del,
.vsr-price del {
    font-size: 13px !important;
}


/* ============================================================
   PRODUCT RATINGS
============================================================ */

.vbest-rating > div,
.vfresh-rating > div,
.vsr-meta span,
.vtest-stars {
    font-size: 13px !important;
}


.vbest-rating > span,
.vfresh-rating > span {
    font-size: 12px !important;
}


/* ============================================================
   BUTTON TEXT
============================================================ */

.vcat-view-all,
.vbest-view-all,
.vfresh-view-all,
.vsr-view-all,
.vrc-all-btn,
.vrc-reorder-btn,
.vrc-shop-btn,
.vbulk-top-btn,
.vbulk-card-btn,
.vbulk-bottom > a,
.vwhy-btn,
.vbiz-card a,
.vbiz-cta > a,
.vdc-pincode button,
.vreg-main-btn,
.vintro-btn,
.vvm-bottom > a,
.vbsp-business-bottom > a,
.vq2-bottom > a,
.vwsd-network-btn,
.vwsd-pincode button,
.vcta2-contact-btn,
.vcta2-register-btn {
    font-size: 14px !important;
    line-height: 1.4 !important;
}


/* ============================================================
   BEST SELLING / FRESH ARRIVALS PRODUCT CARD TEXT
============================================================ */

.vbest-content h3,
.vfresh-content h3,
.vsr-content h3 {
    font-size: 18px !important;
}


.vbest-category,
.vfresh-category,
.vsr-category {
    font-size: 12px !important;
}


/* ============================================================
   SHOP BY CATEGORY
============================================================ */

.vcat-content h3 {
    font-size: 18px !important;
}


.vcat-content p {
    font-size: 14px !important;
}


.vcat-count {
    font-size: 11px !important;
}


/* ============================================================
   RECENTLY ORDERED / CONTINUE SHOPPING
============================================================ */

.vrc-box-head > a {
    font-size: 13px !important;
}


.vrc-order-content small {
    font-size: 11px !important;
}


.vrc-order-content h4 {
    font-size: 17px !important;
}


.vrc-order-meta span {
    font-size: 13px !important;
}


.vrc-order-meta strong {
    font-size: 15px !important;
}


.vrc-viewed-content > span {
    font-size: 11px !important;
}


.vrc-viewed-content h4 {
    font-size: 16px !important;
}


.vrc-viewed-content strong {
    font-size: 18px !important;
}


.vrc-viewed-content small {
    font-size: 12px !important;
}


/* ============================================================
   BULK PURCHASE OFFERS
============================================================ */

.vbulk-plan {
    font-size: 13px !important;
}


.vbulk-card > p {
    font-size: 15px !important;
    line-height: 1.7 !important;
}


.vbulk-saving span {
    font-size: 13px !important;
}


.vbulk-saving strong {
    font-size: 32px !important;
}


.vbulk-benefits li {
    font-size: 14px !important;
}


.vbulk-bottom strong {
    font-size: 16px !important;
}


.vbulk-bottom p {
    font-size: 14px !important;
}


/* ============================================================
   WHY CHOOSE VEGIICART
============================================================ */

.vwhy-intro {
    font-size: 16px !important;
}


.vwhy-feature h3 {
    font-size: 17px !important;
}


.vwhy-feature p {
    font-size: 14px !important;
}


.vwhy-small-content strong {
    font-size: 14px !important;
}


.vwhy-small-content small {
    font-size: 12px !important;
}


/* ============================================================
   BUSINESSES WE SERVE
============================================================ */

.vbiz-card h3 {
    font-size: 20px !important;
}


.vbiz-card p {
    font-size: 15px !important;
}


.vbiz-card a {
    font-size: 13px !important;
}


.vbiz-cta strong {
    font-size: 16px !important;
}


.vbiz-cta p {
    font-size: 14px !important;
}


/* ============================================================
   QUALITY / FRESHNESS
============================================================ */

.vqf-intro {
    font-size: 16px !important;
}


.vqf-step h3 {
    font-size: 17px !important;
}


.vqf-step p {
    font-size: 14px !important;
}


.vqf-floating-card strong {
    font-size: 15px !important;
}


.vqf-floating-card small {
    font-size: 12px !important;
}


.vqf-bottom strong {
    font-size: 14px !important;
}


.vqf-bottom small {
    font-size: 12px !important;
}


/* ============================================================
   DELIVERY COVERAGE
============================================================ */

.vdc-content > p {
    font-size: 16px !important;
}


.vdc-features strong {
    font-size: 15px !important;
}


.vdc-features small {
    font-size: 12px !important;
}


.vdc-pincode input {
    font-size: 15px !important;
}


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


.vdc-status strong {
    font-size: 14px !important;
}


.vdc-status small {
    font-size: 12px !important;
}


/* ============================================================
   TESTIMONIALS
============================================================ */

.vtest-card > p {
    font-size: 16px !important;
    line-height: 1.8 !important;
}


.vtest-user strong {
    font-size: 15px !important;
}


.vtest-user small {
    font-size: 12px !important;
}


.vtest-verified {
    font-size: 11px !important;
}


/* ============================================================
   REGISTRATION CTA
============================================================ */

.vreg-content > p {
    font-size: 16px !important;
}


.vreg-benefits span {
    font-size: 13px !important;
}


.vreg-action h3 {
    font-size: 24px !important;
}


.vreg-action > p {
    font-size: 14px !important;
}


.vreg-login span,
.vreg-login a {
    font-size: 12px !important;
}


/* ============================================================
   COMPANY INTRODUCTION
============================================================ */

.vintro-content p,
.vintro-content .vintro-lead {
    font-size: 16px !important;
}


.vintro-points strong {
    font-size: 15px !important;
}


.vintro-points small {
    font-size: 13px !important;
}


.vintro-badge strong {
    font-size: 16px !important;
}


.vintro-badge span {
    font-size: 11px !important;
}


/* ============================================================
   COMPANY STORY
============================================================ */

.vstory-heading p {
    font-size: 16px !important;
}


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


.vstory-item h3 {
    font-size: 18px !important;
}


.vstory-item p {
    font-size: 14px !important;
}


.vstory-image-content > span {
    font-size: 12px !important;
}


.vstory-image-content h3 {
    font-size: 30px !important;
}


.vstory-image-content p {
    font-size: 14px !important;
}


.vstory-values strong {
    font-size: 14px !important;
}


.vstory-values span {
    font-size: 11px !important;
}


/* ============================================================
   VISION / MISSION
============================================================ */

.vvm-heading p {
    font-size: 16px !important;
}


.vvm-card-label {
    font-size: 13px !important;
}


.vvm-card h3 {
    font-size: clamp(28px, 3vw, 38px) !important;
}


.vvm-card > p {
    font-size: 15px !important;
}


.vvm-list span {
    font-size: 14px !important;
}


.vvm-bottom > div:nth-child(2) span {
    font-size: 12px !important;
}


.vvm-bottom > div:nth-child(2) strong {
    font-size: 16px !important;
}


/* ============================================================
   BUSINESSES SERVED + SOURCING PROCESS
============================================================ */

.vbsp-heading p {
    font-size: 16px !important;
}


.vbsp-panel-head > span,
.vbsp-process-head > span {
    font-size: 13px !important;
}


.vbsp-panel-head p,
.vbsp-process-head p {
    font-size: 15px !important;
}


.vbsp-business-card h4 {
    font-size: 16px !important;
}


.vbsp-business-card p {
    font-size: 13px !important;
}


.vbsp-business-bottom strong {
    font-size: 15px !important;
}


.vbsp-business-bottom small {
    font-size: 12px !important;
}


.vbsp-process-content > span {
    font-size: 11px !important;
}


.vbsp-process-content h4 {
    font-size: 16px !important;
}


.vbsp-process-content p {
    font-size: 13px !important;
}


.vbsp-process-promise strong {
    font-size: 15px !important;
}


.vbsp-process-promise p {
    font-size: 12px !important;
}


/* ============================================================
   QUALITY ASSURANCE V2
============================================================ */

.vq2-heading p {
    font-size: 17px !important;
}


.vq2-small-title {
    font-size: 14px !important;
}


.vq2-quality-content > p {
    font-size: 16px !important;
}


.vq2-quality-points strong {
    font-size: 17px !important;
}


.vq2-quality-points p {
    font-size: 14px !important;
}


.vq2-grading-head > p {
    font-size: 15px !important;
}


.vq2-grade-card h4 {
    font-size: 19px !important;
}


.vq2-grade-card p {
    font-size: 14px !important;
}


.vq2-grade-status {
    font-size: 12px !important;
}


.vq2-bottom strong {
    font-size: 16px !important;
}


.vq2-bottom p {
    font-size: 13px !important;
}


/* ============================================================
   WHOLESALE NETWORK + DELIVERY
============================================================ */

.vwsd-heading p {
    font-size: 17px !important;
}


.vwsd-panel-label {
    font-size: 14px !important;
}


.vwsd-panel-top p,
.vwsd-delivery-head p {
    font-size: 15px !important;
}


.vwsd-network-badge strong {
    font-size: 16px !important;
}


.vwsd-network-badge span {
    font-size: 12px !important;
}


.vwsd-flow-item h4 {
    font-size: 16px !important;
}


.vwsd-flow-item p {
    font-size: 13px !important;
}


.vwsd-benefits strong {
    font-size: 14px !important;
}


.vwsd-benefits small {
    font-size: 12px !important;
}


.vwsd-delivery-points strong {
    font-size: 14px !important;
}


.vwsd-delivery-points small {
    font-size: 12px !important;
}


.vwsd-pincode input {
    font-size: 15px !important;
}


.vwsd-delivery-note {
    font-size: 12px !important;
}


/* ============================================================
   FINAL CONTACT / REGISTER CTA
============================================================ */

.vcta2-contact > p {
    font-size: 16px !important;
}


.vcta2-contact-card small {
    font-size: 12px !important;
}


.vcta2-contact-card strong {
    font-size: 15px !important;
}


.vcta2-support-line span {
    font-size: 13px !important;
}


.vcta2-register-label {
    font-size: 13px !important;
}


.vcta2-register > p {
    font-size: 15px !important;
}


.vcta2-benefits strong {
    font-size: 14px !important;
}


.vcta2-benefits small {
    font-size: 12px !important;
}


.vcta2-login,
.vcta2-login a {
    font-size: 12px !important;
}


/* ============================================================
   ICON SIZE IMPROVEMENT
============================================================ */

.vwhy-feature-icon,
.vcat-icon,
.vbest-cart-btn,
.vfresh-cart-btn,
.vsr-cart-btn,
.vqf-step-icon,
.vbsp-business-icon,
.vbsp-process-icon,
.vgrading-icon,
.vq2-grade-icon,
.vwsd-flow-icon,
.vcta2-contact-card > span {
    font-size: 20px !important;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991px) {

    .vcat-heading h2,
    .vbest-heading h2,
    .vfresh-heading h2,
    .vsr-heading h2,
    .vrc-heading h2,
    .vbulk-heading h2,
    .vwhy-content h2,
    .vbiz-heading h2,
    .vquality-heading h2,
    .vqf-content h2,
    .vdc-content h2,
    .vtest-heading h2,
    .vreg-content h2,
    .vintro-content h2,
    .vstory-heading h2,
    .vvm-heading h2,
    .vbsp-heading h2,
    .vq2-heading h2,
    .vwsd-heading h2,
    .vcta2-contact h2 {
        font-size: 38px !important;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767px) {

    /* Main titles */
    .vcat-heading h2,
    .vbest-heading h2,
    .vfresh-heading h2,
    .vsr-heading h2,
    .vrc-heading h2,
    .vbulk-heading h2,
    .vwhy-content h2,
    .vbiz-heading h2,
    .vquality-heading h2,
    .vqf-content h2,
    .vdc-content h2,
    .vtest-heading h2,
    .vreg-content h2,
    .vintro-content h2,
    .vstory-heading h2,
    .vvm-heading h2,
    .vbsp-heading h2,
    .vq2-heading h2,
    .vwsd-heading h2,
    .vcta2-contact h2 {
        font-size: 31px !important;
        line-height: 1.15 !important;
    }


    /* Standard body text */

    .vcat-section p,
    .vbest-section p,
    .vfresh-section p,
    .vsr-section p,
    .vrc-section p,
    .vbulk-section p,
    .vwhy-section p,
    .vbiz-section p,
    .vqf-section p,
    .vdc-section p,
    .vtest-section p,
    .vreg-section p,
    .vintro-section p,
    .vstory-section p,
    .vvm-section p,
    .vbsp-section p,
    .vq2-section p,
    .vwsd-section p,
    .vcta2-section p {
        font-size: 14px !important;
        line-height: 1.7 !important;
    }


    /* Subtitles */

    .vcat-subtitle,
    .vbest-subtitle,
    .vfresh-subtitle,
    .vsr-subtitle,
    .vrc-eyebrow,
    .vbulk-subtitle,
    .vwhy-subtitle,
    .vbiz-subtitle,
    .vquality-subtitle,
    .vqf-subtitle,
    .vdc-subtitle,
    .vtest-subtitle,
    .vreg-subtitle,
    .vintro-subtitle,
    .vstory-subtitle,
    .vvm-subtitle,
    .vbsp-subtitle,
    .vq2-kicker,
    .vwsd-kicker,
    .vcta2-kicker {
        font-size: 12px !important;
    }


    /* Product names */

    .vbest-content h3,
    .vfresh-content h3,
    .vsr-content h3,
    .vcat-content h3 {
        font-size: 16px !important;
    }


    /* Prices */

    .vbest-price strong,
    .vfresh-price strong,
    .vsr-price strong {
        font-size: 19px !important;
    }


    /* Buttons */

    .vcat-view-all,
    .vbest-view-all,
    .vfresh-view-all,
    .vsr-view-all,
    .vrc-all-btn,
    .vrc-reorder-btn,
    .vrc-shop-btn,
    .vbulk-top-btn,
    .vbulk-card-btn,
    .vwhy-btn,
    .vbiz-card a,
    .vdc-pincode button,
    .vreg-main-btn,
    .vintro-btn,
    .vvm-bottom > a,
    .vwsd-network-btn,
    .vwsd-pincode button,
    .vcta2-contact-btn,
    .vcta2-register-btn {
        font-size: 13px !important;
    }

}


/* ============================================================
   VERY SMALL MOBILE
============================================================ */

@media (max-width: 480px) {

    body {
        font-size: 15px !important;
    }


    .vcat-heading h2,
    .vbest-heading h2,
    .vfresh-heading h2,
    .vsr-heading h2,
    .vrc-heading h2,
    .vbulk-heading h2,
    .vwhy-content h2,
    .vbiz-heading h2,
    .vquality-heading h2,
    .vqf-content h2,
    .vdc-content h2,
    .vtest-heading h2,
    .vreg-content h2,
    .vintro-content h2,
    .vstory-heading h2,
    .vvm-heading h2,
    .vbsp-heading h2,
    .vq2-heading h2,
    .vwsd-heading h2,
    .vcta2-contact h2 {
        font-size: 29px !important;
    }


    .vtest-card > p,
    .vintro-content p,
    .vstory-item p,
    .vvm-card > p,
    .vq2-quality-content > p,
    .vwsd-panel-top p,
    .vwsd-delivery-head p,
    .vcta2-contact > p {
        font-size: 14px !important;
    }

}

/* =========================================
   VEGGICART PREMIUM CART PAGE
========================================= */

.vc-cart-section {
    width: 100%;
    padding: 70px 20px 90px;
    background:
        radial-gradient(circle at top left, rgba(54, 150, 74, 0.10), transparent 28%),
        radial-gradient(circle at bottom right, rgba(139, 195, 74, 0.12), transparent 28%),
        #f7faf6;
    font-family: "Inter", sans-serif;
}

.vc-cart-container {
    width: 100%;
    max-width: 1380px;
    margin: 0 auto;
}


/* Heading */

.vc-cart-heading {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 42px;
}

.vc-cart-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 17px;
    margin-bottom: 12px;
    border-radius: 50px;
    background: rgba(42, 128, 61, 0.10);
    color: #287a39;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.vc-cart-heading h1 {
    margin: 0 0 10px;
    color: #17351d;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.15;
    font-weight: 800;
}

.vc-cart-heading p {
    margin: 0;
    color: #657268;
    font-size: 17px;
    line-height: 1.7;
}


/* Layout */

.vc-cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(330px, .75fr);
    gap: 30px;
    align-items: start;
}


/* Cart Items */

.vc-cart-items-wrap {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.vc-cart-item {
    display: grid;
    grid-template-columns: minmax(330px, 1.6fr) .55fr .8fr .55fr;
    align-items: center;
    gap: 20px;
    padding: 20px;
    border: 1px solid #e6eee3;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 12px 35px rgba(36, 72, 40, 0.07);
    transition: all .3s ease;
}

.vc-cart-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 45px rgba(36, 72, 40, 0.11);
}

.vc-cart-product {
    display: flex;
    align-items: center;
    gap: 18px;
}

.vc-cart-image {
    width: 118px;
    height: 118px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 18px;
    background: #eef4eb;
}

.vc-cart-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vc-cart-product-info {
    min-width: 0;
}

.vc-cart-category {
    display: block;
    margin-bottom: 5px;
    color: #56a449;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.vc-cart-product-info h3 {
    margin: 0 0 8px;
    color: #1b3821;
    font-size: 20px;
    font-weight: 750;
    line-height: 1.3;
}

.vc-cart-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.vc-cart-meta span {
    padding: 4px 9px;
    border-radius: 7px;
    background: #f3f7f1;
    color: #657268;
    font-size: 12px;
    font-weight: 600;
}

.vc-cart-meta .vc-stock {
    background: #eaf8eb;
    color: #288138;
}

.vc-remove-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #d94b4b;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
}

.vc-remove-btn:hover {
    color: #b52d2d;
}


/* Item Columns */

.vc-cart-price,
.vc-cart-total,
.vc-cart-quantity {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.vc-cart-price > span,
.vc-cart-total > span,
.vc-cart-quantity > span {
    color: #8a958c;
    font-size: 12px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.vc-cart-price strong,
.vc-cart-total strong {
    color: #1e4927;
    font-size: 20px;
    font-weight: 800;
}


/* Quantity */

.vc-qty-box {
    width: 126px;
    height: 44px;
    display: grid;
    grid-template-columns: 38px 1fr 38px;
    align-items: center;
    border: 1px solid #dce7d9;
    border-radius: 11px;
    background: #f9fbf8;
    overflow: hidden;
}

.vc-qty-box button {
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
    color: #2d743a;
    cursor: pointer;
    font-size: 12px;
    transition: .2s ease;
}

.vc-qty-box button:hover {
    background: #eaf4e7;
}

.vc-qty-box input {
    width: 100%;
    height: 100%;
    border: 0;
    border-left: 1px solid #e2ebe0;
    border-right: 1px solid #e2ebe0;
    outline: none;
    background: #fff;
    text-align: center;
    color: #23442a;
    font-size: 15px;
    font-weight: 700;
    appearance: textfield;
}

.vc-qty-box input::-webkit-inner-spin-button,
.vc-qty-box input::-webkit-outer-spin-button {
    appearance: none;
}


/* Cart Actions */

.vc-cart-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding-top: 8px;
}

.vc-continue-btn,
.vc-update-btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all .25s ease;
}

.vc-continue-btn {
    border: 1px solid #dce7d9;
    background: #ffffff;
    color: #276d34;
}

.vc-continue-btn:hover {
    background: #edf6eb;
    color: #1f602d;
}

.vc-update-btn {
    border: 0;
    background: #286f35;
    color: #ffffff;
}

.vc-update-btn:hover {
    background: #1d5928;
    transform: translateY(-2px);
}


/* Summary */

.vc-cart-summary {
    position: sticky;
    top: 110px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.vc-cart-summary .vc-summary-card {
    display: block;
    padding: 26px;
    border-radius: 22px;
    border: 0;
    background:
        linear-gradient(145deg, #173e23, #246433);
    box-shadow: 0 20px 48px rgba(25, 75, 36, 0.20);
    color: #ffffff;
    overflow: hidden;
}

.vc-cart-summary .vc-summary-card:hover {
    transform: none;
    box-shadow: 0 20px 48px rgba(25, 75, 36, 0.20);
}

.vc-cart-summary .vc-summary-row,
.vc-cart-summary .vc-summary-total {
    width: 100%;
}

.vc-cart-summary .vc-summary-row span {
    display: inline;
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.80);
    font-size: 14px;
}

.vc-cart-summary .vc-summary-total > span {
    display: inline;
    margin-bottom: 0;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
}

.vc-cart-summary .vc-summary-row strong {
    display: inline;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
}

.vc-cart-summary .vc-summary-total strong {
    display: block;
    color: #ffffff;
    font-size: 30px;
    line-height: 1;
    font-weight: 800;
}

.vc-summary-header {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 24px;
}

.vc-summary-header > span {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
    font-size: 19px;
}

.vc-summary-header small {
    display: block;
    margin-bottom: 2px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 12px;
}

.vc-summary-header h2 {
    margin: 0;
    font-size: 23px;
    font-weight: 800;
}

.vc-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 11px 0;
    color: rgba(255, 255, 255, 0.80);
    font-size: 14px;
}

.vc-summary-row strong {
    color: #ffffff;
    font-size: 15px;
}

.vc-summary-row .vc-free {
    color: #b9ff9f;
}

.vc-summary-divider {
    height: 1px;
    margin: 12px 0 18px;
    background: rgba(255, 255, 255, 0.14);
}

.vc-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 22px;
}

.vc-summary-total > span {
    font-size: 16px;
    font-weight: 700;
}

.vc-summary-total > div {
    text-align: right;
}

.vc-summary-total small {
    display: block;
    margin-bottom: 3px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 11px;
}

.vc-summary-total strong {
    display: block;
    color: #ffffff;
    font-size: 30px;
    line-height: 1;
    font-weight: 800;
}


/* Checkout */

.vc-checkout-btn {
    width: 100%;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 13px;
    background: #ffffff;
    color: #1f622c;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    transition: all .25s ease;
}

.vc-checkout-btn:hover {
    transform: translateY(-2px);
    background: #eff8eb;
    color: #174d21;
}

.vc-secure-checkout {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 17px;
}

.vc-secure-checkout > i {
    margin-top: 2px;
    color: #b9ff9f;
}

.vc-secure-checkout strong,
.vc-secure-checkout span {
    display: block;
}

.vc-secure-checkout strong {
    margin-bottom: 2px;
    font-size: 12px;
}

.vc-secure-checkout span {
    color: rgba(255, 255, 255, 0.62);
    font-size: 11px;
}


/* Coupon */

.vc-coupon-card {
    padding: 21px;
    border: 1px solid #e2ebe0;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(36, 72, 40, 0.06);
}

.vc-coupon-title {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 15px;
}

.vc-coupon-title > i {
    color: #378143;
    font-size: 20px;
}

.vc-coupon-title strong,
.vc-coupon-title span {
    display: block;
}

.vc-coupon-title strong {
    color: #213f27;
    font-size: 15px;
}

.vc-coupon-title span {
    margin-top: 1px;
    color: #839086;
    font-size: 12px;
}

.vc-coupon-form {
    display: flex;
    gap: 8px;
}

.vc-coupon-form input {
    min-width: 0;
    flex: 1;
    height: 46px;
    padding: 0 14px;
    border: 1px solid #dce7d9;
    border-radius: 10px;
    outline: none;
    color: #273f2b;
    font-size: 14px;
}

.vc-coupon-form input:focus {
    border-color: #65a65e;
    box-shadow: 0 0 0 3px rgba(67, 144, 72, 0.08);
}

.vc-coupon-form button {
    height: 46px;
    padding: 0 18px;
    border: 0;
    border-radius: 10px;
    background: #2e793a;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1100px) {

    .vc-cart-layout {
        grid-template-columns: 1fr;
    }

    .vc-cart-summary {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .vc-cart-item {
        grid-template-columns: minmax(300px, 1.5fr) .55fr .8fr .55fr;
    }

}


/* =========================================
   MOBILE / SMALL TABLET
========================================= */

@media (max-width: 820px) {

    .vc-cart-section {
        padding: 50px 15px 65px;
    }

    .vc-cart-heading {
        margin-bottom: 28px;
    }

    .vc-cart-heading p {
        font-size: 15px;
    }

    .vc-cart-item {
        grid-template-columns: 1fr 1fr;
        gap: 18px;
    }

    .vc-cart-product {
        grid-column: 1 / -1;
    }

    .vc-cart-total {
        align-items: flex-end;
        text-align: right;
    }

    .vc-cart-summary {
        grid-template-columns: 1fr;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 575px) {

    .vc-cart-section {
        padding-left: 12px;
        padding-right: 12px;
    }

    .vc-cart-item {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
        border-radius: 16px;
    }

    .vc-cart-product {
        align-items: flex-start;
    }

    .vc-cart-image {
        width: 94px;
        height: 94px;
        border-radius: 14px;
    }

    .vc-cart-product-info h3 {
        font-size: 17px;
    }

    .vc-cart-price,
    .vc-cart-quantity,
    .vc-cart-total {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding-top: 12px;
        border-top: 1px solid #edf1eb;
    }

    .vc-cart-total {
        text-align: left;
    }

    .vc-cart-price > span,
    .vc-cart-total > span,
    .vc-cart-quantity > span {
        font-size: 11px;
    }

    .vc-cart-actions {
        flex-direction: column;
    }

    .vc-continue-btn,
    .vc-update-btn {
        width: 100%;
    }

    .vc-cart-summary .vc-summary-card {
        padding: 21px 18px;
    }

    .vc-summary-total strong {
        font-size: 27px;
    }

    .vc-coupon-form {
        flex-direction: column;
    }

    .vc-coupon-form button {
        width: 100%;
    }

}


/* Very small phones */

@media (max-width: 390px) {

    .vc-cart-product {
        flex-direction: column;
    }

    .vc-cart-image {
        width: 100%;
        height: 180px;
    }

}

/* ==========================================
   VEGGICART PREMIUM CHECKOUT PAGE
========================================== */

.vc-checkout-section {
    width: 100%;
    padding: 70px 20px 90px;
    background:
        radial-gradient(circle at 5% 5%, rgba(78, 157, 65, .10), transparent 24%),
        radial-gradient(circle at 95% 95%, rgba(147, 196, 78, .12), transparent 25%),
        #f7faf6;
    font-family: "Inter", sans-serif;
}

.vc-checkout-container {
    width: 100%;
    max-width: 1380px;
    margin: auto;
}


/* ==========================================
   HEADING
========================================== */

.vc-checkout-heading {
    max-width: 760px;
    margin: 0 auto 42px;
    text-align: center;
}

.vc-checkout-badge {
    display: inline-flex;
    padding: 8px 17px;
    margin-bottom: 12px;
    border-radius: 50px;
    background: #e9f5e5;
    color: #28743a;
    font-size: 13px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .7px;
}

.vc-checkout-heading h1 {
    margin: 0 0 10px;
    color: #17391e;
    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.15;
    font-weight: 800;
}

.vc-checkout-heading p {
    margin: 0;
    color: #6c796e;
    font-size: 16px;
    line-height: 1.75;
}


/* ==========================================
   MAIN GRID
========================================== */

.vc-checkout-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1.6fr)
        minmax(350px, .75fr);
    gap: 30px;
    align-items: start;
}

.vc-checkout-main {
    display: flex;
    flex-direction: column;
    gap: 22px;
}


/* ==========================================
   FORM CARDS
========================================== */

.vc-checkout-card {
    padding: 28px;
    border: 1px solid #e1ebe0;
    border-radius: 22px;
    background: #fff;
    box-shadow:
        0 12px 40px rgba(35, 76, 40, .06);
}

.vc-checkout-card-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 21px;
    margin-bottom: 23px;
    border-bottom: 1px solid #edf1eb;
}

.vc-checkout-card-icon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background:
        linear-gradient(
            135deg,
            #e5f4e1,
            #f4faef
        );
    color: #2d7a3c;
    font-size: 20px;
}

.vc-checkout-card-header > div > span {
    display: block;
    margin-bottom: 2px;
    color: #69a55c;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.vc-checkout-card-header h2 {
    margin: 0;
    color: #1f4126;
    font-size: 23px;
    font-weight: 800;
}


/* ==========================================
   FORM
========================================== */

.vc-checkout-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.vc-full-width {
    grid-column: 1 / -1;
}

.vc-form-group label {
    display: block;
    margin-bottom: 8px;
    color: #334b38;
    font-size: 13px;
    font-weight: 700;
}

.vc-form-group label span {
    color: #e04e4e;
}

.vc-input-wrap {
    position: relative;
}

.vc-input-wrap > i {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: #78a374;
    font-size: 14px;
    pointer-events: none;
}

.vc-input-wrap input,
.vc-input-wrap select {
    width: 100%;
    height: 52px;
    padding: 0 15px 0 43px;
    border: 1px solid #dce7d9;
    border-radius: 12px;
    outline: none;
    background: #fbfdfb;
    color: #304436;
    font-family: inherit;
    font-size: 14px;
    transition: .25s ease;
}

.vc-input-wrap select {
    cursor: pointer;
}

.vc-input-wrap input::placeholder {
    color: #9aa69c;
}

.vc-input-wrap input:focus,
.vc-input-wrap select:focus,
.vc-form-group textarea:focus {
    border-color: #68a961;
    background: #fff;
    box-shadow:
        0 0 0 4px rgba(71, 145, 70, .08);
}

.vc-form-group textarea {
    width: 100%;
    min-height: 115px;
    resize: vertical;
    padding: 15px;
    border: 1px solid #dce7d9;
    border-radius: 12px;
    outline: none;
    background: #fbfdfb;
    color: #304436;
    font-family: inherit;
    font-size: 14px;
}


/* ==========================================
   DELIVERY OPTIONS
========================================== */

.vc-delivery-options,
.vc-payment-options {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.vc-delivery-option,
.vc-payment-option {
    position: relative;
    min-height: 82px;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 16px 18px;
    border: 1px solid #dfe8dc;
    border-radius: 15px;
    background: #fbfdf9;
    cursor: pointer;
    transition: .25s ease;
}

.vc-delivery-option:hover,
.vc-payment-option:hover,
.vc-delivery-option.active,
.vc-payment-option.active {
    border-color: #69a862;
    background: #f1f8ee;
}

.vc-delivery-option input,
.vc-payment-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.vc-option-radio,
.vc-payment-radio {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border: 2px solid #9bae98;
    border-radius: 50%;
    position: relative;
}

.vc-delivery-option.active .vc-option-radio,
.vc-payment-option.active .vc-payment-radio {
    border-color: #307b3d;
}

.vc-delivery-option.active .vc-option-radio::after,
.vc-payment-option.active .vc-payment-radio::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: #307b3d;
}

.vc-delivery-icon,
.vc-payment-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #e9f4e6;
    color: #347d41;
    font-size: 17px;
}

.vc-delivery-content,
.vc-payment-content {
    flex: 1;
}

.vc-delivery-content strong,
.vc-payment-content strong {
    display: block;
    margin-bottom: 3px;
    color: #263f2b;
    font-size: 15px;
    font-weight: 750;
}

.vc-delivery-content small,
.vc-payment-content small {
    display: block;
    color: #78827a;
    font-size: 12px;
    line-height: 1.5;
}

.vc-delivery-price {
    color: #28753a;
    font-size: 14px;
    font-weight: 800;
}


/* ==========================================
   ORDER SUMMARY
========================================== */

.vc-checkout-summary {
    position: sticky;
    top: 110px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.vc-order-summary-card {
    padding: 26px;
    border-radius: 24px;
    background:
        linear-gradient(
            145deg,
            #153e21,
            #246334
        );
    color: #fff;
    box-shadow:
        0 22px 55px rgba(26, 79, 37, .22);
}

.vc-order-summary-heading {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 24px;
}

.vc-order-summary-heading > span {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(255,255,255,.12);
    font-size: 18px;
}

.vc-order-summary-heading small {
    display: block;
    margin-bottom: 2px;
    color: rgba(255,255,255,.65);
    font-size: 11px;
}

.vc-order-summary-heading h2 {
    margin: 0;
    color: #fff;
    font-size: 22px;
    font-weight: 800;
}


/* PRODUCTS */

.vc-order-product {
    display: grid;
    grid-template-columns: 60px minmax(0,1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 11px 0;
}

.vc-order-product-image {
    width: 58px;
    height: 58px;
    position: relative;
}

.vc-order-product-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 12px;
}

.vc-order-product-image span {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f4ffec;
    color: #266a33;
    font-size: 10px;
    font-weight: 800;
}

.vc-order-product-content h3 {
    margin: 0 0 3px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.vc-order-product-content small {
    color: rgba(255,255,255,.62);
    font-size: 11px;
}

.vc-order-product > strong {
    color: #fff;
    font-size: 14px;
}

.vc-summary-line {
    width: 100%;
    height: 1px;
    margin: 14px 0;
    background: rgba(255,255,255,.13);
}


/* COUPON */

.vc-checkout-coupon {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
}

.vc-checkout-coupon input {
    min-width: 0;
    height: 45px;
    padding: 0 13px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 10px;
    outline: none;
    background: rgba(255,255,255,.09);
    color: #fff;
    font-family: inherit;
}

.vc-checkout-coupon input::placeholder {
    color: rgba(255,255,255,.50);
}

.vc-checkout-coupon button {
    height: 45px;
    padding: 0 17px;
    border: 0;
    border-radius: 10px;
    background: #fff;
    color: #276d34;
    font-weight: 750;
    cursor: pointer;
}


/* PRICE */

.vc-checkout-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    color: rgba(255,255,255,.72);
    font-size: 13px;
}

.vc-checkout-price-row strong {
    color: #fff;
}

.vc-free-text {
    color: #bdffa7 !important;
}

.vc-checkout-total {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 21px;
}

.vc-checkout-total span,
.vc-checkout-total small {
    display: block;
}

.vc-checkout-total span {
    margin-bottom: 2px;
    font-size: 15px;
    font-weight: 700;
}

.vc-checkout-total small {
    color: rgba(255,255,255,.56);
    font-size: 10px;
}

.vc-checkout-total > strong {
    font-size: 29px;
    line-height: 1;
}


/* PLACE ORDER */

.vc-place-order-btn {
    width: 100%;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: 13px;
    background: #fff;
    color: #1e622b;
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: .25s ease;
}

.vc-place-order-btn:hover {
    transform: translateY(-2px);
    background: #eff9eb;
}

.vc-checkout-security {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 17px;
}

.vc-checkout-security > i {
    margin-top: 2px;
    color: #baff9f;
}

.vc-checkout-security strong,
.vc-checkout-security span {
    display: block;
}

.vc-checkout-security strong {
    color: #fff;
    font-size: 12px;
}

.vc-checkout-security span {
    margin-top: 2px;
    color: rgba(255,255,255,.58);
    font-size: 10px;
}


/* ==========================================
   BENEFITS
========================================== */

.vc-checkout-benefits {
    padding: 20px;
    border: 1px solid #e1ebe0;
    border-radius: 19px;
    background: #fff;
}

.vc-checkout-benefit {
    display: flex;
    gap: 11px;
    padding: 13px 0;
}

.vc-checkout-benefit + .vc-checkout-benefit {
    border-top: 1px solid #edf1eb;
}

.vc-checkout-benefit > span {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #edf7ea;
    color: #337a40;
}

.vc-checkout-benefit strong,
.vc-checkout-benefit small {
    display: block;
}

.vc-checkout-benefit strong {
    margin-bottom: 2px;
    color: #263f2b;
    font-size: 13px;
}

.vc-checkout-benefit small {
    color: #7b887d;
    font-size: 11px;
    line-height: 1.5;
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 1100px) {

    .vc-checkout-layout {
        grid-template-columns: 1fr;
    }

    .vc-checkout-summary {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

}


/* ==========================================
   MOBILE TABLET
========================================== */

@media (max-width: 768px) {

    .vc-checkout-section {
        padding: 50px 15px 65px;
    }

    .vc-checkout-heading {
        margin-bottom: 30px;
    }

    .vc-checkout-form-grid {
        grid-template-columns: 1fr;
    }

    .vc-full-width {
        grid-column: auto;
    }

    .vc-checkout-summary {
        grid-template-columns: 1fr;
    }

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 575px) {

    .vc-checkout-section {
        padding-left: 12px;
        padding-right: 12px;
    }

    .vc-checkout-heading h1 {
        font-size: 31px;
    }

    .vc-checkout-heading p {
        font-size: 14px;
    }

    .vc-checkout-card {
        padding: 18px 15px;
        border-radius: 17px;
    }

    .vc-checkout-card-header {
        gap: 11px;
    }

    .vc-checkout-card-icon {
        width: 45px;
        height: 45px;
        border-radius: 12px;
    }

    .vc-checkout-card-header h2 {
        font-size: 19px;
    }

    .vc-delivery-option,
    .vc-payment-option {
        align-items: flex-start;
        padding: 14px;
    }

    .vc-delivery-icon,
    .vc-payment-icon {
        width: 40px;
        height: 40px;
    }

    .vc-delivery-price {
        position: absolute;
        right: 14px;
        top: 14px;
    }

    .vc-delivery-content,
    .vc-payment-content {
        padding-right: 10px;
    }

    .vc-order-summary-card {
        padding: 20px 17px;
        border-radius: 19px;
    }

    .vc-checkout-total > strong {
        font-size: 26px;
    }

}


/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width: 390px) {

    .vc-delivery-icon,
    .vc-payment-icon {
        display: none;
    }

    .vc-checkout-coupon {
        grid-template-columns: 1fr;
    }

    .vc-checkout-coupon button {
        width: 100%;
    }

}

/* ==========================================
   VEGGICART PREMIUM PRODUCT PAGE
========================================== */

.vc-product-page {
    width: 100%;
    padding: 35px 20px 90px;
    background:
        radial-gradient(circle at 0 0, rgba(76, 160, 68, .09), transparent 23%),
        radial-gradient(circle at 100% 100%, rgba(155, 205, 80, .10), transparent 25%),
        #f8faf7;
    font-family: "Inter", sans-serif;
}

.vc-product-container {
    max-width: 1380px;
    margin: 0 auto;
}


/* BREADCRUMB */

.vc-product-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 25px;
    color: #819083;
    font-size: 13px;
}

.vc-product-breadcrumb a {
    color: #4c7751;
    text-decoration: none;
}

.vc-product-breadcrumb a:hover {
    color: #247233;
}

.vc-product-breadcrumb i {
    font-size: 9px;
    color: #b1bbb2;
}

.vc-product-breadcrumb span {
    color: #243e29;
    font-weight: 650;
}


/* ==========================================
   MAIN PRODUCT ? clean split (gallery | info)
========================================== */

.vc-product-main {
    display: grid;
    grid-template-columns: minmax(280px, 0.95fr) minmax(320px, 1.05fr);
    gap: 36px;
    align-items: start;
    padding: 24px;
    border: 1px solid #e2ebe0;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(39, 76, 41, .06);
}


/* ==========================================
   GALLERY ? clear product photo
========================================== */

.vc-product-gallery {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    position: sticky;
    top: 88px;
}

.vc-product-thumbnails {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
}

.vc-product-thumb {
    width: 68px;
    height: 68px;
    flex: 0 0 auto;
    padding: 4px;
    border: 2px solid transparent;
    border-radius: 12px;
    background: #f4f7f2;
    cursor: pointer;
    overflow: hidden;
    transition: .25s ease;
}

.vc-product-thumb.active {
    border-color: #3c8848;
    background: #fff;
}

.vc-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.vc-product-main-image {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 0;
    overflow: hidden;
    border-radius: 20px;
    background: linear-gradient(145deg, #f4f8f1 0%, #e8f0e4 100%);
}

.vc-product-main-image > img {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: block;
    object-fit: contain;
    object-position: center;
    padding: 14px;
    box-sizing: border-box;
    transition: transform .45s ease;
}

.vc-product-main-image:hover > img {
    transform: scale(1.03);
}

.vc-product-discount {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    padding: 7px 12px;
    border-radius: 50px;
    background: #e84f4f;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}

.vc-product-wishlist {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.96);
    color: #315c37;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0,0,0,.10);
}


/* ==========================================
   PRODUCT INFO ? single clean column
========================================== */

.vc-product-info {
    display: block;
    padding: 4px 2px 0;
    max-width: none;
}

.vc-product-category {
    display: inline-flex;
    padding: 6px 12px;
    margin-bottom: 10px;
    border-radius: 50px;
    background: #eaf5e7;
    color: #2d783d;
    font-size: 11px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.vc-product-info h1 {
    margin: 0 0 10px;
    color: #173a20;
    font-size: clamp(26px, 2.8vw, 36px);
    line-height: 1.2;
    font-weight: 800;
}


/* RATING */

.vc-product-rating {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.vc-stars {
    display: flex;
    gap: 3px;
    color: #f5b51b;
}

.vc-product-rating > span {
    color: #243e29;
    font-size: 13px;
    font-weight: 750;
}

.vc-product-rating a {
    color: #7d8b7f;
    font-size: 12px;
    text-decoration: none;
}


/* PRICE */

.vc-product-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.vc-product-price strong {
    color: #247136;
    font-size: 30px;
    font-weight: 850;
}

.vc-product-price .vc-product-unit {
    color: #7a8a7c;
    font-size: 14px;
    font-weight: 600;
}

.vc-product-price del {
    color: #99a49a;
    font-size: 16px;
}

.vc-product-price span {
    padding: 5px 9px;
    border-radius: 6px;
    background: #fff0e7;
    color: #d75e2d;
    font-size: 11px;
    font-weight: 750;
}

.vc-product-short-description {
    margin: 0 0 14px;
    color: #657267;
    font-size: 14px;
    line-height: 1.7;
}


/* STOCK */

.vc-product-stock {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 22px;
    border-radius: 11px;
    background: #f0f8ee;
}

.vc-product-stock span {
    color: #25803a;
    font-size: 13px;
    font-weight: 750;
}

.vc-product-stock span i {
    margin-right: 5px;
}

.vc-product-stock small {
    color: #7d897e;
    font-size: 11px;
}


/* OPTIONS */

.vc-product-option {
    padding: 18px 0;
    border-top: 1px solid #edf1eb;
    border-bottom: 1px solid #edf1eb;
}

.vc-product-option-title {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.vc-product-option-title strong {
    color: #293f2d;
    font-size: 14px;
}

.vc-product-option-title span {
    color: #8a968b;
    font-size: 11px;
}

.vc-weight-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.vc-weight-btn {
    min-width: 96px;
    flex: 1 1 110px;
    max-width: 180px;
    height: 46px;
    padding: 0 16px;
    border: 1px solid #d8e4d6;
    border-radius: 10px;
    background: #fff;
    color: #435c48;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: .22s ease;
}

.vc-weight-btn:hover,
.vc-weight-btn.active {
    border-color: #347d41;
    background: #347d41;
    color: #fff;
}

.vc-bulk-quote-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px dashed #b7d0b5;
    border-radius: 12px;
    background: #f7fbf6;
}

.vc-bulk-quote-row > span {
    color: #4d6552;
    font-size: 13px;
    font-weight: 600;
}

.vc-bulk-quote-btn {
    min-height: 40px;
    padding: 0 16px;
    border: 1.5px solid #2f7a3d;
    border-radius: 10px;
    background: transparent;
    color: #2f7a3d;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s ease;
}

.vc-bulk-quote-btn:hover {
    background: #2f7a3d;
    color: #fff;
}

.vc-qty-line-total {
    margin: 12px 0 0;
    color: #1f4f28;
    font-size: 14px;
    font-weight: 700;
}

.vc-product-purchase.vc-purchase-tiers-only {
    /* keep same 3-across row; qty stays visible and syncs with KG tiers */
    grid-template-columns: unset;
}

body.vc-modal-open {
    overflow: hidden;
}

.vc-bulk-modal {
    position: fixed;
    z-index: 99999;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 35, 18, .65);
    backdrop-filter: blur(7px);
}

.vc-bulk-modal.show {
    display: flex;
}

.vc-bulk-modal-card {
    position: relative;
    width: min(640px, 100%);
    max-height: min(92vh, 900px);
    overflow: auto;
    padding: 28px 26px 24px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(20, 50, 28, .28);
}

.vc-bulk-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #f0f3ef;
    color: #35513b;
    cursor: pointer;
}

.vc-bulk-modal-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    padding-right: 36px;
}

.vc-bulk-modal-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #e8f6ea;
    color: #2a7a39;
    font-size: 20px;
}

.vc-bulk-modal-head small {
    display: block;
    color: #6f7f72;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.vc-bulk-modal-head h2 {
    margin: 2px 0 0;
    color: #17351d;
    font-size: 22px;
    font-weight: 800;
}

.vc-bulk-modal-lead {
    margin: 0 0 18px;
    color: #607066;
    font-size: 13px;
    line-height: 1.55;
}

.vc-bulk-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.vc-bulk-form-grid label {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vc-bulk-form-grid label > span {
    color: #405447;
    font-size: 12px;
    font-weight: 700;
}

.vc-bulk-form-grid input,
.vc-bulk-form-grid textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #d8e4d6;
    border-radius: 10px;
    outline: none;
    color: #243b29;
    font-family: inherit;
    font-size: 14px;
    background: #fff;
}

.vc-bulk-form-grid textarea {
    min-height: 90px;
    resize: vertical;
}

.vc-bulk-form-grid input:focus,
.vc-bulk-form-grid textarea:focus {
    border-color: #65a65e;
    box-shadow: 0 0 0 3px rgba(67, 144, 72, 0.1);
}

.vc-bulk-form-grid input[readonly] {
    background: #f5f8f4;
    color: #4d6352;
}

.vc-bulk-span-2 {
    grid-column: 1 / -1;
}

.vc-bulk-form-error {
    margin: 12px 0 0;
    color: #b42318;
    font-size: 13px;
    font-weight: 600;
}

.vc-bulk-form-success {
    margin: 12px 0 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: #eaf8ee;
    color: #176b32;
    font-size: 14px;
    font-weight: 700;
}

.vc-bulk-submit-btn {
    width: 100%;
    min-height: 50px;
    margin-top: 16px;
    border: 0;
    border-radius: 12px;
    background: #2a7537;
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
}

.vc-bulk-submit-btn:hover {
    background: #1f5f2b;
}

.vc-bulk-submit-btn:disabled {
    opacity: .65;
    cursor: wait;
}

@media (max-width: 640px) {
    .vc-bulk-form-grid {
        grid-template-columns: 1fr;
    }

    .vc-bulk-quote-row {
        flex-direction: column;
        align-items: stretch;
    }

    .vc-bulk-quote-btn {
        width: 100%;
    }
}


/* PURCHASE ? always Qty + Add to Cart + Buy Now in ONE row */

.vc-product-purchase {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    gap: 10px;
    margin-top: 18px;
    max-width: none;
    width: 100%;
}

.vc-product-qty {
    flex: 0 0 112px;
    width: 112px;
    height: 50px;
    display: grid;
    grid-template-columns: 34px 1fr 34px;
    overflow: hidden;
    border: 1px solid #d9e4d7;
    border-radius: 12px;
    background: #fff;
}

.vc-product-qty[hidden] {
    display: none !important;
}

.vc-product-qty button {
    border: 0;
    background: #f4f8f2;
    color: #2c7639;
    cursor: pointer;
}

.vc-product-qty input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: none;
    text-align: center;
    color: #263d2a;
    font-weight: 750;
    appearance: textfield;
}

.vc-product-qty input::-webkit-inner-spin-button,
.vc-product-qty input::-webkit-outer-spin-button {
    appearance: none;
}

.vc-add-cart-btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 12px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg,#2b793b,#3d924a);
    color: #fff;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(42,124,58,.18);
    transition: .25s ease;
    white-space: nowrap;
}

.vc-add-cart-btn:hover {
    transform: translateY(-1px);
}

.vc-buy-now-btn {
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
    max-width: none !important;
    min-height: 50px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 0 !important;
    padding: 0 12px;
    border: 1.5px solid #327c40;
    border-radius: 12px;
    color: #2b7338;
    background: #fff;
    font-size: 13.5px;
    font-weight: 800;
    text-decoration: none;
    transition: .25s ease;
    white-space: nowrap;
    box-sizing: border-box;
}

.vc-buy-now-btn:hover {
    background: #eef7eb;
}


/* BENEFITS */

.vc-product-benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.vc-product-benefit {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #f7faf5;
}

.vc-product-benefit > span {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #e6f3e3;
    color: #347c41;
}

.vc-product-benefit strong,
.vc-product-benefit small {
    display: block;
}

.vc-product-benefit strong {
    color: #334a37;
    font-size: 13px;
}

.vc-product-benefit small {
    margin-top: 2px;
    color: #869087;
    font-size: 11px;
    line-height: 1.4;
}


/* PIN CODE */

.vc-delivery-check {
    margin-top: 20px;
    padding: 18px 20px;
    border: 1px dashed #cbdcc7;
    border-radius: 14px;
    background: #fbfdf9;
    max-width: none;
}

.vc-delivery-check-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
}

.vc-delivery-check-title > i {
    color: #337c41;
}

.vc-delivery-check-title strong,
.vc-delivery-check-title span {
    display: block;
}

.vc-delivery-check-title strong {
    color: #2c4531;
    font-size: 12px;
}

.vc-delivery-check-title span {
    color: #889389;
    font-size: 10px;
}

.vc-pincode-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
}

.vc-pincode-form input {
    height: 44px;
    min-width: 0;
    padding: 0 13px;
    border: 1px solid #dce7da;
    border-radius: 9px;
    outline: none;
}

.vc-pincode-form button {
    padding: 0 18px;
    border: 0;
    border-radius: 9px;
    background: #30783d;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}


/* ==========================================
   DETAIL TABS
========================================== */

.vc-product-details {
    margin-top: 35px;
    padding: 28px;
    border: 1px solid #e2ebe0;
    border-radius: 23px;
    background: #fff;
}

.vc-product-tabs {
    display: flex;
    gap: 8px;
    padding-bottom: 20px;
    margin-bottom: 25px;
    overflow-x: auto;
    border-bottom: 1px solid #e9eee7;
}

.vc-product-tab {
    flex-shrink: 0;
    padding: 11px 18px;
    border: 0;
    border-radius: 9px;
    background: #f4f7f2;
    color: #526455;
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
}

.vc-product-tab.active {
    background: #2f7a3d;
    color: #fff;
}

.vc-product-tab-content {
    display: none;
}

.vc-product-tab-content.active {
    display: block;
}

.vc-product-description-layout {
    display: grid;
    grid-template-columns: 1.4fr .8fr;
    gap: 50px;
}

.vc-section-tag {
    display: inline-block;
    margin-bottom: 7px;
    color: #3a8946;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.vc-product-description-layout h2 {
    margin: 0 0 12px;
    color: #1d3d25;
    font-size: 29px;
}

.vc-product-richtext p {
    margin: 0 0 12px;
    color: #5d6f63;
    font-size: 14.5px;
    line-height: 1.75;
}

.vc-product-richtext p:last-child {
    margin-bottom: 0;
}

.vc-product-tab-panel {
    padding: 8px 0 4px;
}

.vc-tab-empty {
    margin: 0;
    color: #8a9a8e;
    font-size: 14.5px;
    font-style: italic;
    line-height: 1.75;
}

.vc-product-description-layout p {
    margin: 0 0 12px;
    color: #6b776d;
    font-size: 14px;
    line-height: 1.8;
}

.vc-product-specifications {
    overflow: hidden;
    border: 1px solid #e6ece4;
    border-radius: 15px;
}

.vc-product-specifications div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 15px;
}

.vc-product-specifications div + div {
    border-top: 1px solid #edf1eb;
}

.vc-product-specifications span {
    color: #829084;
    font-size: 12px;
}

.vc-product-specifications strong {
    color: #314836;
    font-size: 12px;
}

.vc-product-tab-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 15px;
}

.vc-info-card {
    padding: 22px;
    border-radius: 14px;
    background: #f6faf4;
}

.vc-info-card i {
    margin-bottom: 12px;
    color: #348040;
    font-size: 24px;
}

.vc-info-card h3 {
    margin: 0 0 7px;
    color: #28432e;
    font-size: 16px;
}

.vc-info-card p {
    margin: 0;
    color: #768178;
    font-size: 12px;
    line-height: 1.6;
}

.vc-storage-box {
    display: flex;
    gap: 17px;
    padding: 20px;
    border-radius: 14px;
    background: #f6faf4;
}

.vc-storage-box > i {
    color: #337e40;
    font-size: 30px;
}

.vc-storage-box h3 {
    margin: 0 0 7px;
    color: #28432e;
}

.vc-storage-box p {
    margin: 0;
    color: #748078;
    font-size: 13px;
    line-height: 1.7;
}

.vc-review-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}

.vc-review-summary > div > strong {
    display: block;
    color: #255e30;
    font-size: 43px;
}

.vc-review-summary > div > span {
    display: block;
    margin-top: 5px;
    color: #889289;
    font-size: 11px;
}

.vc-review-summary button {
    padding: 12px 20px;
    border: 0;
    border-radius: 9px;
    background: #317c3f;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}


/* ==========================================
   RELATED PRODUCTS
========================================== */

.vc-related-products {
    margin-top: 55px;
}

.vc-related-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 23px;
}

.vc-related-heading span {
    color: #3a8645;
    font-size: 12px;
    font-weight: 750;
    text-transform: uppercase;
}

.vc-related-heading h2 {
    margin: 5px 0 0;
    color: #1d3d24;
    font-size: clamp(26px,3vw,36px);
}

.vc-related-heading > a {
    color: #347e40;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.vc-related-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 18px;
}

.vc-related-card {
    overflow: hidden;
    border: 1px solid #e2eae0;
    border-radius: 18px;
    background: #fff;
    transition: .3s ease;
}

.vc-related-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 38px rgba(39,74,41,.10);
}

.vc-related-image {
    height: 220px;
    position: relative;
    overflow: hidden;
    background: #f3f7f1;
}

.vc-related-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vc-related-image > span {
    position: absolute;
    top: 13px;
    left: 13px;
    z-index: 2;
    padding: 5px 9px;
    border-radius: 50px;
    background: #fff;
    color: #347d40;
    font-size: 10px;
    font-weight: 750;
}

.vc-related-image button {
    position: absolute;
    right: 12px;
    top: 12px;
    width: 35px;
    height: 35px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #336d3b;
    cursor: pointer;
}

.vc-related-content {
    padding: 16px;
}

.vc-related-content small {
    color: #7c9c7d;
    font-size: 10px;
    text-transform: uppercase;
}

.vc-related-content h3 {
    margin: 4px 0 13px;
    color: #2a422f;
    font-size: 16px;
}

.vc-related-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.vc-related-bottom strong {
    color: #277039;
    font-size: 15px;
}

.vc-related-bottom a {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #307d3e;
    color: #fff;
    text-decoration: none;
}


/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 1100px) {

    .vc-product-main {
        gap: 28px;
        padding: 20px;
    }

    .vc-product-gallery {
        position: static;
    }

    .vc-product-thumb {
        width: 64px;
        height: 64px;
    }

    .vc-product-benefits {
        grid-template-columns: 1fr;
    }

    .vc-related-grid {
        grid-template-columns: repeat(2,1fr);
    }

}

@media (max-width: 900px) {

    .vc-product-main {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .vc-product-gallery {
        position: static;
        max-width: 420px;
        margin: 0 auto;
        width: 100%;
    }

    .vc-product-main-image {
        aspect-ratio: 1 / 1;
    }

    .vc-product-thumbnails {
        flex-direction: row;
        justify-content: center;
    }

    .vc-product-description-layout {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .vc-product-tab-grid {
        grid-template-columns: 1fr;
    }

    .vc-weight-btn {
        max-width: none;
    }

}

@media (max-width: 575px) {

    .vc-product-page {
        padding: 20px 12px 60px;
    }

    .vc-product-main {
        padding: 14px;
        border-radius: 18px;
        gap: 16px;
    }

    .vc-product-gallery {
        max-width: none;
    }

    .vc-product-main-image {
        aspect-ratio: 1 / 1;
        border-radius: 16px;
    }

    .vc-product-main-image > img {
        padding: 8px;
        min-height: 0;
    }

    .vc-product-thumb {
        width: 58px;
        height: 58px;
    }

    .vc-product-info {
        padding: 0;
    }

    .vc-product-info h1 {
        font-size: 24px;
    }

    .vc-product-price strong {
        font-size: 28px;
    }

    .vc-product-purchase {
        flex-wrap: nowrap !important;
        gap: 8px;
    }

    .vc-product-qty {
        flex-basis: 96px;
        width: 96px;
    }

    .vc-add-cart-btn,
    .vc-buy-now-btn {
        font-size: 12.5px;
        padding: 0 8px;
    }

    .vc-product-benefits {
        grid-template-columns: 1fr;
    }

    .vc-delivery-check {
        max-width: none;
    }

    .vc-product-details {
        padding: 18px 14px;
    }

    .vc-related-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .vc-related-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .vc-related-image {
        height: 160px;
    }

    .vc-related-content {
        padding: 12px;
    }

    .vc-related-content h3 {
        font-size: 14px;
    }

}

@media (max-width: 390px) {

    .vc-product-main-image {
        aspect-ratio: 1 / 1;
    }

    .vc-product-main-image > img {
        min-height: 0;
    }

    .vc-product-purchase {
        flex-wrap: nowrap !important;
        gap: 6px;
    }

    .vc-product-qty {
        flex: 0 0 88px;
        width: 88px;
        grid-column: auto;
    }

    .vc-product-purchase.vc-purchase-tiers-only {
        flex-wrap: nowrap !important;
    }

    .vc-add-cart-btn span {
        display: none;
    }

    .vc-add-cart-btn::after {
        content: "Cart";
        font-weight: 800;
    }

    .vc-related-grid {
        grid-template-columns: 1fr;
    }

    .vc-related-image {
        height: 220px;
    }

}

/* ============================================
   VEGGICART PREMIUM PRODUCT LIST / SHOP PAGE
============================================ */

.vc-shop-page {
    width: 100%;
    padding: 55px 20px 85px;
    background:
        radial-gradient(circle at 0 0, rgba(76, 158, 68, .10), transparent 25%),
        radial-gradient(circle at 100% 100%, rgba(159, 204, 84, .12), transparent 25%),
        #f7faf6;
    font-family: "Inter", sans-serif;
}

.vc-shop-container {
    width: 100%;
    max-width: 1420px;
    margin: 0 auto;
}


/* ============================================
   PAGE HEADER
============================================ */

.vc-shop-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 34px 38px;
    margin-bottom: 28px;
    overflow: hidden;
    position: relative;
    border: 1px solid #e0eadd;
    border-radius: 25px;
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.97),
            rgba(240,248,237,.95)
        );
    box-shadow: 0 18px 45px rgba(38, 76, 41, .07);
}

.vc-shop-head::after {
    content: "";
    width: 210px;
    height: 210px;
    position: absolute;
    top: -90px;
    right: -50px;
    border-radius: 50%;
    background: rgba(103, 173, 75, .10);
}

.vc-shop-head > div {
    position: relative;
    z-index: 2;
}

.vc-shop-eyebrow {
    display: inline-block;
    margin-bottom: 8px;
    color: #3a8547;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.vc-shop-head h1 {
    margin: 0 0 10px;
    color: #173b20;
    font-size: clamp(31px, 4vw, 47px);
    line-height: 1.15;
    font-weight: 850;
}

.vc-shop-head p {
    max-width: 720px;
    margin: 0;
    color: #68766b;
    font-size: 15px;
    line-height: 1.75;
}

.vc-shop-head-stat {
    min-width: 220px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 18px;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(42,79,43,.08);
}

.vc-shop-head-stat > span {
    width: 45px;
    height: 45px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #e8f4e5;
    color: #347d41;
    font-size: 18px;
}

.vc-shop-head-stat strong,
.vc-shop-head-stat small {
    display: block;
}

.vc-shop-head-stat strong {
    margin-bottom: 2px;
    color: #29422e;
    font-size: 13px;
}

.vc-shop-head-stat small {
    color: #889389;
    font-size: 10px;
}


/* ============================================
   TOOLBAR
============================================ */

.vc-shop-toolbar {
    display: grid;
    grid-template-columns:
        minmax(260px, 1fr)
        auto
        auto;
    gap: 15px;
    align-items: center;
    padding: 15px;
    margin-bottom: 24px;
    border: 1px solid #e0e8dd;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(36,72,39,.05);
}

.vc-shop-search {
    position: relative;
}

.vc-shop-search i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #659267;
}

.vc-shop-search input {
    width: 100%;
    height: 50px;
    padding: 0 17px 0 45px;
    border: 1px solid #dce6d8;
    border-radius: 11px;
    outline: none;
    background: #fafcf9;
    color: #314735;
    font-family: inherit;
    font-size: 13px;
}

.vc-shop-search input:focus {
    border-color: #65a861;
    box-shadow: 0 0 0 4px rgba(61, 137, 67, .07);
}

.vc-shop-result-count {
    white-space: nowrap;
    color: #77837a;
    font-size: 12px;
}

.vc-shop-result-count strong {
    color: #2c7439;
}

.vc-shop-sort {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vc-shop-sort label {
    white-space: nowrap;
    color: #718074;
    font-size: 11px;
    font-weight: 700;
}

.vc-shop-sort select {
    height: 45px;
    min-width: 175px;
    padding: 0 11px;
    border: 1px solid #dce6d9;
    border-radius: 9px;
    outline: none;
    background: #fff;
    color: #394e3d;
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
}

.vc-mobile-filter-btn {
    display: none;
}


/* ============================================
   SHOP LAYOUT
============================================ */

.vc-shop-layout {
    display: grid;
    grid-template-columns: 265px minmax(0,1fr);
    gap: 24px;
    align-items: start;
}


/* ============================================
   FILTER SIDEBAR
============================================ */

.vc-shop-filter {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 110px;
}

.vc-filter-mobile-head {
    display: none;
}

.vc-filter-box {
    padding: 20px;
    border: 1px solid #e2eae0;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 9px 30px rgba(34,69,38,.05);
}

.vc-filter-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 13px;
    margin-bottom: 13px;
    border-bottom: 1px solid #edf1eb;
}

.vc-filter-title h3 {
    margin: 0;
    color: #2c4731;
    font-size: 15px;
    font-weight: 800;
}

.vc-filter-title i {
    color: #63a05e;
    font-size: 14px;
}


/* CATEGORY */

.vc-category-filter {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vc-category-filter label {
    min-height: 40px;
    display: grid;
    grid-template-columns: 18px 1fr auto;
    gap: 9px;
    align-items: center;
    padding: 7px 8px;
    border-radius: 8px;
    color: #657169;
    font-size: 12px;
    cursor: pointer;
    transition: .2s ease;
}

.vc-category-filter label:hover,
.vc-category-filter label.active {
    background: #eef7eb;
    color: #287537;
}

.vc-category-filter input {
    position: absolute;
    opacity: 0;
}

.vc-filter-radio {
    width: 17px;
    height: 17px;
    border: 2px solid #b1c0ae;
    border-radius: 50%;
    position: relative;
}

.vc-category-filter label.active
.vc-filter-radio {
    border-color: #347d41;
}

.vc-category-filter label.active
.vc-filter-radio::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #347d41;
}

.vc-category-filter small {
    min-width: 24px;
    padding: 3px 6px;
    border-radius: 50px;
    background: #f0f4ee;
    color: #859087;
    text-align: center;
    font-size: 9px;
}


/* PRICE */

.vc-price-options {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.vc-price-options label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #68746b;
    font-size: 12px;
    cursor: pointer;
}

.vc-price-options input {
    width: 16px;
    height: 16px;
    accent-color: #347d41;
}


/* FILTER PROMO */

.vc-filter-promo {
    padding: 23px 18px;
    overflow: hidden;
    position: relative;
    border-radius: 17px;
    background:
        linear-gradient(
            145deg,
            #1b522a,
            #2e7d3c
        );
    color: #fff;
}

.vc-filter-promo > span {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 13px;
    border-radius: 12px;
    background: rgba(255,255,255,.13);
}

.vc-filter-promo h3 {
    margin: 0 0 6px;
    font-size: 16px;
}

.vc-filter-promo p {
    margin: 0;
    color: rgba(255,255,255,.70);
    font-size: 11px;
    line-height: 1.6;
}


/* ============================================
   PRODUCT GRID
============================================ */

.vc-product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 17px;
}


/* ============================================
   PRODUCT CARD
============================================ */

.vc-list-product-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e1e9df;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(35,70,39,.05);
    transition: .3s ease;
}

.vc-list-product-card:hover {
    transform: translateY(-5px);
    border-color: #d2e3ce;
    box-shadow: 0 18px 40px rgba(34,75,40,.11);
}


/* IMAGE */

.vc-list-image {
    height: 210px;
    overflow: hidden;
    position: relative;
    background: #f3f7f1;
}

.vc-list-image > a {
    width: 100%;
    height: 100%;
    display: block;
}

.vc-list-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .4s ease;
}

.vc-list-product-card:hover
.vc-list-image img {
    transform: scale(1.05);
}

.vc-list-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    padding: 5px 9px;
    border-radius: 50px;
    background: #e95454;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.vc-badge-green {
    background: #328044;
}

.vc-list-wishlist {
    position: absolute;
    top: 11px;
    right: 11px;
    z-index: 2;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.95);
    color: #386a40;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 6px 17px rgba(0,0,0,.09);
}

.vc-list-wishlist.active {
    color: #dc4d54;
}

.vc-list-quick-actions {
    position: absolute;
    right: 11px;
    bottom: 11px;
    transform: translateY(12px);
    opacity: 0;
    transition: .25s ease;
}

.vc-list-product-card:hover
.vc-list-quick-actions {
    transform: translateY(0);
    opacity: 1;
}

.vc-list-quick-actions a {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #fff;
    color: #31773e;
    text-decoration: none;
}


/* CONTENT */

.vc-list-content {
    padding: 15px;
}

.vc-list-category {
    display: block;
    margin-bottom: 3px;
    color: #6d9b6d;
    font-size: 9px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.vc-list-content h3 {
    margin: 0 0 7px;
    line-height: 1.35;
}

.vc-list-content h3 a {
    color: #263f2b;
    font-size: 15px;
    font-weight: 750;
    text-decoration: none;
}

.vc-list-content h3 a:hover {
    color: #2d7c3c;
}


/* RATINGS */

.vc-list-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.vc-list-rating > div {
    display: flex;
    gap: 2px;
    color: #f6b81d;
    font-size: 9px;
}

.vc-list-rating > span {
    color: #889289;
    font-size: 9px;
}


/* PACK */

.vc-list-pack {
    display: inline-flex;
    padding: 4px 7px;
    margin-bottom: 8px;
    border-radius: 6px;
    background: #f2f6f0;
    color: #68766a;
    font-size: 9px;
    font-weight: 650;
}


/* PRICE */

.vc-list-price {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
}

.vc-list-price strong {
    color: #267238;
    font-size: 18px;
    font-weight: 850;
}

.vc-list-price del {
    color: #a2aba3;
    font-size: 11px;
}


/* STOCK */

.vc-list-stock {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 12px;
    color: #398049;
    font-size: 9px;
    font-weight: 700;
}

.vc-list-stock i {
    font-size: 6px;
}


/* CART BUTTON */

.vc-list-cart-btn {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
    border-radius: 10px;
    background:
        linear-gradient(
            135deg,
            #2d7c3c,
            #41954e
        );
    color: #fff;
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    transition: .25s ease;
}

.vc-list-cart-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(40,120,55,.20);
}


/* ============================================
   NO PRODUCTS
============================================ */

.vc-no-products {
    display: none;
    padding: 70px 20px;
    text-align: center;
    border: 1px dashed #ccd9c9;
    border-radius: 18px;
    background: #fff;
}

.vc-no-products i {
    margin-bottom: 15px;
    color: #71a06f;
    font-size: 35px;
}

.vc-no-products h3 {
    margin: 0 0 5px;
    color: #304735;
}

.vc-no-products p {
    margin: 0;
    color: #818c83;
    font-size: 12px;
}


/* ============================================
   PAGINATION
============================================ */

.vc-shop-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 35px;
}

.vc-shop-pagination a,
.vc-shop-pagination button {
    width: 39px;
    height: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dbe6d8;
    border-radius: 9px;
    background: #fff;
    color: #49624e;
    font-size: 11px;
    text-decoration: none;
    cursor: pointer;
}

.vc-shop-pagination a.active {
    border-color: #307d3e;
    background: #307d3e;
    color: #fff;
}

.vc-shop-pagination button:disabled {
    opacity: .45;
    cursor: not-allowed;
}


/* ============================================
   FILTER OVERLAY
============================================ */

.vc-filter-overlay {
    display: none;
}


/* ============================================
   LARGE TABLET
============================================ */

@media (max-width: 1250px) {

    .vc-product-grid {
        grid-template-columns:
            repeat(3, minmax(0,1fr));
    }

}


/* ============================================
   TABLET
============================================ */

@media (max-width: 980px) {

    .vc-shop-head {
        align-items: flex-start;
    }

    .vc-shop-head-stat {
        display: none;
    }

    .vc-shop-toolbar {
        grid-template-columns: 1fr auto auto;
    }

    .vc-mobile-filter-btn {
        height: 45px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 0 15px;
        border: 0;
        border-radius: 9px;
        background: #2f7b3d;
        color: #fff;
        font-family: inherit;
        font-size: 11px;
        font-weight: 750;
        cursor: pointer;
    }

    .vc-shop-layout {
        grid-template-columns: 1fr;
    }

    .vc-shop-filter {
        width: min(340px, 88vw);
        height: 100vh;
        position: fixed;
        top: 0;
        left: -110%;
        z-index: 99999;
        overflow-y: auto;
        padding: 16px;
        background: #f7faf6;
        transition: left .3s ease;
    }

    .vc-shop-filter.open {
        left: 0;
    }

    .vc-filter-mobile-head {
        min-height: 55px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 5px;
    }

    .vc-filter-mobile-head strong {
        color: #23432a;
        font-size: 18px;
    }

    .vc-filter-mobile-head button {
        width: 39px;
        height: 39px;
        border: 0;
        border-radius: 9px;
        background: #e8f2e5;
        color: #2f733a;
        cursor: pointer;
    }

    .vc-filter-overlay {
        width: 100%;
        height: 100%;
        display: block;
        position: fixed;
        inset: 0;
        z-index: 99990;
        background: rgba(17,38,21,.55);
        opacity: 0;
        visibility: hidden;
        transition: .3s ease;
    }

    .vc-filter-overlay.show {
        opacity: 1;
        visibility: visible;
    }

}


/* ============================================
   SMALL TABLET
============================================ */

@media (max-width: 760px) {

    .vc-shop-page {
        padding: 35px 14px 65px;
    }

    .vc-shop-head {
        padding: 25px 22px;
        border-radius: 19px;
    }

    .vc-shop-toolbar {
        grid-template-columns: 1fr auto;
    }

    .vc-shop-search {
        grid-column: 1 / -1;
    }

    .vc-shop-result-count {
        display: none;
    }

    .vc-product-grid {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
        gap: 12px;
    }

}


/* ============================================
   MOBILE
============================================ */

@media (max-width: 520px) {

    .vc-shop-page {
        padding-left: 10px;
        padding-right: 10px;
    }

    .vc-shop-head h1 {
        font-size: 29px;
    }

    .vc-shop-head p {
        font-size: 13px;
    }

    .vc-shop-toolbar {
        padding: 10px;
        gap: 9px;
    }

    .vc-shop-sort label {
        display: none;
    }

    .vc-shop-sort select {
        min-width: 135px;
        max-width: 145px;
    }

    .vc-product-grid {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
        gap: 9px;
    }

    .vc-list-image {
        height: 155px;
    }

    .vc-list-content {
        padding: 11px;
    }

    .vc-list-content h3 a {
        font-size: 13px;
    }

    .vc-list-price strong {
        font-size: 16px;
    }

    .vc-list-cart-btn {
        min-height: 39px;
        font-size: 10px;
    }

}


/* ============================================
   VERY SMALL MOBILE
============================================ */

@media (max-width: 370px) {

    .vc-product-grid {
        grid-template-columns: 1fr;
    }

    .vc-list-image {
        height: 220px;
    }

}

/* ==========================================
   VEGGICART PREMIUM WISHLIST
========================================== */

.vc-wishlist-page {
    width: 100%;
    padding: 60px 20px 85px;
    background:
        radial-gradient(circle at 0 0, rgba(69, 151, 65, .10), transparent 26%),
        radial-gradient(circle at 100% 100%, rgba(151, 201, 78, .12), transparent 26%),
        #f7faf6;
    font-family: "Inter", sans-serif;
}

.vc-wishlist-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}


/* HEADER */

.vc-wishlist-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    padding: 32px 35px;
    margin-bottom: 30px;
    border: 1px solid #e0e9dd;
    border-radius: 24px;
    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f1f8ee
        );
    box-shadow: 0 16px 42px rgba(38, 77, 42, .07);
}

.vc-wishlist-badge {
    display: inline-flex;
    padding: 7px 14px;
    margin-bottom: 9px;
    border-radius: 50px;
    background: #e8f4e5;
    color: #347b41;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.vc-wishlist-head h1 {
    margin: 0 0 8px;
    color: #173a20;
    font-size: clamp(32px, 4vw, 46px);
    line-height: 1.15;
    font-weight: 850;
}

.vc-wishlist-head p {
    max-width: 720px;
    margin: 0;
    color: #69766b;
    font-size: 14px;
    line-height: 1.7;
}

.vc-wishlist-head-actions {
    min-width: 250px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 11px;
}

.vc-wishlist-count {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #68766a;
    font-size: 12px;
}

.vc-wishlist-count i {
    color: #dc5260;
}

.vc-wishlist-count strong {
    color: #2d743a;
    font-size: 15px;
}

.vc-move-all-btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 20px;
    border: 0;
    border-radius: 11px;
    background:
        linear-gradient(
            135deg,
            #2c7b3b,
            #439650
        );
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: .25s ease;
}

.vc-move-all-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(42, 120, 55, .20);
}


/* PRODUCT GRID */

.vc-wishlist-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}


/* CARD */

.vc-wishlist-card {
    overflow: hidden;
    border: 1px solid #e0e9de;
    border-radius: 19px;
    background: #fff;
    box-shadow: 0 9px 30px rgba(35, 71, 39, .05);
    transition: .3s ease;
}

.vc-wishlist-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 42px rgba(34, 74, 40, .11);
}


/* IMAGE */

.vc-wishlist-image {
    height: 225px;
    position: relative;
    overflow: hidden;
    background: #f2f6f0;
}

.vc-wishlist-image > a {
    width: 100%;
    height: 100%;
    display: block;
}

.vc-wishlist-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .4s ease;
}

.vc-wishlist-card:hover img {
    transform: scale(1.05);
}

.vc-wishlist-offer {
    position: absolute;
    top: 13px;
    left: 13px;
    z-index: 2;
    padding: 6px 9px;
    border-radius: 50px;
    background: #df5258;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.vc-green-badge {
    background: #328044;
}

.vc-wishlist-remove {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.96);
    color: #d85159;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0,0,0,.09);
    transition: .2s ease;
}

.vc-wishlist-remove:hover {
    background: #db4e55;
    color: #fff;
}


/* CONTENT */

.vc-wishlist-content {
    padding: 17px;
}

.vc-wishlist-category {
    display: block;
    margin-bottom: 4px;
    color: #73a171;
    font-size: 9px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.vc-wishlist-content h3 {
    margin: 0 0 8px;
    line-height: 1.35;
}

.vc-wishlist-content h3 a {
    color: #263f2b;
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
}

.vc-wishlist-content h3 a:hover {
    color: #2e7b3c;
}


/* RATING */

.vc-wishlist-rating {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 11px;
}

.vc-wishlist-rating > div {
    display: flex;
    gap: 2px;
    color: #f5b71b;
    font-size: 9px;
}

.vc-wishlist-rating span {
    color: #879189;
    font-size: 9px;
}


/* META */

.vc-wishlist-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 11px;
}

.vc-wishlist-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 7px;
    background: #f3f7f1;
    color: #69766b;
    font-size: 9px;
    font-weight: 650;
}

.vc-wishlist-meta .vc-wishlist-stock {
    background: #ebf8e8;
    color: #2b7c3a;
}


/* PRICE */

.vc-wishlist-price {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.vc-wishlist-price strong {
    color: #277138;
    font-size: 20px;
    font-weight: 850;
}

.vc-wishlist-price del {
    color: #9da79e;
    font-size: 11px;
}


/* CART BUTTON */

.vc-wishlist-cart-btn {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 10px;
    background:
        linear-gradient(
            135deg,
            #2d7c3c,
            #42964f
        );
    color: #fff;
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    transition: .25s ease;
}

.vc-wishlist-cart-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(39, 118, 53, .18);
}

.vc-wishlist-cart-btn.added {
    background: #173e22;
}


/* EMPTY WISHLIST */

.vc-empty-wishlist {
    display: none;
    max-width: 650px;
    margin: 40px auto 0;
    padding: 60px 25px;
    border: 1px dashed #cbd9c8;
    border-radius: 22px;
    background: #fff;
    text-align: center;
}

.vc-empty-wishlist > span {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #edf6ea;
    color: #45914c;
    font-size: 30px;
}

.vc-empty-wishlist h2 {
    margin: 0 0 8px;
    color: #243f2a;
    font-size: 25px;
}

.vc-empty-wishlist p {
    max-width: 480px;
    margin: 0 auto 20px;
    color: #7c887e;
    font-size: 13px;
    line-height: 1.7;
}

.vc-empty-wishlist a {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    border-radius: 10px;
    background: #307c3e;
    color: #fff;
    font-size: 12px;
    font-weight: 750;
    text-decoration: none;
}


/* BOTTOM */

.vc-wishlist-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 25px;
    margin-top: 30px;
    border-top: 1px solid #e2e9e0;
}

.vc-wishlist-continue {
    min-height: 45px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 17px;
    border: 1px solid #d6e2d3;
    border-radius: 10px;
    background: #fff;
    color: #2c7339;
    font-size: 11px;
    font-weight: 750;
    text-decoration: none;
}

.vc-wishlist-bottom > div {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #7a887c;
    font-size: 11px;
}

.vc-wishlist-bottom > div i {
    color: #3d8746;
}


/* RESPONSIVE */

@media (max-width: 1200px) {

    .vc-wishlist-grid {
        grid-template-columns: repeat(3, minmax(0,1fr));
    }

}

@media (max-width: 900px) {

    .vc-wishlist-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .vc-wishlist-head-actions {
        width: 100%;
        align-items: flex-start;
    }

    .vc-wishlist-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

}

@media (max-width: 575px) {

    .vc-wishlist-page {
        padding: 35px 10px 65px;
    }

    .vc-wishlist-head {
        padding: 23px 18px;
        border-radius: 18px;
    }

    .vc-wishlist-head h1 {
        font-size: 30px;
    }

    .vc-move-all-btn {
        width: 100%;
    }

    .vc-wishlist-grid {
        gap: 10px;
    }

    .vc-wishlist-image {
        height: 165px;
    }

    .vc-wishlist-content {
        padding: 12px;
    }

    .vc-wishlist-content h3 a {
        font-size: 13px;
    }

    .vc-wishlist-price strong {
        font-size: 17px;
    }

    .vc-wishlist-meta {
        align-items: flex-start;
        flex-direction: column;
    }

    .vc-wishlist-bottom {
        align-items: stretch;
        flex-direction: column;
    }

}

@media (max-width: 370px) {

    .vc-wishlist-grid {
        grid-template-columns: 1fr;
    }

    .vc-wishlist-image {
        height: 230px;
    }

}

/* ============================================
   VEGGICART PREMIUM LOGIN PAGE
============================================ */

.vc-login-page {
    width: 100%;
    padding: 65px 20px 85px;
    background:
        radial-gradient(circle at 5% 5%, rgba(75, 155, 68, .11), transparent 25%),
        radial-gradient(circle at 95% 95%, rgba(156, 204, 79, .12), transparent 27%),
        #f7faf6;
    font-family: "Inter", sans-serif;
}

.vc-login-container {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
}

.vc-login-layout {
    min-height: 650px;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    overflow: hidden;
    border: 1px solid #dfe9dd;
    border-radius: 28px;
    background: #fff;
    box-shadow:
        0 25px 65px rgba(30, 75, 36, .12);
}


/* ============================================
   LEFT VISUAL
============================================ */

.vc-login-visual {
    min-height: 650px;
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background:
        url("https://images.unsplash.com/photo-1542838132-92c53300491e?auto=format&fit=crop&w=1200&q=85")
        center / cover no-repeat;
}

.vc-login-visual-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(13, 55, 24, .20),
            rgba(13, 55, 24, .88)
        );
}

.vc-login-visual-content {
    width: 100%;
    position: relative;
    z-index: 2;
    padding: 45px;
    color: #fff;
}

.vc-login-kicker {
    display: inline-flex;
    padding: 7px 13px;
    margin-bottom: 12px;
    border-radius: 50px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.18);
    color: #eaffdf;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .7px;
    text-transform: uppercase;
}

.vc-login-visual-content h1 {
    max-width: 520px;
    margin: 0 0 13px;
    color: #fff;
    font-size: clamp(34px, 4vw, 48px);
    line-height: 1.12;
    font-weight: 850;
}

.vc-login-visual-content > p {
    max-width: 520px;
    margin: 0 0 27px;
    color: rgba(255,255,255,.78);
    font-size: 14px;
    line-height: 1.8;
}


/* BENEFITS */

.vc-login-benefits {
    display: grid;
    gap: 11px;
}

.vc-login-benefit {
    max-width: 480px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 13px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 13px;
    background: rgba(255,255,255,.09);
    backdrop-filter: blur(8px);
}

.vc-login-benefit > span {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255,255,255,.13);
    color: #d9ffca;
}

.vc-login-benefit strong,
.vc-login-benefit small {
    display: block;
}

.vc-login-benefit strong {
    margin-bottom: 2px;
    color: #fff;
    font-size: 12px;
}

.vc-login-benefit small {
    color: rgba(255,255,255,.66);
    font-size: 10px;
}


/* ============================================
   FORM SIDE
============================================ */

.vc-login-form-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 44px;
}

.vc-login-form-head {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 11px;
}

.vc-login-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background:
        linear-gradient(
            135deg,
            #e6f4e2,
            #f5faef
        );
    color: #317b3e;
    font-size: 19px;
}

.vc-login-form-head > div > span {
    display: block;
    margin-bottom: 2px;
    color: #6d9c6a;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.vc-login-form-head h2 {
    margin: 0;
    color: #1e4026;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 850;
}

.vc-login-intro {
    margin: 0 0 25px;
    color: #748076;
    font-size: 12px;
    line-height: 1.7;
}


/* ============================================
   LOGIN MODE SWITCH
============================================ */

.vc-login-mode-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 0 0 16px;
    padding: 6px;
    border-radius: 14px;
    background: #f3f8f3;
    border: 1px solid #e6efe7;
}

.vc-login-mode {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #4d6352;
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
    padding: 8px 10px;
}

.vc-login-mode.is-active {
    background: #12833B;
    color: #fff;
    box-shadow: 0 8px 18px rgba(18, 131, 59, 0.18);
}

.vc-login-hint {
    display: block;
    margin-top: 8px;
    color: #5f6b66;
    font-size: 12px;
}

.vc-login-resend {
    margin-top: 10px;
    border: 0;
    background: transparent;
    color: #12833B;
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
    padding: 0;
}

.vc-login-field[hidden],
.vc-login-options[hidden] {
    display: none !important;
}

/* ============================================
   FORM FIELDS
============================================ */

.vc-login-form {
    width: 100%;
}

.vc-login-field {
    margin-bottom: 18px;
}

.vc-login-field label {
    display: block;
    margin-bottom: 7px;
    color: #354a39;
    font-size: 12px;
    font-weight: 700;
}

.vc-login-field label span {
    color: #dd5159;
}

.vc-login-input {
    position: relative;
}

.vc-login-input > i {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: #75a072;
    font-size: 13px;
    pointer-events: none;
}

.vc-login-input input {
    width: 100%;
    height: 53px;
    padding: 0 15px 0 43px;
    border: 1px solid #dbe6d8;
    border-radius: 12px;
    outline: none;
    background: #fbfdf9;
    color: #304635;
    font-family: inherit;
    font-size: 13px;
    transition: .25s ease;
}

.vc-login-input input::placeholder {
    color: #9da79f;
}

.vc-login-input input:focus {
    border-color: #68a962;
    background: #fff;
    box-shadow:
        0 0 0 4px rgba(58, 136, 65, .08);
}


/* PASSWORD */

.vc-login-password-wrap input {
    padding-right: 48px;
}

.vc-password-toggle {
    width: 38px;
    height: 38px;
    position: absolute;
    top: 50%;
    right: 7px;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #809083;
    cursor: pointer;
    pointer-events: auto;
}

.vc-password-toggle:hover {
    background: #eef6eb;
    color: #347c41;
}


/* OPTIONS */

.vc-login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin: 4px 0 21px;
}

.vc-remember-me {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6a786d;
    font-size: 11px;
    cursor: pointer;
}

.vc-remember-me input {
    position: absolute;
    opacity: 0;
}

.vc-checkmark {
    width: 17px;
    height: 17px;
    position: relative;
    border: 1px solid #bdcdb9;
    border-radius: 5px;
    background: #fff;
}

.vc-remember-me input:checked + .vc-checkmark {
    border-color: #337d40;
    background: #337d40;
}

.vc-remember-me input:checked + .vc-checkmark::after {
    content: "?";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
}

.vc-login-options > a {
    color: #31783e;
    font-size: 11px;
    font-weight: 750;
    text-decoration: none;
}

.vc-login-options > a:hover {
    text-decoration: underline;
}


/* LOGIN BUTTON */

.vc-login-submit {
    width: 100%;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: 12px;
    background:
        linear-gradient(
            135deg,
            #2d7b3c,
            #429650
        );
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    box-shadow:
        0 10px 25px rgba(42, 121, 56, .20);
    transition: .25s ease;
}

.vc-login-submit:hover {
    transform: translateY(-2px);
    box-shadow:
        0 15px 30px rgba(42, 121, 56, .25);
}


/* DIVIDER */

.vc-login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 23px 0;
}

.vc-login-divider::before,
.vc-login-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: #e2e9e0;
}

.vc-login-divider span {
    color: #919b92;
    font-size: 10px;
    white-space: nowrap;
}


/* REGISTER */

.vc-login-register {
    width: 100%;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #d7e4d4;
    border-radius: 11px;
    background: #fff;
    color: #31753d;
    font-size: 12px;
    font-weight: 750;
    text-decoration: none;
    transition: .25s ease;
}

.vc-login-register:hover {
    border-color: #a9caa5;
    background: #f1f8ee;
}


/* SECURITY */

.vc-login-security {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    margin-top: 24px;
    border-radius: 11px;
    background: #f3f8f1;
}

.vc-login-security > span {
    color: #3c8445;
    margin-top: 2px;
}

.vc-login-security strong,
.vc-login-security small {
    display: block;
}

.vc-login-security strong {
    margin-bottom: 2px;
    color: #3a503e;
    font-size: 10px;
}

.vc-login-security small {
    color: #7f8b81;
    font-size: 9px;
    line-height: 1.5;
}


/* ============================================
   TABLET
============================================ */

@media (max-width: 900px) {

    .vc-login-layout {
        grid-template-columns: 1fr;
    }

    .vc-login-visual {
        min-height: 420px;
    }

    .vc-login-visual-content {
        padding: 35px;
    }

    .vc-login-form-wrap {
        padding: 40px 35px;
    }

}


/* ============================================
   MOBILE
============================================ */

@media (max-width: 575px) {

    .vc-login-page {
        padding: 35px 11px 60px;
    }

    .vc-login-layout {
        min-height: auto;
        border-radius: 20px;
    }

    .vc-login-visual {
        min-height: 340px;
    }

    .vc-login-visual-content {
        padding: 26px 20px;
    }

    .vc-login-visual-content h1 {
        font-size: 31px;
    }

    .vc-login-visual-content > p {
        font-size: 12px;
    }

    .vc-login-benefit {
        padding: 10px;
    }

    .vc-login-form-wrap {
        padding: 30px 18px;
    }

    .vc-login-form-head h2 {
        font-size: 24px;
    }

}


/* ============================================
   VERY SMALL MOBILE
============================================ */

@media (max-width: 390px) {

    .vc-login-options {
        align-items: flex-start;
        flex-direction: column;
    }

    .vc-login-visual {
        min-height: 380px;
    }

}

/* ============================================
   VEGGICART PREMIUM SIGNUP PAGE
============================================ */

.vc-signup-page {
    width: 100%;
    padding: 65px 20px 85px;
    background:
        radial-gradient(circle at 5% 5%, rgba(75, 155, 68, .11), transparent 25%),
        radial-gradient(circle at 95% 95%, rgba(156, 204, 79, .12), transparent 27%),
        #f7faf6;
    font-family: "Inter", sans-serif;
}

.vc-signup-container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}

.vc-signup-layout {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    overflow: hidden;
    border: 1px solid #dfe9dd;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 25px 65px rgba(30, 75, 36, .12);
}


/* ============================================
   LEFT VISUAL
============================================ */

.vc-signup-visual {
    min-height: 760px;
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background:
        url("https://images.unsplash.com/photo-1610348725531-843dff563e2c?auto=format&fit=crop&w=1200&q=85")
        center / cover no-repeat;
}

.vc-signup-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(13, 55, 24, .18),
            rgba(13, 55, 24, .90)
        );
}

.vc-signup-visual-content {
    width: 100%;
    position: relative;
    z-index: 2;
    padding: 45px;
    color: #fff;
}

.vc-signup-kicker {
    display: inline-flex;
    padding: 7px 13px;
    margin-bottom: 12px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50px;
    background: rgba(255,255,255,.14);
    color: #eaffdf;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .7px;
    text-transform: uppercase;
}

.vc-signup-visual-content h1 {
    max-width: 530px;
    margin: 0 0 13px;
    color: #fff;
    font-size: clamp(34px, 4vw, 48px);
    line-height: 1.12;
    font-weight: 850;
}

.vc-signup-visual-content > p {
    max-width: 520px;
    margin: 0 0 28px;
    color: rgba(255,255,255,.78);
    font-size: 14px;
    line-height: 1.8;
}


/* BENEFITS */

.vc-signup-benefits {
    display: grid;
    gap: 11px;
}

.vc-signup-benefit {
    max-width: 480px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 13px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 13px;
    background: rgba(255,255,255,.09);
    backdrop-filter: blur(8px);
}

.vc-signup-benefit > span {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255,255,255,.13);
    color: #d9ffca;
}

.vc-signup-benefit strong,
.vc-signup-benefit small {
    display: block;
}

.vc-signup-benefit strong {
    margin-bottom: 2px;
    color: #fff;
    font-size: 12px;
}

.vc-signup-benefit small {
    color: rgba(255,255,255,.66);
    font-size: 10px;
}


/* ============================================
   FORM SIDE
============================================ */

.vc-signup-form-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 45px 42px;
}

.vc-signup-form-head {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 10px;
}

.vc-signup-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background:
        linear-gradient(
            135deg,
            #e6f4e2,
            #f5faef
        );
    color: #317b3e;
    font-size: 19px;
}

.vc-signup-form-head > div > span {
    display: block;
    margin-bottom: 2px;
    color: #6d9c6a;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.vc-signup-form-head h2 {
    margin: 0;
    color: #1e4026;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 850;
}

.vc-signup-intro {
    margin: 0 0 23px;
    color: #748076;
    font-size: 12px;
    line-height: 1.7;
}


/* ============================================
   FIELDS
============================================ */

.vc-signup-field {
    margin-bottom: 16px;
}

.vc-signup-field label {
    display: block;
    margin-bottom: 7px;
    color: #354a39;
    font-size: 12px;
    font-weight: 700;
}

.vc-signup-field label span {
    color: #dd5159;
}

.vc-signup-input {
    position: relative;
}

.vc-signup-input > i {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: #75a072;
    font-size: 13px;
    pointer-events: none;
}

.vc-signup-input input {
    width: 100%;
    height: 52px;
    padding: 0 15px 0 43px;
    border: 1px solid #dbe6d8;
    border-radius: 12px;
    outline: none;
    background: #fbfdf9;
    color: #304635;
    font-family: inherit;
    font-size: 13px;
    transition: .25s ease;
}

.vc-signup-input input::placeholder {
    color: #9da79f;
}

.vc-signup-input input:focus {
    border-color: #68a962;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(58, 136, 65, .08);
}


/* PASSWORD */

.vc-signup-password-wrap input {
    padding-right: 48px;
}

.vc-signup-password-toggle {
    width: 38px;
    height: 38px;
    position: absolute;
    top: 50%;
    right: 7px;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #809083;
    cursor: pointer;
    pointer-events: auto;
}

.vc-signup-password-toggle:hover {
    background: #eef6eb;
    color: #347c41;
}


/* TERMS */

.vc-signup-terms {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 4px 0 20px;
    color: #6e7b70;
    font-size: 10px;
    line-height: 1.6;
    cursor: pointer;
}

.vc-signup-terms input {
    position: absolute;
    opacity: 0;
}

.vc-signup-checkmark {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    position: relative;
    border: 1px solid #bdcdb9;
    border-radius: 5px;
    background: #fff;
}

.vc-signup-terms input:checked + .vc-signup-checkmark {
    border-color: #337d40;
    background: #337d40;
}

.vc-signup-terms input:checked + .vc-signup-checkmark::after {
    content: "?";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
}

.vc-signup-terms a {
    color: #31783e;
    font-weight: 750;
    text-decoration: none;
}

.vc-signup-terms a:hover {
    text-decoration: underline;
}


/* SUBMIT */

.vc-signup-submit {
    width: 100%;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: 12px;
    background:
        linear-gradient(
            135deg,
            #2d7b3c,
            #429650
        );
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(42, 121, 56, .20);
    transition: .25s ease;
}

.vc-signup-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(42, 121, 56, .25);
}


/* DIVIDER */

.vc-signup-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0;
}

.vc-signup-divider::before,
.vc-signup-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: #e2e9e0;
}

.vc-signup-divider span {
    color: #919b92;
    font-size: 10px;
    white-space: nowrap;
}


/* LOGIN CTA */

.vc-signup-login-btn {
    width: 100%;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #d7e4d4;
    border-radius: 11px;
    background: #fff;
    color: #31753d;
    font-size: 12px;
    font-weight: 750;
    text-decoration: none;
    transition: .25s ease;
}

.vc-signup-login-btn:hover {
    border-color: #a9caa5;
    background: #f1f8ee;
}


/* SECURITY */

.vc-signup-security {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    margin-top: 23px;
    border-radius: 11px;
    background: #f3f8f1;
}

.vc-signup-security > span {
    margin-top: 2px;
    color: #3c8445;
}

.vc-signup-security strong,
.vc-signup-security small {
    display: block;
}

.vc-signup-security strong {
    margin-bottom: 2px;
    color: #3a503e;
    font-size: 10px;
}

.vc-signup-security small {
    color: #7f8b81;
    font-size: 9px;
    line-height: 1.5;
}


/* ============================================
   TABLET
============================================ */

@media (max-width: 900px) {

    .vc-signup-layout {
        grid-template-columns: 1fr;
    }

    .vc-signup-visual {
        min-height: 430px;
    }

    .vc-signup-visual-content {
        padding: 35px;
    }

    .vc-signup-form-wrap {
        padding: 40px 35px;
    }

}


/* ============================================
   MOBILE
============================================ */

@media (max-width: 575px) {

    .vc-signup-page {
        padding: 35px 11px 60px;
    }

    .vc-signup-layout {
        border-radius: 20px;
    }

    .vc-signup-visual {
        min-height: 360px;
    }

    .vc-signup-visual-content {
        padding: 26px 20px;
    }

    .vc-signup-visual-content h1 {
        font-size: 31px;
    }

    .vc-signup-visual-content > p {
        font-size: 12px;
    }

    .vc-signup-form-wrap {
        padding: 30px 18px;
    }

    .vc-signup-form-head h2 {
        font-size: 24px;
    }

}

/* ============================================
   VEGGICART CATEGORY PRODUCT LISTING
============================================ */

.vc-category-page {
    width: 100%;
    padding: 45px 20px 85px;
    background:
        radial-gradient(circle at 0 0, rgba(71, 151, 65, .09), transparent 24%),
        radial-gradient(circle at 100% 100%, rgba(150, 201, 75, .11), transparent 27%),
        #f7faf6;
    font-family: "Inter", sans-serif;
}

.vc-category-container {
    width: 100%;
    max-width: 1420px;
    margin: 0 auto;
}


/* HERO */

.vc-category-hero {
    min-height: 300px;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    overflow: hidden;
    margin-bottom: 22px;
    border: 1px solid #dfe9dc;
    border-radius: 25px;
    background:
        linear-gradient(
            135deg,
            #173f22,
            #2d793a
        );
    box-shadow: 0 18px 45px rgba(30, 74, 36, .12);
}

.vc-category-hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px;
}

.vc-category-label {
    align-self: flex-start;
    padding: 7px 13px;
    margin-bottom: 11px;
    border-radius: 50px;
    background: rgba(255,255,255,.12);
    color: #d9ffc9;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .7px;
    text-transform: uppercase;
}

.vc-category-hero h1 {
    margin: 0 0 10px;
    color: #fff;
    font-size: clamp(34px, 4vw, 49px);
    line-height: 1.1;
    font-weight: 850;
}

.vc-category-hero p {
    max-width: 650px;
    margin: 0 0 22px;
    color: rgba(255,255,255,.74);
    font-size: 14px;
    line-height: 1.75;
}

.vc-category-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.vc-category-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 11px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 9px;
    background: rgba(255,255,255,.08);
    color: #fff;
    font-size: 10px;
}

.vc-category-meta i {
    color: #caffad;
}

.vc-category-hero-image {
    min-height: 300px;
}

.vc-category-hero-image img {
    width: 100%;
    height: 100%;
    min-height: 300px;
    display: block;
    object-fit: cover;
}


/* CATEGORY TABS */

.vc-category-tabs {
    display: flex;
    gap: 9px;
    overflow-x: auto;
    padding: 13px;
    margin-bottom: 20px;
    border: 1px solid #e0e9de;
    border-radius: 15px;
    background: #fff;
}

.vc-category-tabs a {
    min-height: 43px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 16px;
    border-radius: 9px;
    background: #f3f7f1;
    color: #526557;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}

.vc-category-tabs a.active,
.vc-category-tabs a:hover {
    background: #307d3e;
    color: #fff;
}


/* TOOLBAR */

.vc-category-toolbar {
    display: grid;
    grid-template-columns: minmax(270px,1fr) auto auto;
    gap: 14px;
    align-items: center;
    padding: 14px;
    margin-bottom: 22px;
    border: 1px solid #e1e9df;
    border-radius: 15px;
    background: #fff;
}

.vc-category-search {
    position: relative;
}

.vc-category-search i {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: #6e9b6b;
}

.vc-category-search input {
    width: 100%;
    height: 49px;
    padding: 0 15px 0 43px;
    border: 1px solid #dce6d9;
    border-radius: 10px;
    outline: none;
    background: #fafcf9;
}

.vc-category-search input:focus {
    border-color: #67a860;
}

.vc-category-results {
    color: #78847a;
    font-size: 11px;
    white-space: nowrap;
}

.vc-category-results strong {
    color: #2e763a;
}

.vc-category-sort {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vc-category-sort label {
    color: #78847a;
    font-size: 10px;
    font-weight: 700;
}

.vc-category-sort select {
    min-width: 175px;
    height: 44px;
    padding: 0 10px;
    border: 1px solid #dce6d9;
    border-radius: 9px;
    outline: none;
    background: #fff;
}

.vc-category-filter-btn {
    display: none;
}


/* LAYOUT */

.vc-category-layout {
    display: grid;
    grid-template-columns: 260px minmax(0,1fr);
    gap: 24px;
    align-items: start;
}


/* SIDEBAR */

.vc-category-sidebar {
    position: sticky;
    top: 110px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.vc-category-mobile-head {
    display: none;
}

.vc-category-filter-box {
    padding: 19px;
    border: 1px solid #e1e9df;
    border-radius: 16px;
    background: #fff;
}

.vc-category-filter-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    margin-bottom: 13px;
    border-bottom: 1px solid #edf1eb;
}

.vc-category-filter-title h3 {
    margin: 0;
    color: #2b4730;
    font-size: 14px;
}

.vc-category-filter-title i {
    color: #69a264;
}

.vc-category-check-list {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.vc-category-check-list label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #69766b;
    font-size: 11px;
    cursor: pointer;
}

.vc-category-check-list input {
    width: 16px;
    height: 16px;
    accent-color: #337d40;
}

.vc-category-filter-promo {
    padding: 23px 19px;
    border: 1px solid #e2ebe0;
    border-radius: 17px;
    background: #fff;
    color: var(--vc-text);
    box-shadow: 0 8px 22px rgba(39, 76, 41, .05);
}

.vc-category-filter-promo > span {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    border-radius: 11px;
    background: #eaf5e7;
    color: #2f7a3d;
}

.vc-category-filter-promo h3 {
    margin: 0 0 6px;
    color: #1d3d25;
    font-size: 15px;
    font-weight: 800;
}

.vc-category-filter-promo p {
    margin: 0;
    color: #6a7a6e;
    font-size: 12px;
    line-height: 1.65;
}


/* PRODUCT GRID */

.vc-category-product-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 17px;
}

.vc-category-card {
    overflow: hidden;
    border: 1px solid #e0e9de;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(35,70,39,.05);
    transition: .3s ease;
}

.vc-category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 42px rgba(34,74,40,.11);
}

.vc-category-product-image {
    height: 205px;
    position: relative;
    overflow: hidden;
    background: #f2f6f0;
}

.vc-category-product-image > a {
    width: 100%;
    height: 100%;
    display: block;
}

.vc-category-product-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .4s ease;
}

.vc-category-card:hover img {
    transform: scale(1.05);
}

.vc-category-product-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    padding: 5px 9px;
    border-radius: 50px;
    background: #e75258;
    color: #fff;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}

.vc-cat-green {
    background: #327f43;
}

.vc-category-wishlist {
    position: absolute;
    top: 11px;
    right: 11px;
    z-index: 2;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.95);
    color: #3b6e43;
    cursor: pointer;
}

.vc-category-wishlist.active {
    color: #df4f58;
}

.vc-category-card-content {
    padding: 15px;
}

.vc-category-small-label {
    display: block;
    margin-bottom: 4px;
    color: #71a16f;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.vc-category-card-content h3 {
    margin: 0 0 7px;
    line-height: 1.35;
}

.vc-category-card-content h3 a {
    color: #263f2b;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

.vc-category-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.vc-category-rating > div {
    display: flex;
    gap: 2px;
    color: #f5b71b;
    font-size: 8px;
}

.vc-category-rating span {
    color: #89938a;
    font-size: 8px;
}

.vc-category-pack {
    display: inline-flex;
    padding: 4px 7px;
    margin-bottom: 8px;
    border-radius: 6px;
    background: #f2f6f0;
    color: #68766a;
    font-size: 8px;
    font-weight: 700;
}

.vc-category-price {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
}

.vc-category-price strong {
    color: #267238;
    font-size: 18px;
    font-weight: 850;
}

.vc-category-price del {
    color: #9da79e;
    font-size: 10px;
}

.vc-category-stock {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 11px;
    color: #388048;
    font-size: 8px;
    font-weight: 700;
}

.vc-category-stock i {
    font-size: 5px;
}

.vc-category-cart-btn {
    width: 100%;
    min-height: 41px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
    border-radius: 9px;
    background: linear-gradient(135deg,#2d7c3c,#42964f);
    color: #fff;
    font-family: inherit;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}


/* NO RESULTS */

.vc-category-no-results {
    display: none;
    padding: 65px 20px;
    border: 1px dashed #cad8c7;
    border-radius: 18px;
    background: #fff;
    text-align: center;
}

.vc-category-no-results i {
    margin-bottom: 12px;
    color: #68a065;
    font-size: 34px;
}

.vc-category-no-results h3 {
    margin: 0 0 5px;
    color: #304735;
}

.vc-category-no-results p {
    margin: 0;
    color: #859087;
    font-size: 11px;
}


/* PAGINATION */

.vc-category-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 34px;
}

.vc-category-pagination a,
.vc-category-pagination button {
    width: 39px;
    height: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dce6d9;
    border-radius: 9px;
    background: #fff;
    color: #4d6251;
    font-size: 10px;
    text-decoration: none;
}

.vc-category-pagination a.active {
    border-color: #307d3e;
    background: #307d3e;
    color: #fff;
}


/* RESPONSIVE */

@media (max-width: 1250px) {

    .vc-category-product-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }

}

@media (max-width: 980px) {

    .vc-category-hero {
        grid-template-columns: 1fr;
    }

    .vc-category-hero-image {
        max-height: 280px;
    }

    .vc-category-hero-image img {
        max-height: 280px;
    }

    .vc-category-layout {
        grid-template-columns: 1fr;
    }

    .vc-category-filter-btn {
        display: inline-flex;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 0 14px;
        border: 0;
        border-radius: 9px;
        background: #307d3e;
        color: #fff;
        font-size: 10px;
        font-weight: 750;
    }

    .vc-category-sidebar {
        width: min(340px,88vw);
        height: 100vh;
        position: fixed;
        top: 0;
        left: -110%;
        z-index: 99999;
        overflow-y: auto;
        padding: 16px;
        background: #f7faf6;
        transition: left .3s ease;
    }

    .vc-category-sidebar.open {
        left: 0;
    }

    .vc-category-mobile-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .vc-category-mobile-head strong {
        color: #27462e;
        font-size: 18px;
    }

    .vc-category-mobile-head button {
        width: 38px;
        height: 38px;
        border: 0;
        border-radius: 9px;
        background: #e9f4e6;
        color: #30783d;
    }

    .vc-category-filter-overlay {
        position: fixed;
        inset: 0;
        z-index: 99990;
        background: rgba(15,37,19,.55);
        opacity: 0;
        visibility: hidden;
        transition: .3s ease;
    }

    .vc-category-filter-overlay.show {
        opacity: 1;
        visibility: visible;
    }

}

@media (max-width: 760px) {

    .vc-category-page {
        padding: 30px 13px 65px;
    }

    .vc-category-hero-content {
        padding: 28px 22px;
    }

    .vc-category-toolbar {
        grid-template-columns: 1fr auto;
    }

    .vc-category-search {
        grid-column: 1 / -1;
    }

    .vc-category-results {
        display: none;
    }

    .vc-category-product-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 11px;
    }

}

@media (max-width: 520px) {

    .vc-category-page {
        padding-left: 10px;
        padding-right: 10px;
    }

    .vc-category-hero h1 {
        font-size: 31px;
    }

    .vc-category-hero p {
        font-size: 12px;
    }

    .vc-category-sort label {
        display: none;
    }

    .vc-category-sort select {
        min-width: 140px;
        max-width: 145px;
    }

    .vc-category-product-grid {
        gap: 9px;
    }

    .vc-category-product-image {
        height: 155px;
    }

    .vc-category-card-content {
        padding: 11px;
    }

    .vc-category-card-content h3 a {
        font-size: 12px;
    }

    .vc-category-price strong {
        font-size: 16px;
    }

}

@media (max-width: 370px) {

    .vc-category-product-grid {
        grid-template-columns: 1fr;
    }

    .vc-category-product-image {
        height: 220px;
    }

}

/* ==========================================
   VEGGICART PREMIUM SEARCH RESULTS PAGE
========================================== */

.vc-search-page {
    width: 100%;
    padding: 50px 20px 85px;
    background:
        radial-gradient(circle at top left, rgba(67, 150, 66, .10), transparent 25%),
        radial-gradient(circle at bottom right, rgba(157, 205, 79, .11), transparent 27%),
        #f7faf6;
    font-family: "Inter", sans-serif;
}

.vc-search-container {
    width: 100%;
    max-width: 1420px;
    margin: 0 auto;
}


/* HERO */

.vc-search-hero {
    padding: 38px;
    margin-bottom: 20px;
    border-radius: 25px;
    background:
        linear-gradient(135deg,#174423,#2d793a);
    text-align: center;
    color: #fff;
    box-shadow: 0 18px 45px rgba(26,74,35,.16);
}

.vc-search-label {
    display: inline-flex;
    padding: 7px 13px;
    margin-bottom: 10px;
    border-radius: 50px;
    background: rgba(255,255,255,.12);
    color: #d9ffc8;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .7px;
}

.vc-search-hero h1 {
    margin: 0 0 9px;
    color: #fff;
    font-size: clamp(34px,4vw,48px);
    font-weight: 850;
}

.vc-search-hero p {
    max-width: 680px;
    margin: 0 auto 22px;
    color: rgba(255,255,255,.72);
    font-size: 13px;
    line-height: 1.7;
}


/* BIG SEARCH */

.vc-search-main-box {
    max-width: 720px;
    height: 58px;
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    margin: 0 auto;
    padding-left: 47px;
    border-radius: 13px;
    overflow: hidden;
    background: #fff;
}

.vc-search-main-box > i {
    position: absolute;
    top: 50%;
    left: 17px;
    transform: translateY(-50%);
    color: #6d9b6b;
}

.vc-search-main-box input {
    min-width: 0;
    border: 0;
    outline: none;
    color: #304735;
    font-family: inherit;
    font-size: 13px;
}

.vc-search-main-box button {
    min-width: 110px;
    border: 0;
    background: #96c54a;
    color: #183b20;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}


/* INFO */

.vc-search-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 17px 20px;
    margin-bottom: 18px;
    border: 1px solid #e0e9de;
    border-radius: 14px;
    background: #fff;
}

.vc-search-info > div:first-child {
    color: #718075;
    font-size: 12px;
}

.vc-search-info > div:first-child strong {
    margin-left: 4px;
    color: #2c7339;
    font-size: 14px;
}

.vc-search-count {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #768278;
    font-size: 11px;
}

.vc-search-count strong {
    color: #2e783b;
    font-size: 15px;
}


/* TOOLBAR */

.vc-search-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 13px 15px;
    margin-bottom: 20px;
    border: 1px solid #e1e9df;
    border-radius: 14px;
    background: #fff;
}

.vc-search-toolbar-text {
    flex: 1;
    color: #7a877c;
    font-size: 11px;
}

.vc-search-filter-open {
    display: none;
}

.vc-search-sort {
    display: flex;
    align-items: center;
    gap: 7px;
}

.vc-search-sort label {
    color: #7a877c;
    font-size: 10px;
    font-weight: 700;
}

.vc-search-sort select {
    min-width: 180px;
    height: 43px;
    padding: 0 10px;
    border: 1px solid #dae5d7;
    border-radius: 9px;
    outline: none;
    background: #fff;
}


/* LAYOUT */

.vc-search-layout {
    display: grid;
    grid-template-columns: 255px minmax(0,1fr);
    gap: 24px;
    align-items: start;
}


/* SIDEBAR */

.vc-search-sidebar {
    position: sticky;
    top: 110px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.vc-search-mobile-head {
    display: none;
}

.vc-search-filter-box {
    padding: 19px;
    border: 1px solid #e1e9df;
    border-radius: 16px;
    background: #fff;
}

.vc-search-filter-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #edf1eb;
}

.vc-search-filter-title h3 {
    margin: 0;
    color: #2b4730;
    font-size: 14px;
}

.vc-search-filter-title i {
    color: #68a164;
}


/* CATEGORY FILTER */

.vc-search-filter-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.vc-search-filter-list label {
    display: grid;
    grid-template-columns: 18px 1fr auto;
    align-items: center;
    gap: 8px;
    min-height: 39px;
    padding: 6px 7px;
    border-radius: 8px;
    color: #66736a;
    font-size: 11px;
    cursor: pointer;
}

.vc-search-filter-list label.active {
    background: #eef7eb;
    color: #2c7739;
}

.vc-search-filter-list input {
    width: 15px;
    height: 15px;
    accent-color: #337d40;
}

.vc-search-filter-list small {
    min-width: 23px;
    padding: 3px 5px;
    border-radius: 50px;
    background: #f0f4ee;
    color: #859087;
    text-align: center;
    font-size: 8px;
}


/* CHECKBOX */

.vc-search-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.vc-search-checkboxes label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6a776c;
    font-size: 11px;
}

.vc-search-checkboxes input {
    width: 15px;
    height: 15px;
    accent-color: #337d40;
}


/* PROMO */

.vc-search-promo {
    padding: 22px 18px;
    border-radius: 17px;
    background: linear-gradient(145deg,#194c27,#2e793b);
    color: #fff;
}

.vc-search-promo > i {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    border-radius: 11px;
    background: rgba(255,255,255,.12);
    color: #d1ffb8;
}

.vc-search-promo h3 {
    margin: 0 0 6px;
    font-size: 15px;
}

.vc-search-promo p {
    margin: 0;
    color: rgba(255,255,255,.65);
    font-size: 10px;
    line-height: 1.6;
}


/* GRID */

.vc-search-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 17px;
}


/* CARD */

.vc-search-card {
    overflow: hidden;
    border: 1px solid #e0e9de;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(35,70,39,.05);
    transition: .3s ease;
}

.vc-search-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(34,74,40,.11);
}

.vc-search-product-image {
    height: 205px;
    position: relative;
    overflow: hidden;
    background: #f2f6f0;
}

.vc-search-product-image > a {
    width: 100%;
    height: 100%;
    display: block;
}

.vc-search-product-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .4s ease;
}

.vc-search-card:hover img {
    transform: scale(1.05);
}

.vc-search-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    padding: 5px 9px;
    border-radius: 50px;
    background: #e65358;
    color: #fff;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}

.vc-search-green {
    background: #337f43;
}

.vc-search-wishlist {
    position: absolute;
    right: 11px;
    top: 11px;
    z-index: 2;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.95);
    color: #3a6f43;
    cursor: pointer;
}

.vc-search-wishlist.active {
    color: #df5059;
}

.vc-search-card-content {
    padding: 15px;
}

.vc-search-category {
    display: block;
    margin-bottom: 4px;
    color: #70a06f;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.vc-search-card-content h3 {
    margin: 0 0 7px;
}

.vc-search-card-content h3 a {
    color: #263f2b;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

.vc-search-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.vc-search-rating > div {
    display: flex;
    gap: 2px;
    color: #f5b71b;
    font-size: 8px;
}

.vc-search-rating span {
    color: #89938a;
    font-size: 8px;
}

.vc-search-pack {
    display: inline-flex;
    padding: 4px 7px;
    margin-bottom: 8px;
    border-radius: 6px;
    background: #f2f6f0;
    color: #69766b;
    font-size: 8px;
    font-weight: 700;
}

.vc-search-price {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
}

.vc-search-price strong {
    color: #267238;
    font-size: 18px;
    font-weight: 850;
}

.vc-search-price del {
    color: #9da79e;
    font-size: 10px;
}

.vc-search-stock {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 11px;
    color: #388048;
    font-size: 8px;
    font-weight: 700;
}

.vc-search-cart-btn {
    width: 100%;
    min-height: 41px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
    border-radius: 9px;
    background: linear-gradient(135deg,#2d7c3c,#42964f);
    color: #fff;
    font-family: inherit;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}


/* EMPTY */

.vc-search-empty {
    display: none;
    padding: 65px 20px;
    border: 1px dashed #cad8c7;
    border-radius: 19px;
    background: #fff;
    text-align: center;
}

.vc-search-empty > span {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    border-radius: 50%;
    background: #edf6ea;
    color: #43894a;
    font-size: 25px;
}

.vc-search-empty h2 {
    margin: 0 0 7px;
    color: #2a4530;
}

.vc-search-empty p {
    max-width: 470px;
    margin: 0 auto 18px;
    color: #808c82;
    font-size: 11px;
    line-height: 1.6;
}

.vc-search-empty a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 16px;
    border-radius: 9px;
    background: #307c3e;
    color: #fff;
    font-size: 10px;
    font-weight: 750;
    text-decoration: none;
}


/* PAGINATION */

.vc-search-pagination {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 34px;
}

.vc-search-pagination a,
.vc-search-pagination button {
    width: 39px;
    height: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dce6d9;
    border-radius: 9px;
    background: #fff;
    color: #4d6251;
    font-size: 10px;
    text-decoration: none;
}

.vc-search-pagination a.active {
    border-color: #307d3e;
    background: #307d3e;
    color: #fff;
}


/* RESPONSIVE */

@media (max-width: 1250px) {

    .vc-search-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }

}

@media (max-width: 980px) {

    .vc-search-layout {
        grid-template-columns: 1fr;
    }

    .vc-search-filter-open {
        display: inline-flex;
        min-height: 42px;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 0 14px;
        border: 0;
        border-radius: 9px;
        background: #307d3e;
        color: #fff;
        font-size: 10px;
        font-weight: 750;
    }

    .vc-search-sidebar {
        width: min(340px,88vw);
        height: 100vh;
        position: fixed;
        top: 0;
        left: -110%;
        z-index: 99999;
        overflow-y: auto;
        padding: 16px;
        background: #f7faf6;
        transition: left .3s ease;
    }

    .vc-search-sidebar.open {
        left: 0;
    }

    .vc-search-mobile-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .vc-search-mobile-head strong {
        color: #28482f;
        font-size: 17px;
    }

    .vc-search-mobile-head button {
        width: 38px;
        height: 38px;
        border: 0;
        border-radius: 9px;
        background: #e9f4e6;
        color: #30783d;
    }

    .vc-search-overlay {
        position: fixed;
        inset: 0;
        z-index: 99990;
        background: rgba(15,37,19,.55);
        opacity: 0;
        visibility: hidden;
        transition: .3s ease;
    }

    .vc-search-overlay.show {
        opacity: 1;
        visibility: visible;
    }

}

@media (max-width: 760px) {

    .vc-search-page {
        padding: 30px 13px 65px;
    }

    .vc-search-hero {
        padding: 28px 20px;
    }

    .vc-search-info {
        align-items: flex-start;
        flex-direction: column;
    }

    .vc-search-toolbar-text {
        display: none;
    }

    .vc-search-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 11px;
    }

}

@media (max-width: 520px) {

    .vc-search-page {
        padding-left: 10px;
        padding-right: 10px;
    }

    .vc-search-hero h1 {
        font-size: 31px;
    }

    .vc-search-main-box {
        height: 52px;
    }

    .vc-search-main-box button {
        min-width: 85px;
    }

    .vc-search-sort label {
        display: none;
    }

    .vc-search-sort select {
        min-width: 140px;
        max-width: 145px;
    }

    .vc-search-grid {
        gap: 9px;
    }

    .vc-search-product-image {
        height: 155px;
    }

    .vc-search-card-content {
        padding: 11px;
    }

    .vc-search-card-content h3 a {
        font-size: 12px;
    }

    .vc-search-price strong {
        font-size: 16px;
    }

}

@media (max-width: 370px) {

    .vc-search-grid {
        grid-template-columns: 1fr;
    }

    .vc-search-product-image {
        height: 220px;
    }

}

/* ============================================
   VEGGICART PREMIUM CATEGORY PAGE
============================================ */

.vc-category-main-page {
    width: 100%;
    padding: 60px 20px 85px;
    background:
        radial-gradient(circle at 0 0, rgba(67, 151, 65, .10), transparent 25%),
        radial-gradient(circle at 100% 100%, rgba(156, 202, 80, .12), transparent 27%),
        #f7faf6;
    font-family: "Inter", sans-serif;
}

.vc-category-main-container {
    width: 100%;
    max-width: 1420px;
    margin: 0 auto;
}


/* ============================================
   HEADING
============================================ */

.vc-category-main-heading {
    max-width: 760px;
    margin: 0 auto 35px;
    text-align: center;
}

.vc-category-main-badge {
    display: inline-flex;
    padding: 7px 15px;
    margin-bottom: 10px;
    border-radius: 50px;
    background: #e9f5e6;
    color: #347c41;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.vc-category-main-heading h1 {
    margin: 0 0 10px;
    color: #173b20;
    font-size: clamp(34px, 4vw, 48px);
    line-height: 1.15;
    font-weight: 850;
}

.vc-category-main-heading p {
    margin: 0;
    color: #6f7c72;
    font-size: 15px;
    line-height: 1.75;
}


/* ============================================
   FEATURED BANNER
============================================ */

.vc-category-featured {
    min-height: 330px;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    overflow: hidden;
    margin-bottom: 30px;
    border-radius: 26px;
    background:
        linear-gradient(
            135deg,
            #164321,
            #2e793b
        );
    box-shadow:
        0 20px 50px rgba(28, 76, 36, .16);
}

.vc-category-featured-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 42px;
}

.vc-category-featured-content > span {
    align-self: flex-start;
    padding: 7px 13px;
    margin-bottom: 11px;
    border-radius: 50px;
    background: rgba(255,255,255,.12);
    color: #d7ffc5;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .7px;
}

.vc-category-featured-content h2 {
    max-width: 550px;
    margin: 0 0 12px;
    color: #fff;
    font-size: clamp(29px, 3vw, 42px);
    line-height: 1.18;
    font-weight: 850;
}

.vc-category-featured-content p {
    max-width: 570px;
    margin: 0 0 22px;
    color: rgba(255,255,255,.72);
    font-size: 13px;
    line-height: 1.75;
}

.vc-category-featured-content a {
    align-self: flex-start;
    min-height: 47px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    border-radius: 10px;
    background: #fff;
    color: #266d34;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
    transition: .25s ease;
}

.vc-category-featured-content a:hover {
    transform: translateY(-2px);
    background: #eff9ea;
}

.vc-category-featured-image {
    min-height: 330px;
}

.vc-category-featured-image img {
    width: 100%;
    height: 100%;
    min-height: 330px;
    display: block;
    object-fit: cover;
}


/* ============================================
   CATEGORY GRID
============================================ */

.vc-category-main-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 18px;
}

.vc-category-main-card {
    overflow: hidden;
    border: 1px solid #dfe9dc;
    border-radius: 19px;
    background: #fff;
    box-shadow:
        0 9px 30px rgba(35, 71, 39, .05);
    transition: .3s ease;
}

.vc-category-main-card:hover {
    transform: translateY(-6px);
    border-color: #cee0ca;
    box-shadow:
        0 20px 45px rgba(35, 76, 40, .12);
}

.vc-category-main-card > a {
    display: block;
    color: inherit;
    text-decoration: none;
}


/* IMAGE */

.vc-category-main-image {
    height: 225px;
    position: relative;
    overflow: hidden;
    background: #eef4ec;
}

.vc-category-main-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .45s ease;
}

.vc-category-main-card:hover
.vc-category-main-image img {
    transform: scale(1.06);
}

.vc-category-main-image > span {
    position: absolute;
    left: 13px;
    bottom: 13px;
    padding: 6px 10px;
    border-radius: 50px;
    background: rgba(255,255,255,.95);
    color: #2e753a;
    font-size: 9px;
    font-weight: 800;
    box-shadow: 0 6px 16px rgba(0,0,0,.08);
}


/* CONTENT */

.vc-category-main-content {
    display: grid;
    grid-template-columns: 46px minmax(0,1fr) 35px;
    align-items: center;
    gap: 11px;
    padding: 17px;
}

.vc-category-main-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background:
        linear-gradient(
            135deg,
            #e7f4e3,
            #f5faef
        );
    color: #347e41;
    font-size: 17px;
}

.vc-category-main-content small {
    display: block;
    margin-bottom: 2px;
    color: #7fa17c;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .45px;
}

.vc-category-main-content h3 {
    margin: 0 0 4px;
    color: #263f2b;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
}

.vc-category-main-content p {
    margin: 0;
    color: #7c887e;
    font-size: 9px;
    line-height: 1.55;
}

.vc-category-main-arrow {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #f0f6ee;
    color: #347d41;
    font-size: 10px;
    transition: .25s ease;
}

.vc-category-main-card:hover
.vc-category-main-arrow {
    background: #307d3e;
    color: #fff;
}


/* ============================================
   BENEFITS
============================================ */

.vc-category-main-benefits {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 14px;
    padding: 19px;
    margin-top: 35px;
    border: 1px solid #e0e9de;
    border-radius: 18px;
    background: #fff;
    box-shadow:
        0 10px 30px rgba(34, 72, 38, .05);
}

.vc-category-main-benefits > div {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px;
}

.vc-category-main-benefits > div > span {
    width: 43px;
    height: 43px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #eaf5e7;
    color: #347e41;
}

.vc-category-main-benefits strong,
.vc-category-main-benefits small {
    display: block;
}

.vc-category-main-benefits strong {
    margin-bottom: 2px;
    color: #304735;
    font-size: 11px;
}

.vc-category-main-benefits small {
    color: #859087;
    font-size: 9px;
    line-height: 1.5;
}


/* ============================================
   RESPONSIVE
============================================ */

@media (max-width: 1200px) {

    .vc-category-main-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }

}

@media (max-width: 900px) {

    .vc-category-featured {
        grid-template-columns: 1fr;
    }

    .vc-category-featured-image {
        max-height: 280px;
        min-height: 280px;
    }

    .vc-category-featured-image img {
        min-height: 280px;
    }

    .vc-category-main-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .vc-category-main-benefits {
        grid-template-columns: repeat(2,1fr);
    }

}

@media (max-width: 575px) {

    .vc-category-main-page {
        padding: 40px 10px 65px;
    }

    .vc-category-main-heading {
        margin-bottom: 25px;
    }

    .vc-category-main-heading h1 {
        font-size: 31px;
    }

    .vc-category-main-heading p {
        font-size: 13px;
    }

    .vc-category-featured {
        border-radius: 19px;
    }

    .vc-category-featured-content {
        padding: 26px 20px;
    }

    .vc-category-featured-content h2 {
        font-size: 29px;
    }

    .vc-category-main-grid {
        gap: 10px;
    }

    .vc-category-main-image {
        height: 165px;
    }

    .vc-category-main-content {
        grid-template-columns: 38px minmax(0,1fr);
        padding: 12px;
    }

    .vc-category-main-icon {
        width: 37px;
        height: 37px;
        border-radius: 9px;
        font-size: 14px;
    }

    .vc-category-main-content h3 {
        font-size: 12px;
    }

    .vc-category-main-content p {
        display: none;
    }

    .vc-category-main-arrow {
        display: none;
    }

    .vc-category-main-benefits {
        grid-template-columns: 1fr;
        padding: 12px;
    }

}

@media (max-width: 370px) {

    .vc-category-main-grid {
        grid-template-columns: 1fr;
    }

    .vc-category-main-image {
        height: 220px;
    }

}

/* ========================================
   VEGIICART ORDER DETAILS & TRACKING
======================================== */

.vc-order-page {
    width: 100%;
    background:
        radial-gradient(circle at 0% 0%, rgba(55, 166, 85, .10), transparent 28%),
        radial-gradient(circle at 100% 20%, rgba(255, 193, 7, .10), transparent 25%),
        #f7faf7;
    padding: 45px 20px 70px;
    font-family: "Inter", sans-serif;
    color: #1d2a1f;
}

.vc-order-container {
    width: min(1380px, 100%);
    margin: auto;
}


/* Breadcrumb */

.vc-order-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 25px;
    font-size: 14px;
    color: #718076;
}

.vc-order-breadcrumb a {
    color: #526258;
    text-decoration: none;
    transition: .3s ease;
}

.vc-order-breadcrumb a:hover {
    color: #188b45;
}

.vc-order-breadcrumb i {
    font-size: 12px;
}

.vc-order-breadcrumb strong {
    color: #188b45;
}


/* Main order header */

.vc-order-head {
    padding: 30px 32px;
    border-radius: 24px;
    background: linear-gradient(135deg, #073b24 0%, #0d6536 55%, #178f48 100%);
    box-shadow: 0 20px 50px rgba(15, 92, 50, .18);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 28px;
    position: relative;
    overflow: hidden;
}

.vc-order-head::before {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    right: -90px;
    top: -150px;
    background: rgba(255,255,255,.08);
    border-radius: 50%;
}

.vc-order-head::after {
    content: "";
    position: absolute;
    width: 170px;
    height: 170px;
    right: 190px;
    bottom: -120px;
    background: rgba(255, 203, 67, .10);
    border-radius: 50%;
}

.vc-order-head-left,
.vc-order-head-right {
    position: relative;
    z-index: 2;
}

.vc-order-label {
    display: inline-flex;
    padding: 6px 13px;
    border-radius: 30px;
    background: rgba(255,255,255,.14);
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 9px;
}

.vc-order-head h1 {
    color: white;
    font-size: clamp(25px, 3vw, 38px);
    line-height: 1.2;
    margin: 0 0 8px;
    font-weight: 700;
}

.vc-order-head h1 span {
    color: #ffde63;
}

.vc-order-head p {
    color: rgba(255,255,255,.78);
    margin: 0;
    font-size: 14px;
}

.vc-order-head-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.vc-order-status,
.vc-invoice-btn {
    min-height: 46px;
    padding: 0 18px;
    border-radius: 12px;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-weight: 600;
    font-size: 14px;
}

.vc-order-status {
    background: #ffffff;
    color: #118442;
}

.vc-invoice-btn {
    background: #ffc83d;
    color: #183522;
    cursor: pointer;
    transition: .3s ease;
}

.vc-invoice-btn:hover {
    transform: translateY(-2px);
    background: #ffd662;
}


/* Global card */

.vc-premium-card {
    background: rgba(255,255,255,.96);
    border: 1px solid #e5eee7;
    box-shadow: 0 15px 40px rgba(35, 68, 43, .07);
    border-radius: 22px;
    padding: 26px;
}

.vc-card-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
}

.vc-small-heading {
    color: #188b45;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}

.vc-card-title h2 {
    margin: 3px 0 0;
    font-size: 21px;
    color: #193120;
}


/* Tracking */

.vc-tracking-card {
    margin-bottom: 28px;
}

.vc-estimated-delivery {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    background: #f1faf3;
    border-radius: 14px;
}

.vc-estimated-delivery > i {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #188b45;
    color: white;
    display: grid;
    place-items: center;
}

.vc-estimated-delivery small {
    display: block;
    color: #718076;
    font-size: 11px;
}

.vc-estimated-delivery strong {
    display: block;
    font-size: 13px;
    margin-top: 2px;
}


/* Timeline */

.vc-track-progress {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: relative;
    margin: 25px 10px 35px;
}

.vc-track-progress::before {
    content: "";
    height: 4px;
    background: #e3ebe5;
    position: absolute;
    top: 27px;
    left: 12.5%;
    right: 12.5%;
    border-radius: 10px;
}

.vc-track-progress::after {
    content: "";
    height: 4px;
    background: linear-gradient(90deg, #199449, #54b964);
    position: absolute;
    top: 27px;
    left: 12.5%;
    width: 51%;
    border-radius: 10px;
}

.vc-track-step {
    text-align: center;
    position: relative;
    z-index: 2;
}

.vc-track-icon {
    margin: auto;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: white;
    border: 3px solid #dce6df;
    color: #a4afa6;
    display: grid;
    place-items: center;
    font-size: 19px;
    box-shadow: 0 6px 18px rgba(0,0,0,.05);
}

.vc-track-step.completed .vc-track-icon {
    background: #168e45;
    border-color: #168e45;
    color: white;
}

.vc-track-step.active .vc-track-icon {
    background: #ffca3d;
    border-color: #ffca3d;
    color: #193521;
    animation: vcPulse 1.8s infinite;
}

@keyframes vcPulse {

    0% {
        box-shadow: 0 0 0 0 rgba(255, 202, 61, .45);
    }

    70% {
        box-shadow: 0 0 0 13px rgba(255, 202, 61, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 202, 61, 0);
    }

}

.vc-track-content {
    margin-top: 12px;
}

.vc-track-content strong {
    display: block;
    font-size: 14px;
    color: #273c2d;
}

.vc-track-content span {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: #829087;
}


/* Driver */

.vc-delivery-agent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-radius: 18px;
    padding: 18px;
    background: linear-gradient(90deg, #f5fbf6, #fffdf5);
    border: 1px solid #e4eee6;
}

.vc-agent-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.vc-agent-avatar {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #138443, #28a95d);
    color: white;
    font-size: 20px;
}

.vc-agent-left small {
    color: #78867d;
}

.vc-agent-left h4 {
    margin: 2px 0;
    font-size: 16px;
}

.vc-agent-left span {
    font-size: 12px;
    color: #647469;
}

.vc-agent-left span i {
    color: #f2b821;
}

.vc-agent-actions {
    display: flex;
    gap: 9px;
}

.vc-agent-btn {
    text-decoration: none;
    padding: 10px 16px;
    border-radius: 11px;
    background: #eaf7ee;
    color: #138443;
    font-weight: 600;
    font-size: 13px;
}

.vc-whatsapp-btn {
    background: #dcf8e5;
}


/* Main grid */

.vc-order-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(320px, .75fr);
    gap: 28px;
    align-items: start;
}

.vc-order-left,
.vc-order-right {
    display: grid;
    gap: 24px;
}


/* Item count */

.vc-item-count {
    background: #eef8f0;
    color: #168b44;
    border-radius: 50px;
    padding: 7px 13px;
    font-size: 12px;
    font-weight: 700;
}


/* Products */

.vc-order-product {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 18px 0;
    border-bottom: 1px solid #e9efea;
}

.vc-order-product:first-child {
    padding-top: 0;
}

.vc-order-product:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.vc-product-image {
    height: 90px;
    border-radius: 15px;
    overflow: hidden;
    background: #f1f5f1;
}

.vc-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .4s ease;
}

.vc-order-product:hover .vc-product-image img {
    transform: scale(1.08);
}

.vc-product-category {
    display: inline-block;
    color: #198d48;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 3px;
}

.vc-product-info h3 {
    font-size: 16px;
    margin: 0 0 7px;
    color: #243b2a;
}

.vc-product-meta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.vc-product-meta span {
    font-size: 12px;
    color: #7e8c82;
}

.vc-product-price {
    text-align: right;
}

.vc-product-price span {
    display: block;
    font-size: 12px;
    text-decoration: line-through;
    color: #9ca59f;
}

.vc-product-price strong {
    font-size: 18px;
    color: #168d45;
}


/* Address */

.vc-address-box {
    display: flex;
    gap: 17px;
    padding: 20px;
    background: #f7fbf8;
    border: 1px solid #e6eee7;
    border-radius: 17px;
}

.vc-address-icon {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #168d45;
    color: white;
    display: grid;
    place-items: center;
}

.vc-address-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vc-address-title h3 {
    margin: 0;
    font-size: 17px;
}

.vc-address-title span {
    font-size: 10px;
    padding: 4px 9px;
    background: #e3f4e8;
    color: #198c48;
    border-radius: 20px;
    font-weight: 700;
}

.vc-address-content p {
    color: #718076;
    line-height: 1.7;
    font-size: 13px;
    margin: 10px 0;
}

.vc-address-content strong {
    color: #304538;
    font-size: 13px;
}


/* Price summary */

.vc-price-list {
    display: grid;
    gap: 13px;
}

.vc-price-list > div {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    font-size: 13px;
}

.vc-price-list span {
    color: #738077;
}

.vc-price-list strong {
    color: #314139;
}

.vc-price-list .vc-free {
    color: #159044;
}

.vc-price-list .vc-discount {
    color: #e57e19;
}

.vc-total-price {
    border-top: 1px dashed #cbd5cd;
    margin-top: 18px;
    padding-top: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.vc-total-price span {
    font-size: 15px;
    font-weight: 600;
}

.vc-total-price strong {
    font-size: 26px;
    color: #138743;
}

.vc-saving-box {
    margin-top: 18px;
    padding: 12px 14px;
    background: #fff8dd;
    color: #746120;
    border-radius: 12px;
    font-size: 12px;
    display: flex;
    gap: 9px;
}


/* Payment */

.vc-payment-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.vc-payment-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #eef8f0;
    color: #138743;
    font-size: 18px;
}

.vc-payment-info small {
    color: #859087;
}

.vc-payment-info h4 {
    margin: 2px 0 4px;
    font-size: 15px;
}

.vc-payment-success {
    color: #138743;
    font-size: 11px;
}


/* Support */

.vc-support-card {
    border-radius: 22px;
    padding: 27px;
    background: linear-gradient(145deg, #123e27, #18733e);
    color: white;
    box-shadow: 0 15px 40px rgba(19, 91, 51, .15);
}

.vc-support-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(255,255,255,.13);
    color: #ffd257;
    font-size: 20px;
    margin-bottom: 15px;
}

.vc-support-card h3 {
    font-size: 19px;
    margin: 0 0 8px;
}

.vc-support-card p {
    margin: 0 0 18px;
    color: rgba(255,255,255,.75);
    line-height: 1.65;
    font-size: 13px;
}

.vc-support-card a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #153a25;
    background: #ffce48;
    padding: 11px 16px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 12px;
}


/* Bottom actions */

.vc-order-actions {
    margin-top: 28px;
    padding: 18px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.vc-order-actions > div {
    display: flex;
    gap: 10px;
}

.vc-continue-shopping,
.vc-secondary-action,
.vc-primary-action {
    min-height: 46px;
    padding: 0 18px;
    border-radius: 12px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: .3s ease;
}

.vc-continue-shopping,
.vc-secondary-action {
    border: 1px solid #d8e5db;
    background: white;
    color: #274632;
}

.vc-primary-action {
    border: 1px solid #168a45;
    background: #168a45;
    color: white;
}

.vc-continue-shopping:hover,
.vc-secondary-action:hover {
    border-color: #168a45;
    color: #168a45;
}

.vc-primary-action:hover {
    background: #0e7336;
}


/* =========================
RESPONSIVE
========================= */

@media (max-width: 1100px) {

    .vc-order-main-grid {
        grid-template-columns: 1fr;
    }

    .vc-order-right {
        grid-template-columns: repeat(2, 1fr);
    }

    .vc-support-card {
        grid-column: span 2;
    }

}


@media (max-width: 800px) {

    .vc-order-page {
        padding: 30px 15px 50px;
    }

    .vc-order-head {
        flex-direction: column;
        align-items: flex-start;
        padding: 25px 22px;
    }

    .vc-order-head-right {
        justify-content: flex-start;
        width: 100%;
    }

    .vc-track-progress {
        display: block;
        margin: 10px 0 28px;
    }

    .vc-track-progress::before,
    .vc-track-progress::after {
        display: none;
    }

    .vc-track-step {
        display: grid;
        grid-template-columns: 52px minmax(0,1fr);
        text-align: left;
        gap: 14px;
        padding-bottom: 20px;
        position: relative;
    }

    .vc-track-step:not(:last-child)::after {
        content: "";
        position: absolute;
        left: 25px;
        top: 50px;
        bottom: -1px;
        width: 2px;
        background: #dfe8e1;
    }

    .vc-track-step.completed:not(:last-child)::after {
        background: #169145;
    }

    .vc-track-icon {
        width: 50px;
        height: 50px;
        margin: 0;
    }

    .vc-track-content {
        margin-top: 5px;
    }

    .vc-delivery-agent {
        flex-direction: column;
        align-items: flex-start;
    }

    .vc-order-right {
        grid-template-columns: 1fr;
    }

    .vc-support-card {
        grid-column: auto;
    }

}


@media (max-width: 600px) {

    .vc-premium-card {
        padding: 20px 16px;
        border-radius: 18px;
    }

    .vc-card-title {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 19px;
    }

    .vc-estimated-delivery {
        width: 100%;
    }

    .vc-order-head-right {
        display: grid;
        grid-template-columns: 1fr;
    }

    .vc-order-status,
    .vc-invoice-btn {
        width: 100%;
    }

    .vc-order-product {
        grid-template-columns: 82px 1fr;
        gap: 13px;
    }

    .vc-product-image {
        height: 78px;
    }

    .vc-product-price {
        grid-column: 2;
        text-align: left;
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: -5px;
    }

    .vc-agent-actions {
        width: 100%;
    }

    .vc-agent-btn {
        flex: 1;
        text-align: center;
        justify-content: center;
        display: flex;
    }

    .vc-address-box {
        padding: 16px;
    }

    .vc-order-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .vc-order-actions > div {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .vc-continue-shopping {
        width: 100%;
    }

}


@media (max-width: 420px) {

    .vc-order-page {
        padding-left: 12px;
        padding-right: 12px;
    }

    .vc-order-head h1 {
        font-size: 24px;
    }

    .vc-order-product {
        grid-template-columns: 70px 1fr;
    }

    .vc-product-image {
        height: 70px;
    }

    .vc-product-info h3 {
        font-size: 14px;
    }

    .vc-product-meta {
        gap: 7px;
    }

    .vc-address-icon {
        display: none;
    }

    .vc-order-actions > div {
        grid-template-columns: 1fr;
    }

}

/* =============================================
   VEGIICART PREMIUM MY ORDERS PAGE
============================================= */

.vc-orders-page {
    width: 100%;
    background:
        radial-gradient(circle at top left, rgba(60, 180, 75, 0.08), transparent 34%),
        #f6f9f5;
    padding: 55px 18px 75px;
    font-family: "Inter", sans-serif;
    color: #17231b;
}

.vc-orders-container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
}


/* =============================================
   HEADING
============================================= */

.vc-orders-heading {
    background: linear-gradient(135deg, #0d5e2d, #14833f);
    border-radius: 24px;
    padding: 38px 42px;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(18, 92, 44, 0.14);
}

.vc-orders-heading::before {
    content: "";
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    position: absolute;
    right: -60px;
    top: -110px;
}

.vc-orders-heading::after {
    content: "";
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(255, 214, 76, 0.12);
    position: absolute;
    right: 160px;
    bottom: -110px;
}

.vc-orders-heading-left {
    position: relative;
    z-index: 2;
}

.vc-orders-small-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #dffbe7;
    margin-bottom: 8px;
}

.vc-orders-heading h1 {
    color: #fff;
    margin: 0 0 8px;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.15;
    font-weight: 750;
}

.vc-orders-heading p {
    color: rgba(255, 255, 255, 0.84);
    font-size: 16px;
    line-height: 1.7;
    max-width: 620px;
    margin: 0;
}

.vc-orders-breadcrumb {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.19);
    backdrop-filter: blur(12px);
    padding: 12px 18px;
    border-radius: 50px;
    white-space: nowrap;
}

.vc-orders-breadcrumb a,
.vc-orders-breadcrumb span {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}

.vc-orders-breadcrumb i {
    color: #c9f5d6;
    font-size: 11px;
}


/* =============================================
   SUMMARY CARDS
============================================= */

.vc-orders-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 28px;
}

.vc-orders-summary .vc-summary-card {
    background: #fff;
    border: 1px solid #e5eee7;
    border-radius: 18px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 10px 30px rgba(26, 72, 42, 0.06);
    transition: 0.3s ease;
}

.vc-orders-summary .vc-summary-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 35px rgba(26, 72, 42, 0.1);
}

.vc-summary-icon {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eaf8ee;
    color: #14833f;
    font-size: 21px;
}

.vc-processing-icon {
    background: #fff5d8;
    color: #d49308;
}

.vc-shipping-icon {
    background: #eaf2ff;
    color: #3269c9;
}

.vc-delivered-icon {
    background: #e7f8eb;
    color: #13853e;
}

.vc-orders-summary .vc-summary-card span {
    display: block;
    color: #6b766f;
    font-size: 14px;
    margin-bottom: 3px;
}

.vc-orders-summary .vc-summary-card strong {
    display: block;
    font-size: 25px;
    font-weight: 750;
    color: #17231b;
}


/* =============================================
   FILTER
============================================= */

.vc-orders-filter {
    background: #fff;
    border: 1px solid #e4ede6;
    border-radius: 18px;
    padding: 15px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    box-shadow: 0 8px 25px rgba(27, 61, 38, 0.05);
}

.vc-order-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.vc-order-tab {
    border: 0;
    outline: 0;
    background: #f4f7f4;
    color: #536158;
    font-family: inherit;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 17px;
    border-radius: 50px;
    cursor: pointer;
    transition: 0.25s ease;
}

.vc-order-tab:hover,
.vc-order-tab.active {
    background: #14833f;
    color: #fff;
}

.vc-order-search {
    width: 260px;
    max-width: 100%;
    height: 44px;
    border-radius: 50px;
    background: #f5f8f5;
    border: 1px solid #e1e9e3;
    padding: 0 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.vc-order-search i {
    color: #7c8980;
}

.vc-order-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    color: #253129;
}


/* =============================================
   ORDER CARD
============================================= */

.vc-order-card {
    background: #fff;
    border: 1px solid #e3ece5;
    border-radius: 22px;
    overflow: hidden;
    margin-bottom: 24px;
    box-shadow: 0 12px 35px rgba(27, 67, 39, 0.07);
    transition: 0.3s ease;
}

.vc-order-card:hover {
    box-shadow: 0 20px 45px rgba(27, 67, 39, 0.1);
}

.vc-order-card-header {
    padding: 18px 24px;
    background: #f8fbf8;
    border-bottom: 1px solid #e5eee7;
    display: flex;
    align-items: center;
    gap: 35px;
}

.vc-order-id span,
.vc-order-date span {
    display: block;
    color: #78827a;
    font-size: 12px;
    margin-bottom: 3px;
}

.vc-order-id strong,
.vc-order-date strong {
    display: block;
    color: #17231b;
    font-size: 15px;
    font-weight: 700;
}

.vc-order-date {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vc-order-date > i {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #eaf6ed;
    color: #18833f;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vc-order-status {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 50px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 700;
}

.vc-order-status.shipped {
    background: #eaf2ff;
    color: #2563b9;
}

.vc-order-status.delivered {
    background: #e8f8ec;
    color: #14833f;
}

.vc-order-status.processing {
    background: #fff4d5;
    color: #bd7d00;
}

.vc-order-status.cancelled {
    background: #feeaea;
    color: #c53c3c;
}


/* =============================================
   ORDER BODY
============================================= */

.vc-order-body {
    padding: 24px;
}

.vc-order-products {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.vc-order-product {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid #e6eee7;
    background: #fbfdfb;
    border-radius: 16px;
    padding: 12px;
}

.vc-order-product img {
    width: 80px;
    height: 80px;
    flex: 0 0 80px;
    object-fit: cover;
    border-radius: 13px;
    background: #f2f5f2;
}

.vc-order-product h3 {
    margin: 0 0 6px;
    color: #1d2920;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 700;
}

.vc-order-product p {
    margin: 0 0 5px;
    font-size: 13px;
    color: #778078;
}

.vc-order-product strong {
    font-size: 15px;
    color: #14833f;
}


/* =============================================
   TRACKING
============================================= */

.vc-order-tracking {
    border: 1px solid #e3ece5;
    border-radius: 18px;
    padding: 20px;
    background: linear-gradient(135deg, #fbfefc, #f4faf6);
}

.vc-tracking-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
}

.vc-tracking-top span {
    color: #7b857e;
    font-size: 12px;
}

.vc-tracking-top h4 {
    font-size: 15px;
    margin: 5px 0 0;
    color: #203026;
}

.vc-tracking-top h4 i {
    color: #14833f;
    margin-right: 5px;
}

.vc-delivery-date {
    font-size: 12px;
    color: #7a847c;
    text-align: right;
}

.vc-delivery-date strong {
    display: block;
    color: #17231b;
    font-size: 14px;
    margin-top: 3px;
}


/* Progress */

.vc-progress {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.vc-progress-line {
    position: absolute;
    height: 4px;
    background: #dfe8e1;
    left: 6%;
    right: 6%;
    top: 18px;
    border-radius: 10px;
    overflow: hidden;
}

.vc-progress-active {
    display: block;
    height: 100%;
    width: 68%;
    background: #14833f;
}

.vc-progress-step {
    width: 25%;
    position: relative;
    z-index: 2;
    text-align: center;
}

.vc-step-icon {
    width: 40px;
    height: 40px;
    margin: 0 auto 8px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #dfe8e1;
    color: #9ca6a0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vc-progress-step.completed .vc-step-icon,
.vc-progress-step.current .vc-step-icon {
    background: #14833f;
    border-color: #14833f;
    color: #fff;
}

.vc-progress-step.current .vc-step-icon {
    box-shadow: 0 0 0 6px rgba(20, 131, 63, 0.1);
}

.vc-progress-step span {
    font-size: 12px;
    color: #6e7971;
    font-weight: 600;
}

.vc-progress-step.completed span,
.vc-progress-step.current span {
    color: #1d4f2d;
}


/* Delivered Box */

.vc-delivered-box,
.vc-processing-box {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 17px 18px;
    border-radius: 15px;
}

.vc-delivered-box {
    background: #ecf9ef;
    border: 1px solid #d4eedb;
}

.vc-delivered-check {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #14833f;
    color: #fff;
}

.vc-delivered-box span,
.vc-processing-box span {
    font-size: 13px;
    color: #6c776f;
}

.vc-delivered-box h4,
.vc-processing-box h4 {
    margin: 3px 0 0;
    font-size: 15px;
    color: #1d2a21;
}

.vc-processing-box {
    background: #fff7de;
    border: 1px solid #f2e5b8;
}

.vc-processing-animation {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    background: #f0b328;
    color: #fff;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}


/* =============================================
   FOOTER OF ORDER
============================================= */

.vc-order-footer {
    border-top: 1px solid #e5ece6;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.vc-order-payment {
    display: flex;
    align-items: center;
    gap: 35px;
}

.vc-order-payment p {
    margin: 0;
}

.vc-order-payment span {
    display: block;
    font-size: 12px;
    color: #7d867f;
}

.vc-order-payment strong {
    font-size: 14px;
    color: #253129;
}

.vc-order-payment .vc-order-total {
    color: #14833f;
    font-size: 19px;
}

.vc-order-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.vc-order-btn {
    min-height: 42px;
    padding: 10px 16px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 650;
    transition: all 0.25s ease;
}

.vc-btn-green {
    background: #14833f;
    color: #fff;
    border: 1px solid #14833f;
}

.vc-btn-green:hover {
    background: #0f6b32;
    color: #fff;
    transform: translateY(-2px);
}

.vc-btn-outline {
    background: #fff;
    color: #1d542e;
    border: 1px solid #cfded3;
}

.vc-btn-outline:hover {
    border-color: #14833f;
    background: #edf8f0;
    color: #14833f;
}

.vc-btn-light {
    background: #edf4ff;
    color: #285d9f;
    border: 1px solid #dce9fa;
}

.vc-btn-danger {
    background: #fff0f0;
    color: #c04444;
    border: 1px solid #f2d1d1;
}


/* =============================================
   NO ORDERS
============================================= */

.vc-no-orders {
    padding: 55px 20px;
    text-align: center;
    background: #fff;
    border-radius: 20px;
    border: 1px dashed #cddacf;
    display: none;
}

.vc-no-order-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #eaf7ed;
    color: #14833f;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
}

.vc-no-orders h2 {
    margin: 0 0 8px;
    font-size: 25px;
    color: #1e2921;
}

.vc-no-orders p {
    color: #737e76;
    margin: 0 0 20px;
}

.vc-no-orders a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #14833f;
    color: #fff;
    text-decoration: none;
    padding: 12px 21px;
    border-radius: 10px;
    font-weight: 650;
}


/* =============================================
   TABLET
============================================= */

@media (max-width: 1050px) {

    .vc-orders-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .vc-order-products {
        grid-template-columns: repeat(2, 1fr);
    }

    .vc-orders-filter {
        flex-direction: column;
        align-items: stretch;
    }

    .vc-order-search {
        width: 100%;
    }

}


/* =============================================
   MOBILE
============================================= */

@media (max-width: 767px) {

    .vc-orders-page {
        padding: 30px 12px 50px;
    }

    .vc-orders-heading {
        padding: 28px 20px;
        border-radius: 18px;
        flex-direction: column;
        align-items: flex-start;
    }

    .vc-orders-heading h1 {
        font-size: 31px;
    }

    .vc-orders-heading p {
        font-size: 14px;
    }

    .vc-orders-breadcrumb {
        padding: 9px 14px;
    }


    .vc-orders-summary {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .vc-orders-summary .vc-summary-card {
        padding: 14px;
        gap: 10px;
    }

    .vc-summary-icon {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
        font-size: 17px;
    }

    .vc-orders-summary .vc-summary-card strong {
        font-size: 20px;
    }


    .vc-order-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .vc-order-tabs::-webkit-scrollbar {
        display: none;
    }

    .vc-order-tab {
        flex: 0 0 auto;
    }


    .vc-order-card {
        border-radius: 17px;
    }

    .vc-order-card-header {
        padding: 16px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    .vc-order-status {
        margin-left: 0;
        width: fit-content;
    }


    .vc-order-body {
        padding: 16px;
    }

    .vc-order-products {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .vc-order-product img {
        width: 72px;
        height: 72px;
        flex-basis: 72px;
    }


    .vc-tracking-top {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 25px;
    }

    .vc-delivery-date {
        text-align: left;
    }


    .vc-progress-line {
        left: 12%;
        right: 12%;
    }

    .vc-step-icon {
        width: 34px;
        height: 34px;
        font-size: 12px;
    }

    .vc-progress-line {
        top: 15px;
    }

    .vc-progress-step span {
        font-size: 10px;
    }


    .vc-order-footer {
        padding: 16px;
        flex-direction: column;
        align-items: stretch;
    }

    .vc-order-payment {
        justify-content: space-between;
        gap: 15px;
    }

    .vc-order-actions {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .vc-order-btn {
        width: 100%;
    }

}


/* =============================================
   SMALL MOBILE
============================================= */

@media (max-width: 480px) {

    .vc-orders-summary {
        grid-template-columns: 1fr 1fr;
    }

    .vc-orders-summary .vc-summary-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .vc-order-card-header {
        grid-template-columns: 1fr;
    }

    .vc-order-status {
        margin-top: 2px;
    }

    .vc-order-actions {
        grid-template-columns: 1fr;
    }

    .vc-progress-step span {
        font-size: 9px;
    }

}

/* =========================================
   VEGIICART PREMIUM ACCOUNT DASHBOARD
========================================= */

.vc-account-page {
    width: 100%;
    padding: 55px 18px 75px;
    background:
        radial-gradient(circle at 5% 5%, rgba(37, 161, 74, .08), transparent 30%),
        #f5f9f5;
    font-family: "Inter", sans-serif;
    color: #17251b;
}

.vc-account-container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
}


/* HEADER */

.vc-account-header {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #075b29, #149044);
    padding: 35px 40px;
    border-radius: 24px;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    box-shadow: 0 18px 45px rgba(14, 101, 46, .16);
}

.vc-account-header::before {
    content: "";
    width: 280px;
    height: 280px;
    background: rgba(255,255,255,.08);
    border-radius: 50%;
    position: absolute;
    right: -80px;
    top: -150px;
}

.vc-account-tag {
    color: #dff9e6;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.vc-account-header h1 {
    margin: 7px 0;
    color: #fff;
    font-size: clamp(31px, 4vw, 46px);
    font-weight: 750;
}

.vc-account-header p {
    margin: 0;
    color: rgba(255,255,255,.84);
    font-size: 16px;
}

.vc-account-breadcrumb {
    position: relative;
    z-index: 2;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.2);
    backdrop-filter: blur(10px);
    border-radius: 50px;
    padding: 11px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.vc-account-breadcrumb a,
.vc-account-breadcrumb span {
    text-decoration: none;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

.vc-account-breadcrumb i {
    color: #bceccb;
    font-size: 10px;
}


/* LAYOUT */

.vc-account-layout {
    display: grid;
    grid-template-columns: 285px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}


/* SIDEBAR */

.vc-account-sidebar {
    background: #fff;
    border: 1px solid #e1ebe3;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 34px rgba(25, 69, 39, .07);
    position: sticky;
    top: 110px;
}

.vc-account-user {
    padding: 24px 20px;
    background: linear-gradient(135deg, #f1faf3, #e6f7eb);
    display: flex;
    align-items: center;
    gap: 13px;
    border-bottom: 1px solid #dce9df;
}

.vc-account-avatar {
    width: 55px;
    height: 55px;
    flex: 0 0 55px;
    border-radius: 16px;
    background: #12833e;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    box-shadow: 0 7px 18px rgba(18,131,62,.22);
}

.vc-account-user span {
    color: #6d786f;
    font-size: 12px;
}

.vc-account-user h3 {
    margin: 2px 0;
    font-size: 16px;
    color: #17261c;
}

.vc-account-user p {
    margin: 0;
    color: #758078;
    font-size: 12px;
    word-break: break-word;
}

.vc-account-menu {
    padding: 12px;
}

.vc-account-menu a {
    position: relative;
    min-height: 48px;
    padding: 11px 13px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    gap: 11px;
    color: #49574d;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
    transition: .25s ease;
}

.vc-account-menu a > i {
    width: 22px;
    color: #6d7a71;
    text-align: center;
}

.vc-account-menu a:hover,
.vc-account-menu a.active {
    background: #eaf7ed;
    color: #117439;
}

.vc-account-menu a.active > i,
.vc-account-menu a:hover > i {
    color: #12833e;
}

.vc-account-menu a.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 11px;
    bottom: 11px;
    width: 4px;
    border-radius: 10px;
    background: #12833e;
}

.vc-menu-count {
    margin-left: auto;
    min-width: 25px;
    height: 25px;
    border-radius: 50px;
    background: #edf3ee;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.vc-account-menu .vc-logout-link {
    color: #c63c3c;
    border-top: 1px solid #edf0ed;
    border-radius: 0 0 10px 10px;
    margin-top: 10px;
    padding-top: 16px;
}

.vc-account-menu .vc-logout-link > i {
    color: #c63c3c;
}


/* MAIN */

.vc-account-main {
    min-width: 0;
}


/* WELCOME */

.vc-dashboard-welcome {
    min-height: 215px;
    padding: 30px 34px;
    border-radius: 22px;
    margin-bottom: 22px;
    background:
        linear-gradient(135deg, rgba(7,92,40,.98), rgba(23,151,72,.92));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    overflow: hidden;
    position: relative;
}

.vc-dashboard-welcome::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    right: -75px;
    bottom: -150px;
    background: rgba(255,255,255,.08);
    border-radius: 50%;
}

.vc-welcome-content {
    position: relative;
    z-index: 2;
    max-width: 650px;
}

.vc-welcome-content > span {
    font-size: 14px;
    font-weight: 600;
    color: #d7f7df;
}

.vc-welcome-content h2 {
    margin: 6px 0 9px;
    font-size: clamp(23px, 3vw, 32px);
    color: #fff;
}

.vc-welcome-content p {
    color: rgba(255,255,255,.83);
    margin: 0 0 18px;
    line-height: 1.7;
    font-size: 14px;
}

.vc-shop-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 17px;
    border-radius: 10px;
    background: #fff;
    color: #126d36;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
}

.vc-welcome-icon {
    width: 125px;
    height: 125px;
    flex: 0 0 125px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.16);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 53px;
    position: relative;
    z-index: 2;
}


/* STATS */

.vc-account-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
    margin-bottom: 22px;
}

.vc-account-stat-card {
    background: #fff;
    border: 1px solid #e2ebe4;
    border-radius: 17px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 13px;
    text-decoration: none;
    box-shadow: 0 8px 26px rgba(24,65,37,.05);
    transition: .3s ease;
}

.vc-account-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 13px 32px rgba(24,65,37,.09);
}

.vc-stat-icon {
    width: 49px;
    height: 49px;
    flex: 0 0 49px;
    border-radius: 14px;
    background: #e8f7ec;
    color: #13833f;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}

.vc-stat-shipping {
    background: #eaf2ff;
    color: #346cc4;
}

.vc-stat-wishlist {
    background: #ffebef;
    color: #cf4762;
}

.vc-stat-address {
    background: #fff3db;
    color: #ca8704;
}

.vc-account-stat-card span {
    display: block;
    color: #778079;
    font-size: 12px;
}

.vc-account-stat-card strong {
    display: block;
    color: #17241a;
    font-size: 23px;
    line-height: 1.2;
}

.vc-account-stat-card small {
    color: #78827b;
    font-size: 10px;
}


/* DASHBOARD SECTIONS */

.vc-dashboard-section,
.vc-dashboard-panel {
    background: #fff;
    border: 1px solid #e1eae3;
    border-radius: 20px;
    box-shadow: 0 9px 28px rgba(25,63,36,.05);
}

.vc-dashboard-section {
    padding: 22px;
    margin-bottom: 22px;
}

.vc-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.vc-section-heading span {
    color: #14813e;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.vc-section-heading h2 {
    margin: 2px 0 0;
    font-size: 23px;
}

.vc-section-heading > a {
    text-decoration: none;
    color: #14813e;
    font-size: 13px;
    font-weight: 700;
}


/* ORDERS */

.vc-recent-orders {
    border: 1px solid #e6ece7;
    border-radius: 15px;
    overflow: hidden;
}

.vc-recent-order {
    display: grid;
    grid-template-columns: 64px minmax(200px, 1fr) 100px 105px 100px;
    align-items: center;
    gap: 15px;
    padding: 14px;
    border-bottom: 1px solid #e8eee9;
}

.vc-recent-order:last-child {
    border-bottom: 0;
}

.vc-order-product-image img {
    width: 62px;
    height: 62px;
    border-radius: 12px;
    object-fit: cover;
}

.vc-order-number {
    color: #13803d;
    font-size: 11px;
    font-weight: 700;
}

.vc-recent-order-info h3 {
    margin: 3px 0;
    font-size: 14px;
}

.vc-recent-order-info p {
    margin: 0;
    color: #7a847d;
    font-size: 11px;
}

.vc-recent-order-price span {
    display: block;
    color: #7c867f;
    font-size: 11px;
}

.vc-recent-order-price strong {
    color: #15241a;
    font-size: 15px;
}

.vc-dashboard-status {
    justify-self: start;
    border-radius: 50px;
    padding: 7px 11px;
    font-size: 11px;
    font-weight: 700;
}

.vc-dashboard-status.shipped {
    background: #e9f1ff;
    color: #3264b3;
}

.vc-dashboard-status.delivered {
    background: #e7f8eb;
    color: #14793b;
}

.vc-dashboard-status.processing {
    background: #fff3d5;
    color: #bc7d00;
}

.vc-view-order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 11px;
    border: 1px solid #cfddd2;
    color: #146d36;
    text-decoration: none;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 700;
}


/* BOTTOM */

.vc-dashboard-bottom {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.vc-dashboard-panel {
    padding: 22px;
}

.vc-panel-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #e7ede8;
}

.vc-panel-icon {
    width: 45px;
    height: 45px;
    border-radius: 13px;
    background: #e8f6ec;
    color: #14833f;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.vc-panel-heading span {
    color: #78817a;
    font-size: 11px;
}

.vc-panel-heading h3 {
    margin: 2px 0 0;
    font-size: 17px;
}

.vc-address-details strong {
    display: block;
    margin-bottom: 6px;
}

.vc-address-details p {
    color: #6f7a72;
    font-size: 13px;
    line-height: 1.7;
    margin: 6px 0;
}

.vc-account-info-row {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    border-bottom: 1px dashed #e2e9e3;
    padding: 10px 0;
    font-size: 13px;
}

.vc-account-info-row span {
    color: #778078;
}

.vc-account-info-row strong {
    text-align: right;
    color: #29342c;
}

.vc-panel-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 15px;
    color: #14813e;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
}


/* TABLET */

@media (max-width: 1100px) {

    .vc-account-layout {
        grid-template-columns: 240px minmax(0, 1fr);
    }

    .vc-account-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .vc-recent-order {
        grid-template-columns: 60px minmax(180px, 1fr) 90px 100px;
    }

    .vc-view-order {
        grid-column: 2 / -1;
        width: fit-content;
    }

}


/* MOBILE */

@media (max-width: 767px) {

    .vc-account-page {
        padding: 30px 12px 50px;
    }

    .vc-account-header {
        padding: 27px 20px;
        border-radius: 18px;
        flex-direction: column;
        align-items: flex-start;
    }

    .vc-account-header p {
        font-size: 14px;
    }

    .vc-account-layout {
        display: block;
    }

    .vc-account-sidebar {
        position: static;
        margin-bottom: 20px;
    }

    .vc-account-menu {
        display: flex;
        overflow-x: auto;
        padding: 10px;
        gap: 6px;
        scrollbar-width: none;
    }

    .vc-account-menu::-webkit-scrollbar {
        display: none;
    }

    .vc-account-menu a {
        white-space: nowrap;
        flex: 0 0 auto;
        margin: 0;
        background: #f7faf7;
    }

    .vc-account-menu a.active::before {
        display: none;
    }

    .vc-menu-count {
        display: none;
    }

    .vc-account-menu .vc-logout-link {
        margin: 0;
        padding-top: 11px;
        border: 0;
    }

    .vc-dashboard-welcome {
        min-height: auto;
        padding: 25px 20px;
    }

    .vc-welcome-icon {
        width: 85px;
        height: 85px;
        flex-basis: 85px;
        font-size: 34px;
    }

    .vc-account-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .vc-account-stat-card {
        padding: 14px;
    }

    .vc-stat-icon {
        width: 43px;
        height: 43px;
        flex-basis: 43px;
    }

    .vc-recent-order {
        display: grid;
        grid-template-columns: 62px 1fr;
        gap: 10px 13px;
        padding: 14px;
    }

    .vc-recent-order-price,
    .vc-dashboard-status,
    .vc-view-order {
        grid-column: 2;
    }

    .vc-view-order {
        width: fit-content;
    }

    .vc-dashboard-bottom {
        grid-template-columns: 1fr;
    }

}


/* SMALL MOBILE */

@media (max-width: 480px) {

    .vc-account-stats {
        grid-template-columns: 1fr 1fr;
    }

    .vc-account-stat-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .vc-dashboard-welcome {
        display: block;
    }

    .vc-welcome-icon {
        display: none;
    }

    .vc-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .vc-account-info-row {
        flex-direction: column;
        gap: 3px;
    }

    .vc-account-info-row strong {
        text-align: left;
    }

}

/* =========================================
   VEGIICART - MY PROFILE PAGE
========================================= */

.vg-profile-page {
    background:
        radial-gradient(circle at top left,
        rgba(43, 145, 63, 0.08),
        transparent 32%),
        #f7faf6;

    padding: 55px 20px 80px;

    font-family: Arial, Helvetica, sans-serif;

    color: #18351f;
}


.vg-profile-container {
    width: min(1280px, 100%);
    margin: auto;
}


/* =========================================
   PAGE HEADING
========================================= */

.vg-profile-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;

    margin-bottom: 30px;
}


.vg-profile-label {
    display: inline-block;

    margin-bottom: 8px;

    color: #319744;

    font-size: 14px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 1.6px;
}


.vg-profile-heading h1 {
    margin: 0 0 8px;

    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.08;

    color: #16391d;

    font-weight: 800;
}


.vg-profile-heading p {
    margin: 0;

    max-width: 620px;

    color: #68776b;

    font-size: 16px;
    line-height: 1.7;
}


.vg-back-dashboard {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-height: 46px;

    padding: 0 18px;

    border: 1px solid #dce8dc;
    border-radius: 12px;

    background: #ffffff;

    color: #265c30;

    text-decoration: none;

    font-size: 14px;
    font-weight: 700;

    transition: .3s ease;
}


.vg-back-dashboard:hover {
    background: #2d963f;
    border-color: #2d963f;

    color: #ffffff;

    transform: translateY(-2px);
}


/* =========================================
   MAIN LAYOUT
========================================= */

.vg-profile-layout {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    gap: 28px;

    align-items: start;
}


/* =========================================
   SIDEBAR
========================================= */

.vg-profile-sidebar {
    position: sticky;
    top: 110px;

    border-radius: 22px;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e4ece4;

    box-shadow:
        0 14px 40px rgba(24, 68, 31, 0.08);
}


/* USER CARD */

.vg-user-card {
    padding: 30px 22px;

    text-align: center;

    background:
        linear-gradient(
            145deg,
            #f0faef,
            #ffffff
        );

    border-bottom: 1px solid #edf2ed;
}


.vg-user-avatar {
    position: relative;

    width: 92px;
    height: 92px;

    margin: 0 auto 17px;

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

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #48ad53,
            #1d7c32
        );

    color: #ffffff;

    font-size: 28px;
    font-weight: 800;

    box-shadow:
        0 10px 25px rgba(39, 137, 56, .25);

    overflow: visible;
}

.vg-user-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    z-index: 1;
}

.vg-user-avatar.has-photo span {
    opacity: 0;
}

.vg-user-avatar .vg-avatar-edit {
    z-index: 2;
}

.vc-account-avatar.has-photo,
.vc-account-avatar:has(img) {
    overflow: hidden;
    padding: 0;
}

.vc-account-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vc-account-avatar span {
    font-weight: 800;
    font-size: 1.1rem;
    color: #fff;
}


.vg-avatar-edit {
    position: absolute;

    right: -2px;
    bottom: 3px;

    width: 32px;
    height: 32px;

    border: 3px solid #ffffff;
    border-radius: 50%;

    background: #16391d;

    color: #ffffff;

    cursor: pointer;

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

    font-size: 12px;
}


.vg-user-card h3 {
    margin: 0 0 6px;

    color: #17391e;

    font-size: 20px;
    font-weight: 800;
}


.vg-user-card p {
    margin: 0;

    color: #788578;

    font-size: 14px;
}


.vg-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    margin-top: 14px;

    padding: 7px 12px;

    border-radius: 30px;

    background: #e9f8e9;

    color: #268438;

    font-size: 12px;
    font-weight: 800;
}


/* NAVIGATION */

.vg-profile-nav {
    padding: 14px;
}


.vg-profile-nav a {
    position: relative;

    display: flex;
    align-items: center;
    gap: 12px;

    min-height: 50px;

    padding: 9px 14px;

    margin: 4px 0;

    border-radius: 12px;

    color: #536356;

    text-decoration: none;

    font-size: 15px;
    font-weight: 700;

    transition: .25s ease;
}


.vg-profile-nav a span {
    width: 34px;
    height: 34px;

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

    border-radius: 9px;

    background: #f2f7f1;

    color: #46994f;

    transition: .25s ease;
}


.vg-profile-nav a:hover,
.vg-profile-nav a.active {
    background: #edf8ed;

    color: #25843a;
}


.vg-profile-nav a.active {
    box-shadow:
        inset 3px 0 0 #2d963f;
}


.vg-profile-nav a:hover span,
.vg-profile-nav a.active span {
    background: #2e963f;

    color: #ffffff;
}


.vg-profile-nav .vg-logout-link {
    margin-top: 14px;

    border-top: 1px solid #edf1ed;

    border-radius: 0;

    padding-top: 18px;

    color: #db5151;
}


.vg-profile-nav .vg-logout-link span {
    background: #fff0f0;

    color: #d84d4d;
}


/* =========================================
   MAIN CONTENT
========================================= */

.vg-profile-content {
    min-width: 0;
}


.vg-profile-card {
    margin-bottom: 24px;

    padding: 28px;

    border: 1px solid #e3ebe3;
    border-radius: 22px;

    background: #ffffff;

    box-shadow:
        0 12px 35px rgba(27, 65, 31, 0.06);
}


/* CARD HEADER */

.vg-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 25px;
}


.vg-card-header > div {
    display: flex;
    align-items: center;
    gap: 14px;
}


.vg-card-icon {
    flex: 0 0 auto;

    width: 48px;
    height: 48px;

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

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            #e8f8e7,
            #f5fcf4
        );

    color: #278a3b;

    font-size: 19px;
}


.vg-card-header h2 {
    margin: 0 0 4px;

    color: #173b1e;

    font-size: 21px;
    font-weight: 800;
}


.vg-card-header p {
    margin: 0;

    color: #7b897d;

    font-size: 14px;
    line-height: 1.5;
}


.vg-card-edit-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: #2a9140;

    font-size: 13px;
    font-weight: 800;

    text-decoration: none;
}


/* =========================================
   FORM
========================================= */

.vg-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 20px;
}


.vg-form-group label {
    display: block;

    margin-bottom: 8px;

    color: #405846;

    font-size: 14px;
    font-weight: 750;
}


.vg-input-wrap {
    position: relative;
}


.vg-input-wrap > i {
    position: absolute;

    left: 16px;
    top: 50%;

    transform: translateY(-50%);

    color: #6ea875;

    font-size: 15px;

    pointer-events: none;
}


.vg-input-wrap input,
.vg-input-wrap select {
    width: 100%;
    height: 52px;

    padding: 0 15px 0 45px;

    border: 1px solid #dce7dd;
    border-radius: 12px;

    outline: none;

    background: #fbfdfb;

    color: #2c4131;

    font-size: 15px;

    transition: .25s ease;

    box-sizing: border-box;
}


.vg-input-wrap input:focus,
.vg-input-wrap select:focus {
    border-color: #55a95f;

    background: #ffffff;

    box-shadow:
        0 0 0 4px rgba(55, 154, 70, .1);
}


.vg-form-actions {
    margin-top: 24px;

    display: flex;
    justify-content: flex-end;
}


.vg-save-btn {
    min-height: 50px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    padding: 0 24px;

    border: none;
    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #319946,
            #237a35
        );

    color: #ffffff;

    font-size: 15px;
    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 10px 22px rgba(38, 135, 55, .22);

    transition: .3s ease;
}


.vg-save-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 14px 28px rgba(38, 135, 55, .3);
}


/* =========================================
   ADDRESS
========================================= */

.vg-address-card {
    padding: 22px;

    border: 1px solid #dce8dd;
    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #fbfefb,
            #f4faf3
        );
}


.vg-address-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 16px;
}


.vg-address-top > div {
    display: flex;
    align-items: center;
    gap: 8px;
}


.vg-address-type {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: #276f36;

    font-size: 13px;
    font-weight: 800;
}


.vg-default-badge {
    padding: 5px 9px;

    border-radius: 20px;

    background: #dff4df;

    color: #238038;

    font-size: 11px;
    font-weight: 800;

    text-transform: uppercase;
}


.vg-address-edit {
    border: 0;
    background: transparent;

    color: #428d4b;

    cursor: pointer;

    font-size: 17px;
}


.vg-address-card h3 {
    margin: 0 0 8px;

    color: #1b3d21;

    font-size: 17px;
    font-weight: 800;
}


.vg-address-card p {
    margin: 0;

    color: #69786c;

    font-size: 14px;
    line-height: 1.7;
}


.vg-address-contact {
    margin-top: 14px;
}


.vg-address-contact span {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: #506756;

    font-size: 13px;
    font-weight: 700;
}


/* =========================================
   SECURITY
========================================= */

.vg-security-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 18px 0;

    border-top: 1px solid #edf1ed;
}


.vg-security-info {
    display: flex;
    align-items: center;
    gap: 13px;
}


.vg-security-info > span {
    width: 42px;
    height: 42px;

    border-radius: 11px;

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

    background: #f0f7ef;

    color: #358d43;
}


.vg-security-info h3 {
    margin: 0 0 4px;

    color: #29442e;

    font-size: 15px;
    font-weight: 800;
}


.vg-security-info p {
    margin: 0;

    color: #829083;

    font-size: 13px;
}


.vg-outline-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;

    padding: 0 17px;

    border: 1px solid #d5e6d7;
    border-radius: 10px;

    color: #287d39;

    text-decoration: none;

    font-size: 13px;
    font-weight: 800;

    background: #ffffff;

    transition: .25s ease;
}


.vg-outline-btn:hover {
    background: #2e933f;

    border-color: #2e933f;

    color: #ffffff;
}


.vg-status-success {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    color: #28843a;

    font-size: 13px;
    font-weight: 800;
}


/* =========================================
   QUICK CARDS
========================================= */

.vg-quick-account-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 20px;
}


.vg-quick-account-card {
    display: grid;

    grid-template-columns:
        52px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 15px;

    padding: 21px;

    border: 1px solid #e1eae1;
    border-radius: 17px;

    background: #ffffff;

    text-decoration: none;

    box-shadow:
        0 10px 28px rgba(24, 64, 29, .05);

    transition: .3s ease;
}


.vg-quick-account-card:hover {
    transform: translateY(-4px);

    border-color: #b9dcbc;

    box-shadow:
        0 15px 35px rgba(24, 90, 35, .1);
}


.vg-quick-icon {
    width: 52px;
    height: 52px;

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

    border-radius: 14px;

    background: #edf8ec;

    color: #309343;

    font-size: 20px;
}


.vg-quick-account-card h3 {
    margin: 0 0 5px;

    color: #203f26;

    font-size: 16px;
    font-weight: 800;
}


.vg-quick-account-card p {
    margin: 0;

    color: #7e8c80;

    font-size: 13px;
    line-height: 1.45;
}


.vg-quick-arrow {
    color: #65a86c;

    font-size: 14px;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .vg-profile-page {
        padding: 40px 18px 60px;
    }


    .vg-profile-layout {
        grid-template-columns: 230px minmax(0, 1fr);
        gap: 20px;
    }


    .vg-profile-card {
        padding: 23px;
    }


    .vg-form-grid {
        grid-template-columns: 1fr;
    }


    .vg-quick-account-grid {
        grid-template-columns: 1fr;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .vg-profile-heading {
        display: block;
    }


    .vg-back-dashboard {
        margin-top: 18px;
    }


    .vg-profile-layout {
        display: block;
    }


    .vg-profile-sidebar {
        position: static;

        margin-bottom: 22px;
    }


    .vg-user-card {
        padding: 24px 18px;
    }


    .vg-profile-nav {
        display: grid;
        grid-template-columns: repeat(2, 1fr);

        gap: 6px;
    }


    .vg-profile-nav a {
        margin: 0;

        font-size: 13px;

        padding: 7px 9px;
    }


    .vg-profile-nav .vg-logout-link {
        margin-top: 0;
        padding-top: 7px;

        border-top: 0;
        border-radius: 12px;
    }


    .vg-profile-card {
        padding: 20px 17px;

        border-radius: 17px;
    }


    .vg-card-header {
        align-items: flex-start;
    }


    .vg-card-header h2 {
        font-size: 18px;
    }


    .vg-card-edit-link {
        display: none;
    }


    .vg-security-row {
        align-items: flex-start;
        flex-direction: column;
    }


    .vg-form-actions {
        display: block;
    }


    .vg-save-btn {
        width: 100%;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .vg-profile-page {
        padding-left: 12px;
        padding-right: 12px;
    }


    .vg-profile-heading h1 {
        font-size: 31px;
    }


    .vg-profile-nav {
        grid-template-columns: 1fr;
    }


    .vg-profile-nav a {
        font-size: 14px;
    }


    .vg-card-header > div {
        align-items: flex-start;
    }


    .vg-card-icon {
        width: 43px;
        height: 43px;
    }


    .vg-address-top {
        align-items: flex-start;
    }


    .vg-quick-account-card {
        grid-template-columns: 46px minmax(0, 1fr) auto;

        padding: 17px;
    }


    .vg-quick-icon {
        width: 46px;
        height: 46px;
    }

}

/* =========================================
   VEGIICART - MANAGE ADDRESSES
========================================= */

.vg-address-page {
    padding: 55px 20px 80px;

    background:
        radial-gradient(
            circle at 5% 0%,
            rgba(52, 159, 70, 0.09),
            transparent 27%
        ),
        #f7faf6;

    font-family: Arial, Helvetica, sans-serif;

    color: #183b20;
}


.vg-address-container {
    width: min(1280px, 100%);
    margin: auto;
}


/* =========================
   HEADING
========================= */

.vg-address-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    gap: 30px;

    margin-bottom: 30px;
}


.vg-address-label {
    display: inline-block;

    margin-bottom: 8px;

    color: #319747;

    font-size: 14px;
    font-weight: 800;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


.vg-address-heading h1 {
    margin: 0 0 9px;

    color: #15391d;

    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.08;

    font-weight: 800;
}


.vg-address-heading p {
    max-width: 630px;

    margin: 0;

    color: #6e7f71;

    font-size: 16px;
    line-height: 1.7;
}


.vg-address-back {
    flex: 0 0 auto;

    min-height: 46px;

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

    gap: 8px;

    padding: 0 18px;

    border: 1px solid #dce8dc;
    border-radius: 12px;

    background: #ffffff;

    color: #286238;

    text-decoration: none;

    font-size: 14px;
    font-weight: 800;

    transition: .3s ease;
}


.vg-address-back:hover {
    background: #2d9341;
    border-color: #2d9341;

    color: #ffffff;

    transform: translateY(-2px);
}


/* =========================
   SUMMARY
========================= */

.vg-address-summary {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr))
        auto;

    gap: 16px;

    margin-bottom: 40px;

    padding: 18px;

    border: 1px solid #e0eae0;
    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 12px 35px rgba(24, 70, 30, 0.06);
}


.vg-summary-item {
    display: flex;
    align-items: center;

    gap: 13px;

    padding: 10px 14px;
}


.vg-summary-icon {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

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

    border-radius: 13px;

    background: #edf8ec;

    color: #2c9140;

    font-size: 19px;
}


.vg-summary-item div {
    display: flex;
    flex-direction: column;
}


.vg-summary-item strong {
    margin-bottom: 3px;

    color: #193c20;

    font-size: 18px;
    font-weight: 800;
}


.vg-summary-item div span {
    color: #7a897c;

    font-size: 13px;
    font-weight: 600;
}


.vg-add-address-btn {
    align-self: center;

    min-height: 50px;

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

    gap: 9px;

    padding: 0 22px;

    border: none;
    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #35a04a,
            #207d34
        );

    color: #ffffff;

    font-size: 14px;
    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 10px 24px rgba(38, 137, 57, .23);

    transition: .3s ease;
}


.vg-add-address-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 14px 28px rgba(38, 137, 57, .32);
}


/* =========================
   SECTION HEADING
========================= */

.vg-address-section-heading {
    margin-bottom: 20px;
}


.vg-address-section-heading span {
    color: #349849;

    font-size: 13px;
    font-weight: 800;

    letter-spacing: 1.2px;

    text-transform: uppercase;
}


.vg-address-section-heading h2 {
    margin: 6px 0 0;

    color: #15391d;

    font-size: 27px;
    font-weight: 800;
}


/* =========================
   SAVED ADDRESS GRID
========================= */

.vg-saved-address-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 22px;

    margin-bottom: 42px;
}


.vg-address-card {
    position: relative;

    padding: 23px;

    border: 1px solid #e0e9e0;
    border-radius: 19px;

    background: #ffffff;

    box-shadow:
        0 12px 32px rgba(28, 70, 31, .06);

    transition: .3s ease;
}


.vg-address-card:hover {
    transform: translateY(-4px);

    border-color: #b7daba;

    box-shadow:
        0 17px 38px rgba(29, 87, 37, .1);
}


.vg-default-address {
    border: 2px solid #42a14e;

    background:
        linear-gradient(
            145deg,
            #fbfffb,
            #f4fbf3
        );
}


.vg-address-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 23px;
}


.vg-address-card-tags {
    display: flex;
    align-items: center;

    gap: 7px;

    flex-wrap: wrap;
}


.vg-address-type {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    padding: 7px 11px;

    border-radius: 25px;

    background: #e9f7e8;

    color: #25853a;

    font-size: 12px;
    font-weight: 800;
}


.vg-address-type.office {
    background: #edf4ff;
    color: #346eb6;
}


.vg-address-type.other {
    background: #fff6e8;
    color: #b56c19;
}


.vg-default-label {
    padding: 6px 10px;

    border-radius: 20px;

    background: #1f8435;

    color: #ffffff;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .5px;

    text-transform: uppercase;
}


.vg-address-menu {
    display: flex;
    gap: 6px;
}


.vg-address-action {
    width: 36px;
    height: 36px;

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

    border: 1px solid #e0e7e0;
    border-radius: 9px;

    background: #ffffff;

    cursor: pointer;

    transition: .25s ease;
}


.vg-address-action.edit {
    color: #398a45;
}


.vg-address-action.edit:hover {
    background: #eaf7ea;

    border-color: #b9dcbc;
}


.vg-address-action.delete {
    color: #cf4f4f;
}


.vg-address-action.delete:hover {
    background: #fff0f0;

    border-color: #f1caca;
}


/* PERSON */

.vg-address-person {
    display: flex;
    align-items: center;

    gap: 11px;

    margin-bottom: 17px;
}


.vg-person-icon {
    width: 42px;
    height: 42px;

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

    flex: 0 0 42px;

    border-radius: 12px;

    background: #f0f7ef;

    color: #46934e;
}


.vg-address-person h3 {
    margin: 0 0 3px;

    color: #193a20;

    font-size: 16px;
    font-weight: 800;
}


.vg-address-person p {
    margin: 0;

    color: #78877a;

    font-size: 13px;
}


/* ADDRESS */

.vg-address-details {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    min-height: 90px;

    padding: 15px 0;

    border-top: 1px solid #edf1ed;
    border-bottom: 1px solid #edf1ed;
}


.vg-address-details > i {
    margin-top: 4px;

    color: #3f984a;
}


.vg-address-details p {
    margin: 0;

    color: #607164;

    font-size: 14px;
    line-height: 1.7;
}


/* ADDRESS FOOTER */

.vg-address-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    min-height: 43px;

    padding-top: 15px;
}


.vg-delivery-ready {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    color: #319243;

    font-size: 12px;
    font-weight: 700;
}


.vg-default-text {
    color: #27853a;

    font-size: 12px;
    font-weight: 800;
}


.vg-set-default-btn {
    width: 100%;

    min-height: 40px;

    border: 1px solid #bcd9bf;
    border-radius: 10px;

    background: #f7fcf7;

    color: #2e843b;

    font-size: 13px;
    font-weight: 800;

    cursor: pointer;

    transition: .25s ease;
}


.vg-set-default-btn:hover {
    background: #2c9140;
    border-color: #2c9140;

    color: #ffffff;
}


/* =========================
   ADD NEW ADDRESS BOX
========================= */

.vg-new-address-box {
    padding: 30px;

    border: 1px solid #dee9de;
    border-radius: 22px;

    background: #ffffff;

    box-shadow:
        0 14px 42px rgba(26, 72, 32, .07);
}


.vg-new-address-header {
    display: flex;
    align-items: flex-start;

    gap: 15px;

    margin-bottom: 28px;
}


.vg-new-address-icon {
    width: 54px;
    height: 54px;

    flex: 0 0 54px;

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

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #e8f8e7,
            #f5fcf4
        );

    color: #2d9140;

    font-size: 21px;
}


.vg-new-address-header > div > span {
    color: #339548;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 1.2px;

    text-transform: uppercase;
}


.vg-new-address-header h2 {
    margin: 4px 0 5px;

    color: #17391e;

    font-size: 24px;
    font-weight: 800;
}


.vg-new-address-header p {
    margin: 0;

    color: #7a897c;

    font-size: 14px;
    line-height: 1.6;
}


/* =========================
   FORM
========================= */

.vg-form-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
}


.vg-form-group label {
    display: block;

    margin-bottom: 8px;

    color: #405947;

    font-size: 14px;
    font-weight: 750;
}


.vg-full-field {
    grid-column: 1 / -1;
}


.vg-input-box {
    position: relative;
}


.vg-input-box > i {
    position: absolute;

    top: 50%;
    left: 16px;

    transform: translateY(-50%);

    color: #70a776;

    pointer-events: none;
}


.vg-input-box input,
.vg-input-box select {
    width: 100%;
    height: 52px;

    padding: 0 15px 0 45px;

    border: 1px solid #dbe6dc;
    border-radius: 12px;

    background: #fbfdfb;

    color: #304636;

    outline: none;

    font-size: 15px;

    box-sizing: border-box;

    transition: .25s ease;
}


.vg-input-box input:focus,
.vg-input-box select:focus {
    border-color: #54a860;

    background: #ffffff;

    box-shadow:
        0 0 0 4px rgba(50, 150, 67, .09);
}


/* =========================
   ADDRESS TYPE
========================= */

.vg-address-type-section {
    margin-top: 25px;
}


.vg-type-main-label {
    display: block;

    margin-bottom: 12px;

    color: #405947;

    font-size: 14px;
    font-weight: 800;
}


.vg-address-type-options {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 14px;
}


.vg-type-option {
    position: relative;

    cursor: pointer;
}


.vg-type-option input {
    position: absolute;

    opacity: 0;
}


.vg-type-option > span {
    min-height: 95px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 16px;

    border: 1px solid #dde7de;
    border-radius: 14px;

    background: #fbfdfb;

    transition: .25s ease;
}


.vg-type-option i {
    margin-bottom: 8px;

    color: #4a9853;

    font-size: 18px;
}


.vg-type-option strong {
    margin-bottom: 3px;

    color: #29482f;

    font-size: 14px;
}


.vg-type-option small {
    color: #879288;

    font-size: 12px;
}


.vg-type-option input:checked + span {
    border-color: #3a9a49;

    background: #eff9ee;

    box-shadow:
        inset 0 0 0 1px #3a9a49;
}


/* =========================
   DEFAULT CHECKBOX
========================= */

.vg-default-check {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    margin-top: 24px;

    padding: 17px;

    border: 1px solid #e0e9e0;
    border-radius: 13px;

    background: #f9fcf9;

    cursor: pointer;
}


.vg-default-check input {
    width: 18px;
    height: 18px;

    margin-top: 2px;

    accent-color: #2f9342;
}


.vg-default-check > span:last-child {
    display: flex;
    flex-direction: column;
}


.vg-default-check strong {
    margin-bottom: 3px;

    color: #2c4b32;

    font-size: 14px;
}


.vg-default-check small {
    color: #7d8b7f;

    font-size: 12px;
}


/* =========================
   FORM ACTIONS
========================= */

.vg-address-form-actions {
    display: flex;
    justify-content: flex-end;

    gap: 12px;

    margin-top: 26px;
}


.vg-cancel-btn,
.vg-save-address-btn {
    min-height: 49px;

    padding: 0 22px;

    border-radius: 11px;

    font-size: 14px;
    font-weight: 800;

    cursor: pointer;

    transition: .3s ease;
}


.vg-cancel-btn {
    border: 1px solid #dae4da;

    background: #ffffff;

    color: #596d5c;
}


.vg-cancel-btn:hover {
    background: #f1f5f1;
}


.vg-save-address-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    border: none;

    background:
        linear-gradient(
            135deg,
            #339b47,
            #237c35
        );

    color: #ffffff;

    box-shadow:
        0 10px 22px rgba(37, 132, 54, .23);
}


.vg-save-address-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 14px 28px rgba(37, 132, 54, .31);
}


/* =========================
   TABLET
========================= */

@media (max-width: 991px) {

    .vg-address-page {
        padding: 42px 18px 65px;
    }


    .vg-saved-address-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .vg-address-summary {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .vg-add-address-btn {
        grid-column: 1 / -1;

        width: 100%;
    }

}


/* =========================
   MOBILE
========================= */

@media (max-width: 767px) {

    .vg-address-heading {
        display: block;
    }


    .vg-address-back {
        margin-top: 18px;
    }


    .vg-address-summary {
        grid-template-columns: 1fr;

        padding: 12px;
    }


    .vg-add-address-btn {
        grid-column: auto;
    }


    .vg-saved-address-grid {
        grid-template-columns: 1fr;
    }


    .vg-form-grid {
        grid-template-columns: 1fr;
    }


    .vg-full-field {
        grid-column: auto;
    }


    .vg-address-type-options {
        grid-template-columns: 1fr;
    }


    .vg-new-address-box {
        padding: 22px 18px;
    }

}


/* =========================
   SMALL MOBILE
========================= */

@media (max-width: 480px) {

    .vg-address-page {
        padding-left: 12px;
        padding-right: 12px;
    }


    .vg-address-heading h1 {
        font-size: 31px;
    }


    .vg-address-section-heading h2 {
        font-size: 23px;
    }


    .vg-address-card {
        padding: 18px;
    }


    .vg-address-card-top {
        align-items: flex-start;
    }


    .vg-address-form-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }


    .vg-cancel-btn,
    .vg-save-address-btn {
        width: 100%;
        padding: 0 12px;
    }

}

/* =========================================
   VEGIICART - FORGOT PASSWORD PAGE
========================================= */

.vg-forgot-page {
    padding: 70px 20px;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(50, 151, 69, 0.12),
            transparent 32%
        ),
        radial-gradient(
            circle at 90% 90%,
            rgba(202, 230, 101, 0.16),
            transparent 30%
        ),
        #f6faf5;

    font-family: Arial, Helvetica, sans-serif;

    color: #17391e;
}


.vg-forgot-container {
    width: min(1120px, 100%);
    margin: auto;
}


.vg-forgot-card {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 0.9fr);

    overflow: hidden;

    border: 1px solid #deeadf;
    border-radius: 28px;

    background: #ffffff;

    box-shadow:
        0 25px 70px rgba(30, 84, 37, 0.11);
}


/* =========================================
   LEFT SIDE
========================================= */

.vg-forgot-info {
    position: relative;

    padding: 55px 50px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #174e28,
            #257b36 58%,
            #35984a
        );

    color: #ffffff;
}


.vg-forgot-info::before {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    top: -140px;
    right: -140px;

    border-radius: 50%;

    background: rgba(255,255,255,.07);
}


.vg-forgot-info::after {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    left: -110px;
    bottom: -110px;

    border-radius: 50%;

    background: rgba(255,255,255,.06);
}


.vg-forgot-tag {
    position: relative;
    z-index: 2;

    display: inline-block;

    margin-bottom: 16px;

    padding: 7px 13px;

    border: 1px solid rgba(255,255,255,.23);
    border-radius: 30px;

    background: rgba(255,255,255,.11);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 1.3px;

    text-transform: uppercase;
}


.vg-forgot-info h1 {
    position: relative;
    z-index: 2;

    max-width: 460px;

    margin: 0 0 17px;

    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.08;

    font-weight: 800;
}


.vg-forgot-info > p {
    position: relative;
    z-index: 2;

    max-width: 500px;

    margin: 0;

    color: rgba(255,255,255,.84);

    font-size: 16px;
    line-height: 1.75;
}


/* FEATURES */

.vg-forgot-features {
    position: relative;
    z-index: 2;

    margin-top: 38px;

    display: grid;

    gap: 18px;
}


.vg-forgot-feature {
    display: flex;
    align-items: flex-start;

    gap: 14px;
}


.vg-forgot-feature > span {
    flex: 0 0 45px;

    width: 45px;
    height: 45px;

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

    border-radius: 12px;

    background: rgba(255,255,255,.13);

    border: 1px solid rgba(255,255,255,.14);

    font-size: 17px;
}


.vg-forgot-feature h3 {
    margin: 0 0 4px;

    font-size: 16px;
    font-weight: 800;
}


.vg-forgot-feature p {
    margin: 0;

    color: rgba(255,255,255,.72);

    font-size: 13px;
    line-height: 1.55;
}


/* HELP */

.vg-forgot-help {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;

    gap: 13px;

    margin-top: 35px;

    padding: 16px;

    border: 1px solid rgba(255,255,255,.16);
    border-radius: 15px;

    background: rgba(255,255,255,.09);
}


.vg-forgot-help > i {
    font-size: 22px;
}


.vg-forgot-help span {
    display: block;

    margin-bottom: 3px;

    font-size: 13px;
    font-weight: 800;
}


.vg-forgot-help p {
    margin: 0;

    color: rgba(255,255,255,.72);

    font-size: 12px;
    line-height: 1.45;
}


/* =========================================
   FORM AREA
========================================= */

.vg-forgot-form-area {
    padding: 55px 48px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    background: #ffffff;
}


.vg-forgot-icon {
    width: 64px;
    height: 64px;

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

    margin-bottom: 20px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #eaf8e9,
            #f7fcf6
        );

    color: #2d9141;

    font-size: 25px;

    box-shadow:
        inset 0 0 0 1px #daebda;
}


.vg-form-small-title {
    display: block;

    margin-bottom: 7px;

    color: #329647;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 1.3px;

    text-transform: uppercase;
}


.vg-forgot-form-area h2 {
    margin: 0 0 9px;

    color: #17391e;

    font-size: 31px;
    font-weight: 800;
}


.vg-form-description {
    margin: 0 0 27px;

    color: #738077;

    font-size: 14px;
    line-height: 1.65;
}


/* =========================================
   MESSAGE
========================================= */

.vg-forgot-message {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    margin-bottom: 20px;

    padding: 13px 15px;

    border-radius: 11px;

    font-size: 13px;
    line-height: 1.5;

    font-weight: 600;
}


.vg-forgot-message.success {
    background: #ebf8eb;

    border: 1px solid #c6e6c8;

    color: #277d38;
}


.vg-forgot-message.error {
    background: #fff0f0;

    border: 1px solid #f0cccc;

    color: #c54848;
}


/* =========================================
   FORM
========================================= */

.vg-forgot-group {
    margin-bottom: 18px;
}


.vg-forgot-group label {
    display: block;

    margin-bottom: 9px;

    color: #405848;

    font-size: 14px;
    font-weight: 750;
}


.vg-forgot-input {
    position: relative;
}


.vg-forgot-input > i {
    position: absolute;

    top: 50%;
    left: 17px;

    transform: translateY(-50%);

    color: #65a66d;

    font-size: 16px;

    pointer-events: none;
}


.vg-forgot-input input {
    width: 100%;
    height: 55px;

    padding: 0 17px 0 47px;

    box-sizing: border-box;

    border: 1px solid #d8e5d9;
    border-radius: 13px;

    background: #fafdfa;

    outline: none;

    color: #29442f;

    font-size: 15px;

    transition: .25s ease;
}


.vg-forgot-input input::placeholder {
    color: #9da89f;
}


.vg-forgot-input input:focus {
    background: #ffffff;

    border-color: #51a65c;

    box-shadow:
        0 0 0 4px rgba(48, 151, 67, .09);
}


/* RESET BUTTON */

.vg-reset-btn {
    width: 100%;
    min-height: 54px;

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

    gap: 10px;

    border: none;
    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            #349d48,
            #207a33
        );

    color: #ffffff;

    font-size: 15px;
    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 12px 27px rgba(38, 132, 55, .24);

    transition: .3s ease;
}


.vg-reset-btn i {
    transition: .3s ease;
}


.vg-reset-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 16px 32px rgba(38, 132, 55, .31);
}


.vg-reset-btn:hover i {
    transform: translateX(4px);
}


/* =========================================
   DIVIDER
========================================= */

.vg-forgot-divider {
    position: relative;

    margin: 26px 0;

    text-align: center;
}


.vg-forgot-divider::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 0;

    width: 100%;
    height: 1px;

    background: #e3eae3;
}


.vg-forgot-divider span {
    position: relative;

    padding: 0 12px;

    background: #ffffff;

    color: #99a39a;

    font-size: 12px;
}


/* =========================================
   BACK TO LOGIN
========================================= */

.vg-login-return {
    text-align: center;
}


.vg-login-return > span {
    display: block;

    margin-bottom: 8px;

    color: #7d897f;

    font-size: 13px;
}


.vg-login-return a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    color: #28853b;

    text-decoration: none;

    font-size: 14px;
    font-weight: 800;
}


.vg-login-return a:hover {
    text-decoration: underline;
}


/* =========================================
   SECURITY NOTE
========================================= */

.vg-security-note {
    display: flex;
    align-items: flex-start;

    gap: 11px;

    margin-top: 28px;

    padding: 14px;

    border-radius: 12px;

    background: #f5faf4;

    border: 1px solid #e1ece1;
}


.vg-security-note > span {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

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

    border-radius: 9px;

    background: #e4f4e4;

    color: #338f43;

    font-size: 14px;
}


.vg-security-note p {
    margin: 0;

    color: #748177;

    font-size: 12px;
    line-height: 1.55;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

    .vg-forgot-card {
        grid-template-columns: 1fr;
    }


    .vg-forgot-info {
        padding: 40px;
    }


    .vg-forgot-features {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    .vg-forgot-feature {
        display: block;
    }


    .vg-forgot-feature > span {
        margin-bottom: 10px;
    }


    .vg-forgot-form-area {
        padding: 45px 40px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .vg-forgot-page {
        padding: 35px 14px;
    }


    .vg-forgot-card {
        border-radius: 20px;
    }


    .vg-forgot-info {
        padding: 32px 22px;
    }


    .vg-forgot-info h1 {
        font-size: 33px;
    }


    .vg-forgot-info > p {
        font-size: 14px;
    }


    .vg-forgot-features {
        grid-template-columns: 1fr;
    }


    .vg-forgot-feature {
        display: flex;
    }


    .vg-forgot-feature > span {
        margin-bottom: 0;
    }


    .vg-forgot-form-area {
        padding: 35px 22px;
    }


    .vg-forgot-form-area h2 {
        font-size: 27px;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 400px) {

    .vg-forgot-page {
        padding-left: 10px;
        padding-right: 10px;
    }


    .vg-forgot-info,
    .vg-forgot-form-area {
        padding-left: 18px;
        padding-right: 18px;
    }


    .vg-forgot-info h1 {
        font-size: 29px;
    }


    .vg-reset-btn {
        min-height: 52px;
    }

}

/* =========================================
   VEGIICART - RESET PASSWORD
========================================= */

.vg-reset-page {
    padding: 70px 20px;

    background:
        radial-gradient(
            circle at 8% 5%,
            rgba(45, 148, 64, 0.12),
            transparent 30%
        ),
        radial-gradient(
            circle at 94% 93%,
            rgba(183, 218, 87, 0.16),
            transparent 30%
        ),
        #f6faf5;

    font-family: Arial, Helvetica, sans-serif;

    color: #183a20;
}


.vg-reset-container {
    width: min(1120px, 100%);
    margin: auto;
}


/* =========================================
   MAIN CARD
========================================= */

.vg-reset-card {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, .92fr);

    overflow: hidden;

    border: 1px solid #dfeadf;
    border-radius: 28px;

    background: #ffffff;

    box-shadow:
        0 25px 70px rgba(26, 78, 33, .11);
}


/* =========================================
   LEFT SIDE
========================================= */

.vg-reset-info {
    position: relative;

    padding: 55px 50px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #174d28,
            #247a36 55%,
            #399a4c
        );

    color: #ffffff;
}


.vg-reset-info::before {
    content: "";

    position: absolute;

    width: 320px;
    height: 320px;

    right: -150px;
    top: -150px;

    border-radius: 50%;

    background: rgba(255,255,255,.065);
}


.vg-reset-info::after {
    content: "";

    position: absolute;

    width: 230px;
    height: 230px;

    left: -120px;
    bottom: -120px;

    border-radius: 50%;

    background: rgba(255,255,255,.06);
}


.vg-reset-tag {
    position: relative;
    z-index: 2;

    display: inline-block;

    margin-bottom: 16px;

    padding: 7px 13px;

    border: 1px solid rgba(255,255,255,.2);
    border-radius: 30px;

    background: rgba(255,255,255,.1);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 1.3px;

    text-transform: uppercase;
}


.vg-reset-info h1 {
    position: relative;
    z-index: 2;

    max-width: 470px;

    margin: 0 0 17px;

    font-size: clamp(35px, 4vw, 50px);
    line-height: 1.07;

    font-weight: 800;
}


.vg-reset-info > p {
    position: relative;
    z-index: 2;

    max-width: 500px;

    margin: 0;

    color: rgba(255,255,255,.82);

    font-size: 16px;
    line-height: 1.75;
}


/* =========================================
   SECURITY FEATURES
========================================= */

.vg-reset-security-list {
    position: relative;
    z-index: 2;

    display: grid;

    gap: 18px;

    margin-top: 38px;
}


.vg-reset-security-item {
    display: flex;
    align-items: flex-start;

    gap: 14px;
}


.vg-reset-security-item > span {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

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

    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;

    background: rgba(255,255,255,.12);

    font-size: 17px;
}


.vg-reset-security-item h3 {
    margin: 0 0 4px;

    font-size: 16px;
    font-weight: 800;
}


.vg-reset-security-item p {
    margin: 0;

    color: rgba(255,255,255,.72);

    font-size: 13px;
    line-height: 1.55;
}


/* SAFE BOX */

.vg-reset-safe-box {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;

    gap: 13px;

    margin-top: 36px;

    padding: 17px;

    border: 1px solid rgba(255,255,255,.16);
    border-radius: 15px;

    background: rgba(255,255,255,.09);
}


.vg-reset-safe-box > i {
    margin-top: 3px;

    font-size: 20px;
}


.vg-reset-safe-box strong {
    display: block;

    margin-bottom: 4px;

    font-size: 14px;
}


.vg-reset-safe-box p {
    margin: 0;

    color: rgba(255,255,255,.7);

    font-size: 12px;
    line-height: 1.55;
}


/* =========================================
   FORM SIDE
========================================= */

.vg-reset-form-area {
    padding: 48px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    background: #ffffff;
}


.vg-reset-icon {
    width: 64px;
    height: 64px;

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

    margin-bottom: 19px;

    border: 1px solid #dcebdd;
    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #e9f8e8,
            #f8fcf7
        );

    color: #2e9141;

    font-size: 24px;
}


.vg-reset-small-title {
    margin-bottom: 7px;

    color: #329447;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 1.3px;

    text-transform: uppercase;
}


.vg-reset-form-area h2 {
    margin: 0 0 9px;

    color: #17391e;

    font-size: 31px;
    font-weight: 800;
}


.vg-reset-description {
    margin: 0 0 26px;

    color: #738077;

    font-size: 14px;
    line-height: 1.65;
}


/* =========================================
   ALERT MESSAGES
========================================= */

.vg-reset-message {
    display: flex;
    align-items: flex-start;

    gap: 9px;

    margin-bottom: 20px;

    padding: 13px 14px;

    border-radius: 11px;

    font-size: 13px;
    line-height: 1.5;

    font-weight: 600;
}


.vg-reset-message.success {
    border: 1px solid #c5e6c7;

    background: #ecf8ec;

    color: #287e38;
}


.vg-reset-message.error {
    border: 1px solid #f0cccc;

    background: #fff0f0;

    color: #c54b4b;
}


/* =========================================
   INPUTS
========================================= */

.vg-reset-group {
    margin-bottom: 18px;
}


.vg-reset-group label {
    display: block;

    margin-bottom: 9px;

    color: #405848;

    font-size: 14px;
    font-weight: 750;
}


.vg-reset-input {
    position: relative;
}


.vg-reset-input > i {
    position: absolute;

    top: 50%;
    left: 17px;

    transform: translateY(-50%);

    color: #67a86f;

    font-size: 15px;

    pointer-events: none;
}


.vg-reset-input input {
    width: 100%;
    height: 55px;

    box-sizing: border-box;

    padding:
        0
        52px
        0
        46px;

    border: 1px solid #d8e5d9;
    border-radius: 13px;

    background: #fafdfa;

    color: #29432e;

    outline: none;

    font-size: 15px;

    transition: .25s ease;
}


.vg-reset-input input::placeholder {
    color: #9ca79e;
}


.vg-reset-input input:focus {
    border-color: #51a55c;

    background: #ffffff;

    box-shadow:
        0 0 0 4px
        rgba(49, 151, 67, .09);
}


/* PASSWORD EYE */

.vg-password-toggle {
    position: absolute;

    top: 50%;
    right: 14px;

    transform: translateY(-50%);

    z-index: 2;

    width: 35px;
    height: 35px;

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

    border: 0;

    border-radius: 8px;

    background: transparent;

    color: #77887a;

    cursor: pointer;

    font-size: 15px;
}


.vg-password-toggle:hover {
    background: #eef6ed;

    color: #2f8b3f;
}


/* =========================================
   PASSWORD STRENGTH
========================================= */

.vg-password-strength {
    margin: -5px 0 15px;
}


.vg-strength-bars {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 5px;

    margin-bottom: 7px;
}


.vg-strength-bars span {
    height: 5px;

    border-radius: 10px;

    background: #e4ebe4;

    transition: .3s ease;
}


.vg-strength-bars.weak span:nth-child(1) {
    background: #df5555;
}


.vg-strength-bars.medium span:nth-child(-n+2) {
    background: #e7a538;
}


.vg-strength-bars.good span:nth-child(-n+3) {
    background: #80ab39;
}


.vg-strength-bars.strong span {
    background: #329447;
}


.vg-strength-text {
    color: #859087;

    font-size: 11px;
}


.vg-strength-text strong {
    color: #526856;
}


/* =========================================
   PASSWORD RULES
========================================= */

.vg-password-rules {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 8px 12px;

    margin-bottom: 21px;

    padding: 14px;

    border-radius: 12px;

    background: #f7faf6;

    border: 1px solid #e5ece4;
}


.vg-rule {
    display: flex;
    align-items: center;

    gap: 7px;

    color: #7a897d;

    font-size: 11px;
}


.vg-rule i {
    font-size: 6px;

    color: #bcc6bd;
}


.vg-rule.valid {
    color: #318942;
}


.vg-rule.valid i {
    font-size: 11px;

    color: #319244;
}


.vg-rule.valid i::before {
    content: "\f058";
}


/* MATCH MESSAGE */

.vg-password-match {
    display: block;

    min-height: 17px;

    margin-top: 6px;

    font-size: 11px;
    font-weight: 700;
}


.vg-password-match.success {
    color: #318b42;
}


.vg-password-match.error {
    color: #d24b4b;
}


/* =========================================
   BUTTON
========================================= */

.vg-reset-submit {
    width: 100%;
    min-height: 55px;

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

    gap: 9px;

    border: 0;
    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            #349d48,
            #207a33
        );

    color: #ffffff;

    font-size: 15px;
    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 12px 27px
        rgba(36, 131, 53, .24);

    transition: .3s ease;
}


.vg-reset-submit:hover {
    transform: translateY(-2px);

    box-shadow:
        0 16px 33px
        rgba(36, 131, 53, .31);
}


/* =========================================
   DIVIDER
========================================= */

.vg-reset-divider {
    position: relative;

    margin: 25px 0;

    text-align: center;
}


.vg-reset-divider::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 0;

    width: 100%;
    height: 1px;

    background: #e3eae3;
}


.vg-reset-divider span {
    position: relative;

    padding: 0 12px;

    background: #ffffff;

    color: #99a39a;

    font-size: 12px;
}


/* =========================================
   LOGIN
========================================= */

.vg-reset-login {
    text-align: center;
}


.vg-reset-login > span {
    display: block;

    margin-bottom: 8px;

    color: #7d897f;

    font-size: 13px;
}


.vg-reset-login a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    color: #28853b;

    font-size: 14px;
    font-weight: 800;

    text-decoration: none;
}


.vg-reset-login a:hover {
    text-decoration: underline;
}


/* =========================================
   NOTE
========================================= */

.vg-reset-note {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    margin-top: 27px;

    padding: 14px;

    border: 1px solid #e0ebe0;
    border-radius: 12px;

    background: #f6faf5;
}


.vg-reset-note > span {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

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

    border-radius: 9px;

    background: #e5f4e4;

    color: #348e43;

    font-size: 14px;
}


.vg-reset-note p {
    margin: 0;

    color: #748178;

    font-size: 12px;
    line-height: 1.55;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

    .vg-reset-card {
        grid-template-columns: 1fr;
    }


    .vg-reset-info {
        padding: 40px;
    }


    .vg-reset-security-list {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    .vg-reset-security-item {
        display: block;
    }


    .vg-reset-security-item > span {
        margin-bottom: 10px;
    }


    .vg-reset-form-area {
        padding: 42px 40px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .vg-reset-page {
        padding: 35px 14px;
    }


    .vg-reset-card {
        border-radius: 20px;
    }


    .vg-reset-info {
        padding: 32px 22px;
    }


    .vg-reset-info h1 {
        font-size: 33px;
    }


    .vg-reset-info > p {
        font-size: 14px;
    }


    .vg-reset-security-list {
        grid-template-columns: 1fr;
    }


    .vg-reset-security-item {
        display: flex;
    }


    .vg-reset-security-item > span {
        margin-bottom: 0;
    }


    .vg-reset-form-area {
        padding: 34px 22px;
    }


    .vg-reset-form-area h2 {
        font-size: 27px;
    }


    .vg-password-rules {
        grid-template-columns: 1fr;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 400px) {

    .vg-reset-page {
        padding-left: 10px;
        padding-right: 10px;
    }


    .vg-reset-info,
    .vg-reset-form-area {
        padding-left: 18px;
        padding-right: 18px;
    }


    .vg-reset-info h1 {
        font-size: 29px;
    }

}

/* =========================================
   VEGIICART - ORDER DETAILS PAGE
========================================= */

.vg-order-details-page {
    padding: 55px 20px 80px;

    background:
        radial-gradient(
            circle at 5% 3%,
            rgba(48, 148, 65, .09),
            transparent 26%
        ),
        #f7faf6;

    font-family: Arial, Helvetica, sans-serif;

    color: #183b20;
}


.vg-order-details-container {
    width: min(1280px, 100%);
    margin: auto;
}


/* =========================================
   PAGE HEADING
========================================= */

.vg-order-details-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 25px;

    margin-bottom: 28px;
}


.vg-order-label {
    display: inline-block;

    margin-bottom: 7px;

    color: #329747;

    font-size: 13px;
    font-weight: 800;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


.vg-order-details-heading h1 {
    margin: 0 0 8px;

    color: #15391d;

    font-size: clamp(32px, 4vw, 46px);
    line-height: 1.1;

    font-weight: 800;
}


.vg-order-details-heading p {
    margin: 0;

    color: #718075;

    font-size: 16px;
    line-height: 1.6;
}


.vg-order-back-btn {
    min-height: 46px;

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

    gap: 8px;

    flex-shrink: 0;

    padding: 0 18px;

    border: 1px solid #dce7dd;
    border-radius: 12px;

    background: #ffffff;

    color: #286638;

    text-decoration: none;

    font-size: 14px;
    font-weight: 800;

    transition: .3s ease;
}


.vg-order-back-btn:hover {
    background: #2f9342;
    border-color: #2f9342;

    color: #ffffff;

    transform: translateY(-2px);
}


/* =========================================
   MAIN ORDER CARD
========================================= */

.vg-order-main-card {
    margin-bottom: 24px;

    padding: 25px 28px;

    border: 1px solid #dfe9df;
    border-radius: 21px;

    background: #ffffff;

    box-shadow:
        0 12px 35px rgba(25, 73, 31, .06);
}


.vg-order-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 24px;
}


.vg-order-number-box {
    display: flex;
    align-items: center;

    gap: 14px;
}


.vg-order-icon {
    width: 52px;
    height: 52px;

    flex: 0 0 52px;

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

    border-radius: 14px;

    background: #eaf8e9;

    color: #2b9140;

    font-size: 20px;
}


.vg-order-number-box span {
    display: block;

    margin-bottom: 4px;

    color: #879289;

    font-size: 12px;
    font-weight: 700;
}


.vg-order-number-box h2 {
    margin: 0;

    color: #1c4023;

    font-size: 21px;
    font-weight: 800;
}


.vg-order-status {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    padding: 10px 15px;

    border-radius: 30px;

    font-size: 13px;
    font-weight: 800;
}


.vg-order-status.delivered {
    background: #e7f7e7;
    color: #26833a;
}

.vg-order-status.placed {
    background: #eef4ff;
    color: #2f5bb7;
}

.vg-order-status.confirmed,
.vg-order-status.scheduled {
    background: #edf8eb;
    color: #2f7d36;
}

.vg-order-status.out {
    background: #fff6e5;
    color: #a56b00;
}

.vg-order-status.cancelled {
    background: #fdecec;
    color: #b42318;
}

.vg-track-step.current .vg-track-circle {
    border-color: #3d9b47;
    background: #edf8eb;
    color: #2f7d36;
    box-shadow: 0 0 0 6px rgba(61, 155, 71, .1);
}

.vg-order-loading {
    padding: 28px 10px;
    text-align: center;
    color: #7d887f;
    font-size: 13px;
}

.vg-product-fallback {
    width: 100%;
    height: 100%;
    min-height: 72px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #eaf7e8, #f4faf2);
    color: #3d9b47;
    font-size: 22px;
    border-radius: 12px;
}

.vg-payment-status.paid {
    background: #e7f7e7;
    color: #26833a;
}

.vg-invoice-btn,
.vg-support-btn {
    cursor: pointer;
    border: 0;
    font-family: inherit;
}


/* META */

.vg-order-meta-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    border-top: 1px solid #edf1ed;

    padding-top: 22px;
}


.vg-order-meta-item {
    display: flex;
    align-items: center;

    gap: 11px;

    padding: 5px 18px;

    border-right: 1px solid #edf1ed;
}


.vg-order-meta-item:first-child {
    padding-left: 0;
}


.vg-order-meta-item:last-child {
    border-right: 0;
}


.vg-order-meta-item > span {
    width: 39px;
    height: 39px;

    flex: 0 0 39px;

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

    border-radius: 10px;

    background: #f1f7f0;

    color: #41904b;
}


.vg-order-meta-item div {
    display: flex;
    flex-direction: column;

    gap: 3px;
}


.vg-order-meta-item small {
    color: #879288;

    font-size: 11px;
}


.vg-order-meta-item strong {
    color: #314c36;

    font-size: 13px;
}


/* =========================================
   GENERAL SECTION
========================================= */

.vg-order-section {
    margin-bottom: 24px;

    padding: 26px;

    border: 1px solid #e0e9e0;
    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 11px 30px rgba(25, 68, 30, .05);
}


.vg-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 24px;
}


.vg-section-heading > div {
    display: flex;
    align-items: center;

    gap: 13px;
}


.vg-section-icon {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

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

    border-radius: 13px;

    background: #edf8ec;

    color: #309142;

    font-size: 18px;
}


.vg-section-heading h2 {
    margin: 0 0 4px;

    color: #193c20;

    font-size: 20px;
    font-weight: 800;
}


.vg-section-heading p {
    margin: 0;

    color: #829084;

    font-size: 13px;
}


.vg-tracking-id {
    padding: 8px 11px;

    border-radius: 8px;

    background: #f3f7f2;

    color: #6b796e;

    font-size: 11px;
    font-weight: 700;
}


/* =========================================
   TRACKING
========================================= */

.vg-tracking-wrapper {
    display: flex;
    align-items: flex-start;

    padding: 12px 8px 4px;
}


.vg-track-step {
    width: 105px;

    flex: 0 0 105px;

    text-align: center;
}


.vg-track-circle {
    width: 42px;
    height: 42px;

    margin: 0 auto 11px;

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

    border: 3px solid #dfe8df;
    border-radius: 50%;

    background: #ffffff;

    color: #a4aea5;

    font-size: 14px;
}


.vg-track-step.completed .vg-track-circle {
    border-color: #359847;

    background:
        linear-gradient(
            135deg,
            #3aa04c,
            #247d36
        );

    color: #ffffff;

    box-shadow:
        0 7px 18px rgba(38, 137, 56, .2);
}


.vg-track-info {
    display: flex;
    flex-direction: column;

    gap: 3px;
}


.vg-track-info strong {
    color: #36513b;

    font-size: 12px;
}


.vg-track-info span {
    color: #79877c;

    font-size: 10px;
}


.vg-track-info small {
    color: #a0aaa1;

    font-size: 9px;
}


.vg-track-line {
    flex: 1;

    height: 3px;

    margin-top: 20px;

    background: #e2eae2;
}


.vg-track-line.completed {
    background:
        linear-gradient(
            90deg,
            #3a9c4a,
            #66b66e
        );
}


/* =========================================
   MAIN CONTENT GRID
========================================= */

.vg-order-content-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        350px;

    gap: 24px;

    align-items: start;
}


.vg-order-left {
    min-width: 0;
}


.vg-order-right {
    position: sticky;

    top: 110px;
}


/* =========================================
   PRODUCTS
========================================= */

.vg-order-product-list {
    border-top: 1px solid #edf1ed;
}


.vg-order-product {
    display: grid;

    grid-template-columns:
        95px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 18px;

    padding: 20px 0;

    border-bottom: 1px solid #edf1ed;
}


.vg-product-image {
    width: 95px;
    height: 95px;

    overflow: hidden;

    border-radius: 13px;

    background: #f2f6f1;
}


.vg-product-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: .3s ease;
}


.vg-order-product:hover .vg-product-image img {
    transform: scale(1.05);
}


.vg-product-category {
    display: inline-block;

    margin-bottom: 6px;

    color: #3d9549;

    font-size: 11px;
    font-weight: 800;

    text-transform: uppercase;
}


.vg-product-info h3 {
    margin: 0 0 8px;

    color: #213f27;

    font-size: 16px;
    font-weight: 800;
}


.vg-product-meta {
    display: flex;
    align-items: center;

    gap: 8px;
}


.vg-product-meta span {
    padding: 5px 8px;

    border-radius: 7px;

    background: #f1f6f0;

    color: #68776b;

    font-size: 11px;
    font-weight: 700;
}


.vg-product-price {
    min-width: 90px;

    text-align: right;
}


.vg-product-price small {
    display: block;

    margin-bottom: 3px;

    color: #969f97;

    font-size: 11px;
}


.vg-product-price strong {
    display: block;

    margin-bottom: 8px;

    color: #183b20;

    font-size: 17px;
    font-weight: 800;
}


.vg-product-price a {
    color: #2e8c40;

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;
}


/* REORDER */

.vg-order-reorder-box {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-top: 20px;

    padding: 17px;

    border-radius: 13px;

    background: #f4faf3;
}


.vg-order-reorder-box > div {
    display: flex;
    align-items: center;

    gap: 11px;
}


.vg-order-reorder-box > div > i {
    width: 38px;
    height: 38px;

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

    border-radius: 10px;

    background: #e5f4e4;

    color: #358e43;
}


.vg-order-reorder-box span {
    display: flex;
    flex-direction: column;

    gap: 2px;
}


.vg-order-reorder-box strong {
    color: #315037;

    font-size: 13px;
}


.vg-order-reorder-box small {
    color: #7d8a7f;

    font-size: 11px;
}


.vg-reorder-btn {
    min-height: 43px;

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

    gap: 7px;

    padding: 0 17px;

    border: 0;
    border-radius: 10px;

    background: #2e9140;

    color: #ffffff;

    font-size: 12px;
    font-weight: 800;

    cursor: pointer;

    transition: .25s ease;
}


.vg-reorder-btn:hover {
    background: #237b33;

    transform: translateY(-2px);
}


/* =========================================
   DELIVERY ADDRESS
========================================= */

.vg-delivery-address {
    padding: 20px;

    border: 1px solid #e1e9e1;
    border-radius: 14px;

    background: #fafdfa;
}


.vg-address-heading-row {
    margin-bottom: 14px;
}


.vg-address-type {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    padding: 6px 10px;

    border-radius: 20px;

    background: #e8f7e8;

    color: #2c873d;

    font-size: 11px;
    font-weight: 800;
}


.vg-delivery-address h3 {
    margin: 0 0 8px;

    color: #25452b;

    font-size: 16px;
    font-weight: 800;
}


.vg-delivery-address p {
    margin: 0;

    color: #68786c;

    font-size: 13px;
    line-height: 1.7;
}


.vg-address-phone {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    margin-top: 12px;

    color: #526a56;

    font-size: 12px;
    font-weight: 700;
}


/* =========================================
   PAYMENT
========================================= */

.vg-payment-information {
    display: grid;

    grid-template-columns:
        50px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 14px;

    padding: 18px;

    border: 1px solid #e1e9e1;
    border-radius: 14px;

    background: #fafdfa;
}


.vg-payment-icon {
    width: 50px;
    height: 50px;

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

    border-radius: 13px;

    background: #eaf6e9;

    color: #378d44;

    font-size: 19px;
}


.vg-payment-details {
    display: flex;
    flex-direction: column;

    gap: 3px;
}


.vg-payment-details span {
    color: #879388;

    font-size: 11px;
}


.vg-payment-details strong {
    color: #2c4932;

    font-size: 14px;
}


.vg-payment-details small {
    color: #7f8d81;

    font-size: 11px;
}


.vg-payment-status {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    padding: 7px 10px;

    border-radius: 20px;

    background: #e6f6e6;

    color: #29833a;

    font-size: 11px;
    font-weight: 800;
}


/* =========================================
   ORDER SUMMARY
========================================= */

.vg-order-summary-card,
.vg-order-action-card {
    margin-bottom: 20px;

    padding: 23px;

    border: 1px solid #e0e9e0;
    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 11px 30px rgba(25, 68, 30, .05);
}


.vg-summary-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 19px;
}


.vg-summary-heading h2 {
    margin: 0;

    color: #1c3e23;

    font-size: 19px;
    font-weight: 800;
}


.vg-summary-heading > span {
    padding: 5px 8px;

    border-radius: 7px;

    background: #edf7ec;

    color: #408d49;

    font-size: 10px;
    font-weight: 800;
}


.vg-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 9px 0;

    color: #657468;

    font-size: 13px;
}


.vg-summary-row strong {
    color: #354d39;

    font-size: 13px;
}


.vg-summary-row.discount,
.vg-summary-row.discount strong {
    color: #319142;
}


.vg-summary-divider {
    height: 1px;

    margin: 12px 0;

    background: #e4eae4;
}


.vg-summary-total {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;
}


.vg-summary-total div {
    display: flex;
    flex-direction: column;

    gap: 2px;
}


.vg-summary-total span {
    color: #29472f;

    font-size: 14px;
    font-weight: 800;
}


.vg-summary-total small {
    color: #929d94;

    font-size: 9px;
}


.vg-summary-total > strong {
    color: #1f7f33;

    font-size: 22px;
    font-weight: 800;
}


.vg-summary-saving {
    display: flex;
    align-items: center;

    gap: 7px;

    margin-top: 17px;

    padding: 11px;

    border-radius: 9px;

    background: #edf9ec;

    color: #318b41;

    font-size: 11px;
    font-weight: 700;
}


/* =========================================
   ACTION CARDS
========================================= */

.vg-order-action-card {
    text-align: center;
}


.vg-action-card-icon {
    width: 48px;
    height: 48px;

    margin: 0 auto 12px;

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

    border-radius: 13px;

    background: #e9f7e8;

    color: #348d42;

    font-size: 19px;
}


.vg-action-card-icon.help {
    background: #fff6e7;

    color: #bb781e;
}


.vg-order-action-card h3 {
    margin: 0 0 6px;

    color: #25432b;

    font-size: 16px;
    font-weight: 800;
}


.vg-order-action-card p {
    margin: 0 0 16px;

    color: #7d8a7f;

    font-size: 12px;
    line-height: 1.5;
}


.vg-invoice-btn,
.vg-support-btn {
    width: 100%;
    min-height: 43px;

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

    gap: 7px;

    border-radius: 10px;

    text-decoration: none;

    font-size: 12px;
    font-weight: 800;

    box-sizing: border-box;
}


.vg-invoice-btn {
    background: #2d9140;

    color: #ffffff;
}

.vg-invoice-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vg-invoice-btn.ghost {
    background: #ffffff;
    color: #2d9140;
    border: 1px solid #b9dbbf;
}

.vg-invoice-btn:disabled {
    opacity: 0.65;
    cursor: wait;
}


.vg-support-btn {
    border: 1px solid #d7e5d8;

    background: #ffffff;

    color: #337e3f;
}


/* =========================================
   SMALL LINKS
========================================= */

.vg-order-small-links {
    padding: 8px 5px;
}


.vg-order-small-links a {
    display: flex;
    align-items: center;

    gap: 9px;

    padding: 12px;

    border-bottom: 1px solid #e6ebe6;

    color: #536958;

    text-decoration: none;

    font-size: 12px;
    font-weight: 700;

    transition: .2s ease;
}


.vg-order-small-links a:hover {
    color: #2e8c3e;

    padding-left: 16px;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1050px) {

    .vg-order-content-grid {
        grid-template-columns:
            minmax(0, 1fr)
            300px;
    }


    .vg-order-meta-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 14px;
    }


    .vg-order-meta-item {
        border-right: 0;

        padding: 6px 0;
    }

}


/* =========================================
   MOBILE / TABLET
========================================= */

@media (max-width: 850px) {

    .vg-order-content-grid {
        grid-template-columns: 1fr;
    }


    .vg-order-right {
        position: static;
    }


    .vg-tracking-wrapper {
        overflow-x: auto;

        padding-bottom: 15px;
    }


    .vg-track-step {
        min-width: 100px;
    }


    .vg-track-line {
        min-width: 50px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 650px) {

    .vg-order-details-page {
        padding: 35px 14px 55px;
    }


    .vg-order-details-heading {
        display: block;
    }


    .vg-order-back-btn {
        margin-top: 17px;
    }


    .vg-order-main-card,
    .vg-order-section {
        padding: 20px 16px;

        border-radius: 16px;
    }


    .vg-order-top {
        align-items: flex-start;
        flex-direction: column;
    }


    .vg-order-meta-grid {
        grid-template-columns: 1fr;
    }


    .vg-section-heading {
        align-items: flex-start;
    }


    .vg-tracking-id {
        display: none;
    }


    .vg-order-product {
        grid-template-columns:
            80px
            minmax(0, 1fr);

        gap: 13px;
    }


    .vg-product-image {
        width: 80px;
        height: 80px;
    }


    .vg-product-price {
        grid-column: 1 / -1;

        display: flex;
        align-items: center;

        justify-content: flex-end;

        gap: 12px;

        text-align: right;
    }


    .vg-product-price small {
        margin: 0;
    }


    .vg-product-price strong {
        margin: 0;
    }


    .vg-order-reorder-box {
        align-items: stretch;
        flex-direction: column;
    }


    .vg-reorder-btn {
        width: 100%;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 430px) {

    .vg-order-details-page {
        padding-left: 10px;
        padding-right: 10px;
    }


    .vg-order-details-heading h1 {
        font-size: 31px;
    }


    .vg-order-number-box h2 {
        font-size: 17px;
    }


    .vg-order-meta-item strong {
        font-size: 12px;
    }


    .vg-section-heading h2 {
        font-size: 18px;
    }


    .vg-payment-information {
        grid-template-columns:
            44px
            minmax(0, 1fr);
    }


    .vg-payment-status {
        grid-column: 2;

        justify-self: start;
    }


    .vg-order-product {
        grid-template-columns:
            70px
            minmax(0, 1fr);
    }


    .vg-product-image {
        width: 70px;
        height: 70px;
    }

}

/* ==========================================
   VEGIICART OFFERS & DISCOUNTS PAGE
========================================== */

.vc-offers-page,
.vc-offers-page * {
    box-sizing: border-box;
}

.vc-offers-page {
    font-family: "Inter", sans-serif;
    color: #17261c;
    background: #ffffff;
}

.vc-offers-container {
    width: min(1240px, calc(100% - 40px));
    margin: 0 auto;
}


/* HERO */

.vc-offers-hero {
    position: relative;
    overflow: hidden;
    padding: 70px 0;
    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(144, 238, 144, .32),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #f0faef 0%,
            #fbfff8 50%,
            #effbe9 100%
        );
}

.vc-offers-hero::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(63, 159, 54, .07);
    left: -180px;
    bottom: -230px;
}

.vc-offers-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 70px;
}

.vc-offers-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 15px;
    border-radius: 100px;
    color: #23752d;
    background: #e4f5e2;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 18px;
}

.vc-offers-hero-content h1 {
    margin: 0;
    max-width: 620px;
    color: #15321c;
    font-size: clamp(42px, 5vw, 70px);
    line-height: 1.04;
    font-weight: 800;
    letter-spacing: -2.8px;
}

.vc-offers-hero-content h1 span {
    color: #37923f;
}

.vc-offers-hero-content > p {
    max-width: 620px;
    margin: 22px 0 28px;
    color: #657368;
    font-size: 17px;
    line-height: 1.8;
}

.vc-offers-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.vc-offers-primary-btn,
.vc-offers-secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 23px;
    border-radius: 12px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    transition: .3s ease;
}

.vc-offers-primary-btn {
    background: #318839;
    color: #ffffff;
    box-shadow: 0 12px 28px rgba(49, 136, 57, .23);
}

.vc-offers-primary-btn:hover {
    color: #ffffff;
    background: #256f2c;
    transform: translateY(-2px);
}

.vc-offers-secondary-btn {
    border: 1px solid #d5e6d3;
    background: rgba(255,255,255,.8);
    color: #243728;
}

.vc-offers-secondary-btn:hover {
    color: #318839;
    border-color: #318839;
}

.vc-offers-highlights {
    display: flex;
    gap: 27px;
    flex-wrap: wrap;
    margin-top: 33px;
}

.vc-offers-highlights > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vc-offers-highlights i {
    color: #35903d;
    font-size: 20px;
}

.vc-offers-highlights span {
    display: flex;
    flex-direction: column;
    color: #77827a;
    font-size: 11px;
    line-height: 1.4;
}

.vc-offers-highlights strong {
    color: #233729;
    font-size: 12px;
}

.vc-offers-hero-image {
    position: relative;
    min-height: 500px;
    padding: 18px;
    border-radius: 35px;
    background: rgba(255,255,255,.75);
    box-shadow: 0 25px 70px rgba(35, 85, 40, .15);
}

.vc-offers-hero-image > img {
    width: 100%;
    height: 465px;
    display: block;
    object-fit: cover;
    border-radius: 26px;
}

.vc-offers-discount-badge {
    position: absolute;
    z-index: 3;
    top: -20px;
    right: -20px;
    width: 105px;
    height: 105px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #ffca28;
    color: #18351d;
    box-shadow: 0 15px 35px rgba(176, 130, 0, .22);
    border: 6px solid #fff;
}

.vc-offers-discount-badge strong {
    font-size: 28px;
    line-height: 1;
}

.vc-offers-discount-badge span {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 800;
}

.vc-offers-floating-card {
    position: absolute;
    left: -30px;
    bottom: 50px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 220px;
    padding: 14px 18px;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 14px 40px rgba(28, 75, 33, .18);
}

.vc-offers-floating-card > span {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #e5f6e2;
    color: #318839;
    font-size: 18px;
}

.vc-offers-floating-card div {
    display: flex;
    flex-direction: column;
}

.vc-offers-floating-card small {
    color: #879087;
    font-size: 11px;
}

.vc-offers-floating-card strong {
    color: #1d3422;
    font-size: 13px;
}


/* BENEFITS */

.vc-offer-benefits {
    padding: 28px 0;
    border-bottom: 1px solid #edf0ed;
    background: #ffffff;
}

.vc-offer-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.vc-offer-benefit {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 24px;
    border-right: 1px solid #e9eee9;
}

.vc-offer-benefit:last-child {
    border-right: 0;
}

.vc-offer-benefit > span {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    color: #318839;
    background: #eaf7e8;
    font-size: 19px;
}

.vc-offer-benefit strong {
    display: block;
    color: #24362a;
    font-size: 14px;
}

.vc-offer-benefit p {
    margin: 3px 0 0;
    color: #849087;
    font-size: 11px;
    line-height: 1.5;
}


/* COMMON */

.vc-deals-section,
.vc-coupon-section,
.vc-category-offers,
.vc-bulk-offer {
    padding: 78px 0;
}

.vc-offers-heading {
    margin-bottom: 32px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 25px;
}

.vc-section-label {
    display: inline-block;
    margin-bottom: 8px;
    color: #32903b;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.vc-offers-heading h2 {
    margin: 0;
    color: #172f1e;
    font-size: clamp(30px, 4vw, 43px);
    line-height: 1.15;
    letter-spacing: -1.5px;
}

.vc-offers-heading h2 span {
    color: #37943f;
}

.vc-offers-heading p {
    max-width: 610px;
    margin: 10px 0 0;
    color: #748078;
    font-size: 14px;
    line-height: 1.7;
}

.vc-view-all {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
    text-decoration: none;
    color: #318839;
    font-size: 13px;
    font-weight: 700;
}

.vc-view-all:hover {
    color: #1d6425;
}


/* PRODUCT DEAL CARDS */

.vc-deals-section {
    background: #fbfdf9;
}

.vc-deals-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.vc-deal-card {
    position: relative;
    overflow: hidden;
    border: 1px solid #e4ebe3;
    border-radius: 18px;
    background: #ffffff;
    transition: .3s ease;
}

.vc-deal-card:hover {
    transform: translateY(-6px);
    border-color: #bad8b7;
    box-shadow: 0 18px 45px rgba(38, 85, 43, .11);
}

.vc-deal-image {
    position: relative;
    height: 230px;
    overflow: hidden;
    background: #f3f7f2;
}

.vc-deal-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .5s ease;
}

.vc-deal-card:hover .vc-deal-image img {
    transform: scale(1.06);
}

.vc-save-badge {
    position: absolute;
    z-index: 2;
    top: 13px;
    left: 13px;
    padding: 6px 10px;
    border-radius: 7px;
    background: #e4463a;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
}

.vc-wishlist-btn {
    position: absolute;
    z-index: 2;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.94);
    color: #334138;
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

.vc-deal-content {
    padding: 18px;
}

.vc-product-category {
    display: block;
    margin-bottom: 5px;
    color: #4a9c50;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.vc-deal-content h3 {
    margin: 0 0 8px;
    color: #203125;
    font-size: 16px;
}

.vc-rating {
    display: flex;
    align-items: center;
    gap: 2px;
    color: #f5ad22;
    font-size: 11px;
}

.vc-rating span {
    margin-left: 5px;
    color: #859086;
}

.vc-product-price {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 13px;
}

.vc-product-price strong {
    color: #2c8735;
    font-size: 20px;
}

.vc-product-price del {
    color: #a0aaa2;
    font-size: 12px;
}

.vc-product-price span {
    color: #8c958d;
    font-size: 10px;
}

.vc-add-cart {
    width: 100%;
    min-height: 42px;
    margin-top: 15px;
    border: 1px solid #cde2ca;
    border-radius: 10px;
    background: #f0f8ef;
    color: #287c31;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: .3s ease;
}

.vc-add-cart i {
    margin-right: 6px;
}

.vc-add-cart:hover {
    background: #318839;
    border-color: #318839;
    color: #fff;
}


/* PROMOS */

.vc-promo-section {
    padding: 10px 0 78px;
    background: #fbfdf9;
}

.vc-promo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.vc-promo-card {
    position: relative;
    min-height: 280px;
    overflow: hidden;
    border-radius: 24px;
    display: flex;
    align-items: center;
    text-decoration: none;
}

.vc-promo-green {
    background: #dcf3d9;
}

.vc-promo-yellow {
    background: #fff0b4;
}

.vc-promo-content {
    position: relative;
    z-index: 2;
    width: 57%;
    padding: 38px;
}

.vc-promo-content > span {
    color: #398941;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.vc-promo-content h3 {
    margin: 7px 0 8px;
    color: #18321e;
    font-size: 27px;
    line-height: 1.2;
}

.vc-promo-content h3 strong {
    display: block;
    color: #338d3a;
}

.vc-promo-content p {
    margin: 0;
    color: #657368;
    font-size: 12px;
    line-height: 1.6;
}

.vc-promo-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 19px;
    color: #285f2e;
    font-size: 12px;
    font-weight: 800;
}

.vc-promo-card img {
    position: absolute;
    right: 0;
    width: 47%;
    height: 100%;
    object-fit: cover;
    clip-path: polygon(25% 0,100% 0,100% 100%,0 100%);
    transition: transform .5s ease;
}

.vc-promo-card:hover img {
    transform: scale(1.06);
}


/* COUPONS */

.vc-coupon-section {
    background: #ffffff;
}

.vc-heading-centered {
    justify-content: center;
    text-align: center;
}

.vc-heading-centered p {
    margin-left: auto;
    margin-right: auto;
}

.vc-coupons-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.vc-coupons-grid .vc-coupon-card {
    position: relative;
    padding: 26px;
    border: 1px dashed #9ac895;
    border-radius: 20px;
    background: #f9fdf8;
}

.vc-coupons-grid .vc-coupon-card::before,
.vc-coupons-grid .vc-coupon-card::after {
    content: "";
    position: absolute;
    top: 63%;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
}

.vc-coupons-grid .vc-coupon-card::before {
    left: -12px;
    border-right: 1px dashed #9ac895;
}

.vc-coupons-grid .vc-coupon-card::after {
    right: -12px;
    border-left: 1px dashed #9ac895;
}

.vc-coupon-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: #dff2dc;
    color: #318839;
    font-size: 20px;
    margin-bottom: 16px;
}

.vc-coupon-info > span {
    color: #399040;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .8px;
}

.vc-coupon-info h3 {
    margin: 5px 0;
    color: #1d3423;
    font-size: 22px;
}

.vc-coupon-info p {
    margin: 0;
    color: #69766d;
    font-size: 12px;
}

.vc-coupon-info small {
    display: block;
    margin-top: 8px;
    color: #9aa39b;
    font-size: 10px;
}

.vc-coupon-code {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px dashed #c6dcc3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.vc-coupon-code span {
    color: #265f2b;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1px;
}

.vc-coupon-code button {
    border: 0;
    border-radius: 8px;
    background: #318839;
    color: #fff;
    padding: 8px 15px;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}


/* CATEGORIES */

.vc-category-offers {
    background: #f7faf5;
}

.vc-category-offers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.vc-category-offer-card {
    position: relative;
    height: 340px;
    overflow: hidden;
    border-radius: 20px;
    text-decoration: none;
}

.vc-category-offer-card > img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .5s ease;
}

.vc-category-offer-card:hover > img {
    transform: scale(1.07);
}

.vc-category-offer-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to top,
            rgba(9, 38, 16, .88),
            rgba(9, 38, 16, .05) 75%
        );
}

.vc-category-overlay {
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px;
    color: #ffffff;
}

.vc-category-overlay > span {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 5px;
    background: #ffca28;
    color: #213b24;
    font-size: 9px;
    font-weight: 800;
}

.vc-category-overlay h3 {
    margin: 10px 0 3px;
    color: #ffffff;
    font-size: 19px;
}

.vc-category-overlay p {
    margin: 0;
    color: rgba(255,255,255,.82);
    font-size: 11px;
}


/* BULK */

.vc-bulk-offer {
    background: #ffffff;
}

.vc-bulk-offer-box {
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr .85fr;
    min-height: 390px;
    border-radius: 30px;
    background: #123e1d;
}

.vc-bulk-content {
    padding: 55px;
    align-self: center;
}

.vc-bulk-label {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    color: #add9af;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.vc-bulk-content h2 {
    max-width: 590px;
    margin: 12px 0;
    color: #ffffff;
    font-size: clamp(30px, 4vw, 45px);
    line-height: 1.15;
}

.vc-bulk-content h2 span {
    color: #a8dc73;
}

.vc-bulk-content p {
    max-width: 650px;
    margin: 0 0 24px;
    color: #c8d6cb;
    font-size: 13px;
    line-height: 1.8;
}

.vc-bulk-image {
    position: relative;
}

.vc-bulk-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


/* CTA */

.vc-offers-cta {
    padding: 0 0 80px;
}

.vc-offers-cta-box {
    position: relative;
    overflow: hidden;
    padding: 43px 50px;
    border-radius: 24px;
    background:
        linear-gradient(135deg, #eaf6dc, #f6fae9);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.vc-offers-cta-box::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    right: -80px;
    top: -150px;
    border-radius: 50%;
    background: rgba(82, 159, 54, .09);
}

.vc-offers-cta-box > div {
    position: relative;
    z-index: 2;
}

.vc-offers-cta-box > div > span {
    color: #37883d;
    font-size: 11px;
    font-weight: 700;
}

.vc-offers-cta-box h2 {
    max-width: 680px;
    margin: 7px 0 6px;
    color: #18351f;
    font-size: clamp(26px, 3vw, 36px);
}

.vc-offers-cta-box p {
    margin: 0;
    color: #667369;
    font-size: 12px;
}

.vc-offers-cta-box > a {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 14px 22px;
    border-radius: 11px;
    background: #318839;
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
}


/* RESPONSIVE */

@media (max-width: 1100px) {

    .vc-offers-hero-grid {
        gap: 40px;
    }

    .vc-deals-grid,
    .vc-category-offers-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .vc-offer-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .vc-offer-benefit:nth-child(2) {
        border-right: 0;
    }

    .vc-coupons-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 850px) {

    .vc-offers-hero {
        padding: 55px 0;
    }

    .vc-offers-hero-grid {
        grid-template-columns: 1fr;
    }

    .vc-offers-hero-image {
        min-height: auto;
    }

    .vc-offers-hero-image > img {
        height: 430px;
    }

    .vc-offers-floating-card {
        left: 35px;
    }

    .vc-promo-grid {
        grid-template-columns: 1fr;
    }

    .vc-bulk-offer-box {
        grid-template-columns: 1fr;
    }

    .vc-bulk-image {
        height: 320px;
    }

    .vc-offers-cta-box {
        align-items: flex-start;
        flex-direction: column;
    }

}


@media (max-width: 650px) {

    .vc-offers-container {
        width: min(100% - 28px, 1240px);
    }

    .vc-offers-hero {
        padding: 42px 0;
    }

    .vc-offers-hero-content h1 {
        font-size: 40px;
        letter-spacing: -1.7px;
    }

    .vc-offers-hero-content > p {
        margin: 17px 0 22px;
        font-size: 14px;
        line-height: 1.7;
    }

    .vc-offers-hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .vc-offers-primary-btn,
    .vc-offers-secondary-btn {
        width: 100%;
    }

    .vc-offers-highlights {
        display: grid;
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .vc-offers-hero-image {
        padding: 10px;
        border-radius: 23px;
    }

    .vc-offers-hero-image > img {
        height: 320px;
        border-radius: 17px;
    }

    .vc-offers-discount-badge {
        top: -18px;
        right: -6px;
        width: 85px;
        height: 85px;
    }

    .vc-offers-discount-badge strong {
        font-size: 22px;
    }

    .vc-offers-floating-card {
        left: 20px;
        bottom: 25px;
        min-width: 195px;
    }

    .vc-offer-benefits-grid {
        grid-template-columns: 1fr;
    }

    .vc-offer-benefit {
        padding: 12px 0;
        border-right: 0;
        border-bottom: 1px solid #edf0ed;
    }

    .vc-offer-benefit:last-child {
        border-bottom: 0;
    }

    .vc-deals-section,
    .vc-coupon-section,
    .vc-category-offers,
    .vc-bulk-offer {
        padding: 55px 0;
    }

    .vc-offers-heading {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 25px;
    }

    .vc-offers-heading h2 {
        font-size: 31px;
    }

    .vc-deals-grid,
    .vc-category-offers-grid,
    .vc-coupons-grid {
        grid-template-columns: 1fr;
    }

    .vc-deal-image {
        height: 280px;
    }

    .vc-promo-section {
        padding-bottom: 55px;
    }

    .vc-promo-card {
        min-height: 360px;
        align-items: flex-start;
    }

    .vc-promo-content {
        width: 100%;
        padding: 28px;
    }

    .vc-promo-card img {
        top: auto;
        bottom: 0;
        width: 100%;
        height: 45%;
        clip-path: none;
    }

    .vc-category-offer-card {
        height: 310px;
    }

    .vc-bulk-content {
        padding: 35px 25px;
    }

    .vc-bulk-content h2 {
        font-size: 31px;
    }

    .vc-bulk-image {
        height: 260px;
    }

    .vc-offers-cta {
        padding-bottom: 55px;
    }

    .vc-offers-cta-box {
        padding: 32px 24px;
    }

    .vc-offers-cta-box > a {
        width: 100%;
        justify-content: center;
    }

}


@media (max-width: 400px) {

    .vc-offers-hero-content h1 {
        font-size: 35px;
    }

    .vc-offers-hero-image > img {
        height: 285px;
    }

    .vc-deal-image {
        height: 245px;
    }

    .vc-coupons-grid .vc-coupon-card {
        padding: 22px;
    }

    .vc-coupon-code span {
        font-size: 12px;
    }

}

/* =============================================
   VEGIICART ORDER SUCCESS PAGE
============================================= */

.vc-success-page,
.vc-success-page * {
    box-sizing: border-box;
}

.vc-success-page {
    width: 100%;
    font-family: "Inter", sans-serif;
    background:
        linear-gradient(
            180deg,
            #f4faf2 0%,
            #ffffff 42%,
            #f9fcf8 100%
        );
    color: #1b2e20;
}

.vc-success-section {
    width: 100%;
    padding: 60px 0 75px;
}

.vc-success-container {
    width: min(1220px, calc(100% - 40px));
    margin: 0 auto;
}


/* =========================
   SUCCESS CARD
========================= */

.vc-success-card {
    position: relative;
    overflow: hidden;
    padding: 50px 30px 38px;
    text-align: center;
    border: 1px solid #deebdc;
    border-radius: 26px;
    background:
        radial-gradient(
            circle at center top,
            rgba(81, 173, 72, .14),
            transparent 38%
        ),
        #ffffff;
    box-shadow: 0 18px 50px rgba(34, 85, 41, .08);
}

.vc-success-card::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(61, 151, 55, .045);
    left: -120px;
    top: -140px;
}

.vc-success-card::after {
    content: "";
    position: absolute;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background: rgba(255, 198, 44, .07);
    right: -110px;
    bottom: -150px;
}

.vc-success-icon-wrap {
    width: 110px;
    height: 110px;
    position: relative;
    display: grid;
    place-items: center;
    margin: 0 auto 20px;
}

.vc-success-icon {
    position: relative;
    z-index: 3;
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background:
        linear-gradient(
            135deg,
            #4ba84d,
            #267c2f
        );
    color: #ffffff;
    font-size: 29px;
    box-shadow:
        0 12px 32px rgba(40, 125, 48, .25);
}

.vc-success-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(61, 151, 55, .18);
}

.ring-one {
    width: 92px;
    height: 92px;
}

.ring-two {
    width: 110px;
    height: 110px;
}

.vc-success-label {
    display: inline-block;
    margin-bottom: 8px;
    color: #32913a;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.3px;
}

.vc-success-card h1 {
    margin: 0;
    color: #18331e;
    font-size: clamp(31px, 5vw, 48px);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -1.5px;
}

.vc-success-card > p {
    max-width: 690px;
    margin: 14px auto 21px;
    color: #6b776e;
    font-size: 14px;
    line-height: 1.8;
}

.vc-success-order-number {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 15px;
    border-radius: 10px;
    background: #eff8ed;
}

.vc-success-order-number span {
    color: #79867c;
    font-size: 11px;
}

.vc-success-order-number strong {
    color: #277d30;
    font-size: 13px;
}

.vc-success-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #fff8e8;
    border: 1px solid #f0dfb0;
}

.vc-success-status-pill span {
    color: #9a7a28;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.vc-success-status-pill strong {
    color: #6d5412;
    font-size: 12px;
}

.vc-success-loading {
    padding: 28px 8px;
    text-align: center;
    color: #84908a;
    font-size: 13px;
}

.vc-success-product-fallback {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #eaf7e8, #f4faf2);
    color: #3d9b47;
    font-size: 22px;
}

.vc-success-product {
    grid-template-columns: 72px minmax(0, 1fr) auto;
}

.vc-success-product-content {
    min-width: 0;
}

.vc-success-product-content h3 {
    overflow-wrap: anywhere;
}

.vc-payment-paid {
    padding: 5px 8px;
    border-radius: 20px;
    background: #e8f6e8;
    color: #2a7a32 !important;
}

.vc-success-btn-danger {
    border: 1px solid #e2b4b4;
    background: #fff7f7;
    color: #b42318;
    cursor: pointer;
    font-family: inherit;
}

.vc-success-btn-danger:hover {
    border-color: #d64545;
    background: #fdecec;
    color: #912018;
}


/* =========================
   INFORMATION CARDS
========================= */

.vc-success-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-top: 20px;
}

.vc-success-info-card {
    min-height: 84px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px;
    border: 1px solid #e2ebe1;
    border-radius: 15px;
    background: #ffffff;
    transition: .3s ease;
}

.vc-success-info-card:hover {
    border-color: #bbd9b8;
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(37, 83, 42, .07);
}

.vc-info-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #eaf7e8;
    color: #318a38;
    font-size: 17px;
}

.vc-success-info-card div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.vc-success-info-card small {
    color: #859087;
    font-size: 10px;
    margin-bottom: 3px;
}

.vc-success-info-card strong {
    color: #243529;
    font-size: 12px;
}


/* =========================
   MAIN GRID
========================= */

.vc-success-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 22px;
    margin-top: 22px;
}

.vc-success-left {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.vc-success-box,
.vc-success-side-card {
    border: 1px solid #e2ebe1;
    border-radius: 20px;
    background: #ffffff;
}

.vc-success-box {
    padding: 27px;
}

.vc-success-box-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.vc-success-box-head span:not(.vc-item-count) {
    display: block;
    margin-bottom: 3px;
    color: #398f40;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.vc-success-box-head h2 {
    margin: 0;
    color: #1d3423;
    font-size: 22px;
    line-height: 1.3;
}

.vc-item-count {
    padding: 7px 11px;
    border-radius: 30px;
    background: #edf6eb;
    color: #327c38;
    font-size: 10px;
    font-weight: 700;
}


/* =========================
   PRODUCTS
========================= */

.vc-success-products {
    border-top: 1px solid #edf1ed;
}

.vc-success-product {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: 15px;
    align-items: center;
    padding: 17px 0;
    border-bottom: 1px solid #edf1ed;
}

.vc-success-product-image {
    width: 72px;
    height: 72px;
    overflow: hidden;
    border-radius: 12px;
    background: #f3f6f2;
}

.vc-success-product-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.vc-success-product-content span {
    color: #439448;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}

.vc-success-product-content h3 {
    margin: 3px 0;
    color: #243629;
    font-size: 14px;
}

.vc-success-product-content p {
    margin: 0;
    color: #89938b;
    font-size: 10px;
}

.vc-success-product-price {
    color: #287f31;
    font-size: 14px;
}


/* =========================
   PRICE BREAKUP
========================= */

.vc-success-price-breakup {
    width: min(100%, 430px);
    margin-left: auto;
    padding-top: 20px;
}

.vc-success-price-breakup > div {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 7px 0;
    font-size: 12px;
}

.vc-success-price-breakup span {
    color: #758077;
}

.vc-success-price-breakup strong {
    color: #2c3b30;
}

.vc-success-discount {
    color: #2f9739 !important;
}

.vc-success-price-breakup .vc-success-total {
    margin-top: 8px;
    padding-top: 15px;
    border-top: 1px solid #dde7dc;
}

.vc-success-total span {
    color: #1e3424;
    font-size: 14px;
    font-weight: 700;
}

.vc-success-total strong {
    color: #267d2f;
    font-size: 19px;
}


/* =========================
   ORDER PROGRESS
========================= */

.vc-order-progress {
    display: grid;
    grid-template-columns:
        1fr 45px
        1fr 45px
        1fr 45px
        1fr;
    align-items: flex-start;
}

.vc-progress-item {
    text-align: center;
}

.vc-progress-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 9px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 2px solid #e2e9e2;
    background: #f7faf6;
    color: #a3aba4;
    font-size: 15px;
}

.vc-progress-item.active .vc-progress-icon {
    border-color: #2f8d38;
    background: #2f8d38;
    color: #ffffff;
}

.vc-progress-item.current .vc-progress-icon {
    border-color: #5aa860;
    background: #edf8eb;
    color: #318a38;
    box-shadow: 0 0 0 6px rgba(60, 151, 67, .08);
}

.vc-progress-item strong {
    display: block;
    color: #2a3a2e;
    font-size: 11px;
}

.vc-progress-item small {
    display: block;
    margin-top: 3px;
    color: #8e9790;
    font-size: 9px;
    line-height: 1.4;
}

.vc-progress-line {
    height: 2px;
    margin-top: 23px;
    background: #e4ebe4;
}

.vc-progress-line.active {
    background: #3f9847;
}


/* =========================
   RIGHT SIDEBAR
========================= */

.vc-success-right {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.vc-success-side-card {
    padding: 22px;
}

.vc-side-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 17px;
}

.vc-side-card-title > span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #32863a;
    background: #eaf7e8;
}

.vc-side-card-title h3 {
    margin: 0;
    color: #223529;
    font-size: 14px;
}

.vc-success-side-card > strong {
    display: block;
    margin-bottom: 6px;
    color: #25362a;
    font-size: 12px;
}

.vc-success-side-card > p {
    margin: 0;
    color: #78847b;
    font-size: 11px;
    line-height: 1.8;
}

.vc-address-contact {
    padding-top: 14px;
    margin-top: 15px;
    border-top: 1px solid #edf0ed;
}

.vc-address-contact span {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 7px;
    color: #657068;
    font-size: 10px;
}

.vc-address-contact i {
    width: 14px;
    color: #3b9242;
}


/* PAYMENT */

.vc-payment-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding: 10px 0;
    border-bottom: 1px solid #eef1ee;
}

.vc-payment-row:last-child {
    border-bottom: 0;
}

.vc-payment-row span {
    color: #7c877f;
    font-size: 10px;
}

.vc-payment-row strong {
    color: #293a2d;
    font-size: 10px;
}

.vc-payment-pending {
    padding: 5px 8px;
    border-radius: 20px;
    background: #fff3d5;
    color: #a77300 !important;
}


/* HELP */

.vc-success-help {
    padding: 25px;
    border-radius: 20px;
    background:
        linear-gradient(
            145deg,
            #153f1f,
            #245b2b
        );
    color: #ffffff;
}

.vc-success-help-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    margin-bottom: 16px;
    border-radius: 12px;
    background: rgba(255,255,255,.1);
    color: #c5e98c;
    font-size: 18px;
}

.vc-success-help h3 {
    margin: 0 0 7px;
    color: #ffffff;
    font-size: 15px;
}

.vc-success-help p {
    margin: 0;
    color: rgba(255,255,255,.72);
    font-size: 10px;
    line-height: 1.7;
}

.vc-success-help a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 17px;
    color: #d2f2a0;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
}


/* =========================
   ACTION BUTTONS
========================= */

.vc-success-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.vc-success-btn {
    min-height: 48px;
    min-width: 170px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 21px;
    border-radius: 11px;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    transition: .3s ease;
}

.vc-success-btn-outline {
    border: 1px solid #cee0cb;
    background: #ffffff;
    color: #2d7133;
}

.vc-success-btn-outline:hover {
    border-color: #32863a;
    color: #32863a;
}

.vc-success-btn-primary {
    border: 1px solid #31893a;
    background: #31893a;
    color: #ffffff;
    box-shadow: 0 10px 25px rgba(49, 137, 58, .18);
}

.vc-success-btn-primary:hover {
    background: #246d2c;
    border-color: #246d2c;
    color: #ffffff;
    transform: translateY(-2px);
}


/* =========================
   BOTTOM NOTE
========================= */

.vc-success-bottom-note {
    max-width: 720px;
    margin: 28px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: left;
    padding: 15px 20px;
    border-radius: 14px;
    background: #eff7ed;
}

.vc-success-bottom-note > span {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #d9eed6;
    color: #31893a;
}

.vc-success-bottom-note strong {
    display: block;
    color: #29402e;
    font-size: 11px;
}

.vc-success-bottom-note p {
    margin: 3px 0 0;
    color: #778279;
    font-size: 9px;
    line-height: 1.6;
}


/* =============================================
   RESPONSIVE
============================================= */

@media (max-width: 1050px) {

    .vc-success-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .vc-success-main-grid {
        grid-template-columns: 1fr 290px;
    }

}


@media (max-width: 850px) {

    .vc-success-section {
        padding: 45px 0 60px;
    }

    .vc-success-main-grid {
        grid-template-columns: 1fr;
    }

    .vc-success-right {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vc-success-help {
        grid-column: 1 / -1;
    }

    .vc-order-progress {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .vc-progress-item {
        min-height: 75px;
        display: grid;
        grid-template-columns: 50px 1fr;
        gap: 13px;
        text-align: left;
        align-items: start;
    }

    .vc-progress-icon {
        width: 44px;
        height: 44px;
        margin: 0;
    }

    .vc-progress-line {
        width: 2px;
        height: 27px;
        margin: -22px 0 4px 21px;
    }

    .vc-success-price-breakup {
        width: 100%;
        margin-left: 0;
    }

}


@media (max-width: 600px) {

    .vc-success-container {
        width: min(100% - 26px, 1220px);
    }

    .vc-success-section {
        padding: 32px 0 45px;
    }

    .vc-success-card {
        padding: 35px 19px 27px;
        border-radius: 20px;
    }

    .vc-success-icon-wrap {
        width: 90px;
        height: 90px;
    }

    .vc-success-icon {
        width: 62px;
        height: 62px;
        font-size: 24px;
    }

    .ring-one {
        width: 78px;
        height: 78px;
    }

    .ring-two {
        width: 90px;
        height: 90px;
    }

    .vc-success-card h1 {
        font-size: 31px;
    }

    .vc-success-card > p {
        font-size: 12px;
    }

    .vc-success-order-number {
        flex-direction: column;
        gap: 2px;
        padding: 10px 18px;
        width: 100%;
        max-width: 320px;
    }

    .vc-success-info-grid {
        grid-template-columns: 1fr;
    }

    .vc-success-info-card {
        min-height: 76px;
    }

    .vc-success-info-card strong {
        font-size: 13px;
        overflow-wrap: anywhere;
    }

    .vc-success-box {
        padding: 20px 16px;
    }

    .vc-success-box-head {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .vc-success-product {
        grid-template-columns: 56px minmax(0, 1fr);
        gap: 11px;
    }

    .vc-success-product-price {
        grid-column: 2;
        justify-self: start;
        font-size: 13px;
    }

    .vc-success-product-image {
        width: 56px;
        height: 56px;
    }

    .vc-success-product-content h3 {
        font-size: 13px;
    }

    .vc-success-right {
        grid-template-columns: 1fr;
    }

    .vc-success-help {
        grid-column: auto;
    }

    .vc-success-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .vc-success-btn {
        width: 100%;
        min-width: 0;
    }

    .vc-success-bottom-note {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .vc-progress-item strong {
        font-size: 13px;
    }

    .vc-progress-item small {
        font-size: 11px;
    }

}


@media (max-width: 400px) {

    .vc-success-product {
        grid-template-columns: 55px minmax(0, 1fr);
    }

    .vc-success-product-image {
        width: 55px;
        height: 55px;
    }

    .vc-success-product-price {
        grid-column: 2;
    }

    .vc-success-price-breakup {
        width: 100%;
    }

}

/* =============================================
   VEGIICART BUSINESS REGISTRATION PAGE
============================================= */

.vc-business-page,
.vc-business-page * {
    box-sizing: border-box;
}

.vc-business-page {
    width: 100%;
    font-family: "Inter", sans-serif;
    color: #1c3021;
    background: #f8fbf7;
}

.vc-business-container {
    width: min(1240px, calc(100% - 40px));
    margin: 0 auto;
}


/* =============================================
   HERO
============================================= */

.vc-business-hero {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 55px 0 50px;
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(139, 208, 99, .22),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #edf8e9,
            #fbfef9 55%,
            #eef9e8
        );
}

.vc-business-hero::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    left: -150px;
    bottom: -210px;
    border-radius: 50%;
    background: rgba(52, 143, 61, .07);
}

.vc-business-hero-content {
    position: relative;
    z-index: 2;
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
}

.vc-business-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 13px;
    padding: 8px 14px;
    border-radius: 50px;
    background: #dff1da;
    color: #287e30;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
}

.vc-business-hero h1 {
    margin: 0;
    color: #17371f;
    font-size: clamp(34px, 5vw, 52px);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -1.8px;
}

.vc-business-hero h1 span {
    color: #37913f;
}

.vc-business-hero p {
    max-width: 720px;
    margin: 14px auto 18px;
    color: #68776c;
    font-size: 14px;
    line-height: 1.8;
}

.vc-business-hero-points {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    flex-wrap: wrap;
}

.vc-business-hero-points span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #3f6045;
    font-size: 11px;
    font-weight: 600;
}

.vc-business-hero-points i {
    color: #399841;
}


/* =============================================
   FORM AREA
============================================= */

.vc-business-form-section {
    width: 100%;
    padding: 42px 0 75px;
}

.vc-registration-layout {
    display: grid;
    grid-template-columns: 285px minmax(0, 1fr);
    gap: 24px;
}


/* =============================================
   SIDEBAR
============================================= */

.vc-registration-sidebar {
    align-self: start;
    position: sticky;
    top: 110px;
    overflow: hidden;
    padding: 25px 22px;
    border: 1px solid #e1ebe0;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 15px 40px rgba(33, 73, 38, .06);
}

.vc-sidebar-title > span {
    color: #398f40;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.vc-sidebar-title h3 {
    margin: 4px 0 6px;
    color: #1e3424;
    font-size: 18px;
}

.vc-sidebar-title p {
    margin: 0;
    color: #879188;
    font-size: 10px;
    line-height: 1.6;
}

.vc-step-navigation {
    margin-top: 26px;
}

.vc-side-step {
    display: flex;
    align-items: center;
    gap: 11px;
    opacity: .55;
    transition: .3s ease;
}

.vc-side-step.active,
.vc-side-step.completed {
    opacity: 1;
}

.vc-side-step-number {
    width: 37px;
    height: 37px;
    flex: 0 0 37px;
    display: grid;
    place-items: center;
    border: 2px solid #dce5db;
    border-radius: 50%;
    background: #f7faf6;
    color: #7c887e;
    font-size: 11px;
    font-weight: 700;
}

.vc-side-step.active .vc-side-step-number {
    border-color: #3b9243;
    background: #3b9243;
    color: #ffffff;
    box-shadow: 0 7px 18px rgba(59, 146, 67, .2);
}

.vc-side-step.completed .vc-side-step-number {
    border-color: #d5ecd2;
    background: #e5f5e2;
    color: #378d3e;
}

.vc-side-step.completed .vc-side-step-number {
    font-size: 0;
}

.vc-side-step.completed .vc-side-step-number::after {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-size: 11px;
    font-weight: 900;
}

.vc-side-step strong {
    display: block;
    color: #25382a;
    font-size: 11px;
}

.vc-side-step small {
    display: block;
    margin-top: 2px;
    color: #919a92;
    font-size: 8px;
}

.vc-side-line {
    width: 2px;
    height: 29px;
    margin: 3px 0 3px 18px;
    background: #e7ece6;
}

.vc-registration-help {
    display: flex;
    gap: 10px;
    margin-top: 28px;
    padding: 15px;
    border-radius: 14px;
    background: #f0f8ee;
}

.vc-registration-help > span {
    width: 35px;
    height: 35px;
    flex: 0 0 35px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #dcefd8;
    color: #32883a;
}

.vc-registration-help strong {
    color: #29422f;
    font-size: 10px;
}

.vc-registration-help p {
    margin: 3px 0 7px;
    color: #7e8a80;
    font-size: 8px;
    line-height: 1.6;
}

.vc-registration-help a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    color: #318239;
    font-size: 8px;
    font-weight: 700;
}


/* =============================================
   MAIN FORM CARD
============================================= */

.vc-registration-main {
    min-width: 0;
    padding: 30px;
    border: 1px solid #e1eae0;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 15px 45px rgba(33, 73, 38, .055);
}

.vc-mobile-progress {
    margin-bottom: 28px;
}

.vc-progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    color: #79857b;
    font-size: 9px;
}

.vc-progress-meta strong {
    color: #32873a;
}

.vc-progress-track {
    height: 6px;
    overflow: hidden;
    border-radius: 30px;
    background: #eaf0e9;
}

.vc-progress-track span {
    display: block;
    width: 20%;
    height: 100%;
    border-radius: inherit;
    background:
        linear-gradient(
            90deg,
            #378f3f,
            #6bb14a
        );
    transition: width .35s ease;
}


/* =============================================
   STEPS
============================================= */

.vc-form-step {
    display: none;
    animation: vcStepFade .35s ease;
}

.vc-form-step.active {
    display: block;
}

@keyframes vcStepFade {

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

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

}

.vc-step-heading {
    margin-bottom: 24px;
}

.vc-step-heading > span {
    color: #399240;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.vc-step-heading h2 {
    margin: 4px 0 6px;
    color: #1c3322;
    font-size: clamp(23px, 3vw, 30px);
    line-height: 1.3;
    letter-spacing: -.6px;
}

.vc-step-heading p {
    margin: 0;
    color: #7b877d;
    font-size: 11px;
    line-height: 1.7;
}


/* =============================================
   BUSINESS TYPE
============================================= */

.vc-business-types {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.vc-business-type-card {
    position: relative;
    min-height: 128px;
    padding: 17px 13px;
    cursor: pointer;
    border: 1px solid #e0e8df;
    border-radius: 15px;
    background: #fbfdfb;
    text-align: center;
    transition: .25s ease;
}

.vc-business-type-card:hover {
    transform: translateY(-3px);
    border-color: #a8d1a4;
    box-shadow: 0 10px 28px rgba(41, 83, 45, .07);
}

.vc-business-type-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.vc-business-type-card:has(input:checked) {
    border-color: #3c9844;
    background: #eff8ed;
    box-shadow: 0 8px 25px rgba(54, 139, 61, .1);
}

.vc-type-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    margin: 0 auto 10px;
    border-radius: 12px;
    background: #e9f5e6;
    color: #348b3b;
    font-size: 18px;
}

.vc-business-type-card strong {
    display: block;
    color: #2b3c2f;
    font-size: 10px;
    line-height: 1.4;
}

.vc-type-check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 19px;
    height: 19px;
    display: none;
    place-items: center;
    border-radius: 50%;
    background: #3b9443;
    color: #fff;
    font-size: 8px;
}

.vc-business-type-card:has(input:checked) .vc-type-check {
    display: grid;
}

.vc-form-error {
    display: none;
    margin-top: 13px;
    padding: 10px 13px;
    border-radius: 9px;
    background: #fff0ee;
    color: #c2463c;
    font-size: 9px;
}


/* =============================================
   FORM FIELDS
============================================= */

.vc-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 17px;
}

.vc-field-full {
    grid-column: 1 / -1;
}

.vc-field label {
    display: block;
    margin-bottom: 7px;
    color: #35483a;
    font-size: 10px;
    font-weight: 600;
}

.vc-field label em {
    color: #e4453b;
    font-style: normal;
}

.vc-field label span {
    margin-left: 5px;
    color: #9ba39c;
    font-size: 8px;
    font-weight: 400;
}

.vc-input-wrap {
    position: relative;
}

.vc-input-wrap > i {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: #7ca47c;
    font-size: 12px;
}

.vc-input-wrap input,
.vc-input-wrap select {
    width: 100%;
    height: 48px;
    padding: 0 14px 0 40px;
    outline: none;
    border: 1px solid #dce6dc;
    border-radius: 10px;
    background: #fbfdfb;
    color: #293a2e;
    font: inherit;
    font-size: 10px;
    transition: .25s ease;
}

.vc-input-wrap.vc-password-field input {
    padding-right: 48px;
}

.vc-input-wrap .vc-password-toggle {
    width: 38px;
    height: 38px;
    position: absolute;
    top: 50%;
    right: 7px;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #809083;
    cursor: pointer;
    pointer-events: auto;
}

.vc-input-wrap .vc-password-toggle:hover {
    background: #eef6eb;
    color: #347c41;
}

.vc-field textarea {
    width: 100%;
    min-height: 105px;
    padding: 13px;
    resize: vertical;
    outline: none;
    border: 1px solid #dce6dc;
    border-radius: 10px;
    background: #fbfdfb;
    color: #293a2e;
    font: inherit;
    font-size: 10px;
    line-height: 1.7;
}

.vc-input-wrap input:focus,
.vc-input-wrap select:focus,
.vc-field textarea:focus {
    border-color: #61a866;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(60, 148, 68, .07);
}

.vc-input-wrap input::placeholder,
.vc-field textarea::placeholder {
    color: #acb4ad;
}


/* =============================================
   ADDRESS
============================================= */

.vc-address-block {
    margin-bottom: 20px;
    padding: 19px;
    border: 1px solid #e3eae2;
    border-radius: 15px;
    background: #fbfdfb;
}

.vc-address-title-row {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    align-items: center;
    margin-bottom: 16px;
}

.vc-address-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.vc-address-title-row .vc-address-title {
    margin-bottom: 0;
}

.vc-address-title > span {
    width: 37px;
    height: 37px;
    flex: 0 0 37px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #e8f5e5;
    color: #338a3a;
    font-size: 13px;
}

.vc-address-title strong {
    display: block;
    color: #293d2e;
    font-size: 11px;
}

.vc-address-title small {
    display: block;
    margin-top: 2px;
    color: #8e988f;
    font-size: 8px;
}

.vc-same-address {
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    color: #537058;
    font-size: 9px;
    font-weight: 600;
}

.vc-same-address input,
.vc-terms-box input {
    position: absolute;
    opacity: 0;
}

.vc-custom-checkbox {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    display: grid;
    place-items: center;
    border: 1px solid #bcd1bb;
    border-radius: 5px;
    background: #ffffff;
    color: transparent;
    font-size: 8px;
}

.vc-same-address input:checked + .vc-custom-checkbox,
.vc-terms-box input:checked + .vc-custom-checkbox {
    border-color: #378d40;
    background: #378d40;
    color: #ffffff;
}

.vc-location-field {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 9px;
}

.vc-location-btn {
    height: 48px;
    padding: 0 16px;
    border: 1px solid #bcd7b9;
    border-radius: 10px;
    background: #eef7ec;
    color: #327d38;
    font: inherit;
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
}


/* =============================================
   UPLOAD
============================================= */

.vc-upload-note {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 20px;
    padding: 13px 15px;
    border-radius: 12px;
    background: #eff8ed;
}

.vc-upload-note > span {
    width: 37px;
    height: 37px;
    flex: 0 0 37px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #dcefd9;
    color: #33883b;
}

.vc-upload-note strong {
    display: block;
    color: #2d4532;
    font-size: 10px;
}

.vc-upload-note p {
    margin: 3px 0 0;
    color: #78857a;
    font-size: 8px;
}

.vc-upload-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 13px;
}

.vc-upload-card {
    position: relative;
    min-height: 175px;
    padding: 17px;
    cursor: pointer;
    border: 1px dashed #b9ceb7;
    border-radius: 14px;
    background: #fbfdfb;
    transition: .25s ease;
}

.vc-upload-card:hover {
    border-color: #4b9c51;
    background: #f3faf1;
}

.vc-upload-card.has-file {
    border-style: solid;
    border-color: #61a766;
    background: #f0f8ee;
}

.vc-upload-card input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.vc-upload-icon {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    margin-bottom: 12px;
    border-radius: 11px;
    background: #e6f3e3;
    color: #348c3b;
    font-size: 16px;
}

.vc-upload-card strong {
    display: block;
    color: #2b3d30;
    font-size: 10px;
}

.vc-upload-card small {
    display: block;
    margin-top: 3px;
    color: #929c94;
    font-size: 8px;
}

.vc-upload-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 13px;
    color: #368a3d;
    font-size: 8px;
    font-weight: 700;
}

.vc-file-name {
    display: block;
    overflow: hidden;
    margin-top: 8px;
    color: #778379;
    font-size: 7px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.vc-upload-support {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.vc-upload-support > span {
    padding: 6px 9px;
    border-radius: 6px;
    background: #f0f4ef;
    color: #657568;
    font-size: 8px;
}

.vc-upload-support small {
    color: #949e96;
    font-size: 8px;
}


/* =============================================
   REVIEW
============================================= */

.vc-review-card {
    margin-bottom: 15px;
    padding: 18px;
    border: 1px solid #e1e9e0;
    border-radius: 14px;
    background: #fbfdfb;
}

.vc-review-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #e8ede7;
}

.vc-review-head > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vc-review-head > div > span {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #e7f4e4;
    color: #368d3e;
    font-size: 11px;
}

.vc-review-head h3 {
    margin: 0;
    color: #293d2f;
    font-size: 12px;
}

.vc-edit-step {
    border: 0;
    background: transparent;
    color: #33873b;
    font: inherit;
    font-size: 8px;
    font-weight: 700;
    cursor: pointer;
}

.vc-edit-step i {
    margin-right: 3px;
}

.vc-review-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.vc-review-grid > div,
.vc-review-single {
    display: flex;
    flex-direction: column;
}

.vc-review-wide {
    grid-column: 1 / -1;
}

.vc-review-grid span,
.vc-review-single span {
    color: #8a948c;
    font-size: 8px;
}

.vc-review-grid strong,
.vc-review-single strong {
    margin-top: 3px;
    color: #314336;
    font-size: 9px;
    line-height: 1.5;
}

.vc-review-documents {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vc-review-documents p {
    margin: 0;
    color: #8b958d;
    font-size: 9px;
}

.vc-review-doc-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 9px;
    border-radius: 7px;
    background: #edf6eb;
    color: #47704c;
    font-size: 8px;
}

.vc-review-doc-item i {
    color: #378e3f;
}


/* =============================================
   TERMS
============================================= */

.vc-terms-box {
    padding: 15px;
    border: 1px solid #dfe7de;
    border-radius: 12px;
    background: #f8fbf7;
}

.vc-terms-box label {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    cursor: pointer;
    color: #69766b;
    font-size: 9px;
    line-height: 1.7;
}

.vc-terms-box a {
    color: #31863a;
    font-weight: 700;
    text-decoration: none;
}


/* =============================================
   NAVIGATION BUTTONS
============================================= */

.vc-form-navigation {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid #e7ece6;
}

.vc-back-btn,
.vc-next-btn,
.vc-submit-btn {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    border-radius: 10px;
    font: inherit;
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
    transition: .25s ease;
}

.vc-back-btn {
    justify-self: start;
    border: 1px solid #ceddcd;
    background: #ffffff;
    color: #47734c;
}

.vc-next-btn,
.vc-submit-btn {
    justify-self: end;
    border: 1px solid #348b3c;
    background: #348b3c;
    color: #ffffff;
    box-shadow: 0 8px 22px rgba(52, 139, 60, .17);
}

.vc-next-btn:hover,
.vc-submit-btn:hover {
    transform: translateY(-2px);
    background: #26752e;
}

.vc-submit-btn {
    display: none;
}

.vc-form-step-text {
    color: #879188;
    font-size: 8px;
}

.vc-form-step-text strong {
    color: #33883b;
}


/* =============================================
   SUCCESS MODAL
============================================= */

.vc-registration-success {
    position: fixed;
    z-index: 99999;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(14, 37, 18, .68);
    backdrop-filter: blur(8px);
}

.vc-registration-success.show {
    display: flex;
}

.vc-success-modal {
    position: relative;
    width: min(450px, 100%);
    padding: 38px 30px;
    border-radius: 22px;
    background: #ffffff;
    text-align: center;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .2);
}

.vc-success-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #f0f4ef;
    color: #58685a;
    cursor: pointer;
}

.vc-success-check {
    width: 70px;
    height: 70px;
    display: grid;
    place-items: center;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #3a9442;
    color: #ffffff;
    font-size: 25px;
    box-shadow: 0 12px 30px rgba(58, 148, 66, .23);
}

.vc-success-modal > span {
    color: #378e3f;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.vc-success-modal h2 {
    margin: 6px 0 8px;
    color: #1e3624;
    font-size: 26px;
}

.vc-success-modal p {
    margin: 0;
    color: #78847a;
    font-size: 10px;
    line-height: 1.8;
}

.vc-application-number {
    margin: 19px 0;
    padding: 12px;
    border-radius: 10px;
    background: #eff8ed;
}

.vc-application-number small {
    display: block;
    color: #829084;
    font-size: 8px;
}

.vc-application-number strong {
    display: block;
    margin-top: 3px;
    color: #2e8336;
    font-size: 13px;
}

.vc-success-modal > a {
    min-height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    border-radius: 9px;
    background: #348c3c;
    color: #ffffff;
    text-decoration: none;
    font-size: 9px;
    font-weight: 700;
}


/* =============================================
   RESPONSIVE
============================================= */

@media (max-width: 1050px) {

    .vc-registration-layout {
        grid-template-columns: 240px minmax(0, 1fr);
    }

    .vc-business-types {
        grid-template-columns: repeat(3, 1fr);
    }

    .vc-upload-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 850px) {

    .vc-registration-layout {
        grid-template-columns: 1fr;
    }

    .vc-registration-sidebar {
        position: static;
        display: none;
    }

    .vc-business-form-section {
        padding-top: 25px;
    }

}


@media (max-width: 650px) {

    .vc-business-container {
        width: min(100% - 26px, 1240px);
    }

    .vc-business-hero {
        padding: 40px 0;
    }

    .vc-business-hero h1 {
        font-size: 35px;
    }

    .vc-business-hero p {
        font-size: 12px;
    }

    .vc-business-hero-points {
        gap: 10px 15px;
    }

    .vc-registration-main {
        padding: 20px 15px;
        border-radius: 17px;
    }

    .vc-business-types {
        grid-template-columns: repeat(2, 1fr);
        gap: 9px;
    }

    .vc-business-type-card {
        min-height: 120px;
    }

    .vc-form-grid {
        grid-template-columns: 1fr;
    }

    .vc-field-full {
        grid-column: auto;
    }

    .vc-address-title-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .vc-location-field {
        grid-template-columns: 1fr;
    }

    .vc-location-btn {
        width: 100%;
    }

    .vc-upload-grid {
        grid-template-columns: 1fr;
    }

    .vc-upload-card {
        min-height: 150px;
    }

    .vc-review-grid {
        grid-template-columns: 1fr;
    }

    .vc-review-wide {
        grid-column: auto;
    }

    .vc-form-navigation {
        grid-template-columns: 1fr 1fr;
    }

    .vc-form-step-text {
        grid-column: 1 / -1;
        grid-row: 1;
        justify-self: center;
    }

    .vc-back-btn {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
    }

    .vc-next-btn,
    .vc-submit-btn {
        grid-column: 2;
        grid-row: 2;
        width: 100%;
    }

}


@media (max-width: 420px) {

    .vc-business-types {
        grid-template-columns: 1fr 1fr;
    }

    .vc-type-icon {
        width: 40px;
        height: 40px;
        font-size: 15px;
    }

    .vc-form-navigation {
        grid-template-columns: 1fr;
    }

    .vc-back-btn,
    .vc-next-btn,
    .vc-submit-btn,
    .vc-form-step-text {
        grid-column: 1;
    }

    .vc-form-step-text {
        grid-row: 1;
    }

    .vc-back-btn {
        grid-row: 2;
    }

    .vc-next-btn,
    .vc-submit-btn {
        grid-row: 3;
    }

}

/* ===========================================
   VEGIICART VERIFICATION STATUS
=========================================== */

.vc-verification-page,
.vc-verification-page * {
    box-sizing: border-box;
}

.vc-verification-page {
    width: 100%;
    font-family: "Inter", sans-serif;
    color: #203426;
    background: #f8fbf7;
}

.vc-verification-container {
    width: min(1220px, calc(100% - 40px));
    margin: 0 auto;
}


/* HERO */

.vc-verification-hero {
    width: 100%;
    padding: 48px 0 45px;
    text-align: center;
    background:
        radial-gradient(
            circle at 85% 5%,
            rgba(100, 190, 76, .17),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #edf8ea,
            #fbfefb 55%,
            #eef9e9
        );
}

.vc-verification-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 11px;
    padding: 8px 13px;
    border-radius: 40px;
    background: #dff1db;
    color: #2e8136;
    font-size: 11px;
    font-weight: 700;
}

.vc-verification-hero h1 {
    margin: 0;
    color: #183820;
    font-size: clamp(34px, 5vw, 50px);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -1.6px;
}

.vc-verification-hero h1 span {
    color: #3a9442;
}

.vc-verification-hero p {
    max-width: 680px;
    margin: 13px auto 0;
    color: #6d7c70;
    font-size: 13px;
    line-height: 1.75;
}


/* MAIN */

.vc-verification-main {
    width: 100%;
    padding: 35px 0 75px;
}


/* DEMO SWITCHER */

.vc-status-demo {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 20px;
}

.vc-status-demo > span {
    color: #7d897f;
    font-size: 10px;
    margin-right: 4px;
}

.vc-status-demo button {
    padding: 7px 13px;
    border: 1px solid #d9e5d8;
    border-radius: 30px;
    background: #fff;
    color: #5b695e;
    font: inherit;
    font-size: 9px;
    font-weight: 600;
    cursor: pointer;
}

.vc-status-demo button.active {
    border-color: #3b9243;
    background: #3b9243;
    color: #fff;
}


/* APPLICATION OVERVIEW */

.vc-application-overview {
    display: grid;
    grid-template-columns: 330px 1fr;
    overflow: hidden;
    margin-bottom: 20px;
    border: 1px solid #e0e9df;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 35px rgba(35, 76, 39, .055);
}

.vc-application-number-box {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 21px;
    background: #eff7ed;
}

.vc-application-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #d9eed5;
    color: #33883b;
    font-size: 17px;
}

.vc-application-number-box div,
.vc-application-meta > div > div {
    display: flex;
    flex-direction: column;
}

.vc-application-number-box small,
.vc-application-meta small {
    color: #859187;
    font-size: 8px;
}

.vc-application-number-box strong {
    margin-top: 3px;
    color: #287c31;
    font-size: 13px;
}

.vc-application-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.vc-application-meta > div {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px;
    border-right: 1px solid #ebf0eb;
}

.vc-application-meta > div:last-child {
    border-right: 0;
}

.vc-application-meta > div > span {
    color: #43934a;
    font-size: 14px;
}

.vc-application-meta strong {
    margin-top: 3px;
    color: #2c3f31;
    font-size: 10px;
}


/* STATUS PANELS */

.vc-verification-status-panel {
    display: none;
}

.vc-verification-status-panel.active {
    display: block;
}


/* STATUS CARD */

.vc-status-card {
    display: grid;
    grid-template-columns: 230px 1fr;
    align-items: center;
    gap: 35px;
    padding: 40px;
    border-radius: 24px;
    border: 1px solid;
    overflow: hidden;
    position: relative;
}

.vc-status-pending {
    background:
        linear-gradient(135deg, #fffaf0, #fffdf8);
    border-color: #f1dfb1;
}

.vc-status-approved {
    background:
        linear-gradient(135deg, #effaee, #fbfef9);
    border-color: #cce3c8;
}

.vc-status-rejected {
    background:
        linear-gradient(135deg, #fff3f1, #fffafa);
    border-color: #eccdc8;
}

.vc-status-visual {
    text-align: center;
}

.vc-status-icon {
    width: 100px;
    height: 100px;
    display: grid;
    place-items: center;
    margin: 0 auto 13px;
    border-radius: 50%;
    font-size: 34px;
}

.vc-status-pending .vc-status-icon {
    background: #fff0c8;
    color: #c88b09;
    box-shadow: 0 0 0 12px rgba(255, 220, 128, .18);
}

.vc-status-approved .vc-status-icon {
    background: #ddefd9;
    color: #318a3a;
    box-shadow: 0 0 0 12px rgba(67, 153, 74, .09);
}

.vc-status-rejected .vc-status-icon {
    background: #f6d9d5;
    color: #cc5147;
    box-shadow: 0 0 0 12px rgba(203, 78, 69, .07);
}

.vc-status-pill {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 30px;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.vc-status-pending .vc-status-pill {
    background: #fff0ca;
    color: #a87305;
}

.vc-status-approved .vc-status-pill {
    background: #dcefd9;
    color: #2d8035;
}

.vc-status-rejected .vc-status-pill {
    background: #f8dcd8;
    color: #b8443b;
}

.vc-status-small-title {
    display: block;
    margin-bottom: 5px;
    color: #5f7564;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .8px;
}

.vc-status-content h2 {
    margin: 0;
    color: #253b2b;
    font-size: clamp(25px, 4vw, 38px);
    line-height: 1.2;
    letter-spacing: -1px;
}

.vc-status-content h2 span {
    color: #398f41;
}

.vc-status-rejected .vc-status-content h2 span {
    color: #be5047;
}

.vc-status-content > p {
    max-width: 720px;
    margin: 12px 0 0;
    color: #718075;
    font-size: 11px;
    line-height: 1.8;
}


/* REVIEW NOTICE */

.vc-review-notice {
    max-width: 700px;
    display: flex;
    gap: 11px;
    margin-top: 18px;
    padding: 13px 15px;
    border-radius: 11px;
    background: rgba(255,255,255,.72);
}

.vc-review-notice > i {
    margin-top: 2px;
    color: #c68a08;
}

.vc-review-notice strong {
    color: #53451e;
    font-size: 9px;
}

.vc-review-notice p {
    margin: 3px 0 0;
    color: #817354;
    font-size: 8px;
    line-height: 1.6;
}


/* COMMON SECTION CARD */

.vc-status-section-card {
    margin-top: 20px;
    padding: 25px;
    border: 1px solid #e0e9df;
    border-radius: 18px;
    background: #ffffff;
}

.vc-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 20px;
}

.vc-section-heading span {
    color: #3a9141;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .8px;
}

.vc-section-heading h3 {
    margin: 4px 0 0;
    color: #263b2b;
    font-size: 18px;
}


/* PROGRESS */

.vc-verification-progress {
    display: grid;
    grid-template-columns: 1fr 100px 1fr 100px 1fr;
    align-items: start;
}

.vc-progress-step {
    text-align: center;
}

.vc-progress-step > span {
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    margin: 0 auto 8px;
    border: 2px solid #dfe7df;
    border-radius: 50%;
    background: #f6f9f5;
    color: #a0aba2;
    font-size: 13px;
}

.vc-progress-step.completed > span {
    border-color: #3e9346;
    background: #3e9346;
    color: #fff;
}

.vc-progress-step.current > span {
    border-color: #d9a42b;
    background: #fff6df;
    color: #b98005;
    box-shadow: 0 0 0 6px rgba(225, 173, 48, .08);
}

.vc-progress-step strong {
    display: block;
    color: #344638;
    font-size: 9px;
}

.vc-progress-step small {
    display: block;
    margin-top: 2px;
    color: #929c94;
    font-size: 8px;
}

.vc-progress-line {
    height: 2px;
    margin-top: 22px;
    background: #e2e9e1;
}

.vc-progress-line.completed {
    background: #49994f;
}


/* DOCUMENTS */

.vc-document-total {
    padding: 6px 10px;
    border-radius: 20px;
    background: #eff7ed;
    color: #36883d;
    font-size: 8px;
}

.vc-document-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 11px;
}

.vc-document-item {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 13px;
    border: 1px solid #e6ece5;
    border-radius: 11px;
    background: #fbfdfb;
}

.vc-document-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #eaf5e7;
    color: #3a8d41;
    font-size: 14px;
}

.vc-document-item strong {
    display: block;
    color: #334438;
    font-size: 9px;
}

.vc-document-item small {
    display: block;
    margin-top: 3px;
    color: #929c94;
    font-size: 7px;
}

.vc-doc-status {
    padding: 5px 8px;
    border-radius: 20px;
    font-size: 7px;
    font-weight: 700;
}

.vc-doc-status.reviewing {
    background: #fff1cf;
    color: #a87408;
}

.vc-doc-status.verified {
    background: #dff0dc;
    color: #317f38;
}


/* ACTIONS */

.vc-status-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
}

.vc-outline-action,
.vc-primary-action {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
    transition: .25s ease;
}

.vc-outline-action {
    border: 1px solid #c9dbc7;
    background: #fff;
    color: #36733c;
}

.vc-primary-action {
    border: 1px solid #348b3c;
    background: #348b3c;
    color: #fff;
}

.vc-primary-action:hover {
    background: #28732f;
    color: #fff;
    transform: translateY(-2px);
}


/* APPROVED BENEFITS */

.vc-approved-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 20px;
}

.vc-approved-benefits > div {
    min-width: 180px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.vc-approved-benefits i {
    width: 35px;
    height: 35px;
    flex: 0 0 35px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #e0f0dc;
    color: #34893b;
}

.vc-approved-benefits span {
    display: flex;
    flex-direction: column;
    color: #829084;
    font-size: 7px;
}

.vc-approved-benefits strong {
    color: #38513d;
    font-size: 9px;
}

.vc-approved-summary {
    margin-top: 20px;
}

.vc-approved-profile {
    display: grid;
    grid-template-columns: 55px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 20px;
    border: 1px solid #d9e7d7;
    border-radius: 16px;
    background: #fff;
}

.vc-approved-profile > span {
    width: 55px;
    height: 55px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #e7f4e3;
    color: #358b3c;
    font-size: 20px;
}

.vc-approved-profile small {
    color: #869287;
    font-size: 8px;
}

.vc-approved-profile h3 {
    margin: 3px 0;
    color: #2a402f;
    font-size: 15px;
}

.vc-approved-profile p {
    margin: 0;
    color: #7e8a80;
    font-size: 8px;
}

.vc-approved-profile > strong {
    color: #358b3c;
    font-size: 9px;
}


/* REJECTION */

.vc-rejection-reason {
    display: flex;
    gap: 13px;
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #efd5d1;
    border-radius: 16px;
    background: #fff8f7;
}

.vc-rejection-icon {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #f7dfdc;
    color: #c84f46;
}

.vc-rejection-reason small {
    color: #c05b52;
    font-size: 8px;
    font-weight: 700;
}

.vc-rejection-reason h3 {
    max-width: 780px;
    margin: 5px 0;
    color: #5c302d;
    font-size: 13px;
    line-height: 1.55;
}

.vc-rejection-reason p {
    margin: 0;
    color: #826865;
    font-size: 9px;
    line-height: 1.7;
}

.vc-rejected-documents {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vc-rejected-document {
    display: grid;
    grid-template-columns: 240px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 14px;
    border: 1px solid #ebdddd;
    border-radius: 12px;
    background: #fffafa;
}

.vc-rejected-doc-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vc-rejected-doc-info > span {
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #f7e4e1;
    color: #c24e45;
}

.vc-rejected-doc-info strong {
    display: block;
    color: #423533;
    font-size: 9px;
}

.vc-rejected-doc-info small {
    color: #958a89;
    font-size: 7px;
}

.vc-rejected-message > span {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    color: #c34a41;
    font-size: 8px;
    font-weight: 700;
}

.vc-rejected-message p {
    margin: 3px 0 0;
    color: #806c69;
    font-size: 8px;
    line-height: 1.5;
}

.vc-reupload-btn {
    min-height: 39px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 13px;
    border: 1px solid #d3b5b1;
    border-radius: 8px;
    background: #fff;
    color: #b4473f;
    font-size: 8px;
    font-weight: 700;
    cursor: pointer;
}

.vc-reupload-btn input {
    display: none;
}

.vc-reupload-btn.uploaded {
    border-color: #a9cda6;
    background: #eff8ed;
    color: #337f3a;
}

.vc-rejection-help {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    padding: 13px 15px;
    border-radius: 11px;
    background: #fff7df;
}

.vc-rejection-help > i {
    color: #c88b09;
}

.vc-rejection-help strong {
    color: #5a481a;
    font-size: 9px;
}

.vc-rejection-help p {
    margin: 3px 0 0;
    color: #81724d;
    font-size: 8px;
}


/* RESUBMIT BUTTON */

.vc-resubmit-button {
    font-family: inherit;
}


/* MODAL */

.vc-resubmit-modal {
    position: fixed;
    z-index: 99999;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 35, 18, .65);
    backdrop-filter: blur(7px);
}

.vc-resubmit-modal.show {
    display: flex;
}

.vc-resubmit-modal-card {
    position: relative;
    width: min(420px, 100%);
    padding: 35px 28px;
    border-radius: 21px;
    background: #fff;
    text-align: center;
}

.vc-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 33px;
    height: 33px;
    border: 0;
    border-radius: 50%;
    background: #f0f3ef;
    cursor: pointer;
}

.vc-modal-check {
    width: 65px;
    height: 65px;
    display: grid;
    place-items: center;
    margin: 0 auto 15px;
    border-radius: 50%;
    background: #378f40;
    color: #fff;
    font-size: 24px;
}

.vc-resubmit-modal-card h3 {
    margin: 0;
    color: #203925;
    font-size: 22px;
}

.vc-resubmit-modal-card p {
    margin: 10px 0 18px;
    color: #758078;
    font-size: 10px;
    line-height: 1.8;
}

.vc-modal-done {
    min-width: 110px;
    min-height: 40px;
    border: 0;
    border-radius: 9px;
    background: #358b3d;
    color: #fff;
    font: inherit;
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
}


/* RESPONSIVE */

@media (max-width: 950px) {

    .vc-application-overview {
        grid-template-columns: 1fr;
    }

    .vc-application-meta {
        border-top: 1px solid #e7ede6;
    }

    .vc-status-card {
        grid-template-columns: 180px 1fr;
    }

    .vc-rejected-document {
        grid-template-columns: 200px 1fr;
    }

    .vc-reupload-btn {
        grid-column: 1 / -1;
        justify-self: start;
    }

}


@media (max-width: 700px) {

    .vc-verification-container {
        width: min(100% - 26px, 1220px);
    }

    .vc-verification-hero {
        padding: 38px 0;
    }

    .vc-verification-main {
        padding: 25px 0 55px;
    }

    .vc-application-meta {
        grid-template-columns: 1fr;
    }

    .vc-application-meta > div {
        border-right: 0;
        border-bottom: 1px solid #edf1ed;
    }

    .vc-status-card {
        grid-template-columns: 1fr;
        gap: 25px;
        padding: 28px 20px;
        text-align: center;
    }

    .vc-status-content > p,
    .vc-review-notice {
        margin-left: auto;
        margin-right: auto;
    }

    .vc-review-notice {
        text-align: left;
    }

    .vc-verification-progress {
        grid-template-columns: 1fr;
    }

    .vc-progress-step {
        display: grid;
        grid-template-columns: 44px 1fr;
        gap: 10px;
        text-align: left;
    }

    .vc-progress-step > span {
        width: 42px;
        height: 42px;
        margin: 0;
    }

    .vc-progress-line {
        width: 2px;
        height: 25px;
        margin: 2px 0 2px 20px;
    }

    .vc-document-grid {
        grid-template-columns: 1fr;
    }

    .vc-approved-benefits {
        flex-direction: column;
    }

    .vc-approved-profile {
        grid-template-columns: 48px 1fr;
    }

    .vc-approved-profile > strong {
        grid-column: 2;
    }

    .vc-rejected-document {
        grid-template-columns: 1fr;
    }

    .vc-status-actions {
        flex-direction: column;
    }

    .vc-outline-action,
    .vc-primary-action {
        width: 100%;
    }

}


@media (max-width: 430px) {

    .vc-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .vc-document-item {
        grid-template-columns: 38px 1fr;
    }

    .vc-doc-status {
        grid-column: 2;
        justify-self: start;
    }

}

/* =============================================
   VEGIICART BUSINESS PROFILE
============================================= */

.vc-business-profile-page,
.vc-business-profile-page * {
    box-sizing: border-box;
}

.vc-business-profile-page {
    width: 100%;
    font-family: "Inter", sans-serif;
    background: #f8fbf7;
    color: #213526;
}

.vc-bp-container {
    width: min(1230px, calc(100% - 40px));
    margin: 0 auto;
}


/* HERO */

.vc-bp-hero {
    width: 100%;
    padding: 45px 0;
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(97, 176, 72, .18),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #edf8e9,
            #fbfef9 55%,
            #eef8ea
        );
}

.vc-bp-hero-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.vc-bp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 9px;
    padding: 7px 13px;
    border-radius: 30px;
    background: #dcf0d8;
    color: #2c8034;
    font-size: 11px;
    font-weight: 700;
}

.vc-bp-hero h1 {
    margin: 0;
    color: #19381f;
    font-size: clamp(34px, 5vw, 48px);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -1.5px;
}

.vc-bp-hero h1 span {
    color: #3b9343;
}

.vc-bp-hero p {
    max-width: 650px;
    margin: 10px 0 0;
    color: #6f7d72;
    font-size: 13px;
    line-height: 1.75;
}

.vc-bp-edit-main {
    flex: 0 0 auto;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    border-radius: 10px;
    background: #358d3d;
    color: #fff;
    text-decoration: none;
    font-size: 10px;
    font-weight: 700;
    box-shadow: 0 10px 25px rgba(53, 141, 61, .18);
}


/* MAIN */

.vc-bp-main {
    width: 100%;
    padding: 32px 0 70px;
}


/* SUMMARY */

.vc-bp-profile-summary {
    display: grid;
    grid-template-columns: 95px 1fr;
    gap: 22px;
    align-items: center;
    margin-bottom: 22px;
    padding: 25px;
    border: 1px solid #dde8dc;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 35px rgba(35, 75, 40, .055);
}

.vc-bp-avatar {
    width: 95px;
    height: 95px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    background:
        linear-gradient(
            135deg,
            #e2f2de,
            #cfe8ca
        );
    color: #338b3b;
    font-size: 34px;
}

.vc-bp-summary-top {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.vc-bp-business-type {
    display: inline-block;
    margin-bottom: 4px;
    color: #3d9044;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.vc-bp-summary-top h2 {
    margin: 0;
    color: #213827;
    font-size: 25px;
}

.vc-bp-summary-top p {
    margin: 5px 0 0;
    color: #879188;
    font-size: 9px;
}

.vc-bp-summary-top p strong {
    color: #4b6a50;
}

.vc-bp-status {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 30px;
    font-size: 8px;
    font-weight: 700;
}

.vc-bp-status.pending,
.vc-bp-verification-badge.pending {
    background: #fff4d6;
    color: #8a6d00;
}
.vc-bp-status.rejected,
.vc-bp-verification-badge.rejected {
    background: #fde8e8;
    color: #b42318;
}

.vc-bp-mini-info {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 18px;
}

.vc-bp-mini-info > div {
    display: flex;
    align-items: center;
    gap: 9px;
}

.vc-bp-mini-info i {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #edf7eb;
    color: #398f40;
    font-size: 11px;
}

.vc-bp-mini-info span {
    display: flex;
    flex-direction: column;
}

.vc-bp-mini-info small {
    color: #939c94;
    font-size: 7px;
}

.vc-bp-mini-info strong {
    margin-top: 2px;
    color: #3b4d3f;
    font-size: 9px;
}


/* LAYOUT */

.vc-bp-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 22px;
}

.vc-bp-left {
    display: flex;
    flex-direction: column;
    gap: 20px;
}


/* CARD */

.vc-bp-card,
.vc-bp-side-card {
    border: 1px solid #e0e8df;
    border-radius: 18px;
    background: #fff;
}

.vc-bp-card {
    padding: 24px;
}

.vc-bp-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    padding-bottom: 15px;
    margin-bottom: 18px;
    border-bottom: 1px solid #e9eee8;
}

.vc-bp-card-head > div > span {
    display: block;
    color: #3b9143;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .8px;
}

.vc-bp-card-head h3 {
    margin: 3px 0 0;
    color: #293e2f;
    font-size: 18px;
}

.vc-bp-card-head > a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #35883c;
    text-decoration: none;
    font-size: 8px;
    font-weight: 700;
}


/* DETAILS */

.vc-bp-details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
}

.vc-bp-detail-item {
    padding: 14px 0;
    border-bottom: 1px solid #edf1ed;
}

.vc-bp-detail-item:nth-child(odd) {
    padding-right: 20px;
    border-right: 1px solid #edf1ed;
}

.vc-bp-detail-item:nth-child(even) {
    padding-left: 20px;
}

.vc-bp-detail-item:nth-last-child(-n+2) {
    border-bottom: 0;
}

.vc-bp-detail-item span {
    display: block;
    margin-bottom: 4px;
    color: #8d978f;
    font-size: 8px;
}

.vc-bp-detail-item strong {
    color: #34493a;
    font-size: 10px;
}


/* ADDRESS */

.vc-bp-address {
    display: flex;
    gap: 13px;
}

.vc-bp-address-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #e9f5e6;
    color: #378e3f;
}

.vc-bp-address strong {
    display: block;
    color: #354a3a;
    font-size: 10px;
}

.vc-bp-address p {
    margin: 5px 0 8px;
    color: #7c897f;
    font-size: 9px;
    line-height: 1.7;
}

.vc-bp-address a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #34883c;
    text-decoration: none;
    font-size: 8px;
    font-weight: 700;
}


/* DOCUMENTS */

.vc-bp-upload-new {
    min-height: 37px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    border: 1px solid #bcd7b9;
    border-radius: 8px;
    background: #eef7ec;
    color: #34843b;
    font: inherit;
    font-size: 8px;
    font-weight: 700;
    cursor: pointer;
}

.vc-bp-documents {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vc-bp-document {
    display: grid;
    grid-template-columns: 1fr auto 90px;
    gap: 12px;
    align-items: center;
    padding: 13px;
    border: 1px solid #e6ece5;
    border-radius: 11px;
    background: #fbfdfb;
}

.vc-bp-doc-warning {
    border-color: #eadcae;
    background: #fffdf6;
}

.vc-bp-doc-rejected {
    border-color: #ecd1cd;
    background: #fffafa;
}

.vc-bp-doc-info {
    display: flex;
    align-items: center;
    gap: 11px;
}

.vc-bp-doc-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #e9f4e7;
    color: #378c3f;
    font-size: 14px;
}

.vc-bp-doc-icon.warning {
    background: #fff0c8;
    color: #b9800a;
}

.vc-bp-doc-icon.rejected {
    background: #f5deda;
    color: #bd4d44;
}

.vc-bp-doc-info strong {
    display: block;
    color: #33463a;
    font-size: 9px;
}

.vc-bp-doc-info small {
    display: block;
    margin-top: 2px;
    color: #8f9991;
    font-size: 7px;
}

.vc-bp-doc-info div > span {
    display: block;
    margin-top: 3px;
    color: #9a9f9a;
    font-size: 7px;
}

.vc-bp-doc-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 8px;
    border-radius: 20px;
    font-size: 7px;
    font-weight: 700;
    white-space: nowrap;
}

.vc-bp-doc-status.verified {
    background: #dff0dc;
    color: #317f38;
}

.vc-bp-doc-status.reviewing {
    background: #fff1ce;
    color: #a87509;
}

.vc-bp-doc-status.expired {
    background: #fff0cf;
    color: #a96f00;
}

.vc-bp-doc-status.rejected {
    background: #f6dcda;
    color: #b6453d;
}

.vc-bp-doc-action,
.vc-bp-replace-btn {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 10px;
    border-radius: 7px;
    font: inherit;
    font-size: 7px;
    font-weight: 700;
    cursor: pointer;
}

.vc-bp-doc-action {
    border: 1px solid #cfddcd;
    background: #fff;
    color: #48764d;
}

.vc-bp-replace-btn {
    border: 1px solid #d8b8b4;
    background: #fff;
    color: #b74b43;
}

.vc-bp-replace-btn input {
    display: none;
}

.vc-bp-replace-btn.uploaded {
    border-color: #a9cca6;
    background: #eff8ed;
    color: #337f3a;
}


/* RIGHT */

.vc-bp-right {
    display: flex;
    flex-direction: column;
    gap: 17px;
}

.vc-bp-side-card {
    padding: 20px;
}

.vc-bp-side-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 15px;
}

.vc-bp-side-title > span {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #e8f5e5;
    color: #378d3f;
}

.vc-bp-side-title h3 {
    margin: 0;
    color: #304535;
    font-size: 12px;
}


/* VERIFICATION */

.vc-bp-verification-badge {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px;
    border-radius: 10px;
    background: #eff8ed;
}

.vc-bp-verification-badge > i {
    color: #368c3e;
    font-size: 19px;
}

.vc-bp-verification-badge strong {
    display: block;
    color: #347c3a;
    font-size: 10px;
}

.vc-bp-verification-badge small {
    display: block;
    margin-top: 2px;
    color: #7d8b80;
    font-size: 7px;
}

.vc-bp-verification-meta {
    margin-top: 13px;
}

.vc-bp-verification-meta > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid #edf1ed;
}

.vc-bp-verification-meta > div:last-child {
    border-bottom: 0;
}

.vc-bp-verification-meta span {
    color: #8c968e;
    font-size: 7px;
}

.vc-bp-verification-meta strong {
    color: #405145;
    font-size: 7px;
}


/* DOCUMENT SUMMARY */

.vc-bp-document-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
}

.vc-bp-document-summary > div {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border-radius: 9px;
    background: #f8faf7;
}

.vc-bp-document-summary > div > span {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    font-size: 9px;
}

.vc-bp-document-summary .green {
    background: #dff1dc;
    color: #33833a;
}

.vc-bp-document-summary .yellow {
    background: #fff0ca;
    color: #ae7806;
}

.vc-bp-document-summary .orange {
    background: #ffe8c9;
    color: #b86908;
}

.vc-bp-document-summary .red {
    background: #f6dddd;
    color: #bc4b43;
}

.vc-bp-document-summary p {
    margin: 0;
    color: #849086;
    font-size: 7px;
}

.vc-bp-document-summary strong {
    display: block;
    color: #33473a;
    font-size: 10px;
}


/* BENEFITS */

.vc-bp-benefits {
    padding: 22px;
    border-radius: 18px;
    background:
        linear-gradient(
            145deg,
            #153f1f,
            #255e2d
        );
    color: #fff;
}

.vc-bp-benefit-icon {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    margin-bottom: 13px;
    border-radius: 10px;
    background: rgba(255,255,255,.1);
    color: #d5ee9d;
}

.vc-bp-benefits h3 {
    margin: 0;
    color: #fff;
    font-size: 13px;
}

.vc-bp-benefits p {
    margin: 7px 0 14px;
    color: rgba(255,255,255,.72);
    font-size: 8px;
    line-height: 1.7;
}

.vc-bp-benefits a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #d4f39d;
    text-decoration: none;
    font-size: 8px;
    font-weight: 700;
}


/* SUPPORT */

.vc-bp-support {
    display: flex;
    gap: 10px;
    padding: 17px;
    border: 1px solid #e1e8df;
    border-radius: 15px;
    background: #fff;
}

.vc-bp-support > i {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #edf6eb;
    color: #398c40;
}

.vc-bp-support strong {
    color: #354a3b;
    font-size: 9px;
}

.vc-bp-support p {
    margin: 4px 0 7px;
    color: #869087;
    font-size: 7px;
    line-height: 1.6;
}

.vc-bp-support a {
    color: #34863b;
    text-decoration: none;
    font-size: 8px;
    font-weight: 700;
}


/* MODAL */

.vc-bp-modal {
    position: fixed;
    z-index: 99999;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 35, 18, .65);
    backdrop-filter: blur(7px);
}

.vc-bp-modal.show {
    display: flex;
}

.vc-bp-modal-card {
    position: relative;
    width: min(430px, 100%);
    padding: 30px;
    border-radius: 20px;
    background: #fff;
}

.vc-bp-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #f0f3ef;
    cursor: pointer;
}

.vc-bp-modal-icon {
    width: 55px;
    height: 55px;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    border-radius: 13px;
    background: #e5f3e2;
    color: #378d3f;
    font-size: 20px;
}

.vc-bp-modal-card h3 {
    margin: 0;
    color: #263e2c;
    font-size: 20px;
}

.vc-bp-modal-card > p {
    margin: 6px 0 18px;
    color: #7d897f;
    font-size: 9px;
    line-height: 1.7;
}

.vc-bp-modal-field label {
    display: block;
    margin-bottom: 6px;
    color: #405445;
    font-size: 8px;
    font-weight: 600;
}

.vc-bp-modal-field select {
    width: 100%;
    height: 43px;
    padding: 0 12px;
    border: 1px solid #dae5d9;
    border-radius: 9px;
    outline: none;
    background: #fbfdfb;
    font: inherit;
    font-size: 9px;
}

.vc-bp-modal-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 13px;
    padding: 22px;
    border: 1px dashed #aecbab;
    border-radius: 11px;
    background: #f8fbf7;
    cursor: pointer;
    text-align: center;
}

.vc-bp-modal-upload input {
    display: none;
}

.vc-bp-modal-upload i {
    color: #3b9042;
    font-size: 20px;
}

.vc-bp-modal-upload strong {
    margin-top: 6px;
    color: #3d5142;
    font-size: 9px;
}

.vc-bp-modal-upload small {
    margin-top: 3px;
    color: #929b93;
    font-size: 7px;
}

.vc-bp-modal-submit {
    width: 100%;
    min-height: 43px;
    margin-top: 15px;
    border: 0;
    border-radius: 9px;
    background: #358c3d;
    color: #fff;
    font: inherit;
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
}


/* RESPONSIVE */

@media (max-width: 1000px) {

    .vc-bp-layout {
        grid-template-columns: 1fr 280px;
    }

    .vc-bp-mini-info {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 820px) {

    .vc-bp-layout {
        grid-template-columns: 1fr;
    }

    .vc-bp-right {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .vc-bp-benefits,
    .vc-bp-support {
        grid-column: 1 / -1;
    }

}


@media (max-width: 650px) {

    .vc-bp-container {
        width: min(100% - 26px, 1230px);
    }

    .vc-bp-hero {
        padding: 36px 0;
    }

    .vc-bp-hero-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .vc-bp-edit-main {
        width: 100%;
    }

    .vc-bp-profile-summary {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .vc-bp-avatar {
        margin: 0 auto;
    }

    .vc-bp-summary-top {
        flex-direction: column;
        align-items: center;
    }

    .vc-bp-status {
        align-self: center;
    }

    .vc-bp-mini-info {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .vc-bp-details-grid {
        grid-template-columns: 1fr;
    }

    .vc-bp-detail-item:nth-child(odd),
    .vc-bp-detail-item:nth-child(even) {
        padding-left: 0;
        padding-right: 0;
        border-right: 0;
        border-bottom: 1px solid #edf1ed;
    }

    .vc-bp-detail-item:last-child {
        border-bottom: 0;
    }

    .vc-bp-document {
        grid-template-columns: 1fr;
        align-items: flex-start;
    }

    .vc-bp-doc-status {
        justify-self: start;
    }

    .vc-bp-doc-action,
    .vc-bp-replace-btn {
        justify-self: start;
    }

    .vc-bp-right {
        grid-template-columns: 1fr;
    }

    .vc-bp-benefits,
    .vc-bp-support {
        grid-column: auto;
    }

    .vc-bp-card {
        padding: 18px;
    }

    .vc-bp-doc-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .vc-bp-upload-new {
        width: 100%;
        justify-content: center;
    }

}

/* =========================================================
   VEGIICART BUSINESS PAGES
   FINAL GLOBAL FONT SIZE OVERRIDE
   Add this at the VERY END of your CSS file
========================================================= */


/* =========================================================
   1. GLOBAL BASE FONT
========================================================= */

.vc-business-page,
.vc-verification-page,
.vc-business-profile-page {
    font-size: 16px !important;
}


/* =========================================================
   2. HERO BADGES / SMALL TOP LABELS
========================================================= */

.vc-business-badge,
.vc-verification-eyebrow,
.vc-bp-eyebrow {
    font-size: 14px !important;
}


/* =========================================================
   3. HERO MAIN TITLES
========================================================= */

.vc-business-hero h1,
.vc-verification-hero h1,
.vc-bp-hero h1 {
    font-size: clamp(38px, 5vw, 54px) !important;
    line-height: 1.15 !important;
}


/* HERO DESCRIPTION */

.vc-business-hero p,
.vc-verification-hero p,
.vc-bp-hero p {
    font-size: 17px !important;
    line-height: 1.75 !important;
}


/* HERO POINTS */

.vc-business-hero-points span {
    font-size: 14px !important;
}


/* =========================================================
   4. MAIN SECTION HEADINGS
========================================================= */

.vc-step-heading h2,
.vc-status-content h2 {
    font-size: clamp(28px, 4vw, 38px) !important;
    line-height: 1.25 !important;
}

.vc-bp-card-head h3,
.vc-section-heading h3 {
    font-size: 22px !important;
}


/* =========================================================
   5. SECTION SMALL LABELS
========================================================= */

.vc-step-heading > span,
.vc-status-small-title,
.vc-section-heading span,
.vc-bp-card-head > div > span,
.vc-sidebar-title > span,
.vc-bp-business-type {
    font-size: 12px !important;
    line-height: 1.4 !important;
}


/* =========================================================
   6. SECTION DESCRIPTIONS
========================================================= */

.vc-step-heading p,
.vc-status-content > p {
    font-size: 15px !important;
    line-height: 1.8 !important;
}


/* =========================================================
   7. BUSINESS REGISTRATION SIDEBAR
========================================================= */

.vc-sidebar-title h3 {
    font-size: 21px !important;
}

.vc-sidebar-title p {
    font-size: 13px !important;
}

.vc-side-step strong {
    font-size: 14px !important;
}

.vc-side-step small {
    font-size: 12px !important;
}

.vc-side-step-number {
    font-size: 13px !important;
}


/* HELP BOX */

.vc-registration-help strong {
    font-size: 14px !important;
}

.vc-registration-help p {
    font-size: 12px !important;
    line-height: 1.6 !important;
}

.vc-registration-help a {
    font-size: 12px !important;
}


/* =========================================================
   8. REGISTRATION PROGRESS
========================================================= */

.vc-progress-meta {
    font-size: 13px !important;
}

.vc-form-step-text {
    font-size: 13px !important;
}


/* =========================================================
   9. BUSINESS TYPE CARDS
========================================================= */

.vc-business-type-card strong {
    font-size: 14px !important;
    line-height: 1.4 !important;
}

.vc-type-icon {
    font-size: 20px !important;
}


/* =========================================================
   10. FORM LABELS
========================================================= */

.vc-field label,
.vc-bp-modal-field label {
    font-size: 14px !important;
    line-height: 1.4 !important;
}

.vc-field label span {
    font-size: 12px !important;
}


/* =========================================================
   11. INPUTS / SELECT / TEXTAREA
========================================================= */

.vc-input-wrap input,
.vc-input-wrap select,
.vc-field textarea,
.vc-bp-modal-field select {
    font-size: 14px !important;
}

.vc-input-wrap input::placeholder,
.vc-field textarea::placeholder {
    font-size: 14px !important;
}


/* =========================================================
   12. ADDRESS SECTION
========================================================= */

.vc-address-title strong {
    font-size: 15px !important;
}

.vc-address-title small {
    font-size: 12px !important;
    line-height: 1.5 !important;
}

.vc-same-address {
    font-size: 13px !important;
}

.vc-location-btn {
    font-size: 13px !important;
}


/* =========================================================
   13. DOCUMENT UPLOAD SECTION
========================================================= */

.vc-upload-note strong {
    font-size: 14px !important;
}

.vc-upload-note p {
    font-size: 12px !important;
    line-height: 1.6 !important;
}

.vc-upload-card strong {
    font-size: 14px !important;
}

.vc-upload-card small {
    font-size: 12px !important;
}

.vc-upload-action {
    font-size: 12px !important;
}

.vc-file-name {
    font-size: 11px !important;
}

.vc-upload-support > span,
.vc-upload-support small {
    font-size: 12px !important;
}


/* =========================================================
   14. REVIEW SECTION
========================================================= */

.vc-review-head h3 {
    font-size: 17px !important;
}

.vc-edit-step {
    font-size: 13px !important;
}

.vc-review-grid span,
.vc-review-single span {
    font-size: 12px !important;
}

.vc-review-grid strong,
.vc-review-single strong {
    font-size: 14px !important;
}

.vc-review-documents p,
.vc-review-doc-item {
    font-size: 12px !important;
}


/* TERMS */

.vc-terms-box label {
    font-size: 13px !important;
    line-height: 1.7 !important;
}


/* =========================================================
   15. ALL MAIN BUTTONS
========================================================= */

.vc-back-btn,
.vc-next-btn,
.vc-submit-btn,
.vc-primary-action,
.vc-outline-action,
.vc-bp-edit-main,
.vc-bp-upload-new,
.vc-bp-modal-submit {
    font-size: 14px !important;
    font-weight: 700 !important;
}


/* =========================================================
   16. VERIFICATION APPLICATION INFO
========================================================= */

.vc-application-number-box small,
.vc-application-meta small {
    font-size: 12px !important;
}

.vc-application-number-box strong {
    font-size: 16px !important;
}

.vc-application-meta strong {
    font-size: 14px !important;
}


/* =========================================================
   17. STATUS PILLS
========================================================= */

.vc-status-pill,
.vc-doc-status,
.vc-document-total {
    font-size: 12px !important;
}


/* =========================================================
   18. VERIFICATION NOTICE
========================================================= */

.vc-review-notice strong {
    font-size: 14px !important;
}

.vc-review-notice p {
    font-size: 12px !important;
}


/* =========================================================
   19. VERIFICATION PROGRESS
========================================================= */

.vc-progress-step strong {
    font-size: 14px !important;
}

.vc-progress-step small {
    font-size: 12px !important;
}


/* =========================================================
   20. VERIFICATION DOCUMENT LIST
========================================================= */

.vc-document-item strong {
    font-size: 14px !important;
}

.vc-document-item small {
    font-size: 12px !important;
}


/* =========================================================
   21. APPROVED BENEFITS
========================================================= */

.vc-approved-benefits span {
    font-size: 12px !important;
}

.vc-approved-benefits strong {
    font-size: 14px !important;
}


/* =========================================================
   22. APPROVED BUSINESS PROFILE
========================================================= */

.vc-approved-profile small {
    font-size: 12px !important;
}

.vc-approved-profile h3 {
    font-size: 20px !important;
}

.vc-approved-profile p {
    font-size: 13px !important;
}

.vc-approved-profile > strong {
    font-size: 13px !important;
}


/* =========================================================
   23. REJECTION INFORMATION
========================================================= */

.vc-rejection-reason small {
    font-size: 12px !important;
}

.vc-rejection-reason h3 {
    font-size: 17px !important;
}

.vc-rejection-reason p {
    font-size: 13px !important;
}


/* REJECTED DOCUMENTS */

.vc-rejected-doc-info strong {
    font-size: 14px !important;
}

.vc-rejected-doc-info small {
    font-size: 12px !important;
}

.vc-rejected-message > span {
    font-size: 12px !important;
}

.vc-rejected-message p {
    font-size: 12px !important;
}

.vc-reupload-btn {
    font-size: 13px !important;
}


/* REJECTION HELP */

.vc-rejection-help strong {
    font-size: 14px !important;
}

.vc-rejection-help p {
    font-size: 12px !important;
}


/* =========================================================
   24. BUSINESS PROFILE SUMMARY
========================================================= */

.vc-bp-summary-top h2 {
    font-size: 28px !important;
}

.vc-bp-summary-top p {
    font-size: 13px !important;
}

.vc-bp-status {
    font-size: 12px !important;
}


/* PROFILE MINI INFORMATION */

.vc-bp-mini-info small {
    font-size: 11px !important;
}

.vc-bp-mini-info strong {
    font-size: 14px !important;
}


/* =========================================================
   25. BUSINESS PROFILE DETAILS
========================================================= */

.vc-bp-detail-item span {
    font-size: 12px !important;
}

.vc-bp-detail-item strong {
    font-size: 15px !important;
}


/* =========================================================
   26. BUSINESS ADDRESS
========================================================= */

.vc-bp-address strong {
    font-size: 15px !important;
}

.vc-bp-address p {
    font-size: 13px !important;
    line-height: 1.7 !important;
}

.vc-bp-address a {
    font-size: 13px !important;
}


/* =========================================================
   27. BUSINESS PROFILE DOCUMENTS
========================================================= */

.vc-bp-doc-info strong {
    font-size: 14px !important;
}

.vc-bp-doc-info small {
    font-size: 12px !important;
}

.vc-bp-doc-info div > span {
    font-size: 11px !important;
}

.vc-bp-doc-status {
    font-size: 11px !important;
}

.vc-bp-doc-action,
.vc-bp-replace-btn {
    font-size: 12px !important;
}


/* =========================================================
   28. PROFILE RIGHT SIDEBAR
========================================================= */

.vc-bp-side-title h3 {
    font-size: 17px !important;
}

.vc-bp-verification-badge strong {
    font-size: 14px !important;
}

.vc-bp-verification-badge small {
    font-size: 11px !important;
}

.vc-bp-verification-meta span {
    font-size: 11px !important;
}

.vc-bp-verification-meta strong {
    font-size: 11px !important;
}


/* =========================================================
   29. DOCUMENT SUMMARY
========================================================= */

.vc-bp-document-summary p {
    font-size: 11px !important;
}

.vc-bp-document-summary strong {
    font-size: 15px !important;
}


/* =========================================================
   30. BUSINESS ACCOUNT ACTIVE
========================================================= */

.vc-bp-benefits h3 {
    font-size: 18px !important;
}

.vc-bp-benefits p {
    font-size: 13px !important;
    line-height: 1.7 !important;
}

.vc-bp-benefits a {
    font-size: 13px !important;
}


/* =========================================================
   31. SUPPORT BOX
========================================================= */

.vc-bp-support strong {
    font-size: 14px !important;
}

.vc-bp-support p {
    font-size: 12px !important;
    line-height: 1.7 !important;
}

.vc-bp-support a {
    font-size: 13px !important;
}


/* =========================================================
   32. MODALS
========================================================= */

.vc-bp-modal-card h3,
.vc-resubmit-modal-card h3,
.vc-success-modal h2 {
    font-size: 23px !important;
}

.vc-bp-modal-card > p,
.vc-resubmit-modal-card p,
.vc-success-modal p {
    font-size: 13px !important;
    line-height: 1.7 !important;
}

.vc-bp-modal-upload strong {
    font-size: 14px !important;
}

.vc-bp-modal-upload small {
    font-size: 11px !important;
}

.vc-modal-done {
    font-size: 13px !important;
}


/* =========================================================
   33. REGISTRATION SUCCESS POPUP
========================================================= */

.vc-success-modal > span {
    font-size: 12px !important;
}

.vc-application-number small {
    font-size: 11px !important;
}

.vc-application-number strong {
    font-size: 16px !important;
}

.vc-success-modal > a {
    font-size: 13px !important;
}


/* =========================================================
   34. DEMO STATUS SWITCHER
========================================================= */

.vc-status-demo > span {
    font-size: 13px !important;
}

.vc-status-demo button {
    font-size: 12px !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .vc-business-hero p,
    .vc-verification-hero p,
    .vc-bp-hero p {
        font-size: 16px !important;
    }

    .vc-step-heading p,
    .vc-status-content > p {
        font-size: 15px !important;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .vc-business-hero h1,
    .vc-verification-hero h1,
    .vc-bp-hero h1 {
        font-size: 34px !important;
    }

    .vc-business-hero p,
    .vc-verification-hero p,
    .vc-bp-hero p {
        font-size: 15px !important;
        line-height: 1.7 !important;
    }

    .vc-step-heading h2,
    .vc-status-content h2 {
        font-size: 27px !important;
    }

    .vc-step-heading p,
    .vc-status-content > p {
        font-size: 14px !important;
    }

    .vc-bp-card-head h3,
    .vc-section-heading h3 {
        font-size: 20px !important;
    }

    .vc-field label {
        font-size: 14px !important;
    }

    .vc-input-wrap input,
    .vc-input-wrap select,
    .vc-field textarea {
        font-size: 14px !important;
    }

    .vc-business-type-card strong {
        font-size: 13px !important;
    }

    .vc-bp-detail-item strong {
        font-size: 14px !important;
    }

    .vc-bp-doc-info strong,
    .vc-document-item strong {
        font-size: 14px !important;
    }

    .vc-back-btn,
    .vc-next-btn,
    .vc-submit-btn,
    .vc-primary-action,
    .vc-outline-action {
        font-size: 14px !important;
    }

}

/* =============================================
   VEGIICART NOTIFICATIONS PAGE
============================================= */

.vc-notifications-page,
.vc-notifications-page * {
    box-sizing: border-box;
}

.vc-notifications-page {
    width: 100%;
    font-family: "Inter", sans-serif;
    background: #f8fbf7;
    color: #213526;
}

.vc-notifications-container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


/* HERO */

.vc-notifications-hero {
    width: 100%;
    padding: 45px 0;
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(92, 172, 69, .17),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #edf8e9,
            #fbfef9 55%,
            #eef9e9
        );
}

.vc-notifications-hero-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.vc-notifications-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    margin-bottom: 9px;
    border-radius: 30px;
    background: #def0da;
    color: #2f8236;
    font-size: 14px;
    font-weight: 700;
}

.vc-notifications-hero h1 {
    margin: 0;
    color: #18371f;
    font-size: clamp(38px, 5vw, 52px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -1.5px;
}

.vc-notifications-hero p {
    max-width: 700px;
    margin: 10px 0 0;
    color: #6d7b70;
    font-size: 16px;
    line-height: 1.75;
}

.vc-mark-all-btn {
    flex: 0 0 auto;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 18px;
    border: 0;
    border-radius: 10px;
    background: #358d3d;
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}


/* MAIN */

.vc-notifications-main {
    width: 100%;
    padding: 30px 0 70px;
}


/* SUMMARY */

.vc-notification-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

.vc-notification-summary > div {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 17px;
    border: 1px solid #e0e8df;
    border-radius: 14px;
    background: #fff;
}

.vc-notification-summary > div > span {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #eaf5e7;
    color: #348a3c;
}

.vc-notification-summary small {
    display: block;
    color: #879288;
    font-size: 12px;
}

.vc-notification-summary strong {
    display: block;
    margin-top: 2px;
    color: #263d2c;
    font-size: 19px;
}


/* FILTERS */

.vc-notification-filters {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding: 18px;
    border: 1px solid #e0e8df;
    border-radius: 15px;
    background: #fff;
}

.vc-filter-group {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-wrap: wrap;
}

.vc-filter-title {
    color: #607064;
    font-size: 13px;
    font-weight: 700;
}

.vc-filter-buttons {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.vc-filter-buttons button {
    min-height: 36px;
    padding: 0 13px;
    border: 1px solid #d9e4d8;
    border-radius: 30px;
    background: #fff;
    color: #627066;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.vc-filter-buttons button.active {
    border-color: #358d3d;
    background: #358d3d;
    color: #fff;
}


/* NOTIFICATION LIST */

.vc-notification-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vc-notification-item {
    position: relative;
    display: grid;
    grid-template-columns: 54px 1fr 38px;
    gap: 15px;
    padding: 18px;
    border: 1px solid #e0e8df;
    border-radius: 15px;
    background: #fff;
    transition: .25s ease;
}

.vc-notification-item.unread {
    border-left: 4px solid #398f40;
    background: #fbfefb;
}

.vc-notification-item.unread::after {
    content: "";
    position: absolute;
    top: 17px;
    right: 16px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3c9444;
}

.vc-notification-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(35, 75, 40, .07);
}

.vc-notification-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    font-size: 19px;
}

.vc-notification-icon.order {
    background: #e6f3e3;
    color: #348a3c;
}

.vc-notification-icon.delivery {
    background: #e3f1fa;
    color: #287ca6;
}

.vc-notification-icon.offer {
    background: #fff1cd;
    color: #ad7707;
}

.vc-notification-icon.stock {
    background: #e8f4e6;
    color: #418f48;
}

.vc-notification-icon.account {
    background: #ebe8fa;
    color: #6954b6;
}

.vc-notification-icon.support {
    background: #e6eef9;
    color: #3f6fa7;
}


/* CONTENT */

.vc-notification-top {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.vc-notification-category {
    color: #398e40;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.vc-notification-time {
    color: #919b93;
    font-size: 12px;
}

.vc-notification-content h3 {
    margin: 5px 0 6px;
    color: #293f2f;
    font-size: 17px;
    line-height: 1.4;
}

.vc-notification-content p {
    margin: 0;
    max-width: 820px;
    color: #768279;
    font-size: 14px;
    line-height: 1.7;
}

.vc-notification-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.vc-notification-actions a,
.vc-mark-read-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
}

.vc-notification-actions a {
    color: #32863a;
}

.vc-mark-read-btn {
    padding: 0;
    border: 0;
    background: transparent;
    color: #6f7e72;
    cursor: pointer;
}


/* DELETE */

.vc-notification-delete {
    width: 34px;
    height: 34px;
    align-self: center;
    display: grid;
    place-items: center;
    border: 1px solid #ebd8d5;
    border-radius: 9px;
    background: #fff7f6;
    color: #bb5148;
    cursor: pointer;
}


/* READ STYLE */

.vc-notification-item.read {
    opacity: .78;
}

.vc-notification-item.read .vc-notification-content h3 {
    font-weight: 600;
}


/* EMPTY */

.vc-notification-empty {
    display: none;
    padding: 60px 20px;
    text-align: center;
    border: 1px dashed #ccdcca;
    border-radius: 18px;
    background: #fff;
}

.vc-notification-empty.show {
    display: block;
}

.vc-notification-empty > span {
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #edf6eb;
    color: #438f49;
    font-size: 25px;
}

.vc-notification-empty h3 {
    margin: 0;
    color: #304536;
    font-size: 20px;
}

.vc-notification-empty p {
    margin: 6px 0 0;
    color: #839087;
    font-size: 14px;
}


/* RESPONSIVE */

@media (max-width: 800px) {

    .vc-notifications-hero-inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .vc-mark-all-btn {
        width: 100%;
        justify-content: center;
    }

    .vc-notification-summary {
        grid-template-columns: 1fr 1fr;
    }

    .vc-notification-filters {
        flex-direction: column;
    }

}


@media (max-width: 600px) {

    .vc-notifications-container {
        width: min(100% - 26px, 1180px);
    }

    .vc-notifications-hero {
        padding: 36px 0;
    }

    .vc-notifications-hero h1 {
        font-size: 36px;
    }

    .vc-notifications-hero p {
        font-size: 15px;
    }

    .vc-notification-summary {
        grid-template-columns: 1fr;
    }

    .vc-filter-group {
        align-items: flex-start;
        flex-direction: column;
    }

    .vc-filter-buttons {
        width: 100%;
    }

    .vc-filter-buttons button {
        flex: 1;
    }

    .vc-notification-item {
        grid-template-columns: 48px 1fr;
        padding: 16px;
    }

    .vc-notification-icon {
        width: 48px;
        height: 48px;
    }

    .vc-notification-delete {
        grid-column: 2;
        justify-self: start;
    }

    .vc-notification-top {
        flex-direction: column;
        gap: 3px;
    }

    .vc-notification-content h3 {
        font-size: 16px;
    }

    .vc-notification-content p {
        font-size: 13px;
    }

}

/* =============================================
   VEGIICART 404 PAGE
============================================= */

.vc404-page,
.vc404-page * {
    box-sizing: border-box;
}

.vc404-page {
    width: 100%;
    font-family: "Inter", sans-serif;
    color: #1d3423;
    background: #f8fbf7;
}

.vc404-container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


/* MAIN SECTION */

.vc404-section {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 65px 0 70px;
    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(100, 185, 75, .17),
            transparent 28%
        ),
        radial-gradient(
            circle at 5% 45%,
            rgba(255, 205, 65, .09),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #edf8e9 0%,
            #fbfef9 47%,
            #f1faed 100%
        );
}


/* LAYOUT */

.vc404-layout {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    align-items: center;
    gap: 70px;
}


/* =============================================
   404 VISUAL
============================================= */

.vc404-visual {
    position: relative;
    min-height: 390px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vc404-number {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #2f8137;
    font-size: clamp(105px, 13vw, 170px);
    line-height: 1;
    font-weight: 900;
    letter-spacing: -12px;
    text-shadow:
        0 18px 45px rgba(48, 126, 55, .12);
}

.vc404-zero {
    width: 135px;
    height: 135px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background:
        linear-gradient(
            145deg,
            #48a44f,
            #277d30
        );
    color: #ffffff;
    font-size: 46px;
    box-shadow:
        0 20px 50px rgba(42, 125, 49, .25);
    border: 10px solid rgba(255,255,255,.7);
}

.vc404-floating {
    position: absolute;
    width: 53px;
    height: 53px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: #ffffff;
    color: #398f40;
    font-size: 20px;
    box-shadow:
        0 14px 35px rgba(37, 77, 41, .12);
}

.vc404-float-one {
    top: 40px;
    left: 30px;
    transform: rotate(-10deg);
}

.vc404-float-two {
    right: 30px;
    bottom: 55px;
    color: #de6d39;
    transform: rotate(10deg);
}

.vc404-float-three {
    left: 80px;
    bottom: 35px;
    width: 43px;
    height: 43px;
    color: #5a9f3b;
}


/* =============================================
   CONTENT
============================================= */

.vc404-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 8px 14px;
    border-radius: 30px;
    background: #def0da;
    color: #308338;
    font-size: 14px;
    font-weight: 700;
}

.vc404-content h1 {
    max-width: 650px;
    margin: 0;
    color: #17371f;
    font-size: clamp(36px, 5vw, 56px);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -1.7px;
}

.vc404-content h1 span {
    display: block;
    color: #3b9343;
}

.vc404-content > p {
    max-width: 650px;
    margin: 16px 0 24px;
    color: #6e7d71;
    font-size: 16px;
    line-height: 1.8;
}


/* =============================================
   SEARCH
============================================= */

.vc404-search {
    max-width: 670px;
}

.vc404-search-box {
    position: relative;
    display: flex;
    align-items: center;
    padding: 6px;
    border: 1px solid #d9e7d7;
    border-radius: 14px;
    background: #ffffff;
    box-shadow:
        0 10px 32px rgba(35, 76, 39, .07);
}

.vc404-search-box > i {
    position: absolute;
    left: 19px;
    color: #73a377;
    font-size: 15px;
}

.vc404-search-box input {
    width: 100%;
    height: 50px;
    padding: 0 145px 0 43px;
    border: 0;
    outline: none;
    background: transparent;
    color: #2c4132;
    font: inherit;
    font-size: 14px;
}

.vc404-search-box input::placeholder {
    color: #9ba79d;
}

.vc404-search-box button {
    position: absolute;
    right: 6px;
    min-width: 125px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
    border-radius: 10px;
    background: #358d3d;
    color: #ffffff;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}


/* =============================================
   ACTIONS
============================================= */

.vc404-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 11px;
    margin-top: 20px;
}

.vc404-home-btn,
.vc404-products-btn {
    min-height: 47px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: .25s ease;
}

.vc404-home-btn {
    background: #358d3d;
    color: #ffffff;
    box-shadow:
        0 10px 25px rgba(53, 141, 61, .18);
}

.vc404-products-btn {
    border: 1px solid #bfd7bd;
    background: rgba(255,255,255,.7);
    color: #34773a;
}

.vc404-home-btn:hover {
    background: #27742f;
    color: #ffffff;
    transform: translateY(-2px);
}

.vc404-products-btn:hover {
    border-color: #398f40;
    color: #398f40;
}


/* =============================================
   CATEGORY SECTION
============================================= */

.vc404-categories {
    margin-top: 55px;
    padding: 27px;
    border: 1px solid #dee8dc;
    border-radius: 20px;
    background: rgba(255,255,255,.82);
    box-shadow:
        0 15px 42px rgba(34, 75, 39, .055);
}

.vc404-category-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.vc404-category-heading span {
    color: #3a8e41;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .7px;
}

.vc404-category-heading h2 {
    margin: 4px 0 0;
    color: #243b2a;
    font-size: 25px;
}

.vc404-category-heading > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #35863c;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
}

.vc404-category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.vc404-category-card {
    display: grid;
    grid-template-columns: 45px 1fr auto;
    align-items: center;
    gap: 10px;
    min-height: 85px;
    padding: 14px;
    border: 1px solid #e1eae0;
    border-radius: 13px;
    background: #fbfdfb;
    text-decoration: none;
    transition: .25s ease;
}

.vc404-category-card:hover {
    transform: translateY(-3px);
    border-color: #a9cea5;
    background: #f2f9f0;
}

.vc404-category-card > span {
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #e5f3e2;
    color: #378b3e;
    font-size: 18px;
}

.vc404-category-card strong {
    display: block;
    color: #304536;
    font-size: 13px;
}

.vc404-category-card small {
    display: block;
    margin-top: 2px;
    color: #89948b;
    font-size: 11px;
}

.vc404-category-card > i {
    color: #8da390;
    font-size: 11px;
}


/* =============================================
   SUPPORT
============================================= */

.vc404-support {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-top: 20px;
    padding: 24px 28px;
    border-radius: 18px;
    background:
        linear-gradient(
            135deg,
            #153f1f,
            #285e30
        );
}

.vc404-support-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.vc404-support-left > span {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: rgba(255,255,255,.11);
    color: #d0ed99;
    font-size: 20px;
}

.vc404-support-left small {
    color: #b7d4b9;
    font-size: 11px;
    font-weight: 700;
}

.vc404-support-left h3 {
    margin: 3px 0 5px;
    color: #ffffff;
    font-size: 19px;
}

.vc404-support-left p {
    max-width: 700px;
    margin: 0;
    color: rgba(255,255,255,.72);
    font-size: 13px;
    line-height: 1.65;
}

.vc404-support-btn {
    flex: 0 0 auto;
    min-height: 45px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 17px;
    border-radius: 10px;
    background: #ffffff;
    color: #286e30;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
}


/* =============================================
   RESPONSIVE
============================================= */

@media (max-width: 1000px) {

    .vc404-layout {
        grid-template-columns: .8fr 1.2fr;
        gap: 35px;
    }

    .vc404-category-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 760px) {

    .vc404-section {
        padding: 45px 0 55px;
    }

    .vc404-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .vc404-visual {
        min-height: 250px;
    }

    .vc404-number {
        font-size: 105px;
    }

    .vc404-zero {
        width: 95px;
        height: 95px;
        font-size: 32px;
        border-width: 7px;
    }

    .vc404-content {
        text-align: center;
    }

    .vc404-content > p {
        margin-left: auto;
        margin-right: auto;
    }

    .vc404-search {
        margin-left: auto;
        margin-right: auto;
    }

    .vc404-actions {
        justify-content: center;
    }

    .vc404-support {
        align-items: flex-start;
        flex-direction: column;
    }

    .vc404-support-btn {
        width: 100%;
        justify-content: center;
    }

}


@media (max-width: 600px) {

    .vc404-container {
        width: min(100% - 26px, 1180px);
    }

    .vc404-number {
        font-size: 85px;
        letter-spacing: -8px;
    }

    .vc404-zero {
        width: 78px;
        height: 78px;
        font-size: 27px;
    }

    .vc404-floating {
        display: none;
    }

    .vc404-content h1 {
        font-size: 34px;
    }

    .vc404-content > p {
        font-size: 14px;
    }

    .vc404-search-box {
        display: block;
        padding: 7px;
    }

    .vc404-search-box > i {
        top: 23px;
    }

    .vc404-search-box input {
        height: 46px;
        padding: 0 15px 0 40px;
    }

    .vc404-search-box button {
        position: static;
        width: 100%;
        height: 43px;
    }

    .vc404-actions {
        flex-direction: column;
    }

    .vc404-home-btn,
    .vc404-products-btn {
        width: 100%;
    }

    .vc404-categories {
        margin-top: 38px;
        padding: 19px;
    }

    .vc404-category-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .vc404-category-heading h2 {
        font-size: 22px;
    }

    .vc404-category-grid {
        grid-template-columns: 1fr;
    }

    .vc404-support {
        padding: 21px;
    }

    .vc404-support-left {
        align-items: flex-start;
    }

}

/* =========================================================
   VEGGIICART ABOUT US PAGE
========================================================= */

.vc-about-page,
.vc-about-page * {
    box-sizing: border-box;
}

.vc-about-page {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: "Inter", sans-serif;
    color: #23382a;
    background: #ffffff;
}

.vc-about-container {
    width: min(1240px, calc(100% - 40px));
    margin: 0 auto;
}


/* =========================================================
   HERO
========================================================= */

.vc-about-hero {
    position: relative;
    width: 100%;
    padding: 70px 0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(106, 189, 76, .20),
            transparent 30%
        ),
        radial-gradient(
            circle at 5% 80%,
            rgba(255, 200, 50, .08),
            transparent 24%
        ),
        linear-gradient(
            135deg,
            #edf8e9 0%,
            #fbfef9 52%,
            #eff9eb 100%
        );
}

.vc-about-hero::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    left: -220px;
    bottom: -270px;
    border-radius: 50%;
    background: rgba(51, 139, 59, .06);
}

.vc-about-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 70px;
    align-items: center;
}

.vc-about-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 17px;
    padding: 9px 15px;
    border-radius: 50px;
    background: #dff1da;
    color: #2d8235;
    font-size: 14px;
    font-weight: 700;
}

.vc-about-hero h1 {
    max-width: 700px;
    margin: 0;
    color: #15351d;
    font-size: clamp(42px, 5.3vw, 68px);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -2.5px;
}

.vc-about-hero h1 span {
    color: #3a9342;
}

.vc-about-hero-content > p {
    max-width: 690px;
    margin: 18px 0 0;
    color: #657469;
    font-size: 16px;
    line-height: 1.8;
}

.vc-about-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 27px;
}

.vc-about-primary-btn,
.vc-about-outline-btn {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 22px;
    border-radius: 11px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    transition: .3s ease;
}

.vc-about-primary-btn {
    background: #348d3c;
    color: #fff;
    box-shadow: 0 12px 28px rgba(52, 141, 60, .19);
}

.vc-about-outline-btn {
    border: 1px solid #bfd5bc;
    background: rgba(255,255,255,.8);
    color: #34773a;
}

.vc-about-primary-btn:hover {
    transform: translateY(-2px);
    background: #27732f;
    color: #fff;
}

.vc-about-outline-btn:hover {
    border-color: #348d3c;
    color: #348d3c;
}

.vc-about-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 25px;
}

.vc-about-hero-points span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #49634e;
    font-size: 13px;
    font-weight: 600;
}

.vc-about-hero-points i {
    color: #3a9442;
}


/* HERO IMAGE */

.vc-about-hero-image {
    position: relative;
    padding: 13px;
    border-radius: 30px;
    background: rgba(255,255,255,.75);
    box-shadow: 0 25px 60px rgba(37, 81, 42, .14);
}

.vc-about-hero-image > img {
    width: 100%;
    height: 500px;
    display: block;
    object-fit: cover;
    border-radius: 22px;
}

.vc-about-hero-float {
    position: absolute;
    left: -35px;
    bottom: 38px;
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 230px;
    padding: 15px;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 16px 42px rgba(24, 72, 30, .17);
}

.vc-about-hero-float > span {
    width: 45px;
    height: 45px;
    flex: 0 0 45px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #e4f3df;
    color: #33893b;
}

.vc-about-hero-float div {
    display: flex;
    flex-direction: column;
}

.vc-about-hero-float small {
    color: #88938a;
    font-size: 11px;
}

.vc-about-hero-float strong {
    color: #2b4030;
    font-size: 13px;
}


/* =========================================================
   INTRO STRIP
========================================================= */

.vc-about-intro-strip {
    width: 100%;
    padding: 24px 0;
    border-bottom: 1px solid #e7eee6;
    background: #fff;
}

.vc-about-intro-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.vc-about-intro-grid > div {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 25px;
    border-right: 1px solid #e5ece4;
}

.vc-about-intro-grid > div:first-child {
    padding-left: 0;
}

.vc-about-intro-grid > div:last-child {
    border-right: 0;
}

.vc-about-intro-grid > div > span {
    width: 47px;
    height: 47px;
    flex: 0 0 47px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #eaf6e7;
    color: #358c3d;
    font-size: 18px;
}

.vc-about-intro-grid strong {
    display: block;
    color: #2f4434;
    font-size: 14px;
}

.vc-about-intro-grid small {
    display: block;
    margin-top: 2px;
    color: #859087;
    font-size: 11px;
    line-height: 1.5;
}


/* =========================================================
   COMMON SECTIONS
========================================================= */

.vc-about-section {
    width: 100%;
    padding: 78px 0;
}

.vc-about-white {
    background: #ffffff;
}

.vc-about-light {
    background: #f7faf5;
}

.vc-about-split {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 65px;
    align-items: center;
}

.vc-about-split-reverse {
    grid-template-columns: 1.05fr .95fr;
}

.vc-about-section-label {
    display: inline-block;
    margin-bottom: 9px;
    color: #398f40;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.vc-about-content-block h2,
.vc-about-quality-content h2,
.vc-about-delivery-content h2,
.vc-about-network h2,
.vc-about-vision-card h2,
.vc-about-mission-card h2 {
    margin: 0;
    color: #1d3724;
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.18;
    letter-spacing: -1.3px;
}

.vc-about-content-block h2 span,
.vc-about-quality-content h2 span,
.vc-about-delivery-content h2 span,
.vc-about-network h2 span {
    color: #3a9342;
}

.vc-about-content-block p,
.vc-about-quality-content > p,
.vc-about-delivery-content > p,
.vc-about-network p,
.vc-about-vision-card p {
    margin: 15px 0 0;
    color: #707d73;
    font-size: 15px;
    line-height: 1.82;
}


/* IMAGES */

.vc-about-image-block {
    position: relative;
}

.vc-about-image-block > img,
.vc-about-delivery-image img {
    width: 100%;
    height: 460px;
    display: block;
    object-fit: cover;
    border-radius: 25px;
}

.vc-about-image-block::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 80%;
    height: 80%;
    left: -20px;
    bottom: -20px;
    border-radius: 25px;
    background: #e6f2e2;
}

.vc-about-image-tag {
    position: absolute;
    right: -20px;
    bottom: 25px;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 14px 18px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 14px 40px rgba(33, 78, 39, .14);
}

.vc-about-image-tag > i {
    width: 37px;
    height: 37px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #e5f2e1;
    color: #388d40;
}

.vc-about-image-tag span {
    display: flex;
    flex-direction: column;
    color: #869188;
    font-size: 11px;
}

.vc-about-image-tag strong {
    color: #344939;
    font-size: 13px;
}


/* =========================================================
   VISION MISSION
========================================================= */

.vc-about-vision {
    width: 100%;
    padding: 75px 0;
    background:
        linear-gradient(
            135deg,
            #143d1d,
            #23562a
        );
}

.vc-about-vision-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 24px;
}

.vc-about-vision-card,
.vc-about-mission-card {
    padding: 35px;
    border-radius: 22px;
}

.vc-about-vision-card {
    background: #fff;
}

.vc-about-mission-card {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
}

.vc-about-big-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 14px;
    background: #e5f2e1;
    color: #368b3e;
    font-size: 20px;
}

.vc-about-mission-card .vc-about-big-icon {
    background: rgba(255,255,255,.1);
    color: #d3ef9f;
}

.vc-about-mission-card .vc-about-section-label {
    color: #b9dd8d;
}

.vc-about-mission-card h2 {
    color: #fff;
}

.vc-about-mission-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 11px;
    margin-top: 22px;
}

.vc-about-mission-list > div {
    display: flex;
    gap: 8px;
    color: rgba(255,255,255,.79);
    font-size: 13px;
    line-height: 1.6;
}

.vc-about-mission-list i {
    margin-top: 4px;
    color: #c9e990;
}


/* =========================================================
   HEADING CENTER
========================================================= */

.vc-about-heading-center {
    max-width: 800px;
    margin: 0 auto 35px;
    text-align: center;
}

.vc-about-heading-center h2 {
    margin: 0;
    color: #1d3824;
    font-size: clamp(30px, 4vw, 43px);
    line-height: 1.2;
}

.vc-about-heading-center h2 span {
    color: #399141;
}

.vc-about-heading-center p {
    max-width: 700px;
    margin: 12px auto 0;
    color: #748078;
    font-size: 15px;
    line-height: 1.75;
}


/* =========================================================
   BUSINESSES
========================================================= */

.vc-about-business-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 13px;
}

.vc-about-business-card {
    min-height: 125px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 16px;
    border: 1px solid #e0e9df;
    border-radius: 15px;
    background: #fff;
    text-align: center;
    transition: .3s ease;
}

.vc-about-business-card:hover {
    transform: translateY(-4px);
    border-color: #afd1ab;
    box-shadow: 0 12px 30px rgba(35, 77, 40, .08);
}

.vc-about-business-card i {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #eaf5e7;
    color: #398e40;
    font-size: 18px;
}

.vc-about-business-card strong {
    color: #35483a;
    font-size: 13px;
}


/* =========================================================
   SOURCING PROCESS
========================================================= */

.vc-about-process {
    display: grid;
    grid-template-columns:
        1fr 30px
        1fr 30px
        1fr 30px
        1fr 30px
        1fr 30px
        1fr;
    align-items: center;
    gap: 7px;
    margin-top: 55px;
}

.vc-about-process > div {
    position: relative;
    min-height: 140px;
    padding: 22px 12px;
    border: 1px solid #e1e9df;
    border-radius: 14px;
    background: #f9fcf8;
    text-align: center;
}

.vc-about-process > div > span {
    position: absolute;
    top: 8px;
    right: 10px;
    color: #9cb29f;
    font-size: 10px;
    font-weight: 700;
}

.vc-about-process > div i {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    margin: 10px auto;
    border-radius: 11px;
    background: #e6f3e3;
    color: #398f40;
    font-size: 16px;
}

.vc-about-process > div strong {
    color: #34483a;
    font-size: 12px;
}

.vc-process-arrow {
    text-align: center;
    color: #75a578;
}


/* =========================================================
   QUALITY
========================================================= */

.vc-about-quality {
    width: 100%;
    padding: 75px 0;
    background: #edf7e9;
}

.vc-about-quality-grid {
    display: grid;
    grid-template-columns: 1fr .9fr;
    gap: 60px;
    align-items: center;
}

.vc-about-quality-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 24px;
}

.vc-about-quality-list span {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px;
    border-radius: 10px;
    background: rgba(255,255,255,.72);
    color: #465b4a;
    font-size: 13px;
}

.vc-about-quality-list i {
    color: #398f40;
}

.vc-about-quality-image {
    position: relative;
}

.vc-about-quality-image > img {
    width: 100%;
    height: 480px;
    display: block;
    object-fit: cover;
    border-radius: 25px;
}

.vc-about-quality-badge {
    position: absolute;
    left: -25px;
    bottom: 28px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 18px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 15px 40px rgba(30, 72, 35, .15);
}

.vc-about-quality-badge i {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #e2f1de;
    color: #378c3f;
}

.vc-about-quality-badge span {
    display: flex;
    flex-direction: column;
    color: #879188;
    font-size: 11px;
}

.vc-about-quality-badge strong {
    color: #344a39;
    font-size: 13px;
}


/* =========================================================
   GRADING
========================================================= */

.vc-about-grade-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-top: 22px;
}

.vc-about-grade-grid > div {
    min-height: 82px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    border-radius: 11px;
    background: #fff;
    border: 1px solid #dfe8de;
}

.vc-about-grade-grid i {
    color: #3a9142;
    font-size: 17px;
}

.vc-about-grade-grid strong {
    color: #405445;
    font-size: 11px;
}

.vc-about-note {
    padding: 13px 15px;
    border-left: 3px solid #3b9343;
    border-radius: 8px;
    background: #edf6eb;
    font-size: 13px !important;
}


/* =========================================================
   NETWORK
========================================================= */

.vc-about-network {
    width: 100%;
    padding: 75px 0;
    background:
        linear-gradient(
            135deg,
            #153e1e,
            #255e2d
        );
}

.vc-about-network-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 60px;
    align-items: center;
}

.vc-about-network .vc-about-section-label {
    color: #b8dd8d;
}

.vc-about-network h2 {
    color: #fff;
}

.vc-about-network h2 span {
    color: #cdeca0;
}

.vc-about-network p {
    color: rgba(255,255,255,.72);
}

.vc-about-network-flow {
    display: grid;
    grid-template-columns: 1fr 35px 1fr 35px 1fr;
    align-items: center;
    gap: 8px;
}

.vc-about-network-flow > div {
    min-height: 155px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 15px;
    background: rgba(255,255,255,.08);
    text-align: center;
}

.vc-about-network-flow > div > span {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin-bottom: 10px;
    border-radius: 12px;
    background: rgba(255,255,255,.1);
    color: #d0ec9e;
}

.vc-about-network-flow strong {
    color: #fff;
    font-size: 13px;
}

.vc-about-network-flow small {
    margin-top: 3px;
    color: rgba(255,255,255,.6);
    font-size: 10px;
}

.vc-about-network-flow > i {
    color: #a9cf7d;
}


/* =========================================================
   DELIVERY
========================================================= */

.vc-about-delivery {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 65px;
    align-items: center;
}

.vc-about-delivery-note {
    display: flex;
    gap: 12px;
    margin-top: 22px;
    padding: 16px;
    border-radius: 13px;
    background: #edf7ea;
}

.vc-about-delivery-note > i {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #dcefd8;
    color: #358b3d;
}

.vc-about-delivery-note strong {
    color: #34493a;
    font-size: 14px;
}

.vc-about-delivery-note p {
    margin: 4px 0 0;
    color: #758177;
    font-size: 12px;
    line-height: 1.7;
}


/* =========================================================
   WHY CHOOSE
========================================================= */

.vc-about-why {
    width: 100%;
    padding: 78px 0;
    background: #f7faf5;
}

.vc-about-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 17px;
}

.vc-about-why-card {
    padding: 24px;
    border: 1px solid #dfe8de;
    border-radius: 17px;
    background: #fff;
    transition: .3s ease;
}

.vc-about-why-card:hover {
    transform: translateY(-5px);
    border-color: #aecfaa;
    box-shadow: 0 15px 40px rgba(35, 76, 40, .08);
}

.vc-about-why-card > span {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    border-radius: 12px;
    background: #e6f3e3;
    color: #368c3e;
    font-size: 18px;
}

.vc-about-why-card h3 {
    margin: 0;
    color: #2c432f;
    font-size: 17px;
}

.vc-about-why-card p {
    margin: 7px 0 0;
    color: #7a867d;
    font-size: 13px;
    line-height: 1.7;
}

.vc-about-why-wide {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 50px 1fr;
    gap: 15px;
    align-items: center;
    background:
        linear-gradient(
            135deg,
            #eff7ec,
            #ffffff
        );
}

.vc-about-why-wide > span {
    margin: 0;
}


/* =========================================================
   CTA
========================================================= */

.vc-about-cta {
    width: 100%;
    padding: 65px 0;
    background: #fff;
}

.vc-about-cta-box {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 40px;
    align-items: center;
    padding: 45px;
    border-radius: 25px;
    background:
        radial-gradient(
            circle at 95% 0%,
            rgba(186, 232, 128, .16),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #143f1e,
            #245d2c
        );
}

.vc-about-cta-content > span {
    color: #bae08d;
    font-size: 13px;
    font-weight: 700;
}

.vc-about-cta-content h2 {
    max-width: 750px;
    margin: 8px 0;
    color: #fff;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.2;
}

.vc-about-cta-content h2 strong {
    color: #cae99d;
}

.vc-about-cta-content p {
    max-width: 700px;
    margin: 0;
    color: rgba(255,255,255,.7);
    font-size: 14px;
    line-height: 1.7;
}

.vc-about-cta-tagline {
    margin-top: 17px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

.vc-about-cta-tagline span {
    color: #cae99d;
}

.vc-about-cta-actions {
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.vc-about-cta-actions a {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 16px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 9px;
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
}

.vc-about-cta-actions .vc-about-cta-primary {
    border-color: #fff;
    background: #fff;
    color: #287631;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .vc-about-business-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .vc-about-process {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .vc-process-arrow {
        display: none;
    }

    .vc-about-grade-grid {
        grid-template-columns: repeat(3, 1fr);
    }

}


@media (max-width: 900px) {

    .vc-about-hero-grid,
    .vc-about-split,
    .vc-about-split-reverse,
    .vc-about-quality-grid,
    .vc-about-network-grid,
    .vc-about-delivery {
        grid-template-columns: 1fr;
    }

    .vc-about-hero-image > img {
        height: 430px;
    }

    .vc-about-hero-float {
        left: 25px;
    }

    .vc-about-intro-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .vc-about-intro-grid > div {
        border-bottom: 1px solid #e5ece4;
    }

    .vc-about-intro-grid > div:nth-child(2) {
        border-right: 0;
    }

    .vc-about-vision-grid {
        grid-template-columns: 1fr;
    }

    .vc-about-network-flow {
        margin-top: 5px;
    }

    .vc-about-cta-box {
        grid-template-columns: 1fr;
    }

    .vc-about-cta-actions {
        min-width: auto;
        flex-direction: row;
        flex-wrap: wrap;
    }

}


@media (max-width: 700px) {

    .vc-about-container {
        width: min(100% - 28px, 1240px);
    }

    .vc-about-hero {
        padding: 48px 0;
    }

    .vc-about-hero h1 {
        font-size: 39px;
        letter-spacing: -1.4px;
    }

    .vc-about-hero-content > p {
        font-size: 15px;
    }

    .vc-about-hero-actions {
        flex-direction: column;
    }

    .vc-about-primary-btn,
    .vc-about-outline-btn {
        width: 100%;
    }

    .vc-about-hero-image {
        padding: 8px;
    }

    .vc-about-hero-image > img {
        height: 330px;
    }

    .vc-about-hero-float {
        left: 18px;
        right: 18px;
        bottom: 20px;
        min-width: auto;
    }

    .vc-about-section,
    .vc-about-quality,
    .vc-about-network,
    .vc-about-vision,
    .vc-about-why {
        padding: 55px 0;
    }

    .vc-about-intro-grid {
        grid-template-columns: 1fr;
    }

    .vc-about-intro-grid > div {
        padding: 13px 0;
        border-right: 0;
    }

    .vc-about-business-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .vc-about-image-block > img,
    .vc-about-delivery-image img,
    .vc-about-quality-image > img {
        height: 330px;
    }

    .vc-about-image-tag {
        right: 15px;
    }

    .vc-about-mission-list {
        grid-template-columns: 1fr;
    }

    .vc-about-process {
        grid-template-columns: repeat(2, 1fr);
    }

    .vc-about-quality-list {
        grid-template-columns: 1fr;
    }

    .vc-about-quality-badge {
        left: 18px;
    }

    .vc-about-grade-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .vc-about-network-flow {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .vc-about-network-flow > i {
        transform: rotate(90deg);
        justify-self: center;
    }

    .vc-about-why-grid {
        grid-template-columns: 1fr;
    }

    .vc-about-why-wide {
        grid-column: auto;
    }

    .vc-about-cta {
        padding: 45px 0;
    }

    .vc-about-cta-box {
        padding: 30px 22px;
    }

    .vc-about-cta-actions {
        flex-direction: column;
    }

}


@media (max-width: 430px) {

    .vc-about-business-grid {
        grid-template-columns: 1fr 1fr;
    }

    .vc-about-process {
        grid-template-columns: 1fr;
    }

    .vc-about-grade-grid {
        grid-template-columns: 1fr 1fr;
    }

}

/* =========================================================
   VEGGIICART ABOUT PAGE
   FINAL LARGE FONT OVERRIDE
   ADD THIS AT THE VERY END OF CSS
========================================================= */


/* BASE TEXT */

.vc-about-page {
    font-size: 17px !important;
}


/* HERO */

.vc-about-eyebrow {
    font-size: 16px !important;
}

.vc-about-hero h1 {
    font-size: clamp(48px, 5.5vw, 72px) !important;
    line-height: 1.08 !important;
}

.vc-about-hero-content > p {
    font-size: 18px !important;
    line-height: 1.8 !important;
}

.vc-about-hero-points span {
    font-size: 15px !important;
}

.vc-about-primary-btn,
.vc-about-outline-btn {
    font-size: 15px !important;
}


/* HERO FLOATING BOX */

.vc-about-hero-float small {
    font-size: 13px !important;
}

.vc-about-hero-float strong {
    font-size: 15px !important;
}


/* INTRO STRIP */

.vc-about-intro-grid strong {
    font-size: 16px !important;
}

.vc-about-intro-grid small {
    font-size: 13px !important;
    line-height: 1.6 !important;
}


/* SECTION LABELS */

.vc-about-section-label {
    font-size: 14px !important;
}


/* SECTION HEADINGS */

.vc-about-content-block h2,
.vc-about-quality-content h2,
.vc-about-delivery-content h2,
.vc-about-network h2,
.vc-about-vision-card h2,
.vc-about-mission-card h2,
.vc-about-heading-center h2 {
    font-size: clamp(34px, 4vw, 48px) !important;
    line-height: 1.2 !important;
}


/* NORMAL PARAGRAPHS */

.vc-about-content-block p,
.vc-about-quality-content > p,
.vc-about-delivery-content > p,
.vc-about-network p,
.vc-about-vision-card p,
.vc-about-heading-center p {
    font-size: 17px !important;
    line-height: 1.85 !important;
}


/* IMAGE TAG */

.vc-about-image-tag span {
    font-size: 13px !important;
}

.vc-about-image-tag strong {
    font-size: 15px !important;
}


/* MISSION LIST */

.vc-about-mission-list > div {
    font-size: 15px !important;
    line-height: 1.7 !important;
}


/* BUSINESSES WE SERVE */

.vc-about-business-card strong {
    font-size: 15px !important;
}


/* SOURCING PROCESS */

.vc-about-process > div > span {
    font-size: 12px !important;
}

.vc-about-process > div strong {
    font-size: 14px !important;
}


/* QUALITY LIST */

.vc-about-quality-list span {
    font-size: 15px !important;
}


/* QUALITY BADGE */

.vc-about-quality-badge span {
    font-size: 13px !important;
}

.vc-about-quality-badge strong {
    font-size: 15px !important;
}


/* GRADING */

.vc-about-grade-grid strong {
    font-size: 14px !important;
}

.vc-about-note {
    font-size: 15px !important;
    line-height: 1.7 !important;
}


/* NETWORK FLOW */

.vc-about-network-flow strong {
    font-size: 15px !important;
}

.vc-about-network-flow small {
    font-size: 12px !important;
}


/* DELIVERY */

.vc-about-delivery-note strong {
    font-size: 16px !important;
}

.vc-about-delivery-note p {
    font-size: 14px !important;
    line-height: 1.7 !important;
}


/* WHY CHOOSE */

.vc-about-why-card h3 {
    font-size: 20px !important;
}

.vc-about-why-card p {
    font-size: 15px !important;
    line-height: 1.75 !important;
}


/* CTA */

.vc-about-cta-content > span {
    font-size: 15px !important;
}

.vc-about-cta-content h2 {
    font-size: clamp(34px, 4vw, 46px) !important;
}

.vc-about-cta-content p {
    font-size: 16px !important;
    line-height: 1.75 !important;
}

.vc-about-cta-tagline {
    font-size: 18px !important;
}

.vc-about-cta-actions a {
    font-size: 14px !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .vc-about-hero h1 {
        font-size: 48px !important;
    }

    .vc-about-hero-content > p {
        font-size: 17px !important;
    }

    .vc-about-content-block p,
    .vc-about-quality-content > p,
    .vc-about-delivery-content > p,
    .vc-about-network p,
    .vc-about-vision-card p,
    .vc-about-heading-center p {
        font-size: 16px !important;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .vc-about-hero h1 {
        font-size: 38px !important;
        line-height: 1.12 !important;
    }

    .vc-about-hero-content > p {
        font-size: 16px !important;
    }

    .vc-about-section-label {
        font-size: 13px !important;
    }

    .vc-about-content-block h2,
    .vc-about-quality-content h2,
    .vc-about-delivery-content h2,
    .vc-about-network h2,
    .vc-about-vision-card h2,
    .vc-about-mission-card h2,
    .vc-about-heading-center h2 {
        font-size: 30px !important;
    }

    .vc-about-content-block p,
    .vc-about-quality-content > p,
    .vc-about-delivery-content > p,
    .vc-about-network p,
    .vc-about-vision-card p,
    .vc-about-heading-center p {
        font-size: 15px !important;
        line-height: 1.75 !important;
    }

    .vc-about-business-card strong {
        font-size: 14px !important;
    }

    .vc-about-mission-list > div,
    .vc-about-quality-list span {
        font-size: 14px !important;
    }

    .vc-about-why-card h3 {
        font-size: 19px !important;
    }

    .vc-about-why-card p {
        font-size: 14px !important;
    }

    .vc-about-cta-content h2 {
        font-size: 30px !important;
    }

    .vc-about-cta-content p {
        font-size: 15px !important;
    }

}

/* =========================================================
   VEGGIICART TERMS & CONDITIONS PAGE
========================================================= */

.vc-terms-page,
.vc-terms-page * {
    box-sizing: border-box;
}

.vc-terms-page {
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: "Inter", sans-serif;
    color: #263b2c;
    background: #f8fbf7;
}

.vc-terms-container {
    width: min(1240px, calc(100% - 40px));
    margin: 0 auto;
}


/* =========================================================
   HERO
========================================================= */

.vc-terms-hero {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 58px 0;
    background:
        radial-gradient(
            circle at 88% 10%,
            rgba(92, 178, 68, .18),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #edf8e9 0%,
            #fbfef9 55%,
            #eef8ea 100%
        );
}

.vc-terms-hero::before {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    left: -170px;
    bottom: -210px;
    background: rgba(53, 141, 61, .06);
}

.vc-terms-hero-inner {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

.vc-terms-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 8px 14px;
    border-radius: 40px;
    background: #def0da;
    color: #2e8136;
    font-size: 15px;
    font-weight: 700;
}

.vc-terms-hero h1 {
    margin: 0;
    color: #17371f;
    font-size: clamp(40px, 5vw, 58px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -1.8px;
}

.vc-terms-hero h1 span {
    color: #3a9342;
}

.vc-terms-hero p {
    max-width: 700px;
    margin: 13px 0 0;
    color: #68766b;
    font-size: 17px;
    line-height: 1.75;
}

.vc-terms-updated {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 17px;
    color: #4c6651;
    font-size: 14px;
    font-weight: 600;
}

.vc-terms-hero-icon {
    width: 130px;
    height: 130px;
    flex: 0 0 130px;
    display: grid;
    place-items: center;
    border-radius: 30px;
    background:
        linear-gradient(
            145deg,
            #3f9a46,
            #277a2f
        );
    color: #fff;
    font-size: 48px;
    box-shadow: 0 20px 45px rgba(47, 130, 55, .22);
}


/* =========================================================
   MAIN
========================================================= */

.vc-terms-main {
    width: 100%;
    padding: 45px 0 75px;
}

.vc-terms-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}


/* =========================================================
   SIDEBAR
========================================================= */

.vc-terms-sidebar {
    position: sticky;
    top: 110px;
}

.vc-terms-sidebar-box {
    padding: 23px;
    border: 1px solid #dfe8de;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(33, 74, 38, .055);
}

.vc-terms-sidebar-label {
    color: #398f40;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .8px;
}

.vc-terms-sidebar h3 {
    margin: 5px 0 17px;
    color: #243c2a;
    font-size: 20px;
}

.vc-terms-nav {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.vc-terms-nav a {
    padding: 9px 11px;
    border-radius: 8px;
    color: #657269;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: .25s ease;
}

.vc-terms-nav a:hover,
.vc-terms-nav a.active {
    background: #ebf6e8;
    color: #34883b;
}

.vc-terms-help {
    display: flex;
    gap: 9px;
    margin-top: 20px;
    padding: 14px;
    border-radius: 12px;
    background:
        linear-gradient(
            135deg,
            #173f20,
            #285c2f
        );
}

.vc-terms-help > i {
    width: 33px;
    height: 33px;
    flex: 0 0 33px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(255,255,255,.1);
    color: #d0eb9e;
}

.vc-terms-help strong {
    color: #fff;
    font-size: 13px;
}

.vc-terms-help p {
    margin: 4px 0 7px;
    color: rgba(255,255,255,.7);
    font-size: 11px;
    line-height: 1.6;
}

.vc-terms-help a {
    color: #d2ed9e;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
}


/* =========================================================
   CONTENT
========================================================= */

.vc-terms-content {
    min-width: 0;
}

.vc-terms-block {
    position: relative;
    margin-bottom: 18px;
    padding: 28px;
    border: 1px solid #e0e8df;
    border-radius: 18px;
    background: #fff;
    scroll-margin-top: 120px;
}

.vc-terms-section-number {
    position: absolute;
    top: 20px;
    right: 24px;
    color: #d7e7d4;
    font-size: 28px;
    font-weight: 800;
}

.vc-terms-block h2 {
    max-width: calc(100% - 65px);
    margin: 0 0 13px;
    color: #1f3826;
    font-size: 27px;
    line-height: 1.3;
    font-weight: 750;
}

.vc-terms-block p {
    margin: 0 0 13px;
    color: #67746a;
    font-size: 15px;
    line-height: 1.82;
}

.vc-terms-block p:last-child {
    margin-bottom: 0;
}


/* LISTS */

.vc-terms-block ul {
    margin: 12px 0 17px;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px 18px;
}

.vc-terms-block li {
    position: relative;
    padding-left: 25px;
    color: #55655a;
    font-size: 14px;
    line-height: 1.6;
}

.vc-terms-block li::before {
    content: "\f00c";
    position: absolute;
    top: 2px;
    left: 0;
    width: 17px;
    height: 17px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e5f3e2;
    color: #378d3f;
    font-family: "Font Awesome 6 Free";
    font-size: 8px;
    font-weight: 900;
}


/* ALERT */

.vc-terms-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 11px;
    background: #fff7dd;
    border: 1px solid #f0e1ad;
}

.vc-terms-alert i {
    margin-top: 4px;
    color: #b17b06;
}

.vc-terms-alert p {
    margin: 0;
    color: #6c5b32;
    font-size: 14px;
}


/* PLACEHOLDER */

.vc-terms-placeholder {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 13px 15px;
    border-radius: 10px;
    background: #f0f7ee;
    color: #4d6352;
    font-size: 14px;
}

.vc-terms-placeholder i {
    color: #378d3f;
}


/* =========================================================
   CONTACT CARD
========================================================= */

.vc-terms-contact-card {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 18px 0;
}

.vc-terms-contact-card > div {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px;
    border: 1px solid #e2e9e1;
    border-radius: 11px;
    background: #fafcfa;
}

.vc-terms-contact-card > div > span {
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #e8f5e5;
    color: #378c3f;
}

.vc-terms-contact-card p {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.vc-terms-contact-card small {
    color: #8a958d;
    font-size: 11px;
}

.vc-terms-contact-card strong {
    margin-top: 2px;
    color: #3b4d40;
    font-size: 13px;
}


/* =========================================================
   ACCEPTANCE
========================================================= */

.vc-terms-acceptance {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 25px;
    border-radius: 18px;
    background:
        linear-gradient(
            135deg,
            #163f20,
            #285f30
        );
    color: #fff;
}

.vc-terms-acceptance > span {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255,255,255,.1);
    color: #d0eb9e;
    font-size: 20px;
}

.vc-terms-acceptance h3 {
    margin: 0 0 5px;
    color: #fff;
    font-size: 20px;
}

.vc-terms-acceptance p {
    margin: 0;
    color: rgba(255,255,255,.76);
    font-size: 14px;
    line-height: 1.75;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .vc-terms-layout {
        grid-template-columns: 1fr;
    }

    .vc-terms-sidebar {
        position: static;
    }

    .vc-terms-sidebar-box {
        padding: 18px;
    }

    .vc-terms-nav {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 5px;
        scrollbar-width: thin;
    }

    .vc-terms-nav a {
        white-space: nowrap;
    }

    .vc-terms-help {
        display: none;
    }

}


@media (max-width: 650px) {

    .vc-terms-container {
        width: min(100% - 26px, 1240px);
    }

    .vc-terms-hero {
        padding: 40px 0;
    }

    .vc-terms-hero-inner {
        align-items: flex-start;
    }

    .vc-terms-hero-icon {
        display: none;
    }

    .vc-terms-hero h1 {
        font-size: 37px;
    }

    .vc-terms-hero p {
        font-size: 15px;
    }

    .vc-terms-main {
        padding: 25px 0 50px;
    }

    .vc-terms-block {
        padding: 22px 17px;
        border-radius: 14px;
    }

    .vc-terms-section-number {
        top: 16px;
        right: 16px;
        font-size: 22px;
    }

    .vc-terms-block h2 {
        font-size: 22px;
    }

    .vc-terms-block p {
        font-size: 14px;
        line-height: 1.75;
    }

    .vc-terms-block ul {
        grid-template-columns: 1fr;
    }

    .vc-terms-block li {
        font-size: 13px;
    }

    .vc-terms-contact-card {
        grid-template-columns: 1fr;
    }

    .vc-terms-acceptance {
        padding: 20px;
    }

}

/* =========================================================
   VEGGIICART PRIVACY POLICY
========================================================= */

.vc-privacy-page,
.vc-privacy-page * {
    box-sizing: border-box;
}

.vc-privacy-page {
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: "Inter", sans-serif;
    background: #f8fbf7;
    color: #253a2b;
}

.vc-privacy-container {
    width: min(1240px, calc(100% - 40px));
    margin: 0 auto;
}


/* =========================================================
   HERO
========================================================= */

.vc-privacy-hero {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 60px 0;
    background:
        radial-gradient(
            circle at 88% 10%,
            rgba(95, 183, 70, .18),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #edf8e9,
            #fbfef9 55%,
            #eef8ea
        );
}

.vc-privacy-hero-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.vc-privacy-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 8px 14px;
    border-radius: 40px;
    background: #dff1da;
    color: #2f8337;
    font-size: 15px;
    font-weight: 700;
}

.vc-privacy-hero h1 {
    margin: 0;
    color: #17371f;
    font-size: clamp(42px, 5vw, 58px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -1.8px;
}

.vc-privacy-hero h1 span {
    color: #3a9342;
}

.vc-privacy-hero p {
    max-width: 720px;
    margin: 13px 0 0;
    color: #68766b;
    font-size: 17px;
    line-height: 1.75;
}

.vc-privacy-updated {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 16px;
    color: #4e6753;
    font-size: 14px;
    font-weight: 600;
}

.vc-privacy-hero-icon {
    width: 130px;
    height: 130px;
    flex: 0 0 130px;
    display: grid;
    place-items: center;
    border-radius: 30px;
    background:
        linear-gradient(
            145deg,
            #43a04a,
            #26792e
        );
    color: #fff;
    font-size: 46px;
    box-shadow: 0 20px 45px rgba(47,130,55,.22);
}


/* =========================================================
   MAIN
========================================================= */

.vc-privacy-main {
    width: 100%;
    padding: 45px 0 75px;
}

.vc-privacy-layout {
    display: grid;
    grid-template-columns: 285px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}


/* =========================================================
   SIDEBAR
========================================================= */

.vc-privacy-sidebar {
    position: sticky;
    top: 110px;
}

.vc-privacy-sidebar-box {
    padding: 23px;
    border: 1px solid #dfe8de;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(34,75,39,.055);
}

.vc-privacy-sidebar-label {
    color: #398f40;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .8px;
}

.vc-privacy-sidebar h3 {
    margin: 5px 0 17px;
    color: #263d2c;
    font-size: 20px;
}

.vc-privacy-nav {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.vc-privacy-nav a {
    padding: 9px 11px;
    border-radius: 8px;
    color: #657269;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: .25s ease;
}

.vc-privacy-nav a:hover,
.vc-privacy-nav a.active {
    background: #ebf6e8;
    color: #34883b;
}

.vc-privacy-side-help {
    display: flex;
    gap: 9px;
    margin-top: 20px;
    padding: 14px;
    border-radius: 12px;
    background:
        linear-gradient(
            135deg,
            #173f20,
            #285c2f
        );
}

.vc-privacy-side-help > i {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(255,255,255,.1);
    color: #d0eb9e;
}

.vc-privacy-side-help strong {
    color: #fff;
    font-size: 13px;
}

.vc-privacy-side-help p {
    margin: 4px 0 7px;
    color: rgba(255,255,255,.7);
    font-size: 11px;
    line-height: 1.6;
}

.vc-privacy-side-help a {
    color: #d2ed9e;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
}


/* =========================================================
   CONTENT BLOCK
========================================================= */

.vc-privacy-content {
    min-width: 0;
}

.vc-privacy-block {
    position: relative;
    margin-bottom: 18px;
    padding: 28px;
    border: 1px solid #e0e8df;
    border-radius: 18px;
    background: #fff;
    scroll-margin-top: 120px;
}

.vc-privacy-number {
    position: absolute;
    top: 20px;
    right: 24px;
    color: #d8e7d5;
    font-size: 28px;
    font-weight: 800;
}

.vc-privacy-block > h2 {
    max-width: calc(100% - 70px);
    margin: 0 0 13px;
    color: #1f3826;
    font-size: 27px;
    line-height: 1.3;
}

.vc-privacy-block > p {
    margin: 0 0 13px;
    color: #67746a;
    font-size: 15px;
    line-height: 1.82;
}

.vc-privacy-block > p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   SUBSECTIONS
========================================================= */

.vc-privacy-subsection {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid #e5ebe4;
    border-radius: 13px;
    background: #fafcfa;
}

.vc-privacy-subsection h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    color: #304734;
    font-size: 18px;
}

.vc-privacy-subsection h3 i {
    color: #378d3f;
}

.vc-privacy-subsection p {
    margin: 0 0 12px;
    color: #6d796f;
    font-size: 14px;
    line-height: 1.75;
}


/* =========================================================
   LISTS
========================================================= */

.vc-privacy-block ul,
.vc-privacy-subsection ul {
    margin: 12px 0 17px;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px 18px;
}

.vc-privacy-block li,
.vc-privacy-subsection li {
    position: relative;
    padding-left: 25px;
    color: #55655a;
    font-size: 14px;
    line-height: 1.6;
}

.vc-privacy-block li::before,
.vc-privacy-subsection li::before {
    content: "\f00c";
    position: absolute;
    top: 2px;
    left: 0;
    width: 17px;
    height: 17px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e5f3e2;
    color: #378d3f;
    font-family: "Font Awesome 6 Free";
    font-size: 8px;
    font-weight: 900;
}


/* =========================================================
   INFO / WARNING
========================================================= */

.vc-privacy-info-box,
.vc-privacy-warning {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: 16px;
    padding: 15px;
    border-radius: 11px;
}

.vc-privacy-info-box {
    border: 1px solid #cee3cb;
    background: #eff8ed;
}

.vc-privacy-warning {
    border: 1px solid #efdeb1;
    background: #fff8e2;
}

.vc-privacy-info-box > i {
    margin-top: 4px;
    color: #358c3d;
}

.vc-privacy-warning > i {
    margin-top: 4px;
    color: #a97808;
}

.vc-privacy-info-box p,
.vc-privacy-warning p {
    margin: 0;
    color: #526358;
    font-size: 14px;
    line-height: 1.7;
}

.vc-privacy-warning strong {
    display: block;
    margin-bottom: 3px;
    color: #63511d;
    font-size: 14px;
}


/* =========================================================
   CONTACT
========================================================= */

.vc-privacy-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 18px 0;
}

.vc-privacy-contact-grid > div {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px;
    border: 1px solid #e2e9e1;
    border-radius: 11px;
    background: #fafcfa;
}

.vc-privacy-contact-wide {
    grid-column: 1 / -1;
}

.vc-privacy-contact-grid > div > span {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #e8f5e5;
    color: #378c3f;
}

.vc-privacy-contact-grid small {
    display: block;
    color: #89948c;
    font-size: 11px;
}

.vc-privacy-contact-grid strong {
    display: block;
    margin-top: 2px;
    color: #3c4f41;
    font-size: 13px;
    line-height: 1.5;
}


/* =========================================================
   FINAL MESSAGE
========================================================= */

.vc-privacy-final {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 26px;
    border-radius: 18px;
    background:
        linear-gradient(
            135deg,
            #153f1f,
            #285f30
        );
}

.vc-privacy-final > span {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255,255,255,.1);
    color: #d1eda0;
    font-size: 20px;
}

.vc-privacy-final h3 {
    margin: 0 0 6px;
    color: #fff;
    font-size: 21px;
}

.vc-privacy-final p {
    margin: 0 0 8px;
    color: rgba(255,255,255,.75);
    font-size: 14px;
    line-height: 1.75;
}

.vc-privacy-final strong {
    color: #d3edaa;
    font-size: 14px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .vc-privacy-layout {
        grid-template-columns: 1fr;
    }

    .vc-privacy-sidebar {
        position: static;
    }

    .vc-privacy-nav {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 5px;
    }

    .vc-privacy-nav a {
        white-space: nowrap;
    }

    .vc-privacy-side-help {
        display: none;
    }

}


@media (max-width: 650px) {

    .vc-privacy-container {
        width: min(100% - 26px, 1240px);
    }

    .vc-privacy-hero {
        padding: 40px 0;
    }

    .vc-privacy-hero-icon {
        display: none;
    }

    .vc-privacy-hero h1 {
        font-size: 38px;
    }

    .vc-privacy-hero p {
        font-size: 15px;
    }

    .vc-privacy-main {
        padding: 25px 0 50px;
    }

    .vc-privacy-block {
        padding: 22px 17px;
        border-radius: 14px;
    }

    .vc-privacy-number {
        top: 16px;
        right: 16px;
        font-size: 22px;
    }

    .vc-privacy-block > h2 {
        font-size: 22px;
    }

    .vc-privacy-block > p,
    .vc-privacy-subsection p {
        font-size: 14px;
        line-height: 1.75;
    }

    .vc-privacy-subsection {
        padding: 14px;
    }

    .vc-privacy-subsection h3 {
        font-size: 17px;
    }

    .vc-privacy-block ul,
    .vc-privacy-subsection ul {
        grid-template-columns: 1fr;
    }

    .vc-privacy-block li,
    .vc-privacy-subsection li {
        font-size: 13px;
    }

    .vc-privacy-contact-grid {
        grid-template-columns: 1fr;
    }

    .vc-privacy-contact-wide {
        grid-column: auto;
    }

    .vc-privacy-final {
        padding: 20px;
    }

}

/* =========================================================
   VEGGIICART SHIPPING / REFUND POLICY
========================================================= */

.vg-policy-page,
.vg-policy-page * {
    box-sizing: border-box;
}

.vg-policy-page {
    width: 100%;
    margin: 0;
    font-family: "Inter", sans-serif;
    background: #f7faf6;
    color: #24362a;
}

.vg-policy-container {
    width: 100%;
    max-width: 1280px;
    margin: auto;
    padding-left: 30px;
    padding-right: 30px;
}


/* ================= HERO ================= */

.vg-policy-hero {
    width: 100%;
    position: relative;
    overflow: hidden;
    padding: 58px 0;
    background:
        radial-gradient(circle at 90% 10%,
        rgba(119, 187, 73, .22), transparent 32%),
        linear-gradient(135deg, #eef8e9, #fbfdf9 55%, #eaf6e5);
}

.vg-policy-hero::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    right: -130px;
    bottom: -190px;
    border-radius: 50%;
    background: rgba(48, 135, 56, .07);
}

.vg-policy-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px;
    gap: 50px;
    align-items: center;
}

.vg-policy-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    margin-bottom: 13px;
    border-radius: 40px;
    background: #dcefd7;
    color: #2f8137;
    font-size: 15px;
    font-weight: 700;
}

.vg-policy-hero h1 {
    max-width: 850px;
    margin: 0;
    color: #183a21;
    font-size: clamp(40px, 5vw, 60px);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -2px;
}

.vg-policy-hero h1 span {
    display: block;
    color: #3c9444;
}

.vg-policy-hero p {
    max-width: 780px;
    margin: 16px 0 0;
    color: #65736a;
    font-size: 17px;
    line-height: 1.8;
}

.vg-policy-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 22px;
    margin-top: 20px;
}

.vg-policy-meta span {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #506356;
    font-size: 14px;
    font-weight: 600;
}

.vg-policy-meta i {
    color: #398e41;
}


/* HERO ART */

.vg-policy-hero-art {
    position: relative;
    min-height: 180px;
}

.vg-policy-big-icon {
    width: 145px;
    height: 145px;
    margin-left: auto;
    display: grid;
    place-items: center;
    border-radius: 32px;
    color: #fff;
    font-size: 52px;
    background: linear-gradient(145deg, #47a24e, #23752c);
    box-shadow: 0 22px 45px rgba(37, 118, 45, .23);
}

.vg-policy-mini-card {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 15px 35px rgba(36, 71, 40, .12);
}

.vg-policy-mini-card > i {
    color: #3a9142;
    font-size: 22px;
}

.vg-policy-mini-card small,
.vg-policy-mini-card strong {
    display: block;
}

.vg-policy-mini-card small {
    color: #849087;
    font-size: 11px;
}

.vg-policy-mini-card strong {
    color: #304535;
    font-size: 13px;
}


/* ================= QUICK NAV ================= */

.vg-policy-quick {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #e2e9e0;
    box-shadow: 0 5px 20px rgba(34, 69, 38, .04);
}

.vg-policy-quick-scroll {
    display: flex;
    align-items: center;
    gap: 7px;
    overflow-x: auto;
    padding-top: 12px;
    padding-bottom: 12px;
    scrollbar-width: none;
}

.vg-policy-quick-scroll::-webkit-scrollbar {
    display: none;
}

.vg-policy-quick a {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: 30px;
    background: #f2f7f0;
    color: #52645a;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: .25s;
}

.vg-policy-quick a:hover {
    color: #fff;
    background: #358b3d;
}


/* ================= LAYOUT ================= */

.vg-policy-content-section {
    width: 100%;
    padding: 42px 0 75px;
}

.vg-policy-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 27px;
    align-items: start;
}


/* ================= SIDEBAR ================= */

.vg-policy-sidebar {
    position: sticky;
    top: 110px;
}

.vg-policy-sidebar-card {
    padding: 23px;
    border: 1px solid #dfe8dd;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 35px rgba(39, 75, 43, .055);
}

.vg-policy-sidebar-card > span {
    color: #3a9142;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
}

.vg-policy-sidebar-card h3 {
    margin: 4px 0 15px;
    color: #243d2a;
    font-size: 21px;
}

.vg-policy-sidebar nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vg-policy-sidebar nav a {
    padding: 9px 11px;
    border-radius: 8px;
    color: #657169;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: .2s;
}

.vg-policy-sidebar nav a:hover,
.vg-policy-sidebar nav a.active {
    background: #eaf5e7;
    color: #33873b;
}

.vg-policy-sidebar-help {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    padding: 15px;
    border-radius: 13px;
    background: linear-gradient(135deg, #173f20, #285e30);
}

.vg-policy-sidebar-help > i {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(255,255,255,.1);
    color: #d5efaa;
}

.vg-policy-sidebar-help strong {
    color: #fff;
    font-size: 13px;
}

.vg-policy-sidebar-help p {
    margin: 3px 0 6px;
    color: rgba(255,255,255,.7);
    font-size: 11px;
    line-height: 1.55;
}

.vg-policy-sidebar-help a {
    color: #d4eea7;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}


/* ================= POLICY CARDS ================= */

.vg-policy-card {
    position: relative;
    margin-bottom: 18px;
    padding: 28px;
    scroll-margin-top: 120px;
    border: 1px solid #e0e8de;
    border-radius: 18px;
    background: #fff;
}

.vg-policy-number {
    position: absolute;
    right: 23px;
    top: 19px;
    color: #dce9d9;
    font-size: 29px;
    font-weight: 800;
}

.vg-policy-heading {
    display: flex;
    align-items: center;
    gap: 13px;
    padding-right: 60px;
    margin-bottom: 16px;
}

.vg-policy-heading-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #e9f5e6;
    color: #358c3d;
    font-size: 18px;
}

.vg-policy-heading span {
    display: block;
    margin-bottom: 2px;
    color: #429149;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .8px;
}

.vg-policy-heading h2 {
    margin: 0;
    color: #213b27;
    font-size: 27px;
    line-height: 1.25;
}

.vg-policy-card > p {
    margin: 0 0 14px;
    color: #657269;
    font-size: 15px;
    line-height: 1.82;
}

.vg-policy-card > h3 {
    margin: 19px 0 11px;
    color: #344a39;
    font-size: 16px;
}


/* ================= LISTS ================= */

.vg-policy-grid-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 8px 12px;
    margin: 12px 0 18px;
}

.vg-policy-grid-list span {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 41px;
    padding: 9px 12px;
    border-radius: 9px;
    background: #f6faf5;
    color: #536258;
    font-size: 13px;
    line-height: 1.5;
}

.vg-policy-grid-list span::before {
    content: "?";
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e0f0dd;
    color: #358a3c;
    font-size: 10px;
    font-weight: 800;
}

.vg-policy-grid-list span > i {
    display: none;
}

.vg-policy-red-list span::before {
    content: "?";
    background: #fff0ed;
    color: #c95642;
    font-size: 15px;
}


/* ================= SUB BOX ================= */

.vg-policy-subbox {
    margin-top: 15px;
    padding: 18px;
    border: 1px solid #e3ebe1;
    border-radius: 13px;
    background: #fbfdfb;
}

.vg-policy-subbox h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    color: #304a36;
    font-size: 17px;
}

.vg-policy-subbox h3 i {
    color: #378d3f;
}

.vg-policy-subbox > p {
    margin: 0 0 10px;
    color: #68756c;
    font-size: 14px;
    line-height: 1.75;
}


/* ================= NOTICE ================= */

.vg-policy-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    padding: 14px 15px;
    border: 1px solid #d4e6d0;
    border-radius: 10px;
    background: #eff8ed;
}

.vg-policy-notice > i {
    margin-top: 4px;
    color: #378d3f;
}

.vg-policy-notice p {
    margin: 0;
    color: #526358;
    font-size: 13px;
    line-height: 1.65;
}


/* ================= FEATURES ================= */

.vg-policy-feature-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0;
}

.vg-policy-feature-row span {
    padding: 8px 13px;
    border: 1px solid #dce8d9;
    border-radius: 30px;
    background: #f5faf3;
    color: #47604c;
    font-size: 13px;
    font-weight: 600;
}


/* ================= CANCELLATION STATUS ================= */

.vg-policy-status-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 12px;
    margin: 18px 0;
}

.vg-policy-status-grid > div {
    display: flex;
    gap: 11px;
    padding: 16px;
    border-radius: 12px;
}

.vg-policy-status-grid .allowed {
    background: #edf8eb;
    border: 1px solid #d4e8d0;
}

.vg-policy-status-grid .restricted {
    background: #fff4f0;
    border: 1px solid #f1d9d2;
}

.vg-policy-status-grid i {
    margin-top: 3px;
    font-size: 19px;
}

.vg-policy-status-grid .allowed i {
    color: #378c3f;
}

.vg-policy-status-grid .restricted i {
    color: #c85d48;
}

.vg-policy-status-grid strong {
    display: block;
    margin-bottom: 3px;
    color: #34483a;
    font-size: 14px;
}

.vg-policy-status-grid p {
    margin: 0;
    color: #68746c;
    font-size: 12px;
    line-height: 1.6;
}


/* ================= 6 HOUR ALERT ================= */

.vg-policy-time-alert {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 19px 0;
    padding: 19px;
    border-radius: 14px;
    background: linear-gradient(135deg, #173f20, #286231);
}

.vg-policy-time-icon {
    width: 55px;
    height: 55px;
    flex: 0 0 55px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: rgba(255,255,255,.1);
    color: #d5efa8;
    font-size: 23px;
}

.vg-policy-time-alert small {
    display: block;
    color: #bcd69f;
    font-size: 11px;
    font-weight: 700;
}

.vg-policy-time-alert strong {
    display: block;
    margin: 2px 0;
    color: #fff;
    font-size: 21px;
}

.vg-policy-time-alert p {
    margin: 0;
    color: rgba(255,255,255,.72);
    font-size: 12px;
}


/* ================= CONTACT ================= */

.vg-policy-contact-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 10px;
    margin: 18px 0;
}

.vg-policy-contact-grid > div {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px;
    border: 1px solid #e1e9df;
    border-radius: 11px;
    background: #fafcfa;
}

.vg-policy-contact-grid .full {
    grid-column: 1 / -1;
}

.vg-policy-contact-grid > div > i {
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #e7f4e4;
    color: #378c3f;
}

.vg-policy-contact-grid small {
    display: block;
    color: #879188;
    font-size: 11px;
}

.vg-policy-contact-grid strong {
    display: block;
    color: #3d5042;
    font-size: 13px;
}

.vg-policy-order-tip {
    display: flex;
    gap: 11px;
    padding: 15px;
    border-radius: 11px;
    background: #fff8df;
    border: 1px solid #eee0ae;
}

.vg-policy-order-tip > i {
    color: #a97808;
    font-size: 20px;
}

.vg-policy-order-tip strong {
    color: #5e512b;
    font-size: 14px;
}

.vg-policy-order-tip p {
    margin: 3px 0 0;
    color: #766a48;
    font-size: 12px;
}


/* ================= COMMITMENT ================= */

.vg-policy-commitment {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 30px;
    border-radius: 20px;
    background:
        radial-gradient(circle at 90% 0,
        rgba(165,216,105,.15), transparent 30%),
        linear-gradient(135deg, #143b1d, #286331);
}

.vg-policy-commitment-icon {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(255,255,255,.1);
    color: #d5efa6;
    font-size: 24px;
}

.vg-policy-commitment span {
    color: #bdd99e;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
}

.vg-policy-commitment h2 {
    margin: 4px 0 8px;
    color: #fff;
    font-size: 27px;
    line-height: 1.3;
}

.vg-policy-commitment h2 strong {
    color: #d3ed9f;
}

.vg-policy-commitment p {
    max-width: 800px;
    margin: 0;
    color: rgba(255,255,255,.74);
    font-size: 14px;
    line-height: 1.75;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .vg-policy-layout {
        grid-template-columns: 1fr;
    }

    .vg-policy-sidebar {
        position: static;
    }

    .vg-policy-sidebar-card nav {
        flex-direction: row;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .vg-policy-sidebar-card nav a {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .vg-policy-sidebar-help {
        display: none;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .vg-policy-container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .vg-policy-hero {
        padding: 38px 0;
    }

    .vg-policy-hero-grid {
        grid-template-columns: 1fr;
    }

    .vg-policy-hero-art {
        display: none;
    }

    .vg-policy-hero h1 {
        font-size: 36px;
        letter-spacing: -1px;
    }

    .vg-policy-hero p {
        font-size: 15px;
    }

    .vg-policy-content-section {
        padding: 25px 0 50px;
    }

    .vg-policy-card {
        padding: 20px 16px;
        border-radius: 14px;
    }

    .vg-policy-number {
        right: 15px;
        top: 15px;
        font-size: 21px;
    }

    .vg-policy-heading {
        padding-right: 35px;
        align-items: flex-start;
    }

    .vg-policy-heading-icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }

    .vg-policy-heading h2 {
        font-size: 22px;
    }

    .vg-policy-card > p {
        font-size: 14px;
        line-height: 1.75;
    }

    .vg-policy-grid-list {
        grid-template-columns: 1fr;
    }

    .vg-policy-status-grid {
        grid-template-columns: 1fr;
    }

    .vg-policy-contact-grid {
        grid-template-columns: 1fr;
    }

    .vg-policy-contact-grid .full {
        grid-column: auto;
    }

    .vg-policy-time-alert {
        align-items: flex-start;
    }

    .vg-policy-time-alert strong {
        font-size: 18px;
    }

    .vg-policy-commitment {
        padding: 21px 17px;
    }

    .vg-policy-commitment h2 {
        font-size: 22px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .vg-policy-hero h1 {
        font-size: 31px;
    }

    .vg-policy-meta {
        flex-direction: column;
        gap: 7px;
    }

    .vg-policy-time-alert {
        flex-direction: column;
    }

    .vg-policy-commitment {
        flex-direction: column;
    }
}

/* Live API overlay helpers */
.vc-toast {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;
    max-width: 360px;
    padding: 12px 16px;
    border-radius: 10px;
    background: #12833B;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.vc-toast.show { opacity: 1; transform: translateY(0); }
.vc-toast.error { background: #D64545; }

.swal2-popup {
    font-family: "Inter", sans-serif;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(11, 92, 39, 0.12);
}
.swal2-title {
    color: #0B5C27;
    font-weight: 700;
}
.swal2-html-container,
.swal2-content {
    color: #5f6b66;
}
.swal2-styled.btn {
    min-width: 6rem;
    font-weight: 600;
    border-radius: 10px;
    padding: 0.5rem 1.25rem;
}
.swal2-popup .btn-primary {
    background: #12833B;
    border-color: #12833B;
    color: #fff;
}
.swal2-popup .btn-primary:hover {
    background: #0B5C27;
    border-color: #0B5C27;
}
.swal2-popup .btn-danger {
    background: #D64545;
    border-color: #D64545;
    color: #fff;
}
.swal2-popup .btn-outline-secondary {
    border: 1px solid #ced4da;
    color: #495057;
    background: #fff;
}
.swal2-toast {
    font-family: "Inter", sans-serif;
    border-radius: 12px;
}

/* Header delivery location picker (SweetAlert) */
.vc-loc-picker {
    text-align: left;
    max-height: 320px;
    overflow-y: auto;
    margin: 0 -0.25rem;
}
.vc-loc-option {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    width: 100%;
    padding: 12px 14px;
    margin: 0 0 8px;
    border: 1px solid #e6efe7;
    border-radius: 12px;
    background: #f7fbf8;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    transition: border-color .2s ease, background .2s ease;
}
.vc-loc-option:hover,
.vc-loc-option.is-active {
    border-color: #12833B;
    background: #eef8f0;
}
.vc-loc-option i {
    color: #12833B;
    margin-top: 2px;
}
.vc-loc-option strong {
    display: block;
    color: #0B5C27;
    font-size: 14px;
    margin-bottom: 2px;
}
.vc-loc-option span {
    display: block;
    color: #5f6b66;
    font-size: 12px;
    line-height: 1.4;
}
.vc-loc-option .vc-loc-default {
    display: inline-block;
    margin-top: 6px;
    font-size: 11px;
    font-weight: 700;
    font-style: normal;
    color: #12833B;
}
.vc-loc-empty {
    padding: 8px 4px 12px;
    color: #5f6b66;
    font-size: 14px;
}
.vc-loc-manage {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    color: #12833B;
    font-weight: 600;
    text-decoration: none;
}

.vc-live-empty {
    padding: 24px 8px;
    color: #5b6470;
    text-align: center;
}
.vc-live-address-picker,
.vc-live-slots,
.vc-offer-live-wrap,
.vc-live-order-box,
.vc-live-notes {
    margin-top: 16px;
}

.vc-live-order-box {
    margin: 0 0 22px;
    padding: 20px 22px;
    border: 1px solid #e2ebe1;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(34, 85, 41, .06);
}

.vc-live-order-box-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.vc-live-order-box-head span {
    display: block;
    color: #398f40;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
}

.vc-live-order-box-head h3 {
    margin: 4px 0 0;
    color: #1d3423;
    font-size: 18px;
}

.vc-live-order-status {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: #edf6eb;
    color: #2f7d36;
    font-size: 11px;
    white-space: nowrap;
}

.vc-live-order-total {
    margin: 0 0 14px;
    color: #6b776e;
    font-size: 13px;
}

.vc-live-order-box h4 {
    margin: 14px 0 8px;
    color: #243629;
    font-size: 13px;
}

.vc-live-order-list,
.vc-live-order-track {
    list-style: none;
    margin: 0;
    padding: 0;
}

.vc-live-order-list li,
.vc-live-order-track li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #eef2ee;
    color: #445248;
    font-size: 12px;
}

.vc-live-order-list li:last-child,
.vc-live-order-track li:last-child {
    border-bottom: 0;
}

.vc-live-order-track small {
    color: #8a948c;
    font-size: 11px;
}

.vc-live-order-box .vc-order-btn {
    margin-top: 14px;
}

@media (max-width: 600px) {
    .vc-live-order-box {
        padding: 16px;
    }

    .vc-live-order-box-head {
        flex-direction: column;
        align-items: flex-start;
    }
}
.vc-live-address,
.vc-live-slot {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
    border: 1px solid #e5eee8;
    border-radius: 10px;
    margin: 8px 0;
    cursor: pointer;
}
.vc-offer-live-grid,
.vc-offer-live-wrap .vc-offer-live-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin: 24px 0;
}
.vc-offer-live-card {
    border: 1px solid #e5eee8;
    border-radius: 14px;
    padding: 16px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.vc-offer-live-value {
    color: #12833B;
    font-weight: 800;
}

/* ============================================================
   LIVE CONTENT: variable-length API text + empty states
   ============================================================ */

.vcat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.vcat-card,
.vc-category-main-card,
.vc-list-product-card,
.vc-wishlist-card,
.vbest-card,
.vfresh-card,
.vsr-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
}

.vcat-content h3,
.vc-category-main-content h3,
.vc-list-content h3,
.vc-list-content h3 a,
.vc-wishlist-content h3,
.vc-wishlist-content h3 a,
.vbest-content h3,
.vfresh-content h3,
.vsr-content h3,
.vrc-viewed-content h4,
.vrc-order-content h4 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: 2.5em;
    line-height: 1.25;
}

.vc-list-content,
.vc-wishlist-content,
.vbest-content,
.vfresh-content,
.vsr-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.vc-list-cart-btn,
.vc-wishlist-cart-btn,
.vbest-price-row,
.vfresh-price-row,
.vsr-price-row {
    margin-top: auto;
}

.vc-list-category,
.vc-wishlist-category,
.vbest-category,
.vfresh-category,
.vsr-category {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 1.2em;
}

.vgh-content h1,
.vgh-content h2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-size: clamp(28px, 4vw, 58px);
}

.vc-desktop-menu {
    overflow-x: auto;
    scrollbar-width: none;
}
.vc-desktop-menu::-webkit-scrollbar {
    display: none;
}

.vc-live-empty-box {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 220px;
    padding: 32px 20px;
    border: 1px dashed #c9d8cc;
    border-radius: 18px;
    background: #f7faf6;
    text-align: center;
}
.vc-live-empty-box .vc-live-empty {
    margin: 0;
    font-size: 15px;
}
.vc-live-empty-box a {
    color: #12833B;
    font-weight: 700;
}

.vc-product-grid:empty,
.vc-wishlist-grid:empty,
.vg-saved-address-grid:empty {
    min-height: 220px;
}

.vc-product-gallery.is-single {
    grid-template-columns: minmax(0, 1fr);
}
.vc-product-gallery.is-single .vc-product-thumbnails {
    display: none;
}
.vc-product-thumbnails:empty {
    display: none;
}
.vc-product-main-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: transparent;
}
.vc-product-main-image iframe.vc-main-pdf {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    background: #eef4ee;
}
.vgh-slide > iframe.vgh-slide-pdf {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: #0b5c27;
}
.vc-pdf-fill {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 72px;
    background: #f4f7f2;
    color: #c0392b;
    font-size: 28px;
}

.vc-category-filter label span:nth-of-type(2) {
    overflow: hidden;
    text-overflow: ellipsis;
}

#vcRecentSection[hidden],
#vcRecentViewedArea[hidden],
#vcRecentMain[hidden],
#vcRecentHeading[hidden] {
    display: none !important;
}

/* Verification status ? live layout + readable type */
.vc-status-demo[hidden],
.vc-status-demo {
    display: none !important;
}
.vc-verification-page {
    overflow-x: hidden;
}
.vc-verification-container {
    width: min(1080px, calc(100% - 32px));
    max-width: 100%;
}
.vc-application-overview {
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
}
.vc-application-number-box small,
.vc-application-meta small {
    font-size: 12px;
}
.vc-application-number-box strong {
    font-size: 16px;
    word-break: break-word;
}
.vc-application-meta strong {
    font-size: 14px;
    word-break: break-word;
}
.vc-status-card {
    grid-template-columns: minmax(140px, 220px) minmax(0, 1fr);
    gap: 24px;
}
.vc-status-content h2 {
    font-size: clamp(22px, 3.4vw, 32px);
    line-height: 1.25;
    letter-spacing: -0.4px;
}
.vc-status-content > p,
.vc-review-notice p,
.vc-docs-empty {
    font-size: 15px;
    line-height: 1.6;
    color: #4d5c50;
}
.vc-status-pill,
.vc-section-heading span {
    font-size: 11px;
}
.vc-section-heading h3 {
    font-size: 20px;
}
.vc-journey {
    display: flex;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.vc-journey-step {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 0 8px;
}
.vc-journey-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 21px;
    left: calc(50% + 28px);
    width: calc(100% - 56px);
    height: 2px;
    background: #dfe6dd;
    pointer-events: none;
}
.vc-journey-step.is-done:not(:last-child)::after {
    background: #4a9a52;
}
.vc-journey-dot {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 2px solid #dfe7df;
    background: #f6f9f5;
    color: #8b968d;
    z-index: 1;
}
.vc-journey-step.is-done .vc-journey-dot {
    border-color: #3e9346;
    background: #3e9346;
    color: #fff;
}
.vc-journey-step.is-current .vc-journey-dot {
    border-color: #d9a42b;
    background: #fff6df;
    color: #b98005;
}
.vc-journey-step strong {
    display: block;
    font-size: 14px;
    line-height: 1.35;
    color: #2c3f31;
    font-weight: 700;
}
.vc-journey-step small {
    display: block;
    font-size: 13px;
    line-height: 1.4;
    color: #6d7c70;
}
.vc-doc-checklist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.vc-doc-card {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid #e3ebe2;
    border-radius: 14px;
    background: #fff;
    min-width: 0;
}
.vc-doc-card.is-missing {
    background: #f7f8f6;
    border-style: dashed;
}
.vc-doc-preview[data-preview] {
    cursor: pointer;
}
.vc-doc-preview img,
.vc-doc-lightbox-body img,
.vc-doc-lightbox-body iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
    display: block;
}
.vc-doc-preview-empty {
    color: #8aa08a;
    font-size: 22px;
}
.vc-doc-preview-empty.is-file {
    color: #c0392b;
}
.vc-doc-meta {
    min-width: 0;
}
.vc-doc-meta strong {
    display: block;
    font-size: 14px;
    color: #2c3f31;
}
.vc-doc-meta small {
    display: block;
    margin: 4px 0 8px;
    font-size: 12px;
    color: #6d7c70;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vc-doc-status.missing {
    background: #eceeea;
    color: #667066;
}
.vc-doc-view {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    width: auto;
    height: auto;
    font-size: 13px;
    border: 0;
    cursor: pointer;
}
.vc-doc-lightbox {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(16, 28, 18, 0.72);
}
.vc-doc-lightbox[hidden] {
    display: none !important;
}
.vc-doc-lightbox-body {
    width: min(920px, 100%);
    height: min(80vh, 720px);
    background: #111;
    border-radius: 12px;
    overflow: hidden;
}
.vc-doc-lightbox-close {
    position: absolute;
    top: 16px;
    right: 20px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    font-size: 24px;
    cursor: pointer;
}
.vc-document-grid {
    gap: 12px;
}
.vc-document-item {
    grid-template-columns: 44px minmax(0, 1fr) auto auto;
}
.vc-document-item strong {
    font-size: 14px;
}
.vc-document-item small {
    font-size: 12px;
}
.vc-doc-status {
    font-size: 11px;
    white-space: nowrap;
}
.vc-doc-status.rejected {
    background: #f8e0dc;
    color: #b23b32;
}
.vc-doc-view {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    color: #2e7d37;
    background: #eef6eb;
    text-decoration: none;
}
.vc-docs-empty {
    margin: 0;
    padding: 16px;
    border-radius: 12px;
    background: #f4f7f2;
}
.vc-outline-action,
.vc-primary-action {
    font-size: 14px;
    min-height: 48px;
}
.vc-status-actions {
    flex-wrap: wrap;
}

@media (max-width: 900px) {
    .vc-application-overview,
    .vc-status-card {
        grid-template-columns: 1fr !important;
    }
    .vc-application-meta {
        grid-template-columns: 1fr;
    }
    .vc-document-grid,
    .vc-doc-checklist {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .vc-verification-hero {
        padding: 28px 0 24px;
    }
    .vc-verification-hero h1 {
        font-size: 28px;
        letter-spacing: -0.6px;
    }
    .vc-journey {
        flex-direction: column;
        gap: 16px;
    }
    .vc-journey-step {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        text-align: left;
        padding: 0;
        gap: 10px 12px;
    }
    .vc-journey-step:not(:last-child)::after {
        left: 21px;
        top: 44px;
        width: 2px;
        height: 16px;
    }
    .vc-journey-step strong,
    .vc-journey-step small {
        flex: 1 1 calc(100% - 60px);
    }
    .vc-doc-card {
        grid-template-columns: 72px minmax(0, 1fr);
    }
    .vc-doc-view {
        grid-column: 1 / -1;
        justify-content: center;
    }
    .vc-status-actions,
    .vc-status-actions.vc-approved-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .vc-outline-action,
    .vc-primary-action {
        width: 100%;
    }
}

@media (max-width: 1200px) {
    .vc-category-main-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .vcat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    .vc-desktop-menu a {
        font-size: 12px;
    }
    .vc-product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .vcat-grid,
    .vc-category-main-grid,
    .vc-product-grid,
    .vc-wishlist-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .vc-product-gallery {
        grid-template-columns: 1fr;
    }
    .vc-product-thumbnails {
        flex-direction: row;
        overflow-x: auto;
    }
}

@media (max-width: 480px) {
    .vcat-grid,
    .vc-category-main-grid,
    .vc-product-grid,
    .vc-wishlist-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   UNIFIED LEGAL / POLICY PAGES
========================================================= */

.vc-legal-page,
.vc-legal-page * {
    box-sizing: border-box;
}

.vc-legal-page {
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: "Inter", sans-serif;
 color: #1E1F22;
 background:
 radial-gradient(circle at top left, rgba(54, 150, 74, 0.08), transparent 28%),
 radial-gradient(circle at bottom right, rgba(139, 195, 74, 0.08), transparent 28%),
 #f7faf6;
}

.vc-legal-container {
 width: min(1180px, calc(100% - 40px));
 margin: 0 auto;
}

.vc-legal-hero {
 padding: 52px 0 28px;
 text-align: center;
}

.vc-legal-eyebrow {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 margin-bottom: 12px;
 padding: 8px 16px;
 border-radius: 50px;
 background: rgba(18, 131, 59, 0.10);
 color: #12833B;
 font-size: 13px;
 font-weight: 700;
 letter-spacing: .4px;
 text-transform: uppercase;
}

.vc-legal-hero h1 {
 margin: 0;
 color: #1E1F22;
 font-size: clamp(32px, 4vw, 48px);
 font-weight: 800;
 line-height: 1.15;
}

.vc-legal-hero h1 span {
 color: #12833B;
}

.vc-legal-hero > .vc-legal-container > p {
 max-width: 640px;
 margin: 12px auto 0;
 color: #657268;
 font-size: 16px;
 line-height: 1.7;
}

.vc-legal-updated {
 display: inline-flex;
 align-items: center;
 gap: 7px;
 margin-top: 14px;
 color: #6b7a6e;
 font-size: 13px;
 font-weight: 600;
}

.vc-legal-main {
 padding: 10px 0 80px;
}

.vc-legal-layout {
 display: grid;
 grid-template-columns: 270px minmax(0, 1fr);
 gap: 28px;
 align-items: start;
}

.vc-legal-sidebar {
 position: sticky;
 top: 110px;
 display: flex;
 flex-direction: column;
 gap: 16px;
}

.vc-legal-sidebar-card {
 padding: 20px;
 border: 1px solid #e2ebe0;
 border-radius: 18px;
 background: #fff;
 box-shadow: 0 10px 30px rgba(36, 72, 40, 0.06);
}

.vc-legal-policies-label,
.vc-legal-toc-label {
 display: block;
 color: #12833B;
 font-size: 11px;
 font-weight: 800;
 letter-spacing: .7px;
 text-transform: uppercase;
}

.vc-legal-policies-menu h3,
.vc-legal-toc h3 {
 margin: 4px 0 14px;
 color: #1E1F22;
 font-size: 18px;
 font-weight: 800;
}

.vc-legal-policies-nav,
.vc-legal-toc-nav {
 display: flex;
 flex-direction: column;
 gap: 6px;
}

.vc-legal-policies-nav a,
.vc-legal-toc-nav a {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 10px 12px;
 border-radius: 11px;
 color: #4a5b4e;
 text-decoration: none;
 font-size: 13px;
 font-weight: 600;
 transition: .2s ease;
}

.vc-legal-policies-nav a i {
 width: 28px;
 height: 28px;
 display: grid;
 place-items: center;
 border-radius: 8px;
 background: #eaf6ea;
 color: #12833B;
 font-size: 12px;
}

.vc-legal-policies-nav a:hover,
.vc-legal-toc-nav a:hover,
.vc-legal-policies-nav a.active,
.vc-legal-toc-nav a.active {
 background: #edf7ee;
 color: #12833B;
}

.vc-legal-policies-nav a.active {
 background: #12833B;
 color: #fff;
}

.vc-legal-policies-nav a.active i {
 background: rgba(255,255,255,.18);
 color: #fff;
}

.vc-legal-content {
 max-width: 800px;
 padding: 28px 30px;
 border: 1px solid #e2ebe0;
 border-radius: 22px;
 background: #fff;
 box-shadow: 0 12px 34px rgba(36, 72, 40, 0.06);
}

.vc-legal-lead {
 margin: 0 0 28px;
 padding-bottom: 22px;
 border-bottom: 1px solid #edf1eb;
 color: #4d5f52;
 font-size: 15px;
 line-height: 1.75;
}

.vc-legal-section {
 margin: 0 0 34px;
 padding-top: 4px;
 scroll-margin-top: 120px;
}

.vc-legal-section:last-of-type {
 margin-bottom: 18px;
}

.vc-legal-section h2 {
 margin: 0 0 12px;
 color: #12833B;
 font-size: 22px;
 font-weight: 800;
 line-height: 1.3;
}

.vc-legal-section h3 {
 margin: 18px 0 8px;
 color: #1E1F22;
 font-size: 16px;
 font-weight: 750;
}

.vc-legal-section p {
 margin: 0 0 12px;
 color: #3f4f43;
 font-size: 15px;
 line-height: 1.75;
}

.vc-legal-section ul {
 margin: 0 0 14px;
 padding: 0;
 list-style: none;
}

.vc-legal-section ul li {
 position: relative;
 margin: 0 0 8px;
 padding: 0 0 0 22px;
 color: #3f4f43;
 font-size: 15px;
 line-height: 1.65;
}

.vc-legal-section ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #12833B;
}

.vc-legal-section a {
 color: #12833B;
 font-weight: 700;
 text-decoration: none;
}

.vc-legal-section a:hover {
 text-decoration: underline;
}

.vc-legal-divider {
 margin: 36px 0 28px;
 border: 0;
 border-top: 1px dashed #d5e2d4;
}

.vc-legal-part-title {
 margin: 0 0 18px;
 padding: 14px 16px;
 border-radius: 12px;
 background: #edf7ee;
 color: #12833B;
 font-size: 18px;
 font-weight: 800;
}

.vc-legal-contact-card {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 12px;
 margin-top: 18px;
 padding: 18px;
 border-radius: 16px;
 background:
 linear-gradient(145deg, #173e23, #246433);
 color: #fff;
}

.vc-legal-contact-card .vc-legal-contact-brand {
 grid-column: 1 / -1;
 margin-bottom: 2px;
}

.vc-legal-contact-card .vc-legal-contact-brand strong {
 display: block;
 font-size: 18px;
 font-weight: 800;
}

.vc-legal-contact-card .vc-legal-contact-brand span {
 color: rgba(255,255,255,.72);
 font-size: 13px;
}

.vc-legal-contact-card a {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 12px 14px;
 border-radius: 12px;
 background: rgba(255,255,255,.1);
 color: #fff;
 text-decoration: none;
 font-size: 14px;
 font-weight: 700;
}

.vc-legal-contact-card a i {
 color: #b9ff9f;
}

.vc-legal-notice {
 display: flex;
 gap: 10px;
 margin: 14px 0;
 padding: 12px 14px;
 border-radius: 12px;
 background: #f4faf3;
 border: 1px solid #dce9da;
 color: #3f5444;
 font-size: 14px;
 line-height: 1.6;
}

.vc-legal-notice i {
 margin-top: 2px;
 color: #12833B;
}

.vc-legal-acceptance {
 margin-top: 24px;
 padding: 18px 20px;
 border-radius: 14px;
 background: #edf7ee;
 color: #1f4a28;
 font-size: 14px;
 line-height: 1.65;
 font-weight: 600;
}

@media (max-width: 980px) {
 .vc-legal-layout {
 grid-template-columns: 1fr;
 }
 .vc-legal-sidebar {
 position: static;
 }
}

@media (max-width: 640px) {
 .vc-legal-container {
 width: calc(100% - 24px);
 }
 .vc-legal-content {
 padding: 20px 16px;
 border-radius: 16px;
 }
 .vc-legal-contact-card {
 grid-template-columns: 1fr;
 }
 .vc-legal-section h2 {
 font-size: 19px;
 }
}

/* Checkout: live address / slot selection + COD-only copy */
.vc-checkout-hint {
    margin: 0 0 1rem;
    font-size: 0.92rem;
    color: #5b6470;
    line-height: 1.5;
}
.vc-checkout-hint a {
    color: #12833B;
    font-weight: 600;
    text-decoration: none;
}
.vc-checkout-hint a:hover {
    text-decoration: underline;
}
.vc-checkout-mount {
    margin-top: 0.15rem;
}

/* Delivery mode toggle */
.vc-delivery-mode {
    margin-bottom: 1.15rem;
}
.vc-mode-label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6a7a6c;
    margin-bottom: 0.55rem;
}
.vc-mode-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
}
.vc-mode-option {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    width: 100%;
    margin: 0;
    padding: 0.9rem 0.95rem;
    border: 1.5px solid #d7e3d8;
    border-radius: 14px;
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    font: inherit;
    color: inherit;
    appearance: none;
    -webkit-appearance: none;
}
.vc-mode-option:hover {
    border-color: #9fc4a3;
    background: #fbfefb;
}
.vc-mode-option.is-active {
    border-color: #2f7a3c;
    background: #f1f8ef;
    box-shadow: 0 0 0 3px rgba(47, 122, 60, 0.12);
}
.vc-mode-radio {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex-shrink: 0;
    border: 2px solid #9bb59a;
    border-radius: 50%;
    position: relative;
    background: #fff;
}
.vc-mode-option.is-active .vc-mode-radio {
    border-color: #2f7a3c;
}
.vc-mode-option.is-active .vc-mode-radio::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #2f7a3c;
}
.vc-mode-copy {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}
.vc-mode-copy strong {
    font-size: 0.95rem;
    color: #1f3d24;
    font-weight: 700;
}
.vc-mode-copy small {
    font-size: 0.8rem;
    color: #66756a;
    line-height: 1.35;
}

/* Address picker */
.vc-live-address-picker {
    margin-top: 0.25rem;
}
.vc-addr-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
}
.vc-addr-picker-head strong {
    font-size: 0.95rem;
    color: #1f3d24;
}
.vc-addr-picker-head a {
    font-size: 0.85rem;
    font-weight: 600;
    color: #12833B;
    text-decoration: none;
}
.vc-addr-picker-head a:hover {
    text-decoration: underline;
}
.vc-addr-choice-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.vc-addr-choice {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 0.95rem;
    border: 1.5px solid #dce6dd;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.vc-addr-choice:hover {
    border-color: #9fc4a3;
}
.vc-addr-choice.is-selected {
    border-color: #2f7a3c;
    background: #f1f8ef;
    box-shadow: 0 0 0 3px rgba(47, 122, 60, 0.1);
}
.vc-addr-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.vc-addr-choice-mark {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex-shrink: 0;
    border: 2px solid #9bb59a;
    border-radius: 50%;
    background: #fff;
    position: relative;
}
.vc-addr-choice input[type="checkbox"] + .vc-addr-choice-mark {
    border-radius: 5px;
}
.vc-addr-choice.is-selected .vc-addr-choice-mark {
    border-color: #2f7a3c;
    background: #2f7a3c;
}
.vc-addr-choice.is-selected .vc-addr-choice-mark::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 4px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.vc-addr-choice-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.vc-addr-choice-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.55rem;
}
.vc-addr-choice-top strong {
    font-size: 0.95rem;
    color: #1f3d24;
}
.vc-addr-default {
    font-style: normal;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #2f7a3c;
    background: #e5f3e6;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
}
.vc-addr-choice-line {
    font-size: 0.86rem;
    color: #5d6b61;
    line-height: 1.4;
}
.vc-addr-warn {
    margin-top: 0.75rem;
    padding: 0.7rem 0.85rem;
    border-radius: 10px;
    background: #fff5f4;
    color: #9b2c2c;
    font-size: 0.84rem;
    line-height: 1.4;
}

/* Empty states */
.vc-checkout-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
    padding: 1.5rem 1rem;
    border: 1.5px dashed #c9dacb;
    border-radius: 16px;
    background: #f7fbf7;
}
.vc-checkout-empty-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e5f3e6;
    color: #2f7a3c;
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}
.vc-checkout-empty strong {
    color: #1f3d24;
    font-size: 1rem;
}
.vc-checkout-empty p {
    margin: 0;
    max-width: 28rem;
    color: #5d6b61;
    font-size: 0.88rem;
    line-height: 1.45;
}
.vc-checkout-empty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.55rem;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    background: #2f7a3c;
    color: #fff !important;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none !important;
}
.vc-checkout-empty-btn:hover {
    background: #256832;
}
.vc-checkout-empty-note {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.85rem 0.95rem;
    border-radius: 12px;
    background: #f4f8f4;
    color: #4a5b4e;
    font-size: 0.88rem;
    line-height: 1.45;
}
.vc-checkout-empty-note i {
    color: #2f7a3c;
    margin-top: 0.15rem;
}
.vc-checkout-empty-note p {
    margin: 0;
}

/* Slots */
.vc-live-slots {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.vc-live-slot {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 0.75rem 0.9rem;
    border: 1.5px solid #dce6dd;
    border-radius: 12px;
    margin: 0;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.vc-live-slot:hover {
    border-color: #9fc4a3;
}
.vc-live-slot.is-selected {
    border-color: #2f7a3c;
    background: #f1f8ef;
}
.vc-live-slot input {
    accent-color: #2f7a3c;
    flex-shrink: 0;
    pointer-events: auto;
}

/* Multi-address allocation */
.vc-multi-alloc {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.vc-multi-panel {
    padding: 0.9rem;
    border: 1px solid #e1ebe0;
    border-radius: 14px;
    background: #fbfefb;
}
.vc-multi-panel-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #1f3d24;
    margin-bottom: 0.35rem;
}
.vc-multi-panel-sub {
    margin: 0 0 0.75rem;
    font-size: 0.82rem;
    color: #66756a;
}
.vc-alloc-row {
    margin: 0.55rem 0 0;
    padding: 0.75rem;
    border: 1px solid #e5eee8;
    border-radius: 10px;
    background: #fff;
}
.vc-alloc-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.85rem;
    align-items: center;
    margin-bottom: 0.55rem;
}
.vc-alloc-need-wrap {
    font-size: 0.84rem;
    color: #5d6b61;
}
.vc-alloc-status {
    font-size: 0.8rem;
    font-weight: 600;
}
.vc-alloc-inputs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}
.vc-alloc-cell {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: #4a5b4e;
}
.vc-alloc-cell input {
    width: 5.5rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid #cfd8d2;
    border-radius: 8px;
    font: inherit;
}
.vc-multi-slot-row {
    margin: 0.35rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
.vc-multi-slot-label {
    min-width: 5rem;
    font-size: 0.86rem;
    font-weight: 600;
    color: #1f3d24;
}
.vc-multi-slot-select {
    min-width: 14rem;
    flex: 1;
    padding: 0.4rem 0.55rem;
    border: 1px solid #cfd8d2;
    border-radius: 8px;
    font: inherit;
    background: #fff;
}
.vc-payment-option.active {
    cursor: default;
}

@media (max-width: 640px) {
    .vc-mode-toggle {
        grid-template-columns: 1fr;
    }
}

/* Manage Address ? searchable Hyderabad pincode select */
.vg-field-note {
    font-weight: 500;
    color: #6a7a6c;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.82em;
}
.vg-pincode-select {
    position: relative;
}
.vg-pincode-trigger {
    position: relative;
}
.vg-pincode-trigger .vg-pincode-caret {
    left: auto !important;
    right: 14px;
    color: #7a8f7c;
    pointer-events: none;
}
.vg-pincode-select.is-open .vg-pincode-trigger {
    border-color: #2f7a3c;
    box-shadow: 0 0 0 3px rgba(47, 122, 60, 0.12);
}
.vg-pincode-select.is-open .vg-pincode-caret {
    transform: translateY(-50%) rotate(180deg);
}
.vg-pincode-dropdown {
    position: absolute;
    z-index: 40;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    max-height: 240px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #d7e3d8;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(35, 76, 40, 0.12);
    padding: 0.35rem;
}
.vg-pincode-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}
.vg-pincode-option:hover,
.vg-pincode-option.is-selected {
    background: #f1f8ef;
}
.vg-pincode-option strong {
    color: #1f3d24;
    font-size: 0.95rem;
}
.vg-pincode-option span {
    color: #66756a;
    font-size: 0.82rem;
}
.vg-pincode-empty {
    padding: 0.85rem 0.75rem;
    color: #6a7a6c;
    font-size: 0.88rem;
    text-align: center;
}
.vg-pincode-hint {
    margin: 0.45rem 0 0;
    font-size: 0.86rem;
    min-height: 1.2em;
}
.vg-pincode-hint.is-ok {
    color: #1a7f37;
}
.vg-pincode-hint.is-bad {
    color: #b42318;
}
.vg-input-box input[readonly] {
    background: #f5f8f5;
    color: #3d5242;
    cursor: default;
}



/* =========================================================
   FAQ / SUPPORT HELP PAGES
========================================================= */

.vc-help-toolbar {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 22px;
}

.vc-help-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid #e6efe7;
    border-radius: 14px;
    background: #fff;
}

.vc-help-search i {
    color: #12833B;
}

.vc-help-search input {
    width: 100%;
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    color: #1E1F22;
}

.vc-help-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vc-help-chip {
    border: 1px solid #e6efe7;
    background: #fff;
    color: #3d5242;
    border-radius: 999px;
    padding: 8px 14px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.vc-help-chip.is-active,
.vc-help-chip:hover {
    border-color: #12833B;
    background: #eef8f0;
    color: #0B5C27;
}

.vc-faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vc-faq-item {
    border: 1px solid #e6efe7;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}

.vc-faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    border: 0;
    background: transparent;
    text-align: left;
    font: inherit;
    font-weight: 650;
    color: #0B5C27;
    cursor: pointer;
}

.vc-faq-q i {
    color: #12833B;
    transition: transform .2s ease;
}

.vc-faq-item.is-open .vc-faq-q i {
    transform: rotate(180deg);
}

.vc-faq-a {
    display: none;
    padding: 0 18px 16px;
    color: #5f6b66;
    line-height: 1.6;
}

.vc-faq-item.is-open .vc-faq-a {
    display: block;
}

.vc-faq-cat {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    color: #12833B;
    background: #eef8f0;
    padding: 4px 8px;
    border-radius: 999px;
}

.vc-help-loading,
.vc-help-empty {
    margin: 0;
    padding: 18px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #e6efe7;
    color: #5f6b66;
}

.vc-help-cta {
    margin-top: 28px;
    padding: 22px;
    border-radius: 16px;
    background: linear-gradient(135deg, #f7fbf8, #eef8f0);
    border: 1px solid #e6efe7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.vc-help-cta h2 {
    margin: 0 0 6px;
    color: #0B5C27;
    font-size: 1.2rem;
}

.vc-help-cta p {
    margin: 0;
    color: #5f6b66;
}

.vc-help-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: 12px;
    background: #12833B;
    color: #fff !important;
    font-weight: 700;
    border: 0;
    cursor: pointer;
    text-decoration: none;
    font: inherit;
}

.vc-help-cta-btn:hover {
    background: #0B5C27;
}

.vc-support-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.vc-support-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #e6efe7;
    color: inherit;
    text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.vc-support-card:hover {
    border-color: #12833B;
    box-shadow: 0 10px 24px rgba(18, 131, 59, 0.1);
}

.vc-support-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef8f0;
    color: #12833B;
    margin-bottom: 6px;
}

.vc-support-card strong {
    color: #0B5C27;
}

.vc-support-card span:last-child {
    color: #5f6b66;
    font-size: 13px;
}

.vc-support-layout {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 18px;
}

.vc-support-panel {
    background: #fff;
    border: 1px solid #e6efe7;
    border-radius: 16px;
    padding: 20px;
}

.vc-support-panel-head h2 {
    margin: 0 0 6px;
    color: #0B5C27;
    font-size: 1.15rem;
}

.vc-support-panel-head p {
    margin: 0 0 16px;
    color: #5f6b66;
}

.vc-support-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.vc-support-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    font-weight: 650;
    color: #3d5242;
}

.vc-support-form input,
.vc-support-form select,
.vc-support-form textarea {
    width: 100%;
    border: 1px solid #e6efe7;
    border-radius: 12px;
    padding: 12px 14px;
    font: inherit;
    color: #1E1F22;
    background: #f7fbf8;
}

.vc-support-form textarea {
    resize: vertical;
    min-height: 120px;
}

.vc-support-guest {
    padding: 8px 0 4px;
}

.vc-support-guest p {
    color: #5f6b66;
    margin: 0 0 12px;
}

.vc-support-tickets {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vc-support-ticket {
    border: 1px solid #e6efe7;
    border-radius: 12px;
    padding: 12px 14px;
    background: #f7fbf8;
}

.vc-support-ticket-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    margin-bottom: 6px;
}

.vc-support-ticket-top strong {
    color: #0B5C27;
    font-size: 13px;
}

.vc-support-status {
    font-size: 11px;
    font-weight: 700;
    text-transform: capitalize;
    color: #12833B;
    background: #eef8f0;
    padding: 4px 8px;
    border-radius: 999px;
}

.vc-support-ticket p {
    margin: 0;
    color: #5f6b66;
    font-size: 13px;
    line-height: 1.45;
}

.vc-support-ticket small {
    display: block;
    margin-top: 8px;
    color: #8a968d;
    font-size: 11px;
}

@media (max-width: 900px) {
    .vc-support-grid,
    .vc-support-layout {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   SIGNUP 5-STEP WIZARD
========================================================= */
.vc-signup-wizard-wrap { max-width: 720px; }
.vc-signup-steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    margin: 0 0 16px;
}
.vc-signup-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    border: 1px solid #e6efe7;
    background: #f7fbf8;
    border-radius: 12px;
    padding: 8px 4px;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    color: #5f6b66;
    cursor: default;
}
.vc-signup-step span {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #12833B;
    border: 1px solid #b9dbbf;
    font-size: 11px;
}
.vc-signup-step.is-active {
    border-color: #12833B;
    background: #eef8f0;
    color: #0B5C27;
}
.vc-signup-step.is-active span,
.vc-signup-step.is-done span {
    background: #12833B;
    color: #fff;
    border-color: #12833B;
}
.vc-signup-progress { margin-bottom: 18px; }
.vc-signup-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 18px;
}
.vc-signup-actions .vc-login-submit { flex: 1; }
.vc-signup-actions .vc-login-register { width: auto; min-width: 120px; margin: 0; }
/* display:flex on .vc-login-register overrides native [hidden] ? force hide */
.vc-signup-actions .vc-login-register[hidden],
#vcSignupPrev[hidden] {
    display: none !important;
}
.vc-signup-login-divider {
    margin: 22px 0 14px;
}
.vc-signup-login-link {
    width: 100%;
    margin: 0;
    color: #31753d;
}
.vc-signup-login-link:hover {
    color: #245c2e;
}
.vc-signup-wizard-page .vc-form-step { display: none; }
.vc-signup-wizard-page .vc-form-step.active { display: block; }
.vc-signup-wizard-page .vc-field-error { color: #b42318; font-size: 12px; margin: 8px 0 0; }
.vc-signup-wizard-page .vc-review-card {
    margin-bottom: 12px;
    padding: 14px 16px;
    border: 1px solid #e6efe7;
    border-radius: 14px;
    background: #fff;
}
.vc-signup-wizard-page .vc-review-card h3 { margin: 0 0 8px; color: #0B5C27; font-size: 14px; }
.vc-signup-wizard-page .vc-review-card p { margin: 4px 0; color: #5f6b66; font-size: 13px; }
@media (max-width: 700px) {
    .vc-signup-step { font-size: 0; }
    .vc-signup-step span { font-size: 11px; }
}

/* ============================================================
   GLOBAL TYPOGRAPHY LOCK ? match homepage Inter system
============================================================ */
html body,
html body *:not(i):not(.fa):not([class^="fa-"]):not([class*=" fa-"]) {
    font-family: var(--vc-font);
}

/* Keep document/print surfaces on Arial where intentionally set */
.vc-invoice-page,
.vc-invoice-page *,
.vc-print-doc,
.vc-print-doc * {
    font-family: Arial, Helvetica, sans-serif;
}

.vc-section-tag,
.vc-product-category,
.vwhy-subtitle,
.vrc-subtitle,
.vbest-subtitle,
.vcat-subtitle {
    font-family: var(--vc-font);
    font-weight: 800;
    letter-spacing: var(--vc-tracking-label);
    text-transform: uppercase;
}

.vc-product-info h1,
.vc-product-page h1,
.vc-shop-heading h1,
.vwhy-content h2,
.vrc-heading h2,
.vbest-heading h2 {
    font-family: var(--vc-font);
    font-weight: 800;
    line-height: var(--vc-leading-tight);
    color: var(--vc-text);
}

/* Keep category hero title white on green banner */
.vc-category-hero h1 {
    font-family: var(--vc-font);
    font-weight: 800;
    line-height: var(--vc-leading-tight);
    color: #fff !important;
}

.vc-product-short-description,
.vc-product-richtext p,
.vwhy-intro,
.vwhy-feature p {
    font-family: var(--vc-font);
    color: var(--vc-muted);
    line-height: var(--vc-leading-body);
}