/* Raleway, SIL Open Font License: /assets/licenses/raleway.txt */
/* latin-ext */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fast/2d603982caea60f1/raleway-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fast/b1bef1f03a77a36f/raleway-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   TEQ-TRADE — stylesheet
   Written for this project. No third-party CSS is included or adapted: the
   earlier draft leaned on a stylesheet captured from another company's site,
   which was never deployable, so every component below is implemented from
   scratch under a `tt-` namespace.

   The visual language is Teqser's own, read off
   teqser.com/wp-content/themes/saleswizard-theme/inc/assets/css/style.css:

     1. mint→cyan gradient   linear-gradient(to left,#52C6D8,#53C6D7,#70C8B6)
                             — used for BOTH the top band and the footer
     2. white cards, soft mint glow
                             box-shadow: 0 0 15px 5px rgba(112,200,182,.2)
                             border-radius: 25px
     3. light headings       h1–h4 are font-weight 400 with positive tracking
     4. pill buttons         radius 18px, 14px/700, letter-spacing 1px
     5. orange is reserved   #F15A22 is the ONE primary CTA colour
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --navy: #1c2d5a;
  --mint: #70c8b6;
  --cyan: #52c6d8;
  --orange: #f15a22;
  --orange-dark: #c14e26;
  --muted: #506a83;
  --rule: #c7e8e1;
  --rule-soft: #eef4f3;

  --wash: linear-gradient(to left, #52c6d8, #53c6d7, #70c8b6);
  --wash-light: linear-gradient(to left, #f5f5f5, #f7f7f7, #ffffff);

  --glow: 0 0 15px 5px rgba(112, 200, 182, 0.2);
  --glow-soft: 0 0 15px 0 rgba(112, 200, 182, 0.2);
  --glow-lift: 0 0 22px 6px rgba(112, 200, 182, 0.32);
  --glow-faint: 0 0 15px 5px rgba(112, 200, 182, 0.1);

  --r-card: 25px;
  --r-pill: 18px;
  --r-input: 12px;

  --ab-bg: #e3f6ef;  --ab-fg: #0b5a45;
  --bc-bg: #e4f4f8;  --bc-fg: #0d5a6c;
  --d-bg:  #fdeae5;  --d-fg:  #8a3320;

  --font: Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Helvetica, Arial, sans-serif;

  --shell: 1216px;
  --gutter: 24px;
  --header-h: 78px;
}

/* --------------------------------------------------------------------------
   2. Reset + base
   Teqser body copy is 15px/25px with 0.21px tracking; headings are weight 400.
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  padding-top: var(--header-h);
  font-family: var(--font);
  font-size: 15px;
  line-height: 25px;
  letter-spacing: 0.21px;
  color: var(--navy);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--navy);
  font-weight: 400;
  line-height: 1.15;
}
h1 { font-size: 40px; letter-spacing: 1.83px; }
h2 { font-size: 30px; letter-spacing: 0.79px; }
h3 { font-size: 22px; letter-spacing: 1.2px; }

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; }
a { color: inherit; text-decoration: none; transition: color 0.2s ease; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

[hidden] { display: none !important; }

.tt-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 4px;
}
.tt-band a:focus-visible,
.tt-band button:focus-visible,
.tt-footer a:focus-visible { outline-color: #fff; }

/* One container drives every full-width block, so the header, the band, the
   filter bar, the lot list and the pager all share an edge. */
.tt-shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --------------------------------------------------------------------------
   3. Header — the Teqser lockup
   -------------------------------------------------------------------------- */
.tt-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 30;
  background: #fff;
  border-bottom: 1px solid var(--rule);
}

.tt-header .tt-shell {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: var(--header-h);
}

.tt-logo { display: flex; align-items: center; flex: 0 0 auto; }
.tt-logo img { display: block; height: 34px; width: auto; }



/* --------------------------------------------------------------------------
   4. Buttons — Teqser pills
   -------------------------------------------------------------------------- */
.tt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: var(--r-pill);
  font-size: 14px;
  line-height: 17px;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  background-color: var(--orange);
  color: #fff;
}
.tt-btn:hover { background-color: var(--orange-dark); color: #fff; }

/* Icons keep their proportions while translated button labels can wrap. */
.tt-btn__icon {
  display: block;
  width: 1.125rem;
  height: 1.125rem;
  flex: 0 0 1.125rem;
  pointer-events: none;
}
.tt-btn__label { min-width: 0; overflow-wrap: anywhere; }

.tt-btn--secondary {
  background-color: #fff;
  color: var(--mint);
  box-shadow: var(--glow);
}
.tt-btn--secondary:hover { background-color: #fff; color: var(--cyan); }

/* white pill, for use on the gradient */
.tt-btn--onwash { background-color: #fff; color: var(--navy); }
.tt-btn--onwash:hover { background-color: #fff; color: var(--cyan); }

.tt-btn--quiet {
  background-color: #fff;
  color: var(--muted);
  border: 1px solid var(--rule);
}
.tt-btn--quiet:hover { background-color: #fff; color: var(--cyan); border-color: var(--cyan); }

.tt-btn--download, .tt-btn--offer { background-color: var(--navy); color: #fff; }
.tt-btn--download:hover, .tt-btn--offer:hover { background-color: #102348; color: #fff; }

.tt-btn--sm { padding: 11px 22px; font-size: 13px; letter-spacing: 0.93px; }
.tt-btn--block { width: 100%; }

.tt-btn:disabled { background: #eef1f6; color: #9aa6ba; box-shadow: none; cursor: not-allowed; }

/* the "read more →" treatment from teqser.com: cyan, 13px, 700, .93 tracking */
.tt-link {
  color: var(--cyan);
  font-size: 13px;
  line-height: 15px;
  font-weight: 700;
  letter-spacing: 0.93px;
}
.tt-link:hover { color: var(--mint); }

/* --------------------------------------------------------------------------
   5. Gradient band
   -------------------------------------------------------------------------- */
.tt-band { background: var(--wash); color: #fff; }
.tt-band .tt-shell { padding-block: 56px 60px; }

.tt-band__eyebrow {
  display: inline-block;
  margin-bottom: 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  opacity: 0.85;
}
.tt-band h1 {
  color: #fff;
  font-size: 44px;
  line-height: 1.12;
  letter-spacing: 2px;
  max-width: 20ch;
  margin-bottom: 22px;
}
.tt-band__lead {
  font-size: 18px;
  line-height: 28px;
  max-width: 62ch;
  margin-bottom: 28px;
  opacity: 0.95;
}

/* the grade claim, as a white glow card on the gradient */
.tt-band__claim {
  display: inline-block;
  max-width: 74ch;
  margin-bottom: 28px;
  padding: 18px 26px;
  border-radius: var(--r-card);
  background: #fff;
  box-shadow: var(--glow);
  color: var(--navy);
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: 0.3px;
}

.tt-band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

/* Centred hero — the home page opens on one statement, like the reference
   stock page: eyebrow, claim, two calls to action, nothing competing. */
.tt-band--hero { position: relative; overflow: hidden; }
.tt-band--hero .tt-shell {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-block: 84px 88px;
}
/* an oversized watermark of the mark, at 6% — depth without a photograph */
.tt-band--hero::before {
  content: "";
  position: absolute;
  inset: -20% -10%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.5), transparent 70%);
  opacity: 0.35;
  pointer-events: none;
}
.tt-band--hero h1 { max-width: 22ch; }
.tt-band--hero .tt-band__lead { margin-inline: auto; }
.tt-band--hero .tt-band__actions { justify-content: center; }

/* compact variant — the lot page */
.tt-band--compact .tt-shell { padding-block: 34px 40px; }
.tt-band--compact h1 {
  font-size: 34px;
  letter-spacing: 1.2px;
  max-width: 30ch;
  margin-bottom: 10px;
}
.tt-band__sub { font-size: 15px; opacity: 0.92; }

.tt-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}
.tt-crumbs li + li::before { content: "\203A"; margin-right: 6px; opacity: 0.7; }
.tt-crumbs a:hover { color: var(--cyan); }
.tt-crumbs [aria-current] { color: var(--navy); font-weight: 700; }

/* on the gradient the crumbs invert */
.tt-band .tt-crumbs { margin-bottom: 18px; color: inherit; }
.tt-band .tt-crumbs a:hover { color: #fff; text-decoration: underline; }
.tt-band .tt-crumbs [aria-current] { color: #fff; }

.tt-crumbbar { padding-block: 20px 0; }

/* --------------------------------------------------------------------------
   6. Stats strip
   -------------------------------------------------------------------------- */
.tt-stats { background: var(--wash-light); }
.tt-stats .tt-shell {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 40px;
  padding-block: 18px;
  font-size: 14px;
  color: var(--muted);
}
.tt-stats b { color: var(--navy); font-weight: 700; }

/* --------------------------------------------------------------------------
   7. Section heading
   -------------------------------------------------------------------------- */
.tt-home { background: #f7fbfa; }
.tt-catalog { padding-block: 32px 64px; }
.tt-heading { margin-bottom: 24px; }
.tt-heading h1 {
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 600;
  letter-spacing: -0.5px;
  overflow-wrap: anywhere;
}

.tt-empty {
  margin-bottom: 48px;
  padding-block: 40px;
  text-align: center;
  color: var(--muted);
}
.tt-empty p + p { margin-top: 6px; font-size: 14px; }

/* --------------------------------------------------------------------------
   9. Available batch cards — approved total-price-first design.
   Fixed card shadow, full-width 5:4 photos, one linked orange action.
   -------------------------------------------------------------------------- */
.tt-lots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}
.tt-lot {
  --card-navy: #26325f;
  --card-muted: #56657a;
  --card-shadow: 0 7px 22px -4px rgba(38, 50, 95, .12), 0 1px 4px rgba(38, 50, 95, .035);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid #e0e6ed;
  border-radius: 16px;
  background: #fff;
  color: var(--card-navy);
  font-family: var(--font);
  font-weight: 400;
  letter-spacing: 0;
  font-variant-numeric: normal;
  box-shadow: var(--card-shadow);
  overflow: hidden;
  transform: none;
  transition: none;
}
.tt-lot:hover, .tt-lot:active, .tt-lot:focus-within {
  box-shadow: var(--card-shadow);
  transform: none;
  color: var(--card-navy);
}
.tt-lot:focus-visible { outline: 3px solid var(--navy); outline-offset: 5px; }
.tt-lot--sold .tt-lot__media img { filter: grayscale(1); opacity: .55; }
.tt-lot__availability {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  background: #fff;
}
.tt-ribbon {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 9px 11px;
  border-radius: 7px;
  font-size: .875rem;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: .15px;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  color: #fff;
}
.tt-ribbon__icon { width: 18px; height: 18px; flex: none; }
/* Availability signal: keep the label and dot still; animate only its halo. */
.tt-ribbon__live { display: grid; place-items: center; }
.tt-ribbon__live::before, .tt-ribbon__live::after {
  content: '';
  grid-area: 1 / 1;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
}
.tt-ribbon__live::before { background: currentColor; }
.tt-ribbon__live::after {
  border: 1px solid currentColor;
  opacity: 0;
  transform: scale(1);
  animation: tt-status-live-pulse 5s ease-out .35s infinite;
}
.tt-lot:nth-child(2n) .tt-ribbon__live::after { animation-delay: .75s; }
@keyframes tt-status-live-pulse {
  0% { transform: scale(1); opacity: .75; }
  22%, 100% { transform: scale(2.7); opacity: 0; }
}
.tt-ribbon--new { background: #c64805; }
.tt-ribbon--ready { background: #237d6c; }
.tt-ribbon--sold { background: #56657a; }
.tt-lot__quantity { display: inline-flex; align-items: baseline; gap: 5px; margin-left: auto; font-size: .875rem; line-height: 1.4; font-weight: 500; }
.tt-lot__quantity strong { font-size: 1.375rem; line-height: 1.2; font-weight: 600; }
.tt-lot__media { position: relative; aspect-ratio: 5 / 4; flex: none; padding: 0; overflow: hidden; background: #f4f6f8; }
.tt-lot__thumb {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
  transform: none;
  transition: none;
}
.tt-lot__placeholder { display: grid; place-items: center; height: 100%; aspect-ratio: 5 / 4; padding: 24px; color: var(--card-muted); font-size: .875rem; }

/* Manufacturer artwork keeps its own proportions and colours. */
.tt-brands { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.tt-brands[hidden] { display: none; }
.tt-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  max-width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff;
}
.tt-brand__logo { display: block; width: auto; height: 28px; max-width: 128px; object-fit: contain; }
.tt-brand__name { font-size: 12px; font-weight: 700; overflow-wrap: anywhere; }
.tt-lot__body { display: flex; flex-direction: column; flex: 1; gap: 0; padding: 16px 18px 12px; }
.tt-lot__title {
  display: block;
  min-height: 2.6em;
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -.1px;
  color: var(--card-navy);
  overflow-wrap: break-word;
}
.tt-lot__spec { display: block; margin-top: 8px; font-size: .875rem; line-height: 1.5; color: var(--card-muted); overflow-wrap: anywhere; }
.tt-lot__spec > span, .tt-lot__keyboard { display: inline-block; max-width: 100%; vertical-align: top; }
.tt-lot__spec:empty { display: none; }
.tt-lot__condition { margin: 1px 0 0; font-size: .875rem; line-height: 1.5; color: var(--card-muted); overflow-wrap: anywhere; }
.tt-lot__price { margin: 0 18px; padding-top: 13px; border-top: 1px solid #e3e8ee; }
.tt-lot__price-label { display: block; margin-bottom: 5px; font-size: .75rem; font-weight: 600; line-height: 1.5; letter-spacing: .4px; text-transform: uppercase; color: var(--card-muted); }
.tt-lot__total { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.tt-lot__amount { min-width: 0; font-size: 2.25rem; line-height: 1.2; font-weight: 600; letter-spacing: -.6px; overflow-wrap: anywhere; }
.tt-lot__vat { font-size: .75rem; line-height: 1.5; color: var(--card-muted); white-space: nowrap; }
.tt-lot__unit-price { margin: 3px 0 0; font-size: 1rem; line-height: 1.4375; font-weight: 500; }
.tt-lot__average-label { font-size: .75rem; font-weight: 400; color: var(--card-muted); }
.tt-lot__sold { display: block; font-size: 2.125rem; line-height: 1.18; font-weight: 700; }
.tt-lot__note { display: block; margin-top: 6px; font-size: .8125rem; line-height: 1.5; color: var(--card-muted); }
.tt-lot__foot { padding: 11px 18px 16px; }
.tt-lot__action { min-height: 48px; padding: 11px 16px; gap: 14px; border: 0; border-radius: 9px; background: #c64805; color: #fff; font-size: .9375rem; font-weight: 700; line-height: 1.4667; letter-spacing: 0; transition: background-color 140ms ease; }
.tt-lot:hover .tt-lot__action, .tt-lot:focus-visible .tt-lot__action { background: #aa3b02; color: #fff; }
.tt-lot__action.tt-btn--quiet { background: #edf1f5; color: var(--card-navy); }
.tt-lot--sold:hover .tt-lot__action, .tt-lot--sold:focus-visible .tt-lot__action { background: #e0e6ed; color: var(--card-navy); }
@media (prefers-reduced-motion: reduce) { .tt-lot__action { transition: none; } }

/* --------------------------------------------------------------------------
   10. Pills
   -------------------------------------------------------------------------- */
.tt-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.tt-pills--grades { gap: 5px; margin-top: 10px; }

.tt-pill {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.tt-pill--new    { background: var(--orange); color: #fff; }
.tt-pill--ready  { background: #e6f6f9; color: #10697a; }
.tt-pill--sold   { background: #eef1f6; color: var(--muted); }
.tt-pill--plain  { background: #fff; color: var(--muted); box-shadow: var(--glow-soft); }
/* on the gradient only the status pill keeps its colour */
.tt-band .tt-pill--plain { background: rgba(255, 255, 255, 0.22); color: #fff; box-shadow: none; }

.tt-grade {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.tt-grade--ab { background: var(--ab-bg); color: var(--ab-fg); }
.tt-grade--bc { background: var(--bc-bg); color: var(--bc-fg); }
.tt-grade--d  { background: var(--d-bg);  color: var(--d-fg); }

/* --------------------------------------------------------------------------
   11. Pager
   -------------------------------------------------------------------------- */
.tt-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 28px;
  font-size: 13px;
}
.tt-pager__group { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.tt-pager__label { margin-right: 10px; color: var(--muted); }
.tt-pager button {
  min-height: 44px;
  min-width: 44px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  letter-spacing: 0.5px;
}
.tt-pager button:hover:not(:disabled) { color: var(--cyan); }
.tt-pager button:disabled { color: #a9b3c4; cursor: default; }
.tt-pager button[aria-current="page"],
.tt-pager button[aria-pressed="true"] { color: var(--cyan); font-weight: 700; }

/* --------------------------------------------------------------------------
   12. Lot detail
   Single column, deal-sheet order: what it is, what it costs, what it looks
   like, then the detail. Each block is a card on a light page.
   -------------------------------------------------------------------------- */
/* The detail page is a trade decision sheet: the actual device, exact offer,
   price and product list lead. Company storytelling stays out of the flow. */
.tt-detail { background: #f3faf9; border-bottom: 1px solid var(--rule); }
.tt-lot-layout { margin-block: 14px 52px; }

.tt-crumbbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 18px 0;
  color: var(--muted);
  font-size: 13px;
}
.tt-back { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.tt-back:hover { color: var(--cyan); }

/* ---- 12a. Batch summary: one hierarchy at every available width ---- */
.tt-detail { container: product-page / inline-size; }
.tt-lot-layout, .tt-deal-details { min-width: 0; }
.tt-detail .tt-card, .tt-deal {
  border: 1px solid #dce5e9;
  border-radius: 18px;
  box-shadow: none;
  background: #fff;
  margin-bottom: 24px;
}
.tt-detail .tt-card { padding: 24px; }
.tt-detail .tt-card h2 { font-size: 1.375rem; font-weight: 600; line-height: 1.3; letter-spacing: 0; }
.tt-detail .tt-card__head { gap: 16px; min-width: 0; }
.tt-deal { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; }
.tt-deal__visual { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 0; background: #f4f6f8; }
.tt-deal__image-frame { position: relative; min-width: 0; }
.tt-deal__image-frame > img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 100%; padding: 0; }
.tt-deal__image-frame[data-hero-swipe] { overflow: hidden; }
.tt-deal__image-frame[data-hero-swipe] > #deal-photo,
.tt-deal__image-frame[data-hero-swipe] > .tt-photo-error { display: none; }
.tt-hero-scroll { display: flex; width: 100%; aspect-ratio: 5 / 4; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: auto; scrollbar-width: none; touch-action: auto; overflow-anchor: none; }
.tt-hero-scroll::-webkit-scrollbar { display: none; }
.tt-hero-scroll[data-zoom-paused] { overflow-x: hidden; scroll-snap-type: none; }
.tt-hero-slide { position: relative; flex: 0 0 100%; min-width: 0; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.tt-hero-slide > img { display: block; width: 100%; height: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 100%; padding: 0; }
.tt-hero-slide > .tt-photo-error { position: absolute; inset: 0; display: grid; place-items: center; }
.tt-deal__image-frame > .tt-photo-error { display: grid; place-items: center; min-height: 220px; }
.tt-deal__photo-picker, .tt-deal__photo-position { display: none; }
.tt-deal__brand { position: absolute; top: 16px; left: 16px; z-index: 1; max-width: calc(100% - 32px); }
.tt-deal__brand .tt-brand { min-height: 32px; padding: 5px 8px; border: 1px solid #e4eaed; box-shadow: none; }
.tt-deal__brand .tt-brand__logo { height: 22px; max-width: 110px; }
.tt-deal__body { padding: 24px; min-width: 0; container: deal-body / inline-size; }
.tt-deal__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.tt-deal__code { color: var(--muted); font-size: .75rem; font-weight: 700; letter-spacing: .4px; overflow-wrap: anywhere; }
.tt-deal__meta .tt-pill { font-size: .75rem; line-height: 1.4; padding: 6px 10px; letter-spacing: 0; }
.tt-deal h1 { margin-top: 16px; font-size: clamp(1.5rem, 5.5cqi, 2rem); line-height: 1.2; font-weight: 600; letter-spacing: -.3px; overflow-wrap: break-word; }
.tt-deal__sub { margin-top: 10px; color: var(--muted); font-size: .875rem; line-height: 1.6; overflow-wrap: break-word; }
.tt-deal--no-photo { grid-template-columns: minmax(0, 1fr); }
.tt-deal--no-photo .tt-deal__visual { display: none; }

/* Label/value rows keep the complete grade mix and logistics together. */
.tt-tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid #e5ebef; }
.tt-tile { display: grid; grid-template-columns: minmax(78px, .38fr) minmax(0, 1fr); column-gap: 16px; align-items: baseline; min-width: 0; }
.tt-tile__label { color: var(--muted); font-size: .875rem; line-height: 1.5; }
.tt-tile__value { color: var(--navy); font-size: .875rem; line-height: 1.5; font-weight: 600; overflow-wrap: break-word; }
.tt-fact-grade { display: inline-block; white-space: nowrap; margin-right: 10px; }
.tt-fact-grade:last-child { margin-right: 0; }
.tt-tile__note { grid-column: 2; margin-top: 2px; color: var(--muted); font-size: .75rem; line-height: 1.5; overflow-wrap: break-word; }
.tt-tile__note:empty { display: none; }

/* ---- 12b. The complete batch price leads, with the average secondary ---- */
.tt-deal-price { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 24px; padding: 20px; border-radius: 12px; background: var(--navy); color: #fff; }
.tt-pricebar__label { font-size: .875rem; line-height: 1.5; color: #e5ebf5; }
.tt-pricebar__amount { font-size: clamp(1rem, 9cqi, 2.25rem); line-height: 1.15; font-weight: 700; letter-spacing: -.4px; }
.tt-pricebar__amount, .tt-pricebar__lead { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tt-pricebar__summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; margin-top: 2px; font-size: .875rem; line-height: 1.5; }
.tt-pricebar__units { font-weight: 600; white-space: nowrap; }
.tt-pricebar__average { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; color: #e5ebf5; }
.tt-pricebar__lead { color: #fff; font-size: 1rem; line-height: 1.5; font-weight: 600; letter-spacing: 0; }
.tt-pricebar__note { font-size: .75rem; line-height: 1.5; color: #dce6f5; }
.tt-pricebar__note:empty { display: none; }
.tt-pricebar__was { text-decoration: line-through; }
.tt-notice { margin-top: 4px; color: #dce6f5; font-size: .75rem; line-height: 1.6; letter-spacing: 0; }
.tt-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 16px; }
.tt-actions .tt-btn { width: 100%; min-height: 48px; padding: 12px; gap: 8px; font-size: .875rem; line-height: 1.4; letter-spacing: 0; border-radius: 10px; white-space: normal; }
.tt-actions .tt-btn__label { min-width: 0; overflow-wrap: break-word; }
.tt-actions__grading { grid-column: 1 / -1; }
.tt-btn--grading { border: 1px solid #d4e4e2; background: #fff; color: var(--navy); box-shadow: none; }
.tt-btn--grading:hover { border-color: var(--cyan); background: #f7fcfb; color: var(--navy); }
.tt-actions .tt-btn--grading { min-height: 44px; padding-block: 8px; border-color: transparent; background: transparent; font-weight: 500; }
@container deal-body (min-width: 20.625rem) {
  .tt-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container product-page (min-width: 960px) {
  .tt-deal { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
  /* The details determine the frame height. Photos swap inside its remaining
     space, so neither portrait shots nor a long list of thumbnails enlarge it. */
  .tt-deal__visual { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-content: stretch; min-height: 0; }
  .tt-deal__brand { grid-row: 1; position: static; max-width: 100%; padding: 16px 16px 8px; }
  .tt-deal__image-frame { grid-row: 2; min-height: 0; overflow: hidden; }
  .tt-deal__image-frame > img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; object-position: center; }
  .tt-deal__image-frame > .tt-photo-error { position: absolute; inset: 0; min-height: 0; }
  .tt-deal__photo-position { display: block; position: absolute; right: 14px; bottom: 12px; padding: 5px 9px; border: 1px solid #e0e6ed; border-radius: 6px; background: rgba(255,255,255,.95); color: var(--navy); font-size: .75rem; line-height: 1.5; font-variant-numeric: lining-nums tabular-nums; }
  .tt-deal__photo-picker { grid-row: 3; display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; align-items: center; gap: 8px; padding: 14px 16px 16px; min-width: 0; border-top: 1px solid #e4eaed; }
  .tt-deal__photo-picker .tt-photo-arrow { width: 36px; height: 40px; }
  .tt-deal__photo-thumbs { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 24px) / 4); gap: 8px; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: #b9d5d0 transparent; padding-block: 2px 5px; }
  .tt-deal__photo-thumb { position: relative; min-width: 0; min-height: 44px; aspect-ratio: 5 / 4; overflow: hidden; border: 2px solid transparent; border-radius: 8px; padding: 0; background: #fff; cursor: pointer; scroll-snap-align: start; -webkit-tap-highlight-color: transparent; }
  .tt-deal__photo-thumb[aria-pressed="true"] { border-color: #237d6c; }
  .tt-deal__photo-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; user-select: none; -webkit-user-drag: none; }
  .tt-deal__photo-thumb .tt-photo-error { font-size: .75rem; padding: 4px; line-height: 1.2; }
  .tt-deal__photo-picker button:focus-visible { outline: 2px solid var(--navy); outline-offset: -4px; }
  .tt-deal__body { padding: 32px; }
  .tt-deal--no-photo { grid-template-columns: minmax(0, 1fr); }
}
@container product-page (max-width: 599px) {
  .tt-detail .tt-card, .tt-deal { margin-bottom: 16px; border-radius: 14px; }
  .tt-detail .tt-card, .tt-deal__body { padding: 16px; }
  .tt-deal-price { padding: 16px; margin-top: 20px; }
  .tt-pricebar__summary { flex-direction: column; gap: 4px; }
}

/* ---- 12c. Focused CTA dialogs ---- */
.tt-dialog {
  width: min(570px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 22px;
  background: #fff;
  color: var(--navy);
  box-shadow: 0 24px 80px rgba(14, 32, 68, 0.28);
}
.tt-dialog::backdrop {
  background: rgba(12, 29, 59, 0.56);
}
.tt-dialog__panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: hidden;
}
.tt-dialog__content { min-height: 0; padding: 0 24px 20px; overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: 16px; }
.tt-dialog__foot { padding: 14px 24px max(14px, env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); background: #fff; }
.tt-dialog__foot .tt-btn { min-height: 48px; }
.tt-dialog__head { padding: 20px 24px 16px; }
.tt-offer-optional { margin-top: 12px; color: var(--muted); font-size: 13px; }
.tt-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.tt-dialog__head h2 { margin-top: 3px; font-size: 28px; }
.tt-dialog__eyebrow {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.tt-dialog__close {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -7px -7px 0 0;
  border-radius: 50%;
  color: var(--muted);
}
.tt-dialog__close:hover { background: #f1f8f7; color: var(--navy); }
.tt-dialog__intro { margin-top: 14px; color: var(--muted); line-height: 1.55; }
.tt-dialog__note {
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}
.tt-offer-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 22px 0 0;
}
.tt-offer-field { display: grid; gap: 7px; min-width: 0; }
.tt-offer-field > span:first-child {
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
}
.tt-offer-field > input,
.tt-offer-field textarea,
.tt-offer-input {
  width: 100%;
  border: 1px solid #cfdfdd;
  border-radius: 12px;
  background: #fff;
  color: var(--navy);
  font: inherit;
}
.tt-offer-field > input,
.tt-offer-field textarea { padding: 11px 12px; }
.tt-offer-field textarea { min-height: 84px; resize: vertical; }
.tt-offer-field--wide { grid-column: 1 / -1; }
.tt-offer-input { display: flex; align-items: center; overflow: hidden; }
.tt-offer-input b { padding-left: 13px; }
.tt-offer-input input {
  min-width: 0;
  width: 100%;
  padding: 11px 12px 11px 7px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--navy);
  font: inherit;
}
.tt-offer-field > input:focus,
.tt-offer-field textarea:focus,
.tt-offer-input:focus-within { border-color: var(--cyan); }
#offer-dialog .tt-offer-summary {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: #f5faf9;
}
#offer-dialog .tt-offer-summary__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
#offer-dialog .tt-offer-summary__units { margin-top: 5px; color: var(--muted); font-size: 14px; }
#offer-dialog .tt-offer-summary__asking {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-size: 14px;
}
#offer-dialog .tt-offer-summary__asking[hidden] { display: none; }
#offer-dialog .tt-offer-summary__asking strong { font-size: 18px; }
#offer-dialog .tt-offer-field > span:first-child,
#offer-dialog .tt-offer-amount > label { font-size: 14px; font-weight: 700; }
#offer-dialog .tt-offer-field > input,
#offer-dialog .tt-offer-field textarea { font-size: 16px; }
#offer-dialog .tt-offer-input { min-height: 56px; font-size: 26px; font-weight: 700; }
#offer-dialog .tt-offer-input input { font-size: 26px; font-weight: 700; }
#offer-dialog .tt-offer-input input::placeholder { font-size: 16px; font-weight: 400; color: var(--muted); }
#offer-dialog .tt-offer-terms { color: var(--muted); font-size: 13px; line-height: 1.5; }
#offer-dialog .tt-offer-average {
  min-height: 20px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
#offer-dialog .tt-offer-error { margin-top: 14px; color: #8a3321; font-size: 14px; }
#offer-dialog #offer-continue { margin-top: 0; }
.tt-grade-standards { display: grid; gap: 10px; margin: 22px 0; }
.tt-grade-standard {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  padding: 14px;
  border: 1px solid #e1edeb;
  border-radius: 14px;
  background: #fbfdfd;
}
.tt-grade-standard p { color: var(--muted); font-size: 14px; line-height: 1.5; }
.tt-grade-copy { white-space: pre-line; overflow-wrap: anywhere; }
.tt-grade-standard__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 38px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
}
.tt-grade-standard__badge--ab { background: var(--ab-bg); color: var(--ab-fg); }
.tt-grade-standard__badge--bc { background: var(--bc-bg); color: var(--bc-fg); }
.tt-grade-standard__badge--d { background: var(--d-bg); color: var(--d-fg); }

/* ---- 12e. Gallery ---- */
.tt-gallery {
  display: grid;
  grid-template-columns: 1.55fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 14px;
}
.tt-gallery img {
  width: 100%;
  height: 100%;
  min-height: 150px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: var(--glow-soft);
}
.tt-gallery img:first-child { grid-row: span 2; }
/* a lot with a single shot gets one wide plate rather than a lonely tile */
.tt-gallery--one { grid-template-columns: 1fr; grid-template-rows: auto; }
.tt-gallery--one img:first-child { grid-row: auto; aspect-ratio: 16 / 7; }

.tt-card {
  padding: 30px 32px;
  margin-bottom: 20px;
  border-radius: var(--r-card);
  background: #fff;
  box-shadow: var(--glow);
}
.tt-card h2 { margin-bottom: 16px; font-size: 26px; }

/* section title with a quiet action opposite it */
.tt-card__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.tt-card__head h2 { margin-bottom: 0; }

.tt-note { font-size: 14px; color: var(--muted); }
.tt-note a { color: var(--cyan); font-weight: 700; letter-spacing: 0.5px; }
.tt-note a:hover { color: var(--mint); }

/* Grade mix: fixed numeric columns and complete backend-authored attributes. */
#teq-grading.tt-grade-summary { padding: 28px; border: 1px solid #e2e9ed; border-radius: 16px; background: #fff; box-shadow: 0 5px 22px #1c2d5a0b; font-family: var(--font); container: batch-info / inline-size; }
.tt-grade-summary__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 22px; }
#teq-grading .tt-grade-summary__head h2 { margin: 0; font-size: 1.5rem; font-weight: 600; line-height: 1.25; letter-spacing: -.02em; }
.tt-grade-summary__total { margin: 0; color: var(--muted); font-size: .875rem; line-height: 1.5; white-space: nowrap; }
.tt-grade-summary__total strong { color: var(--navy); font-size: 1rem; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
.tt-gradebar { display: flex; height: 12px; margin-bottom: 24px; border-radius: 4px; overflow: hidden; background: #edf2f4; }
.tt-gradebar__segment { min-width: 0; }
.tt-seg--ab { background: var(--mint); }
.tt-seg--bc { background: var(--cyan); }
.tt-seg--d { background: #f7b39c; }
.tt-seg--other { background: #d8e1e5; }
.tt-grade-columns, .tt-grade-row__head { display: grid; grid-template-columns: 52px minmax(0, 1fr) 76px; gap: 12px; align-items: center; }
.tt-grade-columns { padding-bottom: 10px; border-bottom: 1px solid #e1e9ed; font-size: .875rem; line-height: 1.4; color: var(--muted); text-transform: capitalize; }
.tt-grade-columns span:last-child { text-align: right; }
.tt-legend { margin: 0; padding: 0; list-style: none; }
.tt-legend .tt-grade-row { padding: 18px 0; border-bottom: 1px solid #e1e9ed; }
.tt-grade-row__badge { display: inline-flex; align-items: center; justify-content: center; justify-self: start; min-width: 44px; max-width: 100%; min-height: 32px; padding: 4px 6px; border-radius: 6px; font-size: .875rem; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.tt-grade-row__badge--ab { background: var(--ab-bg); color: var(--ab-fg); }
.tt-grade-row__badge--bc { background: var(--bc-bg); color: var(--bc-fg); }
.tt-grade-row__badge--d { background: var(--d-bg); color: var(--d-fg); }
.tt-grade-row__badge--other { background: #edf2f4; color: #425764; }
.tt-grade-row__quantity { min-width: 0; color: var(--navy); font-size: 1.25rem; font-weight: 600; line-height: 1.3; font-variant-numeric: lining-nums tabular-nums; overflow-wrap: anywhere; }
.tt-grade-row__percentage { color: var(--navy); font-size: 1.125rem; font-weight: 600; line-height: 1.3; text-align: right; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.tt-grade-unit-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#teq-grading .tt-grade-row .tt-grade-copy { margin: 10px 0 0 64px; color: var(--muted); font-size: 1rem; line-height: 1.5; }
#teq-grading .tt-grade-row[data-grade=d] .tt-grade-copy { color: #8a3320; }
.tt-grade-copy[data-grade-copy]:has(>.tt-grade-copy__part) { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; }
.tt-grade-copy__part { flex: 0 0 auto; display: block; min-width: 0; max-width: 100%; padding: 3px 8px; border-radius: 4px; background: #f4f7f9; color: inherit; font-size: .875rem; font-weight: 400; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
#teq-grading .tt-grading-intro { margin: 18px 0 6px; padding: 0; border: 0; color: var(--muted); font-size: .875rem; line-height: 1.6; }
.tt-grade-empty { margin: 12px 0; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.tt-grade-standards-link { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 8px 0; border: 0; background: transparent; color: var(--navy); font: inherit; font-size: .9375rem; font-weight: 600; line-height: 1.5; text-align: left; }
.tt-grade-standards-link svg { flex: none; }
.tt-grade-standards-link:hover { color: #237d6c; }
@container batch-info (max-width: 440px) {
  #teq-grading .tt-grade-summary__head h2 { font-size: 1.375rem; }
  .tt-grade-summary__head { margin-bottom: 20px; }
  .tt-grade-columns, .tt-grade-row__head { grid-template-columns: 52px minmax(0, 1fr) 68px; gap: 12px; }
  .tt-legend .tt-grade-row { padding: 16px 0; }
  #teq-grading .tt-grade-row .tt-grade-copy { margin-left: 0; }
}
@media (max-width: 768px) { #teq-grading.tt-grade-summary { padding: 20px; } }

.tt-scroll { overflow-x: auto; }

.tt-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tt-table th {
  padding: 12px 10px;
  background: #f7fcfb;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--muted);
  white-space: nowrap;
}
.tt-table th:first-child { border-radius: 12px 0 0 12px; }
.tt-table th:last-child { border-radius: 0 12px 12px 0; }
.tt-table td { padding: 13px 10px; border-bottom: 1px solid var(--rule-soft); }
.tt-table tbody tr:hover { background: #f9fdfd; }
.tt-table .tt-num { text-align: right; }
.tt-table td.tt-num { font-variant-numeric: tabular-nums; }

/* The uploaded spreadsheet is the primary buying surface on every lot. */
.tt-product-list-card { padding: 24px; }
.tt-product-list-head { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; align-items: center; margin-bottom: 12px; }
.tt-product-list-head h2 { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: 0; }
.tt-product-list-head h2 svg { flex: 0 0 auto; color: #15856b; }
.tt-product-list-head .tt-btn { width: 100%; min-height: 44px; }
.tt-workbook-bar { padding: 6px 8px; border: 1px solid #d8d8d8; border-bottom: 0; background: #f7f7f7; }
.tt-list-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 12px; min-width: 0; color: var(--muted); font-size: 12px; line-height: 20px; }
.tt-list-meta b { flex: 0 1 auto; max-width: 100%; overflow: hidden; color: #444; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.tt-list-meta span { flex: 0 0 auto; }
.tt-list-state {
  display: flex;
  min-height: 180px;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--rule);
  border-top: 0;
  border-radius: 0 0 15px 15px;
  background: #f8fbfc;
  color: var(--muted);
  font-size: 14px;
}
.tt-sheet-scroll {
  max-height: min(70vh, 720px);
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(28, 45, 90, 0.02);
  scrollbar-color: #aebac3 #eef2f4;
  scrollbar-width: auto;
}
.tt-sheet-scroll:focus-visible {
  outline: 3px solid rgba(82, 198, 216, 0.32);
  outline-offset: 3px;
}
.tt-sheet-dock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid #d8d8d8;
  border-top: 0;
  border-radius: 0 0 14px 14px;
  background: #f4f7f8;
}
.tt-sheet-tab {
  display: inline-flex;
  align-self: stretch;
  align-items: center;
  gap: 7px;
  min-width: 0;
  max-width: 45%;
  padding: 0 10px;
  border-bottom: 3px solid #169c86;
  background: #fff;
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
}
.tt-sheet-tab svg { flex: 0 0 auto; }
.tt-sheet-tab > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-sheet-hint { min-width: 0; color: var(--muted); font-size: 12px; text-align: right; }
.tt-list-limit { margin-top: 13px; line-height: 1.5; }

.tt-deal-details {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
}
.tt-deal-details .tt-card { margin-bottom: 0; }

.tt-terms li { padding: 7px 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.tt-terms li > span { white-space: pre-line; overflow-wrap: anywhere; }
.tt-terms li { display: grid; gap: 2px; }
.tt-terms b { color: var(--navy); }

/* your contact, as a strip inside the summary card */
.tt-rep {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 18px;
  padding: 16px 20px;
  border-radius: 16px;
  background: #f7fcfb;
  font-size: 14px;
  color: var(--muted);
}
.tt-rep b { color: var(--navy); font-weight: 700; }
.tt-rep a { color: var(--cyan); font-weight: 700; }
.tt-rep a:hover { color: var(--mint); }

/* --------------------------------------------------------------------------
   12f. Why buy from us — three columns on the gradient, closing the lot page
   -------------------------------------------------------------------------- */
.tt-why {
  padding: 48px 38px 52px;
  border-radius: var(--r-card);
  background: var(--wash);
  color: #fff;
  text-align: center;
}
.tt-why h2 { margin-bottom: 34px; color: #fff; font-size: 28px; }
.tt-why__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px;
  text-align: center;
}
.tt-why__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}
.tt-why h3 { margin-bottom: 10px; color: #fff; font-size: 19px; font-weight: 700; }
.tt-why p { font-size: 14px; line-height: 23px; opacity: 0.95; }

/* --------------------------------------------------------------------------
   13. Closing sections
   -------------------------------------------------------------------------- */
.tt-cta { background: var(--wash-light); text-align: center; }
.tt-cta .tt-shell { padding-block: 60px; }
.tt-cta h2 { margin-bottom: 14px; }
.tt-cta p { max-width: 66ch; margin: 0 auto 24px; color: var(--muted); }
.tt-cta .tt-cta__rep { margin-top: -12px; font-size: 13px; }
.tt-cta__rep b { color: var(--navy); }
.tt-cta__rep a { color: var(--cyan); font-weight: 700; }
.tt-cta__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; }

.tt-signup { background: var(--wash); color: #fff; }
.tt-signup .tt-shell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 30px;
}
.tt-signup b { display: block; font-size: 20px; line-height: 25px; }
.tt-signup span { font-size: 14px; opacity: 0.95; }

/* --------------------------------------------------------------------------
   14. Footer — the same gradient as the band, per the live theme
   -------------------------------------------------------------------------- */
.tt-footer { background: var(--wash); color: #fff; }
.tt-footer__cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  padding-block: 70px 24px;
}
.tt-footer__col > span {
  display: block;
  margin-bottom: 14px;
  font-size: 20px;
  font-weight: 700;
  line-height: 25px;
}
.tt-footer__col li { margin-bottom: 6px; font-size: 14px; }
.tt-footer a:hover { color: var(--navy); }
.tt-footer__logo { display: block; height: 62px; width: auto; margin-bottom: 18px; }
.tt-footer__sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 20px 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 11px;
  letter-spacing: 0.14px;
}

/* --------------------------------------------------------------------------
   15. Back-to-top
   -------------------------------------------------------------------------- */
.tt-top {
  position: fixed;
  right: 24px;
  bottom: 28px;
  z-index: 25;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}
.tt-top span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--glow);
  color: var(--cyan);
}

/* --------------------------------------------------------------------------
   16. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .tt-lots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 992px) {
  .tt-heading { grid-template-columns: minmax(0, 1fr); }
  .tt-band h1 { font-size: 30px; line-height: 36px; letter-spacing: 0.87px; }
  .tt-band__lead { font-size: 16px; line-height: 26px; }
  .tt-band--hero .tt-shell { padding-block: 56px 60px; }
  .tt-band--compact h1 { font-size: 26px; line-height: 32px; }

  .tt-card,
  .tt-why { padding: 26px 22px; }
  .tt-card h2 { font-size: 22px; }
  .tt-why { padding-block: 36px 40px; }

  .tt-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .tt-gallery img:first-child { grid-row: auto; grid-column: span 2; aspect-ratio: 16 / 10; }

  .tt-why__cols { grid-template-columns: 1fr; gap: 26px; }

  .tt-footer__cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  :root { --gutter: 16px; --header-h: 66px; }

  h1 { font-size: 26px; }
  h2 { font-size: 24px; }

  .tt-logo img { height: 26px; }

  /* One vertical card per row, keeping the full square product image. */
  .tt-lots { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .tt-catalog { padding-block: 24px 44px; }
  .tt-heading { margin-bottom: 20px; }
  .tt-lot__spec { min-height: 0; }
  .tt-lot__action { min-height: 48px; }

  .tt-gallery { grid-template-columns: 1fr; }
  .tt-gallery img:first-child { grid-column: auto; }


  .tt-band__actions { flex-direction: column; align-items: stretch; }
  .tt-stats .tt-shell { gap: 8px 20px; font-size: 13px; }

  .tt-product-list-head { align-items: stretch; flex-direction: column; }
  .tt-product-list-head .tt-btn { width: 100%; }
  .tt-sheet-scroll { max-height: 72vh; }
  .tt-product-list-card { padding: 16px; }
  .tt-product-list-head h2 { font-size: 21px; }
  .tt-product-list-head, .tt-list-meta { grid-template-columns: minmax(0, 1fr); }
  .tt-sheet-hint { font-size: 11px; line-height: 1.3; }


  .tt-footer__cols { grid-template-columns: 1fr; gap: 24px; padding-block: 44px 20px; }
  .tt-top { display: none; }
}

@media (max-width: 430px) {
  .tt-crumbbar { padding-top: 14px; }
  .tt-dialog__panel { padding: 22px 18px; }
  .tt-dialog__head h2 { font-size: 24px; }
  .tt-offer-fields { grid-template-columns: 1fr; gap: 12px; }
  .tt-offer-field--wide { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
  .tt-ribbon__live::after { animation: none; opacity: 0; }
}

/* Mobile wholesale: compact information, full-width reading surfaces. */
html.tt-modal-open { overflow: hidden; }
.tt-dialog { max-height: var(--tt-dialog-height, calc(100dvh - 32px)); }
.tt-dialog__panel { max-height: var(--tt-dialog-height, calc(100dvh - 32px)); }
.tt-dialog__head > div, .tt-dialog__head h2 { min-width: 0; overflow-wrap: anywhere; }
.tt-dialog__head h2 { font-size: 24px; line-height: 1.25; font-weight: 600; }
.tt-dialog__head .tt-dialog__close { margin: -4px -8px 0 0; }
.tt-dialog__content :is(input, textarea) { scroll-margin-block: 16px; }
.tt-dialog__content .tt-dialog__intro { margin-top: 0; }
.tt-dialog__foot .tt-offer-error { margin: 0 0 8px !important; }
.tt-dialog__foot .tt-dialog__note { margin-top: 8px; }
.tt-viewport-short .tt-dialog__note { display: none; }
.tt-viewport-short .tt-dialog__head { padding-block: 8px; }
.tt-viewport-short .tt-dialog__foot { padding-block: 8px; }
.tt-list-actions { display: flex; gap: 8px; align-items: stretch; }
.tt-product-list-head { grid-template-columns: minmax(0, 1fr) auto; }
.tt-product-list-head .tt-btn { width: auto; white-space: normal; }
.tt-list-expand { display: none; }
.tt-dialog--sheet { width: min(1200px, calc(100vw - 48px)); }
.tt-dialog--sheet .tt-dialog__panel { height: var(--tt-dialog-height, calc(100dvh - 32px)); max-height: var(--tt-dialog-height, calc(100dvh - 32px)); }
.tt-dialog--sheet .tt-dialog__content { display: flex; min-height: 0; padding: 0 16px; overflow: hidden; }
.tt-dialog--sheet [data-sheet-frame] { display: flex; flex-direction: column; min-width: 0; min-height: 0; width: 100%; }
.tt-dialog--sheet .tt-sheet-scroll { flex: 1; min-height: 0; max-height: none; }
.tt-dialog--sheet .tt-sheet-dock, .tt-dialog--sheet .tt-workbook-bar { flex-shrink: 0; }
.tt-sheet-placeholder { width: 100%; }

/* Only the spreadsheet scrolls. Both exits remain outside its zoom/pan area. */
html:not(.tt-embedded) .tt-dialog--sheet { position: fixed; inset: var(--tt-native-dialog-top, 12px) 0 auto; margin: 0 auto; }
.tt-dialog--sheet .tt-dialog__head { align-items: center; padding: 8px 16px; gap: 12px; background: #fff; border-bottom: 1px solid var(--rule); }
.tt-dialog--sheet .tt-dialog__head h2 { margin: 0; font-family: var(--font); font-size: 20px; line-height: 1.3; font-weight: 600; }
.tt-dialog--sheet .tt-dialog__close { margin: 0; color: var(--navy); background: #f3f6f7; border-radius: 9px; }
.tt-dialog--sheet .tt-sheet-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px 16px max(12px, env(safe-area-inset-bottom)); }
.tt-sheet-actions .tt-btn { min-width: 0; min-height: 48px; padding: 10px; gap: 7px; font-family: var(--font); font-size: 14px; line-height: 1.3; font-weight: 600; letter-spacing: 0; white-space: nowrap; border-radius: 9px; }
.tt-sheet-actions .tt-sheet-back { color: #fff; background: var(--navy); border: 1px solid var(--navy); }
.tt-sheet-actions .tt-btn--download { color: var(--navy); background: #fff; border: 1px solid #cfdae3; }
.tt-sheet-actions .tt-btn__icon { flex: 0 0 18px; }
.tt-sheet-actions .tt-sheet-back:hover { background: #1b264c; }
.tt-sheet-actions .tt-btn--download:hover { background: #f3f6f7; border-color: var(--navy); }
.tt-dialog--sheet :is(button, a):focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
#batch-buying:focus { outline: none; }
@media (max-width: 380px) {
  .tt-dialog--sheet .tt-sheet-actions { padding-inline: 8px; gap: 8px; }
  .tt-dialog--sheet .tt-sheet-actions .tt-btn { padding-inline: 8px; gap: 5px; }
}

@media (max-width: 768px) {
  :root { --r-card: 18px; --muted: #53677d; }
  body { font-size: 16px; line-height: 1.5; }
  .tt-heading { margin-bottom: 16px; }
  .tt-heading h1 { font-size: 24px; font-weight: 600; line-height: 1.25; }
  .tt-back { min-height: 44px; font-size: 14px; }
  .tt-crumbbar { padding-top: 4px; }
  .tt-lot-layout { margin-top: 4px; }
  .tt-card { border: 1px solid #dce8e8; box-shadow: none; border-radius: 18px; margin-bottom: 16px; }
  .tt-card { padding: 16px; }
  .tt-card h2 { font-size: 22px; line-height: 1.25; font-weight: 600; }
  .tt-card__head { margin-bottom: 12px; align-items: center; }
  .tt-pill { font-size: 12px; letter-spacing: 0; padding: 5px 10px; }
  .tt-legend li, .tt-terms li { font-size: 16px; }
  .tt-note { font-size: 14px; }
  .tt-gallery, .tt-gallery--one { display: grid; grid-template-columns: none; grid-template-rows: auto; grid-auto-flow: column; grid-auto-columns: 88%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin; padding-bottom: 8px; }
  .tt-gallery--one { grid-auto-columns: 100%; }
  .tt-gallery img, .tt-gallery img:first-child, .tt-gallery--one img:first-child { grid-column: auto; grid-row: auto; width: 100%; height: auto; min-height: 0; aspect-ratio: 4 / 3; object-fit: contain; background: #f3f6f7; border-radius: 10px; box-shadow: none; scroll-snap-align: start; }
  .tt-product-list-head { grid-template-columns: minmax(0, 1fr); }
  .tt-product-list-head h2 { font-size: 20px; }
  .tt-product-list-head h2 svg { width: 20px; height: 20px; }
  .tt-list-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .tt-list-actions .tt-btn { width: 100%; min-height: 48px; font-size: 14px; gap: 6px; padding: 8px; letter-spacing: 0; }
  .tt-list-expand { display: inline-flex; }
  .tt-list-expand[hidden] { display: none; }
  .tt-sheet-scroll { max-height: 420px; }
  .tt-sheet-hint { font-size: 12px; line-height: 1.3; }
  .tt-sheet-dock { gap: 8px; min-height: 36px; border-radius: 0 0 8px 8px; }
  .tt-sheet-tab { max-width: 42%; padding-inline: 4px; }
  .tt-dialog { width: calc(100% - 16px); border-radius: 16px; box-shadow: 0 8px 28px rgba(14,32,68,.18); }
  html:not(.tt-embedded) .tt-dialog { position: fixed; inset: var(--tt-native-dialog-top, 12px) 0 auto; margin: 0 auto; }
  .tt-dialog__panel { padding: 0; }
  .tt-dialog__head { gap: 12px; padding: 16px; align-items: center; }
  .tt-dialog__head h2 { margin: 0; font-size: 22px; line-height: 1.25; }
  .tt-dialog__eyebrow { font-size: 12px; letter-spacing: .5px; margin-bottom: 4px; }
  .tt-dialog__content { padding: 0 16px 16px; }
  .tt-dialog__foot { padding: 12px 16px max(12px, env(safe-area-inset-bottom)); }
  .tt-dialog__note { font-size: 12px; }
  #offer-dialog .tt-offer-summary { margin: 0; padding: 0 0 12px; background: transparent; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; }
  #offer-dialog .tt-offer-summary__title { font-size: 16px; line-height: 1.35; }
  #offer-dialog .tt-offer-summary__units { margin-top: 4px; font-size: 14px; }
  #offer-dialog .tt-offer-summary__asking { margin-top: 8px; padding-top: 0; border: 0; gap: 2px 12px; }
  #offer-dialog .tt-offer-summary__asking strong { font-size: 18px; }
  .tt-offer-optional { margin-top: 10px; }
  .tt-offer-fields { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 10px; }
  .tt-offer-field--wide { grid-column: auto; }
  #offer-dialog .tt-offer-input { min-height: 50px; font-size: 22px; }
  #offer-dialog .tt-offer-input input { font-size: 22px; }
  #offer-dialog .tt-offer-field > input { min-height: 48px; }
  #offer-dialog .tt-offer-field textarea { min-height: 80px; }
  #offer-dialog .tt-offer-average:empty { display: none; }
  .tt-grade-standards { gap: 0; margin: 12px 0 0; }
  .tt-grade-standard { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 14px 0; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: transparent; }
  .tt-grade-standard:last-child { border-bottom: 0; }
  .tt-grade-standard p { font-size: 16px; line-height: 1.45; }
  .tt-grade-standard__badge { width: 44px; height: 36px; border-radius: 8px; font-size: 14px; }
  .tt-dialog--sheet { width: calc(100% - 16px); }
  .tt-dialog--sheet .tt-dialog__content { padding-inline: 8px; }
  .tt-dialog--sheet .tt-list-meta b { display: none; }
  .tt-viewport-short .tt-dialog__head, .tt-viewport-short .tt-dialog__foot { padding-block: 8px; }
}

/* With very little room (landscape + keyboard), all controls remain reachable
   through one scroll area; the close control stays at its top. */
.tt-viewport-short .tt-dialog:not(.tt-dialog--sheet) .tt-dialog__panel { display: block; overflow-y: auto; overscroll-behavior: contain; scroll-padding-top: 64px; }
.tt-viewport-short .tt-dialog:not(.tt-dialog--sheet) .tt-dialog__content { overflow: visible; }
.tt-viewport-short .tt-dialog__head { position: sticky; top: 0; z-index: 2; background: #fff; }

/* Product details share one spacing and typography system. */
.tt-detail .tt-product-list-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; }
.tt-detail .tt-product-list-head h2 { min-width: 0; }
.tt-detail .tt-list-actions { display: flex; align-items: stretch; gap: 8px; }
.tt-detail .tt-list-actions .tt-btn { width: auto; min-height: 48px; font-size: .875rem; line-height: 1.4; letter-spacing: 0; padding: 10px 16px; border-radius: 10px; }
.tt-detail .tt-list-expand { display: inline-flex; }
.tt-detail .tt-list-expand[hidden] { display: none; }
.tt-detail .tt-list-meta { grid-template-columns: minmax(0, 1fr) auto; font-size: .75rem; gap: 4px 16px; }
.tt-list-meta b { white-space: normal; overflow-wrap: anywhere; overflow: visible; }
.tt-detail .tt-workbook-bar { padding: 8px 10px; background: #f6f8fa; }
.tt-detail .tt-sheet-dock { border-radius: 0 0 8px 8px; }
.tt-detail .tt-note { font-size: .875rem; line-height: 1.6; overflow-wrap: break-word; }
.tt-detail .tt-legend li, .tt-detail .tt-terms li { font-size: 1rem; line-height: 1.5; }
.tt-detail .tt-grade-row .tt-grade-copy { margin: 0; font-size: 1rem; line-height: 1.5; }
.tt-detail .tt-grading-intro { margin: 4px 0 0; padding-top: 16px; border-top: 1px solid #e5eded; font-size: .875rem; line-height: 1.6; }
.tt-detail .tt-info-card { container: batch-info / inline-size; }
.tt-detail .tt-info-card h2 { font-size: 1.25rem; margin-bottom: 16px; }
.tt-detail .tt-info-card .tt-terms { margin: 0; padding: 0; display: grid; gap: 0; list-style: none; }
.tt-detail .tt-info-card .tt-terms li { min-width: 0; padding: 14px 0; gap: 5px; }
.tt-detail .tt-info-card .tt-terms li:first-child { padding-top: 0; }
.tt-detail .tt-info-card .tt-terms li:last-child { padding-bottom: 0; }
.tt-detail .tt-info-card .tt-terms li + li { border-top: 1px solid #e5eded; }
.tt-detail .tt-info-card .tt-terms b { font-size: .875rem; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
@container batch-info (min-width: 28rem) {
  .tt-detail .tt-info-card .tt-terms li { grid-template-columns: 8rem minmax(0, 1fr); column-gap: 16px; align-items: start; }
}
.tt-detail .tt-gallery img { object-fit: contain; background: #f3f6f7; box-shadow: none; border-radius: 10px; }
.tt-deal-details { align-items: start; }
.tt-dialog { border-radius: 16px; }
.tt-dialog__intro, .tt-grade-standard p, .tt-dialog .tt-terms li { font-size: 1rem; line-height: 1.6; overflow-wrap: break-word; }
.tt-dialog__head h2 { overflow-wrap: break-word; letter-spacing: 0; }
.tt-dialog__note, .tt-dialog__eyebrow { font-size: .75rem; }
.tt-dialog .tt-btn { min-height: 48px; font-size: .875rem; line-height: 1.4; letter-spacing: 0; border-radius: 10px; }
.tt-dialog .tt-offer-field > input, .tt-dialog .tt-offer-field textarea { min-height: 48px; }
.tt-dialog .tt-offer-field > span:first-child, .tt-dialog .tt-offer-amount > label { font-size: .875rem; line-height: 1.5; }
.tt-dialog--sheet .tt-list-meta b { display: block; }
@container product-page (max-width: 799px) {
  .tt-detail .tt-product-list-head { grid-template-columns: minmax(0, 1fr); }
  .tt-deal-details { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@container product-page (max-width: 599px) {
  .tt-detail .tt-list-actions { display: grid; grid-template-columns: 48px minmax(0, 1fr); }
  .tt-detail .tt-list-actions .tt-btn { width: 100%; padding: 10px; }
  .tt-detail .tt-list-expand .tt-btn__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tt-detail .tt-list-meta { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .tt-detail .tt-card__head { flex-wrap: wrap; gap: 8px; }
}

/* Enlarged text reflows within the same reading surface. */
.tt-btn[hidden] { display: none !important; }
.tt-detail h2 { min-width: 0; overflow-wrap: anywhere; }
.tt-detail .tt-card__head > h2 { flex: 1 0 auto; max-width: 100%; }
.tt-detail .tt-product-list-head h2 span { min-width: 0; }
@container deal-body (max-width: 15rem) {
  .tt-tile { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .tt-tile__note { grid-column: 1; }
}

/* Mobile buying journey: product photo, batch economics, direct enquiry. */
.tt-ribbon { text-transform: none; letter-spacing: 0; border-radius: 6px; padding: 6px 9px; gap: 6px; font-size: .8125rem; line-height: 18px; font-weight: 600; }
.tt-ribbon__icon { width: 16px; height: 16px; }
.tt-lot__photo-count { display: inline-flex; align-items: center; gap: 5px; font-size: .75rem; line-height: 18px; color: var(--card-muted); white-space: nowrap; }
.tt-lot__photo-count svg { width: 15px; height: 15px; flex: none; }
.tt-lot__price-heading { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: baseline; gap: 5px 7px; margin-bottom: 5px; }
.tt-lot__price-heading .tt-lot__quantity { margin: 0; font-size: .875rem; }
.tt-lot__price-heading .tt-lot__quantity strong { font-size: 1.0625rem; }
.tt-lot__price-heading .tt-lot__price-label { margin: 0; text-transform: none; letter-spacing: 0; font-size: .75rem; font-weight: 400; }
.tt-lot__price-heading .tt-lot__price-label::before { content: '·'; color: #82909f; margin-right: 7px; }
.tt-enquiry-rep { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tt-enquiry-rep--summary { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; }
.tt-enquiry-rep__copy { min-width: 0; overflow-wrap: anywhere; }
.tt-enquiry-email-action { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #dce5e9; border-radius: 10px; background: #f4f7f8; color: var(--navy); }
.tt-enquiry-email-action svg { display: block; width: 22px; height: 22px; }
.tt-enquiry-email-action:hover { background: #e8f2ef; border-color: #82b9ae; color: var(--navy); }
.tt-enquiry-email-action:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.tt-enquiry-rep img { display: block; width: 44px; height: 44px; flex: none; border-radius: 50%; object-fit: cover; }
.tt-enquiry-rep strong { display: block; font-size: .875rem; font-weight: 600; }
.tt-enquiry-rep span { display: block; margin-top: 3px; font-size: .8125rem; line-height: 1.5; color: var(--muted); }
.tt-deal__body > .tt-enquiry-rep { padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--rule); }
.tt-enquiry-dialog .tt-dialog__head img { width: 52px; height: 52px; }
.tt-enquiry-dialog .tt-dialog__head h2 { font-size: 1.5rem; font-weight: 600; }
.tt-enquiry-intent { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; background: #f0f3f7; padding: 4px; border-radius: 10px; margin: 18px 0; }
.tt-enquiry-intent button { min-height: 44px; padding: 8px; font-size: .875rem; font-weight: 600; line-height: 1.4; border-radius: 7px; color: var(--muted); }
.tt-enquiry-intent button[aria-pressed="true"] { color: var(--navy); background: #fff; box-shadow: 0 1px 5px #26325f15; }
.tt-enquiry-dialog .tt-offer-fields { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.tt-enquiry-dialog .tt-offer-field input, .tt-enquiry-dialog .tt-offer-field textarea { border-radius: 8px; }
.tt-enquiry-dialog .tt-offer-field textarea { min-height: 104px; }
.tt-enquiry-success { padding: 14px; margin-top: 16px; border: 1px solid #bdded5; border-radius: 8px; background: #e9f6f0; color: #1c614e; font-size: 1rem; line-height: 1.5; }
.tt-enquiry-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.tt-enquiry-email { margin: 12px 0 0; color: var(--muted); text-align: center; font-size: .8125rem; line-height: 1.5; }
.tt-enquiry-email a { color: var(--navy); text-decoration: underline; }
.tt-enquiry-dialog .tt-dialog__note { font-size: .8125rem; line-height: 1.5; }
.tt-enquiry-dialog .tt-offer-field[hidden], .tt-enquiry-success[hidden] { display: none; }
.tt-actions .tt-btn--enquire { grid-column: 1 / -1; font-size: 1rem; min-height: 52px; background: #c64805; color: #fff; }
.tt-actions .tt-btn--enquire:hover { background: #a83c04; }
/* One existing action row: a quiet bid option and the primary purchase route. */
.tt-purchase-actions { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; }
.tt-purchase-actions--split { grid-template-columns: repeat(2,minmax(0,1fr)); }
.tt-actions .tt-purchase-actions .tt-btn { width: 100%; min-width: 0; min-height: 52px; padding: 13px 10px; border-radius: 10px; font: 600 1rem/1.35 var(--font); letter-spacing: normal; box-shadow: none; }
.tt-actions .tt-purchase-actions--split .tt-btn--enquire { grid-column: auto; background: #fff; color: var(--navy); border: 1.5px solid #263b63; }
.tt-actions .tt-purchase-actions--split .tt-btn--enquire:hover { background: #f3f6fa; border-color: #14284d; }
.tt-actions .tt-btn--buy { background: #c64805; color: #fff; border: 1.5px solid #c64805; gap: 10px; }
.tt-actions .tt-btn--buy:hover { background: #a83c04; border-color: #a83c04; }
.tt-buy-arrow { font-size: 1.4rem; line-height: .9; }
.tt-purchase-dialog { width: min(600px,calc(100% - 32px)); border-radius: 16px; font-family: var(--font); }
.tt-purchase-dialog .tt-dialog__head { align-items: center; }
.tt-purchase-dialog .tt-dialog__head h2 { font-size: 1.5rem; font-weight: 600; line-height: 1.25; letter-spacing: -.02em; }
.tt-purchase-dialog .tt-enquiry-rep { min-width: 0; }
.tt-purchase-dialog .tt-enquiry-rep > img { width: 44px; height: 44px; object-fit: contain; }
.tt-purchase-dialog .tt-dialog__close { margin: 0 -5px 0 0; border-radius: 8px; }
.tt-purchase-intro { color: var(--muted); font-size: .9375rem; line-height: 1.6; }
.tt-purchase-summary { padding: 15px 16px; border-radius: 10px; background: #f3f6f8; margin: 18px 0; }
.tt-purchase-summary > strong { display: block; font-size: .9375rem; line-height: 1.4; font-weight: 600; }
.tt-purchase-summary > p { margin-top: 4px; font-size: .8125rem; color: var(--muted); line-height: 1.5; }
.tt-purchase-summary__price { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; padding-top: 12px; margin-top: 12px; border-top: 1px solid #d9e2e7; font-size: .875rem; color: var(--muted); }
.tt-purchase-summary__price b { color: var(--navy); font-size: 1.5rem; font-weight: 600; }
.tt-purchase-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px 14px; }
.tt-purchase-field { display: grid; gap: 6px; min-width: 0; }
.tt-purchase-field > span { font-size: .875rem; line-height: 1.4; font-weight: 600; }
.tt-purchase-field em { font-style: normal; font-weight: 400; color: var(--muted); }
.tt-purchase-field--wide { grid-column: 1 / -1; }
.tt-purchase-field input { border: 1px solid #c9d5df; border-radius: 8px; padding: 11px 12px; background: #fff; color: var(--navy); width: 100%; min-width: 0; font: 400 1rem/1.35 var(--font); min-height: 46px; }
.tt-purchase-field input::placeholder { color: #748191; opacity: 1; }
.tt-purchase-field input:focus { border-color: #41879d; }
.tt-purchase-dialog .tt-purchase-submit { background: #c64805; color: #fff; border-radius: 10px; min-height: 52px; font: 600 1rem/1.35 var(--font); letter-spacing: normal; padding: 13px 10px; }
.tt-purchase-dialog .tt-purchase-submit:hover { background: #a83c04; }
.tt-purchase-dialog .tt-dialog__note { font-size: .8125rem; line-height: 1.5; }
#purchase-privacy { font-size: .75rem; }
#purchase-privacy a { text-decoration: underline; text-underline-offset: 2px; }
.tt-purchase-error { padding: 10px 12px; margin-bottom: 12px; border-radius: 7px; background: #fff5f3; color: #9e2626; font-size: .875rem; line-height: 1.5; }
.tt-purchase-refresh { display: block; margin: 10px auto 0; min-height: 36px; text-decoration: underline; text-underline-offset: 3px; font-size: .875rem; }
.tt-purchase-result { padding: 8px 0; }
.tt-purchase-result__check { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #e5f4ee; color: #237d6c; margin: 4px 0 18px; font-size: 1.5rem; }
.tt-purchase-result h3 { font-size: 1.5rem; line-height: 1.3; font-weight: 600; letter-spacing: -.02em; margin: 4px 0 12px; }
.tt-purchase-result > p { color: var(--muted); font-size: .9375rem; line-height: 1.65; }
.tt-purchase-receipt { margin: 22px 0 14px; background: #f3f6f8; border-radius: 10px; padding: 8px 16px; }
.tt-purchase-receipt > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 5px 16px; padding: 10px 0; font-size: .875rem; line-height: 1.5; }
.tt-purchase-receipt dt { color: var(--muted); }
.tt-purchase-receipt dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
@media (max-width:540px) {
  .tt-actions .tt-purchase-actions .tt-btn { font-size: .9375rem; padding-inline: 8px; }
  .tt-purchase-fields { grid-template-columns: minmax(0,1fr); gap: 14px; }
  .tt-purchase-dialog .tt-dialog__head { padding: 18px 18px 14px; }
  .tt-purchase-dialog .tt-dialog__content,.tt-purchase-dialog .tt-dialog__foot { padding-inline: 18px; }
  .tt-purchase-dialog .tt-dialog__head h2 { font-size: 1.3125rem; }
}
@media (max-width:350px) { .tt-actions .tt-purchase-actions .tt-btn { font-size: .875rem; } }
.tt-actions .tt-btn--download { grid-column: 1 / -1; }
.tt-home .tt-heading__eyebrow { margin-bottom: 8px; color: #237d6c; font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.tt-home .tt-heading__proof { margin-top: 9px; font-size: .875rem; line-height: 1.5; color: var(--muted); }
@media (max-width: 768px) {
  .tt-home { background: #f7f9fb; }
  .tt-catalog { padding-block: 24px 32px; }
  .tt-header .tt-shell { min-height: 70px; padding-block: 14px; }
  .tt-header .tt-logo img { width: min(245px, 75vw); height: auto; }
  .tt-heading { margin-bottom: 22px; }
  .tt-heading h1 { font-size: 1.75rem; line-height: 1.2; letter-spacing: -.4px; }
  .tt-lots { gap: 24px; }
  .tt-lot { border-radius: 16px; }
  .tt-deal__brand { position: static; padding: 10px 16px 0; }
  .tt-deal__brand .tt-brand { background: transparent; border: 0; padding: 0; min-height: 26px; }
  .tt-deal__brand .tt-brand__logo { height: 20px; }
  .tt-deal__body { padding: 18px; }
  .tt-deal h1 { margin-top: 12px; font-size: 1.4375rem; line-height: 1.25; letter-spacing: -.2px; }
  .tt-deal__meta .tt-pill { font-size: .875rem; background: #237d6c; color: #fff; border-radius: 6px; }
  .tt-deal__meta .tt-pill--sold { background: #56657a; }
  .tt-deal__meta .tt-pill--new { background: #c64805; }
  .tt-deal-price { background: #fff; color: var(--navy); border-top: 1px solid var(--rule); padding: 16px 0 0; margin-top: 20px; border-radius: 0; gap: 7px; }
  .tt-pricebar__label, .tt-pricebar__average, .tt-pricebar__note, .tt-notice { color: var(--muted); }
  .tt-pricebar__lead { color: var(--navy); font-size: 1rem; font-weight: 400; }
  .tt-pricebar__amount { font-size: 2.125rem; line-height: 1.2; font-weight: 600; font-variant-numeric: normal; white-space: normal; overflow-wrap: anywhere; }
  .tt-pricebar__summary { gap: 7px; }
  .tt-deal .tt-tiles { margin-top: 16px; gap: 9px; }
  .tt-enquiry-dialog .tt-dialog__head { padding: 18px; }
  .tt-enquiry-dialog .tt-dialog__content, .tt-enquiry-dialog .tt-dialog__foot { padding-inline: 18px; }
  #offer-dialog .tt-offer-summary { background: #f4f6f9; border: 0; padding: 14px; border-radius: 10px; }
  #offer-dialog .tt-offer-summary__title { font-size: .9375rem; font-weight: 600; }
  #offer-dialog .tt-offer-summary__units { font-size: .8125rem; }
}
@media (max-width: 360px) {
  .tt-lot__body, .tt-lot__foot { padding-inline: 16px; }
  .tt-lot__price { margin-inline: 16px; }
  .tt-lot__amount { font-size: 2.125rem; }
}

/* Compact batch photos. Enlargement stays in this section, in normal flow. */
#teq-photos.tt-photo-gallery { padding: 18px; border: 1px solid #dce7e6; border-radius: 18px; box-shadow: 0 4px 16px rgba(28,45,90,.04); overflow-anchor: none; }
.tt-photo-gallery__head, .tt-photo-gallery__heading, .tt-photo-gallery__controls, .tt-photo-gallery__arrows { display: flex; align-items: center; min-width: 0; }
.tt-photo-gallery__head { justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 14px; }
.tt-photo-gallery__heading { gap: 12px; }
#teq-photos h2 { margin: 0; font-family: var(--font); font-size: 1.25rem; font-weight: 600; line-height: 1.3; letter-spacing: 0; }
#photo-count { color: var(--muted); font-size: .8125rem; font-weight: 500; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.tt-photo-gallery__controls { gap: 14px; margin-left: auto; }
.tt-photo-gallery__arrows { gap: 6px; }
.tt-photo-gallery button { font-family: var(--font); -webkit-tap-highlight-color: transparent; }
.tt-photo-arrow { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid #dce7e6; border-radius: 50%; background: #fff; color: var(--navy); cursor: pointer; }
.tt-photo-arrow svg { width: 19px; height: 19px; }
.tt-photo-arrow:disabled { color: #a6b3be; background: #f8fafb; cursor: default; }
.tt-photo-back { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 5px 0; border: 0; background: none; color: var(--navy); font-size: .8125rem; line-height: 1.3; font-weight: 600; text-align: left; cursor: pointer; }
.tt-photo-back svg { flex: 0 0 17px; width: 17px; height: 17px; }
.tt-photo-strip { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 230px; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: #b9d5d0 transparent; padding: 0 0 7px; }
.tt-photo-thumb { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 5 / 4; margin: 0; padding: 0; border: 0; border-radius: 11px; overflow: hidden; background: #f4f6f8; color: var(--navy); cursor: pointer; scroll-snap-align: start; user-select: none; }
.tt-photo-thumb img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: 50% 100%; border-radius: 0; box-shadow: none; user-select: none; -webkit-user-drag: none; }
.tt-photo-open { position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(220,231,230,.9); border-radius: 7px; background: rgba(255,255,255,.94); box-shadow: 0 1px 4px rgba(28,45,90,.06); pointer-events: none; }
.tt-photo-open svg { width: 15px; height: 15px; }
.tt-photo-strip--dragging { cursor: grabbing; scroll-snap-type: none; }
.tt-photo-strip--dragging .tt-photo-thumb { cursor: grabbing; }
.tt-photo-selected { display: grid; place-items: center; height: 260px; padding: 0; overflow: hidden; border: 1px solid #e4ebed; border-radius: 11px; background: #f4f6f8; }
.tt-photo-selected img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; border-radius: 0; }
.tt-photo-error { color: var(--muted); font-size: .875rem; text-align: center; padding: 12px; }
.tt-photo-gallery button:focus-visible { outline: 2px solid var(--navy); outline-offset: -3px; }
@media (hover: hover) {
  .tt-photo-thumb:hover .tt-photo-open { border-color: #82b9ae; }
  .tt-photo-arrow:not(:disabled):hover { background: #edf6f3; border-color: #82b9ae; }
  .tt-photo-back:hover { text-decoration: underline; text-underline-offset: 4px; }
}
@media (max-width: 768px) {
  #teq-photos.tt-photo-gallery { padding: 14px; border-radius: 15px; }
  .tt-photo-gallery__head { margin-bottom: 12px; gap: 8px 10px; }
  .tt-photo-gallery__heading { gap: 9px; }
  #teq-photos h2 { font-size: 1.125rem; }
  #photo-count { font-size: .75rem; }
  .tt-photo-gallery__controls { gap: 9px; }
  .tt-photo-arrow { width: 40px; height: 40px; }
  .tt-photo-strip { grid-auto-columns: min(68%, 210px); gap: 10px; }
  .tt-photo-selected { height: 230px; }
}
@media (max-width: 360px) {
  .tt-photo-gallery--expanded .tt-photo-gallery__heading { flex-direction: column; align-items: flex-start; gap: 2px; }
}

/* Compact live batches share the same brand tokens and action as photo cards. */
.tt-card-break { grid-column: 1 / -1; height: 0; margin-block: -13px; }
.tt-lot.tt-lot--compact { padding: 20px; background: linear-gradient(155deg,#fff 45%,#f5faf9); border-color: #dce5e9; box-shadow: 0 5px 15px #26325f0b; align-self: stretch; }
.tt-lot--compact:hover { border-color: #8bb9ad; box-shadow: 0 7px 20px #26325f12; transform: none; }
.tt-compact__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; min-height: 30px; margin-bottom: 17px; }
.tt-compact__brands { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; min-width: 0; }
.tt-compact__brands .tt-brand__logo { height: 26px; width: auto; max-width: 95px; object-fit: contain; }
.tt-compact__brands .tt-brand__name { font-size: 15px; font-weight: 600; }
.tt-lot--compact .tt-ribbon { position: static; font-size: 12px; padding: 6px 9px; border-radius: 6px; gap: 7px; }
.tt-lot--compact .tt-lot__title { margin: 0; min-height: 53px; font-size: 20px; font-weight: 600; line-height: 1.32; overflow: visible; display: block; -webkit-line-clamp: unset; overflow-wrap: anywhere; }
.tt-compact__category { display: flex; gap: 8px; align-items: center; color: #617481; font-size: 13px; line-height: 1.5; margin-top: 10px; }
.tt-compact__category svg { width: 18px; height: 18px; flex-shrink: 0; }
.tt-compact__specs { margin: 17px 0 18px; font-size: 14px; line-height: 1.65; color: #56657a; min-height: 47px; overflow-wrap: anywhere; }
.tt-compact__specs p { margin: 0; }
.tt-compact__specs p + p { margin-top: 3px; }
.tt-compact__commercial { border-top: 1px solid #cfe4df; padding-top: 17px; margin-top: auto; display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.tt-compact__commercial > div { display: flex; flex-direction: column; gap: 4px; }
.tt-compact__commercial span { font-size: 12px; color: #617481; line-height: 1.5; }
.tt-compact__amount { font-size: 27px; font-weight: 600; line-height: 1.25; letter-spacing: -.4px; }
.tt-compact__units { text-align: right; margin-left: auto; }
.tt-compact__units strong { font-size: 30px; font-weight: 600; line-height: 1.15; }
.tt-compact__units span { font-size: 13px; }
.tt-compact__average { font-size: 14px; line-height: 1.5; margin: 10px 0 0; }
.tt-lot--compact .tt-lot__action { min-height: 46px; padding: 12px; font-size: 14px; line-height: 1.4; margin-top: 18px; white-space: normal; }
#deal-compact-identity { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
#deal-compact-identity .tt-compact__category { margin: 0; }
@container product-page (min-width: 960px) {
  .tt-deal--no-photo .tt-deal__body { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.85fr); column-gap: 44px; align-content: start; }
  .tt-deal--no-photo #deal-compact-identity { grid-column: 1 / -1; }
  .tt-deal--no-photo .tt-deal__meta { grid-column: 1; grid-row: 2; align-self: start; }
  .tt-deal--no-photo h1 { grid-column: 1; grid-row: 3; font-size: 30px; }
  .tt-deal--no-photo .tt-deal__sub { grid-column: 1; grid-row: 4; }
  .tt-deal--no-photo .tt-tiles { grid-column: 1; grid-row: 5 / 7; align-self: start; }
  .tt-deal--no-photo .tt-deal-price { grid-column: 2; grid-row: 2 / 5; margin-top: 0; }
  .tt-deal--no-photo .tt-actions { grid-column: 2; grid-row: 5; grid-template-columns: minmax(0,1fr); }
  .tt-deal--no-photo .tt-enquiry-rep--summary { grid-column: 2; grid-row: 6; }
}
@media (max-width:768px) {
  .tt-card-break { display: none; }
  .tt-lot.tt-lot--compact { padding: 18px; }
}