"""
Market service s-expression page components.

Renders market landing, browse (category/subcategory), product detail,
product admin, market admin, page markets, and all markets pages.
Called from route handlers in place of ``render_template()``.
"""
from __future__ import annotations

from typing import Any
from markupsafe import escape

from shared.sexp.jinja_bridge import sexp
from shared.sexp.helpers import (
    call_url, get_asset_url, root_header_html,
    search_mobile_html, search_desktop_html,
    full_page, oob_page,
)


# ---------------------------------------------------------------------------
# Price helpers
# ---------------------------------------------------------------------------

_SYM = {"GBP": "£", "EUR": "€", "USD": "$"}


def _price_str(val, raw, cur) -> str:
    if raw:
        return str(raw)
    if isinstance(val, (int, float)):
        return f"{_SYM.get(cur, '')}{val:.2f}"
    return str(val or "")


def _set_prices(item: dict) -> dict:
    """Extract price values from product dict (mirrors prices.html set_prices macro)."""
    oe = item.get("oe_list_price") or {}
    sp_val = item.get("special_price") or (oe.get("special") if oe else None)
    sp_raw = item.get("special_price_raw") or (oe.get("special_raw") if oe else None)
    sp_cur = item.get("special_price_currency") or (oe.get("special_currency") if oe else None)
    rp_val = item.get("regular_price") or item.get("rrp") or (oe.get("rrp") if oe else None)
    rp_raw = item.get("regular_price_raw") or item.get("rrp_raw") or (oe.get("rrp_raw") if oe else None)
    rp_cur = item.get("regular_price_currency") or item.get("rrp_currency") or (oe.get("rrp_currency") if oe else None)
    return dict(sp_val=sp_val, sp_raw=sp_raw, sp_cur=sp_cur,
                rp_val=rp_val, rp_raw=rp_raw, rp_cur=rp_cur)


def _card_price_html(p: dict) -> str:
    """Render price line for product card (mirrors prices.html card_price macro)."""
    pr = _set_prices(p)
    sp_str = _price_str(pr["sp_val"], pr["sp_raw"], pr["sp_cur"])
    rp_str = _price_str(pr["rp_val"], pr["rp_raw"], pr["rp_cur"])
    inner = ""
    if pr["sp_val"]:
        inner += sexp('(div :class "text-lg font-semibold text-emerald-700" sp)', sp=sp_str)
        if pr["rp_val"]:
            inner += sexp('(div :class "text-sm line-through text-stone-500" rp)', rp=rp_str)
    elif pr["rp_val"]:
        inner += sexp('(div :class "mt-1 text-lg font-semibold" rp)', rp=rp_str)
    return sexp(
        '(div :class "mt-1 flex items-baseline gap-2 justify-center" (raw! inner))',
        inner=inner,
    )


# ---------------------------------------------------------------------------
# Header helpers
# ---------------------------------------------------------------------------

def _post_header_html(ctx: dict, *, oob: bool = False) -> str:
    """Build the post-level header row (feature image + title + page cart count)."""
    post = ctx.get("post") or {}
    slug = post.get("slug", "")
    title = (post.get("title") or "")[:160]
    feature_image = post.get("feature_image")

    label_html = ""
    if feature_image:
        label_html += sexp(
            '(img :src fi :class "h-8 w-8 rounded-full object-cover border border-stone-300 flex-shrink-0")',
            fi=feature_image,
        )
    label_html += sexp('(span t)', t=title)

    nav_html = ""
    page_cart_count = ctx.get("page_cart_count", 0)
    if page_cart_count and page_cart_count > 0:
        cart_href = call_url(ctx, "cart_url", f"/{slug}/")
        nav_html += sexp(
            '(a :href ch :class "relative inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-full'
            ' border border-emerald-300 bg-emerald-50 text-emerald-800 hover:bg-emerald-100 transition"'
            ' (i :class "fa fa-shopping-cart" :aria-hidden "true")'
            ' (span pcc))',
            ch=cart_href, pcc=str(page_cart_count),
        )

    # Container nav
    container_nav = ctx.get("container_nav_html", "")
    if container_nav:
        nav_html += container_nav

    link_href = call_url(ctx, "blog_url", f"/{slug}/")

    return sexp(
        '(~menu-row :id "post-row" :level 1'
        ' :link-href lh :link-label-html llh'
        ' :nav-html nh :child-id "post-header-child" :oob oob)',
        lh=link_href,
        llh=label_html,
        nh=nav_html,
        oob=oob,
    )


def _market_header_html(ctx: dict, *, oob: bool = False) -> str:
    """Build the market-level header row (shop icon + market title + category slugs + nav)."""
    from quart import url_for

    market_title = ctx.get("market_title", "")
    top_slug = ctx.get("top_slug", "")
    sub_slug = ctx.get("sub_slug", "")
    hx_select_search = ctx.get("hx_select_search", "#main-panel")

    sub_div = sexp('(div sub)', sub=sub_slug) if sub_slug else ""
    label_html = sexp(
        '(div :class "font-bold text-xl flex-shrink-0 flex gap-2 items-center"'
        '  (div (i :class "fa fa-shop") " " mt)'
        '  (div :class "flex flex-col md:flex-row md:gap-2 text-xs"'
        '    (div ts) (raw! sd)))',
        mt=market_title, ts=top_slug or "", sd=sub_div,
    )

    link_href = url_for("market.browse.home")

    # Build desktop nav from categories
    categories = ctx.get("categories", {})
    qs = ctx.get("qs", "")
    nav_html = _desktop_category_nav_html(ctx, categories, qs, hx_select_search)

    return sexp(
        '(~menu-row :id "market-row" :level 2'
        ' :link-href lh :link-label-html llh'
        ' :nav-html nh :child-id "market-header-child" :oob oob)',
        lh=link_href,
        llh=label_html,
        nh=nav_html,
        oob=oob,
    )


def _desktop_category_nav_html(ctx: dict, categories: dict, qs: str,
                                hx_select: str) -> str:
    """Build desktop category navigation links."""
    from quart import url_for
    from shared.utils import route_prefix

    prefix = route_prefix()
    category_label = ctx.get("category_label", "")
    select_colours = ctx.get("select_colours", "")
    rights = ctx.get("rights", {})

    all_href = prefix + url_for("market.browse.browse_all") + qs
    all_active = (category_label == "All Products")
    links = sexp(
        '(div :class "relative nav-group"'
        '  (a :href ah :hx-get ah :hx-target "#main-panel"'
        '     :hx-select hs :hx-swap "outerHTML" :hx-push-url "true"'
        '     :aria-selected (if aa "true" "false")'
        '     :class (str "block px-2 py-1 rounded text-center whitespace-normal break-words leading-snug bg-stone-200 text-black " sc)'
        '     "All"))',
        ah=all_href, hs=hx_select, aa=all_active, sc=select_colours,
    )

    for cat, data in categories.items():
        cat_href = prefix + url_for("market.browse.browse_top", top_slug=data["slug"]) + qs
        cat_active = (cat == category_label)
        links += sexp(
            '(div :class "relative nav-group"'
            '  (a :href ch :hx-get ch :hx-target "#main-panel"'
            '     :hx-select hs :hx-swap "outerHTML" :hx-push-url "true"'
            '     :aria-selected (if ca "true" "false")'
            '     :class (str "block px-2 py-1 rounded text-center whitespace-normal break-words leading-snug bg-stone-200 text-black " sc)'
            '     cn))',
            ch=cat_href, hs=hx_select, ca=cat_active, sc=select_colours, cn=cat,
        )

    admin_link = ""
    if rights and rights.get("admin"):
        admin_href = prefix + url_for("market.admin.admin")
        admin_link = sexp(
            '(a :href ah :hx-get ah :hx-target "#main-panel"'
            '   :hx-select hs :hx-swap "outerHTML" :hx-push-url "true"'
            '   :class "px-2 py-1 text-stone-500 hover:text-stone-700"'
            '   (i :class "fa fa-cog" :aria-hidden "true"))',
            ah=admin_href, hs=hx_select,
        )

    return sexp(
        '(nav :class "hidden md:flex gap-4 text-sm ml-2 w-full justify-end items-center"'
        '  (raw! links) (raw! al))',
        links=links, al=admin_link,
    )


def _product_header_html(ctx: dict, d: dict, *, oob: bool = False) -> str:
    """Build the product-level header row (bag icon + title + prices + admin)."""
    from quart import url_for
    from shared.browser.app.csrf import generate_csrf_token

    slug = d.get("slug", "")
    title = d.get("title", "")
    hx_select_search = ctx.get("hx_select_search", "#main-panel")
    link_href = url_for("market.browse.product.product_detail", product_slug=slug)

    label_html = sexp(
        '(<> (i :class "fa fa-shopping-bag" :aria-hidden "true") (div t))',
        t=title,
    )

    # Prices in nav area
    pr = _set_prices(d)
    cart = ctx.get("cart", [])
    prices_nav = _prices_header_html(d, pr, cart, slug, ctx)

    rights = ctx.get("rights", {})
    admin_html = ""
    if rights and rights.get("admin"):
        admin_href = url_for("market.browse.product.admin", product_slug=slug)
        admin_html = sexp(
            '(a :href ah :hx-get ah :hx-target "#main-panel"'
            '   :hx-select hs :hx-swap "outerHTML" :hx-push-url "true"'
            '   :class "px-2 py-1 text-stone-500 hover:text-stone-700"'
            '   (i :class "fa fa-cog" :aria-hidden "true"))',
            ah=admin_href, hs=hx_select_search,
        )
    nav_html = prices_nav + admin_html

    return sexp(
        '(~menu-row :id "product-row" :level 3'
        ' :link-href lh :link-label-html llh'
        ' :nav-html nh :child-id "product-header-child" :oob oob)',
        lh=link_href,
        llh=label_html,
        nh=nav_html,
        oob=oob,
    )


def _prices_header_html(d: dict, pr: dict, cart: list, slug: str, ctx: dict) -> str:
    """Build prices + add-to-cart for product header row."""
    from quart import url_for
    from shared.browser.app.csrf import generate_csrf_token

    csrf = generate_csrf_token()
    cart_action = url_for("market.browse.product.cart", product_slug=slug)
    cart_url_fn = ctx.get("cart_url")

    # Add-to-cart button
    quantity = sum(ci.quantity for ci in cart if ci.product.slug == slug) if cart else 0
    add_html = _cart_add_html(slug, quantity, cart_action, csrf, cart_url_fn)

    inner = add_html
    sp_val, rp_val = pr.get("sp_val"), pr.get("rp_val")
    if sp_val:
        inner += sexp('(div :class "text-md font-bold text-emerald-700" "Special price")')
        inner += sexp(
            '(div :class "text-xl font-semibold text-emerald-700" ps)',
            ps=_price_str(sp_val, pr["sp_raw"], pr["sp_cur"]),
        )
        if rp_val:
            inner += sexp(
                '(div :class "text-base text-md line-through text-stone-500" ps)',
                ps=_price_str(rp_val, pr["rp_raw"], pr["rp_cur"]),
            )
    elif rp_val:
        inner += sexp('(div :class "hidden md:block text-xl font-bold" "Our price")')
        inner += sexp(
            '(div :class "text-xl font-semibold" ps)',
            ps=_price_str(rp_val, pr["rp_raw"], pr["rp_cur"]),
        )

    # RRP
    rrp_raw = d.get("rrp_raw")
    rrp_val = d.get("rrp")
    case_size = d.get("case_size_count") or 1
    if rrp_raw and rrp_val:
        rrp_str = f"{rrp_raw[0]}{rrp_val * case_size:.2f}"
        inner += sexp(
            '(div :class "text-base text-stone-400" (span "rrp:") " " (span rs))',
            rs=rrp_str,
        )

    return sexp(
        '(div :class "flex flex-row items-center justify-between md:gap-2 md:px-2" (raw! inner))',
        inner=inner,
    )


def _cart_add_html(slug: str, quantity: int, action: str, csrf: str,
                   cart_url_fn: Any = None) -> str:
    """Render add-to-cart button or quantity controls."""
    if not quantity:
        return sexp(
            '(div :id cid'
            '  (form :action act :method "post" :hx-post act :hx-target "#cart-mini" :hx-swap "outerHTML" :class "rounded flex items-center"'
            '    (input :type "hidden" :name "csrf_token" :value csrf)'
            '    (input :type "hidden" :name "count" :value "1")'
            '    (button :type "submit" :class "relative inline-flex items-center justify-center text-sm font-medium text-stone-500 hover:bg-emerald-50"'
            '      (span :class "relative inline-flex items-center justify-center"'
            '        (i :class "fa fa-cart-plus text-4xl" :aria-hidden "true")))))',
            cid=f"cart-{slug}", act=action, csrf=csrf,
        )

    cart_href = cart_url_fn("/") if callable(cart_url_fn) else "/"
    return sexp(
        '(div :id cid'
        '  (div :class "rounded flex items-center gap-2"'
        '    (form :action act :method "post" :hx-post act :hx-target "#cart-mini" :hx-swap "outerHTML"'
        '      (input :type "hidden" :name "csrf_token" :value csrf)'
        '      (input :type "hidden" :name "count" :value minus)'
        '      (button :type "submit" :class "inline-flex items-center justify-center w-8 h-8 text-sm font-medium rounded-full border border-emerald-600 text-emerald-700 hover:bg-emerald-50 text-xl" "-"))'
        '    (a :class "relative inline-flex items-center justify-center text-emerald-700" :href ch'
        '      (span :class "relative inline-flex items-center justify-center"'
        '        (i :class "fa-solid fa-shopping-cart text-2xl" :aria-hidden "true")'
        '        (span :class "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none"'
        '          (span :class "flex items-center justify-center bg-black text-white rounded-full w-4 h-4 text-xs font-bold" qty))))'
        '    (form :action act :method "post" :hx-post act :hx-target "#cart-mini" :hx-swap "outerHTML"'
        '      (input :type "hidden" :name "csrf_token" :value csrf)'
        '      (input :type "hidden" :name "count" :value plus)'
        '      (button :type "submit" :class "inline-flex items-center justify-center w-8 h-8 text-sm font-medium rounded-full border border-emerald-600 text-emerald-700 hover:bg-emerald-50 text-xl" "+"))))',
        cid=f"cart-{slug}", act=action, csrf=csrf, ch=cart_href,
        minus=str(quantity - 1), plus=str(quantity + 1), qty=str(quantity),
    )


# ---------------------------------------------------------------------------
# Mobile nav panel
# ---------------------------------------------------------------------------

def _mobile_nav_panel_html(ctx: dict) -> str:
    """Build mobile nav panel with category accordion."""
    from quart import url_for
    from shared.utils import route_prefix

    prefix = route_prefix()
    categories = ctx.get("categories", {})
    qs = ctx.get("qs", "")
    category_label = ctx.get("category_label", "")
    top_slug = ctx.get("top_slug", "")
    sub_slug = ctx.get("sub_slug", "")
    hx_select = ctx.get("hx_select_search", "#main-panel")
    select_colours = ctx.get("select_colours", "")

    all_href = prefix + url_for("market.browse.browse_all") + qs
    all_active = (category_label == "All Products")
    items = sexp(
        '(a :role "option" :href ah :hx-get ah :hx-target "#main-panel"'
        '   :hx-select hs :hx-swap "outerHTML" :hx-push-url "true"'
        '   :aria-selected (if aa "true" "false")'
        '   :class (str "block rounded-lg px-3 py-3 text-base hover:bg-stone-50 " sc)'
        '   (div :class "prose prose-stone max-w-none" "All"))',
        ah=all_href, hs=hx_select, aa=all_active, sc=select_colours,
    )

    for cat, data in categories.items():
        cat_slug = data.get("slug", "")
        cat_active = (top_slug == cat_slug.lower() if top_slug else False)
        cat_href = prefix + url_for("market.browse.browse_top", top_slug=cat_slug) + qs
        bg_cls = " bg-stone-900 text-white hover:bg-stone-900" if cat_active else ""

        chevron = sexp(
            '(svg :class "w-4 h-4 shrink-0 transition-transform group-open/cat:rotate-180"'
            '     :viewBox "0 0 20 20" :fill "currentColor"'
            '  (path :fill-rule "evenodd" :clip-rule "evenodd"'
            '        :d "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"))',
        )

        cat_count = data.get("count", 0)
        summary_html = sexp(
            '(summary :class (str "flex items-center justify-between cursor-pointer select-none block rounded-lg px-3 py-3 text-base hover:bg-stone-50" bg)'
            '  (a :href ch :hx-get ch :hx-target "#main-panel"'
            '     :hx-select hs :hx-swap "outerHTML" :hx-push-url "true"'
            '     :class (str "font-medium " sc " flex flex-row gap-2")'
            '    (div cn)'
            '    (div :aria-label cl cn2))'
            '  (raw! chev))',
            bg=bg_cls, ch=cat_href, hs=hx_select, sc=select_colours,
            cn=cat, cl=f"{cat_count} products", cn2=str(cat_count), chev=chevron,
        )

        subs = data.get("subs", [])
        subs_html = ""
        if subs:
            sub_links = ""
            for sub in subs:
                sub_href = prefix + url_for("market.browse.browse_sub", top_slug=cat_slug, sub_slug=sub["slug"]) + qs
                sub_active = (cat_active and sub_slug == sub.get("slug"))
                sub_label = sub.get("html_label") or sub.get("name", "")
                sub_count = sub.get("count", 0)
                sub_links += sexp(
                    '(a :class (str "snap-start px-2 py-3 rounded " sc " flex flex-row gap-2")'
                    '   :aria-selected (if sa "true" "false")'
                    '   :href sh :hx-get sh :hx-target "#main-panel"'
                    '   :hx-select hs :hx-swap "outerHTML" :hx-push-url "true"'
                    '  (div sl)'
                    '  (div :aria-label scl sct))',
                    sc=select_colours, sa=sub_active, sh=sub_href, hs=hx_select,
                    sl=sub_label, scl=f"{sub_count} products", sct=str(sub_count),
                )
            subs_html = sexp(
                '(div :class "pb-3 pl-2"'
                '  (div :data-peek-viewport "" :data-peek-size-px "18" :data-peek-edge "bottom" :data-peek-mask "true" :class "m-2 bg-stone-100"'
                '    (div :data-peek-inner "" :class "grid grid-cols-1 gap-1 snap-y snap-mandatory pr-1" :aria-label "Subcategories"'
                '      (raw! sl))))',
                sl=sub_links,
            )
        else:
            view_href = prefix + url_for("market.browse.browse_top", top_slug=cat_slug) + qs
            subs_html = sexp(
                '(div :class "pb-3 pl-2"'
                '  (a :class "px-2 py-1 rounded hover:bg-stone-100 block"'
                '     :href vh :hx-get vh :hx-target "#main-panel"'
                '     :hx-select hs :hx-swap "outerHTML" :hx-push-url "true"'
                '     "View all"))',
                vh=view_href, hs=hx_select,
            )

        items += sexp(
            '(details :class "group/cat py-1" :open op'
            '  (raw! sh) (raw! subh))',
            op=cat_active or None, sh=summary_html, subh=subs_html,
        )

    return sexp(
        '(div :class "px-4 py-2" (div :class "divide-y" (raw! items)))',
        items=items,
    )


# ---------------------------------------------------------------------------
# Product card (browse grid item)
# ---------------------------------------------------------------------------

def _product_card_html(p: dict, ctx: dict) -> str:
    """Render a single product card for browse grid."""
    from quart import url_for
    from shared.browser.app.csrf import generate_csrf_token
    from shared.utils import route_prefix

    prefix = route_prefix()
    slug = p.get("slug", "")
    item_href = prefix + url_for("market.browse.product.product_detail", product_slug=slug)
    hx_select = ctx.get("hx_select_search", "#main-panel")
    asset_url_fn = ctx.get("asset_url")
    cart = ctx.get("cart", [])
    selected_brands = ctx.get("selected_brands", [])
    selected_stickers = ctx.get("selected_stickers", [])
    search = ctx.get("search", "")
    user = ctx.get("user")
    csrf = generate_csrf_token()
    cart_action = url_for("market.browse.product.cart", product_slug=slug)

    # Like button overlay
    like_html = ""
    if user:
        liked = p.get("is_liked", False)
        like_html = _like_button_html(slug, liked, csrf, ctx)

    # Image
    image = p.get("image")
    labels = p.get("labels", [])
    brand = p.get("brand", "")
    brand_highlight = " bg-yellow-200" if brand in selected_brands else ""

    if image:
        labels_html = ""
        if callable(asset_url_fn):
            for l in labels:
                labels_html += sexp(
                    '(img :src src :alt ""'
                    '     :class "pointer-events-none absolute inset-0 w-full h-full object-contain object-top")',
                    src=asset_url_fn("labels/" + l + ".svg"),
                )
        img_html = sexp(
            '(div :class "w-full aspect-square bg-stone-100 relative"'
            '  (figure :class "inline-block w-full h-full"'
            '    (div :class "relative w-full h-full"'
            '      (img :src im :alt "no image" :class "absolute inset-0 w-full h-full object-contain object-top" :loading "lazy" :decoding "async" :fetchpriority "low")'
            '      (raw! lh))'
            '    (figcaption :class (str "mt-2 text-sm text-center" bh " text-stone-600") br)))',
            im=image, lh=labels_html, bh=brand_highlight, br=brand,
        )
    else:
        labels_list = ""
        for l in labels:
            labels_list += sexp('(li l)', l=l)
        img_html = sexp(
            '(div :class "w-full aspect-square bg-stone-100 relative"'
            '  (div :class "p-2 flex flex-col items-center justify-center gap-2 text-red-500 h-full relative"'
            '    (div :class "text-stone-400 text-xs" "No image")'
            '    (ul :class "flex flex-row gap-1" (raw! ll))'
            '    (div :class "text-stone-900 text-center line-clamp-3 break-words [overflow-wrap:anywhere]" br)))',
            ll=labels_list, br=brand,
        )

    price_html = _card_price_html(p)

    # Cart button
    quantity = sum(ci.quantity for ci in cart if ci.product.slug == slug) if cart else 0
    cart_url_fn = ctx.get("cart_url")
    add_html = _cart_add_html(slug, quantity, cart_action, csrf, cart_url_fn)

    # Stickers
    stickers = p.get("stickers", [])
    stickers_html = ""
    if stickers and callable(asset_url_fn):
        sticker_items = ""
        for s in stickers:
            found = s in selected_stickers
            src = asset_url_fn(f"stickers/{s}.svg")
            ring = " ring-2 ring-emerald-500 rounded" if found else ""
            sticker_items += sexp(
                '(img :src src :alt sn :class (str "w-6 h-6" ring))',
                src=src, sn=s, ring=ring,
            )
        stickers_html = sexp(
            '(div :class "flex flex-row justify-center gap-2 p-2" (raw! si))',
            si=sticker_items,
        )

    # Title with search highlight
    title = p.get("title", "")
    if search and search.lower() in title.lower():
        idx = title.lower().index(search.lower())
        highlighted = sexp(
            '(<> pre (mark mid) post)',
            pre=title[:idx], mid=title[idx:idx+len(search)], post=title[idx+len(search):],
        )
    else:
        highlighted = sexp('(<> t)', t=title)

    return sexp(
        '(div :class "flex flex-col rounded-xl bg-white shadow hover:shadow-md transition overflow-hidden relative"'
        '  (raw! lk)'
        '  (a :href ih :hx-get ih :hx-target "#main-panel"'
        '     :hx-select hs :hx-swap "outerHTML" :hx-push-url "true"'
        '    (raw! imh) (raw! ph))'
        '  (div :class "flex justify-center" (raw! ah))'
        '  (a :href ih :hx-get ih :hx-target "#main-panel"'
        '     :hx-select hs :hx-swap "outerHTML" :hx-push-url "true"'
        '    (raw! sth)'
        '    (div :class "text-sm font-medium text-stone-800 text-center line-clamp-3 break-words [overflow-wrap:anywhere]"'
        '      (raw! hl))))',
        lk=like_html, ih=item_href, hs=hx_select,
        imh=img_html, ph=price_html, ah=add_html,
        sth=stickers_html, hl=highlighted,
    )


def _like_button_html(slug: str, liked: bool, csrf: str, ctx: dict) -> str:
    """Render the like/unlike heart button overlay."""
    from quart import url_for

    action = url_for("market.browse.product.like_toggle", product_slug=slug)
    icon_cls = "fa-solid fa-heart text-red-500" if liked else "fa-regular fa-heart text-stone-400"
    return sexp(
        '(div :class "absolute top-2 right-2 z-10 text-6xl md:text-xl"'
        '  (form :id fid :action act :method "post"'
        '        :hx-post act :hx-target (str "#like-" slug) :hx-swap "outerHTML"'
        '    (input :type "hidden" :name "csrf_token" :value csrf)'
        '    (button :type "submit" :class "cursor-pointer"'
        '      (i :class ic :aria-hidden "true"))))',
        fid=f"like-{slug}", act=action, slug=slug, csrf=csrf, ic=icon_cls,
    )


# ---------------------------------------------------------------------------
# Product cards (pagination fragment)
# ---------------------------------------------------------------------------

_MOBILE_SENTINEL_HS = (
    "init\n"
    "  if not me.dataset.retryMs then set me.dataset.retryMs to 1000 end\n"
    "  if window.matchMedia('(min-width: 768px)').matches then set @hx-disabled to '' end\n"
    "on resize from window\n"
    "  if window.matchMedia('(min-width: 768px)').matches then set @hx-disabled to '' else remove @hx-disabled end\n"
    "on htmx:beforeRequest\n"
    "  if window.matchMedia('(min-width: 768px)').matches then halt end\n"
    "  add .hidden to .js-neterr in me\n"
    "  remove .hidden from .js-loading in me\n"
    "  remove .opacity-100 from me\n"
    "  add .opacity-0 to me\n"
    "def backoff()\n"
    "  set ms to me.dataset.retryMs\n"
    "  if ms > 30000 then set ms to 30000 end\n"
    "  add .hidden to .js-loading in me\n"
    "  remove .hidden from .js-neterr in me\n"
    "  remove .opacity-0 from me\n"
    "  add .opacity-100 to me\n"
    "  wait ms ms\n"
    "  trigger sentinelmobile:retry\n"
    "  set ms to ms * 2\n"
    "  if ms > 30000 then set ms to 30000 end\n"
    "  set me.dataset.retryMs to ms\n"
    "end\n"
    "on htmx:sendError call backoff()\n"
    "on htmx:responseError call backoff()\n"
    "on htmx:timeout call backoff()"
)

_DESKTOP_SENTINEL_HS = (
    "init\n"
    "  if not me.dataset.retryMs then set me.dataset.retryMs to 1000 end\n"
    "on htmx:beforeRequest(event)\n"
    "  add .hidden to .js-neterr in me\n"
    "  remove .hidden from .js-loading in me\n"
    "  remove .opacity-100 from me\n"
    "  add .opacity-0 to me\n"
    "  set trig to null\n"
    "  if event.detail and event.detail.triggeringEvent then set trig to event.detail.triggeringEvent end\n"
    "  if trig and trig.type is 'intersect'\n"
    "    set scroller to the closest .js-grid-viewport\n"
    "    if scroller is null then halt end\n"
    "    if scroller.scrollTop < 20 then halt end\n"
    "  end\n"
    "def backoff()\n"
    "  set ms to me.dataset.retryMs\n"
    "  if ms > 30000 then set ms to 30000 end\n"
    "  add .hidden to .js-loading in me\n"
    "  remove .hidden from .js-neterr in me\n"
    "  remove .opacity-0 from me\n"
    "  add .opacity-100 to me\n"
    "  wait ms ms\n"
    "  trigger sentinel:retry\n"
    "  set ms to ms * 2\n"
    "  if ms > 30000 then set ms to 30000 end\n"
    "  set me.dataset.retryMs to ms\n"
    "end\n"
    "on htmx:sendError call backoff()\n"
    "on htmx:responseError call backoff()\n"
    "on htmx:timeout call backoff()"
)


def _product_cards_html(ctx: dict) -> str:
    """Render product cards with infinite scroll sentinels."""
    from shared.utils import route_prefix

    prefix = route_prefix()
    products = ctx.get("products", [])
    page = ctx.get("page", 1)
    total_pages = ctx.get("total_pages", 1)
    current_local_href = ctx.get("current_local_href", "/")
    qs_fn = ctx.get("qs_filter")

    parts = [_product_card_html(p, ctx) for p in products]

    if page < total_pages:
        # Build next page URL
        if callable(qs_fn):
            next_qs = qs_fn({"page": page + 1})
        else:
            next_qs = f"?page={page + 1}"
        next_url = prefix + current_local_href + next_qs

        # Mobile sentinel
        parts.append(sexp(
            '(div :id mid'
            '     :class "block md:hidden h-[60vh] opacity-0 pointer-events-none js-mobile-sentinel"'
            '     :hx-get nu :hx-trigger "intersect once delay:250ms, sentinelmobile:retry"'
            '     :hx-swap "outerHTML"'
            '     :_ mhs'
            '     :role "status" :aria-live "polite" :aria-hidden "true"'
            '  (div :class "js-loading text-center text-xs text-stone-400" "loading...")'
            '  (div :class "js-neterr hidden text-center text-xs text-stone-400" "Retrying..."))',
            mid=f"sentinel-{page}-m", nu=next_url, mhs=_MOBILE_SENTINEL_HS,
        ))

        # Desktop sentinel
        parts.append(sexp(
            '(div :id did'
            '     :class "hidden md:block h-4 opacity-0 pointer-events-none"'
            '     :hx-get nu :hx-trigger "intersect once delay:250ms, sentinel:retry"'
            '     :hx-swap "outerHTML"'
            '     :_ dhs'
            '     :role "status" :aria-live "polite" :aria-hidden "true"'
            '  (div :class "js-loading text-center text-xs text-stone-400" "loading...")'
            '  (div :class "js-neterr hidden text-center text-xs text-stone-400" "Retrying..."))',
            did=f"sentinel-{page}-d", nu=next_url, dhs=_DESKTOP_SENTINEL_HS,
        ))
    else:
        parts.append(sexp(
            '(div :class "col-span-full mt-4 text-center text-xs text-stone-400" "End of results")',
        ))

    return "".join(parts)


# ---------------------------------------------------------------------------
# Browse filter panels (mobile + desktop)
# ---------------------------------------------------------------------------

def _desktop_filter_html(ctx: dict) -> str:
    """Build the desktop aside filter panel (search, category, sort, like, labels, stickers, brands)."""
    from quart import url_for
    from shared.utils import route_prefix

    prefix = route_prefix()
    category_label = ctx.get("category_label", "")
    sort_options = ctx.get("sort_options", [])
    sort = ctx.get("sort", "")
    labels = ctx.get("labels", [])
    selected_labels = ctx.get("selected_labels", [])
    stickers = ctx.get("stickers", [])
    selected_stickers = ctx.get("selected_stickers", [])
    brands = ctx.get("brands", [])
    selected_brands = ctx.get("selected_brands", [])
    liked = ctx.get("liked", False)
    liked_count = ctx.get("liked_count", 0)
    subs_local = ctx.get("subs_local", [])
    top_local_href = ctx.get("top_local_href", "")
    sub_slug = ctx.get("sub_slug", "")

    # Search
    search_html = search_desktop_html(ctx)

    # Category summary + sort + like + labels + stickers
    cat_inner = sexp(
        '(div :class "mb-4" (div :class "text-2xl uppercase tracking-wide text-black-500" cl))',
        cl=category_label,
    )

    if sort_options:
        cat_inner += _sort_stickers_html(sort_options, sort, ctx)

    like_labels = _like_filter_html(liked, liked_count, ctx)
    if labels:
        like_labels += _labels_filter_html(labels, selected_labels, ctx, prefix="nav-labels")
    cat_inner += sexp(
        '(nav :aria-label "like" :class "flex flex-row justify-center w-full p-0 m-0 border bg-white shadow-sm rounded-xl gap-1"'
        '  (raw! ll))',
        ll=like_labels,
    )

    if stickers:
        cat_inner += _stickers_filter_html(stickers, selected_stickers, ctx)

    if subs_local and top_local_href:
        cat_inner += _subcategory_selector_html(subs_local, top_local_href, sub_slug, ctx)

    cat_summary = sexp(
        '(div :id "category-summary-desktop" :hxx-swap-oob "outerHTML" (raw! ci))',
        ci=cat_inner,
    )

    # Brand filter
    brand_inner = ""
    if brands:
        brand_inner = _brand_filter_html(brands, selected_brands, ctx)
    brand_summary = sexp(
        '(div :id "filter-summary-desktop" :hxx-swap-oob "outerHTML" (raw! bi))',
        bi=brand_inner,
    )

    return search_html + cat_summary + brand_summary


def _mobile_filter_summary_html(ctx: dict) -> str:
    """Build mobile filter summary (collapsible bar showing active filters)."""
    asset_url_fn = ctx.get("asset_url")
    sort = ctx.get("sort", "")
    sort_options = ctx.get("sort_options", [])
    liked = ctx.get("liked", False)
    liked_count = ctx.get("liked_count", 0)
    selected_labels = ctx.get("selected_labels", [])
    selected_stickers = ctx.get("selected_stickers", [])
    selected_brands = ctx.get("selected_brands", [])
    labels = ctx.get("labels", [])
    stickers = ctx.get("stickers", [])
    brands = ctx.get("brands", [])

    # Search bar
    search_bar = search_mobile_html(ctx)

    # Summary chips showing active filters
    chips = ""

    if sort and sort_options:
        for k, l, i in sort_options:
            if k == sort and callable(asset_url_fn):
                chips += sexp(
                    '(ul :class "relative inline-flex items-center justify-center gap-2"'
                    '  (li :role "listitem" (img :src src :alt lb :class "w-10 h-10")))',
                    src=asset_url_fn(i), lb=l,
                )
    if liked:
        liked_inner = sexp(
            '(i :aria-hidden "true" :class "fa-solid fa-heart text-red-500 text-[40px] leading-none")',
        )
        if liked_count is not None:
            cls = "text-[10px] text-stone-500" if liked_count != 0 else "text-md text-red-500 font-bold"
            liked_inner += sexp(
                '(div :class (str cls " mt-1 leading-none tabular-nums") lc)',
                cls=cls, lc=str(liked_count),
            )
        chips += sexp(
            '(div :class "flex flex-col items-center gap-1 pb-1" (raw! li))',
            li=liked_inner,
        )

    # Selected labels
    if selected_labels:
        label_items = ""
        for sl in selected_labels:
            for lb in labels:
                if lb.get("name") == sl and callable(asset_url_fn):
                    li_inner = sexp(
                        '(img :src src :alt sn :class "w-10 h-10")',
                        src=asset_url_fn("nav-labels/" + sl + ".svg"), sn=sl,
                    )
                    if lb.get("count") is not None:
                        cls = "text-[10px] text-stone-500" if lb["count"] != 0 else "text-md text-red-500 font-bold"
                        li_inner += sexp(
                            '(div :class (str cls " mt-1 leading-none tabular-nums") ct)',
                            cls=cls, ct=str(lb["count"]),
                        )
                    label_items += sexp(
                        '(li :role "listitem" :class "flex flex-col items-center gap-1 pb-1" (raw! li))',
                        li=li_inner,
                    )
        chips += sexp(
            '(ul :class "relative inline-flex items-center justify-center gap-2" (raw! li))',
            li=label_items,
        )

    # Selected stickers
    if selected_stickers:
        sticker_items = ""
        for ss in selected_stickers:
            for st in stickers:
                if st.get("name") == ss and callable(asset_url_fn):
                    si_inner = sexp(
                        '(img :src src :alt sn :class "w-10 h-10")',
                        src=asset_url_fn("stickers/" + ss + ".svg"), sn=ss,
                    )
                    if st.get("count") is not None:
                        cls = "text-[10px] text-stone-500" if st["count"] != 0 else "text-md text-red-500 font-bold"
                        si_inner += sexp(
                            '(div :class (str cls " mt-1 leading-none tabular-nums") ct)',
                            cls=cls, ct=str(st["count"]),
                        )
                    sticker_items += sexp(
                        '(li :role "listitem" :class "flex flex-col items-center gap-1 pb-1" (raw! si))',
                        si=si_inner,
                    )
        chips += sexp(
            '(ul :class "relative inline-flex items-center justify-center gap-2" (raw! si))',
            si=sticker_items,
        )

    # Selected brands
    if selected_brands:
        brand_items = ""
        for b in selected_brands:
            count = 0
            for br in brands:
                if br.get("name") == b:
                    count = br.get("count", 0)
            if count:
                brand_items += sexp(
                    '(li :role "listitem" :class "flex flex-row items-center gap-2"'
                    '  (div :class "text-md" bn) (div :class "text-md" ct))',
                    bn=b, ct=str(count),
                )
            else:
                brand_items += sexp(
                    '(li :role "listitem" :class "flex flex-row items-center gap-2"'
                    '  (div :class "text-md text-red-500" bn) (div :class "text-xl text-red-500" "0"))',
                    bn=b,
                )
        chips += sexp('(ul (raw! bi))', bi=brand_items)

    chips_html = sexp(
        '(div :class "flex flex-row items-start gap-2" (raw! ch))',
        ch=chips,
    )

    # Full mobile filter details
    from shared.utils import route_prefix
    prefix = route_prefix()
    mobile_filter = _mobile_filter_content_html(ctx, prefix)

    return sexp(
        '(details :class "md:hidden group" :id "/filter"'
        '  (summary :class "cursor-pointer select-none" :id "filter-summary-mobile"'
        '    (raw! sb)'
        '    (div :class "col-span-12 min-w-0 grid grid-cols-1 gap-1 bg-gray-100 px-2" :role "list"'
        '      (raw! ch)))'
        '  (div :id "filter-details-mobile" :style "display:contents"'
        '    (raw! mf)))',
        sb=search_bar, ch=chips_html, mf=mobile_filter,
    )


def _mobile_filter_content_html(ctx: dict, prefix: str) -> str:
    """Build the expanded mobile filter panel contents."""
    selected_labels = ctx.get("selected_labels", [])
    selected_stickers = ctx.get("selected_stickers", [])
    selected_brands = ctx.get("selected_brands", [])
    current_local_href = ctx.get("current_local_href", "/")
    hx_select = ctx.get("hx_select_search", "#main-panel")
    sort_options = ctx.get("sort_options", [])
    sort = ctx.get("sort", "")
    liked = ctx.get("liked", False)
    liked_count = ctx.get("liked_count", 0)
    labels = ctx.get("labels", [])
    stickers = ctx.get("stickers", [])
    brands = ctx.get("brands", [])
    search = ctx.get("search", "")
    qs_fn = ctx.get("qs_filter")

    parts = []

    # Sort options
    if sort_options:
        parts.append(_sort_stickers_html(sort_options, sort, ctx, mobile=True))

    # Clear filters button
    has_filters = search or selected_labels or selected_stickers or selected_brands
    if has_filters and callable(qs_fn):
        clear_url = prefix + current_local_href + qs_fn({"clear_filters": True})
        parts.append(sexp(
            '(div :class "flex flex-row justify-center"'
            '  (a :href cu :hx-get cu :hx-target "#main-panel"'
            '     :hx-select hs :hx-swap "outerHTML" :hx-push-url "true"'
            '     :role "button" :title "clear filters" :aria-label "clear filters"'
            '     :class "flex flex-col items-center justify-start p-1 rounded bg-stone-200 text-black cursor-pointer"'
            '    (span :class "mt-1 leading-none tabular-nums" "clear filters")))',
            cu=clear_url, hs=hx_select,
        ))

    # Like + labels row
    like_labels = _like_filter_html(liked, liked_count, ctx, mobile=True)
    if labels:
        like_labels += _labels_filter_html(labels, selected_labels, ctx, prefix="nav-labels", mobile=True)
    parts.append(sexp(
        '(div :class "flex flex-row gap-2 justify-center items-center" (raw! ll))',
        ll=like_labels,
    ))

    # Stickers
    if stickers:
        parts.append(_stickers_filter_html(stickers, selected_stickers, ctx, mobile=True))

    # Brands
    if brands:
        parts.append(_brand_filter_html(brands, selected_brands, ctx, mobile=True))

    return "".join(parts)


def _sort_stickers_html(sort_options: list, current_sort: str, ctx: dict, mobile: bool = False) -> str:
    """Render sort option stickers."""
    asset_url_fn = ctx.get("asset_url")
    current_local_href = ctx.get("current_local_href", "/")
    hx_select = ctx.get("hx_select_search", "#main-panel")
    qs_fn = ctx.get("qs_filter")
    from shared.utils import route_prefix
    prefix = route_prefix()

    items = ""
    for k, label, icon in sort_options:
        if callable(qs_fn):
            href = prefix + current_local_href + qs_fn({"sort": k})
        else:
            href = "#"
        active = (k == current_sort)
        ring = " ring-2 ring-emerald-500 rounded" if active else ""
        src = asset_url_fn(icon) if callable(asset_url_fn) else icon
        items += sexp(
            '(a :href h :hx-get h :hx-target "#main-panel"'
            '   :hx-select hs :hx-swap "outerHTML" :hx-push-url "true"'
            '   :class (str "flex flex-col items-center gap-1 p-1 cursor-pointer" ring)'
            '  (img :src src :alt lb :class "w-10 h-10")'
            '  (span :class "text-xs" lb))',
            h=href, hs=hx_select, ring=ring, src=src, lb=label,
        )
    return sexp(
        '(div :class "flex flex-row gap-2 justify-center p-1" (raw! items))',
        items=items,
    )


def _like_filter_html(liked: bool, liked_count: int, ctx: dict, mobile: bool = False) -> str:
    """Render the like filter toggle."""
    current_local_href = ctx.get("current_local_href", "/")
    hx_select = ctx.get("hx_select_search", "#main-panel")
    qs_fn = ctx.get("qs_filter")
    from shared.utils import route_prefix
    prefix = route_prefix()

    if callable(qs_fn):
        href = prefix + current_local_href + qs_fn({"liked": not liked})
    else:
        href = "#"

    icon_cls = "fa-solid fa-heart text-red-500" if liked else "fa-regular fa-heart text-stone-400"
    size = "text-[40px]" if mobile else "text-2xl"
    return sexp(
        '(a :href h :hx-get h :hx-target "#main-panel"'
        '   :hx-select hs :hx-swap "outerHTML" :hx-push-url "true"'
        '   :class "flex flex-col items-center gap-1 p-1 cursor-pointer"'
        '  (i :aria-hidden "true" :class (str ic " " sz " leading-none")))',
        h=href, hs=hx_select, ic=icon_cls, sz=size,
    )


def _labels_filter_html(labels: list, selected: list, ctx: dict, *,
                         prefix: str = "nav-labels", mobile: bool = False) -> str:
    """Render label filter buttons."""
    asset_url_fn = ctx.get("asset_url")
    current_local_href = ctx.get("current_local_href", "/")
    hx_select = ctx.get("hx_select_search", "#main-panel")
    qs_fn = ctx.get("qs_filter")
    from shared.utils import route_prefix
    rp = route_prefix()

    items = ""
    for lb in labels:
        name = lb.get("name", "")
        is_sel = name in selected
        if callable(qs_fn):
            new_sel = [s for s in selected if s != name] if is_sel else selected + [name]
            href = rp + current_local_href + qs_fn({"labels": new_sel})
        else:
            href = "#"
        ring = " ring-2 ring-emerald-500 rounded" if is_sel else ""
        src = asset_url_fn(f"{prefix}/{name}.svg") if callable(asset_url_fn) else ""
        items += sexp(
            '(a :href h :hx-get h :hx-target "#main-panel"'
            '   :hx-select hs :hx-swap "outerHTML" :hx-push-url "true"'
            '   :class (str "flex flex-col items-center gap-1 p-1 cursor-pointer" ring)'
            '  (img :src src :alt nm :class "w-10 h-10"))',
            h=href, hs=hx_select, ring=ring, src=src, nm=name,
        )
    return items


def _stickers_filter_html(stickers: list, selected: list, ctx: dict, mobile: bool = False) -> str:
    """Render sticker filter grid."""
    asset_url_fn = ctx.get("asset_url")
    current_local_href = ctx.get("current_local_href", "/")
    hx_select = ctx.get("hx_select_search", "#main-panel")
    qs_fn = ctx.get("qs_filter")
    from shared.utils import route_prefix
    rp = route_prefix()

    items = ""
    for st in stickers:
        name = st.get("name", "")
        count = st.get("count", 0)
        is_sel = name in selected
        if callable(qs_fn):
            new_sel = [s for s in selected if s != name] if is_sel else selected + [name]
            href = rp + current_local_href + qs_fn({"stickers": new_sel})
        else:
            href = "#"
        ring = " ring-2 ring-emerald-500 rounded" if is_sel else ""
        src = asset_url_fn(f"stickers/{name}.svg") if callable(asset_url_fn) else ""
        cls = "text-[10px] text-stone-500" if count != 0 else "text-md text-red-500 font-bold"
        items += sexp(
            '(a :href h :hx-get h :hx-target "#main-panel"'
            '   :hx-select hs :hx-swap "outerHTML" :hx-push-url "true"'
            '   :class (str "flex flex-col items-center gap-1 p-1 cursor-pointer" ring)'
            '  (img :src src :alt nm :class "w-6 h-6")'
            '  (span :class cls ct))',
            h=href, hs=hx_select, ring=ring, src=src, nm=name, cls=cls, ct=str(count),
        )
    return sexp(
        '(div :class "flex flex-wrap gap-2 justify-center p-1" (raw! items))',
        items=items,
    )


def _brand_filter_html(brands: list, selected: list, ctx: dict, mobile: bool = False) -> str:
    """Render brand filter checkboxes."""
    current_local_href = ctx.get("current_local_href", "/")
    hx_select = ctx.get("hx_select_search", "#main-panel")
    qs_fn = ctx.get("qs_filter")
    from shared.utils import route_prefix
    rp = route_prefix()

    items = ""
    for br in brands:
        name = br.get("name", "")
        count = br.get("count", 0)
        is_sel = name in selected
        if callable(qs_fn):
            new_sel = [s for s in selected if s != name] if is_sel else selected + [name]
            href = rp + current_local_href + qs_fn({"brands": new_sel})
        else:
            href = "#"
        bg = " bg-yellow-200" if is_sel else ""
        cls = "text-md" if count else "text-md text-red-500"
        items += sexp(
            '(a :href h :hx-get h :hx-target "#main-panel"'
            '   :hx-select hs :hx-swap "outerHTML" :hx-push-url "true"'
            '   :class (str "flex flex-row items-center gap-2 px-2 py-1 rounded hover:bg-stone-100" bg)'
            '  (div :class cls nm) (div :class cls ct))',
            h=href, hs=hx_select, bg=bg, cls=cls, nm=name, ct=str(count),
        )
    return sexp(
        '(div :class "space-y-1 p-2" (raw! items))',
        items=items,
    )


def _subcategory_selector_html(subs: list, top_href: str, current_sub: str, ctx: dict) -> str:
    """Render subcategory vertical nav."""
    hx_select = ctx.get("hx_select_search", "#main-panel")
    from shared.utils import route_prefix
    rp = route_prefix()

    all_cls = " bg-stone-200 font-medium" if not current_sub else ""
    all_full_href = rp + top_href
    items = sexp(
        '(a :href ah :hx-get ah :hx-target "#main-panel"'
        '   :hx-select hs :hx-swap "outerHTML" :hx-push-url "true"'
        '   :class (str "block px-2 py-1 rounded hover:bg-stone-100" ac)'
        '   "All")',
        ah=all_full_href, hs=hx_select, ac=all_cls,
    )
    for sub in subs:
        slug = sub.get("slug", "")
        name = sub.get("name", "")
        href = sub.get("href", "")
        active = (slug == current_sub)
        active_cls = " bg-stone-200 font-medium" if active else ""
        full_href = rp + href
        items += sexp(
            '(a :href fh :hx-get fh :hx-target "#main-panel"'
            '   :hx-select hs :hx-swap "outerHTML" :hx-push-url "true"'
            '   :class (str "block px-2 py-1 rounded hover:bg-stone-100" ac)'
            '   nm)',
            fh=full_href, hs=hx_select, ac=active_cls, nm=name,
        )
    return sexp(
        '(div :class "mt-4 space-y-1" (raw! items))',
        items=items,
    )


# ---------------------------------------------------------------------------
# Product detail page content
# ---------------------------------------------------------------------------

def _product_detail_html(d: dict, ctx: dict) -> str:
    """Build product detail main panel content."""
    from quart import url_for
    from shared.browser.app.csrf import generate_csrf_token

    asset_url_fn = ctx.get("asset_url")
    user = ctx.get("user")
    liked_by_current_user = ctx.get("liked_by_current_user", False)
    csrf = generate_csrf_token()

    images = d.get("images", [])
    labels = d.get("labels", [])
    stickers = d.get("stickers", [])
    brand = d.get("brand", "")
    slug = d.get("slug", "")

    # Gallery
    if images:
        # Like button
        like_html = ""
        if user:
            like_html = _like_button_html(slug, liked_by_current_user, csrf, ctx)

        # Main image + labels
        labels_overlay = ""
        if callable(asset_url_fn):
            for l in labels:
                labels_overlay += sexp(
                    '(img :src src :alt ""'
                    '     :class "pointer-events-none absolute inset-0 w-full h-full object-contain object-top")',
                    src=asset_url_fn("labels/" + l + ".svg"),
                )

        gallery_inner = sexp(
            '(<> (raw! lk)'
            '  (figure :class "inline-block"'
            '    (div :class "relative w-full aspect-square"'
            '      (img :data-main-img "" :src im :alt alt'
            '           :class "w-full h-full object-contain object-top" :loading "eager" :decoding "async")'
            '      (raw! lo))'
            '    (figcaption :class "mt-2 text-sm text-stone-600 text-center" br)))',
            lk=like_html, im=images[0], alt=d.get("title", ""),
            lo=labels_overlay, br=brand,
        )

        # Prev/next buttons
        nav_buttons = ""
        if len(images) > 1:
            nav_buttons = sexp(
                '(<>'
                '  (button :type "button" :data-prev ""'
                '          :class "absolute left-2 top-1/2 -translate-y-1/2 z-10 grid place-items-center w-12 h-12 md:w-14 md:h-14 rounded-full bg-white/90 hover:bg-white shadow-lg text-3xl md:text-4xl"'
                '          :title "Previous" "\u2039")'
                '  (button :type "button" :data-next ""'
                '          :class "absolute right-2 top-1/2 -translate-y-1/2 z-10 grid place-items-center w-12 h-12 md:w-14 md:h-14 rounded-full bg-white/90 hover:bg-white shadow-lg text-3xl md:text-4xl"'
                '          :title "Next" "\u203a"))',
            )

        gallery_html = sexp(
            '(div :class "relative rounded-xl overflow-hidden bg-stone-100"'
            '  (raw! gi) (raw! nb))',
            gi=gallery_inner, nb=nav_buttons,
        )

        # Thumbnails
        if len(images) > 1:
            thumbs = ""
            for i, u in enumerate(images):
                thumbs += sexp(
                    '(<> (button :type "button" :data-thumb ""'
                    '            :class "shrink-0 rounded-lg overflow-hidden bg-stone-100 hover:opacity-90 ring-offset-2"'
                    '            :title ti'
                    '    (img :src u :class "h-16 w-16 object-contain" :alt ai :loading "lazy" :decoding "async"))'
                    '  (span :data-image-src u :class "hidden"))',
                    ti=f"Image {i+1}", u=u, ai=f"thumb {i+1}",
                )
            gallery_html += sexp(
                '(div :class "flex flex-row justify-center"'
                '  (div :class "mt-3 flex gap-2 overflow-x-auto no-scrollbar" (raw! th)))',
                th=thumbs,
            )
    else:
        like_html = ""
        if user:
            like_html = _like_button_html(slug, liked_by_current_user, csrf, ctx)
        gallery_html = sexp(
            '(div :class "relative aspect-square bg-stone-100 rounded-xl flex items-center justify-center text-stone-400"'
            '  (raw! lk) "No image")',
            lk=like_html,
        )

    # Stickers below gallery
    stickers_html = ""
    if stickers and callable(asset_url_fn):
        sticker_items = ""
        for s in stickers:
            sticker_items += sexp(
                '(img :src src :alt sn :class "w-10 h-10")',
                src=asset_url_fn("stickers/" + s + ".svg"), sn=s,
            )
        stickers_html = sexp(
            '(div :class "p-2 flex flex-row justify-center gap-2" (raw! si))',
            si=sticker_items,
        )

    # Right column: prices, description, sections
    pr = _set_prices(d)
    details_inner = ""

    # Unit price / case size extras
    extras = ""
    ppu = d.get("price_per_unit") or d.get("price_per_unit_raw")
    if ppu:
        extras += sexp(
            '(div (str "Unit price: " ps))',
            ps=_price_str(d.get("price_per_unit"), d.get("price_per_unit_raw"), d.get("price_per_unit_currency")),
        )
    if d.get("case_size_raw"):
        extras += sexp('(div (str "Case size: " cs))', cs=d["case_size_raw"])
    if extras:
        details_inner += sexp(
            '(div :class "mt-2 space-y-1 text-sm text-stone-600" (raw! ex))',
            ex=extras,
        )

    # Description
    desc_short = d.get("description_short")
    desc_html = d.get("description_html")
    if desc_short or desc_html:
        desc_inner = ""
        if desc_short:
            desc_inner += sexp('(p :class "leading-relaxed text-lg" ds)', ds=desc_short)
        if desc_html:
            desc_inner += sexp(
                '(div :class "max-w-none text-sm leading-relaxed" (raw! dh))',
                dh=desc_html,
            )
        details_inner += sexp(
            '(div :class "mt-4 text-stone-800 space-y-3" (raw! di))',
            di=desc_inner,
        )

    # Sections (expandable)
    sections = d.get("sections", [])
    if sections:
        sec_items = ""
        for sec in sections:
            sec_items += sexp(
                '(details :class "group rounded-xl border bg-white shadow-sm open:shadow p-0"'
                '  (summary :class "cursor-pointer select-none px-4 py-3 flex items-center justify-between"'
                '    (span :class "font-medium" st)'
                '    (span :class "ml-2 text-xl transition-transform group-open:rotate-180" "\u2304"))'
                '  (div :class "px-4 pb-4 max-w-none text-sm leading-relaxed" (raw! sh)))',
                st=sec.get("title", ""), sh=sec.get("html", ""),
            )
        details_inner += sexp(
            '(div :class "mt-8 space-y-3" (raw! si))',
            si=sec_items,
        )

    details_html = sexp('(div :class "md:col-span-3" (raw! di))', di=details_inner)

    return sexp(
        '(<> (div :class "mt-3 grid grid-cols-1 md:grid-cols-5 gap-6" :data-gallery-root ""'
        '      (div :class "md:col-span-2" (raw! gh) (raw! sh))'
        '      (raw! dh))'
        '    (div :class "pb-8"))',
        gh=gallery_html, sh=stickers_html, dh=details_html,
    )


# ---------------------------------------------------------------------------
# Product meta (OpenGraph, JSON-LD)
# ---------------------------------------------------------------------------

def _product_meta_html(d: dict, ctx: dict) -> str:
    """Build product meta tags for <head>."""
    import json
    from quart import request

    title = d.get("title", "")
    desc_source = d.get("description_short") or ""
    if not desc_source and d.get("description_html"):
        import re
        desc_source = re.sub(r"<[^>]+>", "", d.get("description_html", ""))
    description = desc_source.strip().replace("\n", " ")[:160]
    image_url = d.get("image") or (d.get("images", [None])[0] if d.get("images") else None)
    canonical = request.url if request else ""
    brand = d.get("brand", "")
    sku = d.get("sku", "")
    price = d.get("special_price") or d.get("regular_price") or d.get("rrp")
    price_currency = d.get("special_price_currency") or d.get("regular_price_currency") or d.get("rrp_currency")

    parts = sexp('(title t)', t=title)
    parts += sexp('(meta :name "description" :content desc)', desc=description)
    if canonical:
        parts += sexp('(link :rel "canonical" :href can)', can=canonical)

    # OpenGraph
    site_title = ctx.get("base_title", "")
    parts += sexp('(meta :property "og:site_name" :content st)', st=site_title)
    parts += sexp('(meta :property "og:type" :content "product")')
    parts += sexp('(meta :property "og:title" :content t)', t=title)
    parts += sexp('(meta :property "og:description" :content desc)', desc=description)
    if canonical:
        parts += sexp('(meta :property "og:url" :content can)', can=canonical)
    if image_url:
        parts += sexp('(meta :property "og:image" :content iu)', iu=image_url)
    if price and price_currency:
        parts += sexp('(meta :property "product:price:amount" :content pa)', pa=f"{price:.2f}")
        parts += sexp('(meta :property "product:price:currency" :content pc)', pc=price_currency)
    if brand:
        parts += sexp('(meta :property "product:brand" :content br)', br=brand)

    # Twitter
    card_type = "summary_large_image" if image_url else "summary"
    parts += sexp('(meta :name "twitter:card" :content ct)', ct=card_type)
    parts += sexp('(meta :name "twitter:title" :content t)', t=title)
    parts += sexp('(meta :name "twitter:description" :content desc)', desc=description)
    if image_url:
        parts += sexp('(meta :name "twitter:image" :content iu)', iu=image_url)

    # JSON-LD
    jsonld = {
        "@context": "https://schema.org",
        "@type": "Product",
        "name": title,
        "image": image_url,
        "description": description,
        "sku": sku,
        "url": canonical,
    }
    if brand:
        jsonld["brand"] = {"@type": "Brand", "name": brand}
    if price and price_currency:
        jsonld["offers"] = {
            "@type": "Offer",
            "price": price,
            "priceCurrency": price_currency,
            "url": canonical,
            "availability": "https://schema.org/InStock",
        }
    parts += sexp(
        '(script :type "application/ld+json" (raw! jl))',
        jl=json.dumps(jsonld),
    )

    return parts


# ---------------------------------------------------------------------------
# Market cards (all markets / page markets)
# ---------------------------------------------------------------------------

def _market_card_html(market: Any, page_info: dict, *, show_page_badge: bool = True,
                      post_slug: str = "") -> str:
    """Render a single market card."""
    from shared.infrastructure.urls import market_url

    name = getattr(market, "name", "")
    description = getattr(market, "description", "")
    slug = getattr(market, "slug", "")
    container_id = getattr(market, "container_id", None)

    if show_page_badge and page_info:
        pi = page_info.get(container_id, {})
        p_slug = pi.get("slug", "")
        p_title = pi.get("title", "")
        market_href = market_url(f"/{p_slug}/{slug}/") if p_slug else ""
    else:
        p_slug = post_slug
        p_title = ""
        market_href = market_url(f"/{post_slug}/{slug}/") if post_slug else ""

    title_html = ""
    if market_href:
        title_html = sexp(
            '(a :href mh :class "hover:text-emerald-700"'
            '  (h2 :class "text-lg font-semibold text-stone-900" nm))',
            mh=market_href, nm=name,
        )
    else:
        title_html = sexp(
            '(h2 :class "text-lg font-semibold text-stone-900" nm)',
            nm=name,
        )

    desc_html = ""
    if description:
        desc_html = sexp(
            '(p :class "text-sm text-stone-600 mt-1 line-clamp-2" d)',
            d=description,
        )

    badge_html = ""
    if show_page_badge and p_title:
        badge_href = market_url(f"/{p_slug}/")
        badge_html = sexp(
            '(div :class "flex flex-wrap items-center gap-1.5 mt-3"'
            '  (a :href bh :class "inline-block px-2 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-800 hover:bg-amber-200"'
            '    pt))',
            bh=badge_href, pt=p_title,
        )

    return sexp(
        '(article :class "rounded-xl bg-white shadow-sm border border-stone-200 p-5 flex flex-col justify-between hover:border-stone-400 transition-colors"'
        '  (div (raw! th) (raw! dh))'
        '  (raw! bh))',
        th=title_html, dh=desc_html, bh=badge_html,
    )


def _market_cards_html(markets: list, page_info: dict, page: int, has_more: bool,
                        next_url: str, *, show_page_badge: bool = True,
                        post_slug: str = "") -> str:
    """Render market cards with infinite scroll sentinel."""
    parts = [_market_card_html(m, page_info, show_page_badge=show_page_badge,
                                post_slug=post_slug) for m in markets]
    if has_more:
        parts.append(sexp(
            '(div :id sid :class "h-4 opacity-0 pointer-events-none"'
            '     :hx-get nu :hx-trigger "intersect once delay:250ms"'
            '     :hx-swap "outerHTML" :role "status" :aria-hidden "true"'
            '  (div :class "text-center text-xs text-stone-400" "loading..."))',
            sid=f"sentinel-{page}", nu=next_url,
        ))
    return "".join(parts)


# ---------------------------------------------------------------------------
# OOB header helpers
# ---------------------------------------------------------------------------

def _oob_header_html(parent_id: str, child_id: str, row_html: str) -> str:
    """Wrap a header row in OOB div with child placeholder."""
    return sexp(
        '(div :id pid :hx-swap-oob "outerHTML" :class "w-full"'
        '  (div :class "w-full" (raw! rh)'
        '    (div :id cid)))',
        pid=parent_id, cid=child_id, rh=row_html,
    )


# ===========================================================================
# PUBLIC API
# ===========================================================================


# ---------------------------------------------------------------------------
# All markets
# ---------------------------------------------------------------------------

def _markets_grid(cards: str) -> str:
    """Wrap market cards in a grid."""
    return sexp(
        '(div :class "max-w-full px-3 py-3 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4" (raw! c))',
        c=cards,
    )


def _no_markets_html(message: str = "No markets available") -> str:
    """Empty state for markets."""
    return sexp(
        '(div :class "px-3 py-12 text-center text-stone-400"'
        '  (i :class "fa fa-store text-4xl mb-3" :aria-hidden "true")'
        '  (p :class "text-lg" msg))',
        msg=message,
    )


async def render_all_markets_page(ctx: dict, markets: list, has_more: bool,
                                    page_info: dict, page: int) -> str:
    """Full page: all markets listing."""
    from quart import url_for
    from shared.utils import route_prefix

    prefix = route_prefix()
    next_url = prefix + url_for("all_markets.markets_fragment", page=page + 1)

    if markets:
        cards = _market_cards_html(markets, page_info, page, has_more, next_url)
        content = _markets_grid(cards)
    else:
        content = _no_markets_html()
    content += sexp('(div :class "pb-8")')

    hdr = root_header_html(ctx)
    return full_page(ctx, header_rows_html=hdr, content_html=content)


async def render_all_markets_oob(ctx: dict, markets: list, has_more: bool,
                                   page_info: dict, page: int) -> str:
    """OOB response: all markets listing."""
    from quart import url_for
    from shared.utils import route_prefix

    prefix = route_prefix()
    next_url = prefix + url_for("all_markets.markets_fragment", page=page + 1)

    if markets:
        cards = _market_cards_html(markets, page_info, page, has_more, next_url)
        content = _markets_grid(cards)
    else:
        content = _no_markets_html()
    content += sexp('(div :class "pb-8")')

    oobs = root_header_html(ctx, oob=True)
    return oob_page(ctx, oobs_html=oobs, content_html=content)


async def render_all_markets_cards(markets: list, has_more: bool,
                                     page_info: dict, page: int) -> str:
    """Pagination fragment: all markets cards."""
    from quart import url_for
    from shared.utils import route_prefix

    prefix = route_prefix()
    next_url = prefix + url_for("all_markets.markets_fragment", page=page + 1)
    return _market_cards_html(markets, page_info, page, has_more, next_url)


# ---------------------------------------------------------------------------
# Page markets
# ---------------------------------------------------------------------------

async def render_page_markets_page(ctx: dict, markets: list, has_more: bool,
                                     page: int) -> str:
    """Full page: page-scoped markets listing."""
    from quart import url_for
    from shared.utils import route_prefix

    prefix = route_prefix()
    post = ctx.get("post", {})
    post_slug = post.get("slug", "")
    next_url = prefix + url_for("page_markets.markets_fragment", page=page + 1)

    if markets:
        cards = _market_cards_html(markets, {}, page, has_more, next_url,
                                    show_page_badge=False, post_slug=post_slug)
        content = _markets_grid(cards)
    else:
        content = _no_markets_html("No markets for this page")
    content += sexp('(div :class "pb-8")')

    hdr = root_header_html(ctx)
    hdr += sexp(
        '(div :id "root-header-child" :class "w-full" (raw! ph))',
        ph=_post_header_html(ctx),
    )
    return full_page(ctx, header_rows_html=hdr, content_html=content)


async def render_page_markets_oob(ctx: dict, markets: list, has_more: bool,
                                    page: int) -> str:
    """OOB response: page-scoped markets."""
    from quart import url_for
    from shared.utils import route_prefix

    prefix = route_prefix()
    post = ctx.get("post", {})
    post_slug = post.get("slug", "")
    next_url = prefix + url_for("page_markets.markets_fragment", page=page + 1)

    if markets:
        cards = _market_cards_html(markets, {}, page, has_more, next_url,
                                    show_page_badge=False, post_slug=post_slug)
        content = _markets_grid(cards)
    else:
        content = _no_markets_html("No markets for this page")
    content += sexp('(div :class "pb-8")')

    oobs = _oob_header_html("post-header-child", "market-header-child", "")
    oobs += _post_header_html(ctx, oob=True)
    return oob_page(ctx, oobs_html=oobs, content_html=content)


async def render_page_markets_cards(markets: list, has_more: bool,
                                      page: int, post_slug: str) -> str:
    """Pagination fragment: page-scoped markets cards."""
    from quart import url_for
    from shared.utils import route_prefix

    prefix = route_prefix()
    next_url = prefix + url_for("page_markets.markets_fragment", page=page + 1)
    return _market_cards_html(markets, {}, page, has_more, next_url,
                               show_page_badge=False, post_slug=post_slug)


# ---------------------------------------------------------------------------
# Market landing page
# ---------------------------------------------------------------------------

async def render_market_home_page(ctx: dict) -> str:
    """Full page: market landing page (post content)."""
    post = ctx.get("post") or {}
    content = _market_landing_content(post)

    hdr = root_header_html(ctx)
    child = _post_header_html(ctx) + _market_header_html(ctx)
    hdr += sexp(
        '(div :id "root-header-child" :class "w-full" (raw! h))',
        h=child,
    )
    menu = _mobile_nav_panel_html(ctx)
    return full_page(ctx, header_rows_html=hdr, content_html=content, menu_html=menu)


async def render_market_home_oob(ctx: dict) -> str:
    """OOB response: market landing page."""
    post = ctx.get("post") or {}
    content = _market_landing_content(post)

    oobs = _oob_header_html("post-header-child", "market-header-child",
                             _market_header_html(ctx))
    oobs += _post_header_html(ctx, oob=True)
    menu = _mobile_nav_panel_html(ctx)
    return oob_page(ctx, oobs_html=oobs, content_html=content, menu_html=menu)


def _market_landing_content(post: dict) -> str:
    """Build market landing page content (excerpt + feature image + html)."""
    inner = ""
    if post.get("custom_excerpt"):
        inner += sexp(
            '(div :class "w-full text-center italic text-3xl p-2" ce)',
            ce=post["custom_excerpt"],
        )
    if post.get("feature_image"):
        inner += sexp(
            '(div :class "mb-3 flex justify-center"'
            '  (img :src fi :alt "" :class "rounded-lg w-full md:w-3/4 object-cover"))',
            fi=post["feature_image"],
        )
    if post.get("html"):
        inner += sexp(
            '(div :class "blog-content p-2" (raw! h))',
            h=post["html"],
        )
    return sexp(
        '(<> (article :class "relative w-full" (raw! inner)) (div :class "pb-8"))',
        inner=inner,
    )


# ---------------------------------------------------------------------------
# Browse page
# ---------------------------------------------------------------------------

def _product_grid(cards_html: str) -> str:
    """Wrap product cards in a grid."""
    return sexp(
        '(<> (div :class "grid grid-cols-1 sm:grid-cols-3 md:grid-cols-6 gap-3" (raw! c)) (div :class "pb-8"))',
        c=cards_html,
    )


async def render_browse_page(ctx: dict) -> str:
    """Full page: product browse with filters."""
    cards_html = _product_cards_html(ctx)
    content = _product_grid(cards_html)

    hdr = root_header_html(ctx)
    child = _post_header_html(ctx) + _market_header_html(ctx)
    hdr += sexp(
        '(div :id "root-header-child" :class "w-full" (raw! h))',
        h=child,
    )
    menu = _mobile_nav_panel_html(ctx)
    filter_html = _mobile_filter_summary_html(ctx)
    aside_html = _desktop_filter_html(ctx)

    return full_page(ctx, header_rows_html=hdr, content_html=content,
                     menu_html=menu, filter_html=filter_html, aside_html=aside_html)


async def render_browse_oob(ctx: dict) -> str:
    """OOB response: product browse."""
    cards_html = _product_cards_html(ctx)
    content = _product_grid(cards_html)

    oobs = _oob_header_html("post-header-child", "market-header-child",
                             _market_header_html(ctx))
    oobs += _post_header_html(ctx, oob=True)
    menu = _mobile_nav_panel_html(ctx)
    filter_html = _mobile_filter_summary_html(ctx)
    aside_html = _desktop_filter_html(ctx)

    return oob_page(ctx, oobs_html=oobs, content_html=content,
                    menu_html=menu, filter_html=filter_html, aside_html=aside_html)


async def render_browse_cards(ctx: dict) -> str:
    """Pagination fragment: product cards only."""
    return _product_cards_html(ctx)


# ---------------------------------------------------------------------------
# Product detail
# ---------------------------------------------------------------------------

async def render_product_page(ctx: dict, d: dict) -> str:
    """Full page: product detail."""
    content = _product_detail_html(d, ctx)
    meta = _product_meta_html(d, ctx)

    hdr = root_header_html(ctx)
    child = _post_header_html(ctx) + _market_header_html(ctx) + _product_header_html(ctx, d)
    hdr += sexp(
        '(div :id "root-header-child" :class "w-full" (raw! h))',
        h=child,
    )
    return full_page(ctx, header_rows_html=hdr, content_html=content, meta_html=meta)


async def render_product_oob(ctx: dict, d: dict) -> str:
    """OOB response: product detail."""
    content = _product_detail_html(d, ctx)

    oobs = _market_header_html(ctx, oob=True)
    oobs += _oob_header_html("market-header-child", "product-header-child",
                              _product_header_html(ctx, d))
    menu = _mobile_nav_panel_html(ctx)
    return oob_page(ctx, oobs_html=oobs, content_html=content, menu_html=menu)


# ---------------------------------------------------------------------------
# Product admin
# ---------------------------------------------------------------------------

async def render_product_admin_page(ctx: dict, d: dict) -> str:
    """Full page: product admin."""
    content = _product_detail_html(d, ctx)

    hdr = root_header_html(ctx)
    child = (_post_header_html(ctx) + _market_header_html(ctx)
             + _product_header_html(ctx, d) + _product_admin_header_html(ctx, d))
    hdr += sexp(
        '(div :id "root-header-child" :class "w-full" (raw! h))',
        h=child,
    )
    return full_page(ctx, header_rows_html=hdr, content_html=content)


async def render_product_admin_oob(ctx: dict, d: dict) -> str:
    """OOB response: product admin."""
    content = _product_detail_html(d, ctx)

    oobs = _product_header_html(ctx, d, oob=True)
    oobs += _oob_header_html("product-header-child", "product-admin-header-child",
                              _product_admin_header_html(ctx, d))
    return oob_page(ctx, oobs_html=oobs, content_html=content)


def _product_admin_header_html(ctx: dict, d: dict, *, oob: bool = False) -> str:
    """Build product admin header row."""
    from quart import url_for

    slug = d.get("slug", "")
    link_href = url_for("market.browse.product.admin", product_slug=slug)
    return sexp(
        '(~menu-row :id "product-admin-row" :level 4'
        ' :link-href lh :link-label "admin!!" :icon "fa fa-cog"'
        ' :child-id "product-admin-header-child" :oob oob)',
        lh=link_href,
        oob=oob,
    )


# ---------------------------------------------------------------------------
# Market admin
# ---------------------------------------------------------------------------

async def render_market_admin_page(ctx: dict) -> str:
    """Full page: market admin."""
    content = "market admin"

    hdr = root_header_html(ctx)
    child = _post_header_html(ctx) + _market_header_html(ctx) + _market_admin_header_html(ctx)
    hdr += sexp(
        '(div :id "root-header-child" :class "w-full" (raw! h))',
        h=child,
    )
    return full_page(ctx, header_rows_html=hdr, content_html=content)


async def render_market_admin_oob(ctx: dict) -> str:
    """OOB response: market admin."""
    content = "market admin"

    oobs = _market_header_html(ctx, oob=True)
    oobs += _oob_header_html("market-header-child", "market-admin-header-child",
                              _market_admin_header_html(ctx))
    return oob_page(ctx, oobs_html=oobs, content_html=content)


def _market_admin_header_html(ctx: dict, *, oob: bool = False) -> str:
    """Build market admin header row."""
    from quart import url_for

    link_href = url_for("market.admin.admin")
    return sexp(
        '(~menu-row :id "market-admin-row" :level 3'
        ' :link-href lh :link-label "admin" :icon "fa fa-cog"'
        ' :child-id "market-admin-header-child" :oob oob)',
        lh=link_href,
        oob=oob,
    )


# ---------------------------------------------------------------------------
# Public API: POST handler fragment renderers
# ---------------------------------------------------------------------------

def render_like_toggle_button(slug: str, liked: bool, *,
                               like_url: str | None = None,
                               item_type: str = "product") -> str:
    """Render a standalone like toggle button for HTMX POST response.

    Used by both market and blog like_toggle handlers.
    """
    from shared.browser.app.csrf import generate_csrf_token
    from quart import url_for
    from shared.utils import host_url

    csrf = generate_csrf_token()
    if not like_url:
        like_url = host_url(url_for("market.browse.product.like_toggle", product_slug=slug))

    if liked:
        colour = "text-red-600"
        icon = "fa-solid fa-heart"
        label = f"Unlike this {item_type}"
    else:
        colour = "text-stone-300"
        icon = "fa-regular fa-heart"
        label = f"Like this {item_type}"

    return sexp(
        '(button :class (str "flex items-center gap-1 " colour " hover:text-red-600 transition-colors w-[1em] h-[1em]")'
        '        :hx-post lu :hx-target "this" :hx-swap "outerHTML" :hx-push-url "false"'
        '        :hx-headers hh'
        '        :hx-swap-settle "0ms" :aria-label lb'
        '  (i :aria-hidden "true" :class ic))',
        colour=colour, lu=like_url,
        hh=f'{{"X-CSRFToken": "{csrf}"}}',
        lb=label, ic=icon,
    )


def render_cart_added_response(cart: list, item: Any, d: dict) -> str:
    """Render the HTMX response after add-to-cart.

    Returns OOB fragments: cart-mini icon + product add/remove buttons + cart item row.
    """
    from shared.browser.app.csrf import generate_csrf_token
    from quart import url_for, g
    from shared.infrastructure.urls import cart_url as _cart_url

    csrf = generate_csrf_token()
    slug = d.get("slug", "")
    count = sum(getattr(ci, "quantity", 0) for ci in cart)

    # 1. Cart mini icon OOB
    if count > 0:
        cart_href = _cart_url("/")
        cart_mini = sexp(
            '(div :id "cart-mini" :hx-swap-oob "outerHTML"'
            '  (a :href ch :class "relative inline-flex items-center justify-center"'
            '    (span :class "relative inline-flex items-center justify-center"'
            '      (i :class "fa-solid fa-shopping-cart text-xl" :aria-hidden "true")'
            '      (span :class "absolute -top-1.5 -right-2 pointer-events-none"'
            '        (span :class "flex items-center justify-center bg-emerald-500 text-white rounded-full min-w-[1.25rem] h-5 text-xs font-bold px-1"'
            '          ct)))))',
            ch=cart_href, ct=str(count),
        )
    else:
        from shared.config import config
        blog_href = config().get("blog_url", "/")
        logo = config().get("logo", "")
        cart_mini = sexp(
            '(div :id "cart-mini" :hx-swap-oob "outerHTML"'
            '  (a :href bh :class "relative inline-flex items-center justify-center"'
            '    (img :src lg :class "h-8 w-8 rounded-full object-cover border border-stone-300" :alt "")))',
            bh=blog_href, lg=logo,
        )

    # 2. Add/remove buttons OOB
    action = url_for("market.browse.product.cart", product_slug=slug)
    quantity = getattr(item, "quantity", 0) if item else 0
    add_html = sexp(
        '(div :id aid :hx-swap-oob "outerHTML" (raw! ah))',
        aid=f"cart-add-{slug}",
        ah=_cart_add_html(slug, quantity, action, csrf, cart_url_fn=_cart_url),
    )

    return cart_mini + add_html