/* TSCAT 2026-11-11: ToyShow category page colors + phone fit. CSS only; no markup, SQL or script changes.
   Loaded only by monthly/toyshow/category.asp (body class "tscat"). Undo: remove the <link> line and the class from category.asp. */

/* ---------- All screen sizes ---------- */

/* 1. Page background: light gray instead of white. */
body.tscat { background-color: #f5f6f8; }

/* 2. Company box: white card with a light gray border; replaces the 760px tiled look. */
body.tscat .categorycompanybox > table { background-color: #fff; border: 1px solid #d9dde3; margin: 0 0 12px 0; }

/* 3. Company-name cell: navy instead of the repeating teddy-bear tile (cat-right_bg.gif); keeps the white name readable. */
body.tscat .categorycompanybox td[background*="cat-right_bg"] { background-image: none !important; background-color: #1f3a5f !important; }

/* 3a. A very long company name wraps inside the 175px cell instead of widening the 760px box. */
body.tscat .categorycompanybox td[background*="cat-right_bg"] { overflow-wrap: anywhere; word-break: break-word; }

/* 4. Company name text in that cell: white and bold (it was white on the tile; stays white on navy). */
body.tscat .categorycompanybox td[background*="cat-right_bg"] font { color: #fff !important; font-weight: bold; }

/* 5. Right-hand cell: plain white instead of the tiled cat-left_bg2.gif. */
body.tscat .categorycompanybox td[background*="cat-left_bg2"] { background-image: none !important; background-color: #fff !important; }

/* 6. Photo table: light gray instead of the old red bordercolor attribute (see note: border="0", so it may draw nothing today). */
body.tscat .categorycompanybox table[bordercolor] { border-color: #d9dde3 !important; }

/* 7. Company name under the description: navy instead of red #CC3333. */
body.tscat .categorycompanybox font[color="#CC3333" i] { color: #1f3a5f !important; }

/* 8. Links in the company boxes and the category nav: one blue (#1a5fb4) instead of default blue / red. */
body.tscat .categorycompanybox a:link, body.tscat .categorycompanybox a:visited,
body.tscat .outernavigationbox a:link, body.tscat .outernavigationbox a:visited,
body.tscat .slideshowbox a:link, body.tscat .slideshowbox a:visited { color: #1a5fb4; }

/* 9a. Product photos keep their 100x100 box but are shown whole, not stretched (object-fit). */
body.tscat .categorycompanybox table[bordercolor] img { object-fit: contain; }

/* 9. Long product and company names wrap instead of pushing the page wider. */
body.tscat .categorycompanybox { overflow-wrap: break-word; word-wrap: break-word; }

/* 10. Category banner and its image never wider than the screen (r4: no height:auto, keeps spacer at 59px). */
body.tscat .categorybox { max-width: 100%; box-sizing: border-box; }
body.tscat .categorybox img { max-width: 100%; }

/* ---------- Phones and small tablets ---------- */
@media (max-width: 700px) {

  /* 11. Fixed-width page pieces from category.asp fit the screen (.slideshowbox is 755px inline; the document.write table is 762). */
  body.tscat .slideshowbox { width: auto !important; max-width: 100%; }
  body.tscat table[width="762"] { width: 100% !important; max-width: 100%; }

  /* 12. Company box: the 760 / 560 / 175 / 150 tables and cells become full-width blocks that stack. */
  body.tscat .categorycompanybox,
  body.tscat .categorycompanybox table,
  body.tscat .categorycompanybox tbody,
  body.tscat .categorycompanybox tr,
  body.tscat .categorycompanybox td { display: block; width: auto !important; max-width: 100%; height: auto !important; box-sizing: border-box; }

  /* 13. Company-name bar: some padding so the name doesn't touch the edge. */
  body.tscat .categorycompanybox td[background*="cat-right_bg"] { padding: 10px 12px; }

  /* 13a. The old spacer rows above and below the name collapse to their 15px spacer images (no extra 23px line gaps). */
  body.tscat .categorycompanybox td[background*="cat-right_bg"] table td,
  body.tscat .categorycompanybox td[background*="cat-right_bg"] table font { line-height: 0; padding: 0; }

  /* 14. Company name on phones: 18px bold white, normal line height (row 2 of the name cell holds the name). */
  body.tscat .categorycompanybox td[background*="cat-right_bg"] table > tbody > tr:nth-child(2) font { font-size: 18px !important; line-height: 1.3; }

  /* 15. Order inside the right cell: last-updated + description + more-info + contact first, photos after. Nothing is hidden. */
  body.tscat .categorycompanybox td[background*="cat-left_bg2"] > table > tbody { display: flex; flex-direction: column; }
  body.tscat .categorycompanybox td[background*="cat-left_bg2"] > table > tbody > tr:nth-child(1) { order: 0; }  /* tab image row */
  body.tscat .categorycompanybox td[background*="cat-left_bg2"] > table > tbody > tr:nth-child(4) { order: 1; }  /* description row */
  body.tscat .categorycompanybox td[background*="cat-left_bg2"] > table > tbody > tr:nth-child(2) { order: 2; }  /* photos row */
  body.tscat .categorycompanybox td[background*="cat-left_bg2"] > table > tbody > tr:nth-child(3) { order: 3; }  /* spacer row */

  /* 16. Photos: a wrapping row instead of a fixed 560px table. */
  body.tscat .categorycompanybox table[bordercolor] > tbody > tr { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; }
  body.tscat .categorycompanybox table[bordercolor] td { display: block; width: auto !important; padding: 4px; }

  /* 16a. Photo links are tappable boxes the size of the photo (100px, above 44px). */
  body.tscat .categorycompanybox table[bordercolor] a { display: inline-block; }

  /* 17. Every image fits and is shown whole (product photos, tab image, spacers). */
  body.tscat .categorycompanybox img { max-width: 100%; height: auto; object-fit: contain; }
  /* 17a. Product photos stay at most 100px tall, so a tall photo doesn't stretch the row; contain keeps it whole. */
  body.tscat .categorycompanybox table[bordercolor] img { max-height: 100px; }

  /* 18. Description, last-updated date and contact lines: at least 14px. */
  body.tscat .categorycompanybox .categorycompanydesc,
  body.tscat .categorycompanybox .categorycompanydesc font,
  body.tscat .categorycompanybox .categorycompanydesc small { font-size: 15px !important; line-height: 1.5; }
  body.tscat .categorycompanybox .categorycompanydesc { padding: 8px 12px; }

  /* 19. Category nav text: at least 14px. */
  body.tscat .outernavigationbox, body.tscat .slideshowbox { font-size: 15px; }

  /* 20. Tap targets: "more information", contact/login link and Previous/Next/Slideshow links at least 44px tall. */
  body.tscat .categorycompanybox .categorycompanydesc a,
  body.tscat .outernavigationbox a,
  body.tscat .slideshowbox a { display: inline-block; min-height: 44px; line-height: 44px; padding: 0 4px; }

  /* 21. (r2, Bob OK Nov 11) Remove the 7 blank line breaks after the company name so the navy bar is not tall and empty on phones. */
  body.tscat .categorycompanybox td[background*="cat-right_bg"] strong br { display: none; }
}

/* ---------- r2 (Nov 11, 2026) ---------- */
/* 22. Remove the leftover teddy-bear tile drawn behind each company box by toyshowfonts.css (.categorycompanybox background). */
body.tscat .categorycompanybox { background-image: none !important; background-color: #fff; }
/* 23. Keep the "Click images for more information / PREMIUM TOYSHOW PREVIEW" strip readable: navy behind its transparent image. */
body.tscat .categorycompanybox img[src*="tabtest2"] { background-color: #1f3a5f; }
@media (min-width: 701px) {
/* 24. (UX) Readable desktop description text in one font. */
body.tscat .categorycompanybox .categorycompanydesc,
body.tscat .categorycompanybox .categorycompanydesc font { font-family: Arial, Helvetica, sans-serif !important; font-size: 13px !important; line-height: 1.5; color: #333; }
body.tscat .categorycompanybox .categorycompanydesc small { font-size: 12px !important; color: #666; }
/* 25. (UX) Company name under the description: same sans font as the page, not serif. */
body.tscat .categorycompanybox font[color="#CC3333" i] { font-family: Arial, Helvetica, sans-serif !important; font-size: 14px !important; font-weight: bold; }
}
/* 26. (UX) One light gray border on each company box instead of black double borders; nested photo tables untouched. */
body.tscat .categorycompanybox { border: 1px solid #d9dde3 !important; margin-bottom: 16px !important; }
body.tscat .categorycompanybox > table { border: 0 !important; }
/* ---------- r5 (Nov 11, 2026) ---------- */
@media (max-width: 700px) {
/* 27. (UX, Bob go Nov 11) Phones: company name under the description in the same sans font as the page, not serif. */
body.tscat .categorycompanybox font[color="#CC3333" i] { font-family: Arial, Helvetica, sans-serif !important; }
}