/* ─────────────────────────────────────────────────────────────────────────────
   Importers (2026-10-28) — `.vbi-*`, on the "more room" layer (css/site.css).
   The importer's own colours are DATA from its profile, set inline by
   Utilities/ImporterLook.Vars as --imp (brand), --imp-on (text on it) and
   --imp-ink (the brand as readable text); they are used ONLY for that importer's
   chip, avatar and page header. Every other colour is a site token.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Avatar: logo, else initials on the brand colour ── */
.vbi-avatar {
    --_imp: var(--imp, var(--color-brand));
    width: var(--vbi-size, 56px);
    height: var(--vbi-size, 56px);
    flex: none;
    border-radius: 999px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--_imp);
    border: 1.5px solid var(--imp-on, var(--color-light-text));
    box-sizing: border-box;
}
.vbi-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vbi-avatar-initials {
    color: var(--imp-on, var(--color-light-text));
    font-weight: 700;
    font-size: calc(var(--vbi-size, 56px) * 0.3);
    letter-spacing: -0.02em;
    line-height: 1;
}
.vbi-avatar--ring { box-shadow: 0 0 0 3px var(--_imp), 0 0 0 5px var(--imp-on, var(--color-light-text)); }

/* ── Chip: who sells it, in the importer's colour ── */
.vbi-chip {
    --_imp: var(--imp, var(--color-brand));
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    max-width: 100%;
    min-width: 0;
    padding: 0.1875rem 0.625rem 0.1875rem 0.1875rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--_imp) 12%, var(--color-card-bg));
    color: var(--imp-ink, var(--_imp));
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    vertical-align: middle;
}
a.vbi-chip:hover { text-decoration: none; color: var(--imp-ink, var(--_imp)); background: color-mix(in srgb, var(--_imp) 20%, var(--color-card-bg)); }
.vbi-chip-dot {
    flex: none;
    min-width: 1.375rem;
    height: 1.375rem;
    padding: 0 0.25rem;
    box-sizing: border-box;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--_imp);
    color: var(--imp-on, var(--color-light-text));
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.vbi-chip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Under a wine card's text (VbWineCard) */
.vb-wine-importer { align-self: flex-start; margin-top: 0.625rem; }
/* In the wine page's where-to-buy rows (WineBuyOnline) */
.wdk-shop-main .vbi-chip { align-self: flex-start; }
/* (beats WineBuyOnline's own .wbuy-shop, which sets the ink colour and a block line) */
.wbuy-main .vbi-chip.wbuy-shop { display: inline-flex; align-self: flex-start; width: auto; font-size: 0.875rem; color: var(--imp-ink, var(--_imp)); }
.wbuy-thumb .vbi-avatar { margin: auto; }

/* ── Explore: the importer rail ── */
.vbi-rail-wrap { padding-top: 4.5rem; }
.vbi-rail {
    display: flex;
    gap: 2rem;
    overflow-x: auto;
    padding: 0.5rem 0.25rem 0.75rem;
    scrollbar-width: thin;
}
.vbi-circle {
    flex: 0 0 7.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    text-align: center;
    color: var(--color-ink);
    text-decoration: none;
}
.vbi-circle:hover { color: var(--color-ink); text-decoration: none; }
.vbi-circle .vbi-avatar { margin-bottom: 0.5rem; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
.vbi-circle:hover .vbi-avatar { transform: translateY(-3px); }
.vbi-circle b { font-size: 0.9375rem; font-weight: 600; line-height: 1.25; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.vbi-circle span { font-size: 0.8125rem; color: var(--color-muted); }

/* ── The importer page ── */
.vbi-top { padding-top: 3rem; }
.vbi-sk-hero { height: 15rem; border-radius: var(--radius-sheet); }
.vbi-hero {
    --_imp: var(--imp, var(--color-brand));
    background: var(--_imp);
    color: var(--imp-on, var(--color-light-text));
    border-radius: var(--radius-sheet);
    padding: 2.25rem 2.5rem 2.5rem;
}
.vbi-eyebrow,
.vbi-owner-tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.85;
}
.vbi-owner-tag { padding: 0.2rem 0.55rem; border: 1px solid currentColor; border-radius: 6px; opacity: 1; }
.vbi-identity { display: flex; align-items: center; gap: 1.5rem; margin-top: 1.5rem; }
.vbi-identity-text { min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.vbi-name {
    margin: 0;
    color: inherit;
    font-family: var(--font-display);
    font-size: 2.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    overflow-wrap: anywhere;
}
.vbi-city { font-size: 1rem; opacity: 0.85; }
.vbi-desc { margin: 1.5rem 0 0; max-width: 46rem; font-size: 1.0625rem; line-height: 1.6; opacity: 0.95; }
.vbi-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.vbi-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0 1.25rem;
    border-radius: 999px;
    border: 1.5px solid var(--imp-on, var(--color-light-text));
    color: var(--imp-on, var(--color-light-text));
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
}
.vbi-action:hover { text-decoration: none; color: var(--imp-on, var(--color-light-text)); opacity: 0.85; }
.vbi-action--filled { background: var(--imp-on, var(--color-light-text)); color: var(--_imp); }
.vbi-action--filled:hover { color: var(--_imp); }

.vbi-info { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.vbi-info p { margin: 0; display: flex; align-items: baseline; gap: 0.625rem; color: var(--color-body); font-size: 0.9375rem; line-height: 1.5; }
.vbi-info-dot { flex: none; width: 8px; height: 8px; border-radius: 999px; background: var(--color-field); transform: translateY(-1px); }
.vbi-info-dot--ok { background: var(--color-ok); }
.vbi-owner-note { margin: 1.25rem 0 0; padding: 0.875rem 1.125rem; border-radius: 12px; background: var(--color-stone); color: var(--color-body); font-size: 0.875rem; }
.vbi-owner-note b { color: var(--color-ink); font-weight: 600; }

.vbi-wines { padding-top: 4.5rem; padding-bottom: 2rem; }
.vbi-regions { margin: 1.75rem 0 0.5rem; }
.vbi-list { list-style: none; margin: 0.75rem 0 0; padding: 0; }
.vbi-row { display: flex; align-items: center; gap: 1.25rem; padding: 1rem 0; border-bottom: 1px solid var(--color-line); }
.vbi-row:last-child { border-bottom: 0; }
.vbi-row.is-dim .vbi-row-main,
.vbi-row.is-dim .vbi-row-end { opacity: 0.55; }
.vbi-row-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 1.125rem; color: var(--color-ink); text-decoration: none; }
.vbi-row-main:hover { color: var(--color-ink); text-decoration: none; }
.vbi-row-main:hover b { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.vbi-thumb .vbi-drawn { height: 3.25rem; width: auto; }
.vbi-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.vbi-row-text b { font-size: 1rem; font-weight: 600; }
.vbi-row-text > span { font-size: 0.875rem; color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; }
.vbi-vintage { font-weight: 400; color: var(--color-body); margin-left: 0.375rem; white-space: nowrap; }
.vbi-row-text > .vbi-wish { color: var(--color-wine); font-weight: 600; font-size: 0.8125rem; }
.vbi-row-text > .vbi-note { color: var(--color-body); font-size: 0.8125rem; }
.vbi-row-end { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; text-align: right; }
.vbi-price {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4rem 0.875rem;
    border-radius: 999px;
    background: var(--color-brand-soft);
    color: var(--color-brand);
    font-weight: 700;
    font-size: 0.9375rem;
    white-space: nowrap;
    text-decoration: none;
}
.vbi-price:hover { background: var(--color-secondary-button-hover); color: var(--color-brand-dark); text-decoration: none; }
.vbi-price-plain { font-weight: 700; font-size: 0.9375rem; color: var(--color-ink); white-space: nowrap; }
.vbi-soldout { font-weight: 600; color: var(--color-muted); }
.vbi-footer { margin-top: 2.5rem; }

@media (max-width: 640px) {
    .vbi-top { padding-top: 1.5rem; }
    .vbi-hero { padding: 1.5rem 1.25rem 1.75rem; }
    .vbi-identity { gap: 1rem; margin-top: 1.125rem; }
    .vbi-name { font-size: 1.875rem; }
    .vbi-desc { font-size: 0.9375rem; }
    .vbi-actions { gap: 0.5rem; }
    .vbi-action { flex: 1 1 0; padding: 0 0.75rem; }
    .vbi-rail { gap: 1.25rem; }
    .vbi-circle { flex-basis: 6.25rem; }
    .vbi-row { gap: 0.75rem; }
    .vbi-vintage { display: block; margin: 0.125rem 0 0; font-size: 0.875rem; }
    .vbi-row-main { gap: 0.75rem; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Managing an importer (2026-11-03) — `.vbm-*`: /sales-cellar (Pages/SalesCellar,
   Components/Importer/*), Settings → Importer and the cellar page's chips. Only the
   importer's avatar and the preview card carry its own colours; the rest is tokens.
   ───────────────────────────────────────────────────────────────────────────── */
.vbm-head { padding-top: 3.5rem; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.vbm-head-text { flex: 1; min-width: 14rem; }
.vbm-head-text .vb-h1 { overflow-wrap: anywhere; }
.vbm-state { margin: 0.625rem 0 0; display: flex; align-items: center; gap: 0.5rem; color: var(--color-body); font-size: 0.9375rem; }
.vbm-importers { margin-top: 1.75rem; }
.vbm-importers .vb-chip { padding-left: 0.5rem; }
.vbm-importers .vbi-avatar { border-width: 1px; }
.vbm-tabs { margin-top: 2rem; display: flex; gap: 1.75rem; border-bottom: 1px solid var(--color-line); }
.vbm-tabs a { padding: 0.75rem 0; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--color-body); font-weight: 600; font-size: 1rem; text-decoration: none; }
.vbm-tabs a:hover { color: var(--color-ink); text-decoration: none; }
.vbm-tabs a.is-on { color: var(--color-ink); border-bottom-color: var(--color-brand); }
.vbm-notice-wrap { margin-top: 1.25rem; margin-bottom: 0; }
.vbm-notice { display: block; padding: 0.75rem 1rem; border-radius: 12px; background: var(--color-stone); color: var(--color-body); font-size: 0.875rem; line-height: 1.5; }
.vbm-body { padding-top: 1.75rem; }
.vbm-body[hidden] { display: none; }

.vbm-eyebrow { margin: 1.5rem 0 0.5rem; color: var(--color-muted); font-size: 0.8125rem; font-weight: 600; }
.vbm-eyebrow--first { margin-top: 0; }
.vbm-error { display: block; margin: 0.625rem 0 0; color: var(--color-wine); font-size: 0.875rem; font-style: normal; font-weight: 600; line-height: 1.45; }
.vbm-warn { margin: 0.625rem 0 0; color: var(--color-body); font-size: 0.875rem; font-weight: 600; }
.vbm-file { position: fixed; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; }
.vbm-linkbtn { align-self: flex-start; padding: 0.25rem 0; border: 0; background: none; color: var(--color-brand); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; }
.vbm-linkbtn:hover { text-decoration: underline; text-underline-offset: 3px; }
.vbm-linkbtn--danger { color: var(--color-wine); align-self: center; }
.vbm-danger { background: var(--color-wine); color: var(--color-light-text); }
.vbm-danger:hover { background: var(--color-wine); color: var(--color-light-text); opacity: 0.9; }
.vb-btn.is-busy, .vbm-scan.is-busy { opacity: 0.6; pointer-events: none; }
label.vb-btn { cursor: pointer; }

/* Switch */
.vbm-switch { flex: none; position: relative; width: 2.75rem; height: 1.625rem; padding: 0; border: 0; border-radius: 999px; background: var(--color-field); cursor: pointer; transition: background 0.15s ease; }
.vbm-switch span { position: absolute; top: 0.1875rem; left: 0.1875rem; width: 1.25rem; height: 1.25rem; border-radius: 999px; background: var(--color-card-bg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform 0.15s ease; }
.vbm-switch.is-on { background: var(--color-ok); }
.vbm-switch.is-on span { transform: translateX(1.125rem); }
.vbm-switch:disabled { opacity: 0.6; cursor: default; }
.vbm-switch:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.vbm-switchrow { display: flex; align-items: center; gap: 1rem; margin-top: 1.25rem; padding: 0.875rem 1rem; border-radius: 14px; background: var(--color-stone); }
.vbm-switchrow > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.vbm-switchrow b { font-size: 0.9375rem; font-weight: 600; }
.vbm-switchrow > div > span { font-size: 0.8125rem; color: var(--color-muted); line-height: 1.4; }
.vbm-switchrow--flat { margin: 0; padding: 0; background: none; }

/* Sales cellar */
.vbm-summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.vbm-counts { display: flex; flex-wrap: wrap; gap: 0.375rem 1.25rem; color: var(--color-body); font-size: 0.9375rem; }
.vbm-counts span { display: inline-flex; align-items: center; gap: 0.4375rem; }
.vbm-counts b { color: var(--color-ink); font-weight: 700; }
.vbm-dot { flex: none; display: inline-block; width: 8px; height: 8px; border-radius: 999px; box-sizing: border-box; }
.vbm-dot--shown { background: var(--color-ok); }
.vbm-dot--soldout { background: var(--color-field); }
.vbm-dot--noprice { border: 1.5px dashed var(--color-muted); }
.vbm-add { margin-left: auto; }
.vbm-search { margin-top: 1.5rem; }
.vbm-nomatch { text-align: center; margin-top: 2rem; }
.vbm-list { list-style: none; margin: 0.75rem 0 0; padding: 0; }
.vbm-row { display: flex; align-items: center; gap: 1.25rem; border-bottom: 1px solid var(--color-line); }
.vbm-row:last-child { border-bottom: 0; }
.vbm-row-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 1.125rem; padding: 0.875rem 0; border: 0; background: none; color: var(--color-ink); font: inherit; text-align: left; cursor: pointer; }
.vbm-row-main:hover .vbi-row-text > b { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.vbm-row.is-dim .vbm-row-main { opacity: 0.55; }
.vbm-row-price { flex: none; min-width: 5rem; display: flex; flex-direction: column; align-items: flex-end; gap: 0.1875rem; text-align: right; }
.vbm-row-price b { font-size: 1rem; font-weight: 700; white-space: nowrap; }
.vbm-addprice { padding: 0.25rem 0.625rem; border: 1.5px dashed var(--color-muted); border-radius: 8px; color: var(--color-body); font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
.vbm-tag { display: inline-block; margin-left: 0.375rem; padding: 0.0625rem 0.4375rem; border-radius: 6px; background: var(--color-stone); color: var(--color-body); font-size: 0.75rem; font-weight: 600; }
.vbm-tag--ok { background: var(--color-ok-soft); color: var(--color-ok); }
.vbi-row-text > span .vbm-tag { vertical-align: 1px; }
.vbm-more { display: flex; justify-content: center; margin-top: 1.5rem; }

/* Edit sheet + add a wine */
.vbm-sheet-title { margin: 0; padding-right: 3rem; font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.02em; font-weight: 600; }
.vbm-sheet-wine { margin-top: 1.25rem; padding-right: 0; }
.vbm-sheet-wine .vbi-row-text > span { white-space: normal; }
.vbm-sheet .vb-sheet-actions { margin-top: 1.5rem; }
.vbm-options { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.vbm-option { min-height: 2.5rem; padding: 0 0.875rem; border: 1px solid var(--color-field); border-radius: 10px; background: var(--color-card-bg); color: var(--color-ink); font: inherit; font-size: 0.9375rem; font-weight: 500; cursor: pointer; }
.vbm-option:hover { border-color: var(--color-muted); }
.vbm-option.is-on { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-light-text); }
.vbm-other { display: flex; gap: 0.5rem; margin-top: 0.625rem; }
.vbm-other .vbm-input { flex: 1; min-width: 0; }
.vbm-prices { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem; margin-top: 1.25rem; }
.vbm-prices .vbm-field { margin-top: 0; }
.vbm-price-box { display: flex; align-items: center; min-height: 3rem; padding: 0 0.875rem; border: 1px solid var(--color-field); border-radius: 12px; }
.vbm-price-box:focus-within { border-color: var(--color-brand); }
.vbm-price-box.is-bad { border-color: var(--color-wine); }
.vbm-price-box input { flex: 1; min-width: 0; width: 100%; border: 0; outline: none; background: none; padding: 0; font: inherit; font-size: 1.125rem; font-weight: 600; color: var(--color-ink); }
.vbm-price-box i { flex: none; margin-left: 0.375rem; color: var(--color-muted); font-style: normal; font-size: 0.875rem; font-weight: 600; }
.vbm-hint { margin-top: 0.5rem; }
.vbm-field { display: flex; flex-direction: column; gap: 0.375rem; margin-top: 1rem; font-size: 0.875rem; font-weight: 600; color: var(--color-body); }
.vbm-field > span em { color: var(--color-muted); font-style: normal; font-weight: 400; }
.vbm-field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.vbm-field-head small { color: var(--color-muted); font-size: 0.75rem; font-weight: 400; }
.vbm-input { width: 100%; min-height: 3rem; padding: 0 0.875rem; border: 1px solid var(--color-field); border-radius: 12px; background: var(--color-card-bg); box-sizing: border-box; font: inherit; font-size: 0.9375rem; font-weight: 400; color: var(--color-ink); }
textarea.vbm-input { padding: 0.75rem 0.875rem; line-height: 1.5; resize: vertical; }
.vbm-input:focus { outline: none; border-color: var(--color-brand); }
.vbm-input.is-bad { border-color: var(--color-wine); }
.vbm-remove-q { margin: 0 0 0.25rem !important; font-size: 0.9375rem !important; }
.vbm-remove-q b { color: var(--color-ink); font-weight: 600; }
.vbm-picker-search { margin-top: 1.25rem; }
.vbm-scan { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.75rem; padding: 0.75rem; border: 1.5px dashed var(--color-field); border-radius: 12px; color: var(--color-brand); font-size: 0.9375rem; font-weight: 600; cursor: pointer; }
.vbm-scan:hover { border-color: var(--color-brand); }
.vbm-picks { margin-top: 1rem; }
.vbm-picks .vbm-eyebrow { margin-top: 0; }
.vbm-pick { width: 100%; display: flex; align-items: center; gap: 0.875rem; padding: 0.625rem 0; border: 0; border-bottom: 1px solid var(--color-line); background: none; color: var(--color-ink); font: inherit; text-align: left; cursor: pointer; }
.vbm-pick:hover .vbi-row-text > b { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.vbm-chev { flex: none; color: var(--color-muted); font-size: 1.25rem; }
.vbm-none { margin: 0 !important; font-weight: 600; color: var(--color-ink) !important; }
.vbm-newwine { margin-top: 0.875rem; padding: 1rem; border: 1px solid var(--color-line); border-radius: 14px; display: flex; flex-direction: column; gap: 0.25rem; }
.vbm-newwine b { font-size: 0.875rem; font-weight: 600; color: var(--color-body); }
.vbm-newwine p { margin: 0 !important; }
.vbm-newwine .vbm-newwine-name { font-size: 1.0625rem !important; font-weight: 600; color: var(--color-ink) !important; }
.vbm-newwine .vb-btn { margin-top: 0.625rem; }

/* Your page */
.vbm-profile { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 2.5rem; align-items: start; }
.vbm-profile-main { min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.vbm-card { padding: 1.5rem; border: 1px solid var(--color-line); border-radius: var(--radius-plinth); background: var(--color-card-bg); }
.vbm-card > .vbm-field:first-child { margin-top: 0; }
.vbm-readonly { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; min-height: 3rem; padding: 0.5rem 0.875rem; border-radius: 12px; background: var(--color-stone); box-sizing: border-box; }
.vbm-readonly b { color: var(--color-ink); font-size: 0.9375rem; font-weight: 600; }
.vbm-readonly small, .vbm-cvr small { color: var(--color-muted); font-size: 0.75rem; font-weight: 400; }
.vbm-logo { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.25rem; }
.vbm-logo-text { flex: 1; min-width: 10rem; display: flex; flex-direction: column; gap: 0.125rem; }
.vbm-logo-text b { font-size: 0.875rem; font-weight: 600; color: var(--color-body); }
.vbm-logo-text span { font-size: 0.8125rem; color: var(--color-muted); }
.vbm-logo-actions { display: flex; align-items: center; gap: 0.875rem; flex-wrap: wrap; }
.vbm-colors { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.vbm-colorbtn { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 0.875rem 0 0.5rem; border: 1px solid var(--color-field); border-radius: 12px; background: var(--color-card-bg); color: var(--color-ink); font: inherit; font-size: 0.875rem; font-weight: 500; cursor: pointer; }
.vbm-colorbtn.is-on { border-color: var(--color-brand); }
.vbm-colorbtn i { width: 1.75rem; height: 1.75rem; border-radius: 8px; border: 1px solid var(--color-line); background: var(--color-brand); }
.vbm-swatches { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.vbm-swatch { width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid var(--color-line); border-radius: 10px; cursor: pointer; }
.vbm-swatch.is-on { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.vbm-colorwell { width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid var(--color-field); border-radius: 10px; background: none; cursor: pointer; }
.vbm-hex { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.375rem; font-size: 0.8125rem; font-weight: 500; color: var(--color-muted); }
.vbm-hex .vbm-input { max-width: 12rem; }
.vbm-cvr { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin-top: 1rem; font-size: 0.875rem; color: var(--color-body); }
.vbm-save { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.vbm-save .vbm-error { margin: 0; }
.vbm-preview { position: sticky; top: 6rem; }
.vbm-preview-card { --_imp: var(--imp, var(--color-brand)); border-radius: var(--radius-plinth); overflow: hidden; border: 1px solid var(--color-line); }
.vbm-preview-head { display: flex; align-items: center; gap: 0.875rem; padding: 1.125rem 1.25rem; background: var(--_imp); color: var(--imp-on, var(--color-light-text)); }
.vbm-preview-head > div { min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.vbm-preview-head b { font-size: 1.125rem; font-weight: 700; overflow-wrap: anywhere; }
.vbm-preview-head span { font-size: 0.8125rem; opacity: 0.85; }
.vbm-preview-body { padding: 1rem 1.25rem 1.125rem; background: var(--color-card-bg); }
.vbm-preview-body p { margin: 0 0 0.5rem; color: var(--color-body); font-size: 0.875rem; line-height: 1.5; overflow-wrap: anywhere; }

/* Settings → Importer, the cellar page's chip, the owner's bar on the importer page */
.vbm-settings-card { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; margin-bottom: 1rem; }
.vbm-settings-row { display: flex; align-items: center; gap: 0.875rem; min-height: 3.25rem; padding: 0.625rem 0; border-bottom: 1px solid var(--color-line); color: var(--color-ink); text-decoration: none; }
.vbm-settings-row:last-of-type { border-bottom: 0; }
a.vbm-settings-row:hover { color: var(--color-ink); text-decoration: none; opacity: 0.75; }
.vbm-settings-row > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.vbm-settings-row b { font-size: 0.9375rem; font-weight: 600; }
.vbm-settings-row small { color: var(--color-muted); font-size: 0.8125rem; line-height: 1.4; }
.vbm-settings-row > i { flex: none; color: var(--color-muted); font-size: 1.25rem; font-style: normal; }
.vbm-saleschip { padding-left: 0.5rem; }
.vbm-saleschip .vbi-avatar { border-width: 1px; }
.vbi-owner-note { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; flex-wrap: wrap; }
.vbi-owner-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.vbi-owner-links .vb-btn { min-height: 2.5rem; padding: 0 1rem; font-size: 0.875rem; }

@media (max-width: 900px) {
    .vbm-profile { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    .vbm-preview { position: static; order: -1; }
}
@media (max-width: 640px) {
    .vbm-head { padding-top: 1.75rem; gap: 1rem; }
    .vbm-head > .vb-btn { width: 100%; }
    .vbm-add { width: 100%; margin-left: 0; }
    .vbm-row { gap: 0.625rem; }
    .vbm-row-main { gap: 0.75rem; }
    .vbm-row-price { min-width: 0; }
    .vbm-card { padding: 1.125rem; }
    .vbm-sheet .vbm-prices { gap: 0.625rem; }
}