/* =====================================================================
   /product-info — the index, a product page and a table page.

   The cards wear the weight calculator's darker edge and soft shadow
   (tools.css, .tw-wrap) so the reference pages read as one family; the
   values are repeated here as tokens because tools.css is only loaded by
   the calculator. Brand blue #1F3F8F, navy #0F1F4A, the site font.

   Nothing here sets a fixed width: grids are minmax(0,1fr), long words
   wrap, and every data table scrolls inside its own card — never the page.
   ===================================================================== */
.pi-wrap{--pi-edge:#AEB8CA;--pi-edge-hi:#8C98B0;
  --pi-rest:0 1px 2px rgba(15,31,74,.10),0 2px 6px rgba(15,31,74,.08);
  --pi-lift:0 2px 4px rgba(15,31,74,.12),0 4px 10px rgba(15,31,74,.10);
  padding-top:18px;padding-bottom:56px}
.pi-wrap .crumbs{margin:0 0 14px}
.pi-page{padding-top:28px}

/* ---------- the index: the band, the search, the chips ---------- */
.ed-hero.pi-hero{height:380px}
.pi-hero .head{bottom:30px}
.pi-search{position:relative;margin-top:18px;max-width:560px}
.pi-search input{width:100%;height:50px;padding:0 16px 0 44px;border:1px solid var(--pi-edge,#AEB8CA);border-radius:14px;
  background:#fff;font:inherit;font-size:16px;color:var(--ink);box-shadow:0 1px 2px rgba(15,31,74,.10),0 4px 14px rgba(15,31,74,.10)}
.pi-search input:focus{border-color:var(--blue,#1F3F8F);box-shadow:0 0 0 3px rgba(31,63,143,.18);outline:2px solid transparent;outline-offset:1px}
.pi-search-ico{position:absolute;left:15px;top:16px;color:#64748B;pointer-events:none}
.pi-hero .pi-search{--pi-edge:#AEB8CA}

.pi-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px}
.pi-chip{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 14px;border:1px solid #AEB8CA;border-radius:999px;
  background:#fff;color:var(--ink);font-size:14px;font-weight:600;text-decoration:none;box-shadow:0 1px 2px rgba(15,31,74,.08)}
.pi-chip .pi-n{font-size:12px;font-weight:700;color:var(--mute);background:#EEF2F8;border-radius:999px;padding:2px 7px}
.pi-chip:hover{border-color:#8C98B0;color:var(--navy,#0F1F4A)}
.pi-chip[aria-current="true"]{background:var(--blue,#1F3F8F);border-color:var(--blue,#1F3F8F);color:#fff}
.pi-chip[aria-current="true"] .pi-n{background:rgba(255,255,255,.2);color:#fff}
.pi-chip:focus-visible{outline:2px solid var(--navy,#0F1F4A);outline-offset:2px}
.pi-status{min-height:20px;margin:4px 0 6px;font-size:13.5px;color:var(--mute)}

.pi-group{margin:18px 0 30px;scroll-margin-top:90px}
.pi-group-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 12px}
.pi-group-h h2{margin:0;font-size:24px;letter-spacing:-.01em;color:var(--navy,#0F1F4A)}
.pi-group-h p{margin:0;font-size:14px;color:var(--mute)}
.pi-sub{margin:0 0 18px}
.pi-sub h3{margin:0 0 10px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue,#1F3F8F)}

/* ---------- a product card: 6 / 4 / 2 across ---------- */
.pi-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:1fr;gap:12px}
.pi-cell{display:flex;min-width:0}
.pi-card{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;padding:16px 14px 14px;
  border:1px solid #AEB8CA;border-radius:14px;background:#fff;color:inherit;text-decoration:none;
  box-shadow:0 1px 2px rgba(15,31,74,.10),0 2px 6px rgba(15,31,74,.08);
  transition:border-color .15s,box-shadow .15s}
.pi-card-ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:4px;
  background:var(--blue-10,#E8EEFA);color:var(--blue,#1F3F8F)}
.pi-ico{display:block;flex:none}
.pi-card-n{font-size:15px;line-height:1.3;color:var(--ink);overflow-wrap:anywhere}
.pi-card-s{font-size:13px;line-height:1.45;color:var(--mute);overflow-wrap:anywhere}
@media (hover:hover){
  .pi-card:hover{border-color:#8C98B0;box-shadow:0 2px 4px rgba(15,31,74,.12),0 4px 10px rgba(15,31,74,.10)}
  .pi-card:hover .pi-card-n{color:var(--blue,#1F3F8F)}
}
.pi-card:focus-visible{outline:2px solid var(--navy,#0F1F4A);outline-offset:3px}
.pi-cell[hidden],.pi-sub[hidden],.pi-group[hidden]{display:none}

.pi-empty{padding:22px;margin:10px 0 24px}
.pi-empty p{margin:6px 0 0;color:var(--mute)}
.pi-more{display:flex;flex-wrap:wrap;gap:10px 22px;margin:26px 0 8px;font-size:14.5px}
.pi-more a{color:var(--blue,#1F3F8F);font-weight:600;text-decoration:none}
.pi-more a:hover{text-decoration:underline}
.pi-disclaimer{font-size:13px;color:var(--mute);margin:14px 0 0}

@media (max-width:1199px){ .pi-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:639px){
  .pi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pi-card{padding:14px 12px 12px}
  .pi-card-ico{width:40px;height:40px}
  .pi-group-h h2{font-size:21px}
}
@media (max-width:767px){
  .ed-hero.pi-hero{height:auto}
  .pi-search input{height:48px}
}

/* ---------- a product page: the header ---------- */
.pi-head{display:flex;gap:20px;align-items:flex-start;padding:24px;border:1px solid #AEB8CA;
  box-shadow:0 1px 2px rgba(15,31,74,.10),0 2px 6px rgba(15,31,74,.08)}
.pi-head-ico{flex:none;width:72px;height:72px;border-radius:18px;display:grid;place-items:center;
  background:var(--blue-10,#E8EEFA);color:var(--blue,#1F3F8F)}
.pi-head-b{min-width:0;flex:1}
.pi-kick{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue,#1F3F8F)}
.pi-kick a{color:inherit}
.pi-head h1{margin:6px 0 10px;font-size:36px;line-height:1.1;letter-spacing:-.02em;color:var(--navy,#0F1F4A);overflow-wrap:break-word}
.pi-summary{margin:0 0 10px;font-size:16px;line-height:1.6;color:#334155;max-width:80ch}
.pi-std{margin:0 0 10px;font-size:14.5px;color:#334155}
.pi-aka{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;margin-top:12px}
.pi-aka-h{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.pi-aka ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.pi-name{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid #D5DCE8;border-radius:999px;
  background:#F8FAFD;font-size:13px;color:var(--ink)}
.pi-lang{font-size:10.5px;font-weight:800;letter-spacing:.04em;color:var(--blue,#1F3F8F);text-decoration:none}

/* ---------- header photograph (only on a product with a "hero" field) ----------
   Top-left of the block, 60% wide and its full height, fading to white to
   the right and to the bottom — two gradients intersected, so no edge shows.
   The text starts where the photograph has mostly faded. Absolutely placed,
   so the block's height never depends on the image and nothing moves when
   it loads. */
.pi-head.has-hero{position:relative;overflow:hidden;min-height:260px;padding-left:38%}
.pi-hero{position:absolute;top:0;left:0;width:60%;height:100%;object-fit:cover;object-position:center 70%;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,#000 35%,transparent 100%),linear-gradient(to bottom,#000 45%,transparent 100%);
  mask-image:linear-gradient(to right,#000 35%,transparent 100%),linear-gradient(to bottom,#000 45%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.pi-head.has-hero > :not(.pi-hero){position:relative}
/* A soft white glow under the lines that can sit over the photograph. Measured
   without it, the grey "Also called" label fell to 2.3:1 over the steel at
   1440 (everything else already passed); with it every glyph is >= 4.5:1. */
.pi-head.has-hero :is(.pi-kick,h1,.pi-summary,.pi-aka-h){
  text-shadow:0 0 1px #fff,0 0 2px #fff,0 0 3px #fff,0 0 6px #fff,0 0 10px #fff}
@media (max-width:767px){
  .pi-head.has-hero{min-height:0;padding:168px 18px 18px}
  .pi-hero{width:100%;height:180px;object-position:center 75%;
    -webkit-mask-image:linear-gradient(to bottom,#000 45%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 45%,transparent 100%);
    -webkit-mask-composite:source-over;mask-composite:add}
}

/* ---------- quick facts ---------- */
.pi-facts{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.pi-fact{display:flex;gap:10px;align-items:flex-start;padding:14px;border:1px solid #AEB8CA;min-width:0;
  box-shadow:0 1px 2px rgba(15,31,74,.10),0 2px 6px rgba(15,31,74,.08)}
.pi-fact-ico{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--blue-10,#E8EEFA);color:var(--blue,#1F3F8F)}
.pi-fact-b{min-width:0;display:flex;flex-direction:column;gap:3px}
.pi-fact-b b{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.pi-fact-b span{font-size:14px;line-height:1.45;color:var(--ink);overflow-wrap:anywhere}

/* ---------- "On this page" ---------- */
.pi-jump{display:flex;align-items:center;gap:12px;margin:14px 0;padding:10px 14px;background:#fff;border:1px solid #D5DCE8;border-radius:12px;
  z-index:var(--z-raised,10)}
.pi-jump-h{flex:none;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.pi-jump ul{list-style:none;margin:0;padding:0;display:flex;gap:6px;overflow-x:auto;scrollbar-width:thin;min-width:0}
.pi-jump a{display:inline-block;white-space:nowrap;padding:6px 10px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--navy,#0F1F4A);text-decoration:none}
.pi-jump a:hover{background:var(--blue-10,#E8EEFA);color:var(--blue,#1F3F8F)}
@media (min-width:1024px){ .pi-jump{position:sticky;top:0} }

/* ---------- sections ---------- */
.pi-sec{margin:14px 0 0;padding:22px 24px;border:1px solid #D5DCE8;scroll-margin-top:72px;min-width:0}
.pi-sec h2{margin:0 0 12px;font-size:21px;color:var(--navy,#0F1F4A)}
.pi-sec h3{margin:16px 0 8px;font-size:15.5px;color:var(--navy,#0F1F4A)}
.pi-sec p{margin:0 0 12px;font-size:15.5px;line-height:1.65;color:#1E293B;max-width:85ch}
.pi-sec p:last-child{margin-bottom:0}
.pi-sec a:not(.btn){color:var(--blue,#1F3F8F)}
.pi-see{font-size:14px !important;color:var(--mute) !important}
.pi-dl{margin:6px 0 0;display:grid;gap:8px}
.pi-dl > div{display:grid;grid-template-columns:minmax(120px,220px) minmax(0,1fr);gap:12px;padding:8px 0;border-bottom:1px solid #EEF2F8}
.pi-dl dt{font-weight:700;color:var(--ink);font-size:14.5px;overflow-wrap:anywhere}
.pi-dl dd{margin:0;font-size:14.5px;line-height:1.55;color:#1E293B}
.pi-list{margin:0;padding-left:20px}
.pi-list li{margin:0 0 7px;font-size:15px;line-height:1.55;color:#1E293B}
.pi-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 28px}
.pi-cols h3{margin-top:4px}

.pi-scroll{overflow:auto;max-width:100%;border:1px solid #D5DCE8;border-radius:10px;-webkit-overflow-scrolling:touch}
.pi-scroll:focus-visible{outline:2px solid var(--navy,#0F1F4A);outline-offset:2px}
.pi-tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.pi-tbl th,.pi-tbl td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid #EEF2F8}
.pi-tbl thead th{background:#F3F6FB;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}
.pi-tbl td:first-child{white-space:nowrap;color:var(--mute);font-size:13.5px}
.pi-tbl tr:last-child td{border-bottom:0}
.pi-tbl small{color:var(--mute)}
.pi-old b{color:var(--mute)}
.pi-body{font-size:12.5px;font-weight:700;text-decoration:none}
.pi-replaced{display:inline-block;margin-top:3px;font-size:12px;font-weight:700;color:#92400E;background:#FEF3C7;border-radius:999px;padding:2px 8px}

.pi-tlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pi-tlist a{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid #AEB8CA;border-radius:12px;text-decoration:none;color:inherit;
  box-shadow:0 1px 2px rgba(15,31,74,.08);min-width:0}
.pi-tlist a:hover{border-color:#8C98B0;box-shadow:0 2px 4px rgba(15,31,74,.12),0 4px 10px rgba(15,31,74,.10)}
.pi-tlist-ico{flex:none;color:var(--blue,#1F3F8F);margin-top:1px}
.pi-tlist b{display:block;font-size:14.5px;color:var(--ink);overflow-wrap:anywhere}
.pi-tlist small{display:block;font-size:12.5px;color:var(--mute);margin-top:2px}
.pi-grid-rel{grid-template-columns:repeat(6,minmax(0,1fr))}

/* companies: the directory's own cards (directory.css), three across */
.pi-co{margin-top:8px}
.pi-co + .pi-co{margin-top:22px}
.pi-co-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 10px}
.pi-co-h h3{margin:0;font-size:17px}
.pi-co-h .pi-n,.pi-sec h3 .pi-n{font-size:12px;font-weight:700;color:var(--mute);background:#EEF2F8;border-radius:999px;padding:2px 8px;vertical-align:2px}
.pi-all{font-size:14px;font-weight:700;text-decoration:none}
.pi-all:hover{text-decoration:underline}
/* (0,3,1) and (0,4,1): mesteel.css widens every .grid to 4 and 5 columns on a
   wide fluid page (body.layout-fluid .grid:not(.list), (0,3,1)), which would
   leave six cards as four and two. Three across, two rows. */
body .pi-sec .grid.pi-co-grid,body.layout-fluid .pi-sec .grid.pi-co-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:0}
.pi-co-grid .card{min-width:0}
.pi-sec .pi-co-grid .co-link{color:inherit;text-decoration:none}
.pi-sec .pi-co-grid .co-link:hover{color:var(--blue,#1F3F8F);text-decoration:underline}
.pi-none{color:var(--mute) !important;font-size:14.5px !important}

/* marketplace */
.pi-posts{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pi-post{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid #D5DCE8;border-radius:12px;text-decoration:none;color:inherit;min-width:0}
.pi-post:hover{border-color:#8C98B0}
.pi-post b{font-size:15px;color:var(--ink);overflow-wrap:anywhere}
.pi-post small{font-size:12.5px;color:var(--mute)}
.pi-side{align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:2px 8px}
.pi-side.sell{background:var(--sell-10,#DCFCE7);color:var(--sell-ink,#065F46)}
.pi-side.buy{background:var(--buy-10,#FFEDD5);color:var(--buy-ink,#9A3412)}
.pi-btns{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}

/* prices */
.pi-prices{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pi-price{display:flex;flex-direction:column;gap:4px;padding:14px;border:1px solid #AEB8CA;border-radius:12px;text-decoration:none;color:inherit;min-width:0;
  box-shadow:0 1px 2px rgba(15,31,74,.08)}
.pi-price:hover{border-color:#8C98B0}
.pi-price b{font-size:14.5px;color:var(--ink)}
.pi-price-v{font-size:20px;font-weight:800;color:var(--navy,#0F1F4A)}
.pi-price-v small{font-size:12px;font-weight:600;color:var(--mute)}
.pi-price-v.pi-lock{font-size:14px;font-weight:700;color:var(--mute)}
.pi-price > small{font-size:12.5px;color:var(--mute)}

/* tools */
.pi-tools{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pi-tools a{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid #AEB8CA;border-radius:12px;text-decoration:none;color:var(--blue,#1F3F8F);min-width:0}
.pi-tools a:hover{border-color:#8C98B0}
.pi-tools svg{flex:none;margin-top:1px}
.pi-tools b{display:block;font-size:14.5px;color:var(--ink)}
.pi-tools small{display:block;font-size:12.5px;color:var(--mute)}

.pi-foot{margin:22px 0 0;font-size:13px;color:var(--mute)}
.pi-foot p{margin:0 0 6px}
.pi-foot a{color:var(--blue,#1F3F8F);font-weight:600}

/* ---------- a table page ---------- */
.pi-fig{margin:14px 0 0;padding:18px;text-align:center;border:1px solid #D5DCE8}
.pi-fig img{max-width:100%;height:auto}
.pi-fig figcaption{margin-top:8px;font-size:13px;color:var(--mute)}
.pi-data-card .pi-scroll{max-height:78vh}
.pi-data{border-collapse:separate;border-spacing:0;font-size:13.5px;font-variant-numeric:tabular-nums;min-width:100%}
.pi-data th,.pi-data td{padding:7px 10px;border-bottom:1px solid #EEF2F8;border-right:1px solid #F1F4F9;text-align:right;white-space:nowrap}
.pi-data thead th{position:sticky;top:0;z-index:2;background:#F3F6FB;color:var(--navy,#0F1F4A);font-size:12.5px;text-align:center;vertical-align:bottom;
  border-bottom:1px solid #D5DCE8}
.pi-data thead tr.pi-groups th{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--mute)}
.pi-data thead tr.pi-groups + tr th{top:30px}
.pi-unit{display:block;font-size:11px;font-weight:600;color:var(--mute)}
.pi-data tbody th{position:sticky;left:0;z-index:1;background:#fff;text-align:left;font-weight:700;color:var(--ink);border-right:1px solid #D5DCE8}
.pi-data thead th:first-child{left:0;z-index:3;text-align:left}
.pi-data tbody tr:nth-child(even) td,.pi-data tbody tr:nth-child(even) th{background:#FAFBFD}
.pi-data tbody tr:hover td,.pi-data tbody tr:hover th{background:#EEF3FB}
.pi-dash{color:#94A3B8}
.pi-notes{margin:10px 0 0;padding-left:18px;font-size:13.5px;color:var(--mute)}

@media (max-width:1199px){
  .pi-facts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pi-grid-rel{grid-template-columns:repeat(4,minmax(0,1fr))}
  body .pi-sec .grid.pi-co-grid,body.layout-fluid .pi-sec .grid.pi-co-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  .pi-page{padding-top:20px}
  .pi-head{flex-direction:column;gap:12px;padding:18px}
  .pi-head-ico{width:56px;height:56px;border-radius:14px}
  .pi-head h1{font-size:28px}
  .pi-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pi-sec{padding:18px 16px}
  .pi-cols,.pi-tlist,.pi-posts,.pi-prices,.pi-tools{grid-template-columns:1fr}
  body .pi-sec .grid.pi-co-grid,body.layout-fluid .pi-sec .grid.pi-co-grid{grid-template-columns:1fr}
  .pi-dl > div{grid-template-columns:1fr;gap:2px}
  .pi-grid-rel{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pi-tbl td:first-child{white-space:normal}
}
@media (max-width:420px){
  .pi-facts{grid-template-columns:1fr}
}