/**
 * Shipgoods shop brand skin — v3 "Sections on paper"
 * ==================================================
 * Replaces the Fulfillant skin for the shipgoods.eu tenant only.
 * Scope: shop module only (linked from application/shop/view templates).
 * Do NOT link this from the admin module.
 *
 * Drop-in: same file name, same selectors as the Fulfillant skin, so it can
 * be swapped without touching a single template. Everything below is colour,
 * type, spacing, radius and shadow — no markup is assumed beyond what the
 * templates already render, nothing functional is hidden.
 *
 * The house style in one line: cream paper, near-black ink, one orange for
 * things you can act on, hairlines instead of borders, and soft layered
 * shadows instead of hard edges.
 *
 * How the file is built (tokens -> primitives -> components -> shell -> pages)
 * ---------------------------------------------------------------------------
 * 0. Tokens       palette, ink/paper ramps, type scale, spacing, heights,
 *                 radius family, depth, motion, grain
 * 1. Base         fonts, body, links, ambient grain + glow, reduced motion
 * 2. Primitives   written ONCE as selector lists: LABEL, NUM, BUTTON
 *                 (FILLED / GHOST / INK / DANGER / ICON / LINK), FIELD,
 *                 SELECT, select2, DATE PAIR, CHECKBOX, SWITCH, SEGMENTED,
 *                 CHIP / COUNT, CARD, TILE, DARKCARD, TABLE, LIST HEADER,
 *                 PAGER, BATCH BAR, PAGE HEADER, EMPTY, MODAL / MENU / SCRIM
 * 3. Shell        top bar (64), user cluster, dropdowns, sidebar, tab strip
 *                 (44), gutter, footer
 * 4. Pages        one block per template: geometry and page-specific
 *                 selectors only; every colour comes from a primitive
 * 5. Utilities    H-ui colour classes mapped onto the palette, Lodecom line
 * 6. Appendix     inert blocks for templates that do not link the skin
 *
 * Rules are unscoped or id-scoped (never body.shop): the newer screens carry
 * no class on <body>. !important appears only against: index.html's inline
 * <style> (shell), inline style="" attributes, Product Confirmation's late
 * <style>, select2's inline widths, and H-ui rules that are themselves
 * !important. Each such declaration is marked with a `!:` comment.
 *
 * Search / Export placement: bottom-right of the filter card via flex order
 * (visual only; tab order stays DOM order). Fallback if the literal reading
 * is wanted: delete the `order` values on #searchForm > .SelectorHolderdiv
 * and #searchForm > .btn-success (keep margin-left:auto), and the Payments
 * display:contents block in §4 Order Cost.
 *
 * Not fixable from CSS (needs a template change on the partner's side)
 * --------------------------------------------------------------------
 * - The header counters render "-" as a placeholder and a live "0" as a
 *   badge: :empty never matches, so the template must blank a zero count.
 * - Text nodes cannot be restyled or removed: "Welcome [ ]" around the
 *   user name, "Currency:", the full-width "(n)" counts inside chip labels,
 *   "Total:", the empty "( ) ( )" chip, the leaked {gt name=...} template
 *   string in a product line, the "Array" tracking value, "SHOP_NAME",
 *   "OAuth 授权", "Fulfillant" in the List brand tile, <title>, favicon,
 *   body.Fulfillant. (The login/register copyright line is the one
 *   exception: the skin collapses it and draws the Lodecom legal line with
 *   ::after; see the last block of §5.)
 * - Generated titles ("Orders", "Trace", "Daily Cost", ...) are English CSS
 *   strings: no i18n, and the Feedbacks tab (same template) reads "Orders".
 * - The sidebar never receives a current/active class from H-ui, so the
 *   "you are here" state is hover/focus only.
 * - 12 templates (the four Logistics pages, api_credential_index,
 *   products_stock_history, news_extra_service*, index_welcome_transactions,
 *   order_count_cell, admin_delete_related, tutorial_woo_store) never link
 *   this file. Their rules (§4 API Keys, §6) are inert until they do.
 * - Product Confirmation's <style> loads after the skin; !important is
 *   structural there, not a choice.
 * - select2 sets inline widths and appends its dropdown to <body>, so those
 *   rules are !important and global. If the form is re-rendered without
 *   re-running the select2 init, the native listbox shows (kept at 38px).
 * - Safari renders type=date as a text field: height comes from height
 *   alone, never from line-height or appearance:none.
 * - The Welcome page doubling in the preview is an export artefact (an empty
 *   AJAX URL fetches the page into itself); the :not(li) rule hides the
 *   copy but cannot stop the fetch loop. It is a no-op in production.
 * - Google Fonts is blocked in China: self-host the two families and
 *   replace the @import below.
 * - Payments: the calendar addon next to the two date fields is an empty
 *   circle with no handler in the shipped template, so it is hidden here.
 *   Remove that rule if a datetimepicker is ever bound to it.
 * - Topup: the partner greys "Pay Now" on purpose (.paynow-maintenance-gray).
 *   That state is kept, only moved onto the ink ramp.
 * - Topup: the balance line is "<font>: <span class=price></span></font>"
 *   with the label text missing; while the price span is empty the lone
 *   colon is hidden (:has), it returns once JS fills it.
 * - Welcome: #welcome-transactions-list > :not(li) is hidden; if the live
 *   endpoint ever returns a non-li node swap that rule for a preview-only
 *   guard before shipping.
 * - :has(), display:contents and aspect-ratio need 2023+ engines; older
 *   engines fall back to the block layout the templates ship.
 * - The 64px bar and 44px tab strip fight index.html's inline sheet: verify
 *   #mobilemenu, .dislpayArrow and the 768 breakpoint in production.
 *
 * Contrast contract (measured pairs)
 * ----------------------------------
 * - FILLED label: paper #fbf2e6 on orange #e05828 = 3.39:1 at 13px/600.
 *   CONSCIOUS AA EXCEPTION (flagged for the owner's final yes): this is the
 *   brand's own pair (shipgoods.eu globals.css: background #e05828, color
 *   #fbf2e6). No size or ink change reaches 4.5:1 without leaving the
 *   brand (ink on orange reads as a warning; a darker fill would be a
 *   second orange). One per view. To lift it later: fill the FILLED
 *   recipe with #bf461b (paper on it = 4.62:1) and keep #e05828 for the
 *   seal, dots, glyphs and count badges.
 * - Hover TEXT on white (ghost buttons, the base a:hover) uses
 *   --brand-primary-hover #c64b1f = 4.74:1 on white. Off white (cream,
 *   surface, a row wash) it drops to 3.9-4.3:1, so the LINK recipe, the
 *   month rows and the sortable heads keep their ink on hover and let a
 *   1.5px orange underline carry the state. #e05828 hovers only fills,
 *   underlines and glyphs.
 * - Orange is never text: required marks and errors are --brand-danger,
 *   links are ink, counts on the bar are ink on orange, the active chip is
 *   ink on a white thumb.
 * - Captions, dates, ids, dashes, the footer line, clickable glyphs at rest:
 *   --ink-62 = 4.72:1 on surface, 4.90:1 on white; on the bare cream paper
 *   (grain + glow composite to ~4.4:1) captions take --ink-66 = 5.0:1.
 *   --ink-45 / --ink-38 are reserved for separators and decorative dots.
 * - Placeholders --ink-62 = 4.9:1 on white; login/register .62 too.
 * - Control edges at rest (checkbox ring, switch track): --ink-50 = 3.3:1
 *   on white (the 3:1 non-text floor).
 * - ok CHIP (--brand-ok on --ok-11): 5.13:1 on white, 4.66:1 on surface,
 *   4.25:1 on bare cream — ok chips sit inside white or surface containers.
 */

/* Optional. Falls back to the system stack when unreachable (China, offline),
   and nothing breaks — only the typeface changes. Self-host these two files
   if you would rather not depend on Google. */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

/* ============================================================================
   0. TOKENS
   ========================================================================== */
:root {
  /* Brand */
  --brand-primary: #e05828;        /* the one orange — actions and active state */
  --brand-primary-hover: #c64b1f;  /* pressed / hover: darker, not lighter */
  --brand-on-primary: #fbf2e6;     /* text on the orange */
  --brand-ok: #2f6f4f;             /* positive money, success, paid */
  --brand-danger: #b3261e;         /* genuine errors only, text-first */

  /* Paper */
  --brand-text: #1c1917;
  --brand-ink: var(--brand-text);
  --brand-bg: #f6e6d5;             /* the page behind everything */
  --brand-surface: #fbf2e6;        /* cards and panels */
  --brand-white: #ffffff;          /* inputs and table bodies stay white */

  /* Ink ramp — the only greys that exist */
  --ink-4: rgba(28, 25, 23, 0.04);   /* hover wash */
  --ink-6: rgba(28, 25, 23, 0.06);   /* quiet fill, track */
  --ink-8: rgba(28, 25, 23, 0.08);   /* hairline */
  --ink-11: rgba(28, 25, 23, 0.11);  /* header rule */
  --ink-12: rgba(28, 25, 23, 0.12);  /* control border */
  --ink-22: rgba(28, 25, 23, 0.22);  /* dots, image edges */
  --ink-38: rgba(28, 25, 23, 0.38);  /* chevrons, disabled, dashes */
  --ink-45: rgba(28, 25, 23, 0.45);  /* dates, ids */
  --ink-62: rgba(28, 25, 23, 0.62);  /* meta, captions, placeholders */
  --ink-66: rgba(28, 25, 23, 0.66);  /* captions set straight on the cream paper (grain + glow darken it) */
  --ink-50: rgba(28, 25, 23, 0.50);  /* control edges at rest: checkbox ring, switch track (3.3:1 on white) */
  --ink-58: var(--ink-62);           /* legacy name, same value */
  --ink-70: rgba(28, 25, 23, 0.70);  /* secondary text */
  --brand-hairline: var(--ink-8);

  /* Paper ramp — text and lines on ink surfaces */
  --paper-100: var(--brand-bg);
  --paper-88: rgba(246, 230, 213, 0.88);
  --paper-72: rgba(246, 230, 213, 0.72);
  --paper-55: rgba(246, 230, 213, 0.55);
  --paper-25: rgba(246, 230, 213, 0.25);
  --paper-16: rgba(246, 230, 213, 0.16);
  --paper-12: rgba(246, 230, 213, 0.12);
  --paper-8: rgba(246, 230, 213, 0.08);

  /* Tints */
  --accent-5: rgba(224, 88, 40, 0.05);
  --accent-6: rgba(224, 88, 40, 0.06);
  --accent-10: rgba(224, 88, 40, 0.10);
  --accent-16: rgba(224, 88, 40, 0.16);
  --accent-40: rgba(224, 88, 40, 0.40);
  --accent-glow: 0 4px 14px rgba(224, 88, 40, 0.28);
  --accent-glow-hover: 0 6px 20px rgba(224, 88, 40, 0.35);
  --ok-11: rgba(47, 111, 79, 0.11);
  --danger-10: rgba(179, 38, 30, 0.10);

  /* Scrims and glass */
  --scrim: rgba(28, 25, 23, 0.42);
  --scrim-deep: rgba(28, 25, 23, 0.86);
  --glass-ink: rgba(28, 25, 23, 0.88);
  --glass-surface: rgba(251, 242, 230, 0.92);
  --blur: 18px;

  /* Type */
  --brand-font-body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --brand-font-heading: var(--brand-font-body);
  --brand-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale (font shorthands) + tracking */
  --t-display: 700 34px/1.05 var(--brand-font-body);
  --t-stat: 700 26px/1.1 var(--brand-font-body);
  --t-title: 700 20px/26px var(--brand-font-body);
  --t-card: 700 16.5px/22px var(--brand-font-body);
  --t-sub: 600 14.5px/20px var(--brand-font-body);
  --t-row: 600 13.5px/20px var(--brand-font-body);
  --t-body: 400 13px/20px var(--brand-font-body);
  --t-ui: 500 13px/1 var(--brand-font-body);
  --t-meta: 400 12.5px/18px var(--brand-font-body);
  --t-caption: 500 11.5px/16px var(--brand-font-mono);
  --t-label: 500 11px/16px var(--brand-font-mono);
  --t-chip: 600 10.5px/1 var(--brand-font-mono);
  --ls-display: -0.03em;
  --ls-stat: -0.02em;
  --ls-title: -0.015em;
  --ls-card: -0.01em;
  --ls-label: 0.12em;
  --ls-chip: 0.08em;

  /* Space */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;

  /* Heights: one per scale */
  --ctl: 38px;       /* fields, selects, dates, form / header buttons */
  --ctl-row: 32px;   /* row actions */
  --ctl-sm: 28px;    /* chips, segmented items, tab pills, batch, pager */
  --ctl-lg: 44px;    /* login / register / account submit, #paynow */
  --hit: 36px;       /* round icon targets */
  --chip: 22px;
  --row: 48px;

  /* Radius: 10 fields, 14 tiles and popovers, 20 cards, 999 pills */
  --brand-radius-sm: 10px;
  --brand-radius-md: 14px;
  --brand-radius-lg: 20px;
  --brand-radius-pill: 999px;

  /* Layout */
  --gutter: 24px;
  --content-max: 1360px;

  /* Depth from layered softness, never from a heavier line. */
  --ring-hair: 0 0 0 1px rgba(28, 25, 23, 0.08);
  --ring-edge: 0 0 0 1px rgba(28, 25, 23, 0.12);
  --sheen: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --shadow-card: 0 0 0 1px rgba(28, 25, 23, 0.08), 0 1px 2px rgba(28, 25, 23, 0.04), 0 8px 24px rgba(28, 25, 23, 0.06);
  --shadow-hover: 0 0 0 1px rgba(28, 25, 23, 0.12), 0 2px 4px rgba(28, 25, 23, 0.04), 0 14px 34px rgba(28, 25, 23, 0.09);
  --shadow-menu: 0 0 0 1px rgba(28, 25, 23, 0.08), 0 6px 16px rgba(28, 25, 23, 0.08), 0 18px 44px rgba(28, 25, 23, 0.12);
  --shadow-modal: 0 2px 8px rgba(28, 25, 23, 0.08), 0 24px 64px rgba(28, 25, 23, 0.24);
  --shadow-ink: 0 0 0 1px rgba(246, 230, 213, 0.10), 0 2px 4px rgba(28, 25, 23, 0.08), 0 14px 28px -10px rgba(28, 25, 23, 0.34); /* depth held under the card: no smudge on the card 16px below */
  --ring-focus: 0 0 0 2px var(--brand-bg), 0 0 0 4px var(--brand-primary); /* solid orange past a paper gap: 3.4-3.75:1, the WCAG 1.4.11 state floor */
  --brand-shadow-focus: 0 0 0 3px var(--accent-16);
  /* legacy names */
  --brand-shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.04);
  --brand-shadow-md: var(--shadow-card);
  --brand-shadow-lg: var(--shadow-menu);
  --brand-shadow-raised: var(--ring-edge), 0 1px 2px rgba(28, 25, 23, 0.06);
  --brand-shadow-dark: var(--shadow-ink);

  /* Grain: the house feTurbulence tile (5% ink) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.11 0 0 0 0 0.1 0 0 0 0 0.09 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Motion */
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 260ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --lift: -1px;

  /* Domain stats pages read an inline --primary (exported to templates) */
  --primary: var(--brand-primary);
}

/* ============================================================================
   1. BASE
   ========================================================================== */
body,
button,
input,
select,
textarea,
.btn,
.table,
.Hui-aside,
.navbar,
.dropDown-menu {
  font-family: var(--brand-font-body) !important; /* !: H-ui sets its own stack on each */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  color: var(--brand-text);
  line-height: 1.6;
  background-color: var(--brand-bg);
  font-variant-numeric: tabular-nums;
}

/* Native controls and selected text speak the palette: copying an order id
   or a tracking number paints an orange tint, never the system blue. */
:root {
  accent-color: var(--brand-primary);
  color-scheme: light;
}

::selection {
  background: var(--accent-16);
  color: var(--brand-text);
}

.brandC ::selection,
#welcome-balance-card ::selection,
.logodiv ::selection {
  background: var(--paper-25);
  color: var(--paper-100);
}

/* Product Confirmation paints its own grey after this file loads; the
   account page hangs a network photo off <body>. Paper, ink and grain. */
html body,
#shopLogin {
  color: var(--brand-text);
  background-color: var(--brand-bg);
  background-image: var(--grain) !important;      /* !: late <style> */
}

/* One glow per screen, always under the content. In the shell the tab strip
   paints its first 44px and every document continues the same ellipse from
   44px above its top edge (the tab iframe fills the article box), so the
   wash is one shape and cards, fields and menus stay true white. The glow
   is painted once (no-repeat): a tiled ellipse restarts at every root
   height and draws a hard seam down a long, scrolled document. */
html:not(:has(.Hui-article-box)):not(:has(#shopLogin)) body {
  background-image: radial-gradient(520px 320px at 100% -44px, rgba(224, 88, 40, 0.06), transparent), var(--grain) !important; /* !: late <style> (as the paper rule above) */
  background-repeat: no-repeat, repeat !important; /* !: late <style> */
}

/* Login paints it from the root. */
html:has(#shopLogin)::before {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  width: 520px;
  height: 320px;
  background: radial-gradient(farthest-side at 100% 0%, rgba(224, 88, 40, 0.06), transparent); /* the shell's corner wash, not a spot */
  pointer-events: none;
  z-index: -1;
}

hr {
  height: 0;
  border: 0;
  border-top: 1px solid var(--ink-11);
  background: transparent;
  color: transparent;
  margin: 28px 0;
}

h1, h2, h3, h4, h5, h6,
.welcome-content h2,
.page-container > .oneSec > h2 {
  font-family: var(--brand-font-heading) !important; /* !: H-ui heading stack */
  font-weight: 700;
  letter-spacing: var(--ls-card);
  color: var(--brand-ink);
}

/* Links are ink; orange arrives on hover. Orange never colours a link. */
a {
  color: var(--brand-text);
}

a:hover,
a:focus {
  color: var(--brand-primary-hover); /* hover text is the darker orange (4.74:1 on white) */
}

input,
select,
textarea,
option,
.input-text,
.select,
.select2-search__field {
  color: var(--brand-text);
}

label {
  color: var(--ink-62);
  font-weight: 500;
}

/* Motion: named properties, never all. */
.btn,
.label,
.badge,
.input-text,
.textarea,
.select,
.form-control,
.select2-selection,
.Hui-aside .menu_dropdown dt,
.Hui-aside .menu_dropdown dd li a,
#Hui-tabNav .acrossTab li,
.tabBar span,
.tab-nav .tab-item,
.pc-scope label,
.divul,
.pc-stat,
.pc-card,
.dc-stat-card,
.onePackage,
.Huifold .item,
.pc-sib {
  transition: color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease),
    opacity var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important; /* !: accessibility override */
    animation-duration: 0.01ms !important;  /* !: accessibility override */
  }
}

/* ============================================================================
   2. PRIMITIVES — each recipe written once as a selector list
   ========================================================================== */

/* --- LABEL: quiet mono caption ------------------------------------------- */
.table thead th,
.table > thead > tr > th,
.table th.text-r,
.table th.mobile-5,
.table tbody tr.warning > th,
.divtbody .divth,
.divtbody .divinfo,
.divtbody th,
.list_title > div,
.divbatch .r,
.divbatch label,
.divstatus > span.r,
.bg-1.bk-gray > .r,
.mt-5.mb-5 > span.r,
#searchForm #timeSelectorHolder > span,
#timeSelectorHolder > div:has(input[type="checkbox"]),
.input-group.date label,
#balanceDateForm > span,
.brandC p.p1,
.dc-card-label,
.dc-stat-card .meta .label,
.dc-toolbar label,
.dc-table thead th,
.ak-table thead th,
.ak-header .sub,
.ak-form label,
#Hui-userbar .dropDown-menu .languageLi:first-child a,
.Hui-aside::before,
.breadcrumb:has(> .c-gray),
.posinput .name,
.addOneProduct label,
#my-awesome-dropzone > label[style],
#messdiv .formControls .title,
.Huialert::before,
.online_payment::before,
.addForm::before,
#order-info .page-container::before,
#order-info .mt-20::before,
.divtable .c-999 .f-12,
.divtable span.f-12,
.oneTicket td:first-child,
.pc-sib:has(.k:empty)::before {
  font: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-62);
  white-space: nowrap;
}

/* On the bare cream paper .62 composites to ~4.4:1 (grain and the corner
   glow darken the cream); the labels that sit straight on it take .66
   (5.0:1). On white and surface .62 stays (4.7-4.9:1). */
.divtbody .divth,
.divtbody .divinfo,
.divtbody th,
.divtbody .table tbody tr.warning > th,
.divbatch .r,
.divbatch label,
.divstatus > span.r,
.bg-1.bk-gray > .r,
.mt-5.mb-5 > span.r,
.breadcrumb:has(> .c-gray),
.online_payment::before,
.addForm::before,
#order-info .page-container::before,
#order-info .mt-20::before {
  color: var(--ink-66);
}

/* --- NUM: mono figures --------------------------------------------------- */
.divtable font.c-999,
.divtable .divbotm_3 .c-999,
.divtable font.mr-5,
.divtable .divtop_3,
.listTable td.va-t,
.list_ul li .div3,
.list_ul li .div4,
.divbatch strong,
.divstatus > span.r strong,
.bg-1.bk-gray > .r strong,
.mt-5.mb-5 > span.r strong,
.pricenumber,
font.pricenumber,
.pc-price,
.dc-table .num-cell,
.dc-stat-card .meta .num,
.oc-cell,
#order-info table:has(> thead) > tbody td:nth-child(1),
#order-info table:has(> thead) > tbody td:nth-child(5),
#order-info table:has(> thead) > tbody td:nth-child(6),
#order-info table:has(> thead) > tbody td:nth-child(7),
.ak-table td.token-mono,
code,
.token-value {
  font-family: var(--brand-font-mono);
  font-variant-numeric: tabular-nums;
}

/* --- BUTTON base --------------------------------------------------------- */
.btn,
a.btn,
button.btn,
.pc-send,
.dc-toolbar .btn-search,
.dc-toolbar .btn-reset,
.dc-header .refresh-btn,
.dc-header .back-btn,
.top-up-invoice-btn,
.shopify-help-btn,
#oauth-btn,
a.stock-inout,
.pc-mark-unread,
#btnSelAll,
#btnCreate,
#btnCopyToken,
.lg-btn,
input[type="file"]::file-selector-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  height: var(--ctl);
  padding: 0 18px;
  margin: 0;
  line-height: 1;
  font: 600 13px/1 var(--brand-font-body);
  letter-spacing: 0;
  color: var(--brand-text);
  background-color: var(--brand-white);
  border: 0;
  border-radius: var(--brand-radius-pill) !important; /* !: H-ui .radius */
  box-shadow: var(--ring-edge);
  white-space: nowrap;
  vertical-align: middle;
  text-decoration: none;
  text-shadow: none;
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
    transform var(--dur-1) var(--ease);
}

.btn:active,
.pc-send:active,
#btnCreate:active {
  transform: scale(0.98);
}

.btn:focus-visible,
.pc-send:focus-visible,
#btnCreate:focus-visible,
.pc-mark-unread:focus-visible,
#btnSelAll:focus-visible {
  box-shadow: var(--ring-focus) !important; /* !: state must beat every recipe */
  outline: 0;
}

.btn.disabled,
.btn[disabled],
button[disabled] {
  opacity: 0.5;
  cursor: default;
  transform: none;
}

.btn .Hui-iconfont {
  font-size: 14px !important; /* !: H-ui sizes the glyph */
  margin: 0;
  color: inherit;
  line-height: 1;
}

.btn .Hui-iconfont:empty {
  display: none; /* an empty glyph slot would still take the 6px gap */
}

/* Sizes: --ctl-sm in bars, --ctl-row in rows. (size-L never ships.) */
.btn.size-MINI,
.Hui-tabNav-more .btn,
.btn.btn-xs,
.btn.btn-sm {
  height: var(--ctl-sm);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 500;
}

.btn.size-S,
a.btn-success.size-S.text-right[style] {
  height: var(--ctl-row) !important; /* !: inline height:31px */
  line-height: 1 !important;         /* !: inline line-height:24px */
  padding: 0 14px;
  font-size: 12.5px;
  font-weight: 500;
}

/* FILLED: the one primary action per view. */
.btn.btn-primary,
.btn.btn-success,
button.btn-success,
#btnExport,
#shopLogin #submit,
.page-container #submit,
#paynow,
button#paynow,
.top-store-title a[title="add_new_store"],
a[title="add_new_employee_account"],
#messdiv button.btn-success.r,
#my-awesome-dropzone button.btn-success.r,
.dc-toolbar .btn-search,
#btnCreate,
#btnConfirm,
.lg-btn-primary,
.addOneProduct button.btn-lg {
  background-color: var(--brand-primary) !important; /* !: H-ui .btn-success / inline */
  color: var(--brand-on-primary) !important;         /* !: H-ui .btn-success */
  font-weight: 600;
  box-shadow: var(--accent-glow);
}

.btn.btn-primary:hover,
.btn.btn-success:hover,
button.btn-success:hover,
#btnExport:hover,
#shopLogin #submit:hover,
.page-container #submit:hover,
#paynow:hover,
.top-store-title a[title="add_new_store"]:hover,
a[title="add_new_employee_account"]:hover,
#messdiv button.btn-success.r:hover,
#my-awesome-dropzone button.btn-success.r:hover,
.dc-toolbar .btn-search:hover,
#btnCreate:hover,
#btnConfirm:hover,
.lg-btn-primary:hover,
.addOneProduct button.btn-lg:hover,
.btn.btn-primary:focus,
.btn.btn-success:focus,
#btnExport:focus,
#btnConfirm:focus,
#btnCreate:focus {
  background-color: var(--brand-primary-hover) !important; /* !: H-ui :hover */
  color: var(--brand-on-primary) !important;               /* !: H-ui :hover */
  box-shadow: var(--accent-glow-hover);
  transform: translateY(var(--lift));
  opacity: 1;
}

.btn.btn-primary:active,
.btn.btn-success:active,
#btnConfirm:active {
  box-shadow: none;
  transform: scale(0.98);
}

/* GHOST: every secondary action. White, edge ring, ink; hover turns the
   text orange, no fill, no lift. Wins ties with FILLED by coming later. */
form .btn-success ~ .btn-success,
.btn-success[id*="export" i]:not(#btnExport),
.btn-success[class*="export" i],
.btn-success[class*="CSV"],
.btn-success[id*="CSV"],
.btn[name="export"],
#searchForm .btn-primary,
.page-container > .mb-15 > form .btn-primary,
a.btn-success.size-S.text-right,
.btn-default,
.btn.btn-default,
.btn-primary-outline,
.btn.btn-primary-outline,
.btn-secondary,
.btn-warning,
.btn.btn-warning,
.breadcrumb .btn.r,
.fileinput-button,
.btn.fileinput-button,
.divbatch .btn,
.divbotm_6 .btn,
.listTable a.btn.size-S,
.pc-mark-unread,
#btnSelAll,
.pc-pager .btn,
.pc-orders-tools .btn,
.pc-modal-bar .btn:not(.btn-success),
.top-up-invoice-btn,
.shopify-help-btn,
#oauth-btn,
a.stock-inout,
.batch_fulfill,
.pid-card-fulfill-all,
#wait tbody .btn-success,
#done tbody .btn-success,
.rebind-public-bar .btn,
.top-store-title form .btn-success,
.top-store-title a.btn-primary,
.btn.add-country-btn,
.btn.get-orders-countries-btn,
.balance-filter-bar .btn-success,
span.btn.btn-primary,
#update_now,
#btnsave,
#btnCopyToken,
.Hui-tabNav-more .btn,
.dc-toolbar .btn-reset,
.dc-header .back-btn,
.ak-header .btn,
.lg-btn-ghost,
.feedback-add .uploadBtn,
input[type="file"]::file-selector-button {
  background-color: var(--brand-white) !important; /* !: H-ui .btn-success / inline */
  color: var(--brand-text) !important;             /* !: H-ui .btn-success */
  font-weight: 500;
  border: 0;
  box-shadow: var(--ring-edge);
  padding-left: 16px;
  padding-right: 16px;
  transform: none;
}

form .btn-success ~ .btn-success:hover,
.btn-success[id*="export" i]:not(#btnExport):hover,
.btn-success[class*="export" i]:hover,
.btn-success[class*="CSV"]:hover,
.btn-success[id*="CSV"]:hover,
.btn[name="export"]:hover,
#searchForm .btn-primary:hover,
.page-container > .mb-15 > form .btn-primary:hover,
a.btn-success.size-S.text-right:hover,
.btn-default:hover,
.btn.btn-default:hover,
.btn-primary-outline:hover,
.btn.btn-primary-outline:hover,
.btn-secondary:hover,
.btn-warning:hover,
.btn.btn-warning:hover,
.breadcrumb .btn.r:hover,
.fileinput-button:hover,
.divbatch .btn:hover,
.divbotm_6 .btn:hover,
.listTable a.btn.size-S:hover,
.pc-mark-unread:hover,
#btnSelAll:hover,
.pc-pager .btn:hover,
.pc-orders-tools .btn:hover,
.pc-modal-bar .btn:not(.btn-success):hover,
.top-up-invoice-btn:hover,
.shopify-help-btn:hover,
#oauth-btn:hover,
a.stock-inout:hover,
.batch_fulfill:hover,
.pid-card-fulfill-all:hover,
#wait tbody .btn-success:hover,
#done tbody .btn-success:hover,
.rebind-public-bar .btn:hover,
.top-store-title form .btn-success:hover,
.top-store-title a.btn-primary:hover,
.btn.add-country-btn:hover,
.btn.get-orders-countries-btn:hover,
.balance-filter-bar .btn-success:hover,
span.btn.btn-primary:hover,
#update_now:hover,
#btnsave:hover,
#btnCopyToken:hover,
.Hui-tabNav-more .btn:hover,
.dc-toolbar .btn-reset:hover,
.dc-header .back-btn:hover,
.ak-header .btn:hover,
.lg-btn-ghost:hover,
.feedback-add .uploadBtn:hover,
input[type="file"]:hover::file-selector-button,
.btn-default:focus,
.btn-primary-outline:focus,
#searchForm .btn-primary:focus,
.top-store-title a.btn-primary:focus,
span.btn.btn-primary:focus,
#update_now:focus {
  background-color: var(--brand-white) !important; /* !: H-ui :hover */
  color: var(--brand-primary-hover) !important;    /* !: H-ui :hover (hover text: 4.74:1) */
  box-shadow: var(--ring-edge);
  transform: none;
}

/* INK: a secondary that must still read as a button next to a FILLED.
   Its hover stays ink (a lighter ink, a lift): hover never makes a second
   orange block next to the view's FILLED. */
#btnReply.pc-send,
.employeeForm .submitBtn,
.employeeForm .btn.submitBtn,
.Huifold .info .btn.submitBtn {
  background-color: var(--brand-ink) !important; /* !: late <style> / FILLED tie */
  color: var(--paper-100) !important;            /* !: late <style> / FILLED tie */
  box-shadow: none;
}

#btnReply.pc-send:hover,
.employeeForm .submitBtn:hover,
.employeeForm .btn.submitBtn:hover,
.Huifold .info .btn.submitBtn:hover,
.Huifold .info .btn.submitBtn:focus {
  background-color: var(--glass-ink) !important; /* !: late <style> / FILLED :hover */
  color: var(--paper-100) !important;            /* !: late <style> / FILLED :hover */
  box-shadow: var(--shadow-hover);
  transform: translateY(var(--lift));
}

/* DANGER: tonal at rest, filled on hover. */
.btn-danger,
.btn.btn-danger,
.deleteEmployeeBtn,
.deleteStoreBtn,
.fufillBtn,
.btn-revoke {
  background-color: var(--danger-10);
  color: var(--brand-danger) !important;         /* !: H-ui .btn-danger */
  box-shadow: none;
  font-weight: 500;
}

.btn-danger:hover,
.btn.btn-danger:hover,
.deleteEmployeeBtn:hover,
.deleteStoreBtn:hover,
.fufillBtn:hover,
.btn-revoke:hover,
.btn-danger:focus {
  background-color: var(--brand-danger) !important; /* !: H-ui :hover */
  color: var(--brand-on-primary) !important;        /* !: H-ui :hover */
}

/* LINK: ink, underlined, orange on hover; money and tracking links mono. */
.divtable .divbotm_5 a,
.order_li .div3 a,
.listTable a.c-primary,
.ak-header a,
.oneSec > .Huialert a,
#importForm a,
a[style*="2d6dcc"],
.dc-cache-bar a,
.pc-bubble a,
.shopify-help-content a,
.list_ul a.FastNavBox,
.urls a {
  color: var(--brand-text) !important; /* !: inline colour / .c-primary */
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--ink-22);
}

.divtable .divbotm_5 a:hover,
.order_li .div3 a:hover,
.listTable a.c-primary:hover,
.ak-header a:hover,
.oneSec > .Huialert a:hover,
#importForm a:hover,
a[style*="2d6dcc"]:hover,
.dc-cache-bar a:hover,
.pc-bubble a:hover,
.shopify-help-content a:hover,
.list_ul a.FastNavBox:hover,
.urls a:hover {
  color: var(--brand-text) !important; /* !: inline colour. These links sit on cream, surface and white alike: the text stays ink, the underline turns orange */
  text-decoration-color: var(--brand-primary) !important; /* !: inline text-decoration shorthand (New quote's link) */
  text-decoration-thickness: 1.5px !important;            /* !: inline text-decoration shorthand */
}

.order_li .div3 a,
.listTable a.c-primary,
.ak-header a {
  font-family: var(--brand-font-mono);
}

/* ICON: round hit targets. */
#Hui-userbar #Hui-msg > a,
.divtable .divtop_10 a,
.divtable .divtop_11 a,
.breadcrumb:has(> .c-gray) .btn.r,
.breadcrumb:has(> .c-gray) a.btn.r,
.modal-header .close,
#btnPlus,
.pc-plus,
.dc-header .refresh-btn,
.Huifold .item h4 b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--hit) !important;    /* !: template width:100% */
  height: var(--hit) !important;   /* !: inline height */
  min-width: 0;
  padding: 0 !important;           /* !: GHOST padding */
  margin: 0;
  float: none !important;          /* !: template float */
  overflow: visible;
  border: 0;
  border-radius: var(--brand-radius-pill);
  background: transparent !important; /* !: GHOST fill */
  box-shadow: none;
  color: var(--ink-62) !important; /* !: GHOST colour */
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

#Hui-userbar #Hui-msg > a:hover,
.divtable .divtop_10 a:hover,
.divtable .divtop_11 a:hover,
.breadcrumb:has(> .c-gray) .btn.r:hover,
.modal-header .close:hover,
#btnPlus:hover,
.pc-plus:hover,
.dc-header .refresh-btn:hover,
.Huifold .item h4 b:hover {
  background: var(--ink-6) !important;   /* !: template hover */
  color: var(--brand-primary) !important; /* !: template hover */
  box-shadow: none;
}

.divtable .divtop_10 a i,
.divtable .divtop_11 a i,
.breadcrumb .btn.r .Hui-iconfont {
  display: inline-block;
  width: auto;
  float: none;
  margin: 0;
  font-size: 16px !important;       /* !: H-ui glyph size */
  line-height: 1;
  color: inherit;
}

/* --- FIELD --------------------------------------------------------------- */
.input-text,
.textarea,
textarea,
.form-control,
input:not([type]),
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="date"],
.dc-toolbar .search-input,
.dc-toolbar input#month,
#keyName,
.lg-input,
.Wdate,
input.Wdate,
.balance-filter-bar .date-input,
select.multiple-select[multiple]:not(.select2-hidden-accessible) {
  box-sizing: border-box;
  height: var(--ctl);
  padding: 0 12px;
  font: 400 13px var(--brand-font-body) !important; /* !: inline font-size / page input rules */
  color: var(--brand-text);
  text-align: left;
  background-color: var(--brand-white) !important; /* !: H-ui / page <style> */
  border: 1px solid var(--ink-12) !important;      /* !: H-ui / page <style> */
  border-radius: var(--brand-radius-sm) !important; /* !: H-ui .radius */
  box-shadow: none;
  outline: 0;
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}

textarea,
.textarea {
  height: auto;
  min-height: 96px;
  padding: 10px 12px;
  line-height: 1.5 !important; /* !: font shorthand above */
  resize: vertical;
}

.input-text:hover,
.form-control:hover,
input[type="text"]:hover,
input[type="date"]:hover,
textarea:hover,
select:not([multiple]):hover,
.select-box .select:hover {
  border-color: var(--ink-22) !important; /* !: rest border is forced */
}

.input-text:focus,
.textarea:focus,
textarea:focus,
.form-control:focus,
input:not([type]):focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
.dc-toolbar .search-input:focus,
#keyName:focus,
.lg-input:focus,
input.Wdate:focus {
  border-color: var(--brand-primary) !important;    /* !: rest border is forced (the solid edge carries the state; the halo is the soft glow) */
  box-shadow: var(--brand-shadow-focus) !important; /* !: H-ui focus */
  outline: 0;
}

/* On a white card a white field needs a findable edge: --ink-22 at rest
   (the surface filter cards keep --ink-12; the white fill marks them), and
   a hover one step darker, so the edge still answers the pointer. Focus is
   left to the FIELD focus rule (accent edge + ring). */
form.employeeForm .input-text:not(:focus),
form.employeeForm .select2-container--default:not(.select2-container--focus):not(.select2-container--open) .select2-selection--multiple,
#tab-system .input-text:not(:focus),
#tab-system .formControls > input:not(:focus),
#admineditForm input:not(:focus),
#form-conf-add .input-text:not(:focus),
#messdiv .formControls > input:not(:focus),
#messdiv .formControls > textarea:not(:focus),
#my-awesome-dropzone > input[style]:not(:focus),
#my-awesome-dropzone > textarea:not(:focus),
#paycontent .price input#amount:not(:focus) {
  border-color: var(--ink-22) !important; /* !: FIELD rest border */
}

form.employeeForm .input-text:not(:focus):hover,
form.employeeForm .select2-container--default:not(.select2-container--focus):not(.select2-container--open) .select2-selection--multiple:hover,
#tab-system .input-text:not(:focus):hover,
#tab-system .formControls > input:not(:focus):hover,
#admineditForm input:not(:focus):hover,
#form-conf-add .input-text:not(:focus):hover,
#messdiv .formControls > input:not(:focus):hover,
#messdiv .formControls > textarea:not(:focus):hover,
#my-awesome-dropzone > input[style]:not(:focus):hover,
#my-awesome-dropzone > textarea:not(:focus):hover,
#paycontent .price input#amount:not(:focus):hover {
  border-color: var(--ink-38) !important; /* !: FIELD rest border */
}

/* Placeholders are the only label most filter fields have: --ink-62. */
.input-text::placeholder,
.form-control::placeholder,
input::placeholder,
textarea::placeholder,
.select2-container .select2-search--inline .select2-search__field::placeholder {
  color: var(--ink-62);
  opacity: 1;
  font-family: var(--brand-font-body);
  text-transform: none;
  letter-spacing: 0;
}

/* Safari renders type=date as text: never appearance:none, never a fixed
   line-height; the height alone centres it. */
input[type="date"] {
  line-height: normal !important; /* !: H-ui line-height */
}

input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.55;
  cursor: pointer;
  margin-inline-start: 2px;
  padding: 0;
}

/* File pickers: the native control stays, unboxed; its button is a GHOST. */
input[type="file"],
input[type="file"].input-text,
input[type="file"].form-control {
  width: auto !important;        /* !: inline width */
  max-width: 100%;
  height: auto;
  min-height: 0;
  padding: 1px !important;       /* !: FIELD padding (1px: the button's ring is drawn outside it, and an input clips its content) */
  border: 0 !important;          /* !: FIELD border */
  border-radius: 0 !important;   /* !: FIELD radius */
  background: transparent !important; /* !: FIELD fill */
  box-shadow: none;
  font: 13px var(--brand-font-body);
  color: var(--ink-70);
  vertical-align: middle;
  cursor: pointer;
}

input[type="file"]::file-selector-button {
  height: var(--ctl-sm);
  margin-right: 8px;
  padding: 0 12px;
  font-size: 12px;
}

/* --- SELECT -------------------------------------------------------------- */
.select-box,
.select-box1 {
  border: 0 !important;         /* !: H-ui .select-box box */
  padding: 0;
  background: transparent;
  height: auto;
  width: auto !important;       /* !: inline width */
  display: inline-flex;
  vertical-align: middle;
}

.select-box > .select {
  width: 100%;
}

select:not([multiple]),
select.select,
.select-box .select,
#pageSizeSelect,
.dc-toolbar select,
.pc-orders-tools select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
  height: var(--ctl) !important;       /* !: H-ui .select height */
  min-height: 0;
  padding: 0 32px 0 12px !important;   /* !: H-ui */
  line-height: normal;
  font: 400 13px var(--brand-font-body) !important; /* !: H-ui */
  color: var(--brand-text);
  background: var(--brand-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5l3 3 3-3' fill='none' stroke='%231c1917' stroke-opacity='.62' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 10px !important; /* !: H-ui (4.9:1 chevron) */
  border: 1px solid var(--ink-12) !important;       /* !: H-ui */
  border-radius: var(--brand-radius-sm) !important; /* !: H-ui .radius */
  box-shadow: none;
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}

select:not([multiple]):focus,
select.select:focus,
.select-box .select:focus,
#pageSizeSelect:focus {
  border-color: var(--brand-primary) !important;    /* !: rest border is forced */
  box-shadow: var(--brand-shadow-focus) !important; /* !: H-ui */
  outline: 0;
}

/* The page-size select, once: a small mono control. */
#pageSizeSelect {
  width: 64px !important;              /* !: inline width:50px */
  min-width: 0;
  height: var(--ctl-sm) !important;    /* !: select recipe */
  padding: 0 24px 0 10px !important;   /* !: select recipe */
  font: 500 12px var(--brand-font-mono) !important; /* !: select recipe */
  background-position: right 8px center !important; /* !: select recipe */
  vertical-align: middle;
}

/* The select behind select2 stays a 1px accessible stub. */
select.select2-hidden-accessible {
  height: 1px;
  min-height: 0;
  width: 1px !important;      /* !: inline width */
  padding: 0;
  border: 0;
  background: none;
}

select.multiple-select[multiple]:not(.select2-hidden-accessible) {
  width: 208px;
}

/* --- select2 (bundled 4.1) ----------------------------------------------- */
.shop-multi-admin-wrap {
  width: auto !important;      /* !: inline width */
  min-height: 0 !important;    /* !: inline min-height */
  display: inline-flex !important; /* !: inline display */
  vertical-align: middle;
}

.select2-container {
  vertical-align: middle;
  font-family: var(--brand-font-body);
}

.select2-container--default .select2-selection--multiple {
  box-sizing: border-box;
  min-height: var(--ctl);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0 8px;
  border: 1px solid var(--ink-12);
  border-radius: var(--brand-radius-sm);
  background: var(--brand-white);
  cursor: text;
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: var(--brand-primary) !important; /* !: select2 css */
  box-shadow: var(--brand-shadow-focus);
}

/* Open: the box keeps its radius (the menu floats 6px below it) and the
   inline search field never draws a second ring inside the ringed box. */
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple,
.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {
  border-radius: var(--brand-radius-sm) !important; /* !: select2 css squares the joined edge */
}

.select2-container .select2-search--inline .select2-search__field:focus {
  border: 0 !important;               /* !: FIELD focus */
  box-shadow: none !important;        /* !: FIELD focus */
  background: transparent !important; /* !: FIELD */
}

.select2-container .select2-selection--multiple .select2-selection__rendered {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex: 0 1 auto;   /* the chips take their own width; 4.1 puts the search beside the list, 4.0 inside it */
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.select2-container .select2-search--inline {
  flex: 1 1 60px;   /* the search takes the rest, so the placeholder sits at the FIELD's 12px inset */
  min-width: 60px;
}

.select2-container .select2-search--inline .select2-search__field::placeholder {
  text-align: left;
}

/* Empty, the multi box reads as a SELECT: the same chevron, right 12. */
.select2-container--default .select2-selection--multiple:not(:has(.select2-selection__choice)) {
  padding-right: 32px;
  background: var(--brand-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5l3 3 3-3' fill='none' stroke='%231c1917' stroke-opacity='.62' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 10px;
}

.select2-container .select2-search--inline .select2-search__field {
  margin: 0;
  height: 36px;
  min-height: 0;
  width: 100% !important;          /* !: select2 inline width */
  padding: 0 4px;
  font: 13px var(--brand-font-body);
  color: var(--brand-text);
  background: transparent !important; /* !: select2 css */
  border: 0 !important;            /* !: select2 css */
  border-radius: 0 !important;     /* !: select2 css */
  box-shadow: none;
  outline: 0;
}

/* A choice is a quiet chip. */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: var(--chip);
  margin: 4px 4px 4px 0;
  padding: 0 4px 0 9px;
  background: var(--brand-surface); /* quiet-on-white: the select2 box is always white */
  box-shadow: inset 0 0 0 1px var(--brand-hairline);
  border: 0;
  border-radius: var(--brand-radius-pill);
  color: var(--ink-70);
  font: 500 12px var(--brand-font-body);
  max-width: 100%;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove,
.select2-selection__choice__remove {
  position: static;
  order: 2;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 4px;
  color: var(--ink-62);
  font-size: 14px;
  line-height: 1;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: var(--brand-danger) !important; /* !: select2 css */
  background: transparent !important;    /* !: select2 css */
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__display,
.select2-selection__choice__display {
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.select2-container--default .select2-selection--multiple .select2-selection__clear {
  margin: 0 4px 0 0;
  height: auto;
  padding: 0;
  color: var(--ink-62);
  font-weight: 500;
  order: 99;
  float: none;
}

/* Filter fields are narrow (190px): the menu grows to its options. On the
   team forms the field is the whole 528px column, so the menu keeps
   select2's inline width (the field's) and is never narrower than it. */
body:not(:has(form.employeeForm)) .select2-dropdown {
  width: max-content !important; /* !: select2 inline width (the field's): options keep one 32px line */
  max-width: min(440px, calc(100vw - 32px));
}

.select2-dropdown {
  min-width: 280px;
  background: var(--glass-surface);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
  border: 0;
  border-radius: var(--brand-radius-md);
  box-shadow: var(--shadow-menu);
  padding: 6px;
  font: 13px var(--brand-font-body);
  color: var(--brand-text);
  overflow: hidden;
  margin-top: 6px;
}

.select2-container--default .select2-results__option {
  box-sizing: border-box; /* 32 is the whole row, padding included */
  min-height: 32px;
  display: block;
  padding: 6px 10px;
  line-height: 20px;
  white-space: nowrap;    /* one line per option; a very long store name ends in an ellipsis */
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: var(--brand-radius-sm);
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--accent-6);
  color: var(--brand-text);
}

.select2-container--default .select2-results__option--selected,
.select2-container--default .select2-results__option[aria-selected="true"] {
  background: var(--ink-6);
  color: var(--brand-text);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--ink-12);
  border-radius: var(--brand-radius-sm);
  padding: 6px 10px;
  margin-bottom: 4px;
}

@supports not (backdrop-filter: blur(1px)) {
  .select2-dropdown {
    background: var(--brand-surface);
  }
}

/* --- DATE PAIR: caption + input – input ---------------------------------- */
#searchForm #timeSelectorHolder,
#timeSelectorHolder {
  display: flex !important; /* !: inline display:inherit */
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 0;
  width: 100%;
}

#searchForm #timeSelectorHolder > span,
#timeSelectorHolder > span {
  display: inline-flex;
  align-items: center;
  height: auto;
  margin: 0 -8px 0 0;
}

#searchForm #timeSelectorHolder > div,
#timeSelectorHolder > div,
.input-group.date,
#balanceDateForm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  margin: 0;
  width: auto;
  font-size: 12.5px;
}

#searchForm #timeSelectorHolder > div > span,
#timeSelectorHolder > div > span,
#balanceDateForm > span + input + span {
  color: var(--ink-62); /* the dash means "to" between two unlabeled dates: text, not a separator */
  font-weight: 400;
}

#searchForm #timeSelectorHolder > div input[type="date"],
#timeSelectorHolder > div input[type="date"],
.input-group .form-control,
.input-group.date .form-control {
  width: 112px;
  min-width: 0;
  padding: 0 6px;
  font-size: 12.5px !important; /* !: FIELD font */
  line-height: normal !important; /* !: H-ui */
}

.input-group.date label {
  margin: 0 2px 0 0;
}

.input-group-addon,
.input-group.date > .input-group-addon {
  display: none; /* empty circle without a handler in the shipped template */
}

/* Daily Cost's text dates carry a calendar glyph; 148 fits "YYYY-MM-DD" + glyph. */

.select-box.timebox,
.select-box.timebox .form-group,
.select-box.timebox .input-group {
  width: auto !important; /* !: inline width */
  margin: 0;
}

.Wdate,
input.Wdate,
.balance-filter-bar .date-input {
  width: 148px;
  padding: 0 30px 0 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none' stroke='%231c1917' stroke-opacity='.55' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='2' y='3' width='12' height='11' rx='2'/%3E%3Cpath d='M2 7h12M5 1.5v3M11 1.5v3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px 14px;
  cursor: pointer;
}

/* --- CHECKBOX / RADIO ---------------------------------------------------- */
/* No id in this list: an id-level rest state (#checkAll) outranked
   :checked and :hover, and the select-all box never showed its tick. */
input[type="checkbox"],
input[type="radio"],
.divtable input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  display: inline-grid;
  place-content: center;
  width: 16px !important;   /* !: template width */
  height: 16px !important;  /* !: template height */
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  border: 1.5px solid var(--ink-50) !important; /* !: template border (3.3:1 edge at rest) */
  border-radius: 5px;
  background: var(--brand-white);
  vertical-align: middle;
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease);
}

input[type="radio"] {
  border-radius: 50%;
}

input[type="checkbox"]::before {
  content: "";
  width: 12px;
  height: 12px;
  transform: scale(0);
  transition: transform var(--dur-1) var(--ease);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.3l2.6 2.5 5-5.6' fill='none' stroke='%23fbf2e6' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}

input[type="checkbox"]:hover,
input[type="radio"]:hover,
.divtable input[type="checkbox"]:hover {
  border-color: var(--accent-40) !important; /* !: rest border is forced */
}

input[type="checkbox"]:checked,
input[type="radio"]:checked,
.divtable input[type="checkbox"]:checked {
  background: var(--brand-primary);
  border-color: var(--brand-primary) !important; /* !: rest border is forced */
}

input[type="checkbox"]:checked::before {
  transform: scale(1);
}

input[type="radio"]:checked {
  box-shadow: inset 0 0 0 4px var(--brand-white);
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  box-shadow: var(--ring-focus);
  outline: 0;
}

input[type="radio"]:checked:focus-visible {
  box-shadow: inset 0 0 0 4px var(--brand-white), var(--ring-focus);
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
  opacity: 0.45;
  cursor: default;
}

label > input[type="checkbox"],
label > input[type="radio"] {
  margin-right: 6px;
}

/* iCheck (blue sprite) drawn in the palette */
.icheckbox-blue,
.iradio-blue {
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  background: var(--brand-white);
  background-image: none;
  border: 1.5px solid var(--ink-50);
  transition: border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
}

.icheckbox-blue,
.icheckbox-blue.static:hover {
  border-radius: 5px;
  background-position: center;
}

.iradio-blue,
.iradio-blue.static:hover {
  border-radius: 50%;
  background-position: center;
}

.icheckbox-blue.hover,
.icheckbox-blue:hover,
.iradio-blue.hover,
.iradio-blue:hover {
  border-color: var(--accent-40);
  background-position: center;
}

.icheckbox-blue.checked,
.iradio-blue.checked {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  background-position: center;
}

.icheckbox-blue.checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.3l2.6 2.5 5-5.6' fill='none' stroke='%23fbf2e6' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 12px 12px;
  background-repeat: no-repeat;
}

.iradio-blue.checked {
  box-shadow: inset 0 0 0 4px var(--brand-white);
}

.icheckbox-blue.disabled,
.iradio-blue.disabled {
  opacity: 0.45;
  background-position: center;
}

/* --- SWITCH: filter toggles are switches, not boxes ---------------------- */
.SelectorHolderdiv input[type="checkbox"],
#timeSelectorHolder > div input[type="checkbox"],
input[name="has_vague"] {
  width: 30px !important;   /* !: checkbox recipe */
  height: 18px !important;  /* !: checkbox recipe */
  margin: 0 0 0 6px !important; /* !: inline margin */
  padding: 0;
  display: inline-block;
  position: relative;
  border: 0 !important;     /* !: checkbox recipe */
  border-radius: var(--brand-radius-pill);
  background: var(--ink-50); /* 3.3:1 track at rest */
  vertical-align: middle;
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease);
}

.SelectorHolderdiv input[type="checkbox"]::before,
#timeSelectorHolder > div input[type="checkbox"]::before,
input[name="has_vague"]::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--brand-white);
  box-shadow: 0 1px 2px var(--ink-12);
  transform: none;
  transition: transform var(--dur-2) var(--ease);
}

.SelectorHolderdiv input[type="checkbox"]:hover,
#timeSelectorHolder > div input[type="checkbox"]:hover,
input[name="has_vague"]:hover {
  background: var(--ink-45);
}

.SelectorHolderdiv input[type="checkbox"]:checked,
#timeSelectorHolder > div input[type="checkbox"]:checked,
input[name="has_vague"]:checked {
  background: var(--brand-primary);
}

.SelectorHolderdiv input[type="checkbox"]:checked::before,
#timeSelectorHolder > div input[type="checkbox"]:checked::before,
input[name="has_vague"]:checked::before {
  transform: translateX(12px);
}

.SelectorHolderdiv,
#searchForm .SelectorHolderdiv {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  font-size: 12.5px;
  color: var(--ink-70);
}

.SelectorHolderdiv .ml-20 {
  margin-left: 0;
}

/* --- SEGMENTED: one recipe for every tab row and chip strip --------------
   Item: quiet pill; ACTIVE = white thumb with an edge ring; the count digits
   inside the active chip are the only orange. Tracks (.tab-nav, .tabBar,
   .pc-scope) are a soft ink well. */
#Hui-tabNav .acrossTab li,
.divstatus a.btn,
.divstatus .btn,
.bg-1.bk-gray .btn,
.bg-1.bk-gray a.btn,
.tabBar span,
.tab-nav .tab-item,
.pc-scope label {
  display: inline-flex !important; /* !: template display */
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  height: var(--ctl-sm) !important;   /* !: inline sheet / H-ui size */
  line-height: 1 !important;          /* !: inline sheet / H-ui */
  padding: 0 12px !important;         /* !: H-ui size-MINI */
  margin: 0 !important;               /* !: template margin-top */
  font-size: 12.5px !important;       /* !: inline sheet */
  font-weight: 500 !important;        /* !: template inherit */
  color: var(--ink-70) !important;    /* !: template white */
  background: transparent !important; /* !: template fill */
  border: 0 !important;               /* !: template border */
  border-radius: var(--brand-radius-pill) !important; /* !: H-ui .radius */
  box-shadow: none !important;        /* !: template */
  text-shadow: none !important;       /* !: template */
  white-space: nowrap;
  position: static;
  cursor: pointer;
  text-decoration: none;
}

/* An item the template (or its JS) hides stays hidden: the display above
   must never reveal it (Quotation's "Link Parser" ships display:none). */
#Hui-tabNav .acrossTab li[style*="display: none"],
#Hui-tabNav .acrossTab li[style*="display:none"],
.divstatus .btn[style*="display: none"],
.divstatus .btn[style*="display:none"],
.bg-1.bk-gray .btn[style*="display: none"],
.bg-1.bk-gray .btn[style*="display:none"],
.tabBar span[style*="display: none"],
.tabBar span[style*="display:none"],
.tab-nav .tab-item[style*="display: none"],
.tab-nav .tab-item[style*="display:none"],
.pc-scope label[style*="display: none"],
.pc-scope label[style*="display:none"] {
  display: none !important; /* !: the SEGMENTED display above */
}

#Hui-tabNav .acrossTab li:hover,
.divstatus a.btn:hover,
.bg-1.bk-gray .btn:hover,
.tabBar span:hover,
.tab-nav .tab-item:hover,
.pc-scope label:hover {
  background: var(--ink-4) !important; /* !: template hover */
  color: var(--brand-text) !important; /* !: template hover */
}

/* Chip strips without a track (Orders, Feedbacks, Trace): a chip at rest
   is TONAL, so the white ringed thumb reads as "selected", never as one of
   the white GHOST actions right under the strip. Wrapped strips keep an
   8px row gap, so a second row reads as intended. */
.divstatus a.btn:not(.btn-primary):not(.active),
.bg-1.bk-gray .btn:not(.btn-primary) {
  background: var(--ink-4) !important; /* !: SEGMENTED base */
}

.divstatus a.btn:not(.btn-primary):not(.active):hover,
.bg-1.bk-gray .btn:not(.btn-primary):hover {
  background: var(--ink-8) !important; /* !: SEGMENTED hover */
}

#Hui-tabNav .acrossTab li.active,
#Hui-tabNav .acrossTab li.active:hover,
.divstatus a.btn-primary,
.divstatus a.btn-primary:hover,
.divstatus a.btn-primary-outline.active,
.bg-1.bk-gray .btn-primary,
.bg-1.bk-gray .btn-primary:hover,
.tabBar span.current,
.tabBar span.current:hover,
.tab-nav .tab-item.active,
.tab-nav .tab-item.active:hover,
.pc-scope label:has(:checked) {
  background: var(--brand-white) !important; /* !: template active fill */
  color: var(--brand-ink) !important;        /* !: template active colour */
  box-shadow: var(--ring-edge), 0 1px 2px var(--ink-6) !important; /* !: template */
  font-weight: 600 !important;               /* !: template */
  border-bottom: 0 !important;               /* !: .tab-nav underline */
}

.divstatus a.btn-primary .unselectedRedBold,
.divstatus .unselectedRedBold {
  color: inherit;
  font-weight: inherit;
}

.divstatus a.btn:focus-visible,
.bg-1.bk-gray .btn:focus-visible,
.tab-nav .tab-item:focus-visible {
  box-shadow: var(--ring-focus) !important; /* !: state */
  outline: 0;
}

.tab-nav,
.tabBar,
.pc-scope {
  display: inline-flex !important; /* !: template block */
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--ink-6);
  border: 0 !important;            /* !: template border-bottom */
  border-radius: var(--brand-radius-pill);
  margin: 0 0 16px;
  float: none;
}

.tabBar span a {
  display: inline-block;
  padding: 0;
  color: inherit;
  text-decoration: none;
}

/* H-ui yanks any icon inside a .Huialert to its top-right corner at 20%. */
.divstatus .Hui-iconfont,
.divbatch .Hui-iconfont,
.divtbody .Hui-iconfont,
.divstatus a .Hui-iconfont {
  position: static;
  opacity: 1;
  color: inherit !important;   /* !: H-ui */
  font-size: 14px;
  line-height: inherit;
}

/* --- CHIP / BADGE --------------------------------------------------------- */
.label,
.badge,
.pc-badge,
.pc-chip,
.pc-cty,
.oneTicket .color-danger,
.badge-active,
.badge-revoked,
.domain-pill,
.domain-tag,
.month-tag,
.badge-count,
.onePackage .desc .text-r,
.pid-copy-btn,
.order_li .div2,
#paycontent .price input#currency:disabled,
.dc-stat-card .hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  height: var(--chip);
  min-height: 0;               /* the ledger templates give every cell min-height 25 */
  padding: 0 9px !important;   /* !: late <style> / H-ui */
  font: var(--t-chip) !important; /* !: late <style> / H-ui */
  letter-spacing: var(--ls-chip);
  text-transform: uppercase;
  line-height: 1 !important;   /* !: late <style> */
  white-space: nowrap;
  vertical-align: middle;
  border: 0;
  border-radius: var(--brand-radius-pill) !important; /* !: H-ui .radius */
  background-color: var(--ink-6);
  color: var(--ink-70);
  text-shadow: none;
}

/* Tones: quiet-on-cream (default above), quiet-on-white, ok, accent, danger */
.divtable .label-warning,
.divtable .label-default,
.divtable .label-secondary,
.listTable .label-default,
.listTable .label-warning,
.priceList .label-secondary,
.pc-chip,
.pc-cty,
.pc-badge.s2,
.pc-badge.s5,
.s2,
.s5,
.pid-copy-btn,
.badge-revoked,
.onePackage .desc .text-r,
.order_li .div2,
#paycontent .price input#currency:disabled {
  background: var(--brand-surface) !important; /* !: late <style> / H-ui */
  box-shadow: inset 0 0 0 1px var(--brand-hairline);
  color: var(--ink-70) !important;             /* !: late <style> / H-ui */
}

.label-success,
.label.label-success,
.pc-badge.s3,
.s3,
.badge-active,
.badge-success {
  background: var(--ok-11);
  color: var(--brand-ok);
}

/* Quote Detail's "Staff" mark is a .badge (a COUNT) the ticket page paints
   #2fbd6a: it is a label, so it takes the ok CHIP, the one green. */
.badge.ticket_staff {
  height: var(--chip);
  padding: 0 9px !important;                   /* !: COUNT */
  background-color: var(--ok-11) !important;   /* !: ticket <style> #2fbd6a */
  color: var(--brand-ok) !important;           /* !: ticket <style> */
  font: var(--t-chip) !important;              /* !: COUNT */
  letter-spacing: var(--ls-chip);
}

/* Accent tint always carries ink text (one treatment everywhere) */
.label-primary,
.label.label-primary,
.pc-badge.s1,
.s1,
.oneTicket .color-danger,
.pc-scope-chip,
.divtable .label-info,
.label-info {
  background: var(--accent-10);
  color: var(--brand-ink);
  font-weight: 600 !important;             /* !: late <style> */
}

.label-danger,
.label.label-danger,
.pc-badge.s4,
.s4 {
  background: var(--danger-10);
  color: var(--brand-danger);
}

/* COUNT: a live number on the bar or the sidebar */
.badge,
.badge-primary,
.badge-danger,
.badge-warning,
#Hui-msg .badge,
.pc-unread {
  height: 16px;
  min-width: 16px;
  padding: 0 5px !important;  /* !: H-ui */
  justify-content: center;
  background-color: var(--brand-primary);
  color: var(--brand-ink);
  font: 600 10.5px/1 var(--brand-font-mono) !important; /* !: H-ui */
  letter-spacing: 0;
}

/* --- CARD ---------------------------------------------------------------- */
#searchForm,
.page-container > .mb-15 > form:first-of-type,
.balance-filter-bar,
.oneSec,
.page-container .oneSec,
#paycontent,
.dc-toolbar,
.Huifold .item,
.Huifold li.item,
.onePackage,
.pc-left,
#tab-system,
form.employeeForm,
#admineditForm,
#my-awesome-dropzone,
#importForm,
.ak-card,
#shopify-help-content,
.shopify-help-content,
.addOneProduct,
form.addOneProduct,
.panel,
.radius.shadow,
.one_order,
.dc-table-card {
  border: 0 !important;                              /* !: H-ui / template border */
  border-radius: var(--brand-radius-lg) !important;  /* !: H-ui .radius */
  background: var(--brand-white);
  box-shadow: var(--shadow-card) !important;         /* !: template .shadow */
  color: var(--brand-text);
}

/* Surface cards: filter cards, tiles, helper panels, with a top sheen */
#searchForm,
.page-container > .mb-15 > form:first-of-type,
.balance-filter-bar,
.dc-toolbar,
#shopify-help-content,
.shopify-help-content,
.addOneProduct,
form.addOneProduct,
.pc-stat,
.dc-stat-card,
.pc-right,
.ak-info {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 48%), var(--brand-surface) !important; /* !: late <style> */
  box-shadow: var(--sheen), var(--shadow-card) !important; /* !: template */
}

/* Inner cards */
.pc-card,
.oneTicketContent,
.dc-table-card,
.bordered,
.oneAttach,
.ak-info,
.pc-stat,
.dc-stat-card,
.pc-item,
.pc-sib {
  border: 0 !important;                             /* !: late <style> */
  border-radius: var(--brand-radius-md) !important; /* !: late <style> */
}

/* Clickable cards lift; row cards only deepen */
.pc-card:hover,
.Huifold .item:hover,
.pc-stat:hover,
a.dc-stat-link:hover,
.onePackage:hover {
  box-shadow: var(--shadow-hover) !important; /* !: late <style> */
  transform: translateY(var(--lift));
}

.pc-card:focus-visible,
.pc-stat:focus-visible,
a.dc-stat-link:focus-visible,
.onePackage:focus-visible {
  box-shadow: var(--ring-focus) !important; /* !: state */
  outline: 0;
}

/* Filter card geometry (shared by every #searchForm). Rows are spaced by
   each item's own 5px block margins, not by row-gap: a zero-height line
   breaker (a ::before / ::after at flex-basis 100%) then adds nothing, so
   every filter card keeps 10px between rows at every width, and the card's
   15px padding + 5 reads as the CARD's 20. Controls sit one 8px control
   gap apart (the spec's rhythm), SyncOrders included. */
#searchForm,
.page-container > .mb-15 > form:first-of-type {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
  padding: 15px 24px;
  margin-bottom: 16px;
  overflow: visible;
  font-size: 13px;
}

#searchForm > *,
.page-container > .mb-15 > form:first-of-type > *,
.page-container:has(#searchForm[action*="shipping" i]) #searchForm #timeSelectorHolder > *,
.search-form-container .form-row > * {
  margin-block: 5px;
}

#searchForm > .search-form-container {
  margin-block: 0; /* Order Cost: its own flex container carries the rows */
}

.page-container > div[style*="margin-bottom"] {
  margin-bottom: 16px !important; /* !: inline margin */
}

#searchForm > .form-row,
#searchForm > .search-form-container {
  flex: 1 1 100%;
}

#searchForm .input-text {
  height: var(--ctl);
  width: auto;
}

@media (max-width: 768px) {
  #searchForm,
  .page-container > .mb-15 > form:first-of-type {
    align-items: stretch;
  }

  .select-box,
  .select-box1 {
    width: 100% !important; /* !: template */
  }
}

/* --- TILE ---------------------------------------------------------------- */
.pc-stats,
.dc-stats {
  display: grid !important; /* !: late <style> flex */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 0 0 20px !important; /* !: late <style> */
}

.pc-stat,
.dc-stat-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 84px;
  margin: 0 !important;         /* !: late <style> */
  padding: 14px 16px 12px !important; /* !: late <style> */
  cursor: pointer;
  text-decoration: none;
  color: var(--brand-text) !important; /* !: late <style> */
}

.pc-stat .k,
.dc-card-label {
  white-space: normal;
}

.pc-stat .v,
.dc-stat-card .meta .num {
  font: var(--t-stat) !important; /* !: late <style> */
  letter-spacing: var(--ls-stat);
  font-variant-numeric: tabular-nums;
  color: var(--brand-text) !important; /* !: late <style> */
  margin-top: 6px;
}

.pc-stat .v:empty::before,
.dc-stat-card .num:empty::before,
.brandC p.p2:empty::before,
.brandC p.p2 b:empty::before,
.divbatch strong:empty::before,
.mt-5.mb-5 strong:empty::before,
.available:empty::before,
.table td:empty::before,
.customs_template td:empty::before {
  content: "\2014";
  color: var(--ink-62); /* "no value" is information, so it reads at 4.5:1 */
  font-weight: 400;
}

.brandC p.p2:empty::before,
.brandC p.p2 b:empty::before {
  color: var(--paper-55);
}

.pc-stat.archived .v {
  color: var(--ink-62) !important; /* !: late <style> (quiet, still 4.7:1) */
}

/* SELECTED = the seal: a 2px orange rule on a white tile; the value stays ink */
.pc-stat.active,
.pc-stat.active:hover {
  background: var(--brand-white) !important; /* !: late <style> */
  box-shadow: inset 0 2px 0 var(--brand-primary), var(--shadow-card) !important; /* !: late <style> */
}

.pc-stat.active .v {
  color: var(--brand-text);
}

/* --- DARKCARD: the one number the visit is about ------------------------- */
.brandC,
h2.brandC.shadow.radius,
#welcome-balance-card,
#balance-card {
  display: flex;
  flex-direction: column;   /* a hero figure: the label over the value, both on the left edge */
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0 !important;                 /* !: template centring */
  padding: 22px 28px;
  text-align: left;
  background: var(--brand-ink);
  color: var(--paper-100);
  border: 0;
  border-radius: var(--brand-radius-lg);
  box-shadow: var(--shadow-ink) !important;         /* !: template .shadow */
  font-family: var(--brand-font-body) !important;   /* !: heading stack */
  line-height: 1.2;
}

.brandC p {
  margin: 0;
}

.brandC p.p1 {
  color: var(--paper-55) !important; /* !: template */
  margin: 0 !important;              /* !: template */
}

.brandC p.p2,
.brandC p.p2 b {
  font: var(--t-display) !important; /* !: template */
  letter-spacing: var(--ls-display);
  font-variant-numeric: tabular-nums;
  color: var(--paper-100);
}

#welcome-final-balance .welcome-balance-placeholder {
  color: var(--paper-55) !important; /* !: template */
}

/* --- TABLE: a white card, quiet mono column labels ----------------------- */
.table,
.table-bordered,
.listTable.table-bordered,
.dc-table,
.ak-table,
.priceList,
.customs_template,
.table-sort {
  background-color: var(--brand-white) !important; /* !: H-ui .table-bg */
  border-collapse: separate !important;            /* !: H-ui */
  border-spacing: 0 !important;                    /* !: H-ui */
  border: 0 !important;                            /* !: H-ui .table-bordered */
  border-radius: var(--brand-radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  width: 100%;
}

/* A table inside a card is that card's body, never a second card: no
   nested radius, no second shadow (List, Monthly Stats, Per-Shop). */
.dc-table-card > .dc-table {
  border-radius: 0;
  box-shadow: none;
}

.table-border,
.table-hover {
  border-top: 0 !important; /* !: H-ui */
}

.table td,
.table th,
.dc-table td,
.dc-table th,
.ak-table td,
.ak-table th {
  padding: 12px 20px;
  font-size: 13px;
  line-height: 1.5;
  vertical-align: middle;
  border-color: var(--ink-8) !important; /* !: H-ui */
  border-top: 0;
  border-bottom: 1px solid var(--ink-8);
  border-left: 0 !important;  /* !: H-ui .table-bordered */
  border-right: 0 !important; /* !: H-ui .table-bordered */
  word-break: normal;
}

/* Every table keeps the 20px card inset on its outer columns (the dc
   pages' own <style> pads 14). */
.dc-table th:first-child,
.dc-table td:first-child {
  padding-left: 20px;
}

.dc-table th:last-child,
.dc-table td:last-child {
  padding-right: 20px;
}

.table thead th,
.table > thead > tr > th,
.dc-table thead th,
.ak-table thead th {
  background-color: transparent !important; /* !: H-ui */
  border-top: 0 !important;                 /* !: H-ui */
  border-bottom: 1px solid var(--ink-11) !important; /* !: dc page <style> */
  font-weight: 500 !important;              /* !: H-ui th bold */
  white-space: nowrap;
}

.table > tbody > tr:last-child > td,
.table > tbody > tr:last-child > th,
.dc-table > tbody > tr:last-child > td,
.ak-table > tbody > tr:last-child > td {
  border-bottom: 0;
}

.table-hover tbody tr:hover > td,
.table-hover tbody tr:hover > th,
.dc-table tbody tr:hover > td,
.ak-table tbody tr:hover > td {
  background-color: var(--ink-4) !important; /* !: H-ui (label <th> cells too: H-ui paints them #f5f5f5) */
}

/* Row cards (Trace / Order Cost) mark their head row .active: a surface head, never a tint */
.table tbody tr.active,
.table tbody tr.active > td,
tr.active > td,
.table tbody tr.warning,
.table tbody tr.warning > td,
.table tbody tr.warning > th {
  background-color: var(--brand-surface) !important; /* !: H-ui tr.active/.warning */
}

/* A table nested in a cell draws no second grid. */
.table td .table,
.table td table,
#shipTo {
  border: 0 !important;         /* !: inline border */
  border-radius: 0;
  background: transparent !important; /* !: inline bg */
  box-shadow: none;
  margin: 0;
  width: auto;
}

.table td table td,
.table td .table td {
  border: 0 !important; /* !: inline border */
  padding: 2px 8px 2px 0;
  background: transparent !important; /* !: inline bg */
}

/* ...and no second hover wash: only the outer row washes (View Order's
   SHIP TO table stacked a darker strip inside the washed row). */
.table td table tr:hover > td,
.table td .table tbody tr:hover > td {
  background: transparent !important; /* !: TABLE hover */
}

/* Label cells on the detail pages (th.text-r) read as labels, not data. */
.table th.text-r,
.table th.mobile-5 {
  background-color: transparent;
  text-align: left !important;              /* !: H-ui .text-r !important */
  vertical-align: middle;
  width: 170px;
  padding-left: 20px;
}

.table tr.text-r td {
  font-family: var(--brand-font-mono);
  font-size: 13px;
  font-weight: 500;
}

/* Dense variant: the Order Summary matrix */
.table:has(> thead > tr + tr + tr) td,
.table:has(> thead > tr + tr + tr) th {
  padding: 8px 12px;
}

/* --- LIST HEADER: transparent label row over one rule ------------------- */
.divtbody,
.divtbody.Huialert,
.divtbody.Huialert-info {
  display: flex;
  align-items: center;
  float: none;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 16px !important; /* !: template (= the row cards' inner box) */
  margin: 12px 0 8px;           /* header -> first row 8; every row card carries its own 10px below */
  background: transparent;
  border: 0 !important;       /* !: H-ui .Huialert */
  border-bottom: 1px solid var(--ink-11) !important; /* !: H-ui */
  border-radius: 0 !important; /* !: H-ui */
  box-shadow: none !important; /* !: template */
  color: var(--ink-62);
  text-shadow: none;
}

.divtbody .divth,
.divtbody .divinfo,
.divtbody th {
  line-height: 20px;
  min-height: 0;
  text-shadow: none;
}

.divtbody .divinputall {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 16px !important; /* !: template */
}

.divtbody #checkAll,
#checkAll {
  position: static;
  margin: 0;
}

/* Trace: the header is a <table> inside .divtbody (M6 / M11); the cells
   carry the 16px side padding, so the wrapper has none. */
.divtbody:has(> table),
.divtbody.Huialert.Huialert-info:has(> table) {
  padding: 0 !important; /* !: template / the padded flex header above */
}

.divtbody > .table,
.divtbody table {
  background: transparent !important; /* !: TABLE recipe */
  border: 0 !important;               /* !: TABLE recipe */
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  width: 100%;
  table-layout: fixed;
}

.divtbody tr.warning,
.divtbody .table tbody tr.warning,
.divtbody tr.warning > th,
.divtbody .table tbody tr.warning > th {
  background: transparent !important; /* !: H-ui !important */
  border: 0 !important;               /* !: H-ui */
  padding: 8px 16px !important;       /* !: TABLE recipe (= the row cards' side padding) */
  box-sizing: border-box;             /* fixed layout: the % is the whole column, padding included */
  text-align: left;
  line-height: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.divtbody tr.warning > th #checkAll {
  margin: 0 2px 0 0 !important; /* !: inline margin-top. The label's leading space (~8px) makes the 10: it starts on the row dates */
  float: none !important;        /* !: H-ui .l */
  vertical-align: -3px;
}

/* Header and body share one fixed geometry: the product column is 22%, the
   six data columns split the rest evenly (a row card's head strip spans
   them with one colspan cell, which fixed layout can only divide evenly).
   The same numbers sit on the Trace row cards (§4 Trace): th.x == td.x.
   Below a 1440 window the product column takes 27% (25.5% at 1280), so a
   name like "Cotton T-Shirt Black / M" keeps one line; the data columns
   still hold "RECIPIENT INFO" and View Order. */
.divtbody tr.warning > th:nth-child(1) { width: 22%; }
.divtbody tr.warning > th:nth-child(n + 2) { width: 13%; }

@media (min-width: 769px) and (max-width: 1190px) {
  .divtbody tr.warning > th:nth-child(1) { width: 27%; }
  .divtbody tr.warning > th:nth-child(n + 2) { width: 12.17%; }
}

@media (min-width: 769px) and (max-width: 1048px) {
  .divtbody tr.warning > th:nth-child(1) { width: 25.5%; }
  .divtbody tr.warning > th:nth-child(n + 2) { width: 12.42%; }
}

@media (max-width: 1148px) {
  .divtbody tr.warning > th,
  .divtbody .table tbody tr.warning > th {
    padding: 8px 12px !important; /* !: TABLE recipe */
    letter-spacing: 0.04em;       /* "RECIPIENT INFO" keeps one line in a 13% cell at 1280 */
  }

  .divtbody tr.warning > th:first-child,
  .divtbody .table tbody tr.warning > th:first-child {
    padding-left: 16px !important; /* !: TABLE recipe. Select all stays over the rows' checkboxes (16) */
  }
}

@media (max-width: 1048px) {
  .divtbody tr.warning > th,
  .divtbody .table tbody tr.warning > th {
    letter-spacing: 0.02em; /* "RECIPIENT INFO" keeps one line in a 122px cell at 1280 */
  }
}

/* --- PAGER --------------------------------------------------------------- */
.pagination,
.pageNav,
.dc-pagination .pageNav,
.pc-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin: 20px 0 8px;
  font: 500 12px var(--brand-font-mono);
  color: var(--ink-62);
  background: transparent;
  border: 0;
}

.pagination a,
.pagination span,
.pagination > li > a,
.pagination > li > span,
.pageNav a,
.pageNav span,
.pc-pager .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: var(--ctl-sm);
  height: var(--ctl-sm);
  padding: 0 10px !important;         /* !: H-ui */
  margin: 0;
  font: 500 12px var(--brand-font-mono) !important; /* !: H-ui */
  color: var(--ink-70) !important;    /* !: H-ui */
  background: transparent !important; /* !: H-ui / GHOST */
  border: 0;
  border-radius: var(--brand-radius-pill);
  box-shadow: none;
  text-decoration: none;
  transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}

.pagination a:hover,
.pagination > li > a:hover,
.pageNav a:hover,
.pc-pager .btn:hover {
  background: var(--ink-6) !important;  /* !: H-ui */
  color: var(--brand-text) !important;  /* !: H-ui */
}

/* The position is ink, never orange. */
.pagination .active a,
.pagination .active span,
.pagination > .active > a,
.pagination > .active > span,
.pageNav .current {
  background: var(--brand-ink) !important; /* !: H-ui */
  color: var(--paper-100) !important;      /* !: H-ui */
  font-weight: 600 !important;             /* !: H-ui */
}

.pageNav > .current:only-child {
  min-width: 28px;
  width: 28px;
  padding: 0 !important; /* !: PAGER */
}

/* A single page: the template prints a bare "1" with no element around it,
   so the pager box itself becomes the 28px ink pill. */
.pageNav:not(:has(*)):not(:empty) {
  display: flex;
  width: 28px;
  height: var(--ctl-sm);
  margin: 20px auto 8px;
  padding: 0;
  justify-content: center;
  align-items: center;
  background: var(--brand-ink);
  color: var(--paper-100);
  font-weight: 600;
  border-radius: var(--brand-radius-pill);
}

/* --- BATCH BAR / CAPTIONS: ghost actions left, captions right ------------ */
.divbatch,
.divbatch.Huialert,
.divbatch.Huialert-info,
#batchForm > div.mt-5.mb-5,
.page-container > div.mt-5.mb-5 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  float: none;
  width: 100%;
  min-height: 36px;
  box-sizing: border-box;
  background: transparent;
  border: 0 !important;       /* !: H-ui */
  border-radius: 0 !important; /* !: H-ui */
  box-shadow: none !important; /* !: template */
  padding: 0;
  margin: 0 0 12px;
  color: var(--brand-text);
  text-shadow: none;
  font-size: 12.5px;
}

.divbatch .btn,
.divbatch a.btn,
.batch_fulfill {
  height: var(--ctl-sm) !important; /* !: H-ui size-MINI */
  padding: 0 12px !important;       /* !: H-ui size-MINI */
  margin: 0;
  font-size: 12px !important;       /* !: H-ui */
  line-height: 1 !important;        /* !: H-ui */
}

.divbatch .r,
.divbatch label,
.divbatch > span.r,
.divstatus > span.r,
.bg-1.bk-gray > .r,
.mt-5.mb-5 > span.r {
  float: none !important;     /* !: H-ui .r */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--ctl-sm);
  width: auto !important;     /* !: inline width */
  margin: 0 !important;       /* !: inline / H-ui .mt-15 */
  line-height: 1 !important;  /* !: inline line-height */
}

.divbatch label,
#batchForm > div.mt-5.mb-5 > label,
.page-container > div.mt-5.mb-5 > label {
  height: auto;
  text-transform: none;
  letter-spacing: 0;
  font: 500 12.5px var(--brand-font-body);
  color: var(--ink-70);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* DOM: Total, Each page. Visual: Each page, Total. */
.divbatch > .r + .r {
  order: 2;
}

.divbatch > .r:first-of-type + .r,
.divstatus > span.r:first-of-type,
.bg-1.bk-gray > .r:first-of-type,
.mt-5.mb-5 > span.r:first-of-type {
  margin-left: auto !important; /* !: H-ui .r */
}

.divbatch > .r:first-of-type {
  order: 3;
}

/* 16px between caption pairs, everywhere: each margin tops up its bar's
   own flex gap (divstatus 4, strip 6, batch bar 8). */
.divstatus > span.r + span.r {
  margin-left: 12px !important; /* !: H-ui */
}

.bg-1.bk-gray > .r + .r {
  margin-left: 10px !important; /* !: H-ui */
}

.divbatch > .r + .r + .r,
.divbatch > .r:first-of-type:not(:last-of-type) {
  margin-left: 8px !important; /* !: H-ui (Total follows Each page) */
}

.divbatch strong,
.divstatus > span.r strong,
.bg-1.bk-gray > .r strong,
.mt-5.mb-5 > span.r strong {
  font: 600 13px var(--brand-font-mono);
  color: var(--brand-text);
  letter-spacing: 0;
}

.divstatus > span.r select,
.divbatch .r select {
  margin-left: 4px;
}

/* --- PAGE HEADER: a generated title on the verified fingerprints --------- */
.page-container[data-pid]::before,
#shop-welcome .page-container:has(#welcome-balance-card)::before,
.page-container:has(#searchForm[action*="countorders" i])::before,
.page-container:has(#searchForm[action*="shipping" i])::before,
.page-container:has(#balanceDateForm)::before,
.page-container:has(.paymentListHolder)::before,
#store_tab::before,
.page-container:has(#form-conf-add)::before,
.page-container:has(form.employeeForm)::before,
.page-container:has(.tab-nav)::before,
.page-container:has(tr.oneTicket)::before,
.page-container:has(> .packages)::before,
article.page-container:has(#admineditForm)::before,
.breadcrumb:not(:has(> .c-gray)),
.dc-header h2,
.page-container > h2[align="center"],
.page-container > section > h2[align="center"],
.page-container > h2:not([align]),
.addForm > h2,
p.f-20.text-success,
a.FastNavBox.f-24,
.online_payment > a.FastNavBox.f-24,
h4.pc-h,
.ak-header h2 {
  display: block;
  margin: 0 0 20px;
  padding: 0;
  font: var(--t-title) !important;   /* !: H-ui heading / late <style> */
  letter-spacing: var(--ls-title);
  color: var(--brand-text);
  text-align: left;
  text-transform: none;
}

.page-container[data-pid]::before { content: "Orders"; }
#shop-welcome .page-container:has(#welcome-balance-card)::before { content: "Overview"; }
.page-container:has(#searchForm[action*="countorders" i])::before { content: "Order Summary"; }
.page-container:has(#searchForm[action*="shipping" i])::before { content: "Trace"; }
.page-container:has(#balanceDateForm)::before { content: "Daily Cost"; }
.page-container:has(.paymentListHolder)::before { content: "Order Cost"; }
#store_tab::before { content: "Stores"; }
.page-container:has(#form-conf-add)::before { content: "Connect a Shopify Store"; }
.page-container:has(form.employeeForm)::before { content: "Team Accounts"; }
.page-container:has(.tab-nav)::before { content: "Quotation"; }
.page-container:has(tr.oneTicket)::before { content: "Quotes"; }
.page-container:has(> .packages)::before { content: "Store Package"; }
article.page-container:has(#admineditForm)::before { content: "Account"; }

.page-container:has(> h1)::before,
.page-container:has(> h2:not([align]))::before {
  content: none; /* a template that brings its own title (Add employee, Payment, News) keeps it */
}

.page-container > h2:not([align])[style] {
  height: auto !important;      /* !: inline height:31px */
  line-height: 26px !important; /* !: inline line-height:24px */
}

/* Crumb trails are the eyebrow: quiet mono on the bare paper. The trail
   shares the page's 1360px cap, so its action slot (the refresh ICON) ends
   on the cards' right edge at every width, 1920 included. */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  max-width: var(--content-max);
  height: auto;
  line-height: 36px !important; /* !: H-ui */
  margin: 0;
  background: transparent;
  border: 0;
  overflow: visible;
}

.breadcrumb:not(:has(> .c-gray)) {
  flex-wrap: wrap;
  padding: 4px 0 0; /* the title list's margin-bottom 20 is the whole title -> tiles gap */
  line-height: 26px !important;   /* !: H-ui */
}

.breadcrumb:has(> .c-gray) {
  padding: 0 0 6px;
  line-height: 20px !important; /* !: H-ui */
}

.breadcrumb .c-gray {
  color: var(--ink-66) !important; /* !: utility. The crumb words' own token: .62 composited to 4.49:1 on the grain + glow paper */
  font-weight: 400;
}

.breadcrumb > .Hui-iconfont {
  color: var(--ink-62);
  font-size: 14px;
}

/* The action slot: the template's right-floated button ends the row */
.breadcrumb .btn.r,
.breadcrumb a.btn.r {
  float: none !important;       /* !: H-ui .r */
  margin: 0 0 0 auto !important; /* !: inline margin-top */
}

/* --- EMPTY --------------------------------------------------------------- */
.pc-empty,
.dc-empty,
.pc-ord-empty,
.welcome-empty-li,
.Huialert-info[style*="999"],
.list_ul ul:empty::before,
#welcome-transactions-list:empty::before,
#welcome-transactions-list:not(:has(> li))::before,
.welcome-async-loading {
  display: block;
  box-sizing: border-box;
  max-width: 320px;
  margin: 0 auto;
  padding: 40px 16px !important;      /* !: late <style> */
  text-align: center;
  background: transparent !important; /* !: late <style> / H-ui */
  border: 0 !important;               /* !: late <style> */
  border-radius: 0 !important;        /* !: late <style> (EMPTY has no box) */
  box-shadow: none !important;        /* !: late <style> */
  font: 600 13.5px/20px var(--brand-font-body);
  color: var(--brand-text) !important; /* !: late <style> / inline */
}

.dc-empty .empty-tip,
.pc-ord-empty {
  font: var(--t-meta);
  color: var(--ink-62) !important; /* !: template */
}

/* Product Confirmation's grid state ("Loading...", "Load failed", "No
   records") sits straight on the paper: it gets the quiet card the other
   lists give their empty state, and the caption voice. */
#grid > .pc-empty {
  max-width: none;
  background: var(--brand-surface) !important; /* !: late <style> / EMPTY */
  box-shadow: var(--ring-hair) !important;     /* !: late <style> / EMPTY */
  border-radius: var(--brand-radius-lg) !important; /* !: late <style> / EMPTY */
  font: var(--t-meta);
  color: var(--ink-62) !important;             /* !: late <style> / EMPTY */
}

.dc-empty i {
  font-size: 28px;
  color: var(--ink-22);
}

.list_ul ul:empty::before,
#welcome-transactions-list:empty::before,
#welcome-transactions-list:not(:has(> li))::before {
  content: "Nothing here yet"; /* :not(:has(> li)): the list holds whitespace / the preview guard, never :empty */
}

.Huialert-info[style*="999"],
.welcome-async-loading,
.pc-ord-empty {
  animation: sgPulse 1.2s var(--ease) infinite alternate;
}

@keyframes sgPulse {
  from { opacity: 0.6; }
  to { opacity: 1; }
}

/* --- MODAL / MENU / SCRIM ------------------------------------------------ */
.pc-modal,
.modal-content,
.layui-layer {
  background: var(--brand-white) !important;        /* !: late <style> */
  border: 0 !important;                             /* !: late <style> */
  border-radius: var(--brand-radius-lg) !important; /* !: late <style> */
  box-shadow: var(--shadow-modal), var(--ring-hair) !important; /* !: late <style> */
  width: min(560px, calc(100vw - 32px));
  color: var(--brand-text);
  animation: sgEnter var(--dur-3) var(--ease) both;
}

@keyframes sgEnter {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.pc-modal h4,
.modal-header h4,
.modal-title {
  margin: 0;
  padding: 20px 24px 16px;
  font: var(--t-card);
  letter-spacing: var(--ls-card);
  border: 0;
}

.pc-modal p,
.pc-modal textarea,
.pc-modal-err,
.pc-confirm-list {
  margin-left: 24px !important;  /* !: late <style> */
  margin-right: 24px !important; /* !: late <style> */
}

.pc-modal textarea {
  width: calc(100% - 48px) !important; /* !: late <style> */
  box-sizing: border-box;
}

.pc-modal-bar,
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 24px 20px;
  margin: 0 !important;       /* !: late <style> */
  border: 0;
  background: transparent;
}

.modal-header {
  border: 0;
  padding: 0;
  position: relative;
}

.modal-header .close {
  position: absolute;
  top: 12px;
  right: 12px;
  opacity: 1;
  font-size: 20px;
  font-weight: 400;
  text-shadow: none;
}

.modal-body {
  padding: 0 24px 20px;
}

/* Scrims on ink, never black. layer.js writes an inline opacity (.3/.4) on
   its shade: without the override the veil renders at ~13% ink. */
.pc-mask,
.layui-layer-shade,
.modal-backdrop {
  background: var(--scrim) !important; /* !: late <style> */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 1;
}

.layui-layer-shade {
  opacity: 1 !important; /* !: layer.js inline opacity */
}

.pc-imgview {
  background: var(--scrim-deep) !important; /* !: late <style> */
}

/* Thumbnail hover-preview (Orders, Order Cost): H-ui.admin's
   #bigImgDiv.hoverEffect is a 500px box pinned top-centre, not a page
   scrim. It becomes one white preview card; the image sits flat inside. */
#bigImgDiv,
#bigImgDiv.hoverEffect {
  padding: 12px !important;                         /* !: H-ui.admin 15px */
  background: var(--brand-white) !important;        /* !: H-ui.admin #dbdbdb / template rgba(0,0,0,.8) */
  border-radius: var(--brand-radius-lg) !important; /* !: H-ui.admin 8px */
  box-shadow: var(--shadow-modal), var(--ring-hair);
}

.pc-imgview img {
  background: var(--brand-ink) !important; /* !: late <style> */
}

.pc-imgview-idx {
  color: var(--paper-88) !important; /* !: late <style> */
}

.pc-imgview-btn,
.pc-imgview-nav {
  background: var(--paper-12) !important;     /* !: late <style> */
  color: var(--paper-100) !important;         /* !: late <style> */
  border: 0 !important;                       /* !: late <style> */
  border-radius: var(--brand-radius-pill) !important; /* !: late <style> */
}

#bigImg,
#bigImgDiv.hoverEffect img {
  display: block;
  background: var(--ink-6);
  border-radius: var(--brand-radius-md) !important; /* !: template 5px */
  box-shadow: none !important;                      /* !: template shadow */
}

.layui-layer-content {
  color: var(--brand-text);
}

/* layui (layer 2.4 injects its skin after us: !: layer.css): the MODAL
   header without the grey band, and the close as a round ICON. */
.layui-layer-title {
  background: transparent !important;      /* !: layer.css #F8F8F8 band */
  border-bottom: 0 !important;             /* !: layer.css #eee rule */
  height: auto !important;                 /* !: layer.css */
  min-height: 22px;                        /* a blank title (" ") keeps the bar the controls sit in */
  line-height: 22px !important;            /* !: layer.css */
  padding: 20px 56px 12px 24px !important; /* !: layer.css */
  font: var(--t-card) !important;          /* !: layer.css */
  letter-spacing: var(--ls-card);
  color: var(--brand-text) !important;     /* !: layer.css #333 */
  border-radius: var(--brand-radius-lg) var(--brand-radius-lg) 0 0 !important; /* !: layer.css */
}

.layui-layer-setwin {
  top: 12px !important;   /* !: layer.css */
  right: 12px !important; /* !: layer.css */
}

/* Three ICON targets, three glyphs: minimise a dash, maximise a square,
   restore two squares, close the cross. Only the cross closes. */
.layui-layer-setwin a,
.layui-layer-setwin .layui-layer-close1 {
  width: var(--hit) !important;  /* !: layer.css 16px */
  height: var(--hit) !important; /* !: layer.css 16px */
  margin: 0 !important;          /* !: layer.css */
  border-radius: var(--brand-radius-pill);
  background: transparent none center / 14px no-repeat !important; /* !: layer.css sprite */
  transition: background-color var(--dur-2) var(--ease);
}

.layui-layer-setwin .layui-layer-close,
.layui-layer-setwin .layui-layer-close1 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%231c1917' stroke-opacity='.62' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M3 3l8 8M11 3l-8 8'/%3E%3C/svg%3E") !important; /* !: layer.css sprite */
}

.layui-layer-setwin .layui-layer-max {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%231c1917' stroke-opacity='.62' stroke-width='1.5'%3E%3Crect x='2.75' y='2.75' width='8.5' height='8.5' rx='2'/%3E%3C/svg%3E") !important; /* !: layer.css sprite */
}

.layui-layer-setwin .layui-layer-maxmin {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%231c1917' stroke-opacity='.62' stroke-width='1.5' stroke-linejoin='round'%3E%3Crect x='2.25' y='4.75' width='7' height='7' rx='1.5'/%3E%3Cpath d='M4.75 2.25h5.5a1.5 1.5 0 0 1 1.5 1.5v5.5'/%3E%3C/svg%3E") !important; /* !: layer.css sprite */
}

.layui-layer-setwin .layui-layer-min cite {
  left: 11px;
  width: 14px;
  height: 1.5px;
  margin-top: -0.75px;
  border-radius: 1px;
  background-color: var(--ink-62) !important; /* !: layer.css #2E2D3C */
}

.layui-layer-setwin a:hover,
.layui-layer-setwin .layui-layer-close1:hover {
  background-color: var(--ink-6) !important; /* !: layer.css */
}

.layui-layer-setwin .layui-layer-min:hover cite {
  background-color: var(--brand-text) !important; /* !: layer.css #2D93CA */
}

/* A page layer is a column: layer.js sizes the content from the title's
   pre-skin 34px, so the taller MODAL header would push the body 20px out
   of the sheet. The content fills what the header leaves instead. */
.layui-layer-page {
  display: flex;
  flex-direction: column;
}

.layui-layer-page .layui-layer-content {
  box-sizing: border-box;
  flex: 1 1 auto;
  min-height: 0;
  height: auto !important; /* !: layer.js inline height */
  padding: 0 24px 20px;
}

/* An iframe layer clips its iframe to the card's radius; a maximised one
   (inline left/top 0: Add Store, Add Employee) fills the frame square. */
.layui-layer-iframe {
  overflow: hidden;
}

.layui-layer-iframe[style*="left: 0px"][style*="top: 0px"] {
  border-radius: 0 !important; /* !: MODAL radius (the frame is the edge) */
  background: radial-gradient(520px 320px at 100% 0px, rgba(224, 88, 40, 0.06), transparent) no-repeat, var(--grain) var(--brand-bg) !important; /* !: MODAL white. The page's own paper and glow (the document's ellipse sits at -44px from its top, 44px down): restore and close float on it, no white slab above the page */
  box-shadow: none !important; /* !: MODAL (a full-frame sheet has no edge to lift) */
}

/* Its title bar holds only restore and close: the tab strip's 44px, not the
   MODAL's 54, so the page title sits 10px nearer where the tab puts it.
   layer.js sized the iframe from the 54px bar before it maximised, so the
   iframe takes the rest of the sheet itself. */
.layui-layer-iframe[style*="left: 0px"][style*="top: 0px"] .layui-layer-title {
  padding: 12px 56px 10px 24px !important; /* !: MODAL title (12 + 22 + 10 = 44) */
}

.layui-layer-iframe[style*="left: 0px"][style*="top: 0px"] .layui-layer-content,
.layui-layer-iframe[style*="left: 0px"][style*="top: 0px"] iframe {
  height: calc(100% - 44px) !important; /* !: layer.js inline height (measured on the 54px bar) */
}

.layui-layer-iframe[style*="left: 0px"][style*="top: 0px"] .layui-layer-content iframe {
  height: 100% !important; /* !: layer.js inline height */
}

.layui-layer-iframe[style*="left: 0px"][style*="top: 0px"] .layui-layer-setwin {
  top: 4px !important; /* !: MODAL setwin ((44 - 36) / 2) */
}

/* A 1200px layer (View Order, Read feedback) never overhangs the frame:
   layer.js centres on the rendered width, so a cap keeps 16px each side.
   Maximised layers (inline left: 0) take the whole frame as before. */
.layui-layer-iframe:not([style*="left: 0px"]) {
  max-width: calc(100vw - 32px);
}

/* --- DIALOG / TOAST / LOADING: layer.confirm, layer.alert, layer.msg,
   layer.load. layer.css is injected after the skin, so its button, icon
   and loading rules are overridden with !important. The MODAL sheet
   above stays; these give it the product's button and glyph language. */
.layui-layer-dialog .layui-layer-content {
  padding: 4px 24px 8px !important;  /* !: layer.css 20px */
  font: 400 13.5px/22px var(--brand-font-body) !important; /* !: layer.css 14px/24px */
  color: var(--brand-text);
  word-break: normal !important;     /* !: layer.css break-all splits words ("C ontinue?") */
  overflow-wrap: break-word;
}

.layui-layer-dialog .layui-layer-content.layui-layer-padding {
  padding-left: 58px !important;     /* !: layer.css 55px (24 inset + 22 glyph + 12) */
  text-align: left;
}

/* The status glyph: a token-coloured ring and mark instead of layer.css's
   sprite (a teal check, a second red, an amber "!"). The shape is a mask,
   so the colour is the token itself. */
.layui-layer-content > .layui-layer-ico {
  position: absolute;
  top: 4px !important;               /* !: layer.css 16px (on the first 22px line) */
  left: 24px !important;             /* !: layer.css 15px */
  width: 22px !important;            /* !: layer.css 30px */
  height: 22px !important;           /* !: layer.css 30px */
  background: currentColor !important; /* !: layer.css sprite */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='9.2'/%3E%3Cpath d='M11 6.6v5.2'/%3E%3Ccircle cx='11' cy='15.1' r='.5' fill='%23000'/%3E%3C/svg%3E") center / 22px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='9.2'/%3E%3Cpath d='M11 6.6v5.2'/%3E%3Ccircle cx='11' cy='15.1' r='.5' fill='%23000'/%3E%3C/svg%3E") center / 22px no-repeat;
  color: var(--ink-70);
}

.layui-layer-content > .layui-layer-ico1,
.layui-layer-content > .layui-layer-ico6 {
  color: var(--brand-ok);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='9.2'/%3E%3Cpath d='M7.2 11.4l2.6 2.6 5-5.4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='9.2'/%3E%3Cpath d='M7.2 11.4l2.6 2.6 5-5.4'/%3E%3C/svg%3E");
}

.layui-layer-content > .layui-layer-ico2,
.layui-layer-content > .layui-layer-ico5 {
  color: var(--brand-danger);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='9.2'/%3E%3Cpath d='M8.2 8.2l5.6 5.6M13.8 8.2l-5.6 5.6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='9.2'/%3E%3Cpath d='M8.2 8.2l5.6 5.6M13.8 8.2l-5.6 5.6'/%3E%3C/svg%3E");
}

.layui-layer-content > .layui-layer-ico3 {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='9.2'/%3E%3Cpath d='M8.7 8.9a2.4 2.4 0 1 1 3.4 2.2c-.7.35-1.1.85-1.1 1.6v.3'/%3E%3Ccircle cx='11' cy='15.6' r='.5' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='9.2'/%3E%3Cpath d='M8.7 8.9a2.4 2.4 0 1 1 3.4 2.2c-.7.35-1.1.85-1.1 1.6v.3'/%3E%3Ccircle cx='11' cy='15.6' r='.5' fill='%23000'/%3E%3C/svg%3E");
}

/* Buttons: the confirm is the view's one FILLED, every other choice a
   GHOST, right-aligned in the sheet's foot with the FILLED last, as on
   every form (visual order only; layer.css: a blue #2e8ded primary, a
   grey #f1f1f1 secondary, 28px, radius 2). */
.layui-layer-btn {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start; /* row-reverse: flex-start is the right edge */
  gap: 8px;
  padding: 12px 24px 20px !important; /* !: layer.css */
}

.layui-layer-btn a {
  display: inline-flex !important;     /* !: layer.css inline-block (the label would ride on the top edge) */
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: var(--ctl) !important;       /* !: layer.css 28px */
  line-height: 1 !important;           /* !: layer.css */
  margin: 0 !important;                /* !: layer.css */
  padding: 0 18px !important;          /* !: layer.css */
  border: 0 !important;                /* !: layer.css #dedede */
  border-radius: var(--brand-radius-pill) !important; /* !: layer.css 2px */
  background: var(--brand-white) !important;          /* !: layer.css #f1f1f1 */
  color: var(--brand-text) !important;                /* !: layer.css #333 */
  box-shadow: var(--ring-edge);
  font: 500 13px/1 var(--brand-font-body);
  opacity: 1 !important;               /* !: layer.css hover .9 */
  transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
}

.layui-layer-btn a:hover {
  color: var(--brand-primary-hover) !important; /* !: layer.css (hover text 4.74:1) */
}

.layui-layer-btn .layui-layer-btn0 {
  background: var(--brand-primary) !important;   /* !: layer.css #2e8ded */
  color: var(--brand-on-primary) !important;     /* !: layer.css */
  box-shadow: var(--accent-glow);
  font-weight: 600;
}

.layui-layer-btn .layui-layer-btn0:hover {
  background: var(--brand-primary-hover) !important; /* !: layer.css */
  color: var(--brand-on-primary) !important;         /* !: layer.css */
  box-shadow: var(--accent-glow-hover);
  transform: translateY(var(--lift));
}

.layui-layer-btn a:focus-visible {
  box-shadow: var(--ring-focus);
  outline: 0;
}

/* Toast (layer.msg): a compact pill that hugs its text, never the 360px
   sheet; with a status glyph on its left. */
.layui-layer-msg {
  width: auto !important;           /* !: layer.js inline width / MODAL */
  min-width: 0 !important;          /* !: layer.css 180px */
  max-width: min(420px, calc(100vw - 32px));
  border: 0 !important;             /* !: layer.css #D3D4D3 */
  border-radius: var(--brand-radius-pill) !important; /* !: MODAL */
  box-shadow: var(--shadow-menu) !important;          /* !: MODAL */
}

.layui-layer-msg .layui-layer-content,
.layui-layer-msg.layui-layer-hui .layui-layer-content {
  padding: 12px 22px !important;    /* !: layer.css */
  font: 500 13px/20px var(--brand-font-body) !important; /* !: layer.css */
  color: var(--brand-text) !important; /* !: layer.css .layui-layer-hui #fff */
  text-align: left;
}

.layui-layer-msg .layui-layer-content.layui-layer-padding {
  padding-left: 48px !important;    /* !: layer.css 55px */
}

.layui-layer-msg .layui-layer-content > .layui-layer-ico {
  top: 11px !important;             /* !: glyph on the 20px line */
  left: 16px !important;
}

/* Tips (layer.tips): an ink bubble with paper text, never layer.css's
   second orange (#FF9900, white text 2.1:1). No preview page calls it. */
.layui-layer-tips .layui-layer-content {
  background: var(--brand-ink) !important;  /* !: layer.css */
  color: var(--paper-100) !important;       /* !: layer.css */
  border-radius: var(--brand-radius-sm) !important; /* !: layer.css */
  box-shadow: var(--shadow-menu) !important; /* !: layer.css */
  font: 500 12.5px/18px var(--brand-font-body) !important; /* !: layer.css */
}

.layui-layer-tips i.layui-layer-TipsG {
  border-right-color: var(--brand-ink) !important;  /* !: layer.css */
  border-bottom-color: var(--brand-ink) !important; /* !: layer.css */
}

/* Loading (layer.load): the spinner alone, never a white sheet. */
.layui-layer.layui-layer-loading {
  width: auto !important;           /* !: MODAL width */
  min-width: 0 !important;
  background: transparent !important; /* !: MODAL */
  box-shadow: none !important;        /* !: MODAL */
  border-radius: 0 !important;        /* !: MODAL */
  animation: none;
}

.layui-layer-loading .layui-layer-content,
.layui-layer-loading .layui-layer-content.layui-layer-loading0,
.layui-layer-loading .layui-layer-content.layui-layer-loading1,
.layui-layer-loading .layui-layer-content.layui-layer-loading2 {
  box-sizing: border-box;
  width: 32px !important;             /* !: layer.css 60 / 37 */
  height: 32px !important;            /* !: layer.css 24 / 37 */
  background: none !important;        /* !: layer.css navy gif */
  border-radius: 50%;
  border: 3px solid var(--ink-12);
  border-top-color: var(--brand-primary);
  animation: sgSpin 0.8s linear infinite;
}

@keyframes sgSpin {
  to { transform: rotate(360deg); }
}

/* Menus: glass */
#Hui-userbar li.dropDown.open > .dropDown-menu,
.pc-plus-menu,
#Huiadminmenu {
  background: var(--glass-surface) !important; /* !: inline sheet / late <style> */
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
  border: 0 !important;                        /* !: H-ui / late <style> */
  border-radius: var(--brand-radius-md) !important; /* !: H-ui / late <style> */
  padding: 6px !important;                     /* !: H-ui / late <style> */
  box-shadow: var(--shadow-menu) !important;   /* !: H-ui / late <style> */
  color: var(--brand-text);
}

@supports not (backdrop-filter: blur(1px)) {
  #Hui-userbar li.dropDown.open > .dropDown-menu,
  .pc-plus-menu,
  #Huiadminmenu {
    background: var(--brand-surface) !important; /* !: inline sheet */
  }
}

#Hui-userbar .dropDown-menu li a,
.pc-plus-menu button {
  display: flex;
  align-items: center;
  box-sizing: border-box; /* 32 is the whole item, padding included */
  min-height: 32px;
  padding: 6px 10px !important;  /* !: H-ui / late <style> */
  border: 0;
  border-radius: var(--brand-radius-sm);
  color: var(--brand-text) !important; /* !: skin.css / late <style> */
  font: 500 13px var(--brand-font-body) !important; /* !: inline sheet */
  line-height: 20px !important;  /* !: inline sheet */
  white-space: nowrap;
  background: transparent !important; /* !: late <style> */
}

#Hui-userbar .dropDown-menu li a:hover,
#Hui-userbar .dropDown-menu li a:focus,
.pc-plus-menu button:hover {
  background: var(--ink-6) !important;  /* !: H-ui */
  color: var(--brand-text) !important;  /* !: H-ui */
}

.pc-plus-menu .sep {
  background: var(--brand-hairline);
  margin: 4px 0;
}

/* ============================================================================
   3. SHELL — against index.html's inline <style> (each forced line: !: inline <style>)
   ========================================================================== */

/* --- Wordmark ------------------------------------------------------------ */
#logo img[src*="fulfillant" i] {
  display: none; /* the wordmark ::before below replaces the raster logo */
}

#logo {
  display: flex;
  align-items: center;
  height: 64px;
  width: auto;
  min-width: 0;
  padding: 0 6px 0 var(--gutter);
  margin: 0;
  background: none;
  text-decoration: none;
}

#logo::before,
#shopLogin .logo::before {
  content: "shipgoods";
  font: 700 22px/1 var(--brand-font-body);
  letter-spacing: var(--ls-display);
  color: var(--paper-100);
}

#logo::after,
#shopLogin .logo::after {
  content: ".";
  font: 700 22px/1 var(--brand-font-body);
  letter-spacing: var(--ls-display);
  color: var(--brand-primary);
}

#logo:has(img:not([src*="fulfillant" i]))::before,
#logo:has(img:not([src*="fulfillant" i]))::after {
  content: none; /* production guard: another tenant image steps in */
}

/* --- Bar: 64px of solid brand ink ---------------------------------------- */
/* Solid ink, one hairline. Nothing ever scrolls under the bar (the iframe
   scrolls internally), so a translucent bar only showed the cream through
   as a muddy brown. The glass stays on the dropdown menus, which do float
   over content. No backdrop-filter here: on the static header.navbar-wrapper
   it would make a stacking context and bury the menus under the iframe. */
@media (min-width: 769px) {
  .navbar-wrapper {
    height: 64px;
    background: transparent;
    border-bottom: 0;
    box-shadow: none;
  }

  .navbar.navbar-fixed-top,
  .navbar-wrapper .navbar.navbar-fixed-top {
    height: 64px;
    background: var(--brand-ink);
    background-image: none;
    border-bottom: 0;
    box-shadow: inset 0 -1px 0 var(--paper-12);
  }

  .container-fluid {
    height: 64px;
    margin-top: 0;
  }

  #Hui-userbar {
    top: 0;
  }

  #Hui-userbar > ul > li,
  #Hui-userbar > ul > li > a {
    height: 64px !important;      /* !: inline <style> */
    line-height: 64px !important; /* !: inline <style> */
  }

  .Hui-aside,
  .Hui-article-box {
    top: 64px !important; /* !: inline <style> .shop */
  }
}

.navbar-fixed-top li,
.navbar-fixed-top a,
.navbar-fixed-top strong {
  color: var(--paper-100) !important; /* !: skin.css */
}

.navbar-nav > ul > li > a.dropDown_A,
.nav > ul > li > a.dropDown_A {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  padding: 0 16px !important;     /* !: H-ui */
  color: var(--paper-72) !important; /* !: skin.css */
}

.navbar-nav > ul > li > a.dropDown_A:hover,
.navbar-nav > ul > li > a.dropDown_A:focus {
  color: var(--paper-100) !important; /* !: skin.css */
}

.navbar-nav > ul > li > a.dropDown_A > .Hui-iconfont {
  font-size: 16px !important; /* !: H-ui */
  margin: 0;
  vertical-align: -1px;
}

.nav > ul > li > a:hover,
.nav > ul > li.current > a,
.dropDown.hover .dropDown_A,
.dropDown.open .dropDown_A,
.dropDown.open .dropDown_B {
  background-color: transparent !important; /* !: H-ui */
  background-image: none !important;        /* !: H-ui */
}

/* --- Right cluster ------------------------------------------------------- */
#Hui-userbar {
  color: var(--paper-72);
  padding-right: 8px;
}

#Hui-userbar > ul > li,
#Hui-userbar > ul > li > a {
  font-size: 13px !important; /* !: inline <style> */
  font-weight: 500;
}

#Hui-userbar > ul > li > a {
  padding: 0 10px !important;         /* !: H-ui */
  color: var(--paper-72) !important;  /* !: skin.css */
}

#Hui-userbar > ul > li > a:hover,
#Hui-userbar > ul > li > a:focus,
#Hui-userbar li.dropDown.open > a {
  color: var(--paper-100) !important; /* !: skin.css */
}

/* The user name: the "Welcome [ ]" text nodes vanish; the name is a chip. */
#Hui-userbar > ul > li:first-child {
  font-size: 0 !important; /* !: inline <style> font-size */
}

#Hui-userbar strong {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  margin-right: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--paper-100);
  background: var(--paper-8);
  box-shadow: inset 0 0 0 1px var(--paper-16);
  border-radius: var(--brand-radius-pill);
  vertical-align: middle;
  white-space: nowrap;
}

#Hui-userbar strong::before {
  content: "\e62c";
  font-family: "Hui-iconfont";
  font-size: 13px;
  margin-right: 6px;
  color: var(--paper-55);
}

#Hui-userbar li.dropDown > a > .Hui-iconfont {
  font-size: 10px !important; /* !: H-ui */
  opacity: 0.88;
  margin-left: 4px;
  vertical-align: 1px;
  display: inline-block;
}

/* The two counters: round hit areas, one count badge with a bar-colour ring */
#Hui-userbar #Hui-msg {
  position: relative;
}

#Hui-userbar #Hui-msg > i.Hui-iconfont:empty {
  display: none; /* a glyph slot the template leaves empty next to the counter */
}

#Hui-userbar #Hui-msg > a {
  margin: 14px 2px 0;
  line-height: 1 !important;     /* !: inline <style> */
  vertical-align: top;
  color: var(--paper-88) !important; /* !: skin.css */
}

#Hui-userbar #Hui-msg > a:hover,
#Hui-userbar #Hui-msg > a:focus {
  background-color: var(--paper-8) !important; /* !: ICON hover */
  color: var(--paper-100) !important;          /* !: ICON hover */
}

#Hui-userbar #Hui-msg > a > .Hui-iconfont {
  font-size: 18px !important; /* !: H-ui */
  color: inherit;
  line-height: 1;
}

#Hui-userbar #Hui-msg .badge {
  position: absolute;
  top: 10px;
  right: 2px;
  left: auto;
  display: inline-flex;
  align-items: center;
  line-height: 1 !important; /* !: H-ui */
  box-shadow: 0 0 0 2px var(--brand-ink);
  overflow: visible;
}

#mobilemenu #Hui-msg .badge {
  position: static;
  margin-left: 6px;
}

/* Currency: only the value, from the title attribute, behind a short rule */
#Hui-userbar li.hui-currency {
  padding-left: 16px;
  padding-right: 6px;
  margin-left: 6px;
  border-left: 0;
  background: linear-gradient(var(--paper-12), var(--paper-12)) left center / 1px 22px no-repeat;
}

#Hui-userbar li.hui-currency span[title] {
  font-size: 0;
}

#Hui-userbar li.hui-currency span[title]::before {
  content: attr(title);
  font: 500 11px var(--brand-font-mono);
  letter-spacing: var(--ls-label);
  color: var(--paper-72);
}

/* Dropdown panels hang from the bar's bottom edge, right-aligned */
#Hui-userbar li.dropDown.open > .dropDown-menu {
  top: calc(100% - 6px) !important; /* !: H-ui */
  left: auto !important;            /* !: H-ui */
  right: 0 !important;              /* !: H-ui */
  min-width: 200px !important;      /* !: H-ui */
  text-align: left;
}

#Hui-userbar .dropDown-menu li,
#Hui-userbar .dropDown-menu li a {
  height: auto;
}

#Hui-userbar .dropDown-menu .languageLi {
  padding: 0;
  line-height: 20px;
}

#Hui-userbar .dropDown-menu .languageLi:first-child a {
  color: var(--ink-62) !important; /* !: skin.css */
  padding: 8px 10px 4px !important; /* !: inline <style> */
}

#Hui-userbar .dropDown-menu .languageLi a.languageDiv.selected,
#Hui-userbar .languageDiv.selected {
  color: var(--brand-text) !important; /* !: skin.css */
  font-weight: 600 !important;         /* !: inline <style> */
  background: var(--accent-10) !important; /* !: menu hover */
}

#pcShopNotice {
  background: var(--brand-ink);
  color: var(--paper-100);
  border: 0;
  box-shadow: var(--shadow-ink);
  border-radius: var(--brand-radius-md);
  font: 500 13px var(--brand-font-body);
}

#mobilemenu {
  background: var(--brand-ink);
}

#mobilemenu > ul > li > a {
  color: var(--paper-100);
}

/* --- Sidebar ------------------------------------------------------------- */
.Hui-aside,
.Hui-aside .menu_dropdown {
  background-color: var(--brand-surface);
}

.Hui-aside {
  padding: 8px 8px 24px;
  box-sizing: border-box;
  border-right: 1px solid var(--brand-hairline);
}

.Hui-aside::before {
  content: "Menu";
  display: block;
  padding: 12px 16px 4px;
  color: var(--ink-62);
}

.Hui-aside .menu_dropdown dl {
  margin: 0 0 6px;
}

.Hui-aside .menu_dropdown dt {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  line-height: 40px;
  padding: 0 12px;
  font-family: var(--brand-font-body);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--brand-text);
  border-bottom: 0;
  border-radius: var(--brand-radius-sm);
  position: relative;
}

.Hui-aside .menu_dropdown dt > .Hui-iconfont:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  margin: 0;
  font-size: 18px;
  color: var(--ink-62);
}

.Hui-aside .menu_dropdown dt .menu_dropdown-arrow {
  top: 50%;
  right: 12px;
  width: auto;
  height: 20px;
  line-height: 20px;
  margin: -10px 0 0;
  font-size: 12px;
  color: var(--ink-62); /* an interactive glyph: 4.7:1, not the separator tone */
}

.Hui-aside .menu_dropdown dt:hover {
  background-color: var(--ink-4);
  color: var(--brand-text);
}

.Hui-aside .menu_dropdown dt.selected {
  font-weight: 600;
  color: var(--brand-text);
}

.Hui-aside .menu_dropdown dt.selected > .Hui-iconfont:first-child,
.Hui-aside .menu_dropdown dt.selected .menu_dropdown-arrow {
  color: var(--brand-primary);
}

.Hui-aside .menu_dropdown dd ul {
  padding: 2px 0 6px;
}

.Hui-aside .menu_dropdown dd li {
  line-height: 20px;
  max-height: none;
  overflow: visible;
}

.Hui-aside .menu_dropdown dd li a {
  position: relative;
  display: flex;
  align-items: center;
  height: 32px;
  color: var(--ink-70);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  padding: 0 12px 0 46px;
  margin: 1px 0;
  border: 0;
  border-radius: var(--brand-radius-sm);
  background: transparent;
  text-decoration: none;
}

.Hui-aside .menu_dropdown dd li a::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: var(--ink-22);
}

.Hui-aside .menu_dropdown dd li a:hover {
  color: var(--brand-text);
  background-color: var(--ink-4);
}

.Hui-aside .menu_dropdown dd li a:focus,
.Hui-aside .menu_dropdown dd li.current a,
.menu_dropdown li.current a:hover {
  color: var(--brand-text);
  font-weight: 600;
  background-color: var(--accent-10);
}

.Hui-aside .menu_dropdown dd li a:hover::before,
.Hui-aside .menu_dropdown dd li a:focus::before,
.Hui-aside .menu_dropdown dd li.current a::before {
  background: var(--brand-primary);
}

/* Unread state: index.html's JS wraps the WHOLE title in .c-red
   ("Quotation (3)"), so the title keeps its type and a 6px dot marks the
   state; the "(n)" stays ink at the dt/dd size (orange is never text). */
.Hui-aside .c-red,
.Hui-aside .c-red a {
  color: inherit !important; /* !: the §5 .c-red utility (this is a count, not an error) */
  font: inherit;
  margin: 0;
}

.Hui-aside .c-red::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--brand-primary);
  vertical-align: middle;
}

/* Collapse handle: iconfont glyph instead of the grey/blue PNG sprite */
.dislpayArrow a {
  background: var(--brand-surface);
  box-shadow: var(--ring-hair);
  border-radius: 0 var(--brand-radius-sm) var(--brand-radius-sm) 0;
  width: 16px;
  height: 44px;
  margin-top: -22px;
  text-align: center;
  color: var(--ink-62);
  text-decoration: none;
}

.dislpayArrow a::before {
  content: "\e6d4";
  font-family: "Hui-iconfont";
  font-size: 12px;
  line-height: 44px;
}

.dislpayArrow a.open::before {
  content: "\e6d7";
}

.dislpayArrow a:hover {
  color: var(--brand-primary) !important; /* !: skin.css */
}

/* --- Tab strip: 44px, segmented pills ----------------------------------- */
#Hui-tabNav,
.Hui-tabNav {
  border-bottom: 0;
  background: radial-gradient(520px 320px at 100% 0, rgba(224, 88, 40, 0.06), transparent), var(--grain), var(--brand-bg); /* the corner wash starts here */
}

#Hui-tabNav .acrossTab {
  border: 0;
  background: none;
}

@media (min-width: 769px) {
  #Hui-tabNav,
  .Hui-tabNav,
  .Hui-tabNav-wp {
    height: 44px;
  }

  #Hui-tabNav {
    padding: 0 75px 0 var(--gutter);
  }

  #Hui-tabNav .acrossTab {
    top: 8px;
    bottom: auto;
    left: 2px;
    height: 28px;
    line-height: 28px;
  }

  .Hui-article {
    top: 44px;
  }

  .Hui-tabNav-more {
    top: 8px;
  }
}

#Hui-tabNav .acrossTab li {
  margin-right: 4px !important; /* !: SEGMENTED margin */
}

#Hui-tabNav .acrossTab li i {
  position: static;
  display: inline-block;
  width: auto;
  height: auto;
  margin: 0 -4px 0 6px;
  background: none;
  font-size: 11px;
  line-height: 1;
  color: var(--ink-62);
  vertical-align: middle;
}

#Hui-tabNav .acrossTab li i::before {
  content: "\e6a6";
  font-family: "Hui-iconfont";
}

#Hui-tabNav .acrossTab li i:hover {
  color: var(--brand-primary);
}

#Hui-tabNav .acrossTab li em {
  display: none; /* the template already hides it; kept so the pill never grows a stub */
}

/* --- Gutter: one left edge on every tab ---------------------------------- */
/* The tab iframe fills the article box edge to edge (index.html's inline
   sheet pads it 20px); every document carries its own --gutter instead. So a
   layer popup (a layui iframe) and a standalone open get the same frame as a
   tab, and a layer's scrim reaches the sidebar and the tab strip. The gutter
   equals the tab strip's left padding: pill, title and cards share one x.
   Document media queries below measure the full frame (window - 249). */
@media (min-width: 769px) {
  .show_iframe iframe {
    padding: 0;
    width: 100%;
    height: 100%;
  }

  html:not(:has(.Hui-article-box)):not(:has(#shopLogin)) body {
    box-sizing: border-box;
    padding: var(--gutter) var(--gutter) 0;
  }

  .page-container,
  #shop-welcome .page-container,
  .tabCon > .page-container,
  .pc-page,
  .dc-wrap,
  .ak-wrap {
    padding: 0 0 32px !important; /* !: H-ui.admin / late <style> */
    max-width: var(--content-max);
    margin-left: 0;
    margin-right: auto;
  }
}

/* The paper (cream + grain) is painted once, by each document's body. */
.Hui-article-box,
.Hui-article,
.page-container,
.show_iframe iframe,
.pc-page {
  background-color: transparent;
}

/* The ambient glow is paper, not a veil: the tab strip paints its top 44px
   (§3 Tab strip) and each document continues the same ellipse under its own
   content (§1 Base), so the wash reads as one and never tints a card. */
.Hui-article-box {
  position: absolute;
}

/* --- Footer -------------------------------------------------------------- */
footer {
  border-top-color: var(--brand-hairline) !important; /* !: inline <style> */
  background: var(--brand-surface) !important;        /* !: inline <style> */
}

footer .footer,
footer .footer a {
  color: var(--ink-62) !important; /* !: inline <style> */
}

footer .footer a:hover,
.breadcrumb a:not(.btn):hover {
  color: var(--brand-text) !important; /* !: inline <style> (small text on cream: ink + an orange underline) */
  text-decoration: underline;
  text-decoration-color: var(--brand-primary);
  text-underline-offset: 3px;
}

.tools-right,
.tools-right.toTop {
  background: var(--brand-surface);
  border: 0;
  box-shadow: var(--shadow-card);
  color: var(--ink-62) !important;             /* !: H-ui */
  border-radius: var(--brand-radius-pill);
}

.tools-right:hover,
.tools-right.toTop:hover {
  background: var(--brand-primary) !important; /* !: H-ui */
  color: var(--brand-on-primary) !important;   /* !: H-ui */
}

/* ============================================================================
   4. PAGES — geometry and page-specific selectors only
   ========================================================================== */

/* --- All Orders / Feedbacks (F = .page-container[data-pid]) -------------- */
@media (min-width: 769px) {
  .page-container[data-pid] #searchForm > .btn-primary {
    width: auto;
    margin-right: 0; /* one 8px control gap after it, as between every field */
    padding: 0 14px;
  }

  .select-box.searchtype {
    width: 124px !important; /* !: template widths */
  }

  .select-box.searchCountry {
    width: 112px !important; /* !: template widths */
  }

  .select-box.financial_status {
    width: 142px !important; /* !: template widths */
  }

  .select-box.searchAdmin_id {
    width: 150px;
  }

  /* The keywords field absorbs Row A's free space, so the row always ends
     on the card's right padding (as in v2): no hole after Financial Status. */
  #searchForm .keywords,
  #searchForm > input[name="keywords"] {
    flex: 1 1 140px;
    width: auto;
    min-width: 140px;
    max-width: none;
  }

  .shop-multi-admin-wrap .select2-container {
    width: 190px !important; /* !: select2 inline width */
  }

  #adminidstr {
    width: 96px !important; /* !: inline width */
  }

  /* Row B: the three date pairs */
  #searchForm > #timeSelectorHolder {
    flex: 1 1 100%;
    order: 1;
  }

  /* Row C: toggles left, Search + Export bottom-right */
  #searchForm > .SelectorHolderdiv {
    flex: 1 1 320px;
    min-width: 0;
    order: 2;
  }

  #searchForm > .btn-success {
    order: 3;
    margin-left: auto;
  }

  #searchForm > .btn-success ~ .btn-success {
    margin-left: 0;
  }

  /* Date pairs as a (caption, pair) grid: a caption never ends a row alone
     (Orders only: Order Summary keeps its one DATE PAIR, Trace is a flat row) */
  .page-container[data-pid] #searchForm #timeSelectorHolder {
    display: grid !important; /* !: DATE PAIR flex */
    grid-template-columns: repeat(3, max-content max-content);
    column-gap: 8px;
    row-gap: 10px; /* = the card's row pitch */
    align-items: center;
    justify-content: start;
  }

  #searchForm #timeSelectorHolder > span {
    margin: 0;
  }

  #searchForm #timeSelectorHolder > div {
    margin-right: 8px;
  }

  #searchForm #timeSelectorHolder > div:not(:has(input[type="date"])) {
    grid-column: 1 / -1;
    margin-right: 0;
  }
}

/* From a 1440 window (captions inline) the date row ends on the card's
   right padding like the rows above and below it: each pair takes a share
   of the free width and its two dates grow into it (+8px each at 1440). */
@media (min-width: 1148px) {
  .page-container[data-pid] #searchForm #timeSelectorHolder {
    grid-template-columns: repeat(3, max-content minmax(max-content, 1fr));
  }

  .page-container[data-pid] #searchForm #timeSelectorHolder > div:has(input[type="date"]) input[type="date"] {
    flex: 1 1 112px;
  }

  .page-container[data-pid] #searchForm #timeSelectorHolder > div:has(input[type="date"]):last-of-type {
    margin-right: 0;
  }
}

@media (min-width: 1169px) {
  .page-container:has(#searchForm[action*="shipping" i]) #timeSelectorHolder > div:has(input[type="date"]) {
    flex: 1 1 auto;
  }

  .page-container:has(#searchForm[action*="shipping" i]) #timeSelectorHolder > div:has(input[type="date"]) input[type="date"] {
    flex: 1 1 112px;
  }

  .page-container:has(#searchForm[action*="shipping" i]) #timeSelectorHolder > div:has(input[type="date"]):nth-of-type(3) {
    margin-right: 0;
  }
}

/* Frame widths (the gutter is inside the document, 2 x 24):
   1280 window -> 1031 frame / 983 content, 1366 -> 1117 / 1069,
   1440 -> 1191 / 1143, 1920 -> 1671 / 1623 */
/* Below ~1100px of content the captions stack over their pairs, so the
   three pairs still share one row (3 x 242 + 2 x 12 = 750) instead of
   leaving SHIPPING TIME alone on a row of its own. */
@media (min-width: 769px) and (max-width: 1147px) {
  .page-container[data-pid] #searchForm #timeSelectorHolder {
    grid-template-columns: repeat(3, max-content);
    grid-template-rows: auto auto;
    grid-auto-flow: column;
    column-gap: 12px;
    row-gap: 5px;
  }

  .page-container[data-pid] #searchForm #timeSelectorHolder > div {
    margin-right: 0;
  }
}

@media (min-width: 769px) and (max-width: 887px) {
  .page-container[data-pid] #searchForm #timeSelectorHolder {
    grid-template-columns: max-content max-content;
    grid-template-rows: none;
    grid-auto-flow: row;
    row-gap: 10px;
  }
}

/* 1280 window (935px of card): SyncOrders keeps its place at the head of
   Row A, in DOM and tab order as at every other width. The fixed fields
   give up a few px each (still wider than their labels), so Row A holds
   one line and the keywords field keeps ~140px; the three toggles and
   Search + Export share the last row as at 1366 and 1440. */
@media (min-width: 769px) and (max-width: 1048px) {
  .page-container[data-pid] .select-box.searchCountry {
    width: 104px !important; /* !: template widths */
  }

  .page-container[data-pid] .shop-multi-admin-wrap .select2-container {
    width: 168px !important; /* !: select2 inline width */
  }

  .page-container[data-pid] #adminidstr {
    width: 84px !important; /* !: inline width */
  }

  .page-container[data-pid] #searchForm .keywords,
  .page-container[data-pid] #searchForm > input[name="keywords"] {
    min-width: 120px;
    flex-basis: 120px;
  }
}

/* Chip strip: ten chips + the feedback chip fit one row from 1077px of content up */
.page-container[data-pid] .divstatus a.btn {
  padding: 0 10px !important; /* !: SEGMENTED */
}

/* Below a 1440 window (1191 frame) two px less per side keeps all eleven
   chips (6px apart) on one row at 1366; at 1280 the strip is two rows by
   design. */
@media (min-width: 769px) and (max-width: 1190px) {
  .page-container[data-pid] .divstatus a.btn {
    padding: 0 8px !important; /* !: SEGMENTED */
  }
}

.divstatus,
.divstatus.Huialert,
.divstatus.Huialert-danger {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 6px; /* the spec's chip gap */
  background: transparent;
  border: 0 !important;               /* !: H-ui .Huialert */
  border-radius: 0 !important;        /* !: H-ui */
  box-shadow: none !important;        /* !: template */
  padding: 0;
  margin: 16px 0 8px;
  color: var(--brand-text);
  text-shadow: none;
}

.divstatus a.btn-primary-outline:has(> i) {
  padding: 0 12px;
}

.divstatus a.btn-primary-outline:has(> i) i {
  font-size: 14px;
  color: var(--brand-text);
}

.combined-orders {
  border-left-color: var(--brand-primary);
}

/* List header + row columns share one geometry. The head strip above a
   row is a meta line, not a second grid that half-registers with the
   columns: date, store, order id, country, buyer and staff follow each
   other 24px apart (the store name gives way first), and only the two
   glyphs sit on the right, 8px apart. */
@media (min-width: 769px) {
  .divtable .div-top {
    column-gap: 24px;
    justify-content: flex-start;
  }

  .divtable .div-top > .divinfo {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    padding-left: 0;
    padding-right: 0; /* the 24px gap is the only space between two facts */
  }

  .divtable .div-top > .divtop_2 {
    flex: 0 1 auto;
  }

  .divtable .div-top > .divtop_10 {
    margin-left: auto;
  }

  .divtable .div-top > .divtop_10 + .divtop_11 {
    margin-left: -16px; /* the strip's 24px gap, less 16: the two glyphs are one cluster */
  }

  .divtbody .div2,
  .divtable .div-bottom .div2 {
    width: 150px;
    flex: 0 0 150px;
  }

  .divtbody .div1,
  .divtable .div-bottom .div1 {
    width: auto;
    flex: 1 1 0%;
    min-width: 0;
  }
}

@media (min-width: 769px) and (max-width: 1072px) {
  .divtbody .div4,
  .divtable .div-bottom .div4 {
    width: 140px !important; /* !: template */
    flex: 0 0 140px;
  }

  .divtable .div-bottom .divbotm_6 {
    min-width: 128px;
  }
}

/* Wide frames (a 1530px+ window): the template's 250 / 150 / 250 status
   columns become three even 180px columns, and the product column takes
   the rest. */
@media (min-width: 1281px) {
  .divtbody .div2,
  .divtable .div-bottom .div2,
  .divtbody .div3,
  .divtable .div-bottom .div3,
  .divtbody .div4,
  .divtable .div-bottom .div4 {
    width: 180px !important; /* !: template */
    flex: 0 0 180px;
  }
}

/* MORE: the template leads the caption with an &emsp; (1em + the label
   tracking), which started it 12px right of the buttons it labels. */
.divtbody .divth.div6 {
  text-indent: calc(-1em - var(--ls-label));
}

/* Laptop frames (a 1280-1349 window): the order-status and shipment
   columns give 50px to the product column, and its name wraps to a second
   line, so it is never cut after ten characters. Each width holds its
   longest chip (Waiting Process 125, Shipping: None 115) plus the column's
   14 + 10 padding; header and rows share the classes, so the columns stay
   registered. */
@media (min-width: 769px) and (max-width: 1100px) {
  .divtbody .div3,
  .divtable .div-bottom .div3 {
    width: 124px !important; /* !: template (order status + money) */
    flex: 0 0 124px;
  }

  .divtbody .div4,
  .divtable .div-bottom .div4 {
    width: 140px !important; /* !: template (trace: Shipping: None 115 + 14 + 10 column padding) */
    flex: 0 0 140px;
  }

  .divtbody .div5,
  .divtable .div-bottom .div5 {
    width: 176px !important; /* !: template */
    flex: 0 0 176px;
  }
}

.divtbody .divth:not(.divinputall) {
  padding-left: 14px;
}

/* Row card */
.divul,
.divul.shadow.radius {
  background: var(--brand-white);
  border: 0;
  border-radius: var(--brand-radius-lg);
  box-shadow: var(--shadow-card) !important;        /* !: H-ui .shadow */
  margin: 0 0 10px; /* floats never collapse margins: one 10px below = row -> row 10 */
  padding: 0;
  overflow: visible;
  box-sizing: border-box;
  transition: box-shadow var(--dur-2) var(--ease);
}

.divul:hover {
  box-shadow: var(--shadow-hover) !important; /* !: H-ui .shadow */
}

/* A row with feedback carries one orange signal set: the head's glyph disc
   and the tinted Read feedback. No side bar: on a 20px corner a 3px inset
   curves into a crescent that reads as a rendering fault. */

.divtable .div-top {
  display: flex;
  align-items: center;
  min-height: 44px;
  background: var(--brand-surface);
  border-bottom: 1px solid var(--ink-8);
  padding: 0 16px;
  border-radius: var(--brand-radius-lg) var(--brand-radius-lg) 0 0;
  box-sizing: border-box;
}

.divtable .div-top p {
  line-height: 20px;
}

.divtable .divtop_1 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px 0 0;
}

.divtop_1 input,
.divtable .divtop_1 input[type="checkbox"] {
  position: static;
  top: auto;
}

.divtable .divtop_1 strong {
  font: var(--t-caption);
  color: var(--ink-70);
  white-space: nowrap;
}

.divtable .divtop_2 {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-70);
}

.divtable .divtop_3 {
  font: 600 13.5px var(--brand-font-mono);
  color: var(--brand-text);
  line-height: 1.4;
}

.divtable .divtop_5 {
  font: var(--t-caption);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-70);
}

.divtable .divtop_6 {
  font-size: 13px;
  color: var(--brand-text); /* the buyer is primary text; .85 was the one off-ramp ink */
}

.divtable .divtop_8 {
  font-size: 13px;
  color: var(--ink-70);
}

.divtable .div-top .Hui-iconfont {
  font-size: 16px;
  color: var(--ink-62);
  vertical-align: -1px;
}

/* Text on the surface head keeps its ink on hover (orange text there reads
   3.4:1): an orange underline signals it; the glyph may turn orange. */
.divtable .div-top a:hover .Hui-iconfont {
  color: var(--brand-primary);
}

.divtable .div-top a:hover {
  color: var(--brand-text);
  text-decoration: underline;
  text-decoration-color: var(--brand-primary);
  text-underline-offset: 3px;
}

/* has-feedback = the head's one orange; no-feedback = quiet ink */
.divtable a.c-warning,
.divtable .c-warning i,
.divtable a.c-warning i,
.divtop_10 a.feedback.c-warning {
  color: var(--brand-primary) !important; /* !: utility */
}

.divtop_10 a.feedback.c-warning {
  background: var(--accent-10) !important; /* !: ICON */
}

.divtable a.c-333,
.divtable .c-333 i,
.divtable a.c-333 i,
.divtop_10 a.c-333 i {
  color: var(--ink-62) !important; /* !: utility (clickable glyph: 4.7:1) */
}

/* Row body: columns by gap, no vertical rules */
.divtable .div-bottom {
  padding: 14px 16px 16px;
  margin-top: 0;
}

.divtable .divbotm_2,
.divtable .divbotm_3,
.divtable .divbotm_4,
.divtable .divbotm_5,
.divtable .divbotm_6 {
  border-left: 0;
  padding-left: 14px;
}

.divtable .div1 {
  padding: 0 10px 0 0 !important; /* !: template */
}

.divtable .divbotm_4 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.divtable .divbotm_4 > .label {
  margin: 2px 0;
}

.divtable .divbotm_2 p,
.divtable .divbotm_3 p,
.divtable .divbotm_4 p {
  line-height: 1.6;
  margin: 0;
}

.divtable .div-bottom .label {
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  margin: 2px 0;
}

.divtable .divinfo li {
  border-top-color: var(--brand-hairline);
  padding-top: 0;
  margin-bottom: 10px;
}

.divtable .divinfo li:first-child {
  padding-top: 0;
}

.divtable .order_img {
  width: 56px;
  height: 56px;
  top: 0;
  border-radius: var(--brand-radius-sm);
  background: var(--ink-6);
  box-shadow: inset 0 0 0 1px var(--ink-8);
  overflow: hidden;
}

.divtable .order_img img {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--brand-radius-sm);
}

.divtable .order_title {
  padding-left: 70px;
  min-height: 56px;
}

.divtable .order_title p {
  line-height: 1.4;
}

.divtable .order_title p:nth-child(1) {
  font: var(--t-sub);
  color: var(--brand-text);
}

/* The product name is the row's main fact: it wraps to a second line
   before it ever ends in an ellipsis. */
.divtable .order_title p.text-container:nth-child(1) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.divtable .order_title p:nth-child(2) {
  color: var(--ink-62);
  font: var(--t-meta);
}

.divtable .c-999,
.divtable .c-666 {
  color: var(--ink-62) !important; /* !: utility */
}

/* Money: mono ink, the currency code as a quiet chip-caption before it */
.divtable font.c-999,
.divtable .divbotm_3 .c-999,
.divtable font.mr-5 {
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-text) !important; /* !: utility */
}

.divtable .c-999 .f-12,
.divtable .c-999.f-12,
.divtable .c-666.f-12,
.divtable span.f-12 {
  font-size: 10.5px;
  letter-spacing: var(--ls-chip);
  font-weight: 600;
  color: var(--ink-62) !important; /* !: utility */
}

.divtable .divbotm_5 > div[style] {
  border-top: 1px solid var(--brand-hairline) !important; /* !: inline dashed */
  margin-top: 8px;
  padding-top: 6px;
  line-height: 20px !important; /* !: inline */
}

.divtable .divbotm_5 > div[style]:first-child {
  border-top: 0 !important;  /* !: inline */
  margin-top: 0;
  padding-top: 0 !important; /* !: inline */
}

/* "Historical tracking numbers:" wraps inside its 200px column instead of
   running under the row actions. */
.divtable .divbotm_5 span.f-12 {
  display: block;
  white-space: normal;
  line-height: 16px;
  margin-bottom: 2px;
}

/* Row actions: GHOST, stacked, right. The 140px column gives its buttons
   132px (8px on the left, none on the right: the row's own 16px padding is
   the card edge), so "Read feedback" keeps a 12px+ inset on both sides. */
.divtable .divbotm_6 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 0 0 0 8px;
}

.divtbody .divth.div6 {
  padding-left: 8px; /* MORE starts on the buttons it labels */
}

.divtable .divbotm_6 .btn,
.divbotm_6 .btn {
  height: var(--ctl-row);
  margin: 0;
  padding: 0 12px;
  font-size: 12.5px;
  justify-content: center;
  white-space: nowrap;
}

/* Feedback in a row that has one: an accent tint, and an unread dot on the
   pill's corner (not in the label, which then keeps its width and weight). */
.divul:has(.div-top a.c-warning) a.btn[title="feedback"] {
  position: relative;
  overflow: visible;
  background: var(--accent-10) !important; /* !: GHOST */
  color: var(--brand-text);
  box-shadow: none;
}

.divul:has(.div-top a.c-warning) a.btn[title="feedback"]::before {
  content: "";
  position: absolute;
  top: -1px;
  right: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-primary);
  box-shadow: 0 0 0 2px var(--brand-white);
}

.divul:not(:has(.div-top a.c-warning)) a.btn[title="feedback"] {
  color: var(--ink-62) !important; /* !: GHOST */
}

.divtable .text-container:hover:after {
  border-radius: var(--brand-radius-sm);
  box-shadow: var(--shadow-menu);
  border: 0;
  padding: 6px 10px;
  color: var(--brand-text);
  font-size: 12.5px;
}

@media (min-width: 769px) and (max-width: 1072px) {
  .divtable .div-top .divtop_2 {
    min-width: 0;
  }
}

/* --- Order detail (#order-info) ------------------------------------------ */
#order-info .page-container::before {
  content: "Order";
  display: block;
  margin: 0 0 8px;
}

#order-info .page-container > div > table:not(:has(> thead)) > tbody > tr:first-child > td:first-of-type {
  font: 600 20px var(--brand-font-mono);
  letter-spacing: var(--ls-title);
}

#order-info .page-container > div > table:not(:has(> thead)) > tbody > tr:nth-child(5) > td:last-of-type,
#order-info .page-container > div > table:not(:has(> thead)) > tbody > tr:nth-child(7) > td:last-of-type {
  font-weight: 600;
}

/* ORDER TOTAL is money: mono, as ORDER NUM and COGS beside it */
#order-info .page-container > div > table:not(:has(> thead)) > tbody > tr:nth-child(2) > td:first-of-type {
  font: 600 13px var(--brand-font-mono);
}

#order-info .page-container > div > table:not(:has(> thead)) > tbody > tr > td {
  min-height: 44px;
  padding: 10px 20px;
}

#order-info td.mobile-6:empty::before {
  content: "\2014";
  color: var(--ink-38);
}

#order-info td.mobile-6 > .mr-10:has(> .f-12) {
  font: 500 13px var(--brand-font-mono);
}

#order-info td.mobile-6 > .mr-10 > .f-12 {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-62);
}

#shipTo {
  display: grid !important; /* !: inline display */
  grid-template-columns: 1fr 1fr;
  gap: 2px 24px;
}

#shipTo tbody,
#shipTo tr {
  display: contents;
}

#shipTo td {
  padding: 1px 0 !important; /* !: inline padding */
  font-size: 12.5px;
  color: var(--ink-70);
  white-space: nowrap; /* "Phone: +1-202-555-0101" never breaks at its hyphens */
}

/* The buyer ("Jane Doe [ buyer1@example.com ]") breaks only before the
   bracketed e-mail, never after the "[". */
#order-info .page-container > div > table:not(:has(> thead)) > tbody > tr:nth-child(5) > td:first-of-type {
  white-space: nowrap;
}

#order-info .mt-20 {
  margin-top: 24px;
}

#order-info .mt-20::before {
  content: "Items";
  display: block;
  margin-bottom: 8px;
}

#order-info table:has(> thead) > thead th:nth-child(3),
#order-info table:has(> thead) > tbody td:nth-child(3) {
  text-align: left;
}

#order-info table:has(> thead) > tbody td:nth-child(3) {
  font: var(--t-sub);
}

#order-info table:has(> thead) > thead th:nth-child(5),
#order-info table:has(> thead) > thead th:nth-child(7),
#order-info table:has(> thead) > tbody td:nth-child(5),
#order-info table:has(> thead) > tbody td:nth-child(7) {
  text-align: right !important; /* !: H-ui .text-l !important */
}

/* Every numeric column reads right; the id and the count are numbers too. */
#order-info table:has(> thead) > thead th:nth-child(1),
#order-info table:has(> thead) > thead th:nth-child(6),
#order-info table:has(> thead) > tbody td:nth-child(1),
#order-info table:has(> thead) > tbody td:nth-child(6) {
  text-align: right !important; /* !: H-ui !important */
}

#order-info table:has(> thead) > thead th:nth-child(4) {
  width: 80px;
}

#order-info table:has(> thead) > tbody td:nth-child(1),
#order-info table:has(> thead) > tbody td:nth-child(5),
#order-info table:has(> thead) > tbody td:nth-child(6),
#order-info table:has(> thead) > tbody td:nth-child(7) {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

/* The price cell has two levels: the price (600, ink), then the COG line
   as a quieter mono caption under it; the subtotal matches the price. */
#order-info table:has(> thead) > tbody td:nth-child(5),
#order-info table:has(> thead) > tbody td:nth-child(7) {
  font-weight: 600;
}

#order-info td > span.f-12.c-999 {
  display: inline-block;
  margin-top: 2px;
  font: 500 11.5px/16px var(--brand-font-mono);
  color: var(--ink-62) !important; /* !: utility */
}

#order-info table:has(> thead) img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--brand-radius-sm);
  box-shadow: inset 0 0 0 1px var(--ink-8);
}

#order-info tr.text-r > td {
  border-top: 1px solid var(--ink-11);
  padding: 14px 20px;
}

/* The totals line (Shopify Subtotal || GST || ... || Order Total) is data */
#order-info tr.text-r > td > .c-999 {
  color: var(--brand-text) !important; /* !: utility */
  font-family: var(--brand-font-mono);
  font-weight: 500;
}

/* --- Product Confirmation index (its <style> loads after us: !: late <style>) */
/* The title row is a flex line: eyebrow (full width), the title text node,
   then the one FILLED action pushed to the right edge. */
.breadcrumb:not(:has(> .c-gray)) {
  display: flex;
  align-items: center;
  overflow: visible !important; /* !: late <style> overflow:hidden clips the glow */
}

.breadcrumb:not(:has(> .c-gray))::before {
  content: "Products";
  display: block;
  flex: 0 0 100%;
  width: 100%;
  font: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-66); /* a caption straight on the cream */
  line-height: 16px;
}

#btnExport,
#btnExport.btn-success {
  width: auto;
  height: var(--ctl);
  line-height: 1 !important;      /* !: inline line-height */
  margin: 0 0 0 auto !important;  /* !: inline margin-top */
  padding: 0 18px;
  font-size: 13px;
}

.pc-page {
  background: transparent;
  padding: 0 0 24px !important;       /* !: late <style> */
}

.pc-stats {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.pc-stat .k {
  font: 500 12.5px/18px var(--brand-font-body) !important; /* !: late <style> 12px. One TILE voice: the metric name in the meta voice, as on Monthly Stats and List */
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  color: var(--ink-62) !important; /* !: late <style> paints #888 */
}

@media (max-width: 1124px) {
  .pc-stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pc-card {
  background: var(--brand-white);
  padding: 10px 14px;
  margin-bottom: 8px;
  box-shadow: var(--shadow-card);
}

.pc-card.has-unread {
  box-shadow: inset 3px 0 0 var(--brand-primary), var(--shadow-card);
  border-left: 0;
}

.pc-cover {
  background: var(--ink-6);
  color: var(--ink-45);
  border-radius: var(--brand-radius-sm);
}

.pc-title {
  color: var(--brand-text);
  font: var(--t-row);
}

.pc-meta {
  color: var(--ink-62);
}

.pc-msg {
  color: var(--ink-70);
}

.pc-price {
  font: 600 13px var(--brand-font-mono);
  color: var(--brand-text);
}

.pc-badge {
  padding: 0 8px !important; /* !: late <style> */
}

.pc-unread {
  border-radius: var(--brand-radius-pill);
  min-width: 16px;
  height: 16px;
  line-height: 16px;
}

.pc-mark-unread,
#btnSelAll,
.pc-pid #btnSelAll {
  height: var(--ctl-row) !important;   /* !: late <style> */
  line-height: 1 !important;           /* !: late <style> */
  padding: 0 12px !important;          /* !: late <style> */
  font: 500 12px var(--brand-font-body) !important; /* !: late <style> */
  border: 0 !important;                /* !: late <style> */
  border-radius: var(--brand-radius-pill) !important; /* !: late <style> */
  box-shadow: var(--ring-edge);
}

.pc-pager {
  color: var(--ink-62) !important; /* !: late <style> */
}

/* --- Product Confirmation detail (!: late <style> throughout) ------------ */
.pc-shell,
.pc-wrap,
.pc-item .t,
.pc-orders-hd strong,
.pc-ord-row .n,
.pc-confirm-list li,
.pc-modal h4,
.pc-att-chip-name,
.pc-att-in .pc-att-name,
.pc-plus-menu button {
  color: var(--brand-text) !important; /* !: late <style> */
}

.pc-wrap {
  padding: 0 !important; /* !: late <style> */
  gap: 16px !important;  /* !: late <style> */
}

.pc-shell {
  padding: 16px 16px 0;
  box-sizing: border-box;
}

@media (min-width: 769px) {
  .pc-shell {
    padding: 0 0 var(--gutter); /* the body carries the 24px side and top gutter (§3); the shell adds the bottom one, so neither column runs into the frame edge */
  }
}

.pc-sibs {
  display: flex;
  gap: 8px;
  padding: 0 0 12px !important;       /* !: late <style> */
  background: transparent !important; /* !: late <style> */
}

.pc-sib {
  min-width: 160px;
  background: var(--brand-white) !important;  /* !: late <style> */
  box-shadow: var(--ring-edge);
  color: var(--brand-text);
  font-family: var(--brand-font-body);
  padding: 10px 12px !important;              /* !: late <style> */
  text-align: left;
  cursor: pointer;
}

.pc-sib:hover {
  box-shadow: var(--shadow-hover) !important; /* !: late <style> */
}

.pc-sib.on {
  box-shadow: inset 0 2px 0 var(--brand-primary), var(--shadow-card);
  background: var(--brand-white);
}

.pc-sib .k {
  color: var(--brand-text) !important; /* !: late <style> */
  font: var(--t-row);
}

.pc-sib:has(.k:empty)::before {
  content: "Thread " attr(data-id);
  display: block;
  font: var(--t-caption);
  text-transform: none;
  letter-spacing: 0;
}

.pc-sib .m:has(> .pc-badge:empty) {
  display: none; /* " · " + an empty status pill: nothing to read until the badge is filled */
}

.pc-sib .m,
.pc-pid,
.pc-pid-l,
.pc-sub,
.pc-cty-name,
.pc-orders-sum,
.pc-orders-note,
.pc-ord-row .m,
.pc-ord-pager,
.pc-who,
.pc-modal p,
.pc-att-pct,
.pc-q .lab {
  color: var(--ink-62) !important; /* !: late <style> */
}

.pc-left {
  background: var(--brand-white) !important; /* !: late <style> */
  box-shadow: var(--shadow-hover) !important; /* !: late <style>: the decision column is raised */
  padding: 20px 24px 0 !important;           /* !: late <style>. The bottom 20 lives in .pc-acts (below) */
}

.pc-right {
  border: 0 !important;                      /* !: late <style> draws a cool #e8eaed line */
  box-shadow: var(--ring-hair) !important;   /* !: late <style> */
  overflow: hidden;
}

.pc-msg-box,
#msgBox {
  background: transparent;
  padding: 24px 28px;
}

.pc-q {
  background: var(--brand-surface) !important;      /* !: late <style> */
  color: var(--ink-70) !important;                  /* !: late <style> */
  border-radius: var(--brand-radius-sm) !important; /* !: late <style> */
  box-shadow: var(--ring-hair);
}

/* The late <style> blockifies .pc-chip (inline-block) and sets .pc-cty to
   baseline: both centre their text in the 22px pill again, as in v2. */
.pc-chip,
.pc-cty {
  display: inline-flex !important;  /* !: late <style> inline-block */
  align-items: center !important;   /* !: late <style> baseline */
}

/* A variant's status chip keeps 8px from its name. */
.pc-item .t > .pc-badge,
.pc-card .t > .pc-badge {
  margin-left: 8px;
}

.pc-cty .pc-chip {
  background: transparent !important; /* !: late <style> */
  box-shadow: none;
  color: var(--brand-text) !important; /* !: late <style> */
  font: 600 11px var(--brand-font-mono) !important; /* !: late <style> */
  padding: 0 !important;              /* !: late <style> */
  height: auto;
}

.pc-sub .vid {
  display: block;
  width: 100%;
  margin-bottom: 4px;
}

.pc-sub {
  gap: 6px !important;          /* !: late <style>. One chip gap (the spec's 6) in both directions */
  line-height: 22px !important; /* !: late <style> */
  align-items: center;
}

/* Prices on one line, attributes on the next, so no variant mixes the two
   (Navy put COLOR beside the prices and SIZE alone under them). */
.pc-sub > .pc-ctys {
  flex: 0 0 100%;
  gap: 6px !important; /* !: late <style> 4px */
}

.pc-item {
  padding: 10px 12px !important; /* !: late <style> */
}

.pc-sub .vid,
.vid,
.pc-time {
  color: var(--ink-62) !important;                /* !: late <style> */
  font-family: var(--brand-font-mono);
}

.pc-row.sys .pc-time {
  color: var(--ink-70) !important; /* !: late <style>. 11px on the --ink-6 pill over the surface panel: .62 measured 4.47:1, .70 ~5.6:1 */
}

.pc-row.sys {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
}

.pc-row.sys::before,
.pc-row.sys::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--brand-hairline);
}

.pc-sys {
  background: var(--ink-6) !important;                /* !: late <style> */
  color: var(--ink-70) !important;                    /* !: late <style> */
  border-radius: var(--brand-radius-pill) !important; /* !: late <style> */
  font-size: 12px;
}

.pc-item,
.pc-ord-row,
.pc-confirm-list,
.pc-confirm-list li,
.pc-orders {
  border-color: var(--brand-hairline) !important; /* !: late <style> */
}

.pc-item {
  background: var(--brand-white) !important; /* !: late <style> */
  box-shadow: var(--ring-hair);
  padding: 8px 10px !important;              /* !: late <style> */
  margin-bottom: 8px !important;             /* !: late <style> */
}

.pc-item:has(.itemCb:checked) {
  box-shadow: inset 0 0 0 1px var(--accent-40), 0 0 0 1px var(--accent-40);
}

.pc-ord-row {
  background: var(--brand-surface);
}

.pc-item img,
.pc-ph,
.pc-att-in:not(.file),
.pc-att-in.file,
.pc-att-chip,
.pc-att-preview {
  background: var(--ink-6) !important;              /* !: late <style> */
  border-radius: var(--brand-radius-sm) !important; /* !: late <style> */
}

.pc-orders-tools select,
.pc-orders-tools input {
  border-color: var(--ink-12) !important;           /* !: late <style> */
  border-radius: var(--brand-radius-sm) !important; /* !: late <style> */
  color: var(--brand-text);
  height: var(--ctl-sm) !important;                 /* !: late <style> */
  font-size: 12px !important;                       /* !: late <style> */
}

.pc-orders-tools .btn {
  height: var(--ctl-sm) !important; /* !: late <style> */
  padding: 0 10px !important;       /* !: late <style> */
  font-size: 12px;
}

/* The decision bar sticks to the column's bottom edge. Chrome pins a
   sticky box inside the scroller's bottom padding, which left a 20px strip
   under the buttons where "Related orders" scrolled past, cut by the frame
   edge. The column drops its bottom padding (see .pc-left) and the bar
   carries those 20px itself, on white: stuck or at the end of the scroll,
   the buttons sit 20px above the edge and nothing shows beneath them. The
   bar is the column's footer: full card width, a hairline above. */
.pc-acts {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  gap: 8px;
  margin: 14px -24px 0 !important; /* !: late <style> margin-top */
  padding: 12px 24px 20px;
  background: var(--brand-white);
  box-shadow: 0 -1px 0 var(--ink-8);
}

.pc-left > .pc-act-err:empty {
  min-height: 0 !important; /* !: late <style> 16px. An empty error slot takes no room under the bar */
  margin: 0 !important;     /* !: late <style> */
}

.pc-left > .pc-act-err:not(:empty) {
  padding-bottom: 20px; /* an error line under the bar keeps the column's bottom inset */
}

#btnObject {
  background: var(--brand-white) !important; /* !: late <style> */
  color: var(--brand-text);
  box-shadow: var(--ring-edge);
}

#btnObject:hover {
  color: var(--brand-primary-hover) !important; /* !: late <style> (hover text: 4.74:1 on white) */
}

.pc-scope {
  margin: 0 0 8px 14px !important; /* !: late <style> margin. On the composer's 14px inset (the textarea's edge), not the panel's edge */
  color: var(--ink-70) !important; /* !: late <style> #555 */
}

.pc-scope label {
  position: relative;
  padding: 0 12px;
}

.pc-scope label input {
  position: absolute;
  opacity: 0;
  width: 1px !important;  /* !: CHECKBOX recipe */
  height: 1px !important; /* !: CHECKBOX recipe */
  margin: 0;
}

.pc-input-card {
  border: 0 !important;                     /* !: late <style> */
  border-radius: var(--brand-radius-md) !important; /* !: late <style> */
  box-shadow: var(--shadow-card) !important; /* !: late <style> */
  background: var(--brand-white) !important; /* !: late <style> */
}

.pc-input-card textarea,
.pc-input-card textarea.textarea {
  caret-color: var(--brand-primary) !important; /* !: late <style> */
  color: var(--brand-text);
  border: 0 !important;                         /* !: FIELD */
  box-shadow: none;
  min-height: 72px;
}

.pc-older .btn,
#btnOlder {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--ink-62);
}

.pc-older .btn:hover,
#btnOlder:hover {
  color: var(--brand-text) !important; /* !: late <style> (ink on surface; the underline carries the hover) */
  text-decoration: underline;
  text-decoration-color: var(--brand-primary);
  text-underline-offset: 3px;
}

.pc-act-err,
#actErr,
.pc-modal-err,
.pc-comment {
  color: var(--brand-danger) !important; /* !: late <style> */
}

.pc-ok-banner {
  background: var(--ok-11);
  border-color: transparent !important;   /* !: late <style> */
  color: var(--brand-ok);
}

.pc-ok-ico {
  background: var(--brand-ok) !important; /* !: late <style> */
}

.pc-bubble {
  max-width: 560px;
  border-radius: 18px;
}

.pc-row.mine .pc-bubble {
  background: var(--brand-surface);
  box-shadow: var(--ring-hair);
  border-bottom-right-radius: 6px;
}

.pc-row.theirs .pc-bubble {
  background: var(--brand-white);
  box-shadow: var(--ring-hair);
  border-bottom-left-radius: 6px;
}

.pc-av.admin {
  background: var(--brand-ok);
}

.pc-av.shop {
  background: var(--brand-primary);
  color: var(--brand-ink);
}

.pc-modal textarea {
  border-color: var(--ink-12) !important;           /* !: late <style> */
  border-radius: var(--brand-radius-sm) !important; /* !: late <style> */
}

.pc-crumb {
  background: var(--brand-surface);
  border-bottom-color: var(--brand-hairline);
}

.has_variant_img {
  border-color: var(--brand-primary) !important; /* !: template */
  color: var(--brand-text); /* the orange edge marks it; the text stays ink */
}

/* --- Order Summary (F = .page-container:has(#searchForm[action*=countorders])) */
.page-container:has(#searchForm[action*="countorders" i]) #searchForm > span.select-box[style*="350px"] {
  width: auto !important; /* !: inline width */
}

.page-container:has(#searchForm[action*="countorders" i]) #timeSelectorHolder > div {
  display: inline-flex;
  align-items: center;
  margin-right: 0;
  gap: 8px;
  font: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-62);
}

.page-container:has(#searchForm[action*="countorders" i]) #searchForm > span.r {
  float: none;
  order: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: normal !important; /* !: inline line-height */
  margin: 0 !important;           /* !: inline margin */
  font: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-62);
  white-space: nowrap;
}

.page-container:has(#searchForm[action*="countorders" i]) #searchForm > span.r strong {
  font: 600 13px var(--brand-font-mono);
  letter-spacing: 0;
  color: var(--brand-text);
}

/* Captions and actions share one last row: a full-width break sits between */
.page-container:has(#searchForm[action*="countorders" i]) #searchForm::after {
  content: "";
  flex: 1 1 100%;
  order: 1;
  height: 0;
  margin: 0;
}

.page-container:has(#searchForm[action*="countorders" i]) #searchForm > span.r:first-of-type {
  margin-left: 0;
}

.page-container:has(#searchForm[action*="countorders" i]) #searchForm > span.r + span.r {
  margin-left: 16px !important; /* !: inline margin */
}

.page-container:has(#searchForm[action*="countorders" i]) #searchForm > button.btn-success[type="submit"] {
  order: 3;
  margin-left: auto;
}

.page-container:has(#searchForm[action*="countorders" i]) #searchForm > span.r ~ button.btn-success[type="submit"] {
  margin-left: 16px;
}

#exportCountCSV {
  order: 4;
}

span.btn.btn-primary,
#update_now {
  height: var(--ctl);
  padding: 0 16px;
  font-size: 13px;
}

#searchForm button.btn-success > font[style] {
  background: transparent !important; /* !: inline style */
  color: inherit;
  font: inherit;
}

/* The matrix */
.page-container:has(#searchForm[action*="countorders" i]) .table {
  table-layout: fixed;
}

.page-container:has(#searchForm[action*="countorders" i]) th[rowspan="3"]:first-child {
  width: 18%;
  position: sticky;
  left: 0;
  background: var(--brand-white) !important; /* !: TABLE recipe */
  box-shadow: 1px 0 0 var(--ink-8);
  z-index: 1;
}

@media (max-width: 1148px) {
  .page-container:has(#searchForm[action*="countorders" i]) th[rowspan="3"]:first-child {
    width: 11%; /* the ten tier columns keep their words at 1280 / 1366 */
  }

  .page-container:has(#searchForm[action*="countorders" i]) thead th[style*="background-color"] {
    width: 10%;
  }

  .oc-breakdown-line,
  .search_input .oc-breakdown-line {
    padding: 0;
  }
}

/* Every row (and the Total row) holds a nested ten-cell table: one fixed
   geometry for all of them, so the figures sit under their tier labels. */
.page-container:has(#searchForm[action*="countorders" i]) tr > td[colspan="10"] > table {
  width: 100% !important;     /* !: TABLE nested width:auto */
  table-layout: fixed;
}

.page-container:has(#searchForm[action*="countorders" i]) tr > td[colspan="10"] > table td {
  width: auto !important;     /* !: inline width 7% / 7.8% */
  padding: 8px 6px !important; /* !: nested-table padding (= tier-3 th) */
  text-align: right !important; /* !: H-ui */
}

.page-container:has(#searchForm[action*="countorders" i]) thead th {
  border-bottom: 1px solid var(--ink-11);
}

.page-container:has(#searchForm[action*="countorders" i]) thead th[style*="background-color"] {
  background: var(--brand-surface) !important; /* !: inline green */
  color: var(--brand-text) !important;         /* !: inline white */
  text-transform: none;
  letter-spacing: 0;
  font: 500 12px/1.6 var(--brand-font-mono) !important; /* !: LABEL */
  white-space: normal;
  width: 11%;
}

/* "Search Result" is the label line (the one LABEL voice every other
   header cell speaks); the two dates under it stay mono 12. */
.page-container:has(#searchForm[action*="countorders" i]) thead th[style*="background-color"]::first-line {
  font: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-62);
}

/* Tier-3 labels sit in ~7% cells: they may break at a space, never inside a word */
.page-container:has(#searchForm[action*="countorders" i]) thead tr:nth-child(3) th {
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
  text-align: right;
  vertical-align: bottom; /* one- and two-line labels share the bottom baseline */
  font-size: 10px;
  letter-spacing: 0.02em;
  line-height: 1.3;
  padding: 8px 6px;
}

/* From a 1440 window the ~81px tier cells hold every period on one line
   ("LAST 7 DAYS" is 66px untracked): no header wraps beside its siblings. */
@media (min-width: 1149px) {
  .page-container:has(#searchForm[action*="countorders" i]) thead tr:nth-child(3) th {
    white-space: nowrap;
    letter-spacing: 0;
    padding: 8px 4px;
  }
}

.page-container:has(#searchForm[action*="countorders" i]) tr.countdiv > td:first-child {
  text-align: left !important; /* !: H-ui */
  font-family: var(--brand-font-body);
}

.page-container:has(#searchForm[action*="countorders" i]) thead tr:nth-child(2) th.colorwhite {
  box-shadow: inset 0 2px 0 var(--ink-22);
}

/* The "fulfilled by us" tier is marked by a 6px dot, not a 380px orange rule */
.page-container:has(#searchForm[action*="countorders" i]) thead tr:nth-child(2) th.colorwhite::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--brand-primary);
  vertical-align: 1px;
}

.page-container:has(#searchForm[action*="countorders" i]) thead tr:nth-child(2) th.colorother {
  box-shadow: inset 0 2px 0 var(--ink-22);
}

.colorother,
td.colorother,
th.colorother {
  color: var(--ink-70) !important; /* !: template #999 !important */
}

.page-container:has(#searchForm[action*="countorders" i]) td.colorwhite {
  background: var(--brand-white) !important; /* !: template */
}

.page-container:has(#searchForm[action*="countorders" i]) td.colorother {
  background: var(--brand-surface) !important; /* !: template */
}

.page-container:has(#searchForm[action*="countorders" i]) td.colorwhite + td.colorother,
.page-container:has(#searchForm[action*="countorders" i]) th.colorwhite + th.colorother {
  box-shadow: inset 1px 0 0 var(--ink-11);
}

.page-container:has(#searchForm[action*="countorders" i]) tbody td {
  font: 500 13.5px var(--brand-font-mono);
  text-align: right !important; /* !: H-ui .text-c !important */
}

.page-container:has(#searchForm[action*="countorders" i]) tbody td.text-l {
  font: 500 13px var(--brand-font-body) !important; /* !: inline font-size */
  text-align: left !important; /* !: H-ui */
}

/* The store domain wraps (anywhere: a myshopify domain has no spaces)
   instead of ending in an ellipsis with no title to read the rest. */
.page-container:has(#searchForm[action*="countorders" i]) td.text-l > font.c-999 {
  display: block;
  max-width: 100%;
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
  font: var(--t-caption);
  color: var(--ink-62);
}

.page-container:has(#searchForm[action*="countorders" i]) td[style*="padding:0"] {
  padding: 0;
}

td.search_input,
.search_input,
.page-container:has(#searchForm[action*="countorders" i]) td.search_input {
  background: var(--accent-5) !important; /* !: template green */
  color: var(--brand-text);
  font-weight: 600 !important;             /* !: inline */
  font-size: 13.5px !important;            /* !: inline 16px */
}

.page-container:has(#searchForm[action*="countorders" i]) tr.countdiv > td {
  background: var(--brand-surface);
  font-weight: 600;
  border-top: 1px solid var(--ink-11);
}

/* The Total row is one tone and one weight: no white block, no faded half */
.page-container:has(#searchForm[action*="countorders" i]) tr.countdiv td.colorwhite,
.page-container:has(#searchForm[action*="countorders" i]) tr.countdiv td.colorother {
  background: transparent !important; /* !: template */
  color: var(--brand-text) !important; /* !: template #999 */
  font-weight: 600;
}

td[style*="border-right"] {
  border-right-color: var(--brand-hairline) !important; /* !: inline */
}

.page-container:has(> table.table-sort) {
  overflow-x: auto;
}

/* The breakdown captions ("Effective 13 + Split 1") wrap inside their
   cell at word breaks, never into an ellipsis: both counts are data, and
   a cut caption hid them (only the title attribute kept them). A caption
   takes two 13px lines in the ~64-80px period cells. */
.oc-breakdown-line,
.search_input .oc-breakdown-line {
  position: static;
  display: block;
  transform: none;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  font: 400 10.5px/13px var(--brand-font-body);
  color: var(--ink-62);
  margin-top: 2px;
  padding: 0 2px;
  overflow: visible;
  text-overflow: clip;
  text-align: right;
}

td.oc-breakdown-target {
  position: static;
  min-width: 0;
  overflow: hidden;
}

/* No breakdown (0 + 0, which the template also prints as "Breakdown
   unavailable"): one quiet em dash, the "no value" mark every table uses,
   instead of a two-line caption in all 60 cells. The cell's title keeps
   the words. */
td.oc-breakdown-target[data-effective="0"][data-split="0"] > .oc-breakdown-line {
  font-size: 0;
}

td.oc-breakdown-target[data-effective="0"][data-split="0"] > .oc-breakdown-line::before {
  content: "\2014";
  font: 400 10.5px/13px var(--brand-font-body);
  color: var(--ink-62); /* "no value" reads at 4.5:1, as in every table */
}

/* --- Trace (F = .page-container:has(#searchForm[action*=shipping])) ----- */
.page-container:has(#searchForm[action*="shipping" i]) #searchForm > .select-box {
  min-width: 128px;
}

.page-container:has(#searchForm[action*="shipping" i]) #searchForm > input[name="keywords"] {
  flex: 1 1 180px;
  width: auto !important; /* !: inline width */
  min-width: 140px;
  max-width: 360px;
}

@media (min-width: 769px) and (max-width: 1048px) {
  .page-container:has(#searchForm[action*="shipping" i]) #searchForm > input[name="keywords"] {
    flex-basis: 140px;
  }

  .page-container:has(#searchForm[action*="shipping" i]) #searchForm > .select-box {
    min-width: 112px;
  }
}

/* Filter card, the Orders anatomy: fields / date pairs / switches + actions.
   The date-pair holder dissolves (display:contents) so the switches and the
   two buttons can share the last flex row; two zero-height breaks separate
   the rows. Visual order only; tab order stays DOM order. */
@media (min-width: 769px) {
  .page-container:has(#searchForm[action*="shipping" i]) #searchForm #timeSelectorHolder {
    display: contents !important; /* !: DATE PAIR grid */
  }

  .page-container:has(#searchForm[action*="shipping" i]) #searchForm::before,
  .page-container:has(#searchForm[action*="shipping" i]) #searchForm::after {
    content: "";
    flex: 0 0 100%;
    height: 0;
    margin: 0; /* a line of its own that adds no gap (the card spaces rows by margins) */
  }

  .page-container:has(#searchForm[action*="shipping" i]) #searchForm::before {
    order: 1;
  }

  .page-container:has(#searchForm[action*="shipping" i]) #timeSelectorHolder > span,
  .page-container:has(#searchForm[action*="shipping" i]) #timeSelectorHolder > div:has(input[type="date"]) {
    order: 2;
  }

  .page-container:has(#searchForm[action*="shipping" i]) #searchForm::after {
    order: 5;
  }

  .page-container:has(#searchForm[action*="shipping" i]) #timeSelectorHolder > div:has(input[type="checkbox"]) {
    order: 6;
  }

  .page-container:has(#searchForm[action*="shipping" i]) #searchForm > .btn-success {
    order: 7;
    margin-left: auto;
  }

  /* Below 1120px of content (a 1168px frame) the third pair takes its own
     row, caption and all (a display:contents holder still renders its
     ::before as a flex item); one row needs 1071px of content, so 1120 keeps
     a margin at 1366 windows. */
  .page-container:has(#searchForm[action*="shipping" i]) #timeSelectorHolder::before {
    content: "";
    display: none;
    flex: 0 0 100%;
    height: 0;
    margin: 0;
    order: 3;
  }

  .page-container:has(#searchForm[action*="shipping" i]) #timeSelectorHolder > span:nth-of-type(3),
  .page-container:has(#searchForm[action*="shipping" i]) #timeSelectorHolder > div:nth-of-type(3):has(input[type="date"]) {
    order: 4;
  }

  .page-container:has(#searchForm[action*="shipping" i]) #searchForm > .btn-success ~ .btn-success {
    margin-left: 0;
  }
}

@media (min-width: 769px) and (max-width: 1168px) {
  .page-container:has(#searchForm[action*="shipping" i]) #timeSelectorHolder::before {
    display: block;
  }

  /* The captions stack over their pairs: one caption line (each caption
     as wide as its pair), the break, then the three pairs on one row. */
  .page-container:has(#searchForm[action*="shipping" i]) #timeSelectorHolder > span:nth-of-type(n) {
    order: 2;
    flex: 0 0 242px;
    min-width: 0;
    margin-block: 5px 0;
  }

  .page-container:has(#searchForm[action*="shipping" i]) #timeSelectorHolder > div:nth-of-type(n):has(input[type="date"]) {
    order: 4;
    margin: 5px 0;
  }
}

.page-container:has(#searchForm[action*="shipping" i]) #timeSelectorHolder > div:has(input[type="checkbox"]) {
  display: inline-flex;
  align-items: center;
  flex: 1 1 auto;
  gap: 8px 16px;
  text-transform: none;
  letter-spacing: 0;
  font: 500 12.5px var(--brand-font-body);
  color: var(--ink-70);
}

.page-container:has(#searchForm[action*="shipping" i]) #timeSelectorHolder > div:has(input[type="checkbox"]) > span {
  color: var(--ink-70);
  font-weight: 500;
}

.page-container:has(#searchForm[action*="shipping" i]) .divstatus a {
  padding: 0 10px !important; /* !: SEGMENTED */
}

/* Ten chips measure 1248px, so below ~1650px of content the strip is two
   rows by design: an even 6px row gap, captions right on the last row. */
.page-container:has(#searchForm[action*="shipping" i]) .divstatus {
  row-gap: 6px;
}

.page-container:has(#searchForm[action*="shipping" i]) #batchForm > table.table {
  border-radius: var(--brand-radius-lg);
  margin: 0 0 10px !important;                      /* !: H-ui (row -> row 10, header -> first row 8) */
  box-shadow: var(--shadow-card);
  border: 0;
  width: 100%;
  overflow: hidden;
  float: none !important;                           /* !: H-ui .l */
}

/* The head row's cells wrap freely (H-ui's .mobile-half 30% would otherwise
   blow the table past the frame); their widths are set below. */
.page-container:has(#searchForm[action*="shipping" i]) #batchForm > table.table tr.active > td {
  white-space: normal;
  width: auto;
  box-sizing: border-box; /* fixed layout: the % is the whole column, padding included */
}

.page-container:has(#searchForm[action*="shipping" i]) #batchForm > table.table tr.text-c > td {
  min-width: 0;
  box-sizing: border-box;
}

/* Fixed layout: the head strip (first row) sets the columns — 22% for the
   date cell, the colspan cell divides the rest into six even columns, and
   the empty last cell keeps no column. Body cells repeat the numbers so the
   list header (§2 LIST HEADER) and every card share one geometry. */
.page-container:has(#searchForm[action*="shipping" i]) #batchForm > table.table {
  table-layout: fixed;
}

.page-container:has(#searchForm[action*="shipping" i]) #batchForm > table.table tr.active > td:first-child {
  width: 22%;
}

.page-container:has(#searchForm[action*="shipping" i]) #batchForm > table.table tr.active > td.text-r:not(:has(*)) {
  width: 0;
  padding: 0 !important; /* !: head strip padding (an empty cell keeps no column) */
}

.page-container:has(#searchForm[action*="shipping" i]) #batchForm > table.table tr.text-c > td:nth-child(1) { width: 22% !important; }     /* !: H-ui .mobile-* */
.page-container:has(#searchForm[action*="shipping" i]) #batchForm > table.table tr.text-c > td:nth-child(n + 2) { width: 13% !important; } /* !: H-ui .mobile-* */

/* Below a 1440 window: the list header's 27% / 25.5% product column (§2 LIST HEADER) */
@media (min-width: 769px) and (max-width: 1190px) {
  .page-container:has(#searchForm[action*="shipping" i]) #batchForm > table.table tr.active > td:first-child,
  .page-container:has(#searchForm[action*="shipping" i]) #batchForm > table.table tr.text-c > td:nth-child(1) { width: 27% !important; }    /* !: H-ui .mobile-* */
  .page-container:has(#searchForm[action*="shipping" i]) #batchForm > table.table tr.text-c > td:nth-child(n + 2) { width: 12.17% !important; } /* !: H-ui .mobile-* */
}

@media (min-width: 769px) and (max-width: 1048px) {
  .page-container:has(#searchForm[action*="shipping" i]) #batchForm > table.table tr.active > td:first-child,
  .page-container:has(#searchForm[action*="shipping" i]) #batchForm > table.table tr.text-c > td:nth-child(1) { width: 25.5% !important; }  /* !: H-ui .mobile-* */
  .page-container:has(#searchForm[action*="shipping" i]) #batchForm > table.table tr.text-c > td:nth-child(n + 2) { width: 12.42% !important; } /* !: H-ui .mobile-* */
}

/* The action column, as on All Orders: View Order fills its cell (it ends
   on the card's 20px edge) and MORE starts on the button's left edge. */
.page-container:has(#searchForm[action*="shipping" i]) #batchForm > table.table tr.text-c > td:last-child:nth-child(n),
.page-container:has(#searchForm[action*="shipping" i]) .divtbody tr.warning > th:last-child:nth-child(n) {
  text-align: left !important;    /* !: H-ui .text-l / .text-c */
  padding-right: 20px !important; /* !: TABLE */
}

.page-container:has(#searchForm[action*="shipping" i]) #batchForm > table.table tr.text-c > td:last-child > a.btn:only-of-type {
  display: flex;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  float: none;
  margin: 0 !important;          /* !: H-ui .ml-5 / .mt-5 */
}

@media (max-width: 1148px) {
  /* :nth-child(n) outranks the Body rule below: header and body share 12 */
  .page-container:has(#searchForm[action*="shipping" i]) #batchForm > table.table tr.text-c > td:nth-child(n) {
    padding-left: 12px !important;  /* !: TABLE (= the list header below 1148) */
    padding-right: 12px !important; /* !: TABLE */
  }

  .page-container:has(#searchForm[action*="shipping" i]) a.btn.size-S {
    padding: 0 10px;
    font-size: 12px; /* "View Order" fits the 13% column at a 1280 window */
  }
}

/* Head strip: the template's <br> stays, so the date line and the shopify
   id are two clean lines at every width (a free-wrapping text node would
   orphan "id: #…" at 1920 and fold it at 1440). */
.page-container:has(#searchForm[action*="shipping" i]) #batchForm > table.table tr.active > td.mobile-full {
  white-space: nowrap;
}

.page-container:has(#searchForm[action*="shipping" i]) #batchForm > table.table td .table {
  display: table !important; /* !: inline display:inline-block */
  width: 100%;
}

.page-container:has(#searchForm[action*="shipping" i]) #batchForm > table.table:hover {
  box-shadow: var(--shadow-hover) !important; /* !: TABLE */
}

.page-container:has(#searchForm[action*="shipping" i]) #batchForm > table.table + table.table {
  margin-top: 0 !important; /* !: H-ui (the 10px lives below each card) */
}

/* Head strip */
.listTable tr.active > td,
.page-container:has(#searchForm[action*="shipping" i]) #batchForm > table.table tr.active > td {
  background: var(--brand-surface) !important;       /* !: H-ui */
  padding: 12px 16px;
  border-bottom: 1px solid var(--ink-8);
  font-size: 13px;
  color: var(--ink-70);
  vertical-align: middle;
}

.listTable tr.active label.f-12,
tr.active label.f-12 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 24px 0 0 !important; /* !: H-ui .mr-30 */
  font: 500 12px var(--brand-font-mono);
  color: var(--ink-70);
  white-space: nowrap;
}

.listTable tr.active > td.mobile-full,
tr.active > td.mobile-full[width="25%"] {
  font: 600 14px var(--brand-font-mono);
  color: var(--brand-text);
  line-height: 20px; /* two whole 20px lines: Trace and Order Cost share one head height */
}

/* The shopify id (a bare text node under the <br>) starts under the date,
   not under the checkbox: the cell indents by the checkbox slot (16 + the
   label's 10 gap) and the label hangs back into it. The checkbox drops the
   CHECKBOX label margin (6px), or the date would start 6px past the id. */
.listTable tr.active label.f-12 > .checkboxId,
tr.active label.f-12 > .checkboxId {
  margin-right: 0;
}

.page-container:has(#searchForm[action*="shipping" i]) #batchForm > table.table tr.active > td.mobile-full[width="25%"] {
  padding-left: 42px;
}

.listTable tr.active > td.mobile-full > table.noborder > tbody > tr > td.noborder:first-child {
  padding-left: 26px;
}

.listTable tr.active td label.f-12:has(> .checkboxId) {
  margin-left: -26px !important; /* !: H-ui .mr-30 shorthand (above) */
}

.listTable tr.active > td.no-bl > span,
tr.active > td.no-bl > span {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.listTable tr.active .ml-50,
tr.active .ml-50 {
  margin-left: 24px !important; /* !: H-ui */
}

/* Head-strip glyphs (store, user) are meta, one size on Trace and Order Cost */
.listTable tr.active span.ml-50 > .Hui-iconfont,
.listTable tr.active span.ml-20 > .Hui-iconfont {
  font-size: 13px;
  color: var(--ink-62);
}

.listTable tr.active .ml-20,
tr.active .ml-20 {
  margin-left: 16px !important; /* !: H-ui */
}

@media (max-width: 1072px) {
  .listTable tr.active .mr-30,
  tr.active .mr-30 {
    margin-right: 16px !important; /* !: H-ui */
  }

  .listTable tr.active .ml-50,
  tr.active .ml-50 {
    margin-left: 12px !important; /* !: H-ui */
  }

  .listTable tr.active .ml-20,
  tr.active .ml-20 {
    margin-left: 8px !important; /* !: H-ui */
  }
}

.listTable tr.active .r,
.page-container:has(#searchForm[action*="shipping" i]) tr.active .r {
  font: 600 13px var(--brand-font-mono);
  color: var(--brand-text);
}

/* Body */
.listTable tr.text-c > td,
.page-container:has(#searchForm[action*="shipping" i]) #batchForm > table.table tr.text-c > td {
  padding: 14px 16px !important;   /* !: TABLE */
  border: 0 !important;            /* !: H-ui */
  text-align: left !important;     /* !: H-ui .text-c !important */
  vertical-align: top;
}

.page-container:has(#searchForm[action*="shipping" i]) td.va-t[width="8%"] {
  font: 500 13px var(--brand-font-mono);
  white-space: nowrap;
}

.page-container:has(#searchForm[action*="shipping" i]) td.va-t[width="14%"] {
  font: 500 12.5px var(--brand-font-mono);
}

.page-container:has(#searchForm[action*="shipping" i]) td.va-t > table td,
.listTable td.va-t > table td {
  font: 400 12.5px var(--brand-font-body);
  color: var(--ink-70);
  padding: 1px 0 !important;       /* !: inline */
}

.page-container:has(#searchForm[action*="shipping" i]) td.va-t[width="10%"]:not(:has(.label)):not(:has(.btn)) {
  font: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-62);
}

.smallImg,
.listTable .smallImg,
.page-container:has(#searchForm[action*="shipping" i]) .smallImg {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--brand-radius-sm);
  box-shadow: inset 0 0 0 1px var(--ink-8);
  background: var(--ink-6);
}

.listTable a.btn.size-S,
.page-container:has(#searchForm[action*="shipping" i]) a.btn.size-S {
  margin: 0;
}

/* Product line in a row: title, variant, price */
.listTable td .table td:first-child,
.page-container:has(#searchForm[action*="shipping" i]) td.mobile-full[width="24%"] .table td {
  font-size: 13px;
}

/* --- Daily Cost (F = .page-container:has(#balanceDateForm)) -------------- */
.page-container:has(#balanceDateForm) {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}

.page-container:has(#balanceDateForm)::before {
  grid-column: 1 / -1;
  order: -1;
  margin-bottom: 4px;
}

.page-container:has(#balanceDateForm) > * {
  grid-column: 1 / -1;
  min-width: 0;
}

.page-container:has(#balanceDateForm) > .oneSec.balanceHistory {
  display: contents;
}

/* Bento rows come from order + auto-placement only (no explicit grid-row),
   so the one-column fallback below can stack the filter under the card. */
#balance-card {
  grid-column: 1 / 5;
  order: 1;
}

#balance-card p.p2,
#balance-card p.p2 b {
  font-size: 30px !important; /* !: DARKCARD */
}

.balance-filter-bar,
.page-container:has(#balanceDateForm) > .balance-filter-bar {
  grid-column: 5 / -1;
  order: 2;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 20px 24px;
}

#balanceDateForm {
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

#balanceDateForm > .ml-5,
#balanceDateForm > .ml-10,
#balanceDateForm > .mr-5 {
  margin: 0 !important; /* !: H-ui */
}

#balanceDateForm > span:first-child {
  margin-right: 2px;
}

#balanceDateForm > .btn-primary {
  margin-left: auto !important; /* !: H-ui .ml-10 */
}

.page-container:has(#balanceDateForm) .list {
  position: relative;
  z-index: 3; /* above the balance card (DARKCARD sits at z 2) and its shadow: no smudge on the ledger's top edge */
  grid-column: 1 / -1;
  order: 3;
  background: var(--brand-white);
  border-radius: var(--brand-radius-lg);
  box-shadow: var(--shadow-card);
  padding: 4px 24px 12px;
  margin: 0 !important; /* !: template margin-top:40px; the 16px grid gap is the rhythm */
}

.page-container:has(#balanceDateForm) > #pageNav {
  order: 4;
}

@media (max-width: 1124px) {
  .page-container:has(#balanceDateForm) #balance-card,
  .page-container:has(#balanceDateForm) > .balance-filter-bar {
    grid-column: 1 / -1;
  }
}

/* Ledger */
.list_title,
.list_title.balance-row {
  border-bottom: 1px solid var(--ink-11);
  padding: 8px 0;
}

.list_title:not(.balance-row) {
  display: flow-root;
}

.list_title > div,
.list_ul li > div {
  box-sizing: border-box;
}

.list_title > div {
  line-height: 20px;
}

.list_ul {
  margin-top: 0 !important; /* !: template */
  font-size: 13.5px !important; /* !: template */
}

.list_ul li {
  background: transparent !important; /* !: template */
  width: 100% !important;             /* !: template */
  margin: 0 !important;               /* !: template */
  padding: 12px 0;
  border-bottom: 1px solid var(--brand-hairline);
  box-sizing: border-box;
}

.list_ul li.balance-row,
.list_title.balance-row {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr) 104px 128px !important; /* !: template */
  align-items: center;
  padding: 10px 0;
  gap: 0 16px;
}

.list_ul li.balance-row.order_li {
  min-height: 44px; /* one 44px pitch for the "[]" rows and the top-up rows */
  padding: 6px 0;
}

/* One column map for every row type — description | store | status | amount —
   so the header labels sit over the same content on the day rows, the order
   rows and the top-ups (the template hides the empty cells). The date is
   capped at 240px, so the shop follows it instead of standing ~480px away;
   status and amount end the row on the card's right edge. */
.list_title.balance-row > .div1,
.list_ul li.balance-row > .div1 {
  grid-column: 1;
  grid-row: 1; /* explicit rows: sparse auto-placement would push a lower column onto a new row */
}

.list_title.balance-row > .div4,
.list_ul li.balance-row > .div4 {
  grid-column: 2;
  grid-row: 1;
  text-align: left;
}

.list_title.balance-row > .div2,
.list_ul li.balance-row > .div2 {
  grid-column: 3;
  grid-row: 1;
  justify-self: start;
}

.list_title.balance-row > .div3,
.list_ul li.balance-row > .div3 {
  grid-column: 4;
  grid-row: 1;
  text-align: right;
}

.list_title.balance-row > .div5,
.list_ul li.balance-row > .div5 {
  grid-column: 1 / -1;
  grid-row: 2;
}

.list_title.balance-row > div,
.list_ul li.balance-row > div {
  width: auto;
  min-height: 0; /* the template's 25px cell put 16px text at its top: the grid centres the text itself */
  padding: 0;
  float: none;
  min-width: 0;
}

.order_li .div1 {
  font-size: 13px;
}

.order_li .div3 {
  font: 600 13px var(--brand-font-mono);
}

/* The amount centres on the chip beside it: its <u><a> otherwise rides
   4px high in the template's 25px cell. */
.list_ul li.order_li > .div3 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: var(--chip);
}

/* The Top Up GHOST fills its cell: the cell's ellipsis clip would cut the
   ring, and a pill never truncates. */
.list_ul li.order_li > .div1:has(> .top-up-invoice-btn) {
  overflow: visible;
}

/* The status track has a caption: the template leaves the header cell
   empty (Daily Cost even hides it), so the chips stood under nothing. */
.list_title > .div2:empty {
  display: block !important; /* !: template display:none (Daily Cost) */
}

.list_title > .div2:empty::before {
  content: "Status";
}

/* A per-transaction shop name (multi-store accounts) sits under SHOP_NAME
   as a caption; the template hides the empty cell. */
.order_li .div4 {
  height: auto !important;   /* !: template fixed height; a whitespace-only cell collapses to 0 */
  min-height: 0;
  line-height: 16px;
  font: var(--t-caption);
  color: var(--ink-62);
}

.order_li .div5 {
  font: var(--t-meta);
  color: var(--ink-62);
  padding-top: 2px;
}

.order_li .div4:empty {
  display: none; /* = the template's .order_li .div4:empty rule */
}

.order_li .div3 u {
  text-decoration: none;
}

/* A day is a group head: a 40px surface band (bled 12px past the rows so
   its text keeps their columns), the date as a LABEL, the shop on one
   line. The row above a band drops its hairline: the band is the break. */
.list_ul li.date_li {
  min-height: 40px;
  width: calc(100% + 24px) !important; /* !: template / ledger width:100% */
  margin: 12px -12px 0 !important;     /* !: template / ledger margin:0 */
  padding: 4px 12px !important;        /* !: template */
  background: var(--brand-surface) !important; /* !: template background:initial */
  border-bottom: 0;
  border-radius: var(--brand-radius-sm);
  box-shadow: inset 0 0 0 1px var(--ink-8);
  font: var(--t-label);
  letter-spacing: var(--ls-label);
  color: var(--ink-62);
}

.list_ul li.date_li:first-child {
  margin-top: 8px !important; /* !: template */
}

.list_ul li:has(+ li.date_li) {
  border-bottom: 0;
}

.date_li::before {
  display: none; /* the template's short centred rule doubles the hairline */
}

.date_li .div1 b {
  font-weight: 500;
  color: var(--ink-62);
}

.date_li .div3 {
  font: 600 13px var(--brand-font-mono);
  color: var(--brand-text);
}

.date_li .div4 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
  text-align: left;
  letter-spacing: 0;
}

.date_li .div4 .shop-main,
.date_li .div4 .shop-sub {
  display: inline;
}

.shop-main {
  font: 600 12.5px var(--brand-font-body);
  color: var(--brand-text);
  display: block;
}

.panyinfo-shopname .shop-sub,
.shop-sub {
  font: 500 11px var(--brand-font-mono);
  color: var(--ink-62);
  display: block;
}

.order_li:has(.top-up-invoice-btn) .div3 {
  color: var(--brand-ok);
}

.order_li:has(.top-up-invoice-btn) .div3::before {
  content: "+";
}

.top-up-invoice-btn,
.top-up-invoice-btn[style] {
  display: inline-flex !important; /* !: inline display */
  width: auto !important;          /* !: inline width */
  height: var(--ctl-sm);
  padding: 0 12px;
  font-size: 12px;
}

.top-up-invoice-btn strong.c-red {
  color: var(--brand-text) !important; /* !: utility */
  font-weight: 500;
}

.top-up-invoice-btn .Hui-iconfont {
  color: var(--brand-primary);
  font-size: 13px;
}

/* --- Welcome (F = #shop-welcome .page-container:has(#welcome-balance-card)) */
#shop-welcome {
  top: 0 !important; /* !: template */
}

#shop-welcome .page-container:has(#welcome-balance-card) {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}

#shop-welcome .page-container:has(#welcome-balance-card)::before {
  grid-column: 1 / -1;
  order: -1;
  margin-bottom: 4px;
}

#shop-welcome .page-container:has(#welcome-balance-card) > * {
  grid-column: 1 / -1;
  order: 0;
  min-width: 0;
}

#shop-welcome .page-container:has(#welcome-balance-card) > .oneSec.balanceHistory {
  display: contents;
}

/* Bento rows come from order + auto-placement (no explicit grid-row): the
   card is placed first, the notice tile lands beside it, and the one-column
   fallback below stacks them in the same order. */
#welcome-balance-card {
  grid-column: 1 / 8;
  order: 1;
}

#shop-welcome .page-container:has(#welcome-balance-card) > .oneSec:has(> .Huialert) {
  grid-column: 8 / -1;
  order: 2;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 48%), var(--brand-surface);
  box-shadow: var(--sheen), var(--shadow-card) !important; /* !: CARD */
  padding: 18px 24px;
  margin: 0;
}

.oneSec > .Huialert,
.oneSec > .Huialert.Huialert-info,
#shop-welcome .oneSec > .Huialert,
#shop-welcome .oneSec > .Huialert.Huialert-info {
  background: transparent !important; /* !: H-ui (and the §5 alert panel) */
  border: 0 !important;               /* !: H-ui */
  box-shadow: none !important;        /* !: H-ui */
  border-radius: 0 !important;        /* !: H-ui */
  padding: 0 !important;              /* !: H-ui */
  margin: 0;
  font-size: 13.5px !important;       /* !: H-ui */
  color: var(--brand-text);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.oneSec > .Huialert::before {
  content: "Notice";
  display: block;
}

.oneSec > .Huialert a {
  font: var(--t-row);
  text-decoration: none;
  order: 2;
}

.oneSec > .Huialert a:hover {
  text-decoration-line: underline; /* the LINK hover's orange underline, on the notice title too */
  text-underline-offset: 3px;
}

.oneSec > .Huialert font.r {
  float: none !important; /* !: H-ui .r */
  margin: 0;
  order: 3;
  font: var(--t-caption);
  color: var(--ink-62);
}

#shop-welcome .page-container:has(#welcome-balance-card) .list {
  position: relative;
  z-index: 3; /* above the balance card (DARKCARD sits at z 2) and its shadow: no smudge on the ledger's top edge */
  grid-column: 1 / -1;
  order: 3;
  background: var(--brand-white);
  border-radius: var(--brand-radius-lg);
  box-shadow: var(--shadow-card);
  padding: 4px 24px 12px;
  margin: 0 !important; /* !: template margin-top; the 16px grid gap is the rhythm */
}

/* The template's "--" placeholder becomes the one em dash the other cards use */
#welcome-final-balance .welcome-balance-placeholder {
  font-size: 0 !important; /* !: template */
}

#welcome-final-balance .welcome-balance-placeholder::before {
  content: "\2014";
  font: var(--t-display);
  color: var(--paper-55);
}

#shop-welcome .page-container:has(#welcome-balance-card) > #pageNav,
#shop-welcome .page-container:has(#welcome-balance-card) > .text-c.mt-20 {
  order: 4;
}

/* One track list for the header, the day rows and the transaction rows
   (each row is its own grid, so every track is explicit). The column map
   is Daily Cost's — description | shop | status | amount — with the remark
   before the amount: the money ends flush on the card's right edge, as in
   every other money column. */
#shop-welcome .page-container:has(#welcome-balance-card) .list_title,
#shop-welcome .page-container:has(#welcome-balance-card) .list_ul li.date_li,
#shop-welcome .page-container:has(#welcome-balance-card) .list_ul li.order_li {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr) 104px minmax(0, 0.8fr) 128px;
  column-gap: 16px;
  align-items: center;
  float: none;
}

/* Explicit tracks and one row, so an empty status cell never shifts the
   others and the shop (placed before the status) never wraps to a second
   row. Scoped to the Welcome fingerprint: #shop-welcome is also the Daily
   Cost body id. */
#shop-welcome .page-container:has(#welcome-balance-card) .list_title > .div1, #shop-welcome .page-container:has(#welcome-balance-card) .list_ul li.date_li > .div1, #shop-welcome .page-container:has(#welcome-balance-card) .list_ul li.order_li > .div1 { grid-column: 1; grid-row: 1; }
#shop-welcome .page-container:has(#welcome-balance-card) .list_title > .div4, #shop-welcome .page-container:has(#welcome-balance-card) .list_ul li.date_li > .div4, #shop-welcome .page-container:has(#welcome-balance-card) .list_ul li.order_li > .div4 { grid-column: 2; grid-row: 1; }
#shop-welcome .page-container:has(#welcome-balance-card) .list_title > .div2, #shop-welcome .page-container:has(#welcome-balance-card) .list_ul li.date_li > .div2, #shop-welcome .page-container:has(#welcome-balance-card) .list_ul li.order_li > .div2 { grid-column: 3; grid-row: 1; justify-self: start; }
#shop-welcome .page-container:has(#welcome-balance-card) .list_title > .div3, #shop-welcome .page-container:has(#welcome-balance-card) .list_ul li.date_li > .div3, #shop-welcome .page-container:has(#welcome-balance-card) .list_ul li.order_li > .div3 { grid-column: 5; grid-row: 1; }
#shop-welcome .page-container:has(#welcome-balance-card) .list_title > .div5, #shop-welcome .page-container:has(#welcome-balance-card) .list_ul li.date_li > .div5, #shop-welcome .page-container:has(#welcome-balance-card) .list_ul li.order_li > .div5 { grid-column: 4; grid-row: 1; }

#shop-welcome .page-container:has(#welcome-balance-card) .list_title > .div4,
#shop-welcome .page-container:has(#welcome-balance-card) .list_ul li.date_li > .div4,
#shop-welcome .page-container:has(#welcome-balance-card) .list_ul li.order_li > .div4 {
  text-align: left; /* only the amount column is right-aligned */
}

#shop-welcome .page-container:has(#welcome-balance-card) .list_title > div,
#shop-welcome .page-container:has(#welcome-balance-card) .list_ul li.date_li > div,
#shop-welcome .page-container:has(#welcome-balance-card) .list_ul li.order_li > div {
  float: none;
  width: auto;
  min-height: 0;            /* the grid centres the text (Daily Cost's cells too) */
  padding: 0 !important;    /* !: template */
  min-width: 0;
}

/* Daily Cost's 44px pitch for the transaction rows */
#shop-welcome .page-container:has(#welcome-balance-card) .list_ul li.order_li {
  min-height: 44px;
  padding: 6px 0;
}

/* The status CHIP keeps its 9px inset (the cell reset above is otherwise
   more specific than the CHIP recipe). */
#shop-welcome .page-container:has(#welcome-balance-card) .list_ul li.order_li > .div2 {
  padding: 0 9px !important; /* !: the cell reset above */
}

#shop-welcome .page-container:has(#welcome-balance-card) .list_ul li.order_li > .div2:empty {
  display: none; /* no chip without a status */
}

/* "Load failed" / "Loading": the EMPTY recipe across the whole card. */
#shop-welcome .page-container:has(#welcome-balance-card) .list_ul li.welcome-empty-li,
#shop-welcome .page-container:has(#welcome-balance-card) .list_ul li.welcome-async-loading {
  display: block;
  max-width: none;
  border-bottom: 0;
  text-align: center;
}

#shop-welcome .page-container:has(#welcome-balance-card) .list_ul li .div3,
#shop-welcome .page-container:has(#welcome-balance-card) .list_title .div3 {
  text-align: right;
}

#shop-welcome .page-container .oneSec.balanceHistory,
.page-container .oneSec.balanceHistory {
  padding: 0;
  margin: 0;
  overflow: visible;
}

#shop-welcome a.FastNavBox.f-18 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--ctl-sm);
  padding: 0 12px;
  font: 500 12px var(--brand-font-body);
  color: var(--brand-text);
  background: var(--brand-white);
  box-shadow: var(--ring-edge);
  border-radius: var(--brand-radius-pill);
  text-decoration: none;
}

#shop-welcome a.FastNavBox.f-18:hover {
  color: var(--brand-primary-hover); /* hover text: 4.74:1 on white */
}

#shop-welcome a.FastNavBox.f-18 .Hui-iconfont {
  font-size: 13px;
  opacity: 0.62;
}

#shop-welcome .welcome-content h2 span {
  color: inherit; /* orange is never text */
}

/* Preview-export artefact guard (a no-op in production). */
#welcome-transactions-list > :not(li) {
  display: none !important; /* !: preview artefact */
}

@media (max-width: 1124px) {
  #welcome-balance-card,
  #shop-welcome .page-container:has(#welcome-balance-card) > .oneSec:has(> .Huialert) {
    grid-column: 1 / -1;
  }
}

/* --- Order Cost (F = .page-container:has(.paymentListHolder)) ------------ */
#searchForm > .search-form-container,
.search-form-container {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

.search-form-container .form-row {
  gap: 10px 12px;
  margin-bottom: 10px;
}

.search-form-container .form-row:last-child {
  margin-bottom: 0;
}

.search-form-container .form-row .btn {
  margin-left: 0;
  margin-right: 0;
}

.search-form-container .form-row > input.input-text {
  flex: 1 1 200px;
  width: auto !important; /* !: inline width */
  min-width: 160px;
  max-width: 320px;
}

/* M8: both rows join one wrapping flex container; the three buttons end
   the last row together, bottom-right. Visual order only. */
@media (min-width: 769px) {
  .search-form-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 12px; /* rows by the items' 5px margins (§2 filter card) */
  }

  .search-form-container .form-row {
    display: contents;
  }

  /* The text fields absorb each row's free space, so every row ends on
     the card's right padding (no ragged 1290 / 1275 / 1318 edges). */
  .search-form-container .form-row > input.input-text {
    flex: 1 1 150px;
    min-width: 150px;
    max-width: none;
  }

  .search-form-container .shop-multi-admin-wrap .select2-container {
    width: 196px !important; /* !: select2 inline width */
  }

  .search-form-container .form-row > .select-box.timebox {
    flex: 0 0 auto;
  }

  .search-form-container .form-row > .btn-success {
    flex: 0 0 auto;
    order: 9;
  }

  .search-form-container .form-row > .btn-success:not(.exportBtn):not(.exportInvoiceBtn) {
    margin-left: auto;
  }

}

/* Below a 1440 window (a 1191 frame) the three buttons start a fresh last
   row together; from 1440 up they follow END DATE, pushed right. */
@media (min-width: 769px) and (max-width: 1190px) {
  .search-form-container::after {
    content: "";
    flex: 1 1 100%;
    order: 8;
    height: 0;
    margin: 0;
  }
}

.paymentListHolder .divbatch strong {
  font-size: 14px;
}

/* "All" stacks over the row checkboxes (the row cards pad their head 16) */
.paymentListHolder .divbatch > label:has(> #checkAll) {
  padding-left: 16px;
  margin-left: 0 !important; /* !: H-ui .ml-5 */
}

/* Batch captions, 16 apart: the template pads Balance and Each page with
   &nbsp; runs; a zero-width third track takes them (every pair then ends
   in one 6px track gap, which the 2px margins top up to 16). */
.paymentListHolder .divbatch > span.r {
  display: inline-grid;
  grid-template-columns: auto auto 0;
  align-items: center;
  column-gap: 6px;
}

.paymentListHolder .divbatch > span.r:first-of-type,
.paymentListHolder .divbatch > span.r + span.r + span.r {
  margin-left: 2px !important; /* !: BATCH BAR */
}

.paymentListHolder .divbatch > span.r:first-of-type {
  margin-right: -6px !important; /* !: BATCH BAR (Count, the last pair, ends on the card edge) */
}

.one_order {
  margin: 0 0 10px; /* row -> row 10; the batch bar's 12 sits above the first */
  overflow: hidden;
  width: 100%;
  float: none;
}

.one_order:hover {
  box-shadow: var(--shadow-hover) !important; /* !: CARD */
}

.one_order .table-responsive {
  border: 0;
  margin: 0;
  overflow: visible;
}

/* The .one_order card is the row card; its table sits flat inside it
   (scoped: All quotes and News keep the TABLE card). */
.one_order .listTable,
.one_order .listTable.table-bordered {
  border-radius: 0;
  box-shadow: none;
  margin: 0 !important; /* !: H-ui */
}

.listTable tr.active td.noborder,
.listTable tr.active td.noborder td {
  font-family: var(--brand-font-body);
}

.listTable .ml-50 {
  margin-left: 0 !important; /* !: H-ui */
}

.listTable tr.active > td.mobile-full > table.noborder {
  table-layout: fixed;
  width: 100%;
}

.listTable tr.active > td.mobile-full > table.noborder > tbody > tr > td.noborder:first-child {
  width: 26%;
  font: 600 14px/20px var(--brand-font-mono); /* the date + shopify id cell speaks Trace's head voice */
  color: var(--brand-text);
}

.listTable tr.active > td.mobile-full > table.noborder > tbody > tr > td.noborder:nth-child(2) {
  width: 16%;
}

.listTable tr.active td.noborder {
  font-size: 13px;
  line-height: 20px;
  color: var(--ink-70);
  padding: 0 8px 0 0; /* two 20px lines: one 64px head strip, the same as Trace */
}

.listTable tr.active td.noborder:last-child {
  padding-right: 4px; /* the strip's 16 + 4 = the body's 20px inset: Balance ends over INVOICE AMOUNT */
}

.listTable tr.active .r {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--brand-radius-pill);
  background: var(--ink-6);
  font: 600 12px var(--brand-font-mono);
  color: var(--ink-70);
  float: right !important; /* !: H-ui .r (kept: the chip is inline-flex in a table cell, so only a float ends it on the cell's right edge, over INVOICE AMOUNT) */
  margin-left: 16px;
}

.listTable tr.text-c > td.va-t.mobile-half {
  white-space: nowrap;
  min-width: 170px;
  text-align: right !important; /* !: H-ui */
  padding: 14px 20px !important; /* !: TABLE */
  font: 600 14px/1.5 var(--brand-font-mono);
}

/* "Invoice Amount:" is a bare text node before a <br>: the first line is
   the caption, the figure below keeps the 14/600 mono. */
.listTable tr.text-c > td.va-t.mobile-half::first-line {
  font: 500 11px var(--brand-font-mono);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-62);
}

.listTable .smallImg {
  width: 52px;
  height: 52px;
}

.listTable td.c-666 {
  font: var(--t-caption);
  color: var(--ink-62) !important; /* !: utility */
}

/* --- Topup (payment_add_new) --------------------------------------------- */
.online_payment::before {
  content: "Payments";
  display: block;
  margin: 8px 0 6px;
}

/* One eyebrow per page: where a crumb trail already sits above the
   container, the generated label steps aside (Topup, Products Template). */
nav.breadcrumb:has(> .c-gray) ~ .page-container .online_payment::before,
nav.breadcrumb:has(> .c-gray) ~ .page-container .addForm::before {
  content: none;
}

.online_payment,
.message_payment,
.page-container hr {
  margin-left: 0;
  width: 100%;
}

/* The divider between Online Top-up and Legacy Payment spans the 640px
   column it separates, not the whole frame. */
.page-container:has(#paycontent) hr {
  max-width: 640px;
}

.page-container .online_payment {
  margin-top: 0; /* crumbs -> title the same 20px as every crumb page (the template adds 20 more) */
}

.online_payment > br {
  display: none; /* template spacer between the title and the balance line */
}

.online_payment > font.pricenumber:has(> .price:empty) {
  display: none; /* the label text is missing from the template; only ":" would show */
}

.online_payment > a.FastNavBox.f-24 {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-bottom: 8px;
}

.online_payment > a.FastNavBox.f-24 img {
  height: 20px;
  width: auto !important; /* !: inline width */
  filter: grayscale(1) contrast(1.15);
  opacity: 0.65;
}

.online_payment > a.FastNavBox.f-24 .Hui-iconfont,
.message_payment > a.f-18.formbutton .Hui-iconfont {
  font-size: 16px;
  color: var(--ink-70); /* a glyph beside a title: 5.9:1 on cream, as the other head-strip glyphs (never under the 3:1 non-text floor) */
}

.message_payment > a.f-18.formbutton {
  display: flex;
  align-items: center;
  gap: 8px;
  font: var(--t-card);
  letter-spacing: var(--ls-card);
  color: var(--brand-text);
  text-decoration: none;
  margin-bottom: 20px; /* title -> card 20, like the Online Top-up block above */
}

.online_payment > a.FastNavBox.f-24:hover,
.message_payment > a.f-18.formbutton:hover {
  color: var(--brand-primary-hover) !important; /* !: PAGE HEADER (hover text is the darker orange) */
}

.ajaxcontent > h5,
.online_payment h5,
.message_payment h5 {
  font: var(--t-meta);
  color: var(--ink-66); /* on the cream */
  margin: 0 0 16px;
  max-width: 560px;
}

/* Both Payments cards share one 640px measure and one right edge */
#paycontent {
  box-sizing: border-box;
  width: auto !important; /* !: template width:400px */
  max-width: 640px;
  padding: 24px;
  margin: 0;
}

#paycontent .price {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

/* One height for the row: amount, currency and Pay Now are all --ctl-lg */
#paycontent .price input#amount {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: var(--ctl-lg);
  font: 600 22px var(--brand-font-mono) !important; /* !: FIELD */
  letter-spacing: var(--ls-stat);
  text-align: left;
  padding: 0 16px;
}

#paycontent .price input#currency:disabled {
  flex: 0 0 auto;
  width: 88px !important;  /* !: FIELD */
  text-align: center !important; /* !: FIELD */
  height: var(--ctl-lg) !important; /* !: FIELD (the amount field's height) */
  padding: 0 12px !important; /* !: CHIP */
  border: 0 !important;    /* !: FIELD */
  font: 600 11px var(--brand-font-mono) !important; /* !: FIELD */
  letter-spacing: var(--ls-chip);
  text-transform: uppercase;
}

#paycontent .pay_button button,
button#paynow {
  height: var(--ctl-lg);
  width: 100%;
  font-size: 13.5px;
}

#paycontent .pay_button button.paynow-maintenance-gray,
button#paynow.paynow-maintenance-gray,
button#paynow.paynow-maintenance-gray:hover,
button#paynow[disabled] {
  background-color: var(--ink-6) !important; /* !: FILLED */
  color: var(--ink-62) !important;           /* !: FILLED (still legible: 4.7:1) */
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

.pricenumber,
font.pricenumber {
  color: var(--brand-text) !important; /* !: template */
  font-weight: 600;
}

/* Legacy payment form: stacked label + FIELD (the wrapper is unboxed; the
   template's .title is absolute and would sit under the typed value). */
#messdiv #my-awesome-dropzone {
  box-sizing: border-box;
  max-width: 640px;
  padding: 20px 24px;
}

#messdiv #my-awesome-dropzone > h5 {
  margin: 0 0 16px;
}

.modal-body .formControls,
#messdiv .formControls {
  position: static;
  display: block;
  height: auto;
  padding: 0;
  max-width: none;
  width: 100% !important; /* !: inline width */
  margin: 0 0 14px !important; /* !: H-ui .mb-20 / .mt-20 */
  background: transparent;
  border: 0;
  box-shadow: none;
}

.modal-body .formControls > input,
#messdiv .formControls > input {
  display: block;
  width: 100%;
  height: var(--ctl) !important; /* !: template form input height */
}

.modal-body .formControls > textarea,
#messdiv .formControls > textarea {
  display: block;
  box-sizing: border-box;
  width: 100% !important;  /* !: template width */
  margin: 0 !important;    /* !: template margin-left (the box overhung the wrapper) */
  height: auto !important; /* !: inline height:1rem */
  min-height: 80px;
  padding: 10px 12px;
  resize: vertical;
}

.modal-body .formControls div.title,
#messdiv .formControls .title {
  position: static;
  display: block;
  margin: 0 0 6px;
  padding: 0;
  background: transparent;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 16px;
}

#messdiv .mt-15 {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px !important; /* !: H-ui */
  width: 100% !important;      /* !: inline width */
  max-width: none;
}

#messdiv .fileinput-button {
  order: 1;
}

#messdiv button.btn-success.r,
#my-awesome-dropzone button.btn-success.r {
  float: none !important;  /* !: H-ui .r */
  order: 2;
  opacity: 1 !important;   /* !: template button.btn-success{opacity:.8} dims the one FILLED */
}

.fileinput-button .glyphicon {
  display: none; /* the Glyphicons font is not loaded; the label carries the meaning */
}

.dropzone .dz-preview .dz-image {
  border-radius: var(--brand-radius-sm);
}

/* --- Monthly Stats / List (.dc-*; the page <style> loads before us) ------ */
.dc-wrap {
  color: var(--brand-text);
  font-family: var(--brand-font-body);
}

.dc-header {
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 2px 0 20px;
  margin: 0;
}

.dc-header h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  flex: 1;
  min-width: 0;
}

.dc-header h2 i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--ink-6);       /* a quiet glyph tile: the title, not the tile, is the heaviest object */
  color: var(--brand-text);
  border-radius: var(--brand-radius-sm);
  font-size: 16px;
}

.dc-header .domain-tag,
.dc-header .month-tag,
.dc-table .domain-pill,
.dc-table .badge-count,
.dc-stat-card .meta .dc-card-label .hint {
  display: inline-flex; /* the template's inline-block would park the 10.5px label at the pill's top */
  background: var(--ink-6);
  color: var(--ink-70);
  border-radius: var(--brand-radius-pill);
}

.dc-header .domain-tag,
.dc-header .month-tag {
  margin-left: 4px;
}

.dc-header .refresh-btn,
.dc-header > .back-btn:first-of-type {
  margin-left: auto;
}

/* The labelled header actions (Export CSV, Refresh, Back) are GHOSTs, not
   36px ICON circles: a label never overflows its button. The template's
   wrapper already spaces them 8px apart. */
.dc-header .back-btn .Hui-iconfont {
  margin: 0 !important; /* !: inline margin-right:4px (the button's 6px gap spaces it) */
  font-size: 14px;
  color: inherit;
}

/* Equal tiles (the TILE grid's auto-fit): a wider first tile read as uneven
   when it held the emptiest value (Monthly Stats' "—"). */

/* One TILE: glyph tile top-left beside the label (quiet ink, not orange),
   the hint and the value under it, all values on one baseline at --t-stat. */
.dc-stat-card {
  position: relative;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 14px;
  box-sizing: border-box;
  min-height: 116px; /* one tile height on Monthly Stats and List (padding included) */
}

.dc-stat-card .icon,
.dc-stat-card .icon.c1,
.dc-stat-card .icon.c2,
.dc-stat-card .icon.c3,
.dc-stat-card .icon.c4 {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  line-height: 36px;
  font-size: 18px;
  background: transparent;                    /* a hairline glyph tile, not a grey block */
  box-shadow: inset 0 0 0 1px var(--ink-8);
  color: var(--ink-62);
  border-radius: var(--brand-radius-sm);
}

/* The label text, its per-shop hint and the value are three rows of one
   grid (the label element steps aside with display:contents, so its text
   is the first row). The first row is the glyph's 36px: one label line
   centres on the glyph, two fill it exactly (the anonymous row takes its
   line metrics from .meta, so they are set here), and the hint chips and
   the values share one line across every tile at every width. */
.dc-stat-card .meta {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(36px, auto) auto 1fr;
  align-items: center;  /* the anonymous label row centres on the glyph */
  align-self: stretch;
  font-size: 12.5px;
  line-height: 18px;
  text-align: left; /* the label text's anonymous row takes its alignment from here */
}

.dc-stat-card .meta .label,
.dc-stat-card .meta .dc-card-label {
  display: contents;
  text-align: left; /* H-ui .label centres; every tile label starts on the value's edge */
  font: 500 12.5px/18px var(--brand-font-body) !important; /* !: CHIP (List's label carries .label). The meta voice: a metric name reads, never tracked caps over two lines */
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;  /* the metric name wraps to a second line; it is never cut */
  color: var(--ink-62) !important; /* !: template */
}

.dc-stat-card .meta .num,
.dc-stat-card .meta .num.multi-cur,
.dc-stat-card .meta .num.multi-cur .cur-line {
  font: var(--t-stat) !important; /* !: template / TILE */
  letter-spacing: var(--ls-stat);
}

.dc-stat-card .meta .num {
  grid-row: 3;
  align-self: end;  /* every value sits on the tile's foot line */
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 6px;
  min-height: 29px;
  padding-top: 4px;
}

.dc-stat-card .meta .num.multi-cur .cur-line {
  white-space: nowrap;
}

/* The per-shop hint takes its own line under the label, so neither the
   label's ellipsis nor a multi-currency value ever runs under it. */
.dc-stat-card .hint,
.dc-stat-card .meta .dc-card-label .hint {
  grid-row: 2;
  justify-self: start;
  position: static;
  display: flex;
  width: max-content;
  margin: 4px 0 0;
  height: 18px;
  font-size: 9.5px !important; /* !: CHIP */
  padding: 0 7px !important;   /* !: CHIP */
}

.dc-stat-card .meta .num.multi-cur .cur-code,
.dc-stat-card .meta .num .cur-code {
  color: var(--ink-62);
  font: var(--t-chip);
  letter-spacing: var(--ls-chip);
  margin-left: 6px;
}

.dc-stat-card .meta .num.multi-cur .cur-line {
  color: var(--brand-text);
}

.dc-stat-card .num[style*="15px"] {
  font: 600 14.5px/29px var(--brand-font-body) !important; /* !: inline. A text value (List's domain, brand) is a value: 600 ink, on the numbers' 29px foot line */
  color: var(--brand-text) !important;                     /* !: inline */
}

a.dc-stat-link:hover .num {
  color: var(--brand-primary-hover) !important; /* !: TILE (hover text) */
}

.dc-toolbar {
  padding: 12px 24px; /* the 24px inset every filter card keeps */
  margin: 0 0 16px;
}

.dc-toolbar form {
  gap: 8px;
}

.dc-toolbar .btn-search {
  margin-left: auto; /* the one FILLED ends the card on the right, as on every filter card */
}

#months,
.dc-toolbar select {
  min-width: 160px;
}

/* List: one search bar. The field takes the row, so Search sits 8px after
   it and still ends the card on the right. */
.dc-toolbar .search-input {
  flex: 1 1 360px;
  width: auto;
  max-width: none;
}

.dc-toolbar .btn-search i {
  color: inherit !important; /* !: template */
}

.dc-table-card {
  overflow: hidden;
  border-radius: var(--brand-radius-lg) !important; /* !: dc page <style> */
}

/* The cache note (Monthly Stats, Per-Shop; production only): a quiet
   surface strip, not the template's yellow and brown. */
.dc-cache-bar {
  background: var(--brand-surface) !important; /* !: dc page <style> #fff8e1 */
  border: 0 !important;                        /* !: dc page <style> #ffe9a8 */
  box-shadow: var(--ring-hair);
  color: var(--ink-70) !important;             /* !: dc page <style> #8a6d3b */
  border-radius: var(--brand-radius-md) !important; /* !: dc page <style> */
}

.dc-table thead th {
  background: transparent;
}

.dc-table tbody td {
  color: var(--brand-text);
  border-bottom-color: var(--brand-hairline);
}

.dc-table tfoot td {
  background: var(--brand-surface);
  color: var(--brand-text);
  font-weight: 700;
  border-top: 1px solid var(--ink-11);
}

.dc-table tbody tr:hover,
.dc-table tbody tr.month-row:hover {
  background: var(--ink-4);
}

.dc-table .id-cell,
.dc-table .muted,
.dc-table .shop-cell .store,
.dc-table .num-cell .cur-code,
.dc-table .zero-cell,
.dc-table .row-cur {
  color: var(--ink-62);
  font-family: var(--brand-font-mono);
}

/* Element-UI greys set inline (the Shop: / Month: labels, the totals row's
   currency code) move onto the ink ramp: --ink-62 is 4.9:1 on white. */
.dc-toolbar label[style*="color"],
.dc-table span[style*="a8acb3"],
.dc-pagination .info,
.dc-pagination .pagesize {
  color: var(--ink-62) !important; /* !: inline colour */
}

.dc-empty .empty-title {
  color: var(--brand-text); /* the EMPTY title, not the template's #606266 */
}

/* A currency symbol is part of the figure: ink, never the template's blue
   (tiles, per-shop cells and the totals row's inline colour). */
.dc-table .num-cell .cur-sym,
.dc-stat-card .cur-sym,
.dc-table .amt-with-cur .sym,
.dc-table span[style*="067fe4"] {
  color: inherit !important; /* !: template .num.multi-cur .cur-sym (5 classes) / inline colour */
}

.dc-table .month-cell,
.dc-table .month-cell a,
.dc-table tbody tr.month-row .month-cell,
.dc-table tbody tr.month-row .month-cell a {
  color: var(--brand-text) !important; /* !: template */
  font-weight: 600;
}

.dc-table .month-cell i,
.dc-table .month-cell i.Hui-iconfont[style*="color"] {
  font-size: 11px !important; /* !: inline size */
  color: var(--ink-38) !important; /* !: inline colour. A decorative glyph beside the month */
  margin-left: 4px;
}

/* The month row washes --ink-4 on hover: orange text there reads ~4:1, so
   the month keeps its ink and an orange underline carries the hover. */
.dc-table tbody tr.month-row:hover .month-cell,
.dc-table tbody tr.month-row:hover .month-cell a {
  color: var(--brand-text) !important; /* !: template (hover text) */
}

.dc-table tbody tr.month-row:hover .month-cell a {
  text-decoration: underline 1.5px var(--brand-primary) !important; /* !: inline text-decoration:none */
  text-underline-offset: 3px;
}

/* Per-Shop's sortable heads (its late <style> turns them orange on a blue
   wash, with a cool grey indicator): ink on the row wash, the indicator on
   the ink ramp, ink when its column is the sorted one. */
.dc-table th.sortable:hover {
  background: var(--ink-4) !important; /* !: late <style> #eef4ff */
}

.dc-table th.sortable:hover a {
  color: var(--brand-text) !important; /* !: late <style> var(--primary) */
}

.dc-table th .sort-ind {
  color: var(--ink-45) !important; /* !: late <style> #a8acb3 */
}

.dc-table th.sortable.active .sort-ind {
  color: var(--brand-text) !important; /* !: late <style> var(--primary) */
}

.dc-table i.Hui-iconfont[style*="color"] {
  color: var(--ink-62) !important; /* !: inline colour */
}

/* Monthly: numbers right */
.dc-table th:nth-child(n+2),
.dc-table td:nth-child(n+2) {
  text-align: right;
}

.dc-table th:first-child {
  width: 28%;
}

/* List: phone and time columns never wrap; avatar is a mono initial */
.dc-table td:nth-child(4),
.dc-table td:nth-child(6) {
  white-space: nowrap;
}

.dc-table td:nth-child(4) {
  font: 500 12.5px var(--brand-font-mono);
}

.dc-table:has(.username-cell) th:nth-child(n+2),
.dc-table:has(.username-cell) td:nth-child(n+2) {
  text-align: left;
}

.dc-table:has(.username-cell) th:first-child {
  width: 60px;
}

.dc-table .avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  line-height: 1;
  border-radius: 50%;
  background: var(--ink-6);
  color: var(--ink-70);
  font: 600 12px var(--brand-font-mono);
}

.dc-table .badge-online {
  width: 7px;
  height: 7px;
  background: var(--brand-ok);
}

.dc-table .badge-offline {
  background: var(--ink-22);
}

.dc-table .amt-red {
  color: var(--brand-text); /* an order amount is a neutral figure, like BILL PAID: red is for errors */
}

/* An empty count is "no value" (the em dash), not an empty grey pill. */
.dc-table .badge-count:empty {
  background: transparent;
  padding: 0;
}

.dc-table .badge-count:empty::before {
  content: "\2014";
  color: var(--ink-62);
  font-weight: 400;
}

.dc-table .amt-blue {
  color: var(--brand-text);
}

.bar-cell .bar {
  background: var(--accent-40);
}

.dc-pagination {
  background: transparent;
  border-top: 1px solid var(--brand-hairline);
  padding: 0 16px; /* a lone page "1" is a 44px foot, not a blank band */
  min-height: 0;
}

.dc-pagination .pageNav {
  margin: 0;
  padding: 8px 0; /* H-ui .pageNav pads 18px */
}

/* --- Store (admin_store) ------------------------------------------------- */
#store_tab::before {
  display: block;
}

.tabCon > .page-container {
  padding: 0 !important;              /* !: H-ui.admin */
  background: transparent;
}

.top-store-title,
.top-store-title .left,
.top-store-title .l {
  float: none !important; /* !: H-ui .l */
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.top-store-title {
  margin: 0 0 16px; /* 16 under the tab track (its own margin), 16 above the first card */
  flex-wrap: wrap;
}

.top-store-title .left {
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}

.top-store-title form {
  display: flex;
  gap: 8px;
}

.top-store-title form .input-text {
  width: 260px !important; /* !: inline width */
}

.top-store-title .l.ml-20 {
  margin-left: auto;
}

.top-store-title a.btn.size-S[style] {
  height: var(--ctl) !important; /* !: inline height */
  font-size: 13px;
  padding: 0 18px;
}

.top-store-title a.btn-primary.size-S[style] {
  padding: 0 16px;
}

/* The add link carries .text-right, which the GHOST list demotes: FILLED again
   (and 600 like every FILLED: [title] outranks the .size-S[style] weight) */
.top-store-title a.btn-success[title="add_new_store"][style],
.top-store-title a.btn-success[title="add_new_store"],
.page-container a.btn-success[title="add_new_employee_account"] {
  background-color: var(--brand-primary) !important; /* !: GHOST tie */
  color: var(--brand-on-primary) !important;         /* !: GHOST tie */
  font-weight: 600;
  box-shadow: var(--accent-glow);
}

.top-store-title a.btn-success[title="add_new_store"]:hover,
.page-container a.btn-success[title="add_new_employee_account"]:hover {
  background-color: var(--brand-primary-hover) !important; /* !: GHOST tie */
  color: var(--brand-on-primary) !important;               /* !: GHOST tie */
  box-shadow: var(--accent-glow-hover);
  transform: translateY(var(--lift));
}

.Huifold,
.Huifold.mt-20 {
  margin-top: 0;
}

.Huifold .item,
.Huifold li.item {
  position: relative;
  margin-bottom: 10px;
  overflow: hidden;
}

.Huifold .item h4 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin: 0;
  background: transparent;
  border: 0;
  color: var(--brand-text);
  font: 600 14.5px/20px var(--brand-font-body) !important; /* !: H-ui */
  letter-spacing: 0;
  cursor: pointer;
}

.Huifold .item h4 > .Hui-iconfont {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0;
  border-radius: var(--brand-radius-sm);
  background: var(--ink-6);
  color: var(--ink-62);
  font-size: 16px;
}

.Huifold .item h4 b {
  position: static;
  margin-left: auto;
  background: var(--ink-6) !important; /* !: ICON (the ICON's 36px hit target, kept) */
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-62);
}

/* Re-authorize sits in the head's action slot: centred on the head's 60px
   line (12 + 36 + 12), 8px before the 36px disc. */
.rebind-public-bar,
.rebind-public-bar[style] {
  position: absolute;
  top: 14px !important;          /* !: inline. (60 - 32) / 2 */
  right: 60px !important;        /* !: inline. 16 padding + 36 disc + 8 */
  padding: 0 !important;         /* !: inline */
  color: var(--brand-text);
  z-index: 1;
}

.rebind-public-bar .btn {
  height: var(--ctl-row);
  padding: 0 12px;
  font-size: 12.5px;
  margin: 0;
}

.Huifold .item .info {
  background: var(--brand-white);
  border: 0;
  border-top: 1px solid var(--brand-hairline);
  margin: 0;
  padding: 20px 24px;
}

.Huifold .item span,
.Huifold .item b {
  color: var(--ink-70);
}

/* Store card fields: a LABEL over its FIELD, as on New quote, Topup and
   Products Template. The template's notched label (absolute, 20px in, over
   the field's top edge) bit into the field's 10px corner; here it joins the
   flow above the field (order -1), help text below it, one 20px step
   between fields. Visual order only. */
#shop-setting .Huifold .posinput {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 8px;
}

#shop-setting .Huifold .posinput > .name {
  order: -1;
  flex: 0 0 100%;
  position: static;
  height: auto;
  margin: 0 0 6px;
  padding: 0;
  background: none;
  line-height: 16px;
  overflow: visible;
}

#shop-setting .Huifold .posinput > input.input-text {
  flex: 1 1 0%;
  min-width: 0;
}

#shop-setting .Huifold .posinput > .msg {
  flex: 0 0 100%;
  margin-top: 6px !important; /* !: inline margin-top (API Key help) */
}

#shop-setting .Huifold .info .row.cl > .col-sm-12 + .col-sm-12.mt-30 {
  margin-top: 20px; /* the row's 10 + 10 padding: one 20px step between fields */
}

/* Supply Type: the caption (a bare div after the two radios) reads first,
   as a LABEL; the radios centre on their labels. */
#shop-setting .Huifold .posinput.skin-minimal {
  column-gap: 24px;
  line-height: 20px;
}

#shop-setting .Huifold .posinput.skin-minimal > div:not([class]) {
  order: -1;
  flex: 0 0 100%;
  float: none !important;     /* !: inline float */
  margin: 0 0 8px !important; /* !: inline margin-right */
  font: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-62);
}

#shop-setting .Huifold .posinput.skin-minimal .radio-box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--ctl);
  padding: 0;
  margin: 0;
}

#shop-setting .Huifold .row.cl .radio-box input {
  float: none;
  margin: 0;
  line-height: normal;
}

#shop-setting .Huifold .posinput.skin-minimal .radio-box label {
  margin: 0;
  font: 500 13px var(--brand-font-body);
  color: var(--brand-text);
  cursor: pointer;
}

/* The required mark hangs on the label's own baseline (the template floats
   it in a 28px line box, 6px under the label text). */
.posinput .name span.c-red {
  float: none;
  line-height: inherit;
  vertical-align: baseline;
  margin-right: 2px;
}

.posinput .msg {
  color: var(--ink-62);
  font: var(--t-meta);
}

/* The template paints every #shop-setting input #f9f9f9 (an id-level
   rule): fields and boxes go white, a checked radio or box goes orange. */
#shop-setting .row.cl input {
  background: var(--brand-white);
}

#shop-setting .row.cl input[type="radio"]:checked,
#shop-setting .row.cl input[type="checkbox"]:checked {
  background: var(--brand-primary);
}

.Huifold .info .submitBtn,
.Huifold .info .btn-block {
  width: auto;
  display: inline-flex;
}

/* Rows never clip: a 38px GHOST's 1px ring (a box-shadow) ends exactly on
   the row's bottom edge, so the template's overflow:hidden gives way to
   flow-root (the floated columns stay contained, nothing is cut). */
#shop-setting .Huifold .info .row.cl {
  display: flow-root;
  padding: 10px 0;
  margin-top: 0; /* H-ui's 15px on top of the padding made a 43px step between rows (20 inside one) */
  overflow: visible;
}

/* Template rows with nothing in them take no height: the attachment slot,
   and the selected-country list, whose row pads only once the list holds
   a country (:has cannot nest, so the list carries the padding). */
#shop-setting .Huifold .info .row.cl:not(:has(*)),
#shop-setting .Huifold .info .row.cl:has(> .form-group > .shop-country-list) {
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
}

#shop-setting .Huifold .info .shop-country-list:has(*) {
  padding: 8px 0;
}

/* The country picker and the foot start on the fields' inset (the fields
   sit one extra 15px column in). */
#shop-setting .Huifold .info .row.cl:has(.country-select) {
  margin-left: 0;
  margin-right: 0;
}

.Huifold .info .col-sm-offset-4 {
  margin-left: 0;
}

/* The foot, as on every form: a hairline, the destructive action left,
   Save (the card's INK action) right. Visual order only. */
#shop-setting .Huifold .info .row.cl:has(.submitBtn) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 12px 15px 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--brand-hairline);
}

#shop-setting .Huifold .info .row.cl:has(.submitBtn)::before,
#shop-setting .Huifold .info .row.cl:has(.submitBtn)::after {
  display: none; /* H-ui's clearfix would be a flex item */
}

#shop-setting .Huifold .info .row.cl:has(.submitBtn) > div {
  float: none;
  width: auto;
  padding: 0;
  margin: 0 !important; /* !: H-ui .col-sm-offset-4 */
}

#shop-setting .Huifold .info .row.cl:has(.submitBtn) > .col-sm-offset-4 {
  order: 2;
}

#shop-setting .Huifold .info .row.cl:has(.submitBtn) > .col-sm-12 {
  order: 1;
}

/* Domain Name keeps the template's 400px (never wider than its column);
   Tracking URL takes the whole column whatever its runtime style says.
   The https:// / .myshopify.com affixes read as mono captions, as on
   Addstore and Claim Store. */
#shop-setting .Huifold .posinput > input[name="store_name"][style] {
  width: min(400px, 100%) !important; /* !: inline width */
}

#shop-setting .Huifold .posinput > input[name="track_url"] {
  width: 100% !important; /* !: runtime inline width */
}

#shop-setting .Huifold .posinput:has(> input[name="store_name"]) {
  font: 500 12px var(--brand-font-mono);
  color: var(--ink-62);
}

#shop-setting .Huifold .posinput:has(> input[name="store_name"]) > input {
  flex: 0 1 400px; /* the template's 400px, and the affixes stay beside it */
  margin: 0;
}

/* The country select and its two GHOST actions keep the control gap */
.Huifold .info .btn.add-country-btn,
.Huifold .info .btn.get-orders-countries-btn {
  margin-left: 8px !important; /* !: H-ui .ml-15 / .btn + .btn -1px */
}

.shop-country-list .label {
  margin: 2px 4px 2px 0;
}

/* Claim Store (a layui page layer): the body keeps the title's 24px inset,
   the https:// / .myshopify.com affixes breathe as mono captions, and
   Install Now ends the sheet bottom-right as its footer. The sheet hugs
   its content: layer.js fixes it at 420px, which left a 136px dead band
   (layer.js keeps the top offset it computed, so it opens a little high). */
.layui-layer-page:has(.claim-store-modal),
.layui-layer-page .layui-layer-content:has(> .claim-store-modal) {
  height: auto !important; /* !: layer.js inline height */
}

.layui-layer-page .layui-layer-content:has(> .claim-store-modal) {
  display: flex;
  flex-direction: column;
}

.claim-store-modal,
.claim-store-modal[style] {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0 !important; /* !: inline min-width */
  padding: 4px 0 0 !important; /* !: inline padding (the layer content pads 24) */
}

.claim-store-modal .row.cl {
  margin: 0;
  padding: 0;
}

.claim-store-modal .formControls {
  float: none;
  width: auto;
  padding: 0;
}

/* The field's name is a LABEL over it, as on the Store card */
.claim-store-modal .formControls > label {
  font: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-62);
}

.claim-store-modal .formControls > div[style] {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 500 12px var(--brand-font-mono);
  color: var(--ink-62);
}

.claim-store-modal #claim-store-domain {
  flex: 1 1 auto;
  width: auto !important; /* !: inline width */
  min-width: 0;
}

.claim-store-modal p.c-999 {
  font: var(--t-meta);
  color: var(--ink-62);
}

#claim-store-hint-box {
  background: var(--brand-surface) !important;  /* !: inline #fff3cd */
  border: 0 !important;                         /* !: inline border */
  box-shadow: inset 0 0 0 1px var(--brand-hairline);
  border-radius: var(--brand-radius-sm) !important; /* !: inline radius */
  color: var(--brand-text) !important;          /* !: inline #856404 */
}

#claim-store-result,
#claim-store-result[style] {
  margin-top: 8px !important; /* !: inline margin-top (+16 padding: the foot sits 24px under the hint) */
  padding-top: 16px;
}

#claim-store-result > div[style] {
  justify-content: flex-end !important; /* !: inline justify-content */
}

#claim-store-poll-tip {
  text-align: right !important; /* !: inline text-align */
}

/* --- FORM GRID (Addstore, Employee Account, edit information) ------------ */
/* One grid on every form: 38px controls, 10px above and below (a 58px
   pitch), one 760px card, the foot's primary bottom-right. The id-led
   selector outranks H-ui.admin's #shop-setting .row.cl { padding: 15px 0 }. */
#tab-system .row.cl,
form.employeeForm .row.cl,
#shop-setting form.employeeForm .row.cl,
#admineditForm .labeldiv {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
  margin: 0 !important; /* !: H-ui */
  clear: none;
}

/* A full-width colon draws its ink at the left of its em box: labels with
   no colon or an ASCII one pad 8px so every label's ink ends on one x. */
#tab-system .row.cl:has(input[name="track_url"]) > .form-label,
#tab-system .shop_attachment .form-label,
form.employeeForm .row.cl:has(> .formControls > input[name="user_name"]) > .form-label {
  padding-right: 8px; /* outranks the FORM GRID label's padding 0 (below) by specificity */
}

#tab-system .form-label,
form.employeeForm .form-label,
#admineditForm span.text-r {
  flex: 0 0 168px;
  width: auto;
  float: none;
  text-align: right;
  padding: 0;
  margin: 0;
  font: 500 12.5px var(--brand-font-body);
  color: var(--ink-70);
  line-height: 1.3;
}

#tab-system .formControls,
form.employeeForm .formControls {
  flex: 1;
  width: auto;
  float: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: var(--ctl); /* radio and file rows keep the 58px pitch of a field row */
  padding: 0;
  margin: 0;
}

#tab-system .formControls > .input-text,
form.employeeForm .formControls > .input-text,
#admineditForm .labeldiv > input {
  flex: 1 1 auto;
  width: auto !important; /* !: H-ui / inline width */
  min-width: 0;
  max-width: none; /* fills the 528px control column: one right edge with the group rule and the foot */
}

#tab-system .formControls > span[style],
form.employeeForm .formControls > span[style] {
  width: auto !important; /* !: inline width */
  flex: 1 1 auto;
  display: inline-flex !important; /* !: inline display */
}

form.employeeForm .select2-container,
#tab-system .select2-container {
  width: 100% !important; /* !: select2 inline width */
  max-width: none;
}

.col-sm-offset-2,
#tab-system ~ .row.cl > .col-sm-offset-2,
form.employeeForm > .row.cl > .col-sm-offset-2 {
  margin-left: 0;
  width: 100%;
  float: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 0 0;
  border-top: 1px solid var(--brand-hairline);
}

.form-label,
label.form-label,
.form-horizontal .form-label {
  color: var(--ink-70);
  font-size: 12.5px;
  font-weight: 500;
}

/* Required marks and inline errors are danger red: orange is never text. */
.form-label .c-red,
.labeldiv .c-red,
.title .c-red,
.posinput .c-red,
span.red,
.red {
  color: var(--brand-danger);
  font-weight: 600;
}

.radio-box,
.check-box {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 16px;
  font-size: 13px;
  color: var(--brand-text);
}

.radio-box label,
.check-box label {
  font: 500 13px var(--brand-font-body); /* the form's one text size */
  color: var(--brand-text);
}

/* H-ui pins the iCheck disc at top: 4px of its line, 4px under the label's
   centre in our 16px line: it centres on the label instead. */
.radio-box > .iradio-blue,
.check-box > .icheckbox-blue {
  top: calc(50% - 8px);
}

/* --- Addstore (F = .page-container:has(#form-conf-add)) ------------------ */
.shopify-help-container {
  max-width: 760px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.shopify-help-btn,
#shopify-help-toggle {
  height: var(--ctl-sm);
  padding: 0 12px;
  margin: 0;
  font-size: 12px;
}

#shopify-help-content,
.shopify-help-content {
  flex: 1 1 100%;
  margin-top: 10px;
  padding: 20px 24px;
  color: var(--ink-70);
  border-radius: var(--brand-radius-md);
}

.shopify-help-content h4,
.shopify-help-content strong {
  color: var(--brand-text);
}

.shopify-help-content li {
  color: var(--ink-70);
}

.shopify-help-content .highlight {
  background: var(--accent-10);
  color: var(--brand-text);
}

.shopify-help-content p[style*="e74c3c"] {
  color: var(--brand-danger) !important; /* !: inline colour */
}

/* The form is the card; the help toggle is its action slot */
#form-conf-add {
  max-width: 760px;
  box-sizing: border-box;
  padding: 16px 24px 20px;
  background: var(--brand-white);
  border-radius: var(--brand-radius-lg);
  box-shadow: var(--shadow-card);
}

#form-conf-add .shopify-help-container {
  margin-bottom: 4px;
}

#tab-system {
  border: 0 !important;         /* !: CARD */
  border-radius: 0 !important;  /* !: CARD */
  box-shadow: none !important;  /* !: CARD */
  background: transparent;
  padding: 0;
}

#tab-system ~ .row.cl {
  padding: 8px 0 0;
  margin: 0;
}

#tab-system .tabCon {
  display: block;
}

#tab-system input[name="store_name"][style],
#tab-system input[name="track_url"][style] {
  width: auto !important; /* !: inline width (Addstore only: the Store card keeps its own widths) */
}

#tab-system .formControls:has(> input[name="store_name"]) {
  font: 500 12px var(--brand-font-mono);
  color: var(--ink-62);
}

/* Tracking URL: the field takes the whole control column; the template's
   "#TrackingNumber#" note wraps under it as help text, in the same voice
   as the Domain Name help (it has no affixes to read as mono). */
#tab-system .formControls:has(> input[name="track_url"]) {
  row-gap: 6px;
  font: var(--t-meta);
  color: var(--ink-62);
}

#tab-system .formControls > input[name="track_url"] {
  flex: 1 1 100%;
}

#tab-system .row.cl:has(input[name="track_url"]) {
  align-items: flex-start; /* the label stays on the field's line, not on the field + caption */
}

#tab-system .row.cl:has(input[name="track_url"]) > .form-label {
  padding-top: 11px; /* (38 - 16) / 2 */
}

/* Logo: the file picker keeps its size, the note field fills the rest; its
   GHOST button is a 38px control beside the 38px note field (36px plus the
   1px ring the input's 1px padding holds: the box is 38, not 40). */
#tab-system .formControls > input[type="file"] {
  flex: 0 0 auto;
}

#tab-system .formControls > input[type="file"]::file-selector-button {
  height: calc(var(--ctl) - 2px);
  padding: 0 16px;
  font-size: 13px;
}

#tab-system .formControls > input[name$="_note"] {
  flex: 1 1 160px;
}

#tab-system .row.cl:has(> .formControls.c-999) {
  padding-top: 0;
  margin-top: -6px !important; /* !: FORM GRID */
}

#tab-system .formControls.c-999 {
  font: var(--t-meta);
  max-width: 560px;
  min-height: 0; /* a note row, not a control row */
  color: var(--ink-62);
}

#tab-system .row.cl:has(> .form-label:empty) .form-label {
  visibility: hidden; /* an EMPTY label cell: it keeps the 168px column so the control lines up; nothing is hidden */
}

#tab-system .formControls .radio-box {
  margin-right: 0;
}

#oauth-btn {
  height: var(--ctl);
  padding: 0 16px !important;            /* !: inline */
  margin: 0 !important;                  /* !: inline margin-left */
  border: 0 !important;                  /* !: inline */
  font: 500 13px var(--brand-font-body) !important; /* !: inline */
  border-radius: var(--brand-radius-pill) !important; /* !: inline */
}

/* --- Employee Account (F = .page-container:has(form.employeeForm)) ------- */
/* The action slot sits on the title line (as Export does on Product
   Confirmation): the 38px button centres on the 26px title (-46 - 6) and
   the first card keeps the title's 20px below (38 - 6 + 14 = 46). */
.page-container:has(form.employeeForm) > div:first-child {
  display: flex;
  justify-content: flex-end;
  max-width: 760px;
  margin: -52px 0 14px;
  pointer-events: none; /* the row lies over the title; only the button takes clicks */
}

.page-container:has(form.employeeForm) > div:first-child > * {
  pointer-events: auto;
}

/* The one FILLED on this view: full --ctl geometry (the .size-S it carries
   would make it the only 32px primary in the product). */
.page-container:has(form.employeeForm) > div:first-child > a.btn-success[title="add_new_employee_account"] {
  height: var(--ctl) !important; /* !: inline height / .size-S */
  font: 600 13px/1 var(--brand-font-body);
  padding: 0 18px;
  margin: 0;
}

form.employeeForm {
  box-sizing: border-box; /* the card and the action row above share one right edge */
  max-width: 760px;
  padding: 8px 24px 20px;
  margin: 0 0 16px;
}

form.employeeForm .tab-system-diy,
form.employeeForm .tabConDiy {
  border: 0;
  padding: 0;
}

form.employeeForm .row.cl:has(input[name="old_password"]),
#shop-setting form.employeeForm .row.cl:has(input[name="old_password"]) {
  margin-top: 6px !important; /* !: FORM GRID */
  padding-top: 16px;
  border-top: 1px solid var(--brand-hairline);
}

.page-container:has(form.employeeForm) > hr[style] {
  display: none; /* decorative: the cards separate themselves */
}

/* The foot matches every form: Save + Cancel bottom-right, the destructive
   action alone at the far left (visual order only; tab order unchanged). */
form.employeeForm .deleteEmployeeBtn {
  order: -1;
  margin-right: auto;
  height: var(--ctl);
  padding: 0 16px;
  font-size: 13px;
}

/* Add New Employee Account (a layer with no other filled action): its
   submit is the view's one FILLED. */
body:not(:has(a[title="add_new_employee_account"])) form.employeeForm .btn.submitBtn {
  background-color: var(--brand-primary) !important; /* !: INK */
  color: var(--brand-on-primary) !important;         /* !: INK */
  box-shadow: var(--accent-glow);
}

body:not(:has(a[title="add_new_employee_account"])) form.employeeForm .btn.submitBtn:hover {
  background-color: var(--brand-primary-hover) !important; /* !: INK hover */
  box-shadow: var(--accent-glow-hover);
}

/* --- API Keys (inert until api_credential_index links the skin) ---------- */
body:has(.ak-wrap) {
  background: var(--brand-bg);
}

.ak-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 2px 0 20px;
}

.ak-header > div:last-child {
  margin-left: auto;
}

.ak-header h2 {
  margin: 0 0 4px;
}

.ak-card {
  padding: 20px 24px;
  margin: 0 0 16px;
}

.ak-card h3 {
  font: var(--t-card);
  letter-spacing: var(--ls-card);
  margin: 0 0 12px;
}

.ak-info {
  padding: 16px 20px;
  margin: 0 0 20px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-70);
}

code,
.token-value {
  background: var(--ink-6);
  font: 500 12px var(--brand-font-mono);
  border-radius: 6px;
  padding: 1px 6px;
  color: var(--brand-text);
}

.ak-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.ak-form .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 260px;
  max-width: 420px;
}

#keyName {
  width: 100%;
}

#btnCopyToken {
  height: var(--ctl-sm);
  padding: 0 12px;
  font-size: 12px;
}

.ak-table span[style*="color"] {
  color: var(--ink-38);
}

.btn-revoke,
.ak-table .btn-danger {
  height: var(--ctl-sm);
  padding: 0 12px;
  font-size: 12px;
}

/* --- Quotation (F = .page-container:has(.tab-nav)) ----------------------- */
.Huialert-info.mb-10,
.page-container:has(.tab-nav) .Huialert-info.mb-10[style] {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent !important; /* !: inline red */
  border: 0 !important;               /* !: inline */
  box-shadow: none;
  padding: 0 2px 10px;
  margin: 0 0 6px;
  font: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-66) !important;    /* !: inline white (a caption on the cream: .66) */
  text-shadow: none;
}

.Huialert-info.mb-10::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-primary);
  flex: 0 0 auto;
}

.page-container:has(.tab-nav) #searchForm textarea[name="keywords"] {
  flex: 1 1 240px;
  width: auto !important;        /* !: inline width */
  min-width: 200px;
  height: var(--ctl);
  min-height: var(--ctl) !important; /* !: inline min-height */
  padding: 9px 12px;
  line-height: 1.4 !important;   /* !: FIELD */
  resize: none;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: middle;
}

.page-container:has(.tab-nav) #searchForm textarea[name="keywords"]:focus {
  height: auto;
  min-height: 80px !important; /* !: inline */
  white-space: normal;
  overflow: auto;
}

.page-container:has(.tab-nav) #searchForm .select-box:has(select[name="admin_id"]) {
  width: 220px !important; /* !: inline width */
}

.page-container:has(.tab-nav) #searchForm > button.btn-success[type="submit"] {
  order: 3;
  margin-left: auto;
}

.page-container:has(.tab-nav) #searchForm > .export {
  order: 4;
  margin-left: 0;
}

/* Below 1100px of content (a 1148px frame) the six controls no longer share a row: the two
   actions start a last row together, bottom-right (visual order only). */
@media (min-width: 769px) and (max-width: 1148px) {
  .page-container:has(.tab-nav) #searchForm::after {
    content: "";
    flex: 1 1 100%;
    order: 2;
    height: 0;
    margin: 0;
  }
}

.tab-container .tab-nav {
  margin: 0 0 12px;
}

/* Until the template's JS marks a tab, the first item wears the thumb */
.tab-nav:not(:has(.tab-item.active)) .tab-item:first-child {
  background: var(--brand-white) !important;  /* !: SEGMENTED */
  color: var(--brand-ink) !important;         /* !: SEGMENTED */
  box-shadow: var(--ring-edge), 0 1px 2px var(--ink-6) !important; /* !: SEGMENTED */
  font-weight: 600 !important;                /* !: SEGMENTED */
}

/* The pane keeps the page's left edge. The four counters are one quiet
   stat strip, the caption voice of "TOTAL: 6 ORDERS" on Orders and Trace:
   a LABEL and an ink mono figure, no tones (a red alarm on "0 items" was
   the loudest thing on the page). */
.page-container:has(.tab-nav) .tab-content {
  padding: 0;
}

.page-container:has(.tab-nav) .tab-content > .mb-10 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 24px;
  margin: 16px 0 12px;
}

.page-container:has(.tab-nav) .tab-content > .mb-10 > .label {
  height: auto;
  padding: 0 !important;                  /* !: CHIP */
  margin: 0 !important;                   /* !: H-ui .ml-10 */
  background: transparent !important;     /* !: CHIP tones */
  box-shadow: none !important;            /* !: CHIP tones */
  color: var(--ink-66) !important;        /* !: CHIP tones (a caption on the bare paper) */
  font: var(--t-label) !important;        /* !: CHIP */
  letter-spacing: var(--ls-label);
}

.page-container:has(.tab-nav) .tab-content > .mb-10 > .label span {
  font: 600 13px var(--brand-font-mono);
  letter-spacing: 0;
  color: var(--brand-text);
}

/* The Quoted table carries .customs_template too: it keeps its own auto
   layout (eight columns), the Products Template widths never reach it. */
.priceList,
table.customs_template.priceList {
  table-layout: auto;
}

.priceList tbody a:not(.btn):not(.productLink):not(.label) {
  color: var(--brand-text) !important; /* !: template blue */
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--ink-22);
}

.priceList tbody a:not(.btn):not(.productLink):not(.label):hover {
  color: var(--brand-primary-hover) !important; /* !: template blue (hover text: 4.74:1 on white) */
  text-decoration-color: currentColor;
}

.priceList .smallImg,
.priceListDone .smallImg {
  width: 48px;
  height: 48px;
}

.pid-copy-btn {
  height: 20px;
  margin-left: 6px;
  cursor: pointer;
}

.pid-copy-btn:hover {
  background: var(--accent-6) !important; /* !: CHIP */
  color: var(--brand-text) !important;    /* !: CHIP */
}

.fufillBtn {
  height: var(--ctl-sm);
  padding: 0 12px;
  font-size: 12px;
}

.batch_fulfill {
  height: var(--ctl-sm) !important; /* !: BUTTON */
  font-size: 12px !important;       /* !: BUTTON */
}

/* A product group's head row (one colspan cell): the surface head every
   row card uses, a hairline under it, and the table's 20px right inset,
   so Fulfill All ends where every other cell's content ends. */
.priceList tr.pid-card-header > td,
.priceListDone tr.pid-card-header > td {
  background: var(--brand-surface) !important;         /* !: page <style> #fafafa !important */
  border-bottom: 1px solid var(--ink-8) !important;    /* !: page <style> #e5e5e5 */
  padding-right: 20px !important;                      /* !: page <style> 10px */
}

.priceList tr.pid-card-header .pid-card-toggle:hover,
.priceListDone tr.pid-card-header .pid-card-toggle:hover {
  background: transparent; /* the row's own hover wash is enough: no #f0f0f0 block */
}

/* Read-feedback reply foot: the textarea on its own line, then the
   attachment GHOST and Submit ending right with the FILLED last, as on every
   form and modal (visual order only). The picker row, once opened, takes
   the last line. */
#feedback_add > .cl:has(> #submitBtn) {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

#feedback_add > .cl:has(> #submitBtn)::before,
#feedback_add > .cl:has(> #submitBtn)::after {
  display: none; /* H-ui's clearfix would be a flex item (and a gap) */
}

#feedback_add > .cl > textarea {
  flex: 1 1 100%;
}

#feedback_add > .cl > .uploadBtn {
  order: 1;
  width: var(--ctl);
  min-width: var(--ctl);
  padding: 0;
  justify-content: center;
  border-radius: var(--brand-radius-pill);
}

#feedback_add > .cl > #submitBtn {
  order: 2;
  margin: 0;
}

#feedback_add > .cl > #uploadForm {
  order: 3;
  flex: 1 1 100%;
}

/* Read-feedback thread (order_feedback, opened from a row action): the
   Product Confirmation bubble language. The template marks the customer's
   own messages .text-r, so they sit right as "mine"; the "user: date" line
   is a bare text node and reads as the caption, the <p> as the message. */
li.oneFeedBack {
  box-sizing: border-box;
  width: fit-content;
  min-width: 240px;
  max-width: 560px;
  padding: 10px 14px 12px;
  margin: 0 0 12px;
  background: var(--brand-white);
  border-radius: 18px 18px 18px 6px;
  box-shadow: var(--ring-hair);
  font: var(--t-caption);
  color: var(--ink-62);
  text-align: left !important; /* !: H-ui .text-r */
}

/* Mine: the surface tone with a hairline (accent tint is for chips; a
   message body in it read as a pink panel). Theirs stays white. */
li.oneFeedBack.text-r {
  margin-left: auto;
  background: var(--brand-surface);
  box-shadow: var(--ring-hair);
  border-radius: 18px 18px 6px 18px;
}

li.oneFeedBack > p {
  margin: 6px 0 0;
  font: var(--t-body);
  color: var(--brand-text);
}

.attachs {
  gap: 8px;
  margin-top: 8px;
}

.oneAttach {
  width: auto;
  padding: 0;
  margin: 0;
  background: var(--ink-6);
  overflow: hidden;
}

.oneAttach img {
  display: block;
  max-width: 140px !important; /* !: inline width */
  height: auto;
  border-radius: var(--brand-radius-sm);
}

/* --- New quote (F = .page-container:has(#importForm)) -------------------- */
@media (min-width: 769px) {
  .page-container:has(#importForm) > .mb-15 {
    display: grid;
    grid-template-columns: minmax(0, 640px) 320px;
    column-gap: 24px;
    align-items: start;
  }

  .page-container:has(#importForm) > .mb-15 > p {
    grid-column: 1 / -1;
  }

  .page-container:has(#importForm) #importForm {
    grid-column: 2;
    grid-row: 3;
    margin: 0;
  }

  .page-container:has(#importForm) #my-awesome-dropzone {
    grid-column: 1;
    grid-row: 3;
  }
}

.page-container:has(#importForm) > .mb-15 > p:not(.f-20) {
  font-size: 13px;
  color: var(--ink-70);
  margin: -8px 0 16px;
  max-width: 640px;
}

.page-container:has(#importForm) #my-awesome-dropzone {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 12px;
  padding: 20px 24px;
  min-height: 0;
}

.page-container:has(#importForm) #my-awesome-dropzone > * {
  grid-column: 1 / -1;
}

/* Quantity / Countries / Target price share one row: labels on row 7,
   fields on row 8; everything else auto-places around them. */
.page-container:has(#importForm) #my-awesome-dropzone label:has(+ #qty),
.page-container:has(#importForm) #my-awesome-dropzone #qty {
  grid-column: 1;
}

.page-container:has(#importForm) #my-awesome-dropzone label:has(+ #country),
.page-container:has(#importForm) #my-awesome-dropzone #country {
  grid-column: 2;
}

.page-container:has(#importForm) #my-awesome-dropzone label:has(+ #target_price),
.page-container:has(#importForm) #my-awesome-dropzone #target_price {
  grid-column: 3;
}

.page-container:has(#importForm) #my-awesome-dropzone label:has(+ #qty),
.page-container:has(#importForm) #my-awesome-dropzone label:has(+ #country),
.page-container:has(#importForm) #my-awesome-dropzone label:has(+ #target_price) {
  grid-row: 7;
}

.page-container:has(#importForm) #my-awesome-dropzone #qty,
.page-container:has(#importForm) #my-awesome-dropzone #country,
.page-container:has(#importForm) #my-awesome-dropzone #target_price {
  grid-row: 8;
}

#my-awesome-dropzone > label[style] {
  display: block;
  margin: 0 0 6px;
  font-weight: 500 !important; /* !: inline */
  font-size: 11px !important;  /* !: inline */
}

#my-awesome-dropzone > input[style] {
  min-height: var(--ctl) !important; /* !: inline */
  margin-bottom: 16px !important;    /* !: inline */
  width: 100%;
}

#my-awesome-dropzone #content,
#my-awesome-dropzone textarea {
  min-height: 120px !important; /* !: inline */
  padding: 10px 12px;
  margin-bottom: 16px;
  width: 100%;
}

#my-awesome-dropzone .mt-15 {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px !important; /* !: H-ui */
}

#my-awesome-dropzone .fileinput-button {
  order: 1;
}

#my-awesome-dropzone button.btn-success.r {
  float: none !important; /* !: H-ui .r */
  order: 2;
}

#importForm {
  padding: 20px 24px;
}

#importForm table {
  width: 100%;
  height: auto;
}

#importForm > table {
  margin-block: 0; /* the filter card's 5px row margins (it is the first form in .mb-15) would drop the heading 5px under the form card's first label */
}

#importForm td {
  text-align: left;
  padding: 0;
}

#importForm h2 {
  font: var(--t-card);
  letter-spacing: var(--ls-card);
  margin: 0 0 8px;
  padding-top: 0; /* H-ui h2 pads 20: the heading shares the form card's first line */
}

#importForm br {
  display: none; /* template spacers; the side card sets its own rhythm */
}

#importForm p {
  margin: 12px 0 0;
}

#btnsave {
  margin: 10px 0 0;
  height: var(--ctl-sm);
  padding: 0 12px;
  font-size: 12px;
}

#messageline,
#commandline {
  font-size: 12.5px;
}

/* --- All quotes (F = .page-container:has(tr.oneTicket)) ------------------ */
.page-container:has(tr.oneTicket) th:first-child {
  width: 72px;
}

.oneTicket td {
  line-height: 1.4 !important; /* !: page <style> 3rem */
  padding: 14px 20px;
  vertical-align: middle !important; /* !: H-ui .va-t (id, subject, reply and status on one axis) */
  cursor: pointer;
}

.oneTicket td:first-child {
  font-weight: 500 !important; /* !: inline bold */
  color: var(--ink-62);
}

.table td.subject,
.subject {
  font-size: 13.5px;
  color: var(--brand-text);
}

/* One row anatomy: the unread dot hangs in the cell's 20px padding, so
   every subject starts on the SUBJECT header's x, read or unread. */
.oneTicket td.subject {
  position: relative;
}

tr.oneTicket:has(.color-danger) td.subject {
  font-weight: 600 !important; /* !: inline */
}

tr.oneTicket:has(.color-danger) td.subject::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 21px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-primary);
}

tr.oneTicket:not(:has(.color-danger)) td.subject {
  font-weight: 500 !important; /* !: inline bold */
  color: var(--ink-70);
}

td.subject span[style] {
  display: block;
  margin-top: 2px;
  font: var(--t-caption);
  color: var(--ink-62);
}

.oneTicket td.mobile-half,
.oneTicket td.va-t.mobile-full {
  font: var(--t-caption);
  color: var(--ink-62);
  white-space: nowrap;
}

.page-container:has(tr.oneTicket) th:last-child,
.oneTicket td:last-child {
  width: 0;
  padding: 0;
}

.oneTicket td:last-child::before {
  content: none;
}

.color-danger {
  font-weight: 600;
}

/* --- Products Template (products_products_template) ---------------------- */
.addForm::before {
  content: "Products";
  display: block;
  margin: 0 0 4px;
}

.addForm > h2[align="center"] {
  margin-bottom: 8px;
}

.addForm > br,
.page-container.mt-2 > br {
  display: none; /* template spacers; the rhythm comes from margins */
}

.addForm > p.c-red {
  color: var(--ink-70) !important; /* !: utility */
  font: var(--t-meta);
  max-width: 620px;
  line-height: 1.55;
  margin: 0 0 2px;
}

.addForm > p.c-red:last-of-type {
  margin-bottom: 16px;
}

.addOneProduct,
form.addOneProduct {
  padding: 18px 20px;
  margin: 0 0 8px;
}

.addOneProduct .form-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 16px;
  margin: 0;
}

.addOneProduct .col-md-4 {
  width: auto;
  float: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.addOneProduct label {
  margin: 0;
}

.addOneProduct input.form-control {
  text-align: left;
  width: 100%;
  margin: 0;
}

/* The picker is a 38px control in a row of 38px fields: a 36px button plus
   its 1px ring (drawn in the input's 1px padding) = the row's 38. */
.addOneProduct input[type="file"].form-control {
  height: auto;
  padding: 1px !important; /* !: FIELD */
}

.addOneProduct input[type="file"]::file-selector-button {
  height: calc(var(--ctl) - 2px);
  padding: 0 16px;
  font-size: 13px;
}

.addOneProduct .col-md-4:has(> button) {
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-end;
}

.addOneProduct .col-md-4:has(> button) > label {
  display: none; /* empty spacer label */
}

.addOneProduct button.btn-lg {
  width: auto;
  display: inline-flex;
  height: var(--ctl);
  padding: 0 22px;
  font-size: 13px;
  border-radius: var(--brand-radius-pill);
}

.page-container.mt-2 > h2[align="center"] {
  font: var(--t-card) !important; /* !: PAGE HEADER */
  letter-spacing: var(--ls-card);
  margin: 28px 0 10px;
}

.page-container.mt-2 > section.addForm + h2[align="center"] {
  margin-top: 28px;
}

/* Six-column template list only: the Quotation tables share the class */
table.customs_template:not(.priceList):not(.priceListDone) {
  table-layout: fixed;
}

table.customs_template:not(.priceList):not(.priceListDone) th:nth-child(1) { width: 44px !important; }  /* !: attribute width */
table.customs_template:not(.priceList):not(.priceListDone) th:nth-child(2) { width: 112px !important; } /* !: attribute width */
table.customs_template:not(.priceList):not(.priceListDone) th:nth-child(3) { width: auto !important; }  /* !: attribute width */
table.customs_template:not(.priceList):not(.priceListDone) th:nth-child(4) { width: 18% !important; }   /* !: attribute width */
table.customs_template:not(.priceList):not(.priceListDone) th:nth-child(5) { width: 18% !important; }   /* !: attribute width */
table.customs_template:not(.priceList):not(.priceListDone) th:nth-child(6) { width: 80px !important; }  /* !: attribute width */

table.customs_template th,
table.customs_template tr.text-c td {
  text-align: left !important; /* !: H-ui .text-c !important */
}

/* The IMG caption starts on the thumbs and ids it labels (td.imgHolder pads 12) */
table.customs_template:not(.priceList):not(.priceListDone) th:nth-child(2) {
  padding-left: 12px;
}

/* An Edit cell with nothing to offer (whitespace only) reads as "no value",
   not as a blank column. */
#batchForm > table.customs_template:not(.priceList):not(.priceListDone) > tbody > tr > td:last-child:not(:has(*))::before {
  content: "\2014";
  color: var(--ink-62);
}

td.imgHolder,
.customs_template .imgHolder {
  padding: 10px 12px;
  font: var(--t-label);
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.5;
  color: var(--ink-62);
  text-align: left !important; /* !: page <style> center */
}

td.imgHolder .smallImg,
.customs_template .smallImg {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--brand-radius-sm);
  display: block;
  margin-bottom: 6px;
}

.customs_template .oneLogistics td img {
  padding: 0;
}

.customs_template td.imgHolder > br:first-of-type {
  display: none; /* the thumb is display:block; the break would add a blank line */
}

.urls a[style] {
  color: var(--brand-text) !important; /* !: inline blue */
}

/* --- Stock Inventory (F = .page-container.mt-2:has(a.stock-inout)) ------- */
.page-container.mt-2:has(a.stock-inout) {
  display: flex;
  flex-direction: column;
}

.page-container.mt-2:has(a.stock-inout) > h2[align="center"] {
  order: -3;
  margin: 0 0 2px;
  font: var(--t-title) !important; /* !: the Products Template list-title rule shares the selector */
  letter-spacing: var(--ls-title);
}

.page-container.mt-2:has(a.stock-inout) > p.text-c.c-gray {
  order: -2;
  text-align: left;
  font: var(--t-meta);
  color: var(--ink-66) !important; /* !: .c-gray utility. On the cream: 5.0:1 */
  margin: 0 0 16px;
}

.page-container.mt-2:has(a.stock-inout) > br {
  display: none; /* template spacer under the title */
}

/* The container is a column flex, so margins do not collapse: the filter's
   own 16px is the whole gap, and the TOTAL caption sits 8px over the table. */
.page-container.mt-2:has(a.stock-inout) > .mb-15 {
  margin-bottom: 0;
}

.page-container.mt-2:has(a.stock-inout) > div.mt-5.mb-5 {
  margin: 0 0 8px;
  min-height: 28px;
}

.page-container.mt-2:has(a.stock-inout) label.ml-10 {
  margin-left: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 12.5px var(--brand-font-body);
  color: var(--ink-70);
}

.page-container.mt-2:has(a.stock-inout) #searchForm .btn-success {
  margin-left: auto;
}

.page-container.mt-2:has(a.stock-inout) #searchForm button[name="export"] {
  order: 5;
  margin-left: 0;
}

.page-container.mt-2:has(a.stock-inout) th:nth-child(1) {
  width: 140px !important; /* !: attribute width */
  padding-left: 16px;      /* IMAGE starts on the thumbs (td.imgHolder pads 16) */
}

.page-container.mt-2:has(a.stock-inout) th:nth-child(2) {
  width: auto !important;  /* !: attribute width */
  padding-left: 20px;      /* PRODUCT on its cells' 20px (the Products Template IMG inset of 12 is not this column) */
}

.page-container.mt-2:has(a.stock-inout) th,
.page-container.mt-2:has(a.stock-inout) tr.text-c td {
  text-align: left !important; /* !: H-ui !important */
}

.page-container.mt-2:has(a.stock-inout) td.imgHolder {
  padding: 12px 16px;
  font: 500 11px var(--brand-font-mono);
  color: var(--ink-62);
  line-height: 1.5;
}

.page-container.mt-2:has(a.stock-inout) td.imgHolder > a.productLink {
  float: left;
  margin-right: 12px;
}

.page-container.mt-2:has(a.stock-inout) td.imgHolder > br:first-of-type,
.page-container.mt-2:has(a.stock-inout) .fullWidth br {
  display: none; /* the thumb floats left; the breaks would open blank lines */
}

.page-container.mt-2:has(a.stock-inout) td:nth-child(2) {
  font: var(--t-row);
}

.page-container.mt-2:has(a.stock-inout) td:nth-child(3) {
  font: 500 12px var(--brand-font-mono);
  color: var(--ink-70);
}

.page-container.mt-2:has(a.stock-inout) td.stock-qty {
  text-align: right !important; /* !: H-ui */
  padding-right: 20px;
}

.available {
  font: 600 14.5px var(--brand-font-mono);
}

a.stock-inout {
  height: var(--ctl-sm);
  padding: 0 12px;
  font: 500 12px var(--brand-font-body);
  color: var(--brand-text);
  text-decoration: none;
}

a.stock-inout .Hui-iconfont {
  font-size: 13px;
}

/* --- Store Package (F = .page-container:has(> .packages)) ---------------- */
.packages {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  padding: 0;
  justify-content: start;
}

.onePackage,
.onePackage.btn-hover-common {
  width: auto;
  height: auto;
  margin: 0;
  display: block;
  overflow: hidden;
  color: var(--brand-text);
}

.onePackage:hover,
.onePackage.btn-hover-common:hover {
  top: auto !important;    /* !: template -5px */
  color: var(--brand-text) !important; /* !: template */
}

.onePackage .oneLink {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border: 0;
  border-bottom: 1px solid var(--brand-hairline);
  border-radius: 0;
  overflow: hidden;
  background: var(--brand-surface);
}

.onePackage .oneLink img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.onePackage .oneLink img[src*="no_product"] {
  object-fit: contain;
  padding: 22%;
  box-sizing: border-box;
  opacity: 0.45;
  filter: grayscale(1);
}

.onePackage .desc {
  padding: 14px 16px;
  background: var(--brand-white);
  color: var(--ink-70);
}

.onePackage .pName {
  height: auto;
  line-height: 1.3;
  padding: 0 0 6px;
  margin: 0;
  font: var(--t-sub) !important; /* !: heading */
  color: var(--brand-text);
}

.onePackage .desc p {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0;
  font: 600 14.5px var(--brand-font-mono);
  color: var(--brand-text);
}

.onePackage .desc .text-r {
  float: none;
  height: 20px;
}

/* --- edit information (F = article.page-container:has(#admineditForm)) --- */
#admineditForm {
  box-sizing: border-box; /* one 760px card measure with Addstore and Employee */
  width: 100%;
  max-width: 760px;
  margin: 0;
  padding: 8px 24px 20px;
  text-align: left;
}

#admineditForm .labeldiv {
  margin-top: 0 !important; /* !: template */
  padding: 10px 0;          /* = the FORM GRID pitch */
}

#admineditForm .labeldiv:has(> input.name) {
  margin-top: 6px !important; /* !: template */
  padding-top: 16px;
  border-top: 1px solid var(--brand-hairline);
}

/* The Save foot gets the hairline every form foot has (Addstore, Employee).
   The button is the form's bare last child, so the rule is painted by the
   card itself: 17px above the 38px button, inside the 24px insets. */
#admineditForm:has(> #submit:last-of-type) {
  background-image: linear-gradient(var(--brand-hairline), var(--brand-hairline));
  background-repeat: no-repeat;
  background-size: calc(100% - 48px) 1px;
  background-position: 24px calc(100% - 75px); /* 20 padding + 38 button + 17 */
}

#admineditForm > #submit {
  margin-top: 25px; /* the last row's 10 + 18 to the rule's line: the Addstore foot rhythm */
}

.labeldiv span {
  color: var(--ink-70);
  font-size: 12.5px;
  font-weight: 500;
}

.page-container #submit {
  display: block;
  box-sizing: border-box;
  width: auto;
  max-width: none;
  height: var(--ctl);
  padding: 0 22px;
  margin: 14px 0 0 auto;
  border: 0;
  border-radius: var(--brand-radius-pill);
  font: 600 13px var(--brand-font-body);
  text-shadow: none;
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
}

/* --- Login / Register ---------------------------------------------------- */
#shopLogin .login-container {
  position: relative;
}

#shopLogin .login-container::before {
  content: "";
  position: absolute;
  inset: -120px;
  background: radial-gradient(420px 320px at 50% 45%, var(--accent-10), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

#shopLogin .logodiv {
  background: var(--brand-ink);
  border-radius: var(--brand-radius-lg);
  box-shadow: var(--shadow-ink), 0 24px 56px rgba(28, 25, 23, 0.16); /* the one card on the page floats higher */
  padding: 36px 56px 32px;
  animation: sgRise 0.22s var(--ease) both;
}

@keyframes sgRise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

#shopLogin .logodiv::before {
  content: "Customer portal";
  display: block;
  text-align: center;
  margin-bottom: 10px;
  font: var(--t-chip);
  letter-spacing: var(--ls-chip);
  text-transform: uppercase;
  color: var(--paper-55);
}

#shopLogin .logo {
  display: block;
  height: 40px;
  margin: 0 0 6px;
  font-size: 0;
  line-height: 0;
  background: none;
  text-align: center;
  width: auto;
}

#shopLogin .logo font {
  font-size: 0 !important;     /* !: inline font-size */
  line-height: 0 !important;   /* !: inline line-height */
  color: transparent;
}

#shopLogin .logo::before,
#shopLogin .logo::after {
  font-size: 30px;
  line-height: 40px;
}

#loginForm::before,
#registerForm::before {
  display: block;
  text-align: center;
  margin: 2px 0 18px;
  font: 500 13px/18px var(--brand-font-body);
  color: var(--paper-72);
}

#loginForm::before {
  content: "Sign in to your fulfilment dashboard";
}

#registerForm::before {
  content: "Create your account";
}

#shopLogin .username,
#shopLogin .password,
#shopLogin .confirm_password,
#shopLogin .email,
#shopLogin .phone {
  width: 100%;
}

#shopLogin input,
#shopLogin .username,
#shopLogin .password,
#shopLogin .captcha {
  height: var(--ctl-lg);
  line-height: normal;
  padding: 0 14px;
  margin-top: 12px;
  font-size: 13.5px !important; /* !: FIELD */
  color: var(--brand-text);
  text-shadow: none;
  text-align: left;
}

#shopLogin input::placeholder {
  font-family: var(--brand-font-body) !important; /* !: template */
  font-size: 13.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-62) !important; /* !: template */
}

#shopLogin .labeldiv:has(#captchaimg) {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  width: 100%;
  box-sizing: border-box; /* the captcha tile ends on the field column's right edge */
}

#shopLogin .captcha {
  flex: 1;
  width: auto;
  min-width: 0; /* an input's intrinsic width would push the tile 2px past the column */
  float: none;
}

#shopLogin #captchaimg {
  float: none;
  display: block;
  box-sizing: border-box; /* 110 including the 1px edge */
  flex: 0 0 110px;
  margin: 0;
  width: 110px;
  height: 44px;
  object-fit: cover;
  border-radius: var(--brand-radius-sm);
  border: 1px solid var(--paper-16);
  filter: grayscale(1) contrast(1.2);
}

#shopLogin #submit,
#shopLogin button[type="submit"] {
  width: 100%;
  height: var(--ctl-lg);
  margin-top: 18px;
  border: 0;
  border-radius: var(--brand-radius-pill);
  font: 600 13.5px var(--brand-font-body) !important; /* !: template */
  text-shadow: none;
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
}

#shopLogin #submit:active {
  transform: scale(0.98);
}

#shopLogin .register-tis {
  width: 100%;
  height: auto;
  line-height: 1.4;
  margin: 16px auto 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--paper-55);
  text-shadow: none;
  font: 500 12.5px var(--brand-font-body) !important; /* !: template */
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

#shopLogin .register-tis:hover {
  color: var(--paper-100) !important; /* !: template */
  background: transparent !important; /* !: template */
}

#shopLogin a {
  color: var(--paper-72) !important; /* !: template */
}

#shopLogin a:hover {
  color: var(--paper-100) !important; /* !: template */
}

/* An error on the ink card: the message in paper, the field itself flagged
   in the one danger red (6.5:1 on the white field). No pink tint. The
   message leaves H-ui's absolute box (top 17px, translate -50%) and flows
   under its field, so it never straddles the white field's top edge. */
#shopLogin label.error {
  position: static;
  transform: none;
  left: auto;
  top: auto;
  width: auto;
  height: auto;
  margin: 6px 2px 0;
  text-align: left;
  background: transparent;
  color: var(--paper-100);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-shadow: none;
  font: 400 12.5px/16px var(--brand-font-body);
}

/* The captcha row is a flex line: its message takes a line of its own. */
#shopLogin .labeldiv:has(#captchaimg):has(> label.error) {
  flex-wrap: wrap;
}

#shopLogin .labeldiv:has(#captchaimg) > label.error {
  order: 3;
  flex: 1 0 100%;
  margin-top: -6px; /* the row's 12px gap + this = the 6px every message keeps */
}

#shopLogin input.error {
  border-color: var(--brand-danger) !important; /* !: FIELD rest border */
  box-shadow: 0 0 0 3px var(--danger-10);
}

#shopLogin .box-line {
  border-top-color: var(--paper-16);
}

#shopLogin footer,
#shopLogin footer .footer {
  background: transparent !important; /* !: inline <style> */
  border-top: 0 !important;           /* !: inline <style> */
  padding: 24px 0;
  color: var(--ink-45) !important;    /* !: inline <style> */
}

/* The legal line is a pseudo-element with no link: its box never takes a
   click meant for the card under it. */
#shopLogin footer .footer {
  pointer-events: none;
}

/* Short windows (a 1366x768 laptop leaves ~657px): H-ui.login.css pins the
   98px footer to the viewport bottom over a card centred with a translate,
   so the 600px register card ran under it. There the page becomes a column:
   the card centres in the space above the footer, the footer follows it,
   and the document scrolls when both do not fit. Tall windows keep the
   translate-centred card. */
@media (min-width: 671px) and (max-height: 820px) {
  #shopLogin {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100vh;
  }

  #shopLogin .login-container {
    top: auto;
    left: auto;
    transform: none;
    margin: auto;
    padding-top: 24px;
  }

  #shopLogin .login-container::before {
    bottom: 0; /* the glow never adds scroll below the footer */
  }

  #shopLogin footer {
    flex: 0 0 auto;
    padding: 0; /* the line's own 98px box is the whole footer */
  }

  #shopLogin footer .footer {
    position: static;
  }
}

/* ============================================================================
   5. UTILITIES — H-ui colour classes mapped onto the palette
   ========================================================================== */
.c-999,
.c-999 a,
a.c-999,
.c-333,
.c-333 a,
a.c-333,
.c-gray {
  color: var(--ink-62) !important; /* !: H-ui utility */
}

.c-666,
.c-666 a,
a.c-666,
td.c-666 {
  color: var(--ink-70) !important; /* !: H-ui utility */
}

/* Orange is never text: the warning / info utilities colour glyphs only;
   as text they read as emphasised ink (the LINK recipe restyles .c-primary). */
.c-warning > .Hui-iconfont,
a.c-warning > .Hui-iconfont,
i.c-warning,
i.c-primary,
i.c-info,
i.c-blue {
  color: var(--brand-primary) !important; /* !: H-ui utility */
}

.c-warning,
.c-warning a,
a.c-warning,
.c-primary,
.c-blue,
.c-info {
  color: var(--brand-text) !important; /* !: H-ui utility */
  font-weight: 600;
}

/* Required marks, "Load failed", inline errors: danger red (orange is never text) */
.c-red,
.text-red {
  color: var(--brand-danger) !important; /* !: H-ui utility */
}

.c-success,
.c-green {
  color: var(--brand-ok);
}

.c-danger,
.c-error,
font[color="red"] {
  color: var(--brand-danger);
}

.bg-primary,
.bg-info {
  background-color: var(--brand-primary);
  color: var(--brand-on-primary);
}

.bg-1 {
  background-color: var(--brand-surface);
}

.lightbg,
h4.lightbg {
  background-color: var(--brand-surface);
  border-color: var(--brand-hairline);
}

.bk-gray {
  border-color: var(--brand-hairline) !important; /* !: H-ui utility */
}

.tab-nav {
  border-color: var(--ink-11) !important; /* !: template */
}

/* Alerts: quiet cream panels, never a coloured band */
.Huialert:not(.divstatus):not(.divbatch):not(.divtbody) {
  color: var(--brand-text) !important;              /* !: H-ui */
  text-shadow: none;
  background-color: var(--brand-surface) !important; /* !: H-ui */
  border: 0 !important;                             /* !: H-ui */
  border-radius: var(--brand-radius-md) !important; /* !: H-ui */
  box-shadow: var(--ring-hair);
  padding: 12px 16px;
  font-size: 13px;
}

.Huialert-error:not(.divstatus),
.Huialert-danger:not(.divstatus) {
  background-color: var(--accent-10);
  color: var(--brand-text);
}

.Huialert .Hui-iconfont {
  color: inherit;
  opacity: 0.55;
}

/* Shipping list strip (.bg-1.bk-gray): the SEGMENTED chip strip in a band */
.bg-1.bk-gray {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 6px; /* a wrapped second row reads as intended, not as a collision */
  background: transparent;
  border: 0;
  padding: 0;
  margin: 16px 0 8px;
  line-height: normal;
}

footer.footer,
.footer p {
  color: var(--ink-62);
}

/* --- Footer line: Lodecom ------------------------------------------------
   The template prints "Copyright (c) 2016-2026 Fulfillant All rights
   reserved." on login/register. The skin collapses that text node and
   draws the Shipgoods legal line in its place. Only footers WITHOUT a link
   collapse: the ICP registration link on the two list templates stays
   reachable. Partner: the real fix is the string in the template; once
   changed there, delete this block. */
footer .footer:not(:has(a)),
#shopLogin footer .footer:not(:has(a)),
.footer:not(:has(a)) {
  font-size: 0;
  line-height: 46px;
}

footer .footer a {
  font: 500 10.5px var(--brand-font-mono);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-62);
}

footer .footer:not(:has(a))::after,
#shopLogin footer .footer:not(:has(a))::after,
.footer:not(:has(a))::after {
  content: "\00a9  2026 Lodecom  \00b7  Van Meelstraat 20  \00b7  1945 WC Beverwijk  \00b7  The Netherlands";
  font-family: var(--brand-font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-66); /* 10.5px on the cream */
  line-height: 46px;
}

/* ============================================================================
   6. APPENDIX — inert until the Logistics templates link this file
   ========================================================================== */
.lg-wrap,
.lg-head {
  color: var(--brand-text);
  font-family: var(--brand-font-body);
}

.lg-btn {
  height: var(--ctl);
}

.lg-input {
  width: auto;
}

.lg-url {
  color: var(--brand-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lg-muted {
  color: var(--ink-62);
}