.cargo-net-page {
  --cargo-net-accent: var(--stp-brick);
  --cargo-net-thread: #d64b28;
  --cargo-net-thread-soft: rgba(214, 75, 40, .16);
}

.cargo-net-page.cargo-net-wire {
  --cargo-net-thread: #667481;
  --cargo-net-thread-soft: rgba(102, 116, 129, .18);
}

.cargo-net-hero {
  padding: 8px 0 24px;
}

.cargo-net-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(430px, .96fr);
  gap: 16px 26px;
  align-items: start;
}

.cargo-net-summary {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  padding: 28px 0 8px;
}

.cargo-net-summary h1 {
  max-width: 760px;
  margin: 14px 0 14px;
  color: var(--site-page-text, var(--stp-text));
  font-size: clamp(38px, 4.3vw, 64px);
  font-weight: 900;
  line-height: 1.02;
}

.cargo-net-summary > p {
  max-width: 720px;
  margin: 0;
  color: var(--site-page-muted, var(--stp-muted));
  font-size: 18px;
  line-height: 1.55;
}

.cargo-net-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
}

.cargo-net-chips span {
  display: grid;
  min-width: 0;
  gap: 5px;
  padding: 12px 14px;
  border: 1px solid var(--site-page-line, var(--stp-line));
  border-left: 3px solid var(--cargo-net-accent);
  border-radius: 6px;
  background: var(--site-page-surface, var(--stp-surface));
  color: var(--site-page-text, var(--stp-text));
  font-size: 16px;
  line-height: 1.25;
}

.cargo-net-chips b {
  color: var(--site-page-muted, var(--stp-muted));
  font-size: 12px;
  text-transform: uppercase;
}

.cargo-net-media {
  position: relative;
  grid-column: 1;
  grid-row: 1 / span 2;
  min-height: 650px;
  overflow: hidden;
  border: 1px solid var(--site-page-line, var(--stp-line));
  border-radius: 7px;
  background: var(--site-page-surface, var(--stp-surface));
}

.cargo-net-media > img {
  width: 100%;
  height: 100%;
  min-height: 650px;
  object-fit: contain;
}

.cargo-net-schematic {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(rgba(105, 120, 134, .10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(105, 120, 134, .10) 1px, transparent 1px),
    radial-gradient(circle at 50% 42%, var(--cargo-net-thread-soft), transparent 46%),
    var(--site-page-soft, var(--stp-soft));
  background-size: 38px 38px, 38px 38px, auto, auto;
}

.cargo-net-schematic::before,
.cargo-net-schematic::after {
  position: absolute;
  z-index: 2;
  width: 32px;
  height: 72px;
  border: 5px solid var(--cargo-net-thread);
  border-radius: 50%;
  content: "";
}

.cargo-net-schematic::before {
  top: 34px;
  left: 38px;
  rotate: -42deg;
}

.cargo-net-schematic::after {
  right: 38px;
  bottom: 34px;
  rotate: -42deg;
}

.cargo-net-mesh {
  position: relative;
  width: min(62%, 340px);
  aspect-ratio: 1;
  rotate: -14deg;
  border: 8px solid var(--cargo-net-thread);
  border-radius: 12px;
  background:
    linear-gradient(45deg, transparent 46%, var(--cargo-net-thread) 47% 53%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, var(--cargo-net-thread) 47% 53%, transparent 54%);
  background-size: 46px 46px;
  box-shadow: 0 22px 55px rgba(13, 22, 30, .18);
}

.cargo-net-mesh i {
  position: absolute;
  width: 50px;
  height: 92px;
  border: 7px solid var(--cargo-net-thread);
  border-radius: 50%;
}

.cargo-net-mesh i:nth-child(1) { top: -73px; left: -28px; rotate: -45deg; }
.cargo-net-mesh i:nth-child(2) { top: -73px; right: -28px; rotate: 45deg; }
.cargo-net-mesh i:nth-child(3) { right: -28px; bottom: -73px; rotate: 135deg; }
.cargo-net-mesh i:nth-child(4) { bottom: -73px; left: -28px; rotate: -135deg; }

.cargo-net-schematic-label,
.cargo-net-schematic small {
  position: absolute;
  z-index: 4;
  left: 18px;
  padding: 7px 10px;
  border: 1px solid var(--site-page-line, var(--stp-line));
  border-radius: 4px;
  background: var(--site-page-surface, var(--stp-surface));
  color: var(--site-page-text, var(--stp-text));
  font-weight: 800;
}

.cargo-net-schematic-label { top: 18px; font-size: 12px; text-transform: uppercase; }
.cargo-net-schematic small { bottom: 18px; font-size: 13px; }

.cargo-net-commerce {
  grid-column: 2;
  grid-row: 2;
}

.cargo-net-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.cargo-net-operation-band {
  background: var(--site-page-soft, var(--stp-soft));
}

.cargo-net-check-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.cargo-net-check-grid article {
  min-height: 190px;
  padding: 22px;
  border: 1px solid var(--site-page-line, var(--stp-line));
  border-radius: 7px;
  background: var(--site-page-surface, var(--stp-surface));
}

.cargo-net-check-grid i {
  color: var(--cargo-net-accent);
  font-size: 30px;
}

.cargo-net-check-grid h3 {
  margin: 14px 0 8px;
  color: var(--site-page-text, var(--stp-text));
  font-size: 19px;
  line-height: 1.2;
}

.cargo-net-check-grid p {
  margin: 0;
  color: var(--site-page-muted, var(--stp-muted));
  font-size: 15px;
  line-height: 1.5;
}

.cargo-net-related {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.cargo-net-related a {
  display: grid;
  min-width: 0;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--site-page-line, var(--stp-line));
  border-radius: 6px;
  background: var(--site-page-surface, var(--stp-surface));
  color: var(--site-page-text, var(--stp-text));
  text-decoration: none;
  transition: border-color .16s ease, translate .16s ease;
}

.cargo-net-related a:hover,
.cargo-net-related a:focus-visible {
  border-color: var(--cargo-net-accent);
  translate: 0 -2px;
}

.cargo-net-related b { font-size: 18px; }
.cargo-net-related small { color: var(--site-page-muted, var(--stp-muted)); font-size: 13px; line-height: 1.35; }

.cargo-net-related-icon {
  width: 54px;
  height: 54px;
  border: 4px solid var(--stp-brick);
  border-radius: 5px;
  background:
    linear-gradient(45deg, transparent 44%, var(--stp-brick) 46% 54%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, var(--stp-brick) 46% 54%, transparent 56%);
  background-size: 18px 18px;
}

.cargo-net-related-icon.is-wire {
  border-color: #667481;
  background-image:
    linear-gradient(45deg, transparent 44%, #667481 46% 54%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, #667481 46% 54%, transparent 56%);
}

.cargo-net-related-icon.is-securing { border-style: dashed; }

/* Root category gateway: geometry belongs to product-category.css. */
.cargo-net-category-page { --cargo-net-card-thread: #d64b28; }
.cargo-net-category-showcase { min-height: 300px; }
.cargo-net-category-showcase .cargo-net-schematic { inset: 0; }
.cargo-net-category-showcase .cargo-net-mesh { width: min(46%, 220px); }
.cargo-net-category-showcase .cargo-net-schematic::before,
.cargo-net-category-showcase .cargo-net-schematic::after { width: 24px; height: 56px; border-width: 4px; }
.cargo-net-category-showcase figcaption { z-index: 6; }

.cargo-net-category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cargo-net-category-card {
  --cargo-net-card-thread: #d64b28;
  min-height: 430px;
  display: grid;
  grid-template-rows: 210px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--stp-line);
  background: var(--stp-surface);
  color: var(--stp-text);
  text-decoration: none;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.cargo-net-category-card.is-wire { --cargo-net-card-thread: #7b8995; }
.cargo-net-category-card.is-securing { --cargo-net-card-thread: #ef2c03; }
.cargo-net-card-visual {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--stp-line);
  background:
    linear-gradient(rgba(111, 127, 143, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111, 127, 143, .08) 1px, transparent 1px),
    radial-gradient(circle, color-mix(in srgb, var(--cargo-net-card-thread) 18%, transparent), transparent 62%),
    var(--stp-soft);
  background-size: 42px 42px, 42px 42px, auto, auto;
}
.cargo-net-card-mesh {
  width: 118px;
  aspect-ratio: 1;
  rotate: -12deg;
  border: 6px solid var(--cargo-net-card-thread);
  border-radius: 8px;
  background:
    linear-gradient(45deg, transparent 44%, var(--cargo-net-card-thread) 46% 54%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, var(--cargo-net-card-thread) 46% 54%, transparent 56%);
  background-size: 28px 28px;
  box-shadow: 0 18px 36px rgba(13, 22, 30, .18);
  transition: rotate 260ms ease, scale 260ms ease;
}
.cargo-net-card-copy { display: flex; flex-direction: column; align-items: flex-start; padding: 22px; }
.cargo-net-card-copy small { color: var(--site-color-accent); font-size: 11px; font-weight: 900; letter-spacing: .02em; text-transform: uppercase; }
.cargo-net-card-copy b { margin-top: 9px; font-size: 21px; line-height: 1.12; }
.cargo-net-card-copy em { margin-top: 10px; color: var(--stp-muted); font-size: 15px; font-style: normal; line-height: 1.48; }
.cargo-net-card-copy strong { margin-top: auto; padding-top: 18px; color: var(--site-color-accent); font-size: 13px; font-weight: 900; text-transform: uppercase; }
.cargo-net-category-card:hover,
.cargo-net-category-card:focus-visible { border-color: var(--site-color-accent); transform: translateY(-3px); box-shadow: 0 16px 34px rgba(13, 22, 30, .12); }
.cargo-net-category-card:hover .cargo-net-card-mesh,
.cargo-net-category-card:focus-visible .cargo-net-card-mesh { rotate: -6deg; scale: 1.05; }
.cargo-net-category-card:focus-visible { outline: 3px solid color-mix(in srgb, var(--site-color-accent) 30%, transparent); outline-offset: 2px; }

.stp-theme-dark.cargo-net-category-page .cargo-net-category-card,
.stp-theme-dark.cargo-net-category-page .cargo-net-card-visual { border-color: var(--site-dark-line); }
.stp-theme-dark.cargo-net-category-page .cargo-net-category-card { background: var(--site-dark-surface); color: var(--site-dark-text); }
.stp-theme-dark.cargo-net-category-page .cargo-net-card-visual {
  background:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px),
    radial-gradient(circle, color-mix(in srgb, var(--cargo-net-card-thread) 18%, transparent), transparent 62%),
    var(--site-dark-surface-strong);
  background-size: 42px 42px, 42px 42px, auto, auto;
}
.stp-theme-dark.cargo-net-category-page .cargo-net-card-copy em { color: var(--site-dark-muted); }

.site-page.stp-theme-dark .cargo-net-page,
.stp-theme-dark.cargo-net-page {
  --cargo-net-thread-soft: rgba(239, 63, 28, .13);
}

.stp-theme-dark.cargo-net-page.cargo-net-wire {
  --cargo-net-thread: #9aa7b2;
  --cargo-net-thread-soft: rgba(154, 167, 178, .14);
}

@media (max-width: 1100px) {
  .cargo-net-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr); }
  .cargo-net-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cargo-net-info-grid > :last-child { grid-column: 1 / -1; }
  .cargo-net-check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cargo-net-related { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cargo-net-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 780px) {
  .cargo-net-hero { padding-top: 0; }
  .cargo-net-hero-grid { grid-template-columns: 1fr; gap: 14px; }
  .cargo-net-summary { padding-top: 14px; }
  .cargo-net-summary { grid-column: auto; grid-row: auto; }
  .cargo-net-summary h1 { font-size: 38px; }
  .cargo-net-summary > p { font-size: 16px; }
  .cargo-net-media { grid-column: auto; grid-row: auto; min-height: 360px; }
  .cargo-net-media > img { min-height: 360px; }
  .cargo-net-commerce { grid-column: auto; grid-row: auto; }
  .cargo-net-info-grid { grid-template-columns: 1fr; }
  .cargo-net-info-grid > :last-child { grid-column: auto; }
  .cargo-net-related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cargo-net-category-grid { grid-template-columns: minmax(0, 1fr); }
  .cargo-net-category-card { min-height: 0; grid-template-columns: 38% minmax(0, 1fr); grid-template-rows: minmax(190px, auto); }
  .cargo-net-card-visual { border-right: 1px solid var(--stp-line); border-bottom: 0; }
  .cargo-net-card-mesh { width: 86px; border-width: 5px; background-size: 22px 22px; }
  .cargo-net-card-copy { padding: 17px; }
  .cargo-net-card-copy b { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .cargo-net-category-card,
  .cargo-net-card-mesh { transition: none; }
}

@media (max-width: 520px) {
  .cargo-net-summary h1 { font-size: 34px; }
  .cargo-net-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cargo-net-chips span { padding: 10px; font-size: 14px; }
  .cargo-net-media { min-height: 310px; }
  .cargo-net-mesh { width: 58%; background-size: 34px 34px; }
  .cargo-net-check-grid { grid-template-columns: 1fr; }
  .cargo-net-check-grid article { min-height: 0; }
  .cargo-net-related { grid-template-columns: 1fr 1fr; }
  .cargo-net-related a:last-child { grid-column: 1 / -1; }
}