/* Presentation variants. All variants intentionally retain the shared DOM and JS hooks. */

.gsc__no-script {
  margin: 20px;
  padding: 16px 18px;
  border: 1px solid var(--gsc-danger);
  border-radius: var(--gsc-radius);
  background: rgba(255, 190, 85, .12);
  color: var(--gsc-text);
}

.gsc__no-script p { margin: 6px 0 0; color: var(--gsc-muted); }

/* Modern Wizard: the balanced default, with a focused progress rail. */
.gsc--template-modern-wizard {
  --gsc-accent: #ef3f91;
  --gsc-bg: #160617;
  --gsc-surface: #260a2c;
  --gsc-surface-2: #35103d;
  --gsc-line: rgba(240, 187, 232, .23);
}

.gsc--template-modern-wizard .gsc__steps li.is-active button {
  box-shadow: inset 3px 0 var(--gsc-accent), 0 8px 22px rgba(239, 63, 145, .12);
}

/* Compact Professional: dense information architecture and restrained colour. */
.gsc--template-compact-professional {
  --gsc-bg: #101722;
  --gsc-surface: #152130;
  --gsc-surface-2: #1c2b3d;
  --gsc-surface-3: #26394e;
  --gsc-line: #33475d;
  --gsc-accent: #56b9ff;
  --gsc-muted: #b3c2d1;
  --gsc-radius: 8px;
  --gsc-radius-lg: 12px;
  font-family: Inter, Arial, sans-serif;
}

.gsc--template-compact-professional .gsc__topbar { min-height: 56px; padding: 8px 20px; }
.gsc--template-compact-professional .gsc__brand { font-size: 18px; }
.gsc--template-compact-professional .gsc__heading h2 { font-size: 20px; }
.gsc--template-compact-professional .gsc__modes button { min-width: 112px; padding: 7px 10px; }
.gsc--template-compact-professional .gsc__steps { padding-inline: 10px; }
.gsc--template-compact-professional .gsc__panel { padding: 22px; }
.gsc--template-compact-professional .gsc__panel-head { margin-bottom: 16px; }
.gsc--template-compact-professional .gsc__product-list { gap: 10px; }
.gsc--template-compact-professional .gsc__product-card { border-radius: 7px; }
.gsc--template-compact-professional .gsc__summary { padding: 18px 16px; }
.gsc--template-compact-professional .gsc__tent-visual { display: none; }

/* Visual Product Cards: catalogue-like contrast and larger tactile cards. */
.gsc--template-visual-cards {
  --gsc-bg: #100a20;
  --gsc-surface: #1a1030;
  --gsc-surface-2: #251744;
  --gsc-surface-3: #31225a;
  --gsc-line: rgba(176, 142, 255, .3);
  --gsc-accent: #bc8cff;
  --gsc-green: #7fe3b1;
  --gsc-radius: 18px;
  --gsc-radius-lg: 26px;
  background: radial-gradient(circle at 80% 0, rgba(188, 140, 255, .2), transparent 31%), var(--gsc-bg);
}

.gsc--template-visual-cards .gsc__topbar { background: linear-gradient(90deg, rgba(188, 140, 255, .14), transparent 55%); }
.gsc--template-visual-cards .gsc__steps { background: rgba(10, 5, 24, .42); }
.gsc--template-visual-cards .gsc__product-list { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.gsc--template-visual-cards .gsc__product-card { min-height: 236px; border-radius: 18px; box-shadow: 0 12px 26px rgba(0, 0, 0, .18); }
.gsc--template-visual-cards .gsc__product-card:hover { transform: translateY(-4px); border-color: var(--gsc-accent); }
.gsc--template-visual-cards .gsc__product-card.is-selected { box-shadow: 0 0 0 2px var(--gsc-accent), 0 16px 32px rgba(188, 140, 255, .18); }
.gsc--template-visual-cards .gsc__summary { background: linear-gradient(180deg, rgba(43, 25, 76, .78), rgba(18, 10, 35, .95)); }

/* One Page: remove the dashboard feel and place the summary below the work area. */
.gsc--template-one-page {
  --gsc-bg: #0c1715;
  --gsc-surface: #10231e;
  --gsc-surface-2: #173129;
  --gsc-line: #285244;
  --gsc-accent: #9ee870;
  max-width: 1180px;
}

.gsc--template-one-page .gsc__topbar { grid-template-columns: auto 1fr auto; }
.gsc--template-one-page .gsc__modes { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; }
.gsc--template-one-page .gsc__modes button { flex: 1; min-width: 0; align-items: center; text-align: center; }
.gsc--template-one-page .gsc__workspace { display: grid; grid-template-columns: 1fr; min-height: 0; }
.gsc--template-one-page .gsc__steps { border-right: 0; border-bottom: 1px solid var(--gsc-line); padding: 12px 22px; }
.gsc--template-one-page .gsc__steps ol { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.gsc--template-one-page .gsc__steps ol:before { display: none; }
.gsc--template-one-page .gsc__steps li { flex: 0 0 auto; }
.gsc--template-one-page .gsc__steps button { min-width: 126px; }
.gsc--template-one-page .gsc__main { min-height: 560px; }
.gsc--template-one-page .gsc__panel { padding: 34px 42px; }
.gsc--template-one-page .gsc__summary { position: static; max-height: none; border-left: 0; border-top: 1px solid var(--gsc-line); padding: 24px 42px; }
.gsc--template-one-page .gsc__summary .gsc__chosen { columns: 2; column-gap: 24px; }

/* Mobile First: a single-column, high-touch treatment even on wide screens. */
.gsc--template-mobile-first {
  --gsc-bg: #11161d;
  --gsc-surface: #18212c;
  --gsc-surface-2: #202c39;
  --gsc-line: #354656;
  --gsc-accent: #ffb449;
  --gsc-radius: 16px;
  --gsc-radius-lg: 20px;
  max-width: 680px;
}

.gsc--template-mobile-first .gsc__topbar { grid-template-columns: 1fr auto; gap: 12px; padding: 16px; }
.gsc--template-mobile-first .gsc__heading { grid-column: 1 / -1; grid-row: 1; }
.gsc--template-mobile-first .gsc__brand { grid-column: 1; grid-row: 2; font-size: 17px; }
.gsc--template-mobile-first .gsc__language { grid-column: 2; grid-row: 2; }
.gsc--template-mobile-first .gsc__modes { grid-column: 1 / -1; grid-row: 3; }
.gsc--template-mobile-first .gsc__modes button { flex: 1; min-width: 0; padding: 10px 7px; align-items: center; text-align: center; }
.gsc--template-mobile-first .gsc__modes button small { display: none; }
.gsc--template-mobile-first .gsc__workspace { display: flex; flex-direction: column; min-height: 0; }
.gsc--template-mobile-first .gsc__steps { order: 0; border-right: 0; border-bottom: 1px solid var(--gsc-line); padding: 12px 16px; }
.gsc--template-mobile-first .gsc__steps ol { display: flex; overflow-x: auto; gap: 7px; }
.gsc--template-mobile-first .gsc__steps ol:before { display: none; }
.gsc--template-mobile-first .gsc__steps li { flex: 0 0 auto; }
.gsc--template-mobile-first .gsc__steps button { min-width: 52px; padding: 9px; grid-template-columns: 1fr; }
.gsc--template-mobile-first .gsc__steps button span:not(.gsc__step-icon) { display: none; }
.gsc--template-mobile-first .gsc__progress-copy { display: none; }
.gsc--template-mobile-first .gsc__main { order: 1; }
.gsc--template-mobile-first .gsc__panel { padding: 22px 16px; }
.gsc--template-mobile-first .gsc__product-list { grid-template-columns: 1fr; gap: 12px; }
.gsc--template-mobile-first .gsc__product-card { min-height: 136px; }
.gsc--template-mobile-first .gsc__navigation { position: sticky; bottom: 0; z-index: 4; padding: 12px 16px; background: rgba(24, 33, 44, .96); border-top: 1px solid var(--gsc-line); }
.gsc--template-mobile-first .gsc__summary { order: 2; position: static; max-height: none; border-left: 0; border-top: 1px solid var(--gsc-line); padding: 20px 16px; }
.gsc--template-mobile-first .gsc__tent-visual { display: none; }

@media (max-width: 900px) {
  .gsc--template-one-page .gsc__topbar { grid-template-columns: 1fr auto; }
  .gsc--template-one-page .gsc__heading { grid-column: 1 / -1; }
  .gsc--template-one-page .gsc__modes { grid-column: 1 / -1; }
  .gsc--template-one-page .gsc__panel,
  .gsc--template-one-page .gsc__summary { padding-inline: 20px; }
  .gsc--template-one-page .gsc__summary .gsc__chosen { columns: 1; }
}

@media (max-width: 620px) {
  .gsc--template-compact-professional .gsc__topbar { padding: 12px; }
  .gsc--template-compact-professional .gsc__modes button { min-width: 0; flex: 1; }
  .gsc--template-visual-cards .gsc__product-card { min-height: 0; }
  .gsc--template-one-page .gsc__panel,
  .gsc--template-one-page .gsc__summary { padding-inline: 14px; }
  .gsc--template-mobile-first { margin: 0 auto; border-radius: 0; }
}