@charset "UTF-8";
/* nsi-sales.com — unified Foundation layout 2026-07-06 (westermo chrome ported).
   Palette per Dan: KEEP the site's own red/gray — NSi red accents (#B62023/#EB2A2D),
   gray headings (#333), light-gray letterbox. */
body {
	background-color: #666666;
}
.primary-section {
	background-color: #ffffff;
}
.pads-lft {padding-left: 20px;}
.margins {margin-bottom: .575em;}
header {
	margin-top: 1.35em;
}
/**OVERRIDE Headings**/
h1 {
  font-size: 1.875rem; }

h2 {
  font-size: 1.450rem; }

h3 {
  font-size: 1.245rem; }
/**end**/
@media screen and (max-width: 30.000em) {
.drop-for-mobile {display: none;}
}
.browse-cat-side {
	font-size: 1.175rem;
}
/**OVERRIDE Top Bar Menu Nav**/
.top-bar {
  background-image: linear-gradient(#EB2A2D, #B62023);
 }
 .top-bar-section .has-form {
	  background-image: linear-gradient(#EB2A2D, #B62023);
	   }
 .top-bar-section .right li:not(.has-form) a:not(.button),
.top-bar-section .left li:not(.has-form) a:not(.button) {
	color: #fff;
	background-image: linear-gradient(#EB2A2D, #B62023);
}
.top-bar-section ul li > a {
    font-size: 0.855rem;
}
.top-bar-section ul li > a:hover { color: #2c0d0d !important; }
.top-bar-section li + li {border-left:1px #333 solid;}
/**End Top Bar Menu Nav**/
/**OVERRIDE Side Nav List**/
  .side-nav li {
    font-size: 0.721rem;
    margin: 0 0 0.001rem 0; }
	.side-nav li a:not(.button) {
      padding: 0.0395rem 0.375rem; }
/**end**/
/*Left side category styles — keep the old site's signature: gray header, red underline*/
.side-nav .category-side {font-size: 16px; font-weight: bold; color: #333333; border-bottom: 1px solid #EB2A2E; padding-bottom: 2px; margin-bottom: 4px;}
.side-nav .subcat-side {font-size: 13px; font-weight: bold; color: #333333; margin-top: 6px;}
.side-nav .subcat-item a {padding-left: 0.9rem;}

footer {
	background-color: #dddddd;
	font-size: 7px !important;
}
footer p{
	font-size: 12px;
}
/* header call block without h1/h2 (page h1 lives in content) */
.hdr-call-title { font-size: 1.875rem; margin: 0; }
.hdr-call-phone { font-size: 1.450rem; margin: 0; }
.skiplink { position: absolute; left: -9999px; top: auto; }
.skiplink:focus { position: absolute; left: 8px; top: 8px; background: #fff; color: #000; padding: 8px 12px; z-index: 1000; border: 1px solid #999; }
form.sitesearch { margin-bottom: 0.5rem; }

/* deliberate letterbox — light gray gutters + soft card shadow, all pages (Dan, westermo) */
.sitewrap { max-width: 65rem; margin: 0 auto; background: #d9d9d9; }
.primary-section { background-color: #ffffff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); }

/* red/gray palette: gray headings (old content h1/h2 were #303030), red links/buttons */
h1, h2, h3, h4 { color: #333333; }
a { color: #B62023; }
a:hover, a:focus { color: #EB2A2D; }
.button { background-color: #B62023; }
.button:hover, .button:focus { background-color: #EB2A2D; }

/* legacy content shims: old fixed-width classes must not overflow the medium-9 column */
#mainContent div { max-width: 100%; }
#mainContent img { max-width: 100%; height: auto; }
#mainContent table { max-width: 100%; }

/* Phase 8 funnel block (sidebar): research here, buy on www */
.buy-side { font-size: 1.05rem; margin-bottom: 0.2rem; }
.buy-side-text { font-size: 0.78rem; margin-bottom: 0.4rem; }

/* homepage hero — static, zero-JS, built from existing site imagery (replaces dead nsi.swf) */
.hero { background: #393a36 linear-gradient(135deg, #2f302c, #4a4b46); border-bottom: 4px solid #B62023; padding: 1.4rem 1.2rem 1.1rem; margin-bottom: 1.2rem; }
.hero h1 { color: #ffffff; margin-top: 0; }
.hero .hero-tag { color: #e5e5e5; font-size: 1.05rem; }
.hero .button { margin-bottom: 0.3rem; margin-right: 0.5rem; }
.hero .hero-buy { background-color: #EB2A2D; }
.hero .hero-buy:hover, .hero .hero-buy:focus { background-color: #B62023; }
.hero-imgs img { display: block; margin: 0.4rem auto; }
.home-features .redLarge { font-size: 1.15rem; }
.home-features img.rightPadding { float: left; margin: 0 0.6rem 0.3rem 0; }

/* 2026-07-06 Dan: legacy category listings (.indivProduct/.indivProduct2 pattern — the old 2-up float grid used the "2" class for the right column; 64 lighting-era pages alternate them) were stacking
   huge down the left edge — render them as a responsive card grid instead. Scoped via :has()
   so only pages with cards get the grid; non-card #infoArea pages keep normal block flow. */
#mainContent #infoArea:has(> .indivProduct, > .indivProduct2) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 0.9rem;
  align-items: stretch;
}
#mainContent #infoArea:has(> .indivProduct, > .indivProduct2) > :not(.indivProduct, .indivProduct2) {
  grid-column: 1 / -1;   /* page headers, intro text, jump menus span the full row */
}
#mainContent .indivProduct, #mainContent .indivProduct2 {
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 0.7rem 0.5rem 0.6rem;
  text-align: center;
  background: #fff;
}
#mainContent :is(.indivProduct, .indivProduct2) .productPic img { max-height: 87px; width: auto; }
#mainContent :is(.indivProduct, .indivProduct2) .miniHeader h1 { font-size: 1rem; margin: 0.45rem 0 0.1rem; }
#mainContent :is(.indivProduct, .indivProduct2) .miniHeader2 h2 { font-size: 0.72rem; color: #666666; margin: 0 0 0.45rem; }
#mainContent :is(.indivProduct, .indivProduct2) .moreInformation img { width: 120px; height: auto; }

/* per-row part-number quote handoff buttons (replaced dead local-cart gifs 2026-07-06) */
#mainContent .pn-quote { font-size: 0.68rem; padding: 0.3rem 0.55rem; margin: 0; white-space: nowrap; }

/* KEP: full-width branding banner header (site had no compact logo; header.jpg IS the brand) */
.site-banner { max-width: 100%; height: auto; display: block; }
.hdr-support-line { font-size: 0.8rem; text-align: right; margin: 0.3rem 0 0.2rem; color: #333; }

/* family-level + per-part quote handoffs on product pages (2026-07-06 Dan) */
.quote-product { margin: 0.5rem 0 0.9rem; }
.quote-product .button { margin-bottom: 0.2rem; font-size: 0.95rem; }

/* products.htm hierarchical index (2026-07-06 Dan: headers ARE the parent categories —
   make the relationship visible: linked category headings + indented child lists, 2-up) */
.product-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.5rem 1.5rem; }
.product-index .index-cat { font-size: 1.05rem; border-bottom: 1px solid #EB2A2E; padding-bottom: 2px; margin: 0.6rem 0 0.3rem; }
.product-index .index-cat a { color: #333333; }
.product-index .index-cat a:hover { color: #B62023; }
.product-index .index-list { list-style: square; margin-left: 1.4rem; font-size: 0.82rem; }
.product-index .index-list li { margin-bottom: 0.15rem; }

/* 2026-07-06 Dan: feature lists inside centered cards read goofy — left-justify the lists,
   keep the bullets, leave everything else centered */
#mainContent :is(.indivProduct, .indivProduct2) ul { text-align: left; margin-left: 1.3rem; }