.pipe-select-page {
  min-height: 100vh;
}

.pipe-select-brand {
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
  font-size: 1.1rem;
}

.pipe-select-nav a[aria-current="page"] {
  color: #78baff;
}

.pipe-select-hero {
  padding: 58px 0 54px;
  background:
    radial-gradient(
      circle at 82% 18%,
      rgba(40, 125, 255, 0.14),
      transparent 38%
    );
}

.pipe-select-back {
  display: inline-flex;
  margin-bottom: 34px;
  color: #75baff;
  text-decoration: none;
  font-size: 0.9rem;
}

.pipe-select-hero__grid {
  display: grid;
  grid-template-columns:
    minmax(0, 1.55fr)
    minmax(280px, 0.7fr);
  gap: 46px;
  align-items: end;
}

.pipe-select-hero h1 {
  margin: 12px 0 14px;
  font-size: clamp(3.1rem, 7vw, 6rem);
  line-height: 0.94;
  letter-spacing: -0.055em;
}

.pipe-select-lead {
  max-width: 770px;
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.7;
  opacity: 0.8;
}

.pipe-select-note {
  padding: 23px;
  border: 1px solid rgba(120, 155, 195, 0.22);
  border-radius: 18px;
  background: rgba(255,255,255,0.025);
}

.pipe-select-note__status {
  display: inline-flex;
  margin-bottom: 16px;
  padding: 6px 10px;
  border: 1px solid rgba(255,184,70,0.28);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
}

.pipe-select-note strong {
  display: block;
  margin-bottom: 8px;
}

.pipe-select-note p {
  margin: 0;
  line-height: 1.58;
  opacity: 0.7;
}

.pipe-select-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.pipe-select-section-head h2 {
  margin: 6px 0 0;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
}

.pipe-select-step {
  font-size: 0.74rem;
  font-weight: 800;
  opacity: 0.45;
}

.pipe-select-badge {
  display: inline-flex;
  padding: 7px 11px;
  border: 1px solid rgba(90,170,255,0.28);
  border-radius: 999px;
  color: #79bdff;
  font-size: 0.74rem;
  font-weight: 700;
}

.pipe-select-badge--next {
  opacity: 0.75;
}

.pipe-select-input-layout {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.pipe-select-panel {
  padding: 28px;
  border: 1px solid rgba(120,155,195,0.22);
  border-radius: 22px;
  background: rgba(255,255,255,0.025);
}

.pipe-select-panel h3 {
  margin: 0 0 24px;
  font-size: 1.25rem;
}

.pipe-select-form-grid {
  display: grid;
  gap: 21px;
}

.pipe-select-field {
  display: grid;
  gap: 8px;
}

.pipe-select-field > span {
  font-weight: 700;
}

.pipe-select-field small {
  line-height: 1.45;
  opacity: 0.58;
}

.pipe-select-input-unit,
.pipe-select-dual-input,
.pipe-select-select {
  border: 1px solid rgba(130,155,185,0.25);
  border-radius: 14px;
  background: rgba(0,0,0,0.12);
}

.pipe-select-input-unit {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  overflow: hidden;
}

.pipe-select-input-unit:focus-within,
.pipe-select-dual-input:focus-within,
.pipe-select-select:focus {
  border-color: rgba(80,160,255,0.62);
  box-shadow:
    0 0 0 3px rgba(70,145,255,0.08);
}

.pipe-select-input-unit input {
  min-width: 0;
  padding: 15px 16px;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

.pipe-select-input-unit strong {
  padding: 0 16px;
  font-size: 0.82rem;
  opacity: 0.62;
}

.pipe-select-select {
  width: 100%;
  padding: 15px 16px;
  color: inherit;
  font: inherit;
  outline: 0;
}

.pipe-select-select option,
.pipe-select-dual-input option {
  color: #111;
}

.pipe-select-dual-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  overflow: hidden;
}

.pipe-select-dual-input input,
.pipe-select-dual-input select {
  min-width: 0;
  padding: 15px 16px;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

.pipe-select-dual-input select {
  border-left:
    1px solid rgba(130,155,185,0.2);
}

.pipe-select-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.pipe-select-error {
  margin-top: 18px;
  padding: 13px 15px;
  border: 1px solid rgba(255,90,90,0.35);
  border-radius: 12px;
  background: rgba(255,70,70,0.08);
  line-height: 1.5;
}

.pipe-select-result-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.pipe-select-result-grid article {
  padding: 22px;
  border: 1px solid rgba(120,155,195,0.17);
  border-radius: 17px;
  background: rgba(255,255,255,0.025);
}

.pipe-select-result-grid span,
.pipe-select-result-grid small {
  display: block;
  font-size: 0.77rem;
  opacity: 0.58;
}

.pipe-select-result-grid strong {
  display: block;
  margin: 10px 0 6px;
  font-size: 1.45rem;
}

.pipe-select-formula {
  margin-top: 24px;
  padding: 22px;
  border: 1px solid rgba(80,150,255,0.17);
  border-radius: 17px;
  background: rgba(60,130,230,0.055);
}

.pipe-select-formula > span {
  display: block;
  margin-bottom: 8px;
  font-size: 0.76rem;
  opacity: 0.58;
}

.pipe-select-formula > strong {
  font-size: 1.05rem;
}

.pipe-select-formula p {
  margin: 10px 0 0;
  line-height: 1.55;
  opacity: 0.64;
}

.pipe-select-selection-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.pipe-select-selection-card {
  padding: 28px;
  border: 1px solid rgba(120,155,195,0.22);
  border-radius: 22px;
  background: rgba(255,255,255,0.025);
}

.pipe-select-selection-card > span {
  font-size: 0.76rem;
  font-weight: 800;
  opacity: 0.48;
}

.pipe-select-selection-card h3 {
  margin: 10px 0 8px;
}

.pipe-select-selection-card p {
  line-height: 1.6;
  opacity: 0.64;
}

.pipe-select-selection-value {
  margin: 22px 0;
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.pipe-select-check-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 11px 0;
  border-top:
    1px solid rgba(120,155,195,0.12);
}

.pipe-select-check-row span {
  opacity: 0.62;
}

.pipe-select-engineering-note {
  margin-top: 22px;
  padding: 24px;
  border: 1px solid rgba(80,150,255,0.2);
  border-radius: 18px;
  background: rgba(60,130,230,0.05);
}

.pipe-select-engineering-note strong {
  display: block;
  margin-bottom: 8px;
}

.pipe-select-engineering-note p {
  margin: 0;
  line-height: 1.6;
  opacity: 0.7;
}

.pipe-select-footer {
  padding: 28px 0 36px;
  text-align: center;
  font-size: 0.82rem;
  opacity: 0.55;
}

@media (max-width: 900px) {

  .pipe-select-hero__grid,
  .pipe-select-input-layout,
  .pipe-select-selection-grid {
    grid-template-columns: 1fr;
  }

  .pipe-select-result-grid {
    grid-template-columns:
      repeat(2, minmax(0,1fr));
  }

  .pipe-select-nav {
    display: none;
  }

}

@media (max-width: 560px) {

  .pipe-select-result-grid {
    grid-template-columns: 1fr;
  }

  .pipe-select-section-head {
    display: grid;
  }

  .pipe-select-panel,
  .pipe-select-selection-card {
    padding: 20px;
  }

  .pipe-select-dual-input {
    grid-template-columns: 1fr;
  }

  .pipe-select-dual-input select {
    border-left: 0;
    border-top:
      1px solid rgba(130,155,185,0.2);
  }

}

.pipe-select-selection-value--pending {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  opacity: 0.62;
}

.pipe-select-pending {
  font-size: 0.82rem;
  font-weight: 600;
  opacity: 0.5;
}

.pipe-select-advanced {
  margin-top: 6px;
  padding: 14px 16px;
  border: 1px solid rgba(120,155,195,0.16);
  border-radius: 14px;
}

.pipe-select-advanced summary {
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 700;
}

.pipe-select-advanced__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 16px;
}

.pipe-select-advanced > small {
  display: block;
  margin-top: 12px;
  line-height: 1.45;
  opacity: 0.55;
}

.pipe-select-model-note {
  display: block;
  margin-top: 18px;
  line-height: 1.45;
  opacity: 0.5;
}

@media (max-width: 560px) {
  .pipe-select-advanced__grid {
    grid-template-columns: 1fr;
  }
}

.pipe-select-result-note {
  display: block;
  margin: -2px 0 16px;
  line-height: 1.45;
  opacity: 0.5;
}

.pipe-select-strength-profile {
  margin-top: 24px;
  padding: 18px 20px;
  border: 1px solid rgba(120,155,195,0.18);
  border-radius: 16px;
  background: rgba(255,255,255,0.018);
}

.pipe-select-strength-profile > summary {
  cursor: pointer;
  font-weight: 700;
}

.pipe-select-strength-profile__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin: 22px 0;
}

.pipe-select-strength-profile__head strong,
.pipe-select-strength-profile__head span {
  display: block;
}

.pipe-select-strength-profile__head span {
  margin-top: 4px;
  font-size: 0.78rem;
  opacity: 0.55;
}

.pipe-select-strength-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.pipe-select-strength-hint {
  margin: 18px 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  opacity: 0.55;
}

@media (max-width: 700px) {
  .pipe-select-strength-grid {
    grid-template-columns: 1fr;
  }
}

.pipe-select-auto-result {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.pipe-select-auto-result > div {
  padding: 14px 16px;
  border: 1px solid rgba(80,150,255,0.18);
  border-radius: 13px;
  background: rgba(60,130,230,0.04);
}

.pipe-select-auto-result span {
  display: block;
  margin-bottom: 6px;
  font-size: 0.74rem;
  opacity: 0.55;
}

.pipe-select-auto-result strong {
  font-size: 1.05rem;
}

@media (max-width: 560px) {
  .pipe-select-auto-result {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   PIPE SELECT — MATERIAL GROUP / NORMATIVE BASE V1
   UI ONLY
   ========================================================= */


.pipe-select-strength-subhead {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
}

.pipe-select-strength-subhead > div {
  min-width: 0;
}

.pipe-select-strength-subhead strong {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
}

.pipe-select-strength-subhead > div > span {
  display: block;
  margin-top: 4px;
  font-size: 0.72rem;
  opacity: 0.55;
}

.pipe-select-strength-subhead__standard {
  flex: 0 0 auto;
  padding: 6px 10px;
  border: 1px solid rgba(64, 145, 255, 0.24);
  border-radius: 999px;
  font-size: 0.68rem;
  white-space: nowrap;
  opacity: 0.82;
}


.pipe-select-normative-base {
  margin: 18px 0 26px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  background: rgba(10, 22, 35, 0.34);
}

.pipe-select-normative-base > summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 62px;
  padding: 14px 52px 14px 16px;
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.pipe-select-normative-base > summary::-webkit-details-marker {
  display: none;
}

.pipe-select-normative-base > summary::after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  border: 1px solid rgba(64, 145, 255, 0.26);
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
}

.pipe-select-normative-base[open] > summary::after {
  content: "−";
}

.pipe-select-normative-base > summary strong {
  display: block;
  font-size: 0.84rem;
}

.pipe-select-normative-base > summary span {
  display: block;
  margin-top: 4px;
  font-size: 0.68rem;
  opacity: 0.55;
}

.pipe-select-normative-base__body {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 0 16px 16px;
}

.pipe-select-normative-item {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.13);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.018);
}

.pipe-select-normative-item strong {
  display: block;
  margin-bottom: 5px;
  font-size: 0.78rem;
}

.pipe-select-normative-item > span {
  display: block;
  min-height: 30px;
  font-size: 0.67rem;
  line-height: 1.45;
  opacity: 0.58;
}

.pipe-select-normative-item p {
  margin: 10px 0 0;
  font-size: 0.69rem;
  line-height: 1.55;
  opacity: 0.72;
}

.pipe-select-normative-item small {
  display: block;
  margin-top: 9px;
  font-size: 0.64rem;
  opacity: 0.48;
}

.pipe-select-normative-item--wide {
  grid-column: 1 / -1;
}

.pipe-select-normative-warning {
  grid-column: 1 / -1;
  padding: 13px 14px;
  border-left: 2px solid rgba(64, 145, 255, 0.65);
  border-radius: 0 10px 10px 0;
  background: rgba(64, 145, 255, 0.045);
}

.pipe-select-normative-warning strong {
  display: block;
  font-size: 0.72rem;
}

.pipe-select-normative-warning p {
  margin: 5px 0 0;
  font-size: 0.68rem;
  line-height: 1.55;
  opacity: 0.68;
}


@media (max-width: 820px) {

  .pipe-select-normative-base__body {
    grid-template-columns: 1fr;
  }

  .pipe-select-normative-item--wide {
    grid-column: auto;
  }

  .pipe-select-normative-warning {
    grid-column: auto;
  }

}


@media (max-width: 560px) {

  .pipe-select-strength-subhead {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
  }

}


/* =========================================================
   PIPE SELECT — COLLAPSED STRENGTH MATERIAL SUMMARY
   ========================================================= */

.pipe-select-strength-profile > summary {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pipe-select-strength-summary__title {
  min-width: 0;
}

.pipe-select-strength-summary__material {
  margin-left: auto;
  padding: 4px 9px;
  border: 1px solid rgba(64, 145, 255, 0.20);
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  opacity: 0.72;
}

.pipe-select-strength-profile[open]
  .pipe-select-strength-summary__material {
  opacity: 0.50;
}


@media (max-width: 560px) {

  .pipe-select-strength-summary__material {
    max-width: 48%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

}


/* =========================================================
   PIPE SELECT — LOCAL LOSS BUILDER V1
   ========================================================= */


.pipe-select-local-loss-builder {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding: 15px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.016);
}


.pipe-select-local-loss-builder__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}


.pipe-select-local-loss-builder__head strong {
  display: block;
  font-size: 0.80rem;
}


.pipe-select-local-loss-builder__head span {
  display: block;
  margin-top: 4px;
  font-size: 0.67rem;
  opacity: 0.55;
}


.pipe-select-local-loss-mode {
  width: auto;
  min-width: 190px;
}


.pipe-select-local-loss-builder__area {
  margin-top: 14px;
}


.pipe-select-local-loss-empty {
  padding: 13px;
  border: 1px dashed rgba(148, 163, 184, 0.18);
  border-radius: 10px;
  font-size: 0.68rem;
  text-align: center;
  opacity: 0.55;
}


.pipe-select-local-loss-rows {
  display: grid;
  gap: 8px;
}


.pipe-select-local-loss-row {
  display: grid;
  grid-template-columns:
    minmax(150px, 1.7fr)
    minmax(82px, 0.65fr)
    minmax(90px, 0.75fr)
    minmax(92px, 0.70fr)
    34px;
  gap: 8px;
  align-items: end;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.13);
  border-radius: 10px;
  background: rgba(9, 19, 31, 0.34);
}


.pipe-select-local-loss-row label > span,
.pipe-select-local-loss-subtotal-wrap > span {
  display: block;
  margin-bottom: 5px;
  font-size: 0.61rem;
  opacity: 0.48;
}


.pipe-select-local-loss-row input {
  width: 100%;
}


.pipe-select-local-loss-subtotal-wrap strong {
  display: flex;
  align-items: center;
  min-height: 38px;
  font-size: 0.75rem;
}


.pipe-select-local-loss-remove {
  width: 34px;
  height: 38px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 9px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 1rem;
  opacity: 0.55;
}


.pipe-select-local-loss-remove:hover {
  opacity: 1;
  border-color: rgba(255, 110, 110, 0.45);
}


.pipe-select-local-loss-add {
  margin-top: 10px;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid rgba(64, 145, 255, 0.24);
  border-radius: 9px;
  background: rgba(64, 145, 255, 0.05);
  color: inherit;
  cursor: pointer;
  font-size: 0.69rem;
  font-weight: 600;
}


.pipe-select-local-loss-add:hover {
  background: rgba(64, 145, 255, 0.09);
}


#local-loss-k[readonly] {
  opacity: 0.72;
  cursor: default;
}


@media (max-width: 820px) {

  .pipe-select-local-loss-row {
    grid-template-columns:
      minmax(140px, 1fr)
      90px
      90px;
  }


  .pipe-select-local-loss-subtotal-wrap {
    grid-column: 1 / 3;
  }

}


@media (max-width: 560px) {

  .pipe-select-local-loss-builder__head {
    align-items: stretch;
    flex-direction: column;
  }


  .pipe-select-local-loss-mode {
    width: 100%;
  }


  .pipe-select-local-loss-row {
    grid-template-columns:
      1fr
      1fr;
  }


  .pipe-select-local-loss-row label:first-child {
    grid-column: 1 / -1;
  }

}


/* ==========================================================
   STE_PIPE_SELECT_COMMERCIAL_V7
   ========================================================== */

.pipe-commercial-shell {
  max-width: 1440px;

  margin:
    0 auto 34px;

  padding:
    28px 28px 8px;
}


.pipe-commercial-shell__head {
  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 24px;

  margin-bottom: 24px;
}


.pipe-commercial-kicker {
  display: block;

  margin-bottom: 8px;

  color: #62b8ff;

  font-size: 0.75rem;

  font-weight: 800;

  letter-spacing: 0.09em;

  text-transform: uppercase;
}


.pipe-commercial-shell__head h2 {
  margin:
    0 0 9px;

  color: #f3f7ff;

  font-size:
    clamp(1.7rem, 3vw, 2.45rem);

  letter-spacing: -0.035em;
}


.pipe-commercial-shell__head p {
  max-width: 780px;

  margin: 0;

  color:
    rgba(225, 235, 250, 0.68);

  line-height: 1.6;
}


/* 4 CAPABILITIES */

.pipe-commerce-grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 14px;
}


.pipe-commerce-card {
  display: flex;

  flex-direction: column;

  min-height: 360px;

  padding: 20px;

  border:
    1px solid
    rgba(112, 145, 180, 0.20);

  border-radius: 18px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.032),
      rgba(255, 255, 255, 0.010)
    );
}


.pipe-commerce-card--active {
  border-color:
    rgba(45, 144, 255, 0.52);

  background:
    linear-gradient(
      145deg,
      rgba(29, 120, 225, 0.10),
      rgba(255, 255, 255, 0.012)
    );

  box-shadow:
    inset 0 0 0 1px
    rgba(33, 133, 245, 0.06);
}


.pipe-commerce-card__top {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  margin-bottom: 20px;
}


.pipe-commerce-card__number {
  color:
    rgba(214, 228, 246, 0.45);

  font-size: 0.72rem;

  font-weight: 800;

  letter-spacing: 0.08em;
}


.pipe-commerce-status {
  padding:
    6px 9px;

  border:
    1px solid
    rgba(255, 188, 75, 0.20);

  border-radius: 999px;

  color:
    rgba(240, 220, 177, 0.86);

  background:
    rgba(255, 185, 60, 0.08);

  font-size: 0.68rem;

  font-weight: 700;
}


.pipe-commerce-status--active {
  color: #7de8b8;

  border-color:
    rgba(28, 196, 132, 0.26);

  background:
    rgba(28, 196, 132, 0.08);
}


.pipe-commerce-card__mark {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  align-self: flex-start;

  min-width: 46px;

  min-height: 42px;

  padding:
    0 10px;

  margin-bottom: 17px;

  border:
    1px solid
    rgba(71, 157, 249, 0.34);

  border-radius: 11px;

  color: #83c7ff;

  background:
    rgba(40, 126, 218, 0.09);

  font-size: 0.72rem;

  font-weight: 800;

  letter-spacing: 0.045em;
}


.pipe-commerce-card h3 {
  margin:
    0 0 10px;

  color: #f3f7ff;

  font-size: 1.15rem;

  line-height: 1.2;

  letter-spacing: -0.025em;
}


.pipe-commerce-card > p {
  margin: 0;

  color:
    rgba(224, 234, 248, 0.67);

  font-size: 0.85rem;

  line-height: 1.58;
}


.pipe-commerce-card__result {
  margin-top: 18px;

  padding-top: 15px;

  border-top:
    1px solid
    rgba(123, 153, 188, 0.12);
}


.pipe-commerce-card__result span {
  display: block;

  margin-bottom: 5px;

  color:
    rgba(202, 218, 239, 0.42);

  font-size: 0.67rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.06em;
}


.pipe-commerce-card__result strong {
  color:
    rgba(232, 240, 252, 0.84);

  font-size: 0.78rem;

  line-height: 1.4;
}


.pipe-commerce-card__bottom {
  display: flex;

  flex-direction: column;

  gap: 12px;

  margin-top: auto;

  padding-top: 22px;
}


.pipe-commerce-price small {
  display: block;

  margin-bottom: 3px;

  color:
    rgba(205, 220, 240, 0.46);

  font-size: 0.67rem;
}


.pipe-commerce-price strong {
  color: #ffffff;

  font-size: 1.45rem;

  letter-spacing: -0.03em;
}


.pipe-commerce-action {
  width: 100%;

  min-height: 42px;

  padding:
    9px 12px;

  border:
    1px solid
    rgba(118, 147, 179, 0.18);

  border-radius: 10px;

  color:
    rgba(224, 233, 246, 0.48);

  background:
    rgba(255, 255, 255, 0.018);

  font-weight: 700;
}


.pipe-commerce-action--active {
  cursor: pointer;

  color: #ffffff;

  border-color:
    rgba(36, 135, 251, 0.65);

  background:
    linear-gradient(
      180deg,
      #278bff,
      #1670dc
    );
}


/* FULL BUNDLE */

.pipe-full-offer {
  display: grid;

  grid-template-columns:
    minmax(0, 1.5fr)
    minmax(260px, 0.8fr)
    minmax(220px, 0.65fr);

  align-items: center;

  gap: 28px;

  margin-top: 16px;

  padding: 24px;

  border:
    1px solid
    rgba(74, 161, 255, 0.34);

  border-radius: 18px;

  background:
    radial-gradient(
      circle at 86% 15%,
      rgba(32, 133, 239, 0.13),
      transparent 34%
    ),
    rgba(255, 255, 255, 0.018);
}


.pipe-full-offer__badge {
  display: inline-flex;

  margin-bottom: 10px;

  padding:
    6px 10px;

  border:
    1px solid
    rgba(63, 157, 255, 0.26);

  border-radius: 999px;

  color: #71bdff;

  background:
    rgba(38, 129, 228, 0.08);

  font-size: 0.68rem;

  font-weight: 800;

  letter-spacing: 0.07em;
}


.pipe-full-offer h3 {
  margin:
    0 0 7px;

  color: #ffffff;

  font-size: 1.35rem;
}


.pipe-full-offer p {
  margin: 0;

  color:
    rgba(221, 233, 249, 0.65);

  font-size: 0.83rem;

  line-height: 1.5;
}


.pipe-full-offer__economy {
  display: flex;

  flex-wrap: wrap;

  align-items: flex-end;

  gap:
    12px 22px;
}


.pipe-full-offer__economy div {
  display: flex;

  flex-direction: column;

  gap: 3px;
}


.pipe-full-offer__economy small {
  color:
    rgba(205, 220, 240, 0.46);
}


.pipe-full-offer__economy s {
  color:
    rgba(222, 232, 245, 0.52);

  font-size: 1rem;
}


.pipe-full-offer__economy strong {
  color: #ffffff;

  font-size: 1.65rem;

  letter-spacing: -0.035em;
}


.pipe-full-offer__saving {
  flex-basis: 100%;

  color: #75e3b2;

  font-size: 0.79rem;

  font-weight: 800;
}


.pipe-full-offer__action {
  display: flex;

  flex-direction: column;

  gap: 7px;
}


.pipe-full-offer__action button {
  min-height: 44px;

  border:
    1px solid
    rgba(115, 146, 180, 0.18);

  border-radius: 10px;

  color:
    rgba(228, 237, 249, 0.48);

  background:
    rgba(255, 255, 255, 0.018);

  font-weight: 700;
}


.pipe-full-offer__action small {
  color:
    rgba(198, 214, 235, 0.40);

  font-size: 0.67rem;

  line-height: 1.4;
}


/* NOTE */

.pipe-commercial-note {
  display: flex;

  align-items: flex-start;

  gap: 10px;

  margin:
    15px 0 0;

  padding:
    12px 14px;

  border:
    1px solid
    rgba(94, 143, 197, 0.14);

  border-radius: 12px;

  background:
    rgba(255, 255, 255, 0.012);
}


.pipe-commercial-note span {
  color: #64b7ff;

  font-weight: 800;
}


.pipe-commercial-note p {
  margin: 0;

  color:
    rgba(214, 227, 244, 0.58);

  font-size: 0.76rem;

  line-height: 1.5;
}


/* RESPONSIVE */

@media (max-width: 1180px) {

  .pipe-commerce-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .pipe-full-offer {
    grid-template-columns:
      1fr 1fr;
  }

  .pipe-full-offer__action {
    grid-column:
      1 / -1;
  }

}


@media (max-width: 720px) {

  .pipe-commercial-shell {
    padding:
      20px 14px 6px;
  }

  .pipe-commerce-grid {
    grid-template-columns: 1fr;
  }

  .pipe-full-offer {
    grid-template-columns: 1fr;
  }

  .pipe-full-offer__action {
    grid-column: auto;
  }

}


/* ==========================================================
   STE_PIPE_MAX_PRESSURE_V8
   ========================================================== */

.ste-maxp-section {
  padding-top: 34px;
  padding-bottom: 24px;
}

.ste-maxp-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 26px;
  margin-bottom: 18px;
}

.ste-maxp-heading h2 {
  margin: 5px 0 10px;
  font-size: clamp(1.8rem, 3vw, 2.65rem);
  letter-spacing: -0.035em;
}

.ste-maxp-heading p {
  max-width: 790px;
  margin: 0;
  line-height: 1.65;
  opacity: 0.68;
}

.ste-maxp-access {
  flex: 0 0 auto;
  padding: 8px 12px;
  border:
    1px solid
    rgba(255, 187, 74, 0.22);
  border-radius: 999px;
  background:
    rgba(255, 184, 66, 0.08);
  font-size: 0.72rem;
  font-weight: 800;
}

.ste-maxp-access--ok {
  color: #7fe8b8;
  border-color:
    rgba(25, 194, 130, 0.28);
  background:
    rgba(25, 194, 130, 0.08);
}

.ste-maxp-scope {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}

.ste-maxp-scope strong,
.ste-maxp-scope span {
  min-height: 31px;
  padding: 6px 10px;
  border:
    1px solid
    rgba(105, 150, 197, 0.18);
  border-radius: 999px;
  font-size: 0.72rem;
}

.ste-maxp-scope strong {
  color: #6ebcff;
}

.ste-maxp-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1.25fr)
    minmax(360px, 0.75fr);
  gap: 18px;
}

.ste-maxp-panel {
  padding: 24px;
  border:
    1px solid
    rgba(105, 145, 185, 0.20);
  border-radius: 20px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.032),
      rgba(255, 255, 255, 0.010)
    );
}

.ste-maxp-panel__head {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 22px;
}

.ste-maxp-panel__head span {
  color: #63b7ff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ste-maxp-panel__head strong {
  font-size: 1.12rem;
}

.ste-maxp-form-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.ste-maxp-form-grid
.pipe-select-field
> span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ste-maxp-form-grid
.pipe-select-field
small {
  font-size: 0.68rem;
  font-weight: 400;
  opacity: 0.50;
}

.ste-maxp-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 46px;
  padding: 12px;
  border:
    1px solid
    rgba(255, 184, 66, 0.18);
  border-radius: 12px;
  background:
    rgba(255, 184, 66, 0.05);
  font-size: 0.76rem;
  line-height: 1.45;
}

.ste-maxp-check[hidden] {
  display: none;
}

.ste-maxp-check input {
  margin-top: 2px;
}

.ste-maxp-error {
  margin-top: 18px;
}

.ste-maxp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.ste-maxp-primary-result {
  padding: 22px;
  border:
    1px solid
    rgba(47, 143, 251, 0.28);
  border-radius: 16px;
  background:
    rgba(31, 123, 226, 0.07);
}

.ste-maxp-primary-result > span {
  display: block;
  margin-bottom: 6px;
  opacity: 0.55;
  font-size: 0.76rem;
}

.ste-maxp-primary-result > strong {
  display: block;
  color: #ffffff;
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 1;
  letter-spacing: -0.045em;
}

.ste-maxp-primary-result > small {
  display: block;
  margin-top: 10px;
  color: #79e4b4;
  font-weight: 700;
}

.ste-maxp-result-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.ste-maxp-result-grid > div {
  min-height: 90px;
  padding: 14px;
  border:
    1px solid
    rgba(112, 148, 184, 0.14);
  border-radius: 12px;
  background:
    rgba(255, 255, 255, 0.014);
}

.ste-maxp-result-grid span,
.ste-maxp-source span {
  display: block;
  margin-bottom: 6px;
  opacity: 0.46;
  font-size: 0.67rem;
  text-transform: uppercase;
  letter-spacing: 0.055em;
}

.ste-maxp-result-grid strong {
  font-size: 0.78rem;
  line-height: 1.45;
}

.ste-maxp-source {
  margin-top: 12px;
  padding: 14px;
  border:
    1px solid
    rgba(112, 148, 184, 0.14);
  border-radius: 12px;
}

.ste-maxp-source strong {
  font-size: 0.75rem;
  line-height: 1.5;
}

.ste-maxp-result-note {
  margin: 14px 0 0;
  font-size: 0.72rem;
  line-height: 1.55;
  opacity: 0.50;
}

[data-maxp-access]:disabled {
  cursor: not-allowed;
}

@media (max-width: 1000px) {

  .ste-maxp-layout {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 720px) {

  .ste-maxp-heading {
    flex-direction: column;
  }

  .ste-maxp-form-grid,
  .ste-maxp-result-grid {
    grid-template-columns: 1fr;
  }

  .ste-maxp-panel {
    padding: 18px;
  }

}


/* ==========================================================
   STE_PIPE_EXISTING_CHECK_V9
   ========================================================== */

.ste-check-section {
  padding-top: 34px;
  padding-bottom: 24px;
}

.ste-check-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 26px;
  margin-bottom: 18px;
}

.ste-check-heading h2 {
  margin: 5px 0 10px;
  font-size: clamp(1.8rem, 3vw, 2.65rem);
  letter-spacing: -0.035em;
}

.ste-check-heading p {
  max-width: 790px;
  margin: 0;
  line-height: 1.65;
  opacity: 0.68;
}

.ste-check-access {
  flex: 0 0 auto;
  padding: 8px 12px;
  border:
    1px solid rgba(255, 187, 74, 0.22);
  border-radius: 999px;
  background:
    rgba(255, 184, 66, 0.08);
  font-size: 0.72rem;
  font-weight: 800;
}

.ste-check-access--ok {
  color: #7fe8b8;
  border-color:
    rgba(25, 194, 130, 0.28);
  background:
    rgba(25, 194, 130, 0.08);
}

.ste-check-scope {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}

.ste-check-scope strong,
.ste-check-scope span {
  min-height: 31px;
  padding: 6px 10px;
  border:
    1px solid rgba(105, 150, 197, 0.18);
  border-radius: 999px;
  font-size: 0.72rem;
}

.ste-check-scope strong {
  color: #6ebcff;
}

.ste-check-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1.25fr)
    minmax(360px, 0.75fr);
  gap: 18px;
}

.ste-check-panel {
  padding: 24px;
  border:
    1px solid rgba(105, 145, 185, 0.20);
  border-radius: 20px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.032),
      rgba(255, 255, 255, 0.010)
    );
}

.ste-check-panel__head {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 22px;
}

.ste-check-panel__head span {
  color: #63b7ff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ste-check-panel__head strong {
  font-size: 1.12rem;
}

.ste-check-form-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.ste-check-form-grid
.pipe-select-field
> span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ste-check-form-grid
.pipe-select-field
small {
  font-size: 0.68rem;
  font-weight: 400;
  opacity: 0.50;
}

.ste-check-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 46px;
  padding: 12px;
  border:
    1px solid rgba(255, 184, 66, 0.18);
  border-radius: 12px;
  background:
    rgba(255, 184, 66, 0.05);
  font-size: 0.76rem;
  line-height: 1.45;
}

.ste-check-checkbox[hidden] {
  display: none;
}

.ste-check-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.ste-check-primary-result {
  padding: 22px;
  border:
    1px solid rgba(47, 143, 251, 0.28);
  border-radius: 16px;
  background:
    rgba(31, 123, 226, 0.07);
}

.ste-check-primary-result > span {
  display: block;
  margin-bottom: 6px;
  opacity: 0.55;
  font-size: 0.76rem;
}

.ste-check-primary-result > strong {
  display: block;
  color: #ffffff;
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 1;
  letter-spacing: -0.045em;
}

.ste-check-primary-result > small {
  display: block;
  margin-top: 10px;
  opacity: 0.66;
  font-weight: 700;
}

.ste-check-primary-result
.ste-check-pass {
  color: #79e4b4;
}

.ste-check-primary-result
.ste-check-fail {
  color: #ff8a8a;
}

.ste-check-result-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.ste-check-result-grid > div {
  min-height: 90px;
  padding: 14px;
  border:
    1px solid rgba(112, 148, 184, 0.14);
  border-radius: 12px;
  background:
    rgba(255, 255, 255, 0.014);
}

.ste-check-result-grid
.ste-check-result-wide {
  grid-column: 1 / -1;
}

.ste-check-result-grid span,
.ste-check-source span {
  display: block;
  margin-bottom: 6px;
  opacity: 0.46;
  font-size: 0.67rem;
  text-transform: uppercase;
  letter-spacing: 0.055em;
}

.ste-check-result-grid strong {
  font-size: 0.78rem;
  line-height: 1.45;
}

.ste-check-source {
  margin-top: 12px;
  padding: 14px;
  border:
    1px solid rgba(112, 148, 184, 0.14);
  border-radius: 12px;
}

.ste-check-source strong {
  font-size: 0.75rem;
  line-height: 1.5;
}

.ste-check-note {
  margin: 14px 0 0;
  font-size: 0.72rem;
  line-height: 1.55;
  opacity: 0.50;
}


/*
 * Fix direct text fields in V8/V9.
 * Previously "Марка стали" could inherit browser white styling.
 */

.ste-maxp-form-grid
input[type="text"],
.ste-check-form-grid
input[type="text"] {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border:
    1px solid rgba(112, 148, 184, 0.22);
  border-radius: 12px;
  outline: none;
  color: #eef5ff;
  background:
    rgba(5, 18, 33, 0.54);
  font: inherit;
}

.ste-maxp-form-grid
input[type="text"]::placeholder,
.ste-check-form-grid
input[type="text"]::placeholder {
  color:
    rgba(214, 226, 241, 0.34);
}

[data-check-access]:disabled {
  cursor: not-allowed;
}


@media (max-width: 1000px) {

  .ste-check-layout {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 720px) {

  .ste-check-heading {
    flex-direction: column;
  }

  .ste-check-form-grid,
  .ste-check-result-grid {
    grid-template-columns: 1fr;
  }

  .ste-check-result-grid
  .ste-check-result-wide {
    grid-column: auto;
  }

  .ste-check-panel {
    padding: 18px;
  }

}


/* ==========================================================
   STE_PIPE_CAPACITY_V10
   ========================================================== */

.ste-capacity-section {
  padding-top: 34px;
  padding-bottom: 24px;
}

.ste-capacity-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 26px;
  margin-bottom: 18px;
}

.ste-capacity-heading h2 {
  margin: 5px 0 10px;
  font-size: clamp(1.8rem, 3vw, 2.65rem);
  letter-spacing: -0.035em;
}

.ste-capacity-heading p {
  max-width: 790px;
  margin: 0;
  line-height: 1.65;
  opacity: 0.68;
}

.ste-capacity-access {
  flex: 0 0 auto;
  padding: 8px 12px;
  border:
    1px solid rgba(255, 187, 74, 0.22);
  border-radius: 999px;
  background:
    rgba(255, 184, 66, 0.08);
  font-size: 0.72rem;
  font-weight: 800;
}

.ste-capacity-access--ok {
  color: #7fe8b8;
  border-color:
    rgba(25, 194, 130, 0.28);
  background:
    rgba(25, 194, 130, 0.08);
}

.ste-capacity-scope {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}

.ste-capacity-scope strong,
.ste-capacity-scope span {
  min-height: 31px;
  padding: 6px 10px;
  border:
    1px solid rgba(105, 150, 197, 0.18);
  border-radius: 999px;
  font-size: 0.72rem;
}

.ste-capacity-scope strong {
  color: #6ebcff;
}

.ste-capacity-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1.25fr)
    minmax(380px, 0.75fr);
  gap: 18px;
}

.ste-capacity-panel {
  padding: 24px;
  border:
    1px solid rgba(105, 145, 185, 0.20);
  border-radius: 20px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.032),
      rgba(255, 255, 255, 0.010)
    );
}

.ste-capacity-panel__head {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 22px;
}

.ste-capacity-panel__head span {
  color: #63b7ff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ste-capacity-panel__head strong {
  font-size: 1.12rem;
}

.ste-capacity-form-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.ste-capacity-form-grid
.pipe-select-field
> span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ste-capacity-form-grid
.pipe-select-field
small {
  font-size: 0.68rem;
  font-weight: 400;
  opacity: 0.50;
}

.ste-capacity-form-grid
input:not([type="checkbox"]) {
  color: #eef5ff;
}

.ste-capacity-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.ste-capacity-primary-result {
  padding: 22px;
  border:
    1px solid rgba(47, 143, 251, 0.28);
  border-radius: 16px;
  background:
    rgba(31, 123, 226, 0.07);
}

.ste-capacity-primary-result > span {
  display: block;
  margin-bottom: 6px;
  opacity: 0.55;
  font-size: 0.76rem;
}

.ste-capacity-primary-result > strong {
  display: block;
  color: #ffffff;
  font-size: clamp(1.75rem, 3.3vw, 2.65rem);
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.ste-capacity-primary-result > small {
  display: block;
  margin-top: 10px;
  color: #79e4b4;
  font-weight: 700;
}

.ste-capacity-result-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.ste-capacity-result-grid > div {
  min-height: 86px;
  padding: 14px;
  border:
    1px solid rgba(112, 148, 184, 0.14);
  border-radius: 12px;
  background:
    rgba(255, 255, 255, 0.014);
}

.ste-capacity-result-grid
.ste-capacity-result-wide {
  grid-column: 1 / -1;
}

.ste-capacity-result-grid span {
  display: block;
  margin-bottom: 6px;
  opacity: 0.46;
  font-size: 0.67rem;
  text-transform: uppercase;
  letter-spacing: 0.055em;
}

.ste-capacity-result-grid strong {
  font-size: 0.79rem;
  line-height: 1.45;
}

.ste-capacity-model-note {
  margin-top: 14px;
  padding: 15px;
  border:
    1px solid rgba(112, 148, 184, 0.14);
  border-radius: 12px;
  background:
    rgba(255, 255, 255, 0.012);
}

.ste-capacity-model-note strong {
  display: block;
  margin-bottom: 7px;
  color: #68b9ff;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ste-capacity-model-note p {
  margin: 0 0 8px;
  font-size: 0.72rem;
  line-height: 1.55;
  opacity: 0.52;
}

.ste-capacity-model-note p:last-child {
  margin-bottom: 0;
}

[data-capacity-access]:disabled {
  cursor: not-allowed;
}


@media (max-width: 1000px) {

  .ste-capacity-layout {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 720px) {

  .ste-capacity-heading {
    flex-direction: column;
  }

  .ste-capacity-form-grid,
  .ste-capacity-result-grid {
    grid-template-columns: 1fr;
  }

  .ste-capacity-result-grid
  .ste-capacity-result-wide {
    grid-column: auto;
  }

  .ste-capacity-panel {
    padding: 18px;
  }

}


/* ==========================================================
   STE_PIPE_CAPACITY_UI_V11B
   ========================================================== */


/*
 * Capacity fields that are direct <input> elements
 * rather than inputs inside .pipe-select-input-unit.
 */

.ste-capacity-form-grid
.pipe-select-field
> input:not([type="checkbox"]) {

  width: 100%;

  min-height: 52px;

  box-sizing: border-box;

  padding:
    0 15px;

  border:
    1px solid
    rgba(104, 145, 187, 0.24);

  border-radius:
    13px;

  outline:
    none;

  color:
    #eef5ff;

  background:
    rgba(6, 19, 35, 0.76);

  font:
    inherit;

  transition:
    border-color 140ms ease,
    box-shadow 140ms ease,
    background 140ms ease;

}


.ste-capacity-form-grid
.pipe-select-field
> input:not([type="checkbox"]):focus {

  border-color:
    rgba(47, 144, 255, 0.72);

  box-shadow:
    0 0 0 3px
    rgba(38, 132, 244, 0.08);

  background:
    rgba(7, 22, 40, 0.92);

}


.ste-capacity-form-grid
input::placeholder {

  color:
    rgba(210, 224, 242, 0.35);

}


/*
 * Chrome / Safari autofill dark-theme override.
 */

.ste-capacity-section
input:-webkit-autofill,

.ste-capacity-section
input:-webkit-autofill:hover,

.ste-capacity-section
input:-webkit-autofill:focus,

.ste-capacity-section
input:-webkit-autofill:active {

  -webkit-text-fill-color:
    #eef5ff !important;

  caret-color:
    #eef5ff !important;

  -webkit-box-shadow:
    0 0 0 1000px
    rgb(7, 20, 37)
    inset !important;

  box-shadow:
    0 0 0 1000px
    rgb(7, 20, 37)
    inset !important;

  border-color:
    rgba(104, 145, 187, 0.24)
    !important;

}


/* ADVANCED PARAMETERS */

.ste-capacity-advanced {

  grid-column:
    1 / -1;

  margin-top:
    2px;

  border:
    1px solid
    rgba(81, 139, 203, 0.22);

  border-radius:
    15px;

  background:
    rgba(7, 20, 37, 0.42);

  overflow:
    hidden;

}


.ste-capacity-advanced > summary {

  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items:
    center;

  gap:
    20px;

  min-height:
    66px;

  padding:
    13px 17px;

  cursor:
    pointer;

  list-style:
    none;

  user-select:
    none;

}


.ste-capacity-advanced > summary::-webkit-details-marker {

  display:
    none;

}


.ste-capacity-advanced > summary::after {

  content:
    "▾";

  grid-column:
    3;

  color:
    #68b9ff;

  font-size:
    17px;

  transition:
    transform 150ms ease;

}


.ste-capacity-advanced[open]
> summary::after {

  transform:
    rotate(180deg);

}


.ste-capacity-advanced__title {

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;

}


.ste-capacity-advanced__title strong {

  color:
    #edf5ff;

  font-size:
    0.86rem;

}


.ste-capacity-advanced__title span {

  color:
    rgba(205, 221, 241, 0.48);

  font-size:
    0.68rem;

  line-height:
    1.4;

}


.ste-capacity-advanced__values {

  padding:
    7px 10px;

  border:
    1px solid
    rgba(79, 153, 236, 0.18);

  border-radius:
    9px;

  color:
    #84c6ff;

  background:
    rgba(34, 121, 217, 0.06);

  font-size:
    0.70rem;

  font-weight:
    700;

  white-space:
    nowrap;

}


.ste-capacity-advanced__grid {

  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    16px;

  padding:
    18px 17px 17px;

  border-top:
    1px solid
    rgba(86, 131, 183, 0.14);

}


@media (max-width: 850px) {

  .ste-capacity-advanced
  > summary {

    grid-template-columns:
      1fr auto;

  }


  .ste-capacity-advanced__values {

    grid-column:
      1 / -1;

    justify-self:
      start;

    white-space:
      normal;

  }


  .ste-capacity-advanced
  > summary::after {

    grid-column:
      2;

    grid-row:
      1;

  }


  .ste-capacity-advanced__grid {

    grid-template-columns:
      1fr;

  }

}


/* ==========================================================
   STE_PIPE_CAPABILITY_ROUTER_V12B
   ========================================================== */


/*
 * Existing calculation sections remain in the DOM.
 */

.ste-pipe-capability-hidden {

  display:
    none !important;

}


.pipe-select-workspace,
#pipe-existing-check,
#pipe-max-pressure,
#pipe-capacity {

  scroll-margin-top:
    88px;

}


/* ACTIVE / SELECTED CARD */

.pipe-commerce-card--selected {

  position:
    relative;

  border-color:
    rgba(42, 145, 255, 0.90)
    !important;

  background:
    linear-gradient(
      145deg,
      rgba(29, 123, 230, 0.16),
      rgba(255, 255, 255, 0.016)
    )
    !important;

  box-shadow:
    0 0 0 1px
    rgba(42, 139, 250, 0.10),
    0 18px 45px
    rgba(3, 13, 28, 0.22);

}


.pipe-commerce-card--selected::after {

  content:
    "ВЫБРАН";

  position:
    absolute;

  top:
    17px;

  left:
    50%;

  transform:
    translateX(-50%);

  padding:
    5px 8px;

  border:
    1px solid
    rgba(76, 163, 255, 0.26);

  border-radius:
    999px;

  color:
    #79c2ff;

  background:
    rgba(31, 120, 220, 0.11);

  font-size:
    0.59rem;

  font-weight:
    800;

  letter-spacing:
    0.075em;

  pointer-events:
    none;

}


.pipe-commerce-card[
  aria-disabled="false"
] {

  cursor:
    pointer;

}


/* LOCKED CARD */

.pipe-commerce-card--router-locked {

  cursor:
    default;

}


.pipe-commerce-card--router-locked
.pipe-commerce-card__mark,

.pipe-commerce-card--router-locked
h3,

.pipe-commerce-card--router-locked
> p,

.pipe-commerce-card--router-locked
.pipe-commerce-card__result {

  opacity:
    0.66;

}


.pipe-commerce-card {

  transition:
    border-color 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease;

}


@media (max-width: 720px) {

  .pipe-commerce-card--selected::after {

    left:
      auto;

    right:
      16px;

    transform:
      none;

  }

}


/* ==========================================================
   STE_PIPE_SELECTION_UI_V13B
   ========================================================== */


/*
 * Old parameter block remains in DOM for calculation output,
 * but is never presented as a separate page section.
 */

.ste-selection-legacy-params-hidden {

  display:
    none !important;

}


/*
 * Main Capability 01 result only appears after success.
 */

.ste-selection-main-result-hidden {

  display:
    none !important;

}


/*
 * Old internal step "03" is not the commercial
 * Capability 03 anymore.
 */

.ste-selection-old-step-hidden {

  display:
    none !important;

}


#ste-selection-compact-details {

  margin:
    0 0 18px;

  border:
    1px solid
    rgba(86, 139, 197, 0.20);

  border-radius:
    15px;

  background:
    rgba(7, 20, 37, 0.40);

  overflow:
    hidden;

}


#ste-selection-compact-details
> summary {

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  gap:
    18px;

  min-height:
    66px;

  padding:
    13px 17px;

  list-style:
    none;

  cursor:
    pointer;

  user-select:
    none;

}


#ste-selection-compact-details
> summary::-webkit-details-marker {

  display:
    none;

}


#ste-selection-compact-details
> summary > div {

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;

}


#ste-selection-compact-details
> summary strong {

  color:
    #eef6ff;

  font-size:
    0.87rem;

}


#ste-selection-compact-details
> summary span {

  color:
    rgba(203, 220, 240, 0.48);

  font-size:
    0.68rem;

}


.ste-selection-compact-details__hint {

  flex:
    0 0 auto;

  padding:
    6px 9px;

  border:
    1px solid
    rgba(69, 148, 236, 0.22);

  border-radius:
    9px;

  color:
    #79c1ff
    !important;

  background:
    rgba(34, 119, 216, 0.07);

  font-weight:
    750;

}


.ste-selection-compact-details__grid {

  display:
    grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap:
    10px;

  padding:
    0 17px 17px;

  border-top:
    1px solid
    rgba(86, 132, 184, 0.13);

}


.ste-selection-compact-details__grid
article {

  min-width:
    0;

  padding:
    13px;

  border:
    1px solid
    rgba(102, 145, 190, 0.13);

  border-radius:
    11px;

  background:
    rgba(255, 255, 255, 0.012);

}


.ste-selection-compact-details__grid
article > span {

  display:
    block;

  min-height:
    32px;

  margin-bottom:
    7px;

  color:
    rgba(202, 217, 237, 0.51);

  font-size:
    0.67rem;

  line-height:
    1.4;

}


.ste-selection-compact-details__grid
article > strong {

  display:
    block;

  color:
    #eef5ff;

  font-size:
    0.93rem;

}


.ste-selection-compact-details__grid
article > small {

  display:
    block;

  margin-top:
    3px;

  color:
    rgba(201, 218, 238, 0.44);

  font-size:
    0.63rem;

}


@media (max-width: 950px) {

  .ste-selection-compact-details__grid {

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

  }

}


@media (max-width: 580px) {

  .ste-selection-compact-details__grid {

    grid-template-columns:
      1fr;

  }


  #ste-selection-compact-details
  > summary {

    align-items:
      flex-start;

  }

}


/* ==========================================================
   STE_PIPE_BRAND_HEADER_V14D
   ========================================================== */

.ste-engineering-brand {

  display:
    inline-flex !important;

  align-items:
    center;

  gap:
    11px;

  min-width:
    0;

  color:
    #eef6ff;

  text-decoration:
    none;

  font-weight:
    800;

  letter-spacing:
    -0.02em;

  transition:
    opacity 150ms ease,
    transform 150ms ease;

}


.ste-engineering-brand:hover {

  opacity:
    0.92;

}


.ste-engineering-brand:active {

  transform:
    translateY(1px);

}


.ste-engineering-brand__logo {

  display:
    block;

  width:
    40px;

  height:
    40px;

  flex:
    0 0 40px;

  object-fit:
    contain;

}


.ste-engineering-brand__name {

  color:
    #f2f7ff;

  font-size:
    1.03rem;

  line-height:
    1;

  white-space:
    nowrap;

}


@media (max-width: 620px) {

  .ste-engineering-brand {

    gap:
      8px;

  }


  .ste-engineering-brand__logo {

    width:
      32px;

    height:
      32px;

    flex-basis:
      32px;

  }


  .ste-engineering-brand__name {

    font-size:
      0.91rem;

  }

}


@media (max-width: 430px) {

  .ste-engineering-brand__name {

    display:
      none;

  }

}


/* ==========================================================
   STE_PIPE_BRAND_HEADER_V14E

   Source PNG is a complete horizontal SimTechEnergy logo,
   not a square icon.
   ========================================================== */

.ste-engineering-brand {

  gap:
    0;

}


.ste-engineering-brand__logo {

  width:
    170px;

  height:
    42px;

  flex:
    0 0 170px;

  object-fit:
    contain;

  object-position:
    left center;

}


/*
 * The PNG already contains the SimTechEnergy identity.
 * Do not duplicate the wordmark beside it.
 */

.ste-engineering-brand__name {

  display:
    none !important;

}


@media (max-width: 620px) {

  .ste-engineering-brand__logo {

    width:
      145px;

    height:
      36px;

    flex-basis:
      145px;

  }

}


@media (max-width: 430px) {

  .ste-engineering-brand__logo {

    width:
      125px;

    height:
      32px;

    flex-basis:
      125px;

  }

}


/* ==========================================================
   STE_PIPE_BRAND_LOGO_SIZE_V15B

   Slightly stronger brand presence.
   Cropped horizontal logo asset.
   ========================================================== */

.ste-engineering-brand__logo {

  width:
    190px;

  height:
    50px;

  flex:
    0 0 190px;

}


/* Tablet / compact header */

@media (max-width: 620px) {

  .ste-engineering-brand__logo {

    width:
      155px;

    height:
      42px;

    flex-basis:
      155px;

  }

}


/* Small mobile */

@media (max-width: 430px) {

  .ste-engineering-brand__logo {

    width:
      135px;

    height:
      38px;

    flex-basis:
      135px;

  }

}



/* ==========================================================
   STE_PIPE_SELECT_COMMERCIAL_STABILITY_R3
   ========================================================== */


/*
 * Prevent async access / commerce renderers from exposing
 * intermediate labels such as:
 *
 *   "В разработке"
 *   "Купить за ..."
 *   "Доступ не открыт"
 *
 * visibility keeps the full layout height reserved,
 * therefore the page does not jump.
 */

#pipe-select-capabilities {
  visibility:
    hidden;

  opacity:
    0;

  transition:
    none !important;
}


#pipe-select-capabilities.ste-commerce-ready {
  visibility:
    visible;

  opacity:
    1;
}


/*
 * Badge layout is CSS-owned.
 * No JS absolute positioning.
 */

.pipe-commerce-card {
  position:
    relative;
}


.pipe-commerce-card
.pipe-commerce-card__top {
  position:
    relative;
}


.pipe-commerce-card
.pipe-commerce-status,

.pipe-commerce-card.ste-selected-card-layout
.pipe-commerce-status,

.pipe-commerce-card.ste-selected-dom-layout
.pipe-commerce-status {

  position:
    static !important;

  inset:
    auto !important;

  top:
    auto !important;

  right:
    auto !important;

  bottom:
    auto !important;

  left:
    auto !important;

  transform:
    none !important;

  margin:
    0 0 0 auto !important;

  max-width:
    100% !important;

  white-space:
    nowrap !important;
}


/*
 * Old UI_PARITY classes must not create
 * a second line or move the status.
 */

.pipe-commerce-card.ste-selected-card-layout
.pipe-commerce-card__top,

.pipe-commerce-card.ste-selected-dom-layout
.pipe-commerce-card__top {

  min-height:
    0 !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    space-between !important;

  flex-wrap:
    nowrap !important;
}


/*
 * The selected marker belongs to the card itself.
 */

.pipe-commerce-card--selected::after {

  top:
    17px !important;

  left:
    50% !important;

  right:
    auto !important;

  transform:
    translateX(-50%) !important;
}


@media (max-width: 720px) {

  .pipe-commerce-card--selected::after {

    left:
      50% !important;

    right:
      auto !important;

    transform:
      translateX(-50%) !important;

  }

}


/* ==========================================================
   STE_ENGINEERING_MODULE_CARD_HOVER_V1
   PIPE SELECT capability cards

   Hover is intentionally independent from selected state.
   Existing .pipe-commerce-card--selected remains authoritative.
   ========================================================== */

@media (hover: hover) and (pointer: fine) {

  .pipe-commerce-card {
    transition:
      transform 0.16s ease,
      border-color 0.16s ease,
      background 0.16s ease,
      box-shadow 0.16s ease;
  }

  .pipe-commerce-card:hover {
    transform:
      translateY(-3px);

    border-color:
      rgba(52, 153, 255, 0.72)
      !important;

    background:
      linear-gradient(
        145deg,
        rgba(28, 117, 219, 0.10),
        rgba(9, 24, 40, 0.96) 48%
      );

    box-shadow:
      0 14px 34px
      rgba(0, 91, 190, 0.13);
  }

  /*
   * Selected state remains visible while hovered.
   * Hover only strengthens interaction feedback.
   */
  .pipe-commerce-card--selected:hover {
    border-color:
      rgba(52, 153, 255, 0.92)
      !important;

    box-shadow:
      inset 0 0 0 1px
        rgba(35, 136, 255, 0.20),
      0 14px 34px
        rgba(0, 91, 190, 0.16);
  }

}


/* ==========================================================
   STE_SELECTED_VISUAL_NEUTRAL_V1
   Selected state remains functional.
   Permanent card highlight is removed.
   SELECTED badge (::after) is intentionally preserved.
   ========================================================== */

.pipe-commerce-card--selected:not(:hover) {
  border-color:
    rgba(91, 132, 166, 0.46)
    !important;

  background:
    rgba(9, 24, 40, 0.96)
    !important;

  box-shadow:
    none
    !important;

  transform:
    none
    !important;
}



/* ==========================================================
   STE_PIPE_ACCESS_VISUAL_NEUTRAL_V1

   --active = access entitlement, not visual selection.

   Accessible capability cards remain visually neutral at rest.
   Access/status/button semantics remain untouched.
   Blue card emphasis is reserved for pointer hover.
   ========================================================== */

.pipe-commerce-card--active:not(:hover) {
  border-color:
    rgba(91, 132, 166, 0.46)
    !important;

  background:
    rgba(9, 24, 40, 0.96)
    !important;

  box-shadow:
    none
    !important;

  transform:
    none
    !important;
}


/*
 * Card may simultaneously be accessible and selected.
 * Idle card surface still remains neutral.
 */
.pipe-commerce-card--active.pipe-commerce-card--selected:not(:hover) {
  border-color:
    rgba(91, 132, 166, 0.46)
    !important;

  background:
    rgba(9, 24, 40, 0.96)
    !important;

  box-shadow:
    none
    !important;

  transform:
    none
    !important;
}


@media (hover: hover) and (pointer: fine) {

  .pipe-commerce-card--active:hover,
  .pipe-commerce-card--active.pipe-commerce-card--selected:hover {
    transform:
      translateY(-3px);

    border-color:
      rgba(52, 153, 255, 0.92)
      !important;

    background:
      linear-gradient(
        145deg,
        rgba(28, 117, 219, 0.10),
        rgba(9, 24, 40, 0.96) 48%
      )
      !important;

    box-shadow:
      0 14px 34px
      rgba(0, 91, 190, 0.16);
  }

}



/* ==========================================================
   STE_PIPE_HEAT_LOSS_ALIGNMENT_V6
   PIPE SELECT -> common HEAT LOSS detail-page structure.
   ========================================================== */

.pipe-select-hero {
  padding: 48px 0 52px;

  border-bottom:
    1px solid rgba(100, 155, 210, 0.20);
}

.pipe-select-hero__grid {
  grid-template-columns:
    minmax(0, 1fr) 340px;

  gap: 54px;

  align-items: center;
}

.pipe-select-hero h1 {
  margin: 12px 0 18px;

  font-size:
    clamp(48px, 6vw, 72px);

  line-height: 1;

  letter-spacing: -0.04em;
}

.pipe-select-lead {
  max-width: 740px;

  color: #b9cad8;

  font-size: 17px;

  line-height: 1.65;
}

.pipe-select-meta {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: 24px;
}

.pipe-select-meta span {
  display: inline-flex;

  align-items: center;

  min-height: 30px;

  padding: 6px 11px;

  border:
    1px solid rgba(98, 161, 220, 0.28);

  border-radius: 999px;

  background:
    rgba(8, 29, 48, 0.72);

  color: #b9cad8;

  font-size: 12px;
}

.pipe-select-hero__full {
  min-width: 0;
}

.pipe-select-hero__full
.pipe-full-offer {
  width: 100% !important;

  min-width: 0 !important;

  margin: 0 !important;
}

.pipe-commercial-shell {
  padding-top: 58px !important;

  padding-bottom: 62px !important;
}

@media (max-width: 900px) {

  .pipe-select-hero__grid {
    grid-template-columns: 1fr;

    gap: 32px;
  }

  .pipe-select-hero__full {
    max-width: 520px;
  }

}

@media (max-width: 640px) {

  .pipe-select-hero {
    padding: 34px 0 40px;
  }

  .pipe-select-hero h1 {
    font-size:
      clamp(42px, 15vw, 58px);
  }

  .pipe-select-lead {
    font-size: 15px;
  }

}


/* ==========================================================
   STE_PIPE_VISUAL_POLISH_V7

   HEAT LOSS-style final visual treatment:
   - compact vertical FULL card
   - balanced HERO
   - neutral capability cards at rest
   - blue emphasis only on real pointer hover
   - tighter vertical rhythm
   ========================================================== */


/* ----------------------------------------------------------
   HERO BALANCE
   ---------------------------------------------------------- */

.pipe-select-hero {
  padding:
    42px 0 46px;
}


.pipe-select-hero__grid {
  grid-template-columns:
    minmax(0, 1fr)
    370px;

  gap: 64px;

  align-items: center;
}


.pipe-select-hero h1 {
  margin:
    11px 0 15px;

  font-size:
    clamp(46px, 5.2vw, 68px);
}


.pipe-select-lead {
  max-width: 720px;

  font-size: 16px;

  line-height: 1.6;
}


.pipe-select-meta {
  margin-top: 20px;
}


/* ----------------------------------------------------------
   FULL — CONVERT OLD HORIZONTAL COMPONENT TO
   COMPACT VERTICAL HERO CARD
   ---------------------------------------------------------- */

.pipe-select-hero__full
.pipe-full-offer {
  display: flex !important;

  flex-direction: column !important;

  grid-template-columns:
    none !important;

  align-items:
    stretch !important;

  gap: 0 !important;

  width: 100% !important;

  min-width: 0 !important;

  min-height: 0 !important;

  margin: 0 !important;

  padding:
    22px !important;

  border:
    1px solid
    rgba(74, 161, 255, 0.38)
    !important;

  border-radius:
    16px !important;

  background:
    radial-gradient(
      circle at 92% 8%,
      rgba(32, 133, 239, 0.12),
      transparent 38%
    ),
    rgba(8, 24, 40, 0.92)
    !important;

  box-shadow:
    0 16px 38px
    rgba(0, 0, 0, 0.16)
    !important;
}


/* FULL main text */

.pipe-select-hero__full
.pipe-full-offer__main {
  width: 100% !important;

  min-width: 0 !important;

  margin:
    0 0 18px !important;
}


.pipe-select-hero__full
.pipe-full-offer__badge {
  display:
    inline-flex !important;

  align-items:
    center !important;

  width:
    fit-content !important;

  margin:
    0 0 12px !important;

  padding:
    5px 9px !important;

  font-size:
    10px !important;

  line-height:
    1.1 !important;
}


.pipe-select-hero__full
.pipe-full-offer h3 {
  margin:
    0 0 7px !important;

  max-width:
    none !important;

  font-size:
    18px !important;

  line-height:
    1.25 !important;

  overflow-wrap:
    normal !important;

  word-break:
    normal !important;
}


.pipe-select-hero__full
.pipe-full-offer p {
  margin: 0 !important;

  max-width:
    none !important;

  font-size:
    12px !important;

  line-height:
    1.5 !important;

  overflow-wrap:
    normal !important;

  word-break:
    normal !important;
}


/* FULL economy */

.pipe-select-hero__full
.pipe-full-offer__economy {
  display:
    grid !important;

  grid-template-columns:
    1fr auto !important;

  align-items:
    end !important;

  gap:
    8px 18px !important;

  width:
    100% !important;

  min-width:
    0 !important;

  margin:
    0 0 18px !important;
}


.pipe-select-hero__full
.pipe-full-offer__economy div {
  min-width:
    0 !important;

  gap:
    2px !important;
}


.pipe-select-hero__full
.pipe-full-offer__economy small {
  font-size:
    11px !important;

  line-height:
    1.25 !important;
}


.pipe-select-hero__full
.pipe-full-offer__economy s {
  font-size:
    13px !important;

  line-height:
    1.2 !important;
}


.pipe-select-hero__full
.pipe-full-offer__economy strong {
  font-size:
    28px !important;

  line-height:
    1 !important;

  white-space:
    nowrap !important;
}


.pipe-select-hero__full
.pipe-full-offer__saving {
  grid-column:
    1 / -1 !important;

  flex-basis:
    auto !important;

  margin-top:
    2px !important;

  font-size:
    12px !important;

  line-height:
    1.3 !important;
}


/* FULL action */

.pipe-select-hero__full
.pipe-full-offer__action {
  display:
    flex !important;

  flex-direction:
    column !important;

  grid-column:
    auto !important;

  gap:
    7px !important;

  width:
    100% !important;

  min-width:
    0 !important;
}


.pipe-select-hero__full
.pipe-full-offer__action button {
  width:
    100% !important;

  min-width:
    0 !important;

  min-height:
    44px !important;

  padding:
    10px 14px !important;

  white-space:
    normal !important;

  line-height:
    1.25 !important;
}


.pipe-select-hero__full
.pipe-full-offer__action small {
  margin: 0 !important;

  font-size:
    10px !important;

  line-height:
    1.35 !important;
}


/* ----------------------------------------------------------
   CAPABILITIES — TIGHTER SECTION
   ---------------------------------------------------------- */

.pipe-commercial-shell {
  padding-top:
    44px !important;

  padding-bottom:
    48px !important;
}


.pipe-commercial-shell__head {
  margin-bottom:
    24px !important;
}


.pipe-commerce-grid {
  gap:
    12px !important;
}


/* ----------------------------------------------------------
   CAPABILITY CARDS
   Access/selection are logical states only.
   Idle appearance = base card appearance.
   ---------------------------------------------------------- */

.pipe-commerce-card,
.pipe-commerce-card--active,
.pipe-commerce-card--selected,
.pipe-commerce-card--active.pipe-commerce-card--selected {
  border-color:
    rgba(112, 145, 180, 0.20)
    !important;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.032),
      rgba(255, 255, 255, 0.010)
    )
    !important;

  box-shadow:
    none !important;

  transform:
    none !important;
}


/*
 * Desktop/mouse:
 * ONLY the card under the pointer receives blue emphasis.
 */
@media (hover: hover) and (pointer: fine) {

  .pipe-commerce-card:hover,
  .pipe-commerce-card--active:hover,
  .pipe-commerce-card--selected:hover,
  .pipe-commerce-card--active.pipe-commerce-card--selected:hover {
    transform:
      translateY(-3px)
      !important;

    border-color:
      rgba(52, 153, 255, 0.88)
      !important;

    background:
      linear-gradient(
        145deg,
        rgba(29, 120, 225, 0.11),
        rgba(255, 255, 255, 0.016)
      )
      !important;

    box-shadow:
      0 14px 30px
      rgba(11, 92, 183, 0.13),
      inset 0 0 0 1px
      rgba(42, 142, 250, 0.06)
      !important;
  }

}


/* ----------------------------------------------------------
   WORKSPACE RHYTHM
   ---------------------------------------------------------- */

.pipe-select-workspace {
  padding-top:
    42px;
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 1000px) {

  .pipe-select-hero__grid {
    grid-template-columns:
      minmax(0, 1fr)
      340px;

    gap: 38px;
  }

}


@media (max-width: 900px) {

  .pipe-select-hero__grid {
    grid-template-columns:
      1fr;

    gap: 30px;
  }


  .pipe-select-hero__full {
    width: 100%;

    max-width: 520px;
  }

}


@media (max-width: 640px) {

  .pipe-select-hero {
    padding:
      32px 0 38px;
  }


  .pipe-select-hero__full
  .pipe-full-offer {
    padding:
      19px !important;
  }


  .pipe-select-hero__full
  .pipe-full-offer__economy {
    grid-template-columns:
      1fr !important;
  }


  .pipe-select-hero__full
  .pipe-full-offer__saving {
    grid-column:
      auto !important;
  }


  .pipe-commercial-shell {
    padding-top:
      36px !important;

    padding-bottom:
      40px !important;
  }

}


/* ==========================================================
   STE_PIPE_VISUAL_FIX_V8

   Final PIPE SELECT visual correction.
   Intentionally stronger than late JS-injected R1 styles.
   No commerce/access/calculation behaviour is changed.
   ========================================================== */


/* ----------------------------------------------------------
   HERO / FULL
   Beat:
   .pipe-full-offer.ste-full-r1
   injected later by pipe-select.js
   ---------------------------------------------------------- */

.pipe-select-hero__full
.pipe-full-offer.ste-full-r1 {
  display: flex !important;

  flex-direction: column !important;

  grid-template-columns: none !important;

  align-items: stretch !important;

  justify-content: flex-start !important;

  column-gap: 0 !important;

  row-gap: 0 !important;

  width: 100% !important;

  min-width: 0 !important;

  max-width: none !important;

  min-height: 0 !important;

  padding: 22px !important;

  overflow: hidden !important;
}


.pipe-select-hero__full
.pipe-full-offer.ste-full-r1
.pipe-full-offer__main {
  width: 100% !important;

  min-width: 0 !important;

  max-width: none !important;

  margin: 0 0 17px !important;
}


.pipe-select-hero__full
.pipe-full-offer.ste-full-r1
.pipe-full-offer__main h3 {
  max-width: none !important;

  margin: 0 0 7px !important;

  font-size: 18px !important;

  line-height: 1.25 !important;

  white-space: normal !important;

  word-break: normal !important;

  overflow-wrap: normal !important;
}


.pipe-select-hero__full
.pipe-full-offer.ste-full-r1
.pipe-full-offer__main p {
  max-width: none !important;

  margin: 0 !important;

  font-size: 12px !important;

  line-height: 1.45 !important;

  white-space: normal !important;

  word-break: normal !important;
}


/* ----------------------------------------------------------
   ECONOMY
   Beat:
   .pipe-full-offer__economy.ste-economy-r1
   ---------------------------------------------------------- */

.pipe-select-hero__full
.pipe-full-offer.ste-full-r1
.pipe-full-offer__economy.ste-economy-r1 {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    auto !important;

  align-items: end !important;

  justify-content: stretch !important;

  justify-self: stretch !important;

  gap: 8px 14px !important;

  width: 100% !important;

  min-width: 0 !important;

  max-width: none !important;

  margin: 0 0 18px !important;
}


.pipe-select-hero__full
.pipe-full-offer.ste-full-r1
.pipe-full-offer__economy.ste-economy-r1
div {
  min-width: 0 !important;

  max-width: none !important;
}


.pipe-select-hero__full
.ste-full-old-label-r1,
.pipe-select-hero__full
.ste-full-old-price-r1,
.pipe-select-hero__full
.ste-full-current-label-r1,
.pipe-select-hero__full
.ste-full-current-price-r1,
.pipe-select-hero__full
.ste-full-saving-r1 {
  white-space: nowrap !important;
}


.pipe-select-hero__full
.ste-full-current-price-r1 {
  font-size: 28px !important;

  line-height: 1 !important;
}


.pipe-select-hero__full
.ste-full-saving-r1 {
  grid-column: 1 / -1 !important;

  margin-top: 1px !important;

  font-size: 12px !important;
}


/* ----------------------------------------------------------
   FULL CTA
   ---------------------------------------------------------- */

.pipe-select-hero__full
.pipe-full-offer.ste-full-r1
.pipe-full-offer__action.ste-full-action-r1 {
  display: flex !important;

  flex-direction: column !important;

  width: 100% !important;

  min-width: 0 !important;

  max-width: none !important;

  margin: 0 !important;

  gap: 7px !important;
}


.pipe-select-hero__full
.pipe-full-offer.ste-full-r1
.pipe-full-offer__action.ste-full-action-r1
.ste-full-button-r1 {
  width: 100% !important;

  min-width: 0 !important;

  max-width: none !important;

  min-height: 44px !important;

  padding: 10px 14px !important;

  font-size: 12px !important;

  line-height: 1.25 !important;

  white-space: normal !important;
}


.pipe-select-hero__full
.pipe-full-offer.ste-full-r1
.pipe-full-offer__action.ste-full-action-r1
small {
  margin: 0 !important;

  font-size: 10px !important;

  line-height: 1.35 !important;

  white-space: normal !important;
}


/* ----------------------------------------------------------
   CAPABILITY CARDS

   Access and selected states remain functional but do not
   create permanent blue surfaces.
   ---------------------------------------------------------- */

.pipe-commercial-shell
.pipe-commerce-card,
.pipe-commercial-shell
.pipe-commerce-card--active,
.pipe-commercial-shell
.pipe-commerce-card--selected,
.pipe-commercial-shell
.pipe-commerce-card--active.pipe-commerce-card--selected {
  border-color:
    rgba(112, 145, 180, 0.20)
    !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.032),
      rgba(255,255,255,0.010)
    )
    !important;

  box-shadow:
    none !important;

  transform:
    none !important;
}


@media (hover: hover) and (pointer: fine) {

  .pipe-commercial-shell
  .pipe-commerce-card:hover,

  .pipe-commercial-shell
  .pipe-commerce-card--active:hover,

  .pipe-commercial-shell
  .pipe-commerce-card--selected:hover,

  .pipe-commercial-shell
  .pipe-commerce-card--active.pipe-commerce-card--selected:hover {
    border-color:
      rgba(52,153,255,0.88)
      !important;

    background:
      linear-gradient(
        145deg,
        rgba(29,120,225,0.11),
        rgba(255,255,255,0.016)
      )
      !important;

    box-shadow:
      0 14px 30px
      rgba(11,92,183,0.13),
      inset 0 0 0 1px
      rgba(42,142,250,0.06)
      !important;

    transform:
      translateY(-3px)
      !important;
  }

}


/* ----------------------------------------------------------
   RESPONSIVE FULL
   ---------------------------------------------------------- */

@media (max-width: 900px) {

  .pipe-select-hero__full
  .pipe-full-offer.ste-full-r1 {
    max-width: 520px !important;
  }

}


@media (max-width: 640px) {

  .pipe-select-hero__full
  .pipe-full-offer.ste-full-r1 {
    padding: 19px !important;
  }


  .pipe-select-hero__full
  .pipe-full-offer.ste-full-r1
  .pipe-full-offer__economy.ste-economy-r1 {
    grid-template-columns:
      1fr !important;
  }


  .pipe-select-hero__full
  .ste-full-saving-r1 {
    grid-column:
      auto !important;
  }

}


/* ==========================================================
   STE_PIPE_STATIC_FIRST_PAINT_V9

   First-paint capability shell.
   JS replaces its inside with canonical shellHtml() markup.
   ========================================================== */

.pipe-commercial-shell--static-first-paint
.pipe-commerce-card {
  min-width: 0;
}


.pipe-commercial-shell--static-first-paint
.pipe-commerce-card__static-action {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 44px;

  margin-top: auto;
  padding: 10px 14px;

  border:
    1px solid
    rgba(45, 145, 255, 0.72);

  border-radius: 8px;

  background:
    linear-gradient(
      180deg,
      rgba(43, 143, 255, 0.96),
      rgba(26, 116, 224, 0.96)
    );

  color: #ffffff;

  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;

  text-align: center;

  pointer-events: none;
}


.pipe-commercial-shell--static-first-paint
.pipe-commerce-card__price {
  margin-top: auto;
}


.pipe-commercial-shell--static-first-paint {
  visibility: visible !important;
  opacity: 1 !important;
}