/* ==========================================================================
   BalePick — Design System
   Professional, compact B2B marketplace UI on top of Bootstrap 5.
   Palette: slate neutrals + a teal brand (fits the pre-loved / eco angle).
   Tokens are defined once here and bridged into Bootstrap's CSS variables so
   the whole app themes consistently. See docs/DESIGN.md.
   ========================================================================== */

:root {
    /* Brand (teal) */
    --aw-primary: #0f766e;
    --aw-primary-hover: #115e59;
    --aw-primary-active: #0c4a44;
    --aw-primary-rgb: 15, 118, 110;
    --aw-primary-soft: #eefbf8;
    --aw-primary-border: #c9ece6;

    /* Neutrals (slate) */
    --aw-ink: #0f172a;      /* headings, nav background */
    --aw-text: #1f2937;     /* body text */
    --aw-muted: #64748b;    /* secondary text */
    --aw-bg: #f5f7fa;       /* app background */
    --aw-surface: #ffffff;  /* cards / panels */
    --aw-border: #e6e9f0;   /* hairlines */
    --aw-border-strong: #d3d9e3;

    /* Foregrounds for the dark fills above. Every rule that paints --aw-ink or --aw-primary as a
       background states its text colour from here, so the two can never be re-themed apart —
       which is how a selected filter chip ended up dark-on-dark. */
    --aw-on-ink: #ffffff;
    --aw-on-primary: #ffffff;

    /* Status */
    --aw-success: #15803d;  --aw-success-soft: #eaf6ee;
    --aw-warning: #b45309;  --aw-warning-soft: #fdf3e7;
    --aw-danger:  #b91c1c;  --aw-danger-soft:  #fbecec;
    --aw-info:    #0369a1;  --aw-info-soft:    #e8f3fa;

    /* Radius & shadow */
    --aw-radius: 10px;
    --aw-radius-sm: 7px;
    --aw-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
    --aw-shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
    --aw-shadow-lg: 0 10px 24px rgba(16, 24, 40, .10);

    /* Bridge tokens into Bootstrap */
    --bs-body-bg: var(--aw-bg);
    --bs-body-color: var(--aw-text);
    --bs-border-color: var(--aw-border);
    --bs-primary: var(--aw-primary);
    --bs-primary-rgb: var(--aw-primary-rgb);
    --bs-link-color: var(--aw-primary);
    --bs-link-hover-color: var(--aw-primary-hover);
    --bs-link-color-rgb: var(--aw-primary-rgb);
    --bs-body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --bs-body-font-size: 0.9375rem;
    --bs-body-line-height: 1.55;
}

/* Base ------------------------------------------------------------------- */
html { font-size: 15px; position: relative; min-height: 100%; }

body {
    background-color: var(--aw-bg);
    color: var(--aw-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

main { flex: 1 0 auto; }

h1, h2, h3, h4, h5, h6 { color: var(--aw-ink); font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.12rem; }

.text-muted { color: var(--aw-muted) !important; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* Navbar (app shell) ----------------------------------------------------- */
.app-navbar {
    background-color: rgba(15, 23, 42, 0.9);
    backdrop-filter: saturate(150%) blur(12px);
    -webkit-backdrop-filter: saturate(150%) blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: .55rem;
    padding-bottom: .55rem;
}
.app-navbar .navbar-brand {
    color: #fff; font-weight: 700; letter-spacing: -0.02em;
    display: inline-flex; align-items: center; gap: .5rem; font-size: 1.02rem;
}
.app-navbar .navbar-nav { gap: .12rem; }
.app-navbar .nav-link {
    color: rgba(255, 255, 255, .72) !important;
    font-size: .875rem; font-weight: 500;
    padding: .4rem .85rem !important; border-radius: 8px;
    transition: color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.app-navbar .nav-link:hover { color: #fff !important; background: rgba(255, 255, 255, .08); text-decoration: none; }
.app-navbar .nav-link.active {
    color: #fff !important;
    background: linear-gradient(180deg, rgba(45, 212, 191, .22), rgba(45, 212, 191, .12));
    box-shadow: inset 0 0 0 1px rgba(45, 212, 191, .3);
}
.app-navbar .nav-user { color: rgba(255, 255, 255, .62); font-size: .82rem; padding: .35rem .5rem; }
.app-navbar .navbar-toggler { border-color: rgba(255, 255, 255, .25); padding: .2rem .5rem; }
.app-navbar .navbar-toggler:focus { box-shadow: none; }
.app-navbar .btn-signout {
    color: rgba(255, 255, 255, .78); font-size: .875rem; font-weight: 500;
    text-decoration: none; padding: .35rem .7rem; border-radius: 6px; border: 0; background: transparent;
}
.app-navbar .btn-signout:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.app-navbar .nav-divider { width: 1px; height: 20px; background: rgba(255, 255, 255, .16); margin: 0 .35rem; align-self: center; }

/* Buttons ---------------------------------------------------------------- */
.btn { font-size: .875rem; font-weight: 600; border-radius: var(--aw-radius-sm); padding: .45rem .9rem; }
.btn-sm { font-size: .8rem; padding: .3rem .65rem; }
.btn-lg { font-size: .95rem; padding: .6rem 1.15rem; }
.btn-primary {
    --bs-btn-bg: var(--aw-primary); --bs-btn-border-color: var(--aw-primary);
    --bs-btn-hover-bg: var(--aw-primary-hover); --bs-btn-hover-border-color: var(--aw-primary-hover);
    --bs-btn-active-bg: var(--aw-primary-active); --bs-btn-active-border-color: var(--aw-primary-active);
    --bs-btn-disabled-bg: var(--aw-primary); --bs-btn-disabled-border-color: var(--aw-primary);
    --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
}
.btn-outline-primary {
    --bs-btn-color: var(--aw-primary); --bs-btn-border-color: var(--aw-primary-border);
    --bs-btn-hover-bg: var(--aw-primary); --bs-btn-hover-border-color: var(--aw-primary);
    --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--aw-primary-hover); --bs-btn-active-border-color: var(--aw-primary-hover);
}
/* Tokens, not the old cool-slate hexes, so the pressed state follows whichever theme is on the
   page instead of staying grey-blue in the plum backpanel. --bs-btn-active-color is always
   declared next to --bs-btn-active-bg: a theme that overrides one and not the other is how a
   pressed button ends up with its label the same colour as its fill. */
.btn-outline-secondary {
    --bs-btn-color: var(--aw-text); --bs-btn-border-color: var(--aw-border-strong);
    --bs-btn-hover-bg: var(--aw-bg); --bs-btn-hover-border-color: var(--aw-border-strong); --bs-btn-hover-color: var(--aw-ink);
    --bs-btn-active-bg: var(--aw-border); --bs-btn-active-color: var(--aw-ink);
}

/* Forms ------------------------------------------------------------------ */
.form-label { font-size: .82rem; font-weight: 600; color: var(--aw-text); margin-bottom: .3rem; }
.form-control, .form-select {
    border-radius: var(--aw-radius-sm); border-color: var(--aw-border-strong);
    font-size: .9rem; padding: .5rem .7rem; color: var(--aw-text);
}
.form-control::placeholder { color: #9aa5b4; }
.form-control:focus, .form-select:focus {
    border-color: var(--aw-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--aw-primary-rgb), .16);
}
.form-check-input:checked { background-color: var(--aw-primary); border-color: var(--aw-primary); }
.form-check-input:focus { border-color: var(--aw-primary); box-shadow: 0 0 0 .2rem rgba(var(--aw-primary-rgb), .16); }
.form-text { font-size: .78rem; }

/* Cards & surfaces ------------------------------------------------------- */
.card {
    border: 1px solid var(--aw-border); border-radius: var(--aw-radius);
    box-shadow: var(--aw-shadow-sm); background: var(--aw-surface);
}
.card-body { padding: 1.1rem 1.15rem; }
.card-title { font-size: 1rem; font-weight: 600; margin-bottom: .35rem; color: var(--aw-ink); }
.card-header {
    background: var(--aw-surface); border-bottom: 1px solid var(--aw-border);
    font-weight: 600; padding: .8rem 1.15rem; color: var(--aw-ink);
}
.surface {
    background: var(--aw-surface); border: 1px solid var(--aw-border);
    border-radius: var(--aw-radius); box-shadow: var(--aw-shadow-sm);
}

/* Page header ------------------------------------------------------------ */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.page-header .page-title { font-size: 1.5rem; margin: 0; }
.page-header .page-subtitle { color: var(--aw-muted); margin: .2rem 0 0; font-size: .9rem; }

/* Breadcrumb ------------------------------------------------------------- */
.breadcrumb { font-size: .82rem; margin-bottom: .6rem; --bs-breadcrumb-divider-color: var(--aw-muted); }
.breadcrumb a { color: var(--aw-muted); }
.breadcrumb a:hover { color: var(--aw-primary); }
.breadcrumb-item.active { color: var(--aw-text); }

/* Badges / status pills -------------------------------------------------- */
.status-badge {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .72rem; font-weight: 600; padding: .28rem .55rem; border-radius: 999px;
    border: 1px solid transparent; line-height: 1;
}
.status-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-badge--muted   { color: #475569; background: #eef1f5; }
.status-badge--info    { color: var(--aw-info); background: var(--aw-info-soft); }
.status-badge--success { color: var(--aw-success); background: var(--aw-success-soft); }
.status-badge--warning { color: var(--aw-warning); background: var(--aw-warning-soft); }
.status-badge--danger  { color: var(--aw-danger); background: var(--aw-danger-soft); }
.status-badge--primary { color: var(--aw-primary); background: var(--aw-primary-soft); }

/* Tables ----------------------------------------------------------------- */
.table { --bs-table-bg: transparent; font-size: .88rem; }
.table thead th {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--aw-muted); font-weight: 600; border-bottom: 1px solid var(--aw-border-strong);
}
.table td, .table th { padding: .65rem .75rem; vertical-align: middle; }
.table tbody tr { border-color: var(--aw-border); }

/* Alerts ----------------------------------------------------------------- */
.alert { border-radius: var(--aw-radius); border: 1px solid transparent; font-size: .88rem; padding: .8rem 1rem; }
.alert-info      { background: var(--aw-info-soft); border-color: #cfe6f4; color: #0b4f74; }
.alert-secondary { background: #eef2f7; border-color: var(--aw-border); color: var(--aw-text); }
.alert-success   { background: var(--aw-success-soft); border-color: #cde7d6; color: #155e2b; }
.alert-warning   { background: var(--aw-warning-soft); border-color: #f5dcb8; color: #8a4b08; }
.alert-danger    { background: var(--aw-danger-soft); border-color: #f2c9c9; color: #8f1a1a; }

/* Validation summary tidy */
.validation-summary-errors { font-size: .85rem; }
.text-danger { color: var(--aw-danger) !important; }
.field-validation-error { font-size: .8rem; }

/* Auth pages ------------------------------------------------------------- */
.auth-wrap { max-width: 30rem; margin: 1.75rem auto; }
.auth-card { padding: 1.75rem; }
.auth-title { font-size: 1.35rem; margin-bottom: .2rem; }
.auth-sub { color: var(--aw-muted); font-size: .9rem; margin-bottom: 1.25rem; }

/* Avatar picker (registration + profile) --------------------------------- */
.avatar-picker { display: flex; align-items: center; gap: 1rem; }
.avatar-picker-drop {
    position: relative; flex: 0 0 auto; width: 76px; height: 76px; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer; overflow: hidden;
    border: 2px dashed var(--aw-border-strong, #cbd2dc);
    background: var(--aw-primary-soft, #eef6f5); color: var(--aw-primary, #0f766e);
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.avatar-picker-drop--square { border-radius: 18px; }
.avatar-picker-drop:hover { border-color: var(--aw-primary, #0f766e); transform: translateY(-1px); }
.avatar-picker-drop:focus-within { outline: 2px solid var(--aw-primary, #0f766e); outline-offset: 2px; }
.avatar-picker-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-picker-ph { display: grid; place-items: center; }
.avatar-picker-ph svg { width: 30px; height: 30px; opacity: .7; }
.avatar-picker-badge {
    position: absolute; right: 2px; bottom: 2px; width: 24px; height: 24px; border-radius: 50%;
    display: grid; place-items: center; background: var(--aw-primary, #0f766e); color: #fff;
    border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.avatar-picker-badge svg { width: 13px; height: 13px; }
.avatar-picker-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.avatar-picker-side { min-width: 0; flex: 1; }
.avatar-picker-side .form-text { font-size: .78rem; }

/* Divider between the password form and external providers */
.auth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--aw-muted);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 1.1rem 0;
}
.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--aw-border, #e2e8f0);
}
.auth-divider span { padding: 0 .75rem; }

/* Neutral external-provider button (Google, etc.) */
.btn-external {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    background: #fff;
    border: 1px solid var(--aw-border, #cbd5e1);
    color: #1f2937;
    font-weight: 600;
    padding: .5rem .75rem;
}
.btn-external:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #1f2937;
}
.btn-external .ext-icon { flex: 0 0 auto; }

/* Hero (landing) --------------------------------------------------------- */
.hero {
    background: linear-gradient(180deg, #ffffff, var(--aw-primary-soft));
    border: 1px solid var(--aw-border); border-radius: 16px;
    padding: 3rem 1.5rem; text-align: center;
}
.hero h1 { font-size: 2.1rem; margin-bottom: .5rem; }
.hero .lead { color: var(--aw-muted); font-size: 1.05rem; }

/* Feature tiles / dashboard tiles --------------------------------------- */
.feature-icon, .tile-icon {
    width: 40px; height: 40px; border-radius: 10px;
    background: var(--aw-primary-soft); color: var(--aw-primary);
    display: inline-flex; align-items: center; justify-content: center; margin-bottom: .65rem;
}
.tile-icon svg, .feature-icon svg { width: 20px; height: 20px; }
.tile-card { transition: box-shadow .15s ease, transform .15s ease; height: 100%; }
.tile-card:hover { box-shadow: var(--aw-shadow); transform: translateY(-1px); }
a.tile-card { text-decoration: none; color: inherit; display: block; }

/* Feature checklist (used in phase shells) ------------------------------ */
.feature-list { list-style: none; padding-left: 0; margin: 0; }
.feature-list li {
    display: flex; gap: .6rem; align-items: flex-start;
    padding: .5rem 0; border-bottom: 1px dashed var(--aw-border); font-size: .9rem;
}
.feature-list li:last-child { border-bottom: 0; }
.feature-list .fl-mark { color: var(--aw-primary); flex-shrink: 0; margin-top: .05rem; }
.feature-list .fl-mark svg { width: 16px; height: 16px; display: block; }

/* Empty state ------------------------------------------------------------ */
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--aw-muted); }

/* Footer ----------------------------------------------------------------- */
.app-footer {
    flex-shrink: 0; background: var(--aw-surface); border-top: 1px solid var(--aw-border);
    color: var(--aw-muted); font-size: .82rem; padding: .9rem 0;
}
.app-footer a { color: var(--aw-muted); }
.app-footer a:hover { color: var(--aw-primary); }

/* Accessibility: consistent focus ring ---------------------------------- */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
    outline: none;
    box-shadow: 0 0 0 .2rem rgba(var(--aw-primary-rgb), .3);
}

/* ==========================================================================
   Marketing / public site
   ========================================================================== */

.section { padding: 4.5rem 0; }
.section-tight { padding: 3rem 0; }
.section-alt { background: var(--aw-surface); border-top: 1px solid var(--aw-border); border-bottom: 1px solid var(--aw-border); }

.eyebrow { text-transform: uppercase; letter-spacing: .09em; font-size: .74rem; font-weight: 700; color: var(--aw-primary); margin-bottom: .5rem; }
.section-title { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: .5rem; }
.section-lead { color: var(--aw-muted); font-size: 1.05rem; max-width: 44rem; }

/* Sticky marketing nav */
.mkt-nav { position: sticky; top: 0; z-index: 1030; }

/* Hero -------------------------------------------------------------------- */
.mkt-hero {
    position: relative; overflow: hidden;
    background:
        radial-gradient(1100px 380px at 88% -8%, rgba(242, 96, 60, .14), transparent 60%),
        radial-gradient(760px 300px at -5% 0%, rgba(122, 46, 82, .10), transparent 55%),
        var(--aw-bg);
    border-bottom: 1px solid var(--aw-border);
    padding: 3.75rem 0 4.25rem;
}
.mkt-hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.15rem); line-height: 1.08; margin-bottom: 1rem; }
.mkt-hero .hero-lead { color: var(--aw-muted); font-size: 1.12rem; max-width: 34rem; }
.hero-pill {
    display: inline-flex; align-items: center; gap: .45rem; margin-bottom: 1.1rem;
    background: var(--aw-primary-soft); color: var(--aw-primary);
    border: 1px solid var(--aw-primary-border); border-radius: 999px;
    font-size: .78rem; font-weight: 600; padding: .3rem .7rem;
}
.hero-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--aw-primary); }

/* Hero listing-card mock */
.hero-visual { position: relative; min-height: 340px; }
.mock-card {
    background: #fff; border: 1px solid var(--aw-border); border-radius: 16px;
    box-shadow: var(--aw-shadow-lg); padding: .75rem; width: 230px;
}
.mock-card.card-a { position: absolute; top: 20px; left: 6%; transform: rotate(-4deg); z-index: 2; }
.mock-card.card-b { position: absolute; top: 70px; right: 4%; transform: rotate(4deg); z-index: 1; width: 210px; }
.mock-thumb {
    height: 120px; border-radius: 11px; position: relative;
    background: linear-gradient(135deg, #7a2e52 0%, #9a3e69 55%, #f2603c 100%);
}
.mock-card.card-b .mock-thumb { background: linear-gradient(135deg, #334155 0%, #64748b 60%, #94a3b8 100%); }
.mock-qc {
    position: absolute; top: .5rem; left: .5rem;
    background: #fff; color: var(--aw-success); border-radius: 999px;
    font-size: .68rem; font-weight: 700; padding: .2rem .5rem; box-shadow: var(--aw-shadow-sm);
    display: inline-flex; align-items: center; gap: .3rem;
}
.mock-qc::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--aw-success); }
.mock-body { padding: .6rem .35rem .25rem; }
.mock-title { font-weight: 600; font-size: .88rem; color: var(--aw-ink); margin-bottom: .35rem; }
.mock-meta { display: flex; justify-content: space-between; align-items: baseline; }
.mock-price { font-weight: 700; color: var(--aw-ink); font-size: 1rem; }
.mock-cur { font-size: .7rem; color: var(--aw-muted); }
.float-chip {
    position: absolute; background: #fff; border: 1px solid var(--aw-border);
    border-radius: 999px; box-shadow: var(--aw-shadow); padding: .4rem .7rem;
    font-size: .78rem; font-weight: 600; color: var(--aw-ink);
    display: inline-flex; align-items: center; gap: .45rem; z-index: 3;
}
.float-chip .fc-dot { width: 8px; height: 8px; border-radius: 50%; }
.float-chip.chip-1 { bottom: 34px; left: 0; }
.float-chip.chip-2 { bottom: -6px; right: 14%; }

/* Trust strip ------------------------------------------------------------- */
.trust-strip { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; }
.trust-item { display: inline-flex; align-items: center; gap: .5rem; color: var(--aw-muted); font-size: .88rem; font-weight: 500; }
.trust-item svg { width: 18px; height: 18px; color: var(--aw-primary); }

/* Stats ------------------------------------------------------------------- */
.stat { text-align: center; padding: .5rem; }
.stat-num { font-size: clamp(1.6rem, 3vw, 2.15rem); font-weight: 700; color: var(--aw-ink); line-height: 1; }
.stat-label { color: var(--aw-muted); font-size: .85rem; margin-top: .35rem; }

/* Steps ------------------------------------------------------------------- */
.step-card { height: 100%; }
.step-num {
    width: 34px; height: 34px; border-radius: 9px; background: var(--aw-primary); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .95rem; margin-bottom: .6rem;
}
.step-card h3 { font-size: .98rem; margin-bottom: .25rem; }
.step-card p { color: var(--aw-muted); font-size: .85rem; margin: 0; }

/* Value panels (buyers / sellers) ---------------------------------------- */
.value-card { height: 100%; }
.value-list { list-style: none; padding: 0; margin: 1rem 0 0; }
.value-list li { display: flex; gap: .55rem; align-items: flex-start; padding: .4rem 0; font-size: .92rem; }
.value-list .vl-mark { color: var(--aw-primary); flex-shrink: 0; margin-top: .1rem; }
.value-list .vl-mark svg { width: 17px; height: 17px; display: block; }

/* QC highlight card ------------------------------------------------------- */
.qc-card { border: 1px solid var(--aw-border); border-radius: 14px; background: #fff; box-shadow: var(--aw-shadow); overflow: hidden; }
.qc-card-head { background: var(--aw-ink); color: #fff; padding: 1rem 1.25rem; display: flex; align-items: center; justify-content: space-between; }
.qc-card-head .grade { background: var(--aw-success); color: #fff; border-radius: 8px; font-weight: 700; padding: .2rem .55rem; font-size: .85rem; }
.qc-row { display: flex; align-items: center; gap: .6rem; padding: .6rem 1.25rem; border-bottom: 1px dashed var(--aw-border); font-size: .9rem; }
.qc-row:last-child { border-bottom: 0; }
.qc-row .qc-tick { color: var(--aw-success); flex-shrink: 0; }
.qc-row .qc-tick svg { width: 18px; height: 18px; display: block; }

/* Chips (currency / category) -------------------------------------------- */
.chip {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--aw-surface); border: 1px solid var(--aw-border-strong);
    border-radius: 999px; padding: .4rem .85rem; font-size: .85rem; font-weight: 600; color: var(--aw-text);
}
.chip-teal { background: var(--aw-primary-soft); border-color: var(--aw-primary-border); color: var(--aw-primary); }
a.chip:hover { border-color: var(--aw-primary); color: var(--aw-primary); text-decoration: none; }

/* BalePick logo -----------------------------------------------------------
   One block for every logo in the app; Views/Shared/_BrandLogo.cshtml is the only markup.
   Everything sizes off font-size, so a context sets one property and the mark, the wordmark and
   the gap all follow — which is what stops the lockup drifting out of proportion per screen. */
.bp-logo { display: inline-flex; align-items: center; gap: .55em; line-height: 1; }
.bp-mark {
    width: 1.34em; height: 1.34em; flex: 0 0 auto; display: block;
    /* The straps are holes, so the only thing a theme ever changes is this one fill. */
    fill: var(--aw-primary);
}
.bp-text { display: inline-flex; flex-direction: column; gap: .12em; min-width: 0; }
.bp-word {
    font-family: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
    font-weight: 800; letter-spacing: -.035em; font-size: 1em; color: var(--aw-ink); white-space: nowrap;
}
.bp-sub {
    font-size: .48em; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
    color: var(--aw-muted); white-space: nowrap;
}
/* Reversed: on the plum sidebar, the ink footer, any dark band. */
.bp-logo--inv .bp-mark { fill: #fff; }
.bp-logo--inv .bp-word { color: #fff; }
.bp-logo--inv .bp-sub { color: rgba(255, 255, 255, .62); }
.bp-logo--sm { font-size: .95rem; }
.bp-logo--md { font-size: 1.08rem; }
.bp-logo--lg { font-size: 1.6rem; }
/* A logo link must never look like a text link, in any theme. */
a:hover .bp-word, a:hover .bp-sub { text-decoration: none; }

/* Filter chips ------------------------------------------------------------
   One-click filters on a work queue. Promoted out of chat.css (.inbox-chip),
   which was the only chip-filter styling in the app and was scoped to the inbox. */
.aw-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    border: 1px solid var(--aw-border); background: transparent; color: var(--aw-muted);
    border-radius: 2rem; padding: .25rem .8rem; font-size: .82rem; font-weight: 600;
    cursor: pointer; text-decoration: none; white-space: nowrap; line-height: 1.4;
}
a.aw-chip:hover { border-color: var(--aw-primary); color: var(--aw-primary); text-decoration: none; }
.aw-chip.active { background: var(--aw-ink); color: var(--aw-on-ink); border-color: transparent; }
a.aw-chip.active:hover { color: var(--aw-on-ink); border-color: transparent; }
.aw-chip:focus-visible { outline: 2px solid var(--aw-primary); outline-offset: 2px; box-shadow: none; }
/* Count badge inside a chip — how many rows the option would match. Colour is stated rather than
   inherited: left to inherit it took whatever won the cascade on the chip, which on the selected
   chip was near-invisible. `opacity` is not used to mute it, for the same reason. */
.aw-chip .aw-chip-n {
    font-size: .72rem; font-weight: 700; color: var(--aw-muted);
    background: rgba(0,0,0,.07); border-radius: 999px; padding: 0 .35rem;
}
.aw-chip.active .aw-chip-n { background: rgba(255,255,255,.22); color: var(--aw-on-ink); }
/* The selected row in a dropdown — the language and currency switchers, mainly. Bootstrap's
   default active fill is its own blue, which the app never re-maps; state again, so the pair of
   background and foreground is set in one place. */
.dropdown-item.active, .dropdown-item:active {
    background-color: var(--aw-primary);
    color: var(--aw-on-primary);
}

/* An applied filter in the summary row: reads as "click to remove". */
.aw-chip-remove { background: var(--aw-primary-soft); border-color: var(--aw-primary-border); color: var(--aw-primary); }
a.aw-chip-remove:hover { background: var(--aw-danger-soft); border-color: var(--aw-danger); color: var(--aw-danger); }

/* Testimonials ------------------------------------------------------------ */
.quote-card { height: 100%; }
.quote-card .quote-text { font-size: .95rem; color: var(--aw-text); }
.quote-mark { font-size: 2.2rem; line-height: 1; color: var(--aw-primary); font-weight: 800; }
.quote-author { font-weight: 600; font-size: .85rem; color: var(--aw-ink); }
.quote-role { font-size: .78rem; color: var(--aw-muted); }

/* CTA band ---------------------------------------------------------------- */
.cta-band {
    background: linear-gradient(135deg, var(--aw-primary-active), var(--aw-primary) 55%, var(--aw-accent, #f2603c));
    color: #fff; border-radius: 18px; padding: 2.75rem 2rem; text-align: center;
}
.cta-band h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: .5rem; }
.cta-band p { color: rgba(255, 255, 255, .85); margin-bottom: 1.25rem; }
.cta-band .btn-light { --bs-btn-color: var(--aw-primary); --bs-btn-hover-color: var(--aw-primary-active); font-weight: 700; }

/* Marketing footer -------------------------------------------------------- */
.mkt-footer { background: var(--aw-ink); color: rgba(255, 255, 255, .7); padding: 3rem 0 1.5rem; }
.mkt-footer h6 { color: #fff; text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; margin-bottom: .9rem; }
.mkt-footer a { color: rgba(255, 255, 255, .68); font-size: .875rem; display: inline-block; padding: .18rem 0; }
.mkt-footer a:hover { color: #fff; text-decoration: none; }
.mkt-footer .footer-brand { display: inline-flex; margin-bottom: .6rem; }
.mkt-footer .footer-blurb { font-size: .85rem; max-width: 20rem; }
.mkt-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 2.25rem; padding-top: 1.25rem;
    font-size: .8rem; color: rgba(255, 255, 255, .5);
    display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; justify-content: space-between; align-items: center;
}

/* Compact hero for interior marketing pages */
.page-hero {
    background: radial-gradient(900px 300px at 100% -20%, rgba(242, 96, 60, .12), transparent 60%), var(--aw-bg);
    border-bottom: 1px solid var(--aw-border);
    padding: 3rem 0;
}
.page-hero h1 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); margin-bottom: .6rem; }
.page-hero .lead { color: var(--aw-muted); max-width: 42rem; font-size: 1.08rem; }

/* Pricing example breakdown */
.price-line { display: flex; justify-content: space-between; padding: .55rem 0; border-bottom: 1px dashed var(--aw-border); font-size: .92rem; }
.price-line:last-child { border-bottom: 0; }
.price-line.total { font-weight: 700; color: var(--aw-ink); border-top: 1px solid var(--aw-border-strong); border-bottom: 0; margin-top: .25rem; padding-top: .7rem; }

@media (max-width: 767.98px) {
    .section { padding: 3rem 0; }
    .hero-visual { min-height: 300px; margin-top: 1.5rem; }
}

/* Featured categories & items (home) ------------------------------------ */
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }

.cat-tile {
    display: block; height: 100%; text-decoration: none; color: inherit;
    background: var(--aw-surface); border: 1px solid var(--aw-border); border-radius: var(--aw-radius);
    padding: 1rem; box-shadow: var(--aw-shadow-sm);
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.cat-tile:hover { box-shadow: var(--aw-shadow); transform: translateY(-2px); border-color: var(--aw-primary-border); color: inherit; text-decoration: none; }
.cat-thumb {
    width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; font-size: 1.05rem; margin-bottom: .6rem;
}
.cat-name { font-weight: 600; color: var(--aw-ink); font-size: .95rem; }
.cat-count { color: var(--aw-muted); font-size: .78rem; }

.product-card {
    display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit;
    background: var(--aw-surface); border: 1px solid var(--aw-border); border-radius: var(--aw-radius);
    overflow: hidden; box-shadow: var(--aw-shadow-sm);
    transition: box-shadow .15s ease, transform .15s ease;
}
.product-card:hover { box-shadow: var(--aw-shadow-lg); transform: translateY(-3px); color: inherit; text-decoration: none; }
.product-thumb { position: relative; aspect-ratio: 4 / 3; background: #f1f5f9; overflow: hidden; }
/* Cover image fills the thumb, cropped from the centre, on every page that uses the card. */
.product-thumb > img,
.product-thumb > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.product-thumb > video { background: #0f172a; }
.product-badge {
    position: absolute; top: .6rem; left: .6rem;
    background: #fff; color: var(--aw-success); border-radius: 999px;
    font-size: .68rem; font-weight: 700; padding: .22rem .55rem; box-shadow: var(--aw-shadow-sm);
    display: inline-flex; align-items: center; gap: .3rem;
}
.product-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--aw-success); }
.sale-badge { position: absolute; top: .6rem; inset-inline-end: .6rem; z-index: 2; background: var(--aw-accent, #f2603c); color: #fff; font-weight: 800; font-size: .72rem; padding: .2rem .5rem; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.product-was { text-decoration: line-through; color: var(--aw-muted); font-size: .82rem; margin-inline-start: .4rem; }
/* Exact / Representative chip. Rendered by Views/Shared/_KindTag.cshtml wherever an item is
   listed, including inside .small table cells — hence the fixed rem size (not em) and nowrap,
   so it stays legible and never wraps mid-label in a narrow column. */
.kind-tag { display: inline-block; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
    line-height: 1.35; white-space: nowrap; border-radius: 4px; padding: .08rem .34rem;
    margin-inline-start: .25rem; vertical-align: middle; }
.kind-tag.kind-exact { background: #e9f7ef; color: #1a7f45; }
.kind-tag.kind-rep { background: #fff4e5; color: #a15c00; }

/* A panel waiting on a server round-trip: dimmed and inert, so nobody clicks a stale total. */
.is-busy { opacity: .55; pointer-events: none; transition: opacity .12s ease; }

/* Search typeahead dropdown */
.mp-suggest { position: absolute; top: 100%; inset-inline: 0; z-index: 20; margin-top: 4px; display: none;
    background: var(--aw-surface); border: 1px solid var(--aw-border-strong); border-radius: var(--aw-radius-sm);
    box-shadow: var(--aw-shadow-lg); overflow: hidden; max-height: 340px; overflow-y: auto; }
.mp-suggest.open { display: block; }
.mp-suggest-item { display: flex; align-items: center; justify-content: space-between; gap: .6rem;
    padding: .5rem .7rem; text-decoration: none; color: var(--aw-text); font-size: .9rem; }
.mp-suggest-item:hover { background: var(--aw-primary-soft); color: var(--aw-primary); text-decoration: none; }
.mp-suggest-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-suggest-kind { flex: 0 0 auto; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--aw-muted); background: var(--aw-bg); border-radius: 999px; padding: .1rem .5rem; }
.product-body { padding: .8rem .9rem 1rem; display: flex; flex-direction: column; gap: .25rem; flex: 1; }
/* Subcategory names run longer than category names; keep the line single so card heights
   stay level across a grid row. */
.product-cat { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--aw-muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product-title { font-weight: 600; color: var(--aw-ink); font-size: .92rem; line-height: 1.3; }
.product-foot { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; padding-top: .5rem; }
.product-price { font-weight: 700; color: var(--aw-ink); font-size: 1.02rem; }
.product-cur { font-size: .72rem; color: var(--aw-muted); }

/* Toasts (AJAX feedback) ------------------------------------------------- */
.toast-host {
    position: fixed; bottom: 1rem; right: 1rem; z-index: 1080;
    display: flex; flex-direction: column; gap: .5rem; max-width: 22rem;
}
.app-toast {
    background: var(--aw-ink); color: #fff; border-radius: 10px;
    padding: .7rem 1rem; font-size: .88rem; box-shadow: var(--aw-shadow-lg);
    opacity: 0; transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease;
    border-left: 4px solid var(--aw-primary, #7a2e52);
}
.app-toast.show { opacity: 1; transform: translateY(0); }
.app-toast--success { border-left-color: var(--aw-success, #15803d); }
.app-toast--danger  { border-left-color: #f87171; }
.app-toast--info    { border-left-color: #60a5fa; }

/* RTL adjustments (right-to-left languages) ------------------------------ */
[dir="rtl"] .toast-host { right: auto; left: 1rem; }
[dir="rtl"] .app-toast { border-left: 0; border-right: 4px solid var(--aw-primary, #7a2e52); }
[dir="rtl"] .app-toast--danger { border-right-color: #f87171; }
[dir="rtl"] .app-toast--info { border-right-color: #60a5fa; }
[dir="rtl"] .feature-list li, [dir="rtl"] .value-list li { text-align: right; }

/* ---- Desktop notification opt-in bar --------------------------------------
   Shown once, only while the browser permission is still "default". Asking on
   page load gets the prompt auto-blocked, so the real request is fired from a
   click on Enable (a user gesture). */
/* Floating prompt — never pushes page content down / causes a layout shift. */
.notif-perm-bar {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    z-index: 1080;
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    width: max-content;
    max-width: min(560px, calc(100vw - 1.5rem));
    padding: .7rem 1rem;
    background: var(--aw-surface);
    border: 1px solid var(--aw-primary-border);
    border-radius: .8rem;
    box-shadow: 0 14px 36px rgba(0,0,0,.18);
    font-size: .875rem;
}
.notif-perm-bar .npb-text { flex: 1; min-width: 12rem; color: var(--aw-ink); }

/* ==========================================================================
   KYC guided upload (step-by-step verification)
   ========================================================================== */
.kyc-steps { display: flex; flex-direction: column; gap: .75rem; }
.kyc-step { display: flex; gap: .9rem; align-items: flex-start; padding: 1rem; border: 1px solid var(--aw-border);
            border-radius: var(--aw-radius); background: var(--aw-surface); transition: border-color .15s, box-shadow .15s, opacity .15s; }
.kyc-step-num { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center;
                justify-content: center; font-weight: 700; font-size: .95rem; background: var(--aw-bg); color: var(--aw-muted);
                border: 1px solid var(--aw-border-strong); }
.kyc-step-num svg { width: 18px; height: 18px; }
.kyc-step-main { flex: 1; min-width: 0; }
.kyc-step-title { font-weight: 600; color: var(--aw-ink); }
.kyc-step-desc { margin-top: .1rem; }

/* Active: the step the user should do now */
.kyc-step--active { border-color: var(--aw-primary); box-shadow: 0 0 0 3px var(--aw-primary-soft); }
.kyc-step--active .kyc-step-num { background: var(--aw-primary); color: #fff; border-color: var(--aw-primary); }

/* Done: uploaded */
.kyc-step--done .kyc-step-num { background: var(--aw-success-soft); color: var(--aw-success); border-color: var(--aw-success); }
.kyc-step--done { border-color: var(--aw-success); }

/* Locked: upcoming step, not yet reachable */
.kyc-step--locked { opacity: .6; }
.kyc-step--locked .kyc-step-num { background: var(--aw-bg); }

.kyc-step--optional { border-style: dashed; }
.kyc-step-num--optional { font-size: 1.2rem; }

.kyc-step-file { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: .5rem;
                 padding: .4rem .6rem; background: var(--aw-success-soft); border-radius: var(--aw-radius-sm); }
.kyc-file-name { display: inline-flex; align-items: center; gap: .4rem; font-size: .875rem; color: var(--aw-ink); font-weight: 500; min-width: 0; }
.kyc-file-name svg { width: 16px; height: 16px; color: var(--aw-success); flex: 0 0 auto; }
.kyc-step-upload .input-group { max-width: 460px; }

/* ===== Navbar dropdown popups (messages / notifications / wishlist / cart / profile) ===== */
.nav-pop { width: 340px; max-width: calc(100vw - 24px); padding: 0; border: 1px solid var(--aw-border);
           border-radius: .75rem; box-shadow: 0 12px 32px rgba(0,0,0,.16); overflow: hidden; }
.nav-pop-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
                padding: .7rem .9rem; font-weight: 700; font-size: .95rem; color: var(--aw-ink);
                border-bottom: 1px solid var(--aw-border); }
.nav-pop-body { max-height: 60vh; overflow-y: auto; }
.np-loading, .np-empty { padding: 1.4rem .9rem; text-align: center; color: var(--aw-muted); font-size: .9rem; }
.np-row { display: flex; align-items: center; gap: .65rem; padding: .6rem .9rem; text-decoration: none;
          color: var(--aw-ink); border-bottom: 1px solid var(--aw-border); transition: background .12s; }
.np-row:last-child { border-bottom: 0; }
.np-row:hover { background: var(--aw-primary-soft); }
.np-row.np-unread { background: var(--aw-primary-soft); }
.np-ava { width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto; color: #fff; font-weight: 700;
          font-size: .85rem; display: inline-flex; align-items: center; justify-content: center; }
.np-thumb { width: 42px; height: 42px; border-radius: .45rem; overflow: hidden; flex: 0 0 auto; background: var(--bs-secondary-bg);
            display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.np-thumb img { width: 100%; height: 100%; object-fit: cover; }
.np-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.np-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.np-row-title { font-weight: 600; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-row-sub { font-size: .8rem; color: var(--aw-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-row-time { font-size: .72rem; color: var(--aw-muted); flex: 0 0 auto; }
.np-qty { color: var(--aw-muted); margin-inline-start: .35rem; }
.np-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--aw-accent, #f2603c); flex: 0 0 auto; }
.nav-pop-foot { display: block; text-align: center; padding: .65rem; font-weight: 600; font-size: .88rem;
                color: var(--aw-primary); text-decoration: none; border-top: 1px solid var(--aw-border); background: var(--aw-surface); }
.nav-pop-foot:hover { background: var(--aw-primary-soft); color: var(--aw-primary); }
.nav-pop-foot-row { display: flex; gap: .5rem; align-items: center; padding: .6rem .9rem; border-top: 1px solid var(--aw-border); }
.nav-pop-foot-row .nav-pop-foot { flex: 1; padding: .45rem; border: 1px solid var(--aw-border); border-radius: .5rem; }
.nav-pop-foot-row .btn { flex: 1; }
@media (max-width: 575.98px) {
    .nav-pop, .nav-pop--profile { width: calc(100vw - 20px); }
}
/* Saved (in-wishlist) toggle button */
.btn.is-wished { color: var(--aw-accent, #f2603c); border-color: var(--aw-accent, #f2603c); }

/* Profile dropdown (avatar + name/email + actions) */
.nav-profile-toggle { display: inline-flex; align-items: center; gap: .5rem; padding: .25rem .5rem; border-radius: 2rem;
                      text-decoration: none; color: inherit; cursor: pointer; }
.nav-profile-toggle:hover { background: rgba(0,0,0,.06); }
.np-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--aw-primary); color: #fff; font-weight: 700;
             display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; flex: 0 0 auto; }
.np-avatar.lg { width: 42px; height: 42px; font-size: 1rem; }
img.np-avatar { object-fit: cover; padding: 0; }
.np-meta { flex-direction: column; line-height: 1.15; min-width: 0; }
.np-name { font-weight: 700; font-size: .85rem; color: var(--aw-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 170px; }
.np-sub { font-size: .74rem; color: var(--aw-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 170px; }
.np-caret::after { content: "\25BE"; font-size: .7rem; color: var(--aw-muted); }
.nav-pop--profile { width: 262px; padding: .35rem; }
.nav-pop--profile .np-head { display: flex; align-items: center; gap: .6rem; padding: .55rem .6rem .7rem; border-bottom: 1px solid var(--aw-border); margin-bottom: .35rem; }
.nav-pop--profile .np-head-meta { display: flex; flex-direction: column; min-width: 0; }
.nav-pop--profile .dropdown-item { display: flex; align-items: center; gap: .6rem; border-radius: .5rem; padding: .55rem .6rem; font-size: .9rem; }
.nav-pop--profile .dropdown-item svg { width: 18px; height: 18px; color: var(--aw-muted); }
.nav-pop--profile .dropdown-item:hover { background: var(--aw-primary-soft); }
.nav-pop--profile form { margin: 0; }
.nav-pop--profile .np-signout { width: 100%; border: 0; background: transparent; text-align: start; color: #dc2626; }
.nav-pop--profile .np-signout svg { color: #dc2626; }
/* A labeled "Visit store" button for the backpanel topbar */
.topbar-store { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .7rem; border-radius: 2rem;
                border: 1px solid var(--aw-border); color: var(--aw-ink); text-decoration: none; font-size: .85rem; font-weight: 600; }
.topbar-store:hover { background: var(--aw-primary-soft); color: var(--aw-primary); border-color: var(--aw-primary-border, var(--aw-border)); }
.topbar-store svg { width: 16px; height: 16px; }

/* Global search + autocomplete (navbar, dashboard topbar, marketplace) ----- */
.aw-search { position: relative; display: flex; align-items: center; gap: .5rem; width: 100%;
    background: #fff; border: 1px solid var(--aw-border, #e2e6ec); border-radius: 999px;
    padding: 0 .35rem 0 .85rem; height: 42px; min-width: 0; }
.aw-search:focus-within { border-color: var(--aw-primary, #0f766e);
    box-shadow: 0 0 0 3px rgba(var(--aw-primary-rgb, 15,118,110), .14); }
.aw-search-ic { display: inline-flex; color: var(--aw-muted, #6b7280); flex: 0 0 auto; }
.aw-search-ic svg { width: 18px; height: 18px; }
.aw-search-input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent;
    font-size: .92rem; color: var(--aw-ink, #1f2937); height: 100%; padding: 0; }
.aw-search-input::placeholder { color: var(--aw-muted, #9aa3af); transition: opacity .2s ease; }
.aw-search-input.aw-ph-fade::placeholder { opacity: 0; }
.aw-search-clear { border: 0; background: transparent; color: var(--aw-muted, #9aa3af); font-size: 1.3rem;
    line-height: 1; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; flex: 0 0 auto; }
.aw-search-clear:hover { background: rgba(0,0,0,.06); color: var(--aw-ink); }

.aw-search-panel { position: absolute; top: calc(100% + .4rem); left: 0; right: auto;
    width: max(100%, 360px); max-width: 92vw; z-index: 1080; background: #fff;
    border: 1px solid var(--aw-border, #e2e6ec); border-radius: 14px;
    box-shadow: 0 16px 44px rgba(17,24,39,.18); padding: .35rem; max-height: min(70vh, 470px);
    overflow-y: auto; display: none; }
.aw-search--open .aw-search-panel { display: block; }
.aw-search-panel.aw-panel-end { left: auto; right: 0; }

.aw-sec { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .55rem .6rem .3rem; font-size: .67rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--aw-muted, #9aa3af); }
.aw-sec-act { border: 0; background: transparent; color: var(--aw-primary); font-size: .67rem;
    font-weight: 700; text-transform: none; letter-spacing: 0; cursor: pointer; padding: 0; }
.aw-si { display: flex; align-items: center; gap: .65rem; width: 100%; text-align: start;
    padding: .5rem .55rem; border-radius: 10px; text-decoration: none; color: var(--aw-ink, #1f2937);
    border: 0; background: transparent; cursor: pointer; }
.aw-si.is-active, .aw-si:hover { background: var(--aw-primary-soft, #eef6f5); }
.aw-si-thumb { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 9px; overflow: hidden;
    background: var(--aw-primary-soft, #eef6f5); display: grid; place-items: center; }
.aw-si-thumb img { width: 100%; height: 100%; object-fit: cover; }
.aw-si-thumb--icon { color: var(--aw-primary); }
.aw-si-thumb--icon svg { width: 18px; height: 18px; }
.aw-si-main { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; line-height: 1.2; }
.aw-si-label { font-size: .88rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw-si-label mark { background: transparent; color: var(--aw-primary); font-weight: 800; padding: 0; }
.aw-si-sub { font-size: .76rem; color: var(--aw-muted, #6b7280); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw-si-go { color: var(--aw-muted); font-size: 1rem; flex: 0 0 auto; }
.aw-si--all .aw-si-label b { font-weight: 800; }
.aw-empty { padding: .85rem .7rem; color: var(--aw-muted, #6b7280); font-size: .85rem; }

/* Listing-title autocomplete — reuses the .aw-si row styling above, but wraps a normal
   form field instead of the search pill, so it needs its own positioning shell. */
.ts { position: relative; }
.ts-panel { position: absolute; top: calc(100% + .25rem); left: 0; right: 0; z-index: 1080;
    background: #fff; border: 1px solid var(--aw-border, #e2e6ec); border-radius: 12px;
    box-shadow: 0 16px 44px rgba(17,24,39,.18); padding: .3rem;
    max-height: min(60vh, 340px); overflow-y: auto; display: none; }
.ts--open .ts-panel { display: block; }
.ts-hint { font-size: .78rem; color: var(--aw-muted, #6b7280); margin-top: .3rem; }

/* Placement wrappers */
.aw-search-navwrap { flex: 1 1 240px; max-width: 520px; min-width: 200px; margin: 0 .7rem; }
.aw-search-topwrap { flex: 1 1 260px; max-width: 420px; min-width: 200px; }
/* Below the navbar's expand breakpoint (xl) the menu collapses, so the search takes
   its own full-width row and stays visible without opening the hamburger. */
@media (max-width: 1199.98px) {
    .aw-search-navwrap { flex: 1 1 100%; max-width: none; min-width: 0; margin: .55rem 0 .15rem; }
}

/* Cover thumbnails (_CoverMedia): sized by class so the same rule covers <img> and <video>,
   since a listing may use a frame of its walkthrough video as the cover. */
.aw-thumb-44, .aw-thumb-44 { width: 44px; height: 44px; object-fit: cover; }
.aw-thumb-48 { width: 48px; height: 48px; object-fit: cover; }
.aw-thumb-52 { width: 52px; height: 52px; object-fit: cover; }
.aw-thumb-40 { width: 40px; height: 40px; object-fit: cover; }
.aw-thumb-43 { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.aw-thumb-fill { object-fit: cover; }
.aw-cover-fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
video.aw-thumb-44, video.aw-thumb-48, video.aw-thumb-52, video.aw-thumb-40,
video.aw-thumb-43, video.aw-thumb-fill, video.aw-cover-fill { background: #0f172a; }

/* Password-reset wizard (Account/ForgotPassword) ---------------------------
   Three steps on one page inside the standard auth card, so the flow looks like the rest of
   the sign-in area rather than a detour out of it.

   Deliberately its own block rather than reusing the create-listing wizard's .lw-* classes:
   those are sized and styled for a full-width seller workflow with drop zones and option
   cards, and coupling password recovery to them would mean an edit over there could break
   getting back into an account. The visual language (dot rail, fade between steps) is
   matched on purpose; the implementation is independent. */
.pwz-head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; }
.pwz-head .auth-sub { margin-top: .2rem; }

.pwz-dots { display: flex; align-items: center; list-style: none; margin: .35rem 0 0 auto; padding: 0; flex: 0 0 auto; }
.pwz-dots li { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--aw-border-strong, #cbd2dc); position: relative; }
.pwz-dots li + li { margin-inline-start: 22px; }
.pwz-dots li + li::before {
    content: ""; position: absolute; inset-inline-end: 100%; top: 50%;
    width: 22px; height: 2px; background: var(--aw-border-strong, #cbd2dc); transform: translateY(-50%);
}
/* Steps already passed stay filled, so the rail reads as progress rather than position. */
.pwz-dots li.is-active { background: var(--aw-primary); border-color: var(--aw-primary); }

.pwz-step { display: none; }
.pwz-step.is-active { display: block; animation: pwz-fade .18s ease-out; }
@keyframes pwz-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pwz-step.is-active { animation: none; } }

.pwz-lead { color: var(--aw-muted); font-size: .92rem; line-height: 1.6; margin-bottom: 1.15rem; }
.pwz-input { min-height: 46px; border-radius: 10px; }
.pwz-rules { color: var(--aw-muted); font-size: .8rem; margin-top: .4rem; }

/* The code field is read back digit by digit off an email, so it gets the treatment that makes
   that easy: monospaced figures, generous tracking, and large enough not to squint at. */
.pwz-code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 1.5rem; letter-spacing: .38em; text-align: center; font-variant-numeric: tabular-nums;
    /* letter-spacing pads the right of the last glyph, which visually shifts the value left. */
    text-indent: .38em;
}
.pwz-code::placeholder { letter-spacing: .38em; opacity: .35; }

.pwz-foot { margin-top: 1.1rem; text-align: center; font-size: .88rem; }
.pwz-foot .btn-link { font-size: .88rem; }
.pwz-foot .btn-link:disabled { color: var(--aw-muted); text-decoration: none; opacity: .8; }