/* Product category V5 — compact engineering showcase */

.page-product-category.product-system-v4 {
  --cat5-shell:min(1392px,calc(100vw - 96px));
  --cat5-ink:#071116;
  --cat5-blue:#0b4f83;
  --cat5-paper:#f3f5f4;
  --cat5-line:#d5dddf;
}

.page-product-category.product-system-v4 .category-hero {
  width:var(--cat5-shell);
  min-height:560px;
  margin:36px auto 72px;
  display:grid;
  grid-template-columns:minmax(420px,.84fr) minmax(560px,1.16fr);
  color:var(--cat5-ink);
  background:#fff;
  border:1px solid var(--cat5-line);
  box-shadow:0 22px 68px rgba(7,17,22,.08);
}

.page-product-category.product-system-v4 .category-hero-copy {
  min-height:0;
  padding:62px clamp(38px,4.6vw,68px);
  justify-content:center;
}

.page-product-category.product-system-v4 .category-hero .breadcrumb,
.page-product-category.product-system-v4 .category-hero .breadcrumb a { color:#6b787e; }
.page-product-category.product-system-v4 .category-hero .eyebrow { color:var(--cat5-blue); }
.page-product-category.product-system-v4 .category-hero h1 {
  margin-top:18px;
  color:var(--cat5-ink);
  font-size:clamp(52px,5vw,76px);
  line-height:.98;
  letter-spacing:-.065em;
}
.page-product-category.product-system-v4 .category-hero-copy > p:last-of-type {
  max-width:530px;
  margin-top:26px;
  color:#66737a;
  font-size:15px;
  line-height:1.85;
}
.page-product-category.product-system-v4 .category-hero-actions { margin-top:32px; }
.page-product-category.product-system-v4 .category-hero-actions .text-link { color:var(--cat5-ink); }

body.page-product-category.product-system-v4 .category-hero .category-hero-media {
  min-height:560px;
  margin:0;
  display:grid !important;
  place-items:center;
  position:relative;
  overflow:hidden;
  border:0;
  border-left:1px solid var(--cat5-line);
  background:
    linear-gradient(rgba(11,79,131,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(11,79,131,.055) 1px,transparent 1px),
    radial-gradient(circle at 50% 44%,#fff 0,#edf1f0 72%);
  background-size:36px 36px,36px 36px,auto;
}
body.page-product-category.product-system-v4 .category-hero .category-hero-media::before {
  content:"";
  position:absolute;
  width:68%;
  aspect-ratio:1;
  border:1px solid rgba(11,79,131,.17);
  border-radius:50%;
}
body.page-product-category.product-system-v4 .category-hero .category-hero-media img {
  z-index:1;
  width:84%;
  height:72%;
  object-fit:contain;
  filter:drop-shadow(0 28px 28px rgba(7,17,22,.18));
}
body.page-product-category.product-system-v4 .category-hero .category-hero-media figcaption {
  z-index:2;
  right:28px;
  bottom:24px;
  left:28px;
  color:#657279;
}

.page-product-category.product-system-v4 .category-products {
  padding:96px max(48px,calc((100vw - 1392px)/2));
}
.page-product-category.product-system-v4 .category-product-grid { gap:24px; }
.page-product-category.product-system-v4 .category-product-grid .category-product-card {
  overflow:hidden;
  border:1px solid var(--cat5-line);
  transition:transform .42s cubic-bezier(.2,.75,.2,1),box-shadow .42s ease,border-color .42s ease;
}
.page-product-category.product-system-v4 .category-product-grid .category-product-card:hover {
  transform:translateY(-8px);
  border-color:#9fb4be;
  box-shadow:0 24px 48px rgba(7,17,22,.11);
}
.page-product-category.product-system-v4 .category-product-grid .category-product-card figure {
  min-height:320px;
  aspect-ratio:4/3;
  background:
    linear-gradient(rgba(132,187,219,.085) 1px,transparent 1px),
    linear-gradient(90deg,rgba(132,187,219,.085) 1px,transparent 1px),
    radial-gradient(circle at 50% 43%,#213743 0,#0b1820 74%);
  background-size:32px 32px;
}
.page-product-category.product-system-v4 .category-product-grid .category-product-card figure img {
  width:100%;
  height:100%;
  padding:24px;
  object-fit:contain;
  filter:drop-shadow(0 18px 18px rgba(0,0,0,.32));
  transition:transform .7s cubic-bezier(.2,.75,.2,1);
}
.page-product-category.product-system-v4 .category-product-grid .category-product-card:hover figure img {
  transform:scale(1.075);
}
.page-product-category.product-system-v4 .category-product-grid .category-product-card > div {
  min-height:288px;
  padding:26px 27px 28px;
  border-top:4px solid var(--cat5-blue);
}
.page-product-category.product-system-v4 .category-product-grid .category-product-card small {
  display:-webkit-box;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
}

@media (max-width:900px) {
  .page-product-category.product-system-v4 { --cat5-shell:calc(100vw - 32px); }
  .page-product-category.product-system-v4 .category-hero {
    min-height:0;
    grid-template-columns:1fr;
  }
  body.page-product-category.product-system-v4 .category-hero .category-hero-media {
    min-height:380px;
    border-left:0;
    border-top:1px solid var(--cat5-line);
  }
}

@media (max-width:700px) {
  .page-product-category.product-system-v4 { --cat5-shell:calc(100vw - 24px); }
  .page-product-category.product-system-v4 .category-hero { margin:14px auto 44px; }
  .page-product-category.product-system-v4 .category-hero-copy { padding:38px 22px 34px; }
  .page-product-category.product-system-v4 .category-hero h1 {
    font-size:34px;
    line-height:1.08;
    letter-spacing:-.045em;
  }
  .page-product-category.product-system-v4 .category-hero-copy > p:last-of-type {
    margin-top:18px;
    font-size:14px;
    line-height:1.75;
  }
  .page-product-category.product-system-v4 .category-hero-actions { margin-top:25px; }
  body.page-product-category.product-system-v4 .category-hero .category-hero-media {
    min-height:260px;
  }
  body.page-product-category.product-system-v4 .category-hero .category-hero-media img {
    width:90%;
    height:78%;
  }
  .page-product-category.product-system-v4 .category-products { padding:64px 12px; }
  .page-product-category.product-system-v4 .category-product-grid .category-product-card figure {
    min-height:0;
    aspect-ratio:4/3;
  }
  .page-product-category.product-system-v4 .category-product-grid .category-product-card figure img { padding:14px; }
  .page-product-category.product-system-v4 .category-product-grid .category-product-card > div {
    min-height:250px;
    padding:22px 20px 24px;
  }
}