/* ============================================================
   Polyrama Plastics - site stylesheet (modern refresh)
   Keeps the original table layout, restyled with modern
   typography, spacing, colours and mobile responsiveness.
   ============================================================ */

:root {
  --navy: #1B2A6B;
  --navy-deep: #131F52;
  --gold: #C9A227;
  --ink: #252C37;
  --muted: #5C6675;
  --page: #F1F3F8;
  --card: #FFFFFF;
  --line: #E1E6EF;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 28px 12px 56px;
  background: var(--page);
  color: var(--ink);
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

/* map legacy <font size> attributes onto a modern scale */
font[size="-2"] { font-size: 12px; }
font[size="-1"] { font-size: 13px; }
font[size="+1"] { font-size: 17px; }
font[size="+2"] { font-size: 21px; }
font[color="#000066"] { color: var(--navy); }

/* ---------- main page frame (the original 760px table) ---------- */

body > table[width="760"] {
  width: 760px;
  max-width: 100%;
  /* !important overrides the legacy align="LEFT" presentation hint
     that some pages still carry on the outer table */
  margin: 0 auto !important;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(19, 31, 82, 0.10);
  overflow: hidden;
}

table {
  font-size: 15px;
  border-collapse: collapse;
}

img { max-width: 100%; height: auto; }
img[height]:not([height="32"]) { border-radius: 6px; }

/* ---------- typography ---------- */

h1, h2, h3, h4, h5, h6 {
  font-family: inherit;
  line-height: 1.3;
  margin: 14px 0;
  padding: 0;
}

h3 {
  font-size: 21px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.3px;
  text-align: center;
  padding-bottom: 12px;
}

/* small gold accent bar under the tagline headings */
h3:after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  border-radius: 2px;
  background: var(--gold);
  margin: 12px auto 0;
}

h5 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--navy);
}

h6 {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: #3C4453;
}

a {
  color: var(--navy);
  text-decoration: none;
}

a:hover {
  color: #8A6D1A;
  text-decoration: underline;
}

blockquote { margin: 14px 10px; }

/* hide the old "800 x 600 recommended" note on the homepage */
p:has(> font[size="-2"]) { display: none; }

/* ---------- navigation (h6 menu lists) ---------- */

h6 a {
  display: block;
  padding: 5px 10px;
  border-radius: 6px;
  line-height: 1.4;
}

h6 a:hover {
  background: #EDF1FA;
  color: var(--navy);
  text-decoration: none;
}

/* section jump-links in the product side column */
td > a[href^="#"]:not([href="#TOP"]) {
  display: block;
  padding: 4px 10px;
  border-radius: 6px;
}

td > a[href^="#"]:not([href="#TOP"]):hover {
  background: #EDF1FA;
  color: var(--navy);
  text-decoration: none;
}

/* ---------- specification tables ---------- */

table[bgcolor="#C0C0C0"] {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 1px 5px rgba(19, 31, 82, 0.06);
  overflow: hidden;
  margin: 12px 0 22px;
}

table[bgcolor="#C0C0C0"] td {
  background: #FFFFFF;
  border: 1px solid var(--line);
  padding: 7px 8px;
  font-size: 13.5px;
}

table[bgcolor="#C0C0C0"] tr:nth-child(even) td:not(:has(h5)) { background: #F7F9FD; }

/* main header row (MODEL / SPECIFICATIONS / CAPACITY) */
table[bgcolor="#C0C0C0"] td:has(h5) { background: var(--navy); }
table[bgcolor="#C0C0C0"] td:has(h5) h5 {
  color: #FFFFFF;
  margin: 0;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 4px;
}

table[bgcolor="#C0C0C0"] h6 {
  font-size: 12px;
  color: var(--navy);
  margin: 0;
}

/* ---------- homepage links module ---------- */

table[border="1"] {
  background: #F7F9FC;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: none;
  margin: 4px 0 18px;
  overflow: hidden;
}

table[border="1"] td {
  background: transparent;
  padding: 12px 16px;
  font-size: 13px;
}

table[border="1"] b {
  color: var(--navy);
  letter-spacing: 0.5px;
}

/* ---------- mobile ---------- */

@media (max-width: 840px) {
  body { padding: 0 0 40px; }

  /* switch the frame out of table layout so its percentage width
     wins over the wide spec tables inside (those scroll instead) */
  body > table[width="760"] {
    display: block;
    width: 100%;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  body > table[width="760"] > tbody { display: block; }

  body > table[width="760"] > tbody > tr {
    display: block;
    width: 100%;
  }

  body > table[width="760"] > tbody > tr > td {
    display: block;
    width: 100% !important;
    padding: 14px 16px;
    overflow-x: auto;
  }

  /* keep wide spec tables scrollable instead of squashed */
  table[bgcolor="#C0C0C0"] { min-width: 660px; }

  h3 { font-size: 19px; }
}