/* 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-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-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;
}

.ros-fw-stylebar__save {
  width: 100% !important;
  min-height: 36px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: #111827 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: 0 8px 18px rgba(17, 24, 39, .16) !important;
  transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease !important;
}

.ros-fw-stylebar__save:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 24px rgba(17, 24, 39, .22) !important;
}

.ros-fw-stylebar__save:disabled {
  opacity: .65 !important;
  cursor: wait !important;
  transform: none !important;
}

.ros-fw-stylebar__status {
  min-height: 14px !important;
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

.ros-fw-stylebar__status[data-kind="success"] {
  color: #168146 !important;
}

.ros-fw-stylebar__status[data-kind="error"] {
  color: #dc2626 !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-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;
  }

  .ros-fw-headline {
    display: none !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-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;
}

@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-step-2 .gsma-search-wrapper {
  overflow: visible !important;
}

@media (min-width: 1025px) {
body.ros-wizard-active #ros-step-2 .ros-step2-imei-layout {
  width: min(926px, calc(100vw - 48px)) !important;
  max-width: min(926px, calc(100vw - 48px)) !important;
}

body.ros-wizard-active #ros-step-2 .ros-step2-imei-layout .gsma-search-wrapper {
  width: calc(100% - 66px) !important;
  max-width: calc(100% - 66px) !important;
  margin-left: 66px !important;
  margin-right: 0 !important;
}
}

body.ros-wizard-active #ros-step-2 .gsma-search-wrapper .gsma-suggest {
  left: 0 !important;
  right: auto !important;
  width: calc(100% - 128px) !important;
  max-width: calc(100% - 128px) !important;
  transform: none !important;
  box-sizing: border-box !important;
}

@media (min-width: 1025px) {
body.ros-wizard-active #ros-step-2 .ros-step2-imei-layout > #ros-device-preview {
  width: calc(100% - 194px) !important;
  max-width: calc(100% - 194px) !important;
  min-width: 0 !important;
  margin-left: 66px !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}
}

@media (min-width: 1025px) {
body.ros-wizard-active #ros-step-2 .ros-step2-imei-layout > .ros-s2-hint {
  width: calc(100% - 194px) !important;
  max-width: calc(100% - 194px) !important;
  min-width: 0 !important;
  margin-left: 66px !important;
  margin-right: 0 !important;
  margin-top: 8px !important;
  left: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
}
}

@media (min-width: 1025px) {
body.ros-wizard-active #ros-step-3 {
  --ros-step3-control-width: min(732px, calc(100vw - 48px));
}
}

body.ros-wizard-active #ros-step-3 > #ros-device-preview {
  width: var(--ros-step3-control-width) !important;
  max-width: var(--ros-step3-control-width) !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

body.ros-wizard-active #ros-step-3 > #ros-device-preview {
  margin-top: 18px !important;
  margin-bottom: 22px !important;
}

body.ros-wizard-active #ros-step-3 .ros-repair-search-row {
  position: relative !important;
  width: var(--ros-step3-control-width) !important;
  max-width: var(--ros-step3-control-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

body.ros-wizard-active #ros-step-3 .ros-repair-search-field {
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

body.ros-wizard-active #ros-step-3 #ros-b2b-slot {
  position: absolute !important;
  left: calc(100% + 12px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

body.ros-wizard-active #ros-step-3 #ros_repair_search {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !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-step-2 .gsma-search-wrapper .gsma-suggest {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
  }

  body.ros-wizard-active #ros-step-2 .ros-step2-imei-layout {
    width: auto !important;
    max-width: 500px !important;
  }

  body.ros-wizard-active #ros-step-2 .ros-step2-imei-layout .gsma-search-wrapper {
    width: min(100%, calc(500px + 2cm)) !important;
    max-width: 500px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.ros-wizard-active #ros-step-2 .ros-step2-imei-layout .ros-step2-imei-btn {
    left: -66px !important;
  }

  body.ros-wizard-active #ros-step-2 .ros-step2-imei-layout > #ros-device-preview {
    width: min(100%, calc(500px + 2cm)) !important;
    max-width: 500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.ros-wizard-active #ros-step-2 .ros-step2-imei-layout > .ros-s2-hint {
    width: min(100%, calc(500px + 2cm)) !important;
    max-width: 500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.ros-wizard-active #ros-step-3 {
    --ros-step3-control-width: unset;
  }

  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 (max-width: 620px) {
  body.ros-wizard-active #ros-step-2 .ros-step2-imei-layout .gsma-search-wrapper {
    width: min(100%, calc(500px + 2cm)) !important;
    max-width: 500px !important;
    margin-left: 0 !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
  }

  body.ros-wizard-active #ros-step-2 .ros-step2-imei-layout .ros-step2-imei-btn {
    left: -48px !important;
  }

  body.ros-wizard-active #ros-step-2 .ros-step2-imei-layout > #ros-device-preview {
    width: min(100%, calc(500px + 2cm)) !important;
    max-width: 500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.ros-wizard-active #ros-step-2 .ros-step2-imei-layout > .ros-s2-hint {
    width: min(100%, calc(500px + 2cm)) !important;
    max-width: 500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.ros-wizard-active #ros-step-3 {
    --ros-step3-control-width: unset;
  }

  body.ros-wizard-active #ros-step-3 .ros-repair-search-row {
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  body.ros-wizard-active #ros-step-3 #ros-b2b-slot {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    flex-basis: 100% !important;
    justify-content: center !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;
  }
}

body.ros-wizard-active.ros-fw-exp3d1 #ros-step-3 .ros-repair-search-row,
body.ros-wizard-active.ros-fw-exp3d2 #ros-step-3 .ros-repair-search-row {
  margin-bottom: 18px !important;
}

body.ros-wizard-active.ros-fw-exp3d1 #ros-step-3 .ros-repair-grid,
body.ros-wizard-active.ros-fw-exp3d2 #ros-step-3 .ros-repair-grid,
body.ros-wizard-active.ros-fw-exp3d1 #ros-step-3 .ros-repair-nav,
body.ros-wizard-active.ros-fw-exp3d2 #ros-step-3 .ros-repair-nav {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.ros-wizard-active #ros-step-3 .repair-card.selected,
body.ros-wizard-active #ros-step-3 .repair-card.is-selected {
  background: #dbdee0 !important;
}

.ros-3d-exp-viewer,
.ros-3d-exp-viewer * {
  box-sizing: border-box !important;
  font-family: var(--font-family-main, "Bai Jamjuree", Arial, sans-serif) !important;
  letter-spacing: 0 !important;
}

.ros-3d-exp-viewer {
  position: relative !important;
  width: min(100%, 1360px) !important;
  margin: 0 auto 28px !important;
  border: 1px solid #d9e2ef !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 18px 55px rgba(20, 38, 70, .12) !important;
  overflow: hidden !important;
  transition: box-shadow .65s ease, filter .75s ease, transform .65s ease !important;
}

.ros-3d-exp-canvas,
.ros-3d-exp-lines,
.ros-3d-exp-labels,
.ros-3d-exp-toolbar,
.ros-3d-exp-reload,
.ros-3d-exp-status {
  transition: opacity 2.6s cubic-bezier(.16, 1, .3, 1), filter 2.6s cubic-bezier(.16, 1, .3, 1) !important;
}

.ros-3d-exp-viewer.is-spotlight-active {
  z-index: 30 !important;
  box-shadow: 0 26px 80px rgba(20, 38, 70, .18), 0 0 0 1px rgba(129, 185, 255, .18) !important;
  filter: saturate(1.04) contrast(1.02) !important;
}

.ros-3d-exp-viewer.is-idle-model-focus {
  box-shadow: 0 22px 70px rgba(15, 23, 42, .16), 0 0 0 1px rgba(15, 23, 42, .04) !important;
}

.ros-3d-exp-viewer.is-idle-model-focus .ros-3d-exp-canvas {
  filter: saturate(1.05) contrast(1.04) !important;
}

.ros-3d-exp-viewer.is-idle-model-focus .ros-3d-exp-lines,
.ros-3d-exp-viewer.is-idle-model-focus .ros-3d-exp-labels,
.ros-3d-exp-viewer.is-idle-model-focus .ros-3d-exp-toolbar,
.ros-3d-exp-viewer.is-idle-model-focus .ros-3d-exp-reload,
.ros-3d-exp-viewer.is-idle-model-focus .ros-3d-exp-status {
  opacity: .28 !important;
  filter: none !important;
  transition: opacity 1.2s cubic-bezier(.16, 1, .3, 1) !important;
}

.ros-3d-exp-viewer.is-idle-model-focus .ros-3d-exp-toolbar {
  opacity: .42 !important;
}

.ros-3d-exp-viewer.is-idle-model-focus .ros-3d-exp-cursor-fx {
  opacity: 0 !important;
}

.ros-3d-exp-stage {
  position: relative !important;
  isolation: isolate !important;
  z-index: 0 !important;
  min-height: clamp(500px, 60vw, 720px) !important;
  width: 100% !important;
  overflow: hidden !important;
  touch-action: none !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(253, 254, 255, .99) 58%, rgba(247, 249, 252, .96) 100%),
    #fff !important;
  background-size: auto, auto !important;
  background-position: center center, center center !important;
}

.ros-3d-exp-canvas {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  height: clamp(500px, 60vw, 720px) !important;
  cursor: grab !important;
  touch-action: none !important;
}

.ros-3d-exp-stage.is-cursor-fx-active,
.ros-3d-exp-stage.is-cursor-fx-active .ros-3d-exp-canvas {
  cursor: none !important;
}

.ros-3d-exp-stage.is-cursor-fx-active .ros-3d-exp-label,
.ros-3d-exp-stage.is-cursor-fx-active .ros-3d-exp-toolbar,
.ros-3d-exp-stage.is-cursor-fx-active .ros-3d-exp-reload,
.ros-3d-exp-stage.is-cursor-fx-active .ros-3d-exp-admin {
  cursor: pointer !important;
}

.ros-3d-exp-canvas:active {
  cursor: grabbing !important;
}

.ros-3d-exp-loader {
  position: absolute !important;
  z-index: 1080 !important;
  inset: 0 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  background: rgba(255, 255, 255, .36) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
}

.ros-3d-exp-viewer.is-loading-model .ros-3d-exp-loader {
  display: flex !important;
}

.ros-3d-exp-viewer.is-loading-model .ros-3d-exp-lines,
.ros-3d-exp-viewer.is-loading-model .ros-3d-exp-labels,
.ros-3d-exp-viewer.is-loading-model .ros-3d-exp-toolbar {
  opacity: 0 !important;
}

.ros-3d-exp-loader span {
  width: 34px !important;
  height: 34px !important;
  border-radius: 999px !important;
  border: 2px solid rgba(148, 163, 184, .26) !important;
  border-top-color: rgba(15, 23, 42, .54) !important;
  animation: ros3dLoaderSpin .82s linear infinite !important;
}

@keyframes ros3dLoaderSpin {
  to {
    transform: rotate(360deg);
  }
}

.ros-3d-exp-cursor-fx {
  position: absolute !important;
  z-index: 90 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  opacity: 0 !important;
  mix-blend-mode: normal !important;
  will-change: opacity !important;
}

.ros-3d-exp-cursor-ring,
.ros-3d-exp-cursor-dot,
.ros-3d-exp-cursor-trail {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  display: block !important;
  pointer-events: none !important;
  will-change: transform, opacity !important;
}

.ros-3d-exp-cursor-ring {
  width: 34px !important;
  height: 34px !important;
  border: 1.5px solid rgba(37, 99, 235, .5) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .1) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .55), 0 8px 22px rgba(59, 130, 246, .14) !important;
}

.ros-3d-exp-cursor-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: #2563eb !important;
  box-shadow: 0 0 14px rgba(37, 99, 235, .36) !important;
}

.ros-3d-exp-cursor-trail {
  width: 54px !important;
  height: 54px !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(37, 99, 235, .13), rgba(37, 99, 235, .04) 38%, transparent 68%) !important;
  opacity: .68 !important;
  filter: blur(.5px) !important;
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .ros-3d-exp-cursor-fx {
    display: none !important;
  }
}

.ros-3d-exp-lines,
.ros-3d-exp-labels {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
}

.ros-3d-exp-lines {
  display: block !important;
  overflow: hidden !important;
  z-index: 820 !important;
  transform: translate3d(0, 0, 0) !important;
  mix-blend-mode: normal !important;
  will-change: transform !important;
}

.ros-3d-exp-lines line.ros-3d-exp-line,
.ros-3d-exp-lines line.ros-3d-exp-line-halo {
  stroke-linecap: round !important;
  vector-effect: non-scaling-stroke !important;
  shape-rendering: geometricPrecision !important;
  pointer-events: none !important;
}

.ros-3d-exp-lines line.ros-3d-exp-line-halo {
  stroke: rgba(255, 255, 255, .88) !important;
  stroke-width: 4.5 !important;
  filter: drop-shadow(0 1px 2px rgba(15, 23, 42, .16)) !important;
}

.ros-3d-exp-lines line.ros-3d-exp-line {
  stroke: rgba(71, 85, 105, .42) !important;
  stroke-width: 1.35 !important;
  filter: none !important;
}

.ros-3d-exp-lines .ros-3d-exp-line-hit {
  opacity: 1 !important;
  pointer-events: none !important;
}

.ros-3d-exp-lines .ros-3d-exp-line-hit {
  stroke: transparent !important;
  stroke-width: 24 !important;
}

.ros-3d-exp-lines .ros-3d-exp-anchor-hit {
  opacity: 1 !important;
  fill: transparent !important;
  stroke: transparent !important;
  cursor: pointer !important;
  pointer-events: all !important;
}

.ros-3d-exp-virtual-card {
  display: none !important;
}

.ros-3d-exp-lines circle.ros-3d-exp-anchor {
  fill: #ecff13 !important;
  stroke: #111827 !important;
  stroke-width: 1 !important;
  vector-effect: non-scaling-stroke !important;
  cursor: pointer !important;
  transition:
    r .14s ease,
    fill .14s ease,
    stroke-width .14s ease,
    filter .16s ease !important;
}

.ros-3d-exp-lines circle.ros-3d-exp-anchor:hover,
.ros-3d-exp-lines circle.ros-3d-exp-anchor:focus,
.ros-3d-exp-lines circle.ros-3d-exp-anchor.is-tooltip-active {
  fill: #f2ff00 !important;
  stroke: #020617 !important;
  stroke-width: 2.1 !important;
  r: 7.2 !important;
  filter: drop-shadow(0 0 9px rgba(236, 255, 19, .9)) drop-shadow(0 4px 8px rgba(15, 23, 42, .28)) !important;
}

.ros-3d-exp-labels {
  z-index: 900 !important;
}

.ros-3d-exp-label {
  position: absolute !important;
  --ros-3d-card-lift: 0px;
  --ros-3d-card-scale: 1;
  --ros-3d-card-saturate: 1;
  transform: translate(-50%, -50%) translate3d(0, var(--ros-3d-card-lift), 0) scale(var(--ros-3d-card-scale)) !important;
  transform-origin: center center !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 5px !important;
  width: min(260px, 38vw) !important;
  min-height: 34px !important;
  padding: 5px 104px 5px 8px !important;
  border: 1px solid rgba(196, 208, 224, .9) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, .92) !important;
  color: #111827 !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .1) !important;
  backdrop-filter: blur(12px) !important;
  text-align: left !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  filter: saturate(var(--ros-3d-card-saturate)) !important;
  backface-visibility: hidden !important;
  will-change: transform, filter !important;
  transition:
    border-color .18s ease,
    box-shadow .22s ease,
    filter .16s ease,
    transform .16s ease-out !important;
}

.ros-3d-exp-viewer.is-interacting,
.ros-3d-exp-viewer.is-interacting .ros-3d-exp-canvas,
.ros-3d-exp-viewer.is-interacting .ros-3d-exp-lines,
.ros-3d-exp-viewer.is-interacting .ros-3d-exp-labels,
.ros-3d-exp-viewer.is-interacting .ros-3d-exp-label {
  transition: none !important;
  filter: none !important;
}

.ros-3d-exp-viewer.is-interacting .ros-3d-exp-label {
  box-shadow: 0 8px 18px rgba(15, 23, 42, .08) !important;
}

.ros-3d-exp-label.has-original {
  width: min(340px, 46vw) !important;
  padding-right: 172px !important;
}

.ros-3d-exp-label.has-combo-discount {
  padding-right: 130px !important;
}

.ros-3d-exp-label.has-original.has-combo-discount {
  width: min(380px, 52vw) !important;
  padding-right: 218px !important;
}

.ros-3d-exp-label:hover,
.ros-3d-exp-label:focus-visible,
.ros-3d-exp-label.is-touch-active,
.ros-3d-exp-label.is-selected {
  --ros-3d-card-lift: -5px;
  --ros-3d-card-scale: 1.026;
  --ros-3d-card-saturate: 1.08;
  border-color: #0b84d8 !important;
  box-shadow: 0 17px 34px rgba(11, 132, 216, .22), 0 0 0 4px rgba(11, 132, 216, .055) !important;
}

.ros-3d-exp-label.is-selected {
  background: #dbdee0 !important;
}

.ros-3d-exp-label:active {
  --ros-3d-card-lift: -2px;
  --ros-3d-card-scale: 1.012;
  --ros-3d-card-saturate: 1.04;
  transition-duration: .1s !important;
}

.ros-3d-exp-label-main {
  display: grid !important;
  gap: 1px !important;
  min-width: 0 !important;
  padding-right: 0 !important;
}

.ros-3d-exp-label-main strong {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  color: #111827 !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
  max-height: 21.8px !important;
  overflow-wrap: anywhere !important;
}

.ros-3d-exp-meta {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  width: 100% !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.ros-3d-exp-time {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: #64748b !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.ros-3d-exp-price {
  position: absolute !important;
  right: 7px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 2 !important;
  align-self: auto !important;
  display: grid !important;
  place-content: center !important;
  box-sizing: border-box !important;
  width: 68px !important;
  min-width: 68px !important;
  height: 29px !important;
  min-height: 29px !important;
  padding: 4px 8px !important;
  border: 2px solid rgba(255, 255, 255, .9) !important;
  border-radius: 10px !important;
  background: #51a8ff !important;
  color: #fff !important;
  text-align: center !important;
  line-height: 1.05 !important;
  box-shadow: 0 8px 16px rgba(15, 23, 42, .12) !important;
}

.ros-3d-exp-label.has-price-request .ros-3d-exp-price {
  background: #28a745 !important;
}

.ros-3d-exp-label.has-combo-discount .ros-3d-exp-price {
  width: auto !important;
  min-width: 96px !important;
  max-width: 128px !important;
  height: 29px !important;
  min-height: 29px !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  background: #39a035 !important;
}

.ros-3d-exp-price span {
  display: block !important;
  color: rgba(255, 255, 255, .86) !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.ros-3d-exp-price strong {
  display: block !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}

.ros-3d-exp-label.has-price-request .ros-3d-exp-price strong {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.ros-3d-exp-price del {
  display: inline-block !important;
  margin-right: 2px !important;
  color: rgba(255, 255, 255, .72) !important;
  font-size: 7px !important;
  font-weight: 650 !important;
  text-decoration-thickness: 1.5px !important;
}

.ros-3d-exp-price ins {
  display: inline-block !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.ros-3d-exp-label.has-combo-discount .ros-3d-exp-original {
  right: 132px !important;
}

.ros-3d-exp-original {
  position: absolute !important;
  right: 92px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 2 !important;
  display: inline-grid !important;
  place-items: center !important;
  margin: 0 !important;
  width: 58px !important;
  min-width: 58px !important;
  height: 30px !important;
  min-height: 30px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

.ros-3d-exp-original img {
  max-width: 56px !important;
  max-height: 28px !important;
  object-fit: contain !important;
}

.ros-3d-exp-floating-tip {
  position: absolute !important;
  z-index: 1200 !important;
  display: grid !important;
  gap: 4px !important;
  width: min(var(--ros-3d-tip-width, 440px), calc(100% - 28px)) !important;
  max-width: calc(100% - 28px) !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(255, 255, 255, .38) !important;
  border-radius: 10px !important;
  background: rgba(15, 23, 42, .48) !important;
  color: #fff !important;
  box-shadow: 0 14px 28px rgba(15, 23, 42, .16) !important;
  backdrop-filter: blur(24px) saturate(1.35) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.35) !important;
  font-size: calc(11px * var(--ros-3d-tip-scale, 1)) !important;
  font-weight: 800 !important;
  line-height: 1.32 !important;
  white-space: normal !important;
  pointer-events: none !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .34) !important;
  transform: translate(-50%, -100%) scale(var(--ros-3d-tip-scale, 1)) !important;
  transform-origin: bottom center !important;
}

.ros-3d-exp-floating-tip[hidden] {
  display: none !important;
}

.ros-3d-exp-floating-tip.is-below {
  transform: translate(-50%, 0) scale(var(--ros-3d-tip-scale, 1)) !important;
  transform-origin: top center !important;
}

.ros-3d-exp-floating-tip strong {
  display: block !important;
  color: #fff !important;
  font-size: calc(12px * var(--ros-3d-tip-scale, 1)) !important;
  font-weight: 900 !important;
  line-height: 1.12 !important;
}

.ros-3d-exp-floating-tip span {
  display: block !important;
  color: rgba(255, 255, 255, .9) !important;
}

.ros-3d-exp-floating-tip::before {
  content: "" !important;
  position: absolute !important;
  left: var(--ros-3d-tip-arrow-x, 50%) !important;
  bottom: calc(var(--ros-3d-tip-arrow-height, 12px) * -1) !important;
  width: 18px !important;
  height: var(--ros-3d-tip-arrow-height, 12px) !important;
  background: rgba(15, 23, 42, .48) !important;
  border: 0 !important;
  clip-path: polygon(0 0, 100% 0, 50% 100%) !important;
  transform: translateX(-50%) !important;
}

.ros-3d-exp-floating-tip.is-below::before {
  top: calc(var(--ros-3d-tip-arrow-height, 12px) * -1) !important;
  bottom: auto !important;
  clip-path: polygon(50% 0, 0 100%, 100% 100%) !important;
}

.ros-3d-exp-point-card {
  display: none !important;
}

.ros-3d-exp-toolbar {
  position: absolute !important;
  z-index: 1100 !important;
  left: 50% !important;
  bottom: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  max-width: calc(100% - 24px) !important;
  padding: 5px !important;
  border: 1px solid rgba(148, 163, 184, .42) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .84) !important;
  box-shadow: 0 12px 24px rgba(15, 23, 42, .1) !important;
  backdrop-filter: blur(18px) !important;
  transform: translateX(-50%) !important;
  pointer-events: auto !important;
}

.ros-3d-exp-toolbar span,
.ros-3d-exp-mode,
.ros-3d-exp-reset {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 26px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(242, 246, 252, .9) !important;
  color: #475569 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

.ros-3d-exp-toolbar span.is-active,
.ros-3d-exp-mode.is-active {
  background: #ecff13 !important;
  color: #111827 !important;
}

.ros-3d-exp-reload {
  position: absolute !important;
  z-index: 1120 !important;
  top: 12px !important;
  right: 12px !important;
}

.ros-3d-exp-reload,
.ros-3d-exp-reset {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 1px solid rgba(148, 163, 184, .38) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .78) !important;
  color: #475569 !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .1) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  cursor: pointer !important;
  line-height: 1 !important;
}

.ros-3d-exp-reset {
  position: relative !important;
}

.ros-3d-exp-reload:hover,
.ros-3d-exp-reload:focus-visible,
.ros-3d-exp-reset:hover,
.ros-3d-exp-reset:focus-visible {
  background: rgba(226, 232, 240, .96) !important;
  color: #111827 !important;
  outline: none !important;
}

.ros-3d-exp-reload::after,
.ros-3d-exp-reset::after {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: none !important;
  width: max-content !important;
  max-width: 190px !important;
  padding: 6px 8px !important;
  border-radius: 7px !important;
  background: rgba(15, 23, 42, .86) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .18) !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  white-space: normal !important;
  pointer-events: none !important;
}

.ros-3d-exp-reload::after {
  content: "3D-Modell neu laden" !important;
  left: auto !important;
  right: 0 !important;
  transform: none !important;
  top: calc(100% + 8px) !important;
  max-width: 170px !important;
}

.ros-3d-exp-reset::after {
  content: "3D-Ansicht zurücksetzen" !important;
  bottom: calc(100% + 8px) !important;
}

.ros-3d-exp-reload:hover::after,
.ros-3d-exp-reload:focus-visible::after,
.ros-3d-exp-reset:hover::after,
.ros-3d-exp-reset:focus-visible::after {
  display: block !important;
}

.ros-3d-exp-status {
  position: absolute !important;
  z-index: 1101 !important;
  left: 16px !important;
  bottom: 16px !important;
  max-width: min(420px, calc(100% - 32px)) !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  pointer-events: none !important;
}

.ros-3d-exp-status[data-kind="error"] {
  color: #b91c1c !important;
}

.ros-3d-exp-status[data-kind="success"] {
  color: #047857 !important;
}

.ros-3d-exp-admin {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 10px 12px 12px !important;
  border-top: 1px solid rgba(15, 23, 42, .08) !important;
  background: rgba(248, 250, 252, .96) !important;
}

.ros-3d-exp-edit,
  .ros-3d-exp-save,
  .ros-3d-exp-focus-toggle,
  .ros-3d-exp-cursor-toggle,
  .ros-3d-exp-model-move,
  .ros-3d-exp-model-reset,
  .ros-3d-exp-view-save,
  .ros-3d-exp-upload-button {
  min-height: 36px !important;
  border-radius: 7px !important;
  border: 1px solid rgba(15, 23, 42, .14) !important;
  background: #fff !important;
  color: #111827 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

.ros-3d-exp-focus-toggle,
.ros-3d-exp-cursor-toggle,
.ros-3d-exp-model-move,
.ros-3d-exp-model-reset {
  background: #fff !important;
  color: #334155 !important;
}

.ros-3d-exp-focus-toggle[aria-pressed="true"],
.ros-3d-exp-cursor-toggle[aria-pressed="true"],
.ros-3d-exp-model-move[aria-pressed="true"] {
  border-color: rgba(163, 230, 53, .72) !important;
  background: #ecff13 !important;
  color: #111827 !important;
  box-shadow: 0 8px 18px rgba(132, 204, 22, .16) !important;
}

.ros-3d-exp-focus-toggle[aria-pressed="false"],
.ros-3d-exp-cursor-toggle[aria-pressed="false"] {
  border-color: rgba(100, 116, 139, .22) !important;
  background: #f8fafc !important;
  color: #64748b !important;
}

.ros-3d-exp-save {
  grid-column: 1 / -1 !important;
  background: #111827 !important;
  color: #fff !important;
}

.ros-3d-exp-save:disabled {
  opacity: .5 !important;
  cursor: not-allowed !important;
}

.ros-3d-exp-admin-list {
  grid-column: 1 / -1 !important;
  display: none !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 6px !important;
  max-height: 150px !important;
  overflow: auto !important;
}

.ros-3d-exp-viewer.is-editing .ros-3d-exp-admin-list {
  display: grid !important;
}

.ros-3d-exp-admin-row {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
  color: #334155 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.ros-3d-exp-admin-row span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.ros-3d-exp-viewer.is-editing .ros-3d-exp-label {
  --ros-3d-card-lift: 0px;
  --ros-3d-card-scale: 1;
  --ros-3d-card-saturate: 1;
  cursor: move !important;
  outline: 2px solid rgba(11, 132, 216, .18) !important;
  touch-action: none !important;
  user-select: none !important;
}

.ros-3d-exp-viewer.is-editing.is-model-move-mode .ros-3d-exp-stage,
.ros-3d-exp-viewer.is-dragging-model .ros-3d-exp-stage,
.ros-3d-exp-viewer.is-editing.is-model-move-mode .ros-3d-exp-canvas,
.ros-3d-exp-viewer.is-dragging-model .ros-3d-exp-canvas {
  cursor: grab !important;
}

.ros-3d-exp-viewer.is-dragging-model .ros-3d-exp-stage,
.ros-3d-exp-viewer.is-dragging-model .ros-3d-exp-canvas {
  cursor: grabbing !important;
}

.ros-3d-exp-viewer.is-dragging-label .ros-3d-exp-label,
.ros-3d-exp-viewer.is-dragging-anchor .ros-3d-exp-label,
.ros-3d-exp-viewer.is-dragging-model .ros-3d-exp-label {
  transition: none !important;
}

.ros-3d-exp-viewer.is-dragging-label .ros-3d-exp-label {
  cursor: grabbing !important;
}

.ros-3d-exp-viewer.is-dragging-label .ros-3d-exp-lines,
.ros-3d-exp-viewer.is-dragging-anchor .ros-3d-exp-lines,
.ros-3d-exp-viewer.is-dragging-model .ros-3d-exp-lines {
  transition: none !important;
}

.ros-3d-exp-viewer.is-editing .ros-3d-exp-lines {
  z-index: 820 !important;
  pointer-events: none !important;
}

.ros-3d-exp-viewer.is-editing .ros-3d-exp-labels {
  z-index: 950 !important;
}

.ros-3d-exp-viewer.is-editing .ros-3d-exp-lines .ros-3d-exp-anchor,
.ros-3d-exp-viewer.is-editing .ros-3d-exp-lines .ros-3d-exp-anchor-hit {
  cursor: crosshair !important;
  pointer-events: auto !important;
}

.ros-3d-exp-viewer.is-editing .ros-3d-exp-lines .ros-3d-exp-anchor {
  stroke-width: 2 !important;
  filter: drop-shadow(0 2px 5px rgba(15, 23, 42, .28)) !important;
}

.ros-3d-exp-viewer.is-editing .ros-3d-exp-lines .ros-3d-exp-line,
.ros-3d-exp-viewer.is-editing .ros-3d-exp-lines .ros-3d-exp-line-halo,
.ros-3d-exp-viewer.is-editing .ros-3d-exp-lines .ros-3d-exp-line-hit {
  cursor: crosshair !important;
  pointer-events: none !important;
}

.ros-3d-exp-viewer.is-editing .ros-3d-exp-lines .ros-3d-exp-line-halo {
  stroke: rgba(255, 255, 255, .9) !important;
  stroke-width: 5 !important;
}

.ros-3d-exp-viewer.is-editing .ros-3d-exp-lines .ros-3d-exp-line {
  stroke: rgba(37, 99, 235, .55) !important;
  stroke-width: 1.65 !important;
}

.ros-3d-exp-viewer.is-editing .ros-3d-exp-lines .ros-3d-exp-line-hit {
  stroke: transparent !important;
  stroke-width: 24 !important;
  opacity: 1 !important;
  cursor: crosshair !important;
  pointer-events: auto !important;
}

.ros-3d-exp-upload-section {
  display: none;
}

.ros-3d-exp-upload-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 0 12px !important;
}

.ros-3d-exp-reset-model {
  width: 100% !important;
  min-height: 36px !important;
  border-radius: 7px !important;
  border: 1px solid rgba(148, 163, 184, .42) !important;
  background: rgba(248, 250, 252, .96) !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

.ros-3d-exp-reset-model:hover,
.ros-3d-exp-reset-model:focus-visible {
  border-color: rgba(37, 99, 235, .38) !important;
  background: #fff !important;
  color: #111827 !important;
  outline: none !important;
}

.ros-3d-exp-upload-button input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.ros-3d-exp-upload-meta {
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}

.ros-3d-exp-mobile-list {
  display: none !important;
}

@media (max-width: 1024px) {
  .ros-3d-exp-labels {
    display: none !important;
  }

  .ros-3d-exp-lines {
    display: block !important;
    pointer-events: none !important;
  }

  .ros-3d-exp-lines line.ros-3d-exp-line,
  .ros-3d-exp-lines line.ros-3d-exp-line-halo,
  .ros-3d-exp-lines line.ros-3d-exp-line-hit {
    display: none !important;
  }

  .ros-3d-exp-lines circle.ros-3d-exp-anchor,
  .ros-3d-exp-lines circle.ros-3d-exp-anchor-hit {
    display: block !important;
  }

  .ros-3d-exp-lines circle.ros-3d-exp-anchor-hit {
    pointer-events: all !important;
  }

  .ros-3d-exp-lines circle.ros-3d-exp-anchor {
    fill: #ecff13 !important;
    stroke: #111827 !important;
    stroke-width: 1.4 !important;
    filter: drop-shadow(0 2px 5px rgba(15, 23, 42, .24)) !important;
    pointer-events: all !important;
    cursor: pointer !important;
  }

  .ros-3d-exp-lines circle.ros-3d-exp-anchor.is-tooltip-active {
    fill: #ecff13 !important;
    stroke: #111827 !important;
    stroke-width: 2.2 !important;
    r: 7.2 !important;
    filter: drop-shadow(0 0 8px rgba(236, 255, 19, .86)) drop-shadow(0 3px 7px rgba(15, 23, 42, .28)) !important;
  }

  .ros-3d-exp-mobile-list {
    display: grid !important;
    gap: 8px !important;
    padding: 10px !important;
    max-height: min(42vh, 420px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    background: #fff !important;
    border-top: 1px solid rgba(217, 226, 239, .9) !important;
  }

  .ros-3d-exp-point-card {
    position: absolute !important;
    z-index: 1210 !important;
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 7px !important;
    width: 218px !important;
    min-height: 48px !important;
    padding: 6px 7px !important;
    border: 1px solid rgba(203, 213, 225, .92) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, .94) !important;
    color: #111827 !important;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .14) !important;
    backdrop-filter: blur(18px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.2) !important;
    pointer-events: none !important;
    transform: translate(-50%, calc(-100% - 12px)) !important;
    transform-origin: center bottom !important;
  }

  .ros-3d-exp-point-card[hidden] {
    display: none !important;
  }

  .ros-3d-exp-point-card::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: -8px !important;
    width: 14px !important;
    height: 8px !important;
    background: rgba(255, 255, 255, .94) !important;
    clip-path: polygon(0 0, 100% 0, 50% 100%) !important;
    transform: translateX(-50%) !important;
  }

  .ros-3d-exp-point-card-icon {
    width: 32px !important;
    height: 32px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 7px !important;
    background: rgba(248, 250, 252, .96) !important;
  }

  .ros-3d-exp-point-card-icon img {
    max-width: 27px !important;
    max-height: 27px !important;
    object-fit: contain !important;
  }

  .ros-3d-exp-point-card-main {
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
  }

  .ros-3d-exp-point-card-main strong {
    color: #111827 !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    line-height: 1.08 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }

  .ros-3d-exp-point-card-main span {
    color: #64748b !important;
    font-size: 8.5px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  .ros-3d-exp-point-card-price {
    display: grid !important;
    place-content: center !important;
    min-width: 52px !important;
    min-height: 28px !important;
    padding: 3px 5px !important;
    border-radius: 8px !important;
    background: #51a8ff !important;
    color: #fff !important;
    text-align: center !important;
    line-height: 1.02 !important;
    font-weight: 900 !important;
  }

  .ros-3d-exp-point-card.has-price-request .ros-3d-exp-point-card-price,
  .ros-3d-exp-point-card.has-combo-discount .ros-3d-exp-point-card-price {
    background: #39a035 !important;
  }

  .ros-3d-exp-point-card-price span,
  .ros-3d-exp-point-card-price del,
  .ros-3d-exp-point-card-price ins,
  .ros-3d-exp-point-card-price strong {
    color: #fff !important;
  }

  .ros-3d-exp-point-card-price span {
    display: block !important;
    font-size: 6px !important;
    line-height: 1 !important;
  }

  .ros-3d-exp-point-card-price strong {
    display: block !important;
    font-size: 9px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .ros-3d-exp-point-card-price del {
    margin-right: 2px !important;
    opacity: .72 !important;
    font-size: 6.5px !important;
  }

  .ros-3d-exp-point-card-price ins {
    text-decoration: none !important;
    font-size: 8px !important;
  }

  .ros-3d-exp-mobile-item {
    width: 100% !important;
    min-height: 64px !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 62px 82px !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 10px !important;
    border: 1px solid rgba(203, 213, 225, .9) !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #111827 !important;
    text-align: left !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .055) !important;
    cursor: pointer !important;
    transition:
      border-color .18s ease,
      background-color .18s ease,
      box-shadow .22s ease,
      filter .16s ease-out !important;
  }

  .ros-3d-exp-mobile-item:hover,
  .ros-3d-exp-mobile-item:focus-visible,
  .ros-3d-exp-mobile-item:active,
  .ros-3d-exp-mobile-item.is-touch-active {
    background: #f8fafc !important;
    border-color: rgba(26, 127, 100, .54) !important;
    box-shadow: 0 10px 26px rgba(6, 37, 31, .10) !important;
    filter: saturate(1.03) !important;
  }

  .ros-3d-exp-mobile-item.is-selected {
    background: #dbdee0 !important;
    border-color: rgba(100, 116, 139, .38) !important;
    animation: ros3dMobileRepairPulse 1.15s ease-out 1 !important;
  }

  .ros-3d-exp-mobile-item.is-selected:hover,
  .ros-3d-exp-mobile-item.is-selected:focus-visible,
  .ros-3d-exp-mobile-item.is-selected:active,
  .ros-3d-exp-mobile-item.is-selected.is-touch-active {
    background: #dbdee0 !important;
  }

  .ros-3d-exp-mobile-item.is-pulsing {
    animation: ros3dMobileRepairPulse 1.15s ease-out 1 !important;
  }

  @keyframes ros3dMobileRepairPulse {
    0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, .0), 0 6px 16px rgba(15, 23, 42, .055); }
    28% { box-shadow: 0 0 0 5px rgba(37, 99, 235, .18), 0 10px 24px rgba(15, 23, 42, .12); }
    72% { box-shadow: 0 0 0 9px rgba(37, 99, 235, .08), 0 10px 24px rgba(15, 23, 42, .10); }
    100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, .0), 0 6px 16px rgba(15, 23, 42, .055); }
  }

  .ros-3d-exp-mobile-icon {
    width: 42px !important;
    height: 42px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 8px !important;
    background: rgba(248, 250, 252, .9) !important;
  }

  .ros-3d-exp-mobile-icon img {
    max-width: 34px !important;
    max-height: 34px !important;
    object-fit: contain !important;
  }

  .ros-3d-exp-mobile-main {
    display: grid !important;
    gap: 3px !important;
    min-width: 0 !important;
  }

  .ros-3d-exp-mobile-main strong {
    color: #111827 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1.12 !important;
    overflow-wrap: anywhere !important;
  }

  .ros-3d-exp-mobile-main span {
    color: #64748b !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  .ros-3d-exp-mobile-price {
    display: grid !important;
    align-content: center !important;
    justify-items: center !important;
    justify-self: end !important;
    width: 82px !important;
    min-width: 74px !important;
    min-height: 34px !important;
    padding: 3px 7px 4px !important;
    border-radius: 9px !important;
    background: #51a8ff !important;
    color: #fff !important;
    text-align: center !important;
    line-height: 1 !important;
    font-weight: 700 !important;
  }

  .ros-3d-exp-mobile-original {
    display: inline-grid !important;
    place-items: center !important;
    justify-self: end !important;
    width: 62px !important;
    min-width: 62px !important;
    height: 36px !important;
    min-height: 36px !important;
    margin-right: 0 !important;
  }

  .ros-3d-exp-mobile-original.is-empty {
    visibility: hidden !important;
  }

  .ros-3d-exp-mobile-original img {
    max-width: 58px !important;
    max-height: 34px !important;
    object-fit: contain !important;
  }

  .ros-3d-exp-mobile-item.has-price-request .ros-3d-exp-mobile-price,
  .ros-3d-exp-mobile-item.has-combo-discount .ros-3d-exp-mobile-price {
    background: #39a035 !important;
  }

  .ros-3d-exp-mobile-price span,
  .ros-3d-exp-mobile-price del,
  .ros-3d-exp-mobile-price ins,
  .ros-3d-exp-mobile-price strong {
    color: #fff !important;
  }

  .ros-3d-exp-mobile-price span {
    display: block !important;
    align-self: start !important;
    font-size: 8.5px !important;
    font-weight: 700 !important;
    line-height: .9 !important;
    margin-top: -1px !important;
  }

  .ros-3d-exp-mobile-price strong {
    display: block !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .ros-3d-exp-mobile-item.has-price-request .ros-3d-exp-mobile-price strong {
    font-size: 11px !important;
    font-weight: 700 !important;
  }

  .ros-3d-exp-mobile-price del {
    margin-right: 2px !important;
    opacity: .72 !important;
    font-size: 7px !important;
    font-weight: 650 !important;
  }

  .ros-3d-exp-mobile-price ins {
    text-decoration: none !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
  }
}

@media (max-width: 760px) {
  .ros-3d-exp-viewer {
    width: 100% !important;
    margin-bottom: 16px !important;
  }

  .ros-3d-exp-stage,
  .ros-3d-exp-canvas {
    min-height: 360px !important;
    height: 360px !important;
  }

  .ros-3d-exp-label {
    width: min(230px, 82vw) !important;
    min-height: 34px !important;
    gap: 5px !important;
    padding: 5px 98px 5px 7px !important;
    border-radius: 9px !important;
  }

  .ros-3d-exp-label.has-original {
    width: min(320px, 94vw) !important;
    padding-right: 166px !important;
  }

  .ros-3d-exp-price {
    right: 6px !important;
    min-width: 66px !important;
    min-height: 28px !important;
    padding: 3px 7px !important;
    border-radius: 9px !important;
  }

  .ros-3d-exp-price span {
    font-size: 7.5px !important;
  }

  .ros-3d-exp-price strong {
    font-size: 11px !important;
  }

  .ros-3d-exp-original {
    right: 82px !important;
    width: 58px !important;
    min-width: 58px !important;
    height: 30px !important;
    min-height: 30px !important;
  }

  .ros-3d-exp-original img {
    max-width: 56px !important;
    max-height: 28px !important;
  }

  .ros-3d-exp-duration-tip,
  .ros-3d-exp-floating-tip {
    max-width: min(380px, calc(100% - 24px)) !important;
    font-size: 12px !important;
  }

  .ros-3d-exp-toolbar {
    gap: 4px !important;
    padding: 4px !important;
  }

  .ros-3d-exp-toolbar span,
  .ros-3d-exp-mode,
  .ros-3d-exp-reload,
  .ros-3d-exp-reset {
    min-height: 24px !important;
    padding: 0 9px !important;
    font-size: 10px !important;
  }

  .ros-3d-exp-reload,
  .ros-3d-exp-reset {
    width: 26px !important;
    min-width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
  }
}