
:root{
  --bg:#07111d; --panel:#0d1a2e; --panel2:#12233a; --text:#eaf1fb; --muted:#a7b7ca;
  --line:rgba(255,255,255,.09); --accent:#42d7ff; --accent2:#9aefff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}
a{color:inherit}
.container{width:min(1160px, calc(100% - 2rem)); margin:0 auto}
.site-header{position:sticky;top:0;z-index:20;background:rgba(7,17,29,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 0}
.brand{text-decoration:none;font-size:1.85rem;font-weight:800;color:#fff}
.tagline{font-size:.95rem;color:var(--muted);margin-top:.2rem}
.nav{display:flex;gap:.45rem;flex-wrap:wrap;justify-content:flex-end}
.nav-link{text-decoration:none;padding:.65rem .88rem;border-radius:999px;color:#d4deeb;font-size:.92rem}
.nav-link:hover{background:rgba(255,255,255,.06)}
.nav-link.active{background:var(--accent);color:#03131f;font-weight:800}
.hero{background:linear-gradient(135deg,#08111f,#0f1d33 60%,#0f4b52);border-bottom:1px solid var(--line)}
.hero-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:2rem;align-items:center;padding:3rem 0}
h1{font-size:clamp(2rem,4vw,3.4rem);margin:0 0 .75rem}
h2,h3{margin-top:0}
.hero-copy{font-size:1.08rem;max-width:760px;color:#dfeaf7}
.hero-image{width:100%;max-width:470px;display:block;margin-left:auto;border-radius:20px;border:1px solid var(--line);background:#fff;padding:.35rem}
.page-content{padding:2rem 0 4rem}
.grid{display:grid}.two-col{grid-template-columns:repeat(2,minmax(0,1fr))}.three-col{grid-template-columns:repeat(3,minmax(0,1fr))}
.gap-lg{gap:1.25rem}.section-gap{margin-top:1.25rem}
.card{background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:1.35rem;box-shadow:0 12px 36px rgba(0,0,0,.18)}
.card-dark{background:var(--panel2)}
.list-check{padding-left:1.1rem;line-height:1.8}
.button-row{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1rem}
.btn{display:inline-block;text-decoration:none;border:none;border-radius:14px;padding:.9rem 1.1rem;cursor:pointer;font-weight:800}
.btn-primary{background:var(--accent);color:#04111d}.btn-secondary{background:transparent;border:1px solid var(--line);color:#fff}
.pill-row{display:flex;gap:.6rem;flex-wrap:wrap}.pill{text-decoration:none;padding:.6rem .8rem;border-radius:999px;background:#0a1527;border:1px solid var(--line)}
.parts-table{width:100%;border-collapse:collapse}.parts-table th,.parts-table td{padding:.8rem .9rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.parts-table th{background:rgba(255,255,255,.04);font-size:.86rem;text-transform:uppercase;color:#d0deef}
.muted{color:var(--muted)}.top-gap-sm{margin-top:.75rem}.center{text-align:center}
.product-image{max-width:180px;max-height:230px;width:auto;height:auto}
.doc-list{display:grid;gap:.75rem}.doc-item{text-decoration:none;padding:1rem;border-radius:16px;background:#0b1525;border:1px solid var(--line)}
.steps{padding-left:1.1rem;line-height:1.7}
.diagram-box{background:#08121f;border:1px solid var(--line);border-radius:18px;padding:1rem;overflow:auto}
.diagram-box pre{margin:0;color:#cfeeff;font-family:Consolas,monospace}
.site-footer{border-top:1px solid var(--line);background:#091524;padding:1.15rem 0 2rem}
.footer-grid{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}
.footer-links{display:flex;gap:1rem;flex-wrap:wrap}.footer-links a{text-decoration:none;color:#d6e4f2}
.chat-toggle{position:fixed;right:20px;bottom:20px;z-index:30;border:none;background:var(--accent);color:#04111d;font-weight:800;border-radius:999px;padding:1rem 1.15rem;cursor:pointer;box-shadow:0 18px 40px rgba(0,0,0,.28)}
.chat-panel{position:fixed;right:20px;bottom:80px;z-index:31;width:min(420px,calc(100vw - 1.5rem));height:min(650px,calc(100vh - 110px));background:var(--panel);border:1px solid var(--line);border-radius:24px;overflow:hidden;display:none;grid-template-rows:auto 1fr auto auto}
.chat-panel.open{display:grid}
.chat-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:#091524;border-bottom:1px solid var(--line)}
.chat-close{border:none;background:transparent;color:#fff;font-size:1.55rem;cursor:pointer}
.chat-messages{overflow:auto;padding:1rem;display:flex;flex-direction:column;gap:.7rem}
.msg{max-width:86%;padding:.85rem 1rem;border-radius:18px;line-height:1.5;font-size:.95rem}
.msg.user{align-self:flex-end;background:var(--accent);color:#03121e}.msg.bot{align-self:flex-start;background:#152741}
.chat-quick{max-height:150px;overflow:auto;padding:0 1rem 1rem;display:flex;gap:.45rem;flex-wrap:wrap}
.chat-quick button{border:1px solid var(--line);background:#091524;color:#dfeaf7;padding:.45rem .65rem;border-radius:999px;cursor:pointer;font-size:.76rem}
.chat-input-row{display:flex;gap:.5rem;padding:0 1rem 1rem;border-top:1px solid var(--line);background:var(--panel)}
.chat-input{flex:1;background:#091524;color:#fff;border:1px solid var(--line);border-radius:14px;padding:.85rem 1rem;margin-top:.75rem}
.chat-input-row .btn{margin-top:.75rem}
@media (max-width:920px){
  .hero-layout,.two-col,.three-col{grid-template-columns:1fr}
  .hero-image{margin-left:0;max-width:320px}
  .header-inner,.footer-grid{flex-direction:column;align-items:flex-start}
  .chat-panel{left:10px;right:10px;width:auto;bottom:70px;height:min(620px,calc(100vh - 90px))}
  .chat-toggle{right:10px;bottom:10px}
}

.contact-form{display:grid;gap:1rem}

.content-image{width:100%;max-width:480px;height:auto;display:block;margin:0 auto 1rem;border-radius:18px;border:1px solid var(--line);background:#fff;padding:.35rem}
.wide-image{width:100%;height:auto;display:block;margin:0 auto 1rem;border-radius:18px;border:1px solid var(--line);background:#fff;padding:.35rem}


.hero-image-estop{
  max-width:260px !important;
  width:100%;
  height:auto;
  display:block;
  margin-left:auto;
}
@media (max-width:920px){
  .hero-image-estop{
    margin-left:0;
    max-width:220px !important;
  }
}


.z10-button{
  margin-left:20px;
  background:#2c7be5;
  color:white;
  padding:8px 14px;
  border-radius:6px;
  text-decoration:none;
  font-size:14px;
  white-space:nowrap;
}
.z10-button:hover{
  background:#1a5fc4;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
}


.z10-button{
  margin-left:20px;
  background:rgba(66,215,255,.14);
  border:1px solid rgba(66,215,255,.35);
  color:#dff9ff;
  padding:9px 14px;
  border-radius:999px;
  text-decoration:none;
  font-size:14px;
  white-space:nowrap;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  line-height:1.1;
}
.z10-button:hover{
  background:rgba(66,215,255,.24);
  color:#ffffff;
}
.z10-main{
  font-weight:800;
}
.z10-sub{
  font-size:11px;
  opacity:.82;
}
@media (max-width:920px){
  .z10-button{
    width:100%;
    margin-left:0;
  }
}


/* v7 unified sister-site header refinements */
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.brand{
  text-decoration:none;
  font-size:1.95rem;
  font-weight:800;
  color:#ffffff;
  letter-spacing:-0.02em;
}

.tagline{
  font-size:.9rem;
  color:var(--muted);
  margin-top:.28rem;
}

.nav{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
}

.nav-link{
  text-decoration:none;
  padding:.68rem .92rem;
  border-radius:999px;
  color:#d4deeb;
  font-size:.92rem;
  transition:all .15s ease;
}

.nav-link:hover{
  background:rgba(255,255,255,.06);
  color:#ffffff;
}

.nav-link.active{
  background:var(--accent);
  color:#03131f;
  font-weight:800;
}

.z10-button{
  margin-left:18px;
  background:rgba(66,215,255,.14);
  border:1px solid rgba(66,215,255,.35);
  color:#dff9ff;
  padding:9px 14px;
  border-radius:999px;
  text-decoration:none;
  font-size:14px;
  white-space:nowrap;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:2px;
  line-height:1.1;
  min-height:46px;
  transition:all .15s ease;
}

.z10-button:hover{
  background:rgba(66,215,255,.24);
  color:#ffffff;
  transform:translateY(-1px);
}

.z10-main{
  font-weight:800;
}

.z10-sub{
  font-size:11px;
  opacity:.82;
}

@media (max-width:920px){
  .header-inner{
    flex-direction:column;
    align-items:flex-start;
  }

  .nav{
    width:100%;
    justify-content:flex-start;
  }

  .z10-button{
    width:100%;
    margin-left:0;
  }
}


/* v10 tighten hero pill boxes to fit hardware images better */
.hero-layout{
  align-items:center;
}

.hero-copy-block{
  padding:10px 0;
}

.hero-image-block{
  display:flex;
  justify-content:flex-end;
  align-items:center;
}

.hero-image{
  max-height:220px;
  width:auto;
  padding:6px;
  border-radius:14px;
}

.hero{
  padding:22px 0 14px 0;
}

.card{
  border-radius:14px;
}



/* v11 product-card hero refinement */
.hero{
  padding: 14px 0 10px 0;
}
.hero-layout{
  gap: 1.25rem;
  align-items: center;
}
.hero-copy-block{
  padding: 0;
}
.hero-image-block{
  display:flex;
  justify-content:flex-end;
  align-items:center;
}
.hero-product-card{
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 10px;
  width: fit-content;
  max-width: 100%;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.hero-product-label{
  margin-top: .55rem;
  font-size: .92rem;
  color: #dbe9f8;
  font-weight: 700;
}
.hero-product-sub{
  margin-top: .2rem;
  font-size: .78rem;
  color: var(--muted);
}
.hero-image{
  max-height: 190px;
  width: auto;
  max-width: 100%;
  padding: 0;
  border-radius: 12px;
  border: none;
  background: transparent;
  margin-left: 0;
  display:block;
}
.content-image{
  max-height: 360px;
  width: auto;
  max-width: 100%;
  padding: 4px;
}
.wide-image{
  max-height: none;
  width: 100%;
  max-width: 100%;
}
.diagram-grid{
  display:grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 1.25rem;
}
@media (max-width:920px){
  .diagram-grid{
    grid-template-columns: 1fr;
  }
  .hero-product-card{
    margin-top: .5rem;
  }
}



.part-number{font-weight:700;}


.gap-md{gap:1rem}
.contact-form{display:grid;gap:1rem}


/* v28 stable DMEX header/nav */
.header-inner{
  display:grid !important;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap:1rem;
}
.nav{
  display:flex !important;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
  gap:.5rem;
  min-width:0;
}
.nav-link{
  white-space:nowrap;
}
@media (max-width:920px){
  .header-inner{
    display:flex !important;
    flex-direction:column;
    align-items:flex-start;
  }
  .nav{
    justify-content:flex-start;
    width:100%;
  }
}


.part-cell{display:flex;align-items:center;gap:12px}
.part-img{width:80px;height:80px;object-fit:contain;background:#fff;border-radius:8px;padding:4px;cursor:zoom-in;border:1px solid rgba(255,255,255,.08)}
.parts-table th,.parts-table td{padding:12px 10px;text-align:left;vertical-align:top}
.part-meta{display:flex;flex-direction:column;gap:.35rem}
.part-number{font-weight:700}
.part-desc-hover{position:relative;display:inline-block}
.part-desc-hover .tooltip{display:none;position:absolute;left:0;top:calc(100% + 8px);width:300px;max-width:min(300px,70vw);background:#1f2937;color:#fff;padding:10px 12px;border-radius:8px;box-shadow:0 12px 28px rgba(0,0,0,.28);z-index:1000;font-size:13px;line-height:1.45}
.part-desc-hover:hover .tooltip,.part-desc-hover:focus-within .tooltip{display:block}
.quote-btn{display:inline-block;padding:.55rem .8rem;border-radius:999px;background:#3ec6ff;color:#041422;text-decoration:none;font-weight:700;white-space:nowrap}
.quote-btn:hover{filter:brightness(1.05)}
.image-modal{display:none;position:fixed;inset:0;z-index:5000}
.image-modal.open{display:block}
.image-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72)}
.image-modal-dialog{position:absolute;inset:5% 7%;display:flex;align-items:center;justify-content:center}
.image-modal-img{max-width:100%;max-height:100%;background:#fff;border-radius:10px;padding:8px}
.image-modal-close{position:absolute;top:12px;right:12px;border:none;border-radius:999px;width:40px;height:40px;font-size:28px;line-height:1;background:#fff;cursor:pointer}
@media (max-width:920px){
  .part-desc-hover .tooltip{max-width:min(260px,80vw)}
  .part-cell{align-items:flex-start}
  .part-img{width:72px;height:72px}
}


@media (max-width:920px){
  .header-inner{
    display:flex !important;
    flex-direction:column;
    align-items:flex-start;
  }
  .nav{
    justify-content:flex-start;
    width:100%;
  }
}


/* v34 tighter parts alignment */
.parts-table{
  width:100%;
  table-layout:fixed;
  border-collapse:collapse;
}
.parts-table th:nth-child(1),
.parts-table td:nth-child(1){width:31%}
.parts-table th:nth-child(2),
.parts-table td:nth-child(2){width:33%}
.parts-table th:nth-child(3),
.parts-table td:nth-child(3){width:12%}
.parts-table th:nth-child(4),
.parts-table td:nth-child(4){width:24%}
.parts-table th,
.parts-table td{
  padding:12px 10px;
  text-align:left;
  vertical-align:middle;
}
.part-cell{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.part-img{
  width:72px;
  height:72px;
  object-fit:contain;
  background:#fff;
  border-radius:8px;
  padding:4px;
  flex:0 0 72px;
}
.part-meta{min-width:0}
.part-number{font-weight:700;word-break:break-word}
.quote-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  max-width:165px;
  font-size:.92rem;
  padding:.65rem .85rem;
}
@media (max-width:920px){
  .parts-table{table-layout:auto}
  .quote-btn{max-width:none}
}


/* v35 stronger parts-page layout */
.parts-table{
  width:100% !important;
  table-layout:fixed !important;
  border-collapse:collapse !important;
}
.parts-table th,
.parts-table td{
  padding:12px 10px !important;
  text-align:left !important;
  vertical-align:middle !important;
}
.parts-table th:nth-child(1),
.parts-table td:nth-child(1){
  width:260px !important;
}
.parts-table th:nth-child(2),
.parts-table td:nth-child(2){
  width:auto !important;
}
.parts-table th:nth-child(3),
.parts-table td:nth-child(3){
  width:120px !important;
}
.parts-table th:nth-child(4),
.parts-table td:nth-child(4){
  width:190px !important;
}
.parts-table .part-cell{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  min-width:0 !important;
}
.parts-table .part-img{
  width:72px !important;
  height:72px !important;
  object-fit:contain !important;
  background:#fff !important;
  border-radius:8px !important;
  padding:4px !important;
  flex:0 0 72px !important;
}
.parts-table .part-meta{
  min-width:0 !important;
}
.parts-table .part-number{
  font-weight:700 !important;
  word-break:break-word !important;
}
.parts-table .quote-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:160px !important;
  min-width:160px !important;
  max-width:160px !important;
  padding:.7rem .9rem !important;
  border-radius:999px !important;
  background:#3ec6ff !important;
  color:#041422 !important;
  text-decoration:none !important;
  font-weight:700 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  box-sizing:border-box !important;
}
.parts-table .quote-btn:hover{
  filter:brightness(1.05);
}
@media (max-width:920px){
  .parts-table{
    display:block;
    overflow-x:auto;
    white-space:normal;
  }
  .parts-table th:nth-child(1),
  .parts-table td:nth-child(1){
    width:240px !important;
  }
  .parts-table th:nth-child(3),
  .parts-table td:nth-child(3){
    width:110px !important;
  }
  .parts-table th:nth-child(4),
  .parts-table td:nth-child(4){
    width:180px !important;
  }
  .parts-table .quote-btn{
    width:150px !important;
    min-width:150px !important;
    max-width:150px !important;
  }
}


/* v36 header alignment tune */
.parts-table thead th:nth-child(1){
  text-align:left !important;
}
.parts-table thead th:nth-child(2){
  text-align:left !important;
}
.parts-table thead th:nth-child(3),
.parts-table tbody td:nth-child(3){
  text-align:center !important;
}
.parts-table thead th:nth-child(4),
.parts-table tbody td:nth-child(4){
  text-align:center !important;
}
.parts-table thead th{
  vertical-align:middle !important;
  padding-top:10px !important;
  padding-bottom:10px !important;
}
.parts-table tbody td:nth-child(4){
  padding-left:0 !important;
  padding-right:0 !important;
}
.parts-table .quote-btn{
  margin:0 auto !important;
}


/* v37 parts grid layout */
.parts-grid{
  display:grid;
  grid-template-columns: 280px minmax(260px,1fr) 120px 180px;
  align-items:center;
  column-gap:18px;
}
.parts-grid.header{
  background:#13233d;
  border-radius:0;
  padding:12px 16px;
  font-weight:700;
  color:#eef5ff;
  text-transform:uppercase;
}
.parts-grid-row{
  display:grid;
  grid-template-columns: 280px minmax(260px,1fr) 120px 180px;
  align-items:center;
  column-gap:18px;
  padding:14px 16px;
  border-top:1px solid rgba(255,255,255,.08);
}
.parts-grid-wrap{
  border-radius:16px;
  overflow:hidden;
}
.parts-grid .col-price,
.parts-grid-row .col-price{
  text-align:center;
}
.parts-grid .col-quote,
.parts-grid-row .col-quote{
  text-align:center;
}
.parts-grid-row .part-cell{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.parts-grid-row .part-img{
  width:72px;
  height:72px;
  object-fit:contain;
  background:#fff;
  border-radius:8px;
  padding:4px;
  flex:0 0 72px;
  cursor:zoom-in;
}
.parts-grid-row .part-meta{
  min-width:0;
}
.parts-grid-row .part-number{
  font-weight:700;
  word-break:break-word;
}
.parts-grid-row .quote-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:160px;
  min-width:160px;
  max-width:160px;
  padding:.7rem .9rem;
  border-radius:999px;
  background:#3ec6ff;
  color:#041422;
  text-decoration:none;
  font-weight:700;
  white-space:nowrap;
  box-sizing:border-box;
}
.parts-grid-row .quote-btn:hover{filter:brightness(1.05)}
@media (max-width: 1100px){
  .parts-grid,
  .parts-grid-row{
    grid-template-columns: 250px minmax(220px,1fr) 100px 160px;
  }
}
@media (max-width: 920px){
  .parts-grid-wrap{overflow-x:auto}
  .parts-grid,
  .parts-grid-row{
    min-width:780px;
  }
}


/* v39 header links + search + form status */
.form-status{margin-top:1rem;font-weight:700}
