@charset "UTF-8";
/* ==================================================================
   Grapcharger product model page - v2 layer (grap-pdp2.css)
   Enqueued by grap-loader.php only when this file exists.

   Design rule from Winnie: big pictures, big numbers, no walls of
   text. Anything that reads like a manual lives in the PDF.
   Palette: orange #E4642C -> #F0A440, ink #111111, sub #4A4A4A,
   hairline #E4E4E4, plate #F6F7F8.
   Type: Manrope headings, Inter body, IBM Plex Mono for values.
   ================================================================== */

/* ---------- 1. two-column hero + gallery ---------- */
.grap-gal{
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:44px;
  align-items:start;
  margin:4px 0 10px;
}
/* Wrapper holds the radios so wpautop() cannot wrap them in a <p> (which would
   add a third grid child and break the two-column hero). display:none keeps it
   out of the grid entirely. */
.grap-gal-in{display:none;}

.grap-gal-media{min-width:0;}
.grap-gal-main{
  height:clamp(300px,34vw,420px);
  display:flex;
  border:1px solid #E4E4E4;
  border-radius:6px;
  background:#fff;
  overflow:hidden;
}
.grap-gal-sl{
  display:none;
  flex-direction:column;
  width:100%;
  margin:0;
  padding:0;
}
.grap-gal-sl > img,
.grap-gal-sl > svg{
  flex:1 1 auto;
  min-height:0;
  width:100%;
  height:100%;
  display:block;
  background:#F6F7F8;
  object-fit:contain;
}
.grap-gal-sl > figcaption{
  flex:none;
  font-size:12px;
  line-height:1.4;
  color:#6E7885;
  padding:10px 14px;
  border-top:1px solid #E4E4E4;
  background:#fff;
}
/* radio -> which slide / which thumb is active (pure CSS, no JS).
   :has() is used because the radios now sit inside .grap-gal-in, so the old
   sibling combinator no longer reaches .grap-gal-media. Without :has() support
   the first slide simply stays on screen - a graceful no-JS fallback. */
.grap-gal:has(.grap-gal-r:nth-of-type(1):checked) .grap-gal-main > .grap-gal-sl:nth-of-type(1),
.grap-gal:has(.grap-gal-r:nth-of-type(2):checked) .grap-gal-main > .grap-gal-sl:nth-of-type(2),
.grap-gal:has(.grap-gal-r:nth-of-type(3):checked) .grap-gal-main > .grap-gal-sl:nth-of-type(3),
.grap-gal:has(.grap-gal-r:nth-of-type(4):checked) .grap-gal-main > .grap-gal-sl:nth-of-type(4),
.grap-gal:has(.grap-gal-r:nth-of-type(5):checked) .grap-gal-main > .grap-gal-sl:nth-of-type(5),
.grap-gal:has(.grap-gal-r:nth-of-type(6):checked) .grap-gal-main > .grap-gal-sl:nth-of-type(6),
.grap-gal:has(.grap-gal-r:nth-of-type(7):checked) .grap-gal-main > .grap-gal-sl:nth-of-type(7),
.grap-gal:has(.grap-gal-r:nth-of-type(8):checked) .grap-gal-main > .grap-gal-sl:nth-of-type(8){display:flex;}

/* No :has() support (older Firefox) -> fall back to the first slide instead of
   an empty frame. Unknown at-rules are ignored, so modern browsers skip this. */
@supports not selector(:has(*)){
  .grap-gal-main > .grap-gal-sl:first-of-type{display:flex;}
}

.grap-gal-thumbs{
  display:grid;
  /* auto-fill, not a fixed repeat(4): a model with eight gallery slides wraps
     onto a second row instead of squeezing eight thumbs into one. */
  grid-template-columns:repeat(auto-fill,minmax(70px,1fr));
  gap:10px;
  margin-top:10px;
}
.grap-gal-th{
  height:76px;
  padding:5px;
  box-sizing:border-box;
  border:1px solid #E4E4E4;
  border-radius:5px;
  background:#F6F7F8;
  overflow:hidden;
  cursor:pointer;
  transition:.15s ease;
}
.grap-gal-th img,
.grap-gal-th svg{width:100%;height:100%;object-fit:contain;display:block;}
.grap-gal-th:hover{border-color:#F0A440;}
.grap-gal:has(.grap-gal-r:nth-of-type(1):checked) .grap-gal-thumbs > .grap-gal-th:nth-of-type(1),
.grap-gal:has(.grap-gal-r:nth-of-type(2):checked) .grap-gal-thumbs > .grap-gal-th:nth-of-type(2),
.grap-gal:has(.grap-gal-r:nth-of-type(3):checked) .grap-gal-thumbs > .grap-gal-th:nth-of-type(3),
.grap-gal:has(.grap-gal-r:nth-of-type(4):checked) .grap-gal-thumbs > .grap-gal-th:nth-of-type(4),
.grap-gal:has(.grap-gal-r:nth-of-type(5):checked) .grap-gal-thumbs > .grap-gal-th:nth-of-type(5),
.grap-gal:has(.grap-gal-r:nth-of-type(6):checked) .grap-gal-thumbs > .grap-gal-th:nth-of-type(6),
.grap-gal:has(.grap-gal-r:nth-of-type(7):checked) .grap-gal-thumbs > .grap-gal-th:nth-of-type(7),
.grap-gal:has(.grap-gal-r:nth-of-type(8):checked) .grap-gal-thumbs > .grap-gal-th:nth-of-type(8){
  border-color:#E4642C;
  box-shadow:inset 0 0 0 1px #E4642C;
  background:#fff;
}
@supports not selector(:has(*)){
  .grap-gal-thumbs > .grap-gal-th:first-of-type{
    border-color:#E4642C;
    box-shadow:inset 0 0 0 1px #E4642C;
    background:#fff;
  }
}

.grap-gal-side{min-width:0;padding-top:2px;}
.grap-pdp2-h1{
  font-family:'Manrope','Inter',sans-serif;
  font-size:clamp(27px,3.1vw,38px);
  font-weight:800;
  letter-spacing:-.022em;
  line-height:1.1;
  color:#111111;
  margin:8px 0 14px;
}
.grap-pos{
  font-size:16.5px;
  line-height:1.55;
  color:#4A4A4A;
  margin:0 0 20px;
}
.grap-gfacts{
  list-style:none;
  margin:0 0 22px;
  padding:0;
  border-top:1px solid #E4E4E4;
}
.grap-gfacts li{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  padding:10px 0;
  border-bottom:1px solid #EFF1F4;
}
.grap-gfacts span{font-size:13px;letter-spacing:.02em;color:#6E7885;flex:none;}
.grap-gfacts b{
  font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:500;
  font-size:14px;
  color:#111111;
  text-align:right;
}
.grap-gal-mini{margin:18px 0 0;font-size:13px;color:#6E7885;}
.grap-gal-mini a{color:#C8521F;text-decoration:none;}
.grap-gal-mini a:hover{color:#E4642C;}

/* ---------- 2. At a glance - six big numbers ---------- */
.grap-glance{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:1px;
  background:#E4E4E4;
  border:1px solid #E4E4E4;
  border-radius:6px;
  overflow:hidden;
}
.grap-glance-i{
  background:#fff;
  padding:24px 14px 20px;
  text-align:center;
}
.grap-glance-i b{
  display:block;
  font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:500;
  font-size:clamp(19px,1.9vw,26px);
  line-height:1.15;
  letter-spacing:-.01em;
  color:#111111;
  overflow-wrap:anywhere;
}
.grap-glance-i b.is-long{
  font-size:clamp(14px,1.25vw,17px);
  letter-spacing:-.01em;
  line-height:1.3;
}
.grap-glance-i span{
  display:block;
  margin-top:10px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#6E7885;
}

/* ---------- 3. Where it is used ---------- */
.grap-usecases{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.grap-usecase{
  display:block;
  padding:22px 20px 20px;
  border:1px solid #E4E4E4;
  border-radius:6px;
  background:#fff;
  text-decoration:none !important;
  transition:.16s ease;
}
.grap-usecase:hover{
  border-color:#E4642C;
  box-shadow:0 2px 10px rgba(17,17,17,.06);
}
.grap-usecase > span[class*="grap-ic--"]{
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;height:38px;
  margin:0 0 16px;
  border:1px solid #EFF1F4;
  border-radius:4px;
  background:#F6F7F8;
}
.grap-usecase svg,
.grap-ben3-i svg{
  width:21px;height:21px;
  display:block;
  fill:none;
  stroke:#E4642C;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.grap-usecase svg .ic-fill,
.grap-ben3-i svg .ic-fill{fill:#E4642C;stroke:#E4642C;stroke-width:1.2;}
.grap-usecase b{
  display:block;
  font-family:'Manrope','Inter',sans-serif;
  font-weight:700;
  font-size:15px;
  line-height:1.35;
  color:#111111;
  margin:0 0 7px;
}
.grap-usecase > span:last-child{
  display:block;
  font-size:13.5px;
  line-height:1.5;
  color:#4A4A4A;
}

/* ---------- 4. Key benefits - one sentence each ---------- */
.grap-ben3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.grap-ben3-i{
  padding:22px 20px;
  border-radius:6px;
  background:#F6F7F8;
  border-top:3px solid #E4642C;
}
.grap-ben3-i > span[class*="grap-ic--"]{
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;height:36px;
  margin:0 0 14px;
  border-radius:4px;
  background:#fff;
  border:1px solid #E4E4E4;
}
.grap-ben3-i b{
  display:block;
  font-family:'Manrope','Inter',sans-serif;
  font-weight:700;
  font-size:15px;
  color:#111111;
  margin:0 0 8px;
}
.grap-ben3-i p{
  margin:0;
  font-size:14px;
  line-height:1.5;
  color:#4A4A4A;
}

/* ---------- 5. Key specifications - compact table ---------- */
/* .entry-content table th is a black bar in grap-theme.css - outrank it. */
.entry-content table.grap-spec-mini{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
  margin:0;
}
.entry-content table.grap-spec-mini th{
  width:42%;
  background:transparent;
  text-align:left;
  font-family:'Inter',sans-serif;
  font-weight:500;
  font-size:13.5px;
  letter-spacing:0;
  text-transform:none;
  color:#4A4A4A;
  padding:10px 16px 10px 0;
  border-bottom:1px solid #EFF1F4;
  vertical-align:top;
}
.entry-content table.grap-spec-mini td{
  background:transparent;
  font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13.5px;
  color:#111111;
  padding:10px 0;
  border-bottom:1px solid #EFF1F4;
  vertical-align:top;
}
.entry-content table.grap-spec-mini tr:nth-child(even) td,
.entry-content table.grap-spec-mini tr:nth-child(even) th{background:transparent;}
.grap-spec-more{margin:14px 0 0;font-size:13.5px;color:#6E7885;}
.grap-spec-more a{color:#C8521F;text-decoration:none;}
.grap-spec-more a:hover{color:#E4642C;}

/* ---------- 6. datasheet strip (dark) ---------- */
.grap-dlrow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  flex-wrap:wrap;
  margin:44px 0 0;
  padding:28px 30px;
  border-radius:6px;
  background:#111111;
  color:#fff;
}
.grap-dlrow-l{min-width:0;}
.grap-dlrow-l b{
  display:block;
  font-family:'Manrope','Inter',sans-serif;
  font-weight:700;
  font-size:18px;
  color:#fff;
  margin:0 0 6px;
}
.grap-dlrow-l span{font-size:13.5px;color:rgba(255,255,255,.68);}

/* ---------- 7. inquiry strip ---------- */
.grap-cnta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  flex-wrap:wrap;
  margin:16px 0 0;
  padding:26px 30px;
  border:1px solid #E4E4E4;
  border-radius:6px;
  background:#fff;
}
.grap-cnta-l{min-width:0;}
.grap-cnta-l b{
  display:block;
  font-family:'Manrope','Inter',sans-serif;
  font-weight:700;
  font-size:17px;
  color:#111111;
  margin:0 0 5px;
}
.grap-cnta-l span{font-size:13.5px;color:#4A4A4A;}

/* ---------- 8. related products ---------- */
.grap-rel3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.grap-rel3-i{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:18px 20px;
  border:1px solid #E4E4E4;
  border-radius:6px;
  background:#fff;
  text-decoration:none !important;
  transition:.16s ease;
}
.grap-rel3-i:hover{border-color:#E4642C;}
.grap-rel3-i b{
  font-family:'Manrope','Inter',sans-serif;
  font-weight:700;
  font-size:14.5px;
  color:#111111;
}
.grap-rel3-i .grap-arrow{color:#E4642C;font-size:16px;}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .grap-glance{grid-template-columns:repeat(3,1fr);}
  .grap-usecases{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:900px){
  .grap-gal{grid-template-columns:1fr;gap:28px;}
  .grap-gal-main{height:clamp(280px,52vw,380px);}
  .grap-ben3{grid-template-columns:1fr;}
  .grap-rel3{grid-template-columns:1fr;}
  .grap-dlrow,.grap-cnta{padding:24px 22px;}
}
@media (max-width:640px){
  .grap-gal{gap:22px;}
  .grap-gal-main{height:clamp(240px,58vw,320px);}
  .grap-gal-thumbs{gap:8px;}
  .grap-gal-th{height:62px;padding:4px;}
  .grap-pdp2-h1{font-size:26px;}
  .grap-glance{grid-template-columns:repeat(2,1fr);}
  .grap-glance-i{padding:18px 12px 16px;}
  .grap-usecases{grid-template-columns:1fr;}
  .grap-gfacts li{flex-direction:column;gap:2px;}
  .grap-gfacts b{text-align:left;}
  .grap-spec-mini th{width:48%;}
  .grap-dlrow .grap-btns,
  .grap-cnta .grap-btns{width:100%;}
  .grap-dlrow .grap-btn,
  .grap-cnta .grap-btn{flex:1 1 auto;justify-content:center;}
}