/* modern.css — responsive layer for the 2011 Woodhead / Brad Harrison template (Dan 2026-10-24).
   Loaded AFTER the legacy stylesheets. It changes layout and type only: no page text, URL, title, meta,
   heading, link or structured data is touched, so search engines see the same pages. */
:root {
  --wh-yellow: #f2c500;
  --wh-yellow-soft: #fff6cc;
  --wh-ink: #1c1d1f;
  --wh-ink-2: #2b2d31;
  --wh-muted: #5b6068;
  --wh-line: #e2e4e8;
  --wh-link: #6b5300;
  --wh-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
html { -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: #f4f5f7; color: var(--wh-ink); font-family: var(--wh-font); font-size: 15px; line-height: 1.5; }
body, td, th, p, li, div, span, input, select, textarea, h1, h2, h3, h4 { font-family: var(--wh-font); }
img { max-width: 100%; height: auto; }

/* links: the legacy sheet forces 10px bold Verdana on every link */
a:link, a:visited, a:hover, a:active { font-family: inherit; font-size: inherit; color: var(--wh-link); }
a:hover { text-decoration: underline; }

/* ---------- frame ---------- */
#wrapper {
  width: auto; max-width: 1200px; margin: 0 auto; background: #fff;
  display: grid; grid-template-columns: 240px minmax(0, 1fr);
  box-shadow: 0 0 0 1px var(--wh-line);
}
#header {
  grid-column: 1; grid-row: 1 / span 2; float: none; width: auto; height: auto; min-height: 94px;
  background-position: center; background-size: contain; background-color: #fff;
}
#header2 {
  grid-column: 2; grid-row: 1; float: none; width: auto; height: 65px;
  background-color: rgb(235, 212, 46); background-position: left center; background-size: auto 100%;
}
#topmenu {
  grid-column: 2; grid-row: 2; float: none; width: auto; height: auto; min-height: 44px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; padding: 0 12px; background: var(--wh-ink);
}
.menuselection { float: none; margin: 0; padding: 0 6px; line-height: 44px; font-size: 14px; color: #8a8f98; }
.menuselection a:link, .menuselection a:visited { color: #fff; font-size: 14px; font-weight: 600; }
.menuselection a:hover { color: var(--wh-yellow); text-decoration: none; }

#mainbody {
  grid-column: 1 / -1; float: none; width: auto; border: 0; background: #fff;
  display: grid; grid-template-columns: 240px minmax(0, 1fr);
}
#mainbody > * { min-width: 0; }
#mainbody > :not(#leftcolumn):not(#footer) { grid-column: 2; }
#leftcolumn {
  grid-column: 1; grid-row: 1 / span 20; float: none; width: auto; height: auto; border: 0;
  background: var(--wh-ink-2); padding-bottom: 24px;
}
#searchbox { float: none; width: auto; height: auto; padding: 16px 14px; margin: 0; }
#searchbox form { display: flex; gap: 6px; }
#searchbox input[type="text"], #searchbox input:not([type]) { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid #555; border-radius: 4px; font-size: 14px; }
#searchbox input[type="submit"], #searchbox button { padding: 8px 12px; border: 0; border-radius: 4px; background: var(--wh-yellow); color: var(--wh-ink); font-weight: 600; cursor: pointer; }
.leftmenuselection { float: none; width: auto; height: auto; display: flex; align-items: stretch; border-top: 1px solid #3c3f45; }
.leftmenutext, .leftmenutextbottom { float: none; flex: 1; width: auto; height: auto; line-height: 1.35; padding: 11px 14px; border: 0; }
.leftmenuselection a:link, .leftmenuselection a:visited { color: #f1f2f4; font-size: 14px; font-weight: 600; }
.leftmenuselection a:hover { color: var(--wh-yellow); text-decoration: none; }
.arrow, .arrowbottom { float: none; height: auto; width: 22px; border: 0; background-position: center; }
#quote { float: none; width: auto; margin: 20px 14px 0; }
#quote img { display: block; border-radius: 4px; }

/* ---------- content containers: release every fixed width/height ---------- */
.rightblock, .rightblockbottom, .mainBodyWrapper, .div1, .mainproductbox, #fullheaderwrapper, #productheader, #productheader2,
#productimage, #diagrams, .productWriteup, .productWriteupImage, .productWriteupImageFull, #breadcrumbs, #breadcrumbs2,
#breadcrumbsselect, .partsselector, .partsWrapper, .parts2, #selectcontainer, #selectcontainer2, #selectcontainer3,
#selectheader, #selectionchoices, #selectionchoices2, #selectionchoices3, #selectionhand, #selectioncables,
#contactuscontainer, #contactus, #contactus2, #connectorinfo, #customs, #mpmcontainer, #mpmchoices,
#othermoldedcontainer, #othermoldedchoices, #addrecep, .diagramholders, .productpagedescrip, .productpagedescripmargin,
#adtext, #adtextpic, #grosslogo, #aboutus, #aboutustext, #grosslogotext {
  float: none; width: auto; max-width: 100%; height: auto; min-height: 0;
}
.rightblock, .mainproductbox, #selectcontainer, #selectcontainer2, #selectcontainer3, #contactuscontainer,
#mpmcontainer, #othermoldedcontainer, #customs, .mainBodyWrapper { padding: 28px clamp(16px, 3vw, 40px) 32px; }

h1, #productheader h1, #selectheader h1 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; font-weight: 700; color: var(--wh-ink); margin: 0 0 6px; }
h2, #productheader2 h2 { font-size: 17px; line-height: 1.3; font-weight: 600; color: var(--wh-muted); margin: 0 0 12px; }
h3 { font-size: 16px; line-height: 1.3; }
p, li { font-size: 15px; }

/* home page hero + about */
.rightblock:has(> #adtext) { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0; padding: 0; }
#adtext { padding: 32px clamp(16px, 3vw, 40px); background: var(--wh-ink); border: 0; color: #e9eaec; font-size: 16px; }
#adtext h1 { color: var(--wh-yellow); font-size: clamp(22px, 2.4vw, 28px); }
#adtextpic { border: 0; background-size: cover; background-position: center; min-height: 240px; }
#adtextpic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rightblockbottom { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; padding: 28px clamp(16px, 3vw, 40px); }
#grosslogo { padding: 0; border: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
#aboutustext { padding: 0; font-size: 15px; color: var(--wh-ink); }
#aboutustext h1 { font-size: 18px; color: var(--wh-ink); }

/* product page */
#fullheaderwrapper { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
#diagrams { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start;
  border: 1px solid var(--wh-line); border-radius: 8px; padding: 20px; margin: 8px 0 20px; background: #fff; }
.productWriteup ul { padding-left: 18px; }
#breadcrumbs, #breadcrumbs2, #breadcrumbsselect { margin: 12px 0; font-size: 14px; }
.div1 { margin-top: 24px; }
.partsselector { font-size: 16px; font-weight: 700; margin: 0 0 8px; }
.partsWrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--wh-line); border-radius: 8px; }
table.partnumbers { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.partnumbers th, table.partnumbers td { padding: 7px 8px; border-bottom: 1px solid var(--wh-line); }
table.partnumbers tr:first-child td, table.partnumbers th { background: var(--wh-yellow-soft); font-weight: 600; }

/* selection (category) pages: card grid */
#selectionchoices, #selectionchoices3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }

/* footer */
#footer {
  grid-column: 1 / -1; float: none; width: auto; height: auto; line-height: 1.5; padding: 18px 16px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; background: var(--wh-ink); font-size: 14px;
}
#footer img.footerpic { float: none; }
#footer a:link, #footer a:visited { color: #fff; }

/* ---------- tablet & phone ---------- */
@media (max-width: 900px) {
  #wrapper, #mainbody { grid-template-columns: minmax(0, 1fr); }
  #header { grid-column: 1; grid-row: auto; min-height: 64px; background-size: auto 56px; }
  #header2 { grid-column: 1; grid-row: auto; height: auto; aspect-ratio: 776 / 65; background-size: cover; background-position: right center; }
  #topmenu { grid-column: 1; grid-row: auto; justify-content: center; }
  #mainbody > :not(#leftcolumn):not(#footer), #leftcolumn, #footer { grid-column: 1; grid-row: auto; }
  #leftcolumn { padding-bottom: 12px; }
  #leftcolumn .leftmenuselection { display: inline-flex; width: 50%; border-top: 1px solid #3c3f45; }
  #leftcolumn .leftmenuselection .leftmenuselection { width: 100%; }
  #quote { display: none; }
  .rightblock:has(> #adtext), .rightblockbottom, #diagrams { grid-template-columns: minmax(0, 1fr); }
  #fullheaderwrapper { flex-wrap: wrap; }
  table.partnumbers { font-size: 13px; }
  table.partnumbers td, table.partnumbers th { white-space: nowrap; }
}
@media (max-width: 480px) {
  #leftcolumn .leftmenuselection { width: 100%; }
  .menuselection { padding: 0 3px; font-size: 13px; }
  .menuselection a:link, .menuselection a:visited { font-size: 13px; }
}

/* ---------- refinements (pass 2) ---------- */
.arrow img, .arrowbottom img { display: none; }
.arrow, .arrowbottom { display: flex; align-items: center; justify-content: center; }
.arrow::after, .arrowbottom::after { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--wh-yellow); border-bottom: 2px solid var(--wh-yellow); transform: rotate(-45deg); }
.leftmenuselection .leftmenuselection { margin: 0; }
.leftmenuselection .leftmenuselection .leftmenutext, .leftmenuselection .leftmenuselection .leftmenutextbottom { padding-left: 14px; }
.productWriteup, .productWriteup p, .productWriteup li, .productWriteup span, .productWriteup div { font-weight: 400; font-size: 15px; color: var(--wh-ink); }
.productWriteup strong, .productWriteup b { font-weight: 700; }
table.partnumbers td, table.partnumbers td *, table.partnumbers th, table.partnumbers th * { font-size: 13.5px; }
#selectcontainer, #selectcontainer2, #selectcontainer3 { border: 0; }
#selectheader { margin: 0 0 16px; height: auto; line-height: 1.2; }
#selectionchoices, #selectionchoices2, #selectionchoices3 { padding: 0; }
#selectionchoices > div, #selectionchoices3 > div {
  width: auto !important; margin: 0 !important; padding: 14px 10px; border: 1px solid var(--wh-line); border-radius: 8px; background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
#selectionchoices > div:hover, #selectionchoices3 > div:hover { border-color: var(--wh-yellow); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
#selectionchoices span, #selectionchoices3 span { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--wh-ink); }
#connectorinfo, #connectorinfo * { font-size: 15px; line-height: 1.55; color: var(--wh-muted); }
#connectorinfo { padding: 0 clamp(16px, 3vw, 40px) 24px; }
@media (max-width: 900px) {
  #leftcolumn { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 12px 14px; }
  #searchbox { flex: 1 1 100%; padding: 14px 0 4px; }
  #leftcolumn .leftmenuselection { width: auto; flex: 0 0 auto; border: 1px solid #4a4e55; border-radius: 999px; }
  #leftcolumn .leftmenuselection .leftmenuselection { border: 0; }
  #leftcolumn .leftmenutext, #leftcolumn .leftmenutextbottom { padding: 7px 4px 7px 14px; }
  #leftcolumn .arrow, #leftcolumn .arrowbottom { width: 26px; }
  .rightblock, .mainproductbox, #selectcontainer, #selectcontainer2, #selectcontainer3, .mainBodyWrapper { padding-top: 20px; }
  #selectionchoices, #selectionchoices3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
/* pass 3: legacy fixed margins */
#selectheader, #selectcontainer, #selectcontainer2, #selectcontainer3, #fullheaderwrapper, #productheader, #productheader2,
#productimage, #diagrams, .div1, .partsselector, .partsWrapper, #breadcrumbs, #breadcrumbs2, #breadcrumbsselect, #connectorinfo,
#selectionchoices, #selectionchoices2, #selectionchoices3 { margin-left: 0; margin-right: 0; }
#selectheader { padding: 24px clamp(16px, 3vw, 40px) 0; }
#selectcontainer, #selectcontainer2, #selectcontainer3 { padding-top: 8px; }

/* pass 4: products.htm product-line list (name | description | picture) */
#selectionchoices2 { display: grid; grid-template-columns: 200px minmax(0, 1fr) 150px; gap: 18px 24px; align-items: start; }
#selectionchoices2 > div { float: none; width: auto; height: auto; margin: 0; padding: 0; }
#selectionchoices2 .productpagedescrip, #selectionchoices2 .productpagedescripmargin { grid-column: 1; font-size: 16px; font-weight: 700; padding-top: 18px; border-top: 1px solid var(--wh-line); }
#selectionchoices2 .productpagepara { grid-column: 2; padding-top: 18px; border-top: 1px solid var(--wh-line); }
#selectionchoices2 .productpagepic { grid-column: 3; padding-top: 18px; border-top: 1px solid var(--wh-line); text-align: center; }
#selectionchoices2 .productpagepara, #selectionchoices2 .productpagepara * { font-size: 15px; font-weight: 400; line-height: 1.55; color: var(--wh-ink); }
#selectionchoices2 .productpagedescrip a, #selectionchoices2 .productpagedescripmargin a { font-size: 16px; }
@media (max-width: 900px) {
  #selectionchoices2 { grid-template-columns: minmax(0, 1fr) 110px; gap: 8px 14px; }
  #selectionchoices2 .productpagedescrip, #selectionchoices2 .productpagedescripmargin { grid-column: 1 / -1; }
  #selectionchoices2 .productpagepara { grid-column: 1; border-top: 0; padding-top: 0; }
  #selectionchoices2 .productpagepic { grid-column: 2; border-top: 0; padding-top: 0; }
}
/* pass 5: part-number popups never wider than the screen */
#popupwrapper { max-width: calc(100vw - 24px); }
#popupheader, #popupheaderdescription, #popuppdfmain, #popupcustommain, #popuprecepmain, #popupquotemain { max-width: 100%; }

/* popup fix (Dan 2026-10-25: part-number popup opened off screen on phones). The legacy parts.css centres it with
   left:50% + a fixed margin-left:-100px on a 400px box, so on a phone it starts mid-screen and runs off the right edge. */
#popupwrapper {
  left: 50% !important; top: 50% !important; margin: 0 !important; transform: translate(-50%, -50%);
  width: min(400px, calc(100vw - 24px)) !important; max-width: none; height: auto !important; max-height: calc(100vh - 24px); overflow-y: auto;
  z-index: 1000; border-width: 6px; border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,.35);
}
#popupspacer { display: none; }
#close { float: none; display: block; text-align: right; padding: 6px 8px 2px; }
#popupheader, #popupheaderdescription, #popuppdfmain, #popupcustommain, #popuprecepmain, #popupquotemain { float: none; width: auto !important; max-width: 100%; }
#popuppdfmain a, #popupcustommain a { display: inline-block; padding: 8px 4px; font-size: 16px; }

/* popup: "Find on Gross Automation" (added by js/popup.js) sits under "Add Item to Quote" with the same look */
#popupfindmain { float: none; width: auto; padding: 10px 0 14px; text-align: center; }
#popupfindmain a { display: inline-block; padding: 8px 4px; font-size: 16px; font-weight: 700; color: var(--wh-link); }
#popupwrapper { height: auto !important; }
#popuppdfmain, #popupcustommain, #popupfindmain { float: none; width: auto !important; text-align: left; padding: 4px 24px; }
#popuppdfmain { padding-top: 16px; } #popupfindmain { padding-bottom: 16px; }
#popuppdfmain a, #popupcustommain a, #popupfindmain a { display: inline-block; padding: 8px 0; font-size: 16px; font-weight: 600; color: var(--wh-link); }
#popupwrapper #popuppdfmain a:link, #popupwrapper #popuppdfmain a:visited, #popupwrapper #popupcustommain a:link, #popupwrapper #popupcustommain a:visited, #popupwrapper #popupfindmain a:link, #popupwrapper #popupfindmain a:visited { font-family: var(--wh-font); font-size: 16px; font-weight: 600; color: var(--wh-link); }
#popupwrapper #popupfindmain { padding-top: 4px; }