@mohasinac/appkit 4.63.5 → 4.64.0

package/dist/features/events/utils/event-charts.js

@@ -0,0 +1,172 @@
+/**
+ * Chart specs for event pages — pure builders, no React, no recharts.
+ *
+ * Kept free of any import that reaches the DOM so a Server Component can call
+ * these and hand the result to `<Chart>`, whose own `"use client"` boundary is
+ * internal (`chart-spec.ts` is deliberately the same shape of module).
+ *
+ * ## 🛑 EVERY NUMBER HERE IS MEASURED, NOT ILLUSTRATIVE
+ *
+ * A chart asserts "we measured this". So each builder returns `null` rather
+ * than a plausible-looking shape when it has nothing real to plot — an absent
+ * chart says "not enough data yet", a flat or invented one says "we measured,
+ * and this is the result", which is a different and false claim.
+ *
+ * @tag domain:events
+ * @tag layer:utils
+ */
+import { calculateDiscount } from "../../promotions/schemas/firestore.js";
+/** A poll needs at least one real vote before a bar chart means anything. */
+const MIN_VOTES = 1;
+/**
+ * Poll results as bars.
+ *
+ * The data already existed and was rendered as the plain string
+ * "12 votes (34%)" — `getEventPollResults` computes both server-side and
+ * `EventLeaderboard` printed them in a flex row. This is the same numbers,
+ * shaped so the differences between options are visible at a glance.
+ */
+export function buildPollChart(
+// Structural, not the full `PollConfig`: this reads `options` and nothing
+// else, and the page carries a narrower local declaration of its own.
+pollConfig, results) {
+    if (!pollConfig?.options?.length || !results?.length)
+        return null;
+    const byId = new Map(results.map((r) => [r.optionId, r.count]));
+    const total = results.reduce((sum, r) => sum + r.count, 0);
+    if (total < MIN_VOTES)
+        return null;
+    return {
+        kind: "bar",
+        title: "Votes so far",
+        categories: pollConfig.options.map((o) => o.label),
+        series: [{ label: "Votes", values: pollConfig.options.map((o) => byId.get(o.id) ?? 0) }],
+        unit: "votes",
+        caption: `${total} vote${total === 1 ? "" : "s"} counted.`,
+    };
+}
+/**
+ * The basket sizes the savings chart compares across.
+ *
+ * 🛑 THE RANGE IS CHOSEN TO SHOW THE CROSSOVER, which is the only thing this
+ * chart can usefully tell someone. At ₹2,000 the two 10% codes TIE at ₹200 and
+ * their caps are irrelevant; an uncapped 5% only overtakes a ₹500-capped 10%
+ * once the basket passes ₹10,000. A single-basket bar chart would show three
+ * bars, two of them identical, and teach nothing.
+ */
+const BASKET_SIZES = [1000, 2000, 5000, 12000];
+const INR = new Intl.NumberFormat("en-IN", { maximumFractionDigits: 0 });
+/**
+ * What each cashback coupon actually saves, across basket sizes.
+ *
+ * 🛑 COMPUTED WITH THE REAL `calculateDiscount`, never a re-derived formula.
+ * That function is where `maxDiscount`, `minPurchase` and the tier table are
+ * honoured; computing the percentage inline here would silently ignore all three and
+ * overstate every capped code. Root Cause #75 is a money rule hand-copied into
+ * six places, where the copies never learned about a branch added later.
+ *
+ * 🛑 `free_shipping` AND `buy_x_get_y` ARE EXCLUDED, not plotted at zero.
+ * `calculateDiscount` returns 0 for free shipping BY DESIGN — the waiver is a
+ * shipping line, not a subtotal discount — and a BOGO's value depends on the
+ * basket's composition, not its total (₹500 on 4x₹500, ₹0 on 2x₹1,000). A bar
+ * at zero for either would read as "this code saves you nothing", which is a
+ * lie by omission. They belong in the caption, and that is where they go.
+ */
+/**
+ * 🛑 TAKES THE PUBLIC PROJECTION, NOT THE DOCUMENT — and still calls the
+ * real `calculateDiscount`.
+ *
+ * The event page only ever holds `AttachedCoupon`, the allow-list
+ * projection (Root Cause #70 — the full document carries fields no public
+ * surface should see). That projection carries exactly the four facts the
+ * calculator needs, under different names: `type`, `discountValue`,
+ * `maxDiscount`, `minPurchase`.
+ *
+ * So this MAPS NAMES and delegates. The tempting shortcut — computing
+ * the percentage inline right here, because the projection makes it
+ * easy — is precisely Root Cause #75: a money rule re-derived at a call
+ * site, which then never learns about the cap, the minimum or the tier
+ * table the real function honours.
+ */
+function toCalculable(c) {
+    return {
+        type: c.type,
+        discount: {
+            value: c.discountValue,
+            maxDiscount: c.maxDiscount,
+            minPurchase: c.minPurchase,
+        },
+    };
+}
+export function buildCouponSavingsChart(coupons) {
+    const plottable = coupons.filter((c) => c.type === "percentage" || c.type === "fixed");
+    if (plottable.length === 0)
+        return null;
+    const excluded = coupons
+        .filter((c) => !plottable.includes(c))
+        .map((c) => c.code);
+    const series = plottable.map((coupon) => ({
+        label: coupon.code,
+        values: BASKET_SIZES.map((basket) => Math.round(calculateDiscount(toCalculable(coupon), basket))),
+    }));
+    // Every code saving nothing at every size means the minimums are all above
+    // our largest basket — a chart of four empty groups.
+    if (series.every((s) => s.values.every((v) => v === 0)))
+        return null;
+    const captionParts = ["One code per order — this is a choose-one comparison."];
+    if (excluded.length) {
+        captionParts.push(`${excluded.join(" and ")} ${excluded.length === 1 ? "is" : "are"} not shown: ` +
+            `their value depends on delivery or on what is in the basket, not on the total.`);
+    }
+    return {
+        kind: "groupedBar",
+        title: "What each code saves",
+        categories: BASKET_SIZES.map((b) => `₹${INR.format(b)}`),
+        series,
+        unit: "₹",
+        caption: captionParts.join(" "),
+    };
+}
+/**
+ * Likes over time. Data comes from `getLikeTrend`, which returns `null` below
+ * `LIKE_TREND_MIN_POINTS` so a two-like event plots nothing rather than a flat
+ * line with axes.
+ */
+export function buildLikeTrendChart(trend) {
+    if (!trend)
+        return null;
+    return {
+        kind: "area",
+        title: "Interest over the last fortnight",
+        categories: trend.categories,
+        series: [{ label: "Likes", values: trend.values }],
+        unit: "likes",
+        caption: "Likes received per day.",
+    };
+}
+/**
+ * Time elapsed in the sale window, and redemptions against a real cap.
+ *
+ * 🛑 `claimedPercent` IS null UNLESS A REAL CAP EXISTS. `usage.totalLimit` is
+ * optional, and an uncapped coupon has no denominator — rendering a progress
+ * bar against an invented 100 would show a bar filling toward a limit nobody
+ * set. Absent is the honest state and the caller renders only the countdown.
+ */
+export function buildSaleProgress(startsAt, endsAt, coupon, now = new Date()) {
+    if (!startsAt || !endsAt)
+        return null;
+    const start = startsAt.getTime();
+    const end = endsAt.getTime();
+    if (!(end > start))
+        return null;
+    const elapsed = ((now.getTime() - start) / (end - start)) * 100;
+    const limit = coupon?.usage?.totalLimit;
+    const used = coupon?.usage?.currentUsage ?? 0;
+    const hasCap = typeof limit === "number" && limit > 0;
+    return {
+        elapsedPercent: Math.min(100, Math.max(0, Math.round(elapsed))),
+        endsAt: now.getTime() < end ? endsAt : null,
+        claimedPercent: hasCap ? Math.min(100, Math.round((used / limit) * 100)) : null,
+        claimedLabel: hasCap ? `${INR.format(used)} of ${INR.format(limit)} claimed` : null,
+    };
+}

package/dist/features/faq/constants/help-guides.js

@@ -52,6 +52,15 @@ export const FAQ_CATEGORY_HELP_GUIDE = {
     // live.
     scam_awareness: { path: "/help/account", label: "Account & Safety guide" },
     fees_and_taxes: { path: "/help/shopping", label: "Shopping & Checkout guide" },
+    /*
+     * The BUYER-facing badge page, not `/seller-guide`.
+     *
+     * This map sits on the public FAQ page, so its audience is a visitor rather
+     * than a seller — and "what does Trusted Seller mean" is the question they
+     * are most likely to have arrived with. A seller reading these FAQs still
+     * gets there: the badge page links on to the seller guide.
+     */
+    selling: { path: "/help/seller-badges", label: "What seller badges mean" },
     technical_support: null,
     general: null,
 };

package/dist/features/faq/schemas/firestore.js

@@ -31,6 +31,7 @@ export const FAQ_CATEGORY_LABELS = {
     general: "General Questions",
     scam_awareness: "Scam Awareness",
     fees_and_taxes: "Fees & Taxes",
+    selling: "Selling & Seller Badges",
 };
 export const DEFAULT_FAQ_DATA = {
     showOnHomepage: false,

package/dist/features/faq/types/index.d.ts

@@ -1,5 +1,24 @@
 export type FAQAnswerFormat = "plain" | "markdown" | "html";
 export type FAQCategory = "orders_payment" | "shipping_delivery" | "returns_refunds" | "product_information" | "account_security" | "technical_support" | "general" | "scam_awareness"
+/**
+ * Questions asked by SELLERS, and the buyer-facing questions about them —
+ * how to open a store, what the badges mean, how standing is earned and
+ * lost.
+ *
+ * Kept out of `general` for the reason `fees_and_taxes` was: these have a
+ * distinct audience. A buyer browsing FAQs is not looking for "how do I
+ * list an item", and a seller looking for it should not have to read past
+ * twenty buyer questions to find it.
+ *
+ * 🛑 Adding a member here is FIVE coordinated edits, three of which are
+ * compile-checked and two of which are not: this union,
+ * `FAQ_CATEGORY_LABELS`, the `Record<FAQCategory, …>` in
+ * `constants/help-guides.ts` — and then the HARDCODED category arrays in
+ * `src/app/[locale]/faqs/page.tsx` and `faqs/[category]/page.tsx`, which
+ * nothing type-checks. A comment in those files records `fees_and_taxes`
+ * needing exactly this.
+ */
+ | "selling"
 /**
  * D6b. Money questions, kept out of `orders_payment` on purpose: that
  * category is about an ORDER (where is it, how do I pay, can I cancel),

package/dist/features/homepage/components/BrandsSection.js

@@ -29,7 +29,31 @@ function BrandLogo({ brand }) {
     const iconSrc = brand.display?.icon;
     const coverImage = brand.display?.coverImage;
     const initial = brand.name[0]?.toUpperCase() ?? "?";
-    return (_jsxs(Link, { href: ROUTES.PUBLIC.CATEGORY_DETAIL(brand.slug), className: "flex h-32 w-36 flex-col items-center justify-center gap-[var(--appkit-space-2)] rounded-xl border p-[var(--appkit-space-3)] shadow-sm transition-all hover:border-primary-300 hover:shadow-md border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] md:h-40", children: [iconSrc || coverImage ? (_jsx(Image, { src: resolveMediaUrl(iconSrc ?? coverImage), alt: brand.name, width: 64, height: 64, className: "h-16 w-16 rounded object-contain" })) : (_jsx(Row, { textWeight: "bold", textSize: "sm", className: "h-16 w-16 bg-primary-100 text-primary-700 dark:bg-primary-900 dark:text-primary-300", align: "center", justify: "center", rounded: "lg", children: initial })), _jsx(Text, { className: "w-full truncate", color: "muted", size: "xs", weight: "medium", align: "start", children: brand.name })] }));
+    return (_jsxs(Link
+    /*
+     * 🛑 BRAND_DETAIL, not CATEGORY_DETAIL.
+     *
+     * A brand IS a `categoryType: "brand"` row, so `/categories/brand-hasbro`
+     * resolves just as `/brands/brand-hasbro` does — and both are indexable.
+     * This component was the one surface linking brands by the category path
+     * while every other surface used `/brands/…`, so the homepage shipped two
+     * different URLs for the same entity and split its signals between them.
+     * `/brands/{slug}` is the one the sitemap advertises and the one the
+     * brand page declares canonical.
+     */
+    , { 
+        /*
+         * 🛑 BRAND_DETAIL, not CATEGORY_DETAIL.
+         *
+         * A brand IS a `categoryType: "brand"` row, so `/categories/brand-hasbro`
+         * resolves just as `/brands/brand-hasbro` does — and both are indexable.
+         * This component was the one surface linking brands by the category path
+         * while every other surface used `/brands/…`, so the homepage shipped two
+         * different URLs for the same entity and split its signals between them.
+         * `/brands/{slug}` is the one the sitemap advertises and the one the
+         * brand page declares canonical.
+         */
+        href: ROUTES.PUBLIC.BRAND_DETAIL(brand.slug), className: "flex h-32 w-36 flex-col items-center justify-center gap-[var(--appkit-space-2)] rounded-xl border p-[var(--appkit-space-3)] shadow-sm transition-all hover:border-primary-300 hover:shadow-md border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] md:h-40", children: [iconSrc || coverImage ? (_jsx(Image, { src: resolveMediaUrl(iconSrc ?? coverImage), alt: brand.name, width: 64, height: 64, className: "h-16 w-16 rounded object-contain" })) : (_jsx(Row, { textWeight: "bold", textSize: "sm", className: "h-16 w-16 bg-primary-100 text-primary-700 dark:bg-primary-900 dark:text-primary-300", align: "center", justify: "center", rounded: "lg", children: initial })), _jsx(Text, { className: "w-full truncate", color: "muted", size: "xs", weight: "medium", align: "start", children: brand.name })] }));
 }
 export function BrandsSection({ title = "Top Brands", subtitle, limit = 12, viewMoreHref, viewMoreLabel = "All brands →", className = "", initialItems, cta, filters, autoScroll = true, scrollInterval = 4000, loop = true, }) {
     const themed = { textPrimary: THEMED_TEXT_PRIMARY };

package/dist/features/homepage/components/HeroCarousel.js

@@ -72,7 +72,16 @@ function getSlideHeightClass(height) {
 /** Renders the slide background — image, video, solid colour, or gradient. */
 function SlideBackground({ bg, legacy, mobileLegacy, isMobile, priority, }) {
     const effectiveBg = bg ?? (legacy ? { type: legacy.type, url: legacy.url } : undefined);
-    const mobileUrl = effectiveBg?.mobileUrl ?? (isMobile && mobileLegacy ? mobileLegacy.url : undefined);
+    /*
+     * 🛑 Both halves are gated on `isMobile`. `effectiveBg.mobileUrl` was read
+     * UNCONDITIONALLY, so any slide carrying a mobile crop served that
+     * phone-sized image to desktop too — a narrow picture stretched across a
+     * 1920px hero, and the desktop asset never loaded at all. The legacy half
+     * was already gated correctly, which is what made the asymmetry easy to miss.
+     */
+    const mobileUrl = isMobile
+        ? (effectiveBg?.mobileUrl ?? mobileLegacy?.url)
+        : undefined;
     const src = mobileUrl ?? effectiveBg?.url ?? "";
     if (!effectiveBg) {
         return _jsx(Div, { className: `${POSITION_FILL} bg-neutral-900` });
@@ -111,17 +120,25 @@ function CardBackground({ bg }) {
     return null;
 }
 function CarouselCardRenderer({ card, isMobile, push, }) {
-    const mobileZone = card.mobileZone;
-    const gridPos = isMobile && mobileZone
-        ? { gridRow: mobileZone <= 3 ? 1 : 2, gridColumn: mobileZone <= 3 ? mobileZone : mobileZone - 3 }
-        : resolveZoneToGrid(card.zone);
+    /*
+     * 🛑 On mobile the card takes NO explicit grid placement at all — the parent
+     * is a one-column auto-flow grid, so source order is the layout.
+     *
+     * The old branch mapped `mobileZone` to a `gridColumn`, which against a
+     * single declared column created an implicit column 2 and stacked every
+     * card into one cell. `mobileZone` was also typed `2 | 5` only, so it could
+     * not express a six-card slide even in principle. Zones are a desktop
+     * concept; a phone has one column and nothing to place into.
+     */
+    const gridPos = isMobile ? null : resolveZoneToGrid(card.zone);
     const hoverClass = getHoverClass(card.hover?.effect);
     const textAlign = card.content?.textAlign ?? "left";
     // audit-content-alignment-ok: admin-configurable per-card textAlign field, defaults to "left" — not a hardcoded center
     const textAlignClass = textAlign === "center" ? "text-center" : textAlign === "right" ? "text-right" : "text-left";
     return (_jsxs(Div, { className: `relative overflow-hidden transition-all duration-300 ${hoverClass}`, rounded: "lg", shadow: "lg", style: {
-            gridRow: String(gridPos.gridRow),
-            gridColumn: String(gridPos.gridColumn),
+            ...(gridPos
+                ? { gridRow: String(gridPos.gridRow), gridColumn: String(gridPos.gridColumn) }
+                : {}),
             minHeight: isMobile ? 100 : 140,
         }, children: [_jsx(CardBackground, { bg: card.background }), !card.isButtonOnly && (_jsxs(_Fragment, { children: [_jsx(Scrim, { direction: "bottom-up", intensity: "strong", className: POSITION_FILL }), _jsxs(Stack, { justify: "end", className: `${POSITION_FILL} md:p-[1.5rem] ${textAlignClass}`, padding: "xs", children: [card.content?.eyebrow && (_jsx(Text, { color: "inverse", shadow: "sm", className: "text-[10px] opacity-70 mb-0.5 tracking-wider", mdSize: "xs", transform: "uppercase", children: card.content.eyebrow })), card.content?.subtitle && (_jsx(Text, { color: "inverse", shadow: "sm", className: "hidden md:block opacity-90 mb-0.5 md:mb-2", mdSize: "sm", size: "xs", children: card.content.subtitle })), card.content?.title && (
                             // level={3}: a card sits INSIDE a slide, so it is subordinate to
@@ -202,15 +219,35 @@ export function HeroCarousel({ initialSlides, push, height, defaultAutoplayDelay
         onMouseEnter: pauseOnHover ? () => setIsPaused(true) : undefined, onMouseLeave: pauseOnHover ? () => setIsPaused(false) : undefined, onFocus: () => setIsPaused(true), onBlur: () => setIsPaused(false), tabIndex: 0, children: [_jsx(Div, { "aria-live": "polite", "aria-atomic": "true", className: "sr-only", children: `Slide ${currentSlide + 1} of ${slides.length}` }), _jsx(Div, { className: POSITION_FILL, children: _jsx(Div, { layout: "flex", ref: slidesRef, onScroll: handleSlidesScroll, className: "h-full overflow-x-auto scroll-smooth snap-x snap-mandatory [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", style: { gap: 0 }, children: slides.map((slide, slideIndex) => {
                         const slideHeightClass = getSlideHeightClass(slide.settings?.height);
                         const hasCards = slide.cards && slide.cards.length > 0;
-                        return (_jsxs(Div, { className: `snap-start flex-none w-full relative self-stretch bg-neutral-900 ${slideHeightClass}`, children: [_jsx(Div, { className: "absolute bottom-2 left-2 z-10", children: _jsx(OwnerQuickActions, { resource: "CAROUSEL", placement: "card", recordLabel: slide.title ?? `Slide ${slideIndex + 1}`, editHref: String(ROUTES.ADMIN.CAROUSEL_EDIT(slide.id)) }) }), _jsx(Div, { className: POSITION_FILL, children: _jsx(SlideBackground, { bg: slide.background, legacy: slide.media, mobileLegacy: slide.mobileMedia, isMobile: isMobile, priority: slideIndex === 0 }) }), slide.overlay && (_jsxs(Div, { layout: "flex-col", align: "start", justify: "center", className: `${POSITION_FILL} text-left md:px-[4rem] lg:px-[8rem]`, padding: "x-lg", children: [slide.overlay.subtitle && (_jsx(Text, { color: "inverse", shadow: "sm", className: "stagger-1 opacity-80 mb-1 md:mb-2 tracking-widest", mdSize: "sm", size: "xs", transform: "uppercase", children: slide.overlay.subtitle })), slide.overlay.title && (
+                        return (_jsxs(Div, { className: `snap-start flex-none w-full relative self-stretch bg-neutral-900 ${slideHeightClass}`, children: [_jsx(Div, { className: "absolute bottom-2 left-2 z-10", children: _jsx(OwnerQuickActions, { resource: "CAROUSEL", placement: "card", 
+                                        /* Sits on the slide photograph — without this it renders
+                                         * the light `surface-elevated` chip, a pale rounded box
+                                         * floating on the artwork. `onMedia` selects the dark
+                                         * translucent backdrop that variant exists for. */
+                                        onMedia: true, recordLabel: slide.title ?? `Slide ${slideIndex + 1}`, editHref: String(ROUTES.ADMIN.CAROUSEL_EDIT(slide.id)) }) }), _jsx(Div, { className: POSITION_FILL, children: _jsx(SlideBackground, { bg: slide.background, legacy: slide.media, mobileLegacy: slide.mobileMedia, isMobile: isMobile, priority: slideIndex === 0 }) }), slide.overlay && slide.overlay.enabled !== false && (_jsxs(Div, { layout: "flex-col", align: "start", justify: "center", className: `${POSITION_FILL} text-left md:px-[4rem] lg:px-[8rem]`, padding: "x-lg", children: [slide.overlay.subtitle && (_jsx(Text, { color: "inverse", shadow: "sm", className: "stagger-1 opacity-80 mb-1 md:mb-2 tracking-widest", mdSize: "sm", size: "xs", transform: "uppercase", children: slide.overlay.subtitle })), slide.overlay.title && (
                                         // level={2}, NOT 1. The welcome section above this
                                         // carousel owns the page's single <h1>; a carousel that
                                         // emits one <h1> per slide gives the document as many
                                         // h1s as it has slides. `size` is independent of `level`,
                                         // so this changes the outline and not one pixel.
-                                        _jsx(Heading, { color: "inverse", level: 2, className: "stagger-2 font-display ! mb-2 md:mb-4 break-words", size: "4xl", shadow: "2xl", mdSize: "6xl", lgSize: "8xl", children: slide.overlay.title })), slide.overlay.description && (_jsx(Text, { color: "inverse", shadow: "sm", className: "stagger-3 opacity-90 mb-4 md:mb-8 max-w-2xl", mdSize: "lg", lgSize: "xl", size: "sm", children: slide.overlay.description })), slide.overlay.button && (_jsx(Div, { className: "stagger-4", children: _jsx(Button, { variant: slide.overlay.button.variant, size: "sm", onClick: makeButtonClickHandler(slide.overlay.button.link, slide.overlay.button.openInNewTab, push), children: slide.overlay.button.text }) }))] })), hasCards && (_jsx(Div, { className: `${POSITION_FILL} grid gap-[var(--appkit-space-2)] md:gap-[var(--appkit-space-4)] md:p-[var(--appkit-space-8)]`, padding: "md", style: {
-                                        gridTemplateRows: "repeat(2, 1fr)",
+                                        _jsx(Heading, { color: "inverse", level: 2, 
+                                            /*
+                                             * 🛑 `max-w-[16ch]` is load-bearing, not taste. The box
+                                             * is `absolute inset-0`, so with no cap the title runs
+                                             * the full slide width minus padding and an 8xl
+                                             * headline wraps into a wall. A character-based cap
+                                             * tracks the font size instead of guessing at pixels.
+                                             *
+                                             * `text-balance` evens the lines so a two-line title
+                                             * does not leave one word stranded on line two.
+                                             *
+                                             * (A stray bare `!` token sat in this className and
+                                             * generated nothing — removed.)
+                                             */
+                                            className: "stagger-2 font-display mb-2 md:mb-4 break-words text-balance max-w-[16ch] md:max-w-[18ch] lg:max-w-[20ch]", size: "4xl", shadow: "2xl", mdSize: "6xl", lgSize: "8xl", children: slide.overlay.title })), slide.overlay.description && (_jsx(Text, { color: "inverse", shadow: "sm", className: "stagger-3 opacity-90 mb-4 md:mb-8 max-w-2xl", mdSize: "lg", lgSize: "xl", size: "sm", children: slide.overlay.description })), slide.overlay.button && (_jsx(Div, { className: "stagger-4", children: _jsx(Button, { variant: slide.overlay.button.variant, size: "sm", onClick: makeButtonClickHandler(slide.overlay.button.link, slide.overlay.button.openInNewTab, push), children: slide.overlay.button.text }) }))] })), hasCards && (_jsx(Div, { className: `${POSITION_FILL} grid gap-[var(--appkit-space-2)] md:gap-[var(--appkit-space-4)] md:p-[var(--appkit-space-8)] overflow-y-auto`, padding: "md", style: {
+                                        gridTemplateRows: isMobile ? "auto" : "repeat(2, 1fr)",
                                         gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)",
+                                        gridAutoFlow: "row",
                                         alignContent: "center",
                                         alignItems: "stretch",
                                     }, children: slide.cards.slice(0, 6).map((card) => (_jsx(CarouselCardRenderer, { card: card, isMobile: isMobile, push: push }, card.id))) }))] }, slide.id));

package/dist/features/homepage/types/index.d.ts

@@ -125,6 +125,13 @@ export interface CarouselSlide {
     };
     cards: CarouselSlideCard[];
     overlay?: {
+        /**
+         * Absent means SHOWN — most stored overlays predate this flag. Only an
+         * explicit `false` hides it. The seed and `push-editorial-content.mjs`
+         * have always written `enabled: true`; the renderer simply never read it,
+         * so an admin switching it off changed nothing.
+         */
+        enabled?: boolean;
         title?: string;
         subtitle?: string;
         description?: string;

package/dist/features/stores/components/InteractiveStoreCard.js

@@ -6,6 +6,7 @@ import { BaseListingCard, Div, Heading, RichText, Row, Scrim, Span, Stack } from
 import { MediaImage } from "../../media/MediaImage.js";
 import { normalizeRichTextHtml } from "../../../utils/index.js";
 import { useLongPress } from "../../../react/hooks/useLongPress.js";
+import { SellerTierBadge } from "./SellerTierBadge.js";
 const __O = {
     hidden: "overflow-hidden",
 };
@@ -25,7 +26,7 @@ export function InteractiveStoreCard({ store, href, selectable, isSelected = fal
         ].join(" "), onMouseDown: !isSelected ? longPress.onMouseDown : undefined, onMouseUp: !isSelected ? longPress.onMouseUp : undefined, onMouseLeave: !isSelected ? longPress.onMouseLeave : undefined, onTouchStart: !isSelected ? longPress.onTouchStart : undefined, onTouchEnd: !isSelected ? longPress.onTouchEnd : undefined, onTouchCancel: !isSelected ? longPress.onTouchCancel : undefined, children: [onSelect && (_jsx(BaseListingCard.Checkbox, { selected: isSelected, onSelect: (e) => {
                     e.preventDefault();
                     onSelect(store.id, !isSelected);
-                }, label: isSelected ? "Deselect store" : "Select store", position: "top-2 left-2", className: selectable || isSelected ? "opacity-100" : "opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto transition-opacity" })), _jsxs(Link, { href: href, className: "flex flex-col flex-1 min-h-0", children: [_jsxs(Div, { surface: "muted", className: `relative aspect-video w-full ${__O.hidden} flex-shrink-0`, children: [hasBanner ? (_jsx(MediaImage, { src: store.storeBannerURL, alt: `${store.storeName} banner`, size: "banner", className: "h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" })) : (_jsx(Row, { className: "absolute inset-0", align: "center", justify: "center", children: _jsx(Span, { className: "opacity-20 select-none", size: "5xl", "aria-hidden": "true", children: "\uD83C\uDFEA" }) })), _jsx(Scrim, { direction: "bottom-up", intensity: "subtle", className: "absolute inset-x-0 bottom-0 h-12" }), store.averageRating != null && store.averageRating > 0 && (_jsxs(Div, { className: CLS_RATING_BADGE, children: ["\u2605 ", store.averageRating.toFixed(1)] }))] }), _jsxs(Stack, { paddingY: "b-md", className: "flex-1", padding: "x-md", children: [_jsx(Row, { className: "-mt-5 mb-2", align: "end", justify: "between", children: _jsx(Div, { className: "flex-shrink-0", children: hasLogo ? (_jsx(Div, { className: "relative h-10 w-10 border-2 border-[var(--appkit-color-border-subtle)] bg-[var(--appkit-color-surface)]", rounded: "lg", shadow: "md", overflow: "hidden", children: _jsx(MediaImage, { src: store.storeLogoURL, alt: store.storeName, size: "thumbnail", onError: () => setLogoBroken(true) }) })) : (_jsx(Row, { textWeight: "bold", textSize: "base", className: "h-10 w-10 border-2 border-white bg-primary/10 dark:bg-primary/20 text-primary", align: "center", justify: "center", rounded: "lg", shadow: "md", children: initial })) }) }), _jsx(Heading, { level: 3, className: `group-hover:text-primary transition-colors`, truncate: true, size: "sm", weight: "bold", color: "primary", children: store.storeName }), store.storeDescription ? (_jsx(RichText, { html: normalizeRichTextHtml(store.storeDescription), proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: "mt-1 line-clamp-2 text-[length:var(--appkit-text-xs)] text-[var(--appkit-color-text-muted)] flex-1" })) : (_jsx(Div, { className: "flex-1" })), _jsxs(Row, { color: "muted", textSize: "xs", gap: "sm", className: "mt-2.5", wrap: true, children: [store.totalProducts != null && store.totalProducts > 0 && (_jsxs(Span, { layout: "flex", gap: "2xs", children: [_jsx(Span, { "aria-hidden": "true", children: "\uD83D\uDCE6" }), " ", store.totalProducts, " ", labels.products ?? "products"] })), store.itemsSold != null && store.itemsSold > 0 && (_jsxs(Span, { layout: "flex", gap: "2xs", children: [_jsx(Span, { "aria-hidden": "true", children: "\uD83D\uDECD\uFE0F" }), " ", store.itemsSold, " ", labels.sold ?? "sold"] }))] }), _jsxs(Row, { border: "top-subtle", paddingY: "y-xs-tall", className: "mt-3", align: "center", justify: "between", children: [_jsxs(Span, { size: "xs", weight: "semibold", className: "text-primary group-hover:underline transition-colors", children: [labels.visitStore ?? "Visit store", " \u2192"] }), store.totalReviews != null && store.totalReviews > 0 && (_jsxs(Span, { size: "xs", color: "muted", children: [store.totalReviews, " ", labels.reviews ?? "reviews"] }))] })] })] })] }));
+                }, label: isSelected ? "Deselect store" : "Select store", position: "top-2 left-2", className: selectable || isSelected ? "opacity-100" : "opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto transition-opacity" })), _jsxs(Link, { href: href, className: "flex flex-col flex-1 min-h-0", children: [_jsxs(Div, { surface: "muted", className: `relative aspect-video w-full ${__O.hidden} flex-shrink-0`, children: [hasBanner ? (_jsx(MediaImage, { src: store.storeBannerURL, alt: `${store.storeName} banner`, size: "banner", className: "h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" })) : (_jsx(Row, { className: "absolute inset-0", align: "center", justify: "center", children: _jsx(Span, { className: "opacity-20 select-none", size: "5xl", "aria-hidden": "true", children: "\uD83C\uDFEA" }) })), _jsx(Scrim, { direction: "bottom-up", intensity: "subtle", className: "absolute inset-x-0 bottom-0 h-12" }), store.averageRating != null && store.averageRating > 0 && (_jsxs(Div, { className: CLS_RATING_BADGE, children: ["\u2605 ", store.averageRating.toFixed(1)] }))] }), _jsxs(Stack, { paddingY: "b-md", className: "flex-1", padding: "x-md", children: [_jsx(Row, { className: "-mt-5 mb-2", align: "end", justify: "between", children: _jsx(Div, { className: "flex-shrink-0", children: hasLogo ? (_jsx(Div, { className: "relative h-10 w-10 border-2 border-[var(--appkit-color-border-subtle)] bg-[var(--appkit-color-surface)]", rounded: "lg", shadow: "md", overflow: "hidden", children: _jsx(MediaImage, { src: store.storeLogoURL, alt: store.storeName, size: "thumbnail", onError: () => setLogoBroken(true) }) })) : (_jsx(Row, { textWeight: "bold", textSize: "base", className: "h-10 w-10 border-2 border-white bg-primary/10 dark:bg-primary/20 text-primary", align: "center", justify: "center", rounded: "lg", shadow: "md", children: initial })) }) }), _jsx(Heading, { level: 3, className: `group-hover:text-primary transition-colors`, truncate: true, size: "sm", weight: "bold", color: "primary", children: store.storeName }), _jsx(SellerTierBadge, { isVerified: store.isVerified, sellerTier: store.sellerTier, size: "xs" }), store.storeDescription ? (_jsx(RichText, { html: normalizeRichTextHtml(store.storeDescription), proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: "mt-1 line-clamp-2 text-[length:var(--appkit-text-xs)] text-[var(--appkit-color-text-muted)] flex-1" })) : (_jsx(Div, { className: "flex-1" })), _jsxs(Row, { color: "muted", textSize: "xs", gap: "sm", className: "mt-2.5", wrap: true, children: [store.totalProducts != null && store.totalProducts > 0 && (_jsxs(Span, { layout: "flex", gap: "2xs", children: [_jsx(Span, { "aria-hidden": "true", children: "\uD83D\uDCE6" }), " ", store.totalProducts, " ", labels.products ?? "products"] })), store.itemsSold != null && store.itemsSold > 0 && (_jsxs(Span, { layout: "flex", gap: "2xs", children: [_jsx(Span, { "aria-hidden": "true", children: "\uD83D\uDECD\uFE0F" }), " ", store.itemsSold, " ", labels.sold ?? "sold"] }))] }), _jsxs(Row, { border: "top-subtle", paddingY: "y-xs-tall", className: "mt-3", align: "center", justify: "between", children: [_jsxs(Span, { size: "xs", weight: "semibold", className: "text-primary group-hover:underline transition-colors", children: [labels.visitStore ?? "Visit store", " \u2192"] }), store.totalReviews != null && store.totalReviews > 0 && (_jsxs(Span, { size: "xs", color: "muted", children: [store.totalReviews, " ", labels.reviews ?? "reviews"] }))] })] })] })] }));
     if (!renderOwnerActions)
         return card;
     /*

package/dist/features/stores/components/SellerStandingPanel.d.ts

@@ -0,0 +1,31 @@
+/**
+ * The Trusted Seller criteria, rendered once for three audiences.
+ *
+ * - the seller's dashboard panel (their real figures against each target)
+ * - the public `/seller-guide` (targets only — no seller to measure)
+ * - `/help/seller-badges` and the admin trust guide (same, as a reference)
+ *
+ * 🛑 ONE component for all of them, driven by `sellerStandingRows()`. The
+ * whole point of this feature's config module is that the numbers a seller is
+ * chasing and the numbers a guide page promises cannot be different numbers —
+ * and the surest way to reintroduce that is a second table (Root Cause
+ * #73/#75). `metrics` absent is what distinguishes the guide from the panel,
+ * not a separate component.
+ */
+import React from "react";
+import { type SellerStandingThresholds, type SellerTier } from "../../../_internal/shared/features/seller-standing/config";
+import type { SellerStandingSnapshot } from "../types";
+export interface SellerStandingPanelProps {
+    /** Absent on a store that has never been measured, and on the guide pages. */
+    standing?: SellerStandingSnapshot;
+    tier?: SellerTier;
+    /** Admin-tuned thresholds; defaults apply when omitted. */
+    thresholds?: SellerStandingThresholds;
+    /**
+     * Show "N of 5 met" and the progress bar. Off for the public guide, where
+     * there is no seller to be N-of-5 about.
+     */
+    showProgress?: boolean;
+    heading?: string;
+}
+export declare function SellerStandingPanel({ standing, tier, thresholds, showProgress, heading, }: SellerStandingPanelProps): React.JSX.Element;

package/dist/features/stores/components/SellerStandingPanel.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Div, Heading, Row, Stack, Text } from "../../../ui/index.js";
+import { Icon } from "../../../ui/components/Icon.js";
+import { Progress } from "../../../ui/components/Progress.js";
+import { SELLER_TIER, formatSellerStandingValue, sellerStandingRows, } from "../../../_internal/shared/features/seller-standing/config.js";
+function formatDate(value) {
+    if (!value)
+        return null;
+    const d = value instanceof Date ? value : new Date(value);
+    if (Number.isNaN(d.getTime()))
+        return null;
+    return d.toLocaleDateString(undefined, { day: "numeric", month: "short", year: "numeric" });
+}
+export function SellerStandingPanel({ standing, tier = SELLER_TIER.SELLER, thresholds, showProgress = false, heading = "Trusted Seller", }) {
+    const rows = sellerStandingRows(standing ?? null, thresholds);
+    const metCount = rows.filter((r) => r.met).length;
+    const isTrusted = tier === SELLER_TIER.TRUSTED;
+    const computedAt = formatDate(standing?.computedAt);
+    const nextComputeAt = formatDate(standing?.nextComputeAt);
+    return (_jsxs(Stack, { gap: "md", surface: "card", padding: "lg", rounded: "xl", children: [_jsxs(Stack, { gap: "xs", children: [_jsxs(Row, { align: "center", justify: "between", gap: "sm", wrap: true, children: [_jsx(Heading, { level: 2, size: "lg", weight: "semibold", children: heading }), showProgress ? (_jsxs(Text, { size: "xs", color: "muted", children: [metCount, " of ", rows.length, " met"] })) : null] }), _jsx(Text, { size: "sm", color: "muted", children: isTrusted
+                            ? "Your store meets every criterion. Your badge is live, and your payouts start when you ship rather than on delivery."
+                            : `Meet all ${rows.length} criteria in the same ${standing?.windowDays ?? thresholds?.windowDays ?? 90}-day window to earn the badge — and to be paid when you ship, rather than waiting for delivery.` })] }), showProgress ? _jsx(Progress, { value: metCount, max: rows.length, size: "sm", variant: "gradient" }) : null, _jsx(Stack, { gap: "sm", children: rows.map((row) => (_jsxs(Row, { gap: "sm", align: "start", children: [_jsx(Icon, { name: row.met ? "approve" : "confirm", size: "sm", tone: row.met ? "success" : "muted", "aria-hidden": true }), _jsxs(Stack, { gap: "xs", className: "min-w-0 flex-1", children: [_jsxs(Row, { gap: "sm", align: "center", justify: "between", wrap: true, children: [_jsx(Text, { size: "sm", weight: "medium", children: row.label }), _jsxs(Text, { size: "sm", color: row.met ? "inherit" : "muted", numeric: true, children: [row.actual === null
+                                                    ? "—"
+                                                    : formatSellerStandingValue(row.actual, row.kind), " / ", formatSellerStandingValue(row.target, row.kind)] })] }), _jsx(Text, { size: "xs", color: "muted", children: row.why })] })] }, row.criterion))) }), _jsx(Div, { children: standing ? (_jsxs(Text, { size: "xs", color: "faint", children: ["Figures as of ", computedAt ?? "the last check", nextComputeAt ? ` · next update ${nextComputeAt}` : "", ". Updated once a month, on the last day."] })) : (_jsx(Text, { size: "xs", color: "faint", children: "Your figures are calculated on the last day of each month \u2014 nothing has been measured for your store yet." })) })] }));
+}

package/dist/features/stores/components/SellerTierBadge.d.ts

@@ -0,0 +1,57 @@
+/**
+ * The seller-trust badges: Verified and Trusted Seller.
+ *
+ * 🛑 Until 2026-10-24 NEITHER rendered anywhere a buyer could see.
+ * `isVerified` was in `PRIVATE_STORE_FIELDS`, so it was stripped from every
+ * public store payload — while `/sellers` filtered on it to offer a "verified
+ * sellers" view, `StoreCapabilitiesGuideView` told sellers in as many words
+ * that "the Verified badge appears on your store profile page and on every
+ * listing card", and the onboarding checklist offered "Request verified badge"
+ * as a step. Three surfaces describing a badge that could not exist.
+ *
+ * ## One component, every surface
+ *
+ * Store card, store header, the product page's "Sold by" block and the seller
+ * directory all render this. A per-surface copy is how the two badges would
+ * come to disagree about what "trusted" means — and one of them means we pay
+ * the seller before delivery, so that is not a drift worth risking.
+ *
+ * 🛑 NOT to be confused with `SellerTrustBadge` in `features/scams/`, which is
+ * the scam-registry lookup (is this store on the reported-scammer registry).
+ * Different question, different source, and both can show at once: a store can
+ * be verified by us and still have a report against it.
+ *
+ * ## Why no Tailwind colour utilities here
+ *
+ * `<Badge>` carries its own `appkit-badge--*` CSS, so this authors no colour
+ * classes at all — which sidesteps Root Cause #67 entirely rather than having
+ * to pick the right `-surface`/`-solid` pairing and get the ink to match.
+ */
+import React from "react";
+import type { SellerTier } from "../../../_internal/shared/features/seller-standing/config";
+export interface SellerTierBadgeProps {
+    /**
+     * 🛑 Takes the two FLAGS, not a store object.
+     *
+     * Every call site holds a different shape — `StoreListItem`, `StoreDetail`,
+     * a product page's denormalised seller block, an admin row — and a prop
+     * typed to one of them would force the others through a cast. A cast at a
+     * boundary is where Root Cause #98 lives.
+     */
+    isVerified?: boolean;
+    sellerTier?: SellerTier;
+    size?: "xs" | "sm" | "md";
+    /**
+     * Where the badges explain themselves. Omit for no link — a card already
+     * links to the store, and nesting an anchor inside it is invalid HTML.
+     */
+    href?: string;
+    /** Rendered as a link element supplied by the consumer (locale-aware). */
+    linkAs?: React.ElementType;
+}
+/**
+ * Renders nothing when a store has neither badge — and that is deliberate:
+ * an "unverified" chip would mark every ordinary seller as suspect, which is
+ * a claim we are not making about them.
+ */
+export declare function SellerTierBadge({ isVerified, sellerTier, size, href, linkAs, }: SellerTierBadgeProps): React.JSX.Element | null;

package/dist/features/stores/components/SellerTierBadge.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, Row } from "../../../ui/index.js";
+import { Icon } from "../../../ui/components/Icon.js";
+import { SELLER_TIER } from "../../../_internal/shared/features/seller-standing/config.js";
+/**
+ * Renders nothing when a store has neither badge — and that is deliberate:
+ * an "unverified" chip would mark every ordinary seller as suspect, which is
+ * a claim we are not making about them.
+ */
+export function SellerTierBadge({ isVerified = false, sellerTier = SELLER_TIER.SELLER, size = "sm", href, linkAs, }) {
+    const isTrusted = sellerTier === SELLER_TIER.TRUSTED;
+    if (!isVerified && !isTrusted)
+        return null;
+    const badges = (_jsxs(Row, { gap: "xs", align: "center", wrap: true, children: [isVerified ? (_jsx(Badge, { variant: "info", size: size, children: _jsxs(Row, { gap: "xs", align: "center", children: [_jsx(Icon, { name: "verify", size: size === "md" ? "md" : "sm", "aria-hidden": true }), "Verified"] }) })) : null, isTrusted ? (_jsx(Badge, { variant: "success", size: size, children: _jsxs(Row, { gap: "xs", align: "center", children: [_jsx(Icon, { name: "review", size: size === "md" ? "md" : "sm", "aria-hidden": true }), "Trusted Seller"] }) })) : null] }));
+    if (!href)
+        return badges;
+    const Link = (linkAs ?? "a");
+    return (_jsx(Link, { href: href, "aria-label": "What do these seller badges mean?", children: badges }));
+}

package/dist/features/stores/components/StoreCapabilitiesGuideView.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowLeft } from "lucide-react";
 import { Alert, Code, Div, Heading, Li, Row, Section, Span, Stack, Table, Tbody, Td, Text, TextLink, Th, Thead, Tr, Ul } from "../../../ui/index.js";
 import { ROUTES } from "../../../next/routing/route-map.js";
+import { SellerStandingPanel } from "./SellerStandingPanel.js";
 const SUBHEADING = "mb-1 font-semibold text-[var(--appkit-color-text)]";
 const LIST_DISC = "list-disc leading-relaxed";
 const SECTION_BODY = "space-y-4 text-[length:var(--appkit-text-sm)] text-[var(--appkit-color-text-muted)]";
@@ -30,7 +31,24 @@ const CAPABILITY_GROUPS = [
     {
         group: "Trust & Visibility",
         items: [
-            { cap: "verified_seller", unlocks: "Shows a Verified badge on your store profile and listing cards.", defaultOn: false },
+            /*
+             * 🛑 CORRECTED 2026-10-24. This read "Shows a Verified badge on your
+             * store profile and listing cards", and that was false in two ways.
+             *
+             * (1) The badge is driven by `StoreDocument.isVerified`, not by this
+             * capability — `verified_seller` is read by NOTHING: no gate, no
+             * render, anywhere. Granting it has never done a thing.
+             * (2) No badge rendered at all, because `isVerified` sat in
+             * `PRIVATE_STORE_FIELDS` and was stripped from every public store
+             * payload. A seller could read this sentence, be granted the
+             * capability, and correctly conclude the platform was broken.
+             *
+             * The badge now renders (`SellerTierBadge`) off `isVerified`. The
+             * capability stays declared because existing store documents carry it
+             * and removing a union member would fail their next write — but it is
+             * described as what it is.
+             */
+            { cap: "verified_seller", unlocks: "Legacy flag — kept so existing stores stay valid. The Verified badge is granted by an admin on the store itself, not by this capability.", defaultOn: false },
             { cap: "featured_placement", unlocks: "Your store is eligible to appear in featured store sections on the homepage.", defaultOn: false },
             { cap: "promotional_banner", unlocks: "Your store banner can be used in carousel and promotional homepage sections.", defaultOn: false },
             { cap: "priority_support", unlocks: "Your support tickets go to a dedicated queue with faster response SLA.", defaultOn: false },
@@ -89,8 +107,20 @@ function LockedFeatureGuide() {
     return (_jsx(Stack, { gap: "md", children: LOCKED_FEATURES.map(({ cap, missing, howToUnlock, contractRequired }) => (_jsxs(Stack, { className: "border border-[var(--appkit-color-border)]", gap: "sm", rounded: "lg", padding: "md", children: [_jsxs(Row, { align: "center", gap: "sm", children: [_jsx(Text, { className: "font-mono text-[var(--appkit-color-text)]", size: "sm", weight: "semibold", children: cap }), contractRequired && (_jsx(Span, { className: "inline-block bg-[var(--appkit-color-warning)]/10 text-[var(--appkit-color-warning)]", size: "xs", weight: "medium", rounded: "full", padding: "pill-xs", children: "Requires agreement" }))] }), _jsxs(Div, { children: [_jsx(Text, { className: "text-[var(--appkit-color-text-muted)] mb-1", size: "xs", weight: "semibold", children: "What you are missing:" }), _jsx(Ul, { spacing: "2xs", indent: "md", children: missing.map((item) => (_jsx(Li, { textSize: "sm", color: "muted", className: LIST_DISC, children: item }, item))) })] }), _jsxs(Div, { children: [_jsx(Text, { className: "text-[var(--appkit-color-text-muted)] mb-1", size: "xs", weight: "semibold", children: "How to unlock:" }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)] leading-relaxed", size: "sm", children: howToUnlock })] })] }, cap))) }));
 }
 // -- Section 4: Verified seller badge -----------------------------------------
+/*
+ * 🛑 REWRITTEN 2026-10-24. This section used to state a fourth, invented set
+ * of criteria — "store active for at least 6 months", "average rating of 4.5
+ * or above", "at least 50 delivered orders" — none of which any code has ever
+ * read, alongside `AdminStoresGuideView`'s own different numbers (">=20
+ * delivered orders, >=4.0 rating, 3+ months"). Two guides, two sets of
+ * promises, zero enforcement, and a badge that could not render at all.
+ *
+ * The two badges are now described as what they are, and the earned one
+ * renders its criteria from `SELLER_STANDING_DEFAULTS` so this page cannot
+ * drift from the job that grants it.
+ */
 function VerifiedSellerSection() {
-    return (_jsxs(Div, { className: SECTION_BODY, children: [_jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "What it means for buyers" }), _jsx(Text, { className: "leading-relaxed", children: "The Verified badge appears on your store profile page and on every listing card. It signals to buyers that LetItRip has reviewed your identity and track record. Verified sellers typically see higher conversion rates, especially on high-value items." })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Requirements" }), _jsxs(Ul, { spacing: "tight", indent: "lg", children: [_jsx(Li, { className: LIST_DISC, children: "Government-issued photo ID submitted to LetItRip support." }), _jsx(Li, { className: LIST_DISC, children: "Store active for at least 6 months." }), _jsx(Li, { className: LIST_DISC, children: "Average rating of 4.5 or above (across all reviews)." }), _jsx(Li, { className: LIST_DISC, children: "At least 50 delivered orders with no outstanding fraud reports." }), _jsx(Li, { className: LIST_DISC, children: "No active hard ban or store suspension in the past 12 months." })] })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "How to apply" }), _jsx(Text, { className: "leading-relaxed", children: "Open a support ticket from your store dashboard with category \"Account\" and subject \"Verified Seller Application\". Attach your government ID scan. Our team reviews within 10 business days." })] })] }));
+    return (_jsxs(Div, { className: SECTION_BODY, children: [_jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Two different badges" }), _jsxs(Text, { className: "leading-relaxed", children: [_jsx(Span, { weight: "bold", children: "Verified" }), " means LetItRip has checked who you are. It is granted by an admin after an identity review, it is not earned by volume, and it does not expire on its own.", " ", _jsx(Span, { weight: "bold", children: "Trusted Seller" }), " is earned from your trading record and is recalculated every month \u2014 you can gain it and you can lose it. A store can hold either, both, or neither."] })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Getting Verified" }), _jsx(Text, { className: "leading-relaxed", children: "Open a support ticket from your store dashboard with category \"Account\" and subject \"Verified Seller Application\", and attach a government-issued photo ID. An admin reviews it and sets the badge on your store." })] }), _jsxs(Div, { children: [_jsx(Text, { className: SUBHEADING, children: "Earning Trusted Seller" }), _jsx(Text, { className: "leading-relaxed", children: "Every criterion below is measured over the same rolling window, and all of them have to hold at the same time. Meeting them also changes when you are paid: your payout starts when you ship rather than when the parcel is delivered." })] }), _jsx(SellerStandingPanel, { heading: "The criteria" })] }));
 }
 // -- Section 5: Multiple stores -----------------------------------------------
 function MultipleStoresSection() {