/* =========================================================================
   B2B WHOLESALE PORTAL — design system
   Paper background, deep teal accent, system font, density modes.
   ========================================================================= */

:root {
    --paper:        #faf8f4;
    --surface:      #ffffff;
    --surface-2:    #f4f1eb;
    --line:         #e7e2d8;
    --line-strong:  #d8d2c4;

    --ink:          #1a1f1d;
    --ink-2:        #4b524f;
    --ink-3:        #8b8f88;
    --ink-soft:     #b3b6ad;

    --accent:       #0f766e;     /* deep teal */
    --accent-soft:  #ccfbf1;
    --accent-tint:  #f0fdfa;
    --accent-ink:   #115e59;

    --good:         #15803d;
    --good-soft:    #dcfce7;
    --warn:         #b45309;
    --warn-soft:    #fef3c7;
    --bad:          #b91c1c;
    --bad-soft:     #fee2e2;
    --fav:          #e11d48;
    --fav-soft:     #ffe4e6;

    --radius-sm: 6px;
    --radius:    10px;
    --radius-lg: 14px;

    --shadow-sm: 0 1px 2px rgba(20,30,28,0.04);
    --shadow:    0 2px 8px rgba(20,30,28,0.06);
    --shadow-lg: 0 12px 32px rgba(20,30,28,0.14);

    --row-h: 64px;
    --row-img: 44px;
    --row-pad-y: 10px;

    --bar-h: 64px;
    --sidebar-w: 240px;
    --content-max: none;   /* Fill the viewport on big monitors — B2B catalogs benefit from the extra horizontal real estate. The cart bar already runs full-width; appbar + layout now match. */

    --font:
      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
      Arial, "Noto Sans", "Liberation Sans", sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* Density modes */
html[data-density="compact"] { --row-h: 44px; --row-img: 0px; --row-pad-y: 6px; }
html[data-density="cozy"]    { --row-h: 64px; --row-img: 44px; --row-pad-y: 10px; }
html[data-density="roomy"]   { --row-h: 88px; --row-img: 64px; --row-pad-y: 16px; }

/* ────────────── Reset / base ────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    padding-bottom: 96px;
    overflow-x: hidden;
}
body.cart-open, body.filters-open { overflow: hidden; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
.fw-bold { font-weight: 600; }
.text-muted { color: var(--ink-3); }
.small { font-size: 12px; }
.d-none { display: none !important; }
.m-0 { margin: 0; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 4px; }
.ms-1 { margin-left: 4px; }
.ms-auto { margin-left: auto; }
.gap-2 { gap: 8px; }
.d-flex { display: flex; }
.align-items-center { align-items: center; }
@media (min-width: 768px) { .d-md-block { display: block !important; } .d-md-none { display: none !important; } .d-md-inline { display: inline !important; } }
@media (max-width: 767.98px) { .d-md-block { display: none !important; } .d-md-none { display: revert !important; } }
@media (min-width: 576px) { .d-sm-inline { display: inline !important; } }

/* Tabular numerals everywhere money/qty appears */
.price-current, .price-base, .row-name, .qty-input,
.drawer-total, .tier-pill, .stock-pill,
.recent-total, .appbar-cart-badge, .drafts-count-badge {
    font-variant-numeric: tabular-nums;
}

/* ════════════════ APP BAR ════════════════ */
.appbar {
    position: sticky; top: 0; z-index: 50;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    height: var(--bar-h);
}
.appbar-inner {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 16px;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 16px;
    min-width: 0;
}
.appbar-inner > .appbar-brand { flex: 0 0 auto; min-width: 0; }
.appbar-inner > .appbar-search { flex: 1 1 auto; min-width: 0; }
.appbar-inner > .appbar-user,
.appbar-inner > .appbar-icon-btn,
.appbar-inner > .lb-lang { flex: 0 0 auto; }
.appbar-brand {
    display: flex; align-items: center; gap: 12px; min-width: 0;
    color: inherit; text-decoration: none;
    transition: opacity 0.15s ease;
}
.appbar-brand:hover { opacity: 0.78; color: inherit; text-decoration: none; }
.appbar-brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.appbar-logo {
    width: 40px; height: 40px;
    border-radius: var(--radius);
    object-fit: cover;
    border: 1px solid var(--line);
}
.appbar-logo-fallback {
    background: var(--accent-tint);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
}
.appbar-name { line-height: 1.15; }
.appbar-tenant { font-weight: 700; font-size: 14px; color: var(--ink); }
.appbar-tag {
    display: inline-block;
    margin-top: 2px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
    background: var(--accent-tint);
    padding: 1px 6px;
    border-radius: 999px;
}
.appbar-search {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0 6px 0 14px;
    height: 40px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.appbar-search:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.appbar-search-icon { color: var(--ink-3); margin-right: 8px; }
.appbar-search input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: var(--ink);
    min-width: 0;
}
.appbar-search input::placeholder { color: var(--ink-soft); }
.appbar-scan {
    background: transparent;
    border: none;
    color: var(--ink-2);
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.12s, color 0.12s;
}
.appbar-scan:hover { background: var(--accent-tint); color: var(--accent); }
.appbar-scan i { font-size: 1.05rem; }
.appbar-user { display: flex; align-items: center; gap: 12px; }
.appbar-user-name { text-align: right; font-size: 13px; line-height: 1.2; }
.appbar-user-phone { font-size: 11px; color: var(--ink-3); margin-top: 1px; }
.appbar-icon-btn {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-2);
    width: 36px; height: 36px;
    border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.appbar-icon-btn:hover { background: var(--paper); color: var(--ink); border-color: var(--line-strong); }
.appbar-icon-btn i { font-size: 1.05rem; }
.appbar-mobile-filters { display: none; }

/* ════════════════ LAYOUT ════════════════ */
.layout {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 24px 16px;
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    gap: 24px;
    align-items: start;
}

/* ────── SIDEBAR ────── */
.sidebar { position: sticky; top: calc(var(--bar-h) + 16px); }
.sidebar-inner {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 16px;
    max-height: calc(100vh - var(--bar-h) - 32px);
    overflow-y: auto;
    box-shadow: var(--shadow-sm);
}
.sidebar-section + .sidebar-section { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.sidebar-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 8px 4px;
}
.sidebar-mobile-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.sidebar-nav { display: flex; flex-direction: column; gap: 1px; }
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    color: var(--ink-2);
    text-decoration: none;
    font-size: 13px;
    transition: background 0.12s, color 0.12s;
}
.sidebar-link i { width: 16px; font-size: 14px; color: var(--ink-3); }
.sidebar-link:hover { background: var(--surface-2); color: var(--ink); }
.sidebar-link.active { background: var(--accent); color: white; }
.sidebar-link.active i { color: rgba(255,255,255,0.9); }
.sidebar-link-fav i { color: var(--fav) !important; }
.sidebar-link-fav.active { background: var(--fav); }
.sidebar-link-fav.active i { color: white !important; }
.sidebar-count {
    margin-left: auto;
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
    min-width: 22px;
    text-align: center;
}
.sidebar-link.active .sidebar-count { background: rgba(255,255,255,0.22); color: white; }

/* Category tree — image thumbnail, chevron + lazy expand.
   On page load every sub-category carries .cat-collapsed and stays
   hidden. JS toggles the class on root click. */
.cat-collapsed { display: none !important; }
/* Thumbnail size is locked with !important + explicit min/max because
   admin-uploaded category images come in at arbitrary intrinsic sizes
   (some are 1500×1500). Without the lock the <img> renders at intrinsic
   size, eating the row width. */
.sidebar-link img.sidebar-cat-thumb,
.sidebar-cat-thumb {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    object-fit: cover;
    border-radius: 4px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    flex-shrink: 0;
    flex-grow: 0;
}
/* Sub-cats slightly smaller so the indent reads */
.sidebar-link.sidebar-sub img.sidebar-cat-thumb,
.sidebar-sub .sidebar-cat-thumb {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
}
/* Lower-opacity tint for the auto-fallback (first product image) so
   admins can tell which thumbs they curated vs which were auto-picked. */
.sidebar-cat-thumb-fallback { opacity: 0.78; }
.sidebar-cat-icon { flex-shrink: 0; }
.sidebar-cat-name {
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar-cat-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-3);
    margin-left: auto;
    flex-shrink: 0;
}
.sidebar-cat-chevron {
    width: 14px !important; font-size: 11px !important;
    margin-left: 6px; flex-shrink: 0;
    color: var(--ink-3) !important;
    transition: transform 0.18s ease;
}
.sidebar-link.expanded .sidebar-cat-chevron { transform: rotate(90deg); color: var(--ink) !important; }
.sidebar-link.active .sidebar-cat-chevron { color: rgba(255,255,255,0.9) !important; }
.sidebar-link.active .sidebar-cat-thumb { border-color: rgba(255,255,255,0.4); }
/* Subs: a touch smaller font (thumb size handled in the locked rule above) */
.sidebar-sub { font-size: 12.5px; }
.sidebar-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    user-select: none;
    color: var(--ink-2);
    font-size: 13px;
}
.sidebar-toggle:hover { background: var(--surface-2); }
.sidebar-toggle input { accent-color: var(--accent); width: 16px; height: 16px; }

.sidebar-select {
    width: 100%;
    padding: 8px 32px 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%23666' d='M3 6l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.sidebar-select:hover { border-color: var(--accent); }
.sidebar-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(15,118,110,0.15); }

.sidebar-segmented { display: grid; grid-template-columns: 1fr 1fr 1fr; background: var(--surface-2); border-radius: var(--radius-sm); padding: 3px; }
.seg-btn {
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 8px;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.seg-btn:hover { color: var(--ink); }
.seg-btn.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

/* ════════════════ CONTENT ════════════════ */
.content { min-width: 0; }

.ghost-btn {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-2);
    border-radius: var(--radius);
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.ghost-btn:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line-strong); }
.ghost-btn i { font-size: 0.95rem; }

.btn-primary-b2b {
    background: var(--accent);
    color: white;
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.12s, transform 0.05s;
}
.btn-primary-b2b:hover { background: var(--accent-ink); }
.btn-primary-b2b:active { transform: scale(0.98); }
.btn-primary-b2b:disabled { background: var(--ink-soft); border-color: var(--ink-soft); cursor: not-allowed; transform: none; }

.section-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 10px 0;
}

.login-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 14px 18px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
}
.login-banner-icon {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--accent-tint);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* ────── Recommended restock (collapsible) ────── */
.restock-card {
    background: linear-gradient(135deg, #0f766e, #115e59);
    color: white;
    border-radius: var(--radius-lg);
    padding: 14px 18px;
    margin-bottom: 16px;
    box-shadow: var(--shadow);
    overflow: hidden;
}
.restock-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    list-style: none;
    font-weight: 700;
}
.restock-summary::-webkit-details-marker { display: none; }
.restock-summary i { font-size: 1.2rem; color: #fcd34d; }
.restock-title { font-size: 15px; }
.restock-count {
    font-size: 12px;
    background: rgba(255,255,255,0.16);
    padding: 2px 10px;
    border-radius: 999px;
    font-weight: 600;
}
.restock-add { margin-left: auto; background: white; color: var(--accent-ink); border-color: white; }
.restock-add:hover { background: rgba(255,255,255,0.92); color: var(--accent-ink); }
.restock-strip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    margin-top: 14px;
    padding-bottom: 4px;
    scrollbar-width: thin;
}
.restock-strip::-webkit-scrollbar { height: 4px; }
.restock-strip::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 2px; }
.restock-chip {
    background: white;
    color: var(--ink);
    border-radius: var(--radius);
    padding: 8px 10px;
    display: flex;
    gap: 10px;
    align-items: center;
    min-width: 200px;
    flex-shrink: 0;
}
.restock-chip img { width: 36px; height: 36px; border-radius: var(--radius-sm); object-fit: contain; background: var(--surface-2); padding: 2px; flex-shrink: 0; }
.restock-chip-noimg {
    width: 36px; height: 36px; border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--ink-3);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.restock-chip-text { line-height: 1.2; min-width: 0; }
.restock-chip-name { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.restock-chip-qty { font-size: 11px; color: var(--accent); font-weight: 700; }

/* ────── Recent orders ────── */
.recent-section { margin-bottom: 18px; }
.recent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}
.recent-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.05s;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.recent-card:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-1px); }
.recent-date { font-size: 13px; font-weight: 700; color: var(--ink); }
.recent-meta { font-size: 12px; color: var(--ink-3); }
.recent-total { font-size: 16px; font-weight: 700; color: var(--accent); margin-top: 4px; }
.recent-cta { font-size: 12px; color: var(--ink-2); margin-top: 6px; font-weight: 600; }
.recent-cta i { color: var(--accent); }

/* ════════════════ CATALOG ════════════════ */
.catalog { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.catalog-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
}
.catalog-meta { font-size: 12px; color: var(--ink-3); }

/* ───── TABLE VIEW ───── */
.table-wrap { display: block; }
html[data-view="grid"] .table-wrap { display: none; }
.prod-table { width: 100%; border-collapse: collapse; }
.prod-table thead { background: var(--surface-2); border-bottom: 1px solid var(--line); }
.prod-table th {
    text-align: left;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-3);
    letter-spacing: 0.05em;
    padding: 10px 12px;
}
.prod-table th.col-stock, .prod-table th.col-qty { text-align: center; }
.prod-table th.col-price { text-align: right; }
html[data-density="compact"] .prod-table thead th { padding: 6px 12px; font-size: 10px; }

.prod-row { border-bottom: 1px solid var(--line); transition: background 0.1s; }
.prod-row:last-child { border-bottom: none; }
.prod-row:hover { background: var(--surface-2); }
.prod-row.row-in-cart { background: var(--accent-tint); }
.prod-row.row-in-cart:hover { background: #e6fffa; }
.prod-row td { padding: var(--row-pad-y) 12px; vertical-align: middle; }

.col-img { width: calc(var(--row-img) + 24px); padding-left: 18px !important; }
html[data-density="compact"] .col-img { width: 18px; padding-right: 0 !important; }
.row-img {
    width: var(--row-img); height: var(--row-img);
    border-radius: var(--radius-sm);
    object-fit: contain;
    background: var(--surface-2);
    border: 1px solid var(--line);
    padding: 2px;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.05s;
}
.row-img:hover { opacity: 0.85; }
.row-img:active { transform: scale(0.96); }
html[data-density="compact"] .row-img { display: none; }
.row-img-empty { background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: var(--ink-soft); }

.col-name { min-width: 0; }
.row-name { font-weight: 600; color: var(--ink); font-size: 14px; line-height: 1.3; }
.row-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.sku {
    display: inline-block;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-2);
    background: var(--surface-2);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
}
.meta-tag {
    font-size: 11px;
    color: var(--ink-2);
    background: var(--surface-2);
    padding: 1px 7px;
    border-radius: var(--radius-sm);
}

.col-stock { text-align: center; width: 110px; }
.stock-pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid;
    white-space: nowrap;
}
.stock-ok        { color: var(--good); border-color: var(--good-soft); background: var(--good-soft); }
.stock-low       { color: var(--warn); border-color: var(--warn-soft); background: var(--warn-soft); }
.stock-out       { color: var(--bad);  border-color: var(--bad-soft);  background: var(--bad-soft); }
/* Out-of-stock-but-orderable: gold info chip — visually distinct
   from the red 'Out' pill so customers know they CAN still order,
   just with a delivery delay. */
.stock-backorder { color: #8E6E34; border-color: rgba(212,175,55,.45); background: rgba(212,175,55,.12); }
/* Customer-owned prepaid stock — purple to distinguish it clearly
   from public-stock chips. Tells the buyer the units they care about
   are THEIRS (no extra charge at checkout). */
.stock-prepaid   { color: #5B21B6; border-color: rgba(91,33,182,.30); background: rgba(91,33,182,.10); font-weight: 700; }

.col-price { text-align: right; width: 130px; }
.price-cell {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    line-height: 1.15;
}
.price-current { font-weight: 700; color: var(--ink); font-size: 14px; }
.price-current.price-tiered { color: var(--good); }
.price-base { font-size: 11px; color: var(--ink-3); text-decoration: line-through; }
.price-caption {
    display: block; font-size: 10px; color: var(--ink-3);
    font-weight: 500; letter-spacing: 0.01em;
}

/* Strikethrough original price + "−10%" badge for signed-in customers
   whose CustomerCategoryDiscount / CustomerProductDiscount rule
   applies. The .price-current above already shows the discounted
   figure; .price-original sits next to it for the comparison. */
.price-original {
    display: inline-flex; align-items: center; gap: 4px;
    margin-left: 4px;
    font-size: 11px;
    color: var(--ink-3);
}
.price-original del { color: var(--ink-3); }
.price-discount-badge {
    background: var(--good, #198754); color: #fff;
    padding: 1px 6px; border-radius: 999px;
    font-size: 10px; font-weight: 700;
}

/* '/ pack of N' inline qualifier next to the main price — makes "€4.25"
   read as "€4.25 / pack of 50" so the customer doesn't think 1 piece. */
.pack-label {
    font-size: 10px; color: var(--ink-3); font-weight: 500;
    margin-left: 2px;
}

/* Min order badge — shown above the qty stepper on tile/grid view, or
   inline above the stepper on table view. Subtle yellow chip with an
   info icon so it reads as guidance not warning. */
.min-order-badge {
    display: inline-flex; align-items: center; gap: 0.25rem;
    background: #fff7d6; color: #856404; border-radius: 99px;
    padding: 0.1rem 0.55rem; font-size: 10px; font-weight: 600;
    margin-bottom: 0.35rem; line-height: 1.3;
}
.min-order-badge i { font-size: 11px; }
.min-order-badge small {
    color: #6c757d; font-weight: 400; font-size: 0.85em; margin-left: 0.15rem;
}
.min-order-badge-inline { margin-bottom: 0.2rem; padding: 0 0.35rem; }

/* Cart drawer subtotal — net/VAT/gross breakdown in net mode */
.dtotal-net   { color: var(--ink); }
.dtotal-vat   { color: var(--ink-3); font-weight: 500; }
.dtotal-gross { color: var(--accent, #0d6efd); font-weight: 700; }
.dtotal-sep   { color: var(--ink-soft); margin: 0 0.15rem; font-weight: 400; }
.dtotal-incl  { color: var(--ink-3); font-weight: 400; font-size: 0.85em; }
#drawerTotal small { font-weight: 400; opacity: 0.7; font-size: 0.7em; }
.tier-pill {
    background: var(--accent-tint);
    border: 1px solid var(--accent-soft);
    color: var(--accent);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    transition: background 0.12s;
}
.tier-pill:hover { background: var(--accent-soft); }
.tier-pill i { font-size: 0.65rem; }

.col-qty { width: 160px; text-align: center; }
.qty-stack { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; }
.qty-control {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
    height: 32px;
}
.qty-btn {
    background: transparent;
    border: none;
    width: 30px;
    height: 100%;
    color: var(--ink);
    font-size: 16px;
    font-weight: 600;
    transition: background 0.1s;
}
.qty-btn:hover { background: var(--surface-2); }
.qty-btn:active { background: var(--accent-tint); color: var(--accent); }
.qty-input {
    width: 40px;
    border: none;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    text-align: center;
    font-weight: 700;
    font-size: 13px;
    height: 100%;
    padding: 0;
    color: var(--ink);
    background: transparent;
    outline: none;
    -moz-appearance: textfield;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-input:focus { background: var(--accent-tint); }

.box-chip {
    background: var(--accent-tint);
    border: 1px solid var(--accent-soft);
    color: var(--accent-ink);
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 11px;
    font-weight: 700;
    transition: background 0.12s;
    white-space: nowrap;
}
.box-chip:hover { background: var(--accent-soft); }
.box-chip-qty { color: var(--ink-3); font-weight: 500; margin-left: 2px; }

.col-fav { width: 44px; text-align: center; padding-right: 14px !important; }
.fav-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--ink-soft);
    width: 32px; height: 32px;
    border-radius: var(--radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
    transition: color 0.15s, background 0.12s;
}
.fav-btn:hover { color: var(--fav); background: var(--fav-soft); }
.fav-btn.is-fav { color: var(--fav); background: var(--fav-soft); }

/* Brief flash on scan */
@keyframes rowFlash { 0% { background: var(--warn-soft); } 100% { background: transparent; } }
.prod-row.row-flash { animation: rowFlash 1.2s ease-out; }
.prod-row.row-flash.row-in-cart { animation: none; background: var(--accent-tint); }

/* ───── GRID VIEW ───── */
.grid-wrap { display: none; padding: 16px; }
html[data-view="grid"] .grid-wrap { display: block; }
.prod-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}
.prod-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.prod-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.card-img-wrap {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--surface-2);
    overflow: hidden;
}
.card-img {
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 8px;
    cursor: pointer;
    transition: transform 0.2s;
}
.card-img:hover { transform: scale(1.03); }
.card-img-empty { display: flex; align-items: center; justify-content: center; color: var(--ink-soft); font-size: 2rem; cursor: pointer; }

/* Bottom strip overlay for box/bag SKUs. Shown only when pack_size > 1
   so the small product photo gets translated into the wholesale unit
   the buyer is actually purchasing (e.g. a box of 1000 cups, 20 bags
   of 50 each). Pointer-events disabled so the favorite button and
   image click still work. */
.card-pack-strip {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 22, 0.78);
    color: #fff;
    padding: 6px 8px 7px;
    text-align: center;
    line-height: 1.2;
    pointer-events: none;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.card-pack-strip-main {
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.card-pack-strip-sub {
    font-size: 10px;
    opacity: 0.86;
    margin-top: 1px;
    letter-spacing: 0.02em;
}
.fav-btn-overlay {
    position: absolute;
    top: 8px; right: 8px;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(4px);
}
.card-stock { position: absolute; top: 8px; left: 8px; }

/* Bottom-left price chip on the product image — mirrors the stock
   pill (top-left) and fav heart (top-right) so the three glanceable
   bits all sit on the photo and the card body focuses on name + qty. */
.card-price-overlay {
    position: absolute;
    bottom: 8px; left: 8px;
    background: rgba(255,255,255,0.94);
    backdrop-filter: blur(4px);
    border-radius: 999px;
    padding: 4px 10px;
    font-weight: 700;
    font-size: 14px;
    color: var(--ink);
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.card-price-overlay .price-current { color: inherit; font-weight: 700; }

/* Box-mode tiles have a full-width bottom strip on the image — push the
   price chip above it so the customer always sees the price. */
.card-img-wrap:has(.card-pack-strip) .card-price-overlay {
    bottom: 50px;
}

/* Cart-qty badge on the image — shows how many of this SKU are in the
   cart so the buyer can scan the grid without opening the drawer. Sits
   to the left of the fav heart at top-right. Hidden by default; the
   .row-in-cart class on the parent flips it on. Number is the BOX
   count for box-mode SKUs (matches what the stepper input shows). */
.card-cart-badge {
    position: absolute;
    top: 8px;
    right: 52px;
    background: #dc2626;
    color: #fff;
    min-width: 26px;
    height: 26px;
    border-radius: 999px;
    padding: 0 7px;
    font-size: 12px;
    font-weight: 800;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.22);
    border: 2px solid #fff;
    line-height: 1;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
    z-index: 2;
}
.prod-card.row-in-cart .card-cart-badge { display: inline-flex; }

/* Inline SKU after the product name — clean, dim, mono. Overrides the
   pill styling that .sku gets when it lives in .card-meta / .row-meta. */
.card-name .sku,
.row-name .sku {
    display: inline;
    background: none;
    padding: 0;
    border-radius: 0;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--ink-3);
    margin-left: 4px;
    letter-spacing: 0.01em;
}
.card-name .sku::before,
.row-name .sku::before {
    content: '· ';
    color: var(--ink-soft);
    margin-right: 2px;
}

/* Red Add-to-cart CTA — empty state. The stepper in has-items state is
   styled to look IDENTICAL (same red, same height, same radius, same
   full width) so the customer perceives "the same red button got a
   minus and a plus" rather than "the button disappeared and a new
   stepper showed up". Only the inner content swaps. */
.add-to-cart-btn {
    width: 100%;
    background: #dc2626;
    color: #fff;
    border: 1px solid #dc2626;
    border-radius: var(--radius);
    padding: 0 12px;
    height: 38px;
    font-weight: 700;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s, box-shadow 0.15s;
    font-family: inherit;
    line-height: 1.2;
}
.add-to-cart-btn:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    box-shadow: 0 2px 6px rgba(220,38,38,0.28);
}
.add-to-cart-btn:active { transform: scale(0.98); }
.add-to-cart-btn:focus-visible {
    outline: 2px solid #fca5a5;
    outline-offset: 2px;
}
.add-to-cart-btn:disabled {
    background: #94a3b8;
    border-color: #94a3b8;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}
.add-to-cart-btn i { font-size: 15px; }

/* Dual-mode toggle: hide whichever element doesn't match the current state. */
.card-qty-row[data-state="empty"] .qty-control,
.card-qty-row[data-state="empty"] .box-chip {
    display: none;
}
.card-qty-row[data-state="has-items"] .add-to-cart-btn {
    display: none;
}

/* Stepper styled to mirror the red Add-to-cart button: same red surface,
   same height, same radius, full width. Minus on the left, qty in the
   middle, plus on the right. Hover/active states use translucent white
   so the red identity is preserved. */
.card-qty-row[data-state="has-items"] .qty-control {
    flex: 1;
    height: 38px;
    width: 100%;
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
    border-radius: var(--radius);
}
.card-qty-row[data-state="has-items"] .qty-control:hover {
    box-shadow: 0 2px 6px rgba(220,38,38,0.28);
}
.card-qty-row[data-state="has-items"] .qty-btn {
    flex: 0 0 auto;
    width: 44px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}
.card-qty-row[data-state="has-items"] .qty-btn:hover {
    background: rgba(255,255,255,0.16);
    color: #fff;
}
.card-qty-row[data-state="has-items"] .qty-btn:active {
    background: rgba(255,255,255,0.28);
    color: #fff;
}
.card-qty-row[data-state="has-items"] .qty-input {
    flex: 1;
    color: #fff;
    background: transparent;
    border-left-color: rgba(255,255,255,0.22);
    border-right-color: rgba(255,255,255,0.22);
    font-size: 14px;
    font-weight: 800;
    min-width: 0;
}
.card-qty-row[data-state="has-items"] .qty-input:focus {
    background: rgba(255,255,255,0.12);
}

.card-body { padding: 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-name {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}
.card-meta { display: flex; flex-wrap: wrap; gap: 4px; }
.card-price-row { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }
.card-qty-row { display: flex; align-items: center; gap: 8px; }
/* Table view nests the same wrapper inside .qty-stack — keep its column flow. */
.qty-stack.card-qty-row { flex-direction: column; gap: 5px; align-items: stretch; }
.qty-stack.card-qty-row .add-to-cart-btn { font-size: 12px; padding: 6px 10px; }

/* Sentinel for infinite scroll */
.sentinel { height: 16px; }

/* ════════════════ TOP CART BUTTON ════════════════ */
/* No filled background or border-box: items present is signalled by a
   red badge + continuously pulsing red icon, so a "4-digit" total
   doesn't get squeezed by a chip. */
.appbar-cart-btn {
    position: relative;
    background: transparent;
    border-color: transparent;
    transition: color 0.18s, transform 0.18s;
}
.appbar-cart-btn:hover { background: transparent; }
.appbar-cart-btn.has-items { color: #dc2626; }
.appbar-cart-btn.has-items:hover { color: #b91c1c; background: transparent; }
.appbar-cart-btn.has-items i { animation: cart-pulse-red 1.4s ease-in-out infinite; }
.appbar-cart-badge {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 18px; height: 18px;
    background: #dc2626;
    color: #fff;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    display: flex; align-items: center; justify-content: center;
    padding: 0 5px;
    border: 2px solid var(--surface);
    box-shadow: 0 1px 3px rgba(0,0,0,0.22);
}
.appbar-cart-badge[hidden] { display: none !important; }
@keyframes cart-pulse-red {
    0%, 100% { transform: scale(1);    color: #dc2626; }
    50%      { transform: scale(1.18); color: #ef4444; }
}
@media (prefers-reduced-motion: reduce) {
    .appbar-cart-btn.has-items i { animation: none; }
}

/* ════════════════ DRAWERS / OVERLAYS ════════════════ */
.overlay {
    position: fixed; inset: 0;
    background: rgba(20,30,28,0.45);
    z-index: 70;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s;
}
.overlay.open { opacity: 1; pointer-events: auto; }

.drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 440px; max-width: 92vw;
    background: var(--surface);
    z-index: 80;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.22,1,0.36,1);
    box-shadow: -10px 0 30px rgba(20,30,28,0.16);
}
.drawer.open { transform: translateX(0); }

.drawer-header {
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.drawer-title { font-size: 17px; font-weight: 700; margin: 0; color: var(--ink); }
.drawer-subtitle { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 18px;
    -webkit-overflow-scrolling: touch;
}
.drawer-footer {
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
    background: var(--paper);
    flex-shrink: 0;
    /* Cap the footer so the expanded invoice fields can't push the cart
       body off-screen on short viewports (e.g. mobile keyboard open).
       Internal scroll kicks in once the footer exceeds 70% of the
       drawer height. The body above it still gets at least 30vh. */
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.empty-state { text-align: center; padding: 56px 16px; color: var(--ink-3); }
.empty-icon { font-size: 2.6rem; color: var(--ink-soft); display: block; margin-bottom: 10px; }

/* Cart line item */
.cart-line {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    gap: 12px;
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: 10px;
    align-items: flex-start;
}
.cart-line-img { width: 52px; height: 52px; border-radius: var(--radius-sm); object-fit: contain; background: var(--surface-2); border: 1px solid var(--line); padding: 3px; }
.cart-line-main { min-width: 0; }
.cart-line-name {
    font-weight: 600;
    color: var(--ink);
    font-size: 13px;
    line-height: 1.3;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cart-line-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; font-size: 12px; color: var(--ink-3); }
.cart-line-controls { display: flex; align-items: center; gap: 8px; }
.cart-line-total { font-weight: 700; font-size: 14px; color: var(--ink); white-space: nowrap; align-self: center; }
.cart-line-remove {
    background: transparent;
    border: 1px solid transparent;
    color: var(--bad);
    width: 30px; height: 30px;
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    transition: background 0.12s, border-color 0.12s;
}
.cart-line-remove:hover { background: var(--bad-soft); border-color: #fecaca; }
.qty-control-sm { height: 28px; }
.qty-control-sm .qty-btn { width: 26px; }
.qty-control-sm .qty-input { width: 32px; font-size: 12px; }

.tier-badge {
    background: var(--good-soft);
    color: var(--good);
    border-radius: var(--radius-sm);
    padding: 1px 6px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid var(--good-soft);
}

/* ────── Checkout fields ────── */
.checkout-fields {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    margin-bottom: 12px;
    overflow: hidden;
}
.checkout-summary {
    list-style: none;
    cursor: pointer;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 6px;
}
.checkout-summary::-webkit-details-marker { display: none; }
.checkout-summary::after {
    content: '\f282';
    font-family: 'bootstrap-icons';
    margin-left: auto;
    color: var(--ink-3);
    transition: transform 0.2s;
}
.checkout-fields[open] .checkout-summary::after { transform: rotate(180deg); margin-left: 0; }
.checkout-summary:hover { background: var(--paper); }
.checkout-hint { font-weight: 400; color: var(--ink-3); font-size: 12px; }
.checkout-fields[open] .checkout-hint { display: none; }
.checkout-body { padding: 12px 14px 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }

.field-label { font-size: 12px; font-weight: 600; color: var(--ink-2); margin: 0; }
.field-input {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    font-size: 13px;
    color: var(--ink);
    font-family: var(--font);
    width: 100%;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    resize: vertical;
}
.field-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* Flat Notes block in the cart drawer — always visible, last field
   before subtotal so the customer types after picking pay/invoice. */
.checkout-notes { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }

/* ────── Min order ────── */
.min-order {
    background: var(--warn-soft);
    border: 1px solid #fcd34d;
    border-radius: var(--radius);
    padding: 10px 12px;
    margin-bottom: 10px;
    font-size: 12px;
}
.min-order-row { display: flex; justify-content: space-between; margin-bottom: 6px; }
.min-order-bar { height: 6px; background: rgba(252,211,77,0.5); border-radius: 999px; overflow: hidden; }
.min-order-bar-fill { height: 100%; background: var(--warn); transition: width 0.3s, background 0.2s; }
.min-order-bar-fill.met { background: var(--good); }
.min-order-shortfall { color: var(--warn); font-weight: 700; margin-top: 6px; }

.drawer-totals { display: flex; justify-content: space-between; align-items: center; padding: 4px 2px 12px; font-size: 13px; color: var(--ink-3); }
.drawer-total { font-size: 18px; font-weight: 700; color: var(--ink); }
.drawer-actions { display: flex; gap: 8px; }
.drawer-place { flex: 1; justify-content: center; }

/* ────── Payment-method picker (cart drawer footer) ────── */
.pm-picker { padding: 10px 0 4px; border-top: 1px solid var(--line); margin-top: 6px; }
.pm-picker-label {
    font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px;
}
.pm-picker-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px; }
.pm-tile {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    gap: 4px; padding: 10px 8px;
    border: 1px solid var(--line); border-radius: 10px;
    background: var(--surface); cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.pm-tile input { position: absolute; opacity: 0; pointer-events: none; }
.pm-tile-icon { font-size: 18px; color: var(--ink-3); line-height: 1; }
.pm-tile-label {
    font-size: 11px; font-weight: 600; color: var(--ink);
    text-align: center; line-height: 1.2;
}
.pm-tile:hover { border-color: var(--accent); }
.pm-tile:has(input:checked) {
    border-color: var(--accent);
    background: rgba(212, 175, 55, 0.08);
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.15);
}
.pm-tile:has(input:checked) .pm-tile-icon { color: var(--accent); }
.pm-tile:active { transform: scale(0.98); }
.pm-tile:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Validation highlight for the whole group — applied by submitB2BOrder()
   when the customer tries to place an order without picking a method.
   The animated pulse draws the eye after the smooth-scroll lands; the
   class auto-clears on first tile selection. */
.pm-picker-grid.is-invalid {
    padding: 6px;
    border-radius: 12px;
    box-shadow: 0 0 0 2px rgba(177, 40, 60, 0.18);
    animation: pmInvalidPulse 0.9s ease-out 2;
}
.pm-picker-grid.is-invalid .pm-tile { border-color: #b1283c; }
@keyframes pmInvalidPulse {
    0%   { box-shadow: 0 0 0 2px rgba(177, 40, 60, 0.18); }
    50%  { box-shadow: 0 0 0 6px rgba(177, 40, 60, 0.32); }
    100% { box-shadow: 0 0 0 2px rgba(177, 40, 60, 0.18); }
}

/* ────── Παραστατικό picker (Receipt vs B2B Invoice) ────── */
.invoice-picker { padding: 10px 0 4px; border-top: 1px solid var(--line); margin-top: 6px; }
.invoice-picker-label {
    font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--ink-3); margin: 0 0 6px;
}
.invoice-picker-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.invoice-tile {
    position: relative; cursor: pointer; user-select: none;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 10px 8px; border: 1px solid var(--line); border-radius: 8px;
    background: var(--surface); transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.invoice-tile input { position: absolute; opacity: 0; pointer-events: none; }
.invoice-tile-icon { font-size: 18px; color: var(--ink-3); line-height: 1; }
.invoice-tile-label { font-size: 12px; font-weight: 600; color: var(--ink); }
.invoice-tile-desc { font-size: 10px; color: var(--ink-3); letter-spacing: 0.02em; }
.invoice-tile:hover { border-color: var(--accent); }
.invoice-tile:has(input:checked) {
    border-color: var(--accent);
    background: rgba(212, 175, 55, 0.08);
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.15);
}
.invoice-tile:has(input:checked) .invoice-tile-icon { color: var(--accent); }
.invoice-tile:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

.invoice-fields {
    margin-top: 8px; padding: 12px;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px;
    display: flex; flex-direction: column; gap: 8px;
}
.invoice-fields[hidden] { display: none; }
.invoice-fields-row { display: flex; gap: 8px; flex-wrap: wrap; }
.invoice-field { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.invoice-field-wide { flex: 1 1 100%; }
.invoice-field-narrow { flex: 0 0 90px; }
.invoice-field-label {
    font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ink-3);
    display: flex; align-items: center; gap: 6px;
}
.invoice-field-manage {
    font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--accent); text-decoration: none; margin-left: auto;
}
.invoice-field-manage:hover { text-decoration: underline; }
.req { color: #b1283c; }
.invoice-field input {
    padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px;
    font-size: 13px; background: var(--surface); color: var(--ink);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.invoice-field input:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.15);
}
.invoice-field input.is-invalid {
    border-color: #b1283c;
    box-shadow: 0 0 0 2px rgba(177, 40, 60, 0.12);
}
.invoice-afm-row { display: flex; gap: 4px; align-items: stretch; }
.invoice-afm-row input { flex: 1; }
.invoice-afm-lookup {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 12px; border: 1px solid var(--line); border-radius: 6px;
    background: var(--surface); color: var(--ink-2); cursor: pointer;
    font-size: 14px; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.invoice-afm-lookup:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.invoice-afm-lookup:disabled { opacity: 0.5; cursor: wait; }
.invoice-afm-hint { font-size: 10px; color: var(--ink-3); margin-top: 2px; min-height: 12px; }
.invoice-afm-hint.is-error { color: #b1283c; }
.invoice-afm-hint.is-success { color: #0a6c3a; }

/* ────── Drafts dropdown ────── */
.drafts-wrapper { position: relative; }
.drafts-count-badge { background: var(--accent); color: white; border-radius: 999px; padding: 1px 6px; font-size: 10px; font-weight: 700; min-width: 18px; text-align: center; margin-left: 4px; }
.drafts-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    min-width: 280px;
    max-width: 340px;
    max-height: 360px;
    overflow-y: auto;
    z-index: 100;
    padding: 6px;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}
.drafts-menu.open { visibility: visible; opacity: 1; transform: translateY(0); }
.drafts-menu-item {
    display: flex; align-items: center; gap: 8px;
    width: 100%;
    background: transparent;
    border: none;
    padding: 9px 10px;
    text-align: left;
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-size: 13px;
}
.drafts-menu-item:hover { background: var(--paper); }
.drafts-save { color: var(--accent); font-weight: 600; }
.drafts-list { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
.drafts-empty { padding: 12px; text-align: center; color: var(--ink-3); font-size: 12px; }
.drafts-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.drafts-item:hover { background: var(--paper); }
.drafts-item-main { flex: 1; min-width: 0; }
.drafts-item-name { font-weight: 600; color: var(--ink); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drafts-item-meta { font-size: 11px; color: var(--ink-3); }
.drafts-item-delete {
    background: transparent;
    border: 1px solid transparent;
    color: var(--ink-soft);
    width: 28px; height: 28px;
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
}
.drafts-item-delete:hover { color: var(--bad); background: var(--bad-soft); border-color: #fecaca; }

/* ────── Product detail drawer ────── */
.drawer-detail .drawer-body { padding: 0 0 16px; }
.detail-hero {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--surface-2);
    overflow: hidden;
    border-bottom: 1px solid var(--line);
}
.detail-hero-img { width: 100%; height: 100%; object-fit: contain; padding: 16px; display: block; }
.detail-hero-empty { display: flex; align-items: center; justify-content: center; color: var(--ink-soft); font-size: 3rem; }
.detail-hero-overlay {
    position: absolute;
    bottom: 12px; left: 12px;
}
.detail-name { font-size: 18px; font-weight: 700; margin: 16px 18px 6px; color: var(--ink); line-height: 1.3; }
.detail-price-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px 14px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 14px;
}
.detail-price { font-size: 22px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.detail-section { padding: 0 18px; margin-bottom: 16px; }
.detail-section-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 8px;
}
.detail-description { font-size: 14px; color: var(--ink-2); line-height: 1.55; white-space: pre-wrap; }
.detail-facts {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px 16px;
}
.detail-fact { margin: 0; }
.detail-fact dt {
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 2px;
    font-weight: 600;
}
.detail-fact dd { margin: 0; font-size: 13px; color: var(--ink); font-weight: 500; }

.detail-add-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.detail-add-row .qty-control { flex: 0 0 auto; }
.detail-add-row .drawer-place { flex: 1; justify-content: center; }

body.detail-open { overflow: hidden; }

/* ────── Order history drawer ────── */
.recent-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 8px; }
.recent-head .ghost-btn { padding: 6px 10px; font-size: 12px; }

.orders-load-more { width: 100%; margin-top: 8px; justify-content: center; }
body.orders-open { overflow: hidden; }

.order-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    margin-bottom: 10px;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.order-card[open] { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }

.order-card-head {
    list-style: none;
    cursor: pointer;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 12px;
}
.order-card-head::-webkit-details-marker { display: none; }
.order-card-head:hover { background: var(--paper); }
.order-card-meta { min-width: 0; }
.order-card-date { font-size: 13px; font-weight: 700; color: var(--ink); }
.order-card-time { font-weight: 500; color: var(--ink-3); margin-left: 4px; }
.order-card-id { font-size: 11px; color: var(--ink-3); font-family: var(--mono); margin-top: 2px; }

.order-card-stats { display: flex; align-items: center; gap: 10px; }
.order-card-count { font-size: 12px; color: var(--ink-3); }
.order-card-total { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

.order-status {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid;
    white-space: nowrap;
}
.order-status-completed { color: var(--good); border-color: var(--good-soft); background: var(--good-soft); }
.order-status-ready,
.order-status-accepted   { color: var(--accent); border-color: var(--accent-soft); background: var(--accent-tint); }
.order-status-pending,
.order-status-preparing  { color: var(--warn); border-color: var(--warn-soft); background: var(--warn-soft); }

.order-card-chev { color: var(--ink-3); transition: transform 0.2s; }
.order-card[open] .order-card-chev { transform: rotate(180deg); }

.order-card-body {
    padding: 0 14px 14px;
    border-top: 1px solid var(--line);
    background: var(--paper);
}
.order-items { padding-top: 10px; }
.order-item {
    display: grid;
    grid-template-columns: 38px 1fr auto auto;
    gap: 10px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
}
.order-item:last-child { border-bottom: none; }
.order-item-img { width: 38px; height: 38px; border-radius: var(--radius-sm); object-fit: contain; background: var(--surface-2); border: 1px solid var(--line); padding: 2px; }
.order-item-img-empty { display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--ink-soft); }
.order-item-main { min-width: 0; }
.order-item-name { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.order-item-qty { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.order-item-total { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

.order-card-actions { display: flex; justify-content: flex-end; padding-top: 12px; }

/* ────── Camera scanner drawer ────── */
.drawer-scanner-body { padding: 0 !important; display: flex; flex-direction: column; }
.scanner-view {
    position: relative;
    background: #000;
    width: 100%;
    aspect-ratio: 4 / 3;
    /* Some embedded browsers (in-app webviews, older Android) don't honor
       `aspect-ratio` inside a flex column — without a floor the container
       collapses to 0 and you see the white drawer background instead of
       the black scanner background. */
    min-height: 240px;
    overflow: hidden;
}
.scanner-video {
    width: 100%;
    height: 100%;
}
/* Stretch ONLY the <video> element to fill the container. Earlier this
   rule also matched every inner <div> html5-qrcode injects — that clobbers
   the library's own canvas overlay (which it sizes to match the camera
   stream's native resolution) and renders white instead of frames. */
.scanner-video video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}
.scanner-frame {
    position: absolute;
    top: 50%; left: 8%;
    right: 8%;
    transform: translateY(-50%);
    aspect-ratio: 16 / 9;
    border: 2px solid var(--accent);
    border-radius: var(--radius);
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.45);
    pointer-events: none;
}
.scanner-status {
    position: absolute;
    bottom: 10px; left: 10px; right: 10px;
    text-align: center;
    color: white;
    font-size: 12px;
    background: rgba(0,0,0,0.55);
    padding: 6px 10px;
    border-radius: 999px;
    pointer-events: none;
}
/* Always-visible "Search by photo" button under the scanner viewport.
   Disabled until the camera is actually streaming so taps before
   startCameraScan() don't no-op silently. The AI badge marks this as
   a smart fallback for unbarcoded / worn-label products. */
.scanner-visual-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: calc(100% - 32px);
    margin: 12px 16px 0;
    padding: 10px 14px;
    background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
    color: #fff;
    border: 0;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(15, 118, 110, 0.25);
    transition: transform 0.1s, box-shadow 0.15s, opacity 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.scanner-visual-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(15, 118, 110, 0.35);
}
.scanner-visual-btn:active:not(:disabled) { transform: translateY(0); }
.scanner-visual-btn:disabled {
    opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none;
    background: var(--ink-3);
}
.scanner-visual-btn .lbl { letter-spacing: 0.01em; }
.scanner-visual-btn i.bi-image { font-size: 1.1rem; }
.ai-badge {
    display: inline-flex; align-items: center; gap: 3px;
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: 0.66rem; font-weight: 800;
    letter-spacing: 0.06em; text-transform: uppercase;
    padding: 2px 7px; border-radius: 99px;
    border: 1px solid rgba(255, 255, 255, 0.35);
}
.ai-badge i { font-size: 0.7rem; }

.scanner-log {
    padding: 10px 16px;
    max-height: 240px;
    overflow-y: auto;
    background: var(--surface);
}
.scanner-log:empty { padding: 0; }
.scanner-log-line {
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    margin-bottom: 4px;
    font-size: 13px;
    font-family: var(--mono);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.scanner-log-ok  { background: var(--good-soft); color: var(--good); }
.scanner-log-bad { background: var(--bad-soft);  color: var(--bad);  }
body.scanner-open { overflow: hidden; }

/* ────── Quick order ────── */
.quick-result { margin-top: 12px; font-size: 12px; }
.quick-result .ok { color: var(--good); }
.quick-result .bad { color: var(--bad); }

/* ════════════════ TIER POPOVER ════════════════ */
.popover {
    position: fixed;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    z-index: 100;
    min-width: 240px;
    padding: 12px 14px;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}
.popover.open { visibility: visible; opacity: 1; transform: translateY(0); }
.popover-title { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.popover-table { width: 100%; font-size: 13px; border-collapse: collapse; }
.popover-table th { text-align: left; color: var(--ink-3); font-weight: 500; font-size: 11px; text-transform: uppercase; padding: 4px 8px 4px 0; border-bottom: 1px solid var(--surface-2); }
.popover-table td { padding: 5px 8px 5px 0; border-bottom: 1px solid var(--paper); }
.popover-table tr:last-child td { border-bottom: none; }

/* ════════════════ TOASTS ════════════════ */
.toast-container {
    position: fixed;
    top: 80px;
    right: 16px;
    z-index: 110;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.toast {
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 4px solid var(--accent);
    color: var(--ink);
    padding: 10px 14px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    min-width: 240px;
    max-width: 360px;
    transform: translateX(120%);
    opacity: 0;
    transition: transform 0.25s, opacity 0.25s;
    pointer-events: auto;
}
.toast.show { transform: translateX(0); opacity: 1; }
.toast i { font-size: 1.1rem; flex-shrink: 0; }
.toast-success { border-left-color: var(--good); }
.toast-success i { color: var(--good); }
.toast-warning { border-left-color: var(--warn); }
.toast-warning i { color: var(--warn); }
.toast-error { border-left-color: var(--bad); }
.toast-error i { color: var(--bad); }
.toast-info i { color: var(--accent); }

/* ════════════════ MOBILE ════════════════ */
@media (max-width: 991.98px) {
    .layout { grid-template-columns: 1fr; padding: 16px 12px; gap: 16px; }
    .sidebar {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: 280px; max-width: 90vw;
        z-index: 80;
        transform: translateX(-100%);
        transition: transform 0.28s cubic-bezier(0.22,1,0.36,1);
    }
    .sidebar.open { transform: translateX(0); }
    .sidebar-inner {
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        border: none;
        border-right: 1px solid var(--line);
        box-shadow: var(--shadow-lg);
    }
    /* Filters live in the drawer below this breakpoint — the appbar
       button is the only way to open it, so show it whenever the
       sidebar is hidden (phones AND tablets/landscape). !important
       defends against the legacy d-md-none `display:revert` rule
       still in some browser caches. */
    .appbar-mobile-filters { display: inline-flex !important; }
}

@media (max-width: 767.98px) {
    body { padding-bottom: 86px; }
    .appbar-inner { gap: 8px; padding: 0 12px; }
    .appbar-name { display: none; }
    .appbar-search { padding: 0 4px 0 10px; height: 36px; }
    /* Keep the user slot visible — the "Sign in" button (anonymous)
       and the logout icon (authenticated) BOTH belong here. The old
       rule hid the whole slot, which was the reason the Sign in
       button only appeared on landscape orientation. The username
       text inside is already hidden via `.d-none.d-md-block` so
       we don't double-print it on mobile. */
    .appbar-user { display: flex; gap: 6px; }
    .appbar-user .btn-primary-b2b {
        padding: 6px 12px;
        font-size: 13px;
        white-space: nowrap;
    }
    .seg-toggle .seg-btn { padding: 5px 10px; }
    .ghost-btn { padding: 6px 10px; font-size: 12px; }
    .restock-card { padding: 12px 14px; }
    .restock-summary { flex-wrap: wrap; }
    .restock-add { margin-left: 0; margin-top: 6px; }
    .recent-grid { grid-template-columns: repeat(2, 1fr); }

    /* Mobile: drop the <table> entirely, render via the grid (card) markup which uses
       plain divs and has reliable touch behavior. The view toggle still applies:
         data-view="grid"  -> 2-column card grid
         data-view="table" -> 1-column horizontal cards (list feel, image left)
    */
    .table-wrap { display: none !important; }
    .grid-wrap { display: block !important; padding: 12px 0; }
    .prod-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0 12px; }

    /* table-view on mobile -> single-column full-width cards (same as grid, just stacked) */
    html[data-view="table"] .prod-grid { grid-template-columns: 1fr; gap: 10px; }
    html[data-view="table"] .card-img-wrap { aspect-ratio: 16 / 7; }   /* shorter banner */
    html[data-view="table"] .card-name { -webkit-line-clamp: 1; min-height: 0; }

    /* Larger touch targets across the board */
    .qty-control { height: 42px; touch-action: manipulation; }
    .qty-btn { width: 44px; font-size: 19px; touch-action: manipulation; -webkit-tap-highlight-color: rgba(15,118,110,0.18); }
    .qty-input { width: 52px; font-size: 16px; touch-action: manipulation; }
    .box-chip { padding: 8px 12px; font-size: 13px; touch-action: manipulation; }
    .fav-btn { width: 38px; height: 38px; touch-action: manipulation; }

    /* Drawer becomes bottom sheet */
    .drawer {
        top: auto; right: 0; left: 0; bottom: 0;
        width: 100%; max-width: 100%;
        height: 90vh;
        border-radius: 18px 18px 0 0;
        transform: translateY(100%);
    }
    .drawer.open { transform: translateY(0); }
    .drawer-header { padding: 14px 16px; position: relative; }
    .drawer-header::before {
        content: '';
        position: absolute;
        top: 6px; left: 50%;
        transform: translateX(-50%);
        width: 38px; height: 4px;
        background: var(--ink-soft);
        border-radius: 2px;
    }

    /* Cart drawer scrolls as ONE continuous column on mobile. The body
       (items) used to scroll internally with the footer pinned below —
       which squeezed the items list to ~30vh and hid most of it behind
       the pay/invoice pickers. Now: header sticky, items flow naturally,
       order details / pay / invoice / subtotal / Place order sit below
       and the customer scrolls top→bottom to finish the order. */
    .drawer-cart {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .drawer-cart .drawer-header {
        position: sticky;
        top: 0;
        z-index: 5;
        background: var(--surface);
    }
    .drawer-cart .drawer-body {
        flex: 0 0 auto;
        overflow: visible;
    }
    .drawer-cart .drawer-footer {
        flex: 0 0 auto;
        overflow: visible;
        max-height: none;
    }

    .toast-container { top: auto; bottom: 90px; right: 12px; left: 12px; align-items: stretch; }
    .toast { min-width: 0; max-width: 100%; transform: translateY(120%); }
    .toast.show { transform: translateY(0); }
}


/* ─────────────────────────────────────────────────────────────────
   B2B mobile category-landing
   ─────────────────────────────────────────────────────────────────
   On mobile (<= 767.98px) the catalog (table/grid of products) is
   hidden until the customer taps a category card. This replaces the
   off-canvas filter sidebar as the *default* path to find a category.
   On desktop the landing is hidden — the sidebar there is fine.
*/
.b2b-cat-landing { display: none; }
.b2b-cat-back-bar { display: none; }
.b2b-mobile-top  { display: none; }

@media (max-width: 767.98px) {
    /* Default mobile state: show landing, hide catalog. */
    .b2b-cat-landing { display: block; padding: 6px 12px 16px; }
    body.b2b-show-catalog .b2b-cat-landing { display: none; }
    body:not(.b2b-show-catalog) .catalog { display: none; }
    /* Hide the empty-state Login banner / Restock on landing
       so the page is just categories until the user picks one. */
    body:not(.b2b-show-catalog) .login-banner,
    body:not(.b2b-show-catalog) .restock-card { display: none; }
    /* "Recent orders" lives in the left sidebar on mobile (under the
       "Order history" link). The duplicate body block adds noise and
       cost vertical real estate on small screens — hide it everywhere. */
    .recent-section { display: none; }
    /* Back-bar shown only when drilled into a category. */
    body.b2b-show-catalog .b2b-cat-back-bar,
    body.b2b-in-subgrid   .b2b-cat-back-bar { display: flex; }

    /* Smart-restock hero block — mobile-only, always visible (root,
       sub-grid, catalog). Lives outside the b2b-cat-landing now so it
       isn't hidden when the catalog takes over.                       */
    .b2b-mobile-top { display: block; padding: 12px 12px 0; }

    /* In sub-grid mode the back-bar already shows the parent name and
       acts as the header — collapse the "Browse by category" landing-
       head so the cat grid sits directly under the back-bar.          */
    body.b2b-in-subgrid .b2b-cat-landing-head { display: none !important; }
}

.b2b-cat-landing-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 4px 0 12px;
    gap: 12px;
}

.b2b-cat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

/* Cards behave like photo tiles. Every card — owner-curated image,
   product-fallback image, or color-only — uses the same frame so the
   grid reads as one consistent set. The image is full-opacity (NOT
   blended with --cat-color) and a bottom gradient handles text
   legibility. The only thing --cat-color drives is the no-image card
   colour and a thin tint behind the image edges. */
.b2b-cat-card {
    position: relative;
    aspect-ratio: 4 / 3;
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    background: var(--cat-color, #0f766e);
    color: #fff;
    text-align: left;
    padding: 0;
    box-shadow: 0 3px 12px rgba(0,0,0,0.08);
    transition: transform 0.16s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.16s;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    isolation: isolate;
}
.b2b-cat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0,0,0,0.12);
}
.b2b-cat-card:active {
    transform: scale(0.97);
    box-shadow: 0 1px 6px rgba(0,0,0,0.05);
}

/* Image layer — fills the card edge-to-edge, full opacity so a curated
   photo and a product photo look like the same kind of "thumbnail".
   `object-position` biases toward the upper-middle so product subjects
   (which usually live there) don't get cropped. */
.b2b-cat-card-bg {
    position: absolute;
    inset: 0;
    background: var(--cat-color, #0f766e);
    overflow: hidden;
}
.b2b-cat-card-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    display: block;
}
/* Product-fallback shots often have a white or transparent background.
   Full opacity over the cat-color makes the edges pop too hard, so we
   only tint a hairline border via box-shadow inset and leave the image
   itself untouched. The bottom gradient still does the heavy lifting
   for text legibility. */
.b2b-cat-card.has-product-image .b2b-cat-card-bg {
    background: #f8fafc;
}

/* Centered icon for cards with no image at all — keeps visual weight
   consistent so a colour-only tile doesn't read as "broken". */
.b2b-cat-card-icon {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -65%);
    font-size: 2.2rem;
    color: rgba(255, 255, 255, 0.6);
    pointer-events: none;
}

/* Bottom-only dark gradient overlay — keeps the upper half of the
   image clean and gives the text a readable backdrop. */
.b2b-cat-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.65) 100%);
    pointer-events: none;
    z-index: 1;
}

.b2b-cat-card-content {
    position: absolute;
    left: 12px; right: 12px; bottom: 10px;
    z-index: 2;
}
.b2b-cat-card-name {
    font-size: 0.96rem;
    font-weight: 800;
    line-height: 1.15;
    text-shadow: 0 2px 8px rgba(0,0,0,0.55);
    margin: 0 0 2px;
}
.b2b-cat-card-meta {
    font-size: 0.72rem;
    font-weight: 600;
    opacity: 0.92;
    text-shadow: 0 1px 4px rgba(0,0,0,0.55);
}

.b2b-cat-back-bar {
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    position: sticky;
    top: calc(var(--bar-h, 64px));
    z-index: 30;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.b2b-cat-back {
    width: 44px; height: 44px;     /* up from 36 — comfortable touch target */
    border: 0;
    border-radius: 50%;
    background: var(--accent, #0f766e);
    color: #fff;
    font-size: 1.25rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(15,118,110,0.30);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.b2b-cat-back:hover { transform: translateX(-2px); box-shadow: 0 3px 10px rgba(15,118,110,0.40); }
.b2b-cat-back:active { transform: translateX(-1px) scale(0.95); }
.b2b-cat-back-title {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ink, #0f172a);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.b2b-cat-all-btn {
    flex-shrink: 0;
}


/* ─────────────────────────────────────────────────────────────────
   AI Smart-Reorder hero button + modal (mobile landing)
   ─────────────────────────────────────────────────────────────── */
.b2b-reorder-hero {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    border: 0;
    border-radius: 16px;
    padding: 16px 18px;
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
    color: #fff;
    text-align: left;
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.30), inset 0 1px 0 rgba(255,255,255,0.18);
    cursor: pointer;
    overflow: hidden;
    text-decoration: none;
    margin-bottom: 16px;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    transition: transform 0.16s, box-shadow 0.16s;
}
.b2b-reorder-hero:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(239, 68, 68, 0.36), inset 0 1px 0 rgba(255,255,255,0.18);
    color: #fff;
}
.b2b-reorder-hero:active { transform: scale(0.98); }
.b2b-reorder-hero-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 30%, rgba(255,255,255,0.18) 0%, transparent 55%);
    pointer-events: none;
}
.b2b-reorder-hero-icon {
    width: 44px; height: 44px;
    flex-shrink: 0;
    border-radius: 12px;
    background: rgba(255,255,255,0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    z-index: 1;
}
.b2b-reorder-hero-text { flex: 1; min-width: 0; z-index: 1; }
.b2b-reorder-hero-title {
    display: block;
    font-weight: 800;
    font-size: 1rem;
    line-height: 1.2;
    margin-bottom: 2px;
}
.b2b-reorder-hero-sub {
    display: block;
    font-size: 0.78rem;
    opacity: 0.92;
}
.b2b-reorder-hero-arrow {
    flex-shrink: 0;
    font-size: 1.6rem;
    z-index: 1;
    opacity: 0.92;
}
.b2b-reorder-hero-signin {
    background: linear-gradient(135deg, #475569 0%, #1e293b 100%);
    box-shadow: 0 6px 18px rgba(30,41,59,0.20);
}
.b2b-reorder-hero-signin:hover {
    box-shadow: 0 10px 24px rgba(30,41,59,0.26);
}
/* Subtle attention pulse on the hero — gentler than a flash so it
   doesn't read as a notification badge. Pauses on hover/active. */
.b2b-reorder-hero.pulse::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55);
    animation: b2bReorderPulse 2.4s ease-out infinite;
    pointer-events: none;
}
.b2b-reorder-hero:hover.pulse::before,
.b2b-reorder-hero:active.pulse::before { animation-play-state: paused; }
@keyframes b2bReorderPulse {
    0%   { box-shadow: 0 0 0 0   rgba(239, 68, 68, 0.55); }
    70%  { box-shadow: 0 0 0 18px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0   rgba(239, 68, 68, 0); }
}

/* Modal contents */
.b2b-reorder-explainer {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 4px 0 14px;
}
.b2b-reorder-list { display: flex; flex-direction: column; gap: 8px; }
.b2b-reorder-row {
    display: grid;
    grid-template-columns: auto 56px 1fr 64px;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--line, #e5e7eb);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    margin: 0;
}
.b2b-reorder-row:has(.b2b-reorder-check:not(:checked)) {
    opacity: 0.45;
    background: #f9fafb;
}
.b2b-reorder-check {
    width: 20px; height: 20px;
    accent-color: #b91c1c;
    cursor: pointer;
}
.b2b-reorder-thumb {
    width: 56px; height: 56px;
    border-radius: 8px;
    overflow: hidden;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-size: 1.4rem;
}
.b2b-reorder-thumb img { width: 100%; height: 100%; object-fit: cover; }
.b2b-reorder-info { min-width: 0; }
.b2b-reorder-name {
    font-weight: 700;
    font-size: 0.86rem;
    line-height: 1.2;
    color: var(--ink, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.b2b-reorder-meta {
    font-size: 0.72rem;
    color: var(--ink-3, #6b7280);
    margin-top: 2px;
}
.b2b-reorder-qty {
    width: 60px;
    padding: 6px 8px;
    text-align: center;
    border: 1px solid var(--line, #e5e7eb);
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 700;
}
.b2b-reorder-qty:focus {
    outline: 0;
    border-color: var(--accent, #0f766e);
}
.b2b-reorder-extras { margin-top: 18px; }
.b2b-reorder-extras-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ink-2, #4b5563);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.b2b-reorder-extras-title i { color: #f59e0b; }
.b2b-reorder-extra {
    background: #fffbeb;
    border-color: #fde68a;
}

/* ============ PHASE E — VARIANT PICKER (B2B) ============ */
.btn-options-pick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 14px;
    border-radius: 10px;
    background: linear-gradient(180deg, #fbf3da 0%, #efd9a2 100%);
    color: #3d2c08;
    border: 1px solid #d6b76a;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: filter 0.15s, transform 0.05s;
    width: 100%;
}
.btn-options-pick:hover { filter: brightness(1.05); }
.btn-options-pick:active { transform: translateY(1px); }
.prod-row-variable .btn-options-pick { width: auto; }

.meta-tag-variants {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
}

.price-range { font-variant-numeric: tabular-nums; }

.cart-line-variant {
    font-size: 0.75rem;
    color: var(--ink-2, #4b5563);
    margin-bottom: 2px;
}
.cart-line-variant strong { color: var(--ink, #111827); font-weight: 700; }

/* Variant picker modal */
.variant-picker-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 1900;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}
.variant-picker-overlay.open { opacity: 1; pointer-events: auto; }

.variant-picker-modal {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -45%);
    width: min(92vw, 460px);
    max-height: 88vh;
    overflow: auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(2, 6, 23, 0.35);
    z-index: 1901;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s, transform 0.18s;
    padding: 16px 18px 14px;
}
.variant-picker-modal.open {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%);
}

.vp-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.vp-title { display: flex; gap: 12px; align-items: center; }
.vp-img {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    object-fit: cover;
    background: #f4f4f5;
}
.vp-name { font-weight: 800; font-size: 1.02rem; color: #111827; }
.vp-subtitle { font-size: 0.78rem; color: #6b7280; margin-top: 2px; }
.vp-close {
    background: transparent;
    border: 0;
    color: #6b7280;
    font-size: 1.05rem;
    cursor: pointer;
    padding: 4px 6px;
}
.vp-close:hover { color: #111827; }

.vp-axes { display: flex; flex-direction: column; gap: 12px; }
.vp-axis-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    font-weight: 700;
    margin-bottom: 4px;
}
.vp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vp-chip {
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid #d4d4d8;
    background: #fff;
    color: #18181b;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.vp-chip:hover { border-color: #94a3b8; }
.vp-chip-picked {
    background: #18181b;
    color: #fff;
    border-color: #18181b;
}
.vp-chip-oos {
    background: #f4f4f5;
    color: #a1a1aa;
    text-decoration: line-through;
    cursor: not-allowed;
    border-color: #e4e4e7;
}

.vp-footer {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #f3f4f6;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px 12px;
    align-items: center;
}
.vp-priceline { display: flex; flex-direction: column; gap: 2px; }
.vp-price-label { font-size: 0.7rem; text-transform: uppercase; color: #6b7280; letter-spacing: 0.06em; }
.vp-price { font-weight: 800; font-size: 1.15rem; color: #0f172a; font-variant-numeric: tabular-nums; }
.vp-qty { width: 110px; }
.vp-add { grid-column: 1 / -1; padding: 11px 16px; font-weight: 700; }
.vp-add:disabled { opacity: 0.55; cursor: not-allowed; }