/* repairOS frontend wizard experience styles.
   This file is intentionally separate from ros-frontend-wizard.css. */

html.ros-fw-experience-active,
html.ros-fw-experience-active body.ros-wizard-active {
  scroll-behavior: smooth;
}

body.ros-wizard-active .ros-fw-tools-toggle,
body.ros-wizard-active .ros-fw-stylebar,
body.ros-wizard-active .ros-fw-stylebar * {
  box-sizing: border-box !important;
  font-family: var(--font-family-main, "Bai Jamjuree", Arial, sans-serif) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.ros-fw-tools-toggle {
  position: fixed !important;
  top: calc(env(safe-area-inset-top, 0px) + 16px) !important;
  right: 16px !important;
  z-index: 2147481001 !important;
  min-height: 42px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(15, 23, 42, .16) !important;
  border-radius: 8px !important;
  background: #111827 !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .18) !important;
  cursor: pointer !important;
}

.ros-fw-stylebar {
  position: fixed !important;
  top: calc(env(safe-area-inset-top, 0px) + 66px) !important;
  right: 16px !important;
  z-index: 2147481000 !important;
  display: grid !important;
  gap: 12px !important;
  width: min(94vw, 330px) !important;
  padding: 12px !important;
  border: 1px solid rgba(15, 23, 42, .12) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 18px 46px rgba(15, 23, 42, .18) !important;
  backdrop-filter: blur(14px) saturate(1.25) !important;
}

.ros-fw-stylebar.is-collapsed {
  display: none !important;
}

.ros-fw-stylebar__head {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.ros-fw-stylebar__head {
  justify-content: space-between !important;
}

.ros-fw-stylebar__title {
  color: #111827 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

.ros-fw-stylebar__close {
  width: 32px !important;
  height: 32px !important;
  border: 1px solid rgba(15, 23, 42, .12) !important;
  border-radius: 7px !important;
  background: #fff !important;
  color: #111827 !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

.ros-fw-stylebar__section {
  display: grid !important;
  gap: 8px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(15, 23, 42, .10) !important;
}

.ros-fw-stylebar__label {
  color: #4b5563 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.ros-fw-stylebar__select {
  height: 38px !important;
  min-height: 38px !important;
  border-radius: 7px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.ros-fw-stylebar__select {
  width: 100% !important;
  min-width: 100% !important;
  border: 1px solid rgba(15, 23, 42, .16) !important;
  background: #fff !important;
  color: #111827 !important;
  padding: 0 34px 0 12px !important;
}

.ros-fw-stylebar #ros-gsm-btn,
.ros-fw-stylebar .ros-fw-stylebar__importer {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 42px !important;
  justify-content: flex-start !important;
  border-radius: 7px !important;
  transform: none !important;
  box-shadow: none !important;
}

.ros-fw-headline {
  position: fixed !important;
  z-index: 2147480990 !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
  font-family: var(--font-family-main, "Bai Jamjuree", Arial, sans-serif) !important;
}

.ros-fw-headline__eyebrow {
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

.ros-fw-headline__title {
  margin-top: 6px !important;
  font-size: clamp(22px, 3vw, 38px) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
}

.ros-fw-progress {
  position: fixed !important;
  z-index: 2147480990 !important;
  box-sizing: border-box !important;
  font-family: var(--font-family-main, "Bai Jamjuree", Arial, sans-serif) !important;
}

.ros-fw-progress__track {
  position: relative !important;
  overflow: hidden !important;
  background: rgba(148, 163, 184, .24) !important;
}

.ros-fw-progress__bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  transition: width .38s ease;
}

.ros-fw-orb {
  position: fixed !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.ros-fw-orb::before,
.ros-fw-orb::after {
  content: "";
  position: absolute;
  border-radius: 999px;
}

body.ros-wizard-active.ros-fw-enter .ros-step-content.active {
  animation: rosFwStepIn .34s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes rosFwStepIn {
  from {
    opacity: .38;
    transform: translate3d(0, 18px, 0) scale(.985);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

body.ros-wizard-active.ros-fw-enter .brand-card,
body.ros-wizard-active.ros-fw-enter .ros-popular-model-card,
body.ros-wizard-active.ros-fw-enter .repair-card {
  animation: rosFwCardPop .38s ease both;
}

body.ros-wizard-active.ros-fw-enter .brand-card:nth-child(2n),
body.ros-wizard-active.ros-fw-enter .ros-popular-model-card:nth-child(2n),
body.ros-wizard-active.ros-fw-enter .repair-card:nth-child(2n) {
  animation-delay: .035s;
}

body.ros-wizard-active.ros-fw-enter .brand-card:nth-child(3n),
body.ros-wizard-active.ros-fw-enter .ros-popular-model-card:nth-child(3n),
body.ros-wizard-active.ros-fw-enter .repair-card:nth-child(3n) {
  animation-delay: .07s;
}

@keyframes rosFwCardPop {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

body.ros-wizard-active.ros-fw-atelier {
  --ros-fw-ink: #0f172a;
  --ros-fw-muted: #667085;
  --ros-fw-panel: #ffffff;
  --ros-fw-line: rgba(15, 23, 42, .12);
  --ros-fw-accent: #ff5b3f;
  --ros-fw-accent-2: #0ea5a4;
  background:
    linear-gradient(90deg, rgba(15, 23, 42, .035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(15, 23, 42, .035) 1px, transparent 1px),
    #f7f2ea !important;
  background-size: 44px 44px !important;
  color: var(--ros-fw-ink) !important;
}

body.ros-wizard-active.ros-fw-atelier::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 91, 63, .14), transparent 28%),
    radial-gradient(circle at 86% 22%, rgba(14, 165, 164, .16), transparent 30%),
    radial-gradient(circle at 74% 84%, rgba(17, 24, 39, .08), transparent 30%);
}

body.ros-wizard-active.ros-fw-atelier .ros-fw-headline {
  top: 92px !important;
  left: max(28px, calc(50vw - 620px)) !important;
  max-width: 360px !important;
  color: #111827 !important;
}

body.ros-wizard-active.ros-fw-atelier .ros-fw-headline__eyebrow {
  color: var(--ros-fw-accent) !important;
}

body.ros-wizard-active.ros-fw-atelier .ros-fw-progress {
  left: max(28px, calc(50vw - 620px)) !important;
  bottom: 30px !important;
  width: min(340px, calc(100vw - 56px)) !important;
}

body.ros-wizard-active.ros-fw-atelier .ros-fw-progress__track {
  height: 8px !important;
  border-radius: 999px !important;
}

body.ros-wizard-active.ros-fw-atelier .ros-fw-progress__bar {
  background: linear-gradient(90deg, var(--ros-fw-accent), var(--ros-fw-accent-2)) !important;
}

body.ros-wizard-active.ros-fw-atelier #ros-stepper {
  position: fixed !important;
  left: max(28px, calc(50vw - 620px)) !important;
  top: 210px !important;
  z-index: 3000 !important;
  width: 220px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.ros-wizard-active.ros-fw-atelier #ros-stepper::before,
body.ros-wizard-active.ros-fw-atelier #ros-stepper::after,
body.ros-wizard-active.ros-fw-atelier #ros-stepper .ros-step::before,
body.ros-wizard-active.ros-fw-atelier #ros-stepper .ros-step::after {
  content: none !important;
  display: none !important;
}

body.ros-wizard-active.ros-fw-atelier #ros-stepper .ros-step {
  width: 100% !important;
  min-height: 58px !important;
  height: auto !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  border: 1px solid var(--ros-fw-line) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .62) !important;
  color: var(--ros-fw-ink) !important;
  box-shadow: none !important;
  transform: none !important;
  backdrop-filter: blur(12px) !important;
}

body.ros-wizard-active.ros-fw-atelier #ros-stepper .ros-step small {
  display: block !important;
  margin: 2px 0 0 0 !important;
  color: inherit !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

body.ros-wizard-active.ros-fw-atelier #ros-stepper .ros-step.active {
  background: #111827 !important;
  border-color: #111827 !important;
  color: #fff !important;
}

body.ros-wizard-active.ros-fw-atelier #ros-stepper .ros-step.completed {
  background: rgba(14, 165, 164, .16) !important;
  border-color: rgba(14, 165, 164, .34) !important;
}

body.ros-wizard-active.ros-fw-atelier .ros-step-content,
body.ros-wizard-active.ros-fw-atelier #ros-device-preview,
body.ros-wizard-active.ros-fw-atelier #ros-repair-preview,
body.ros-wizard-active.ros-fw-atelier .ros-wizard-nav {
  width: min(920px, calc(100vw - 320px)) !important;
  max-width: 920px !important;
  margin-left: max(292px, calc(50vw - 330px)) !important;
  margin-right: 30px !important;
}

body.ros-wizard-active.ros-fw-atelier .ros-step-content {
  min-height: min(72vh, 760px) !important;
  padding: clamp(26px, 4vw, 54px) !important;
  border: 1px solid rgba(15, 23, 42, .10) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .86) !important;
  box-shadow: 0 28px 80px rgba(15, 23, 42, .13) !important;
  backdrop-filter: blur(18px) !important;
}

body.ros-wizard-active.ros-fw-atelier .ros-step-content > h2 {
  max-width: 780px !important;
  margin: 0 0 28px 0 !important;
  text-align: left !important;
  font-size: clamp(2.3rem, 5vw, 4.2rem) !important;
  line-height: .98 !important;
}

body.ros-wizard-active.ros-fw-atelier .ros-category-grid,
body.ros-wizard-active.ros-fw-atelier .ros-brand-grid,
body.ros-wizard-active.ros-fw-atelier .ros-popular-models,
body.ros-wizard-active.ros-fw-atelier #ros-imported-models,
body.ros-wizard-active.ros-fw-atelier .ros-repair-grid {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
  gap: 16px !important;
}

body.ros-wizard-active.ros-fw-atelier .brand-card,
body.ros-wizard-active.ros-fw-atelier .ros-category-card,
body.ros-wizard-active.ros-fw-atelier .ros-popular-model-card,
body.ros-wizard-active.ros-fw-atelier .repair-card,
body.ros-wizard-active.ros-fw-atelier #ros-step-4 fieldset.form-section {
  border: 1px solid rgba(15, 23, 42, .11) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .07) !important;
}

body.ros-wizard-active.ros-fw-atelier .brand-card:hover,
body.ros-wizard-active.ros-fw-atelier .ros-category-card:hover,
body.ros-wizard-active.ros-fw-atelier .ros-popular-model-card:hover,
body.ros-wizard-active.ros-fw-atelier .repair-card:hover {
  transform: translateY(-5px) rotate(-.25deg) !important;
  border-color: rgba(255, 91, 63, .55) !important;
  box-shadow: 0 20px 46px rgba(15, 23, 42, .13) !important;
}

body.ros-wizard-active.ros-fw-kiosk {
  --ros-fw-ink: #f8fafc;
  --ros-fw-muted: #a7b0c0;
  --ros-fw-panel: #121826;
  --ros-fw-line: rgba(255, 255, 255, .13);
  --ros-fw-accent: #f5c84c;
  --ros-fw-accent-2: #6ee7b7;
  background: #070b12 !important;
  color: var(--ros-fw-ink) !important;
  overflow-x: hidden !important;
}

body.ros-wizard-active.ros-fw-kiosk::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(245, 200, 76, .16), transparent 24%),
    radial-gradient(circle at 82% 12%, rgba(110, 231, 183, .13), transparent 28%),
    linear-gradient(180deg, #0b1020, #06080d);
}

body.ros-wizard-active.ros-fw-kiosk .ros-fw-headline {
  top: 82px !important;
  left: 50% !important;
  width: min(980px, calc(100vw - 44px)) !important;
  transform: translateX(-50%) !important;
  color: var(--ros-fw-ink) !important;
  text-align: center !important;
}

body.ros-wizard-active.ros-fw-kiosk .ros-fw-headline__eyebrow {
  color: var(--ros-fw-accent) !important;
}

body.ros-wizard-active.ros-fw-kiosk .ros-fw-progress {
  left: 50% !important;
  bottom: 28px !important;
  width: min(680px, calc(100vw - 44px)) !important;
  transform: translateX(-50%) !important;
}

body.ros-wizard-active.ros-fw-kiosk .ros-fw-progress__track {
  height: 12px !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .08) !important;
}

body.ros-wizard-active.ros-fw-kiosk .ros-fw-progress__bar {
  background: linear-gradient(90deg, var(--ros-fw-accent), var(--ros-fw-accent-2)) !important;
  box-shadow: 0 0 24px rgba(245, 200, 76, .5) !important;
}

body.ros-wizard-active.ros-fw-kiosk #ros-stepper {
  position: fixed !important;
  left: 50% !important;
  bottom: 58px !important;
  z-index: 3600 !important;
  width: min(720px, calc(100vw - 36px)) !important;
  margin: 0 !important;
  padding: 8px !important;
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: 1fr !important;
  gap: 8px !important;
  transform: translateX(-50%) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 8px !important;
  background: rgba(9, 13, 22, .88) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .36) !important;
  backdrop-filter: blur(18px) !important;
}

body.ros-wizard-active.ros-fw-kiosk #ros-stepper::before,
body.ros-wizard-active.ros-fw-kiosk #ros-stepper::after,
body.ros-wizard-active.ros-fw-kiosk #ros-stepper .ros-step::before,
body.ros-wizard-active.ros-fw-kiosk #ros-stepper .ros-step::after {
  content: none !important;
  display: none !important;
}

body.ros-wizard-active.ros-fw-kiosk #ros-stepper .ros-step {
  width: auto !important;
  min-width: 0 !important;
  height: 54px !important;
  border-radius: 7px !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  background: rgba(255, 255, 255, .06) !important;
  color: #cbd5e1 !important;
  box-shadow: none !important;
  transform: none !important;
}

body.ros-wizard-active.ros-fw-kiosk #ros-stepper .ros-step small {
  display: block !important;
  color: inherit !important;
  font-size: 10px !important;
  font-weight: 900 !important;
}

body.ros-wizard-active.ros-fw-kiosk #ros-stepper .ros-step.active,
body.ros-wizard-active.ros-fw-kiosk #ros-stepper .ros-step.completed {
  background: var(--ros-fw-accent) !important;
  border-color: var(--ros-fw-accent) !important;
  color: #111827 !important;
}

body.ros-wizard-active.ros-fw-kiosk .ros-step-content {
  width: min(1080px, calc(100vw - 44px)) !important;
  max-width: 1080px !important;
  min-height: calc(100vh - 250px) !important;
  margin: 175px auto 154px !important;
  padding: clamp(22px, 4vw, 46px) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 8px !important;
  background: rgba(18, 24, 38, .9) !important;
  color: var(--ros-fw-ink) !important;
  box-shadow: 0 32px 90px rgba(0, 0, 0, .42) !important;
  backdrop-filter: blur(18px) !important;
}

body.ros-wizard-active.ros-fw-kiosk .ros-step-content > h2 {
  margin: 0 auto 32px !important;
  max-width: 860px !important;
  text-align: center !important;
  color: #fff !important;
  font-size: clamp(2.4rem, 6vw, 5.2rem) !important;
  line-height: .93 !important;
}

body.ros-wizard-active.ros-fw-kiosk .ros-category-grid,
body.ros-wizard-active.ros-fw-kiosk .ros-brand-grid,
body.ros-wizard-active.ros-fw-kiosk .ros-popular-models,
body.ros-wizard-active.ros-fw-kiosk #ros-imported-models,
body.ros-wizard-active.ros-fw-kiosk .ros-repair-grid {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 14px !important;
}

body.ros-wizard-active.ros-fw-kiosk .brand-card,
body.ros-wizard-active.ros-fw-kiosk .ros-category-card,
body.ros-wizard-active.ros-fw-kiosk .ros-popular-model-card,
body.ros-wizard-active.ros-fw-kiosk .repair-card,
body.ros-wizard-active.ros-fw-kiosk #ros-step-4 fieldset.form-section {
  border: 1px solid rgba(255, 255, 255, .13) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .055) !important;
  color: #f8fafc !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 16px 38px rgba(0, 0, 0, .22) !important;
}

body.ros-wizard-active.ros-fw-kiosk .brand-card:hover,
body.ros-wizard-active.ros-fw-kiosk .ros-category-card:hover,
body.ros-wizard-active.ros-fw-kiosk .ros-popular-model-card:hover,
body.ros-wizard-active.ros-fw-kiosk .repair-card:hover {
  transform: translateY(-6px) scale(1.018) !important;
  border-color: rgba(245, 200, 76, .72) !important;
  box-shadow: 0 26px 60px rgba(245, 200, 76, .13) !important;
}

body.ros-wizard-active.ros-fw-kiosk input,
body.ros-wizard-active.ros-fw-kiosk select,
body.ros-wizard-active.ros-fw-kiosk textarea {
  background: rgba(255, 255, 255, .08) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .18) !important;
}

body.ros-wizard-active.ros-fw-atelier .ros-cat-card {
  position: relative !important;
  min-height: 168px !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  padding: 18px !important;
  border: 1px solid rgba(15, 23, 42, .16) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background:
    linear-gradient(135deg, rgba(255, 91, 63, .14), transparent 42%),
    linear-gradient(315deg, rgba(14, 165, 164, .16), transparent 40%),
    #fffaf3 !important;
  box-shadow: 0 14px 32px rgba(15, 23, 42, .10) !important;
  text-align: left !important;
  transform: rotate(-.45deg) !important;
}

body.ros-wizard-active.ros-fw-atelier .ros-cat-card:nth-child(2n) {
  background:
    linear-gradient(140deg, rgba(14, 165, 164, .14), transparent 44%),
    linear-gradient(315deg, rgba(15, 23, 42, .08), transparent 42%),
    #ffffff !important;
  transform: rotate(.65deg) translateY(12px) !important;
}

body.ros-wizard-active.ros-fw-atelier .ros-cat-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 12px 12px auto auto !important;
  width: 42px !important;
  height: 42px !important;
  border-top: 4px solid #ff5b3f !important;
  border-right: 4px solid #0ea5a4 !important;
}

body.ros-wizard-active.ros-fw-atelier .ros-cat-card span,
body.ros-wizard-active.ros-fw-atelier .ros-cat-card {
  color: #101828 !important;
  font-weight: 900 !important;
}

body.ros-wizard-active.ros-fw-kiosk .ros-cat-card {
  min-height: 172px !important;
  border: 1px solid rgba(255, 255, 255, .24) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03)),
    #111827 !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 18px 40px rgba(0, 0, 0, .22) !important;
}

body.ros-wizard-active.ros-fw-kiosk .ros-cat-card span,
body.ros-wizard-active.ros-fw-kiosk .ros-cat-card {
  color: #fff !important;
  font-weight: 900 !important;
}

body.ros-wizard-active.ros-fw-pilot .ros-cat-card {
  min-height: 70px !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) 28px !important;
  align-items: center !important;
  justify-items: start !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(26, 127, 100, .18) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #12352b !important;
  text-align: left !important;
  box-shadow: 0 10px 22px rgba(26, 127, 100, .07) !important;
}

body.ros-wizard-active.ros-fw-pilot .ros-cat-card::before {
  content: "" !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #1a7f64, #bddf74) !important;
}

body.ros-wizard-active.ros-fw-pilot .ros-cat-card::after {
  content: ">" !important;
  justify-self: end !important;
  color: #1a7f64 !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

body.ros-wizard-active.ros-fw-pilot .ros-cat-card span,
body.ros-wizard-active.ros-fw-pilot .ros-cat-card {
  font-weight: 850 !important;
}

body.ros-wizard-active.ros-fw-atelier #ros-step-0 .ros-cat-card {
  background:
    linear-gradient(135deg, rgba(255, 91, 63, .14), transparent 42%),
    linear-gradient(315deg, rgba(14, 165, 164, .16), transparent 40%),
    #fffaf3 !important;
  color: #101828 !important;
}

body.ros-wizard-active.ros-fw-atelier #ros-step-0 .ros-cat-card:nth-child(2n) {
  background:
    linear-gradient(140deg, rgba(14, 165, 164, .14), transparent 44%),
    linear-gradient(315deg, rgba(15, 23, 42, .08), transparent 42%),
    #ffffff !important;
}

body.ros-wizard-active.ros-fw-kiosk #ros-step-0 .ros-cat-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03)),
    #111827 !important;
  color: #fff !important;
}

body.ros-wizard-active.ros-fw-pilot #ros-step-0 .ros-cat-card {
  min-height: 70px !important;
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) 28px !important;
  background: #fff !important;
  color: #12352b !important;
}

body.ros-wizard-active.ros-fw-pilot {
  --ros-fw-ink: #06251f;
  --ros-fw-muted: #52615e;
  --ros-fw-panel: #fbfff8;
  --ros-fw-line: rgba(6, 37, 31, .13);
  --ros-fw-accent: #1a7f64;
  --ros-fw-accent-2: #d97706;
  background: #ecf5ea !important;
  color: var(--ros-fw-ink) !important;
}

body.ros-wizard-active.ros-fw-pilot::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(26, 127, 100, .16), transparent 34%),
    linear-gradient(315deg, rgba(217, 119, 6, .12), transparent 28%);
}

body.ros-wizard-active.ros-fw-pilot .ros-fw-headline {
  display: none !important;
}

body.ros-wizard-active.ros-fw-pilot .ros-fw-progress {
  top: 72px !important;
  left: 50% !important;
  width: min(820px, calc(100vw - 32px)) !important;
  transform: translateX(-50%) !important;
}

body.ros-wizard-active.ros-fw-pilot .ros-fw-progress__track {
  height: 6px !important;
  border-radius: 999px !important;
  background: rgba(6, 37, 31, .12) !important;
}

body.ros-wizard-active.ros-fw-pilot .ros-fw-progress__bar {
  background: #1a7f64 !important;
}

body.ros-wizard-active.ros-fw-pilot #ros-stepper {
  position: sticky !important;
  top: 88px !important;
  z-index: 3200 !important;
  width: min(820px, calc(100vw - 32px)) !important;
  margin: 92px auto 14px !important;
  padding: 6px !important;
  border: 1px solid rgba(6, 37, 31, .12) !important;
  border-radius: 8px !important;
  background: rgba(251, 255, 248, .92) !important;
  box-shadow: 0 14px 36px rgba(6, 37, 31, .12) !important;
  backdrop-filter: blur(12px) !important;
}

body.ros-wizard-active.ros-fw-pilot #ros-stepper::before,
body.ros-wizard-active.ros-fw-pilot #ros-stepper::after,
body.ros-wizard-active.ros-fw-pilot #ros-stepper .ros-step::before,
body.ros-wizard-active.ros-fw-pilot #ros-stepper .ros-step::after {
  content: none !important;
  display: none !important;
}

body.ros-wizard-active.ros-fw-pilot #ros-stepper .ros-step {
  width: auto !important;
  min-width: 0 !important;
  height: 42px !important;
  padding: 0 10px !important;
  border-radius: 7px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #52615e !important;
  box-shadow: none !important;
  transform: none !important;
}

body.ros-wizard-active.ros-fw-pilot #ros-stepper .ros-step small {
  display: inline !important;
  margin-left: 5px !important;
  color: inherit !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

body.ros-wizard-active.ros-fw-pilot #ros-stepper .ros-step.active,
body.ros-wizard-active.ros-fw-pilot #ros-stepper .ros-step.completed {
  background: #06251f !important;
  border-color: #06251f !important;
  color: #fff !important;
}

body.ros-wizard-active.ros-fw-pilot .ros-step-content {
  width: min(820px, calc(100vw - 32px)) !important;
  max-width: 820px !important;
  margin: 0 auto 28px !important;
  padding: clamp(18px, 3vw, 30px) !important;
  border: 1px solid rgba(6, 37, 31, .12) !important;
  border-radius: 8px !important;
  background: rgba(251, 255, 248, .95) !important;
  box-shadow: 0 16px 46px rgba(6, 37, 31, .11) !important;
}

body.ros-wizard-active.ros-fw-pilot .ros-step-content > h2 {
  text-align: left !important;
  font-size: clamp(1.8rem, 4.2vw, 3.15rem) !important;
  line-height: 1.03 !important;
  margin: 0 0 18px !important;
}

body.ros-wizard-active.ros-fw-pilot .gsma-search-wrapper,
body.ros-wizard-active.ros-fw-pilot .ros-repair-search-row {
  max-width: none !important;
  margin: 0 0 16px !important;
}

body.ros-wizard-active.ros-fw-pilot .ros-category-grid,
body.ros-wizard-active.ros-fw-pilot #ros-category-grid,
body.ros-wizard-active.ros-fw-pilot .ros-brand-grid,
body.ros-wizard-active.ros-fw-pilot .ros-popular-models,
body.ros-wizard-active.ros-fw-pilot #ros-imported-models,
body.ros-wizard-active.ros-fw-pilot .ros-repair-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

body.ros-wizard-active.ros-fw-pilot .brand-card,
body.ros-wizard-active.ros-fw-pilot .ros-category-card,
body.ros-wizard-active.ros-fw-pilot .ros-popular-model-card,
body.ros-wizard-active.ros-fw-pilot .repair-card {
  min-height: 74px !important;
  display: grid !important;
  grid-template-columns: 66px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 14px !important;
  border: 1px solid rgba(6, 37, 31, .12) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.ros-wizard-active.ros-fw-pilot .brand-card:hover,
body.ros-wizard-active.ros-fw-pilot .ros-category-card:hover,
body.ros-wizard-active.ros-fw-pilot .ros-popular-model-card:hover,
body.ros-wizard-active.ros-fw-pilot .repair-card:hover {
  transform: translateX(6px) !important;
  border-color: rgba(26, 127, 100, .54) !important;
  box-shadow: 0 10px 26px rgba(6, 37, 31, .10) !important;
}

body.ros-wizard-active.ros-fw-pilot .ros-wizard-nav {
  position: sticky !important;
  bottom: 12px !important;
  z-index: 3300 !important;
  width: min(820px, calc(100vw - 32px)) !important;
  margin: 16px auto !important;
  padding: 10px !important;
  border: 1px solid rgba(6, 37, 31, .12) !important;
  border-radius: 8px !important;
  background: rgba(251, 255, 248, .94) !important;
  box-shadow: 0 14px 34px rgba(6, 37, 31, .14) !important;
  backdrop-filter: blur(12px) !important;
}

body.ros-wizard-active.ros-fw-atelier #ros-step-0 .ros-cat-card {
  min-height: 154px !important;
}

body.ros-wizard-active.ros-fw-atelier #ros-step-0 .ros-cat-card:hover {
  transform: translateY(-4px) rotate(-.25deg) !important;
}

body.ros-wizard-active.ros-fw-kiosk #ros-step-0 .ros-cat-card {
  min-height: 132px !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  letter-spacing: 0 !important;
}

body.ros-wizard-active.ros-fw-kiosk #ros-step-0 .ros-cat-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 12px auto auto 12px !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 99px !important;
  background: #f5c84c !important;
  box-shadow: 0 0 18px rgba(245, 200, 76, .72) !important;
}

body.ros-wizard-active.ros-fw-kiosk #ros-step-0 .ros-cat-name {
  color: #f8fafc !important;
  font-weight: 850 !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .45) !important;
}

body.ros-wizard-active.ros-fw-pilot #ros-category-grid {
  counter-reset: rosPilotCards !important;
}

body.ros-wizard-active.ros-fw-pilot #ros-step-0 .ros-cat-card {
  counter-increment: rosPilotCards !important;
  min-height: 62px !important;
  display: grid !important;
  grid-template-columns: 34px 46px minmax(0, 1fr) 20px !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  align-items: center !important;
  justify-items: stretch !important;
}

body.ros-wizard-active.ros-fw-pilot #ros-step-0 .ros-cat-card::before {
  content: counter(rosPilotCards, decimal-leading-zero) !important;
  width: 32px !important;
  height: 32px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 6px !important;
  background: #e5f3dc !important;
  color: #1a7f64 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

body.ros-wizard-active.ros-fw-pilot #ros-step-0 .ros-cat-card::after {
  align-self: center !important;
  justify-self: end !important;
}

body.ros-wizard-active.ros-fw-pilot #ros-step-0 .ros-cat-ico {
  position: static !important;
  width: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  transform: none !important;
}

body.ros-wizard-active.ros-fw-pilot #ros-step-0 .ros-cat-ico img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

body.ros-wizard-active.ros-fw-pilot #ros-step-0 .ros-cat-name {
  position: static !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: #12352b !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 14px !important;
  font-weight: 850 !important;
}

@media (max-width: 1024px) {
  .ros-fw-tools-toggle {
    top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
    right: 8px !important;
  }

  .ros-fw-stylebar {
    top: calc(env(safe-area-inset-top, 0px) + 58px) !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
  }

  .ros-fw-stylebar__select {
    min-width: 0 !important;
    color: #111827 !important;
    background: #fff !important;
  }

  body.ros-wizard-active.ros-fw-kiosk .ros-fw-stylebar__select,
  body.ros-wizard-active.ros-fw-atelier .ros-fw-stylebar__select,
  body.ros-wizard-active.ros-fw-pilot .ros-fw-stylebar__select {
    color: #111827 !important;
    background: #fff !important;
    border-color: rgba(15, 23, 42, .16) !important;
  }

  .ros-fw-headline {
    display: none !important;
  }

  body.ros-wizard-active.ros-fw-atelier #ros-stepper,
  body.ros-wizard-active.ros-fw-kiosk #ros-stepper,
  body.ros-wizard-active.ros-fw-pilot #ros-stepper {
    position: sticky !important;
    left: auto !important;
    right: auto !important;
    top: 62px !important;
    bottom: auto !important;
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    margin: 62px auto 10px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
    transform: none !important;
    overflow-x: auto !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
  }

  body.ros-wizard-active.ros-fw-atelier #ros-stepper .ros-step,
  body.ros-wizard-active.ros-fw-kiosk #ros-stepper .ros-step,
  body.ros-wizard-active.ros-fw-pilot #ros-stepper .ros-step {
    flex: 0 0 112px !important;
    width: 112px !important;
    justify-content: center !important;
    text-align: center !important;
  }

  body.ros-wizard-active.ros-fw-atelier .ros-step-content,
  body.ros-wizard-active.ros-fw-atelier #ros-device-preview,
  body.ros-wizard-active.ros-fw-atelier #ros-repair-preview,
  body.ros-wizard-active.ros-fw-atelier .ros-wizard-nav,
  body.ros-wizard-active.ros-fw-kiosk .ros-step-content,
  body.ros-wizard-active.ros-fw-kiosk #ros-device-preview,
  body.ros-wizard-active.ros-fw-kiosk #ros-repair-preview,
  body.ros-wizard-active.ros-fw-kiosk .ros-wizard-nav,
  body.ros-wizard-active.ros-fw-pilot .ros-step-content,
  body.ros-wizard-active.ros-fw-pilot #ros-device-preview,
  body.ros-wizard-active.ros-fw-pilot #ros-repair-preview,
  body.ros-wizard-active.ros-fw-pilot .ros-wizard-nav {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    min-height: auto !important;
    margin-left: calc(50% - 50vw + 10px) !important;
    margin-right: calc(50% - 50vw + 10px) !important;
  }

  body.ros-wizard-active.ros-fw-atelier {
    background:
      linear-gradient(135deg, rgba(255, 91, 63, .10), transparent 38%),
      linear-gradient(315deg, rgba(14, 165, 164, .12), transparent 34%),
      #f7f2ea !important;
  }

  body.ros-wizard-active.ros-fw-atelier .ros-step-content {
    border-style: dashed !important;
    background: rgba(255, 255, 255, .78) !important;
    padding: 30px 22px !important;
  }

  body.ros-wizard-active.ros-fw-atelier #ros-category-grid,
  body.ros-wizard-active.ros-fw-atelier .ros-category-grid,
  body.ros-wizard-active.ros-fw-atelier .ros-brand-grid,
  body.ros-wizard-active.ros-fw-atelier .ros-popular-models,
  body.ros-wizard-active.ros-fw-atelier #ros-imported-models,
  body.ros-wizard-active.ros-fw-atelier .ros-repair-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  body.ros-wizard-active.ros-fw-atelier .brand-card,
  body.ros-wizard-active.ros-fw-atelier .ros-cat-card,
  body.ros-wizard-active.ros-fw-atelier .ros-category-card,
  body.ros-wizard-active.ros-fw-atelier .ros-popular-model-card,
  body.ros-wizard-active.ros-fw-atelier .repair-card {
    transform: rotate(-.6deg) !important;
  }

  body.ros-wizard-active.ros-fw-atelier .brand-card:nth-child(2n),
  body.ros-wizard-active.ros-fw-atelier .ros-cat-card:nth-child(2n),
  body.ros-wizard-active.ros-fw-atelier .ros-category-card:nth-child(2n),
  body.ros-wizard-active.ros-fw-atelier .ros-popular-model-card:nth-child(2n),
  body.ros-wizard-active.ros-fw-atelier .repair-card:nth-child(2n) {
    transform: rotate(.7deg) translateY(12px) !important;
  }

  body.ros-wizard-active.ros-fw-pilot #ros-category-grid,
  body.ros-wizard-active.ros-fw-pilot .ros-category-grid,
  body.ros-wizard-active.ros-fw-pilot .ros-brand-grid,
  body.ros-wizard-active.ros-fw-pilot .ros-popular-models,
  body.ros-wizard-active.ros-fw-pilot #ros-imported-models,
  body.ros-wizard-active.ros-fw-pilot .ros-repair-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  body.ros-wizard-active.ros-fw-pilot .ros-step-content {
    padding: 18px 14px !important;
  }

  body.ros-wizard-active.ros-fw-pilot .ros-step-content > h2 {
    margin-bottom: 12px !important;
  }

  body.ros-wizard-active.ros-fw-pilot .brand-card,
  body.ros-wizard-active.ros-fw-pilot .ros-cat-card,
  body.ros-wizard-active.ros-fw-pilot .ros-category-card,
  body.ros-wizard-active.ros-fw-pilot .ros-popular-model-card,
  body.ros-wizard-active.ros-fw-pilot .repair-card {
    min-height: 66px !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) 24px !important;
    align-items: center !important;
    text-align: left !important;
    padding: 10px 14px !important;
  }

  body.ros-wizard-active.ros-fw-pilot .brand-card::after,
  body.ros-wizard-active.ros-fw-pilot .ros-cat-card::after,
  body.ros-wizard-active.ros-fw-pilot .ros-category-card::after,
  body.ros-wizard-active.ros-fw-pilot .ros-popular-model-card::after,
  body.ros-wizard-active.ros-fw-pilot .repair-card::after {
    content: ">" !important;
    color: #1a7f64 !important;
    font-weight: 900 !important;
    font-size: 18px !important;
  }

  body.ros-wizard-active.ros-fw-pilot .brand-card img,
  body.ros-wizard-active.ros-fw-pilot .ros-category-card img,
  body.ros-wizard-active.ros-fw-pilot .ros-popular-model-card img,
  body.ros-wizard-active.ros-fw-pilot .repair-card img {
    width: 42px !important;
    height: 42px !important;
    object-fit: contain !important;
  }

  body.ros-wizard-active.ros-fw-kiosk .ros-step-content {
    margin-top: 0 !important;
    margin-bottom: 28px !important;
    padding: 26px 14px !important;
  }

  body.ros-wizard-active.ros-fw-kiosk #ros-step-0 .ros-cat-card {
    min-height: 116px !important;
  }

  body.ros-wizard-active.ros-fw-atelier .ros-fw-progress,
  body.ros-wizard-active.ros-fw-kiosk .ros-fw-progress,
  body.ros-wizard-active.ros-fw-pilot .ros-fw-progress {
    left: 10px !important;
    right: 10px !important;
    bottom: 8px !important;
    top: auto !important;
    width: auto !important;
    transform: none !important;
  }
}

/* Stronger style-specific layouts for brand/model steps. */
body.ros-wizard-active.ros-fw-atelier .brand-card,
body.ros-wizard-active.ros-fw-kiosk .brand-card,
body.ros-wizard-active.ros-fw-pilot .brand-card {
  background-image: none !important;
  overflow: hidden !important;
}

body.ros-wizard-active.ros-fw-atelier .brand-card::before,
body.ros-wizard-active.ros-fw-kiosk .brand-card::before,
body.ros-wizard-active.ros-fw-pilot .brand-card::before {
  content: "" !important;
  display: block !important;
  background-image: var(--logo) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

body.ros-wizard-active.ros-fw-atelier .brand-label,
body.ros-wizard-active.ros-fw-kiosk .brand-label,
body.ros-wizard-active.ros-fw-pilot .brand-label {
  position: static !important;
  inset: auto !important;
  min-width: 0 !important;
  text-align: left !important;
  pointer-events: none !important;
}

body.ros-wizard-active.ros-fw-atelier .ros-brand-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 12px !important;
}

body.ros-wizard-active.ros-fw-atelier .brand-card {
  width: auto !important;
  min-height: 78px !important;
  height: auto !important;
  max-height: none !important;
  display: grid !important;
  grid-template-columns: 86px minmax(0, 1fr) 26px !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px 14px !important;
  background:
    linear-gradient(135deg, rgba(255, 91, 63, .10), transparent 52%),
    #fffaf3 !important;
}

body.ros-wizard-active.ros-fw-atelier .brand-card::before {
  width: 76px !important;
  height: 48px !important;
  border-radius: 8px !important;
  background-color: #101828 !important;
  background-size: 70% auto !important;
  filter: invert(1) grayscale(1) contrast(1.25) !important;
}

body.ros-wizard-active.ros-fw-atelier .brand-card::after {
  content: ">" !important;
  justify-self: end !important;
  color: #ff5b3f !important;
  font-weight: 900 !important;
}

body.ros-wizard-active.ros-fw-atelier .brand-label {
  color: #101828 !important;
  font-size: 17px !important;
  font-weight: 900 !important;
}

body.ros-wizard-active.ros-fw-kiosk .brand-card::before {
  width: min(150px, 62%) !important;
  height: 58px !important;
  margin: 0 auto 16px !important;
  filter: invert(1) grayscale(1) contrast(1.35) drop-shadow(0 0 12px rgba(245, 200, 76, .28)) !important;
}

body.ros-wizard-active.ros-fw-kiosk .brand-label {
  color: #f8fafc !important;
  text-align: center !important;
  font-size: 16px !important;
  font-weight: 850 !important;
}

body.ros-wizard-active.ros-fw-pilot #ros-category-grid,
body.ros-wizard-active.ros-fw-pilot .ros-category-grid {
  width: min(840px, 100%) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

body.ros-wizard-active.ros-fw-pilot #ros-step-0 .ros-cat-card {
  width: 100% !important;
}

body.ros-wizard-active.ros-fw-pilot .ros-brand-grid,
body.ros-wizard-active.ros-fw-pilot #ros-imported-models,
body.ros-wizard-active.ros-fw-pilot .ros-popular-models {
  width: min(860px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

body.ros-wizard-active.ros-fw-pilot .brand-card {
  width: 100% !important;
  min-height: 68px !important;
  height: auto !important;
  max-height: none !important;
  display: grid !important;
  grid-template-columns: 78px minmax(0, 1fr) 24px !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  background: #fff !important;
}

body.ros-wizard-active.ros-fw-pilot .brand-card::before {
  width: 62px !important;
  height: 42px !important;
  border-radius: 7px !important;
  background-color: #eef7e9 !important;
  background-size: 76% auto !important;
  filter: saturate(1.1) contrast(1.08) drop-shadow(0 1px 0 rgba(255, 255, 255, .9)) !important;
}

body.ros-wizard-active.ros-fw-pilot .brand-card::after {
  content: ">" !important;
  justify-self: end !important;
  color: #1a7f64 !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

body.ros-wizard-active.ros-fw-pilot .brand-label {
  color: #12352b !important;
  font-size: 16px !important;
  font-weight: 900 !important;
}

body.ros-wizard-active.ros-fw-pilot .ros-popular-model-card,
body.ros-wizard-active.ros-fw-pilot #ros-imported-models .ros-popular-model-card,
body.ros-wizard-active.ros-fw-pilot .ros-popular-models .ros-popular-model-card {
  width: 100% !important;
  min-height: 112px !important;
  display: grid !important;
  grid-template-columns: 92px minmax(0, 1fr) 28px !important;
  gap: 16px !important;
  align-items: center !important;
  padding: 12px 16px !important;
  text-align: left !important;
}

body.ros-wizard-active.ros-fw-pilot .ros-popular-model-card::after {
  content: "Details" !important;
  writing-mode: vertical-rl !important;
  transform: rotate(180deg) !important;
  justify-self: end !important;
  color: #1a7f64 !important;
  font-size: 10px !important;
  font-weight: 900 !important;
}

body.ros-wizard-active.ros-fw-pilot .ros-popular-model-card img.ros-model-thumb {
  width: 78px !important;
  height: 88px !important;
  object-fit: contain !important;
  border: 1px solid rgba(6, 37, 31, .10) !important;
  border-radius: 8px !important;
  background: #f7fbf4 !important;
  padding: 4px !important;
}

body.ros-wizard-active.ros-fw-pilot .ros-popular-model-text {
  min-width: 0 !important;
  display: grid !important;
  gap: 6px !important;
  text-align: left !important;
}

body.ros-wizard-active.ros-fw-pilot .ros-popular-model-text strong {
  color: #06251f !important;
  font-size: 18px !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
}

body.ros-wizard-active.ros-fw-pilot .ros-model-nums {
  color: #60716d !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
}

body.ros-wizard-active.ros-fw-atelier .ros-popular-model-card {
  min-height: 116px !important;
  display: grid !important;
  grid-template-columns: 96px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: center !important;
  padding: 14px !important;
  text-align: left !important;
}

body.ros-wizard-active.ros-fw-atelier .ros-popular-model-card img.ros-model-thumb {
  width: 82px !important;
  height: 92px !important;
  object-fit: contain !important;
  border-radius: 8px !important;
  background: #fffaf3 !important;
  padding: 5px !important;
}

body.ros-wizard-active.ros-fw-kiosk .ros-popular-model-card img.ros-model-thumb,
body.ros-wizard-active.ros-fw-kiosk .brand-card img {
  filter: brightness(1.08) contrast(1.08) !important;
}

@media (max-width: 1024px) {
  body.ros-wizard-active.ros-fw-pilot #ros-category-grid,
  body.ros-wizard-active.ros-fw-pilot .ros-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.ros-wizard-active.ros-fw-pilot #ros-step-0 .ros-cat-card {
    min-height: 82px !important;
    grid-template-columns: 28px minmax(0, 1fr) 18px !important;
    grid-template-rows: 34px auto !important;
    gap: 4px 8px !important;
    padding: 10px !important;
  }

  body.ros-wizard-active.ros-fw-pilot #ros-step-0 .ros-cat-card::before {
    width: 26px !important;
    height: 26px !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  body.ros-wizard-active.ros-fw-pilot #ros-step-0 .ros-cat-ico {
    width: 34px !important;
    height: 34px !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  body.ros-wizard-active.ros-fw-pilot #ros-step-0 .ros-cat-name {
    grid-column: 1 / 3 !important;
    grid-row: 2 !important;
    font-size: 12px !important;
  }

  body.ros-wizard-active.ros-fw-pilot #ros-step-0 .ros-cat-card::after {
    grid-column: 3 !important;
    grid-row: 1 / 3 !important;
  }

  body.ros-wizard-active.ros-fw-pilot .brand-card {
    grid-template-columns: 62px minmax(0, 1fr) 22px !important;
  }

  body.ros-wizard-active.ros-fw-pilot .brand-card::before {
    width: 50px !important;
    height: 34px !important;
  }

  body.ros-wizard-active.ros-fw-pilot .ros-popular-model-card,
  body.ros-wizard-active.ros-fw-pilot #ros-imported-models .ros-popular-model-card,
  body.ros-wizard-active.ros-fw-pilot .ros-popular-models .ros-popular-model-card {
    grid-template-columns: 68px minmax(0, 1fr) !important;
    min-height: 92px !important;
    gap: 10px !important;
    padding: 10px !important;
  }

  body.ros-wizard-active.ros-fw-pilot .ros-popular-model-card img.ros-model-thumb {
    width: 58px !important;
    height: 70px !important;
  }
}

body.ros-wizard-active.ros-fw-pilot #ros-step-1 .ros-brand-grid {
  width: min(760px, 100%) !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  justify-content: stretch !important;
}

body.ros-wizard-active.ros-fw-pilot #ros-step-1 .ros-brand-grid > .brand-card {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 68px !important;
  height: auto !important;
  max-height: none !important;
  display: grid !important;
  grid-template-columns: 82px minmax(0, 1fr) 24px !important;
  align-items: center !important;
  justify-items: stretch !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
}

body.ros-wizard-active.ros-fw-pilot #ros-step-1 .ros-brand-grid > .brand-card::before {
  width: 66px !important;
  height: 42px !important;
  border-radius: 7px !important;
  background-color: #06251f !important;
  background-size: 72% auto !important;
  filter: invert(1) grayscale(1) contrast(1.35) drop-shadow(0 1px 0 rgba(255, 255, 255, .28)) !important;
}

body.ros-wizard-active.ros-fw-pilot #ros-step-1 .brand-label {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: #12352b !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 16px !important;
  font-weight: 900 !important;
}

body.ros-wizard-active.ros-fw-pilot #ros-step-2 #ros-imported-models,
body.ros-wizard-active.ros-fw-pilot #ros-step-2 .ros-popular-models {
  width: min(860px, 100%) !important;
  max-width: 860px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

body.ros-wizard-active.ros-fw-pilot #ros-step-2 .ros-popular-model-card {
  width: 100% !important;
  max-width: none !important;
  grid-template-columns: 82px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
}

body.ros-wizard-active.ros-fw-pilot #ros-step-2 .ros-popular-model-card img.ros-model-thumb {
  grid-row: 1 / 3 !important;
}

body.ros-wizard-active.ros-fw-pilot #ros-step-2 .ros-popular-model-card::after {
  content: "Details" !important;
  grid-column: 2 !important;
  grid-row: 2 !important;
  width: max-content !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  background: #e5f3dc !important;
  color: #1a7f64 !important;
  writing-mode: horizontal-tb !important;
  transform: none !important;
  justify-self: start !important;
  align-self: end !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

body.ros-wizard-active.ros-fw-pilot #ros-step-2 .ros-popular-model-text strong {
  font-size: 16px !important;
  line-height: 1.14 !important;
}

body.ros-wizard-active.ros-fw-pilot #ros-step-2 .ros-model-nums {
  display: block !important;
  margin-top: 4px !important;
  font-size: 12px !important;
}

body.ros-wizard-active.ros-fw-pilot #ros-step-2 .ros-popular-model-text,
body.ros-wizard-active.ros-fw-pilot #ros-step-2 .ros-popular-model-text * {
  text-align: left !important;
}

@media (max-width: 1024px) {
  body.ros-wizard-active.ros-fw-pilot #ros-step-1 .ros-brand-grid {
    grid-template-columns: 1fr !important;
  }

  body.ros-wizard-active.ros-fw-pilot #ros-step-1 .ros-brand-grid > .brand-card {
    grid-template-columns: 62px minmax(0, 1fr) 22px !important;
    min-height: 62px !important;
    padding: 9px 12px !important;
  }

  body.ros-wizard-active.ros-fw-pilot #ros-step-1 .ros-brand-grid > .brand-card::before {
    width: 50px !important;
    height: 34px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.ros-wizard-active.ros-fw-enter .ros-step-content.active,
  body.ros-wizard-active.ros-fw-enter .brand-card,
  body.ros-wizard-active.ros-fw-enter .ros-category-card,
  body.ros-wizard-active.ros-fw-enter .ros-popular-model-card,
  body.ros-wizard-active.ros-fw-enter .repair-card {
    animation: none !important;
  }
}