/* Torque Market component styles. Colors come from the theme palette. */
:root {
	--ts-ink: var(--wp--preset--color--ink, #0C0D0F);
	--ts-ink-2: var(--wp--preset--color--ink-2, #2A2D32);
	--ts-muted: var(--wp--preset--color--muted, #5B5B5B);
	--ts-subtle: var(--wp--preset--color--subtle, #9A9A9A);
	--ts-line: var(--wp--preset--color--line, #E3E3E3);
	--ts-tile: var(--wp--preset--color--tile, #F4F4F4);
	--ts-surface: var(--wp--preset--color--surface, #fff);
	--ts-accent: var(--wp--preset--color--accent, #E2601A);
	--ts-accent-soft: var(--wp--preset--color--accent-soft, #FCEFE6);
	--ts-accent-ink: #9a4413; /* the accent darkened to pass AA on white and on accent-soft */
	--ts-mono: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	--ts-display: var(--wp--preset--font-family--display, system-ui, sans-serif);
	--ts-serif: var(--wp--preset--font-family--serif, Georgia, serif);
	--ts-radius: 6px;
}

.ts-mono { font-family: var(--ts-mono); font-size: 0.8125rem; letter-spacing: 0; }
.ts-subtle { color: var(--ts-subtle); }
.ts-dot { color: var(--ts-subtle); margin: 0 0.5em; }
.ts-eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; font-weight: 600; color: var(--ts-muted); margin: 0 0 0.5rem; }
.ts-section-title { font-family: var(--ts-serif); font-weight: 400; font-size: 1.75rem; letter-spacing: -0.01em; margin: 0 0 1rem; }

/* Badges and chips */
.ts-badge { display: inline-flex; align-items: center; gap: 0.25em; border-radius: 3px; padding: 0.15em 0.6em; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1.5; vertical-align: middle; white-space: nowrap; }
.ts-badge--indicative { background: var(--wp--preset--color--amber-soft, #fef3c7); color: var(--wp--preset--color--amber, #92400e); cursor: help; }
.ts-badge--trader { background: var(--wp--preset--color--slate-soft, #eef1f4); color: var(--wp--preset--color--slate, #334155); }
.ts-badge--cert { background: var(--ts-surface); color: var(--ts-ink-2); box-shadow: inset 0 0 0 1px var(--ts-line); }
.ts-price-from { font-weight: 400; color: var(--ts-muted); font-size: max(12px, 0.85em); }
/* Card specs read as one plain line, "Collaborative · 5 kg · 954 mm", not monospace pills (the owner, 2026-10-29). */
.ts-chip { display: inline; font-family: var(--ts-display); font-size: 0.8125rem; color: var(--ts-muted); background: none; border-radius: 0; padding: 0; overflow-wrap: anywhere; }
.ts-chip + .ts-chip::before { content: "·"; margin: 0 0.4em; color: var(--ts-subtle); }
.ts-pill { display: inline-flex; gap: 0.5em; align-items: center; }

/* Product card pieces (inside woocommerce/product-template) */
.ts-card-supplier { font-size: 0.8125rem; color: var(--ts-muted); margin-top: 0.75rem; }
.ts-card-supplier a { color: var(--ts-muted); }
.ts-card-supplier a:hover { color: var(--ts-accent); }
.ts-card-specs { display: block; margin-top: 0.3rem; line-height: 1.45; }

/* Single product */
.ts-model-line { font-size: 0.875rem; color: var(--ts-muted); display: flex; flex-wrap: wrap; align-items: baseline; }
.ts-model-supplier { font-weight: 600; color: var(--ts-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ts-line); }
.ts-note { font-size: 0.8125rem; line-height: 1.55; color: var(--ts-ink-2); background: var(--ts-tile); border-radius: 6px; padding: 0.75rem 0.9rem; }
.ts-note--amber { background: var(--wp--preset--color--amber-soft, #fef3c7); color: #6b3410; }
.ts-note--ok { background: var(--wp--preset--color--emerald-soft, #e9f7ef); color: #065f46; font-size: 0.95rem; padding: 1rem 1.2rem; }
.ts-buy-notes { margin: 0; border-top: 1px solid var(--ts-line); font-size: 0.8125rem; }
.ts-buy-notes > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--ts-line); }
.ts-buy-notes dt { color: var(--ts-muted); flex-shrink: 0; white-space: nowrap; }
.ts-buy-notes dd { margin: 0; text-align: right; font-weight: 500; min-width: 0; }
.ts-rfq-link { display: inline-block; margin-top: 0.9rem; font-size: 0.875rem; font-weight: 500; color: var(--ts-accent); }
/* Tiles wrap like a 150px auto-fit grid, but a long value gets a double-width tile and the tiles
   stretch to fill every row, so the 1px gaps over the line colour draw only hairlines, never a
   grey block where a cell would be empty (a tile's own outer shadow would be painted over by the
   next tile). */
.ts-key-specs { display: flex; flex-wrap: wrap; gap: 1px; background: var(--ts-line); border-radius: var(--ts-radius); overflow: hidden; box-shadow: 0 0 0 1px var(--ts-line); }
.ts-key-spec { flex: 1 1 150px; min-width: 0; box-sizing: border-box; background: var(--ts-surface); padding: 1.25rem 1.25rem 1.1rem; }
.ts-key-spec__value { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ts-key-spec__label { font-size: 0.75rem; color: var(--ts-muted); margin-top: 0.25rem; }
.ts-key-spec--long { flex: 2 1 300px; }
.ts-key-spec--long .ts-key-spec__value { font-size: 1rem; font-weight: 500; } /* values over 16 characters */
.ts-model-part { white-space: nowrap; }
.ts-spec-table h3 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ts-muted); margin: 1.75rem 0 0.25rem; font-weight: 600; }
.ts-spec-table dl { margin: 0; }
.ts-spec-table dl > div { display: grid; grid-template-columns: minmax(140px, 38%) 1fr; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--ts-line); font-size: 0.9rem; }
.ts-spec-table dt { color: var(--ts-muted); }
.ts-spec-table dd { margin: 0; font-variant-numeric: tabular-nums; }
.ts-source-note { font-size: 0.75rem; color: var(--ts-muted); }
.ts-source-note a { text-decoration: underline; text-underline-offset: 2px; }

/* Supplier cards */
.ts-supplier-card { display: block; background: var(--ts-surface); border-radius: var(--ts-radius); box-shadow: 0 0 0 1px var(--ts-line); overflow: hidden; color: var(--ts-ink); transition: box-shadow .15s ease, transform .15s ease; }
.ts-supplier-card:hover { box-shadow: 0 0 0 1px var(--ts-ink-2); color: var(--ts-ink); }
.ts-supplier-card__body { padding: 1rem 1.1rem 1.1rem; }
.ts-supplier-card__name { font-weight: 600; font-size: 0.95rem; line-height: 1.3; }
.ts-supplier-card__cn { color: var(--ts-muted); font-size: 0.8125rem; margin-top: 0.15rem; }
.ts-supplier-card__meta { color: var(--ts-muted); font-size: 0.78rem; margin-top: 0.5rem; }
.ts-supplier-card__badges { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.6rem; }
.ts-supplier-panel .ts-supplier-card { max-width: 420px; }
.ts-supplier-rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.ts-directory section { margin-bottom: 3rem; }
.ts-directory__prov { font-family: var(--ts-serif); font-weight: 400; font-size: 1.6rem; margin: 0 0 1rem; }
.ts-directory__prov span { font-family: var(--wp--preset--font-family--sans); font-size: 0.875rem; color: var(--ts-subtle); }

/* Brand (supplier) storefront header */
.ts-brand-header { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.ts-brand-header__name { font-family: var(--ts-serif); font-weight: 400; line-height: 1.05; margin: 0; } /* size: theme.json's H1 scale */
.ts-brand-header__cn { color: var(--ts-muted); margin: 0.5rem 0 0; }
.ts-brand-header__desc { color: var(--ts-ink-2); max-width: 52ch; }
.ts-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 2rem; margin: 1.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--ts-line); }
.ts-facts dt { font-size: 0.75rem; color: var(--ts-muted); }
.ts-facts dd { margin: 0.15rem 0 0; font-weight: 500; }

/* Request a quote form */
.ts-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; }
.ts-field { display: grid; gap: 0.35rem; font-size: 14px; font-weight: 500; }
/* One label style for the quote form and the account and checkout forms. */
.ts-field > span, .woocommerce form .form-row label { font-size: 14px; font-weight: 500; }
.ts-field--message { grid-column: 1 / -1; }
/* The theme's account and checkout field: 12px corners, #d6d6d6 border, 16px text (iOS does not zoom), 50px tall. */
.ts-field input, .ts-field textarea, .ts-field select { font: inherit; font-size: 16px; font-weight: 400; padding: 0.75rem 0.9rem; min-height: 50px; box-sizing: border-box; border: 1px solid #d6d6d6; border-radius: 12px; background: var(--ts-surface); color: var(--ts-ink); }
.ts-field--files { grid-column: 1 / -1; }
.ts-field--files input[type=file] { width: 100%; min-width: 0; box-sizing: border-box; border: 1px dashed var(--ts-line); border-radius: 12px; padding: 0.9rem; }
.ts-field--files small { font-weight: 400; }
/* The field the server rejected (the note above the form says why). */
.ts-field [aria-invalid="true"], .ts-field--files input[aria-invalid="true"] { border-color: #b45309; }
.ts-field input:focus, .ts-field textarea:focus, .ts-field select:focus { outline: 2px solid var(--ts-accent); outline-offset: 1px; border-color: transparent; }
.ts-form button { grid-column: 1 / -1; justify-self: start; cursor: pointer; }
.ts-hp { position: absolute; left: -9999px; }
/* Financing: the form on /financing/, the product page row and the Robot Arms line (financing.php). */
.ts-field--wide, .ts-form__fine { grid-column: 1 / -1; }
.ts-form__fine { margin: 0; font-size: 0.8125rem; color: var(--ts-muted); }
.ts-finance-callout { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.35rem 0.75rem; margin: 0.9rem 0 0.25rem; padding: 0.75rem 0.9rem; border: 1px solid var(--ts-line); border-radius: 12px; color: var(--ts-ink); text-decoration: none; font-size: 0.875rem; line-height: 1.4; }
.ts-finance-callout:hover { border-color: var(--ts-ink-2); }
.ts-finance-callout__icon { color: var(--ts-accent); }
.ts-finance-callout__text { color: var(--ts-ink-2); }
.ts-finance-callout__go { font-weight: 500; white-space: nowrap; }
/* Phones: the link goes under the text, beside the icon's column. */
@media (max-width: 480px) { .ts-finance-callout { grid-template-columns: auto 1fr; align-items: start; } .ts-finance-callout__go { grid-column: 2; } }
.ts-finance-line { margin: 0.75rem 0 1rem; font-size: 0.875rem; color: var(--ts-ink-2); }
.ts-finance-line a { font-weight: 500; }
.ts-finance-options { gap: 1.25rem; }
.ts-finance-options > .wp-block-column { border: 1px solid var(--ts-line); border-radius: 12px; padding: 1.25rem 1.4rem; }
.ts-finance-options h3 { margin: 0 0 0.5rem; font-size: 1.125rem; }
.ts-finance-options ul { padding-left: 1.1rem; margin-bottom: 0; }
.ts-finance-fine { margin-top: 1.5rem; font-size: 0.8125rem; color: var(--ts-muted); }

/* Pilot banner */

@media (max-width: 781px) {
	.ts-supplier-rail { grid-template-columns: 1fr; }
	.ts-brand-header { grid-template-columns: 1fr; }
	.ts-form { grid-template-columns: 1fr; }
}

/* Spec range filters */
.ts-specfilters { margin-bottom: 1.25rem; }
.ts-range { border: 0; margin: 0; padding: 0; min-width: 0; }
.ts-range legend span { text-transform: none; letter-spacing: 0; color: var(--ts-subtle); font-weight: 400; }
/* Sliders: grey 4px track, the chosen span in ink (market.js sets --lo/--hi), white thumbs. */
.ts-range__slider { position: relative; height: 18px; margin: 0.35rem 0 0.6rem; --lo: 0%; --hi: 100%; }
.ts-range__slider input[type=range] { position: absolute; inset: 0; width: 100%; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; height: 18px; z-index: 1; }
.ts-range__slider::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 4px; background: #e4e4e4; }
.ts-range__slider::after { content: ""; position: absolute; top: 7px; height: 4px; left: var(--lo); right: calc(100% - var(--hi)); background: var(--ts-ink); }
.ts-range__slider input[type=range]::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--ts-ink); cursor: grab; }
.ts-range__slider input[type=range]::-moz-range-thumb { pointer-events: auto; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--ts-ink); cursor: grab; }
.ts-range__inputs { display: flex; align-items: center; gap: 0.4rem; }
/* No label margin, so the dash sits on the boxes' centre line. */
.ts-range__inputs label { flex: 1; min-width: 0; margin: 0; }
.ts-range__inputs input { width: 100%; font: inherit; }
.ts-range__dash { color: var(--ts-subtle); }
.ts-ranges__actions { display: flex; align-items: center; gap: 0.75rem; }
.ts-btn-sm { padding: 0.5rem 1rem !important; font-size: 0.8125rem !important; }

/* Compare */
.ts-compare-toggle { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.4rem; background: none; border: 0; padding: 0; font: inherit; font-size: 0.78rem; color: var(--ts-muted); cursor: pointer; }
.ts-compare-toggle__box { width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--ts-subtle); display: inline-block; }
.ts-compare-toggle.is-on { color: var(--ts-ink); font-weight: 600; }
.ts-compare-toggle.is-on .ts-compare-toggle__box { background: var(--ts-ink); box-shadow: none; position: relative; }
.ts-compare-toggle.is-on .ts-compare-toggle__box::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* Centred between the 1rem gutters: as wide as its content, never past the gutters. */
.ts-compare-tray { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; margin-inline: auto; width: fit-content; max-width: min(1100px, 100% - 2rem); box-sizing: border-box; z-index: 60; display: flex; align-items: center; gap: 0.75rem; background: var(--ts-ink); color: #fff; border-radius: 3px; padding: 0.5rem 0.6rem 0.5rem 1.1rem; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.ts-compare-tray[hidden] { display: none; }
.ts-compare-tray__items { display: flex; align-items: center; gap: 0.4rem; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.ts-compare-tray__go { background: #fff !important; color: var(--ts-ink) !important; padding: 0.5rem 1rem !important; font-size: 0.8125rem !important; white-space: nowrap; flex: 0 0 auto; }
.ts-compare-tray__go.is-disabled { opacity: .5; pointer-events: none; }
.ts-compare-tray__clear { background: none; border: 0; color: #d6d3d1; font: inherit; font-size: 0.75rem; cursor: pointer; white-space: nowrap; flex: 0 0 auto; }
/* Phones: no room for names, so the button carries the count across the bar. */
@media (max-width: 600px) {
	.ts-compare-tray { width: auto; padding: 0.4rem 0.4rem 0.4rem 0.5rem; }
	.ts-compare-tray__items { display: none; }
	.ts-compare-tray__go { flex: 1 1 auto; justify-content: center; }
}
/* The compare table scrolls sideways when it must; a soft shadow marks the hidden side, the same
   strength top to bottom (the white covers scroll with the content and hide each shadow at its end). */
.ts-compare { --ts-label: 180px; overflow-x: auto; background: linear-gradient(90deg, var(--ts-surface) 30%, rgba(255,255,255,0)) left / 40px 100% no-repeat local, linear-gradient(270deg, var(--ts-surface) 30%, rgba(255,255,255,0)) right / 40px 100% no-repeat local, linear-gradient(90deg, rgba(0,0,0,.14), transparent) left / 14px 100% no-repeat scroll, linear-gradient(270deg, rgba(0,0,0,.14), transparent) right / 14px 100% no-repeat scroll; }
/* The tile carries the background so the photo's white can multiply into it. */
.ts-compare__differs td { background: color-mix(in srgb, var(--ts-accent-soft) 60%, transparent); }
/* The better value of a spec that has one (more torque, less weight): green. */
.ts-compare__differs td.ts-compare__best { background: #e6f4ea; color: #14532d; font-weight: 600; }
.ts-compare__key { display: inline-block; width: 0.8em; height: 0.8em; border-radius: 2px; vertical-align: -0.05em; margin: 0 0.35em 0 0.9em; background: color-mix(in srgb, var(--ts-accent-soft) 60%, transparent); box-shadow: inset 0 0 0 1px var(--ts-line); }
.ts-compare__key--best { margin-left: 0; background: #e6f4ea; }

/* Applications, datasheet */
.ts-applications { margin-top: 2.5rem; }
.ts-app-list, .ts-tips { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.35rem; font-size: 0.9rem; color: var(--ts-ink-2); }
/* Same sentence-case sub-head as the spec table's (theme.css). */
.ts-applications h3 { font-size: 14px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ts-subtle); margin: 1.5rem 0 0.5rem; }
.ts-datasheet { display: inline-flex; justify-content: center; width: 100%; box-sizing: border-box; margin-top: 0.9rem; background: var(--ts-surface) !important; color: var(--ts-ink) !important; box-shadow: inset 0 0 0 1px var(--ts-ink); }
.ts-datasheet:hover { background: var(--ts-ink) !important; color: #fff !important; }
/* Arms with no public price: a primary Request a quote button replaces Add to cart. */
.ts-request-quote { display: inline-flex; justify-content: center; width: 100%; box-sizing: border-box; margin-top: 0.9rem; }
.ts-price-quote { font-weight: 600; }

/* Collections and guides */
.ts-guides { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; }
.ts-guide { display: block; background: var(--ts-surface); border-radius: 8px; padding: 1.4rem; box-shadow: 0 0 0 1px var(--ts-line); color: var(--ts-ink); }
.ts-guide:hover { box-shadow: 0 0 0 1px var(--ts-ink-2); color: var(--ts-ink); }
.ts-guide__kicker { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ts-accent); font-weight: 700; }
.ts-guide__title { font-family: var(--ts-serif); font-weight: 400; letter-spacing: -0.02em; font-size: 1.5rem; line-height: 1.15; margin: 0.4rem 0 0.6rem; }
.ts-guide p { font-size: 0.875rem; color: var(--ts-muted); margin: 0 0 0.9rem; }
.ts-guide__more { font-size: 0.8125rem; font-weight: 600; }
.ts-collection-intro { margin-top: 1rem; }
.ts-tips--inline { max-width: 70ch; }
.ts-guide-link { margin-top: 0.75rem; font-weight: 600; }
.ts-rail__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.ts-similar, .ts-supplier-more { margin-top: var(--wp--preset--spacing--70, 5rem); }

/* Line icons (includes/home.php) */
.ts-icon { width: 40px; height: 40px; flex: none; }

/* Subcategory tabs on a category page (torque/category-intro) */
.ts-subcats { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Supplier collage: equal tiles on the shared tile colour */
/* The tile colour sits on the collage itself so the photos' white multiplies into it. */
.ts-collage { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 0; aspect-ratio: 16 / 10; background: var(--ts-tile); isolation: isolate; }
.ts-collage img { width: 100%; height: 100%; min-height: 0; object-fit: contain; mix-blend-mode: multiply; padding: 10%; box-sizing: border-box; }
.ts-collage img:first-child { grid-row: span 2; }
.ts-collage--1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.ts-collage--2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.ts-collage--2 img:first-child { grid-row: auto; }
.ts-supplier-rail--grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .ts-supplier-rail--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ts-brand-header .ts-collage { aspect-ratio: 4 / 3; border-radius: 12px; box-shadow: 0 0 0 1px var(--ts-line); }

/* Compare table: equal product columns whatever the name length */
/* --ts-label is the label column; a product column is 160-320px, so two products do not sit far apart. */
.ts-compare table { border-collapse: collapse; width: 100%; min-width: calc(var(--ts-label) + var(--ts-cols, 2) * 160px); max-width: calc(var(--ts-label) + var(--ts-cols, 2) * 320px); table-layout: fixed; font-size: 0.875rem; }
.ts-compare__label-col { width: var(--ts-label); }
@media (min-width: 1024px) { .ts-compare { --ts-label: 230px; } }
@media (min-width: 1280px) { .ts-compare { --ts-label: 260px; } }
.ts-compare th, .ts-compare td { text-align: left; vertical-align: top; padding: 0.75rem 1rem 0.75rem 0; border-bottom: 1px solid var(--ts-line); overflow-wrap: anywhere; }
.ts-compare thead th { border-bottom: 0; padding-bottom: 1.25rem; }
.ts-compare tbody th { color: var(--ts-muted); font-weight: 500; }
.ts-compare td { font-variant-numeric: tabular-nums; }
.ts-compare__link { display: block; color: var(--ts-ink); }
/* A square tile from padding-top, not aspect-ratio: Safari on iPhone sized the photo by its own
   height inside the table cell and drew it under the tile, over the product name. */
.ts-compare__img { display: block; position: relative; width: 100%; max-width: 220px; height: 0; padding-top: 100%; background: var(--ts-tile); border-radius: 8px; overflow: hidden; isolation: isolate; }
.ts-compare__img img { position: absolute; top: 8%; left: 8%; width: 84%; height: 84%; max-width: none; object-fit: contain; mix-blend-mode: multiply; }
.ts-compare__title { display: block; font-weight: 600; font-size: 0.95rem; line-height: 1.3; margin-top: 0.75rem; min-height: 0; }
/* The header is two rows, so names of any length end on one line and the prices below them line up. */
.ts-compare thead .ts-compare__namerow th { vertical-align: bottom; padding-bottom: 0; }
.ts-compare thead .ts-compare__buyrow td { vertical-align: top; padding-top: 0.25rem; border-bottom: 0; }
.ts-compare__supplier { display: block; color: var(--ts-muted); font-size: 0.8rem; margin-top: 0.25rem; }
.ts-compare__price { display: block; margin-top: 0.4rem; font-weight: 600; }
.ts-compare__buy { display: inline-block; margin-top: 0.75rem; padding: 0.55rem 1.1rem !important; font-size: 0.8125rem !important; }
.ts-compare__media { position: relative; max-width: 220px; }
.ts-compare__remove { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; display: grid; place-items: center; background: #fff; border: 1px solid var(--ts-line); border-radius: 50%; padding: 0; color: var(--ts-ink); font: inherit; font-size: 1.15rem; line-height: 1; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.ts-compare__remove:hover, .ts-compare__remove:focus-visible { background: var(--ts-ink); color: #fff; border-color: var(--ts-ink); }
.ts-compare-tray__item { font-size: 0.75rem; background: rgba(255,255,255,.12); border-radius: 3px; padding: 0.2rem 0.6rem; white-space: nowrap; max-width: 24ch; min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1024px) { .ts-compare-tray__item { max-width: 32ch; } }
[data-test="compare-same"] { margin-top: 1.25rem; }
/* Phones and iPads in portrait: the label column stays put while the products scroll under it;
   on phones it is narrow, so the second product starts on screen. */
@media (max-width: 781px) {
	.ts-compare tbody th, .ts-compare thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--ts-surface); padding-right: 0.75rem; }
	.ts-compare tbody th { font-size: 0.8125rem; }
}
@media (max-width: 600px) {
	.ts-compare { --ts-label: 112px; }
	.ts-compare table { min-width: calc(var(--ts-label) + var(--ts-cols, 2) * 150px); }
}

/* Request a quote: the product it is about */
.ts-rfq-product { display: flex; gap: 1rem; align-items: center; background: var(--ts-surface); border-radius: 6px; box-shadow: 0 0 0 1px var(--ts-line); padding: 1rem; margin-bottom: 1.75rem; }
.ts-rfq-product__img { width: 96px; height: 96px; flex: none; background: var(--ts-tile); border-radius: 8px; overflow: hidden; display: block; }
.ts-rfq-product__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 8%; box-sizing: border-box; }
.ts-rfq-product .ts-eyebrow { margin: 0 0 0.2rem; }
.ts-rfq-product__title { font-weight: 600; color: var(--ts-ink); }
.ts-rfq-product__meta { margin: 0.15rem 0 0; font-size: 0.8125rem; color: var(--ts-muted); }
.ts-rfq-product__hint { margin: 0.35rem 0 0; font-size: 0.8125rem; color: var(--ts-ink-2); }

/* My account: a clear menu, and addresses and cards as boxes with buttons */
.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) > :not(.woocommerce-MyAccount-navigation):not(.woocommerce-MyAccount-content) { grid-column: 1 / -1; }
.woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content { float: none !important; width: auto !important; grid-row: 1; }
.woocommerce-MyAccount-navigation { grid-column: 1; }
.woocommerce-MyAccount-content { grid-column: 2; }
.woocommerce-MyAccount-navigation { position: sticky; top: 100px; }
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0.4rem; display: grid; gap: 2px; background: var(--ts-surface); border-radius: 6px; box-shadow: 0 0 0 1px var(--ts-line); }
.woocommerce-MyAccount-navigation li { margin: 0 !important; padding: 0 !important; border: 0 !important; }
.woocommerce-MyAccount-navigation a { display: block; padding: 0.6rem 0.8rem; border-radius: 6px; font-size: 0.9rem; font-weight: 500; color: var(--ts-ink-2); text-decoration: none !important; }
.woocommerce-MyAccount-navigation a:hover { background: var(--ts-tile); color: var(--ts-ink); }
.woocommerce-MyAccount-navigation .is-active a { background: var(--ts-ink); color: #fff; }
.woocommerce-MyAccount-navigation-link--customer-logout { border-top: 1px solid var(--ts-line); margin-top: 0.3rem !important; padding-top: 0.3rem; }
.woocommerce-MyAccount-content > p:first-child { margin-top: 0; color: var(--ts-ink-2); }
.woocommerce-Addresses { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.25rem; }
.woocommerce-Addresses::before, .woocommerce-Addresses::after { content: none !important; }
.woocommerce-Address { width: auto !important; float: none !important; background: var(--ts-surface); border-radius: 6px; box-shadow: 0 0 0 1px var(--ts-line); padding: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
.woocommerce-Address-title { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.woocommerce-Address-title h2, .woocommerce-Address-title h3 { font-size: 1.25rem !important; margin: 0 !important; }
.woocommerce-Address-title a.edit { display: inline-block; background: var(--ts-ink); color: #fff !important; border-radius: 3px; padding: 0.55rem 1rem; font-size: 0.8125rem; font-weight: 600; text-decoration: none !important; }
.woocommerce-Address-title a.edit:hover { background: var(--ts-accent); }
.woocommerce-Address address { font-style: normal; color: var(--ts-ink-2); font-size: 0.9rem; }
.ts-account-intro { background: var(--ts-tile); border-radius: 6px; padding: 1rem 1.2rem; margin-bottom: 1.25rem; font-size: 0.9rem; }
.ts-account-intro p { margin: 0; }
.ts-account-intro p + p { margin-top: 0.5rem; }
.woocommerce-MyAccount-content a.button, .woocommerce-MyAccount-content .button { background: var(--ts-ink); color: #fff; border-radius: 3px; padding: 0.7rem 1.2rem; font-weight: 600; font-size: 0.875rem; text-decoration: none; display: inline-block; border: 0; }
.woocommerce-MyAccount-content a.button:hover, .woocommerce-MyAccount-content .button:hover { background: var(--ts-accent); }
@media (max-width: 781px) {
	.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation), .woocommerce-Addresses { grid-template-columns: 1fr; }
	.woocommerce-MyAccount-navigation { position: static; }
	.woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content { grid-column: 1; grid-row: auto; }
}

/* Catalog table view (includes/table-view.php): dense, grouped by category, sortable. */
.ts-toolbar { gap: 1rem; flex-wrap: wrap !important; }
.ts-toolbar > .ts-view-toggle { margin-left: auto; }
.ts-view-toggle { display: inline-flex; align-items: center; height: 34px; box-sizing: border-box; padding: 2px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--ts-line); }
.ts-view-toggle__opt { font-size: 0.8125rem; line-height: 1; padding: 0.45rem 0.8rem; border-radius: 2px; color: var(--ts-muted); text-decoration: none; }
.ts-view-toggle__opt:hover { color: var(--ts-ink); }
.ts-view-toggle__opt.is-on { background: var(--ts-ink); color: var(--ts-surface); }
.ts-ptable__group + .ts-ptable__group { margin-top: 2.5rem; }
.ts-ptable__title { font-size: 1rem; font-weight: 600; margin: 0 0 0.5rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.6rem; }
.ts-ptable__title a { color: inherit; text-decoration: none; }
.ts-ptable__title a:hover { color: var(--ts-accent); }
.ts-ptable__count, .ts-ptable__same { font-size: 0.8125rem; font-weight: 400; color: var(--ts-muted); }
.ts-ptable__same::before { content: "·"; margin-right: 0.6rem; color: var(--ts-subtle); }
.ts-ptable__scroll { overflow-x: auto; }
.ts-ptable table { border-collapse: collapse; width: 100%; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.ts-ptable th, .ts-ptable td { text-align: left; padding: 0.45rem 0.6rem 0.45rem 0; border-bottom: 1px solid var(--ts-line); vertical-align: middle; white-space: nowrap; }
.ts-ptable thead th { font-weight: 500; color: var(--ts-muted); border-bottom-color: var(--ts-ink); background: var(--ts-surface); }
/* The sort arrow is inline after the label (no space before it), so a wrapped label keeps it beside its last word. */
.ts-ptable thead button { all: unset; cursor: pointer; }
.ts-ptable thead button::after { content: "↕"; margin-left: 0.3em; opacity: 0.35; font-size: 0.85em; }
.ts-ptable th[aria-sort="ascending"] button::after { content: "↑"; opacity: 1; }
.ts-ptable th[aria-sort="descending"] button::after { content: "↓"; opacity: 1; }
.ts-ptable thead button:focus-visible { outline: 2px solid var(--ts-accent); outline-offset: 2px; }
.ts-ptable .ts-ptable__num { text-align: right; padding-left: 0.6rem; }
.ts-ptable td.ts-ptable__text { white-space: normal; line-height: 1.3; }
.ts-ptable td.ts-ptable__name { white-space: normal; }
/* From 1280px (the thead is hidden below that) every category's table starts its columns at the
   same place: Compare, Product and Price have fixed widths, the spec columns share what is left
   and are centred under their headers. Headers are two lines tall in every group, bottom-aligned,
   and labels wrap only between words. */
@media (min-width: 1280px) {
	.ts-ptable table { table-layout: fixed; }
	.ts-ptable th.ts-ptable__cmp { width: 2rem; }
	.ts-ptable th.ts-ptable__name { width: 26%; }
	.ts-ptable th.ts-ptable__price { width: 6rem; }
	.ts-ptable thead { font-size: 0.75rem; line-height: 1.3; }
	.ts-ptable thead th { height: 2.6em; vertical-align: bottom; }
	.ts-ptable th:not(.ts-ptable__name):not(.ts-ptable__cmp), .ts-ptable td:not(.ts-ptable__name):not(.ts-ptable__cmp) { text-align: center; padding-left: 0.3rem; padding-right: 0.3rem; }
	.ts-ptable thead th, .ts-ptable td:not(.ts-ptable__name) { white-space: normal; overflow-wrap: normal; word-break: normal; }
}
.ts-ptable tbody tr:hover { background: var(--ts-tile); }
.ts-ptable .ts-ptable__cmp { width: 1.75rem; }
.ts-ptable .ts-compare-toggle--row { margin: 0; padding: 0.35rem; }
.ts-ptable__name a { display: flex; align-items: center; gap: 0.6rem; color: var(--ts-ink); text-decoration: none; }
.ts-ptable__name a:hover .ts-ptable__ptitle { color: var(--ts-accent); text-decoration: underline; text-underline-offset: 2px; }
.ts-ptable__img { flex: none; width: 36px; height: 36px; background: var(--ts-tile); border-radius: 4px; overflow: hidden; }
.ts-ptable__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ts-ptable__label { display: grid; min-width: 0; }
.ts-ptable__ptitle { font-weight: 500; line-height: 1.3; }
.ts-ptable__sup { font-size: 0.75rem; color: var(--ts-muted); }
.ts-ptable__model { font-family: var(--ts-mono); font-size: 0.75rem; }
.ts-ptable td.ts-ptable__price { font-weight: 600; color: var(--ts-ink); }
.ts-ptable__price .ts-price-from { font-weight: 400; display: block; font-size: 0.75rem; line-height: 1.1; color: var(--ts-muted); }
/* Below 1280px (phones, iPads either way round; the spec columns cannot fit beside the filters)
   each row is a compact block, name and price on top,
   specs as label/value pairs underneath. */
@media (max-width: 1279px) {
	.ts-ptable__same { flex-basis: 100%; }
	.ts-ptable__same::before { display: none; }
	.ts-ptable__scroll { overflow: visible; }
	.ts-ptable table, .ts-ptable tbody { display: block; }
	.ts-ptable thead { display: none; }
	.ts-ptable tbody tr { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) auto; gap: 0.15rem 0.75rem; padding: 0.7rem 0; border-bottom: 1px solid var(--ts-line); }
	.ts-ptable tbody td { border: 0; padding: 0; white-space: normal; text-align: left; }
	.ts-ptable tbody td.ts-ptable__cmp { grid-row: 1; grid-column: 1; }
	.ts-ptable tbody td.ts-ptable__name { grid-row: 1; grid-column: 2; min-width: 0; }
	.ts-ptable tbody td.ts-ptable__price { grid-row: 1; grid-column: 3; text-align: right; }
	.ts-ptable tbody td[data-label] { grid-column: 2 / 4; font-size: 0.75rem; display: flex; gap: 0.5rem; text-align: left; padding-left: calc(36px + 0.6rem); }
	.ts-ptable tbody td[data-label]::before { content: attr(data-label); color: var(--ts-muted); min-width: 7rem; }
	.ts-ptable tbody td[data-label]:has(> .ts-subtle) { display: none; }
}

/* How to compare (category intro): how to size the category, then the terms that decide a choice. */
.ts-howto { margin-top: 1.25rem; max-width: 72rem; }
.ts-howto__intro { margin: 0 0 0.75rem; font-size: 15px; color: var(--ts-ink-2); max-width: 70ch; }
.ts-howto__terms summary { cursor: pointer; font-size: 0.8125rem; font-weight: 600; color: var(--ts-ink); list-style: none; display: inline-flex; gap: 0.4rem; align-items: center; }
.ts-howto__terms summary::-webkit-details-marker { display: none; }
.ts-howto__terms summary::before { content: "+"; display: inline-grid; place-items: center; width: 1.1rem; height: 1.1rem; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--ts-line); font-weight: 400; color: var(--ts-muted); }
.ts-howto__terms[open] summary::before { content: "–"; }
.ts-howto__terms dl { margin: 0.9rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0.9rem 1.75rem; }
.ts-howto__terms dt { font-size: 0.8125rem; font-weight: 600; color: var(--ts-ink); margin-bottom: 0.2rem; }
.ts-howto__terms dd { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--ts-ink-2); }

/* Capability filters (includes/facets.php), in the sidebar's checkbox-list style. */
.ts-facet { border: 0; padding: 0; margin: 0; }
.ts-facet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.ts-facet__opt:hover { color: var(--ts-accent); }

/* Versions of one model (includes/variants.php): each with its price and own Add to cart. */
.ts-options { margin-top: 1rem; }
.ts-options__title { font-size: 0.875rem; font-weight: 600; margin: 0 0 0.5rem; }
.ts-options table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.ts-options th, .ts-options td { text-align: left; padding: 0.5rem 0.5rem 0.5rem 0; border-bottom: 1px solid var(--ts-line); vertical-align: middle; }
.ts-options thead th { font-weight: 500; color: var(--ts-muted); border-bottom-color: var(--ts-ink); }
.ts-options tbody th { font-weight: 500; color: var(--ts-ink); }
.ts-options .ts-options__num { text-align: right; white-space: nowrap; }
.ts-options td.ts-options__num { font-weight: 600; color: var(--ts-ink); }
.ts-options td.ts-options__vol { font-weight: 400; color: var(--ts-ink-2); }
.ts-options__buy { text-align: right; padding-right: 0 !important; }
.ts-options__add { font-size: 0.8125rem !important; padding: 0.45rem 0.9rem !important; white-space: nowrap; }
.ts-options__note { font-size: 0.8125rem; color: var(--ts-muted); margin: 0.6rem 0 0; line-height: 1.5; }
.ts-ratio-table { margin-top: 2rem; }
.ts-ratio-table table { border-collapse: collapse; width: 100%; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.ts-ratio-table th, .ts-ratio-table td { text-align: right; padding: 0.45rem 0 0.45rem 1rem; border-bottom: 1px solid var(--ts-line); white-space: nowrap; }
.ts-ratio-table th:first-child { text-align: left; padding-left: 0; }
.ts-ratio-table thead th { font-weight: 500; color: var(--ts-muted); border-bottom-color: var(--ts-ink); white-space: normal; }
@media (max-width: 600px) { .ts-options__add { padding: 0.4rem 0.7rem !important; } }

/* Catalog sidebar, one look throughout (WooCommerce's filters set it): small uppercase headings,
   filled grey checkboxes with the count in brackets, a 4px slider bar, one input style. */
.ts-shop-sidebar .ts-filter-heading { font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: var(--wp--preset--color--muted, #5b5b5b) !important; margin: 0 0 0.6rem !important; }
.ts-shop-sidebar .ts-filter-unit { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ts-subtle); }
.ts-specfilters .ts-facet, .ts-specfilters .ts-range { border: 0; border-bottom: 1px solid var(--ts-line); padding: 0 0 1.1rem; margin: 0 0 1.1rem; min-width: 0; }
.ts-specfilters .ts-facet legend, .ts-specfilters .ts-range legend { padding: 0; float: left; width: 100%; }
.ts-specfilters .ts-facet ul { clear: both; list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.ts-specfilters .ts-range__slider { clear: both; }
.ts-facet__opt { display: inline-flex; align-items: flex-start; gap: 0.55rem; font-size: 0.875rem; color: var(--ts-ink); text-decoration: none; }
.ts-facet__opt:hover .ts-facet__label { text-decoration: underline; text-underline-offset: 2px; }
.ts-facet__box { width: 14px; height: 14px; flex: none; border-radius: 2px; background: #e4e4e4; position: relative; box-shadow: none; margin-top: 0.2em; } /* on the first line of a wrapping label */
/* An option that would list nothing (sidebar.php): shown, but not a link. */
.ts-facet__opt.is-empty { opacity: .45; cursor: default; }
.ts-facet__opt.is-empty:hover .ts-facet__label { text-decoration: none; }
.ts-facet__opt.is-on .ts-facet__box { background: var(--ts-ink); }
.ts-facet__opt.is-on .ts-facet__box::after { content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 3.5px; height: 7.5px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.ts-shop-sidebar .wc-block-product-filter-checkbox-list__label { font-size: 0.875rem; }
/* Sections: what a group of filters is for. */
.ts-fsec--all + .ts-fsec, .ts-fsec + .ts-fsec { margin-top: 0.4rem; }
.ts-fsec__title { font-size: 0.8125rem; font-weight: 600; color: var(--ts-ink); margin: 0 0 0.9rem; padding-top: 0.9rem; border-top: 2px solid var(--ts-ink); }
.ts-shop-sidebar .wc-block-product-filter-price-slider__range { height: 18px; margin: 0.35rem 0 0.6rem; }
.ts-shop-sidebar .wc-block-product-filter-price-slider__range .range-bar { height: 4px; }
/* One input style for every min/max box, ours and WooCommerce's price boxes. */
.ts-range__inputs input, .ts-shop-sidebar .wc-block-product-filter-price-slider__content input[type=text] { font-family: inherit !important; font-size: 13px !important; height: 32px; padding: 0 8px !important; border: 1px solid var(--ts-line) !important; border-radius: 4px !important; background: var(--ts-surface); color: var(--ts-ink); box-sizing: border-box; }
.ts-range__inputs input::placeholder { color: var(--ts-subtle); }

/* Category links above the table: plain tabs, not pills. */
.ts-archive-head .ts-subcats { gap: 0 1.6rem; border-bottom: 1px solid var(--ts-line); }
.ts-archive-head .ts-subcats .ts-pill { border-radius: 0; background: none; box-shadow: none; padding: 0.55rem 0; margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: 0.875rem; font-weight: 500; color: var(--ts-ink-2); }
.ts-archive-head .ts-subcats .ts-pill:hover { background: none; box-shadow: none; color: var(--ts-ink); border-bottom-color: var(--ts-line); }
.ts-archive-head .ts-subcats .ts-pill.is-current { color: var(--ts-ink); border-bottom-color: var(--ts-ink); }
.ts-archive-head .ts-subcats .ts-pill span { color: var(--ts-subtle); font-weight: 400; }

/* Toolbar: count, Table/Grid and sorting share one centre line and one height. */
.ts-toolbar { align-items: center !important; }
.ts-toolbar > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.ts-toolbar .wc-block-catalog-sorting, .ts-toolbar .woocommerce-ordering { display: flex; align-items: center; margin: 0 !important; }
.ts-toolbar select, .ts-toolbar .orderby { height: 34px; padding: 0 2rem 0 0.8rem !important; border-radius: 4px !important; line-height: 32px; }

/* Active filters: every kind as a chip with its own remove, and one Clear all. */
.ts-active { margin: 0 0 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--ts-line); }
.ts-active ul { list-style: none; margin: 0 0 0.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ts-fchip { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; line-height: 1.2; color: var(--ts-ink); background: var(--ts-tile); border: 1px solid transparent; border-radius: 3px; padding: 0.3rem 0.55rem; text-decoration: none; }
.ts-fchip span { font-size: 0.95rem; line-height: 1; color: var(--ts-muted); }
.ts-fchip:hover { border-color: var(--ts-ink); }
.ts-fchip:hover span { color: var(--ts-ink); }
.ts-active__clear { font-size: 0.75rem; color: var(--ts-muted); }
/* While a filter loads in the background, the results dim instead of the page reloading. */
.ts-shop-layout.is-loading .ts-shop-main { opacity: .45; transition: opacity .15s; pointer-events: none; }

/* Product photos sit on the tile colour: the white of a studio shot blends into it. */
.ts-ptable__img img, .ts-card-img img, .ts-catcard__img img { mix-blend-mode: multiply; }

/* Category landing (McMaster-style): a card per subcategory, each opening its table. */
.ts-cat-landing .ts-shop-layout, .ts-cat-landing .ts-toolbar { display: none; }
/* Cards are 260-340px and empty tracks collapse, so two cards do not leave half the row as empty columns
   (at most 340 so two still fit side by side on an iPad in portrait). One full-width card on phones. */
.ts-catcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 340px)); gap: 1.25rem; margin: 1.5rem 0 0.75rem; }
@media (max-width: 600px) { .ts-catcards { grid-template-columns: minmax(0, 1fr); } }
/* The directory's own categories fill the row: five across on a laptop, two on a tablet, one on a phone. */
.ts-catcards--top { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
/* The box carries the border: the card's link, then (on the directory) its subcategory links. */
.ts-catcard-box { display: flex; flex-direction: column; border: 1px solid var(--ts-line); border-radius: 10px; overflow: hidden; background: #fff; transition: border-color .15s, box-shadow .15s; }
.ts-catcard-box:hover { border-color: var(--ts-ink); box-shadow: 0 10px 24px rgba(0,0,0,.06); }
.ts-catcard { display: flex; flex-direction: column; flex: 1 0 auto; color: var(--ts-ink); text-decoration: none; }
.ts-catcard:focus-visible { outline: 2px solid var(--ts-accent); outline-offset: -2px; }
.ts-catcard__subs { list-style: none; margin: 0; padding: 0 1.1rem 0.25rem; border-top: 1px solid var(--ts-line); }
.ts-catcard__subs li + li { border-top: 1px solid var(--ts-line); }
.ts-catcard__subs a { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.6rem 0; font-size: 0.8125rem; line-height: 1.35; color: var(--ts-ink-2); text-decoration: none; }
.ts-catcard__subs a:hover, .ts-catcard__subs a:focus-visible { color: var(--ts-ink); text-decoration: underline; text-underline-offset: 3px; }
.ts-catcard__subs a span { color: var(--ts-subtle); font-variant-numeric: tabular-nums; text-decoration: none; }
/* On phones the directory's cards are rows (photo left, text right), so all five fit in about two screens. */
@media (max-width: 600px) {
	.ts-catcards--top { gap: 0.75rem; }
	.ts-catcards--top .ts-catcard { flex-direction: row; align-items: stretch; }
	.ts-catcards--top .ts-catcard__img { flex: 0 0 96px; width: 96px; aspect-ratio: auto; padding: 10px; }
	.ts-catcards--top .ts-catcard__body { padding: 0.8rem 0.9rem; gap: 0.25rem; }
	.ts-catcards--top .ts-catcard__name { font-size: 1rem; }
	.ts-catcards--top .ts-catcard__subs { padding: 0 0.9rem 0.2rem; }
}
.ts-catcard__img { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: var(--ts-tile); padding: 8%; box-sizing: border-box; overflow: hidden; }
.ts-catcard__img img { width: 100%; height: 100%; max-height: 100%; object-fit: contain; display: block; }
.ts-catcard__body { display: grid; gap: 0.35rem; padding: 1rem 1.1rem 1.15rem; }
.ts-catcard__name { font-weight: 600; font-size: 1.05rem; line-height: 1.25; }
.ts-catcard:hover .ts-catcard__name { color: var(--ts-accent); }
.ts-catcard__meta { font-size: 0.75rem; color: var(--ts-muted); margin-top: 0.15rem; }
.ts-catcards__all { margin: 0 0 1.5rem; font-size: 0.875rem; }
.ts-catcards__all a { color: var(--ts-ink-2); }
/* The other top-level groups on the directory (Motors & Motion Control), under Robot Parts. */
/* The front page (the directory as a marketplace, 2026-10-29): a full-width video hero, a dark band
   of promises, photo tiles for Parts and Finished Products, and a row of popular products in each. */
.ts-market-front .ts-archive-head { padding-top: 0 !important; }
.ts-market-front .wp-site-blocks > main { margin-top: 0 !important; } /* the hero meets the promotion bar */
/* 100vw includes a classic scrollbar (Windows), so the page must not scroll sideways by that width. */
.ts-market-front .wp-site-blocks { overflow-x: clip; }
.ts-hero { position: relative; display: flex; align-items: flex-end; width: 100vw; margin-left: calc(50% - 50vw); min-height: min(72vh, 640px); overflow: hidden; background-color: #111; background-position: center; background-size: cover; background-repeat: no-repeat; color: #fff; isolation: isolate; }
.ts-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; pointer-events: none; opacity: 0; transition: opacity .35s ease; }
/* The video shows only once it plays; until then the poster (the hero's background) shows. */
.ts-hero.is-playing .ts-hero__video { opacity: 1; }
/* No play button or controls on the hero video, also when a phone does not start it (the poster shows). */
.ts-hero__video::-webkit-media-controls, .ts-hero__video::-webkit-media-controls-panel, .ts-hero__video::-webkit-media-controls-overlay-play-button, .ts-hero__video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; opacity: 0 !important; }
.ts-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,10,12,.15) 0%, rgba(10,10,12,.35) 45%, rgba(10,10,12,.82) 100%); }
/* The hero's text and the band's items line up with the page content: the theme's root padding. */
.ts-hero__in { width: 100%; padding: 0 var(--wp--style--root--padding-right, 2rem) clamp(2rem, 6vh, 4rem) var(--wp--style--root--padding-left, 2rem); box-sizing: border-box; }
.ts-hero__title { margin: 0; max-width: 15ch; font-family: var(--ts-display); font-weight: 500; font-size: clamp(2.4rem, 5.2vw, 4.5rem); line-height: 1.02; letter-spacing: -0.03em; color: #fff; }
.ts-hero__lede { margin: 1rem 0 0; max-width: 34rem; font-size: clamp(1rem, 1.3vw, 1.175rem); line-height: 1.5; color: rgba(255,255,255,.86); }
.ts-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.ts-hero__btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.5rem; border-radius: 10px; background: #fff; color: var(--ts-ink); font-weight: 600; font-size: 0.9375rem; text-decoration: none; border: 1px solid #fff; transition: background .15s, color .15s; }
.ts-hero__btn:hover { background: var(--ts-accent); border-color: var(--ts-accent); color: #fff; }
.ts-hero__btn--ghost { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.55); backdrop-filter: blur(6px); }
.ts-hero__btn--ghost:hover { background: #fff; border-color: #fff; color: var(--ts-ink); }
.ts-hero__btn:focus-visible { outline: 2px solid var(--ts-accent); outline-offset: 3px; }
.ts-hero__sourcing { margin: 1.1rem 0 0; font-size: 0.9375rem; }
.ts-hero__sourcing a { color: rgba(255,255,255,.9); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,.45); }
.ts-hero__sourcing a:hover { color: #fff; text-decoration-color: #fff; }

.ts-promises { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100vw; margin: 0 0 0 calc(50% - 50vw); padding: 1.35rem var(--wp--style--root--padding-right, 2rem) 1.35rem var(--wp--style--root--padding-left, 2rem); box-sizing: border-box; list-style: none; background: var(--ts-ink); color: #fff; gap: 1.5rem; }
.ts-promises li, .ts-promises a { display: flex; align-items: center; gap: 0.85rem; color: inherit; text-decoration: none; }
/* Each promise has a solid white mark in a dark rounded-square tile. */
.ts-promise__mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 11px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: #fff; font: 700 14px/1 var(--ts-display); letter-spacing: -0.02em; }
.ts-promise__mark svg { width: 22px; height: 22px; fill: currentColor; }
.ts-promises strong { display: block; font-size: 1rem; font-weight: 600; }
.ts-promises span span { display: block; font-size: 0.8125rem; color: rgba(255,255,255,.66); }
.ts-promises a:hover strong { text-decoration: underline; text-underline-offset: 3px; }

.ts-market-sec { margin-top: 3rem; scroll-margin-top: 96px; }
.ts-market-sec + .ts-market-sec { padding-top: 2.5rem; border-top: 1px solid var(--ts-line); }
.ts-market-sec__title { font-family: var(--ts-display); font-weight: 500; font-size: clamp(1.75rem, 2.6vw, 2.25rem); letter-spacing: -0.02em; margin: 0; }
.ts-market-sec__title span { display: block; margin-top: 0.3rem; font-size: 0.9375rem; font-weight: 400; letter-spacing: 0; color: var(--ts-muted); }

.ts-tiles { display: grid; grid-template-columns: repeat(var(--ts-tiles, 4), minmax(0, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.ts-tile { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid var(--ts-line); transition: border-color .15s, box-shadow .15s, transform .15s; }
.ts-tile:hover { border-color: var(--ts-ink); box-shadow: 0 14px 30px rgba(0,0,0,.08); transform: translateY(-2px); }
.ts-tile__link { display: flex; flex-direction: column; flex: none; color: var(--ts-ink); text-decoration: none; }
.ts-tile__img { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: radial-gradient(120% 90% at 50% 40%, #fff 0%, #f1f1f1 70%, #e9e9e9 100%); overflow: hidden; }
.ts-tile__img img { width: 78%; height: 78%; object-fit: contain; transition: transform .35s ease; mix-blend-mode: multiply; }
.ts-tile:hover .ts-tile__img img { transform: scale(1.06); }
.ts-tile__body { display: grid; gap: 0.3rem; padding: 0.95rem 1.05rem 0.85rem; }
.ts-tile .ts-catcard__name { font-size: 1.0625rem; }
.ts-tile__subs { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0 1.05rem 1rem; border: 0; list-style: none; }
.ts-tile__subs li + li { border: 0; }
.ts-tile__subs a { display: inline-block; padding: 0.25rem 0.6rem; border-radius: 999px; background: var(--ts-tile); font-size: 0.75rem; color: var(--ts-ink-2); text-decoration: none; }
.ts-tile__subs a:hover, .ts-tile__subs a:focus-visible { background: var(--ts-ink); color: #fff; text-decoration: none; }

.ts-picks { margin-top: 2rem; }
.ts-market-front .ts-catcards__all { margin-top: 2rem; }
.ts-picks__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.85rem; }
.ts-picks__head h3 { margin: 0; font-size: 1.125rem; font-weight: 600; }
.ts-picks__head a { font-size: 0.875rem; color: var(--ts-ink-2); }
.ts-picks__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.ts-pick { display: flex; flex-direction: column; gap: 0.45rem; height: 100%; color: var(--ts-ink); text-decoration: none; }
.ts-pick__img { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; border-radius: 10px; background: var(--ts-tile); overflow: hidden; }
.ts-pick__img img { width: 80%; height: 80%; object-fit: contain; mix-blend-mode: multiply; transition: transform .3s ease; }
.ts-pick:hover .ts-pick__img img { transform: scale(1.05); }
.ts-pick__name { font-size: 0.9375rem; font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ts-pick:hover .ts-pick__name { color: var(--ts-accent); }
.ts-pick__price { margin-top: auto; font-weight: 600; }

@media (max-width: 900px) {
	.ts-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ts-promises { grid-template-columns: minmax(0, 1fr); gap: 0.85rem; padding-block: 1.1rem; }
	.ts-picks__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.ts-hero { min-height: 78vh; }
	.ts-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; }
	.ts-tile__body { padding: 0.7rem 0.75rem 0.6rem; }
	.ts-tile .ts-catcard__name { font-size: 0.9375rem; }
	.ts-tile__subs { display: none; }
	.ts-market-sec { margin-top: 2.25rem; }
}
@media (prefers-reduced-motion: reduce) {
	.ts-tile, .ts-tile__img img, .ts-pick__img img { transition: none; }
}

.ts-catgroup { margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--ts-line, #e5e5e5); }
.ts-catgroup__title { font-family: var(--ts-serif); font-weight: 400; font-size: 1.75rem; letter-spacing: -0.01em; margin: 0 0 1rem; }
.ts-catgroup__title a { color: inherit; text-decoration: none; }
.ts-catgroup__title a:hover { text-decoration: underline; }

/* Request a part (includes/catalog-request.php): under every listing, and after the directory's cards. */
.ts-request { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem; align-items: start; margin: 3rem auto 1rem; padding: 2.25rem; border-radius: 14px; background: var(--ts-tile); scroll-margin-top: 1.5rem; }
.ts-request__title { margin: 0 0 0.75rem; font-family: var(--ts-display); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; color: var(--ts-ink); }
.ts-request__lede { margin: 0 0 1.25rem; font-size: 0.9375rem; line-height: 1.55; color: var(--ts-ink-2); max-width: 46ch; }
.ts-request__gets { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; font-size: 0.875rem; color: var(--ts-ink-2); }
.ts-request__gets li { position: relative; padding-left: 1.5rem; }
.ts-request__gets li::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 0.8rem; height: 0.45rem; border-left: 2px solid var(--ts-accent); border-bottom: 2px solid var(--ts-accent); transform: rotate(-45deg); }
.ts-request__box { min-width: 0; min-height: 320px; --in-font: inherit; --in-surface: #fff; --in-bg: var(--ts-tile); --in-ink: var(--ts-ink); --in-muted: var(--ts-muted); --in-line: var(--ts-line); --in-accent: var(--ts-ink); --in-accent-ink: #fff; --in-me: var(--ts-ink); --in-me-ink: #fff; --in-radius: 12px; }
.ts-request__box .in__avatar--logo { border: 0; background: transparent; }
.ts-request__box .in__avatar--logo img { width: 26px; height: 26px; display: block; }
@media (max-width: 900px) { .ts-request { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding: 1.5rem; } }
@media (max-width: 600px) { .ts-request { margin-top: 2rem; padding: 1.25rem 1rem; border-radius: 10px; } }

/* Sign-up: first and last name side by side. */
.ts-reg-names { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.75rem; }
.ts-optional { color: var(--ts-muted); font-weight: 400; }
@media (max-width: 480px) { .ts-reg-names { grid-template-columns: 1fr; } }

/* Signed out, My account is one centred box: sign in, or (?register=1) create an account. */
.ts-auth .ts-page-head { text-align: center; }
.ts-auth .ts-page-head .wc-block-breadcrumbs, .ts-auth .ts-page-head .woocommerce-breadcrumb { display: none; }
.ts-auth #customer_login { display: block; max-width: 440px; margin: 0 auto; }
.ts-auth #customer_login > .u-column1, .ts-auth #customer_login > .u-column2 { width: 100% !important; float: none !important; max-width: none; padding: 0 !important; margin: 0 !important; }
.ts-auth #customer_login h2 { display: none; }
.ts-auth--login #customer_login > .u-column2, .ts-auth--register #customer_login > .u-column1 { display: none; }
.ts-auth .woocommerce-notices-wrapper, .ts-auth .woocommerce-error { max-width: 440px; margin-left: auto; margin-right: auto; }
.ts-auth__switch { margin: 1.25rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--ts-line); text-align: center; font-size: 0.9375rem; color: var(--ts-ink-2); }
.ts-auth__switch a { font-weight: 600; color: var(--ts-ink); }
.ts-auth .woocommerce-form-login__submit, .ts-auth .woocommerce-form-register__submit { width: 100%; }
.ts-auth .ts-page-body > .woocommerce { max-width: 440px; margin-left: auto !important; margin-right: auto !important; }
.ts-auth .ts-page-head { max-width: 440px !important; margin-left: auto !important; margin-right: auto !important; }
/* WooCommerce pads each row 3px; without it the fields line up with the links and divider. */
.ts-auth #customer_login .form-row { padding: 0; }
/* Sign-up password strength: the pill style of the order-confirmation form, amber until good. */
.ts-auth .woocommerce-password-strength { display: inline-block; margin-top: 0.5rem; padding: 0.2rem 0.75rem; border: 0; border-radius: 999px; font-size: 0.8125rem; font-weight: 500; line-height: 1.4; text-align: left; }
.ts-auth .woocommerce-password-strength.short, .ts-auth .woocommerce-password-strength.bad { background: var(--wp--preset--color--amber-soft, #fef3c7); color: var(--wp--preset--color--amber, #92400e); }
.ts-auth .woocommerce-password-strength.good, .ts-auth .woocommerce-password-strength.strong { background: var(--wp--preset--color--emerald-soft, #e9f7ef); color: var(--wp--preset--color--emerald, #047857); }
.ts-auth .woocommerce-password-hint { display: block; margin-top: 0.4rem; font-size: 0.8125rem; line-height: 1.5; color: var(--ts-muted); }

/* Narrow screens: the filters fold behind one button so the results come first. */
.ts-filter-toggle { display: none; }
@media (max-width: 781px) {
	.ts-filter-toggle { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; padding: 0.7rem 1rem; border: 1px solid var(--ts-ink); border-radius: 3px; background: #fff; color: var(--ts-ink); font: inherit; font-size: 0.9375rem; font-weight: 500; cursor: pointer; }
	.ts-filter-toggle__n { background: var(--ts-ink); color: #fff; border-radius: 999px; min-width: 1.4em; padding: 0 0.4em; font-size: 0.75rem; line-height: 1.4; }
	.ts-shop-sidebar:not(.is-open) .ts-specfilters { display: none; }
	.ts-shop-sidebar.is-open .ts-specfilters { margin-top: 1rem; }
}
/* Narrow screens: the category tabs scroll sideways as one row instead of wrapping into a
   ragged list (two on the first line, then one per line at 375). The row runs edge to edge
   so the cut-off tab shows there is more; market.js scrolls the current tab into view. */
@media (max-width: 781px) {
	.ts-archive-head .ts-subcats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-inline: calc(-1 * var(--wp--style--root--padding-left)) calc(-1 * var(--wp--style--root--padding-right)); padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right); scroll-padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right); }
	.ts-archive-head .ts-subcats::-webkit-scrollbar { display: none; }
	.ts-archive-head .ts-subcats .ts-pill { flex: 0 0 auto; white-space: nowrap; }
}
/* Phones: every control is at least 40px to tap. The row Compare box keeps its look and place
   (the negative margin takes back the extra padding). */
@media (max-width: 781px) {
	.ts-ptable .ts-compare-toggle--row { padding: 13px; margin: -0.4rem; }
	.ts-compare-toggle { min-height: 40px; padding: 0.5rem 0; }
	.ts-view-toggle, .ts-toolbar select, .ts-toolbar .orderby { height: 40px; }
	.ts-toolbar select, .ts-toolbar .orderby { line-height: 38px; }
	.ts-view-toggle { padding: 0; }
	.ts-view-toggle__opt { display: inline-flex; align-items: center; height: 100%; padding: 0 0.9rem; border-radius: 3px; }
	.ts-facet__opt { min-height: 40px; }
	.ts-howto__terms summary { min-height: 40px; }
	.ts-options__add { min-height: 40px; display: inline-flex; align-items: center; }
	.ts-btn-sm { padding: 0.7rem 1.1rem !important; }
	.ts-compare__remove { width: 40px; height: 40px; }
	.ts-compare__buy, .ts-compare-tray__go, .ts-compare-menu__go { min-height: 40px; display: inline-flex; align-items: center; gap: 0.3em; box-sizing: border-box; }
	.ts-compare-tray__clear, .ts-compare-menu .ts-compare-menu__clear { min-height: 40px; padding: 0 0.5rem; }
}

/* Order confirmation: "Set a password" (WooCommerce's create-account block) in the same style as
   the sign-up form: the label above a full-width field, a thin strength bar only once typing. */
.wc-block-order-confirmation-create-account { border-radius: 10px; }
.wc-block-order-confirmation-create-account-form-wrapper { background: #fff; border: 1px solid var(--ts-line); border-radius: 10px; padding: 1.25rem 1.25rem 1rem; }
.wc-block-order-confirmation-create-account-form > p:first-child { margin: 0 0 0.9rem; font-size: 0.9375rem; color: var(--ts-ink-2); overflow-wrap: anywhere; }
.wc-block-order-confirmation-create-account-form > p:first-child strong { color: var(--ts-ink); font-weight: 600; }
.wc-block-order-confirmation-create-account-form .wc-block-components-text-input { display: flex; flex-direction: column; gap: 0.4rem; position: static; margin: 0 0 1rem; }
.wc-block-order-confirmation-create-account-form .wc-block-components-text-input label { order: -1; position: static !important; transform: none !important; font-size: 0.8125rem; font-weight: 500; color: var(--ts-ink); line-height: 1.3; }
.wc-block-order-confirmation-create-account-form .wc-block-components-text-input input { width: 100%; box-sizing: border-box; height: 46px; padding: 0 0.85rem !important; border: 1px solid #d6d3d1 !important; border-radius: 8px !important; background: #fff !important; font: inherit; font-size: 0.9375rem; color: var(--ts-ink); }
.wc-block-order-confirmation-create-account-form .wc-block-components-text-input input:focus { outline: none; border-color: var(--ts-ink) !important; box-shadow: 0 0 0 3px rgba(12, 13, 15, .08); }
.wc-block-order-confirmation-create-account-form .wc-block-components-password-strength.hidden { display: none; }
.wc-block-order-confirmation-create-account-form .wc-block-components-password-strength { margin-top: 0.15rem; }
.wc-block-order-confirmation-create-account-form meter { display: block; width: 100%; height: 4px; border: 0; border-radius: 2px; background: #eceae7; }
.wc-block-order-confirmation-create-account-form meter::-webkit-meter-bar { background: #eceae7; border: 0; border-radius: 2px; height: 4px; }
.wc-block-order-confirmation-create-account-form meter::-webkit-meter-optimum-value, .wc-block-order-confirmation-create-account-form meter::-webkit-meter-suboptimum-value, .wc-block-order-confirmation-create-account-form meter::-webkit-meter-even-less-good-value { border-radius: 2px; }
.wc-block-order-confirmation-create-account-button { width: 100%; height: 46px; border-radius: 10px !important; }
.wc-block-order-confirmation-create-account-button[disabled] { opacity: .35; }
.wc-block-order-confirmation-create-account-description p { margin: 0.75rem 0 0; font-size: 0.75rem; color: var(--ts-muted); text-align: center; }
.wc-block-order-confirmation-create-account-form .wc-block-components-password-strength { display: flex; align-items: center; gap: 0.6rem; }
.wc-block-order-confirmation-create-account-form .wc-block-components-password-strength__result { flex: none; white-space: nowrap; font-size: 0.75rem; }

/* The two classic WooCommerce rules the pages without its stylesheets still need (see perf.php): breadcrumb spacing, image proportions. Last, where the classic files load. */
.woocommerce .woocommerce-breadcrumb { margin: 0 0 1em; }
.woocommerce img, .woocommerce-page img { height: auto; max-width: 100%; }

/* Joint torque calculator (includes/calculator.php). */
.ts-calc { border: 1px solid var(--ts-line); border-radius: 10px; background: #fff; padding: 1.25rem; display: grid; gap: 1.25rem; max-width: 760px; }
.ts-calc__modes { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--ts-line); }
.ts-calc__modes button { font: inherit; font-size: 0.875rem; background: none; border: 0; border-bottom: 2px solid transparent; padding: 0.5rem 0.75rem; margin-bottom: -1px; color: var(--ts-ink-2); cursor: pointer; }
.ts-calc__modes button[aria-selected="true"] { color: var(--ts-ink); border-bottom-color: var(--ts-ink); font-weight: 600; }
.ts-calc__form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.9rem 1.25rem; }
.ts-calc__form[hidden] { display: none; }
.ts-calc__field { display: grid; gap: 0.3rem; font-size: 0.875rem; align-content: start; }
.ts-calc__label { color: var(--ts-ink); font-weight: 500; }
.ts-calc__input { display: flex; align-items: center; border: 1px solid var(--ts-line); border-radius: 8px; overflow: hidden; }
.ts-calc__input:focus-within { border-color: var(--ts-ink); }
.ts-calc__input input { flex: 1; min-width: 0; font: inherit; border: 0; padding: 0.5rem 0.65rem; font-variant-numeric: tabular-nums; background: transparent; }
.ts-calc__input input:focus { outline: none; }
.ts-calc__unit { padding: 0 0.65rem; color: var(--ts-muted); font-size: 0.8125rem; }
.ts-calc__hint { color: var(--ts-muted); font-size: 0.75rem; line-height: 1.4; }
.ts-calc__result { border-top: 1px solid var(--ts-line); padding-top: 1rem; display: grid; gap: 0.75rem; }
.ts-calc__figures { display: flex; gap: 2rem; margin: 0; }
.ts-calc__figures dt { font-size: 0.75rem; color: var(--ts-muted); }
.ts-calc__figures dd { margin: 0; font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.ts-calc__steps { margin: 0; padding-left: 1.2rem; font-size: 0.8125rem; color: var(--ts-ink-2); font-variant-numeric: tabular-nums; }
.ts-calc__go { justify-self: start; }
.ts-calc__go[hidden] { display: none; }

/* Prices: cents at half size on the baseline, after a visible decimal point (pricing.php). The
   10px floor keeps small table prices readable. */
.woocommerce-Price-amount .ts-price-frac { font-size: max(0.5em, 10px); }

/* Series hub table (includes/series.php). */
.ts-series-table { overflow-x: auto; margin: 1.5rem 0; border: 1px solid var(--ts-line); border-radius: 10px; }
.ts-series-table table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.ts-series-table th, .ts-series-table td { padding: 0.6rem 0.8rem; text-align: left; border-bottom: 1px solid var(--ts-line); white-space: nowrap; }
.ts-series-table thead th { font-weight: 500; color: var(--ts-muted); background: var(--ts-tile); }
.ts-series-table tbody tr:last-child > * { border-bottom: 0; }
.ts-series-table tbody th { font-weight: 600; position: sticky; left: 0; background: #fff; }
.ts-series-table tbody th a { color: var(--ts-ink); }
.ts-series-table__price { font-weight: 500; }
.ts-series-link { margin: 0.75rem 0 0; font-size: 0.875rem; }
.ts-series-link a { color: var(--ts-ink-2); }
.ts-brand-series { font-size: 0.875rem; color: var(--ts-ink-2); }

/* Free shipping promotion (includes/promo.php): one line under the header. */
.ts-promo-bar { background: var(--ts-ink); color: #fff; text-align: center; font-size: 0.8125rem; line-height: 1.4; padding: 0.5rem 16px; }
.ts-promo-bar p { margin: 0; max-width: 1200px; margin-inline: auto; }
.ts-promo-bar strong { color: #fff; font-weight: 600; }
@media (max-width: 600px) { .ts-promo-bar { font-size: 0.75rem; } }

/* Trust row (includes/trust.php): product page, cart and checkout. */
.ts-trust { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.75rem 1.25rem; font-size: 0.8125rem; line-height: 1.45; }
.ts-trust__item { display: flex; gap: 0.6rem; align-items: flex-start; min-width: 0; }
.ts-trust__icon { flex: 0 0 auto; color: var(--ts-accent); margin-top: 1px; }
.ts-trust strong { display: block; color: var(--ts-ink); font-weight: 600; }
.ts-trust__text { color: var(--ts-muted); }
/* The product row sits under the photo and the buy box, across the page: one row on desktop. */
.ts-trust--product { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1.25rem 2rem; margin-top: 2rem; padding: 1.25rem 0; border-top: 1px solid var(--ts-line); border-bottom: 1px solid var(--ts-line); font-size: 0.875rem; }
@media (max-width: 1024px) { .ts-trust--product { grid-auto-flow: row; grid-template-columns: 1fr 1fr; } }
.ts-trust--cart, .ts-trust--checkout { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 2rem 0 1rem; padding: 1.25rem; background: var(--ts-tile); border-radius: 10px; }
@media (max-width: 1024px) { .ts-trust--cart, .ts-trust--checkout { grid-auto-flow: row; grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .ts-trust--product, .ts-trust--cart, .ts-trust--checkout { grid-template-columns: 1fr; } }

/* Table pager (includes/table-view.php): Previous, page numbers, Next. 44px targets on touch screens. */
.ts-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.25rem 0.5rem; margin: 1.75rem 0 0.5rem; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.ts-pager__pages { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.ts-pager a, .ts-pager__step.is-off { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.35em; min-width: 2.25rem; height: 2.25rem; box-sizing: border-box; padding: 0 0.6rem; border-radius: 4px; color: var(--ts-ink-2); text-decoration: none; box-shadow: inset 0 0 0 1px var(--ts-line); }
.ts-pager a:hover { color: var(--ts-ink); box-shadow: inset 0 0 0 1px var(--ts-ink); }
.ts-pager a:focus-visible { outline: 2px solid var(--ts-accent); outline-offset: 2px; }
.ts-pager a.is-current { background: var(--ts-ink); color: var(--ts-surface); box-shadow: none; font-weight: 600; }
.ts-pager__step.is-off { color: var(--ts-subtle); box-shadow: none; }
.ts-pager__gap { color: var(--ts-subtle); padding: 0 0.15rem; }
@media (pointer: coarse) { .ts-pager a, .ts-pager__step.is-off { min-width: 2.75rem; height: 2.75rem; } }
/* Phones: the arrows only; the words stay for screen readers. */
@media (max-width: 480px) { .ts-pager__word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .ts-pager { gap: 0.25rem; } .ts-pager a, .ts-pager__step.is-off { min-width: 2.5rem; padding: 0 0.35rem; } .ts-pager__gap { padding: 0; } }