/*
 * 2026-10-24 reference visual layer.
 * Loaded after configurator.css. All selectors stay inside the configurator root.
 */
#gen4smshrs-configurator {
  --g4s-ref-cyan: #00e8fe;
  --g4s-ref-blue: #1f6ec7;
  --g4s-ref-ink: #f6fbff;
  --g4s-ref-muted: #d4e4ef;
  --g4s-ref-glass: rgba(5, 22, 38, .76);
  --g4s-ref-glass-strong: rgba(4, 18, 32, .88);
  --g4s-ref-glass-soft: rgba(14, 43, 65, .64);
  --g4s-ref-line: rgba(203, 235, 255, .52);
  --g4s-ref-line-soft: rgba(203, 235, 255, .26);
  --g4s-ref-radius: 18px;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  color: var(--g4s-ref-ink);
  font-family: "G4S Rubik", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0;
  color-scheme: dark;
}

#gen4smshrs-configurator *,
#gen4smshrs-configurator *::before,
#gen4smshrs-configurator *::after {
  box-sizing: border-box;
}

#gen4smshrs-configurator .g4s-reference-shell {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0;
  width: 100%;
  max-width: none;
  min-height: 100svh;
  margin: 0;
  padding: 0;
  overflow: clip;
  background-color: #102f51;
  background-image:
    linear-gradient(180deg, rgba(14, 93, 164, .18) 0%, rgba(5, 29, 50, .3) 45%, rgba(2, 16, 26, .56) 100%),
    url("img/reference-20261024/stadium.png");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--g4s-ref-ink);
}

#gen4smshrs-configurator[data-theme="dark"] .g4s-reference-shell {
  background-image:
    linear-gradient(180deg, rgba(4, 14, 27, .42) 0%, rgba(3, 14, 25, .56) 50%, rgba(1, 9, 17, .74) 100%),
    url("img/reference-20261024/stadium.png");
}

#gen4smshrs-configurator .g4s-reference-shell :is(h1, h2, h3, h4, p, span, small, strong, label, button, a, summary) {
  color: inherit;
}

#gen4smshrs-configurator .g4s-reference-shell :is(input, select, textarea) {
  border-color: rgba(210, 237, 255, .42);
  border-radius: 10px;
  background: rgba(3, 19, 34, .72);
  color: #f6fbff;
}

#gen4smshrs-configurator .g4s-reference-shell :is(input, select, textarea)::placeholder {
  color: rgba(222, 239, 250, .68);
}

#gen4smshrs-configurator .g4s-reference-shell :is(input, select, textarea):focus-visible,
#gen4smshrs-configurator .g4s-reference-shell :is(button, a, summary):focus-visible {
  outline: 3px solid rgba(0, 232, 254, .78);
  outline-offset: 3px;
}

/* The desktop reference header is a single 70px glass ribbon. */
#gen4smshrs-configurator .g4s-reference-shell .g4s-sponsor-topbar {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(260px, .95fr) minmax(180px, .65fr) minmax(220px, .8fr) minmax(210px, auto);
  align-items: center;
  gap: 0;
  min-height: 70px;
  margin: 0;
  padding: 7px 38px;
  border: 0;
  border-bottom: 1px solid rgba(219, 242, 255, .34);
  border-radius: 0;
  background: linear-gradient(100deg, rgba(17, 90, 157, .88), rgba(20, 115, 196, .76) 58%, rgba(18, 85, 145, .8));
  box-shadow: 0 8px 24px rgba(3, 18, 32, .24);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-sponsor-topbar > div {
  min-width: 0;
  min-height: 42px;
  padding: 2px 20px;
  border-right: 1px solid rgba(221, 243, 255, .48);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-sponsor-topbar > div:first-child {
  padding-left: 0;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-sponsor-topbar > div:nth-child(3) {
  border-right: 0;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-sponsor-topbar > div:nth-child(4) {
  display: flex;
  justify-content: flex-end;
  padding-right: 0;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-sponsor-topbar-brand {
  display: flex;
  align-items: center;
  gap: 18px;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-sponsor-topbar-brand > span {
  color: rgba(244, 250, 255, .92);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-sponsor-topbar-brand .g4s-reference-top-wordmark {
  display: inline-flex;
  align-items: center;
  color: #fff;
  font-family: "G4S Kenyan Coffee", "G4S Smash Spark", "G4S Rubik", sans-serif;
  font-size: 29px;
  font-style: italic;
  letter-spacing: 0;
  line-height: .92;
  text-transform: none;
  white-space: nowrap;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-sponsor-topbar-brand .g4s-reference-top-wordmark strong {
  color: #fff;
  font: inherit;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-sponsor-topbar-brand .g4s-reference-top-wordmark strong span {
  color: var(--g4s-ref-cyan);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-sponsor-topbar-brand .g4s-reference-top-wordmark img {
  display: block;
  width: 132px;
  max-height: 38px;
  object-fit: contain;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-sponsor-topbar-brand strong {
  color: #fff;
  font-family: "G4S Kenyan Coffee", "G4S Smash Spark", "G4S Rubik", sans-serif;
  font-size: 32px;
  font-style: italic;
  line-height: .92;
  white-space: nowrap;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-sponsor-topbar span,
#gen4smshrs-configurator .g4s-reference-shell .g4s-sponsor-topbar small {
  color: rgba(237, 247, 255, .9);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-sponsor-topbar > div:not(:first-child) > span {
  display: block;
  margin-bottom: 3px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-sponsor-topbar > div:not(:first-child) > strong {
  display: block;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-sponsor-topbar > div:nth-child(3) > strong {
  color: var(--g4s-ref-cyan);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-sponsor-topbar > div > small {
  display: none;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-theme-control {
  display: flex;
  align-items: center;
  gap: 12px;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-theme-control-label {
  color: #f4faff;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-theme-options {
  display: inline-flex;
  padding: 3px;
  border: 1px solid rgba(221, 243, 255, .54);
  border-radius: 999px;
  background: rgba(2, 21, 37, .68);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-theme-options button {
  min-width: 78px;
  min-height: 34px;
  padding: 5px 13px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #f2f8fc;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-theme-options button.is-active {
  background: #f5faff;
  color: #122c45;
  box-shadow: 0 2px 8px rgba(1, 14, 27, .32);
}

/* Main 9-step shell: left timeline, right content, shared bottom navigator. */
#gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-multistep-form {
  display: grid;
  grid-template-columns: 274px minmax(0, 1fr);
  grid-template-areas: "stepper stack";
  align-items: stretch;
  gap: 16px;
  min-width: 0;
  min-height: calc(100svh - 70px);
  padding: 16px 38px 24px 36px;
}

#gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-stepper {
  position: relative;
  top: auto;
  z-index: 2;
  display: flex;
  flex-direction: column;
  grid-area: stepper;
  gap: 0;
  align-self: stretch;
  width: 100%;
  max-height: none;
  min-height: 0;
  overflow: hidden;
  padding: 15px 12px 14px;
  border: 1px solid rgba(204, 237, 255, .42);
  border-radius: 19px;
  background: linear-gradient(180deg, rgba(5, 23, 39, .8), rgba(6, 26, 43, .74));
  box-shadow: 0 15px 38px rgba(2, 12, 22, .24), inset 0 1px 0 rgba(255, 255, 255, .12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

#gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-stepper-head {
  display: none;
}

#gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-step-tab {
  position: relative;
  display: grid;
  grid-template-columns: 34px 32px minmax(0, 1fr);
  grid-template-rows: 1fr;
  grid-template-areas: "num icon label";
  gap: 0 10px;
  align-items: center;
  flex: 1 1 0;
  width: 100%;
  min-height: 58px;
  max-height: 84px;
  margin: 0;
  padding: 8px 9px;
  overflow: visible;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: #f5f9fc;
  box-shadow: none;
  cursor: pointer;
  text-align: left;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

#gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-step-tab::before {
  position: absolute;
  z-index: -1;
  top: calc(50% + 18px);
  bottom: -22px;
  left: 25px;
  width: 2px;
  background: linear-gradient(180deg, rgba(0, 232, 254, .8), rgba(148, 191, 216, .46));
  content: "";
}

#gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-step-tab:last-of-type::before {
  display: none;
}

#gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-step-tab > span {
  grid-area: num;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(213, 237, 251, .72);
  border-radius: 50%;
  background: rgba(102, 143, 176, .74);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

#gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-step-icon {
  display: grid;
  grid-area: icon;
  width: 25px;
  height: 25px;
  place-items: center;
  color: #f5fbff;
}

#gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-step-icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

#gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-step-tab strong {
  grid-area: label;
  min-width: 0;
  color: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.15;
  text-transform: none;
  white-space: normal;
}

#gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-step-tab small {
  display: none;
}

#gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-step-tab:hover {
  border-color: rgba(0, 232, 254, .56);
  background: rgba(1, 112, 157, .36);
  color: #fff;
}

#gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-step-tab.is-active {
  border-color: var(--g4s-ref-cyan);
  background: linear-gradient(90deg, rgba(0, 218, 247, .52), rgba(2, 78, 115, .6));
  color: #fff;
  box-shadow: 0 0 18px rgba(0, 232, 254, .42), inset 0 0 0 1px rgba(226, 251, 255, .22);
}

#gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-step-tab.is-active > span {
  width: 42px;
  height: 42px;
  margin-left: -4px;
  border: 2px solid var(--g4s-ref-cyan);
  background: rgba(3, 28, 46, .92);
  box-shadow: 0 0 13px rgba(0, 232, 254, .54);
  font-size: 16px;
}

#gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-step-tab.is-complete:not(.is-active) > span {
  border-color: var(--g4s-ref-cyan);
  background: var(--g4s-ref-cyan);
  color: #053348;
}

#gen4smshrs-configurator .g4s-reference-stepper .g4s-stepper-wordmark {
  display: grid;
  gap: 4px;
  margin-top: auto;
  padding: 14px 8px 2px;
  color: #fff;
}

#gen4smshrs-configurator .g4s-reference-stepper .g4s-stepper-wordmark strong {
  color: #fff;
  font-family: "G4S Kenyan Coffee", "G4S Smash Spark", "G4S Rubik", sans-serif;
  font-size: 27px;
  font-style: italic;
  line-height: .92;
}

#gen4smshrs-configurator .g4s-reference-stepper .g4s-stepper-wordmark strong span {
  color: var(--g4s-ref-cyan);
}

#gen4smshrs-configurator .g4s-reference-stepper .g4s-stepper-wordmark img {
  display: block;
  width: min(156px, 100%);
  max-height: 34px;
  object-fit: contain;
  object-position: left center;
}

#gen4smshrs-configurator .g4s-reference-stepper .g4s-stepper-wordmark small {
  color: #eef8ff;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .28em;
}

#gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-stack {
  display: grid;
  grid-area: stack;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 14px;
  min-width: 0;
  min-height: calc(100svh - 110px);
}

#gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer {
  position: relative;
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  scroll-margin-top: 16px;
}

#gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-form-panel,
#gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-panel,
#gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-controls,
#gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-assignment,
#gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-price {
  border: 1px solid var(--g4s-ref-line);
  border-radius: var(--g4s-ref-radius);
  background: linear-gradient(145deg, rgba(9, 34, 54, .76), rgba(3, 20, 35, .76));
  box-shadow: 0 15px 38px rgba(0, 11, 20, .28), inset 0 1px 0 rgba(255, 255, 255, .08);
  color: var(--g4s-ref-ink);
  backdrop-filter: blur(13px);
  -webkit-backdrop-filter: blur(13px);
}

#gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-form-panel {
  padding: clamp(16px, 1.25vw, 22px);
}

#gen4smshrs-configurator .g4s-reference-shell.is-unified :is(.g4s-kicker, .g4s-form-step-head .g4s-kicker) {
  color: var(--g4s-ref-cyan);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

#gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-form-step-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  margin: 0 0 12px;
  padding: 0 0 10px;
  border-bottom: 1px solid rgba(207, 235, 252, .25);
}

#gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-form-step-head h2,
#gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-stage-head h2,
#gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-reference-stage-head h2 {
  margin: 0;
  color: #f8fbff;
  font-family: "G4S Kenyan Coffee", "G4S Smash Spark", "G4S Rubik", sans-serif;
  font-size: clamp(30px, 3vw, 54px);
  font-weight: 900;
  line-height: .98;
  letter-spacing: .015em;
  text-transform: uppercase;
  text-shadow: 0 3px 12px rgba(0, 10, 20, .28);
}

#gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-form-step-head > span {
  padding: 7px 17px;
  border: 1px solid rgba(0, 232, 254, .68);
  border-radius: 999px;
  background: rgba(0, 124, 173, .58);
  box-shadow: 0 0 13px rgba(0, 216, 245, .3);
  color: var(--g4s-ref-cyan);
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
}

#gen4smshrs-configurator .g4s-reference-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  min-height: 28px;
  padding: 0 2px;
  color: #f2f8fc;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}

#gen4smshrs-configurator .g4s-reference-breadcrumb b {
  color: rgba(229, 244, 255, .72);
  font-size: 18px;
}

#gen4smshrs-configurator .g4s-reference-breadcrumb .is-current {
  color: var(--g4s-ref-cyan);
  font-weight: 850;
}

/* Shared glass controls and pill/button states. */
#gen4smshrs-configurator .g4s-reference-shell .g4s-btn,
#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-summary-views button,
#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-role-tabs button {
  min-height: 44px;
  padding: 9px 20px;
  border: 1px solid rgba(210, 240, 255, .72);
  border-radius: 999px;
  background: rgba(8, 32, 51, .82);
  color: #f7fbff;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  box-shadow: 0 5px 14px rgba(0, 10, 20, .2);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-btn:hover,
#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-summary-views button:hover,
#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-role-tabs button:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 16px rgba(0, 232, 254, .25), 0 7px 18px rgba(0, 10, 20, .24);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-btn.success,
#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-next {
  border-color: #22efff;
  background: linear-gradient(105deg, #00cce9, #0879c4 58%, #0067a9);
  color: #fff;
  box-shadow: 0 0 14px rgba(0, 221, 249, .36), inset 0 1px 0 rgba(255, 255, 255, .25);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-btn.secondary,
#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-back {
  border-color: rgba(213, 237, 251, .62);
  background: linear-gradient(105deg, rgba(12, 30, 48, .92), rgba(40, 62, 80, .86));
  color: #f4faff;
}

#gen4smshrs-configurator .g4s-reference-shell :is(.g4s-btn, .g4s-reference-next):disabled {
  opacity: .58;
  cursor: not-allowed;
  filter: saturate(.58);
  transform: none;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-pill {
  border: 1px solid rgba(0, 232, 254, .62);
  border-radius: 999px;
  background: rgba(0, 116, 160, .52);
  color: var(--g4s-ref-cyan);
}

/* Decision cards: sport and audience imagery are clipped raster photo regions only. */
#gen4smshrs-configurator .g4s-reference-shell .g4s-sport-step-panel,
#gen4smshrs-configurator .g4s-reference-shell .g4s-audience-step-panel,
#gen4smshrs-configurator .g4s-reference-shell .g4s-brand-step-panel {
  align-content: start;
  gap: 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#gen4smshrs-configurator .g4s-reference-shell :is(.g4s-sport-step-panel, .g4s-audience-step-panel, .g4s-brand-step-panel) .g4s-form-step-head {
  justify-content: center;
  gap: 8px;
  margin: 14px 0 2px;
  padding: 0;
  border: 0;
  text-align: center;
}

#gen4smshrs-configurator .g4s-reference-shell :is(.g4s-sport-step-panel, .g4s-audience-step-panel, .g4s-brand-step-panel) .g4s-form-step-head .g4s-kicker {
  width: 100%;
  margin: 0;
  color: #f0f7fc;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

#gen4smshrs-configurator .g4s-reference-shell :is(.g4s-sport-step-panel, .g4s-audience-step-panel, .g4s-brand-step-panel) .g4s-form-step-head h2 {
  width: 100%;
  color: #fff;
  font-size: clamp(34px, 3.4vw, 55px);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-decision-instruction {
  display: inline-flex;
  justify-self: center;
  width: max-content;
  max-width: 100%;
  margin: 0 0 2px;
  padding: 8px 18px;
  border: 1px solid rgba(0, 232, 254, .66);
  border-radius: 999px;
  background: rgba(0, 95, 138, .72);
  color: var(--g4s-ref-cyan);
  font-size: 14px;
  font-weight: 850;
  text-transform: uppercase;
  box-shadow: 0 0 15px rgba(0, 206, 239, .24);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-decision-instruction strong {
  display: none;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-grid.is-count-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  min-width: 0;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-grid.is-gender,
#gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-grid.is-count-3:not(.is-brand) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-card {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0;
  min-width: 0;
  min-height: 0;
  height: min(54svh, 500px);
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(211, 239, 255, .7);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(5, 22, 38, .1), rgba(3, 20, 33, .88));
  color: #f7fbff;
  box-shadow: 0 14px 34px rgba(0, 11, 20, .3), inset 0 1px 0 rgba(255, 255, 255, .15);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-card:hover {
  border-color: rgba(0, 232, 254, .9);
  background: linear-gradient(180deg, rgba(7, 43, 64, .12), rgba(3, 20, 33, .9));
  transform: translateY(-2px);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-card.is-active {
  border: 2px solid var(--g4s-ref-cyan);
  background: linear-gradient(180deg, rgba(4, 34, 52, .12), rgba(2, 24, 41, .9));
  box-shadow: 0 0 20px rgba(0, 232, 254, .5), inset 0 0 0 1px rgba(0, 232, 254, .3);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-card > .g4s-step-card-visual {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border-radius: 0;
  background-color: rgba(24, 50, 70, .6);
  background-repeat: no-repeat;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-step-card-visual > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  border-radius: 0;
  transition: transform .2s ease, opacity .2s ease;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-card:hover .g4s-step-card-visual > img {
  transform: scale(1.025);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-sport-image,
#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-audience-image {
  background-size: 1672px 941px;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-sport-image > img,
#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-audience-image > img {
  opacity: 0;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-sport-image {
  background-image: url("img/reference-20261024/reference-01.png");
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-sport-image.is-football {
  background-position: -338px -280px;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-sport-image.is-handball {
  background-position: -660px -280px;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-sport-image.is-tabletennis {
  background-position: -980px -280px;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-sport-image.is-teamsport {
  background-position: -1307px -280px;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-audience-image {
  background-image: url("img/reference-20261024/reference-02.png");
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-audience-image.is-male {
  background-position: -337px -279px;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-audience-image.is-female {
  background-position: -775px -279px;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-audience-image.is-kids {
  background-position: -1205px -279px;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-card > span:last-child:not(.g4s-step-check) {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 154px;
  padding: 12px 15px 15px;
  background: linear-gradient(180deg, rgba(4, 22, 36, .88), rgba(3, 20, 33, .97));
  text-align: center;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-card strong {
  color: #fff;
  font-family: "G4S Kenyan Coffee", "G4S Smash Spark", "G4S Rubik", sans-serif;
  font-size: clamp(21px, 1.65vw, 29px);
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-card small {
  color: rgba(238, 247, 253, .95);
  font-size: 15px;
  font-weight: 450;
  line-height: 1.35;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-step-card-action {
  justify-self: center;
  min-width: 170px;
  margin-top: 3px;
  padding: 10px 20px;
  border: 1px solid var(--g4s-ref-cyan);
  border-radius: 999px;
  background: rgba(3, 27, 45, .72);
  color: var(--g4s-ref-cyan);
  font-size: 14px;
  font-weight: 850;
  line-height: 1;
  text-transform: uppercase;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-card.is-active .g4s-step-card-action {
  background: linear-gradient(105deg, #00d9f5, #047bb8);
  color: #fff;
  box-shadow: 0 0 12px rgba(0, 232, 254, .4);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-step-check {
  z-index: 2;
  top: 12px;
  right: 12px;
  width: 29px;
  height: 29px;
  background: var(--g4s-ref-cyan);
  color: #052c42;
  box-shadow: 0 0 12px rgba(0, 232, 254, .52);
}

/* Brand tiles use logos on transparent glass, in the 4-by-2 reference grid. */
#gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-grid.is-brand {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-content: center;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-grid.is-brand .g4s-step-decision-card {
  display: grid;
  place-items: center;
  height: clamp(118px, 16vw, 150px);
  min-height: 0;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(14, 35, 53, .84), rgba(3, 18, 31, .78));
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-grid.is-brand .g4s-step-card-visual {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-grid.is-brand .g4s-choice-logo {
  max-width: 68%;
  max-height: 72px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-grid.is-brand .g4s-brand-wordmark,
#gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-grid.is-brand .g4s-choice-icon.has-logo {
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-grid.is-brand .g4s-choice-logo[src*="adidas"],
#gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-grid.is-brand .g4s-choice-logo[src*="jako"],
#gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-grid.is-brand .g4s-choice-logo[src*="erima"] {
  filter: grayscale(1) brightness(0) invert(1);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-grid.is-brand .g4s-step-decision-card.is-active {
  border: 2px solid var(--g4s-ref-cyan);
  background: linear-gradient(145deg, rgba(0, 124, 161, .48), rgba(4, 22, 37, .88));
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-grid.is-brand .g4s-step-check {
  display: none;
}

/* Breadcrumb and choice screens 3-4. */
#gen4smshrs-configurator .g4s-reference-shell .g4s-kit-tier-step-panel {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 0;
  padding: 16px 18px;
  background: linear-gradient(145deg, rgba(7, 29, 48, .76), rgba(2, 17, 30, .74));
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-kit-tier-step-panel .g4s-form-step-head {
  justify-content: center;
  margin: 0;
  border: 0;
  text-align: center;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-kit-tier-step-panel .g4s-form-step-head h2 {
  width: 100%;
  font-size: clamp(36px, 3.4vw, 56px);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-kit-tier-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  min-width: 0;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-kit-tier-card {
  display: grid;
  grid-template-columns: minmax(160px, .8fr) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  min-width: 0;
  min-height: min(42svh, 390px);
  padding: 16px;
  border: 1px solid rgba(199, 232, 251, .58);
  border-radius: 20px;
  background: linear-gradient(140deg, rgba(5, 25, 42, .74), rgba(2, 18, 31, .8));
  color: #f5faff;
  text-align: left;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-kit-tier-card.is-active {
  border: 2px solid var(--g4s-ref-cyan);
  box-shadow: 0 0 17px rgba(0, 232, 254, .38), inset 0 0 0 1px rgba(0, 232, 254, .2);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-kit-tier-image {
  display: grid;
  min-width: 0;
  min-height: 265px;
  place-items: center;
  overflow: hidden;
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(32, 76, 105, .42), rgba(2, 18, 30, .18));
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-kit-tier-image img {
  width: 100%;
  height: 100%;
  max-height: 340px;
  object-fit: contain;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-kit-tier-copy {
  display: grid;
  gap: 8px;
  align-content: center;
  min-width: 0;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-kit-tier-copy small {
  color: var(--g4s-ref-cyan);
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-kit-tier-copy strong {
  font-family: "G4S Kenyan Coffee", "G4S Smash Spark", "G4S Rubik", sans-serif;
  font-size: clamp(26px, 2vw, 35px);
  line-height: 1;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-kit-tier-copy b {
  color: #fff;
  font-size: 16px;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-kit-tier-copy em {
  color: rgba(231, 243, 251, .9);
  font-size: 14px;
  font-style: normal;
  line-height: 1.35;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-kit-tier-copy > span {
  justify-self: start;
  margin-top: 7px;
  padding: 9px 24px;
  border: 1px solid rgba(215, 241, 255, .8);
  border-radius: 999px;
  color: #fff;
  font-weight: 800;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-kit-tier-card.is-active .g4s-kit-tier-copy > span {
  border-color: var(--g4s-ref-cyan);
  background: rgba(0, 145, 186, .56);
  box-shadow: 0 0 13px rgba(0, 232, 254, .4);
}

/* Step 5 product colour selector and complete kit preview. */
#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-kit-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(300px, .78fr);
  gap: 16px;
  align-items: stretch;
  min-width: 0;
  min-height: calc(100svh - 186px);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-kit-stage,
#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-kit-preview {
  position: relative;
  display: grid;
  align-content: start;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--g4s-ref-line);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(5, 22, 38, .68), rgba(2, 18, 31, .42));
  box-shadow: 0 15px 38px rgba(0, 11, 20, .26), inset 0 1px 0 rgba(255, 255, 255, .12);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-kit-stage {
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  padding: 14px 16px 16px;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-stage-head {
  margin: 0 0 8px;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-stage-head h2 {
  font-size: clamp(31px, 2.65vw, 46px);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-role-tabs {
  display: inline-flex;
  justify-self: start;
  gap: 0;
  width: max-content;
  max-width: 100%;
  margin-bottom: 6px;
  padding: 3px;
  border: 1px solid rgba(218, 241, 255, .28);
  border-radius: 999px;
  background: rgba(3, 18, 31, .8);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-role-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 7px 19px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  text-transform: none;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-role-tabs button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-role-tabs button.is-active {
  border-color: var(--g4s-ref-cyan);
  background: linear-gradient(100deg, #00cde9, #0879bd);
  box-shadow: 0 0 12px rgba(0, 232, 254, .38);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-color-stage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  justify-items: center;
  min-height: 0;
  overflow: hidden;
  perspective: 900px;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-color-product {
  position: relative;
  display: grid;
  grid-column: 3;
  grid-row: 1;
  width: min(48%, 440px);
  height: min(47svh, 430px);
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  transform: translateX(calc(var(--offset, 0) * 46%)) scale(calc(1 - var(--depth, 1) * .085));
  filter: brightness(calc(1 - var(--depth, 1) * .15));
  opacity: calc(1 - var(--depth, 1) * .12);
  z-index: calc(5 - var(--depth, 1));
  transition: transform .2s ease, filter .2s ease, opacity .2s ease;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-color-product.is-active {
  filter: none;
  opacity: 1;
  transform: translateX(0) scale(1);
  z-index: 8;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-color-product img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .4));
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-color-arrow {
  position: absolute;
  z-index: 12;
  top: 48%;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(231, 245, 255, .85);
  border-radius: 50%;
  background: rgba(3, 18, 30, .82);
  color: #fff;
  font-size: 34px;
  line-height: 1;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-color-arrow.is-prev { left: 8px; }
#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-color-arrow.is-next { right: 8px; }

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-color-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 7px 12px;
  margin: 7px auto 0;
  padding: 9px 17px;
  border: 1px solid rgba(211, 239, 255, .4);
  border-radius: 999px;
  background: rgba(2, 19, 32, .82);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-color-controls > strong {
  flex-basis: 100%;
  color: #f2f8fc;
  font-size: 12px;
  line-height: 1;
  text-align: center;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-color-controls > span:last-child {
  flex-basis: 100%;
  color: #fff;
  font-size: 14px;
  text-align: center;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-kit-color-swatches {
  display: inline-flex;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-kit-color-swatch {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 2px solid rgba(244, 250, 255, .9);
  border-radius: 50%;
  background: var(--swatch, #fff);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-kit-color-swatch.is-active {
  outline: 3px solid var(--g4s-ref-cyan);
  outline-offset: 3px;
  box-shadow: 0 0 13px rgba(0, 232, 254, .5);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-kit-preview {
  grid-template-rows: minmax(0, 1fr) auto auto;
  min-height: 0;
  padding: 12px;
  background: linear-gradient(180deg, rgba(14, 37, 56, .52), rgba(2, 17, 29, .74));
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-outfit {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(0, 232, 254, .2);
  border-radius: 15px;
  background: radial-gradient(ellipse at 50% 64%, rgba(73, 133, 164, .24), transparent 68%), linear-gradient(180deg, rgba(7, 30, 49, .4), rgba(2, 17, 29, .28));
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-outfit.has-mannequin {
  min-height: 360px;
  background: radial-gradient(ellipse at 50% 78%, rgba(132, 194, 222, .34), transparent 64%), linear-gradient(180deg, rgba(6, 28, 47, .42), rgba(2, 16, 27, .28));
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-mannequin {
  position: relative;
  display: grid;
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 2 / 3;
  min-height: 0;
  place-items: center;
  overflow: hidden;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-mannequin-image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 13px 17px rgba(0, 0, 0, .42));
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-mannequin-layer {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  text-align: center;
  pointer-events: none;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-mannequin-layer.is-sponsor {
  top: 33%;
  left: 50%;
  width: 19%;
  height: 7%;
  transform: translate(-50%, -50%);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-mannequin-layer.is-club {
  top: 24%;
  left: 59%;
  width: 9%;
  height: 7%;
  transform: translate(-50%, -50%);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-mannequin-layer.is-shorts-logo {
  top: 51%;
  left: 59%;
  width: 7%;
  height: 6%;
  transform: translate(-50%, -50%);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-mannequin-layer.is-shorts-number {
  top: 51%;
  left: 40%;
  width: 7%;
  height: 8%;
  transform: translate(-50%, -50%);
  color: #f8fbff;
  font-family: "G4S Kenyan Coffee", "G4S Rubik", sans-serif;
  font-size: clamp(12px, 1.5vw, 20px);
  font-weight: 900;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .95), 0 0 4px rgba(0, 0, 0, .85);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-mannequin-layer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#gen4smshrs-configurator .g4s-reference-product-preview {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
}

#gen4smshrs-configurator .g4s-reference-product-preview > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 9px 14px rgba(0, 0, 0, .42));
}

#gen4smshrs-configurator .g4s-reference-kit-preview .g4s-reference-product-preview.is-shirt {
  position: absolute;
  top: 3%;
  left: 17%;
  width: 68%;
  height: 74%;
}

#gen4smshrs-configurator .g4s-reference-kit-preview .g4s-reference-product-preview.is-shorts {
  position: absolute;
  right: 9%;
  bottom: 11%;
  width: 42%;
  height: 35%;
}

#gen4smshrs-configurator .g4s-reference-kit-preview .g4s-reference-product-preview.is-socks {
  position: absolute;
  bottom: 10%;
  left: 8%;
  width: 22%;
  height: 37%;
}

#gen4smshrs-configurator .g4s-reference-part-tabs {
  margin-top: 9px;
}

#gen4smshrs-configurator .g4s-reference-part-tabs .g4s-kit-substeps {
  grid-template-columns: repeat(auto-fit, minmax(62px, 1fr));
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
}

#gen4smshrs-configurator .g4s-reference-part-tabs .g4s-kit-substep {
  min-height: 45px;
  padding: 5px;
  border: 1px solid rgba(219, 240, 252, .4);
  border-radius: 10px;
  background: rgba(3, 22, 37, .75);
  color: #f6fbff;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-outfit-caption {
  margin-top: 8px;
  color: #f2f8fc;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

/* Step 6 upload and step 7 configuration editor. */
#gen4smshrs-configurator .g4s-reference-shell .g4s-logo-upload-step,
#gen4smshrs-configurator .g4s-reference-shell .g4s-logo-placement-step {
  display: grid;
  grid-template-columns: minmax(320px, .88fr) minmax(0, 1.12fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px 16px;
  min-width: 0;
  min-height: 0;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-upload-title,
#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-no-logo {
  grid-column: 1 / -1;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-upload-title {
  margin: 0;
  color: #fff;
  font-family: "G4S Kenyan Coffee", "G4S Smash Spark", "G4S Rubik", sans-serif;
  font-size: clamp(34px, 3.2vw, 52px);
  line-height: 1;
  text-transform: uppercase;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-design-control-stack {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-design-control-stack > :is(.g4s-panel, .g4s-form-panel, aside) {
  min-width: 0;
  border: 1px solid var(--g4s-ref-line);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(9, 36, 57, .83), rgba(3, 19, 33, .82));
  box-shadow: 0 12px 30px rgba(0, 12, 22, .25);
  color: var(--g4s-ref-ink);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-logo-upload-preview,
#gen4smshrs-configurator .g4s-reference-shell .g4s-placement-preview-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  padding: 13px;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-logo-upload-preview .g4s-form-step-head,
#gen4smshrs-configurator .g4s-reference-shell .g4s-placement-preview-panel .g4s-form-step-head {
  margin: 0;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-logo-upload-preview .g4s-shirt-editor,
#gen4smshrs-configurator .g4s-reference-shell .g4s-placement-preview-panel .g4s-shirt-editor {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 14px;
  border: 1px solid rgba(203, 234, 253, .42);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(7, 28, 47, .62), rgba(2, 17, 30, .44));
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-logo-placement-step .g4s-design-control-stack {
  grid-row: 2;
  grid-column: 1;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-logo-placement-step .g4s-placement-preview-panel {
  grid-row: 2;
  grid-column: 2;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-no-logo {
  display: block;
  margin: 0;
  padding: 10px 16px;
  border: 1px solid rgba(0, 232, 254, .7);
  border-radius: 12px;
  background: rgba(0, 108, 152, .78);
  color: #f5fbff;
  font-size: 14px;
  line-height: 1.35;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-print-info {
  margin-top: 9px;
  overflow: hidden;
  border: 1px solid rgba(205, 235, 252, .34);
  border-radius: 12px;
  background: rgba(3, 21, 36, .62);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-print-info > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 13px;
  color: #f5faff;
  font-weight: 800;
  list-style: none;
  cursor: pointer;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-print-info > summary::-webkit-details-marker {
  display: none;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-print-info > summary::after {
  content: "+";
  color: var(--g4s-ref-cyan);
  font-size: 20px;
  line-height: 1;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-print-info[open] > summary::after {
  content: "−";
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-print-info > summary small {
  margin-left: auto;
  color: #cde0ed;
  font-size: 10px;
  letter-spacing: .06em;
  white-space: nowrap;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-print-info > p {
  margin: 0;
  padding: 0 13px 12px;
  color: #d9e9f3;
  font-size: 12px;
  line-height: 1.45;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-design-logo-panel,
#gen4smshrs-configurator .g4s-reference-shell .g4s-placement-inspector-panel {
  padding: 16px;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-placement-stage {
  min-height: 0;
  border: 1px solid rgba(205, 235, 251, .4);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(7, 31, 51, .6), rgba(2, 18, 31, .5));
}

/* Step 8 team table, editor and live jersey preview. */
#gen4smshrs-configurator .g4s-reference-shell .g4s-team-step-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-team-focus-panel {
  padding: 14px 16px;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-team-entry-workspace {
  display: grid;
  grid-template-columns: minmax(260px, .82fr) minmax(290px, .92fr) minmax(300px, 1fr);
  gap: 12px;
  align-items: stretch;
  min-width: 0;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-team-player-roster,
#gen4smshrs-configurator .g4s-reference-shell .g4s-team-player-panel,
#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-player-preview {
  min-width: 0;
  min-height: 0;
  padding: 12px;
  border: 1px solid var(--g4s-ref-line);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(8, 33, 53, .84), rgba(3, 18, 31, .82));
  color: #f5faff;
  box-shadow: 0 12px 28px rgba(0, 11, 20, .23);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-team-player-roster {
  max-height: calc(100svh - 310px);
  overflow: auto;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-team-mobile-roster-list {
  display: grid;
  gap: 5px;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-team-mobile-player {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid rgba(204, 235, 253, .34);
  border-radius: 11px;
  background: rgba(9, 39, 61, .74);
  color: #f6fbff;
  text-align: left;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-team-mobile-player.is-active {
  border-color: var(--g4s-ref-cyan);
  background: linear-gradient(105deg, rgba(0, 134, 174, .62), rgba(3, 43, 65, .88));
  box-shadow: 0 0 12px rgba(0, 232, 254, .3);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-team-mobile-player > span:first-child {
  grid-row: 1 / 3;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(221, 241, 252, .46);
  border-radius: 9px;
  background: rgba(3, 23, 38, .8);
  font-weight: 850;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-team-mobile-player strong,
#gen4smshrs-configurator .g4s-reference-shell .g4s-team-mobile-player em,
#gen4smshrs-configurator .g4s-reference-shell .g4s-team-mobile-player small {
  min-width: 0;
  color: inherit;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-team-mobile-player em,
#gen4smshrs-configurator .g4s-reference-shell .g4s-team-mobile-player small {
  grid-column: 2 / -1;
  font-size: 11px;
  font-style: normal;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-player-preview {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-player-preview h3 {
  margin: 0 0 8px;
  color: #f4f9fd;
  font-size: 14px;
  font-weight: 850;
  text-transform: uppercase;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-player-preview .g4s-reference-product-preview {
  min-height: 320px;
  border: 1px solid rgba(207, 237, 255, .35);
  border-radius: 13px;
  background: radial-gradient(ellipse at 50% 72%, rgba(94, 158, 184, .26), transparent 68%), rgba(4, 22, 37, .48);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-player-preview .g4s-reference-product-preview > img {
  max-height: 100%;
  padding: 12px;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-size-summary {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(140px, .26fr) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--g4s-ref-line);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(8, 33, 53, .86), rgba(3, 18, 31, .82));
  box-shadow: 0 12px 28px rgba(0, 11, 20, .2);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-size-tabs {
  display: grid;
  gap: 7px;
  align-content: center;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-size-tabs button {
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid rgba(207, 236, 253, .42);
  border-radius: 10px;
  background: rgba(2, 19, 33, .78);
  color: #f3f9fd;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-size-tabs button.is-active {
  border-color: var(--g4s-ref-cyan);
  background: linear-gradient(100deg, rgba(0, 150, 188, .72), rgba(5, 75, 111, .82));
  box-shadow: 0 0 12px rgba(0, 232, 254, .25);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-size-scroll {
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-color: rgba(0, 232, 254, .58) rgba(3, 19, 32, .62);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-size-scroll table {
  width: 100%;
  min-width: 500px;
  border-collapse: separate;
  border-spacing: 0;
  color: #f4f9fc;
  text-align: center;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-size-scroll caption {
  padding: 0 0 8px;
  color: #dcecf5;
  font-size: 12px;
  font-weight: 750;
  text-align: left;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-size-scroll :is(th, td) {
  min-width: 48px;
  padding: 9px 8px;
  border-right: 1px solid rgba(203, 235, 255, .22);
  border-bottom: 1px solid rgba(203, 235, 255, .22);
  font-size: 12px;
  white-space: nowrap;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-size-scroll thead th {
  border-top: 1px solid rgba(203, 235, 255, .22);
  background: rgba(3, 30, 49, .74);
  color: var(--g4s-ref-cyan);
  font-weight: 850;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-size-scroll tr > :first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  border-left: 1px solid rgba(203, 235, 255, .22);
  background: #08243a;
  text-align: left;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-size-scroll tbody td {
  background: rgba(4, 24, 39, .58);
  font-size: 16px;
  font-weight: 850;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-team-player-panel :is(input, select) {
  width: 100%;
  min-height: 40px;
  padding: 7px 10px;
  border: 1px solid rgba(206, 235, 252, .46);
  border-radius: 9px;
  background: rgba(1, 16, 28, .78);
  color: #f5fbff;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-team-player-panel label > span,
#gen4smshrs-configurator .g4s-reference-shell .g4s-team-player-panel .g4s-team-player-role-field > span {
  color: #dcebf5;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-team-player-panel .g4s-team-player-fields,
#gen4smshrs-configurator .g4s-reference-shell .g4s-team-player-panel .g4s-team-player-sizes {
  gap: 10px;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-team-player-panel .g4s-team-player-fields > label {
  min-width: 0;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-team-focus-kit {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-team-focus-chip {
  border: 1px solid rgba(0, 232, 254, .48);
  border-radius: 10px;
  background: rgba(3, 34, 53, .76);
  color: #f5fbff;
}

/* Step 9: preview, review and narrow price rail. */
#gen4smshrs-configurator .g4s-reference-shell .g4s-summary-step-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 24vw, 340px);
  gap: 14px;
  align-items: stretch;
  min-width: 0;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-summary-overview-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: calc(100svh - 116px);
  padding: 14px;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-summary-overview-panel > .g4s-form-step-head {
  align-items: center;
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 0;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-summary-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 14px;
  min-width: 0;
  margin: 0 0 8px;
  padding: 0 0 8px;
  border-bottom: 1px solid rgba(207, 235, 252, .24);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-summary-head > .g4s-form-step-head {
  flex: 1 1 250px;
  margin: 0;
  padding: 0;
  border: 0;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-summary-head .g4s-reference-role-tabs {
  margin: 0;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-summary-overview-panel > .g4s-form-step-head h2 {
  width: auto;
  font-size: clamp(34px, 3vw, 50px);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-summary-body {
  display: grid;
  grid-template-columns: minmax(230px, .75fr) minmax(0, 1.25fr);
  gap: 12px;
  min-width: 0;
  min-height: 0;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-summary-preview {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(205, 237, 255, .46);
  border-radius: 17px;
  background: radial-gradient(ellipse at 50% 76%, rgba(108, 165, 191, .32), transparent 66%), linear-gradient(180deg, rgba(15, 55, 82, .72), rgba(3, 22, 37, .56));
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-summary-preview .g4s-reference-outfit {
  border: 0;
  border-radius: 0;
  background: transparent;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-summary-preview .g4s-reference-product-preview.is-shirt,
#gen4smshrs-configurator .g4s-reference-shell .g4s-summary-preview .g4s-reference-product-preview.is-keeper {
  width: 86%;
  height: 92%;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-summary-preview .g4s-reference-product-preview.is-shorts {
  width: 38%;
  height: 28%;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-summary-preview .g4s-reference-product-preview.is-socks {
  width: 22%;
  height: 32%;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-summary-views {
  display: flex;
  justify-content: center;
  gap: 7px;
  padding: 9px;
  border-top: 1px solid rgba(213, 238, 254, .28);
  background: rgba(2, 17, 29, .68);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-summary-views button {
  min-height: 35px;
  padding: 6px 15px;
  font-size: 11px;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-summary-views button.is-active {
  border-color: var(--g4s-ref-cyan);
  background: linear-gradient(100deg, #00cde9, #0879bd);
  box-shadow: 0 0 12px rgba(0, 232, 254, .34);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-summary-details {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-summary-details > :is(.g4s-order-review, .g4s-order-quick-review, .g4s-order-note-panel, .g4s-flow-actions, .g4s-checkout-panel) {
  min-width: 0;
  margin: 0;
  border: 1px solid rgba(207, 237, 255, .43);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(8, 34, 55, .82), rgba(2, 17, 29, .86));
  color: #f4f9fc;
  box-shadow: 0 10px 25px rgba(0, 10, 18, .2);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-team-totals {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin: 10px 0;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-team-totals > div {
  display: grid;
  align-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 72px;
  padding: 9px;
  border: 1px solid rgba(205, 237, 255, .32);
  border-radius: 11px;
  background: rgba(4, 25, 41, .74);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-team-totals dt {
  color: #d8e9f3;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.2;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-team-totals dd {
  margin: 0;
  color: var(--g4s-ref-cyan);
  font-family: "G4S Kenyan Coffee", "G4S Smash Spark", "G4S Rubik", sans-serif;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-summary-details .g4s-order-note-panel {
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  padding: 13px;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-summary-details .g4s-order-note-panel textarea {
  min-height: 82px;
  background: rgba(2, 16, 28, .82);
  color: #f6fbff;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-summary-details .g4s-order-note-panel :is(p, label, span) {
  color: #e6f1f8;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-price {
  position: sticky;
  top: 12px;
  align-self: start;
  min-width: 0;
  padding: 14px;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-price-head {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(213, 237, 254, .35);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-price-head h2 {
  margin: 0;
  color: #f8fbff;
  font-size: 18px;
  font-weight: 900;
  text-transform: uppercase;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-price-list {
  color: #f2f8fc;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-price-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  padding: 9px 0;
  border-bottom: 1px solid rgba(209, 234, 250, .2);
  color: #e5f0f7;
  font-size: 13px;
  line-height: 1.25;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-price-line strong {
  color: #f9fcff;
  text-align: right;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-final-price-panel .g4s-price-line.is-total {
  margin-top: 8px;
  padding: 12px;
  border: 1px solid rgba(0, 232, 254, .45);
  border-radius: 11px;
  background: rgba(0, 111, 149, .36);
  color: #fff;
  font-size: 17px;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-final-price-panel .g4s-price-line.is-total strong {
  color: var(--g4s-ref-cyan);
  font-size: 19px;
}

/* Bottom step navigator matches the left/back and cyan next button treatment. */
#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-step-nav {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(220px, auto) minmax(180px, 1fr) minmax(220px, auto);
  gap: 14px;
  align-items: center;
  min-height: 78px;
  margin: 0;
  padding: 7px 9px;
  border: 1px solid rgba(207, 235, 252, .43);
  border-radius: 18px;
  background: linear-gradient(90deg, rgba(3, 17, 29, .88), rgba(7, 29, 46, .82));
  box-shadow: 0 10px 26px rgba(0, 11, 20, .24);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-step-nav .g4s-reference-back,
#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-step-nav .g4s-reference-next {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  min-width: 220px;
  min-height: 62px;
  gap: 12px;
  padding: 9px 19px;
  font-size: 15px;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-step-nav .g4s-reference-next {
  justify-self: end;
  min-width: 230px;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-step-nav .g4s-reference-back > b,
#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-step-nav .g4s-reference-next > b {
  color: #fff;
  font-size: 29px;
  font-weight: 400;
  line-height: .7;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-step-nav :is(.g4s-reference-back, .g4s-reference-next) small {
  display: block;
  margin-top: 2px;
  color: inherit;
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-progress {
  display: grid;
  justify-items: center;
  gap: 9px;
  min-width: 0;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-progress strong {
  color: #f5f9fc;
  font-size: 13px;
  font-weight: 750;
  text-align: center;
  text-transform: uppercase;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-progress > div {
  display: flex;
  justify-content: center;
  gap: 12px;
  width: min(100%, 390px);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-progress i {
  display: block;
  flex: 1 1 0;
  max-width: 18px;
  height: 9px;
  border: 1px solid rgba(211, 235, 250, .24);
  border-radius: 999px;
  background: #68849a;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-progress i.is-complete {
  border-color: var(--g4s-ref-cyan);
  background: var(--g4s-ref-cyan);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-progress i.is-active {
  width: 19px;
  height: 19px;
  margin-top: -5px;
  border: 2px solid var(--g4s-ref-cyan);
  background: #061b2c;
  box-shadow: 0 0 12px rgba(0, 232, 254, .45);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-step-nav .g4s-mobile-step-dock {
  display: none;
}

/* Landing view: copy, player silhouette and set preview over the same stadium. */
#gen4smshrs-configurator .g4s-reference-shell.is-tenant-start {
  grid-template-rows: auto 1fr auto;
}

#gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(430px, .82fr) minmax(0, 1.18fr);
  align-items: center;
  min-height: calc(100svh - 70px);
  padding: 36px clamp(36px, 5vw, 84px) 42px;
  overflow: hidden;
  background: transparent;
}

#gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-copy {
  position: relative;
  z-index: 2;
  align-self: center;
  max-width: 560px;
  padding: clamp(22px, 2vw, 34px);
  border: 1px solid rgba(209, 238, 255, .46);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(3, 21, 36, .77), rgba(4, 22, 38, .6));
  box-shadow: 0 16px 38px rgba(0, 12, 23, .26);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

#gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-copy h1 {
  margin: 8px 0 12px;
  color: #fff;
  font-family: "G4S Kenyan Coffee", "G4S Smash Spark", "G4S Rubik", sans-serif;
  font-size: clamp(45px, 5vw, 73px);
  font-weight: 900;
  line-height: .88;
  text-transform: uppercase;
  text-shadow: 0 4px 18px rgba(0, 8, 16, .34);
}

#gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-copy > p:not(.g4s-kicker) {
  color: #eff7fc;
  font-size: 17px;
  line-height: 1.45;
}

#gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-copy > .g4s-kicker {
  margin: 0;
  color: #f0f8fd;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
}

#gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-start-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0;
}

#gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-reference-hero-player {
  position: absolute;
  z-index: 1;
  top: 5%;
  bottom: 2%;
  left: 28%;
  width: 36%;
  pointer-events: none;
  background-image: url("img/reference-20261024/hero-player.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
  filter: drop-shadow(0 18px 18px rgba(0, 12, 20, .4));
}

#gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-visual {
  position: relative;
  z-index: 2;
  display: grid;
  align-self: center;
  min-width: 0;
  min-height: min(68svh, 640px);
  margin-left: clamp(60px, 8vw, 130px);
  padding: 14px;
  border: 1px solid rgba(210, 239, 255, .56);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(6, 28, 46, .62), rgba(3, 19, 33, .66));
  box-shadow: 0 16px 40px rgba(0, 10, 18, .32);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-shirt-showcase {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 8px;
  min-height: 0;
  padding: 20px 8px 64px;
}

#gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-view-card {
  min-width: 0;
  margin: 0;
  padding: 8px;
  border: 1px solid rgba(213, 238, 254, .36);
  border-radius: 13px;
  background: rgba(3, 19, 32, .48);
}

#gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-view-card img {
  display: block;
  width: 100%;
  height: min(50svh, 470px);
  object-fit: contain;
}

#gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-view-card figcaption {
  color: #f3f9fd;
  font-size: 12px;
  text-align: center;
  text-transform: uppercase;
}

#gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-shirt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  align-items: center;
  justify-items: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 10px 10px 60px;
}

#gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-shirt > img {
  grid-column: 1;
  display: block;
  width: 100%;
  height: min(57svh, 540px);
  object-fit: contain;
  filter: drop-shadow(0 18px 20px rgba(0, 0, 0, .38));
}

#gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-shirt.is-reference-focused {
  grid-template-rows: minmax(0, 1fr);
  padding-top: 14px;
}

#gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-shirt.is-reference-focused > .g4s-reference-product-preview {
  grid-column: 1;
  width: 100%;
  height: min(57svh, 540px);
  min-height: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-shirt.is-reference-focused > .g4s-reference-product-preview > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 20px rgba(0, 0, 0, .42));
}

#gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-reference-hero-controls {
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
}

#gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-reference-hero-types {
  position: absolute;
  top: 50%;
  right: 22px;
  display: grid;
  gap: 9px;
  transform: translateY(-50%);
  pointer-events: auto;
}

#gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-reference-hero-types button {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(221, 242, 255, .72);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(20, 50, 72, .76), rgba(4, 22, 38, .68));
  color: #f7fbff;
  box-shadow: 0 7px 17px rgba(0, 10, 20, .28), inset 0 1px 0 rgba(255, 255, 255, .12);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}

#gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-reference-hero-types button svg {
  display: block;
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

#gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-reference-hero-types button:hover {
  transform: translateY(-1px);
  border-color: var(--g4s-ref-cyan);
  box-shadow: 0 0 14px rgba(0, 232, 254, .32), 0 7px 17px rgba(0, 10, 20, .28);
}

#gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-reference-hero-types button.is-active {
  border: 2px solid var(--g4s-ref-cyan);
  background: linear-gradient(145deg, rgba(0, 176, 211, .88), rgba(4, 101, 157, .92));
  color: #fff;
  box-shadow: 0 0 16px rgba(0, 232, 254, .55), inset 0 0 0 1px rgba(255, 255, 255, .22);
}

#gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-reference-hero-types button:disabled {
  opacity: .42;
  cursor: not-allowed;
  filter: saturate(.45);
  transform: none;
}

#gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-reference-hero-dots {
  position: absolute;
  right: 80px;
  bottom: 85px;
  left: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  pointer-events: auto;
}

#gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-reference-hero-dots button {
  display: grid;
  width: 13px;
  height: 13px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(193, 214, 228, .72);
  box-shadow: 0 1px 5px rgba(0, 8, 15, .4);
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}

#gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-reference-hero-dots button:hover {
  transform: scale(1.14);
  background: #e7f5fc;
}

#gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-reference-hero-dots button.is-active {
  width: 15px;
  height: 15px;
  background: var(--g4s-ref-cyan);
  box-shadow: 0 0 12px rgba(0, 232, 254, .7);
}

#gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-reference-hero-dots button:disabled {
  opacity: .38;
  cursor: not-allowed;
}

#gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-product-tag::after {
  position: absolute;
  top: 50%;
  right: 13px;
  content: "›";
  color: #fff;
  font-size: 32px;
  font-weight: 300;
  line-height: 1;
  transform: translateY(-55%);
}

#gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-product-tag {
  position: absolute;
  right: 14px;
  bottom: 8px;
  left: 14px;
  display: grid;
  gap: 3px;
  padding: 11px 14px;
  border: 1px solid rgba(208, 237, 255, .5);
  border-radius: 13px;
  background: rgba(3, 20, 34, .78);
  color: #fff;
}

#gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-product-tag small {
  color: var(--g4s-ref-cyan);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

#gen4smshrs-configurator .g4s-reference-footer-copy {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 8px 38px;
  border-top: 1px solid rgba(214, 239, 255, .32);
  background: rgba(2, 17, 29, .92);
  color: rgba(241, 248, 252, .94);
  font-size: 12px;
}

#gen4smshrs-configurator .g4s-reference-footer-copy :is(a, button) {
  color: #f4f9fc;
  text-decoration: none;
}

#gen4smshrs-configurator .g4s-reference-footer-copy nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
}

#gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-company-benefit {
  max-width: 1180px;
  margin: 24px auto;
  border-color: var(--g4s-ref-line);
  background: rgba(3, 21, 36, .86);
  color: #f4f9fc;
}

#gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-company-benefit-grid article {
  border: 1px solid rgba(204, 235, 252, .3);
  background: rgba(6, 30, 48, .72);
  color: #f2f8fc;
}

/* Desktop viewport reductions preserve the reference composition before stacking. */
@media (max-width: 1380px) and (min-width: 961px) {
  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-multistep-form {
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 12px;
    padding-right: 18px;
    padding-left: 18px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-step-tab {
    grid-template-columns: 31px 25px minmax(0, 1fr);
    gap: 0 7px;
    padding-inline: 5px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-step-tab strong {
    font-size: 13px;
  }

  #gen4smshrs-configurator .g4s-reference-kit-workspace {
    grid-template-columns: minmax(0, 1.35fr) minmax(245px, .72fr);
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-team-entry-workspace {
    grid-template-columns: minmax(220px, .8fr) minmax(245px, 1fr);
  }

  #gen4smshrs-configurator .g4s-reference-player-preview {
    grid-column: 1 / -1;
    min-height: 300px;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-summary-step-layout {
    grid-template-columns: minmax(0, 1fr) 280px;
  }
}

/* 375/390px mobile layout: native topbar and dock, no horizontal overflow. */
@media (max-width: 960px) {
  #gen4smshrs-configurator .g4s-reference-shell {
    min-height: 100svh;
    overflow: clip;
    background-position: center center;
    background-attachment: scroll;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-sponsor-topbar {
    display: none;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-mobile-app-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: block;
    padding: 8px 12px 10px;
    border-bottom: 1px solid rgba(211, 239, 255, .36);
    background: linear-gradient(115deg, rgba(8, 62, 111, .96), rgba(4, 36, 67, .95));
    color: #f6fbff;
    box-shadow: 0 8px 22px rgba(0, 10, 19, .3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-mobile-app-chrome {
    min-height: 42px;
    color: #fff;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-mobile-app-chrome > strong {
    color: #fff;
    font-family: "G4S Kenyan Coffee", "G4S Smash Spark", sans-serif;
    font-size: 24px;
    font-style: italic;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-mobile-app-meta,
  #gen4smshrs-configurator .g4s-reference-shell .g4s-mobile-app-current,
  #gen4smshrs-configurator .g4s-reference-shell .g4s-mobile-step-status {
    color: #f0f7fc;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-mobile-app-steps {
    gap: 5px;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-mobile-app-step {
    border-color: rgba(218, 240, 253, .4);
    background: rgba(3, 21, 37, .58);
    color: #f4f9fd;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-mobile-app-step.is-active,
  #gen4smshrs-configurator .g4s-reference-shell .g4s-mobile-app-step.is-complete {
    border-color: var(--g4s-ref-cyan);
    background: rgba(0, 137, 177, .72);
    color: #fff;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-multistep-form {
    display: block;
    min-height: auto;
    padding: 11px 12px calc(96px + env(safe-area-inset-bottom));
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-stepper {
    display: none;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-stack {
    display: grid;
    grid-template-rows: auto auto;
    gap: 10px;
    min-height: 0;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-layer {
    display: grid;
    gap: 10px;
    min-height: 0;
  }

  #gen4smshrs-configurator .g4s-reference-breadcrumb {
    gap: 6px;
    min-height: 24px;
    font-size: 10px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-form-step-head {
    margin-bottom: 8px;
    padding-bottom: 8px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-form-step-head h2,
  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-stage-head h2,
  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-reference-stage-head h2 {
    font-size: clamp(25px, 8vw, 35px);
    line-height: .98;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-form-panel {
    padding: 12px;
    border-radius: 15px;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-sport-step-panel,
  #gen4smshrs-configurator .g4s-reference-shell .g4s-audience-step-panel,
  #gen4smshrs-configurator .g4s-reference-shell .g4s-brand-step-panel {
    gap: 9px;
  }

  #gen4smshrs-configurator .g4s-reference-shell :is(.g4s-sport-step-panel, .g4s-audience-step-panel, .g4s-brand-step-panel) .g4s-form-step-head {
    margin: 6px 0 0;
  }

  #gen4smshrs-configurator .g4s-reference-shell :is(.g4s-sport-step-panel, .g4s-audience-step-panel, .g4s-brand-step-panel) .g4s-form-step-head h2 {
    font-size: clamp(28px, 8vw, 38px);
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-grid.is-count-4,
  #gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-grid.is-gender,
  #gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-grid.is-count-3:not(.is-brand) {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-card {
    grid-template-columns: minmax(0, .86fr) minmax(0, 1fr);
    grid-template-rows: minmax(130px, 1fr);
    height: auto;
    min-height: 154px;
    border-radius: 14px;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-card > .g4s-step-card-visual {
    min-height: 154px;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-card > span:last-child:not(.g4s-step-check) {
    align-content: center;
    min-height: 154px;
    padding: 10px;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-card strong {
    font-size: 20px;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-card small {
    font-size: 12px;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-step-card-action {
    min-width: 0;
    padding: 8px 13px;
    font-size: 11px;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-sport-image,
  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-audience-image {
    background-image: none;
    background-size: cover;
    background-position: center;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-sport-image > img,
  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-audience-image > img {
    opacity: 1;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-grid.is-brand {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-grid.is-brand .g4s-step-decision-card {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    height: 98px;
    min-height: 98px;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-grid.is-brand .g4s-step-card-visual {
    min-height: 92px;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-kit-tier-grid,
  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-kit-workspace,
  #gen4smshrs-configurator .g4s-reference-shell .g4s-logo-upload-step,
  #gen4smshrs-configurator .g4s-reference-shell .g4s-logo-placement-step,
  #gen4smshrs-configurator .g4s-reference-shell .g4s-team-entry-workspace,
  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-summary-body,
  #gen4smshrs-configurator .g4s-reference-shell .g4s-summary-step-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-size-summary {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-size-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 7px;
    overflow-x: auto;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-size-tabs button {
    flex: 0 0 auto;
    min-width: 92px;
    text-align: center;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-size-scroll table {
    min-width: 540px;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-team-totals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-summary-head {
    align-items: flex-start;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-summary-head .g4s-reference-role-tabs {
    max-width: 100%;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-kit-tier-card {
    grid-template-columns: minmax(110px, .7fr) minmax(0, 1fr);
    min-height: 190px;
    padding: 10px;
    gap: 10px;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-kit-tier-image {
    min-height: 160px;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-kit-tier-copy strong {
    font-size: 22px;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-kit-tier-copy b,
  #gen4smshrs-configurator .g4s-reference-shell .g4s-kit-tier-copy em {
    font-size: 12px;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-kit-workspace {
    min-height: 0;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-kit-stage {
    min-height: 440px;
    padding: 11px;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-color-stage {
    min-height: 255px;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-color-product {
    width: 80%;
    height: 245px;
    transform: translateX(calc(var(--offset, 0) * 37%)) scale(calc(1 - var(--depth, 1) * .08));
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-color-controls {
    gap: 7px;
    padding: 9px 10px;
    border-radius: 15px;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-kit-color-swatches {
    flex-wrap: wrap;
    gap: 9px;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-kit-color-swatch {
    width: 28px;
    height: 28px;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-kit-preview {
    min-height: 400px;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-outfit {
    min-height: 330px;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-outfit.has-mannequin {
    min-height: 330px;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-mannequin-image {
    min-height: 310px;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-design-step-layout {
    grid-template-rows: auto auto auto;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-logo-placement-step .g4s-placement-preview-panel,
  #gen4smshrs-configurator .g4s-reference-shell .g4s-logo-placement-step .g4s-design-control-stack {
    grid-row: auto;
    grid-column: auto;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-placement-preview-panel .g4s-shirt-editor,
  #gen4smshrs-configurator .g4s-reference-shell .g4s-logo-upload-preview .g4s-shirt-editor {
    min-height: 310px;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-team-step-layout {
    gap: 10px;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-team-player-roster {
    max-height: none;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-player-preview .g4s-reference-product-preview {
    min-height: 300px;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-summary-overview-panel {
    min-height: 0;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-summary-preview {
    min-height: 390px;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-summary-details {
    overflow: visible;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-price {
    position: static;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-step-nav {
    position: fixed;
    z-index: 50;
    right: 0;
    bottom: 0;
    left: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    min-height: auto;
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: 15px 15px 0 0;
    background: rgba(2, 16, 28, .95);
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-progress {
    display: none;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-step-nav .g4s-reference-back,
  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-step-nav .g4s-reference-next {
    min-width: 0;
    min-height: 48px;
    padding: 7px 11px;
    font-size: 11px;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-step-nav :is(.g4s-reference-back, .g4s-reference-next) small {
    font-size: 9px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    min-height: auto;
    padding: 18px 14px 20px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-copy {
    max-width: none;
    padding: 18px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-copy h1 {
    font-size: clamp(40px, 11vw, 54px);
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-reference-hero-player {
    top: 32%;
    right: 0;
    bottom: 32%;
    left: 27%;
    width: 70%;
    opacity: .45;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-visual {
    min-height: 400px;
    margin: 0;
    padding: 8px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-view-card img,
  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-shirt > img {
    height: 300px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-shirt {
    grid-template-columns: minmax(0, 1fr) 48px;
    padding-right: 4px;
    padding-left: 4px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-shirt.is-reference-focused > .g4s-reference-product-preview {
    height: 300px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-reference-hero-types {
    right: 13px;
    gap: 7px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-reference-hero-types button {
    width: 40px;
    height: 40px;
    border-radius: 9px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-reference-hero-types button svg {
    width: 23px;
    height: 23px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-reference-hero-dots {
    right: 61px;
    bottom: 87px;
    gap: 12px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-company-benefit {
    margin: 14px;
    padding: 16px;
  }
}

@media (max-width: 430px) {
  #gen4smshrs-configurator .g4s-reference-shell .g4s-mobile-app-topbar {
    padding-right: 10px;
    padding-left: 10px;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-mobile-app-step strong {
    font-size: 10px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-multistep-form {
    padding-right: 10px;
    padding-left: 10px;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-card {
    grid-template-columns: minmax(0, .74fr) minmax(0, 1fr);
    min-height: 140px;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-card > .g4s-step-card-visual,
  #gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-card > span:last-child:not(.g4s-step-check) {
    min-height: 140px;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-step-card-action {
    font-size: 10px;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-role-tabs button {
    min-height: 38px;
    padding: 6px 12px;
    font-size: 12px;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-print-info > summary {
    gap: 6px;
    padding: 9px 10px;
    font-size: 13px;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-print-info > summary small {
    font-size: 9px;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-color-arrow {
    width: 38px;
    height: 38px;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-step-nav .g4s-reference-back,
  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-step-nav .g4s-reference-next {
    padding-inline: 8px;
    font-size: 10px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-shirt {
    grid-template-columns: minmax(0, 1fr) 42px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-reference-hero-types {
    right: 10px;
    gap: 6px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-reference-hero-types button {
    width: 36px;
    height: 36px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-reference-hero-types button svg {
    width: 21px;
    height: 21px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-reference-hero-dots {
    right: 53px;
    bottom: 87px;
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #gen4smshrs-configurator .g4s-reference-shell *,
  #gen4smshrs-configurator .g4s-reference-shell *::before,
  #gen4smshrs-configurator .g4s-reference-shell *::after {
    scroll-behavior: auto;
    transition-duration: .01ms;
  }
}

/* 2026-10-24 screenshot pass v2: brighter sky glass, proper reference type and crops. */
#gen4smshrs-configurator {
  --g4s-ref-glass: rgba(10, 53, 82, .46);
  --g4s-ref-glass-strong: rgba(5, 31, 52, .62);
  --g4s-ref-glass-soft: rgba(18, 78, 115, .38);
}

#gen4smshrs-configurator:not([data-theme="dark"]) .g4s-reference-shell {
  background-image:
    linear-gradient(180deg, rgba(14, 93, 164, .08) 0%, rgba(5, 29, 50, .15) 53%, rgba(2, 16, 26, .32) 100%),
    url("img/reference-20261024/stadium.png");
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-sponsor-topbar > div {
  background: transparent;
  background-image: none;
  box-shadow: none;
}

#gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-stepper {
  border-color: rgba(226, 244, 255, .58);
  background: linear-gradient(180deg, rgba(8, 48, 76, .52), rgba(5, 34, 57, .48));
  box-shadow: 0 15px 38px rgba(2, 12, 22, .2), inset 0 1px 0 rgba(255, 255, 255, .18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-form-panel,
#gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-panel,
#gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-controls,
#gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-assignment,
#gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-price {
  border-color: rgba(221, 242, 255, .6);
  background: linear-gradient(145deg, rgba(26, 102, 151, .31), rgba(7, 41, 67, .45));
  box-shadow: 0 15px 38px rgba(0, 11, 20, .2), inset 0 1px 0 rgba(255, 255, 255, .16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-form-step-head h2,
#gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-stage-head h2,
#gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-reference-stage-head h2,
#gen4smshrs-configurator .g4s-reference-shell.is-unified :is(.g4s-sport-step-panel, .g4s-audience-step-panel, .g4s-brand-step-panel) .g4s-form-step-head h2,
#gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-card strong {
  font-family: "G4S National 2", "G4S Rubik", Arial, sans-serif;
  font-weight: 800;
  letter-spacing: -.025em;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-card {
  border-color: rgba(221, 243, 255, .7);
  background: linear-gradient(180deg, rgba(22, 99, 149, .15), rgba(5, 36, 60, .43));
  box-shadow: 0 14px 34px rgba(0, 11, 20, .23), inset 0 1px 0 rgba(255, 255, 255, .2);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-card.is-active {
  background: linear-gradient(180deg, rgba(23, 126, 177, .18), rgba(5, 43, 68, .47));
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-card > span:last-child:not(.g4s-step-check) {
  background: linear-gradient(180deg, rgba(8, 49, 76, .47), rgba(4, 31, 52, .62));
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-config-step-tab strong {
  font-size: 19px;
  font-weight: 450;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-step-icon,
#gen4smshrs-configurator .g4s-reference-shell .g4s-step-icon svg {
  width: 30px;
  height: 30px;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-reference-step-nav {
  border-color: rgba(221, 242, 255, .56);
  background: linear-gradient(90deg, rgba(5, 32, 53, .57), rgba(10, 57, 86, .53));
  box-shadow: 0 10px 26px rgba(0, 11, 20, .2);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-sponsor-deal {
  border: 1px solid rgba(220, 243, 255, .64);
  border-radius: 17px;
  background: linear-gradient(135deg, rgba(24, 111, 164, .5), rgba(7, 44, 73, .54));
  color: #f7fbff;
  box-shadow: 0 14px 34px rgba(0, 12, 23, .22), inset 0 1px 0 rgba(255, 255, 255, .2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-sponsor-deal :is(span, b, strong, em, small) {
  color: #f7fbff;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-sponsor-deal > span,
#gen4smshrs-configurator .g4s-reference-shell .g4s-sponsor-deal .g4s-sponsor-equation strong {
  color: var(--g4s-ref-cyan);
}

@media (min-width: 961px) {
  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-hero::before,
  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-hero::after {
    display: none;
    content: none;
    background: none;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-copy {
    background: linear-gradient(145deg, rgba(8, 48, 76, .48), rgba(5, 36, 60, .36));
    box-shadow: 0 16px 38px rgba(0, 12, 23, .2), inset 0 1px 0 rgba(255, 255, 255, .14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-copy h1 {
    max-width: 100%;
    font-family: "G4S National 2", "G4S Rubik", Arial, sans-serif;
    font-size: clamp(48px, 4.1vw, 68px);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: .94;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-copy > .g4s-theme-control {
    display: none;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-visual {
    border-color: rgba(226, 244, 255, .64);
    background: linear-gradient(145deg, rgba(31, 113, 164, .3), rgba(7, 43, 70, .38));
    box-shadow: 0 16px 40px rgba(0, 10, 18, .22), inset 0 1px 0 rgba(255, 255, 255, .18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-shirt {
    border: 1px solid rgba(224, 244, 255, .58);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(50, 133, 179, .19), rgba(5, 39, 66, .26));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-shirt.is-reference-focused {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-view-card {
    background: rgba(11, 53, 82, .27);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-product-tag {
    background: rgba(5, 37, 61, .62);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified :is(.g4s-sport-step-panel, .g4s-audience-step-panel) .g4s-step-decision-card {
    grid-template-rows: minmax(0, min(35svh, 330px)) minmax(154px, 1fr);
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-step-nav .g4s-reference-back,
  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-step-nav .g4s-reference-next {
    font-size: 21px;
    font-weight: 600;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-step-nav :is(.g4s-reference-back, .g4s-reference-next) small {
    font-size: 15px;
    font-weight: 450;
  }
}

/* 2026-10-24 screenshot pass v6: fit the reference shell to the viewport and finish views 00–05. */
@media (min-width: 961px) {
  /* The 44px outer footer stays below the shell; the form and navigator remain in the visible area. */
  #gen4smshrs-configurator .g4s-reference-shell.is-unified {
    height: calc(100svh - 44px);
    min-height: 0;
    max-height: calc(100svh - 44px);
    overflow: hidden;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-multistep-form {
    height: calc(100svh - 114px);
    min-height: 0;
    max-height: calc(100svh - 114px);
    padding-bottom: 19px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-stack {
    height: 100%;
    min-height: 0;
    padding-bottom: 9px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-reference-step-nav {
    min-height: 94px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-stepper {
    min-height: 0;
    max-height: none;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-step-tab {
    flex: 0 0 min(8.4svh, 70px);
    min-height: 0;
    max-height: 70px;
    grid-template-columns: 34px 28px minmax(0, 1fr);
    gap: 0 8px;
    padding: 6px 8px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-step-tab strong {
    font-family: "G4S National 2", Arial, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.1;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-step-tab .g4s-step-icon,
  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-step-tab .g4s-step-icon svg {
    width: 28px;
    height: 28px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-stepper-wordmark {
    margin-top: auto;
  }

  /* Reference panels carry only a light glass blur so the stadium stays legible behind them. */
  #gen4smshrs-configurator .g4s-reference-shell .g4s-sponsor-topbar,
  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-stepper,
  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-reference-step-nav,
  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-step-decision-card,
  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-step-decision-card > span:last-child:not(.g4s-step-check),
  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-kit-tier-card,
  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-reference-kit-stage,
  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-reference-kit-preview {
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }

  /* Fit the landing cards to the reference proportions at 1672px while retaining fluid columns. */
  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-hero {
    grid-template-columns: minmax(0, .91fr) minmax(0, 1fr);
    gap: clamp(34px, 14.9vw, 249px);
    min-height: calc(100svh - 150px);
    padding: 24px clamp(24px, 4.3vw, 72px) 36px clamp(24px, 3.05vw, 51px);
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-copy {
    width: 100%;
    max-width: none;
    padding: clamp(22px, 2vw, 34px);
    border-color: rgba(216, 239, 255, .52);
    background: rgba(30, 60, 80, .3);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-copy h1 {
    font-size: clamp(48px, 3.5vw, 58px);
    line-height: .96;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-copy > .g4s-kicker {
    font-family: "G4S National 2", Arial, sans-serif;
    font-size: 18px;
    font-weight: 400;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-copy > p:not(.g4s-kicker) {
    font-family: "G4S National 2", Arial, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.35;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-start-actions .g4s-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    padding: 8px 18px 8px 22px;
    font-family: "G4S National 2", Arial, sans-serif;
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-start-actions .g4s-btn.success {
    width: 250px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-start-actions .g4s-btn.secondary {
    width: 192px;
    min-width: 192px;
    min-height: 56px;
    font-size: 20px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-start-actions .g4s-btn::after {
    margin-left: 12px;
    color: currentColor;
    content: "›";
    font-family: Arial, sans-serif;
    font-size: 30px;
    font-weight: 400;
    line-height: .7;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-visual {
    width: 100%;
    height: min(72svh, 680px);
    min-height: 0;
    margin-left: 0;
    padding: 14px;
    transform: translateY(-16px);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }

  /* Keep the lowercase wordmark condensed in the shared sponsor bar. */
  #gen4smshrs-configurator .g4s-reference-shell .g4s-sponsor-topbar-brand .g4s-reference-top-wordmark,
  #gen4smshrs-configurator .g4s-reference-shell .g4s-sponsor-topbar-brand .g4s-reference-top-wordmark strong {
    font-family: "G4S Kenyan Coffee", "G4S Smash Spark", "G4S Rubik", sans-serif;
    font-size: 38px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: -.025em;
  }

  /* Brand screen: move the tiles down to the reference baseline and give DerbyStar/Hummel full logo height. */
  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-brand-step-panel {
    padding-top: 48px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-brand-step-panel .g4s-form-step-head h2 {
    font-size: clamp(44px, 3.6vw, 60px);
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-brand-step-panel > .g4s-step-decision-grid.is-brand {
    grid-template-rows: min(149px, 15.83svh) min(142px, 15.1svh);
    gap: 15px 14px;
    margin-top: 64px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-brand-step-panel .g4s-step-decision-grid.is-brand .g4s-step-decision-card {
    height: 100%;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-brand-step-panel .g4s-choice-icon.has-logo:is(.is-derbystar, .is-hummel) > img {
    width: 82% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 90px !important;
    object-fit: contain;
  }

  /* The long kit-stage title stays on one line at the reference width. */
  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-reference-kit-stage .g4s-reference-stage-head h2 {
    font-size: clamp(32px, 2.55vw, 43px);
  }
}

/* 2026-10-24 screenshot pass v3: brand marks, product cutouts and kit workspace. */
@media (min-width: 961px) {
  /* Keep the logos centered on their glass tiles and give tall SVG marks their full canvas. */
  #gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-grid.is-brand .g4s-step-decision-card.is-logo-only {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    align-content: center;
    align-items: center;
    justify-items: center;
    place-items: center;
    padding: 10px 14px;
    overflow: hidden;
    border-color: rgba(222, 243, 255, .68);
    background: linear-gradient(145deg, rgba(32, 117, 166, .29), rgba(5, 37, 62, .42));
    box-shadow: 0 13px 30px rgba(0, 11, 20, .19), inset 0 1px 0 rgba(255, 255, 255, .18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-grid.is-brand .g4s-step-decision-card.is-logo-only > :is(.g4s-choice-icon.has-logo, .g4s-brand-wordmark) {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    width: min(90%, 280px);
    height: 96px;
    margin: 0;
    padding: 0;
    place-items: center;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
    transform: translate(-50%, -50%);
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-grid.is-brand .g4s-choice-logo {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 86px !important;
    object-fit: contain;
    object-position: center;
    filter: brightness(0) invert(1);
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-grid.is-brand .g4s-choice-icon.has-logo.is-jako {
    display: grid;
    width: min(88%, 270px);
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-grid.is-brand .g4s-choice-icon.has-logo.is-jako > img {
    width: 100% !important;
    max-width: 230px !important;
    max-height: 66px !important;
    filter: brightness(0) invert(1);
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-grid.is-brand .g4s-choice-icon.has-logo.is-erima {
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    align-content: center;
    justify-items: center;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-grid.is-brand .g4s-choice-icon.has-logo.is-erima > img {
    width: 78px !important;
    height: 78px !important;
    max-width: 78px !important;
    max-height: 78px !important;
    object-fit: contain;
    filter: grayscale(1) brightness(.8) contrast(10);
    mix-blend-mode: screen;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-grid.is-brand .g4s-choice-icon.has-logo.is-craft {
    display: flex;
    width: min(88%, 250px);
    flex-direction: row;
    gap: 12px;
    align-items: center;
    justify-content: center;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-grid.is-brand .g4s-choice-icon.has-logo.is-craft::before {
    color: #fff;
    content: "CRAFT";
    font-family: "G4S Rubik", Arial, sans-serif;
    font-size: 34px;
    font-style: italic;
    font-weight: 700;
    letter-spacing: .025em;
    line-height: 1;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-grid.is-brand .g4s-choice-icon.has-logo.is-craft > img {
    width: 44px !important;
    height: 48px !important;
    max-width: 44px !important;
    max-height: 48px !important;
    filter: brightness(0) invert(1);
  }

  /* Product images use an explicit stage height so percentage sizing has a real box. */
  #gen4smshrs-configurator .g4s-reference-shell .g4s-kit-tier-card {
    grid-template-columns: minmax(220px, .9fr) minmax(0, 1fr);
    min-height: min(46svh, 410px);
    border-color: rgba(221, 242, 255, .62);
    background: linear-gradient(140deg, rgba(31, 110, 160, .27), rgba(5, 36, 60, .39));
    box-shadow: 0 14px 34px rgba(0, 11, 20, .2), inset 0 1px 0 rgba(255, 255, 255, .15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-kit-tier-image {
    align-self: stretch;
    height: min(42svh, 370px);
    min-height: 320px;
    border: 1px solid rgba(219, 242, 255, .35);
    background: linear-gradient(180deg, rgba(36, 117, 165, .22), rgba(4, 34, 57, .16));
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-kit-tier-image img {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    object-fit: contain;
    object-position: center;
    opacity: 1;
    visibility: visible;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-kit-tier-image.has-reference-photo {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-kit-tier-copy strong {
    font-family: "G4S National 2", "G4S Rubik", Arial, sans-serif;
    font-size: clamp(27px, 2vw, 34px);
    font-weight: 800;
    line-height: 1.02;
  }

  /* Put the colour carousel on the full-width stage, with the active shirt at 440px max. */
  #gen4smshrs-configurator .g4s-reference-shell .g4s-config-layer:has(.g4s-reference-kit-workspace) {
    position: relative;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-config-layer:has(.g4s-reference-kit-workspace) > .g4s-reference-breadcrumb {
    position: absolute;
    z-index: 6;
    top: 12px;
    left: 26px;
    margin: 0;
    padding: 0;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-kit-workspace {
    grid-template-columns: minmax(0, 1fr) minmax(390px, 420px);
    gap: 16px;
    min-height: calc(100svh - 186px);
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-kit-stage {
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    padding: 52px 16px 16px;
    background: linear-gradient(135deg, rgba(25, 101, 151, .31), rgba(5, 38, 64, .39));
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-kit-preview {
    grid-template-columns: minmax(0, 1fr) 56px;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 12px;
    background: linear-gradient(145deg, rgba(25, 99, 148, .3), rgba(5, 37, 62, .4));
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-color-stage {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    align-items: end;
    overflow: hidden;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-color-product {
    grid-column: 1;
    grid-row: 1;
    width: min(52%, 440px);
    height: min(49svh, 440px);
    transform: translateX(calc(var(--offset, 0) * 30%)) scale(calc(.7 + var(--depth, 1) * .1));
    opacity: calc(.66 + var(--depth, 1) * .11);
    z-index: calc(2 + var(--depth, 1));
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-color-product.is-active {
    transform: translateX(0) scale(1);
    opacity: 1;
    z-index: 8;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-color-product > img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
    object-position: center bottom;
    opacity: 1;
    visibility: visible;
    filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .28));
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-color-product.has-reference-photo {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-kit-preview > .g4s-reference-outfit {
    grid-column: 1;
    grid-row: 1;
    border-color: rgba(222, 244, 255, .38);
    background: radial-gradient(ellipse at 50% 72%, rgba(138, 198, 223, .24), transparent 64%), linear-gradient(180deg, rgba(23, 94, 138, .2), rgba(4, 31, 52, .18));
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-part-tabs {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    margin: 0;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-part-tabs .g4s-kit-substeps {
    display: flex;
    flex-direction: column;
    gap: 11px;
    width: 100%;
    overflow: visible;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-part-tabs .g4s-kit-substep {
    position: relative;
    display: grid;
    flex: 0 0 56px;
    width: 56px;
    min-width: 56px;
    min-height: 56px;
    padding: 5px;
    place-items: center;
    border-color: rgba(218, 241, 255, .58);
    border-radius: 13px;
    background: linear-gradient(145deg, rgba(24, 74, 103, .72), rgba(4, 28, 47, .74));
    box-shadow: 0 8px 20px rgba(0, 10, 19, .22), inset 0 1px 0 rgba(255, 255, 255, .12);
    text-align: center;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-part-tabs .g4s-kit-substep.is-keeper {
    display: none;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-part-tabs .g4s-kit-substep > span {
    display: block;
    width: 1px;
    min-width: 0;
    height: 1px;
    overflow: hidden;
    padding: 0;
    color: transparent;
    font-size: 0;
    background: transparent;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-part-tabs .g4s-kit-substep :is(strong, small, em) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-part-tabs .g4s-kit-substep::before {
    display: block;
    width: 31px;
    height: 31px;
    background-color: #f5fbff;
    content: "";
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-part-tabs .g4s-kit-substep.is-shirt::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m8 4-4 2-2 6 4 1v7h12v-7l4-1-2-6-4-2c-1 2-2 3-4 3s-3-1-4-3Z' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m8 4-4 2-2 6 4 1v7h12v-7l4-1-2-6-4-2c-1 2-2 3-4 3s-3-1-4-3Z' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-part-tabs .g4s-kit-substep.is-shorts::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4h14l1 16h-7l-1-7-1 7H4L5 4Z' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M12 4v9' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4h14l1 16h-7l-1-7-1 7H4L5 4Z' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M12 4v9' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3C/svg%3E");
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-part-tabs .g4s-kit-substep.is-socks::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 3h7v11l5 3v3H8a3 3 0 0 1-3-3V3h3Z' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M8 7h7' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 3h7v11l5 3v3H8a3 3 0 0 1-3-3V3h3Z' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M8 7h7' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3C/svg%3E");
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-part-tabs .g4s-kit-substep:is(.is-active, .is-current) {
    border: 2px solid var(--g4s-ref-cyan);
    background: linear-gradient(145deg, rgba(0, 161, 201, .58), rgba(5, 56, 85, .8));
    box-shadow: 0 0 15px rgba(0, 232, 254, .35), inset 0 0 0 1px rgba(226, 251, 255, .12);
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-part-tabs .g4s-kit-substep:is(.is-active, .is-current)::before {
    background-color: var(--g4s-ref-cyan);
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-outfit-caption {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0;
    padding-top: 3px;
    color: #f7fbff;
    font-size: 11px;
  }
}

/* 2026-10-24 screenshot pass v4: landing depth, exact brand tile placement and shared type scale. */
@media (min-width: 961px) {
  /* The feature image sits between the copy and the product gallery, above the translucent panels. */
  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-hero {
    padding: 28px 36px 36px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-copy {
    z-index: 4;
    background: linear-gradient(145deg, rgba(36, 128, 180, .2), rgba(17, 83, 125, .16));
    box-shadow: 0 14px 30px rgba(0, 16, 27, .14), inset 0 1px 0 rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-reference-hero-player {
    z-index: 3;
    top: -1%;
    bottom: -5%;
    left: 19%;
    width: 45%;
    filter: drop-shadow(0 14px 17px rgba(0, 12, 20, .28));
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-visual {
    z-index: 2;
    background: linear-gradient(145deg, rgba(85, 170, 211, .16), rgba(13, 69, 106, .16));
    box-shadow: 0 14px 32px rgba(0, 16, 27, .15), inset 0 1px 0 rgba(255, 255, 255, .17);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-shirt.is-reference-focused,
  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-shirt-showcase {
    position: relative;
    z-index: 2;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-copy .g4s-sponsor-deal {
    width: 100%;
    max-width: none;
    border-color: rgba(226, 244, 255, .42);
    background: linear-gradient(120deg, rgba(49, 138, 183, .22), rgba(25, 91, 131, .18));
    box-shadow: 0 12px 24px rgba(0, 16, 27, .12), inset 0 1px 0 rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-sponsor-deal .g4s-sponsor-equation strong {
    color: #fff;
    font-family: "G4S Rubik", "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(48px, 4.2vw, 60px);
    font-style: normal;
    font-weight: 750;
    letter-spacing: -.045em;
    line-height: .95;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-sponsor-deal .g4s-sponsor-equation small {
    color: var(--g4s-ref-cyan);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .015em;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-sponsor-deal > span {
    color: rgba(244, 250, 255, .94);
    font-size: 14px;
    font-weight: 650;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-start-actions .g4s-btn.secondary {
    display: inline-flex;
    min-width: 190px;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    padding-inline: 22px;
    font-size: 16px;
    font-weight: 650;
    text-transform: none;
  }

  /* The topbar mark is a lowercase wordmark; labels and values follow the reference scale. */
  #gen4smshrs-configurator .g4s-reference-shell .g4s-sponsor-topbar-brand .g4s-reference-top-wordmark,
  #gen4smshrs-configurator .g4s-reference-shell .g4s-sponsor-topbar-brand .g4s-reference-top-wordmark strong {
    color: #fff;
    font-family: "G4S Rubik", "Helvetica Neue", Arial, sans-serif;
    font-size: 40px;
    font-style: italic;
    font-weight: 650;
    letter-spacing: -.055em;
    line-height: .95;
    text-transform: none;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-sponsor-topbar > div:not(:first-child) > span {
    font-size: 14px;
    font-weight: 450;
    letter-spacing: .045em;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-sponsor-topbar > div:not(:first-child) > strong {
    font-size: 20px;
    font-weight: 650;
    line-height: 1.12;
  }

  /* Keep sidebar labels readable and let the stadium remain visible through its glass. */
  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-stepper {
    background: linear-gradient(180deg, rgba(17, 76, 113, .34), rgba(8, 45, 72, .3));
    box-shadow: 0 13px 30px rgba(0, 15, 25, .14), inset 0 1px 0 rgba(255, 255, 255, .17);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-step-tab strong {
    font-size: 19px;
    font-weight: 400;
    line-height: 1.15;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-step-tab .g4s-step-icon,
  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-step-tab .g4s-step-icon svg {
    width: 30px;
    height: 30px;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-step-nav.is-two-line > :is(.g4s-reference-back, .g4s-reference-next) > span {
    font-size: 21px;
    font-weight: 600;
    line-height: 1.12;
    text-transform: none;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-step-nav.is-two-line > :is(.g4s-reference-back, .g4s-reference-next) > span small {
    display: block;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.15;
    text-transform: none;
  }

  /* Steps 1–3 use the stadium as their panel surface, with only the individual cards glazed. */
  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-form-panel:is(.g4s-sport-step-panel, .g4s-audience-step-panel, .g4s-brand-step-panel) {
    border: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-brand-step-panel {
    padding: 45px 0 0;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-brand-step-panel > .g4s-step-decision-grid.is-brand {
    margin-top: 45px;
  }

  /* Place each authentic logo asset in the center of its entire card, not a clipped top strip. */
  #gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-grid.is-brand .g4s-step-decision-card.is-logo-only {
    position: relative;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-grid.is-brand .g4s-step-decision-card.is-logo-only > :is(.g4s-choice-icon.has-logo, .g4s-brand-wordmark) {
    position: absolute;
    inset: 0;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    transform: none;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-grid.is-brand .g4s-choice-logo {
    width: 70% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 90px !important;
    object-fit: contain;
    object-position: center;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-grid.is-brand .g4s-step-decision-card.is-logo-only > .g4s-choice-icon.has-logo.is-jako {
    inset: 0;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    transform: none;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-grid.is-brand .g4s-step-decision-card.is-logo-only > .g4s-choice-icon.has-logo.is-jako > img {
    width: 70% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 90px !important;
  }

  /* The source Erima SVG now has a transparent background and a white, cropped wordmark. */
  #gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-grid.is-brand .g4s-choice-icon.has-logo.is-erima > img {
    width: 70% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 90px !important;
    filter: none;
    mix-blend-mode: normal;
  }

  /* Craft's separate icon is the terminal dot group in the original horizontal wordmark. */
  #gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-grid.is-brand .g4s-choice-icon.has-logo.is-craft {
    width: 100%;
    height: 100%;
    flex-direction: row;
    gap: 11px;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-grid.is-brand .g4s-choice-icon.has-logo.is-craft::before {
    color: #fff;
    content: "CRAFT";
    font-family: "G4S Rubik", Arial, sans-serif;
    font-size: 34px;
    font-style: italic;
    font-weight: 700;
    letter-spacing: .015em;
    line-height: 1;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-grid.is-brand .g4s-choice-icon.has-logo.is-craft > img {
    width: 48px !important;
    height: 50px !important;
    max-width: 48px !important;
    max-height: 50px !important;
    filter: brightness(0) invert(1);
  }

  /* The supplied Kappa raster contains the athletes; add the matching wordmark below. */
  #gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-grid.is-brand .g4s-choice-icon.has-logo.is-kappa {
    flex-direction: column;
    gap: 0;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-grid.is-brand .g4s-choice-icon.has-logo.is-kappa > img {
    width: 110px !important;
    height: 64px !important;
    max-width: 100% !important;
    max-height: 64px !important;
    filter: brightness(0) invert(1);
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-grid.is-brand .g4s-choice-icon.has-logo.is-kappa::after {
    color: #fff;
    content: "Kappa";
    font-family: "G4S Rubik", Arial, sans-serif;
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1;
  }
}

/* 2026-10-24 screenshot pass v5: use the reference's broad sans headlines and size the mannequin to its own canvas. */
@media (min-width: 961px) {
  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-copy h1,
  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-sport-step-panel .g4s-form-step-head h2,
  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-audience-step-panel .g4s-form-step-head h2,
  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-brand-step-panel .g4s-form-step-head h2,
  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-kit-tier-step-panel .g4s-form-step-head h2,
  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-reference-kit-stage .g4s-reference-stage-head h2 {
    font-family: Arial, "Helvetica Neue", sans-serif;
    font-weight: 700;
    letter-spacing: -.025em;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified :is(.g4s-sport-step-panel, .g4s-audience-step-panel) .g4s-step-decision-card > span:last-child strong {
    font-family: Arial, "Helvetica Neue", sans-serif;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.015em;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified :is(.g4s-sport-step-panel, .g4s-audience-step-panel) .g4s-step-decision-card > span:last-child small {
    font-family: Arial, "Helvetica Neue", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-sponsor-deal .g4s-sponsor-equation strong {
    color: #fff;
    font-family: Arial, "Helvetica Neue", sans-serif;
    font-size: clamp(52px, 3.65vw, 58px);
    font-style: normal;
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: .98;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-sponsor-deal .g4s-sponsor-equation small {
    color: #fff;
    font-family: Arial, "Helvetica Neue", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-kit-tier-step-panel .g4s-form-step-head h2 {
    font-size: clamp(33px, 3vw, 46px);
    line-height: 1.04;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-reference-kit-stage .g4s-reference-stage-head h2 {
    font-size: clamp(34px, 2.75vw, 46px);
    line-height: 1.04;
    white-space: nowrap;
  }

  /* Let the complete mannequin asset, image canvas, and decorative layers share one exact 2:3 box. */
  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-kit-preview > .g4s-reference-outfit.has-mannequin {
    min-height: 0;
    align-items: stretch;
    justify-items: center;
    overflow: visible;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-mannequin {
    position: relative;
    display: block;
    width: min(50svh, 500px);
    height: min(75svh, 750px);
    min-width: 0;
    min-height: 0;
    max-width: none;
    max-height: none;
    aspect-ratio: 2 / 3;
    align-self: center;
    justify-self: center;
    overflow: visible;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-mannequin > .g4s-reference-mannequin-image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: fill;
    object-position: center;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-reference-mannequin > .g4s-reference-mannequin-layer {
    z-index: 2;
    pointer-events: none;
  }
}

/* 2026-10-24 screenshot pass v6b: clamp the unified desktop shell and its grid children. */
@media (min-width: 961px) {
  #gen4smshrs-configurator .g4s-reference-shell.is-unified {
    display: grid;
    grid-template-rows: 70px minmax(0, 1fr);
    height: calc(100svh - 44px);
    min-height: 0;
    max-height: calc(100svh - 44px);
    overflow: hidden;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-multistep-form {
    height: 100%;
    min-height: 0;
    max-height: 100%;
    padding-bottom: 24px;
    overflow: hidden;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-stepper,
  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-stack {
    min-height: 0;
    max-height: 100%;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-stack {
    height: 100%;
    padding-bottom: 0;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-step-tab {
    flex: 0 0 min(8.4svh, 70px);
    min-height: 0;
    max-height: 70px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-stack > .g4s-config-layer {
    min-height: 0;
    overflow: auto;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-stack > .g4s-reference-step-nav {
    min-height: 94px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-reference-kit-workspace,
  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-reference-kit-stage,
  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-reference-kit-preview {
    min-height: 0;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-reference-kit-workspace {
    height: 100%;
  }
}

/* 2026-10-24 screenshot pass v7: reference type, compact choice cards, and unclipped garment previews. */
#gen4smshrs-configurator .g4s-reference-shell {
  font-family: "G4S Reference Condensed", "G4S Rubik", Arial, sans-serif;
}

#gen4smshrs-configurator .g4s-reference-shell :is(button, input, select, textarea, label, a) {
  font-family: "G4S Reference Condensed", "G4S Rubik", Arial, sans-serif;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-sponsor-topbar-brand .g4s-reference-top-wordmark,
#gen4smshrs-configurator .g4s-reference-shell .g4s-sponsor-topbar-brand .g4s-reference-top-wordmark strong {
  font-family: "G4S Reference Condensed", "G4S Rubik", Arial, sans-serif;
  font-size: 40px;
  font-style: italic;
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: .9;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-sponsor-topbar-brand .g4s-reference-top-wordmark strong span,
#gen4smshrs-configurator .g4s-reference-shell .g4s-stepper-wordmark strong span {
  color: var(--g4s-ref-cyan);
}

@media (min-width: 961px) {
  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-stepper {
    background: linear-gradient(180deg, rgba(5, 26, 46, .78), rgba(5, 34, 57, .74));
    -webkit-backdrop-filter: blur(13px);
    backdrop-filter: blur(13px);
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-step-tab {
    grid-template-columns: 34px 28px minmax(0, 1fr);
    gap: 0 8px;
    padding-inline: 7px;
    text-align: left;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-step-tab strong {
    min-width: 0;
    font-family: "G4S Reference Condensed", "G4S Rubik", Arial, sans-serif;
    font-size: 19px;
    font-weight: 400;
    line-height: 1.05;
    white-space: nowrap;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-step-tab.is-active {
    border-color: transparent;
    border-radius: 14px;
    background: transparent;
    box-shadow: none;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-step-tab.is-active::after {
    position: absolute;
    z-index: 0;
    inset: 7px 0;
    border: 1px solid var(--g4s-ref-cyan);
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(0, 218, 247, .52), rgba(2, 78, 115, .6));
    box-shadow: 0 0 18px rgba(0, 232, 254, .42), inset 0 0 0 1px rgba(226, 251, 255, .22);
    content: "";
    pointer-events: none;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-step-tab.is-active > * {
    position: relative;
    z-index: 1;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-stepper-wordmark strong {
    display: block;
    width: max-content;
    max-width: 100%;
    font-family: "G4S Reference Condensed", "G4S Rubik", Arial, sans-serif;
    font-size: 36px;
    font-style: italic;
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: .88;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-stepper-wordmark small {
    font-family: "G4S Reference Condensed", "G4S Rubik", Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .22em;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-sponsor-topbar > div:not(:first-child) > span {
    font-family: "G4S Reference Condensed", "G4S Rubik", Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: .045em;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-sponsor-topbar > div:not(:first-child) > strong {
    font-family: "G4S Reference Condensed", "G4S Rubik", Arial, sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-form-step-head .g4s-kicker,
  #gen4smshrs-configurator .g4s-reference-shell.is-unified :is(.g4s-sport-step-panel, .g4s-audience-step-panel, .g4s-brand-step-panel) .g4s-form-step-head .g4s-kicker {
    font-family: "G4S Reference Condensed", "G4S Rubik", Arial, sans-serif;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-decision-instruction {
    font-family: "G4S Reference Condensed", "G4S Rubik", Arial, sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-sport-step-panel .g4s-step-decision-card {
    height: 445px;
    max-height: 445px;
    grid-template-rows: minmax(0, 1fr) 154px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-step-decision-card > span:last-child:not(.g4s-step-check) {
    font-family: "G4S Reference Condensed", "G4S Rubik", Arial, sans-serif;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified :is(.g4s-sport-step-panel, .g4s-audience-step-panel) .g4s-step-decision-card > span:last-child strong {
    font-family: "G4S Reference Condensed", "G4S Rubik", Arial, sans-serif;
    font-size: 27px;
    font-weight: 700;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified :is(.g4s-sport-step-panel, .g4s-audience-step-panel) .g4s-step-decision-card > span:last-child small {
    font-family: "G4S Reference Condensed", "G4S Rubik", Arial, sans-serif;
    font-size: 18px;
    font-weight: 400;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-reference-step-nav :is(.g4s-reference-back, .g4s-reference-next) > span {
    font-family: "G4S Reference Condensed", "G4S Rubik", Arial, sans-serif;
    font-size: 21px;
    font-weight: 400;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-reference-step-nav :is(.g4s-reference-back, .g4s-reference-next) > span small {
    font-family: "G4S Reference Condensed", "G4S Rubik", Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    text-transform: none;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-reference-progress {
    font-family: "G4S Reference Condensed", "G4S Rubik", Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-brand-step-panel > .g4s-step-decision-grid.is-brand {
    margin-top: 81px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-brand-step-panel .g4s-choice-icon.has-logo.is-adidas {
    inset: 0;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    transform: none;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-brand-step-panel .g4s-choice-icon.has-logo.is-adidas > img {
    display: block;
    width: auto !important;
    height: 90px !important;
    max-width: 100% !important;
    max-height: 90px !important;
    object-fit: contain;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-reference-color-product {
    width: min(44%, 360px);
    height: min(100%, 350px);
    max-height: 350px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-reference-mannequin {
    width: min(46svh, 433px);
    height: min(69svh, 650px);
    max-height: 650px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-copy > :is(.g4s-kicker, p:not(.g4s-kicker)),
  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-start-actions .g4s-btn {
    font-family: "G4S Reference Condensed", "G4S Rubik", Arial, sans-serif;
  }
}

/* 2026-10-24 screenshot pass v8: regular-width interface type and a full-height Step 5 preview. */
#gen4smshrs-configurator .g4s-reference-shell {
  font-family: "G4S Reference Sans", "G4S Rubik", Arial, sans-serif;
}

#gen4smshrs-configurator .g4s-reference-shell :is(button, input, select, textarea, label, a) {
  font-family: "G4S Reference Sans", "G4S Rubik", Arial, sans-serif;
}

#gen4smshrs-configurator .g4s-reference-shell .g4s-sponsor-topbar-brand > span:not(.g4s-reference-top-wordmark) {
  font-family: "G4S Reference Sans", "G4S Rubik", Arial, sans-serif;
}

@media (min-width: 961px) {
  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-step-tab strong {
    font-family: "G4S Reference Sans", "G4S Rubik", Arial, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.05;
    white-space: nowrap;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-stepper-wordmark small {
    font-family: "G4S Reference Sans", "G4S Rubik", Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-sponsor-topbar > div:not(:first-child) > span {
    font-family: "G4S Reference Sans", "G4S Rubik", Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: .045em;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-sponsor-topbar > div:not(:first-child) > strong {
    font-family: "G4S Reference Sans", "G4S Rubik", Arial, sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-form-step-head .g4s-kicker,
  #gen4smshrs-configurator .g4s-reference-shell.is-unified :is(.g4s-sport-step-panel, .g4s-audience-step-panel, .g4s-brand-step-panel) .g4s-form-step-head .g4s-kicker {
    font-family: "G4S Reference Sans", "G4S Rubik", Arial, sans-serif;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-decision-instruction,
  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-decision-instruction > strong {
    font-family: "G4S Reference Sans", "G4S Rubik", Arial, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-step-decision-card > span:last-child:not(.g4s-step-check),
  #gen4smshrs-configurator .g4s-reference-shell.is-unified :is(.g4s-sport-step-panel, .g4s-audience-step-panel) .g4s-step-decision-card > span:last-child strong,
  #gen4smshrs-configurator .g4s-reference-shell.is-unified :is(.g4s-sport-step-panel, .g4s-audience-step-panel) .g4s-step-decision-card > span:last-child small {
    font-family: "G4S Reference Sans", "G4S Rubik", Arial, sans-serif;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified :is(.g4s-sport-step-panel, .g4s-audience-step-panel) .g4s-step-decision-card > span:last-child strong {
    font-size: 24px;
    font-weight: 700;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified :is(.g4s-sport-step-panel, .g4s-audience-step-panel) .g4s-step-decision-card > span:last-child small {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-reference-step-nav :is(.g4s-reference-back, .g4s-reference-next) > span,
  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-reference-step-nav :is(.g4s-reference-back, .g4s-reference-next) > span small,
  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-reference-progress {
    font-family: "G4S Reference Sans", "G4S Rubik", Arial, sans-serif;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-reference-step-nav :is(.g4s-reference-back, .g4s-reference-next) > span {
    font-size: 21px;
    font-weight: 400;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-reference-step-nav :is(.g4s-reference-back, .g4s-reference-next) > span small {
    font-size: 15px;
    font-weight: 400;
    text-transform: none;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-reference-progress {
    font-size: 16px;
    font-weight: 400;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-sponsor-topbar-theme .g4s-theme-control-label {
    font-family: "G4S Reference Sans", "G4S Rubik", Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-reference-breadcrumb {
    font-family: "G4S Reference Sans", "G4S Rubik", Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-brand-step-panel > .g4s-step-decision-grid.is-brand {
    margin-top: 54px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-brand-step-panel .g4s-form-step-head > span {
    font-family: Arial, "Helvetica Neue", sans-serif;
    font-size: 20px;
    font-weight: 700;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-copy > :is(.g4s-kicker, p:not(.g4s-kicker)),
  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-start-actions .g4s-btn,
  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-sponsor-deal,
  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-sponsor-deal :is(span, b, strong, em, small) {
    font-family: "G4S Reference Sans", "G4S Rubik", Arial, sans-serif;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-start-actions .g4s-btn.success {
    border: 2px solid rgba(0, 232, 254, .96);
    background: linear-gradient(145deg, rgba(4, 34, 55, .88), rgba(2, 24, 42, .82));
    color: #fff;
    box-shadow: 0 0 15px rgba(0, 232, 254, .54), inset 0 0 0 1px rgba(0, 232, 254, .32), 0 8px 20px rgba(0, 12, 23, .22);
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-start-actions .g4s-btn.success:hover {
    background: linear-gradient(145deg, rgba(4, 51, 74, .92), rgba(2, 32, 50, .9));
    box-shadow: 0 0 19px rgba(0, 232, 254, .7), inset 0 0 0 1px rgba(0, 232, 254, .48), 0 8px 20px rgba(0, 12, 23, .25);
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-start-actions .g4s-btn.secondary {
    border: 1px solid rgba(235, 247, 255, .9);
    background: linear-gradient(145deg, rgba(9, 34, 54, .82), rgba(3, 20, 35, .78));
    color: #fff;
    box-shadow: 0 0 10px rgba(207, 239, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .08);
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-kit-tier-copy :is(strong, b, em, span) {
    font-family: "G4S Reference Sans", "G4S Rubik", Arial, sans-serif;
  }

  /* Step 5 uses one shared full-height canvas; the right preview spans the navigation row. */
  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-reference-kit-workspace) {
    grid-template-rows: 70px minmax(0, 1fr);
    height: 100svh;
    min-height: 100svh;
    max-height: 100svh;
    overflow: hidden;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-reference-kit-workspace) .g4s-multistep-form {
    height: 100%;
    min-height: 0;
    max-height: 100%;
    padding: 16px 38px 27px 36px;
    overflow: hidden;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-reference-kit-workspace) .g4s-config-stack {
    position: relative;
    display: block;
    height: 100%;
    min-height: 0;
    padding: 0;
    overflow: visible;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-reference-kit-workspace) .g4s-config-layer {
    position: relative;
    display: block;
    height: 100%;
    min-height: 0;
    overflow: visible;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-reference-kit-workspace) .g4s-reference-kit-workspace {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-reference-kit-workspace) .g4s-reference-kit-stage {
    position: relative;
    width: calc(68% - 16px);
    height: calc(100% - 91px);
    min-height: 0;
    margin: 0;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-reference-kit-workspace) .g4s-reference-kit-preview {
    position: absolute;
    top: 0;
    right: 0;
    width: 32%;
    height: 100%;
    min-height: 0;
    margin: 0;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-reference-kit-workspace) .g4s-reference-step-nav {
    position: absolute;
    z-index: 8;
    right: auto;
    bottom: 3px;
    left: 0;
    width: 68%;
    height: 76px;
    min-height: 76px;
    max-height: 76px;
    margin: 0;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-reference-kit-workspace) .g4s-reference-color-product {
    width: min(47%, 390px);
    height: min(100%, 390px);
    max-height: 390px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-reference-kit-workspace) .g4s-reference-mannequin {
    width: min(54svh, 507px);
    height: min(81svh, 760px);
    max-height: 760px;
  }
}

/* Mobile status chrome: keep readable contrast against the pale reference canvas. */
@media (max-width: 960px) {
  #gen4smshrs-configurator .g4s-reference-shell.is-unified :is(.g4s-form-step-head h2, .g4s-stage-head h2, .g4s-reference-stage-head h2),
  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-copy h1 {
    font-family: Arial, "Helvetica Neue", sans-serif;
    font-weight: 700;
    letter-spacing: -.025em;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-form-step-head .g4s-kicker,
  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-decision-instruction,
  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-step-decision-card > span:last-child:not(.g4s-step-check),
  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-step-decision-card > span:last-child :is(strong, small),
  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-reference-step-nav :is(.g4s-reference-back, .g4s-reference-next) > span,
  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-reference-step-nav :is(.g4s-reference-back, .g4s-reference-next) > span small,
  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-reference-progress,
  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-reference-breadcrumb,
  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-kit-tier-copy :is(strong, b, em, span),
  #gen4smshrs-configurator .g4s-reference-shell :is(.g4s-mobile-step-status, .g4s-mobile-app-meta, .g4s-mobile-app-current, .g4s-mobile-app-steps, .g4s-mobile-app-step) {
    font-family: "G4S Reference Sans", "G4S Rubik", Arial, sans-serif;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-copy {
    border-color: rgba(216, 239, 255, .52);
    background: rgba(30, 60, 80, .3);
    box-shadow: 0 14px 30px rgba(0, 16, 27, .14), inset 0 1px 0 rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-copy h1 {
    font-family: Arial, "Helvetica Neue", sans-serif;
    font-size: clamp(38px, 11vw, 52px);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: .96;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-copy > .g4s-kicker,
  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-copy > p:not(.g4s-kicker) {
    font-family: "G4S Reference Sans", "G4S Rubik", Arial, sans-serif;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-copy > .g4s-kicker {
    font-size: 16px;
    font-weight: 400;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-copy > p:not(.g4s-kicker) {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-visual {
    border-color: rgba(226, 244, 255, .64);
    background: linear-gradient(145deg, rgba(31, 113, 164, .3), rgba(7, 43, 70, .38));
    box-shadow: 0 16px 40px rgba(0, 10, 18, .22), inset 0 1px 0 rgba(255, 255, 255, .18);
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-start-actions .g4s-btn {
    min-height: 48px;
    font-family: "G4S Reference Sans", "G4S Rubik", Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-start-actions .g4s-btn.success {
    border: 2px solid rgba(0, 232, 254, .96);
    background: linear-gradient(145deg, rgba(4, 34, 55, .88), rgba(2, 24, 42, .82));
    color: #fff;
    box-shadow: 0 0 15px rgba(0, 232, 254, .54), inset 0 0 0 1px rgba(0, 232, 254, .32), 0 8px 20px rgba(0, 12, 23, .22);
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-start-actions .g4s-btn.secondary {
    border: 1px solid rgba(235, 247, 255, .9);
    background: linear-gradient(145deg, rgba(9, 34, 54, .82), rgba(3, 20, 35, .78));
    color: #fff;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-mobile-app-current {
    border: 1px solid rgba(0, 232, 254, .42);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(8, 29, 47, .94), rgba(8, 41, 62, .88));
    color: #fff;
    box-shadow: 0 0 14px rgba(0, 210, 240, .12), inset 0 0 0 1px rgba(255, 255, 255, .04);
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-mobile-app-current > span {
    border: 1px solid rgba(0, 232, 254, .7);
    background: rgba(0, 202, 226, .18);
    color: #fff;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-mobile-app-current strong {
    color: #fff;
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-mobile-app-current small {
    color: rgba(235, 247, 255, .8);
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-mobile-step-status {
    border-color: rgba(0, 232, 254, .32);
    background: rgba(7, 29, 47, .82);
    color: rgba(246, 252, 255, .94);
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-mobile-app-steps {
    background: rgba(7, 29, 47, .72);
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-mobile-app-step {
    color: rgba(246, 252, 255, .76);
  }

  #gen4smshrs-configurator .g4s-reference-shell .g4s-mobile-app-step.is-active,
  #gen4smshrs-configurator .g4s-reference-shell .g4s-mobile-app-step.is-complete {
    color: #fff;
  }
}

/* 2026-10-24 V7: short desktop landing viewport and Step 5 fit corrections. */
@media (min-width: 1280px) and (max-height: 860px) {
  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-copy {
    padding: clamp(18px, 1.7vw, 27px);
    transform: translateY(1.1svh);
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-copy h1 {
    margin: -6px 0 0;
    font-size: clamp(48px, 3.2vw, 54px);
    line-height: .96;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-copy > p:not(.g4s-kicker) {
    margin: 12px 0 0;
    font-size: 18px;
    line-height: 1.1;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-start-actions {
    margin: 10px 0 0;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-start-actions .g4s-btn {
    min-height: 54px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-copy .g4s-sponsor-deal {
    gap: 6px;
    padding: 12px 16px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-copy .g4s-sponsor-deal small {
    font-size: 12px;
    line-height: 1.25;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-reference-hero-player {
    transform: translateY(clamp(-68px, -7.4svh, -45px));
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-tenant-start .g4s-tenant-visual {
    height: min(71svh, 580px);
    transform: translateY(calc(-16px - 5svh));
  }
}

@media (min-width: 961px) {
  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-config-step-tab[data-config-step="kit"] strong {
    font-family: "G4S Reference Condensed", "G4S Reference Sans", Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -.01em;
    white-space: nowrap;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-reference-kit-workspace) .g4s-reference-stage-head h2 {
    font-size: clamp(34px, 2.65vw, 44px);
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-reference-kit-workspace) .g4s-reference-role-tabs {
    width: min(450px, 60%);
    min-height: 60px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-reference-kit-workspace) .g4s-reference-role-tabs button {
    flex: 1 1 50%;
    justify-content: center;
    min-height: 56px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-reference-kit-workspace) .g4s-reference-color-product {
    width: min(50%, 430px);
    height: min(100%, 430px);
    max-height: 430px;
    transform: translate(calc(var(--offset, 0) * 30%), calc((var(--depth, 1) - 1) * 36px)) scale(calc(.58 + var(--depth, 1) * .043));
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-reference-kit-workspace) .g4s-reference-color-product.is-active {
    width: min(50%, 430px);
    height: min(100%, 430px);
    max-height: 430px;
    transform: translate(0, 0) scale(1);
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-reference-kit-workspace) .g4s-reference-outfit.has-mannequin .g4s-reference-mannequin-layer.is-sponsor {
    display: none;
  }
}

/* The brand wordmark dot needs to beat broad inherited span color rules. */
#gen4smshrs-configurator .g4s-reference-shell .g4s-sponsor-topbar .g4s-sponsor-topbar-brand .g4s-reference-top-wordmark > strong > span {
  display: inline-block;
  color: #00e8fe;
  -webkit-text-fill-color: #00e8fe;
}

/* Step 5 final pass: size carousel cards to their clipped stage and match the reference layering. */
@media (min-width: 961px) {
  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-reference-kit-workspace) .g4s-reference-color-stage {
    container-type: size;
    align-items: start;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-reference-kit-workspace) .g4s-reference-color-product {
    width: min(100cqh, 430px);
    height: min(100cqh, 430px);
    max-width: 100cqh;
    max-height: 100cqh;
    transform: translate(calc(var(--offset, 0) * 30%), calc((3 - var(--depth, 1)) * 8px + 24px)) scale(calc(.36 + var(--depth, 1) * .16));
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-reference-kit-workspace) .g4s-reference-color-product.is-active {
    width: min(100cqh, 430px);
    height: min(100cqh, 430px);
    max-width: 100cqh;
    max-height: 100cqh;
    transform: translate(0, 0) scale(1);
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-reference-kit-workspace) .g4s-reference-role-tabs button {
    font-family: "G4S Reference Sans", Arial, sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-reference-kit-workspace) .g4s-reference-role-tabs button svg {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
  }
}

/* V9 mobile E2E: restore the sentence-part controls and the validated per-step dock. */
@media (max-width: 960px) {
  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-multistep-form {
    padding-bottom: calc(var(--g4s-dock-height, 184px) + 12px);
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-reference-step-nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-auto-flow: row;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    row-gap: 8px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-reference-step-nav > .g4s-reference-back {
    display: inline-flex !important;
    grid-column: 1;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 7px 9px;
    font-size: 12px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified .g4s-reference-step-nav > .g4s-mobile-step-dock {
    display: grid !important;
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding-top: 5px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-reference-kit-workspace) .g4s-reference-kit-stage {
    grid-template-rows: auto auto minmax(280px, 1fr) auto auto;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-reference-kit-workspace) .g4s-reference-color-stage {
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    justify-items: center;
    height: clamp(280px, 82vw, 320px);
    min-height: 280px;
    max-height: 320px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-reference-kit-workspace) .g4s-reference-color-product {
    grid-column: 1;
    grid-row: 1;
    width: min(94%, 340px);
    height: min(100%, 320px);
    max-width: 94%;
    max-height: 100%;
    transform: translateX(calc(var(--offset, 0) * 34%)) scale(calc(1 - var(--depth, 1) * .08));
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-reference-kit-workspace) .g4s-reference-color-product.is-active {
    width: min(94%, 340px);
    height: min(100%, 320px);
    max-width: 94%;
    max-height: 100%;
    transform: translateX(0) scale(1);
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-reference-kit-workspace) .g4s-reference-color-product.has-reference-photo {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-reference-kit-workspace) .g4s-reference-kit-preview {
    grid-template-rows: minmax(330px, auto) auto auto;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-reference-kit-workspace) .g4s-reference-part-tabs {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 8px 0 0;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-reference-kit-workspace) .g4s-reference-part-tabs > .g4s-kit-substeps {
    display: flex !important;
    flex-flow: row nowrap;
    gap: 8px;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 4px 2px 10px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-reference-kit-workspace) .g4s-reference-part-tabs .g4s-kit-substep {
    display: grid !important;
    flex: 0 0 min(44vw, 168px);
    grid-template-columns: 30px minmax(0, 1fr);
    grid-template-areas:
      "number label"
      "number product"
      "number status";
    gap: 3px 7px;
    width: auto;
    min-width: 0;
    min-height: 72px;
    padding: 7px;
    border: 1px solid rgba(218, 241, 255, .48);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(24, 74, 103, .78), rgba(4, 28, 47, .82));
    color: #f6fbff;
    text-align: left;
    scroll-snap-align: start;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-reference-kit-workspace) .g4s-reference-part-tabs .g4s-kit-substep > span {
    display: grid;
    grid-area: number;
    width: 28px;
    min-width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 50%;
    background: rgba(0, 232, 254, .18);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-reference-kit-workspace) .g4s-reference-part-tabs .g4s-kit-substep strong {
    grid-area: label;
    min-width: 0;
    color: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.12;
    overflow-wrap: anywhere;
    text-transform: none;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-reference-kit-workspace) .g4s-reference-part-tabs .g4s-kit-substep small {
    grid-area: product;
    min-width: 0;
    overflow: hidden;
    color: rgba(239, 248, 255, .78);
    font-size: 9px;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-reference-kit-workspace) .g4s-reference-part-tabs .g4s-kit-substep em {
    grid-area: status;
    color: rgba(0, 232, 254, .95);
    font-size: 9px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.1;
    text-transform: none;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-reference-kit-workspace) .g4s-reference-part-tabs .g4s-kit-substep:is(.is-active, .is-current) {
    border-color: var(--g4s-ref-cyan);
    background: linear-gradient(145deg, rgba(0, 161, 201, .58), rgba(5, 56, 85, .84));
    box-shadow: 0 0 14px rgba(0, 232, 254, .28), inset 0 0 0 1px rgba(226, 251, 255, .12);
  }
}

/* V10: keep the confirmed brand visibly selected after the logo-only tile reset. */
#gen4smshrs-configurator .g4s-reference-shell .g4s-step-decision-grid.is-brand .g4s-step-decision-card.is-logo-only.is-active {
  border: 2px solid var(--g4s-ref-cyan);
  border-color: var(--g4s-ref-cyan);
  background: linear-gradient(145deg, rgba(0, 174, 211, .42), rgba(4, 22, 37, .82));
  box-shadow: 0 0 23px rgba(0, 232, 254, .66), inset 0 0 0 1px rgba(226, 251, 255, .22);
}

/* The source uses checks only on the completed first two steps while Step 3 is active. */
@media (min-width: 961px) {
  #gen4smshrs-configurator .g4s-reference-stepper:has(> .g4s-config-step-tab[data-config-step="brand"].is-active) > .g4s-config-step-tab[data-config-step="sport"].is-complete:not(.is-active) > span,
  #gen4smshrs-configurator .g4s-reference-stepper:has(> .g4s-config-step-tab[data-config-step="brand"].is-active) > .g4s-config-step-tab[data-config-step="audience"].is-complete:not(.is-active) > span {
    font-size: 0;
  }

  #gen4smshrs-configurator .g4s-reference-stepper:has(> .g4s-config-step-tab[data-config-step="brand"].is-active) > .g4s-config-step-tab[data-config-step="sport"].is-complete:not(.is-active) > span::before,
  #gen4smshrs-configurator .g4s-reference-stepper:has(> .g4s-config-step-tab[data-config-step="brand"].is-active) > .g4s-config-step-tab[data-config-step="audience"].is-complete:not(.is-active) > span::before {
    color: #053348;
    content: "✓";
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
  }
}

/* V10: match the original brand-step header geometry at desktop reference width. */
@media (min-width: 1280px) {
  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-sponsor-topbar {
    grid-template-columns: minmax(0, 29.4fr) minmax(0, 14.7fr) minmax(0, 40.6fr) minmax(234px, 15.3fr);
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-sponsor-topbar > div:first-child {
    padding-left: 40px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-sponsor-topbar-brand > span:not(.g4s-reference-top-wordmark) {
    margin-left: 3px;
    padding-left: 24px;
    border-left: 1px solid rgba(221, 243, 255, .72);
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-sponsor-topbar > div:nth-child(4) {
    padding-right: 10px;
    padding-left: 0;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-sponsor-topbar-theme .g4s-theme-control {
    gap: 0;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-sponsor-topbar-theme .g4s-theme-control-label {
    display: none;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-sponsor-topbar-theme .g4s-theme-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 234px;
    min-width: 234px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-sponsor-topbar-theme .g4s-theme-options button {
    width: 100%;
    min-width: 0;
  }
}

/* V11: align Step 3's sidebar, progress rail and brand tiles to the source view. */
@media (min-width: 1280px) {
  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-multistep-form {
    grid-template-columns: 276px minmax(0, 1fr);
    gap: 18px;
    padding-right: 26px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-config-stepper {
    padding-right: 4px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-config-step-tab {
    grid-template-columns: 38px 38px minmax(0, 1fr);
    gap: 0 14px;
    padding-left: 7px;
    padding-right: 7px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-config-step-tab::before {
    left: 26px;
    top: 50%;
    bottom: -35px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-config-step-tab:first-of-type::before {
    top: 0;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-config-step-tab:last-of-type::before {
    display: block;
    bottom: -10px;
  }

  #gen4smshrs-configurator .g4s-reference-stepper:has(> .g4s-config-step-tab[data-config-step="brand"].is-active) > .g4s-config-step-tab:nth-of-type(-n + 2)::before {
    background: var(--g4s-ref-cyan);
  }

  #gen4smshrs-configurator .g4s-reference-stepper:has(> .g4s-config-step-tab[data-config-step="brand"].is-active) > .g4s-config-step-tab:nth-of-type(n + 3)::before {
    background: rgba(101, 137, 161, .82);
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-config-step-tab > span {
    width: 38px;
    height: 38px;
    font-size: 16px;
    font-weight: 600;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-config-step-tab.is-active::after {
    inset: 7px -4px 7px 0;
    border-color: rgba(0, 232, 254, .98);
    background: linear-gradient(90deg, rgba(0, 223, 248, .65), rgba(0, 93, 132, .68));
    box-shadow: 0 0 22px rgba(0, 232, 254, .58), 0 0 7px rgba(0, 232, 254, .34), inset 0 0 0 1px rgba(226, 251, 255, .28);
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-config-step-tab.is-active > span {
    width: 48px;
    height: 48px;
    margin-left: 0;
    border-width: 2px;
    font-size: 18px;
    font-weight: 600;
    box-shadow: 0 0 16px rgba(0, 232, 254, .72);
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-config-step-tab strong {
    font-family: "G4S Reference Sans", "G4S Rubik", Arial, sans-serif;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: -.02em;
    line-height: 1.15;
    white-space: nowrap;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-step-icon,
  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-step-icon svg {
    width: 30px;
    height: 30px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-brand-step-panel {
    padding-top: 40px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-brand-step-panel .g4s-form-step-head .g4s-kicker {
    position: relative;
    top: -4px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-brand-step-panel .g4s-decision-instruction {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-brand-step-panel > .g4s-step-decision-grid.is-brand {
    margin-top: 37px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-step-decision-grid.is-brand .g4s-step-decision-card.is-logo-only {
    background: linear-gradient(145deg, rgba(24, 44, 60, .86), rgba(9, 28, 43, .82));
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-step-decision-grid.is-brand .g4s-step-decision-card.is-logo-only.is-active {
    border-width: 2px;
    background: linear-gradient(145deg, rgba(0, 171, 204, .58), rgba(4, 29, 45, .88));
    box-shadow: 0 0 27px rgba(0, 232, 254, .72), inset 0 0 0 1px rgba(226, 251, 255, .28);
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-step-decision-grid.is-brand .g4s-choice-logo {
    width: 78% !important;
    max-height: 100px !important;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-step-decision-grid.is-brand .g4s-choice-icon.has-logo.is-adidas > img {
    width: auto !important;
    height: 110px !important;
    max-width: 90% !important;
    max-height: 110px !important;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-step-decision-grid.is-brand .g4s-choice-icon.has-logo.is-jako > img,
  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-step-decision-grid.is-brand .g4s-choice-icon.has-logo.is-erima > img {
    width: 78% !important;
    max-height: 100px !important;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-step-decision-grid.is-brand .g4s-choice-icon.has-logo.is-kappa > img {
    width: 120px !important;
    max-width: 100% !important;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-step-decision-grid.is-brand .g4s-choice-icon.has-logo.is-kappa::after {
    font-size: 36px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-reference-progress > div {
    position: relative;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    width: min(100%, 420px);
    min-height: 22px;
    isolation: isolate;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-reference-progress > div::before {
    position: absolute;
    z-index: -1;
    top: 50%;
    right: 9px;
    left: 9px;
    height: 4px;
    border-radius: 999px;
    background: rgba(101, 137, 161, .82);
    content: "";
    transform: translateY(-50%);
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-reference-progress i {
    position: relative;
    z-index: 1;
    flex: 0 0 18px;
    width: 18px;
    max-width: 18px;
    height: 18px;
    margin: 0;
    border: 1px solid rgba(211, 235, 250, .24);
    border-radius: 50%;
    background: #68849a;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-reference-progress i.is-complete {
    border-color: var(--g4s-ref-cyan);
    background: var(--g4s-ref-cyan);
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-reference-progress i.is-active {
    flex-basis: 22px;
    width: 22px;
    height: 22px;
    margin: 0;
    border: 2px solid var(--g4s-ref-cyan);
    background: #061b2c;
    box-shadow: 0 0 12px rgba(0, 232, 254, .55);
  }
}

/* V12: retain the original full-height workflow framing and fit all kit swatches. */
@media (min-width: 1280px) and (min-height: 860px) {
  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(:is(.g4s-sport-step-panel, .g4s-audience-step-panel, .g4s-kit-tier-step-panel)) {
    height: 100svh;
    min-height: 100svh;
    max-height: 100svh;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(:is(.g4s-sport-step-panel, .g4s-audience-step-panel, .g4s-kit-tier-step-panel)) .g4s-multistep-form {
    height: calc(100svh - 70px);
    min-height: 0;
    max-height: calc(100svh - 70px);
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(:is(.g4s-sport-step-panel, .g4s-audience-step-panel, .g4s-kit-tier-step-panel, .g4s-reference-kit-workspace)) .g4s-sponsor-topbar-theme {
    display: none;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-reference-kit-workspace) .g4s-reference-color-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    width: fit-content;
    max-width: min(650px, 100%);
    box-sizing: border-box;
    margin-right: auto;
    margin-left: auto;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-reference-kit-workspace) .g4s-reference-color-controls .g4s-reference-color-row {
    flex-wrap: nowrap;
    gap: 7px;
    width: max-content;
    max-width: 100%;
    justify-content: center;
  }

  /* The V11 grid sits 18px above the source view; keep the source row baseline. */
  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-brand-step-panel > .g4s-step-decision-grid.is-brand {
    margin-top: 55px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-step-decision-grid.is-brand .g4s-choice-icon.has-logo.is-jako > img {
    width: 60% !important;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-step-decision-grid.is-brand .g4s-choice-icon.has-logo.is-uhlsport > img {
    width: 65% !important;
  }
}

/* V17: measured desktop corrections for steps 1, 2, 4, 5, and 6 only. */
@media (min-width: 1280px) and (min-height: 860px) {
  /* The reference starts these choices at the title; remove the extra step label. */
  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-sport-step-panel) .g4s-sport-step-panel .g4s-form-step-head .g4s-kicker,
  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-audience-step-panel) .g4s-audience-step-panel .g4s-form-step-head .g4s-kicker {
    display: none;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-sport-step-panel) .g4s-sport-step-panel,
  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-audience-step-panel) .g4s-audience-step-panel {
    padding-right: 11px;
    padding-left: 11px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-sport-step-panel) .g4s-sport-step-panel .g4s-step-decision-card {
    height: 502px;
    max-height: 502px;
    grid-template-rows: minmax(0, 1fr) 154px;
  }

  /* Step 4: wrap breadcrumb and product choices in the source-sized glass surface. */
  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-kit-tier-step-panel) .g4s-multistep-form {
    grid-template-columns: 264px minmax(0, 1fr);
    gap: 19px;
    padding: 35px 47px 51px 41px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-kit-tier-step-panel) .g4s-config-stack {
    height: calc(100% - 60px);
    min-height: 0;
    grid-template-rows: minmax(0, 1fr) 81px;
    gap: 18px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-kit-tier-step-panel) .g4s-config-layer {
    display: grid;
    grid-template-rows: 41px minmax(0, 1fr);
    align-content: stretch;
    gap: 12px;
    min-height: 0;
    overflow: hidden;
    padding: 16px 0 0;
    border: 1px solid rgba(207, 235, 252, .42);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(31, 61, 80, .36), rgba(5, 26, 43, .34));
    box-shadow: 0 15px 38px rgba(0, 11, 20, .2), inset 0 1px 0 rgba(255, 255, 255, .1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-kit-tier-step-panel) .g4s-config-layer > .g4s-reference-breadcrumb {
    align-self: end;
    margin: 0 0 2px 25px;
    padding: 0;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-kit-tier-step-panel) .g4s-kit-tier-step-panel {
    min-height: 0;
    padding: 16px 18px 18px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-kit-tier-step-panel) .g4s-kit-tier-grid {
    min-height: 0;
    margin-top: 1px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-kit-tier-step-panel) .g4s-kit-tier-card {
    height: 380px;
    min-height: 380px;
    max-height: 380px;
    box-sizing: border-box;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-kit-tier-step-panel) .g4s-reference-step-nav {
    height: 81px;
    min-height: 81px;
    max-height: 81px;
    grid-template-columns: 282px minmax(0, 1fr) 400px;
    gap: 14px;
    box-sizing: border-box;
    padding: 7px 18px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-kit-tier-step-panel) .g4s-reference-step-nav .g4s-reference-back {
    width: 282px;
    min-width: 282px;
    min-height: 62px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-kit-tier-step-panel) .g4s-reference-step-nav .g4s-reference-next {
    width: 400px;
    min-width: 400px;
    min-height: 62px;
  }

  /* Keep every real catalog color in the compact tray; excess items scroll horizontally. */
  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-reference-kit-workspace) .g4s-reference-color-controls {
    position: relative;
    display: block;
    width: 561px;
    min-width: 0;
    max-width: min(100%, 561px);
    height: 63px;
    min-height: 63px;
    max-height: 63px;
    box-sizing: border-box;
    margin: 7px auto 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(211, 239, 255, .4);
    border-radius: 999px;
    background: rgba(2, 19, 32, .82);
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-reference-kit-workspace) .g4s-reference-color-controls > .g4s-reference-color-row {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    width: 100%;
    max-width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-color: rgba(0, 232, 254, .72) rgba(255, 255, 255, .08);
    scrollbar-width: thin;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-reference-kit-workspace) .g4s-reference-color-controls > .g4s-reference-color-row::-webkit-scrollbar {
    height: 5px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-reference-kit-workspace) .g4s-reference-color-controls > .g4s-reference-color-row::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(0, 232, 254, .72);
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-reference-kit-workspace) .g4s-reference-color-controls .g4s-reference-color {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    box-sizing: border-box;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-reference-kit-workspace) .g4s-reference-color-controls > :is(strong, span:last-child) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* The source upload title uses the broad, bold sans display face. */
  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-logo-upload-step) .g4s-reference-upload-title {
    padding-left: 29px;
    font-family: Arial, "Helvetica Neue", sans-serif;
    font-size: 52px;
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1;
  }
}

/* V18: tighten measured desktop offsets from the V17 screenshots. */
@media (min-width: 1280px) and (min-height: 860px) {
  /* The card photo raster ends before its baked-in title strip. */
  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-sport-step-panel) .g4s-sport-step-panel .g4s-step-decision-card {
    grid-template-rows: minmax(0, 1fr) 172px;
  }

  /* Step 2 has no step kicker, but retains the original vertical space before its choices. */
  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-audience-step-panel) .g4s-audience-step-panel .g4s-form-step-head {
    margin-top: 46px;
    transform: translateY(4px);
  }

  /* The source Step 4 uses the breadcrumb, heading, and cards without a second step pill. */
  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-kit-tier-step-panel) .g4s-config-layer > .g4s-reference-breadcrumb {
    transform: translateY(-8px);
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-kit-tier-step-panel) .g4s-kit-tier-step-panel .g4s-form-step-head > span {
    visibility: hidden;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-kit-tier-step-panel) .g4s-kit-tier-step-panel .g4s-form-step-head h2 {
    transform: translateY(-8px);
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-kit-tier-step-panel) .g4s-kit-tier-grid {
    margin-top: 24px;
  }

  /* Center the compact swatch tray on the coordinates in the source view. */
  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-reference-kit-workspace) .g4s-reference-color-controls {
    transform: translate(21px, -16px);
  }

  /* Specificity beats the later details stylesheet's 52px clamp. */
  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-logo-upload-step) .g4s-config-layer[data-config-step-current="logo-upload"] .g4s-logo-upload-step .g4s-reference-upload-title {
    font-size: 54px;
    line-height: 1;
    transform: scaleX(.945) translateY(3px);
    transform-origin: left top;
  }
}

/* V13: align only the desktop Step 3 view to the measured 1672 × 941 source. */
@media (min-width: 1600px) and (min-height: 900px) {
  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-sponsor-topbar-brand > span:not(.g4s-reference-top-wordmark) {
    font-family: "G4S Reference Sans", "G4S Rubik", Arial, sans-serif;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: .3em;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-sponsor-topbar > div:nth-child(2) > strong {
    font-family: "G4S Reference Sans", "G4S Rubik", Arial, sans-serif;
    font-weight: 400;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-reference-progress strong {
    font-family: "G4S Reference Sans", "G4S Rubik", Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-brand-step-panel .g4s-form-step-head > span {
    display: inline-flex;
    width: 258px;
    height: 46px;
    align-items: center;
    justify-content: center;
    padding: 0;
    transform: translateX(-23px);
    font-family: "G4S Reference Sans", "G4S Rubik", Arial, sans-serif;
    font-size: 20px;
    font-weight: 600;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-step-decision-grid.is-brand .g4s-step-decision-card.is-logo-only {
    border-color: rgba(221, 243, 255, .82);
    background: linear-gradient(145deg, rgba(50, 68, 82, .78), rgba(18, 37, 52, .74));
    box-shadow: 0 0 12px rgba(0, 232, 254, .14), 0 14px 34px rgba(0, 11, 20, .2), inset 0 1px 0 rgba(255, 255, 255, .24);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-step-decision-grid.is-brand .g4s-step-decision-card.is-logo-only.is-active {
    background: linear-gradient(145deg, rgba(0, 181, 211, .62), rgba(4, 29, 45, .8));
    box-shadow: 0 0 32px rgba(0, 232, 254, .82), 0 0 10px rgba(0, 232, 254, .52), inset 0 0 0 1px rgba(226, 251, 255, .34);
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-reference-step-nav {
    height: 96px;
    min-height: 96px;
    grid-template-columns: 260px minmax(0, 1fr) 292px;
    gap: 0;
    padding: 6px 15px 6px 2px;
    transform: translateY(-4px);
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-reference-step-nav .g4s-reference-back {
    width: 260px;
    min-width: 260px;
    height: 82px;
    min-height: 82px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-reference-step-nav .g4s-reference-next {
    width: 292px;
    min-width: 292px;
    height: 81px;
    min-height: 81px;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-reference-step-nav :is(.g4s-reference-back, .g4s-reference-next) {
    font-weight: 400;
  }
}

/* V14: measured adjustments after V13 browser comparison. */
@media (min-width:1600px) and (min-height:900px) {
#gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-config-stepper { background:linear-gradient(180deg,rgba(65,88,90,.7),rgba(0,17,21,.9)); box-shadow:0 13px 30px rgba(0,15,25,.14),inset 0 1px 0 rgba(255,255,255,.17); }
#gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-config-step-tab.is-active::after { border-color:rgba(117,249,255,.98); background:linear-gradient(90deg,rgba(0,44,54,.9),rgba(0,202,234,.85)); box-shadow:0 0 24px rgba(0,232,254,.76),0 0 9px rgba(0,232,254,.48),inset 0 0 0 1px rgba(226,251,255,.38); }
#gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-brand-step-panel > .g4s-step-decision-grid.is-brand { margin-top:48px; }
#gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-brand-step-panel .g4s-form-step-head > span { transform:translate(-24px,1px); background:linear-gradient(90deg,rgba(0,30,52,.85),rgba(0,83,121,.84)); box-shadow:inset 0 0 17px #00d9f5aa,0 0 14px #00e8feaa; }
#gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-step-decision-grid.is-brand .g4s-step-decision-card.is-logo-only { background:linear-gradient(145deg,rgba(69,86,100,.78),rgba(30,49,67,.74)); }
#gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-step-decision-grid.is-brand .g4s-step-decision-card.is-logo-only.is-active { border-color:#00e8fe; background:linear-gradient(145deg,rgba(0,181,211,.62),rgba(4,29,45,.8)); box-shadow:inset 0 0 18px #00d9f599,0 0 17px #00e8feaa,0 0 3px #d0ffff; }
#gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-reference-step-nav { background:rgba(0,7,8,.82); }
#gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-reference-step-nav :is(.g4s-reference-back,.g4s-reference-next) { position:relative; }
#gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-reference-step-nav :is(.g4s-reference-back,.g4s-reference-next) > b { position:absolute; font-size:42px; }
#gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-reference-step-nav .g4s-reference-back > b { left:32px; }
#gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-reference-step-nav .g4s-reference-next > b { right:30px; }
#gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-reference-step-nav .g4s-reference-back > span { position:absolute; left:98px; text-align:left; }
#gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-reference-step-nav .g4s-reference-next > span { position:absolute; left:calc(50% - 9px); transform:translateX(-50%); text-align:center; }
#gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-reference-step-nav :is(.g4s-reference-back,.g4s-reference-next) > span small { font-size:16px; margin-top:4px; }
#gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-reference-progress strong { transform:translateX(-5px); }
#gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-brand-step-panel) .g4s-reference-progress > div { transform:translateX(15px); }
}

/* V20: source-verified sidebar glass, lower facets and completion marks for Steps 1, 2, 4, 5 and 6. */
@media (min-width: 1280px) and (min-height: 860px) {
  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer:is([data-config-step-current="sport"], [data-config-step-current="audience"], [data-config-step-current="kit-tier"], [data-config-step-current="kit"], [data-config-step-current="logo-upload"])) .g4s-config-stepper {
    isolation: isolate;
    background: linear-gradient(180deg, rgba(54, 77, 91, .5), rgba(20, 44, 57, .48));
    box-shadow: 0 13px 30px rgba(0, 15, 25, .12), inset 0 1px 0 rgba(255, 255, 255, .2);
    -webkit-backdrop-filter: blur(5px) saturate(112%);
    backdrop-filter: blur(5px) saturate(112%);
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer:is([data-config-step-current="sport"], [data-config-step-current="audience"], [data-config-step-current="kit-tier"], [data-config-step-current="kit"], [data-config-step-current="logo-upload"])) .g4s-config-stepper::after {
    position: absolute;
    z-index: 0;
    inset: auto 0 0;
    height: 21%;
    min-height: 144px;
    max-height: 184px;
    border-radius: 0 0 18px 18px;
    background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20280%20180'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,0L280,0L280,42L152,76L0,52Z'%20fill='%2308243b'%20fill-opacity='.24'/%3E%3Cpath%20d='M152,76L280,42L280,98L102,90Z'%20fill='%23c2e3ed'%20fill-opacity='.14'/%3E%3Cpath%20d='M0,52L152,76L102,90L0,125Z'%20fill='%23071c30'%20fill-opacity='.32'/%3E%3Cpath%20d='M0,125L102,90L280,98L280,136L125,120L0,162Z'%20fill='%23a4cbd9'%20fill-opacity='.13'/%3E%3Cpath%20d='M0,162L125,120L280,136L280,180L0,180Z'%20fill='%23071c30'%20fill-opacity='.31'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    content: "";
    pointer-events: none;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer:is([data-config-step-current="sport"], [data-config-step-current="audience"], [data-config-step-current="kit-tier"], [data-config-step-current="kit"], [data-config-step-current="logo-upload"])) .g4s-config-step-tab {
    z-index: 1;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer:is([data-config-step-current="sport"], [data-config-step-current="audience"], [data-config-step-current="kit-tier"], [data-config-step-current="kit"], [data-config-step-current="logo-upload"])) .g4s-stepper-wordmark {
    position: relative;
    z-index: 1;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer:is([data-config-step-current="audience"], [data-config-step-current="kit-tier"], [data-config-step-current="kit"], [data-config-step-current="logo-upload"])) .g4s-config-step-tab.is-complete:not(.is-active) > span {
    font-size: 0;
  }

  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer:is([data-config-step-current="audience"], [data-config-step-current="kit-tier"], [data-config-step-current="kit"], [data-config-step-current="logo-upload"])) .g4s-config-step-tab.is-complete:not(.is-active) > span::after {
    color: #fff;
    content: "✓";
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
  }

  /* Source 06's left rail is inset 5px/19px and shorter than the other viewports. */
  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer[data-config-step-current="logo-upload"]) .g4s-config-stepper {
    width: auto;
    margin: 19px 5px 15px;
  }
}

/* V21: source-measured Step 4 title only; preserve the card geometry. */
@media (min-width: 1600px) and (min-height: 900px) {
  #gen4smshrs-configurator .g4s-reference-shell.is-unified:has(.g4s-config-layer[data-config-step-current="kit-tier"]) .g4s-config-layer[data-config-step-current="kit-tier"] .g4s-kit-tier-step-panel .g4s-form-step-head h2 {
    transform: translate(-114px, -11px) scale(1.26, 1.38);
    transform-origin: center center;
  }
}