/* Transcell site search sheet  v1.15.0  (2026-10-01)
   Everything is scoped to .tsx-* so the theme's element rules (a{font-weight:700;text-decoration:underline},
   svg{width:100%}, Montserrat headings, li::before dashes) cannot reach in. Tokens match the site header redesign. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

.tsx-scope{
  --tc-blue:#2C5E9E;--tc-blue-deep:#214B82;--tc-blue-ink:#12294A;--tc-blue-50:#F4F7FB;--tc-blue-100:#E7EEF6;--tc-blue-200:#CBD9EA;
  --tc-ink:#0B1422;--tc-body:#4A5667;--tc-muted:#667586;--tc-line:#ECEEF2;--tc-bg:#FAFBFD;--tc-red:#C8102E;--tc-green:#1E7F4F;--r:4px;
  /* the page column the sheet content sits on: the header's own container width. 1328px on today's header, 1520px on the redesign. */
  --tsx-max:min(1328px, calc(100vw - 48px));
  font-family:"Inter",system-ui,sans-serif;font-size:15px;line-height:1.6;color:var(--tc-body);text-align:left;letter-spacing:0;
  -webkit-font-smoothing:antialiased;box-sizing:border-box;
}
.tsx-scope *,.tsx-scope *::before,.tsx-scope *::after{box-sizing:border-box}
/* theme resets */
.tsx-scope a{color:inherit;text-decoration:none;font-weight:inherit}
/* the live theme's a:hover,a:focus,a:active{color:#1d1d1d} outranks or ties the row and link colours below; restate them */
.tsx-scope .tsx-prod:is(:hover,:focus,:active),.tsx-scope .tsx-tile:is(:hover,:focus,:active){color:var(--tc-ink)}
.tsx-scope .tsx-list a:is(:focus,:active):not(:hover):not([aria-selected="true"]){color:var(--tc-ink)}
.tsx-scope .tsx-lab a:is(:hover,:focus,:active){color:var(--tc-blue)}
.tsx-scope p,.tsx-scope ul,.tsx-scope ol,.tsx-scope h3{margin:0;padding:0;font-family:inherit;color:inherit;line-height:inherit}
.tsx-scope ul{list-style:none}.tsx-scope li::before{content:none!important}
.tsx-scope button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;min-height:0;line-height:inherit;text-transform:none;letter-spacing:0}
.tsx-scope svg{width:16px;height:16px;flex:none}
.tsx-scope img{max-width:100%;height:auto;border:0}
.tsx-scope mark{background:none;color:inherit;font-weight:700;padding:0}
.tsx-scope input[type=search]{-webkit-appearance:none;appearance:none}
.tsx-scope input[type=search]::-webkit-search-decoration,.tsx-scope input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}

/* the host header positions the sheet; the theme form must stop clipping it */
.tsx-host{position:relative}  /* no z-index at rest (2026-09-30): a permanent 1000 lifted the header over the phone drawer (60), hiding the drawer's own logo row and close button under the see-through bar; the rule below lifts it only while the sheet is open */
/* while the sheet is open the host stays above the page dim (999), whatever z-index the theme gives its header: the
   combined site sets its header to 150, so the dim and its blur drew over the open sheet and the next click closed it
   (owner report 2026-09-29, pages with the sticky reference bar). !important because a theme may style its header by id. */
html.tsx-open .tsx-host{z-index:1000!important}
/* a page scroll-padding-top (the combined site sets 125px for its reference bar) covers the sticky header, and Chrome scrolled the
   page to keep the caret clear of it: 103px on the first keystroke. Off while the sheet is open; anchor jumps are unaffected. */
html.tsx-open{scroll-padding-top:0!important}
form.tsx-form{overflow:visible}

/* ── the field (used by the header redesign; the live theme keeps its own input styling) ── */
.tsx-field{display:flex;align-items:center;gap:10px;height:42px;width:clamp(240px,24vw,360px);padding:0 14px 0 16px;border:1px solid #CDD3DC;border-radius:4px;background:#fff;transition:width .25s cubic-bezier(.2,.7,.2,1),box-shadow .15s,border-color .15s}
/* neutral grey at rest and in use (owner decision 2026-09-25): the only blue outline in the header read heavier than everything beside it */
.tsx-field:focus-within,.tsx-field.is-open{border-color:#8E9AAA;box-shadow:none}
/* the field widens only where the bar has room for it (teardown 2026-09-28): below 1512px the wider field pushed
   Log in, Cart and Contact us off the right edge (69px at 1280, 10px at 1366, 24px at 1440). The sheet shows the
   results at full width anyway. */
@media (min-width:1512px){.tsx-field:focus-within,.tsx-field.is-open{width:clamp(320px,32vw,520px)}}
.tsx-field svg{width:16px;height:16px;color:#667586;flex:none}
.tsx-field input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:14px;color:#0B1422;height:auto;padding:0;margin:0;box-shadow:none}
.tsx-field input::placeholder{color:#667586;opacity:1}
/* the browser's own clear "x" on type=search doubled up with .tsx-clear */
.tsx-field input[type=search]::-webkit-search-cancel-button,.tsx-field input[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.tsx-field kbd{flex:none;font:inherit;font-size:11px;font-weight:600;color:#667586;border:1px solid #ECEEF2;border-radius:3px;padding:1px 5px;line-height:1.3;background:#FAFBFD}
.tsx-field:focus-within kbd,.tsx-field.is-open kbd{display:none}
.tsx-clear{display:none;flex:none;width:22px;height:22px;border-radius:50%;color:#667586;place-items:center;background:none;border:0;padding:0;cursor:pointer;min-height:0}
.tsx-clear:hover{background:#F4F7FB;color:#0B1422}
.tsx-clear svg{width:12px;height:12px;color:inherit}
.tsx-field.has-text .tsx-clear{display:grid}

/* ── the sheet: the same full-width white panel the Shop menu opens, page blurred behind ── */
.tsx-dim{position:fixed;inset:0;z-index:999;background:rgba(11,20,34,.22);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);  /* the header menus' dim, so the page recedes the same way for both */
  opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.tsx-dim.is-open{opacity:1;visibility:visible}
.tsx-panel{position:absolute;left:0;right:0;top:100%;z-index:1001;background:#fff;border-top:1px solid var(--tc-line);box-shadow:0 28px 48px -12px rgba(11,20,34,.14);opacity:0;visibility:hidden;transition:opacity .18s,visibility .18s;max-height:calc(100vh - 64px);overflow-y:auto}
.tsx-panel.is-open{opacity:1;visibility:visible}
/* three columns in every state (owner decision 2026-09-28): searches | products | documents. The product column is capped
   so a short name does not leave a wide gap before the price; the sheet ends at about half the screen. */
.tsx-in{max-width:var(--tsx-max);margin:0 auto;display:grid;grid-template-columns:240px minmax(520px,600px) minmax(0,484px);gap:64px;justify-content:space-between;padding:26px 0 26px} /* fixed columns; the width left over goes into the two gaps, not to the right edge (2026-09-29) */
.tsx-in>.tsx-span{grid-column:2/-1}
.tsx-panel.is-open .tsx-in>*{animation:tsxIn .32s cubic-bezier(.2,.7,.2,1) both}
.tsx-panel.is-open .tsx-in>*:nth-child(2){animation-delay:.04s}
.tsx-panel.is-open .tsx-in>*:nth-child(3){animation-delay:.08s}
@keyframes tsxIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tsx-panel.is-open .tsx-in>*{animation:none}}
.tsx-lab{margin:0 0 10px;font-size:12px;font-weight:400;color:var(--tc-muted);display:flex;align-items:baseline;justify-content:space-between;gap:12px;text-transform:none;letter-spacing:0}
.tsx-lab a{font-size:13px;font-weight:600;color:var(--tc-blue)}
.tsx-lab a:hover{text-decoration:underline}
.tsx-lab .tsx-note{font-weight:400;color:var(--tc-muted);font-size:13px}
.tsx-lab .tsx-note b{color:var(--tc-ink);font-weight:600}
.tsx-dot::before{content:'\B7\A0'} /* "Manuals · best-selling products first"; on a phone the note has its own line and no dot */
.tsx-sec+.tsx-sec{margin-top:22px}

/* left column: suggestions, categories, series */
.tsx-list{list-style:none;margin:0;padding:0}
.tsx-list a,.tsx-list button{display:flex;align-items:center;gap:10px;text-align:left;padding:7px 10px;margin:0 -10px;width:calc(100% + 20px);border-radius:var(--r);color:var(--tc-ink);font-size:14.5px;font-weight:500;line-height:20px;white-space:nowrap}
/* one row style in both side columns (owner decision 2026-09-28): one line, long names end in "…" (full name in the tooltip) */
.tsx-list .tsx-t{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* tablets (768-1240px): the side columns are only 190-240px wide there, and one line cut pairs down to the same
   text ("SBS 5,000 lb (…" twice, DFS3 and DFE3 both "TC-DFS3 Chatillon D…"), so a long name may take a second
   line (owner decision 2026-09-28). Phones and desktops keep the one line. */
@media (min-width:768px) and (max-width:1240px){
  .tsx-list a,.tsx-list button{align-items:flex-start;white-space:normal}
  .tsx-list .tsx-t{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
  .tsx-list svg{margin-top:2px}
}
/* touch tablets (768px up, finger pointer): rows were 34px, under the 44px a finger needs (tablet sweep 2026-09-29).
   Taller padding rather than min-height, so a one-line row stays centred and a two-line row grows. A swipe past the end
   of the results does not scroll the page behind them. Mouse and trackpad screens are unchanged. */
@media (min-width:768px) and (pointer:coarse){
  .tsx-list a,.tsx-list button{padding-top:12px;padding-bottom:12px}
  .tsx-panel{overscroll-behavior:contain}
}
.tsx-list a:hover,.tsx-list button:hover,.tsx-list [aria-selected="true"]{background:var(--tc-blue-50);color:var(--tc-blue)}
.tsx-list .tsx-sug b{font-weight:700}
.tsx-list svg{flex:none;width:16px;height:16px;color:var(--tc-muted)}
.tsx-list .tsx-cnt{flex:none;margin-left:auto;padding-left:8px;font-size:12.5px;font-weight:500;color:var(--tc-muted)}
.tsx-list .tsx-x{margin-left:auto;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;color:var(--tc-muted)}
.tsx-list .tsx-x:hover{background:#fff;color:var(--tc-ink)}
.tsx-list .tsx-x svg{width:11px;height:11px}

/* right column: products */
.tsx-prods{list-style:none;margin:0;padding:0}
.tsx-prod{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:16px;align-items:center;padding:6px 10px;margin:0 -10px;border-radius:var(--r);color:var(--tc-ink)}
.tsx-prod:hover,.tsx-prod[aria-selected="true"]{background:var(--tc-blue-50)}
.tsx-img{width:64px;height:64px;border:1px solid var(--tc-line);border-radius:var(--r);background:#fff;display:grid;place-items:center;overflow:hidden}
.tsx-img img{width:58px;height:58px;object-fit:contain;mix-blend-mode:multiply}
.tsx-img svg{width:24px;height:24px;color:var(--tc-blue-200)}
.tsx-ttl{font-size:15px;font-weight:600;line-height:1.3;letter-spacing:-.005em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tsx-meta{margin-top:4px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-size:13px;color:var(--tc-muted);line-height:1.3}
/* the stat line: a muted label and the value in ink, as on the homepage highlights (1.13.0). The label is set in small
   capitals and a thin rule divides it from the value (owner decision 2026-10-01, 1.14.1) */
.tsx-spec{display:inline-flex;align-items:flex-start;gap:0;min-width:0}
/* margin-top centres the 12px label on the value's first 16.9px line (13px x 1.3), so a value that wraps keeps its label on line one (1.14.3) */
.tsx-spec-k{flex:none;color:var(--tc-muted);font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;line-height:12px;margin-top:2.45px;padding-right:9px;margin-right:9px;border-right:1px solid #CDD3DC}
.tsx-spec-v{color:var(--tc-muted);font-weight:600} /* the label's grey, not ink (owner decision 2026-10-01, 1.14.2) */
.tsx-stock{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.tsx-stock::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--tc-green)}
.tsx-stock.is-back::before{background:#B26A00}
.tsx-stock.is-out::before{background:var(--tc-red)}
/* stock on the right, where the price was (2026-09-29) */
.tsx-side{justify-self:end;font-size:13px;color:var(--tc-muted);line-height:1.3}
/* documents column: same rows as the left column */
/* a document search ("manual") lists the documents in two columns across the product and document columns */
.tsx-doclist{display:grid;grid-template-columns:repeat(2,minmax(0,420px));column-gap:64px}
/* the documents column is no wider than its longest sensible name */
.tsx-in>.tsx-docs{max-width:420px}
@media (min-width:1241px){.tsx-in>.tsx-docs{max-width:484px;padding-left:64px}} /* the gap before the documents looks as wide as the one after the searches: "In stock" ends flush with its column, the searches stop well short of theirs (2026-09-29) */
/* the size the shopper typed ("sbs 1000") stays marked in the list of sizes */
.tsx-list a.is-match{box-shadow:inset 0 0 0 1.5px var(--tc-blue)}  /* an outline, not the hover fill, so it does not read as the hovered row */

/* zero results */
.tsx-zero h3{margin:0 0 6px;font-size:22px;font-weight:600;letter-spacing:-.015em;color:var(--tc-ink);line-height:1.25;font-family:inherit}
.tsx-zero p{margin:0 0 22px;font-size:15px;color:var(--tc-body)}
.tsx-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0}
/* the four families with the Shop menu's own pictures (2026-09-29), from the menu's crops, then scaled about their
   centres (owner decision 2026-09-29): load cells 20% smaller, instruments 5%, scales 10%, cables & accessories 5%; then scales lowered 13% of the frame and instruments 3.5% */
.tsx-tile{display:flex;flex-direction:column;border:1px solid var(--tc-line);border-radius:var(--r);background:#fff;color:var(--tc-ink);overflow:hidden;transition:border-color .15s}
.tsx-tile:hover,.tsx-tile[aria-selected="true"]{border-color:var(--tc-blue-200)}
.tsx-tile-pic{position:relative;display:block;aspect-ratio:480/292;overflow:hidden;background:#fff}
.tsx-tile-pic img{position:absolute;left:0;top:0;width:100%;height:auto;filter:brightness(1.06);mix-blend-mode:multiply;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.tsx-tile:hover .tsx-tile-pic img{transform:scale(1.03)}
.tsx-tile-pic[data-k=lc] img{width:79.4%;left:10.62%;top:-13.28%}
.tsx-tile-pic[data-k=ins] img{width:102.6%;left:-.8%;top:3.4%}
.tsx-tile-pic[data-k=sc] img{width:91.17%;left:3.96%;top:1.37%}
.tsx-tile-pic[data-k=ca] img{width:101.36%;left:.87%;top:1.47%}
.tsx-tile-t{display:block;padding:12px 16px 14px;border-top:1px solid var(--tc-line);font-size:15px;font-weight:600}
.tsx-tile-t small{display:block;margin-top:2px;font-weight:400;color:var(--tc-muted);font-size:12.5px} /* own line: inline it ran into the name ("Load Cells36 products") */
@media (prefers-reduced-motion:reduce){.tsx-tile-pic img{transition:none}.tsx-tile:hover .tsx-tile-pic img{transform:none}}

/* results with nothing to refine take both columns */
.tsx-in>.tsx-wide{grid-column:1/-1}

/* ── narrower desktops ── */
@media (max-width:1240px){.tsx-in{grid-template-columns:230px minmax(0,1fr) 240px;gap:40px}}
@media (max-width:1000px){.tsx-in{grid-template-columns:190px minmax(0,1fr)}.tsx-in>.tsx-docs{grid-column:2}}
@media (max-width:1000px){.tsx-tiles{grid-template-columns:1fr 1fr}}

/* ── phone: one full-height sheet, stacked ── */
.tsx-sheetbar{display:none}
@media (max-width:767px){
  .tsx-host{position:static}
  /* A backdrop-filter (the redesigned header's frosted bar), filter or transform on the host makes it
     the containing block for position:fixed, which pinned the phone sheet inside the 64px bar. Drop
     them while the sheet is open; the sheet covers the header anyway. */
  html.tsx-open .tsx-host{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;filter:none!important;transform:none!important}
  .tsx-panel{position:fixed;inset:0;top:0;max-height:none;border:0;box-shadow:none;z-index:100000;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain} /* a swipe past the end of the sheet does not scroll the page behind it */
  .tsx-sheetbar{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:2;background:#fff;padding:10px 16px;border-bottom:1px solid var(--tc-line)}
  .tsx-sheetbar .tsx-field,.tsx-sheetbar .tsx-field:focus-within,.tsx-sheetbar .tsx-field.is-open{width:auto;flex:1;min-width:0;box-shadow:none} /* min-width:0 lets the field shrink, so Cancel stays on screen at 320px */
  .tsx-sheetbar .tsx-field input{font-size:16px} /* 16px stops iOS zooming the page */
  .tsx-sheetbar .tsx-cancel{flex:none;font-size:14.5px;font-weight:600;color:var(--tc-blue);padding:0 4px;min-height:44px}
  .tsx-in{display:flex;flex-direction:column;gap:22px;padding:18px 16px 24px;max-width:none;margin:0}
  .tsx-list a,.tsx-list button{min-height:44px}
  .tsx-prod{grid-template-columns:76px minmax(0,1fr);grid-template-rows:auto 1fr;gap:6px 14px;padding:10px 0;margin:0;align-items:start} /* auto 1fr: the photo's extra height goes under the stock, not between the name and the stock */
  .tsx-prod .tsx-img{grid-row:span 2}  /* the stock sits under the name, not below the photo */
  .tsx-side{grid-column:2;justify-self:start}
  .tsx-img{width:76px;height:76px}.tsx-img img{width:68px;height:68px}
  .tsx-in>.tsx-docs{grid-column:auto}
  .tsx-in>:empty{display:none}  /* an empty column would add a second gap to the stack */
  /* a page the search names outright ("applications", "return policy", "forklift") leads the stack instead of sitting
     under the products (2026-09-29); its column opens up so that one section can move to the top */
  .tsx-in>div:has(>.tsx-lead){display:contents}
  .tsx-in .tsx-lead{order:-1}
  .tsx-doclist{grid-template-columns:minmax(0,1fr)} /* 1fr would not shrink below the longest name: "manual" ran 22px past a 375px screen */
  .tsx-tiles{grid-template-columns:1fr 1fr}
  .tsx-dim{display:none}
  /* a note beside the label ("Showing results for indicator", "No 1,500 lb model…") takes its own line, and "See all" stays on one:
     at 320px both wrapped into two squeezed lines side by side */
  .tsx-lab{flex-wrap:wrap}.tsx-lab>span{display:contents}
  .tsx-lab .tsx-note{order:3;flex-basis:100%;margin-top:3px}.tsx-lab .tsx-note::first-letter{text-transform:uppercase}.tsx-dot::before{content:none}
  .tsx-lab>a{white-space:nowrap}
  html.tsx-open,html.tsx-open body{overflow:hidden}
}