/* WBJ Trade Dashboard. All rules scoped under .td */
.td{--td-primary:#A73A64;--td-ink:#1a1a1a;--td-bg:#F7F7F7;--td-card:#fff;--td-mut:#6d6d6d;--td-line:#ececec;--td-r:14px;--td-emer:#2d7424;--td-clay:#b93a2e;background:var(--td-bg);color:var(--td-ink);font-size:14px;line-height:1.5;isolation:isolate}
/* isolation keeps every dashboard layer (eyes, tooltips, search list, image preview) under the theme's sticky header, menus and drawers */
/* Safety net only (A1): if anything new is ever wider than the screen, the dashboard clips it rather than widen the
   phone's layout viewport (which pans the page sideways and puts the cart bar off screen). clip makes no scroll box:
   sticky and fixed children are unaffected. Every known cause is fixed at its root (test-mr-layout checks with it off). */
.td{overflow-x:clip}
/* Theme reset. base.css styles every input, label, heading and empty div site-wide; undo that inside the dashboard.
   :where() keeps these at one-class weight so dashboard classes further down still win. */
.td :where(input,select,textarea,label){margin:0}
.td :where(input:not([type=checkbox]):not([type=radio]),select,textarea){display:inline-block;max-width:none}
.td :where(select){line-height:normal;width:auto}
.td :where(h1,h2,h3,h4){line-height:1.3;text-transform:none;font-weight:700;word-break:normal}
.td .td-fcol .fb{display:block}
.td *{box-sizing:border-box}
.td [hidden]{display:none!important}
.td h1,.td h2{font-weight:700;margin:0 0 8px;letter-spacing:0;text-transform:none}.td h1{font-size:26px}.td h2{font-size:17px}.td p{margin:0 0 8px}
.td a{color:var(--td-primary)}
.td .td-mut{color:var(--td-mut)}.td .td-ok{color:var(--td-emer);font-weight:600}.td .num{font-variant-numeric:tabular-nums;text-align:right}
.td-visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.td-gate{max-width:560px;margin:0 auto;padding:60px 16px;text-align:center}.td-gate .td-btn{margin:6px}
.td-app{display:grid;grid-template-columns:220px minmax(0,1fr);max-width:1240px;margin:0 auto}
.td-side{padding:24px 10px 20px 18px;align-self:start}
.td-nav{display:flex;flex-direction:column;gap:1px}
.td-nav a{display:flex;align-items:center;gap:8px;color:#555;text-decoration:none;padding:7px 10px;font-size:13.5px;border-radius:9px}
.td-nav a.on{background:#1a1a1a;color:#fff;font-weight:700}.td-nav a:not(.on):hover{background:#f0e8ec;color:var(--td-primary)}
.td-nav .td-logout{color:var(--td-primary);margin-top:4px}
.td-navsec{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--td-mut);padding:12px 10px 3px}
.td-badge{margin-left:auto;background:var(--td-primary);color:#fff;border-radius:99px;font-size:10px;font-weight:700;padding:2px 8px}
.td-rep{margin-top:20px;background:#fff;border:1px solid var(--td-line);border-radius:12px;padding:12px;font-size:13px;word-break:break-word}
.td-rep .td-btn{display:flex;width:100%;margin-top:8px;text-align:center} /* flex: the label stays centred in the 40 / 44 px button */
.td-main{min-width:0;padding-bottom:90px}
.td-top{background:#fff;border-bottom:1px solid var(--td-line);padding:12px 20px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.td select,.td input[type=text],.td input[type=search],.td textarea{font:inherit;border:1px solid #ddd;color:var(--td-ink)}
.td input[type=text],.td input[type=search],.td textarea{padding:9px 11px;border-radius:10px;background:#fff;min-height:40px} /* selects: the one look below */
.td-search{flex:1;min-width:160px;margin:0}.td-search input{width:100%}
.td-top>.td-btn[data-td-cart-view]{gap:0} /* "Cart (252)": the label is three text runs; no button gap between them */
.td-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-weight:600;border:0;border-radius:10px;padding:10px 14px;cursor:pointer;min-height:44px;background:var(--td-primary);color:#fff!important;text-decoration:none;line-height:1.2}
.td .td-btn:disabled{opacity:1;background:#e9e9e9!important;color:#595959!important;border-color:#e9e9e9!important;cursor:not-allowed}
.td .td-pad-foot .td-btn:disabled{background:#3a3a3a!important;color:#b5b5b5!important;border-color:#3a3a3a!important}
.td-btn--ghost{background:#fff;border:1px solid var(--td-primary);color:var(--td-primary)!important;border-radius:99px}
.td-btn--sm{min-height:36px;padding:7px 12px;font-size:13px}
.td-btn--light{background:#fff;color:var(--td-primary)!important;min-height:48px}
/* Success state wins over every button variant (plus/ghost/light), so text never keeps the variant colour. */
.td .td-btn.td-btn--added{background:var(--td-emer)!important;color:#fff!important;border:1px solid var(--td-emer)!important}
.td .td-btn.td-btn--syncing{cursor:progress}.td .td-btn.td-btn--syncing::after{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;animation:td-sync 1s ease-in-out infinite}
@keyframes td-sync{50%{opacity:.3}}@media (prefers-reduced-motion:reduce){.td .td-btn.td-btn--syncing::after{animation:none;opacity:.6}}
.td-btn--plus{background:#f7dfe9;color:#8a2450!important}
.td-file{position:relative;overflow:hidden}.td-file input{position:absolute;inset:0;opacity:0;cursor:pointer;padding:0;border:0;width:100%;height:100%}
.td-wrap{padding:20px;display:grid;gap:16px}
.td-card{background:var(--td-card);border:1px solid var(--td-line);border-radius:var(--td-r);padding:18px;box-shadow:0 1px 4px rgba(0,0,0,.05);min-width:0}
.td-card--hl{border:2px solid var(--td-primary);background:linear-gradient(180deg,#FFF4F8,#fff)}
.td-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.td-trio a{background:#fff;border:1px solid var(--td-line);border-radius:var(--td-r);padding:14px;display:flex;gap:11px;align-items:center;text-decoration:none;color:var(--td-ink)}
.td-trio a:hover{border-color:var(--td-primary)}.td-trio b{display:block;font-size:13.5px}.td-trio span span{font-size:12px;color:var(--td-mut)}
.td-tic{width:42px;height:42px;border-radius:11px;background:#e9f5e6;color:var(--td-emer);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.td-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.td-kpi .t{font-size:12px;color:var(--td-mut);text-transform:uppercase;letter-spacing:.5px}.td-kpi .v{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.td-bar{height:8px;background:#eee;border-radius:99px;overflow:hidden;margin:8px 0}.td-bar i{display:block;height:100%;background:var(--td-primary);transition:width .3s}
.td-bar--green i{background:var(--td-emer)}.td-bar--lg{height:12px}
.td-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.td-row>h2,.td-row>h3{margin:0}.td-row:has(>h2){margin-bottom:8px}.td-row:has(>h3){margin:12px 0 4px}
.td-perk{border:2px solid var(--td-primary);background:linear-gradient(180deg,#FFF3F7,#fff)}
.td-perk-badge{background:var(--td-primary);color:#fff;font-size:11px;font-weight:700;border-radius:99px;padding:4px 10px;letter-spacing:.4px}
.td-perk-steps{display:flex;gap:8px;flex-wrap:wrap;font-size:12px}.td-perk-steps span{border:1px solid var(--td-line);border-radius:99px;padding:3px 10px;background:#fff}.td-perk-steps span.hit{background:var(--td-emer);color:#fff;border-color:var(--td-emer)}
.td-tag{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:99px;background:#e9f5e6;color:var(--td-emer);white-space:nowrap}
.td-tag--warn{background:#fdf3dd;color:#8a5a17}.td-tag--bad{background:#fbe6e6;color:var(--td-clay)}.td-tag--info{background:#e3f2f5;color:#0f6f80}
.td-grid2{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:16px}
/* A wide table scrolls sideways inside its card at every width (the SKU picture preview is position:fixed, placed by the
   script, so the scroller never clips it); a sideways swipe at its end doesn't carry on to the page. 5 px of padding
   (taken back by the margin, so the table keeps its width and place) leave room for the focus ring of a control at
   the scroller's edge (the invoices CSV button on a phone), which the scroller would otherwise clip. */
.td-table-scroll{position:relative;overflow-x:auto;overscroll-behavior-x:contain;margin:6px -5px 10px;padding:0 5px}
.td-table-scroll>.td-table{margin:0} /* the table's spacing moves to its scroller (a scroll box doesn't collapse margins) */
.td-table{width:100%;border-collapse:collapse;font-size:13px;margin:6px 0 10px}
.td-table th{text-align:left;color:var(--td-mut);font-size:11px;text-transform:uppercase;letter-spacing:.5px;padding:8px;border-bottom:1px solid var(--td-line);font-weight:600}
.td-table th.num{text-align:right}
.td-table td{padding:9px 8px;border-bottom:1px solid #f2f2f2;vertical-align:middle}
.td-sku{position:relative;font-weight:700;color:var(--td-primary);white-space:nowrap}
/* SKU picture preview: fixed to the screen beside the SKU (left / top set by the script), shown on hover, while focus is
   in the product's row, or on a tap on the SKU; Esc, a tap elsewhere or moving away hides it. */
.td-prev{display:none;position:fixed;left:0;top:0;z-index:90;width:150px;background:#fff;border:1px solid var(--td-line);border-radius:10px;padding:6px;box-shadow:0 10px 26px rgba(0,0,0,.2)}
.td-sku.is-prev .td-prev{display:block}.td-prev img{width:138px;height:138px;object-fit:cover;border-radius:6px;display:block}
/* SKUs and product names wrap inside the order form rows, Pick lines, the most-ordered table and the catalogue, so a
   long SKU or title never pushes past the card (the catalogue's SKU column keeps 150 px, see "catalogue" below) */
.td :is(.td-pad-row,.td-ol-t,#td-forecast,#td-catalogue) .td-sku{white-space:normal;overflow-wrap:anywhere}
.td-pad-row>div:nth-child(2),.td #td-forecast .td-table td:first-child{min-width:0;overflow-wrap:anywhere}
.td-cat-thumb{width:40px;height:40px;border-radius:9px;object-fit:cover;vertical-align:middle;margin-right:9px;border:1px solid var(--td-line)}
.td-pad-head{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.td-pad-title{display:flex;gap:12px;align-items:center}.td-pad-title h2{margin:0}.td-pad-title p{margin:2px 0 0}
.td-pad-icon{width:46px;height:46px;border-radius:13px;background:#1a1a1a;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.td-pad-search{position:relative;margin-top:10px}.td-pad-search input{width:100%;min-height:46px}
.td-pad-results{position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--td-line);border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.14);z-index:70;overflow-y:auto;max-height:320px}
.td-pad-results.is-up{top:auto;bottom:calc(100% + 6px)} /* opens upward when there's no room above the cart bar (script) */
.td-hit{display:flex;gap:10px;align-items:center;width:100%;text-align:left;background:#fff;border:0;border-bottom:1px solid #f2f2f2;padding:8px 10px;cursor:pointer;min-height:54px;font:inherit;color:var(--td-ink)}
.td-hit:hover,.td-hit:focus{background:#faf3f6}.td-hit img{width:38px;height:38px;border-radius:8px;object-fit:cover;flex-shrink:0}
.td-hit .pm{font-size:12px;color:var(--td-mut)}.td-hit .pp{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}
.td-hit[disabled]{opacity:.5;cursor:not-allowed}
.td-pad-rows{display:grid;gap:6px;margin:10px 0}
.td-pad-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto auto;gap:12px;align-items:center;background:#fafafa;border:1px solid #efefef;border-radius:11px;padding:8px 10px}
.td-pad-row.err{border-color:var(--td-clay);background:#fff6f6}
.td-thumb{width:40px;height:40px;border-radius:10px;overflow:hidden;background:var(--td-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}
.td-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.td-pad-meta{font-size:12px;color:var(--td-mut);margin-top:2px}.td-pad-err{font-size:12px;color:var(--td-clay);margin-top:2px}
.td-qty{display:flex;align-items:center;gap:6px}
.td-qty button{width:40px;height:40px;flex-shrink:0;border-radius:50%;border:1px solid #ddd;background:#fff;font-size:17px;line-height:1;cursor:pointer;color:var(--td-ink)}
.td-qty button:hover{border-color:var(--td-primary);color:var(--td-primary)}
.td-qty input{width:68px;height:40px;text-align:center;border:1px solid #ddd;border-radius:10px;padding:0 8px;min-height:40px;font:inherit;font-variant-numeric:tabular-nums}
.td-ltotal{font-weight:700;font-variant-numeric:tabular-nums;text-align:right;min-width:78px}
.td-rm{border:0;background:transparent;color:var(--td-mut);cursor:pointer;font-size:12px;text-decoration:underline;padding:4px}
.td-pad-foot{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:#1a1a1a;color:#fff;border-radius:13px;padding:13px 15px}
.td-pmut{color:#c9c9c9;font-size:12px}.td-pv{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.td-pad-msg{background:#e9f5e6;color:#2c6b21;border-radius:10px;padding:10px 12px;font-weight:600;margin-top:10px}
.td-pad-msg.bad{background:#fbe6e6;color:#8e2a22}.td-pad-msg.warn{background:#fdf3dd;color:#6e4712}
.td-note{position:relative;margin-top:12px;border-radius:10px;padding:10px 44px 10px 12px;background:#e9f5e6;color:#2c6b21;font-size:13px;line-height:1.45;font-weight:500}
.td-note.warn{background:#fdf3dd;color:#6e4712;border:1px solid #efd6a2}
.td-note a{color:inherit;text-decoration:underline;font-weight:700}
.td .td-note-x{position:absolute;top:4px;right:4px;width:36px;height:36px;min-height:0;padding:0;margin:0;border:0;border-radius:8px;background:transparent;color:inherit;font:inherit;font-size:20px;line-height:1;cursor:pointer}
.td .td-note-x:hover{background:rgba(0,0,0,.07)}.td .td-note-x:focus-visible{outline:2px solid currentColor;outline-offset:1px}
.td-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.td label.td-btn{margin:0}
.td-paste{margin-top:10px;border:1px dashed var(--td-line);border-radius:10px;padding:8px 12px}
.td-paste summary{cursor:pointer;font-weight:600;min-height:40px;display:flex;align-items:center}
.td-paste textarea{width:100%;margin:6px 0 8px}
.td-setup{font-size:11.5px;color:var(--td-mut);border-top:1px dashed var(--td-line);margin-top:10px;padding-top:8px}
.td-fchart{display:flex;align-items:flex-end;gap:10px;height:140px;margin:10px 0 4px;padding:10px 10px 0;background:#fafafa;border:1px solid #f0f0f0;border-radius:10px}
.td-fcol{flex:1 1 0;min-width:0;text-align:center;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
@media (max-width:359px){.td-fchart{gap:6px;padding:10px 6px 0}}
.td-fcol .fv{font-size:11px;font-weight:700}.td-fcol .fb{border-radius:6px 6px 0 0;background:#1a1a1a;min-height:4px}
.td-fcol .fb.cur{background:var(--td-primary)}.td-fcol .fb.fc{background:repeating-linear-gradient(45deg,var(--td-primary),var(--td-primary) 6px,#d98aa5 6px,#d98aa5 12px)}
.td-fcol .fl{font-size:11px;color:var(--td-mut);padding:4px 0}
.td-trow{padding:10px 0;border-bottom:1px solid #f4f4f4}.td-trow:last-child{border-bottom:0}
.td-trow .t1{display:flex;justify-content:space-between;align-items:center;gap:8px}
.td-trow .meta{font-size:12.5px;color:var(--td-mut);margin-top:4px;overflow-wrap:anywhere}
.td-trow .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;align-items:center}
.td-link{border:0;background:none;color:var(--td-primary);cursor:pointer;font-size:12.5px;text-decoration:underline;padding:6px 4px;font:inherit}
.td-addr{display:flex;gap:10px;background:#fff;border:1px solid var(--td-line);border-radius:11px;padding:10px 12px;margin:8px 0;align-items:flex-start}
.td-addr .td-btn{margin-top:6px}
.td-pin{width:34px;height:34px;min-width:34px;border-radius:10px;background:#f6e3ec;color:var(--td-primary);display:flex;align-items:center;justify-content:center}
.td-credit{margin-top:10px;border-top:1px dashed var(--td-line);padding-top:10px}
.td-toast{position:fixed;bottom:84px;left:50%;transform:translateX(-50%);background:#1a1a1a;color:#fff;padding:12px 18px;border-radius:10px;display:none;z-index:1000;max-width:90vw}
.td-toast.show{display:block}
.td-mobnav{display:none}
.td input:focus-visible,.td button:focus-visible,.td a:focus-visible,.td select:focus-visible{outline:3px solid var(--td-primary);outline-offset:2px}
@media (max-width:1100px){.td-kpis{grid-template-columns:1fr 1fr}}
@media (max-width:900px){
  .td-app{grid-template-columns:1fr}.td-side{display:none}.td-side:target{display:block}.td-trio,.td-grid2{grid-template-columns:1fr}
  .td-wrap{padding:14px}.td-top{padding:10px 12px}
  .td-mobnav{display:block;padding:8px 14px 0}
}
/* NV (round 5): the Menu of phones and tablets (900 px and narrower, no sidebar) and its bottom sheet, a modal dialog
   with a copy of the sidebar (trade-dashboard.js bindMenu): the options as tiles, two a row where they fit, headings
   across, the sidebar's highlight (Dashboard) dark as there, Log out on its own line, the rep box last. .td .td-sheet beats
   the sidebar's own rules whatever their order. The page behind doesn't scroll while it is open. */
.td .td-mobnav-btn{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;min-height:var(--td-ctl);padding:6px 14px;background:#fff;border:1px solid var(--td-line);border-radius:12px;color:var(--td-ink);font-size:14px;font-weight:700;line-height:1.3;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.td .td-mobnav-btn:active{background:#f6eef2} /* its own tap feedback: the browser's flash would show on the sheet */
.td .td-mobnav-all{margin-left:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--td-mut);font-size:13px;font-weight:400}
@media (hover:hover){.td .td-mobnav-btn:hover{border-color:var(--td-primary);color:var(--td-primary)}.td .td-sheet-x:hover{background:#f4eef1;color:var(--td-primary)}}
.td .td-sheet{position:fixed;inset:auto 0 0;width:100%;max-width:640px;max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);margin:0 auto;padding:0;border:0;border-radius:18px 18px 0 0;background:#fff;color:var(--td-ink);box-shadow:0 -10px 40px rgba(0,0,0,.25);overflow:hidden}
.td .td-sheet[open]{display:flex;flex-direction:column;animation:td-sheet-in .24s cubic-bezier(.2,.8,.2,1)}
.td .td-sheet::backdrop{background:rgba(18,11,15,.55)}
@keyframes td-sheet-in{from{transform:translateY(100%)}}
.td-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 6px 6px var(--td-gutter);border-bottom:1px solid var(--td-line)}
.td .td-sheet-head h2{margin:0;font-size:17px}
.td .td-sheet-head form{margin:0}
.td .td-sheet-x{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;color:#444;cursor:pointer}
.td-sheet-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:4px var(--td-gutter) calc(16px + env(safe-area-inset-bottom,0px))}
.td .td-sheet .td-nav{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:8px}
.td .td-sheet .td-navsec{grid-column:1/-1;padding:10px 2px 0}
.td .td-sheet .td-nav a{min-height:48px;padding:10px 12px;border:1px solid var(--td-line);border-radius:12px;background:#fff;color:var(--td-ink);font-size:14px;line-height:1.3}
.td .td-sheet .td-nav a.on{background:#1a1a1a;border-color:#1a1a1a;color:#fff}
.td .td-sheet .td-nav a[href="#td-top"],.td .td-sheet .td-logout{grid-column:1/-1}
.td .td-sheet .td-nav a.td-logout{justify-content:center;margin-top:8px;color:var(--td-primary);font-weight:700}
.td .td-sheet .td-rep{margin-top:16px}
html:has(.td .td-sheet[open]){overflow:hidden;scrollbar-gutter:stable}
@media (prefers-reduced-motion:reduce){.td .td-sheet[open]{animation:none}}
@media (max-width:600px){.td-kpis{grid-template-columns:1fr}.td-pad-row{grid-template-columns:40px minmax(0,1fr)}.td-qty,.td-ltotal{grid-column:2}.td-ltotal{text-align:left}}
.td-nowrap{white-space:nowrap}
/* Table pager (order history, catalogue): one block, laid out by its own width.
   <440px:  "Showing…" / Previous + Next / page numbers / Show n per page / Go to page, each on its own line.
   440px+:  "Showing…" / Previous · numbers · Next / Show n per page (left) + Go to page (right).
   640px+:  "Showing…" (left) + Previous · numbers · Next (right) / tools row as above.
   Every control is --td-pager-h tall (the dashboard's small button: 36px, 44px on touch) and centred on its row;
   the numbers keep a fixed slot on wide cards so Previous / Next never move while paging. */
.td-pager{container-type:inline-size;margin-top:4px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;--td-pager-h:36px;--td-pager-w:36px}
@media (pointer:coarse){.td-pager{--td-pager-h:44px;--td-pager-w:44px}}
.td .td-pager-info{flex:1 1 100%;min-width:0;margin:0;font-size:12.5px;line-height:1.5;color:var(--td-mut);font-variant-numeric:tabular-nums}
.td-pager-nav{flex:1 1 100%;min-width:0;display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"prev next" "nums nums";gap:8px;align-items:center}
.td-pager-prev{grid-area:prev;justify-self:start}.td-pager-next{grid-area:next;justify-self:end}
.td-pager-nums{grid-area:nums;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px}
.td .td-pager .td-btn{height:var(--td-pager-h);min-height:var(--td-pager-h);white-space:nowrap}
.td .td-pager-num{min-width:var(--td-pager-w);padding:0 8px;border:1px solid var(--td-primary);border-radius:99px;font-variant-numeric:tabular-nums}
/* Previous / Next at the ends: same outline shape as their neighbours, greyed (still focusable, aria-disabled) */
.td .td-pager .td-btn[aria-disabled="true"]{background:#fff!important;color:var(--td-mut)!important;border-color:#d6d6d6!important}
.td-pager-gap{min-width:14px;text-align:center;color:var(--td-mut);line-height:1}
.td .td-table:focus-visible{outline:3px solid var(--td-primary);outline-offset:2px}
.td .td-table-scroll>.td-table:focus-visible{outline-offset:-3px} /* inside its sideways scroller: an inset ring the scroller can't clip */
@container (min-width:440px){.td-pager-nav{grid-template-columns:auto 1fr auto;grid-template-areas:"prev nums next"}}
@container (min-width:640px){
  .td .td-pager-info{flex:1 1 0}
  .td-pager-nav{flex:0 0 auto}
  .td-pager-nums{min-width:calc(5 * var(--td-pager-w) + 28px + 36px)} /* 1 … 4 5 6 … 20: five numbers, two gaps */
}
.td-tabs{display:flex;gap:4px;border-bottom:2px solid var(--td-line);margin:6px 0 10px;flex-wrap:wrap}
.td-tab{border:0;background:none;font:inherit;font-weight:600;font-size:13.5px;color:var(--td-mut);padding:10px 13px;cursor:pointer;min-height:44px;border-bottom:3px solid transparent;margin-bottom:-2px}
.td-tab.on{color:var(--td-primary);border-color:var(--td-primary)}
.td-acct-status{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px}
.td-acct-status[hidden]{display:none}
.td-form{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:10px 0;background:#fff;border:1px dashed var(--td-line);border-radius:12px;padding:12px}
.td-form--grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.td .td-form select{max-width:100%}
.td-field{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--td-mut)}
.td-field input,.td-field select{font:inherit;border:1px solid #ddd;color:var(--td-ink);width:100%}
.td-field input{padding:9px 11px;border-radius:10px;background:#fff;min-height:40px}
.td-field--wide{grid-column:1/-1}
.td-check{display:flex;gap:8px;align-items:center;font-size:13px}
.td-form-actions{display:flex;gap:8px;align-items:center}
/* label + value, and its link or button on the right; a long value (an email) wraps, and the link drops under it when
   both don't fit on one line */
.td-kv{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 10px;padding:10px 0;border-bottom:1px solid #f4f4f4}
.td-kv>div{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.td-kv>:not(div){flex:none}
.td-grow{flex:1;min-width:0}
.td-acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.td-link--bad{color:var(--td-clay)}
.td-small{font-size:12px}
.td-h3{font-size:15px;margin:12px 0 4px}
.td-sites-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0}
.td-subaddr{background:#fafafa;border:1px solid #efefef;border-radius:10px;padding:8px 10px;font-size:13px}
.td-detail{background:#fafafa;border-radius:10px;padding:12px}
.td-detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;font-size:13px;overflow-wrap:anywhere}
.td-qty-in{width:70px;text-align:center;padding:6px;border:1px solid #ddd;border-radius:8px}
@media (max-width:700px){.td-form--grid,.td-sites-grid,.td-detail-grid{grid-template-columns:1fr}}
.td-builder{border:1px dashed var(--td-primary);border-radius:12px;padding:12px;margin:10px 0;background:#fffafc;display:grid;gap:10px}
.td-chips{display:flex;gap:6px;flex-wrap:wrap}
.td-chip{border:1px solid #ddd;background:#fff;border-radius:99px;padding:7px 12px;font:inherit;font-size:13px;cursor:pointer;min-height:36px;color:var(--td-ink)}
.td-chip.on{background:var(--td-primary);border-color:var(--td-primary);color:#fff;font-weight:600}
.td-b-sugg-list{display:grid;gap:6px;max-height:340px;overflow-y:auto;margin-top:6px}
.td-sugg{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid #efefef;border-radius:10px;padding:6px 8px}
.td-sugg img{width:44px;height:44px;border-radius:8px;object-fit:cover;flex-shrink:0}
.td-sugg-t{font-size:13px;font-weight:600}
.td-sugg select{font:inherit;font-size:12.5px;border:1px solid #ddd;margin-top:3px}
.td-b-foot{border-top:1px solid var(--td-line);padding-top:10px}
.td-builder{grid-template-columns:minmax(0,1fr);min-width:0}
.td-builder>*{min-width:0}
.td-b-sugg-list{overflow-x:hidden}
.td-sugg .td-grow{min-width:0}
.td-sugg-t{overflow-wrap:anywhere}
.td-sugg select{width:100%}
/* Help: eye button + tooltip. Hover (mouse) or keyboard focus opens it; tap on touch screens (JS).
   It sits above the card, so it never covers the section it explains. */
.td-card{position:relative}
.td-card:has(>.td-help)>h2,.td-card:has(>.td-help)>.td-row,.td-card:has(>.td-help)>.td-pad-head,.td-card:has(>.td-help)>.t{padding-right:36px}
.td-help{position:absolute;top:10px;right:10px;z-index:30}
.td-help-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;padding:0;border:1px solid var(--td-line);border-radius:99px;background:#fff;color:var(--td-mut);cursor:help;transition:color .16s ease-out,background-color .16s ease-out,border-color .16s ease-out,box-shadow .16s ease-out}
.td-help-btn:focus-visible{outline:2px solid var(--td-primary);outline-offset:2px}
.td-help.is-open .td-help-btn,.td-help:has(.td-help-btn:focus-visible) .td-help-btn{color:var(--td-primary);border-color:#e7b9cb;background:#fdf1f5;box-shadow:0 0 0 4px rgba(167,58,100,.12)}
.td-tip{position:absolute;right:calc(-4px - var(--td-tip-dx,0px));bottom:calc(100% + 10px);width:max-content;max-width:min(340px,calc(100vw - 32px));padding:9px 12px;border-radius:10px;background:#1a1a1a;color:#fff;border:1px solid rgba(255,255,255,.06);box-shadow:0 1px 2px rgba(0,0,0,.18),0 14px 30px -10px rgba(0,0,0,.4);font-size:13px;line-height:1.45;font-weight:500;letter-spacing:.1px;text-align:left;white-space:normal;opacity:0;visibility:hidden;transform:translateY(4px) scale(.98);transform-origin:calc(100% - 20px) 100%;transition:opacity .1s ease-in .12s,transform .1s ease-in .12s,visibility 0s linear .22s}
.td-tip::after{content:"";position:absolute;right:calc(15px + var(--td-tip-dx,0px));top:100%;width:10px;height:10px;background:#1a1a1a;border-radius:0 0 2px 0;transform:translateY(-5px) rotate(45deg)}
.td-tip::before{content:"";position:absolute;left:0;right:0;top:100%;height:14px}
.td-tip-k{display:inline-block;padding:0 6px;margin:0 1px;border-radius:6px;background:rgba(255,255,255,.14);font-weight:600;white-space:nowrap}
.td-help.is-open .td-tip,.td-help:has(.td-help-btn:focus-visible) .td-tip{opacity:1;visibility:visible;transform:none;transition:opacity .16s ease-out,transform .16s ease-out,visibility 0s}
@media (hover:hover){
  .td-help:hover .td-help-btn{color:var(--td-primary);border-color:#e7b9cb;background:#fdf1f5;box-shadow:0 0 0 4px rgba(167,58,100,.12)}
  .td-help:hover .td-tip{opacity:1;visibility:visible;transform:none;transition:opacity .16s ease-out .12s,transform .16s ease-out .12s,visibility 0s linear .12s}
}
.td-help.is-dismissed .td-tip{opacity:0!important;visibility:hidden!important;transition:none!important}
.td-help.is-below .td-tip{bottom:auto;top:calc(100% + 10px);transform-origin:calc(100% - 20px) 0}
.td-help.is-below .td-tip::after{top:auto;bottom:100%;border-radius:2px 0 0 0;transform:translateY(5px) rotate(45deg)}
.td-help.is-below .td-tip::before{top:auto;bottom:100%}
@media (prefers-reduced-motion:reduce){.td-tip,.td-help .td-tip{transform:none!important;transition-property:opacity,visibility!important}}

/* catalogue (buyer's own volume prices) */
.td-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.td-cat td{vertical-align:middle}
.td-cat-sku{display:flex;align-items:center;gap:10px}
.td-cat-sku .td-cat-thumb{margin-right:0;flex:0 0 40px;background:#fff}
.td-cat-thumb--none{display:inline-block;background:#f3f3f3}
.td .td-cat-name{display:block;margin-top:5px;font-size:13px;text-decoration:none}
.td .td-cat-name:hover{text-decoration:underline}
.td-cat .td-btn{min-width:78px}
/* catalogue quantity stepper: [− qty +] [Add] as one tight unit, the tier line under it. `all:unset` + explicit values
   keep the theme's base.css (display:block inputs, margins, padding, square borders) out. */
.td-cat-act{white-space:nowrap;width:1%}
.td-qs{display:inline-grid;vertical-align:middle;text-align:left}
.td-qs-row{display:flex;align-items:stretch;gap:6px}
.td-qs-ctl{display:flex;align-items:stretch;height:36px;border:1px solid #cfcfcf;border-radius:10px;background:#fff;transition:border-color .12s ease-out,box-shadow .12s ease-out}
.td-qs-ctl:has(.td-qs-in:focus){border-color:var(--td-primary);box-shadow:0 0 0 3px rgba(167,58,100,.18)}
.td .td-qs .td-qs-b{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:30px;margin:0;padding:0;border-radius:9px;line-height:1;color:var(--td-ink);cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.td .td-qs .td-qs-b svg{display:block;width:14px;height:14px;margin:0;pointer-events:none}
@media (hover:hover){.td-qs-ctl:hover{border-color:#a9a9a9}.td .td-qs .td-qs-b:not([aria-disabled="true"]):hover{background:#f7eef2;color:var(--td-primary)}}
.td .td-qs .td-qs-b:focus-visible{outline:2px solid var(--td-primary);outline-offset:-2px}
.td .td-qs .td-qs-b[aria-disabled="true"]{color:#c4c4c4;background:none;cursor:not-allowed}
.td .td-qs .td-qs-in{all:unset;box-sizing:border-box;display:block;width:42px;height:100%;min-height:0;max-width:none;margin:0;padding:0 2px;border:0;border-radius:0;background:transparent;font-family:inherit;font-size:14px;font-weight:700;line-height:normal;letter-spacing:0;color:var(--td-ink);text-align:center;font-variant-numeric:tabular-nums;cursor:text}
.td .td-qs .td-qs-in:focus,.td .td-qs .td-qs-in:focus-visible{outline:none;border:0;box-shadow:none}
.td .td-qs .td-qs-add{min-width:84px;height:36px;min-height:36px;margin:0;padding:0 12px;border-radius:10px} /* fits "Added ✓", so the unit doesn't jump */
.td-qs-info{font-size:12px;line-height:1.35;color:var(--td-mut);white-space:normal} /* wraps between its parts, under the stepper */
.td-qs-info:not(:empty){margin-top:5px}
.td-qs-info b{color:var(--td-ink);font-weight:700}
.td-qs-seg{white-space:nowrap}
.td .td-qs-dot{color:#767676;font-style:normal}
.td .td-qs-off{color:var(--td-emer);font-weight:700}
.td .td-qs-nx{color:#8a2450;font-weight:600}
.td .td-qs-best{color:var(--td-emer);font-weight:600}
.td .td-qs-hint{background:#fdf3dd;color:#8a5a17;font-weight:600;border-radius:6px;padding:0 5px}
.td .td-off{display:block;font-size:12px;font-weight:700;line-height:1.2;color:var(--td-emer)}
.td .td-cat-legend{margin:-4px 0 8px;font-size:12px;color:var(--td-mut)}
@media (pointer:coarse){
  .td-qs-ctl{height:46px}
  .td .td-qs .td-qs-b{width:44px}
  .td .td-qs .td-qs-in{width:46px;font-size:16px}
  .td .td-qs .td-qs-add{height:46px;min-height:46px}
}
/* B1: on tablets and desktops the quantity and Add (the main buying action) stay inside the card, with no sideways
   scroll. The SKU column wraps (150 px at least), so the table can take the card's width; when it is still wider, the
   script (catFit) moves Add under the stepper, both as wide as the column (is-stack), and only when that isn't enough
   either folds the volume-price columns away (is-fold; the line under the stepper still gives the next price,
   "+50 for £5.60 each"). Measured, not a breakpoint, because SKUs, prices, the number of price columns and the buyer's
   fonts all change what fits. Never container-type on this card: it would become the containing block of the
   position:fixed SKU picture. */
.td #td-catalogue .td-cat td:first-child{min-width:150px;overflow-wrap:anywhere}
.td .td-cat.is-stack .td-qs-row{flex-wrap:wrap}
.td .td-cat.is-stack .td-qs-ctl{flex:1 0 auto}
.td .td-cat.is-stack .td-qs .td-qs-in{flex:1 0 auto}
.td .td-cat.is-stack .td-qs .td-qs-add{flex:1 0 100%}
.td .td-cat.is-fold :is(th.num ~ th.num,td.num ~ td.num){display:none}
/* S5: phones (and any width where even the folded table is too wide: is-cards, the script's last step): a card per
   product, in the row's order: SKU and name; MOQ / step, labelled (when the product has a rule); stock, with the price
   on the right; the stepper and a wide Add; the price line under them (it still gives the next price). The sortable
   headers stay on show as a row of sort buttons; the others stay for screen readers only. No container-type here
   either (the fixed SKU picture). */
.td .td-cat.is-cards,.td .td-cat.is-cards :is(thead,tbody){display:block}
.td .td-cat.is-cards thead tr{display:flex;flex-wrap:wrap;gap:0 18px;border-bottom:1px solid var(--td-line)}
.td .td-cat.is-cards thead th{display:block;padding:8px 0;border:0}
.td .td-cat.is-cards thead th:not(:has(.td-sort)),.td .td-cat.is-cards thead:not(:has(.td-sort)){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.td .td-cat.is-cards tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:8px 12px;padding:12px 0;border-bottom:1px solid #f2f2f2} /* the stock tag's and the price's text on one baseline */
.td .td-cat.is-cards tbody td{display:block;width:auto;min-width:0;padding:0;border:0}
.td .td-cat.is-cards tbody td:is(:first-child,.td-cat-rule,.td-cat-act,[colspan]){grid-column:1/-1}
.td .td-cat.is-cards tbody td.td-cat-rule::before{content:attr(data-label) " ";color:var(--td-mut);font-size:12px}
.td .td-cat.is-cards tbody td:is(.td-cat-rule:not([data-label]),.td-cat-act:empty),.td .td-cat.is-cards :is(th.num ~ th.num,td.num ~ td.num){display:none}
.td .td-cat.is-cards .td-qs{display:grid}
.td .td-cat.is-cards .td-qs .td-qs-add{flex:1 1 auto}
/* Order history rows stack on cards narrower than the four-column table needs (640 px: phones, tablets in landscape
   and the desktop card beside saved carts). Each order is a block: the order line, then status and total, then the
   actions; from 440 px status, total and actions share one row, the actions wrapping on the right. */
#td-orders{container-type:inline-size}
@container (max-width:639px){
  #td-orders .td-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  #td-orders .td-table tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"ord ord" "st tot" "act act";align-items:start;gap:8px 10px;padding:12px 0;border-bottom:1px solid var(--td-line)}
  #td-orders .td-table tbody td{display:block;min-width:0;padding:0;border:0}
  #td-orders .td-table tbody td:nth-child(1){grid-area:ord;overflow-wrap:anywhere}
  #td-orders .td-table tbody td:nth-child(2){grid-area:st;align-self:center}
  #td-orders .td-table tbody td:nth-child(3){grid-area:tot;align-self:center;text-align:right}
  #td-orders .td-table tbody td:nth-child(4){grid-area:act;display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;text-align:left}
  #td-orders .td-table tbody td[colspan]{grid-column:1/-1;display:block}
}
@container (min-width:440px) and (max-width:639px){
  /* the sortable Order and Total headers stay on show: Order over the left edge, Total over the totals (the status
     column is 128 px or wider in every row, so the totals line up under it) */
  #td-orders .td-table thead{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  #td-orders .td-table :is(thead,tbody) tr{grid-template-columns:minmax(128px,max-content) auto minmax(0,1fr)}
  #td-orders .td-table thead tr{display:grid;column-gap:10px;border-bottom:1px solid var(--td-line)}
  #td-orders .td-table thead th{padding:8px 0;border:0}
  #td-orders .td-table thead th:is(:nth-child(2),:nth-child(4)){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  #td-orders .td-table thead th:nth-child(3){text-align:left}
  #td-orders .td-table tbody tr{grid-template-areas:"ord ord ord" "st tot act"}
  #td-orders .td-table tbody td:nth-child(3){text-align:left}
  #td-orders .td-table tbody td:nth-child(4){align-self:center;justify-content:flex-end;text-align:right}
}
/* Order column: the date stays on one line, a long order number wraps. Actions: Buy again and Pick lines sit side by
   side while they fit and wrap rather than widen the table; a connected account's "Details, tracking & returns" goes
   on a line of its own (wrapping too) */
.td-ord-h{overflow-wrap:anywhere}
#td-orders .td-ord-acts>.td-nowrap{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 14px;white-space:normal;vertical-align:middle}
#td-orders .td-ord-acts :is(.td-btn,.td-link){white-space:nowrap}
#td-orders .td-ord-acts [data-td-order-details]{white-space:normal}
.td-ord-acts .td-link{text-align:inherit}
@container (min-width:640px){#td-orders .td-ord-acts{width:196px}#td-orders .td-ord-acts [data-td-order-details]{display:block}} /* Buy again + Pick lines side by side */
@container (max-width:639px){#td-orders .td-ord-acts>[data-td-order-details]{margin-inline-start:-4px}} /* stacked: its text starts at Buy again's edge (the link's 4 px padding, review N3) */
#td-catalogue .td-pager + .td-btn{margin-top:12px}
/* table toolbars (search / filters / export) */
.td-tbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0 8px}
.td .td-tbar .td-tbar-q{min-height:40px;padding:8px 10px;border:1px solid #ddd;border-radius:10px;background:#fff;font:inherit;line-height:1.5;color:var(--td-ink);margin:0;display:inline-block;width:auto;max-width:100%}
.td .td-tbar .td-tbar-q{flex:1 1 220px;min-width:0}
.td-tbar-end{margin-left:auto}
/* sortable headers (W3C APG sortable table: aria-sort on the sorted column only) */
.td .td-sort{all:unset;cursor:pointer;font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;display:inline-flex;align-items:center;gap:4px;border-radius:4px}
.td .td-sort:focus-visible{outline:2px solid var(--td-primary);outline-offset:2px}
.td .td-sort::after{content:"↕";opacity:.35;font-size:10px}
.td th[aria-sort="ascending"] .td-sort::after{content:"↑";opacity:1}
.td th[aria-sort="descending"] .td-sort::after{content:"↓";opacity:1}
.td th[aria-sort] .td-sort{color:var(--td-ink)}
/* pager tools. Narrow: "Show n per page", then "Go to page [ ] of N [Go]" under it, both left-aligned.
   440px+: one row, per page on the left, go to page on the right. Top-aligned, so the go-to error line under the form
   never moves the per-page select, and the error adds no width (contain), so the form never jumps to another line. */
.td-pager-tools{flex:1 1 100%;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);justify-items:start;align-items:start;gap:10px;margin:0;font-size:13px}
.td .td-pager-size{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.td .td-pager-tools select{min-width:64px;border-color:#bbb}
.td-pager-goto{justify-self:stretch;display:grid;grid-template-columns:auto auto auto auto 1fr;align-items:center;gap:4px 8px;margin:0}
.td-pager-goto[hidden]{display:none}
.td .td-pager-goto label{white-space:nowrap}
.td .td-pager-goto input{width:4.2em;height:var(--td-pager-h);min-height:0;padding:0 8px;border:1px solid #bbb;border-radius:10px;text-align:center;font:inherit;line-height:normal;background:#fff;color:var(--td-ink)}
.td .td-pager-goto input[aria-invalid="true"]{border-color:var(--td-clay);box-shadow:0 0 0 1px var(--td-clay)}
.td-pager-of{color:var(--td-mut);white-space:nowrap;font-variant-numeric:tabular-nums}
.td .td-pager-err{grid-column:1/-1;contain:inline-size;margin:0;color:var(--td-clay);font-weight:600;font-size:12.5px;line-height:1.4}
@container (min-width:440px){
  .td-pager-tools{display:flex;justify-content:space-between;align-items:flex-start;gap:10px 16px}
  .td-pager-goto{flex:1 1 auto;grid-template-columns:1fr auto auto auto auto} /* content on the right; the error line can use the free space */
  .td .td-pager-goto>label{grid-column:2}
  .td .td-pager-err{text-align:right}
}
.td .td-btn[aria-disabled="true"]{background:#e9e9e9!important;color:#595959!important;border-color:#e9e9e9!important;cursor:not-allowed}
.td-pager-nav[hidden]{display:none}
/* order lines (Pick lines) */
.td-ol-row td{background:#fafafa}
.td-ol-list{display:grid;gap:6px}
.td-ol{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:6px 0;border-bottom:1px dashed var(--td-line)}
.td-ol:last-child{border-bottom:0}
.td-ol-t{min-width:0;overflow-wrap:anywhere}
.td-ol-q{font-variant-numeric:tabular-nums;color:var(--td-mut);font-size:12.5px;white-space:nowrap}
.td .td-pager-size,.td .td-pager-goto label{font-size:13px;line-height:1.5;margin:0;font-weight:400;color:var(--td-ink)}
/* "Show n" under a product list (TD.showMenu, round 4: deals, For you, the ranked list): the pagers' select. */
.td .td-show select{min-width:64px;border-color:#bbb}
/* One look for every dashboard select (round 5: the browser's own arrow sat tight against the right edge of a tall box
   and differed by system and theme). appearance:none and the dashboard's own 12 px chevron in the brand ink, 12 px in
   from the right edge and centred, with 32 px of padding kept clear for it, so the text stops before it. The text fields'
   border, corners and height (--td-ctl: 40 px, 44 px and 16 px text on touch screens). Width: as wide as the longest
   option (the reset's width:auto) unless a rule widens it (form fields). Every longhand is set here, so a theme's select
   rule (its arrow, padding, size) can't show through. Windows high contrast gets the native arrow back: the picture's
   fixed colour could vanish against a system background. */
.td select{-webkit-appearance:none;appearance:none;height:var(--td-ctl);min-height:0;max-width:100%;padding:0 32px 0 11px;border-radius:10px;line-height:normal;cursor:pointer;background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.25l4 4 4-4' fill='none' stroke='%231a1a1a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;background-size:12px 12px}
.td select:hover:not(:disabled){border-color:#8a8a8a}
.td select:disabled{background-color:#f3f3f3;color:var(--td-mut);cursor:not-allowed}
@media (forced-colors:active){.td select{-webkit-appearance:auto;appearance:auto;background-image:none}}
.td .td-fc-show{margin-top:10px}
/* pad + saved carts: undo toast, stock hint, inline name field */
.td-toast-undo{font:inherit;font-weight:700;color:#fff;background:transparent;border:1px solid #fff;border-radius:8px;padding:4px 12px;min-height:32px;margin-left:10px;cursor:pointer}
.td-toast-undo:hover{background:#fff;color:#1a1a1a}
.td .td-toast-undo:focus-visible{outline:3px solid #fff;outline-offset:2px}
.td-pad-hint{font-size:12px;font-weight:600;color:#8a5a17;margin-top:2px}
.td-namer{display:grid;gap:8px;margin-top:10px;padding:10px 12px;border:1px dashed var(--td-primary);border-radius:12px;background:#fffafc;max-width:440px;min-width:0}
.td-namer-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.td .td-namer-err{margin:0;color:var(--td-clay);font-weight:600;font-size:12.5px}
.td .td-namer input[aria-invalid="true"]{border-color:var(--td-clay);box-shadow:0 0 0 1px var(--td-clay)}
/* In-page links (#td-orders, #td-invoices…) land below the always-sticky theme header. header2.js keeps --header-height on <html>. */
.td [id^="td-"]{scroll-margin-top:calc(var(--header-height, 128px) + 12px)}
/* Smallest dashboard text is 12 px. */
.td .td-navsec,.td .td-badge,.td .td-perk-badge,.td .td-tag,.td .td-table th,.td .td-setup,.td .td-fcol .fv,.td .td-fcol .fl{font-size:12px}
/* Text links and link-style buttons are at least 24 px tall to tap (WCAG 2.5.8), 44 px on touch screens.
   Links inside text get the height as padding with a matching negative margin, so the lines around them don't move. */
.td :is(td,.td-note,.td-pad-msg,.td-detail,.td-setup,.td-acct-status) a:not(.td-btn):not(.td-cat-name){display:inline-block;min-width:24px;padding-block:3px;margin-block:-3px}
.td .td-rep a:not(.td-btn){display:inline-block;min-width:24px;padding-block:3px}
.td .td-cat-name{padding-block:3px;margin:2px 0 -3px}
.td .td-link,.td .td-rm{min-height:24px;min-width:24px}
.td .td-sort{padding-block:3px;margin-block:-3px}
.td .td-check{min-height:24px}
@media (pointer:coarse){
  .td :is(td,.td-note,.td-pad-msg,.td-detail) a:not(.td-btn):not(.td-cat-name),.td .td-rep a:not(.td-btn),.td .td-link,.td .td-rm{display:inline-flex;align-items:center;min-height:44px}
  .td .td-cat-name{display:flex;align-items:center;min-height:44px;margin:0}
  .td .td-sort{min-height:44px;margin-block:-13px}
}
/* Wishlist Plus (Swym) adds heart buttons (button.swym-button.swym-add-to-wishlist-view-product[data-swaction]) next to
   product links. They don't belong in the dashboard's tables. Our own elements all carry td- classes, so they stay. */
.td :is(a,button,div,span,i,svg,img,form)[class*="swym"]:not([class*="td-"]),.td [id^="swym"],.td [data-swaction]:not([class*="td-"]){display:none!important}
/* Buying for: a switcher when the company has 2+ locations, plain text when it has one */
.td-loc{display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:100%;font-size:13px}
.td .td-loc-k{color:var(--td-mut);font-size:13px;font-weight:400;white-space:nowrap}
.td .td-loc select{max-width:min(340px,60vw);font-weight:600;text-overflow:ellipsis} /* a long company and site name ends in "…", not mid-word; the full name is its title */
.td-loc--one{color:var(--td-ink);font-weight:600;gap:6px}
/* Free delivery: cart total of threshold */
.td-kpi .v .td-kpi-of{font-size:14px;font-weight:600;color:var(--td-mut)}
/* Full statement (date range) */
.td-stmt{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:flex-end;margin-top:10px;padding:12px;border:1px dashed var(--td-line);border-radius:12px;background:#fff}
.td .td-stmt input[aria-invalid="true"]{border-color:var(--td-clay);box-shadow:0 0 0 1px var(--td-clay)}
.td .td-stmt-err{flex-basis:100%;margin:0;color:var(--td-clay);font-weight:600;font-size:13px}
.td .td-stmt .td-stmt-note{flex-basis:100%;margin:0;padding-top:0;border-top:0}
/* Personal account (login not linked to a trade company): note under the greeting, catalogue empty state */
.td-join{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;border-left:4px solid var(--td-primary);padding:14px 18px}
.td-join-txt{flex:1 1 280px;min-width:0}
.td .td-join h2{font-size:16px;margin:0 0 4px}
.td .td-join p{margin:0}
.td-join-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.td-cat-empty{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:4px;padding:14px;border:1px dashed var(--td-line);border-radius:12px;background:#fafafa}
.td .td-cat-empty p{flex:1 1 220px;min-width:0;margin:0;font-weight:600}
.td-cat--none>:is(.td-help,.td-cat-intro,.td-tbar,.td-table-scroll,.td-cat-legend,.td-pager){display:none}
.td .td-actions:empty{display:none}
/* Floating checkout button (SPEC-ROUND2.md UX 3, SPEC-ROUND3.md UX3; round 5: collapsed by default, docked at the
   bottom), while the cart has items, under the toast and the theme's own drawers (the dashboard is its own stacking context).
   - Collapsed, the default (the toggle opens it, and this browser remembers which): a pill, cart icon with the count
     badge, the total and a chevron, in the bottom right corner. Open: the count and total, Your cart (secondary),
     Checkout (primary) and the chevron, on one row. The toggle is the same button in both states.
   - 768 px and wider: the corner, 24 px in. Phones, either way up: 8 px from the bottom and right edges, above the home
     indicator (safe areas), so it covers only the bottom strip of the screen; in portrait the open bar runs along the
     bottom, from 8 px in on the left to 8 px from the right.
   - A chat launcher (Shopify Inbox: fixed in a bottom corner, over everything) is measured by the script, which sets
     --td-cb-l (the open bar starts 8 px after a launcher in the bottom left corner), --td-cb-r (the bar keeps 8 px left of
     one in the bottom right corner) and --td-cb-b (the open bar goes above the launcher when even its tight form can't fit
     beside it); unset, the plain insets apply.
   - Ink (the store header's black) with the brand's magenta for Checkout and the badge, capsule shapes, a soft shadow.
   - Motion: transform and opacity only, 180 ms in (open) and 160 ms (pill), easing out; the badge bumps when the count
     changes (script); none with reduced motion.
   The JS makes room for it at the bottom of the page and sets --td-cartbar-h / --td-cartbar-b, so a toast sits above it. */
.td-cartbar{position:fixed;z-index:900;right:var(--td-cb-r,calc(24px + env(safe-area-inset-right,0px)));bottom:var(--td-cb-b,calc(24px + env(safe-area-inset-bottom,0px)));display:flex;align-items:center;gap:8px;max-width:calc(100vw - 48px);padding:6px;background:var(--td-ink);color:#fff;border:1px solid rgba(255,255,255,.12);border-radius:99px;box-shadow:0 14px 30px -12px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.18);transform-origin:100% 100%;animation:td-cartbar-in .18s ease-out}
.td-cartbar-body{display:flex;align-items:center;gap:8px;min-width:0}
.td .td-cartbar-sum{display:flex;flex-direction:column;flex:0 1 auto;min-width:0;margin:0 6px 0 14px;line-height:1.25;white-space:nowrap;font-variant-numeric:tabular-nums}
.td-cartbar-n{font-size:12.5px;color:rgba(255,255,255,.74)}
.td-cartbar-t{font-size:16px;font-weight:700;color:#fff}
.td .td-cartbar .td-btn{flex:0 0 auto;min-height:44px;margin:0;border-radius:99px;white-space:nowrap}
.td .td-cartbar .td-cartbar-go{min-width:112px;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.td .td-cartbar .td-cartbar-view{background:transparent;border-color:rgba(255,255,255,.5);color:#fff!important}
@media (hover:hover){.td .td-cartbar .td-cartbar-view:hover{background:rgba(255,255,255,.1)}.td .td-cartbar .td-cartbar-go:hover{background:#b54470}}
.td .td-cartbar :focus-visible{outline-color:#fff} /* the 3 px ring, white on the ink bar */
.td .td-cartbar.is-tight .td-cartbar-view{display:none} /* no room for the count and total beside it (script) */
/* the toggle: a 44 px icon button (chevron down = hide) while open; the whole pill (chevron up = show) while collapsed */
.td .td-cartbar-tog{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:44px;min-height:44px;margin:0;padding:0 10px;border:0;border-radius:99px;background:transparent;color:#fff;font:inherit;line-height:1;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color .16s ease-out}
@media (hover:hover){.td .td-cartbar-tog:hover{background:rgba(255,255,255,.1)}}
.td .td-cartbar-tog:active{background:rgba(255,255,255,.18)}
.td-cartbar-chev{flex:0 0 auto;display:block;transition:transform .18s ease-out}
/* The count badge sits on the icon's top right corner but in the flow (pulled 9 px over the icon), so however many
   digits it shows ("999+" at most) the total starts 8 px after it and never under it. */
.td-cartbar-pill{display:none;align-items:center;gap:8px}
.td-cartbar-ic{display:inline-flex;align-items:flex-start;color:#fff}
.td-cartbar-ic svg{display:block;flex:none;width:22px;height:22px}
.td-cartbar-badge{position:relative;top:-9px;will-change:transform;flex:none;margin-left:-9px;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--td-primary);color:#fff;border:2px solid var(--td-ink);font-size:12px;font-weight:700;line-height:16px;text-align:center;font-variant-numeric:tabular-nums;white-space:nowrap}
.td-cartbar-pt{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.td-cartbar.is-collapsed{padding:3px;animation-name:td-cartbar-pill;animation-duration:.16s}
.td .td-cartbar.is-collapsed .td-cartbar-tog{min-height:48px;padding:0 12px 0 16px}
.td-cartbar.is-collapsed .td-cartbar-pill{display:inline-flex}
.td-cartbar.is-collapsed .td-cartbar-chev{transform:rotate(180deg)}
@keyframes td-cartbar-in{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@keyframes td-cartbar-pill{from{opacity:0;scale:.92}to{opacity:1;scale:1}}
@media (prefers-reduced-motion:reduce){.td-cartbar,.td-cartbar.is-collapsed{animation:none}.td-cartbar-chev,.td .td-cartbar-tog{transition:none}}
.td-cartbar-on .td-toast{bottom:calc(var(--td-cartbar-h,58px) + var(--td-cartbar-b,24px) + 12px)}
/* Phones, either way up: 8 px in from the bottom and right edges (and the safe areas). */
@media (max-width:767px),(max-height:500px){
  .td-cartbar{right:var(--td-cb-r,calc(8px + env(safe-area-inset-right,0px)));bottom:var(--td-cb-b,calc(8px + env(safe-area-inset-bottom,0px)));max-width:calc(100vw - 16px)}
}
/* Phones in portrait (and any screen under 560 px wide): the open bar runs along the bottom; a phone on its side
   (560–767 px wide, 500 px tall or less) keeps the compact corner bar. */
@media (max-width:559px),(max-width:767px) and (min-height:501px){
  .td-cartbar:not(.is-collapsed){left:var(--td-cb-l,calc(8px + env(safe-area-inset-left,0px)));max-width:none;transform-origin:50% 100%}
  .td-cartbar-body{flex:1 1 auto}
  .td .td-cartbar-sum{flex:1 1 auto;margin:0 2px 0 10px}
  .td .td-cartbar .td-btn{padding-left:12px;padding-right:12px}
  .td .td-cartbar .td-cartbar-go{min-width:0}
  .td .td-cartbar-tog{padding:0 6px}
}
/* Welcome row (SPEC-ROUND3.md, UX3): the company logo or "Add your logo" (first child, ext/logo.css) on the left, the
   greeting and the account line beside it. A grid, so the theme's markup stays as it is: column 1 is as wide as the logo
   (nothing when there is none), the text sits in column 2 as one block centred on the row. The row is at least as tall
   as the logo (64 px, 48 px on phones). While logos are on (the hero part's button is there), the text column is the
   row less the logo's widest slot (200 px + 16 px gap; phones 88 + 12) whatever is in the slot, so the text wraps the
   same with a logo, with "Add your logo" or with neither: adding or removing a logo, or the button appearing, never
   moves what is below. */
.td-hello{display:grid;grid-template-columns:auto minmax(0,1fr);align-content:center;min-height:64px}
.td-hello>*{grid-column:2;min-width:0}
.td .td-hello>h1{align-self:end;margin:0 0 4px;overflow-wrap:anywhere}
.td .td-hello>p{align-self:start;margin:0}
.td-hello:has(>.td-logo-add){grid-template-columns:auto minmax(0,calc(100% - 216px));justify-content:start}
.td-greet-emoji{display:inline-block;margin-inline-end:.3em;font-weight:400}
@media (max-width:767px){
  .td-hello{min-height:48px}
  .td .td-hello>h1{font-size:20px}
  .td-hello:has(>.td-logo-add){grid-template-columns:auto minmax(0,calc(100% - 100px))}
}
/* Terms link at the foot of the dashboard */
.td .td-terms{margin:4px 0 0;text-align:center;font-size:13px}
.td .td-terms a{display:inline-flex;align-items:center;min-height:24px;padding:3px 6px;color:var(--td-mut);text-decoration:underline}
.td .td-terms a:hover{color:var(--td-primary)}
@media (pointer:coarse){.td .td-terms a{min-height:44px}}
/* KPI cards: one height per row, and the title, value, bar, note, credit line and button of each card on shared
   lines across the row (subgrid rows; a card without one of them leaves that line empty). The eye sits top right of
   every card, out of the flow. */
@supports (grid-template-rows:subgrid){
  .td-kpis{grid-auto-rows:auto;row-gap:0;margin-bottom:-12px} /* the space between rows of cards is each card's margin */
  .td-kpis>.td-kpi{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:0;align-content:start;margin-bottom:12px}
  .td-kpi>.t{grid-row:1}
  .td-kpi>.v{grid-row:2}
  .td-kpi>.td-bar{grid-row:3}
  .td-kpi>p.td-mut{grid-row:4}
  .td-kpi>.td-ok{grid-row:5}
  .td-kpi>.td-btn{grid-row:6;justify-self:start;align-self:end}
}
/* Phones: the most-ordered table stacks. Each product is a block: SKU, title and bar with its button (or tag) on the
   right, then units, pace and suggested in three equal columns under one header row of the same three columns. */
@media (max-width:600px){
  .td #td-forecast .td-table :is(thead,tbody) tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:8px}
  .td #td-forecast .td-table thead tr{border-bottom:1px solid var(--td-line)}
  .td #td-forecast .td-table th{padding:8px 0;border:0;white-space:normal}
  .td #td-forecast .td-table th:is(:first-child,:last-child){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .td #td-forecast .td-table tbody tr{grid-template-areas:"sku sku act" "u p s";row-gap:6px;padding:10px 0;border-bottom:1px solid #f2f2f2}
  .td #td-forecast .td-table tbody td{display:block;min-width:0;padding:0;border:0}
  .td #td-forecast .td-table tbody td:nth-child(1){grid-area:sku}
  .td #td-forecast .td-table tbody td:nth-child(2){grid-area:u}
  .td #td-forecast .td-table tbody td:nth-child(3){grid-area:p}
  .td #td-forecast .td-table tbody td:nth-child(4){grid-area:s}
  .td #td-forecast .td-table tbody td:nth-child(5){grid-area:act;justify-self:end;align-self:start}
  .td #td-forecast .td-table tbody td[colspan]{grid-column:1/-1}
  .td #td-forecast .td-table .td-bar{margin-bottom:0}
}
/* Tablets: the three quick links stay on one row */
@media (min-width:601px) and (max-width:900px){.td-trio{grid-template-columns:repeat(3,minmax(0,1fr))}.td-trio a{padding:12px;gap:9px}}
/* Search results and template suggestions: every row's text starts at the same place, with or without a picture */
.td .td-hit-ph{display:block;width:38px;height:38px;border-radius:8px;background:#f3f3f3;flex-shrink:0}
.td .td-sugg .td-thumb{width:44px;height:44px;border-radius:8px;flex-shrink:0}
/* The eye sits the same distance from the outer corner on every card: cards with a 2 px border move it out by 1 px */
.td .td-perk>.td-help,.td .td-card--hl>.td-help{top:9px;right:9px}
/* The saved-carts list (or its empty line) starts clear of the buttons above it */
.td [data-td-templates]>p.td-mut{margin-top:10px}
/* SC1 (06 Oct 2026): the saved-carts card stands out, in the same language as Your Volume Discounts (brand border and
   tint from td-card--hl, a badge). Icon like the order form's, "Quick reorder" badge and how many are saved; each saved
   cart is a white tile with "Add all to cart" as its main button and the smaller actions underneath. A one-off glow on
   first view (the script adds td-tplc--glow), never with reduced motion. */
.td-tplc{background:linear-gradient(180deg,#FDEFF5 0,#FFF6FA 140px,#fff 360px)}
.td-tplc-head{display:flex;gap:12px;align-items:flex-start;padding-right:36px}
.td-tplc-ic{width:46px;height:46px;border-radius:13px;background:var(--td-primary);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 12px rgba(167,58,100,.28)}
.td-tplc-ic svg{width:22px;height:22px}
.td-tplc-t{min-width:0}
.td .td-tplc-t>h2{margin:0 0 2px}
.td .td-tplc-t>p.td-mut{margin:0}
.td .td-tplc-kick{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:8px 0 0}
.td .td-tplc>.td-actions{margin-top:14px}
.td .td-tplc [data-td-templates]{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:12px}
.td .td-tplc [data-td-templates]:empty{display:none}
.td .td-tplc .td-trow,.td .td-tplc .td-trow:last-child{background:#fff;border:1px solid #ecd3dd;border-left:4px solid var(--td-primary);border-radius:12px;padding:12px 14px;box-shadow:0 1px 3px rgba(167,58,100,.08);transition:border-color .16s ease-out,box-shadow .16s ease-out}
.td .td-tplc .td-trow:hover,.td .td-tplc .td-trow:focus-within{border-color:var(--td-primary);box-shadow:0 4px 14px rgba(167,58,100,.16)}
.td .td-tplc .td-trow .t1 b{font-size:15px;min-width:0;overflow-wrap:anywhere}
.td .td-tplc .td-trow .acts{margin-top:10px}
.td .td-tplc .td-trow .acts>.td-btn{flex:1 1 auto}
.td .td-tplc .td-trow .more{display:flex;gap:2px 12px;flex-wrap:wrap;align-items:center;margin-top:8px;padding-top:6px;border-top:1px dashed #efd9e2}
.td .td-tplc .td-trow .more>.td-link{font-size:13px;padding:4px 2px}.td .td-tplc .td-trow .more>[data-td-tpl-del]{margin-left:auto}
.td .td-tplc [data-td-templates]>p.td-tplc-empty{margin:0;background:#fff;border:1px dashed #dcaec1;border-radius:12px;padding:14px;text-align:center}
.td .td-tplc>.td-setup{margin-top:14px}
.td-tplc::after{content:"";position:absolute;inset:-2px;border-radius:calc(var(--td-r) + 2px);pointer-events:none;opacity:0;box-shadow:0 0 0 4px rgba(167,58,100,.35),0 0 28px 6px rgba(167,58,100,.28)}
.td-tplc.td-tplc--glow::after{animation:td-tplc-glow 1.2s ease-out 2}
@keyframes td-tplc-glow{0%{opacity:0}35%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.td-tplc.td-tplc--glow::after{animation:none}.td .td-tplc .td-trow{transition:none}}
/* With saved carts listed, their "Add all to cart" is the card's main button: "+ New template" turns outlined. */
.td .td-tplc:has(.td-trow)>.td-actions>.td-btn[data-td-tpl-new]{background:#fff;border:1px solid var(--td-primary);color:var(--td-primary)!important;border-radius:99px}
/* The card is as tall as its content beside a long order history (no empty highlighted space under the list). */
.td .td-grid2>.td-tplc{align-self:start}
/* MR touch & alignment (06 Oct 2026) */
/* One control height, touch-sized targets, no iOS zoom, one phone gutter (audit FIXLIST A8, A11/B4, A12/B10, A14).
   - --td-ctl: small buttons, toolbar and form fields and the text-link buttons beside them are this tall, so the
     controls on a line share one height and centre: 40 px with a mouse, 44 px on touch screens (pointer: coarse).
   - Touch screens only: every control is at least 44 x 44 px to tap, with 8 px between neighbours on a line. Small
     pictures keep their size and get a centred 44 px ::after hit area (the help eye, the guide's pins); links inside
     text get it as padding with a matching negative margin, so the lines around them don't move. Text fields, selects
     and text areas are 16 px, so iOS Safari doesn't zoom the page in on focus. A mouse keeps the desktop density
     (13–14 px fields, the 32 px eye, 36 px chips).
   - --td-gutter: one space between the screen edge and the content: 20 px on wide screens, 16 px on one-column
     layouts (900 px and narrower) for the top bar, the Menu bar and the cards; cards on phones (767 px and
     narrower) are padded by the same 16 px. The phone cart bar already sits 16 px in (calc(16px + safe area)). */
.td{--td-ctl:40px;--td-gutter:20px}
@media (pointer:coarse){.td{--td-ctl:44px}}
@media (max-width:900px){.td{--td-gutter:16px}}
.td-top{padding-inline:var(--td-gutter)}
.td-wrap{padding:var(--td-gutter)}
.td-mobnav{padding-inline:var(--td-gutter)}
@media (max-width:767px){.td .td-card:not(.td-join){padding:var(--td-gutter)}}
/* the control height: small buttons, toolbar / form fields, the top bar, the pager, text-link buttons in action rows */
.td .td-btn--sm{min-height:var(--td-ctl)}
.td .td-top .td-btn{min-height:var(--td-ctl)}
.td .td-top :is(.td-loc select,.td-search input),.td .td-tbar :is(select,.td-tbar-q),.td .td-field :is(input,select):not([type=checkbox],[type=radio]){height:var(--td-ctl);min-height:0;padding-block:0}
.td .td-pager{--td-pager-h:var(--td-ctl);--td-pager-w:var(--td-ctl)}
.td .td-qty-in{min-height:var(--td-ctl)}
.td .td-paste summary{min-height:var(--td-ctl)}
.td :is(.td-ord-acts,.td-form-actions,.td-namer-acts,.td-tbar,.td-actions,.td-stmt,.td-join-acts,.td-cat-empty) .td-link{display:inline-flex;align-items:center;justify-content:center;align-content:center;min-height:var(--td-ctl);vertical-align:middle}
.td .td-help-btn{position:relative}
@media (pointer:coarse){
  /* A8: 16 px fields (iOS zooms in on focus below 16 px) */
  .td :is(input,select,textarea):not([type=checkbox],[type=radio],[type=file],[type=range],[type=hidden]){font-size:16px!important}
  .td :is(input,select):not([type=checkbox],[type=radio],[type=file],[type=range],[type=hidden]){min-height:var(--td-ctl)}
  /* A11: 44 x 44 px targets */
  .td .td-btn--sm,.td .td-link,.td .td-sort{min-width:44px}
  .td .td-link{justify-content:center}
  .td .td-help-btn::after{content:"";position:absolute;inset:calc(50% - 22px);border-radius:50%}
  .td .td-toast-undo{min-height:44px;min-width:44px}
  .td .td-qty button{width:44px;height:44px}
  .td .td-qty input{height:44px}
  .td .td-chip,.td .td-check{min-height:var(--td-ctl)}
  .td .td-nav a{min-height:44px} /* the sidebar, on show from 901 px: a tablet on its side (review S1) */
  .td .td-nav{gap:4px}
  .td :is(.td-setup,.td-acct-status,.td-guide-lede,p.td-mut) a:not(.td-btn):not(.td-link){display:inline-block;padding:12px 8px;margin:-12px -8px;padding-block:calc((44px - 1lh) / 2);margin-block:calc((1lh - 44px) / 2)}
  /* 8 px between neighbouring targets */
  .td-tabs,.td-acts,.td-chips,.td-qty,.td-qs-row,.td-pager-nums,.td .td-cxf-pop{gap:8px}
}
@container (min-width:640px){@media (pointer:coarse){.td-pager-nums{min-width:calc(5 * var(--td-pager-w) + 28px + 48px)}}} /* the slot for 1 … 4 5 6 … 20 with 8 px gaps */