/* =========================================================
   WLUSV MODULE PRODUCT PAGES v2.7
   ========================================================= */

.module-product-hero .product-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3, 17, 28, .95), rgba(3, 17, 28, .58) 58%, rgba(3, 17, 28, .78)),
    linear-gradient(0deg, rgba(3, 17, 28, .84), transparent 55%);
}

.module-hero-visual {
  position: relative;
  min-height: 410px;
}

.gnss-fix-visual {
  border: 1px solid rgba(168, 206, 232, .25);
  border-radius: 50%;
  aspect-ratio: 1;
  max-width: 430px;
  margin-inline: auto;
  background:
    linear-gradient(rgba(119, 167, 204, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(119, 167, 204, .08) 1px, transparent 1px),
    radial-gradient(circle, rgba(119, 167, 204, .13), rgba(3, 17, 28, .62) 60%);
  background-size: 34px 34px, 34px 34px, auto;
  box-shadow: 0 0 70px rgba(50, 105, 140, .2), inset 0 0 60px rgba(50, 105, 140, .12);
  overflow: visible;
}

.gnss-orbit {
  position: absolute;
  inset: 13%;
  border: 1px solid rgba(168, 206, 232, .28);
  border-radius: 50%;
  transform: rotate(27deg);
}

.gnss-orbit.orbit-two {
  inset: 27%;
  transform: rotate(-31deg);
}

.gnss-crosshair::before,
.gnss-crosshair::after {
  content: "";
  position: absolute;
  background: rgba(216, 239, 255, .72);
}

.gnss-crosshair::before {
  left: 50%;
  top: 17%;
  width: 1px;
  height: 66%;
}

.gnss-crosshair::after {
  top: 50%;
  left: 17%;
  height: 1px;
  width: 66%;
}

.gnss-fix-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #8dd6ad;
  border: 5px solid rgba(141, 214, 173, .16);
  box-shadow: 0 0 28px rgba(141, 214, 173, .82);
}

.module-readout {
  position: absolute;
  right: -4%;
  bottom: 4%;
  min-width: 205px;
  border: 1px solid rgba(168, 206, 232, .27);
  border-radius: 11px;
  background: rgba(3, 17, 28, .9);
  padding: 14px 17px;
  box-shadow: 0 22px 48px rgba(0, 0, 0, .28);
}

.module-readout small {
  display: block;
  color: #a8cee8;
  font-size: 9px;
  letter-spacing: .15em;
}

.module-readout strong {
  display: block;
  color: #8dd6ad;
  font-size: 24px;
  margin: 2px 0;
}

.module-readout span {
  color: #9bb0bf;
  font-size: 11px;
}

.control-command-visual {
  width: min(100%, 510px);
  margin-inline: auto;
  border: 1px solid rgba(168, 206, 232, .28);
  border-radius: 17px;
  background:
    linear-gradient(rgba(119, 167, 204, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(119, 167, 204, .055) 1px, transparent 1px),
    rgba(3, 17, 28, .82);
  background-size: 34px 34px;
  padding: 30px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .34);
}

.control-visual-head,
.control-state-row,
.control-channel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.control-visual-head {
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(168, 206, 232, .16);
}

.control-visual-head small {
  color: #a8cee8;
  letter-spacing: .14em;
}

.control-visual-head span {
  color: #8dd6ad;
  border: 1px solid rgba(141, 214, 173, .35);
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 10px;
}

.control-channel {
  margin-top: 33px;
}

.control-channel label {
  width: 82px;
  color: #a8cee8;
  font-size: 10px;
  letter-spacing: .12em;
}

.control-channel > div {
  flex: 1;
  height: 11px;
  border-radius: 999px;
  background: rgba(168, 206, 232, .09);
  border: 1px solid rgba(168, 206, 232, .16);
  overflow: hidden;
}

.control-channel i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #77a7cc, #d8efff);
  box-shadow: 0 0 18px rgba(168, 206, 232, .35);
}

.control-channel strong {
  width: 48px;
  text-align: right;
  color: #edf7fc;
  font-size: 13px;
}

.control-state-row {
  margin-top: 38px;
  padding-top: 20px;
  border-top: 1px solid rgba(168, 206, 232, .16);
}

.control-state-row span {
  color: #8dd6ad;
  font-size: 9px;
  letter-spacing: .11em;
}

.module-page-value-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(168, 206, 232, .28);
  border-radius: 13px;
  background: rgba(168, 206, 232, .06);
}

.module-page-value-icon img,
.module-crosslink-grid img {
  filter: brightness(0) saturate(100%) invert(92%) sepia(12%) saturate(567%) hue-rotate(176deg) brightness(103%) contrast(103%);
}

.module-crosslinks {
  padding-top: 80px;
}

.module-crosslink-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.module-crosslink-grid > a {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(168, 206, 232, .18);
  border-radius: 13px;
  padding: 20px;
  background: rgba(119, 167, 204, .045);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.module-crosslink-grid > a:hover {
  transform: translateY(-3px);
  border-color: rgba(168, 206, 232, .48);
  background: rgba(119, 167, 204, .09);
}

.module-crosslink-grid strong,
.module-crosslink-grid small {
  display: block;
}

.module-crosslink-grid small {
  color: #9bb0bf;
  margin-top: 3px;
  font-size: 11px;
}

.download-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
  margin-top: 28px;
}

@media (max-width: 900px) {
  .module-crosslink-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 780px) {
  .module-hero-visual {
    min-height: 340px;
  }

  .gnss-fix-visual {
    max-width: 360px;
  }
}

@media (max-width: 520px) {
  .module-crosslink-grid {
    grid-template-columns: 1fr;
  }

  .module-readout {
    right: 0;
  }
}