/**
 * Public Service Discount page.
 *
 * Provides the Jedi-Robe dark sci-fi presentation for the Blue Light,
 * healthcare, military, education and public service recognition page.
 *
 * This stylesheet is scoped to .ss-public-service-page so it does not alter
 * unrelated WooCommerce, Shoptimizer or Elementor components. Typography,
 * colours, borders and action sizing consume the shared jr-dark-commerce
 * design tokens so this page stays aligned with the wider Jedi-Robe system.
 *
 * @package    Jedi_Theme
 * @subpackage Public_Service_Discount
 * @since      1.0.0
 */


/* ==========================================================================
   Page
   ========================================================================== */

body.jr-dark-commerce
  .ss-public-service-page,
body.jr-dark-commerce
  .ss-public-service-page
  * {
  box-sizing: border-box;
}


body.jr-dark-commerce
  .ss-public-service-page {
  overflow: hidden;

  background: transparent;

  color: var(--jr-text);

  font-family: inherit;
}


/* ==========================================================================
   Shared shell
   ========================================================================== */

body.jr-dark-commerce
  .ss-public-wrap,
body.jr-dark-commerce
  .ss-public-hero-inner {
  width: min(
    calc(100% - (var(--jr-page-gutter, clamp(1rem, 3vw, 2.5rem)) * 2)),
    var(--jr-container, 100rem)
  );

  margin-inline: auto;
}


/* ==========================================================================
   Hero
   ========================================================================== */

body.jr-dark-commerce
  .ss-public-hero {
  position: relative;
  isolation: isolate;

  display: flex;

  min-height: 34rem;

  align-items: center;

  padding:
    clamp(4rem, 7vw, 6.5rem)
    0;

  border-bottom: 1px solid rgba(69, 217, 107, 0.38);

  background:
    linear-gradient(
      90deg,
      rgba(2, 7, 11, 0.94) 0%,
      rgba(2, 7, 11, 0.82) 38%,
      rgba(2, 7, 11, 0.28) 76%,
      rgba(2, 7, 11, 0.16) 100%
    ),
    url("https://www.stormtrooperstore.com/wp-content/uploads/2026/07/usa-discount-hero-pic.png")
    center center / cover
    no-repeat;
}


body.jr-dark-commerce
  .ss-public-hero::before {
  position: absolute;
  z-index: -1;

  inset: 0;

  background:
    radial-gradient(
      circle at 12% 50%,
      rgba(45, 166, 83, 0.08),
      transparent 28rem
    );

  content: "";

  pointer-events: none;
}


/* ==========================================================================
   Hero content
   ========================================================================== */

body.jr-dark-commerce
  .ss-public-hero-content {
  max-width: 46rem;

  color: var(--jr-text);
}


/* ==========================================================================
   Hero kicker
   ========================================================================== */

body.jr-dark-commerce
  .ss-public-kicker {
  display: flex;

  width: fit-content;

  align-items: center;

  gap: 0.75rem;

  margin:
    0
    0
    1.25rem;

  padding: 0;

  border: 0;
  border-radius: 0;

  background: transparent;

  color: var(--jr-green-light);

  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.17em;
  line-height: 1.2;

  text-transform: uppercase;

  backdrop-filter: none;
}


body.jr-dark-commerce
  .ss-public-kicker::before {
  width: 1.8rem;
  height: 1px;

  flex:
    0
    0
    auto;

  background: currentcolor;

  box-shadow:
    0 0 0.75rem rgba(69, 217, 107, 0.25);

  content: "";
}


/* ==========================================================================
   Hero heading
   ========================================================================== */

body.jr-dark-commerce
  .ss-public-hero
  h1 {
  max-width: 13ch;

  margin:
    0
    0
    1.5rem;

  color: var(--jr-text);

  font-size:
    clamp(
      3.25rem,
      4.4vw,
      4.5rem
    );

  font-weight: 750;
  letter-spacing: -0.05em;
  line-height: 0.98;

  text-wrap: balance;

  text-shadow:
    0 0 1.5rem rgba(255, 255, 255, 0.04),
    0 0 3.5rem rgba(114, 201, 255, 0.055);
}


body.jr-dark-commerce
  .ss-public-hero
  h1::after {
  display: block;

  width: clamp(5rem, 9vw, 9rem);
  height: 2px;

  margin-top: 1.5rem;

  background:
    linear-gradient(
      90deg,
      var(--jr-green-light),
      transparent
    );

  box-shadow:
    0 0 1rem rgba(45, 166, 83, 0.2);

  content: "";
}


/* ==========================================================================
   Hero copy
   ========================================================================== */

body.jr-dark-commerce
  .ss-public-hero
  p {
  max-width: 43rem;

  margin:
    0
    0
    1.75rem;

  color: var(--jr-text-soft);

  font-size:
    clamp(
      1rem,
      0.96rem + 0.15vw,
      1.12rem
    );

  line-height: 1.72;
}


/* ==========================================================================
   Buttons
   ========================================================================== */

body.jr-dark-commerce
  .ss-public-buttons {
  display: flex;

  gap: 0.75rem;

  flex-wrap: wrap;
}


body.jr-dark-commerce
  .ss-public-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  display: inline-flex;

  min-height: 3.35rem;

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

  padding:
    0.9rem
    1.45rem;

  border-radius: 0;

  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.065em;
  line-height: 1.1;

  text-decoration: none;

  text-transform: uppercase;

  transition:
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease,
    filter 180ms ease,
    transform 180ms ease;
}


body.jr-dark-commerce
  .ss-public-btn::after {
  position: absolute;
  right: 0.4rem;
  bottom: 0.35rem;

  width: 0.4rem;
  height: 0.4rem;

  border-right: 1px solid currentcolor;
  border-bottom: 1px solid currentcolor;

  content: "";

  opacity: 0.7;
}


/**
 * Keep keyboard and pressed states aligned with shared Jedi-Robe actions.
 *
 * @package Jedi_Theme
 * @subpackage Public_Service_Discount
 */
body.jr-dark-commerce
  .ss-public-btn:focus-visible {
  outline: 2px solid var(--jr-green-light);
  outline-offset: 3px;
}


body.jr-dark-commerce
  .ss-public-btn:active {
  transform: translateY(0) scale(0.985);
}


/* ==========================================================================
   Primary button
   ========================================================================== */

body.jr-dark-commerce
  .ss-public-btn-primary {
  border: 1px solid rgba(239, 196, 109, 0.76);

  background:
    linear-gradient(
      180deg,
      #efc46d 0%,
      #d7a444 48%,
      #c58c2d 100%
    );

  color: #080a0d;

  box-shadow:
    0 0.8rem 2rem rgba(0, 0, 0, 0.3),
    0 0 1.1rem rgba(214, 165, 74, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
}


body.jr-dark-commerce
  .ss-public-btn-primary:hover {
  border-color: #f6d98e;

  color: #05070a;

  filter: brightness(1.07);

  box-shadow:
    0 1rem 2.35rem rgba(0, 0, 0, 0.34),
    0 0 1.45rem rgba(214, 165, 74, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);

  transform: translateY(-2px);
}


/* ==========================================================================
   Secondary button
   ========================================================================== */

body.jr-dark-commerce
  .ss-public-btn-secondary {
  border: 1px solid rgba(152, 169, 192, 0.48);

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.045),
      transparent 42%
    ),
    linear-gradient(
      180deg,
      rgba(14, 24, 36, 0.96),
      rgba(6, 12, 20, 0.96)
    );

  color: var(--jr-text);

  box-shadow:
    0 0.65rem 1.5rem rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 rgba(69, 217, 107, 0.08);
}


body.jr-dark-commerce
  .ss-public-btn-secondary:hover {
  border-color: rgba(152, 169, 192, 0.7);

  background:
    linear-gradient(
      135deg,
      rgba(69, 217, 107, 0.08),
      transparent 44%
    ),
    linear-gradient(
      180deg,
      rgba(17, 30, 41, 0.98),
      rgba(7, 15, 22, 0.98)
    );

  color: var(--jr-text);

  transform: translateY(-2px);
}


/* ==========================================================================
   Sections
   ========================================================================== */

body.jr-dark-commerce
  .ss-public-section {
  position: relative;

  padding:
    clamp(3rem, 5vw, 4rem)
        0;

  background: transparent;
}


body.jr-dark-commerce
  .ss-public-section-tight {
  padding-top: 1.5rem;
  padding-bottom: 4rem;
}


/* ==========================================================================
   Shared section heading
   ========================================================================== */

body.jr-dark-commerce
  .ss-public-intro {
  max-width: 54rem;

  margin: 0;

  text-align: left;
}


body.jr-dark-commerce
  .ss-public-intro
  h2,
body.jr-dark-commerce
  .ss-public-split
  h2,
body.jr-dark-commerce
  .ss-public-cta
  h2 {
  position: relative;

  margin:
    0
    0
    1.1rem;

  max-width: 24ch;

  color: var(--jr-text);

  font-size: clamp(2rem, 2.4vw, 3rem);
  font-weight: 760;
  letter-spacing: -0.04em;
  line-height: 1.05;

  text-wrap: balance;
}


body.jr-dark-commerce
  .ss-public-intro
  h2::after,
body.jr-dark-commerce
  .ss-public-split
  h2::after {
  display: block;

  width: clamp(4rem, 6vw, 6rem);
  height: 2px;

  margin-top: 1rem;

  background:
    linear-gradient(
      90deg,
      var(--jr-green-light),
      transparent
    );

  box-shadow:
    0 0 1rem rgba(45, 166, 83, 0.2);

  content: "";
}


/* ==========================================================================
   Shared section copy
   ========================================================================== */

body.jr-dark-commerce
  .ss-public-intro
  p {
  margin: 0;

  color: var(--jr-text-soft);

  font-size: 0.98rem;
  line-height: 1.72;
}


/* ==========================================================================
   Recognition cards grid
   ========================================================================== */

/**
 * Reuse the established Jedi-Robe category-card rhythm for recognition cards.
 *
 * The public-service cards are informational rather than navigation links, so
 * the visual language is shared without adding the category-card arrow.
 *
 * @package    Jedi_Theme
 * @subpackage Public_Service_Discount
 */
body.jr-dark-commerce
  .ss-public-grid {
  display: grid;

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

  gap:
    clamp(
      1rem,
      1.5vw,
      1.5rem
    );

  margin-top: 2rem;
}


/* ==========================================================================
   Recognition card
   ========================================================================== */

body.jr-dark-commerce
  .ss-public-card {
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;

  display: grid;

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

  grid-template-rows:
    auto
    1fr;

  column-gap:
    clamp(
      0.9rem,
      1.2vw,
      1.2rem
    );

  row-gap: 0.35rem;

  align-items: start;

  min-width: 0;
  min-height: 9.5rem;

  padding:
    clamp(
      1.15rem,
      1.7vw,
      1.5rem
    );

  border: 1px solid var(--jr-border);
  border-radius: 0.375rem;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.035),
      transparent 42%
    ),
    radial-gradient(
      circle at 100% 0,
      rgba(111, 203, 255, 0.045),
      transparent 15rem
    ),
    var(--jr-surface);

  color: var(--jr-text);

  box-shadow:
    0 1.25rem 2.75rem rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.025);

  transition:
    border-color 220ms ease,
    background 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}


/**
 * Add the short illuminated top trace used by the category information cards.
 *
 * @package    Jedi_Theme
 * @subpackage Public_Service_Discount
 */
body.jr-dark-commerce
  .ss-public-card::before {
  position: absolute;
  top: 0;
  left: 0;

  width:
    clamp(
      3.5rem,
      30%,
      8rem
    );

  height: 1px;

  background:
    linear-gradient(
      90deg,
      var(--jr-green-light),
      rgba(45, 166, 83, 0)
    );

  box-shadow:
    0 0 1rem rgba(45, 166, 83, 0.18);

  content: "";

  opacity: 0.72;

  pointer-events: none;

  transition:
    width 220ms ease,
    opacity 220ms ease;
}


body.jr-dark-commerce
  .ss-public-card
  > * {
  position: relative;
  z-index: 1;
}


/* ==========================================================================
   Recognition icon
   ========================================================================== */

body.jr-dark-commerce
  .ss-public-icon {
  grid-column: 1;
  grid-row: 1 / span 2;

  display: grid;

  width: 3rem;
  height: 3rem;

  margin: 0;

  place-items: center;

  border: 1px solid transparent;
  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      #141c28,
      #090d14
    )
    padding-box,
    linear-gradient(
      145deg,
      rgba(69, 217, 107, 0.72),
      rgba(45, 166, 83, 0.18) 58%,
      rgba(111, 203, 255, 0.16)
    )
    border-box;

  color: var(--jr-green-light);

  font-size: 1rem;
  font-weight: 700;
  line-height: 1;

  box-shadow:
    0 0.75rem 1.5rem rgba(0, 0, 0, 0.25),
    0 0 1rem rgba(45, 166, 83, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);

  transition:
    color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}


/* ==========================================================================
   Recognition card typography
   ========================================================================== */

body.jr-dark-commerce
  .ss-public-card
  h3 {
  grid-column: 2;
  grid-row: 1;

  min-width: 0;

  margin:
    0
    0
    0.1rem;

  padding-top: 0.1rem;

  color: var(--jr-text);

  font-size:
    clamp(
      1rem,
      0.94rem + 0.14vw,
      1.12rem
    );

  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.3;

  text-wrap: balance;

  transition:
    color 180ms ease,
    text-shadow 180ms ease;
}


body.jr-dark-commerce
  .ss-public-card
  p {
  grid-column: 2;
  grid-row: 2;

  min-width: 0;

  margin: 0;

  color: var(--jr-text-soft);

  font-size:
    clamp(
      0.86rem,
      0.82rem + 0.08vw,
      0.94rem
    );

  line-height: 1.6;

  text-wrap: pretty;

  transition: color 180ms ease;
}


/* ==========================================================================
   Recognition card hover
   ========================================================================== */

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

  body.jr-dark-commerce
    .ss-public-card:hover {
    border-color: rgba(45, 166, 83, 0.48);

    background:
      linear-gradient(
        135deg,
        rgba(111, 203, 255, 0.065),
        transparent 40%
      ),
      rgba(11, 19, 30, 0.68);

    box-shadow:
      0 1.75rem 3.5rem rgba(0, 0, 0, 0.34),
      0 0 1.5rem rgba(45, 166, 83, 0.07),
      inset 0 1px 0 rgba(255, 255, 255, 0.04);

    transform: translateY(-0.25rem);
  }


  body.jr-dark-commerce
    .ss-public-card:hover::before {
    width: 62%;
    opacity: 1;
  }


  body.jr-dark-commerce
    .ss-public-card:hover
    .ss-public-icon {
    color: var(--jr-green-bright);

    box-shadow:
      0 1rem 1.8rem rgba(0, 0, 0, 0.3),
      0 0 1.25rem rgba(45, 166, 83, 0.13),
      inset 0 1px 0 rgba(255, 255, 255, 0.055);

    transform: translateY(-0.125rem);
  }


  body.jr-dark-commerce
    .ss-public-card:hover
    h3 {
    color: var(--jr-text);
    text-shadow: 0 0 1rem rgba(45, 166, 83, 0.1);
  }
}


/* ==========================================================================
   Recognition responsive layout
   ========================================================================== */

@media (max-width: 1180px) {

  body.jr-dark-commerce
    .ss-public-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}


/* ==========================================================================
   Eligibility section
   ========================================================================== */

body.jr-dark-commerce
  .ss-public-dark {
  position: relative;
  isolation: isolate;

  padding:
    clamp(4rem, 7vw, 6rem)
    0;

  border-top: 1px solid rgba(152, 169, 192, 0.14);
  border-bottom: 1px solid rgba(152, 169, 192, 0.14);

  background:
    linear-gradient(
      180deg,
      rgba(8, 16, 25, 0.58),
      rgba(3, 8, 13, 0.36)
    );

  color: var(--jr-text);
}


body.jr-dark-commerce
  .ss-public-dark::before {
  position: absolute;
  z-index: -1;

  inset: 0;

  background:
    radial-gradient(
      circle at 0 50%,
      rgba(45, 166, 83, 0.045),
      transparent 28rem
    ),
    radial-gradient(
      circle at 100% 50%,
      rgba(111, 203, 255, 0.035),
      transparent 28rem
    );

  content: "";

  opacity: 1;

  pointer-events: none;
}


/* ==========================================================================
   Eligibility split
   ========================================================================== */

body.jr-dark-commerce
  .ss-public-split {
  display: grid;

  grid-template-columns:
    minmax(0, 0.95fr)
    minmax(0, 1.05fr);

  gap:
    clamp(
      2rem,
      5vw,
      4.5rem
    );

  align-items: start;
}


body.jr-dark-commerce
  .ss-public-split
  p {
  max-width: 36rem;

  margin:
    0
    0
    1rem;

  color: var(--jr-text-soft);

  font-size: 0.98rem;
  line-height: 1.72;
}


/* ==========================================================================
   Eligibility list
   ========================================================================== */

body.jr-dark-commerce
  .ss-public-list {
  display: grid;

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

  gap: 0.6rem;

  margin-top: 1.5rem;
}


body.jr-dark-commerce
  .ss-public-list
  div {
  position: relative;

  padding:
    0.7rem
    0.8rem
    0.7rem
    1.8rem;

  border: 1px solid rgba(152, 169, 192, 0.18);
  border-radius: 0.25rem;

  background:
    rgba(8, 15, 24, 0.48);

  color: var(--jr-text);

  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.4;
}


body.jr-dark-commerce
  .ss-public-list
  div::before {
  position: absolute;

  top: 0.75rem;
  left: 0.7rem;

  margin: 0;

  color: var(--jr-green-light);

  content: "✓";

  font-weight: 800;
}


/* ==========================================================================
   Claim steps panel
   ========================================================================== */

body.jr-dark-commerce
  .ss-public-steps {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  padding:
    1.5rem;

  border: 1px solid var(--jr-border);
  border-radius: 0.25rem;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.025),
      transparent 42%
    ),
    rgba(8, 15, 24, 0.72);

  color: var(--jr-text);

  box-shadow:
    0 1.5rem 3rem rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.025);
}


body.jr-dark-commerce
  .ss-public-steps::before {
  position: absolute;
  top: -1px;
  left: -1px;

  width: 4rem;
  height: 0.9rem;

  border-top: 1px solid var(--jr-green-light);
  border-left: 1px solid var(--jr-green-light);

  content: "";
}


/* ==========================================================================
   Claim step
   ========================================================================== */

body.jr-dark-commerce
  .ss-public-step {
  display: grid;

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

  gap: 1rem;

  padding:
    1.25rem
    0;

  border-bottom: 1px solid rgba(152, 169, 192, 0.16);
}


body.jr-dark-commerce
  .ss-public-step:first-child {
  padding-top: 0;
}


body.jr-dark-commerce
  .ss-public-step:last-child {
  padding-bottom: 0;

  border-bottom: 0;
}


/* ==========================================================================
   Claim step number
   ========================================================================== */

body.jr-dark-commerce
  .ss-public-number {
  display: grid;

  width: 2.5rem;
  height: 2.5rem;

  border: 1px solid rgba(69, 217, 107, 0.32);
  border-radius: 50%;

  background:
    rgba(69, 217, 107, 0.04);

  color: var(--jr-green-light);

  font-size: 0.9rem;
  font-weight: 800;

  place-items: center;
}


/* ==========================================================================
   Claim step typography
   ========================================================================== */

body.jr-dark-commerce
  .ss-public-step
  h3 {
  margin:
    0
    0
    0.4rem;

  color: var(--jr-text);

  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}


body.jr-dark-commerce
  .ss-public-step
  p {
  margin: 0;

  color: var(--jr-text-soft);

  font-size: 0.95rem;
  line-height: 1.68;
}


/* ==========================================================================
   Proof labels
   ========================================================================== */

body.jr-dark-commerce
  .ss-public-proof {
  display: flex;

  gap: 0.45rem;

  margin-top: 0.8rem;

  flex-wrap: wrap;
}


body.jr-dark-commerce
  .ss-public-proof
  span {
  padding:
    0.38rem
    0.6rem;

  border: 1px solid rgba(152, 169, 192, 0.18);
  border-radius: 0.2rem;

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

  color: var(--jr-text-soft);

  font-size: 0.72rem;
  font-weight: 650;
}


/* ==========================================================================
   Trust statistics
   ========================================================================== */

body.jr-dark-commerce
  .ss-public-trust {
  display: grid;

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

  gap: 1rem;

  margin-top: 2rem;
}


body.jr-dark-commerce
  .ss-public-stat {
  position: relative;

  padding:
    1.4rem
    1rem;

  border: 1px solid var(--jr-border);
  border-radius: 0.25rem;

  background:
    rgba(8, 15, 24, 0.55);

  text-align: left;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025);
}


body.jr-dark-commerce
  .ss-public-stat::after {
  position: absolute;
  right: -1px;
  bottom: -1px;

  width: 0.7rem;
  height: 0.7rem;

  border-right: 1px solid rgba(111, 203, 255, 0.4);
  border-bottom: 1px solid rgba(111, 203, 255, 0.4);

  content: "";
}


body.jr-dark-commerce
  .ss-public-stat
  strong {
  display: block;

  margin:
    0
    0
    0.4rem;

  color: var(--jr-text);

  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}


body.jr-dark-commerce
  .ss-public-stat
  span {
  color: var(--jr-text-muted);

  font-size: 0.875rem;
  line-height: 1.4;
}


/* ==========================================================================
   FAQ
   ========================================================================== */

body.jr-dark-commerce
  .ss-public-faq {
  width: 100%;

  margin:
    2rem
    0
    0;

  border-top: 1px solid rgba(152, 169, 192, 0.2);
}


body.jr-dark-commerce
  .ss-public-faq-item {
  position: relative;

  padding:
    1.25rem
    0;

  border: 0;
  border-bottom: 1px solid rgba(152, 169, 192, 0.18);

  background: transparent;
}


body.jr-dark-commerce
  .ss-public-faq-item
  h3 {
  margin:
    0
    0
    0.45rem;

  color: var(--jr-text);

  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.45;
}


body.jr-dark-commerce
  .ss-public-faq-item
  p {
  max-width: 58rem;

  margin: 0;

  color: var(--jr-text-soft);

  font-size: 0.95rem;
  line-height: 1.72;
}


/* ==========================================================================
   Final CTA
   ========================================================================== */

body.jr-dark-commerce
  .ss-public-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  padding:
    clamp(2.5rem, 5vw, 4rem)
    clamp(1.25rem, 4vw, 3rem);

  border: 1px solid var(--jr-border);
  border-radius: 0;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.025),
      transparent 42%
    ),
    radial-gradient(
      circle at 100% 50%,
      rgba(111, 203, 255, 0.06),
      transparent 22rem
    ),
    rgba(8, 15, 24, 0.72);

  color: var(--jr-text);

  text-align: left;

  box-shadow:
    0 1.5rem 3rem rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.025);
}


body.jr-dark-commerce
  .ss-public-cta::before {
  position: absolute;

  top: -1px;
  left: -1px;

  width: 5rem;
  height: 1rem;

  border-top: 1px solid var(--jr-green-light);
  border-left: 1px solid var(--jr-green-light);

  background: transparent;

  content: "";
}


body.jr-dark-commerce
  .ss-public-cta::after {
  position: absolute;

  right: -1px;
  bottom: -1px;

  width: 1rem;
  height: 1rem;

  border-right: 1px solid rgba(111, 203, 255, 0.45);
  border-bottom: 1px solid rgba(111, 203, 255, 0.45);

  content: "";
}


body.jr-dark-commerce
  .ss-public-cta
  h2 {
  max-width: none;

  margin-bottom: 0.9rem;

  text-align: left;
}


body.jr-dark-commerce
  .ss-public-cta
  p {
  max-width: 48rem;

  margin:
    0
    0
    1.5rem;

  color: var(--jr-text-soft);

  font-size: 0.98rem;
  line-height: 1.72;

  text-align: left;
}


body.jr-dark-commerce
  .ss-public-cta
  h2,
body.jr-dark-commerce
  .ss-public-cta
  p,
body.jr-dark-commerce
  .ss-public-cta
  a {
  position: relative;
  z-index: 2;
}


/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 980px) {

  body.jr-dark-commerce
    .ss-public-grid,
  body.jr-dark-commerce
    .ss-public-trust {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  body.jr-dark-commerce
    .ss-public-split {
    grid-template-columns:
      minmax(0, 1fr);
  }


  body.jr-dark-commerce
    .ss-public-hero {
    background:
      linear-gradient(
        90deg,
        rgba(2, 7, 11, 0.94) 0%,
        rgba(2, 7, 11, 0.78) 58%,
        rgba(2, 7, 11, 0.35) 100%
      ),
      url("https://www.stormtrooperstore.com/wp-content/uploads/2026/07/usa-discount-hero-pic.png")
      center center / cover
      no-repeat;
  }
}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 640px) {

  body.jr-dark-commerce
    .ss-public-wrap,
  body.jr-dark-commerce
    .ss-public-hero-inner {
    width:
      calc(
        100% - 2rem
      );
  }


  body.jr-dark-commerce
    .ss-public-hero {
    min-height: 33rem;

    padding:
      3.5rem
      0;

    background:
      linear-gradient(
        90deg,
        rgba(2, 7, 11, 0.92),
        rgba(2, 7, 11, 0.72)
      ),
      url("https://www.stormtrooperstore.com/wp-content/uploads/2026/07/usa-discount-hero-pic.png")
      center center / cover
      no-repeat;
  }


  body.jr-dark-commerce
    .ss-public-hero
    h1 {
    font-size:
      clamp(
        2.75rem,
        13vw,
        4rem
      );
  }


  body.jr-dark-commerce
    .ss-public-grid,
  body.jr-dark-commerce
    .ss-public-trust,
  body.jr-dark-commerce
    .ss-public-list {
    grid-template-columns:
      minmax(0, 1fr);
  }


  body.jr-dark-commerce
    .ss-public-buttons {
    align-items: stretch;

    flex-direction: column;
  }


  body.jr-dark-commerce
    .ss-public-btn {
    width: 100%;
  }


  body.jr-dark-commerce
    .ss-public-step {
    grid-template-columns:
      2.35rem
      minmax(0, 1fr);
  }


  body.jr-dark-commerce
    .ss-public-number {
    width: 2.35rem;
    height: 2.35rem;
  }


  body.jr-dark-commerce
    .ss-public-steps {
    padding:
      1.25rem
      1rem;
  }


  body.jr-dark-commerce
    .ss-public-cta {
    padding:
      2rem
      1.25rem;
  }
}


/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

  body.jr-dark-commerce
    .ss-public-card,
  body.jr-dark-commerce
    .ss-public-btn {
    transition: none;
  }


  body.jr-dark-commerce
    .ss-public-card:hover,
  body.jr-dark-commerce
    .ss-public-btn:hover {
    transform: none;
  }
}