/* ==========================================================
   SIMTECHENERGY
   ENGINEERING TOOLS DETAIL STANDARD V1

   Presentation layer only.

   Contract:
   HERO -> FULL -> CAPABILITIES -> WORKSPACE

   No access logic.
   No commerce logic.
   No checkout logic.
   No calculation logic.
   No JavaScript.
   ========================================================== */


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

:is(
  .comp-hero,
  .gf-hero,
  .hl-hero,
  .hm-hero,
  .hy-hero,
  .ins-hero,
  .psv-hero,
  .pump-hero,
  .sep-hero,
  .vs-hero
) {
  padding-top: 42px;
  padding-bottom: 46px;
}


:is(
  .comp-hero__grid,
  .gf-hero__grid,
  .hl-hero__grid,
  .hm-hero__grid,
  .hy-hero__grid,
  .ins-hero__grid,
  .psv-hero__grid,
  .pump-hero__grid,
  .sep-hero__grid,
  .vs-hero__grid
) {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    370px;
  gap: 64px;
  align-items: center;
}


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

:is(
  .comp-full-card,
  .gf-full-card,
  .hl-full-card,
  .hm-full-card,
  .hy-full-card,
  .ins-full-card,
  .psv-full-card,
  .pump-full-card,
  .sep-full-card,
  .vs-full-card
) {
  width: 100%;
  min-width: 0;
}


/* ---------- CAPABILITIES ---------- */

:is(
  .comp-capabilities,
  .gf-capabilities,
  .hl-capabilities,
  .hm-capabilities,
  .hy-capabilities,
  .ins-capabilities,
  .psv-capabilities,
  .pump-capabilities,
  .sep-capabilities,
  .vs-capabilities
) {
  padding-top: 44px;
  padding-bottom: 48px;
}


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

:is(
  .comp-card,
  .gf-card,
  .hl-card,
  .hm-card,
  .hy-card,
  .ins-card,
  .psv-card,
  .pump-card,
  .sep-card,
  .vs-card
) {
  transform: none;
  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease;
}


/*
   Selected state remains semantic.
   At rest it must not imitate hover.
*/

:is(
  .comp-card,
  .gf-card,
  .hl-card,
  .hm-card,
  .hy-card,
  .ins-card,
  .psv-card,
  .pump-card,
  .sep-card,
  .vs-card
).is-selected:not(:hover),

:is(
  .comp-card,
  .gf-card,
  .hl-card,
  .hm-card,
  .hy-card,
  .ins-card,
  .psv-card,
  .pump-card,
  .sep-card,
  .vs-card
)[aria-selected="true"]:not(:hover) {
  transform: none;
}


/* ---------- DESKTOP HOVER ---------- */

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

  :is(
    .comp-card,
    .gf-card,
    .hl-card,
    .hm-card,
    .hy-card,
    .ins-card,
    .psv-card,
    .pump-card,
    .sep-card,
    .vs-card
  ):hover {
    transform: translateY(-3px);
    border-color:
      rgba(41, 145, 255, .72);
    box-shadow:
      0 14px 34px
      rgba(0, 103, 214, .14);
  }

}


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

:is(
  .comp-workspace,
  .gf-workspace,
  .hl-workspace,
  .hm-workspace,
  .hy-workspace,
  .ins-workspace,
  .psv-workspace,
  .pump-workspace,
  .sep-workspace,
  .vs-workspace
) {
  padding-top: 42px;
}


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

@media (max-width: 1000px) {

  :is(
    .comp-hero__grid,
    .gf-hero__grid,
    .hl-hero__grid,
    .hm-hero__grid,
    .hy-hero__grid,
    .ins-hero__grid,
    .psv-hero__grid,
    .pump-hero__grid,
    .sep-hero__grid,
    .vs-hero__grid
  ) {
    grid-template-columns:
      minmax(0, 1fr)
      330px;
    gap: 38px;
  }

}


@media (max-width: 900px) {

  :is(
    .comp-hero__grid,
    .gf-hero__grid,
    .hl-hero__grid,
    .hm-hero__grid,
    .hy-hero__grid,
    .ins-hero__grid,
    .psv-hero__grid,
    .pump-hero__grid,
    .sep-hero__grid,
    .vs-hero__grid
  ) {
    grid-template-columns: 1fr;
    gap: 32px;
  }


  :is(
    .comp-full-card,
    .gf-full-card,
    .hl-full-card,
    .hm-full-card,
    .hy-full-card,
    .ins-full-card,
    .psv-full-card,
    .pump-full-card,
    .sep-full-card,
    .vs-full-card
  ) {
    max-width: 520px;
  }

}


@media (max-width: 640px) {

  :is(
    .comp-hero,
    .gf-hero,
    .hl-hero,
    .hm-hero,
    .hy-hero,
    .ins-hero,
    .psv-hero,
    .pump-hero,
    .sep-hero,
    .vs-hero
  ) {
    padding-top: 34px;
    padding-bottom: 40px;
  }


  :is(
    .comp-capabilities,
    .gf-capabilities,
    .hl-capabilities,
    .hm-capabilities,
    .hy-capabilities,
    .ins-capabilities,
    .psv-capabilities,
    .pump-capabilities,
    .sep-capabilities,
    .vs-capabilities
  ) {
    padding-top: 36px;
    padding-bottom: 40px;
  }


  :is(
    .comp-workspace,
    .gf-workspace,
    .hl-workspace,
    .hm-workspace,
    .hy-workspace,
    .ins-workspace,
    .psv-workspace,
    .pump-workspace,
    .sep-workspace,
    .vs-workspace
  ) {
    padding-top: 34px;
  }

}

/* ==========================================================
   STE_COMPRESSOR_STANDARD_V1_STAGE1_1
   COMPRESSOR presentation alignment.
   Presentation only:
   - selected state remains functional but visually neutral
   - hover is the only card emphasis on hover-capable devices
   - compact FULL presentation
   - responsive/touch-safe behavior
   ========================================================== */


/* ---------- capability cards ---------- */

.comp-page .comp-card {
  border-color: rgba(91, 132, 166, 0.46);
  background: #0d1928;
  box-shadow: none;
}


/*
 * Selection is application state, not a visual highlight.
 * JS keeps .is-selected for workspace switching.
 */
.comp-page .comp-card.is-selected:not(:hover) {
  border-color: rgba(91, 132, 166, 0.46);
  background: #0d1928;
  box-shadow: none;
  transform: none;
}


/* Selected marker: independent from card highlighting. */
.comp-page .comp-card.is-selected .comp-card__top > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.comp-page .comp-card.is-selected .comp-card__top > span:first-child::after {
  content: "ВЫБРАН";
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 2px 7px;
  border: 1px solid rgba(35, 136, 255, 0.42);
  border-radius: 999px;
  color: #55b7ff;
  background: rgba(35, 136, 255, 0.10);
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.07em;
}


/* Hover only where a real hover pointer exists. */
@media (hover: hover) and (pointer: fine) {

  .comp-page .comp-card:hover,
  .comp-page .comp-card.is-selected:hover {
    border-color: #2388ff;
    background:
      linear-gradient(
        180deg,
        rgba(35, 136, 255, 0.075),
        rgba(13, 25, 40, 0.96)
      );
    box-shadow:
      0 14px 34px rgba(0, 0, 0, 0.20),
      0 0 0 1px rgba(35, 136, 255, 0.08);
    transform: translateY(-3px);
  }

}


/* ---------- FULL commerce ---------- */

.comp-page .comp-full-card {
  align-self: start;
  min-height: 0;
  padding: 22px 22px 20px;
  border-radius: 16px;
  background:
    linear-gradient(
      180deg,
      rgba(35, 136, 255, 0.035),
      rgba(13, 25, 40, 0.98)
    );
}

.comp-page .comp-full-label {
  padding-right: 62px;
  color: #91a8bc;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.comp-page .comp-full-label::after {
  content: "Все 4 расчётные возможности";
  display: block;
  margin-top: 7px;
  color: #f4f8fc;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0;
}

.comp-page .comp-full-price {
  margin-top: 15px;
  font-size: 30px;
  line-height: 1.05;
}

.comp-page .comp-full-old {
  margin-top: 6px;
}

.comp-page .comp-full-saving {
  margin: 11px 0 15px;
}

.comp-page .comp-full-card .comp-btn {
  width: 100%;
}


/* ---------- touch / responsive ---------- */

@media (hover: none), (pointer: coarse) {

  .comp-page .comp-card:hover,
  .comp-page .comp-card.is-selected,
  .comp-page .comp-card.is-selected:hover {
    border-color: rgba(91, 132, 166, 0.46);
    background: #0d1928;
    box-shadow: none;
    transform: none;
  }

}

@media (max-width: 760px) {

  .comp-page .comp-full-card {
    width: 100%;
    padding: 20px;
  }

  .comp-page .comp-full-price {
    font-size: 28px;
  }

}


/* ==========================================================
   STE_PUMP_STANDARD_V1_STAGE2_1

   PUMP visual-state polish.
   Presentation only.

   - selected capability remains functionally selected
   - selected card is neutral at rest
   - selection is indicated independently by ВЫБРАН
   - blue elevation is hover-only on hover-capable devices
   - FULL card follows Engineering Detail Standard V1
   ========================================================== */


/* ---------- PUMP capability cards ---------- */

.pump-page .pump-card {
  border-color: rgba(91, 132, 166, 0.46);
  background: rgba(9, 24, 40, 0.96);
  box-shadow: none;
  transform: none;
}


/*
   Local pump.css intentionally styles .is-selected.
   Override only the visual state; JS selection semantics remain untouched.
*/

.pump-page .pump-card.is-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;
}


/* Independent selected marker */

.pump-page .pump-card.is-selected .pump-card-number {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.pump-page .pump-card.is-selected .pump-card-number::after {
  content: "ВЫБРАН";
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 17px;
  padding: 2px 6px;

  border: 1px solid rgba(35, 136, 255, 0.72);
  border-radius: 999px;

  background: rgba(35, 136, 255, 0.13);

  color: #55aaff;

  font-size: 8px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
}


/* ---------- desktop hover ---------- */

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

  .pump-page .pump-card:hover,
  .pump-page .pump-card.is-selected:hover {
    border-color: rgba(41, 145, 255, 0.72) !important;

    background:
      linear-gradient(
        180deg,
        rgba(20, 54, 83, 0.98),
        rgba(9, 24, 40, 0.98)
      ) !important;

    box-shadow:
      0 14px 34px rgba(0, 78, 150, 0.18) !important;

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


/* ---------- PUMP FULL commerce ---------- */

.pump-page .pump-full-card {
  width: 100%;
  min-width: 0;

  padding: 22px 24px;
}

.pump-page .pump-full-label {
  margin-bottom: 5px;
}

.pump-page .pump-full-label::after {
  content: "Все 4 расчётные возможности";
  display: block;

  margin-top: 7px;

  color: rgba(238, 247, 255, 0.94);

  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}

.pump-page .pump-full-price {
  margin-top: 10px;
  margin-bottom: 3px;

  font-size: 30px;
  line-height: 1.05;
}

.pump-page .pump-full-old-price {
  margin-top: 0;
  margin-bottom: 8px;
}

.pump-page .pump-full-saving {
  margin-top: 0;
  margin-bottom: 14px;
}


/* ---------- touch ---------- */

@media (hover: none), (pointer: coarse) {

  .pump-page .pump-card:hover,
  .pump-page .pump-card.is-selected,
  .pump-page .pump-card.is-selected: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;
  }
}


/* ---------- responsive ---------- */

@media (max-width: 900px) {

  .pump-page .pump-full-card {
    max-width: 520px;
  }
}

@media (max-width: 640px) {

  .pump-page .pump-full-card {
    padding: 19px 18px;
  }

  .pump-page .pump-full-price {
    font-size: 28px;
  }
}


/* ==========================================================
   STE_PUMP_STANDARD_V1_STAGE2_2

   Selected badge DOM correction.

   Real PUMP DOM:
   .pump-card__top > span:first-child = capability number.

   Presentation only.
   ========================================================== */

.pump-page
.pump-card.is-selected
.pump-card__top
> span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.pump-page
.pump-card.is-selected
.pump-card__top
> span:first-child::after {
  content: "ВЫБРАН";

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 17px;
  padding: 2px 6px;

  border: 1px solid rgba(35, 136, 255, 0.72);
  border-radius: 999px;

  background: rgba(35, 136, 255, 0.13);

  color: #55aaff;

  font-size: 8px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
}


/* ==========================================================
   STE_STANDARD_V1_STAGE3_FAMILY

   Common presentation contract:
   GAS FLOW / HYDRATE MEOH / HYDRAULICS / INSULATION /
   PSV RELIEF / SEPARATOR / VALVE SELECT

   Presentation only.
   No access, commerce or calculation authority.
   ========================================================== */

:is(
  .gf-page,
  .hm-page,
  .hy-page,
  .ins-page,
  .psv-page,
  .sep-page,
  .vs-page
)
:is(
  .gf-card,
  .hm-card,
  .hy-card,
  .ins-card,
  .psv-card,
  .sep-card,
  .vs-card
) {
  border-color: rgba(91, 132, 166, 0.46);
  background: rgba(9, 24, 40, 0.96);
  box-shadow: none;
  transform: none;
}

:is(
  .gf-page .gf-card.is-selected,
  .hm-page .hm-card.is-selected,
  .hy-page .hy-card.is-selected,
  .ins-page .ins-card.is-selected,
  .psv-page .psv-card.is-selected,
  .sep-page .sep-card.is-selected,
  .vs-page .vs-card.is-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;
}


/* Independent selected-state badge */

:is(
  .gf-page .gf-card.is-selected .gf-card__top,
  .hm-page .hm-card.is-selected .hm-card__top,
  .hy-page .hy-card.is-selected .hy-card__top,
  .ins-page .ins-card.is-selected .ins-card__top,
  .psv-page .psv-card.is-selected .psv-card__top,
  .sep-page .sep-card.is-selected .sep-card__top,
  .vs-page .vs-card.is-selected .vs-card__top
)
> span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

:is(
  .gf-page .gf-card.is-selected .gf-card__top,
  .hm-page .hm-card.is-selected .hm-card__top,
  .hy-page .hy-card.is-selected .hy-card__top,
  .ins-page .ins-card.is-selected .ins-card__top,
  .psv-page .psv-card.is-selected .psv-card__top,
  .sep-page .sep-card.is-selected .sep-card__top,
  .vs-page .vs-card.is-selected .vs-card__top
)
> span:first-child::after {
  content: "ВЫБРАН";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 17px;
  padding: 2px 6px;
  border: 1px solid rgba(35, 136, 255, 0.72);
  border-radius: 999px;
  background: rgba(35, 136, 255, 0.13);
  color: #55aaff;
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
}


/* Compact FULL card */

:is(
  .gf-page .gf-full-card,
  .hm-page .hm-full-card,
  .hy-page .hy-full-card,
  .ins-page .ins-full-card,
  .psv-page .psv-full-card,
  .sep-page .sep-full-card,
  .vs-page .vs-full-card
) {
  padding: 22px 24px;
}

:is(
  .gf-page .gf-full-label,
  .hm-page .hm-full-label,
  .hy-page .hy-full-label,
  .ins-page .ins-full-label,
  .psv-page .psv-full-label,
  .sep-page .sep-full-label,
  .vs-page .vs-full-label
)::after {
  content: "Все 4 расчётные возможности";
  display: block;
  margin-top: 5px;
  color: #d9eaff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
}

:is(
  .gf-page .gf-full-price,
  .hm-page .hm-full-price,
  .hy-page .hy-full-price,
  .ins-page .ins-full-price,
  .psv-page .psv-full-price,
  .sep-page .sep-full-price,
  .vs-page .vs-full-price
) {
  font-size: 30px;
}


/* Desktop hover only */

@media (hover: hover) and (pointer: fine) {
  :is(
    .gf-page .gf-card:hover,
    .hm-page .hm-card:hover,
    .hy-page .hy-card:hover,
    .ins-page .ins-card:hover,
    .psv-page .psv-card:hover,
    .sep-page .sep-card:hover,
    .vs-page .vs-card:hover
  ) {
    border-color: rgba(41, 145, 255, 0.72) !important;
    background:
      linear-gradient(
        180deg,
        rgba(15, 42, 68, 0.98),
        rgba(9, 24, 40, 0.98)
      ) !important;
    box-shadow:
      0 14px 34px rgba(0, 78, 150, 0.18) !important;
    transform: translateY(-3px) !important;
  }
}


/* Touch devices: never leave a sticky selected/hover glow */

@media (hover: none), (pointer: coarse) {
  :is(
    .gf-page .gf-card,
    .hm-page .hm-card,
    .hy-page .hy-card,
    .ins-page .ins-card,
    .psv-page .psv-card,
    .sep-page .sep-card,
    .vs-page .vs-card
  ):hover,
  :is(
    .gf-page .gf-card.is-selected,
    .hm-page .hm-card.is-selected,
    .hy-page .hy-card.is-selected,
    .ins-page .ins-card.is-selected,
    .psv-page .psv-card.is-selected,
    .sep-page .sep-card.is-selected,
    .vs-page .vs-card.is-selected
  ) {
    border-color: rgba(91, 132, 166, 0.46) !important;
    background: rgba(9, 24, 40, 0.96) !important;
    box-shadow: none !important;
    transform: none !important;
  }
}