/* Advance Digital brand palette ("advance" theme — see .claude/skills/ad-theme) — orange #FF5900
   accent on a deep-navy brand gradient (AD.Theme advance; the old purple was off-brand). Every rule
   below reads these as variables, so swapping the palette here re-skins the whole app without touching
   a single .razor file. The active sidebar item stays orange (--accent) for the brand pop. */
:root {
    --ink: #1A1A1D;
    --ink-soft: #3D3D42;
    --muted: #65656B;
    --line: #D8D8DB;
    --bg: #F5F5F6;
    --card: #FFFFFF;
    --card-alt: #ECECEE;
    --accent: #FF5900;
    --navy: #1B2A4A;
    --accent-dark: #CC4700;
    --accent-glow: rgba(255, 89, 0, 0.22);
    --good: #2F6B3A;
    --warn: #8A6D1D;
    --danger: #9E2B21;
    --radius: 12px;
    --shadow-sm: 0 1px 3px rgba(20, 32, 43, 0.06);
    --shadow: 0 8px 24px rgba(20, 32, 43, 0.10);
    --sidebar-w: 250px;
    --brand-gradient: linear-gradient(165deg, #1B2A4A 0%, #0E1930 100%);
}

html, body {
    font-family: 'IBM Plex Sans Thai', 'IBM Plex Sans', 'Segoe UI', Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

/* Global, not scoped to one layout: MainLayout, StorefrontLayout and EmptyLayout each render
   their own #blazor-error-ui div, but Blazor's per-component CSS isolation only applied this
   hide-by-default rule to MainLayout's copy — leaving the "An unhandled error has occurred"
   banner visibly stuck to the bottom of every storefront/login/register page at all times. */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.01em; }
h1:focus { outline: none; }
code { font-family: 'IBM Plex Mono', SFMono-Regular, Consolas, monospace; }

a { color: var(--accent-dark); text-decoration: none; }
a:hover { color: var(--accent); }

/* ===== App shell: sidebar + content ===== */
.page {
    position: relative;
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: var(--brand-gradient);
    color: #DCE6EA;
}

main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 3.5rem;
    background: var(--card);
    border-bottom: 1px solid var(--line);
}
.topbar-title { font-weight: 700; color: var(--accent-dark); letter-spacing: -0.01em; }

.content {
    padding-top: 1.5rem;
    padding-bottom: 3rem;
}

/* ===== Sidebar nav ===== */
/* NavMenu.razor's own mobile brand+toggler bar reuses the generic ".top-row" class that
   MainLayout's white content topbar also uses — override it here so the toggler (a white icon
   meant for a dark surface) isn't rendered invisible against a white background. */
.sidebar .top-row {
    background: transparent;
    border-bottom: none;
}
.sidebar .navbar-brand {
    color: #fff;
    font-weight: 700;
    padding: 1rem 0.75rem;
}
.sidebar .navbar-toggler {
    display: none;
    background-color: rgba(255,255,255,0.1);
    border: none;
}
.nav-section {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6D8894;
    padding: 1rem 1rem 0.35rem;
}
.nav-item { padding: 0; }
.nav-item .nav-link {
    color: #C7D6DC;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.92rem;
}
.nav-item .nav-link:hover { background: rgba(255,255,255,0.08); color: #fff; }
.nav-item .nav-link.active { background: var(--accent); color: #fff; font-weight: 600; }
.nav-ico { width: 1.2em; text-align: center; }

@media (max-width: 900px) {
    .page { flex-direction: column; }

    /* One compact sticky header: the sidebar's brand row + hamburger. The menu opens as an
       overlay under it (not inline, so it never pushes the page content down). */
    .sidebar {
        width: 100%;
        position: sticky;
        top: 0;
        z-index: 1030;
        padding-top: env(safe-area-inset-top, 0px);
    }
    .sidebar .navbar-toggler {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }
    .nav-scrollable {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-height: calc(100vh - 3.5rem - env(safe-area-inset-top, 0px));
        overflow-y: auto;
        background: #1b2a4a;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
    }
    .nav-scrollable { display: none; }
    .nav-scrollable.open { display: block; }
    .nav-item .nav-link { min-height: 44px; }

    /* The white top bar repeated the brand; on a phone keep only role + avatar + logout. */
    main .top-row { height: 2.75rem; padding-inline: 1rem !important; justify-content: flex-end; }
    .topbar-title, .topbar-name { display: none; }
    .content { padding-inline: 1rem !important; padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px)); }
    .topbar-link { display: inline-flex; align-items: center; min-height: 44px; }

    /* Comfortable touch targets for the small buttons used in list rows and forms. */
    .btn, .btn-sm { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
    .form-control, .form-select { min-height: 44px; }
}

/* ===== Tables become cards on phones =====
   A horizontally-scrolled table hides the columns that matter most on a phone (price, stock,
   status, the action button). Tables marked .stack-table show each row as a card, with each
   cell's data-label as its caption. A cell with data-label="" (the actions cell) has no caption. */
@media (max-width: 640px) {
    .table-responsive:has(> .stack-table) { overflow-x: visible; }
    .stack-table { min-width: 0; border: 0; }
    .stack-table thead { display: none; }
    .stack-table, .stack-table tbody, .stack-table tr, .stack-table td { display: block; width: 100%; }
    .stack-table tr {
        margin-bottom: 0.75rem;
        padding: 0.5rem 0.9rem;
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 10px;
    }
    .stack-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding: 0.4rem 0;
        border: 0;
        text-align: right;
        background: transparent;
    }
    .stack-table td::before {
        content: attr(data-label);
        flex-shrink: 0;
        font-size: 0.78rem;
        font-weight: 500;
        color: var(--muted);
        text-align: left;
    }
    .stack-table td[data-label=""]::before { display: none; }
    .stack-table td[data-label=""] { justify-content: flex-end; padding-top: 0.6rem; gap: 0.5rem; flex-wrap: wrap; }
    .stack-table td[colspan] { display: block; text-align: center; }
    .stack-table td[colspan]::before { display: none; }
    .stack-table .truncate-cell { max-width: 60vw; }
}
}

/* Bootstrap's own base rule is ".collapse { display: none; }" — nothing above ever restores
   visibility for wide screens, so the whole Vendor/Admin sidebar (every NavLink) was rendering
   with display:none on desktop, with no way to reach it since the toggler is desktop-hidden too.
   Round 1 audit finding #1 (2026-09-18): confirmed via getComputedStyle at 970px viewport. */
@media (min-width: 901px) {
    .nav-scrollable.collapse { display: block; }
}

/* ===== Buttons ===== */
.btn { border-radius: 8px; font-weight: 600; }
.btn-primary { color: #fff; background: var(--accent); border-color: var(--accent); }
.btn-primary:hover, .btn-primary:focus { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.btn:focus, .btn:active:focus, .form-control:focus, .form-select:focus {
    box-shadow: 0 0 0 0.2rem var(--accent-glow);
    border-color: var(--accent);
}
.btn-outline-secondary { border-color: var(--line); color: var(--ink-soft); }
.btn-outline-secondary:hover { background: #f1f5f9; color: var(--ink); border-color: var(--line); }
.btn-success { background: var(--good); border-color: var(--good); }
.btn-outline-success { color: var(--good); border-color: var(--good); }
.btn-outline-success:hover { background: var(--good); color: #fff; }
.btn-outline-danger { color: var(--danger); border-color: var(--danger); }
.btn-outline-danger:hover { background: var(--danger); color: #fff; }

/* ===== Cards / tables / forms ===== */
.card { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); background: var(--card); }
.table { background: var(--card); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); margin-bottom: 0; }
.table > thead > tr > th {
    background: #F5F7F8; color: var(--muted); font-size: 0.72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--line); padding: 0.7rem 1rem;
}
.table > tbody > tr > td { padding: 0.7rem 1rem; border-color: #EEF1F3; vertical-align: middle; }
.table-hover > tbody > tr:hover > * { background: #F4F8F9; }
.form-label { font-weight: 600; font-size: 0.86rem; color: var(--ink-soft); margin-bottom: 0.3rem; }
.form-control, .form-select { border-radius: 8px; border-color: var(--line); padding: 0.5rem 0.75rem; }
.badge { font-weight: 600; padding: 0.4em 0.7em; border-radius: 6px; }
.validation-message { color: var(--danger); font-size: 0.85rem; }

.page-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }

/* Shared empty-state pattern (Round 3, 2026-09-18) — a plain "No X yet." line gives a first-time
   vendor/admin no next step; pair it with the same primary action the page-head button already
   offers so an empty list is never a dead end. */
.empty-state {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--muted);
    background: var(--card);
    border: 1px dashed var(--line);
    border-radius: var(--radius);
}
.empty-state-icon { font-size: 2rem; margin-bottom: 0.5rem; opacity: 0.6; }

.blazor-error-boundary { background: var(--danger); padding: 1rem; color: white; }
.blazor-error-boundary::after { content: "An error has occurred."; }

/* ===== Topbar user ===== */
.topbar-user { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--ink-soft); font-size: 0.9rem; }
.topbar-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--accent); color: #fff; font-weight: 700; font-size: 0.8rem;
}
.badge-role {
    font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; text-transform: uppercase;
    letter-spacing: 0.05em; background: var(--card-alt); color: var(--accent-dark);
    padding: 0.2rem 0.5rem; border-radius: 999px;
}

/* ===== Auth / login ===== */
.auth-shell {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: var(--brand-gradient);
    padding: 1.5rem;
}
.login-card { width: 100%; max-width: 420px; background: #fff; border-radius: 16px; padding: 2.25rem 2rem; box-shadow: 0 24px 60px rgba(0,0,0,0.35); }
.login-brand { font-weight: 700; font-size: 1.05rem; color: var(--accent); margin-bottom: 1rem; }
.login-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 1.25rem; }
.login-hint { margin-top: 1.25rem; font-size: 0.8rem; color: var(--muted); text-align: center; line-height: 1.6; }
.login-hint code { color: var(--accent-dark); }

/* ===== Storefront shell (public-facing shopper pages — see StorefrontLayout.razor) ===== */
.storefront { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }

.storefront-topbar { background: var(--card); color: var(--ink); position: sticky; top: 0; z-index: 20; box-shadow: var(--shadow-sm); border-bottom: 1px solid var(--line); }
.storefront-topbar-inner {
    max-width: 1280px; margin: 0 auto; padding: 0.85rem 1.5rem;
    display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
}
.storefront-logo { font-weight: 700; font-size: 1.25rem; color: var(--accent) !important; letter-spacing: -0.01em; white-space: nowrap; }
.storefront-logo:hover { color: var(--accent-dark) !important; }

.storefront-search { flex: 1 1 320px; display: flex; max-width: 640px; }
.storefront-search input {
    flex: 1; border: 1px solid var(--line); border-right: none; border-radius: 999px 0 0 999px;
    padding: 0.55rem 1.1rem; font-size: 0.92rem; outline: none; background: var(--bg); color: var(--ink);
}
.storefront-search button {
    border: none; border-radius: 0 999px 999px 0; padding: 0.55rem 1.1rem;
    background: var(--accent); color: #fff; font-weight: 600; cursor: pointer;
}
.storefront-search button:hover { background: var(--accent-dark); }

.storefront-actions { display: flex; align-items: center; gap: 1rem; margin-left: auto; white-space: nowrap; }
.storefront-actions a, .storefront-actions button.link-btn {
    color: var(--ink-soft); font-weight: 600; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 0.35rem;
    background: none; border: none; cursor: pointer;
}
.storefront-actions a:hover, .storefront-actions button.link-btn:hover { color: var(--accent); }
.storefront-cart-count {
    background: var(--accent); color: #fff; border-radius: 999px; font-size: 0.7rem; font-weight: 700;
    padding: 0.05rem 0.45rem; margin-left: 0.15rem;
}

.storefront-categories {
    background: var(--card-alt); border-top: 1px solid var(--line);
}
.storefront-categories-inner {
    max-width: 1280px; margin: 0 auto; padding: 0.5rem 1.5rem;
    display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;
}
.storefront-chip {
    color: var(--ink-soft); font-size: 0.82rem; padding: 0.3rem 0.85rem; border-radius: 999px;
    background: var(--card); border: 1px solid var(--line); white-space: nowrap;
}
.storefront-chip:hover { background: var(--accent-glow); color: var(--accent-dark); border-color: var(--accent); }
.storefront-chip.active { background: var(--accent); color: #fff; font-weight: 600; border-color: var(--accent); }

.storefront-hero {
    background: linear-gradient(135deg, var(--card) 0%, var(--card-alt) 100%);
    color: var(--ink); padding: 2.5rem 1.5rem 3.25rem; text-align: center;
    margin-bottom: -2rem; border-bottom: 3px solid var(--accent);
}
.storefront-hero h1 { color: var(--ink); font-size: 1.9rem; margin-bottom: 0.4rem; }
.storefront-hero h1 .accent { color: var(--accent); }
.storefront-hero p { color: var(--muted); font-size: 1rem; margin: 0; }

.storefront-content { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem 3rem; width: 100%; flex: 1; }
.storefront-section-title { font-size: 1.25rem; font-weight: 700; margin: 2rem 0 1rem; display: flex; align-items: center; gap: 0.5rem; }

.storefront-footer {
    background: var(--card); color: var(--muted); padding: 2rem 1.5rem; text-align: center;
    font-size: 0.85rem; margin-top: 2rem; border-top: 1px solid var(--line);
}
.storefront-footer a { color: var(--ink-soft); }

/* Vendor storefront page (added per a customer-provided reference screenshot, 2026-09-18):
   a public, browse-only page per Verified vendor at /vendor/{id}, linked from the bottom of
   Product/ServiceDetail so a buyer can see everything else this specific shop sells. */
.vendor-header { display: flex; gap: 1rem; align-items: center; margin: 1rem 0 1.5rem; }
.vendor-avatar {
    width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
    background: var(--brand-gradient); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; font-weight: 700;
}
.vendor-about { background: var(--card-alt); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1.5rem; font-size: 0.92rem; }

/* The "this shop, on our site" callout at the bottom of a product/service detail page. */
.shop-link-box {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    background: var(--card-alt); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1rem 1.25rem; margin-top: 1.5rem;
}

/* ===== Catalog (product/service/bundle grid) ===== */
.catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.25rem; }
.catalog-card {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-sm); padding: 1rem; display: flex; flex-direction: column; gap: 0.35rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.catalog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--accent); }
.catalog-vendor { font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
/* Round 3 stress test (2026-09-18): a real long product name (a gift-basket bundle description)
   made this card noticeably taller than its row-mates — grid stretch then left visible empty
   space under the shorter cards' buttons. Clamping the name keeps every card's core layout the
   same height; the full name is always one click away on the detail page. */
.catalog-name {
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.catalog-meta { font-size: 0.8rem; color: var(--muted); }
.catalog-price { font-weight: 700; color: var(--accent-dark); margin-bottom: 0.4rem; font-size: 1.05rem; }
.catalog-actions { margin-top: auto; }

/* Shared table-cell truncation (Round 3 stress test, 2026-09-18): a real long product name has no
   natural break points short enough for a narrow table cell, so the browser wrapped it one or two
   words per line instead of respecting .table-responsive's horizontal scroll — one row grew to
   20+ lines tall on mobile. Used by CartView and every back-office list page (Products/Services/
   Bundles/Vendors/Categories/...) that has a Name/Item column — truncate to one line with an
   ellipsis; the full name is a tooltip (title="") away and one click from the detail/edit page
   this cell already links to. */
.truncate-cell {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
}
@media (max-width: 480px) {
    .truncate-cell { max-width: 130px; }
}

@media (max-width: 640px) {
    .storefront-topbar-inner { gap: 0.75rem; }
    .storefront-search { order: 3; flex-basis: 100%; }
    .storefront-hero { padding: 1.75rem 1.25rem 2.5rem; }

    /* Round 1 audit finding #5 (2026-09-18): .storefront-actions had no flex-wrap of its own, so
       its 3-4 links ran off the right edge of the screen with no way to reach the last one short
       of scrolling sideways. Give it its own row and let it wrap instead of overflowing. */
    .storefront-actions {
        order: 2;
        flex-basis: 100%;
        flex-wrap: wrap;
        margin-left: 0;
        gap: 0.6rem 1rem;
    }
    .storefront-actions a, .storefront-actions button.link-btn { font-size: 0.85rem; }
}

/* ===== Wallet ===== */
.wallet-balance { font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 1.15rem; color: var(--good); }

/* ===== Legal pages (terms / privacy) ===== */
.legal-doc { max-width: 760px; margin-inline: auto; line-height: 1.75; }
.legal-doc h1 { font-size: 1.6rem; margin-bottom: 0.25rem; }
.legal-doc h2 { font-size: 1.1rem; margin-top: 1.75rem; }
.legal-doc ul { padding-left: 1.25rem; }
.legal-doc mark { background: #fff1b8; padding: 0 0.25rem; border-radius: 3px; }
.storefront-footer-links { margin-top: 0.35rem; font-size: 0.85rem; }

/* Optional partner/customer co-branding (Branding:PartnerLogo / PartnerName in config; nothing renders when unset) */
.storefront-partner { display: inline-flex; align-items: center; margin-right: 0.75rem; padding-right: 0.75rem; border-right: 1px solid var(--line); }
.storefront-partner img { height: 40px; width: 40px; object-fit: contain; border-radius: 50%; }
.hero-partner { height: 84px; width: 84px; object-fit: contain; border-radius: 50%; display: block; margin: 0 auto 0.4rem; }
.hero-partner-name { color: var(--muted); font-size: 0.9rem; margin-bottom: 0.6rem; }

/* Back-office dashboards (/dashboard) */
.dash-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.dash-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .75rem 1rem; }
.dash-card .k { font-size: .8rem; color: var(--muted); }
.dash-card .v { font-size: 1.6rem; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.dash-card .s { font-size: .78rem; color: var(--muted); }
.dash-card.warn { border-color: #f0ad4e; background: #fff8ec; }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: .75rem; }
.dash-panel { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .9rem 1rem; min-width: 0; }
.bar-track { flex: 1; min-width: 80px; height: 10px; background: var(--card-alt, #f1f3f5); border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--accent); border-radius: 999px; }
.trend { display: flex; align-items: flex-end; gap: 3px; height: 110px; }
.trend-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 0; }
.trend-bar { width: 100%; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 2px; }
.trend-lbl { font-size: .6rem; color: var(--muted); margin-top: 2px; }

/* ===== Professional storefront (2026-09-25) — overrides the earlier storefront rules above ===== */
.storefront-topbar { box-shadow: none; }
.storefront-topbar-inner { padding: 0.8rem 1.5rem; gap: 1.25rem; }
.sf-brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--navy) !important; text-decoration: none; }
.sf-mark { width: 26px; height: 26px; border-radius: 7px; background: var(--accent); position: relative; flex: none; }
.sf-mark::after { content: ""; position: absolute; inset: 7px; border: 2px solid #fff; border-radius: 3px; transform: rotate(45deg); }
.sf-logo { height: 30px; width: auto; display: block; }
.sf-partner { height: 38px; width: 38px; object-fit: contain; border-radius: 50%; display: block; }
.sf-brand-sep { width: 1px; height: 28px; background: var(--line); }
.sf-name { font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; white-space: nowrap; }

.storefront-search { max-width: 560px; }
.storefront-search input { border-radius: 8px 0 0 8px; border-color: #b9bfcc; background: #fff; padding: 0.55rem 0.9rem; }
.storefront-search input:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(27,42,74,.12); }
.storefront-search button { border-radius: 0 8px 8px 0; background: var(--navy); padding: 0.55rem 1rem; display: inline-flex; align-items: center; }
.storefront-search button:hover { background: var(--accent); }

.storefront-actions { gap: 0.4rem; }
.storefront-actions a { font-weight: 500; font-size: 0.9rem; padding: 0.4rem 0.7rem; border-radius: 8px; color: var(--ink-soft); }
.storefront-actions a:hover { background: var(--card-alt); color: var(--navy); }
.storefront-actions a.sf-cart { border: 1px solid #b9bfcc; color: var(--navy); font-weight: 600; margin-left: 0.25rem; }
.storefront-actions a.sf-cart:hover { border-color: var(--navy); }

.storefront-categories { background: var(--card); border-top: 1px solid var(--line); }
.storefront-categories-inner { flex-wrap: nowrap; overflow-x: auto; gap: 0; padding: 0 1.5rem; scrollbar-width: thin; }
.storefront-chip { background: none; border: none; border-bottom: 2px solid transparent; border-radius: 0; padding: 0.7rem 0.95rem; font-size: 0.88rem; font-weight: 500; color: var(--ink-soft); }
.storefront-chip:hover { background: none; color: var(--navy); border-color: var(--line); }
.storefront-chip.active { background: none; color: var(--accent-dark); border-color: var(--accent); font-weight: 600; }

.sf-hero { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 8px; margin: 1.25rem 0 0.25rem; }
.sf-hero-inner { padding: 1.6rem 1.75rem; }
.sf-hero h1 { font-size: 2rem; font-weight: 700; color: var(--navy); letter-spacing: -0.015em; margin: 0 0 0.35rem; }
.sf-hero-sub { color: var(--muted); font-size: 1.02rem; margin: 0 0 1rem; max-width: 62ch; }
.sf-trust { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; font-size: 0.9rem; color: var(--ink-soft); }
.sf-trust li { display: inline-flex; align-items: center; gap: 0.4rem; }
.sf-trust svg { color: var(--accent); flex: none; }

.storefront-section-title { font-size: 1.15rem; font-weight: 700; color: var(--navy); margin: 2rem 0 1rem; padding-left: 0.65rem; border-left: 4px solid var(--accent); line-height: 1.2; }

.catalog-grid { gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.catalog-card { padding: 0; gap: 0; overflow: hidden; border-radius: 8px; box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease; }
.catalog-card:hover { transform: none; border-color: #9aa3b5; box-shadow: var(--shadow-sm); }
.catalog-card > a { display: flex; flex-direction: column; gap: 0.25rem; padding: 0; text-decoration: none; }
.catalog-card > a > *:not(.catalog-img) { padding: 0 0.9rem; }
.catalog-img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; margin: 0 0 0.7rem; background: #eef0f4; }
.catalog-img-empty { display: flex; align-items: center; justify-content: center; color: #a7afbf; }
.catalog-vendor { font-family: inherit; font-size: 0.78rem; text-transform: none; letter-spacing: 0; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.catalog-name { font-size: 0.95rem; font-weight: 600; color: var(--ink); line-height: 1.35; min-height: 2.7em; }
.catalog-meta { font-size: 0.78rem; }
.catalog-price { color: var(--navy); font-size: 1.15rem; margin: 0.15rem 0 0.7rem; }
.catalog-actions { padding: 0 0.9rem 0.9rem; }

.storefront-footer { background: var(--navy); color: #c3cbdc; text-align: left; padding: 2rem 1.5rem 1.25rem; margin-top: 3rem; border-top: none; }
.storefront-footer-inner { max-width: 1280px; margin: 0 auto; display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.sf-footer-name { color: #fff; font-weight: 700; font-size: 1.05rem; }
.sf-footer-note { font-size: 0.85rem; margin-top: 0.25rem; max-width: 46ch; }
.sf-footer-links { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: flex-start; }
.storefront-footer a { color: #e6ebf5; font-size: 0.88rem; }
.storefront-footer a:hover { color: #fff; text-decoration: underline; }
.sf-footer-copy { max-width: 1280px; margin: 1.5rem auto 0; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.14); font-size: 0.78rem; }

@media (max-width: 767px) {
    .storefront-topbar-inner { gap: 0.6rem; }
    .storefront-search { flex-basis: 100%; order: 3; max-width: none; }
    .storefront-actions { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; white-space: normal; }
    .storefront-actions a.sf-cart span { display: none; }
    .sf-hero h1 { font-size: 1.5rem; }
    .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
}
/* cards without an image/link wrapper (bundles) */
.catalog-card > .catalog-vendor, .catalog-card > .catalog-name, .catalog-card > .catalog-meta, .catalog-card > .catalog-price { padding-left: 0.9rem; padding-right: 0.9rem; }
.catalog-card > .catalog-vendor:first-child { padding-top: 0.9rem; }

/* ===== Colour themes (Branding:Theme → html[data-brand]) — only tokens change, never layout ===== */
html[data-brand="fresh"] {
    --accent: #1E8A4C; --accent-dark: #15693A; --accent-glow: rgba(30, 138, 76, 0.18);
    --navy: #173A2A; --brand-gradient: linear-gradient(135deg, #0E3322 0%, #1D5A3B 100%);
}
html[data-brand="harvest"] {
    --accent: #B35512; --accent-dark: #8C410C; --accent-glow: rgba(179, 85, 18, 0.18);
    --navy: #3A2616; --brand-gradient: linear-gradient(135deg, #3A2414 0%, #6B3A16 100%);
}
html[data-brand="ocean"] {
    --accent: #1668C7; --accent-dark: #0F4F9A; --accent-glow: rgba(22, 104, 199, 0.18);
    --navy: #13294B; --brand-gradient: linear-gradient(135deg, #0B1E3D 0%, #16407A 100%);
}

/* ===== Catalogue toolbar, pager, ratings (2026-09-25) ===== */
.catalog-link { color: inherit; }
.catalog-link:hover { color: inherit; }
.sf-results-head { display: flex; align-items: center; gap: 0.5rem 1rem; flex-wrap: wrap; margin: 1.75rem 0 0.5rem; }
.sf-results-head .storefront-section-title { margin: 0; }
.sf-sort { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
.sf-sort select { width: auto; min-width: 150px; }
.sf-price { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.sf-price input { width: 110px; }
.sf-pager { display: flex; justify-content: center; align-items: center; gap: 0.35rem; flex-wrap: wrap; margin: 1.75rem 0 0.5rem; font-variant-numeric: tabular-nums; }
.sf-pager a, .sf-pager span { min-width: 2.2rem; padding: 0.35rem 0.65rem; border: 1px solid var(--line); border-radius: 6px; text-align: center; background: var(--card); color: var(--ink-soft); font-size: 0.9rem; }
.sf-pager a:hover { border-color: var(--navy); color: var(--navy); }
.sf-pager .current { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }
.sf-pager .gap { border: none; background: none; min-width: auto; }
.stars { color: #d3d7df; letter-spacing: 1px; }
.stars .on { color: #E3A008; }
.catalog-rating { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--ink-soft); }

/* ===== Product detail ===== */
.pd-crumbs { font-size: 0.85rem; color: var(--muted); margin: 1.25rem 0 1rem; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.pd-crumbs a { color: var(--ink-soft); }
.pd { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 2rem; align-items: start; }
.pd-main { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); background: #eef0f4; display: block; }
.pd-main.catalog-img-empty { display: flex; }
.pd-thumbs { display: flex; gap: 0.5rem; margin-top: 0.6rem; flex-wrap: wrap; }
.pd-thumbs button { padding: 0; border: 2px solid var(--line); border-radius: 8px; background: none; cursor: pointer; overflow: hidden; width: 68px; height: 68px; }
.pd-thumbs button.active, .pd-thumbs button:hover { border-color: var(--accent); }
.pd-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-vendor { font-size: 0.88rem; color: var(--muted); }
.pd-vendor a { color: var(--navy); font-weight: 600; }
.pd h1 { font-size: 1.6rem; font-weight: 700; color: var(--ink); margin: 0.2rem 0 0.5rem; line-height: 1.3; text-wrap: balance; }
.pd-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: center; font-size: 0.88rem; color: var(--muted); margin-bottom: 0.8rem; }
.pd-tag { display: inline-block; padding: 0.15rem 0.55rem; border: 1px solid var(--line); border-radius: 999px; font-size: 0.78rem; color: var(--ink-soft); background: var(--card); }
.pd-price { font-size: 2rem; font-weight: 700; color: var(--navy); margin: 0.25rem 0 0.25rem; font-variant-numeric: tabular-nums; }
.pd-tiers { background: var(--accent-glow); border-radius: 8px; padding: 0.6rem 0.85rem; font-size: 0.88rem; margin: 0.75rem 0; }
.pd-buy { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; padding: 1rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 1rem 0; }
.pd-buy input { width: 90px; }
.pd-section { margin-top: 2.25rem; }
.pd-section h2 { font-size: 1.1rem; font-weight: 700; color: var(--navy); margin-bottom: 0.75rem; }
.pd-desc { white-space: pre-wrap; line-height: 1.75; max-width: 75ch; color: var(--ink-soft); }
.rv-summary { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.rv-avg { font-size: 2.2rem; font-weight: 700; color: var(--navy); line-height: 1; }
.rv-list { display: grid; gap: 0.75rem; }
.rv-item { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 0.8rem 1rem; }
.rv-item.hidden-review { opacity: 0.6; border-style: dashed; }
.rv-head { display: flex; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; font-size: 0.85rem; color: var(--muted); }
.rv-form { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 1rem; display: grid; gap: 0.6rem; max-width: 640px; margin-bottom: 1rem; }
.rv-pick { display: flex; gap: 0.2rem; }
.rv-pick button { border: none; background: none; font-size: 1.6rem; line-height: 1; color: #d3d7df; cursor: pointer; padding: 0 0.1rem; }
.rv-pick button.on { color: #E3A008; }
.rv-pick button:focus-visible { outline: 2px solid var(--navy); border-radius: 4px; }
@media (max-width: 767px) {
    .pd { grid-template-columns: 1fr; gap: 1.25rem; }
    .pd h1 { font-size: 1.3rem; }
    .pd-price { font-size: 1.6rem; }
    .sf-sort { margin-left: 0; }
}

/* ===== Notifications ===== */
.bell { position: relative; display: inline-flex; align-items: center; color: var(--ink-soft); }
.storefront-actions a.bell { padding: 0.4rem 0.55rem; }
.bell-count { position: absolute; top: -2px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 0.68rem; font-weight: 700; line-height: 18px; text-align: center; }
.topbar-bell { color: var(--ink-soft); }
.nt-list { list-style: none; padding: 0; margin: 0 0 0.75rem; display: grid; gap: 0.5rem; max-width: 760px; }
.nt-list button { width: 100%; text-align: left; display: grid; gap: 0.15rem; padding: 0.75rem 1rem; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); cursor: pointer; }
.nt-list button:hover { border-color: var(--navy); }
.nt-list li.unread button { border-left: 4px solid var(--accent); background: var(--card); }
.nt-list li.unread .nt-title { font-weight: 700; }
.nt-title { font-weight: 500; }
.nt-body { font-size: 0.88rem; color: var(--ink-soft); }
.nt-time { font-size: 0.78rem; color: var(--muted); }
.vendor-verified { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--good); font-weight: 600; }
.vendor-avatar { background: var(--navy); }

/* back-office list filters */
.list-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.9rem; }
.list-filter input { max-width: 260px; }
.list-filter select { width: auto; }
.pd-save { display: inline-flex; align-items: center; gap: 0.35rem; }
.pd-save.saved { color: #C0392B; border-color: #C0392B; }

/* Customer "My account" tabs — scroll sideways on phones instead of wrapping into a wall of links. */
.account-tabs { display: flex; gap: .25rem; overflow-x: auto; border-bottom: 1px solid #e5e7eb; margin-bottom: 1rem; }
.account-tabs a { padding: .5rem .9rem; white-space: nowrap; color: inherit; text-decoration: none; border-bottom: 2px solid transparent; }
.account-tabs a:hover { color: var(--navy, #1B2A4A); }
.account-tabs a.active { border-bottom-color: var(--navy, #1B2A4A); font-weight: 600; }