/* ============================================================
   KOMTECH WEBSITE — PRODUCT CATEGORY PAGE STYLES
   products.css  (shared by every product-*.html page)
   ============================================================ */

/* ─── PAGE WRAPPER ──────────────────────────────────────────── */
.product-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 110px 40px 70px;   /* top clears the fixed navbar */
}

/* ─── CATEGORY CARD GRID (Komax-style landing pages) ─────────── */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));   /* fit cards on one row */
  gap: 32px 28px;
  margin-top: 10px;
}

/* Main Products index has 6 cards — pin it to a balanced 3 + 3 */
.cat-grid--index { grid-template-columns: repeat(3, 1fr); }

/* Two-card groups — larger cards, centred on the page */
.cat-grid--pair {
  grid-template-columns: repeat(2, minmax(0, 400px));
  justify-content: center;
}
.cat-card { text-decoration: none; display: block; }
.cat-card-img {
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  background: #eef2f6;
  overflow: hidden;
}
.cat-card-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* show the whole product, no cropping */
  padding: 22px;
  display: block;
  transition: transform 0.35s ease;
}
.cat-card:hover .cat-card-img img { transform: scale(1.05); }

/* Full-bleed lifestyle photo variant (people using the machine) */
.cat-card-img--cover { padding: 0; }   /* inherits the grey tile background */
.cat-card-img--cover img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  padding: 0;
  object-fit: cover;   /* fill the whole tile */
}

/* Per-card zoom + framing tuning (Welding & Heat) */
.cat-card[href="product-ultrasonic-welding.html"] .cat-card-img img { transform: scale(1.9); transform-origin: 83% 34%; }
.cat-card[href="product-ultrasonic-welding.html"]:hover .cat-card-img img { transform: scale(1.98); }
/* Heat shrink is a wide photo — show the whole thing, with the tile set to the
   image's own white background so it blends seamlessly (no grey letterbox) */
.cat-card[href="product-heat-shrink.html"] .cat-card-img img { object-fit: contain; }
.cat-card[href="product-heat-shrink.html"] .cat-card-img { background: #ffffff; }
/* Quality Tools cover photo — nudge the framing right a touch */
.cat-card[href="product-quality-tools.html"] .cat-card-img img { object-position: 20% 50%; }

.cat-card-label {
  margin-top: 14px;
  font-weight: 800;
  font-size: 19px;
  color: #1a2734;
  transition: color 0.2s;
}
.cat-card:hover .cat-card-label { color: var(--light-blue, #1e88e5); }
@media (max-width: 560px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 22px 18px; }
}

/* ─── BREADCRUMB ────────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #8a96a3;
  margin-bottom: 36px;
}

.breadcrumb a {
  color: var(--steel-blue, #1b3a5c);
  text-decoration: none;
  transition: color 0.18s;
}

.breadcrumb a:hover { color: var(--light-blue, #1e88e5); }

.breadcrumb .sep { color: #c2ccd6; }

.breadcrumb .current { color: #8a96a3; }

/* ─── PAGE HEADER ───────────────────────────────────────────── */
.product-header {
  max-width: 820px;
  margin-bottom: 50px;
}

.product-header h1 {
  font-size: 46px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--steel-blue, #1b3a5c);
  line-height: 1.1;
  margin-bottom: 22px;
}

.product-header p {
  font-size: 18px;
  line-height: 1.75;
  color: #4a5560;
}

/* ─── PRODUCT LIST (Komax-style cards) ──────────────────────── */
.product-list {
  display: flex;
  flex-direction: column;
}

.product-row {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 56px;
  align-items: stretch;
  margin-bottom: 30px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* Whole-card hover: lift the image + accent the title */
.product-row:hover .product-row-img {
  border-color: var(--light-blue, #1e88e5);
  box-shadow: 0 10px 28px rgba(21,101,192,0.15);
  transform: translateY(-3px);
}
.product-row:hover .product-row-img img { transform: scale(1.04); }
.product-row:hover .product-row-title { color: var(--light-blue, #1e88e5); }

/* Square image (or placeholder) */
.product-row-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  align-self: start;
  background: #fff;
  border: 1px solid #e4e9ef;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
}

.product-row-img:hover {
  border-color: var(--light-blue, #1e88e5);
  box-shadow: 0 10px 28px rgba(21,101,192,0.15);
  transform: translateY(-3px);
}

.product-row-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* show the whole tool, no cropping */
  padding: 18px;
  display: block;
  transition: transform 0.3s ease;
}

/* Category/scene photos should fill the frame instead of letterboxing */
.product-row-img.cover { background: #eef2f6; }
.product-row-img.cover img { object-fit: cover; padding: 0; }

.product-row-img:hover img { transform: scale(1.04); }

/* Cut & Strip – Deposit Systems: every photo has generous baked-in whitespace
   (or an aspect mismatch vs. the square tile) so they all sit small — zoom
   each in enough to fill the tile without cropping the machine out of frame. */
.product-row[href="product-cablecoiler-1300.html"] .product-row-img img { transform: scale(1.45); }
.product-row[href="product-cablecoiler-1300.html"]:hover .product-row-img img { transform: scale(1.52); }
.product-row[href="product-cablecoiler-1450.html"] .product-row-img img { transform: scale(1.85); }
.product-row[href="product-cablecoiler-1450.html"]:hover .product-row-img img { transform: scale(1.92); }
.product-row[href="product-cablecoiler-500.html"] .product-row-img img { transform: scale(2.0); }
.product-row[href="product-cablecoiler-500.html"]:hover .product-row-img img { transform: scale(2.07); }
.product-row[href="product-dps-375.html"] .product-row-img img { transform: scale(1.3); }
.product-row[href="product-dps-375.html"]:hover .product-row-img img { transform: scale(1.37); }
.product-row[href="product-kri-450.html"] .product-row-img img { transform: scale(1.3); }
.product-row[href="product-kri-450.html"]:hover .product-row-img img { transform: scale(1.37); }
.product-row[href="product-kri-850.html"] .product-row-img img { transform: scale(1.3); }
.product-row[href="product-kri-850.html"]:hover .product-row-img img { transform: scale(1.37); }
.product-row[href="product-tm-66.html"] .product-row-img img { transform: translateY(-20px) scale(1.5); }
.product-row[href="product-tm-66.html"]:hover .product-row-img img { transform: translateY(-20px) scale(1.57); }
.product-row[href="product-wirestacker-1000.html"] .product-row-img img { transform: translate(20px, 20px) scale(1.5); }
.product-row[href="product-wirestacker-1000.html"]:hover .product-row-img img { transform: translate(20px, 20px) scale(1.57); }
.product-row[href="product-wirestacker-3150.html"] .product-row-img img { transform: scale(1.4); }
.product-row[href="product-wirestacker-3150.html"]:hover .product-row-img img { transform: scale(1.47); }

/* Crimp to Crimp: Alpha 520/550 G2 (square studio shots) already fill the tile
   correctly. The rest are wide landscape studio photos that letterbox top/bottom
   in the square tile, or (CoaxCenter) have baked-in whitespace — zoom in harder
   and tint each tile to match its own photo's studio backdrop (no more seam). */
.product-row[href="product-coaxcenter-6000-plus.html"] .product-row-img { background: #f9f9f9; }
.product-row[href="product-coaxcenter-6000-plus.html"] .product-row-img img { transform: scale(1.6); }
.product-row[href="product-coaxcenter-6000-plus.html"]:hover .product-row-img img { transform: scale(1.67); }

.product-row[href="product-alpha-530.html"] .product-row-img { background: #b7bcc1; }
.product-row[href="product-alpha-560.html"] .product-row-img { background: #aeb4b9; }
.product-row[href="product-alpha-565.html"] .product-row-img { background: #ededed; }
.product-row[href="product-gamma-450.html"] .product-row-img { background: #acb2b8; }
.product-row[href="product-alpha-530.html"] .product-row-img img,
.product-row[href="product-alpha-560.html"] .product-row-img img,
.product-row[href="product-alpha-565.html"] .product-row-img img,
.product-row[href="product-gamma-450.html"] .product-row-img img { transform: scale(2.0); }
.product-row[href="product-alpha-530.html"]:hover .product-row-img img,
.product-row[href="product-alpha-560.html"]:hover .product-row-img img,
.product-row[href="product-alpha-565.html"]:hover .product-row-img img,
.product-row[href="product-gamma-450.html"]:hover .product-row-img img { transform: scale(2.07); }

.product-row[href="product-crx-44hd.html"] .product-row-img { background: #dfdfdf; }
.product-row[href="product-crx-44hd.html"] .product-row-img img { transform: scale(1.9); }
.product-row[href="product-crx-44hd.html"]:hover .product-row-img img { transform: scale(1.97); }

.product-row[href="product-alpha-520.html"] .product-row-img { background: #aeb5ba; }
.product-row[href="product-alpha-520.html"] .product-row-img img { transform: scale(1.35); }
.product-row[href="product-alpha-520.html"]:hover .product-row-img img { transform: scale(1.42); }
.product-row[href="product-alpha-550-g2.html"] .product-row-img { background: #a1a7af; }
.product-row[href="product-alpha-550-g2.html"] .product-row-img img { transform: scale(1.35); }
.product-row[href="product-alpha-550-g2.html"]:hover .product-row-img img { transform: scale(1.42); }

/* Twister: same treatment as Crimp to Crimp — tint each tile to match its own
   photo's studio backdrop, then zoom to fill (square/portrait shots get a
   modest zoom, wide landscape shots need a much bigger one). */
.product-row[href="product-bt-ut.html"] .product-row-img { background: #abb2b7; }
.product-row[href="product-sigma-588.html"] .product-row-img { background: #a4a9b1; }
.product-row[href="product-sigma-688-ltt.html"] .product-row-img { background: #a4abb2; }
.product-row[href="product-komax-bt-188-t.html"] .product-row-img { background: #9fa5ac; }
.product-row[href="product-bt-ut.html"] .product-row-img img,
.product-row[href="product-sigma-588.html"] .product-row-img img,
.product-row[href="product-sigma-688-ltt.html"] .product-row-img img,
.product-row[href="product-komax-bt-188-t.html"] .product-row-img img { transform: scale(1.35); }
.product-row[href="product-bt-ut.html"]:hover .product-row-img img,
.product-row[href="product-sigma-588.html"]:hover .product-row-img img,
.product-row[href="product-sigma-688-ltt.html"]:hover .product-row-img img,
.product-row[href="product-komax-bt-188-t.html"]:hover .product-row-img img { transform: scale(1.42); }

.product-row[href="product-komax-bt-288.html"] .product-row-img { background: #b2b9be; }
.product-row[href="product-sigma-688.html"] .product-row-img { background: #ededed; }
.product-row[href="product-sigma-688st.html"] .product-row-img { background: #b4babf; }
.product-row[href="product-komax-bt-288.html"] .product-row-img img,
.product-row[href="product-sigma-688.html"] .product-row-img img,
.product-row[href="product-sigma-688st.html"] .product-row-img img { transform: scale(2.0); }
.product-row[href="product-komax-bt-288.html"]:hover .product-row-img img,
.product-row[href="product-sigma-688.html"]:hover .product-row-img img,
.product-row[href="product-sigma-688st.html"]:hover .product-row-img img { transform: scale(2.07); }

/* Machine Modules landing page: Seal/Sleeving, Tin Twist & Crimping are wide
   landscape studio photos — tint each tile to match its backdrop and zoom to fill. */
.product-row[href="product-machine-modules-seal-sleeving.html"] .product-row-img { background: #a6adb3; }
.product-row[href="product-machine-modules-tin-twist.html"] .product-row-img { background: #b7bdc1; }
.product-row[href="product-machine-modules-crimping.html"] .product-row-img { background: #acb2b9; }
.product-row[href="product-machine-modules-seal-sleeving.html"] .product-row-img img,
.product-row[href="product-machine-modules-tin-twist.html"] .product-row-img img,
.product-row[href="product-machine-modules-crimping.html"] .product-row-img img { transform: scale(2.0); }
.product-row[href="product-machine-modules-seal-sleeving.html"]:hover .product-row-img img,
.product-row[href="product-machine-modules-tin-twist.html"]:hover .product-row-img img,
.product-row[href="product-machine-modules-crimping.html"]:hover .product-row-img img { transform: scale(2.07); }

.product-row[href="product-machine-modules-ultrasonic-welding.html"] .product-row-img { background: #b7b1ad; }
.product-row[href="product-machine-modules-ultrasonic-welding.html"] .product-row-img img { transform: scale(1.9); }
.product-row[href="product-machine-modules-ultrasonic-welding.html"]:hover .product-row-img img { transform: scale(1.97); }

/* Machine Modules – Crimping product list: full-bleed studio photos, tint each
   tile to match its backdrop and zoom to fill. (AEH's photo was replaced
   2026-07-08 with a full-bleed studio shot, so it now gets the same treatment.) */
.product-row[href="product-aeh.html"] .product-row-img { background: #a7aeb4; }
.product-row[href="product-c1340.html"] .product-row-img { background: #acb2b9; }
.product-row[href="product-c1360.html"] .product-row-img { background: #aab1b6; }
.product-row[href="product-c1370.html"] .product-row-img { background: #b3b6bb; }
.product-row[href="product-c1380.html"] .product-row-img { background: #abb1b7; }
.product-row[href="product-mil-crimp-cm03.html"] .product-row-img { background: #bfc4c9; }
.product-row[href="product-aeh.html"] .product-row-img img,
.product-row[href="product-c1340.html"] .product-row-img img,
.product-row[href="product-c1360.html"] .product-row-img img,
.product-row[href="product-c1370.html"] .product-row-img img,
.product-row[href="product-c1380.html"] .product-row-img img,
.product-row[href="product-mil-crimp-cm03.html"] .product-row-img img { transform: scale(2.0); }
.product-row[href="product-aeh.html"]:hover .product-row-img img,
.product-row[href="product-c1340.html"]:hover .product-row-img img,
.product-row[href="product-c1360.html"]:hover .product-row-img img,
.product-row[href="product-c1370.html"]:hover .product-row-img img,
.product-row[href="product-c1380.html"]:hover .product-row-img img,
.product-row[href="product-mil-crimp-cm03.html"]:hover .product-row-img img { transform: scale(2.07); }

.product-row[href="product-cm-04-duo.html"] .product-row-img { background: #c4c8cd; }
.product-row[href="product-cm-1-5-gs.html"] .product-row-img { background: #9ea5ab; }
.product-row[href="product-cm-f20.html"] .product-row-img { background: #9fa5ab; }
.product-row[href="product-cm-04-duo.html"] .product-row-img img,
.product-row[href="product-cm-1-5-gs.html"] .product-row-img img,
.product-row[href="product-cm-f20.html"] .product-row-img img { transform: scale(1.35); }
.product-row[href="product-cm-04-duo.html"]:hover .product-row-img img,
.product-row[href="product-cm-1-5-gs.html"]:hover .product-row-img img,
.product-row[href="product-cm-f20.html"]:hover .product-row-img img { transform: scale(1.42); }

/* Machine Modules – Seal/Sleeving product list: MCI 792, S1441 & X1592 are
   full-bleed landscape studio photos — tint + zoom to fill like the others. */
.product-row[href="product-mci-792.html"] .product-row-img { background: #a6adb3; }
.product-row[href="product-s1441.html"] .product-row-img { background: #a8aeb4; }
.product-row[href="product-x1592.html"] .product-row-img { background: #a8aeb4; }
.product-row[href="product-mci-792.html"] .product-row-img img,
.product-row[href="product-s1441.html"] .product-row-img img,
.product-row[href="product-x1592.html"] .product-row-img img { transform: scale(2.0); }
.product-row[href="product-mci-792.html"]:hover .product-row-img img,
.product-row[href="product-s1441.html"]:hover .product-row-img img,
.product-row[href="product-x1592.html"]:hover .product-row-img img { transform: scale(2.07); }

/* SLU 3000 / SLU 3000 G2 — narrow/tall product on white; zoom moderately,
   kept within its own empty margin so the crop doesn't eat into the machine. */
.product-row[href="product-slu-3000.html"] .product-row-img img { transform: scale(1.4); }
.product-row[href="product-slu-3000.html"]:hover .product-row-img img { transform: scale(1.47); }
.product-row[href="product-slu-3000-g2.html"] .product-row-img img { transform: scale(1.15); }
.product-row[href="product-slu-3000-g2.html"]:hover .product-row-img img { transform: scale(1.22); }

/* Machine Modules – Tin Twist product list: full-bleed landscape studio
   photos — tint + zoom to fill like the others. */
.product-row[href="product-x1582.html"] .product-row-img { background: #b7bdc1; }
.product-row[href="product-x1585.html"] .product-row-img { background: #bbc0c5; }
.product-row[href="product-x1582.html"] .product-row-img img,
.product-row[href="product-x1585.html"] .product-row-img img { transform: scale(2.0); }
.product-row[href="product-x1582.html"]:hover .product-row-img img,
.product-row[href="product-x1585.html"]:hover .product-row-img img { transform: scale(2.07); }

/* Machine Modules – Ultrasonic Welding product list: same full-bleed studio
   photo/backdrop as the landing page card — tint + zoom to fill. */
.product-row[href="product-schunk-ultrasonic-compaction.html"] .product-row-img { background: #b7b1ad; }
.product-row[href="product-schunk-ultrasonic-compaction.html"] .product-row-img img { transform: scale(1.9); }
.product-row[href="product-schunk-ultrasonic-compaction.html"]:hover .product-row-img img { transform: scale(1.97); }

/* High Voltage Platforms: full-bleed studio backdrops — tint + zoom to fill. */
.product-row[href="product-lambda-141.html"] .product-row-img { background: #9ea5ab; }
.product-row[href="product-lambda-240.html"] .product-row-img { background: #a3aab0; }
.product-row[href="product-lambda-240.html"] .product-row-img img { transform: scale(1.35); }
.product-row[href="product-lambda-240.html"]:hover .product-row-img img { transform: scale(1.42); }
.product-row[href="product-lambda-141.html"] .product-row-img img { transform: scale(2.0); }
.product-row[href="product-lambda-141.html"]:hover .product-row-img img { transform: scale(2.07); }

/* Data Wire Platforms: full-bleed square studio backdrops — tint + zoom to fill. */
.product-row[href="product-lambda-3-series.html"] .product-row-img { background: #caced2; }
.product-row[href="product-lambda-4-series.html"] .product-row-img { background: #b7bcc2; }
.product-row[href="product-lambda-5-series.html"] .product-row-img { background: #bbc0c5; }
.product-row[href="product-lambda-x-series.html"] .product-row-img { background: #ccd0d5; }
.product-row[href="product-tm4000.html"] .product-row-img { background: #a4aab1; }
.product-row[href="product-lambda-3-series.html"] .product-row-img img,
.product-row[href="product-lambda-4-series.html"] .product-row-img img,
.product-row[href="product-lambda-5-series.html"] .product-row-img img,
.product-row[href="product-lambda-x-series.html"] .product-row-img img,
.product-row[href="product-tm4000.html"] .product-row-img img { transform: scale(1.35); }
.product-row[href="product-lambda-3-series.html"]:hover .product-row-img img,
.product-row[href="product-lambda-4-series.html"]:hover .product-row-img img,
.product-row[href="product-lambda-5-series.html"]:hover .product-row-img img,
.product-row[href="product-lambda-x-series.html"]:hover .product-row-img img,
.product-row[href="product-tm4000.html"]:hover .product-row-img img { transform: scale(1.42); }

/* Wiring Harness Production Board: EasyWiring & E-Screen are square studio
   shots; EasyWiring EasyTouch is a wider scene photo — tint + zoom to fill. */
.product-row[href="product-easywiring.html"] .product-row-img { background: #a9afb5; }
.product-row[href="product-e-screen.html"] .product-row-img { background: #9ba1a9; }
.product-row[href="product-easywiring.html"] .product-row-img img,
.product-row[href="product-e-screen.html"] .product-row-img img { transform: scale(1.35); }
.product-row[href="product-easywiring.html"]:hover .product-row-img img,
.product-row[href="product-e-screen.html"]:hover .product-row-img img { transform: scale(1.42); }

.product-row[href="product-easywiring-easytouch.html"] .product-row-img { background: #b1b5bb; }
.product-row[href="product-easywiring-easytouch.html"] .product-row-img img { transform: scale(1.6); }
.product-row[href="product-easywiring-easytouch.html"]:hover .product-row-img img { transform: scale(1.67); }

/* Ultrasonic Welding landing page: Metal Welding photo is on a white
   background (no tint needed) — just zoom to fill. */
.product-row[href="product-ultrasonic-welding-metal-welding.html"] .product-row-img img { transform: scale(1.4); }
.product-row[href="product-ultrasonic-welding-metal-welding.html"]:hover .product-row-img img { transform: scale(1.47); }

/* Metal Welding product list: DS-20 GT/II/III & LS-C are wide landscape
   studio shots that sit small with a lot of empty height in the square tile
   — zoom to fill. DS-20 GT's backdrop is a light grey (not pure white like
   the others), so tint its tile to match — no more seam around the photo. */
.product-row[href="product-ds-20-gt.html"] .product-row-img { background: #e6e6e6; }
.product-row[href="product-ds-20-gt.html"] .product-row-img img,
.product-row[href="product-ds-20-ii.html"] .product-row-img img,
.product-row[href="product-ds-20-iii.html"] .product-row-img img,
.product-row[href="product-ls-c.html"] .product-row-img img { transform: scale(1.4); }
.product-row[href="product-ds-20-gt.html"]:hover .product-row-img img,
.product-row[href="product-ds-20-ii.html"]:hover .product-row-img img,
.product-row[href="product-ds-20-iii.html"]:hover .product-row-img img,
.product-row[href="product-ls-c.html"]:hover .product-row-img img { transform: scale(1.47); }

/* Splicing photo has a light-grey (not pure white) background — tint the tile
   to match, and ease the zoom back slightly. */
.product-row[href="product-ultrasonic-welding-splicing.html"] .product-row-img { background: #e6e6e6; }
.product-row[href="product-ultrasonic-welding-splicing.html"] .product-row-img img { transform: scale(1.25); }
.product-row[href="product-ultrasonic-welding-splicing.html"]:hover .product-row-img img { transform: scale(1.32); }

/* Ultrasonic Welding – Splicing product list: same idea across all six —
   tint each tile to match its photo's own background, then zoom to fill. */
.product-row[href="product-cable-fit-in.html"] .product-row-img { background: linear-gradient(to bottom, #272d32 50%, #3d3d3b 50%); }
.product-row[href="product-cable-fit-in.html"] .product-row-img img { transform: scale(1.1); }
.product-row[href="product-cable-fit-in.html"]:hover .product-row-img img { transform: scale(1.17); }

.product-row[href="product-gs-50-plus.html"] .product-row-img { background: #e6e6e6; }
.product-row[href="product-gs-50-plus.html"] .product-row-img img { transform: scale(1.18); }
.product-row[href="product-gs-50-plus.html"]:hover .product-row-img img { transform: scale(1.25); }

.product-row[href="product-gs-40-plus.html"] .product-row-img { background: #e6e6e6; }
.product-row[href="product-gs-40-plus.html"] .product-row-img img { transform: scale(1.2); }
.product-row[href="product-gs-40-plus.html"]:hover .product-row-img img { transform: scale(1.27); }

.product-row[href="product-minic-iii-compacting.html"] .product-row-img { background: #e6e6e6; }
.product-row[href="product-minic-iii-compacting.html"] .product-row-img img { transform: scale(1.2); }
.product-row[href="product-minic-iii-compacting.html"]:hover .product-row-img img { transform: scale(1.27); }

.product-row[href="product-l-splice-100-200.html"] .product-row-img img { transform: scale(1.3); }
.product-row[href="product-l-splice-100-200.html"]:hover .product-row-img img { transform: scale(1.37); }

.product-row[href="product-minic-iii.html"] .product-row-img img { transform: scale(1.15); }
.product-row[href="product-minic-iii.html"]:hover .product-row-img img { transform: scale(1.2); }

/* Heat Shrink landing page: Hot Air has baked-in whitespace on plain white
   (no tint needed); Infrared has a full-bleed grey backdrop — tint + zoom both. */
.product-row[href="product-heat-shrink-hot-air.html"] .product-row-img img { transform: scale(1.5); }
.product-row[href="product-heat-shrink-hot-air.html"]:hover .product-row-img img { transform: scale(1.57); }
.product-row[href="product-heat-shrink-infrared.html"] .product-row-img { background: #a2a8af; }
.product-row[href="product-heat-shrink-infrared.html"] .product-row-img img { transform: scale(1.35); }
.product-row[href="product-heat-shrink-infrared.html"]:hover .product-row-img img { transform: scale(1.42); }

/* Heat Shrink – Hot Air product list: all on plain white (no tint needed).
   STCS B already fills most of its frame; STCS L/PHD/VM are narrow/tall
   products, zoomed only as much as their own empty margin safely allows. */
.product-row[href="product-stcs-b.html"] .product-row-img img { transform: scale(1.5); }
.product-row[href="product-stcs-b.html"]:hover .product-row-img img { transform: scale(1.57); }
.product-row[href="product-stcs-l.html"] .product-row-img img,
.product-row[href="product-stcs-vm.html"] .product-row-img img { transform: scale(1.4); }
.product-row[href="product-stcs-l.html"]:hover .product-row-img img,
.product-row[href="product-stcs-vm.html"]:hover .product-row-img img { transform: scale(1.47); }
.product-row[href="product-stcs-phd.html"] .product-row-img img { transform: scale(1.25); }
.product-row[href="product-stcs-phd.html"]:hover .product-row-img img { transform: scale(1.32); }

/* Accessories: tint each tile to match its own photo (split gradient where
   top/bottom edges differ noticeably), then zoom to fill. */
.product-row[href="product-barcode-scanner.html"] .product-row-img { background: linear-gradient(to bottom, #caced3 50%, #d8dbde 50%); }
.product-row[href="product-barcode-scanner.html"] .product-row-img img { transform: scale(1.7); }
.product-row[href="product-barcode-scanner.html"]:hover .product-row-img img { transform: scale(1.77); }

.product-row[href="product-komax-mes.html"] .product-row-img { background: linear-gradient(to bottom, #4b6e9f 50%, #222b42 50%); }
.product-row[href="product-komax-mes.html"] .product-row-img img { transform: scale(1.5); }
.product-row[href="product-komax-mes.html"]:hover .product-row-img img { transform: scale(1.57); }

.product-row[href="product-seal-cleaning-device.html"] .product-row-img { background: linear-gradient(to bottom, #bbbcbe 50%, #abacae 50%); }
.product-row[href="product-seal-cleaning-device.html"] .product-row-img img { transform: scale(1.35); }
.product-row[href="product-seal-cleaning-device.html"]:hover .product-row-img img { transform: scale(1.42); }

.product-row[href="product-top-convert.html"] .product-row-img img { transform: scale(1.1); }
.product-row[href="product-top-convert.html"]:hover .product-row-img img { transform: scale(1.17); }

.product-row[href="product-topwin-wpcs.html"] .product-row-img img { transform: scale(1.08); }
.product-row[href="product-topwin-wpcs.html"]:hover .product-row-img img { transform: scale(1.15); }

/* Text column — vertically centred against the image, divider at its base */
.product-row-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 40px;
  border-bottom: 1px solid #e4e9ef;
  transition: border-color 0.25s;
}

.product-row:hover .product-row-body {
  border-bottom-color: var(--light-blue, #1e88e5);
}

/* Small bold category label (e.g. "Harness Manufacturing") */
.product-row-tag {
  font-size: 16px;
  font-weight: 700;
  color: #1a2734;
  margin-bottom: 8px;
}

/* Large product / model name */
.product-row-title {
  font-size: 30px;
  font-weight: 800;
  color: #1a2734;
  margin-bottom: 14px;
  line-height: 1.15;
  transition: color 0.2s;
}

.product-row-desc {
  font-size: 17px;
  line-height: 1.7;
  color: #5a6672;
  margin-bottom: 22px;
  max-width: 640px;
}

.product-row-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  font-weight: 700;
  color: var(--steel-blue, #1b3a5c);
  text-decoration: none;
  transition: gap 0.2s, color 0.2s;
}

.product-row-link:hover {
  gap: 12px;
  color: var(--light-blue, #1e88e5);
}

/* ─── CTA STRIP (bottom of page) ─────────────────────────────── */
.product-cta {
  margin-top: 60px;
  background: var(--steel-blue, #1b3a5c);
  border-radius: 14px;
  padding: 44px 48px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.product-cta-text h3 {
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 6px;
}

.product-cta-text p {
  font-size: 16px;
  color: rgba(255,255,255,0.8);
}

.product-cta-btn {
  display: inline-block;
  background: var(--light-blue, #1e88e5);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  padding: 14px 30px;
  border-radius: 8px;
  transition: background 0.2s, transform 0.15s;
  white-space: nowrap;
}

.product-cta-btn:hover {
  background: var(--light-blue-dk, #1565c0);
  transform: translateY(-2px);
}

/* ════════════════════════════════════════════════════════════
   RELATED PRODUCTS  (bottom of a product detail page — other
   items from the same category, reusing the product-grid-card look)
   ════════════════════════════════════════════════════════════ */
.related-products {
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid #e4e9ef;
}

.related-title {
  font-size: 19px;
  font-weight: 800;
  color: #1a2734;
  margin-bottom: 18px;
}

/* Larger landscape thumbnails, plain title, solid "Read more" button —
   matches the old site's related-products layout. */
.related-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 900px;
  margin: 0 auto;
}
.related-grid .product-grid-card { border: none; box-shadow: none; }
.related-grid .product-grid-card:hover { transform: none; }
.related-grid .product-grid-img {
  aspect-ratio: 16 / 10;
  background: #fff;
  border: 1px solid #e4e9ef;
}
.related-grid .product-grid-body { align-items: center; text-align: center; padding: 14px 0 0; gap: 12px; }
.related-grid .product-grid-title {
  font-size: 15px;
  font-weight: 600;
  color: #5a6672;
}
.related-grid .product-grid-card:hover .product-grid-title { color: #5a6672; }
.related-grid .product-grid-link {
  display: inline-block;
  margin-top: 0;
  background: var(--light-blue, #1e88e5);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 6px;
  transition: background 0.2s;
}
.related-grid .product-grid-link:hover { background: var(--light-blue-dk, #1565c0); }

@media (max-width: 860px) {
  .related-grid { grid-template-columns: repeat(2, 1fr); max-width: none; }
}

/* ════════════════════════════════════════════════════════════
   PRODUCT GRID  (compact cards — for categories with many items)
   ════════════════════════════════════════════════════════════ */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.product-grid-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e4e9ef;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.22s, box-shadow 0.22s, transform 0.18s;
}

.product-grid-card:hover {
  border-color: var(--light-blue, #1e88e5);
  box-shadow: 0 12px 30px rgba(21,101,192,0.14);
  transform: translateY(-4px);
}

.product-grid-img {
  width: 100%;
  aspect-ratio: 1 / 1;           /* taller box = much more room for the product */
  background: #fff;
  border-bottom: 1px solid #eef2f6;
  display: flex;
  align-items: flex-start;       /* product sits near the top, reflection below */
  justify-content: center;
  overflow: hidden;
  padding: 8px 8px 0;
}

.product-grid-img img {
  max-width: 100%;
  max-height: 90%;       /* fills most of the taller box; small gap for the reflection */
  width: auto;
  height: auto;
  object-fit: contain;   /* show the whole product, no cropping */
  display: block;
  transition: transform 0.3s ease;
  /* soft mirror reflection beneath the product (WebKit/Chromium/Edge) */
  -webkit-box-reflect: below 2px linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0) 72%);
}

/* ads 115 is a wide scene photo, not an isolated product — show the whole
   photo, vertically centred, on a grey box that matches its studio backdrop
   (so no harsh empty bands and no cropping). */
.product-grid-card[href="product-ads-115.html"] .product-grid-img {
  padding: 0;
  align-items: center;
  background: #dedee0;
}
.product-grid-card[href="product-ads-115.html"] .product-grid-img img {
  width: 100%; height: 100%; max-width: 100%; max-height: 100%;
  object-fit: contain;
  -webkit-box-reflect: none;
}

/* ads 119 is a square studio shot — fill the whole image box (no crop). */
.product-grid-card[href="product-ads-119.html"] .product-grid-img { padding: 0; align-items: stretch; }
.product-grid-card[href="product-ads-119.html"] .product-grid-img img {
  width: 100%; height: 100%; max-width: none; max-height: none;
  object-fit: cover;
  -webkit-box-reflect: none;
}

/* CB 260 sits small with lots of white — zoom in so it fills more of the card. */
.product-grid-card[href="product-cb260-cablebox.html"] .product-grid-img { align-items: center; }
.product-grid-card[href="product-cb260-cablebox.html"] .product-grid-img img { transform: scale(1.9); }
.product-grid-card[href="product-cb260-cablebox.html"]:hover .product-grid-img img { transform: scale(1.98); }

/* F1110, F1160 & F1150 — studio shots, fill the whole image box. */
.product-grid-card[href="product-f-1110.html"] .product-grid-img,
.product-grid-card[href="product-f1160.html"] .product-grid-img,
.product-grid-card[href="product-f1150.html"] .product-grid-img { padding: 0; align-items: stretch; }
.product-grid-card[href="product-f-1110.html"] .product-grid-img img,
.product-grid-card[href="product-f1160.html"] .product-grid-img img,
.product-grid-card[href="product-f1150.html"] .product-grid-img img {
  width: 100%; height: 100%; max-width: none; max-height: none;
  object-fit: cover;
  -webkit-box-reflect: none;
}

/* Crimp Presses: Delta 220/240/260/520/540 have a grey studio-gradient backdrop
   (vs. the plain-white shots elsewhere on this page) — fill the whole tile
   edge to edge so the backdrop reads as the card, no white border/gap. */
.product-grid-card[href="product-delta-220.html"] .product-grid-img,
.product-grid-card[href="product-delta-240.html"] .product-grid-img,
.product-grid-card[href="product-delta-260.html"] .product-grid-img,
.product-grid-card[href="product-delta-520.html"] .product-grid-img,
.product-grid-card[href="product-delta-540.html"] .product-grid-img { padding: 0; align-items: stretch; }
.product-grid-card[href="product-delta-220.html"] .product-grid-img img,
.product-grid-card[href="product-delta-240.html"] .product-grid-img img,
.product-grid-card[href="product-delta-260.html"] .product-grid-img img,
.product-grid-card[href="product-delta-520.html"] .product-grid-img img,
.product-grid-card[href="product-delta-540.html"] .product-grid-img img {
  width: 100%; height: 100%; max-width: none; max-height: none;
  object-fit: cover;
  -webkit-box-reflect: none;
}

/* UP 15 — centre vertically in the tile instead of sitting at the top, and
   drop the reflection (its own baked-in shadow made the mirrored reflection
   look messy/doubled). */
.product-grid-card[href="product-up15.html"] .product-grid-img { align-items: center; }
.product-grid-card[href="product-up15.html"] .product-grid-img img { -webkit-box-reflect: none; }

/* StripCrimp 208 & UniCrimp 208 — narrow/tall product sits small with lots of
   white either side; zoom + centre so it reads bigger (kept moderate since
   the product already runs most of the photo's height, to avoid cropping it). */
.product-grid-card[href="product-stripcrimp-208.html"] .product-grid-img,
.product-grid-card[href="product-unicrimp-208.html"] .product-grid-img { align-items: center; }
.product-grid-card[href="product-stripcrimp-208.html"] .product-grid-img img,
.product-grid-card[href="product-unicrimp-208.html"] .product-grid-img img { transform: scale(1.6); }
.product-grid-card[href="product-stripcrimp-208.html"]:hover .product-grid-img img,
.product-grid-card[href="product-unicrimp-208.html"]:hover .product-grid-img img { transform: scale(1.67); }

/* P107C — square shot with its own light blue-grey studio backdrop, fill the tile. */
.product-grid-card[href="product-p107c.html"] .product-grid-img { padding: 0; align-items: stretch; }
.product-grid-card[href="product-p107c.html"] .product-grid-img img {
  width: 100%; height: 100%; max-width: none; max-height: none;
  object-fit: cover;
  -webkit-box-reflect: none;
}

/* SH Cable Cutters (related-products card) — square shot, fill the tile. */
.product-grid-card[href="product-sh-cable-cutters.html"] .product-grid-img { padding: 0; align-items: stretch; }
.product-grid-card[href="product-sh-cable-cutters.html"] .product-grid-img img {
  width: 100%; height: 100%; max-width: none; max-height: none;
  object-fit: cover;
  -webkit-box-reflect: none;
}

/* Heat Shrink – Infrared grid: IRDC/IRES/IRMO photos are perfectly square
   (1:1) full-bleed studio shots matching the tile's own aspect ratio exactly —
   fill edge to edge so the photo's own backdrop IS the tile background
   (pixel-perfect match, no cropping needed since the ratios already line up). */
.product-grid-card[href="product-irdc-2000-1.html"] .product-grid-img,
.product-grid-card[href="product-irdc-2000-2.html"] .product-grid-img,
.product-grid-card[href="product-ires-120-mm.html"] .product-grid-img,
.product-grid-card[href="product-ires-60-mm.html"] .product-grid-img,
.product-grid-card[href="product-irmo-110v.html"] .product-grid-img,
.product-grid-card[href="product-irmo-230v.html"] .product-grid-img { padding: 0; align-items: stretch; }
.product-grid-card[href="product-irdc-2000-1.html"] .product-grid-img img,
.product-grid-card[href="product-irdc-2000-2.html"] .product-grid-img img,
.product-grid-card[href="product-ires-120-mm.html"] .product-grid-img img,
.product-grid-card[href="product-ires-60-mm.html"] .product-grid-img img,
.product-grid-card[href="product-irmo-110v.html"] .product-grid-img img,
.product-grid-card[href="product-irmo-230v.html"] .product-grid-img img {
  width: 100%; height: 100%; max-width: none; max-height: none;
  object-fit: cover;
  -webkit-box-reflect: none;
}

/* Marking Systems grid: EasyContrast, Komax 26, M1630 Jet/Eco & MRO 200
   AV-BV/B-S-XS are perfectly square full-bleed studio shots — fill edge to
   edge, same pixel-perfect-match technique as the Infrared grid above. */
.product-grid-card[href="product-easycontrast.html"] .product-grid-img,
.product-grid-card[href="product-komax-26.html"] .product-grid-img,
.product-grid-card[href="product-m1630-jet.html"] .product-grid-img,
.product-grid-card[href="product-m1630-jet-eco.html"] .product-grid-img,
.product-grid-card[href="product-mro-200-av-bv.html"] .product-grid-img,
.product-grid-card[href="product-mro-200-b-s-xs.html"] .product-grid-img { padding: 0; align-items: stretch; }
.product-grid-card[href="product-easycontrast.html"] .product-grid-img img,
.product-grid-card[href="product-komax-26.html"] .product-grid-img img,
.product-grid-card[href="product-m1630-jet.html"] .product-grid-img img,
.product-grid-card[href="product-m1630-jet-eco.html"] .product-grid-img img,
.product-grid-card[href="product-mro-200-av-bv.html"] .product-grid-img img,
.product-grid-card[href="product-mro-200-b-s-xs.html"] .product-grid-img img {
  width: 100%; height: 100%; max-width: none; max-height: none;
  object-fit: cover;
  -webkit-box-reflect: none;
}

/* M1650 is full-bleed but landscape (1.90) — cover would crop it hard, so tint
   the tile instead. Its top/bottom edges are two different shades (dark grey
   top, lighter grey bottom), so a hard 50/50 split — top half in the photo's
   own top-edge colour, bottom half in its bottom-edge colour — matches exactly
   where a single flat average colour left a visible seam. */
.product-grid-card[href="product-m1650.html"] .product-grid-img { align-items: center; background: linear-gradient(to bottom, #949ba2 50%, #c8c9cf 50%); }
.product-grid-card[href="product-m1650.html"] .product-grid-img img { transform: scale(1.3); -webkit-box-reflect: none; }
.product-grid-card[href="product-m1650.html"]:hover .product-grid-img img { transform: scale(1.37); }

/* The rest have real baked-in whitespace on a near-white (#f9f9f9) backdrop —
   tint the tile to match and zoom in to close the gap (amount tuned per photo
   to how much empty margin it actually has, so none get cropped into). */
.product-grid-card[href="product-alpha-jet-5.html"] .product-grid-img,
.product-grid-card[href="product-alpha-jet-5x.html"] .product-grid-img,
.product-grid-card[href="product-hotstamp-4140.html"] .product-grid-img,
.product-grid-card[href="product-hotstamp-4500.html"] .product-grid-img,
.product-grid-card[href="product-laser-marking-solution.html"] .product-grid-img,
.product-grid-card[href="product-ttp-4000.html"] .product-grid-img,
.product-grid-card[href="product-ttp-5000.html"] .product-grid-img,
.product-grid-card[href="product-wraptor-a6500.html"] .product-grid-img { align-items: center; background: #f9f9f9; }
.product-grid-card[href="product-alpha-jet-5.html"] .product-grid-img img { transform: scale(1.3); }
.product-grid-card[href="product-alpha-jet-5x.html"] .product-grid-img img { transform: scale(1.25); }
.product-grid-card[href="product-hotstamp-4140.html"] .product-grid-img img { transform: scale(1.2); }
.product-grid-card[href="product-hotstamp-4500.html"] .product-grid-img img { transform: scale(1.15); }
.product-grid-card[href="product-laser-marking-solution.html"] .product-grid-img img { transform: scale(1.3); }
.product-grid-card[href="product-ttp-4000.html"] .product-grid-img img { transform: scale(1.45); }
.product-grid-card[href="product-ttp-5000.html"] .product-grid-img img { transform: scale(1.5); }
.product-grid-card[href="product-wraptor-a6500.html"] .product-grid-img img { transform: scale(1.45); }
.product-grid-card[href="product-alpha-jet-5.html"]:hover .product-grid-img img { transform: scale(1.37); }
.product-grid-card[href="product-alpha-jet-5x.html"]:hover .product-grid-img img { transform: scale(1.32); }
.product-grid-card[href="product-hotstamp-4140.html"]:hover .product-grid-img img { transform: scale(1.27); }
.product-grid-card[href="product-hotstamp-4500.html"]:hover .product-grid-img img { transform: scale(1.22); }
.product-grid-card[href="product-laser-marking-solution.html"]:hover .product-grid-img img { transform: scale(1.37); }
.product-grid-card[href="product-ttp-4000.html"]:hover .product-grid-img img { transform: scale(1.52); }
.product-grid-card[href="product-ttp-5000.html"]:hover .product-grid-img img { transform: scale(1.57); }
.product-grid-card[href="product-wraptor-a6500.html"]:hover .product-grid-img img { transform: scale(1.52); }

/* THM Multimark is already on plain white (matches the tile) — just a modest
   zoom, kept light since it's a busy scene photo with labels near the edges. */
.product-grid-card[href="product-thm-multimark.html"] .product-grid-img { align-items: center; }
.product-grid-card[href="product-thm-multimark.html"] .product-grid-img img { transform: scale(1.3); }
.product-grid-card[href="product-thm-multimark.html"]:hover .product-grid-img img { transform: scale(1.37); }

/* Taping grid: KTR 5, Rotar 300 & Rotar 500 are square full-bleed studio
   shots — fill edge to edge, same as EasyContrast/IRDC above. */
.product-grid-card[href="product-ktr-5.html"] .product-grid-img,
.product-grid-card[href="product-rotar-300.html"] .product-grid-img,
.product-grid-card[href="product-rotar-500.html"] .product-grid-img { padding: 0; align-items: stretch; }
.product-grid-card[href="product-ktr-5.html"] .product-grid-img img,
.product-grid-card[href="product-rotar-300.html"] .product-grid-img img,
.product-grid-card[href="product-rotar-500.html"] .product-grid-img img {
  width: 100%; height: 100%; max-width: none; max-height: none;
  object-fit: cover;
  -webkit-box-reflect: none;
}

/* The rest are on plain white (matches the tile, no tint needed) with varying
   amounts of baked-in whitespace — zoom each in only as far as its own margin
   safely allows, so none get cropped into the actual machine. */
.product-grid-card[href="product-drainwire.html"] .product-grid-img,
.product-grid-card[href="product-kt-800.html"] .product-grid-img,
.product-grid-card[href="product-kthb-fix-2.html"] .product-grid-img,
.product-grid-card[href="product-kthb-micro.html"] .product-grid-img,
.product-grid-card[href="product-kthb-mini.html"] .product-grid-img,
.product-grid-card[href="product-kthb-smart.html"] .product-grid-img,
.product-grid-card[href="product-ktl-10.html"] .product-grid-img,
.product-grid-card[href="product-ktr-10.html"] .product-grid-img,
.product-grid-card[href="product-ktr-10-cs.html"] .product-grid-img,
.product-grid-card[href="product-ktr15.html"] .product-grid-img,
.product-grid-card[href="product-ktr-1800.html"] .product-grid-img { align-items: center; }
.product-grid-card[href="product-drainwire.html"] .product-grid-img img { transform: scale(1.1); }
.product-grid-card[href="product-kt-800.html"] .product-grid-img img { transform: scale(1.1); }
.product-grid-card[href="product-kthb-fix-2.html"] .product-grid-img img { transform: scale(1.15); }
.product-grid-card[href="product-kthb-micro.html"] .product-grid-img img { transform: scale(1.7); }
.product-grid-card[href="product-kthb-mini.html"] .product-grid-img img { transform: scale(1.25); }
.product-grid-card[href="product-kthb-smart.html"] .product-grid-img img { transform: scale(1.2); }
.product-grid-card[href="product-ktl-10.html"] .product-grid-img img { transform: scale(1.03); }
.product-grid-card[href="product-ktr-10.html"] .product-grid-img img { transform: scale(1.1); }
.product-grid-card[href="product-ktr-10-cs.html"] .product-grid-img img { transform: scale(1.15); }
.product-grid-card[href="product-ktr15.html"] .product-grid-img img { transform: scale(1.07); }
.product-grid-card[href="product-ktr-1800.html"] .product-grid-img img { transform: scale(1.25); }
.product-grid-card[href="product-drainwire.html"]:hover .product-grid-img img { transform: scale(1.17); }
.product-grid-card[href="product-kt-800.html"]:hover .product-grid-img img { transform: scale(1.17); }
.product-grid-card[href="product-kthb-fix-2.html"]:hover .product-grid-img img { transform: scale(1.22); }
.product-grid-card[href="product-kthb-micro.html"]:hover .product-grid-img img { transform: scale(1.77); }
.product-grid-card[href="product-kthb-mini.html"]:hover .product-grid-img img { transform: scale(1.32); }
.product-grid-card[href="product-kthb-smart.html"]:hover .product-grid-img img { transform: scale(1.27); }
.product-grid-card[href="product-ktl-10.html"]:hover .product-grid-img img { transform: scale(1.1); }
.product-grid-card[href="product-ktr-10.html"]:hover .product-grid-img img { transform: scale(1.17); }
.product-grid-card[href="product-ktr-10-cs.html"]:hover .product-grid-img img { transform: scale(1.22); }
.product-grid-card[href="product-ktr15.html"]:hover .product-grid-img img { transform: scale(1.14); }
.product-grid-card[href="product-ktr-1800.html"]:hover .product-grid-img img { transform: scale(1.32); }

/* Quality Tools grid: Adaptive Incision Control, Komax 341, Komax 341-2,
   Micro-Height 10, MicroLab 10 & MicroLab 30 are square-ish full-bleed studio
   shots — fill edge to edge, same technique as EasyContrast/IRDC above. */
.product-grid-card[href="product-adaptive-incision-control.html"] .product-grid-img,
.product-grid-card[href="product-komax-341.html"] .product-grid-img,
.product-grid-card[href="product-komax-341-2.html"] .product-grid-img,
.product-grid-card[href="product-micro-height-10.html"] .product-grid-img,
.product-grid-card[href="product-microlab-10.html"] .product-grid-img,
.product-grid-card[href="product-microlab-30.html"] .product-grid-img { padding: 0; align-items: stretch; }
.product-grid-card[href="product-adaptive-incision-control.html"] .product-grid-img img,
.product-grid-card[href="product-komax-341.html"] .product-grid-img img,
.product-grid-card[href="product-komax-341-2.html"] .product-grid-img img,
.product-grid-card[href="product-micro-height-10.html"] .product-grid-img img,
.product-grid-card[href="product-microlab-10.html"] .product-grid-img img,
.product-grid-card[href="product-microlab-30.html"] .product-grid-img img {
  width: 100%; height: 100%; max-width: none; max-height: none;
  object-fit: cover;
  -webkit-box-reflect: none;
}

/* ACD Automatic Conductor Detector, MicroForce 85, MicroLab 11/20 & Crimp
   Module Analyzer are full-bleed but too wide/tall for a straight cover crop
   — tint the tile to match instead (split gradient where top/bottom differ),
   then zoom moderately without cropping into the actual device. */
.product-grid-card[href="product-acd-automatic-conductor-detector.html"] .product-grid-img { padding: 0; align-items: stretch; }
.product-grid-card[href="product-acd-automatic-conductor-detector.html"] .product-grid-img img {
  width: 100%; height: 100%; max-width: none; max-height: none;
  object-fit: cover;
  -webkit-box-reflect: none;
}

/* MicroForce 85 is portrait (0.71 ratio), so its letterbox gap sits on the
   left/right sides, not top/bottom — the gradient must split left-to-right,
   not top-to-bottom, or the flat corner mismatch shows as a visible patch. */
.product-grid-card[href="product-microforce-85.html"] .product-grid-img { align-items: center; background: linear-gradient(to right, #b6b9bf 50%, #c0c3c9 50%); }
.product-grid-card[href="product-microforce-85.html"] .product-grid-img img { transform: scale(1.15); -webkit-box-reflect: none; }
.product-grid-card[href="product-microforce-85.html"]:hover .product-grid-img img { transform: scale(1.2); }

.product-grid-card[href="product-microlab-11.html"] .product-grid-img { align-items: center; background: linear-gradient(to bottom, #d7d9dc 50%, #e4e5e8 50%); }
.product-grid-card[href="product-microlab-11.html"] .product-grid-img img { transform: scale(1.3); -webkit-box-reflect: none; }
.product-grid-card[href="product-microlab-11.html"]:hover .product-grid-img img { transform: scale(1.37); }

.product-grid-card[href="product-microlab-20.html"] .product-grid-img { align-items: center; background: linear-gradient(to bottom, #d9dbde 50%, #e0e1e4 50%); }
.product-grid-card[href="product-microlab-20.html"] .product-grid-img img { transform: scale(1.3); -webkit-box-reflect: none; }
.product-grid-card[href="product-microlab-20.html"]:hover .product-grid-img img { transform: scale(1.37); }

.product-grid-card[href="product-crimp-module-analyzer.html"] .product-grid-img { align-items: center; background: linear-gradient(to bottom, #d2d4da 50%, #a6a8b1 50%); }
.product-grid-card[href="product-crimp-module-analyzer.html"] .product-grid-img img { transform: scale(1.3); -webkit-box-reflect: none; }
.product-grid-card[href="product-crimp-module-analyzer.html"]:hover .product-grid-img img { transform: scale(1.37); }

/* ACO 08, Electrolyte Staining Unit 6, Macro Zoom Unit 1.3 & MicroGraph System
   are on a near-white (#f9f9f9) backdrop with real baked-in whitespace —
   tint to match, zoom in only as far as each one's own margin safely allows. */
.product-grid-card[href="product-aco-08.html"] .product-grid-img,
.product-grid-card[href="product-electrolyte-staining-unit-6.html"] .product-grid-img,
.product-grid-card[href="product-macro-zoom-unit-1-3.html"] .product-grid-img,
.product-grid-card[href="product-micrograph-system.html"] .product-grid-img { align-items: center; background: #f9f9f9; }
.product-grid-card[href="product-aco-08.html"] .product-grid-img img { transform: scale(1.3); -webkit-box-reflect: none; }
.product-grid-card[href="product-electrolyte-staining-unit-6.html"] .product-grid-img img { transform: scale(1.08); -webkit-box-reflect: none; }
.product-grid-card[href="product-macro-zoom-unit-1-3.html"] .product-grid-img img { transform: scale(1.3); -webkit-box-reflect: none; }
.product-grid-card[href="product-micrograph-system.html"] .product-grid-img img { transform: scale(1.35); -webkit-box-reflect: none; }
.product-grid-card[href="product-aco-08.html"]:hover .product-grid-img img { transform: scale(1.37); }
.product-grid-card[href="product-electrolyte-staining-unit-6.html"]:hover .product-grid-img img { transform: scale(1.15); }
.product-grid-card[href="product-macro-zoom-unit-1-3.html"]:hover .product-grid-img img { transform: scale(1.37); }
.product-grid-card[href="product-micrograph-system.html"]:hover .product-grid-img img { transform: scale(1.42); }

/* CHM Crimp-Height Measuring Device is on plain white (matches the tile) with
   baked-in whitespace — zoom in, kept within its own safe margin. */
.product-grid-card[href="product-chm-crimp-height-measuring-device.html"] .product-grid-img { align-items: center; }
.product-grid-card[href="product-chm-crimp-height-measuring-device.html"] .product-grid-img img { transform: scale(1.25); }
.product-grid-card[href="product-chm-crimp-height-measuring-device.html"]:hover .product-grid-img img { transform: scale(1.32); }

/* Harness Machines: every Omega/Optima/Zeta shot except WPC has a full-bleed
   grey studio backdrop — fill the whole tile edge to edge (object-fit: cover),
   no reflection. Cover scales each photo by exactly what's needed to fill the
   box and nothing more, so same-shaped photos (the six ~1.79-ratio landscape
   shots, the seven near-square shots) all get the same relative crop and the
   machines read as a consistent size, instead of each having its own manual
   zoom amount stacked on top. */
.product-grid-card[href="product-omega-740.html"] .product-grid-img,
.product-grid-card[href="product-omega-740-s.html"] .product-grid-img,
.product-grid-card[href="product-omega-745.html"] .product-grid-img,
.product-grid-card[href="product-omega-750.html"] .product-grid-img,
.product-grid-card[href="product-omega-750s.html"] .product-grid-img,
.product-grid-card[href="product-omega-755.html"] .product-grid-img,
.product-grid-card[href="product-omega-840.html"] .product-grid-img,
.product-grid-card[href="product-omega-850.html"] .product-grid-img,
.product-grid-card[href="product-optima-400.html"] .product-grid-img,
.product-grid-card[href="product-optima-600.html"] .product-grid-img,
.product-grid-card[href="product-zeta-620-g2.html"] .product-grid-img,
.product-grid-card[href="product-zeta-630.html"] .product-grid-img,
.product-grid-card[href="product-zeta-640.html"] .product-grid-img,
.product-grid-card[href="product-zeta-650.html"] .product-grid-img { padding: 0; align-items: stretch; }
.product-grid-card[href="product-omega-740.html"] .product-grid-img img,
.product-grid-card[href="product-omega-740-s.html"] .product-grid-img img,
.product-grid-card[href="product-omega-745.html"] .product-grid-img img,
.product-grid-card[href="product-omega-750.html"] .product-grid-img img,
.product-grid-card[href="product-omega-750s.html"] .product-grid-img img,
.product-grid-card[href="product-omega-755.html"] .product-grid-img img,
.product-grid-card[href="product-omega-840.html"] .product-grid-img img,
.product-grid-card[href="product-omega-850.html"] .product-grid-img img,
.product-grid-card[href="product-optima-400.html"] .product-grid-img img,
.product-grid-card[href="product-optima-600.html"] .product-grid-img img,
.product-grid-card[href="product-zeta-620-g2.html"] .product-grid-img img,
.product-grid-card[href="product-zeta-630.html"] .product-grid-img img,
.product-grid-card[href="product-zeta-640.html"] .product-grid-img img,
.product-grid-card[href="product-zeta-650.html"] .product-grid-img img {
  width: 100%; height: 100%; max-width: none; max-height: none;
  object-fit: cover;
  -webkit-box-reflect: none;
}
.product-grid-card[href="product-omega-740.html"] .product-grid-img img,
.product-grid-card[href="product-omega-740-s.html"] .product-grid-img img,
.product-grid-card[href="product-omega-745.html"] .product-grid-img img,
.product-grid-card[href="product-omega-750.html"] .product-grid-img img,
.product-grid-card[href="product-omega-750s.html"] .product-grid-img img,
.product-grid-card[href="product-omega-755.html"] .product-grid-img img,
.product-grid-card[href="product-omega-840.html"] .product-grid-img img,
.product-grid-card[href="product-omega-850.html"] .product-grid-img img,
.product-grid-card[href="product-optima-400.html"] .product-grid-img img,
.product-grid-card[href="product-optima-600.html"] .product-grid-img img,
.product-grid-card[href="product-zeta-620-g2.html"] .product-grid-img img,
.product-grid-card[href="product-zeta-640.html"] .product-grid-img img,
.product-grid-card[href="product-zeta-650.html"] .product-grid-img img { transform: scale(1.3); }
.product-grid-card[href="product-omega-740.html"]:hover .product-grid-img img,
.product-grid-card[href="product-omega-740-s.html"]:hover .product-grid-img img,
.product-grid-card[href="product-omega-745.html"]:hover .product-grid-img img,
.product-grid-card[href="product-omega-750.html"]:hover .product-grid-img img,
.product-grid-card[href="product-omega-750s.html"]:hover .product-grid-img img,
.product-grid-card[href="product-omega-755.html"]:hover .product-grid-img img,
.product-grid-card[href="product-omega-840.html"]:hover .product-grid-img img,
.product-grid-card[href="product-omega-850.html"]:hover .product-grid-img img,
.product-grid-card[href="product-optima-400.html"]:hover .product-grid-img img,
.product-grid-card[href="product-optima-600.html"]:hover .product-grid-img img,
.product-grid-card[href="product-zeta-620-g2.html"]:hover .product-grid-img img,
.product-grid-card[href="product-zeta-640.html"]:hover .product-grid-img img,
.product-grid-card[href="product-zeta-650.html"]:hover .product-grid-img img { transform: scale(1.37); }

/* Zeta 630 stays more modest — its source photo is lower-resolution (399x315)
   than the rest, so stacking the same extra zoom would make it look soft/blurry. */
.product-grid-card[href="product-zeta-630.html"] .product-grid-img img { transform: scale(1.1); }
.product-grid-card[href="product-zeta-630.html"]:hover .product-grid-img img { transform: scale(1.15); }

.product-grid-card[href="product-wire-processing-centre-wpc.html"] .product-grid-img { align-items: center; }
.product-grid-card[href="product-wire-processing-centre-wpc.html"] .product-grid-img img { transform: scale(1.15); }
.product-grid-card[href="product-wire-processing-centre-wpc.html"]:hover .product-grid-img img { transform: scale(1.2); }

.product-grid-card[href="product-wire-processing-centre-wpc.html"] .product-grid-img { align-items: center; }
.product-grid-card[href="product-wire-processing-centre-wpc.html"] .product-grid-img img { transform: scale(1.15); }
.product-grid-card[href="product-wire-processing-centre-wpc.html"]:hover .product-grid-img img { transform: scale(1.2); }

/* PreFeeders — square shots on matching off-white, fill the box. */
.product-grid-card[href="product-prefeeder-1000-mx.html"] .product-grid-img,
.product-grid-card[href="product-prefeeder-2200.html"] .product-grid-img,
.product-grid-card[href="product-prefeeder-4350.html"] .product-grid-img,
.product-grid-card[href="product-prefeeder-4850.html"] .product-grid-img { padding: 0; align-items: stretch; background: #f9f9f9; }
.product-grid-card[href="product-prefeeder-1000-mx.html"] .product-grid-img img,
.product-grid-card[href="product-prefeeder-2200.html"] .product-grid-img img,
.product-grid-card[href="product-prefeeder-4350.html"] .product-grid-img img,
.product-grid-card[href="product-prefeeder-4850.html"] .product-grid-img img {
  width: 100%; height: 100%; max-width: none; max-height: none;
  object-fit: cover;
  -webkit-box-reflect: none;
}

/* PreFeeder 2500 & 3200 — whole machine, vertically centred, no reflection.
   2500's photo has an off-white (#f9f9f9) backdrop; 3200's is pure white, so
   it just uses the tile's own default white background (no tint needed). */
.product-grid-card[href="product-prefeeder-2500.html"] .product-grid-img,
.product-grid-card[href="product-prefeeder-3200.html"] .product-grid-img { align-items: center; }
.product-grid-card[href="product-prefeeder-2500.html"] .product-grid-img { background: #f9f9f9; }
.product-grid-card[href="product-prefeeder-2500.html"] .product-grid-img img,
.product-grid-card[href="product-prefeeder-3200.html"] .product-grid-img img { -webkit-box-reflect: none; }

/* PreFeeder 1100 — centred in the box, no reflection (whole product shown). */
.product-grid-card[href="product-prefeeder-1100.html"] .product-grid-img { align-items: center; }
.product-grid-card[href="product-prefeeder-1100.html"] .product-grid-img img { -webkit-box-reflect: none; }

.product-grid-card:hover .product-grid-img img { transform: scale(1.05); }

/* Cut & Strip – Bench Top: CenterStrip 1000's photo has a lot of baked-in
   whitespace/backdrop so it renders much smaller than E300/E400 — zoom + centre
   all three so the set reads as consistent, larger machines. */
.product-grid-card[href="product-centerstrip-1000.html"] .product-grid-img { align-items: center; }
.product-grid-card[href="product-centerstrip-1000.html"] .product-grid-img img { transform: scale(1.55); }
.product-grid-card[href="product-centerstrip-1000.html"]:hover .product-grid-img img { transform: scale(1.62); }

.product-grid-card[href="product-e300.html"] .product-grid-img,
.product-grid-card[href="product-e400.html"] .product-grid-img { align-items: center; }
.product-grid-card[href="product-e400.html"] .product-grid-img img { transform: scale(1.2); }
.product-grid-card[href="product-e400.html"]:hover .product-grid-img img { transform: scale(1.27); }
.product-grid-card[href="product-e300.html"] .product-grid-img img { transform: scale(1.6); }
.product-grid-card[href="product-e300.html"]:hover .product-grid-img img { transform: scale(1.67); }

/* Same fix for EcoCut 3200/3300 & EcoStrip 9380 — square studio photos with
   baked-in whitespace, zoom + centre so they match the rest of the grid. */
.product-grid-card[href="product-ecocut-3200.html"] .product-grid-img,
.product-grid-card[href="product-ecocut-3300.html"] .product-grid-img,
.product-grid-card[href="product-ecostrip-9380.html"] .product-grid-img { align-items: center; }
.product-grid-card[href="product-ecocut-3200.html"] .product-grid-img img,
.product-grid-card[href="product-ecocut-3300.html"] .product-grid-img img,
.product-grid-card[href="product-ecostrip-9380.html"] .product-grid-img img { transform: scale(1.55); }
.product-grid-card[href="product-ecocut-3200.html"]:hover .product-grid-img img,
.product-grid-card[href="product-ecocut-3300.html"]:hover .product-grid-img img,
.product-grid-card[href="product-ecostrip-9380.html"]:hover .product-grid-img img { transform: scale(1.62); }

/* Same fix for the rest of the Cut & Strip – Bench Top grid: zoom + centre so
   every card in the grid matches. Square/near-square photos get the biggest
   boost; wide landscape photos (already close to full tile width) get less. */
.product-grid-card[href="product-evocut.html"] .product-grid-img,
.product-grid-card[href="product-multi-strip-9480.html"] .product-grid-img,
.product-grid-card[href="product-powercut-3700.html"] .product-grid-img,
.product-grid-card[href="product-power-strip-9580.html"] .product-grid-img,
.product-grid-card[href="product-ulmer-sm15-2plc.html"] .product-grid-img,
.product-grid-card[href="product-ulmer-sm15-2pt.html"] .product-grid-img,
.product-grid-card[href="product-ulmer-wsm30-e-touch.html"] .product-grid-img,
.product-grid-card[href="product-mega-strip-9680.html"] .product-grid-img,
.product-grid-card[href="product-komax-iota-330.html"] .product-grid-img { align-items: center; }

.product-grid-card[href="product-multi-strip-9480.html"] .product-grid-img img,
.product-grid-card[href="product-powercut-3700.html"] .product-grid-img img,
.product-grid-card[href="product-ulmer-sm15-2plc.html"] .product-grid-img img,
.product-grid-card[href="product-ulmer-sm15-2pt.html"] .product-grid-img img,
.product-grid-card[href="product-ulmer-wsm30-e-touch.html"] .product-grid-img img { transform: scale(1.55); }
.product-grid-card[href="product-multi-strip-9480.html"]:hover .product-grid-img img,
.product-grid-card[href="product-powercut-3700.html"]:hover .product-grid-img img,
.product-grid-card[href="product-ulmer-sm15-2plc.html"]:hover .product-grid-img img,
.product-grid-card[href="product-ulmer-sm15-2pt.html"]:hover .product-grid-img img,
.product-grid-card[href="product-ulmer-wsm30-e-touch.html"]:hover .product-grid-img img { transform: scale(1.62); }

.product-grid-card[href="product-power-strip-9580.html"] .product-grid-img img { transform: scale(1.35); }
.product-grid-card[href="product-power-strip-9580.html"]:hover .product-grid-img img { transform: scale(1.42); }

/* EVOCUT was way over-zoomed (photo already fills its own canvas edge to edge,
   no baked-in whitespace) — back it off close to natural size. */
.product-grid-card[href="product-evocut.html"] .product-grid-img img { transform: scale(0.95); }
.product-grid-card[href="product-evocut.html"]:hover .product-grid-img img { transform: scale(1.0); }

/* Komax IOTA 330 still had a visible gap top/bottom — zoom in more to fill it. */
.product-grid-card[href="product-mega-strip-9680.html"] .product-grid-img img { transform: scale(1.2); }
.product-grid-card[href="product-mega-strip-9680.html"]:hover .product-grid-img img { transform: scale(1.27); }
.product-grid-card[href="product-komax-iota-330.html"] .product-grid-img img { transform: scale(1.5); }
.product-grid-card[href="product-komax-iota-330.html"]:hover .product-grid-img img { transform: scale(1.57); }

/* Bench Top Stripping grid only: centre each machine vertically so they're all
   leveled (the tile's middle runs through the centre of the machine). */
.product-grid.cat-bench-top .product-grid-img { align-items: center; }

/* These product photos have an off-white (#f9f9f9) background baked in — give
   only their tiles the matching grey so the photo blends (white-bg photos stay white). */
.product-grid-card[href="product-coaxstrip-5300-rx.html"] .product-grid-img,
.product-grid-card[href="product-fiberoptic-7010.html"] .product-grid-img,
.product-grid-card[href="product-fiberstrip-7030.html"] .product-grid-img,
.product-grid-card[href="product-jacketstrip-8310.html"] .product-grid-img,
.product-grid-card[href="product-jacketstrip-8400.html"] .product-grid-img,
.product-grid-card[href="product-semirigid-1050.html"] .product-grid-img,
.product-grid-card[href="product-shieldcut-8100.html"] .product-grid-img,
.product-grid-card[href="product-unistrip-2015.html"] .product-grid-img,
.product-grid-card[href="product-unistrip-2545.html"] .product-grid-img,
.product-grid-card[href="product-unistrip-2550.html"] .product-grid-img,
.product-grid-card[href="product-unistrip-2600.html"] .product-grid-img {
  background: #f9f9f9;
}

/* Mira 670 is a full studio photo (grey gradient + reflection) — let it fill the
   whole tile edge-to-edge so the photo's own backdrop becomes the card. */
.product-grid-card[href="product-mira-670.html"] .product-grid-img { padding: 0; }
.product-grid-card[href="product-mira-670.html"] .product-grid-img img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  transform: none;
}
.product-grid-card[href="product-mira-670.html"]:hover .product-grid-img img { transform: scale(1.05); }

/* Per-product fix: these photos have baked-in margin, so zoom them in to crop
   the empty space and make the machine fill the card like the others.
   B200 needs a lot; B300 only a little (its photo already nearly fills). */
.product-grid-card[href="product-strip-series-b200.html"] .product-grid-img img { transform: scale(1.7); }
.product-grid-card[href="product-strip-series-b200.html"]:hover .product-grid-img img { transform: scale(1.78); }
.product-grid-card[href="product-strip-series-b300.html"] .product-grid-img img { transform: translateY(22px) scale(1.3); }
.product-grid-card[href="product-strip-series-b300.html"]:hover .product-grid-img img { transform: translateY(22px) scale(1.36); }

.product-grid-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 20px 20px;
}

.product-grid-tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--light-blue, #1e88e5);
  margin-bottom: 8px;
}

.product-grid-title {
  font-size: 19px;
  font-weight: 800;
  color: #1a2734;
  line-height: 1.2;
  margin-bottom: 10px;
  transition: color 0.2s;
}

.product-grid-card:hover .product-grid-title { color: var(--light-blue, #1e88e5); }

.product-grid-desc {
  font-size: 15px;
  line-height: 1.6;
  color: #5a6672;
  margin-bottom: 16px;
  /* clamp to 3 lines so cards stay even height */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-grid-link {
  margin-top: auto;
  font-size: 14px;
  font-weight: 700;
  color: var(--steel-blue, #1b3a5c);
}

@media (max-width: 900px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .product-grid { grid-template-columns: 1fr; }
}


/* ════════════════════════════════════════════════════════════
   PRODUCT DETAIL PAGE  (single product)
   ════════════════════════════════════════════════════════════ */
.pd-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
  margin-bottom: 56px;
}

/* Text-wrap variant — the image floats at the top-left; the description
   text wraps alongside it while it's tall enough, then continues full-width
   once the text runs past the bottom of the image. For products with an
   unusually long description (lots of paragraphs/sub-headings). */
.pd-top.stack {
  display: block;
}
.pd-top.stack::after { content: ""; display: table; clear: both; }
.pd-top.stack .pd-gallery {
  float: left;
  width: 45%;
  max-width: 420px;
  margin-right: 48px;
  margin-bottom: 20px;
}

/* Gallery (left) */
.pd-main-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #fff;
  border: 1px solid #e4e9ef;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pd-main-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* show the whole product, no cropping */
  padding: 28px;
  display: block;
}

/* Full-bleed variant — for photos with their own studio backdrop that
   already matches (or nearly matches) the box's own aspect ratio, so the
   photo can fill the whole tile edge to edge with no crop. */
.pd-main-img.fill { padding: 0; }
.pd-main-img.fill img { object-fit: cover; padding: 0; }

/* Extra zoom for photos that have a lot of baked-in white margin, so the
   product itself reads bigger within the (already edge-to-edge) box. */
.pd-main-img.fill.zoom-lg img { transform: scale(1.8); }
.pd-main-img.fill.zoom-md img { transform: scale(1.15); }
.pd-main-img.fill.zoom-140 img { transform: scale(1.4); }
.pd-main-img.fill.zoom-160 img { transform: scale(1.6); }

/* Wide variant — for landscape photos where the box's own 1:1 aspect
   ratio would crop the subject on a fill; reshape the box to the photo's
   own ratio instead so nothing gets cut off. */
.pd-main-img.wide { aspect-ratio: 16 / 9; }
.pd-main-img.ultrawide { aspect-ratio: 2 / 1; }
.pd-main-img.tall { aspect-ratio: 5 / 6; }

/* Auto-rotating image slider (used on selected product pages) */
.pd-slider { position: relative; }
.pd-slider .pd-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 22px;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.pd-slider .pd-slide.active { opacity: 1; }

/* little dots showing which image is active */
.pd-slider-dots {
  position: absolute;
  left: 0; right: 0; bottom: 12px;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 2;
}
.pd-slider-dots span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(27,58,92,0.25);
  transition: background 0.3s;
}
.pd-slider-dots span.active { background: var(--steel-blue, #1b3a5c); }

/* Info (right) */
.pd-tag {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--light-blue, #1e88e5);
  margin-bottom: 12px;
}

.pd-title {
  font-size: 40px;
  font-weight: 800;
  color: var(--steel-blue, #1b3a5c);
  line-height: 1.1;
  margin-bottom: 22px;
}

.pd-desc {
  font-size: 17px;
  line-height: 1.75;
  color: #4a5560;
  margin-bottom: 30px;
}
.pd-desc p { margin: 0 0 14px; }
.pd-desc ul,
.pd-desc ol { margin: 0 0 14px; padding-left: 20px; }
.pd-desc li { margin-bottom: 6px; }
.pd-desc > :last-child { margin-bottom: 0; }

/* Sub-heading style for short standalone lines within a longer description
   (e.g. "Excellent strip quality") — visually separates sections instead of
   reading as just another body paragraph. */
.pd-desc-heading {
  font-size: 18px;
  font-weight: 800;
  color: var(--steel-blue, #1b3a5c);
  margin-top: 24px !important;
}

.pd-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.pd-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.15s, border-color 0.2s;
  background: var(--steel-blue, #1b3a5c);
  color: #fff;
  border: 2px solid var(--steel-blue, #1b3a5c);
}
.pd-btn-primary:hover {
  background: var(--steel-blue-dark, #142c46);
  border-color: var(--steel-blue-dark, #142c46);
  transform: translateY(-2px);
}

/* ─── INFO TABS ─────────────────────────────────────────────── */
.pd-tabs { margin-top: 10px; }

.pd-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  border-bottom: 1px solid #e4e9ef;
}

.pd-tab {
  background: none;
  border: none;
  padding: 18px 0;
  margin-bottom: -1px;
  font-size: 16px;
  font-weight: 600;
  color: #5a6672;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.pd-tab:hover { color: var(--steel-blue, #1b3a5c); }
.pd-tab.active {
  color: var(--steel-blue, #1b3a5c);
  border-bottom-color: var(--light-blue, #1e88e5);
}

.pd-panel { display: none; padding: 30px 0; }
.pd-panel.active { display: block; }

.pd-panel p {
  font-size: 17px;
  line-height: 1.75;
  color: #4a5560;
  margin-bottom: 14px;
  max-width: 760px;
}

/* Rich text tab content (Features / feature lists / prose Technical Data) */
.pd-richtext { max-width: 820px; }
.pd-richtext h3,
.pd-richtext h4,
.pd-richtext h5 {
  color: #1a2734;
  margin: 0 0 12px;
  font-size: 17px;
}
.pd-richtext p { font-size: 17px; line-height: 1.7; color: #4a5560; margin: 0 0 12px; }
.pd-richtext ul,
.pd-richtext ol { margin: 0 0 14px; padding-left: 20px; }
.pd-richtext li { font-size: 17px; line-height: 1.7; color: #4a5560; margin-bottom: 8px; }
.pd-richtext li strong { color: #1a2734; display: block; }
.pd-richtext .feature { margin-bottom: 16px; }
.pd-richtext .feature h5 { margin-bottom: 4px; }
.pd-richtext .feature p { margin: 0; }

/* Applications tab — diagram image */
.pd-app { max-width: 100%; }
.pd-app-img {
  display: block;
  width: 100%;
  max-width: 760px;
  height: auto;
  border-radius: 6px;
}

/* Small source banners (native width well under 760px) shouldn't be
   stretched up to full width — that just blurs the text. Cap at native size. */
.pd-app-img.natural { width: auto; max-width: 100%; }

/* Video tab */
.pd-video {
  width: 100%;
  max-width: 640px;
  height: auto;
  border-radius: 6px;
  background: #000;
}

/* Video tab — embedded (YouTube / Vimeo) 16:9 responsive */
.pd-video-embed {
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  background: #000;
}
.pd-video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Spec table */
.pd-spec-table {
  width: 100%;
  max-width: 680px;
  border-collapse: collapse;
}

.pd-spec-table th,
.pd-spec-table td {
  text-align: left;
  padding: 13px 16px;
  border-bottom: 1px solid #e4e9ef;
  font-size: 16px;
}

.pd-spec-table th {
  color: #1a2734;
  font-weight: 700;
  width: 42%;
}

.pd-spec-table td { color: #4a5560; }

/* Download box (brochure) */
.pd-download {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 16px;
  font-weight: 700;
  color: var(--steel-blue, #1b3a5c);
  text-decoration: none;
  padding: 16px 26px;
  border: 1px solid #d7dee6;
  border-radius: 10px;
  background: #f7f9fb;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.15s, color 0.2s;
}

.pd-download:hover {
  color: var(--light-blue, #1e88e5);
  border-color: var(--light-blue, #1e88e5);
  background: #fff;
  box-shadow: 0 8px 22px rgba(21,101,192,0.12);
  transform: translateY(-2px);
}

/* the leading arrow becomes a small badge */
.pd-download::before {
  content: "⬇";
  font-size: 16px;
  color: var(--light-blue, #1e88e5);
}

/* Related-products grid (Machine Modules – Crimping family): CM F20 and
   CM 1/5 GS are tall portrait grey studio shots, and CM 04 Duo is a squarer
   one, all shown in the related-grid's wide 16:10 tile — default contain
   leaves big white bars either side. Tint the tile to each photo's own grey
   backdrop and zoom in (kept modest so the machine itself never gets
   cropped) so the grey reads edge-to-edge instead. */
.product-grid-card[href="product-cm-f20.html"] .product-grid-img,
.product-grid-card[href="product-cm-1-5-gs.html"] .product-grid-img { align-items: center; background: #9fa5ab; }
.product-grid-card[href="product-cm-f20.html"] .product-grid-img img,
.product-grid-card[href="product-cm-1-5-gs.html"] .product-grid-img img { max-height: 100%; transform: scale(1.5); }
.product-grid-card[href="product-cm-f20.html"]:hover .product-grid-img img,
.product-grid-card[href="product-cm-1-5-gs.html"]:hover .product-grid-img img { transform: scale(1.57); }

.product-grid-card[href="product-cm-04-duo.html"] .product-grid-img { align-items: center; background: #c4c8cd; }
.product-grid-card[href="product-cm-04-duo.html"] .product-grid-img img { max-height: 100%; transform: scale(1.3); }
.product-grid-card[href="product-cm-04-duo.html"]:hover .product-grid-img img { transform: scale(1.37); }

/* ─── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 860px) {
  .product-row {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .product-row-img { max-width: 480px; }
  .product-header h1 { font-size: 34px; }
  .product-header p { font-size: 17px; }

  .pd-top { grid-template-columns: 1fr; gap: 30px; }
  .pd-title { font-size: 30px; }
}

@media (max-width: 600px) {
  .product-page { padding: 100px 20px 50px; }
  .product-cta { flex-direction: column; align-items: flex-start; padding: 32px 24px; }
  .pd-actions { flex-direction: column; align-items: stretch; }
  .pd-btn-primary { justify-content: center; }
}