/* ==========================================================================
   The Gourmet Saga — main stylesheet
   Warm home-food palette: terracotta, turmeric, basil, cream
   ========================================================================== */

:root {
        --ss-cream: #fbf6ee;
        --ss-cream-2: #f4ecdf;
        --ss-ink: #2a1b14;
        --ss-ink-2: #5a4a3f;
        --ss-muted: #8c7a6e;
        --ss-line: #e7dcc9;
        --ss-line-2: #d8c8aa;
        --ss-terracotta: #c0552c;
        --ss-terracotta-dark: #9d3f1d;
        --ss-turmeric: #e8a93c;
        --ss-basil: #4f7a4a;
        --ss-card: #ffffff;
        --ss-shadow: 0 1px 2px rgba(42,27,20,.06), 0 8px 24px -12px rgba(42,27,20,.18);
        --ss-radius: 16px;
        --ss-radius-sm: 10px;
        --ss-radius-pill: 999px;
        --ss-font-display: "Fraunces", Georgia, serif;
        --ss-font-sans: "Inter", system-ui, -apple-system, sans-serif;
        --ss-mobile-nav-h: 64px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.gsaga-app {
        margin: 0;
        font-family: var(--ss-font-sans);
        color: var(--ss-ink);
        background: var(--ss-cream);
        line-height: 1.55;
        -webkit-font-smoothing: antialiased;
}
body.gsaga-app a { color: inherit; text-decoration: none; }
body.gsaga-app img { max-width: 100%; display: block; }
body.gsaga-app button { font-family: inherit; }

.ss-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ---------- Premium food-tech refresh ---------- */
:root {
        --ss-charcoal: #14110f;
        --ss-charcoal-2: #211814;
        --ss-gold: #d8a750;
        --ss-saffron: #f26a21;
        --ss-mint: #e5fff3;
        --ss-premium-shadow: 0 18px 48px -28px rgba(20,17,15,.55), 0 8px 20px -14px rgba(192,85,44,.35);
}

body.gsaga-app {
        background:
                radial-gradient(circle at 12% 0%, rgba(216,167,80,.13), transparent 28rem),
                linear-gradient(180deg, #fffaf2 0%, var(--ss-cream) 52%, #fffaf3 100%);
}

.ss-header {
        background: rgba(255,250,242,.86);
        box-shadow: 0 10px 28px -24px rgba(20,17,15,.45);
}

.ss-brand__mark {
        background: linear-gradient(135deg, var(--ss-charcoal), var(--ss-terracotta));
        box-shadow: 0 10px 22px -14px var(--ss-terracotta);
}

.ss-btn--primary {
        background: linear-gradient(135deg, var(--ss-saffron), var(--ss-terracotta));
        box-shadow: 0 12px 24px -18px var(--ss-terracotta);
}

.ss-hero {
        border-bottom: 0;
        background:
                linear-gradient(135deg, rgba(20,17,15,.96), rgba(54,31,21,.92)),
                var(--ss-charcoal);
        color: #fff7ea;
}

.ss-hero::after {
        content: "";
        position: absolute;
        left: 0; right: 0; bottom: 0;
        height: 72px;
        background: linear-gradient(180deg, transparent, rgba(255,250,242,.98));
        pointer-events: none;
}

.ss-hero__inner { min-height: 520px; align-items: center; }
.ss-hero__copy { max-width: 640px; }
.ss-hero__pill {
        background: rgba(216,167,80,.16);
        color: #ffe0a2;
        border: 1px solid rgba(216,167,80,.24);
}
.ss-hero__title { color: #fffaf2; text-wrap: balance; }
.ss-hero__lead { color: rgba(255,250,242,.78); font-size: 17px; }
.ss-hero__search {
        max-width: 560px;
        border: 1px solid rgba(255,255,255,.18);
        background: rgba(255,255,255,.94);
        box-shadow: 0 26px 58px -34px rgba(0,0,0,.7);
}
.ss-hero__stats {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 18px;
}
.ss-hero__stats span {
        display: inline-flex;
        gap: 6px;
        align-items: center;
        padding: 8px 12px;
        border: 1px solid rgba(255,255,255,.14);
        border-radius: 999px;
        background: rgba(255,255,255,.07);
        color: rgba(255,250,242,.82);
        font-size: 12px;
}
.ss-hero__stats strong { color: #fff; }
.ss-hero__art {
        border: 1px solid rgba(255,255,255,.14);
        box-shadow: 0 32px 70px -34px rgba(0,0,0,.85);
}
.ss-hero__art::after {
        content: "Fresh today";
        position: absolute;
        left: 16px; bottom: 16px;
        padding: 8px 13px;
        border-radius: 999px;
        background: rgba(20,17,15,.68);
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        backdrop-filter: blur(12px);
}

.ss-premium-strip {
        margin-top: -22px;
        position: relative;
        z-index: 3;
}
.ss-premium-strip__inner {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1px;
        overflow: hidden;
        border: 1px solid rgba(216,167,80,.18);
        border-radius: 18px;
        background: rgba(216,167,80,.18);
        box-shadow: var(--ss-premium-shadow);
}
.ss-premium-strip__inner span {
        background: rgba(255,255,255,.92);
        padding: 15px 16px;
        color: var(--ss-charcoal-2);
        font-weight: 700;
        font-size: 13px;
        text-align: center;
}

.ss-filters {
        position: sticky;
        top: 69px;
        z-index: 20;
        background: rgba(255,250,242,.9);
        backdrop-filter: blur(14px) saturate(150%);
}

.ss-section--compact { padding: 28px 0 34px; }
.ss-section__link {
        color: var(--ss-terracotta);
        font-weight: 800;
        font-size: 14px;
}

.ss-category-rail,
.ss-food-rail {
        display: flex;
        gap: 14px;
        overflow-x: auto;
        padding: 2px 2px 16px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
}
.ss-category-rail::-webkit-scrollbar,
.ss-food-rail::-webkit-scrollbar { display: none; }

.ss-category-tile {
        min-width: 142px;
        border: 1px solid var(--ss-line);
        border-radius: 16px;
        background: #fff;
        padding: 15px;
        text-align: left;
        cursor: pointer;
        box-shadow: var(--ss-shadow);
        transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.ss-category-tile:hover,
.ss-category-tile.is-active {
        transform: translateY(-2px);
        border-color: rgba(192,85,44,.36);
        box-shadow: var(--ss-premium-shadow);
}
.ss-category-tile span {
        display: block;
        color: var(--ss-ink);
        font-weight: 800;
        font-size: 15px;
}
.ss-category-tile small {
        display: block;
        margin-top: 4px;
        color: var(--ss-muted);
        font-size: 12px;
}

.ss-premium-food-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 18px;
}
.ss-food-rail .ss-premium-food-card {
        flex: 0 0 265px;
        scroll-snap-align: start;
}
.ss-premium-food-card {
        position: relative;
        overflow: hidden;
        background: #fff;
        border: 1px solid rgba(216,200,170,.8);
        border-radius: 18px;
        box-shadow: var(--ss-shadow);
        transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ss-premium-food-card:hover {
        transform: translateY(-4px);
        border-color: rgba(192,85,44,.35);
        box-shadow: var(--ss-premium-shadow);
}
.ss-premium-food-card__img {
        position: relative;
        aspect-ratio: 1.18 / .82;
        overflow: hidden;
        background: var(--ss-cream-2);
}
.ss-premium-food-card__img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .45s ease;
}
.ss-premium-food-card:hover .ss-premium-food-card__img img { transform: scale(1.05); }
.ss-premium-food-card__body { padding: 14px 16px 16px; }
.ss-premium-food-card__body h3 {
        margin: 0 34px 5px 0;
        color: var(--ss-ink);
        font-size: 17px;
        line-height: 1.18;
}
.ss-premium-food-card__body p {
        min-height: 38px;
        margin: 0 0 10px;
        color: var(--ss-muted);
        font-size: 13px;
        line-height: 1.45;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
}
.ss-food-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 13px;
}
.ss-food-meta span {
        display: inline-flex;
        align-items: center;
        min-height: 24px;
        padding: 4px 8px;
        border-radius: 999px;
        background: var(--ss-cream);
        color: var(--ss-ink-2);
        font-size: 11px;
        font-weight: 700;
}
.ss-food-buy {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
}
.ss-food-price {
        color: var(--ss-ink);
        font-weight: 900;
        font-size: 18px;
}
.ss-food-price del {
        margin-left: 5px;
        color: var(--ss-muted);
        font-size: 13px;
        font-weight: 600;
}
.ss-add-round {
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--ss-saffron), var(--ss-terracotta));
        color: #fff;
        font-size: 25px;
        line-height: 1;
        cursor: pointer;
        box-shadow: 0 14px 22px -14px var(--ss-terracotta);
        transition: transform .15s ease;
}
.ss-add-round:hover { transform: scale(1.05); }
.ss-food-fav {
        position: absolute;
        z-index: 3;
        top: 10px;
        right: 10px;
        width: 36px;
        height: 36px;
        border: 0;
        border-radius: 50%;
        background: rgba(255,255,255,.92);
        color: var(--ss-ink);
        font-size: 21px;
        cursor: pointer;
        box-shadow: 0 8px 20px -14px rgba(0,0,0,.7);
}
.ss-diet-badge,
.ss-food-tag,
.ss-discount {
        position: absolute;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 900;
}
.ss-diet-badge {
        left: 10px;
        top: 10px;
        width: 24px;
        height: 24px;
        border-radius: 6px;
        background: #fff;
        border: 2px solid #18a348;
}
.ss-diet-badge i {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #18a348;
}
.ss-diet-badge.is-nonveg { border-color: #d42027; }
.ss-diet-badge.is-nonveg i { background: #d42027; }
.ss-food-tag {
        top: 10px;
        left: 42px;
        min-height: 24px;
        padding: 4px 9px;
        border-radius: 999px;
        background: #ffc629;
        color: #4b2a08;
}
.ss-discount {
        left: 10px;
        bottom: 10px;
        padding: 5px 9px;
        border-radius: 999px;
        background: rgba(242,106,33,.94);
        color: #fff;
}

.ss-vendor-card {
        border-radius: 18px;
        box-shadow: var(--ss-shadow);
}
.ss-vendor-card__rating {
        background: linear-gradient(135deg, #246b35, var(--ss-basil));
}
.ss-grid--tight { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ss-offer-band {
        padding: 28px 0;
}
.ss-offer-band__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        padding: 30px;
        border-radius: 24px;
        background:
                linear-gradient(135deg, rgba(242,106,33,.96), rgba(216,167,80,.9)),
                var(--ss-saffron);
        color: #fff;
        box-shadow: var(--ss-premium-shadow);
}
.ss-offer-band__eyebrow {
        display: inline-flex;
        margin-bottom: 8px;
        padding: 5px 10px;
        border-radius: 999px;
        background: rgba(255,255,255,.2);
        font-size: 11px;
        font-weight: 900;
        text-transform: uppercase;
}
.ss-offer-band h2 {
        margin: 0 0 6px;
        font-family: var(--ss-font-display);
        font-size: clamp(24px, 4vw, 38px);
        line-height: 1.05;
}
.ss-offer-band p {
        max-width: 680px;
        margin: 0;
        color: rgba(255,255,255,.84);
}
.ss-offer-band .ss-btn--primary {
        background: #fff;
        color: var(--ss-terracotta);
        box-shadow: none;
}

.ss-faq-band {
        padding: 34px 0 54px;
}
.ss-faq-band__inner {
        display: grid;
        grid-template-columns: .9fr 1.1fr;
        gap: 28px;
        align-items: start;
}
.ss-faq-band h2 {
        margin: 0 0 8px;
        font-family: var(--ss-font-display);
        font-size: clamp(26px, 4vw, 40px);
}
.ss-faq-band p { margin: 0; color: var(--ss-muted); }
.ss-faq-list {
        display: grid;
        gap: 10px;
}
.ss-faq-list details {
        background: #fff;
        border: 1px solid var(--ss-line);
        border-radius: 16px;
        padding: 15px 17px;
        box-shadow: var(--ss-shadow);
}
.ss-faq-list summary {
        cursor: pointer;
        color: var(--ss-ink);
        font-weight: 800;
}
.ss-faq-list details p {
        padding-top: 8px;
        font-size: 14px;
}

@media (max-width: 1080px) {
        .ss-premium-food-grid,
        .ss-grid--tight { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
        .ss-header__inner { padding: 10px 16px; }
        .ss-brand__name { display: none; }
        .ss-header__actions .ss-btn { display: none; }
        .ss-hero__inner {
                min-height: auto;
                padding: 34px 20px 46px;
                gap: 22px;
        }
        .ss-hero__title { font-size: 36px; }
        .ss-hero__lead { font-size: 15px; }
        .ss-hero__search {
                border-radius: 18px;
                padding: 7px 8px 7px 14px;
        }
        .ss-hero__search .ss-btn {
                width: 42px;
                min-width: 42px;
                padding: 0;
                height: 42px;
                font-size: 0;
        }
        .ss-hero__search .ss-btn::before {
                content: "Go";
                font-size: 13px;
        }
        .ss-hero__stats span { flex: 1 1 auto; justify-content: center; }
        .ss-premium-strip { margin-top: -18px; }
        .ss-premium-strip__inner {
                grid-template-columns: repeat(2, 1fr);
                border-radius: 16px;
        }
        .ss-premium-strip__inner span { padding: 12px 10px; font-size: 12px; }
        .ss-filters { top: 57px; }
        .ss-filter-row { flex-direction: column; gap: 6px; }
        .ss-filter-row__label { min-width: 0; padding-top: 0; }
        .ss-section { padding: 28px 0 38px; }
        .ss-section__title { font-size: 24px; }
        .ss-premium-food-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
        .ss-premium-food-card { border-radius: 16px; }
        .ss-premium-food-card__body { padding: 12px; }
        .ss-premium-food-card__body h3 {
                margin-right: 0;
                font-size: 15px;
        }
        .ss-premium-food-card__body p {
                min-height: 34px;
                font-size: 12px;
        }
        .ss-food-meta span { font-size: 10px; padding: 3px 7px; }
        .ss-food-price { font-size: 16px; }
        .ss-add-round { width: 40px; height: 40px; }
        .ss-food-rail .ss-premium-food-card { flex-basis: 245px; }
        .ss-grid--tight { grid-template-columns: 1fr; }
        .ss-offer-band__inner {
                align-items: flex-start;
                flex-direction: column;
                padding: 24px;
                border-radius: 20px;
        }
        .ss-faq-band__inner { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
        .ss-container { padding-left: 16px; padding-right: 16px; }
        .ss-premium-food-grid { gap: 12px; }
        .ss-food-tag { left: 38px; max-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .ss-premium-food-card__img { aspect-ratio: 1 / .82; }
        .ss-food-meta span:nth-child(3) { display: none; }
}

/* ---------- Header ---------- */
.ss-header {
        position: sticky; top: 0; z-index: 30;
        background: rgba(251,246,238,.92);
        backdrop-filter: saturate(160%) blur(10px);
        -webkit-backdrop-filter: saturate(160%) blur(10px);
        border-bottom: 1px solid var(--ss-line);
}
.ss-header__inner { display: flex; align-items: center; gap: 20px; padding: 14px 20px; }
.ss-brand { display: flex; align-items: center; gap: 10px; font-family: var(--ss-font-display); font-weight: 700; font-size: 22px; color: var(--ss-terracotta); }
.ss-brand__mark {
        display: inline-flex; align-items: center; justify-content: center;
        width: 36px; height: 36px; border-radius: 10px;
        background: var(--ss-terracotta); color: #fff; font-size: 14px; letter-spacing: .5px;
}
.ss-brand__name { font-size: 20px; }
.ss-nav { display: none; gap: 22px; margin-left: 16px; }
.ss-nav a { color: var(--ss-ink-2); font-weight: 500; font-size: 15px; }
.ss-nav a:hover { color: var(--ss-terracotta); }
.ss-nav a.is-active { color: var(--ss-terracotta); position: relative; }
.ss-nav a.is-active::after {
        content: ""; position: absolute; left: 0; right: 0; bottom: -18px;
        height: 3px; background: var(--ss-terracotta); border-radius: 3px 3px 0 0;
}

/* ---------- Mobile bottom navigation ---------- */
.ss-mobile-nav {
        display: flex;
        position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
        background: rgba(251,246,238,.97);
        backdrop-filter: saturate(180%) blur(12px);
        -webkit-backdrop-filter: saturate(180%) blur(12px);
        border-top: 1px solid var(--ss-line);
        height: var(--ss-mobile-nav-h);
        padding-bottom: env(safe-area-inset-bottom, 0);
}
.ss-mobile-nav__item {
        flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 3px; color: var(--ss-muted); font-size: 10px; font-weight: 600;
        text-decoration: none; padding: 6px 4px;
        transition: color .15s ease;
        letter-spacing: .3px; text-transform: uppercase;
}
.ss-mobile-nav__item svg { transition: transform .15s ease, stroke .15s ease; }
.ss-mobile-nav__item.is-active { color: var(--ss-terracotta); }
.ss-mobile-nav__item.is-active svg { stroke: var(--ss-terracotta); transform: translateY(-2px); }
.ss-mobile-nav__item:active { opacity: .7; }
.ss-mobile-nav-spacer { display: block; height: calc(var(--ss-mobile-nav-h) + env(safe-area-inset-bottom, 0)); }

@media (min-width: 720px) {
        .ss-mobile-nav { display: none; }
        .ss-mobile-nav-spacer { display: none; }
        .ss-nav { display: inline-flex; }
}

/* ---------- Filters / chips ---------- */
.ss-filters {
        background: var(--ss-cream);
        border-bottom: 1px solid var(--ss-line);
        padding: 14px 0 4px;
}
.ss-filter-row {
        display: flex; align-items: flex-start; gap: 10px;
        padding: 5px 0;
}
.ss-filter-row--area { border-top: 1px dashed var(--ss-line); margin-top: 2px; padding-top: 8px; }
.ss-filter-row__label {
        font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
        color: var(--ss-muted); min-width: 56px; padding-top: 10px; flex-shrink: 0;
        display: flex; align-items: center; gap: 4px;
}
.ss-chips {
        display: flex; gap: 7px; overflow-x: auto; flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
        padding-bottom: 8px;
}
.ss-chips::-webkit-scrollbar { display: none; }
.ss-chip {
        display: inline-flex; align-items: center; white-space: nowrap;
        background: #fff; border: 1px solid var(--ss-line-2); color: var(--ss-ink-2);
        padding: 8px 15px; border-radius: 999px;
        font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none;
        font-family: inherit;
        transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
        flex-shrink: 0;
}
.ss-chip:hover { background: var(--ss-cream-2); border-color: var(--ss-line-2); }
.ss-chip.is-active {
        background: var(--ss-terracotta); border-color: var(--ss-terracotta); color: #fff;
}

.ss-header__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.ss-icon-btn {
        position: relative; background: transparent; border: 1px solid transparent;
        width: 40px; height: 40px; border-radius: 12px; color: var(--ss-ink);
        cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
        transition: background .15s ease;
}
.ss-icon-btn:hover { background: var(--ss-cream-2); }
.ss-cart-badge {
        position: absolute; top: 4px; right: 4px;
        background: var(--ss-terracotta); color: #fff; font-size: 11px; font-weight: 700;
        min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
        display: inline-flex; align-items: center; justify-content: center;
        transition: transform .2s ease;
}
.ss-cart-badge[data-empty="1"] { display: none; }

/* ---------- Buttons ---------- */
.ss-btn {
        display: inline-flex; align-items: center; justify-content: center; gap: 8px;
        padding: 10px 18px; border-radius: var(--ss-radius-pill);
        font-weight: 600; font-size: 14px; line-height: 1;
        border: 1px solid transparent; cursor: pointer; text-decoration: none;
        transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
        white-space: nowrap;
}
.ss-btn--primary { background: var(--ss-terracotta); color: #fff; }
.ss-btn--primary:hover { background: var(--ss-terracotta-dark); transform: translateY(-1px); }
.ss-btn--ghost { background: transparent; color: var(--ss-ink); border-color: var(--ss-line-2); }
.ss-btn--ghost:hover { background: var(--ss-cream-2); }
.ss-btn--whatsapp { background: #25d366; color: #fff; padding: 14px 22px; font-size: 15px; }
.ss-btn--whatsapp:hover { background: #1fb858; }
.ss-btn--lg { padding: 14px 24px; font-size: 15px; }
.ss-btn--block { width: 100%; }
.ss-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none !important; }

/* ---------- Loader ---------- */
.ss-loading { padding: 80px 24px; text-align: center; color: var(--ss-muted); }
.ss-spinner {
        width: 32px; height: 32px; margin: 0 auto 14px;
        border-radius: 50%;
        border: 3px solid var(--ss-cream-2);
        border-top-color: var(--ss-terracotta);
        animation: ss-spin 1s linear infinite;
}
@keyframes ss-spin { to { transform: rotate(360deg); } }

/* ---------- Hero ---------- */
.ss-hero {
        position: relative; overflow: hidden;
        background: var(--ss-cream-2);
        border-bottom: 1px solid var(--ss-line);
}
.ss-hero__inner {
        display: grid; grid-template-columns: 1fr; gap: 24px;
        padding: 40px 20px 32px;
        max-width: 1200px; margin: 0 auto;
        position: relative;
}
.ss-hero__copy { position: relative; z-index: 2; max-width: 580px; }
.ss-hero__pill {
        display: inline-flex; align-items: center; gap: 6px;
        background: rgba(232,169,60,.18); color: #8a6014;
        padding: 6px 14px; border-radius: 999px;
        font-size: 12px; font-weight: 600; letter-spacing: .3px;
        margin-bottom: 16px;
}
.ss-hero__title {
        font-family: var(--ss-font-display); font-weight: 700;
        font-size: clamp(28px, 6vw, 56px); line-height: 1.05; margin: 0 0 14px;
        color: var(--ss-ink);
}
.ss-hero__lead { font-size: 16px; color: var(--ss-ink-2); margin: 0 0 20px; max-width: 520px; }
.ss-hero__search {
        display: flex; gap: 8px; align-items: center;
        background: #fff; border: 1px solid var(--ss-line-2); border-radius: var(--ss-radius-pill);
        padding: 6px 6px 6px 18px; box-shadow: var(--ss-shadow);
        max-width: 460px;
}
.ss-hero__search input { flex: 1; border: 0; outline: 0; background: transparent; padding: 10px 0; font-size: 15px; color: var(--ss-ink); min-width: 0; }
.ss-hero__art {
        position: relative; aspect-ratio: 16/10; border-radius: var(--ss-radius);
        overflow: hidden; box-shadow: var(--ss-shadow);
}
.ss-hero__art img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 900px) {
        .ss-hero__inner { grid-template-columns: 1.1fr .9fr; gap: 48px; padding: 64px 20px 56px; align-items: center; }
}

/* ---------- Sections ---------- */
.ss-section { padding: 36px 0 56px; }
.ss-section__head {
        display: flex; align-items: end; justify-content: space-between; gap: 12px;
        margin-bottom: 22px; flex-wrap: wrap;
}
.ss-section__title {
        font-family: var(--ss-font-display); font-size: 26px; line-height: 1.15; margin: 0;
}
.ss-section__sub { color: var(--ss-muted); margin: 4px 0 0; font-size: 13px; }
.ss-section__refresh {
        background: transparent; border: 1px solid var(--ss-line-2); color: var(--ss-ink-2);
        padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; cursor: pointer;
}
.ss-section__refresh:hover { background: var(--ss-cream-2); }

/* ---------- Vendor grid ---------- */
.ss-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 560px) { .ss-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (min-width: 980px) { .ss-grid { grid-template-columns: repeat(3, 1fr); } }

.ss-vendor-card {
        background: var(--ss-card); border: 1px solid var(--ss-line);
        border-radius: var(--ss-radius); overflow: hidden; cursor: pointer;
        transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
        display: flex; flex-direction: column;
        animation: ss-card-in .35s ease both;
}
@keyframes ss-card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.ss-vendor-card:hover { transform: translateY(-3px); box-shadow: var(--ss-shadow); border-color: var(--ss-line-2); }
.ss-vendor-card__img { aspect-ratio: 16/10; background: var(--ss-cream-2); overflow: hidden; }
.ss-vendor-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.ss-vendor-card:hover .ss-vendor-card__img img { transform: scale(1.04); }
.ss-vendor-card__body { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; }
.ss-vendor-card__head { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.ss-vendor-card__name { font-family: var(--ss-font-display); font-weight: 600; font-size: 18px; margin: 0; color: var(--ss-ink); }
.ss-vendor-card__rating {
        background: var(--ss-basil); color: #fff; padding: 3px 9px; border-radius: 6px;
        font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px;
        flex-shrink: 0;
}
.ss-vendor-card__cuisine { color: var(--ss-muted); font-size: 13px; margin: 4px 0 8px; }
.ss-vendor-card__desc { color: var(--ss-ink-2); font-size: 13px; margin: 0 0 12px; flex: 1; }
.ss-vendor-card__meta { display: flex; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1px dashed var(--ss-line); }
.ss-vendor-card__area {
        background: none; border: none; padding: 0; margin: 0;
        color: var(--ss-muted); font-size: 12px; font-family: inherit;
        cursor: pointer; display: inline-flex; align-items: center; gap: 2px;
        text-align: left; line-height: 1;
        border-bottom: 1px dashed transparent;
        transition: color .15s, border-color .15s;
}
.ss-vendor-card__area:hover { color: var(--ss-primary); border-bottom-color: var(--ss-primary); }
.ss-vendor-card__cta { color: var(--ss-terracotta); font-weight: 600; font-size: 13px; }

/* ---------- Vendor detail ---------- */
.ss-vendor-hero {
        position: relative; height: 240px; overflow: hidden;
        background: var(--ss-cream-2);
}
.ss-vendor-hero img { width: 100%; height: 100%; object-fit: cover; }
.ss-vendor-hero::after {
        content: ""; position: absolute; inset: 0;
        background: linear-gradient(to top, rgba(42,27,20,.7), rgba(42,27,20,0) 60%);
}
.ss-vendor-info {
        max-width: 1200px; margin: -90px auto 0; padding: 0 20px; position: relative; z-index: 2;
        color: #fff;
}
.ss-vendor-info__title { font-family: var(--ss-font-display); font-size: 30px; margin: 0 0 6px; line-height: 1.1; }
.ss-vendor-info__sub { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 13px; opacity: .9; }
.ss-vendor-info__sub span { display: inline-flex; align-items: center; gap: 6px; }
.ss-vendor-back {
        display: inline-flex; align-items: center; gap: 6px;
        color: #fff; background: rgba(0,0,0,.25);
        padding: 7px 12px; border-radius: 999px; font-size: 13px;
        margin-bottom: 12px;
}
.ss-vendor-back:hover { background: rgba(0,0,0,.4); }

.ss-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 24px 0 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.ss-tab {
        background: #fff; border: 1px solid var(--ss-line); border-radius: 999px;
        padding: 8px 16px; font-size: 14px; font-weight: 500; color: var(--ss-ink-2); cursor: pointer;
        white-space: nowrap; flex-shrink: 0;
}
.ss-tab[aria-pressed="true"] { background: var(--ss-terracotta); border-color: var(--ss-terracotta); color: #fff; }

.ss-foods { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 760px) { .ss-foods { grid-template-columns: repeat(2, 1fr); } }
.ss-food-card {
        display: grid; grid-template-columns: 100px 1fr; gap: 12px;
        background: #fff; border: 1px solid var(--ss-line); border-radius: var(--ss-radius);
        overflow: hidden; padding: 12px; align-items: start;
        transition: border-color .15s ease, box-shadow .15s ease;
}
.ss-food-card:hover { box-shadow: var(--ss-shadow); border-color: var(--ss-line-2); }
.ss-food-card__img { width: 100px; height: 100px; border-radius: 10px; overflow: hidden; background: var(--ss-cream-2); }
.ss-food-card__img img { width: 100%; height: 100%; object-fit: cover; }
.ss-food-card__name { font-weight: 600; font-size: 15px; color: var(--ss-ink); margin: 0 0 3px; }
.ss-food-card__desc { color: var(--ss-muted); font-size: 12px; margin: 0 0 8px; line-height: 1.4; }
.ss-food-card__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ss-food-card__price { font-weight: 700; color: var(--ss-ink); font-size: 15px; }
.ss-food-card[data-unavailable="1"] { opacity: .55; }
.ss-food-card[data-unavailable="1"] .ss-btn { pointer-events: none; }

/* ---------- Star Ratings ---------- */
.ss-stars {
        display: inline-flex; gap: 2px; cursor: pointer; margin: 6px 0 0;
}
.ss-stars__star {
        font-size: 18px; color: var(--ss-line-2);
        transition: color .1s ease, transform .1s ease;
        background: none; border: none; padding: 0; cursor: pointer; line-height: 1;
}
.ss-stars__star.is-filled { color: var(--ss-turmeric); }
.ss-stars__star:hover { transform: scale(1.2); }
.ss-stars--sm .ss-stars__star { font-size: 14px; }
.ss-stars--readonly { cursor: default; pointer-events: none; }
.ss-stars--readonly .ss-stars__star { cursor: default; }
.ss-stars__label { font-size: 12px; color: var(--ss-muted); margin-left: 4px; }

.ss-vendor-rate-section {
        margin: 16px 0 0;
        padding: 14px 16px;
        background: var(--ss-cream-2); border-radius: var(--ss-radius-sm);
        display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.ss-vendor-rate-section p { margin: 0; font-size: 13px; color: var(--ss-ink-2); font-weight: 500; }

/* ---------- Qty ---------- */
.ss-qty { display: inline-flex; align-items: center; border: 1px solid var(--ss-line-2); border-radius: 999px; overflow: hidden; }
.ss-qty button {
        background: #fff; border: 0; width: 32px; height: 32px; cursor: pointer; font-size: 18px;
        color: var(--ss-terracotta); font-weight: 700;
}
.ss-qty button:hover { background: var(--ss-cream-2); }
.ss-qty span { min-width: 28px; text-align: center; font-weight: 600; font-size: 14px; }

/* ---------- Empty / status ---------- */
.ss-empty {
        text-align: center; padding: 56px 24px; color: var(--ss-muted);
        border: 1px dashed var(--ss-line-2); border-radius: var(--ss-radius);
        background: #fff;
}
.ss-empty h3 { font-family: var(--ss-font-display); font-size: 20px; color: var(--ss-ink); margin: 0 0 6px; }
.ss-empty p { margin: 0 0 16px; font-size: 14px; }

/* ---------- Slide-out panels ---------- */
.ss-panel { position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: 0; transition: opacity .2s ease; }
.ss-panel[data-open="1"] { pointer-events: auto; opacity: 1; }
.ss-panel__backdrop { position: absolute; inset: 0; background: rgba(42,27,20,.45); }
.ss-panel__sheet {
        position: absolute; right: 0; top: 0; bottom: 0; width: min(440px, 100%);
        background: #fff; box-shadow: -10px 0 30px rgba(0,0,0,.15);
        display: flex; flex-direction: column;
        transform: translateX(100%); transition: transform .25s ease;
}
.ss-panel[data-open="1"] .ss-panel__sheet { transform: translateX(0); }
.ss-panel__sheet--narrow { width: min(380px, 100%); }
.ss-panel__head {
        display: flex; align-items: center; justify-content: space-between;
        padding: 16px 20px; border-bottom: 1px solid var(--ss-line);
}
.ss-panel__head h2 { font-family: var(--ss-font-display); font-size: 20px; margin: 0; }
.ss-panel__body { flex: 1; overflow: auto; padding: 18px 20px; }
.ss-panel__foot { padding: 16px 20px; border-top: 1px solid var(--ss-line); background: var(--ss-cream); }

/* Cart items */
.ss-cart-item { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--ss-line); }
.ss-cart-item:last-child { border-bottom: 0; }
.ss-cart-item img { width: 52px; height: 52px; object-fit: cover; border-radius: 10px; background: var(--ss-cream-2); }
.ss-cart-item__name { font-weight: 600; font-size: 14px; margin: 0; }
.ss-cart-item__meta { color: var(--ss-muted); font-size: 12px; margin: 2px 0 5px; }
.ss-cart-summary { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; }
.ss-cart-summary--total { border-top: 1px dashed var(--ss-line); padding-top: 10px; margin-top: 6px; font-weight: 700; font-size: 16px; }
.ss-cart-address { width: 100%; padding: 10px 12px; border: 1px solid var(--ss-line-2); border-radius: 12px; font-family: inherit; font-size: 14px; resize: vertical; min-height: 68px; margin: 10px 0; outline: 0; }
.ss-cart-address:focus { border-color: var(--ss-terracotta); }

/* Login flow */
.ss-form-label { display: block; font-size: 13px; font-weight: 600; color: var(--ss-ink-2); margin-bottom: 6px; }
.ss-input, .ss-phone-input input {
        width: 100%; padding: 12px 14px; border: 1px solid var(--ss-line-2);
        border-radius: 12px; font-size: 15px; font-family: inherit; outline: 0; background: #fff;
}
.ss-input:focus, .ss-phone-input input:focus { border-color: var(--ss-terracotta); }
.ss-phone-input { display: flex; gap: 8px; align-items: stretch; }
.ss-phone-input .ss-cc { padding: 12px 14px; background: var(--ss-cream-2); border-radius: 12px; font-weight: 600; color: var(--ss-ink); }
.ss-form-row { margin-bottom: 14px; }

.ss-otp-grid { display: flex; gap: 7px; justify-content: center; margin: 18px 0 6px; }
.ss-otp-grid input {
        width: 42px; height: 50px; text-align: center; font-size: 20px;
        border: 1px solid var(--ss-line-2); border-radius: 12px; outline: 0; font-weight: 600;
}
.ss-otp-grid input:focus { border-color: var(--ss-terracotta); }
.ss-otp-resend { text-align: center; margin-top: 16px; color: var(--ss-muted); font-size: 13px; }
.ss-otp-resend button { background: none; border: 0; color: var(--ss-terracotta); font-weight: 600; cursor: pointer; }

.ss-user-card { background: var(--ss-cream-2); padding: 14px 16px; border-radius: 12px; display: flex; justify-content: space-between; align-items: center; }
.ss-user-card__name { font-weight: 600; }
.ss-user-card__phone { color: var(--ss-muted); font-size: 13px; }

/* Orders */
.ss-orders { display: grid; gap: 12px; }
.ss-order { background: #fff; border: 1px solid var(--ss-line); border-radius: var(--ss-radius); padding: 14px 16px; }
.ss-order__head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ss-order__id { font-weight: 700; font-family: var(--ss-font-display); }
.ss-order__date { color: var(--ss-muted); font-size: 13px; }
.ss-order__items { color: var(--ss-ink-2); font-size: 13px; margin: 0 0 6px; }
.ss-order__total { font-weight: 600; font-size: 14px; }

/* Footer */
.ss-footer { background: var(--ss-ink); color: #d8c8aa; padding: 36px 0 30px; margin-top: 60px; }
.ss-footer__inner { display: grid; gap: 18px; grid-template-columns: 1fr; }
.ss-footer__brand { font-family: var(--ss-font-display); color: #fff; margin: 0 0 6px; font-size: 22px; }
.ss-footer__tagline { margin: 0; font-size: 14px; color: #c9b89a; }
.ss-footer__meta p { margin: 0 0 6px; font-size: 13px; }
.ss-footer__meta a { color: var(--ss-turmeric); }
@media (min-width: 760px) { .ss-footer__inner { grid-template-columns: 2fr 1fr; align-items: end; } .ss-footer__meta { text-align: right; } }

/* Toast */
.ss-toast {
        position: fixed; bottom: calc(var(--ss-mobile-nav-h) + 12px); left: 50%; transform: translate(-50%, 30px);
        background: var(--ss-ink); color: #fff; padding: 12px 20px; border-radius: 999px;
        font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.25); opacity: 0; pointer-events: none;
        transition: transform .25s ease, opacity .25s ease; z-index: 100; max-width: 90vw; text-align: center;
}
@media (min-width: 720px) { .ss-toast { bottom: 20px; } }
.ss-toast[data-show="1"] { opacity: 1; transform: translate(-50%, 0); }
.ss-toast--demo { background: var(--ss-turmeric); color: var(--ss-ink); font-weight: 600; }

/* Search */
.ss-search-icon { color: var(--ss-muted); flex-shrink: 0; }

/* Saved address badge in cart */
.ss-saved-addr {
        display: flex; align-items: center; justify-content: space-between; gap: 8px;
        background: rgba(79,122,74,.1); border: 1px solid rgba(79,122,74,.25);
        border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; font-size: 13px;
}
.ss-saved-addr span { flex: 1; color: var(--ss-ink-2); }
.ss-saved-addr button { background: none; border: none; color: var(--ss-terracotta); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0; white-space: nowrap; }

/* ---------- Food detail modal ---------- */
.ss-modal {
        position: fixed; inset: 0; z-index: 60;
        display: flex; align-items: flex-end; justify-content: center;
        background: rgba(42,27,20,0); pointer-events: none;
        transition: background .25s ease;
}
@media (min-width: 600px) { .ss-modal { align-items: center; } }
.ss-modal[data-open="1"] { background: rgba(42,27,20,.55); pointer-events: auto; }
.ss-modal__backdrop { position: absolute; inset: 0; }
.ss-modal__dialog {
        position: relative; z-index: 1;
        background: #fff; border-radius: 20px 20px 0 0;
        width: 100%; max-width: 560px; max-height: 92vh;
        overflow: hidden; display: flex; flex-direction: column;
        transform: translateY(100%); transition: transform .3s cubic-bezier(.34,1.06,.64,1);
        box-shadow: 0 -8px 40px rgba(42,27,20,.2);
}
@media (min-width: 600px) {
        .ss-modal__dialog { border-radius: 20px; transform: scale(.92) translateY(20px); opacity: 0; transition: transform .25s ease, opacity .25s ease; }
}
.ss-modal[data-open="1"] .ss-modal__dialog { transform: translateY(0); }
@media (min-width: 600px) {
        .ss-modal[data-open="1"] .ss-modal__dialog { transform: scale(1) translateY(0); opacity: 1; }
}
.ss-modal__close {
        position: absolute; top: 12px; right: 12px; z-index: 2;
        width: 34px; height: 34px; border-radius: 50%;
        background: rgba(42,27,20,.18); border: none; color: #fff;
        font-size: 20px; line-height: 1; cursor: pointer;
        display: inline-flex; align-items: center; justify-content: center;
}
.ss-modal__close:hover { background: rgba(42,27,20,.35); }
.ss-modal__body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ss-modal__img {
        width: 100%; aspect-ratio: 4/3; overflow: hidden; background: var(--ss-cream-2); flex-shrink: 0;
}
.ss-modal__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ss-modal__content { padding: 20px 20px 28px; }
.ss-modal__category {
        display: inline-block; background: var(--ss-cream-2); color: var(--ss-muted);
        font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
        padding: 4px 10px; border-radius: 999px; margin-bottom: 10px;
}
.ss-modal__title {
        font-family: var(--ss-font-display); font-size: 26px; line-height: 1.1;
        margin: 0 0 4px; color: var(--ss-ink);
}
.ss-modal__vendor { color: var(--ss-muted); font-size: 13px; margin: 0 0 10px; }
.ss-modal__desc { color: var(--ss-ink-2); font-size: 14px; line-height: 1.55; margin: 0 0 12px; }
.ss-modal__rating-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.ss-modal__footer {
        display: flex; align-items: center; gap: 12px;
        padding-top: 14px; border-top: 1px dashed var(--ss-line);
}
.ss-modal__price { font-family: var(--ss-font-display); font-size: 24px; font-weight: 700; color: var(--ss-ink); }

/* ---------- "Become a vendor" CTA strip ---------- */
.ss-apply-cta {
        background: linear-gradient(135deg, var(--ss-terracotta) 0%, #9d3f1d 100%);
        padding: 28px 0;
}
.ss-apply-cta__inner {
        display: flex; align-items: center; justify-content: space-between;
        flex-wrap: wrap; gap: 16px;
}
.ss-apply-cta__title { font-family: var(--ss-font-display); font-size: 22px; color: #fff; margin: 0 0 4px; }
.ss-apply-cta__sub { color: rgba(255,255,255,.8); font-size: 14px; margin: 0; }
.ss-apply-cta .ss-btn--primary { background: #fff; color: var(--ss-terracotta); border-color: #fff; }
.ss-apply-cta .ss-btn--primary:hover { background: var(--ss-cream); }

/* ---------- Apply / vendor onboarding page ---------- */
.ss-apply-back {
        display: inline-flex; align-items: center; gap: 6px;
        color: var(--ss-terracotta); font-size: 14px; font-weight: 500;
        margin-bottom: 24px;
}
.ss-apply-hero { margin-bottom: 28px; }
.ss-apply-hero__title {
        font-family: var(--ss-font-display); font-size: clamp(22px, 5vw, 34px);
        line-height: 1.1; margin: 0 0 10px; color: var(--ss-ink);
}
.ss-apply-hero__sub { color: var(--ss-ink-2); font-size: 15px; max-width: 580px; margin: 0; }
.ss-apply-form { background: #fff; border: 1px solid var(--ss-line); border-radius: var(--ss-radius); padding: 28px; }
.ss-apply-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 560px) { .ss-apply-grid { grid-template-columns: repeat(2, 1fr); column-gap: 16px; } }
.ss-apply-grid--full { grid-column: 1 / -1; }
.ss-apply-radios { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.ss-apply-radio {
        display: inline-flex; align-items: center; gap: 7px;
        font-size: 14px; color: var(--ss-ink-2); cursor: pointer;
}
.ss-apply-radio input { accent-color: var(--ss-terracotta); width: 16px; height: 16px; }
.ss-apply-note {
        display: flex; align-items: center; gap: 8px;
        background: rgba(232,169,60,.12); border-radius: 10px;
        padding: 12px 14px; font-size: 13px; color: var(--ss-ink-2);
        margin: 20px 0 18px;
}
.ss-apply-note svg { flex-shrink: 0; stroke: var(--ss-turmeric); }

/* ---------- Order status tracker ---------- */
.ss-order {
        background: var(--ss-card); border: 1px solid var(--ss-line); border-radius: var(--ss-radius);
        padding: 18px 20px; margin-bottom: 14px;
        box-shadow: var(--ss-shadow);
}
.ss-order__head {
        display: flex; align-items: center; justify-content: space-between;
        gap: 8px; margin-bottom: 12px; flex-wrap: wrap;
}
.ss-order__id { font-weight: 700; font-size: 13px; color: var(--ss-ink); letter-spacing: .3px; }
.ss-order__date { font-size: 12px; color: var(--ss-muted); }
.ss-order__items { font-size: 13px; color: var(--ss-ink-2); margin: 10px 0 4px; }
.ss-order__total { font-weight: 700; font-size: 15px; color: var(--ss-ink); margin: 0; }

/* Status badge */
.ss-status-badge {
        display: inline-flex; align-items: center; gap: 5px;
        font-size: 12px; font-weight: 700; padding: 4px 12px;
        border-radius: var(--ss-radius-pill);
}
.ss-status--received  { background: rgba(232,169,60,.15);  color: #856404; }
.ss-status--prep      { background: rgba(79,122,74,.13);   color: #2d5a29; }
.ss-status--out       { background: rgba(192,85,44,.12);   color: var(--ss-terracotta-dark); }
.ss-status--delivered { background: rgba(79,122,74,.2);    color: #1d4a18; }

/* Status progress bar */
.ss-status-bar { margin: 4px 0 12px; }
.ss-status-bar__head {
        display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px;
}
.ss-status-bar__time { font-size: 11px; color: var(--ss-muted); }
.ss-status-steps {
        display: flex; align-items: flex-start; gap: 0;
}
.ss-status-step {
        display: flex; flex-direction: column; align-items: center; gap: 5px;
        flex: 0 0 auto; min-width: 56px;
}
.ss-status-step__dot {
        width: 34px; height: 34px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: 16px;
        background: var(--ss-cream-2); border: 2px solid var(--ss-line);
        transition: background .2s, border-color .2s;
}
.ss-status-step.is-done .ss-status-step__dot,
.ss-status-step.is-current .ss-status-step__dot {
        background: #fff; border-color: var(--ss-basil);
}
.ss-status-step.is-current .ss-status-step__dot {
        border-color: var(--ss-terracotta); box-shadow: 0 0 0 3px rgba(192,85,44,.15);
}
.ss-status-step__label {
        font-size: 10px; color: var(--ss-muted); text-align: center; white-space: nowrap;
        font-weight: 500; letter-spacing: .2px;
}
.ss-status-step.is-done .ss-status-step__label,
.ss-status-step.is-current .ss-status-step__label {
        color: var(--ss-ink-2);
        font-weight: 700;
}
.ss-status-connector {
        flex: 1; height: 2px; background: var(--ss-line); margin-top: 17px;
        transition: background .3s;
}
.ss-status-connector.is-filled { background: var(--ss-basil); }

/* ---------- Order card footer row ---------- */
.ss-order__foot {
        display: flex; align-items: center; justify-content: space-between;
        gap: 10px; margin: 6px 0 0; flex-wrap: wrap;
}
.ss-order__total { margin: 0 !important; }

/* ---------- Small button variant ---------- */
.ss-btn--sm { font-size: 12px; padding: 6px 12px; border-radius: 8px; }

/* ---------- 5-item mobile nav: vendor tab accent ---------- */
.ss-mobile-nav__item--vendor { color: var(--ss-terracotta); }
.ss-mobile-nav__item--vendor svg { stroke: var(--ss-terracotta); }
.ss-mobile-nav__item--vendor.is-active,
.ss-mobile-nav__item--vendor:hover { color: var(--ss-terracotta-dark); }

/* ==========================================================================
   PROFESSIONAL ADDITIONS — v3.0
   ========================================================================== */

/* ---------- WhatsApp Floating Action Button ---------- */
.gsaga-wa-fab {
        position: fixed;
        bottom: calc(var(--ss-mobile-nav-h) + 16px + env(safe-area-inset-bottom, 0));
        right: 20px;
        z-index: 50;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: #25d366;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 16px rgba(37, 211, 102, 0.45);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        text-decoration: none;
}
.gsaga-wa-fab:hover {
        transform: scale(1.08) translateY(-2px);
        box-shadow: 0 6px 24px rgba(37, 211, 102, 0.55);
}
@media (min-width: 720px) {
        .gsaga-wa-fab {
                bottom: 28px;
        }
}

/* ---------- Trust badges strip ---------- */
.gsaga-trust-strip {
        background: var(--ss-ink);
        color: rgba(255,255,255,0.88);
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.2px;
        padding: 9px 0;
        overflow: hidden;
}
.gsaga-trust-strip__inner {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 28px;
        flex-wrap: wrap;
        padding: 0 20px;
}
.gsaga-trust-strip__item {
        display: flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
}
.gsaga-trust-strip__item svg {
        flex-shrink: 0;
        opacity: 0.85;
}

/* ---------- Footer enhancements ---------- */
.ss-footer {
        border-top: 1px solid var(--ss-line);
}
.ss-footer__links {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
        margin-top: 8px;
}
.ss-footer__links a {
        font-size: 13px;
        color: var(--ss-muted);
        text-decoration: underline;
        text-underline-offset: 2px;
}
.ss-footer__links a:hover {
        color: var(--ss-terracotta);
}
.ss-footer__social {
        display: flex;
        gap: 10px;
        margin-top: 10px;
}
.ss-footer__social a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: var(--ss-cream-2);
        color: var(--ss-ink-2);
        transition: background 0.15s ease, color 0.15s ease;
}
.ss-footer__social a:hover {
        background: var(--ss-terracotta);
        color: #fff;
}

/* ---------- Skeleton loading screens ---------- */
@keyframes gsaga-shimmer {
        0%   { background-position: -400px 0; }
        100% { background-position: 400px 0; }
}
.gsaga-skeleton {
        background: linear-gradient(90deg, var(--ss-cream-2) 25%, #ede5d3 50%, var(--ss-cream-2) 75%);
        background-size: 800px 100%;
        animation: gsaga-shimmer 1.4s ease-in-out infinite;
        border-radius: var(--ss-radius-sm);
}

/* ---------- Lazy image fade-in ---------- */
img[data-src],
img[loading="lazy"] {
        opacity: 0;
        transition: opacity 0.4s ease;
}
img.is-loaded,
img:not([data-src]) {
        opacity: 1;
}

/* ---------- Smooth scroll ---------- */
html {
        scroll-behavior: smooth;
}

/* ---------- Focus-visible ring (accessibility) ---------- */
:focus-visible {
        outline: 2px solid var(--ss-terracotta);
        outline-offset: 3px;
        border-radius: 4px;
}

/* ---------- Print styles ---------- */
@media print {
        .ss-header,
        .ss-mobile-nav,
        .gsaga-wa-fab,
        .ss-panel { display: none !important; }
        body { background: #fff; }
}

/* ==========================================================================
   v3.1 ADDITIONS — Ticker · Hero Slider · Apply Dropdowns · Rating gate
   ========================================================================== */

/* ---------- Announcement ticker ---------- */
@keyframes gsaga-scroll {
        0%   { transform: translateX(0); }
        100% { transform: translateX(-50%); }
}
.gsaga-ticker {
        background: var(--ss-terracotta);
        color: #fff;
        font-size: 13px;
        font-weight: 600;
        line-height: 1;
        padding: 9px 0;
        overflow: hidden;
        white-space: nowrap;
        letter-spacing: 0.25px;
        user-select: none;
}
.gsaga-ticker__track {
        display: inline-flex;
        animation: gsaga-scroll 30s linear infinite;
        white-space: nowrap;
}
.gsaga-ticker:hover .gsaga-ticker__track { animation-play-state: paused; }
.gsaga-ticker__seg {
        display: inline-block;
        padding-right: 80px;
}

/* ---------- Hero image slider ---------- */
.ss-hero__slider { position: relative; }
.ss-hero__slide-img {
        position: absolute; inset: 0;
        width: 100%; height: 100%; object-fit: cover;
        opacity: 0;
        transition: opacity 0.8s ease;
}
.ss-hero__slide-img.is-active { opacity: 1; }
/* Keep the container height via the first img in flow */
.ss-hero__slider > .ss-hero__slide-img:first-child {
        position: relative;
        opacity: 0;
}
.ss-hero__slider > .ss-hero__slide-img:first-child.is-active { opacity: 1; }
.ss-hero__dots {
        position: absolute; bottom: 10px; right: 12px;
        display: flex; gap: 6px; z-index: 3;
}
.ss-hero__dot {
        width: 9px; height: 9px; border-radius: 50%;
        background: rgba(255,255,255,.5); border: none; padding: 0;
        cursor: pointer; transition: background .2s, transform .2s;
}
.ss-hero__dot.is-active { background: #fff; transform: scale(1.3); }

/* ---------- Apply form — select + day pills ---------- */
.ss-select {
        appearance: none;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238c7a6e' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 14px center;
        padding-right: 40px;
        cursor: pointer;
}
.ss-apply-days {
        display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px;
}
.ss-apply-day-check {
        display: inline-flex; align-items: center; gap: 6px;
        background: #fff; border: 1px solid var(--ss-line-2);
        padding: 7px 13px; border-radius: 999px;
        font-size: 13px; color: var(--ss-ink-2); cursor: pointer;
        transition: border-color .15s, background .15s, color .15s;
        user-select: none;
}
.ss-apply-day-check input { display: none; }
.ss-apply-day-check:has(input:checked) {
        background: var(--ss-terracotta); border-color: var(--ss-terracotta); color: #fff;
}

/* ---------- Loading skeleton on image slots ---------- */
.ss-vendor-card__img,
.ss-food-card__img,
.ss-vendor-hero,
.ss-hero__art,
.ss-modal__img {
        background: linear-gradient(90deg, var(--ss-cream-2) 25%, #ede5d3 50%, var(--ss-cream-2) 75%);
        background-size: 800px 100%;
        animation: gsaga-shimmer 1.4s ease-in-out infinite;
}
.ss-vendor-card__img img.is-loaded,
.ss-food-card__img img.is-loaded,
.ss-vendor-hero img.is-loaded,
.ss-hero__slide-img.is-loaded,
.ss-modal__img img.is-loaded {
        animation: none;
}

/* ---------- v3.3 final premium overrides ---------- */
body.gsaga-app {
        background:
                radial-gradient(circle at 12% 0%, rgba(216,167,80,.13), transparent 28rem),
                linear-gradient(180deg, #fffaf2 0%, var(--ss-cream) 52%, #fffaf3 100%);
}
.ss-header {
        background: rgba(255,250,242,.86);
        box-shadow: 0 10px 28px -24px rgba(20,17,15,.45);
}
.ss-hero {
        border-bottom: 0;
        background:
                linear-gradient(135deg, rgba(20,17,15,.96), rgba(54,31,21,.92)),
                var(--ss-charcoal);
        color: #fff7ea;
}
.ss-hero::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 72px;
        background: linear-gradient(180deg, transparent, rgba(255,250,242,.98));
        pointer-events: none;
}
.ss-hero__inner {
        min-height: 520px;
        align-items: center;
}
.ss-hero__pill {
        background: rgba(216,167,80,.16);
        color: #ffe0a2;
        border: 1px solid rgba(216,167,80,.24);
}
.ss-hero__title { color: #fffaf2; }
.ss-hero__lead { color: rgba(255,250,242,.78); }
.ss-hero__search {
        background: rgba(255,255,255,.94);
        border-color: rgba(255,255,255,.18);
}
.ss-filters {
        position: sticky;
        top: 69px;
        z-index: 20;
        background: rgba(255,250,242,.9);
        backdrop-filter: blur(14px) saturate(150%);
        -webkit-backdrop-filter: blur(14px) saturate(150%);
}
.ss-section--compact { padding: 28px 0 34px; }
.ss-premium-food-card .ss-qty button { width: 34px; height: 34px; }
.ss-premium-food-card .ss-qty span { min-width: 26px; }

@media (max-width: 760px) {
        .ss-hero__inner {
                min-height: auto;
                padding: 34px 20px 46px;
                gap: 22px;
        }
        .ss-hero__title { font-size: 36px; }
        .ss-filters { top: 57px; }
}

/* ---------- v3.4 mobile/header controls ---------- */
html,
body.gsaga-app {
        max-width: 100%;
        overflow-x: hidden;
}

.ss-header__inner {
        min-height: 66px;
}

.ss-area-select {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 168px;
        max-width: 240px;
        margin-left: 4px;
}

.ss-area-select__label {
        color: var(--ss-muted);
        font-size: 11px;
        font-weight: 800;
        line-height: 1;
        text-transform: uppercase;
}

.ss-area-select__control {
        width: 100%;
        height: 38px;
        border: 1px solid rgba(216,200,170,.9);
        border-radius: 14px;
        background: #fff;
        color: var(--ss-ink);
        font-family: var(--ss-font-sans);
        font-size: 13px;
        font-weight: 800;
        outline: 0;
        padding: 0 34px 0 12px;
        cursor: pointer;
        box-shadow: 0 10px 24px -22px rgba(20,17,15,.7);
}

.ss-area-select__control:focus {
        border-color: var(--ss-terracotta);
        box-shadow: 0 0 0 3px rgba(242,106,33,.13);
}

.ss-login-btn {
        min-height: 40px;
        padding-inline: 14px;
}

.ss-login-btn__icon {
        flex: 0 0 auto;
}

.ss-filters .ss-container {
        padding-top: 4px;
        padding-bottom: 4px;
}

.ss-filters .ss-filter-row {
        align-items: center;
}

.ss-filters .ss-chip {
        box-shadow: 0 8px 18px -18px rgba(20,17,15,.55);
}

.ss-faq-band__intro {
        max-width: 760px;
        margin: 0 auto 24px;
        text-align: center;
}

.ss-faq-band__intro span {
        display: inline-flex;
        margin-bottom: 8px;
        padding: 6px 12px;
        border-radius: 999px;
        background: rgba(216,167,80,.16);
        color: #8a6014;
        font-size: 11px;
        font-weight: 900;
        text-transform: uppercase;
}

.ss-faq-band__intro h2 {
        margin: 0 0 8px;
        font-family: var(--ss-font-display);
        font-size: clamp(26px, 4vw, 42px);
        line-height: 1.05;
}

.ss-faq-band__intro p {
        margin: 0;
        color: var(--ss-ink-2);
}

.ss-ops-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
}

.ss-ops-card {
        position: relative;
        overflow: hidden;
        min-height: 210px;
        border: 1px solid rgba(216,200,170,.85);
        border-radius: 20px;
        background: linear-gradient(180deg, #fff, #fff8ed);
        padding: 22px;
        box-shadow: var(--ss-premium-shadow);
}

.ss-ops-card::after {
        content: "";
        position: absolute;
        right: -36px;
        top: -36px;
        width: 110px;
        height: 110px;
        border-radius: 50%;
        background: rgba(242,106,33,.1);
}

.ss-ops-card__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border-radius: 14px;
        background: var(--ss-charcoal);
        color: #fff;
        font-weight: 900;
        font-size: 13px;
        margin-bottom: 16px;
}

.ss-ops-card h3 {
        margin: 0 0 8px;
        color: var(--ss-ink);
        font-size: 18px;
        line-height: 1.2;
}

.ss-ops-card p {
        margin: 0;
        color: var(--ss-ink-2);
        font-size: 14px;
        line-height: 1.55;
}

@media (max-width: 920px) {
        .ss-header__inner {
                gap: 10px;
        }

        .ss-area-select {
                flex: 1 1 auto;
                min-width: 118px;
                max-width: none;
        }

        .ss-nav {
                display: none;
        }

        .ss-ops-grid {
                grid-template-columns: 1fr;
        }
}

@media (max-width: 760px) {
        .ss-header__inner {
                padding: 9px 12px;
        }

        .ss-brand {
                flex: 0 0 auto;
        }

        .ss-brand__mark {
                width: 38px;
                height: 38px;
                border-radius: 12px;
        }

        .ss-area-select__label {
                font-size: 10px;
        }

        .ss-area-select__control {
                height: 36px;
                border-radius: 12px;
                font-size: 12px;
                padding-left: 10px;
        }

        .ss-header__actions {
                gap: 6px;
        }

        .ss-header__actions .ss-login-btn {
                display: inline-flex;
                width: 42px;
                min-width: 42px;
                height: 42px;
                padding: 0;
                border-radius: 14px;
        }

        .ss-login-btn [data-login-label] {
                position: absolute;
                width: 1px;
                height: 1px;
                overflow: hidden;
                clip: rect(0,0,0,0);
        }

        .ss-icon-btn {
                width: 42px;
                height: 42px;
                border-radius: 14px;
                background: #fff;
                border-color: rgba(216,200,170,.7);
        }

        .ss-filters {
                top: 60px;
        }

        .ss-filters .ss-filter-row {
                flex-direction: row;
                align-items: center;
        }

        .ss-faq-band {
                padding-top: 24px;
        }
}

@media (max-width: 390px) {
        .ss-area-select {
                min-width: 96px;
        }

        .ss-area-select__control {
                font-size: 11px;
        }
}

/* =========================================================================
   v3.5 TGS EDITION — NEW STYLES
   Appended below existing styles for backward compatibility.
   ========================================================================= */

/* ---- Sticky header scroll shadow ---- */
.ss-header {
        transition: box-shadow 0.2s ease;
}
.ss-header--scrolled {
        box-shadow: 0 2px 16px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.06);
}

/* ---- City selector (shares .ss-area-select base styles) ---- */
/* Hide city selector by default — JS shows it only when multiple cities exist */
[data-city-select-wrap] {
        display: none;
}

/* Adjust both selectors when city selector is visible */
[data-city-select-wrap][style*="display: "],
[data-city-select-wrap][style*="display:"] {
        display: flex;
}

/* On very small screens, stack selectors or shrink them */
@media (max-width: 600px) {
        .ss-city-select .ss-area-select__label,
        .ss-deliver-select .ss-area-select__label {
                font-size: 9px;
        }
        .ss-city-select .ss-area-select__control,
        .ss-deliver-select .ss-area-select__control {
                font-size: 11px;
                min-width: 82px;
        }
}

/* ---- Footer social icons ---- */
.ss-footer__social {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin: 12px 0 10px;
}
.ss-footer__social a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: rgba(255,255,255,.1);
        color: rgba(255,255,255,.75);
        transition: background .18s, color .18s, transform .18s;
        text-decoration: none;
}
.ss-footer__social a:hover,
.ss-footer__social a:focus {
        background: rgba(255,255,255,.2);
        color: #fff;
        transform: translateY(-2px);
}

/* ---- Footer policy links ---- */
.ss-footer__links {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        margin-top: 10px;
}
.ss-footer__links a {
        font-size: 12px;
        color: rgba(255,255,255,.6);
        text-decoration: none;
        transition: color .15s;
}
.ss-footer__links a:hover,
.ss-footer__links a:focus {
        color: rgba(255,255,255,.9);
        text-decoration: underline;
}

/* ---- Policy modal ---- */
.ss-policy-modal[data-open="1"] {
        display: flex;
}
.ss-policy-modal .ss-modal__backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.5);
        z-index: 0;
}
.ss-policy-modal__dialog {
        position: relative;
        z-index: 1;
        max-width: 720px;
        max-height: 85vh;
        overflow-y: auto;
        border-radius: 16px;
        background: #fff;
        padding: 32px 32px 40px;
        display: flex;
        flex-direction: column;
        margin: auto;
}
.ss-policy-modal__body {
        display: flex;
        flex-direction: column;
        gap: 0;
}
.ss-policy-modal__body h2 {
        font-family: var(--ss-serif);
        font-size: 1.5rem;
        color: var(--ss-ink);
        margin: 0 0 20px;
        padding-right: 24px;
}
/* Rich text / prose styles within policy content */
.ss-policy-content {
        font-size: 15px;
        line-height: 1.75;
        color: var(--ss-ink-mid);
}
.ss-policy-content h1,
.ss-policy-content h2,
.ss-policy-content h3 {
        font-family: var(--ss-serif);
        color: var(--ss-ink);
        margin: 20px 0 8px;
}
.ss-policy-content p {
        margin: 0 0 12px;
}
.ss-policy-content ul,
.ss-policy-content ol {
        padding-left: 20px;
        margin: 0 0 12px;
}
.ss-policy-content li {
        margin-bottom: 6px;
}
.ss-policy-content a {
        color: var(--ss-chilli);
        text-decoration: underline;
}
.ss-policy-content strong {
        color: var(--ss-ink);
        font-weight: 600;
}

@media (max-width: 600px) {
        .ss-policy-modal__dialog {
                max-width: 100%;
                max-height: 90vh;
                border-radius: 16px 16px 0 0;
                margin: auto 0 0;
                padding: 24px 20px 32px;
        }
}