/* ============================================================================
   afb2b — Shared component library  (design.css)

   AUTHORITATIVE SOURCES — do not deviate:
     - tokens.css    → the single source of truth for every value
                       (color, size, radius, shadow, duration, type).
     - DESIGN.md §5  → the single source of truth for HOW those tokens combine
                       into components. These recipes are transcribed verbatim.

   RULES (DESIGN.md §1):
   - No hardcoded design values. Every color / size / radius / shadow / duration
     references a token from tokens.css. The only literals below are the
     structural geometry the §5 recipes specify verbatim (app-shell sizing,
     avatar box, 100%, 100vh, and the `/1` line-heights in font shorthands).
     If a missing value is needed, add a token in tokens.css — never inline one.
   - These classes are the ONLY way screens get styled. Compose screens from
     them; do not restyle ad hoc per screen.
   - tokens.css MUST load before this file (wired globally in
     resources/views/layouts/head-css.blade.php, ahead of @stack('css')).
   ========================================================================== */

/* ----- App shell --------------------------------------------------------- */
.app        { background: var(--bg-canvas); min-block-size: 100vh; }
.sidebar    { background: var(--sidebar-bg); border-inline-end: 1px solid var(--border);
              inline-size: 248px; padding: var(--space-6); }
.topbar     { background: var(--surface); border-block-end: 1px solid var(--border);
              padding-inline: var(--space-9); block-size: 60px; display: flex;
              align-items: center; }

/* ----- Card / panel ------------------------------------------------------ */
.card       { background: var(--surface); border: 1px solid var(--card-border-warm);
              border-radius: var(--card-radius-console); box-shadow: var(--card-shadow-flat);
              padding: var(--space-7); }

/* ----- Nav item (design-system component) --------------------------------
   RENAMED from .nav-item -> .ds-nav-item: .nav-item is a Bootstrap class used by
   the sidebar, navbar, agent-nav, footer and tab navs, so a bare .nav-item rule
   here hijacked all of them on every page that loads design-system.css. */
.ds-nav-item   { display: flex; align-items: center; gap: var(--space-3);
              padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
              font: var(--fw-semibold) var(--fs-base)/1 var(--font-sans);
              color: var(--text-secondary); transition: var(--transition-base); cursor: pointer; }
.ds-nav-item:hover   { background: var(--surface-hover); color: var(--text); }
.ds-nav-item.active  { background: var(--accent-tint-2); color: var(--accent); }

/* ----- Buttons ----------------------------------------------------------- */
.btn          { font: var(--fw-semibold) var(--fs-base)/1 var(--font-sans);
                padding: var(--space-4) var(--space-8); border-radius: var(--radius-sm);
                border: 1px solid transparent; cursor: pointer;
                transition: background-color var(--dur-normal) var(--ease),
                            box-shadow var(--dur-normal) var(--ease),
                            color var(--dur-normal) var(--ease),
                            transform var(--dur-fast) var(--ease); }
.btn:active        { transform: scale(0.97); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn-primary  { background: var(--accent); color: var(--text-on-accent);
                box-shadow: var(--shadow-accent); }
.btn-primary:hover  { background: var(--accent-hover); box-shadow: var(--shadow-accent-lg); }
.btn-primary:active { background: var(--accent-pressed); }
.btn-secondary { background: var(--surface); color: var(--text);
                 border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--surface-hover); }
.btn-ghost    { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--surface-hover); color: var(--text); }

/* ----- Input ------------------------------------------------------------- */
.input        { font: var(--fw-medium) var(--fs-base)/1 var(--font-sans);
                color: var(--text); background: var(--surface);
                border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
                padding: var(--space-4) var(--space-6); transition: var(--transition-base); }
.input::placeholder { color: var(--text-muted); }
.input:focus  { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }

/* ----- Data table -------------------------------------------------------- */
.table              { inline-size: 100%; border-collapse: collapse; background: var(--surface);
                      border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.table th           { text-align: start; font: var(--fw-semibold) var(--fs-micro)/1 var(--font-sans);
                      letter-spacing: var(--tracking-label); text-transform: uppercase;
                      color: var(--text-muted); padding: var(--space-4) var(--space-6);
                      border-block-end: 1px solid var(--border); }
.table td           { font-size: var(--fs-sm); color: var(--text-secondary);
                      padding: var(--space-4) var(--space-6); border-block-end: 1px solid var(--border-faint); }
.table tr:last-child td { border-block-end: none; }
.table tbody tr:hover   { background: var(--surface-hover); }

/* ----- Status pill ------------------------------------------------------- */
.pill        { display: inline-flex; align-items: center; gap: var(--space-2);
               font: var(--fw-semibold) var(--fs-xs)/1 var(--font-sans);
               padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); }
.pill-success { color: var(--success-fg); background: var(--success-bg); }
.pill-warning { color: var(--warning-fg); background: var(--warning-bg); }
.pill-danger  { color: var(--danger-fg);  background: var(--danger-bg); }
.pill-info    { color: var(--info-fg);     background: var(--info-bg); }

/* ----- Filter chip / segmented control ----------------------------------- */
.chip         { font: var(--fw-semibold) var(--fs-sm)/1 var(--font-sans);
                color: var(--text-secondary); background: var(--surface-sunken);
                border: 1px solid var(--border); border-radius: var(--radius-pill);
                padding: var(--space-2) var(--space-5); cursor: pointer;
                transition: background-color var(--dur-normal) var(--ease),
                            color var(--dur-normal) var(--ease),
                            border-color var(--dur-normal) var(--ease),
                            transform var(--dur-fast) var(--ease); }
.chip:active        { transform: scale(0.97); }
.chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.chip.active  { background: var(--accent); color: var(--text-on-accent); border-color: transparent; }

/* ----- Avatar ------------------------------------------------------------ */
.avatar      { inline-size: 32px; block-size: 32px; border-radius: var(--radius-full);
               background: var(--accent-tint); color: var(--accent);
               display: grid; place-items: center; font: var(--fw-bold) var(--fs-xs) var(--font-sans); }

/* ----- Mono numerals -----------------------------------------------------
   Required by DESIGN.md §1.4 (IDs, codes, dates, amounts, counts, percentages
   must be mono). NOT a §5 component recipe — added per rule 4 as the single
   permitted utility because §5 ships no mono helper. Token-only. */
.num         { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ----- Metric card (KPI) — DESIGN.md §2 metric typography ----------------- */
.kpi-grid    { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
               gap: var(--space-4); margin-block-end: var(--space-7); }
.kpi-label   { font: var(--fw-semibold) var(--fs-micro)/1 var(--font-sans);
               text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-muted); }
.kpi-value   { font: var(--fw-heavy) var(--fs-3xl)/1.05 var(--font-mono);
               color: var(--text); margin-block: var(--space-2); font-variant-numeric: tabular-nums;
               letter-spacing: var(--tracking-figure); }
.kpi-sub     { font-size: var(--fs-xs); color: var(--text-muted); }

/* ----- At-risk band — DESIGN.md §3 danger tokens ------------------------- */
.risk-title  { font: var(--fw-bold) var(--fs-md)/1.2 var(--font-sans); color: var(--danger-fg);
               text-transform: uppercase; letter-spacing: var(--tracking-label); margin-block-end: var(--space-5); }
.risk-grid   { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); }
.risk-item   { display: flex; flex-direction: column; gap: var(--space-2);
               background: var(--danger-bg); border: 1px solid var(--danger-border);
               border-radius: var(--radius-sm); padding: var(--space-5); }
.risk-item__name { font: var(--fw-semibold) var(--fs-sm)/1.2 var(--font-sans); color: var(--text); }
.risk-item__meta { font-size: var(--fs-xs); color: var(--text-muted); }
.risk-item__fig  { display: flex; justify-content: space-between; gap: var(--space-4);
                   font-size: var(--fs-xs); color: var(--text-secondary); }
.risk-bar    { block-size: var(--space-1); inline-size: 100%; border-radius: var(--radius-pill);
               background: var(--danger-fg); margin-block-start: var(--space-1); }

/* ----- Card grid (list⇄grid view layouts) ------------------------------- */
.card-grid   { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
               gap: var(--space-5); }

/* ----- Data card (entity card for grid views) --------------------------- */
.data-card        { display: flex; flex-direction: column; gap: var(--space-4);
                    background: var(--surface); border: 1px solid var(--border);
                    border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
                    padding: var(--space-7);
                    transition: box-shadow var(--dur-normal) var(--ease),
                                transform var(--dur-normal) var(--ease);
                    animation: card-fade-in var(--dur-normal) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .data-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
}
@keyframes card-fade-in { from { opacity: 0; transform: translateY(6px); }
                          to   { opacity: 1; transform: translateY(0); } }
.data-card__head  { display: flex; align-items: flex-start; gap: var(--space-4); }
.data-card__logo  { inline-size: 44px; block-size: 44px; border-radius: var(--radius-sm);
                    object-fit: cover; background: var(--surface-sunken); flex: none; }
/* Logos (brands, etc.) must show in full, not be cropped — fit inside on white. */
.data-card__logo--contain { object-fit: contain; background: var(--surface); padding: 3px; }
.data-card__logo--fallback { display: grid; place-items: center;
                    background: var(--accent-tint); color: var(--accent);
                    font: var(--fw-bold) var(--fs-md) var(--font-sans); }
.data-card__headtext { display: flex; flex-direction: column; gap: var(--space-1);
                    min-inline-size: 0; }
.data-card__title { font: var(--fw-semibold) var(--fs-md)/var(--lh-tight) var(--font-sans);
                    color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.data-card__sub   { font-size: var(--fs-xs); color: var(--text-muted);
                    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.data-card__status { margin-inline-start: auto; flex: none; }
.data-card__row   { display: flex; gap: var(--space-4); font-size: var(--fs-sm); }
.data-card__label { color: var(--text-muted); flex: none; min-inline-size: 52px; }
.data-card__value { color: var(--text-secondary); overflow: hidden;
                    text-overflow: ellipsis; white-space: nowrap; }
.data-card__foot  { display: flex; align-items: center; justify-content: space-between;
                    gap: var(--space-4); padding-block-start: var(--space-4);
                    border-block-start: 1px solid var(--border-faint); }

/* ----- Skeleton shimmer (loading placeholders) -------------------------- */
.skeleton        { position: relative; overflow: hidden;
                   background: var(--surface-sunken); border-radius: var(--radius-sm); }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
                   background: linear-gradient(90deg, transparent, var(--surface), transparent);
                   animation: skeleton-shimmer 1.2s var(--ease) infinite; }
[dir="rtl"] .skeleton::after { animation-direction: reverse; }
@keyframes skeleton-shimmer { to { transform: translateX(100%); } }

/* ----- Reduced motion: keep meaning, drop movement ---------------------- */
@media (prefers-reduced-motion: reduce) {
  .data-card        { animation: none; }
  .data-card:hover  { transform: none; }
  .btn:active,
  .chip:active      { transform: none; }
  .skeleton::after  { animation: none; }
  .rs-switch__knob,
  .rs-util__fill    { transition: none; }
}

/* ===== Resellers Studio ===== */

/* ----- Gold buttons (Studio primary is gold, not clay) -------------------- */
.btn-gold {
  background: var(--accent-gold);
  color: var(--text);
  box-shadow: var(--shadow-gold);
}
.btn-gold:hover  { background: var(--accent-gold-hover); }
.btn-gold:active { transform: scale(0.97); }
.btn-gold:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-gold-ring); }

.btn-sync {
  background: var(--surface);
  color: var(--accent-gold-text);
  border: 1px solid var(--accent-gold-ring);
}
.btn-sync:hover { background: var(--accent-gold-soft); }

/* ----- Toolbar / filter band (Console tinted surface) --------------------- */
.rs-toolbar { background: var(--toolbar-bg); }

/* ----- Toolbar count chip ------------------------------------------------- */
.rs-chip-count {
  display: inline-flex;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--accent-gold-soft);
  color: var(--accent-gold-text);
  font: var(--fw-bold) var(--fs-xs)/1 var(--font-sans);
}

/* ----- Search field (leading icon) ---------------------------------------- */
.rs-search {
  position: relative;
  flex: 1 1 220px;
  min-inline-size: 200px;
}
.rs-search__icon {
  position: absolute;
  inset-inline-start: var(--space-4);
  inset-block-start: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
}
.rs-search__input {
  inline-size: 100%;
  padding-block: var(--space-4);
  padding-inline-start: var(--space-10);
  padding-inline-end: var(--space-6);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-sunken);
  color: var(--text);
  font-size: var(--fs-sm);
}
.rs-search__input::placeholder { color: var(--text-muted); }
.rs-search__input:focus {
  outline: none;
  border-color: var(--accent-gold);
  box-shadow: 0 0 0 3px var(--accent-gold-ring);
}

.rs-select {
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}

/* Make select2 on Back in Stock page match rs-select style */
#bistAgent + .select2-container--bootstrap-5 {
  max-inline-size: 200px !important;
}
#bistAgent + .select2-container--bootstrap-5 .select2-selection {
  padding: var(--space-4) var(--space-6) !important;
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--border) !important;
  background: var(--surface-sunken) !important;
  color: var(--text-secondary) !important;
  font-size: var(--fs-sm) !important;
  min-height: auto !important;
  height: auto !important;
}
#bistAgent + .select2-container--bootstrap-5 .select2-selection .select2-selection__rendered {
  color: var(--text-secondary) !important;
  font-size: var(--fs-sm) !important;
  line-height: normal !important;
  padding: 0 !important;
}
#bistAgent + .select2-container--bootstrap-5 .select2-selection .select2-selection__arrow {
  height: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
#bistAgent + .select2-container--bootstrap-5 .select2-selection .select2-selection__clear {
  color: var(--text-secondary) !important;
  font-size: var(--fs-sm) !important;
}
#bistAgent + .select2-container--bootstrap-5.select2-container--open .select2-selection,
#bistAgent + .select2-container--bootstrap-5.select2-container--focus .select2-selection {
  border-color: var(--accent-gold) !important;
  box-shadow: 0 0 0 3px var(--accent-gold-ring) !important;
}

/* ----- Bulk action bar ---------------------------------------------------- */
.rs-bulk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-8);
  background: var(--accent-gold-soft);
  border-block-end: 1px solid var(--border);
}
.rs-bulk__count {
  font: var(--fw-semibold) var(--fs-sm)/1 var(--font-sans);
  color: var(--accent-gold-text);
}
.rs-bulk-btn {
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent-gold-border);
  background: var(--surface);
  color: var(--accent-gold-text);
  font: var(--fw-semibold) var(--fs-xs)/1 var(--font-sans);
  cursor: pointer;
}
.rs-bulk-btn:hover { background: var(--surface-raised); }
.rs-bulk-btn--danger {
  border-color: var(--danger-border);
  color: var(--danger-fg-strong);
}
.rs-bulk-btn--danger:hover { background: var(--danger-bg); }
.rs-bulk-btn--plain {
  border-color: transparent;
  background: transparent;
  color: var(--text-muted);
}

/* ----- CSS-grid table ----------------------------------------------------- */
.rs-table {
  display: grid;
  inline-size: 100%;
  min-inline-size: 1370px;   /* widened so mono IQD figures + the 96px risk bar never truncate (scrolls on narrow panels) */
}
.rs-table__scroll { overflow-x: auto; }
.rs-table__head,
.rs-table__row {
  display: grid;
  /* checkbox · name · shop · code · total credit · credit limit · current debt(bar+figure) · join · status · actions */
  grid-template-columns: 44px minmax(160px,1.5fr) minmax(120px,1fr) minmax(100px,.8fr) minmax(160px,1fr) minmax(165px,1.1fr) minmax(240px,1.8fr) minmax(120px,.9fr) minmax(150px,1fr) 110px;
  align-items: center;
}

/* Console: warm header band */
.rs-table__head { background: var(--table-header-bg); }

.rs-th {
  padding: var(--space-4) var(--space-6);
  font: var(--fw-bold) var(--fs-micro)/1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--table-header-text);
  border-block-end: 1px solid var(--card-border-warm);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.rs-th--end { justify-content: flex-end; }

.rs-sort {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.rs-sort__arrow { font-size: var(--fs-xs); color: var(--text-faint); }
.rs-sort.active .rs-sort__arrow { color: var(--accent-gold); }

.rs-table__row {
  padding-block: 0;                       /* density comes from cell padding (Console 11px) */
  font-size: var(--fs-sm);                /* Console 13px */
  color: var(--text-secondary);
  background: var(--surface);
  cursor: pointer;
  border-block-end: 1px solid var(--row-border-warm);
}
/* Console zebra; specificity-balanced so hover/selected win in source order */
.rs-table__row:nth-child(even) { background: var(--row-zebra-bg); }
.rs-table__row:hover { background: var(--row-hover-warm); }
.rs-table__row.rs-table__row--selected { background: var(--accent-gold-soft); }

.rs-td {
  padding: 11px 16px;                      /* Console denser cell padding */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Control cell (checkbox): center the control, no padding/ellipsis (the 44px
   column is too narrow for 16px padding + a checkbox → would render a stray "…"). */
.rs-td--check {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-block: 0;
  padding-inline: var(--space-6);          /* 16px — aligns with the header checkbox */
  overflow: visible;
  text-overflow: clip;
}
.rs-td--end { justify-content: flex-end; text-align: end; }
.rs-td--num { font-variant-numeric: tabular-nums; }

/* ----- Name cell: avatar + name/manager ----------------------------------- */
.rs-name {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.rs-avatar {
  inline-size: 34px;
  block-size: 34px;
  border-radius: var(--radius-sm);
  background: var(--accent-gold-translucent);
  color: var(--accent-gold-text);
  display: grid;
  place-items: center;
  font: var(--fw-bold) var(--fs-xs) var(--font-sans);
  flex: none;
}
.rs-name__main {
  font: var(--fw-bold) var(--fs-sm)/1.2 var(--font-sans);
  color: var(--text);
}
.rs-name__sub {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* ----- Risk dot (for table debt column) ----------------------------------- */
.rs-risk-dot {
  inline-size: var(--space-2);
  block-size: var(--space-2);
  border-radius: var(--radius-full);
  flex: none;
}
.rs-risk--healthy { background: var(--risk-healthy-fg); }
.rs-risk--near    { background: var(--risk-near-fg); }
.rs-risk--over    { background: var(--risk-over-fg); }

/* ----- Risk progress bar (Console: 96x5 track + risk-color fill) ---------- */
.rs-risk-bar {
  inline-size: 96px;
  block-size: 5px;
  border-radius: 3px;
  background: var(--risk-track);
  overflow: hidden;
  flex: none;
}
.rs-risk-bar__fill { display: block; block-size: 100%; border-radius: 3px; }
.rs-risk-fill--healthy { background: var(--risk-healthy-fg); }
.rs-risk-fill--near    { background: var(--risk-near-fg); }
.rs-risk-fill--over    { background: var(--risk-over-fg); }

/* ----- Risk pills — EXACT handoff hex (decoupled from Bootstrap .pill-danger) -- */
.pill.rs-pill--healthy { color: var(--risk-healthy-fg); background: var(--risk-healthy-bg); }
.pill.rs-pill--near    { color: var(--risk-near-fg);    background: var(--risk-near-bg); }
.pill.rs-pill--over    { color: var(--risk-over-fg);    background: var(--risk-over-bg); }

/* ----- Status switch ------------------------------------------------------ */
.rs-switch {
  position: relative;
  inline-size: 40px;
  block-size: 22px;
  border-radius: var(--radius-pill);
  background: var(--border-strong);
  border: none;
  cursor: pointer;
  transition: background-color var(--dur-normal) var(--ease);
  flex: none;
}
.rs-switch--on { background: var(--accent-gold); }

.rs-switch__knob {
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 2px;
  inline-size: 18px;
  block-size: 18px;
  border-radius: var(--radius-full);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  transition: inset-inline-start var(--dur-normal) var(--ease);
}
.rs-switch--on .rs-switch__knob { inset-inline-start: 20px; }

.rs-status-text--on  { color: var(--success-fg); }
.rs-status-text--off { color: var(--text-muted); }

/* ----- Action icon buttons ------------------------------------------------ */
.rs-icon-btn {
  inline-size: 34px;
  block-size: 34px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--accent-gold-text);
}
.rs-icon-btn:hover { background: var(--accent-gold-soft); }
.rs-icon-btn--danger {
  color: var(--danger-fg-strong);
  border-color: var(--danger-border);
}
.rs-icon-btn--danger:hover { background: var(--danger-bg); }

/* ----- Empty state -------------------------------------------------------- */
.rs-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-10) var(--space-6);
  color: var(--text-muted);
  font-size: var(--fs-base);
}

/* ----- Pager: gold active page pill (scoped to rs-pager) ------------------ */
.rs-pager .pagination .active > .page-link {
  background: var(--accent-gold) !important;
  border-color: var(--accent-gold) !important;
}

/* ----- Detail drawer (Bootstrap offcanvas-end skin) ----------------------- */
.rs-drawer.offcanvas {
  inline-size: 440px;
  max-inline-size: 92vw;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.rs-drawer__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-7) var(--space-8);
  border-block-end: 1px solid var(--border);
}
.rs-drawer__avatar {
  inline-size: 52px;
  block-size: 52px;
  border-radius: var(--radius-md);
  background: var(--accent-gold-translucent);
  color: var(--accent-gold-text);
  display: grid;
  place-items: center;
  font: var(--fw-heavy) var(--fs-lg) var(--font-sans);
}
.rs-drawer__name {
  font: var(--fw-heavy) var(--fs-lg)/1.2 var(--font-sans);
  color: var(--text);
}
.rs-drawer__sub {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.rs-drawer__body {
  padding: var(--space-7) var(--space-8);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.rs-status-block {
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ----- Credit utilization bar --------------------------------------------- */
.rs-util__track {
  block-size: var(--space-2);
  inline-size: 100%;
  background: var(--surface-sunken);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.rs-util__fill {
  block-size: 100%;
  border-radius: var(--radius-pill);
  transition: inline-size var(--dur-normal) var(--ease);
}

/* ----- Facts grid --------------------------------------------------------- */
.rs-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
.rs-fact {
  background: var(--row-zebra-bg);          /* warm #faf8f5 fact-tile tint (Console) */
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}
.rs-fact__label {
  font: var(--fw-semibold) var(--fs-micro)/1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
}
.rs-fact__value {
  font: var(--fw-semibold) var(--fs-sm) var(--font-sans);
  color: var(--text);
  margin-block-start: var(--space-1);
}

.rs-drawer__foot {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-8);
  border-block-start: 1px solid var(--border);
}

/* RTL: mirror the reseller detail drawer to the inline-end (left in RTL) */
[dir="rtl"] .rs-drawer.offcanvas-end {
  inset-inline-end: 0;
  inset-inline-start: auto;
  inset-block: 0;
  transform: translateX(-100%);
}
[dir="rtl"] .rs-drawer.offcanvas-end.show { transform: none; }

/* ===== List views — view toggle + sort control (system default) ===== */
.view-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.view-toggle__btn {
  display: grid;
  place-items: center;
  inline-size: 30px;
  block-size: 28px;
  border: none;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--fs-base);
  transition: background-color var(--dur-normal) var(--ease), color var(--dur-normal) var(--ease);
}
.view-toggle__btn:hover { color: var(--text); }
.view-toggle__btn.is-active { background: var(--accent); color: var(--accent-contrast); }
.view-toggle__btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.view-sort { display: inline-flex; align-items: center; gap: var(--space-2); }
.view-sort__label { margin: 0; font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; }
.view-sort__dir {
  display: grid;
  place-items: center;
  inline-size: 34px;
  block-size: 34px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
}
.view-sort__dir:hover { background: var(--surface-hover); }
.view-sort__dir:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ===== Brands grid card — logo-hero layout (Brands screen only) =============
   Composes on .data-card (card-grid item + hover/animation) but overrides the
   chrome to a banner-led layout. Soft stat/fallback tints are raw (no token). */
.brand-card {
  padding: 0;
  gap: 0;
  border: 1px solid #e8e1d6;
  border-radius: 18px;
  box-shadow: 0 4px 18px rgba(70, 52, 32, .06);
  overflow: hidden;
}
.brand-card__banner {
  block-size: 112px;
  display: grid;
  place-items: center;
  padding: 18px;
  background: var(--row-zebra-bg);                 /* #faf8f5 */
  border-block-end: 1px solid var(--row-hairline); /* #f0e9df */
}
.brand-card__logo {
  max-block-size: 56px;
  max-inline-size: 100%;
  object-fit: contain;
  object-position: center;
}
.brand-card__fallback {
  inline-size: 62px;
  block-size: 62px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--accent-tint);                  /* #FCEFCF */
  border: 1px solid #F1DDA0;
  color: #A06E00;
  font-weight: 800;
  font-size: 24px;
}
.brand-card__body { padding: 16px 18px 18px; }
.brand-card__name { font: 800 16px/1.2 var(--font-sans); color: var(--text); }
.brand-card__slug { font: 400 12px/1 var(--font-mono); color: var(--text-faint); margin-block-start: 3px; }
.brand-card__stats { display: flex; gap: 10px; margin-block-start: 14px; }
.brand-card__stat { flex: 1; border-radius: 12px; padding: 9px 12px; }
.brand-card__stat-label { font: 600 10.5px/1.2 var(--font-sans); text-transform: uppercase; letter-spacing: .4px; }
.brand-card__stat-value { font: 600 20px/1.1 var(--font-mono); margin-block-start: 4px; }
.brand-card__stat--active   { background: #F3F8EC; border: 1px solid #E4EFD6; }
.brand-card__stat--active .brand-card__stat-label { color: #7C9A56; }
.brand-card__stat--active .brand-card__stat-value { color: #5B8A2A; }
.brand-card__stat--inactive { background: #F7F4EF; border: 1px solid #EEE7DD; }
.brand-card__stat--inactive .brand-card__stat-label { color: var(--text-faint); }
.brand-card__stat--inactive .brand-card__stat-value { color: #78716c; }
/* Resellers assigned / total — full-width tile, gold-tinted, "X / Y" */
.brand-card__stat--full { margin-block-start: 10px; }
.brand-card__stat--resellers { background: var(--accent-tint); border: 1px solid #F1DDA0; }
.brand-card__stat--resellers .brand-card__stat-label { color: var(--accent-gold-text); }
.brand-card__stat--resellers .brand-card__stat-value { color: var(--accent-gold-text); }
.brand-card__stat-total { color: var(--text-faint); font-weight: 500; }
/* Display order — the admin's manual sort number, and the cached sales value
   that orders every brand without one. */
.brand-card__stat--order { background: #EEF2F7; border: 1px solid #DCE5EF; }
.brand-card__stat--order .brand-card__stat-label { color: #6B7C93; }
.brand-card__stat--order .brand-card__stat-value { color: #41566F; }
.brand-card__stat--sales { background: #F2F0FA; border: 1px solid #E4E0F2; }
.brand-card__stat--sales .brand-card__stat-label { color: #7C74A6; }
/* Smaller than the other tiles: a money figure is far longer than a count and
   would otherwise wrap out of the tile. */
.brand-card__stat--sales .brand-card__stat-value { color: #5A5286; font-size: 14px; }
.brand-card__footer {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-block-start: 16px;
  padding-block-start: 14px;
  border-block-start: 1px solid var(--row-hairline);
}
.brand-card__act {
  inline-size: 34px;
  block-size: 34px;
  display: grid;
  place-items: center;
  border: 1px solid #eee7dd;
  border-radius: 10px;
  background: var(--surface);
  color: #79716b;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--dur-normal) var(--ease),
              color var(--dur-normal) var(--ease),
              border-color var(--dur-normal) var(--ease);
}
.brand-card__act:hover { background: #faf7f2; color: var(--text); }
.brand-card__act--danger:hover { background: #fdecea; color: #d1402f; border-color: #f6d5cf; }
.brand-card__act:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ===== Categories page — KPI accents, grid card, reseller-access metric ===== */
.kpi-value--green { color: #5B8A2A; }
.kpi-value--gold  { color: #A06E00; }

/* Toolbar */
.cat-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-block-end: var(--space-6); }
.cat-toolbar__spacer { flex: 1; }
.cat-toolbar__count { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; }
.cat-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4);
            margin-block-start: var(--space-6); padding-block-start: var(--space-5); border-block-start: 1px solid var(--row-hairline); }
.cat-foot-note { display: flex; align-items: center; gap: 7px; font-size: var(--fs-xs); color: var(--text-muted); }
.cat-foot-note svg { width: 16px; height: 16px; color: #A06E00; flex: none; }
.cat-foot-note b { color: var(--text); font-weight: 700; }
.cat-empty { grid-column: 1 / -1; text-align: center; padding: var(--space-9); color: var(--text-muted); }

/* Grid card */
.cat-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid #e8e1d6;
            border-radius: 18px; box-shadow: 0 4px 18px rgba(70,52,32,.06); overflow: hidden;
            transition: box-shadow .15s var(--ease), transform .15s var(--ease); }
.cat-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(70,52,32,.10); }
.cat-card__body { padding: 18px; }
.cat-card__head { display: flex; align-items: center; gap: 12px; }
.cat-card__icon { inline-size: 46px; block-size: 46px; border-radius: 12px; flex: none; display: grid; place-items: center;
                  background: var(--accent-tint); border: 1px solid #F1DDA0; color: #A06E00; overflow: hidden; }
.cat-card__icon img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.cat-card__icon svg { width: 22px; height: 22px; }
.cat-card__headtext { min-inline-size: 0; flex: 1; }
.cat-card__name { font: 800 16px/1.2 var(--font-sans); color: var(--text); }
.cat-card__slug { font: 400 12px/1 var(--font-mono); color: var(--text-faint); margin-top: 3px;
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-pill { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; padding: 4px 10px; border-radius: 999px;
            font-size: 11px; font-weight: 600; }
.cat-pill svg { width: 13px; height: 13px; }
.cat-pill--remote { background: var(--accent-tint); color: #A06E00; border: 1px solid #F1DDA0; }
.cat-pill--local { background: #F7F4EF; color: #78716c; border: 1px solid #EEE7DD; }

.cat-stats { display: flex; gap: 10px; margin-top: 14px; }
.cat-stat { flex: 1; border-radius: 12px; padding: 9px 12px; }
.cat-stat__label { font: 600 10.5px/1.2 var(--font-sans); text-transform: uppercase; letter-spacing: .4px; }
.cat-stat__value { font: 600 20px/1.1 var(--font-mono); margin-top: 4px; }
.cat-stat--active { background: #F3F8EC; border: 1px solid #E4EFD6; }
.cat-stat--active .cat-stat__label { color: #7C9A56; }
.cat-stat--active .cat-stat__value { color: #5B8A2A; }
.cat-stat--inactive { background: #F7F4EF; border: 1px solid #EEE7DD; }
.cat-stat--inactive .cat-stat__label { color: var(--text-faint); }
.cat-stat--inactive .cat-stat__value { color: #78716c; }

/* Reseller-access metric (x/N + amber bar) */
.cat-access { margin-top: 14px; }
.cat-access__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cat-access__label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.cat-access__label svg { width: 15px; height: 15px; color: #A06E00; flex: none; }
.cat-access__val { font: 600 13px/1 var(--font-mono); color: var(--text); }
.cat-access__bar { block-size: 6px; inline-size: 100%; border-radius: 999px; background: #f0e9df; margin-top: 8px; overflow: hidden; }
.cat-access__fill { block-size: 100%; border-radius: 999px; background: var(--accent); }

/* Card footer actions */
.cat-card__foot { display: flex; justify-content: flex-end; gap: 6px; padding: 14px 18px; border-top: 1px solid var(--row-hairline); }
.cat-act { inline-size: 34px; block-size: 34px; display: grid; place-items: center; border: 1px solid #eee7dd; border-radius: 10px;
           background: var(--surface); color: #79716b; cursor: pointer; text-decoration: none;
           transition: background-color var(--dur-normal) var(--ease), color var(--dur-normal) var(--ease), border-color var(--dur-normal) var(--ease); }
.cat-act:hover { background: #faf7f2; color: var(--text); }
.cat-act--danger:hover { background: #fdecea; color: #d1402f; border-color: #f6d5cf; }
.cat-act svg { width: 17px; height: 17px; }

/* List-view access cell */
.cat-access-cell { display: flex; flex-direction: column; gap: 5px; min-inline-size: 130px; }
.cat-access-cell__top { display: flex; align-items: center; gap: 8px; }
.cat-access-cell__val { font: 600 12.5px/1 var(--font-mono); color: var(--text); }
.cat-access-cell__pct { font: 500 12px/1 var(--font-mono); color: var(--text-muted); }
.cat-name-cell { display: flex; align-items: center; gap: 10px; }
.cat-name-cell__icon { inline-size: 32px; block-size: 32px; border-radius: 8px; flex: none; display: grid; place-items: center;
                       background: var(--accent-tint); border: 1px solid #F1DDA0; color: #A06E00; overflow: hidden; }
.cat-name-cell__icon img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.cat-name-cell__icon svg { width: 16px; height: 16px; }

/* Segmented Grid|List toggle (labeled; wired by view-toggle.js) */
.seg { display: inline-flex; gap: 4px; padding: 4px; background: #f4efe8; border: 1px solid #e8e1d6; border-radius: 12px; }
.seg__btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: none; background: transparent;
            border-radius: 9px; font: 600 13px/1 var(--font-sans); color: var(--text-muted); cursor: pointer;
            transition: background-color .15s var(--ease), color .15s var(--ease); }
.seg__btn svg { width: 16px; height: 16px; }
.seg__btn.is-active { background: var(--surface); color: #A06E00; box-shadow: 0 1px 2px rgba(70,52,32,.12); }

/* ===== Products page — grid card, qty/category chips, reseller-access well ===== */
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 18px; }

/* Per-row stepper (grid view only; JS sets columns + visibility) */
.perrow { display: inline-flex; align-items: center; gap: 2px; background: #ece9e4; border-radius: 11px; padding: 4px; }
.perrow__btn { inline-size: 30px; block-size: 30px; display: grid; place-items: center; border: none; background: transparent;
               border-radius: 8px; color: #57534e; cursor: pointer; transition: background-color .15s var(--ease); }
.perrow__btn:hover:not(:disabled) { background: rgba(255,255,255,.7); }
.perrow__btn:disabled { color: #cdc7bd; cursor: not-allowed; }
.perrow__btn svg { width: 16px; height: 16px; }
.perrow__val { display: inline-flex; align-items: baseline; gap: 4px; padding: 0 8px; white-space: nowrap; }
.perrow__num { font-family: var(--font-mono); font-weight: 700; font-size: 13px; color: var(--text); }
.perrow__unit { font-size: 12px; color: #57534e; }

/* ===== Reseller dashboard — credit KPIs, over-limit banner, brand cards ===== */
.rd-status-chip { display: inline-flex; align-items: center; gap: 6px; background: #FBECE9; color: #C8432F;
                  border-radius: 999px; padding: 6px 12px; font: 600 12px/1 var(--font-sans); }
.rd-status-chip svg { width: 14px; height: 14px; }

/* Credit KPI cards (Plus Jakarta Sans figures — NOT mono) */
.rd-kpi { display: flex; flex-direction: column; padding: 18px 20px; }
.rd-kpi--danger { border-color: rgba(200,67,47,.35); border-inline-start: 4px solid #C8432F; background: #fffafa; }
.rd-kpi__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-block-size: 34px; }
.rd-kpi__label { font: 600 var(--fs-micro)/1.2 var(--font-sans); text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); }
.rd-kpi__icon { inline-size: 34px; block-size: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.rd-kpi__icon--blue { background: #E8F0FD; color: #2A6FDB; }
.rd-kpi__icon--green { background: #EEF6E7; color: #5B8A2A; }
.rd-kpi__icon--gold { background: var(--accent-tint); color: #A06E00; }
.rd-kpi__icon svg { width: 18px; height: 18px; }
.rd-kpi__value { font: 800 25px/1.15 var(--font-sans); color: var(--text); letter-spacing: -.4px; margin-block: 10px 6px; }
.rd-kpi__value--danger { color: #C8432F; }
.rd-pill { display: inline-block; padding: 3px 9px; border-radius: 999px; font: 700 10px/1.3 var(--font-sans);
           text-transform: uppercase; letter-spacing: .5px; }
.rd-pill--danger { background: #FBECE9; color: #C8432F; }
.rd-bar { block-size: 7px; border-radius: 999px; background: #f0e9df; overflow: hidden; margin-block: 2px 8px; }
.rd-bar__fill { block-size: 100%; border-radius: 999px; background: var(--accent); }
.rd-bar__fill--danger { background: #C8432F; }
.rd-kpi__sub { font-size: var(--fs-xs); color: var(--text-muted); }

/* Over-limit banner */
.rd-alert { display: flex; align-items: center; gap: 16px; background: linear-gradient(135deg, #FFF4E0, #FDE9C8);
            border: 1px solid #F5D79A; border-radius: 18px; padding: 16px 20px; margin-block-end: var(--space-7); }
.rd-alert__icon { inline-size: 46px; block-size: 46px; border-radius: 13px; flex: none; display: grid; place-items: center;
                  background: var(--accent); color: #1c1917; }
.rd-alert__icon svg { width: 24px; height: 24px; }
.rd-alert__text { flex: 1; color: #7a5a14; font-size: 14px; line-height: 1.5; }
.rd-alert__text b { color: #8a5a00; font-weight: 700; }
.rd-alert__btn { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px;
                 background: var(--text); color: #fff; border: none; border-radius: 12px; font: 700 14px/1 var(--font-sans);
                 cursor: pointer; text-decoration: none; }
.rd-alert__btn:hover { background: #000; color: #fff; }
.rd-alert__btn svg { width: 17px; height: 17px; }
@media (max-width: 720px) { .rd-alert { flex-wrap: wrap; } }

/* Brands section header */
.rd-sec { display: flex; align-items: center; gap: 12px; margin-block: var(--space-8) var(--space-5); }
.rd-sec__bar { inline-size: 4px; block-size: 20px; border-radius: 2px; background: var(--accent); }
.rd-sec__title { font: 800 18px/1 var(--font-sans); color: var(--text); }
.rd-sec__count { background: var(--surface-sunken); color: var(--text-secondary); border-radius: 999px; padding: 3px 10px;
                 font: 600 12px/1 var(--font-sans); }
.rd-sec__link { margin-inline-start: auto; color: #A06E00; font: 600 13px/1 var(--font-sans); display: inline-flex; align-items: center; gap: 5px; }
.rd-sec__link:hover { text-decoration: underline; }
.rd-sec__link svg { width: 15px; height: 15px; }
[dir="rtl"] .rd-sec__link svg { transform: scaleX(-1); }

/* Reseller dashboard marquee sections. The strip itself is
   components/marquee.css, shared with the public landing page; these two are
   only the text that sits around it. */
.rd-marquee { margin-block-end: var(--space-6); }
.rd-marquee__lead { margin: calc(var(--space-4) * -1) 0 var(--space-4); color: var(--text-muted); font-size: 13px; }
.rd-marquee__empty { margin: 0 0 var(--space-6); color: var(--text-muted); font-size: 14px; }

/* Brand card (reseller) */
.rbrand { position: relative; display: flex; flex-direction: column; block-size: 100%; background: var(--surface);
          border: 1px solid #e8e1d6; border-radius: 18px; padding: 16px; box-shadow: 0 4px 18px rgba(70,52,32,.05);
          transition: transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s cubic-bezier(.4,0,.2,1), border-color .22s cubic-bezier(.4,0,.2,1); }
.rbrand:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(70,52,32,.14); border-color: #e7d9c5; }
.rbrand--locked { opacity: .82; }
.rbrand__lock { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; color: var(--text-faint); }
.rbrand__lock svg { width: 16px; height: 16px; }
.rbrand__head { display: flex; align-items: center; gap: 12px; }
.rbrand__mono { inline-size: 46px; block-size: 46px; border-radius: 14px; flex: none; display: grid; place-items: center;
                font: 800 16px/1 var(--font-sans); overflow: hidden; }
.rbrand__mono img { inline-size: 100%; block-size: 100%; object-fit: contain; padding: 4px; }
.rbrand__headtext { min-inline-size: 0; flex: 1; }
.rbrand__name { font: 700 15px/1.25 var(--font-sans); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rbrand__sub { font-size: 12px; color: var(--text-muted); margin-block-start: 3px; }
.rbrand__well { margin-block-start: 14px; background: var(--row-zebra-bg); border: 1px solid var(--row-hairline); border-radius: 12px;
                padding: 9px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rbrand__well-label { font-size: 12px; color: var(--text-muted); }
.rbrand__well-val { font: 700 15px/1 var(--font-sans); color: var(--text); }
.rbrand__well-val--muted { color: var(--text-faint); }
.rbrand__actions { display: flex; gap: 8px; margin-block-start: 14px; }
.rbrand__btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; block-size: 38px;
               border-radius: 10px; font: 600 13px/1 var(--font-sans); cursor: pointer; text-decoration: none; border: 1px solid transparent; }
.rbrand__btn svg { width: 15px; height: 15px; }
.rbrand__btn--amber { background: #FFF7E6; color: #A06E00; border-color: #F1DDA0; }
.rbrand__btn--amber:hover { background: var(--accent-tint); }
.rbrand__btn--neutral { background: var(--surface); color: var(--text-secondary); border-color: #e4e1da; }
.rbrand__btn--neutral:hover { background: var(--row-zebra-bg); }
.rbrand__btn--locked { width: 100%; border: 1px dashed #d4cdc0; color: var(--text-faint); background: transparent; cursor: pointer; }
.rbrand__btn--locked:hover { border-color: var(--accent); color: #A06E00; }
/* Already asked: the chip reports rather than invites, so it loses the hover
   affordance and the dashed "you could act here" border. */
.rbrand__btn--locked.is-requested,
.rbrand__btn--locked.is-requested:hover { border-style: solid; border-color: #e3ded4; color: var(--text-muted); cursor: default; }

/* Same idea on the bootstrap-styled product chip in a listing card. */
.unlock-request-btn.is-requested,
.unlock-request-btn.is-requested:hover { cursor: default; opacity: 1; }

/* ===== Reseller categories page — breadcrumb + tile grid ===== */
.rcat-bc { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-block: var(--space-6) var(--space-5); }
.rcat-bc__bar { inline-size: 4px; block-size: 20px; border-radius: 2px; background: var(--accent); flex: none; }
.rcat-bc__crumb { display: inline-flex; align-items: center; gap: 6px; font: 700 15px/1 var(--font-sans); color: var(--text);
                  background: none; border: none; padding: 0; cursor: default; }
.rcat-bc__crumb svg { width: 16px; height: 16px; }
.rcat-bc__crumb.is-link { color: var(--text-muted); font-weight: 600; cursor: pointer; }
.rcat-bc__crumb.is-link:hover { color: #A06E00; }
.rcat-bc__sep { color: var(--text-faint); }
.rcat-bc__count { background: var(--surface-sunken); color: var(--text-secondary); border-radius: 999px; padding: 3px 10px;
                  font: 600 12px/1 var(--font-sans); margin-inline-start: 4px; }

.rcat-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1200px) { .rcat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 992px)  { .rcat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px)  { .rcat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rcat-tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; background: var(--surface);
             border: 1px solid #e8e1d6; border-radius: 16px; box-shadow: 0 4px 18px rgba(70,52,32,.05); padding: 20px 14px; cursor: pointer;
             transition: transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s cubic-bezier(.4,0,.2,1), border-color .2s cubic-bezier(.4,0,.2,1); }
.rcat-tile:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(70,52,32,.13); border-color: #F0C97D; }
.rcat-tile__well { inline-size: 62px; block-size: 62px; border-radius: 16px; display: grid; place-items: center; background: #faf8f5;
                   border: 1px solid #f0e9df; color: #8a847d; overflow: hidden;
                   transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.rcat-tile:hover .rcat-tile__well { background: #FCEFCF; color: #A06E00; border-color: #F0C97D; }
.rcat-tile__well svg { width: 28px; height: 28px; }
.rcat-tile__well img { inline-size: 100%; block-size: 100%; object-fit: contain; padding: 8px; }
.rcat-tile__name { font: 700 15px/1.3 var(--font-sans); color: var(--text); }
.rcat-tile__pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px 10px; font: 600 11.5px/1 var(--font-sans); }
.rcat-tile__pill--has { background: #F3F8EC; color: #5B8A2A; }
.rcat-tile__pill--empty { background: #f4f1ec; color: #a8a29e; }
.rcat-tile__dot { inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor; flex: none; }
.rcat-empty { grid-column: 1 / -1; text-align: center; padding: var(--space-9); color: var(--text-muted); }

/* ===== Reseller category-products page ===== */
.rcp-head { position: relative; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; background: var(--surface);
            border: 1px solid #efe7da; border-radius: 20px; box-shadow: 0 6px 24px rgba(70,52,32,.07);
            padding: 22px 26px 22px 30px; overflow: hidden; margin-block-end: var(--space-5); }
.rcp-head__rail { position: absolute; inset-inline-start: 0; inset-block: 0; inline-size: 6px; background: linear-gradient(180deg, #F5A501, #E08A00); }
.rcp-id { position: relative; display: flex; align-items: center; gap: 18px; }
.rcp-glow { position: absolute; inset-inline-start: -12px; inset-block-start: -16px; inline-size: 120px; block-size: 120px; border-radius: 50%;
            background: radial-gradient(circle, rgba(245,165,1,.22), transparent 65%); pointer-events: none; }
.rcp-icon { position: relative; inline-size: 72px; block-size: 72px; border-radius: 18px; flex: none; display: grid; place-items: center;
            background: linear-gradient(145deg, #FFDD8F, #F5A501); color: #5a3d00; box-shadow: 0 8px 18px rgba(245,165,1,.32); }
.rcp-icon svg { width: 34px; height: 34px; }
.rcp-icon img { inline-size: 100%; block-size: 100%; object-fit: contain; padding: 12px; }
.rcp-eyebrow { display: inline-flex; align-items: center; gap: 5px; font: 700 11px/1 var(--font-sans); text-transform: uppercase; letter-spacing: 1.5px; color: #A06E00; }
.rcp-eyebrow svg { width: 13px; height: 13px; }
.rcp-name { font: 800 28px/1.1 var(--font-sans); color: var(--text); letter-spacing: -.6px; margin: 7px 0 8px; }
.rcp-active { display: inline-flex; align-items: center; gap: 6px; background: #F3F8EC; color: #5B8A2A; border-radius: 999px; padding: 4px 12px; font: 600 12.5px/1 var(--font-sans); }
.rcp-stats { display: flex; align-items: stretch; margin-inline-start: auto; background: linear-gradient(135deg, #FBF6EC, #F7EFDF);
             border: 1px solid #f0e3cb; border-radius: 14px; padding: 6px 4px; }
.rcp-stat { padding: 8px 22px; border-inline-start: 1px solid #efe1c8; text-align: center; }
.rcp-stat:first-child { border-inline-start: none; }
.rcp-stat__val { font: 800 20px/1 var(--font-sans); color: var(--text); white-space: nowrap; }
.rcp-stat__label { font: 600 10.5px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); margin-block-start: 6px; }
@media (max-width: 820px) { .rcp-stats { margin-inline-start: 0; inline-size: 100%; } }

.rcp-toolbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-block: var(--space-6) var(--space-5); }
.rcp-title { display: inline-flex; align-items: center; gap: 9px; font: 800 20px/1 var(--font-sans); color: var(--text); }
.rcp-title__tick { inline-size: 4px; block-size: 20px; border-radius: 2px; background: var(--accent); }
.rcp-count { background: var(--surface-sunken); color: var(--text-secondary); border-radius: 999px; padding: 3px 10px; font: 600 12px/1 var(--font-sans); }
.rcp-toolbar__spacer { flex: 1; }
.rcp-search { position: relative; min-inline-size: 200px; }
.rcp-search > svg { position: absolute; inset-block: 0; inset-inline-start: 13px; margin: auto 0; width: 16px; height: 16px; color: var(--text-faint); pointer-events: none; }
.rcp-search input { padding-inline-start: 38px; }

.rcp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.rcp-empty { grid-column: 1 / -1; text-align: center; padding: var(--space-9); color: var(--text-muted); }

/* Product card restyle — scoped to this page; productCard.js markup/behavior unchanged */
.rcp-grid .product-card { position: relative; border: 1px solid #e8e1d6 !important; border-radius: 18px !important; box-shadow: 0 4px 18px rgba(70,52,32,.05) !important;
    overflow: hidden; transition: transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s cubic-bezier(.4,0,.2,1), border-color .22s cubic-bezier(.4,0,.2,1); }
.rcp-grid .product-card:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(70,52,32,.14) !important; border-color: #e7d9c5 !important; }
.rcp-grid .product-card .product-main-image { aspect-ratio: 1 / 1; object-fit: cover; inline-size: 100%; background: var(--row-zebra-bg); }
.rcp-grid .product-card .favorite-toggle { inset-inline-start: 8px !important; inset-inline-end: auto !important; inset-block-start: 8px !important;
    background: rgba(255,255,255,.92) !important; border-radius: 50% !important; inline-size: 34px; block-size: 34px;
    display: grid; place-items: center; box-shadow: 0 2px 6px rgba(70,52,32,.16); }
.rcp-grid .product-card .favorite-toggle i { font-size: 1rem !important; }
.rcp-grid .product-card .card-title { font: 700 14px/1.35 var(--font-sans) !important; color: var(--text); }
.rcp-grid .product-card .agent-final-price { color: #3C7D40 !important; }
.rcp-grid .product-card .add-to-cart { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--accent-contrast) !important;
    font-weight: 700 !important; border-radius: 10px !important; }
.rcp-grid .product-card .add-to-cart:hover { background: var(--accent-hover) !important; border-color: var(--accent-hover) !important; }
.rcp-grid .product-card .notify-me-btn, .rcp-grid .product-card .locked-btn { border-radius: 10px !important; }

/* Product card badges (Featured / New Arrival) — stacked on the opposite side of the favorite toggle */
.product-card .product-badges { position: absolute; inset-inline-end: 10px; inset-block-start: 10px; z-index: 2;
    display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
.product-card .product-badges .pdp-tag { font: 500 10px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .5px;
    padding: 5px 9px; border-radius: 99px; border: 0; outline: 0; box-shadow: none; white-space: nowrap; }


/* Reseller brands page — header stat cards */
.rb-stats { display: flex; gap: 12px; }
.rb-stat { background: var(--surface); border: 1px solid #e8e1d6; border-radius: 14px; padding: 10px 18px; text-align: center;
           min-inline-size: 96px; box-shadow: 0 4px 18px rgba(70,52,32,.05); }
.rb-stat__num { font: 800 22px/1 var(--font-sans); color: var(--text); }
.rb-stat--green .rb-stat__num { color: #3C7D40; }
.rb-stat__label { font-size: 11.5px; color: var(--text-muted); margin-block-start: 4px; }

/* ===== Brand-locked modal (custom overlay) ===== */
.bl-overlay { position: fixed; inset: 0; z-index: 1090; display: flex; align-items: center; justify-content: center; padding: 24px;
              background: rgba(28,25,23,.45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.bl-overlay[hidden] { display: none; }
.bl-card { width: 100%; max-width: 440px; background: var(--surface); border-radius: 20px; overflow: hidden; position: relative;
           box-shadow: 0 30px 80px rgba(28,25,23,.32); font-family: var(--font-sans); animation: bl-in .2s cubic-bezier(.4,0,.2,1); }
@keyframes bl-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.bl-x { position: absolute; inset-block-start: 16px; inset-inline-end: 16px; inline-size: 32px; block-size: 32px; display: grid;
        place-items: center; border: none; background: #f4f1ec; border-radius: 9px; color: var(--text-muted); cursor: pointer; }
.bl-x:hover { background: #ece8e1; color: var(--text); }
.bl-x svg { width: 16px; height: 16px; }
.bl-default, .bl-success { padding: 24px; }
.bl-head { display: flex; align-items: flex-start; gap: 14px; padding-inline-end: 28px; }
.bl-icon { inline-size: 54px; block-size: 54px; border-radius: 15px; flex: none; display: grid; place-items: center; }
.bl-icon--danger { background: #FBECE9; color: #C8432F; }
.bl-icon svg { width: 26px; height: 26px; }
.bl-title { font: 800 19px/1.25 var(--font-sans); color: var(--text); margin: 0; }
.bl-desc { font-size: 13.5px; line-height: 1.55; color: var(--text-muted); margin: 6px 0 0; }
.bl-desc b { color: var(--text); font-weight: 700; }
.bl-desc--center { text-align: center; max-inline-size: 340px; margin-inline: auto; margin-block-start: 8px; }
.bl-note { display: flex; align-items: flex-start; gap: 9px; margin-block-start: 18px; background: var(--row-zebra-bg);
           border: 1px solid #f0e9df; border-radius: 13px; padding: 12px 14px; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.bl-note svg { width: 18px; height: 18px; color: var(--accent); flex: none; margin-block-start: 1px; }
.bl-error { margin-block-start: 14px; background: #FBECE9; border: 1px solid rgba(200,67,47,.3); color: #C8432F;
            border-radius: 11px; padding: 9px 12px; font-size: 12.5px; }
.bl-error[hidden] { display: none; }
.bl-foot { display: flex; justify-content: flex-end; gap: 10px; margin-block-start: 22px; }
.bl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; block-size: 44px; padding: 0 18px;
          border-radius: 12px; font: 700 14px/1 var(--font-sans); cursor: pointer; border: 1px solid transparent; text-decoration: none; }
.bl-btn svg { width: 16px; height: 16px; }
.bl-btn--neutral { background: var(--surface); color: #57534e; border-color: #e8e1d6; }
.bl-btn--neutral:hover { background: var(--row-zebra-bg); }
.bl-btn--amber { background: var(--accent); color: var(--accent-contrast); box-shadow: 0 4px 14px rgba(245,165,1,.32); }
.bl-btn--amber:hover { background: var(--accent-hover); }
.bl-btn--amber:disabled { opacity: .65; cursor: not-allowed; box-shadow: none; }
.bl-btn--dark { background: var(--text); color: #fff; }
.bl-btn--dark:hover { background: #000; }
.bl-btn--block { width: 100%; margin-block-start: 22px; }
.bl-success { text-align: center; }
.bl-check { inline-size: 60px; block-size: 60px; border-radius: 50%; background: #E8F5E9; color: #3C7D40; display: grid;
            place-items: center; margin: 6px auto 16px; }
.bl-check svg { width: 30px; height: 30px; }
.bl-spinner { width: 15px; height: 15px; border: 2px solid rgba(28,25,23,.3); border-top-color: var(--accent-contrast);
              border-radius: 50%; animation: bl-spin .8s linear infinite; }
@keyframes bl-spin { to { transform: rotate(360deg); } }
.prod-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid #e8e1d6; border-radius: 18px;
             overflow: hidden; box-shadow: 0 4px 18px rgba(70,52,32,.05);
             transition: transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s cubic-bezier(.4,0,.2,1), border-color .22s cubic-bezier(.4,0,.2,1); }
.prod-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(70,52,32,.16); border-color: #e7d9c5; }
.prod-card__media { position: relative; aspect-ratio: 1 / 1; background: var(--accent-tint); display: grid; place-items: center; overflow: hidden; }
.prod-card__media > img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.prod-card__media-ph { color: #d9c596; }
.prod-card__media-ph svg { width: 46px; height: 46px; }
.prod-card__cat { position: absolute; inset-block-start: 10px; inset-inline-start: 10px; display: inline-flex; align-items: center; gap: 5px;
                  max-inline-size: 72%; background: rgba(252,239,207,.95); color: #A06E00; border: 1px solid #F1DDA0; border-radius: 999px;
                  padding: 4px 9px; font: 600 11px/1 var(--font-sans); }
.prod-card__cat svg { width: 12px; height: 12px; flex: none; }
.prod-card__cat span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-card__status { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; border-radius: 999px; padding: 4px 10px; font: 600 11px/1 var(--font-sans); }
.prod-status--active { background: #E8F5E9; color: #3C7D40; }
.prod-status--inactive { background: #FBECE9; color: #C8432F; }
.prod-card__body { padding: 14px 16px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.prod-card__name { font: 700 14.5px/1.35 var(--font-sans); color: var(--text); display: -webkit-box; -webkit-line-clamp: 2;
                   -webkit-box-orient: vertical; overflow: hidden; min-block-size: 2.7em; }
.prod-card__price { font: 700 18px/1 var(--font-mono); color: var(--text); }
.prod-qty { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 4px 10px;
            font: 600 11.5px/1 var(--font-sans); }
.prod-qty--ok { background: #E8F5E9; color: #3C7D40; }
.prod-qty--low { background: var(--accent-tint); color: #A06E00; }
.prod-qty--out { background: #FBECE9; color: #C8432F; }
.prod-card__brand { font-size: 12px; color: var(--text-muted); }
.prod-card__brand b { color: var(--text-secondary); font-weight: 600; }
.prod-access { margin-block-start: auto; background: var(--row-zebra-bg); border: 1px solid var(--row-hairline); border-radius: 12px; padding: 10px 12px; }
.prod-access__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.prod-access__label { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-muted); }
.prod-access__label svg { width: 14px; height: 14px; color: #A06E00; flex: none; }
.prod-access__val { font: 600 12.5px/1 var(--font-mono); color: var(--text); }
.prod-access__bar { block-size: 6px; border-radius: 999px; background: #f0e9df; margin-block-start: 7px; overflow: hidden; }
.prod-access__fill { block-size: 100%; border-radius: 999px; background: var(--accent); }
.prod-card__foot { display: flex; justify-content: flex-end; gap: 6px; padding: 12px 16px; border-top: 1px solid var(--row-hairline); }

/* Products list view */
.prod-name-cell { display: flex; align-items: center; gap: 12px; min-inline-size: 240px; }
.prod-thumb { inline-size: 42px; block-size: 42px; border-radius: 10px; flex: none; background: var(--accent-tint);
              display: grid; place-items: center; overflow: hidden; }
.prod-thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.prod-thumb svg { width: 18px; height: 18px; color: #d9c596; }
.prod-name-cell__name { font: 600 13.5px/1.3 var(--font-sans); color: var(--text); }
.prod-name-cell__cat { display: inline-flex; align-items: center; gap: 4px; margin-block-start: 4px; font: 600 10.5px/1 var(--font-sans);
                       color: #A06E00; }
.prod-name-cell__cat svg { width: 11px; height: 11px; }
.prod-list-status { display: inline-block; border-radius: 999px; padding: 4px 10px; font: 600 11px/1 var(--font-sans); }

/* ===== Reseller product details page (PDP) ===== */
.pdp { max-inline-size: 1340px; margin-inline: auto; padding: 30px 34px 64px; }
.pdp-bc { margin-block-end: 18px; }

.pdp-card { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr); background: var(--surface);
            border: 1px solid #efe7da; border-radius: 22px; box-shadow: 0 8px 30px rgba(70,52,32,.07); overflow: hidden; margin-block-end: 24px; }
@media (max-width: 900px) { .pdp-card { grid-template-columns: 1fr; } }

/* --- gallery --- */
.pdp-gallery { padding: 30px 28px; border-inline-end: 1px solid #f1ebe1; background: linear-gradient(180deg, #fffdf9, #faf7f1); }
@media (max-width: 900px) { .pdp-gallery { border-inline-end: none; border-block-end: 1px solid #f1ebe1; } }
.pdp-hero { position: relative; inline-size: 100%; aspect-ratio: 1 / 1; border-radius: 18px; border: 1px solid #efe7da;
            background: #fff; overflow: hidden; transition: background-color .5s ease; }
.pdp-hero__layer { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(1.04);
            transition: opacity .5s ease, transform .6s cubic-bezier(.22,.61,.36,1); }
.pdp-hero__layer.is-active { opacity: 1; transform: scale(1); }
.pdp-hero__layer img, .pdp-hero__layer video { inline-size: 100%; block-size: 100%; object-fit: contain; }
.pdp-hero__badge { position: absolute; inset-block-start: 14px; inset-inline-start: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 5px;
            background: #E8F1FF; color: #2A6FDB; font: 800 11px/1 var(--font-sans); padding: 6px 10px; border-radius: 99px; }
.pdp-hero__badge svg { width: 12px; height: 12px; }
.pdp-fav { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; z-index: 3; inline-size: 40px; block-size: 40px; border-radius: 50%;
            border: none; background: rgba(255,255,255,.85); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: #a8a29e;
            display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 8px rgba(70,52,32,.12); transition: transform .2s, color .2s; }
.pdp-fav svg { width: 20px; height: 20px; }
.pdp-fav:hover { transform: scale(1.08); }
.pdp-fav.is-active { color: #C8432F; }
.pdp-fav.is-active svg, .pdp-favsq.is-active svg { fill: currentColor; }
.pdp-fav.pop, .pdp-favsq.pop { animation: pdpPop .35s cubic-bezier(.34,1.56,.64,1); }
@keyframes pdpPop { 0% { transform: scale(1); } 45% { transform: scale(1.28); } 100% { transform: scale(1); } }

.pdp-thumbs { display: flex; gap: 12px; flex-wrap: wrap; margin-block-start: 18px; }
.pdp-thumb { inline-size: 88px; block-size: 88px; border-radius: 13px; border: 1px solid #efe7da; background: #fff; overflow: hidden;
            cursor: pointer; padding: 0; position: relative; transition: transform .2s, border-color .2s, box-shadow .2s; }
.pdp-thumb img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.pdp-thumb:hover { transform: translateY(-3px); }
.pdp-thumb.is-active { border: 2px solid #F5A501; box-shadow: 0 0 0 3px rgba(245,165,1,.18); }
.pdp-thumb__play { position: absolute; inset: 0; display: grid; place-items: center; color: #8a847d; }
.pdp-thumb__play svg { width: 26px; height: 26px; }

/* --- info column --- */
.pdp-info { padding: 32px 34px 34px; display: flex; flex-direction: column; }
.pdp-badges { display: flex; gap: 8px; margin-block-end: 12px; }
.pdp-tag { font: 700 11px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .5px; padding: 5px 10px; border-radius: 99px; }
.pdp-tag--feat { background: #E8F1FF; color: #2A6FDB; }
.pdp-tag--new { background: #E8F5E9; color: #3C7D40; }
.pdp-title { font: 800 30px/1.12 var(--font-sans); letter-spacing: -.7px; color: #1c1917; margin: 0 0 9px; }
.pdp-subrow { display: flex; align-items: center; gap: 8px; font: 500 13px/1 var(--font-sans); color: #a8a29e; margin-block-end: 22px; }
.pdp-star { display: inline-flex; align-items: center; gap: 4px; color: #F5A501; font-weight: 700; }
.pdp-star svg { width: 14px; height: 14px; fill: currentColor; }
.pdp-dot { inline-size: 3px; block-size: 3px; border-radius: 50%; background: #d6cfc4; }

.pdp-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; background: #faf7f2; border: 1px solid #efe7da;
            border-radius: 16px; padding: 20px 22px; margin-block-end: 22px; }
.pdp-spec__label { display: flex; align-items: center; gap: 6px; font: 700 10.5px/1 var(--font-sans); text-transform: uppercase;
            letter-spacing: .6px; color: #a8957a; margin-block-end: 8px; }
.pdp-spec__label svg { width: 13px; height: 13px; }
.pdp-spec__val { font: 600 14px/1.3 var(--font-sans); color: #44403c; }
.pdp-spec__val a { color: #A06E00; text-decoration: none; }
.pdp-spec__val a:hover { text-decoration: underline; }
.pdp-chip { display: inline-block; background: #fff; border: 1px solid #e8e1d6; border-radius: 9px; padding: 6px 10px; font: 600 13px/1 var(--font-sans); color: #57534e; }

.pdp-highlights { margin-block-end: 22px; display: flex; flex-direction: column; gap: 10px; }
.pdp-highlights > h3 { font: 700 11px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .6px; color: #a8957a; margin: 0 0 2px; }
.pdp-hl { display: flex; align-items: center; gap: 11px; font: 500 14px/1.4 var(--font-sans); color: #44403c; transition: transform .2s; }
.pdp-hl:hover { transform: translateX(3px); }
.pdp-hl__ic { inline-size: 20px; block-size: 20px; flex: none; border-radius: 7px; background: #FFF3DC; color: #A06E00; display: grid; place-items: center; }
.pdp-hl__ic svg { width: 12px; height: 12px; }
/* product summary (free HTML) rendered as amber feature rows */
.pdp-highlights .pdp-desc { font: 500 14px/1.5 var(--font-sans); color: #44403c; }
.pdp-highlights ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pdp-highlights li { position: relative; display: flex; align-items: center; padding-inline-start: 31px; font: 500 14px/1.4 var(--font-sans); color: #44403c; transition: transform .2s; }
.pdp-highlights li::before { content: ''; position: absolute; inset-inline-start: 0; inset-block-start: 50%; transform: translateY(-50%); inline-size: 20px; block-size: 20px;
            border-radius: 7px; background: #FFF3DC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A06E00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.pdp-highlights li:hover { transform: translateX(3px); }

.pdp-price { background: linear-gradient(135deg, #F4F9EC, #EEF6E0); border: 1px solid #E0EECC; border-radius: 16px; padding: 18px 20px; margin-block-end: 22px; }
.pdp-price__label { font: 800 11.5px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .8px; color: #5B8A2A; }
.pdp-price__row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-block-start: 8px; }
.pdp-price__now { font: 800 34px/1 var(--font-sans); color: #4E7A24; letter-spacing: -.5px; }
.pdp-price__was { font: 600 16px/1 var(--font-sans); color: #8a847d; text-decoration: line-through; }
.pdp-price__save { display: inline-flex; align-items: center; gap: 4px; background: #E8F5E9; color: #3C7D40; border-radius: 99px; padding: 4px 11px; font: 700 12px/1 var(--font-sans); }
.pdp-price__retail { margin-block-start: 10px; font: 500 13px/1 var(--font-sans); color: #8a847d; }
.pdp-price__retail s, .pdp-price__retail .is-struck { text-decoration: line-through; }
.pdp-off { color: #C8432F; font-weight: 700; margin-inline-start: 6px; }

.pdp-qty-discount { display: flex; align-items: center; gap: 6px; background: linear-gradient(135deg, #EBF5FF, #D6ECFF); border: 1px solid #B8DAFF; border-radius: 10px; padding: 8px 14px; margin-block-end: 18px; font: 600 13px/1.2 var(--font-sans); color: #0D6EFD; }
.pdp-qty-discount i { font-size: 16px; flex-shrink: 0; }

/* Card quantity discount tooltip */
.qty-discount-tooltip { position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 1050; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.18); padding: 14px 18px; min-width: 240px; max-width: 320px; pointer-events: none; }
.qty-discount-tooltip-header { font: 700 14px/1.3 var(--font-sans); color: #1c1917; margin-bottom: 10px; border-bottom: 1px solid #eee; padding-bottom: 8px; }
.qty-discount-tooltip-rules { display: flex; flex-direction: column; gap: 6px; }
.qty-discount-tooltip-rule { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.qty-discount-tooltip-qty { font: 600 13px/1 var(--font-sans); color: #555; white-space: nowrap; }
.qty-discount-tooltip-disc { font: 700 13px/1 var(--font-sans); color: #0d6efd; white-space: nowrap; }

/* PDP discount rules table */
.pdp-qty-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid #e8e1d6; border-radius: 10px; overflow: hidden; margin-block-end: 18px; font: 500 13px/1.4 var(--font-sans); }
.pdp-qty-table thead th { background: linear-gradient(135deg, #EBF5FF, #D6ECFF); color: #0D6EFD; font-weight: 700; padding: 8px 12px; text-align: start; border-bottom: 1px solid #B8DAFF; font-size: 12px; }
.pdp-qty-table tbody td { padding: 7px 12px; border-bottom: 1px solid #f1f1f1; color: #1c1917; }
.pdp-qty-table tbody tr:last-child td { border-bottom: none; }
.pdp-qty-table tbody tr:hover { background: #f8f9fa; }
.pdp-qty-table .pdp-qty-badge { display: inline-block; background: #0D6EFD; color: #fff; border-radius: 6px; padding: 2px 8px; font-weight: 700; font-size: 11.5px; }

/* --- options --- */
.pdp-opt { margin-block-end: 20px; }
.pdp-opt__label { font: 700 13px/1 var(--font-sans); color: #1c1917; margin-block-end: 11px; }
.pdp-opt__label span { color: #8a847d; font-weight: 500; }
.pdp-swatches { display: flex; gap: 12px; flex-wrap: wrap; }
.pdp-swatch { inline-size: 42px; block-size: 42px; border-radius: 50%; border: 2px solid #e8e1d6; background: #fff; padding: 4px; cursor: pointer;
            display: grid; place-items: center; transition: transform .22s cubic-bezier(.34,1.56,.64,1), border-color .22s, box-shadow .22s; }
.pdp-swatch__dot { inline-size: 100%; block-size: 100%; border-radius: 50%; border: 1px solid rgba(0,0,0,.08); }
.pdp-swatch:hover { transform: scale(1.06); }
.pdp-swatch.is-active { border-color: #F5A501; box-shadow: 0 0 0 3px rgba(245,165,1,.2); transform: scale(1.06); }

.pdp-attrs { display: flex; gap: 9px; flex-wrap: wrap; }
.pdp-attr { border: 1px solid #e0d7c8; background: #fff; color: #44403c; border-radius: 10px; padding: 9px 15px; font: 600 13.5px/1 var(--font-sans); cursor: pointer; transition: all .18s; }
.pdp-attr:hover { border-color: #d2a86a; }
.pdp-attr.is-active { background: #1c1917; border-color: #1c1917; color: #fff; }

/* --- buy bar --- */
.pdp-buy { display: flex; align-items: stretch; gap: 12px; margin-block-start: auto; padding-block-start: 6px; }
.pdp-stepper { display: flex; align-items: stretch; border: 1px solid #e4ddd1; border-radius: 13px; overflow: hidden; block-size: 54px; background: #fff; }
.pdp-stepper button { inline-size: 48px; border: none; background: #faf7f2; color: #1c1917; cursor: pointer; display: grid; place-items: center; transition: background .15s; }
.pdp-stepper button:hover:not(:disabled) { background: #f3ebd9; }
.pdp-stepper button:disabled { color: #cdc6bb; cursor: not-allowed; }
.pdp-stepper button svg { width: 18px; height: 18px; }
.pdp-stepper input { inline-size: 56px; border: none; text-align: center; font: 700 16px/1 var(--font-sans); color: #1c1917; background: #fff; }
.pdp-cta { flex: 1; block-size: 54px; border: none; border-radius: 13px; background: #F5A501; color: #1c1917; font: 800 15.5px/1 var(--font-sans);
            cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 9px; box-shadow: 0 6px 16px rgba(245,165,1,.34);
            transition: transform .18s, box-shadow .18s, background .18s; }
.pdp-cta svg { width: 19px; height: 19px; }
.pdp-cta:hover:not(:disabled) { transform: translateY(-2px); background: #E89A00; box-shadow: 0 10px 22px rgba(245,165,1,.42); }
.pdp-cta:disabled { opacity: .75; cursor: default; }
.pdp-cta--blocked { flex: 1; block-size: 54px; border-radius: 13px; border: none; background: #ece9e4; color: #8a847d; font: 800 15px/1 var(--font-sans);
            display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: not-allowed; }
.pdp-cta--blocked svg { width: 18px; height: 18px; }
.pdp-cta--notify { flex: 1; block-size: 54px; border-radius: 13px; border: 1.5px solid #1c1917; background: #fff; color: #1c1917; font: 800 15px/1 var(--font-sans);
            display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: transform .2s, background .2s, color .2s; }
.pdp-cta--notify svg { width: 18px; height: 18px; }
.pdp-cta--notify:hover:not(.is-subscribed) { transform: translateY(-2px); background: #1c1917; color: #fff; }
.pdp-cta--notify:hover:not(.is-subscribed) .notify-me-btn__label { color: #F97316; }
.pdp-cta--notify.is-subscribed { background: #1c1917; color: #fff; border-color: #1c1917; }
.pdp-cta--notify.is-subscribed:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(28,25,23,.28); }
/* Product-card notify-me button (non-subscribed state only): mirrors
   .pdp-cta--notify's hover exactly, scoped to .notify-me-btn specifically so
   .btn-secondary:hover (#767676, shared by 37+ views and the card's own
   Locked button) is left untouched. */
.notify-me-btn.btn-secondary:hover:not(.is-subscribed) { background: #1c1917; border-color: #1c1917; color: #fff; }
.notify-me-btn.btn-secondary:hover:not(.is-subscribed) .notify-me-btn__label { color: #F97316; }
.pdp-favsq { inline-size: 54px; block-size: 54px; flex: none; border: 1px solid #e4ddd1; border-radius: 13px; background: #fff; color: #a8a29e;
            display: grid; place-items: center; cursor: pointer; transition: transform .2s, color .2s, border-color .2s; }
.pdp-favsq svg { width: 20px; height: 20px; }
.pdp-favsq:hover { transform: translateY(-2px); }
.pdp-favsq.is-active { color: #C8432F; border-color: #f0cfc6; }
.pdp-hidden { display: none !important; }

/* --- tabs --- */
.pdp-tabs-card { background: var(--surface); border: 1px solid #efe7da; border-radius: 22px; box-shadow: 0 8px 30px rgba(70,52,32,.07); overflow: hidden; }
.pdp-tabbar { display: flex; gap: 8px; border-block-end: 1px solid #f1ebe1; padding-inline: 26px; }
.pdp-tab { position: relative; background: none; border: none; padding: 18px 6px; font: 700 15px/1 var(--font-sans); color: #8a847d; cursor: pointer; transition: color .2s; }
.pdp-tab::after { content: ''; position: absolute; inset-inline: 0; inset-block-end: -1px; block-size: 3px; background: #F5A501; border-radius: 3px;
            transform: scaleX(0); opacity: 0; transform-origin: center; transition: transform .25s ease, opacity .25s ease; }
.pdp-tab.is-active { color: #1c1917; font-weight: 800; }
.pdp-tab.is-active::after { transform: scaleX(1); opacity: 1; }
.pdp-tabpane { display: none; padding: 26px 30px 30px; }
.pdp-tabpane.is-active { display: block; animation: pdpFade .35s ease; }
@keyframes pdpFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pdp-desc { font: 400 15px/1.7 var(--font-sans); color: #44403c; }
.pdp-desc p { margin: 0 0 12px; }
.pdp-spectable { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.pdp-spectable__row { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-block-end: 1px solid #f1ebe1; }
.pdp-spectable__k { font: 600 14px/1.3 var(--font-sans); color: #8a847d; }
.pdp-spectable__v { font: 600 14px/1.3 var(--font-sans); color: #1c1917; text-align: end; }
@media (max-width: 700px) { .pdp-specs, .pdp-spectable { grid-template-columns: 1fr; } }

/* --- toast --- */
.pdp-toast { position: fixed; inset-block-end: 24px; inset-inline-end: 24px; z-index: 1080; display: flex; align-items: center; gap: 11px;
            background: #1c1917; color: #fff; border-radius: 13px; padding: 14px 18px; font: 600 14px/1.3 var(--font-sans);
            box-shadow: 0 12px 30px rgba(0,0,0,.22); transform: translateY(20px); opacity: 0; pointer-events: none;
            transition: transform .3s cubic-bezier(.22,.61,.36,1), opacity .3s; }
.pdp-toast.is-show { transform: translateY(0); opacity: 1; }
.pdp-toast__ic { inline-size: 22px; block-size: 22px; border-radius: 50%; background: #5B8A2A; color: #fff; display: grid; place-items: center; flex: none; }
.pdp-toast__ic svg { width: 14px; height: 14px; }
.pdp-toast--warn .pdp-toast__ic { background: #C8432F; }

/* ===== Conversations chat screen (CVX) ===== */
.cvx { height: 100%; min-block-size: 520px; display: flex; }
.cvx-card { flex: 1; min-block-size: 0; display: grid; grid-template-columns: 368px 1fr; background: var(--surface);
            border: 1px solid #efe7da; border-radius: 20px; box-shadow: 0 8px 30px rgba(70,52,32,.07); overflow: hidden; }
@media (max-width: 860px) {
    .cvx-card { grid-template-columns: 1fr; }
    .cvx-card .cvx-thread { display: none; }
    .cvx-card.show-thread .cvx-list { display: none; }
    .cvx-card.show-thread .cvx-thread { display: flex; }
}

/* --- list pane --- */
.cvx-list { display: flex; flex-direction: column; min-block-size: 0; border-inline-end: 1px solid #f1ebe1; background: #fffdfa; }
.cvx-list__head { padding: 18px 18px 14px; border-block-end: 1px solid #f1ebe1; }
.cvx-list__titlerow { display: flex; align-items: center; gap: 9px; margin-block-end: 14px; }
.cvx-list__tick { inline-size: 4px; block-size: 20px; border-radius: 2px; background: var(--accent); }
.cvx-list__title { font: 800 18px/1 var(--font-sans); color: var(--text); }
.cvx-count { background: var(--surface-sunken); color: var(--text-secondary); border-radius: 999px; padding: 2px 9px; font: 700 11.5px/1 var(--font-sans); }
.cvx-new { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; background: var(--accent); color: #1c1917; border: none;
            border-radius: 11px; padding: 8px 13px; font: 800 13px/1 var(--font-sans); cursor: pointer; box-shadow: 0 4px 12px rgba(245,165,1,.3); transition: transform .15s, box-shadow .15s; }
.cvx-new:hover { transform: translateY(-1px); box-shadow: 0 7px 16px rgba(245,165,1,.4); }
.cvx-new svg { width: 15px; height: 15px; }
.cvx-search { position: relative; margin-block-end: 11px; }
.cvx-search > svg { position: absolute; inset-block: 0; inset-inline-start: 12px; margin: auto 0; width: 16px; height: 16px; color: var(--text-faint); pointer-events: none; }
.cvx-search input { inline-size: 100%; padding-inline-start: 36px; }
.cvx-filters { display: flex; flex-direction: column; gap: 8px; margin-block-end: 11px; }
.cvx-filters:empty { display: none; }
.cvx-seg { display: flex; background: var(--surface-sunken); border-radius: 11px; padding: 3px; }
.cvx-seg__btn { flex: 1; border: none; background: none; border-radius: 8px; padding: 7px 4px; font: 700 12px/1 var(--font-sans); color: var(--text-muted); cursor: pointer; transition: all .18s; }
.cvx-seg__btn.is-active { background: #fff; color: #A06E00; box-shadow: 0 1px 3px rgba(70,52,32,.12); }
.cvx-scroll { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; padding: 8px; }

.cvx-row { display: flex; gap: 12px; padding: 12px; border-radius: 12px; cursor: pointer; position: relative; transition: background .15s; }
.cvx-row:hover { background: #faf7f2; }
.cvx-row.is-active { background: #FBF6EC; box-shadow: 0 2px 10px rgba(70,52,32,.07); }
.cvx-row.is-active::before { content: ''; position: absolute; inset-inline-start: 0; inset-block: 8px; inline-size: 3px; border-radius: 3px; background: var(--accent); }
.cvx-ava { inline-size: 46px; block-size: 46px; border-radius: 12px; flex: none; display: grid; place-items: center; background: #F3E6DB; color: #8F4327; font: 800 16px/1 var(--font-sans); }
.cvx-ava svg { width: 22px; height: 22px; }
.cvx-row__main { flex: 1; min-inline-size: 0; }
.cvx-row__top { display: flex; align-items: center; gap: 8px; margin-block-end: 3px; }
.cvx-chip { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 2px 8px; font: 700 10px/1.3 var(--font-sans); text-transform: uppercase; letter-spacing: .3px; }
.cvx-chip--topic { background: #FFF3DC; color: #A06E00; }
.cvx-chip--order { background: #E8F1FF; color: #2A6FDB; }
.cvx-chip--unlock { background: #FBECE9; color: #C8432F; }
.cvx-row__date { margin-inline-start: auto; font: 500 11px/1 var(--font-sans); color: var(--text-faint); white-space: nowrap; }
.cvx-row__name { font: 700 13.5px/1.3 var(--font-sans); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cvx-row__preview { display: flex; align-items: center; gap: 8px; margin-block-start: 3px; }
.cvx-row__msg { flex: 1; min-inline-size: 0; font: 500 12.5px/1.4 var(--font-sans); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cvx-badge { flex: none; background: var(--accent); color: #1c1917; border-radius: 999px; min-inline-size: 18px; block-size: 18px; padding: 0 5px; display: grid; place-items: center; font: 800 10.5px/1 var(--font-sans); }
.cvx-list__empty { padding: 40px 20px; text-align: center; color: var(--text-muted); font: 500 13px/1.5 var(--font-sans); }

/* --- thread pane --- */
.cvx-thread { display: flex; flex-direction: column; min-block-size: 0; background: linear-gradient(180deg, #fffdfa, #faf8f5); }
.cvx-thread__head { display: flex; align-items: center; gap: 13px; padding: 16px 22px; border-block-end: 1px solid #f1ebe1; background: #fff; }
.cvx-thread__ava { inline-size: 44px; block-size: 44px; border-radius: 12px; flex: none; display: grid; place-items: center; background: #F3E6DB; color: #8F4327; font: 800 16px/1 var(--font-sans); overflow: hidden; }
.cvx-thread__ava img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.cvx-thread__info { min-inline-size: 0; }
.cvx-thread__name { display: flex; align-items: center; gap: 8px; font: 800 16px/1.2 var(--font-sans); color: var(--text); }
.cvx-thread__status { display: flex; align-items: center; gap: 6px; margin-block-start: 4px; font: 500 12px/1 var(--font-sans); color: var(--text-muted); }
.cvx-thread__dot { inline-size: 7px; block-size: 7px; border-radius: 50%; background: #5B8A2A; }
.cvx-back { margin-inline-start: auto; display: none; border: 1px solid var(--card-border); background: #fff; border-radius: 10px; padding: 7px 10px; cursor: pointer; color: var(--text-secondary); }
.cvx-back svg { width: 18px; height: 18px; }
@media (max-width: 860px) { .cvx-back { display: inline-grid; place-items: center; } }

.cvx-msgs { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.cvx-datesep { align-self: center; background: #f1ece3; color: var(--text-muted); border-radius: 999px; padding: 4px 13px; font: 600 11px/1 var(--font-sans); margin-block: 2px 6px; }
.cvx-msg { max-inline-size: 74%; display: flex; flex-direction: column; gap: 5px; animation: cvxIn .34s cubic-bezier(.22,.61,.36,1); }
.cvx-msg--in { align-self: flex-start; }
.cvx-msg--out { align-self: flex-end; align-items: flex-end; }
@keyframes cvxIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.cvx-msg__meta { display: flex; align-items: center; gap: 7px; padding-inline: 6px; }
.cvx-msg__who { font: 700 12px/1 var(--font-sans); color: var(--text-secondary); }
.cvx-msg__ctx { background: #f1ece3; color: #8a6a3a; border-radius: 999px; padding: 2px 7px; font: 600 10px/1.2 var(--font-sans); }
.cvx-msg__line { display: flex; gap: 9px; align-items: flex-end; }
.cvx-msg__ava { inline-size: 28px; block-size: 28px; border-radius: 8px; flex: none; display: grid; place-items: center; background: #F3E6DB; color: #8F4327; font: 700 11px/1 var(--font-sans); }
.cvx-bubble { padding: 11px 14px; font: 500 14px/1.5 var(--font-sans); color: #292524; white-space: pre-wrap; word-break: break-word; }
.cvx-msg--in .cvx-bubble { background: #fff; border: 1px solid #ece5da; border-radius: 16px 16px 16px 4px; }
.cvx-msg--out .cvx-bubble { background: #FFF3DC; border: 1px solid #F3DFA8; border-radius: 16px 16px 4px 16px; }
.cvx-bubble__time { display: block; margin-block-start: 6px; font: 500 10.5px/1 var(--font-sans); color: var(--text-faint); text-align: end; }
.cvx-att { display: inline-flex; align-items: center; gap: 6px; margin-block-start: 7px; background: rgba(0,0,0,.03); border: 1px solid #ece5da; border-radius: 9px; padding: 6px 9px; font: 600 12px/1 var(--font-sans); color: #A06E00; text-decoration: none; }
.cvx-att svg { width: 14px; height: 14px; }
.cvx-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--text-muted); text-align: center; padding: 30px; font: 500 14px/1.5 var(--font-sans); }
.cvx-empty svg { width: 54px; height: 54px; color: #d9cdbb; }

/* --- composer --- */
.cvx-composer { border-block-start: 1px solid #f1ebe1; background: #fff; padding: 14px 18px; }
.cvx-attpreview { display: flex; gap: 8px; flex-wrap: wrap; margin-block-end: 10px; }
.cvx-attpreview:empty { display: none; }
.cvx-attchip { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-sunken); border: 1px solid var(--card-border); border-radius: 9px; padding: 5px 8px; font: 600 11.5px/1 var(--font-sans); color: var(--text-secondary); max-inline-size: 160px; }
.cvx-attchip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cvx-attchip button { border: none; background: none; cursor: pointer; color: var(--text-faint); padding: 0; display: grid; place-items: center; }
.cvx-attchip button svg { width: 13px; height: 13px; }
.cvx-composer__row { display: flex; align-items: flex-end; gap: 10px; }
.cvx-iconbtn { inline-size: 48px; block-size: 48px; flex: none; border: 1px solid #e4ddd1; border-radius: 14px; background: #faf7f2; color: var(--text-secondary); display: grid; place-items: center; cursor: pointer; transition: background .15s, color .15s; }
.cvx-iconbtn:hover { background: #f3ebd9; color: #A06E00; }
.cvx-iconbtn svg { width: 20px; height: 20px; }
.cvx-field { flex: 1; display: flex; align-items: center; border: 1.5px solid #e4ddd1; border-radius: 14px; background: #fff; transition: border-color .18s, box-shadow .18s; }
.cvx-field:focus-within { border-color: #F5A501; box-shadow: 0 0 0 3px rgba(245,165,1,.16); }
.cvx-field textarea { flex: 1; border: none; background: none; resize: none; padding: 13px 16px; font: 500 14px/1.4 var(--font-sans); color: var(--text); max-block-size: 120px; outline: none; }
.cvx-send { inline-size: 48px; block-size: 48px; flex: none; border: none; border-radius: 14px; background: var(--accent); color: #1c1917; display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 12px rgba(245,165,1,.32); transition: transform .15s, background .15s, box-shadow .15s; }
.cvx-send:hover:not(:disabled) { transform: translateY(-1px); background: var(--accent-hover); }
.cvx-send:disabled { background: #e7e2da; color: #b8b1a6; cursor: default; box-shadow: none; }
.cvx-send svg { width: 20px; height: 20px; }

/* select2 fit inside list filters / new modal */
.cvx-filters .select2-container { inline-size: 100% !important; }
.cvx-filters .select2-container--bootstrap-5 .select2-selection,
.cvx-modal .select2-container--bootstrap-5 .select2-selection { border-radius: 11px; border-color: var(--card-border); min-block-size: 40px; padding: 4px 6px; }

/* ===== Reseller categories-for-brand page (BCAT) ===== */
.bcat { max-inline-size: 1340px; margin-inline: auto; padding: 30px 34px 64px; }
.bcat-bc { margin-block-end: 16px; }

.bcat-head { position: relative; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; background: var(--surface);
            border: 1px solid #efe7da; border-radius: 20px; box-shadow: 0 6px 24px rgba(70,52,32,.07); padding: 22px 26px 22px 30px; overflow: hidden; margin-block-end: var(--space-6); }
.bcat-head__rail { position: absolute; inset-inline-start: 0; inset-block: 0; inline-size: 6px; background: linear-gradient(180deg, #F5A501, #E08A00); }
.bcat-id { display: flex; align-items: center; gap: 18px; }
.bcat-logo { inline-size: 84px; block-size: 84px; border-radius: 18px; flex: none; background: #faf8f5; border: 1px solid #efe7da; display: grid; place-items: center; overflow: hidden; }
.bcat-logo img { inline-size: 100%; block-size: 100%; object-fit: contain; padding: 12px; }
.bcat-logo > svg { width: 34px; height: 34px; color: #c9b48a; }
.bcat-eyebrow { display: inline-flex; align-items: center; gap: 5px; font: 700 11px/1 var(--font-sans); text-transform: uppercase; letter-spacing: 1.5px; color: #A06E00; }
.bcat-eyebrow svg { width: 13px; height: 13px; }
.bcat-name { font: 800 29px/1.1 var(--font-sans); color: var(--text); letter-spacing: -.6px; margin: 7px 0 9px; }
.bcat-stockpill { display: inline-flex; align-items: center; gap: 6px; background: #F3F8EC; color: #5B8A2A; border-radius: 999px; padding: 4px 12px; font: 600 12.5px/1 var(--font-sans); }
.bcat-stockpill svg { width: 13px; height: 13px; }
.bcat-stats { display: flex; align-items: stretch; margin-inline-start: auto; background: linear-gradient(135deg, #FBF6EC, #F7EFDF); border: 1px solid #f0e3cb; border-radius: 14px; padding: 6px 4px; }
.bcat-stat { padding: 8px 22px; border-inline-start: 1px solid #efe1c8; text-align: center; }
.bcat-stat:first-child { border-inline-start: none; }
.bcat-stat__val { font: 800 20px/1 var(--font-sans); color: var(--text); }
.bcat-stat__label { font: 600 10.5px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); margin-block-start: 6px; }
@media (max-width: 820px) { .bcat-stats { margin-inline-start: 0; inline-size: 100%; } }

.bcat-toolbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-block-end: var(--space-5); }

.bcat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1100px) { .bcat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .bcat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.bcat-tile { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 13px; background: var(--surface);
            border: 1px solid #e8e1d6; border-radius: 16px; box-shadow: 0 4px 18px rgba(70,52,32,.05); padding: 24px 20px; cursor: pointer;
            transition: transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s cubic-bezier(.4,0,.2,1), border-color .22s cubic-bezier(.4,0,.2,1); }
.bcat-tile:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(70,52,32,.13); border-color: #F0C97D; }
.bcat-tile__icon { inline-size: 64px; block-size: 64px; border-radius: 16px; background: #faf8f5; color: #8a847d; display: grid; place-items: center; overflow: hidden; transition: background .22s, color .22s; }
.bcat-tile__icon svg { width: 28px; height: 28px; }
.bcat-tile__icon img { inline-size: 100%; block-size: 100%; object-fit: contain; padding: 12px; }
.bcat-tile:hover .bcat-tile__icon { background: #FCEFCF; color: #A06E00; }
.bcat-tile__name { font: 700 15px/1.35 var(--font-sans); color: var(--text); }
.bcat-tile__pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 4px 11px; font: 600 11.5px/1 var(--font-sans); }
.bcat-tile__pill--has { background: #F3F8EC; color: #5B8A2A; }
.bcat-tile__pill--empty { background: #f4f1ec; color: #a8a29e; }
.bcat-tile__pill svg { width: 11px; height: 11px; }
.bcat-tile__arrow { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; color: #A06E00; opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; }
.bcat-tile:hover .bcat-tile__arrow { opacity: 1; transform: none; }
.bcat-tile__arrow svg { width: 16px; height: 16px; }
.bcat-empty { grid-column: 1 / -1; text-align: center; padding: var(--space-9); color: var(--text-muted); background: var(--surface); border: 1px dashed var(--card-border); border-radius: 16px; }

/* ===== Reseller shopping cart page (CRT) ===== */
.crt { max-inline-size: 1340px; margin-inline: auto; padding: 30px 34px 64px; }
.crt-header { display: flex; align-items: center; gap: 15px; margin-block-end: var(--space-5); }
.crt-header__tile { inline-size: 54px; block-size: 54px; border-radius: 15px; flex: none; display: grid; place-items: center;
            background: linear-gradient(145deg, #FFDD8F, #F5A501); color: #5a3d00; box-shadow: 0 8px 18px rgba(245,165,1,.32); }
.crt-header__tile svg { width: 26px; height: 26px; }
.crt-header__title { font: 800 26px/1.1 var(--font-sans); color: var(--text); letter-spacing: -.5px; }
.crt-header__sub { margin-block-start: 4px; font: 500 13.5px/1 var(--font-sans); color: var(--text-muted); }

.crt-banner { display: flex; align-items: flex-start; gap: 13px; background: #FBECE9; border: 1px solid #F3CFC8; border-radius: 14px;
            padding: 15px 18px; margin-block-end: var(--space-5); }
.crt-banner__ic { flex: none; color: #C8432F; margin-block-start: 1px; }
.crt-banner__ic svg { width: 20px; height: 20px; }
.crt-banner__title { font: 800 14px/1.3 var(--font-sans); color: #C8432F; }
.crt-banner__body { margin-block-start: 3px; font: 500 13px/1.5 var(--font-sans); color: #92402f; }
.crt-banner__link { display: inline-flex; align-items: center; gap: 4px; margin-block-start: 7px; font: 700 13px/1 var(--font-sans); color: #C8432F; text-decoration: none; }
.crt-banner__link svg { width: 14px; height: 14px; }
.crt-banner__link:hover { text-decoration: underline; }

.crt-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 22px; align-items: start; }
@media (max-width: 980px) { .crt-grid { grid-template-columns: 1fr; } }

/* line items card */
.crt-card { background: var(--surface); border: 1px solid #efe7da; border-radius: 18px; box-shadow: 0 6px 24px rgba(70,52,32,.06); overflow: hidden; }
.crt-cols, .crt-row { display: grid; grid-template-columns: minmax(180px, 1fr) 104px 118px 122px 46px; gap: 12px; align-items: center; }
.crt-cols { background: #faf8f5; padding: 13px 20px; font: 800 11px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .6px; color: #a8957a; }
.crt-cols span:nth-child(2), .crt-cols span:nth-child(4) { text-align: end; }
.crt-cols span:nth-child(3), .crt-cols span:nth-child(5) { text-align: center; }
.crt-row { padding: 18px 20px; border-block-start: 1px solid #f4eee4; transition: background .15s; }
.crt-row:hover { background: #fdfbf8; }
.crt-row--oos { background: #FFFBF2; box-shadow: inset 3px 0 0 #F5A501; }
.crt-row--oos:hover { background: #FFF8EB; }

.crt-prod { display: flex; align-items: center; gap: 13px; min-inline-size: 0; }
.crt-prod__img { inline-size: 70px; block-size: 70px; border-radius: 13px; flex: none; background: var(--row-zebra-bg, #faf8f5); overflow: hidden;
            box-shadow: inset 0 0 0 1px rgba(70,52,32,.05); display: grid; place-items: center; }
.crt-prod__img img { inline-size: 100%; block-size: 100%; object-fit: contain; padding: 6px; }
.crt-prod__info { min-inline-size: 0; }
.crt-prod__name { font: 700 14.5px/1.35 var(--font-sans); color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.crt-prod__variant { display: inline-flex; align-items: center; gap: 6px; margin-block-start: 5px; font: 500 12px/1 var(--font-sans); color: var(--text-muted); }
.crt-prod__swatch { inline-size: 12px; block-size: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); flex: none; }
.crt-oos-chip { display: inline-flex; align-items: center; gap: 4px; margin-block-start: 6px; background: #FFF3DC; color: #A06E00; border: 1px solid #F3DFA8;
            border-radius: 999px; padding: 3px 9px; font: 700 10px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .4px; }
.crt-oos-chip svg { width: 11px; height: 11px; }

.crt-price { text-align: end; font: 700 14px/1.3 var(--font-sans); color: #57534e; }
.crt-price__was { display: block; font: 500 11.5px/1 var(--font-sans); color: var(--text-faint); text-decoration: line-through; margin-block-end: 3px; }
.crt-total { text-align: end; font: 800 15.5px/1.2 var(--font-sans); color: #1c1917; }

.crt-stepper { display: inline-flex; align-items: center; justify-self: center; border: 1px solid #e4ddd1; border-radius: 99px; block-size: 40px; background: #fff; overflow: hidden; }
.crt-stepper button { inline-size: 36px; block-size: 100%; border: none; background: #faf8f5; color: #1c1917; cursor: pointer; display: grid; place-items: center; transition: background .15s; }
.crt-stepper button:hover:not(:disabled) { background: #f3ebd9; }
.crt-stepper button:disabled { color: #cdc6bb; cursor: not-allowed; }
.crt-stepper button svg { width: 15px; height: 15px; }
.crt-stepper input { inline-size: 40px; border: none; text-align: center; font: 700 14px/1 var(--font-sans); color: #1c1917; background: #fff; }

.crt-remove { inline-size: 38px; block-size: 38px; justify-self: center; border: 1px solid var(--card-border); border-radius: 10px; background: #fff; color: #a8a29e; display: grid; place-items: center; cursor: pointer; transition: all .15s; }
.crt-remove svg { width: 17px; height: 17px; }
.crt-remove:hover { background: #FBECE9; border-color: #f0cfc6; color: #C8432F; }

.crt-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-block-start: var(--space-4); }
.crt-clear { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--card-border); border-radius: 11px; padding: 10px 15px; font: 700 13px/1 var(--font-sans); color: var(--text-secondary); cursor: pointer; transition: all .15s; }
.crt-clear svg { width: 15px; height: 15px; }
.crt-clear:hover { border-color: #f0cfc6; color: #C8432F; background: #FBECE9; }
.crt-continue { display: inline-flex; align-items: center; gap: 6px; font: 700 13px/1 var(--font-sans); color: #A06E00; text-decoration: none; }
.crt-continue svg { width: 15px; height: 15px; }
.crt-continue:hover { text-decoration: underline; }

/* empty state */
.crt-empty { background: var(--surface); border: 1px solid #efe7da; border-radius: 18px; box-shadow: 0 6px 24px rgba(70,52,32,.06); padding: 60px 30px; text-align: center; }
.crt-empty__tile { inline-size: 76px; block-size: 76px; border-radius: 20px; margin: 0 auto 18px; display: grid; place-items: center; background: #FBF6EC; color: #A06E00; }
.crt-empty__tile svg { width: 34px; height: 34px; }
.crt-empty__title { font: 800 19px/1.2 var(--font-sans); color: var(--text); }
.crt-empty__sub { margin-block: 8px 20px; font: 500 13.5px/1.5 var(--font-sans); color: var(--text-muted); }

/* order summary */
.crt-summary { position: sticky; inset-block-start: 8px; background: var(--surface); border: 1px solid #efe7da; border-radius: 18px; box-shadow: 0 6px 24px rgba(70,52,32,.06); overflow: hidden; }
.crt-summary__head { padding: 16px 20px; border-block-end: 1px solid #f1ebe1; font: 800 15px/1 var(--font-sans); color: var(--text); }
.crt-summary__body { padding: 18px 20px; }
.crt-sumrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-end: 12px; font: 500 13.5px/1.3 var(--font-sans); color: var(--text-secondary); }
.crt-sumrow__label { display: inline-flex; align-items: center; gap: 5px; }
.crt-sumrow__label svg { width: 13px; height: 13px; }
.crt-sumrow__val { font-weight: 700; color: var(--text); white-space: nowrap; }
.crt-sumrow--credit .crt-sumrow__val { color: #A06E00; }
.crt-sumrow--over { color: #C8432F; }
.crt-sumrow--over .crt-sumrow__val { color: #C8432F; }
.crt-sum-divider { block-size: 1px; background: #f1ebe1; margin-block: 14px; }
.crt-sumtotal { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.crt-sumtotal__label { font: 700 14px/1 var(--font-sans); color: var(--text); }
.crt-sumtotal__val { font: 800 20px/1 var(--font-sans); color: #1c1917; white-space: nowrap; }

.crt-payblock { margin-block-start: 16px; background: linear-gradient(135deg, #FBF6EC, #F7EFDF); border: 1px solid #F0E0C0; border-radius: 14px; padding: 14px 16px; }
.crt-payblock__label { font: 800 10.5px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .7px; color: #A06E00; }
.crt-payblock__amt { margin-block-start: 6px; font: 800 24px/1 var(--font-sans); color: #A06E00; letter-spacing: -.5px; }
.crt-payblock__note { margin-block-start: 8px; font: 500 11.5px/1.5 var(--font-sans); color: #8a6a3a; }

.crt-checkout { inline-size: 100%; block-size: 52px; margin-block-start: 16px; border: none; border-radius: 13px; background: var(--accent); color: #1c1917;
            font: 800 15px/1 var(--font-sans); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
            box-shadow: 0 6px 16px rgba(245,165,1,.34); transition: transform .18s, box-shadow .18s, background .18s; }
.crt-checkout svg { width: 19px; height: 19px; }
.crt-checkout:hover:not(:disabled) { transform: translateY(-2px); background: var(--accent-hover); box-shadow: 0 10px 22px rgba(245,165,1,.42); }
.crt-checkout:disabled { background: #e7e2da; color: #b8b1a6; cursor: not-allowed; box-shadow: none; }
.crt-secure { display: flex; align-items: center; justify-content: center; gap: 6px; margin-block-start: 11px; font: 500 11.5px/1 var(--font-sans); color: var(--text-faint); }
.crt-secure svg { width: 13px; height: 13px; }

/* checkout modal restyle (scoped; keeps Bootstrap structure + IDs) */
.crt-modal .modal-content { border-radius: 18px; border: 1px solid #efe7da; overflow: hidden; font-family: var(--font-sans); }
.crt-modal .modal-header { border-block-end: 1px solid #f1ebe1; padding: 17px 22px; }
.crt-modal .modal-title { font: 800 17px/1 var(--font-sans); color: #1c1917; display: flex; align-items: center; gap: 8px; }
.crt-modal .modal-body { padding: 20px 22px; }
.crt-modal .modal-footer { border-block-start: 1px solid #f1ebe1; padding: 14px 22px; }
.crt-modal .btn { border-radius: 11px; font-weight: 700; }
.crt-modal .btn-primary { background: var(--accent); border-color: var(--accent); color: #1c1917; }
.crt-modal .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #1c1917; }
.crt-modal .btn-warning { background: var(--accent); border-color: var(--accent); color: #1c1917; }
.crt-modal .btn-secondary { background: #fff; border: 1px solid var(--card-border); color: var(--text-secondary); }
.crt-modal .card { border: 1px solid #efe7da; border-radius: 12px; box-shadow: none; }
.crt-modal .credit-info-card { background: #faf8f5; border-inline-start: 3px solid var(--accent); }
.crt-modal .alert-warning { background: #FFF7E6; border: 1px solid #F3DFA8; color: #A06E00; border-radius: 11px; }
.crt-modal .debt-limit-header { background: linear-gradient(135deg, #FFF3DC, #FBF6EC) !important; border-block-end: 1px solid #F0E0C0; }
.crt-modal .debt-limit-icon { color: #A06E00; }
.crt-modal .text-primary { color: #A06E00 !important; }

/* ===== Reseller My Orders page (ORD) ===== */
.ord { max-inline-size: 1340px; margin-inline: auto; padding: 30px 34px 64px; }
.ord-header { display: flex; align-items: center; gap: 15px; margin-block-end: var(--space-5); }
.ord-header__tile { inline-size: 54px; block-size: 54px; border-radius: 15px; flex: none; display: grid; place-items: center;
            background: linear-gradient(145deg, #FFDD8F, #F5A501); color: #5a3d00; box-shadow: 0 8px 18px rgba(245,165,1,.32); }
.ord-header__tile svg { width: 26px; height: 26px; }
.ord-header__title { font: 800 26px/1.1 var(--font-sans); color: var(--text); letter-spacing: -.5px; }
.ord-header__sub { margin-block-start: 4px; font: 500 13.5px/1 var(--font-sans); color: var(--text-muted); }

/* stat cards */
.ord-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-block-end: var(--space-5); }
@media (max-width: 760px) { .ord-stats { grid-template-columns: 1fr; } }
.ord-stat { position: relative; display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid #efe7da;
            border-radius: 18px; box-shadow: 0 4px 18px rgba(70,52,32,.05); padding: 18px 20px 18px 23px; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.ord-stat:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(70,52,32,.12); }
.ord-stat::before { content: ''; position: absolute; inset-inline-start: 0; inset-block: 0; inline-size: 4px; }
.ord-stat--amber::before { background: linear-gradient(180deg, #F5A501, #E08A00); }
.ord-stat--grey::before { background: #cbc3b7; }
.ord-stat--green::before { background: #5B8A2A; }
.ord-stat__icon { inline-size: 52px; block-size: 52px; border-radius: 14px; flex: none; display: grid; place-items: center; }
.ord-stat__icon svg { width: 24px; height: 24px; }
.ord-stat--amber .ord-stat__icon { background: #FFF3DC; color: #A06E00; }
.ord-stat--grey .ord-stat__icon { background: #f1efea; color: #8a847d; }
.ord-stat--green .ord-stat__icon { background: #EAF4E2; color: #4E7A24; }
.ord-stat__label { font: 700 12.5px/1.2 var(--font-sans); color: #8a847d; }
.ord-stat__val { margin-block-start: 6px; font: 800 28px/1 var(--font-sans); color: var(--text); letter-spacing: -.5px; }

/* panel */
.ord-panel { background: var(--surface); border: 1px solid #efe7da; border-radius: 20px; box-shadow: 0 6px 24px rgba(70,52,32,.06); overflow: hidden; }
.ord-panel__head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: 18px 20px 14px; }
.ord-panel__title { display: inline-flex; align-items: center; gap: 9px; font: 800 18px/1 var(--font-sans); color: var(--text); }
.ord-panel__tick { inline-size: 4px; block-size: 20px; border-radius: 2px; background: var(--accent); }
.ord-count { background: var(--surface-sunken); color: var(--text-secondary); border-radius: 999px; padding: 3px 10px; font: 600 12px/1 var(--font-sans); }
.ord-panel__spacer { flex: 1; }
.ord-vt { display: inline-flex; gap: 2px; background: #ece9e4; border-radius: 99px; padding: 3px; }
.ord-vt button { inline-size: 34px; block-size: 30px; border: none; background: none; border-radius: 99px; color: var(--text-muted); cursor: pointer; display: grid; place-items: center; transition: all .15s; }
.ord-vt button svg { width: 17px; height: 17px; }
.ord-vt button.is-active { background: #fff; color: #A06E00; box-shadow: 0 1px 3px rgba(70,52,32,.14); }
.ord-search { position: relative; min-inline-size: 210px; }
.ord-search > svg { position: absolute; inset-block: 0; inset-inline-start: 12px; margin: auto 0; width: 16px; height: 16px; color: var(--text-faint); pointer-events: none; }
.ord-search input { inline-size: 100%; padding-inline-start: 36px; }

/* status chips */
.ord-chips { display: flex; gap: 9px; flex-wrap: wrap; padding: 0 20px 16px; }
.ord-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--surface); border: 1px solid var(--card-border); border-radius: 99px;
            padding: 7px 13px; font: 600 12.5px/1 var(--font-sans); color: var(--text-secondary); cursor: pointer; transition: all .15s; }
.ord-chip:hover { background: #faf8f5; }
.ord-chip.is-active { background: #FFF7E6; border-color: #F3DFA8; color: #A06E00; }
.ord-chip__dot { inline-size: 8px; block-size: 8px; border-radius: 50%; flex: none; }
.ord-chip__count { background: var(--surface-sunken); border-radius: 99px; padding: 1px 7px; font: 700 11px/1.4 var(--font-sans); color: var(--text-secondary); }
.ord-chip.is-active .ord-chip__count { background: #fff; color: #A06E00; }

/* list table */
.ord-list__cols, .ord-row { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr 96px; gap: 12px; align-items: center; }
.ord-list__cols { background: #faf8f5; padding: 13px 20px; font: 800 11px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .6px; color: #a8957a; }
.ord-list__cols span:nth-child(2), .ord-list__cols span:nth-child(4) { text-align: end; }
.ord-list__cols span:nth-child(3) { text-align: center; }
.ord-list__cols span:nth-child(5) { text-align: end; }
.ord-row { padding: 14px 20px; border-block-start: 1px solid #f4eee4; transition: background .15s; }
.ord-row:hover { background: #fdfbf8; }
.ord-id { display: flex; align-items: center; gap: 11px; min-inline-size: 0; }
.ord-id__tile { inline-size: 38px; block-size: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; background: #FFF3DC; color: #A06E00; }
.ord-id__tile svg { width: 18px; height: 18px; }
.ord-id__code { font: 800 14px/1.2 var(--font-sans); color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ord-amount { text-align: end; font: 800 14.5px/1.2 var(--font-sans); color: var(--text); font-variant-numeric: tabular-nums; }
.ord-statuscell { display: flex; justify-content: center; }
.ord-when { text-align: center; font: 500 12.5px/1.3 var(--font-sans); color: var(--text-muted); }
.ord-actions { display: flex; gap: 7px; justify-content: flex-end; }

/* grid cards */
.ord-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 4px 20px 4px; }
@media (max-width: 1080px) { .ord-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .ord-grid { grid-template-columns: 1fr; } }
.ord-card { border: 1px solid #e8e1d6; border-radius: 16px; padding: 16px; background: var(--surface); transition: transform .2s, box-shadow .2s, border-color .2s; }
.ord-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(70,52,32,.1); border-color: #ecdcc2; }
.ord-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-block-end: 13px; }
.ord-card__thumb { inline-size: 52px; block-size: 52px; border-radius: 12px; flex: none; background: #faf8f5; overflow: hidden; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(70,52,32,.05); }
.ord-card__thumb img { inline-size: 100%; block-size: 100%; object-fit: contain; padding: 5px; }
.ord-card__thumb svg { width: 22px; height: 22px; color: #cdb88e; }
.ord-card__id { font: 800 16px/1.2 var(--font-sans); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.ord-card__qty { display: inline-flex; align-items: center; gap: 5px; margin-block-start: 9px; background: #faf8f5; border-radius: 99px; padding: 4px 10px; font: 600 11.5px/1 var(--font-sans); color: var(--text-secondary); }
.ord-card__qty svg { width: 12px; height: 12px; color: #a8957a; }
.ord-card__divider { block-size: 1px; background: #f4eee4; margin-block: 13px; }
.ord-card__total-label { font: 700 10px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .5px; color: #a8957a; }
.ord-card__total { margin-block-start: 5px; font: 800 15.5px/1 var(--font-sans); color: var(--text); font-variant-numeric: tabular-nums; }
.ord-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-block-start: 14px; }
.ord-card__date { display: inline-flex; align-items: center; gap: 5px; font: 500 12px/1 var(--font-sans); color: #a8a29e; }
.ord-card__date svg { width: 13px; height: 13px; }

/* status badge */
.ord-badge { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 4px 10px; font: 700 10.5px/1.2 var(--font-sans); text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; }
.ord-badge__dot { inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor; flex: none; }
.ord-badge--s1, .ord-badge--s8 { background: #ECEAE6; color: #6B6660; }
.ord-badge--s2, .ord-badge--s3 { background: #E8EEF5; color: #39597A; }
.ord-badge--s4 { background: #FFF1CF; color: #A06E00; }
.ord-badge--s5 { background: #E5F1EC; color: #2F7A5B; }
.ord-badge--s6 { background: #EAF4E2; color: #4E7A24; }
.ord-badge--s7 { background: #FBECE9; color: #C8432F; }

/* actions */
.ord-act { inline-size: 36px; block-size: 36px; flex: none; border: 1px solid var(--card-border); border-radius: 10px; background: #fff; color: #57534e; display: grid; place-items: center; cursor: pointer; transition: all .15s; }
.ord-act svg { width: 17px; height: 17px; }
.ord-act:hover { background: #FFF7E6; border-color: #F3DFA8; color: #A06E00; }
.ord-act--cancel:hover { background: #FBECE9; border-color: #f0cfc6; color: #C8432F; }

/* footer / pagination */
.ord-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 16px 20px; border-block-start: 1px solid #f1ebe1; }
.ord-foot__info { font: 500 12.5px/1 var(--font-sans); color: var(--text-muted); }
.ord-pager { display: flex; align-items: center; gap: 6px; }
.ord-pager button { min-inline-size: 32px; block-size: 32px; padding: 0 7px; border: 1px solid var(--card-border); border-radius: 9px; background: #fff; color: var(--text-secondary); font: 700 12.5px/1 var(--font-sans); cursor: pointer; display: grid; place-items: center; transition: all .15s; }
.ord-pager button:hover:not(:disabled):not(.is-active) { background: #faf8f5; border-color: #e0d7c8; }
.ord-pager button.is-active { background: var(--accent); border-color: var(--accent); color: #1c1917; }
.ord-pager button:disabled { color: #cdc6bb; cursor: not-allowed; }
.ord-pager button svg { width: 15px; height: 15px; }
.ord-foot__per { display: flex; align-items: center; gap: 8px; font: 500 12.5px/1 var(--font-sans); color: var(--text-muted); }
.ord-foot__per select { padding: 6px 8px; }
.ord-empty { padding: 56px 20px; text-align: center; color: var(--text-muted); font: 500 14px/1.5 var(--font-sans); }

/* ===== Reseller Order Details page (ODV) ===== */
.odv { max-inline-size: 1180px; margin-inline: auto; padding: 30px 34px 64px; }
.odv-bc { margin-block-end: 16px; }

/* header card */
.odv-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--surface); border: 1px solid #efe7da;
            border-radius: 20px; box-shadow: 0 6px 24px rgba(70,52,32,.06); padding: 20px 24px; margin-block-end: var(--space-5); }
.odv-head__tile { inline-size: 56px; block-size: 56px; border-radius: 15px; flex: none; display: grid; place-items: center;
            background: linear-gradient(145deg, #FFDD8F, #F5A501); color: #5a3d00; box-shadow: 0 8px 18px rgba(245,165,1,.32); }
.odv-head__tile svg { width: 27px; height: 27px; }
.odv-head__info { min-inline-size: 0; }
.odv-head__row { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.odv-head__title { font: 800 23px/1.1 var(--font-sans); color: var(--text); letter-spacing: -.4px; }
.odv-head__placed { display: inline-flex; align-items: center; gap: 6px; margin-block-start: 7px; font: 500 13px/1 var(--font-sans); color: var(--text-muted); }
.odv-head__placed svg { width: 14px; height: 14px; }
.odv-pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 5px 12px; font: 700 12px/1 var(--font-sans); }
.odv-pill__dot { inline-size: 7px; block-size: 7px; border-radius: 50%; background: currentColor; }
.odv-pill--green { background: #EAF4E2; color: #4E7A24; }
.odv-pill--grey { background: #ECEAE6; color: #6B6660; }
.odv-pill--amber { background: #FFF3DC; color: #A06E00; }
.odv-pill--red { background: #FBECE9; color: #C8432F; }
.odv-msgbtn { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 7px; background: var(--accent); color: #1c1917; border: none;
            border-radius: 12px; padding: 11px 17px; font: 800 13.5px/1 var(--font-sans); text-decoration: none; box-shadow: 0 6px 16px rgba(245,165,1,.32); transition: transform .15s, box-shadow .15s, background .15s; }
.odv-msgbtn svg { width: 16px; height: 16px; }
.odv-msgbtn:hover { transform: translateY(-2px); background: var(--accent-hover); color: #1c1917; box-shadow: 0 10px 22px rgba(245,165,1,.4); }

/* two-column grid */
.odv-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
@media (max-width: 920px) { .odv-grid { grid-template-columns: 1fr; } }

.odv-card { background: var(--surface); border: 1px solid #efe7da; border-radius: 18px; box-shadow: 0 4px 18px rgba(70,52,32,.05); margin-block-end: 22px; }
.odv-card__head { display: flex; align-items: center; gap: 10px; padding: 17px 20px; border-block-end: 1px solid #f1ebe1; }
.odv-card__tick { inline-size: 4px; block-size: 18px; border-radius: 2px; background: var(--accent); }
.odv-card__title { font: 800 15.5px/1 var(--font-sans); color: var(--text); }
.odv-card__count { background: #EAF4E2; color: #4E7A24; border-radius: 999px; padding: 2px 9px; font: 700 11.5px/1 var(--font-sans); }
.odv-card__icon { inline-size: 30px; block-size: 30px; border-radius: 9px; display: grid; place-items: center; background: #F3E6DB; color: #8F4327; }
.odv-card__icon svg { width: 16px; height: 16px; }
.odv-card__body { padding: 20px; }

/* delivery stepper */
.odv-steps { display: flex; }
.odv-step { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; min-inline-size: 0; }
.odv-step::before { content: ''; position: absolute; inset-block-start: 20px; inset-inline-end: 50%; inline-size: 100%; block-size: 3px; background: #ece5da; z-index: 0; }
.odv-step:first-child::before { display: none; }
.odv-step.is-reached::before { background: #5B8A2A; }
.odv-step__node { position: relative; z-index: 1; inline-size: 40px; block-size: 40px; border-radius: 50%; display: grid; place-items: center; background: #f1ece4; color: #bdb3a5; transition: all .25s cubic-bezier(.4,0,.2,1); }
.odv-step__node svg { width: 18px; height: 18px; }
.odv-step.is-done .odv-step__node { background: #EAF4E2; color: #4E7A24; }
.odv-step.is-current .odv-step__node { background: #5B8A2A; color: #fff; box-shadow: 0 0 0 4px #D7E8BF, 0 6px 14px rgba(91,138,42,.3); }
.odv-step__label { margin-block-start: 9px; font: 600 11px/1.25 var(--font-sans); text-align: center; color: #a8a29e; max-inline-size: 78px; }
.odv-step.is-reached .odv-step__label { color: #4E7A24; }
.odv-step.is-current .odv-step__label { color: #4E7A24; font-weight: 700; }
.odv-cancelled-note { display: flex; align-items: center; gap: 7px; margin-block-start: 18px; background: #FBECE9; color: #C8432F; border: 1px solid #F3CFC8; border-radius: 12px; padding: 10px 14px; font: 600 12.5px/1.3 var(--font-sans); }
.odv-cancelled-note svg { width: 16px; height: 16px; flex: none; }

/* order items */
.odv-item { display: flex; align-items: center; gap: 16px; border: 1px solid #ece5da; border-radius: 16px; padding: 14px; transition: transform .18s, box-shadow .18s, border-color .18s; }
.odv-item + .odv-item { margin-block-start: 13px; }
.odv-item:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(70,52,32,.1); border-color: #e2d5c3; }
.odv-item__img { inline-size: 96px; block-size: 96px; border-radius: 14px; flex: none; background: #faf8f5; overflow: hidden; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(70,52,32,.05); }
.odv-item__img img { inline-size: 100%; block-size: 100%; object-fit: contain; padding: 7px; }
.odv-item__img svg { width: 30px; height: 30px; color: #cdb88e; }
.odv-item__main { flex: 1; min-inline-size: 0; }
.odv-item__name { font: 800 16px/1.3 var(--font-sans); color: var(--text); }
.odv-item__chips { display: flex; gap: 8px; flex-wrap: wrap; margin-block-start: 9px; }
.odv-chip { display: inline-flex; align-items: center; gap: 5px; background: #faf8f5; border-radius: 8px; padding: 5px 10px; font: 600 11.5px/1 var(--font-sans); color: var(--text-secondary); }
.odv-chip b { color: var(--text); font-weight: 700; }
.odv-item__total { text-align: end; flex: none; }
.odv-item__total-label { font: 700 10px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .5px; color: #a8957a; }
.odv-item__total-amt { margin-block-start: 6px; font: 800 18px/1 var(--font-sans); color: #A06E00; white-space: nowrap; }
@media (max-width: 560px) { .odv-item { flex-wrap: wrap; } .odv-item__total { text-align: start; inline-size: 100%; } }

/* customer card */
.odv-cust { display: flex; align-items: center; gap: 13px; }
.odv-cust__ava { inline-size: 46px; block-size: 46px; border-radius: 50%; flex: none; display: grid; place-items: center; background: #F3E6DB; color: #8F4327; font: 800 17px/1 var(--font-sans); }
.odv-cust__name { font: 800 15px/1.2 var(--font-sans); color: var(--text); }
.odv-cust__email { margin-block-start: 3px; font: 500 12.5px/1.3 var(--font-sans); color: var(--text-muted); word-break: break-word; }

/* summary card */
.odv-sumrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-end: 12px; font: 500 13.5px/1.3 var(--font-sans); color: var(--text-secondary); }
.odv-sumrow__val { font-weight: 700; color: var(--text); }
.odv-sumrow__val--free { color: #5B8A2A; }
.odv-sum-divider { block-size: 1px; background: #f1ebe1; margin-block: 14px; }
.odv-sumtotal { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.odv-sumtotal__label { font: 700 14px/1 var(--font-sans); color: var(--text); }
.odv-sumtotal__val { font: 800 20px/1 var(--font-sans); color: #1c1917; white-space: nowrap; }
.odv-paychip { display: flex; align-items: center; gap: 8px; margin-block-start: 16px; background: #EAF4E2; color: #4E7A24; border-radius: 12px; padding: 11px 13px; font: 600 12.5px/1.3 var(--font-sans); }
.odv-paychip svg { width: 16px; height: 16px; flex: none; }
.odv-support { inline-size: 100%; margin-block-start: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #fff; border: 1px solid var(--card-border);
            border-radius: 12px; padding: 11px; font: 700 13px/1 var(--font-sans); color: var(--text-secondary); text-decoration: none; cursor: pointer; transition: all .15s; }
.odv-support svg { width: 16px; height: 16px; }
.odv-support:hover { background: #FFF7E6; border-color: #F3DFA8; color: #A06E00; }
.odv-cancel-link { display: inline-flex; align-items: center; gap: 6px; margin-block-start: 14px; font: 600 12.5px/1 var(--font-sans); color: #a8a29e; background: none; border: none; cursor: pointer; }
.odv-cancel-link:hover { color: #C8432F; }
.odv-cancel-link svg { width: 14px; height: 14px; }

/* ===== Reseller My Invoices page (INV) — reuses .ord-* shell ===== */
.ord-stat--red::before { background: #C8432F; }
.ord-stat--red .ord-stat__icon { background: #FBECE9; color: #C8432F; }
.ord-stat--red .ord-stat__val { color: #C8432F; }

.ord-badge--paid { background: #EAF4E2; color: #4E7A24; }
.ord-badge--unpaid { background: #FFF1CF; color: #A06E00; }
.ord-badge--partial { background: #E8EEF5; color: #39597A; }

.inv-cols, .inv-row { display: grid; grid-template-columns: 1.15fr 1fr 1fr 1.1fr 1fr 70px; gap: 12px; align-items: center; }
.inv-cols { background: #faf8f5; padding: 13px 20px; font: 800 11px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .6px; color: #a8957a; }
.inv-cols span:nth-child(3) { text-align: end; }
.inv-cols span:nth-child(4) { text-align: center; }
.inv-cols span:nth-child(6) { text-align: end; }
.inv-row { padding: 14px 20px; border-block-start: 1px solid #f4eee4; transition: background .15s; }
.inv-row:hover { background: #fdfbf8; }
.inv-no { display: flex; align-items: center; gap: 11px; min-inline-size: 0; }
.inv-no__tile { inline-size: 38px; block-size: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; background: #FFF3DC; color: #A06E00; }
.inv-no__tile svg { width: 18px; height: 18px; }
.inv-no__code { font: 800 14px/1.2 var(--font-sans); color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-ref { font: 600 13px/1.2 var(--font-sans); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-ref a { color: #A06E00; text-decoration: none; }
.inv-ref a:hover { text-decoration: underline; }
.inv-amount { text-align: end; font: 800 14.5px/1.2 var(--font-sans); color: var(--text); font-variant-numeric: tabular-nums; }
.inv-statuscell { display: flex; justify-content: center; }
.inv-dates__issue { font: 700 13px/1.2 var(--font-sans); color: var(--text); }
.inv-dates__due { margin-block-start: 3px; font: 500 11.5px/1.2 var(--font-sans); color: var(--text-muted); }
.inv-actions { display: flex; gap: 7px; justify-content: flex-end; }
@media (max-width: 760px) {
    .inv-cols { display: none; }
    .inv-row { grid-template-columns: 1fr 1fr; gap: 8px 12px; }
    .inv-row .inv-statuscell { justify-content: flex-start; }
    .inv-row .inv-amount, .inv-row .inv-actions { text-align: start; justify-content: flex-start; }
}

/* ===== Reseller Payment History page (PAY) — reuses .ord-* shell ===== */
.pay-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-block-end: var(--space-5); }
@media (max-width: 980px) { .pay-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pay-stats { grid-template-columns: 1fr; } }
.pay-stat { position: relative; background: var(--surface); border: 1px solid #efe7da; border-radius: 18px; box-shadow: 0 6px 24px rgba(70,52,32,.06);
            padding: 18px 18px 18px 22px; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.pay-stat:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(70,52,32,.12); }
.pay-stat::before { content: ''; position: absolute; inset-inline-start: 0; inset-block: 0; inline-size: 4px; }
.pay-stat--gold::before { background: linear-gradient(180deg, #F5A501, #E08A00); }
.pay-stat--green::before { background: #5B8A2A; }
.pay-stat--blue::before { background: #39597A; }
.pay-stat--brown::before { background: #8F4327; }
.pay-stat__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.pay-stat__label { font: 700 12.5px/1.2 var(--font-sans); color: #8a847d; }
.pay-stat__icon { inline-size: 38px; block-size: 38px; border-radius: 11px; flex: none; display: grid; place-items: center; }
.pay-stat__icon svg { width: 19px; height: 19px; }
.pay-stat--gold .pay-stat__icon { background: #FFF3DC; color: #A06E00; }
.pay-stat--green .pay-stat__icon { background: #EAF4E2; color: #4E7A24; }
.pay-stat--blue .pay-stat__icon { background: #E8EEF5; color: #39597A; }
.pay-stat--brown .pay-stat__icon { background: #F3E6DB; color: #8F4327; }
.pay-stat__val { margin-block-start: 10px; font: 800 26px/1 var(--font-sans); color: var(--text); letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.pay-stat__sub { margin-block-start: 6px; font: 600 11.5px/1 var(--font-sans); color: #4E7A24; }

/* filter row + print */
.pay-filters { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; padding: 0 20px 16px; }
.pay-filters .ord-search { flex: 1; min-inline-size: 220px; }
.pay-method { min-inline-size: 180px; }
.pay-print { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--card-border); border-radius: 11px;
            padding: 9px 14px; font: 700 13px/1 var(--font-sans); color: var(--text-secondary); cursor: pointer; transition: all .15s; }
.pay-print svg { width: 15px; height: 15px; }
.pay-print:hover { background: #FFF7E6; border-color: #F3DFA8; color: #A06E00; }

/* table */
.pay-cols, .pay-row { display: grid; grid-template-columns: 1fr 1.2fr 1fr 0.9fr 1.1fr 0.95fr; gap: 12px; align-items: center; }
.pay-cols { background: #faf8f5; padding: 13px 20px; font: 800 11px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .6px; color: #a8957a; }
.pay-cols span:nth-child(4) { text-align: end; }
.pay-cols span:nth-child(5), .pay-cols span:nth-child(6) { text-align: center; }
.pay-row { padding: 14px 20px; border-block-start: 1px solid #f4eee4; transition: background .15s; }
.pay-row:hover { background: #fdfbf8; }
.pay-date__d { font: 700 13px/1.2 var(--font-sans); color: var(--text); font-variant-numeric: tabular-nums; }
.pay-date__t { margin-block-start: 3px; font: 500 11.5px/1 var(--font-sans); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pay-ref { display: flex; align-items: center; gap: 8px; min-inline-size: 0; }
.pay-ref__ic { inline-size: 30px; block-size: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; background: #FFF3DC; color: #A06E00; }
.pay-ref__ic svg { width: 15px; height: 15px; }
.pay-ref__txt { font: 700 13px/1.2 var(--font-sans); color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pay-inv { font: 600 13px/1.2 var(--font-sans); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.pay-amount { text-align: end; font: 800 14px/1.2 var(--font-sans); color: var(--text); font-variant-numeric: tabular-nums; }
.pay-methodcell, .pay-statuscell { display: flex; justify-content: center; }
.pay-method-chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 99px; padding: 4px 11px; font: 700 11.5px/1 var(--font-sans); white-space: nowrap; }
.pay-method-chip__dot { inline-size: 7px; block-size: 7px; border-radius: 50%; background: currentColor; flex: none; }
.pay-method-chip--bank { background: #E8EEF5; color: #39597A; }
.pay-method-chip--cash { background: #EAF4E2; color: #4E7A24; }
.pay-method-chip--card { background: #F3E6DB; color: #8F4327; }
.pay-method-chip--cheque { background: #FFF1CF; color: #A06E00; }
.pay-method-chip--online { background: #ECE6F5; color: #6B4E9A; }
.pay-method-chip--other { background: #ECEAE6; color: #6B6660; }
.pay-badge { display: inline-flex; align-items: center; gap: 5px; border-radius: 99px; padding: 4px 10px; font: 700 10.5px/1.2 var(--font-sans); text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; }
.pay-badge__dot { inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pay-badge--completed { background: #EAF4E2; color: #4E7A24; }
.pay-badge--pending { background: #FFF1CF; color: #A06E00; }
.pay-badge--failed { background: #FBECE9; color: #C8432F; }
@media (max-width: 780px) {
    .pay-cols { display: none; }
    .pay-row { grid-template-columns: 1fr 1fr; gap: 8px 12px; }
    .pay-row .pay-amount, .pay-row .pay-methodcell, .pay-row .pay-statuscell { justify-content: flex-start; text-align: start; }
}
@media print {
    .pay-filters, .ord-foot, .pay-print, .pay-stats { display: none !important; }
}

/* ===== Reseller Statement of Account page (STM) — reuses .ord-* + .pay-stat ===== */
.pay-stat--red::before { background: #C8432F; }
.pay-stat--red .pay-stat__icon { background: #FBECE9; color: #C8432F; }
.pay-stat--red .pay-stat__val { color: #C8432F; }
.pay-stat__sub--muted { color: var(--text-muted); }

/* filter bar */
.stm-toolbar { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: flex-end; padding: 0 20px 16px; }
.stm-field { display: flex; flex-direction: column; gap: 5px; }
.stm-field > label { font: 700 10.5px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .5px; color: #a8957a; }
.stm-field .input { min-inline-size: 150px; }
.stm-generate { display: inline-flex; align-items: center; gap: 7px; background: var(--accent); color: #1c1917; border: none; border-radius: 11px;
            padding: 10px 18px; font: 800 13px/1 var(--font-sans); cursor: pointer; box-shadow: 0 4px 12px rgba(245,165,1,.3); transition: transform .15s, box-shadow .15s, background .15s; }
.stm-generate svg { width: 15px; height: 15px; }
.stm-generate:hover { transform: translateY(-1px); background: var(--accent-hover); box-shadow: 0 8px 20px rgba(245,165,1,.5); }

/* ledger table */
.stm-cols, .stm-row { display: grid; grid-template-columns: 1fr 1.1fr 1.7fr 1fr 1fr 1.15fr; gap: 12px; align-items: center; }
.stm-cols { background: #faf8f5; padding: 13px 20px; font: 800 11px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .6px; color: #a8957a; }
.stm-cols span:nth-child(4), .stm-cols span:nth-child(5), .stm-cols span:nth-child(6) { text-align: end; }
.stm-row { padding: 13px 20px; border-block-start: 1px solid #f4eee4; transition: background .15s; }
.stm-row:hover { background: #fdfbf8; }
.stm-date { font: 600 12.5px/1.2 var(--font-sans); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.stm-txn { font: 700 12.5px/1.2 var(--font-sans); color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stm-desc { display: flex; align-items: center; gap: 9px; min-inline-size: 0; }
.stm-desc__label { font: 600 13px/1.3 var(--font-sans); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stm-num { text-align: end; font: 700 13.5px/1.2 var(--font-sans); font-variant-numeric: tabular-nums; }
.stm-num--debit { color: #C8432F; }
.stm-num--credit { color: #4E7A24; }
.stm-num--muted { color: var(--text-faint); }
.stm-balance { text-align: end; font: 800 13.5px/1.2 var(--font-sans); color: #1c1917; font-variant-numeric: tabular-nums; }

/* opening row (muted, pinned) + period totals footer (highlighted) */
.stm-open { background: #faf8f5; }
.stm-open .stm-desc__label { color: var(--text-muted); font-weight: 700; }
.stm-totals { background: #FBF6EC; border-block-start: 2px solid #f0e3cb; padding: 14px 20px; }
.stm-totals .stm-desc__label { font-weight: 800; color: #1c1917; }
.stm-totals .stm-num, .stm-totals .stm-balance { font-weight: 800; }

/* type chip */
.stm-chip { display: inline-flex; align-items: center; gap: 5px; border-radius: 99px; padding: 4px 10px; font: 700 10.5px/1.2 var(--font-sans); text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; flex: none; }
.stm-chip__dot { inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor; flex: none; }
.stm-chip--invoice { background: #FFF1CF; color: #A06E00; }
.stm-chip--payment { background: #EAF4E2; color: #4E7A24; }
.stm-chip--credit_note { background: #E8EEF5; color: #39597A; }
.stm-chip--adjustment { background: #F3E6DB; color: #8F4327; }
@media (max-width: 820px) {
    .stm-cols { display: none; }
    .stm-row { grid-template-columns: 1fr 1fr; gap: 6px 12px; }
    .stm-row .stm-num, .stm-row .stm-balance { text-align: start; }
}
@media print { .stm-toolbar { display: none !important; } }