/* UltraMAX DEV - Refined Light builder mobile finishing pass.
 * Step 1: neutral primary CTA; Step 2: uniform horizontal rows.
 * CSS only, existing preset buttons/artwork/data handlers remain intact.
 * Scoped to Refined Light and native builder; Classic/Dark unaffected.
 */
html.um-app-mode.um-refined[data-um-appearance="refined-light"] body #step-1
 .s1-final-nav .nav-btn.primary {
  background:#47749b !important;
  background-image:none !important;
  border:1px solid #47749b !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  text-shadow:none !important;
  box-shadow:none !important;
  border-radius:12px !important;
  min-height:52px !important;
  font-size:14px !important;
  letter-spacing:0 !important;
  padding:12px 18px !important;
}
html.um-app-mode.um-refined[data-um-appearance="refined-light"] body #step-1
 .s1-final-nav .nav-btn.primary:is(:hover,:active) {
  background:#385e7e !important;
  background-image:none !important;
  border-color:#385e7e !important;
  box-shadow:none !important;
  transform:none !important;
}
html.um-app-mode.um-refined[data-um-appearance="refined-light"] body #step-1
 .s1-final-nav .nav-btn.primary::after {
  content:none !important;
  display:none !important;
  background:none !important;
}
html.um-app-mode.um-refined[data-um-appearance="refined-light"] body #step-1
 .s1-final-nav .nav-btn.primary:focus-visible {
  outline:2px solid #47749b !important;
  outline-offset:3px !important;
}
html.um-app-mode.um-refined[data-um-appearance="refined-light"] body .um-main {
  padding-bottom:calc(88px + env(safe-area-inset-bottom)) !important;
}
html.um-app-mode.um-refined[data-um-appearance="refined-light"] body :is(#step-1,#step-2) {
  padding-bottom:12px !important;
  min-height:0 !important;
  margin-bottom:0 !important;
}
html.um-app-mode.um-refined[data-um-appearance="refined-light"] body #step-1 #advancedBuilderContainer {
  padding-bottom:0 !important;
  margin-bottom:0 !important;
}

@media (max-width:700px) {
  /* One native-style catalogue list, no stacked poster-at-top cards. */
  html.um-app-mode.um-refined[data-um-appearance="refined-light"] body #step-2
    #s2PresetsGrid.s2-presets-experience .s2-preset-primary-grid,
  html.um-app-mode.um-refined[data-um-appearance="refined-light"] body #step-2
    #s2PresetsGrid.s2-presets-experience .s2-preset-quick-grid {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:0 !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    border:1px solid #dce3eb !important;
    border-radius:14px !important;
    background:#fff !important;
    background-image:none !important;
    box-shadow:none !important;
  }
  html.um-app-mode.um-refined[data-um-appearance="refined-light"] body #step-2
    #s2PresetsGrid.s2-presets-experience :is(.s2-preset,#s2pre-everything) {
    display:grid !important;
    grid-template-columns:104px minmax(0,1fr) !important;
    grid-template-rows:minmax(126px,auto) !important;
    align-items:stretch !important;
    justify-items:stretch !important;
    align-content:stretch !important;
    column-gap:0 !important;
    row-gap:0 !important;
    min-height:126px !important;
    height:auto !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    border-bottom:1px solid #dce3eb !important;
    border-radius:0 !important;
    background:#fff !important;
    background-image:none !important;
    box-shadow:none !important;
    overflow:hidden !important;
    transform:none !important;
    text-align:left !important;
  }
  html.um-app-mode.um-refined[data-um-appearance="refined-light"] body #step-2
    #s2PresetsGrid.s2-presets-experience .s2-preset:last-child {
    border-bottom:0 !important;
  }
  html.um-app-mode.um-refined[data-um-appearance="refined-light"] body #step-2
    #s2PresetsGrid.s2-presets-experience :is(.s2-preset,#s2pre-everything) .s2-preset-strip {
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    grid-column:1 !important;
    grid-row:1 !important;
    width:104px !important;
    min-width:0 !important;
    max-width:104px !important;
    height:100% !important;
    min-height:126px !important;
    max-height:none !important;
    flex:none !important;
    align-self:stretch !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    border-radius:0 !important;
    background:#e9eef5 !important;
    box-shadow:none !important;
  }
  html.um-app-mode.um-refined[data-um-appearance="refined-light"] body #step-2
    #s2PresetsGrid.s2-presets-experience .s2-preset-strip .s2-preset-art-cell {
    width:100% !important;
    min-width:0 !important;
    height:100% !important;
    min-height:0 !important;
    display:block !important;
    overflow:hidden !important;
  }
  html.um-app-mode.um-refined[data-um-appearance="refined-light"] body #step-2
    #s2PresetsGrid.s2-presets-experience .s2-preset-strip .s2-preset-art-cell img {
    width:100% !important;
    height:100% !important;
    min-width:0 !important;
    max-width:none !important;
    display:block !important;
    object-fit:cover !important;
    object-position:center !important;
    transform:none !important;
  }
  html.um-app-mode.um-refined[data-um-appearance="refined-light"] body #step-2
    #s2PresetsGrid.s2-presets-experience :is(.s2-preset,#s2pre-everything) .s2-preset-body {
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    gap:6px !important;
    grid-column:2 !important;
    grid-row:1 !important;
    align-self:stretch !important;
    min-width:0 !important;
    width:100% !important;
    max-width:100% !important;
    min-height:126px !important;
    height:auto !important;
    margin:0 !important;
    padding:11px 12px !important;
    background:#fff !important;
    background-image:none !important;
    border:0 !important;
    box-shadow:none !important;
    text-align:left !important;
  }
  html.um-app-mode.um-refined[data-um-appearance="refined-light"] body #step-2
    #s2PresetsGrid.s2-presets-experience :is(.s2-preset,#s2pre-everything) .s2-preset-heading {
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    min-width:0 !important;
    width:100% !important;
  }
  html.um-app-mode.um-refined[data-um-appearance="refined-light"] body #step-2
    #s2PresetsGrid.s2-presets-experience .s2-preset-name {
    font-size:14px !important;
    line-height:1.3 !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    overflow-wrap:break-word !important;
  }
  html.um-app-mode.um-refined[data-um-appearance="refined-light"] body #step-2
    #s2PresetsGrid.s2-presets-experience .s2-preset-desc {
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    overflow:hidden !important;
    min-height:0 !important;
    font-size:11px !important;
    line-height:1.4 !important;
    margin:0 !important;
  }
  html.um-app-mode.um-refined[data-um-appearance="refined-light"] body #step-2
    #s2PresetsGrid.s2-presets-experience .s2-preset-icon {
    background:#e8eef5 !important;
    background-image:none !important;
    border:1px solid #d7e2eb !important;
    box-shadow:none !important;
    width:30px !important;
    height:30px !important;
    flex:0 0 30px !important;
  }
  html.um-app-mode.um-refined[data-um-appearance="refined-light"] body #step-2
    #s2PresetsGrid.s2-presets-experience .s2-preset-count {
    color:#496e8c !important;
    -webkit-text-fill-color:#496e8c !important;
    background:#eef2f7 !important;
    border:1px solid #dce3eb !important;
    box-shadow:none !important;
    font-size:10px !important;
    padding:4px 7px !important;
  }
  html.um-app-mode.um-refined[data-um-appearance="refined-light"] body #step-2
    #s2PresetsGrid.s2-presets-experience .s2-preset:is(.s2-active,:focus-visible) {
    background:#eff4f8 !important;
    box-shadow:none !important;
    outline-offset:-2px !important;
  }
  html.um-app-mode.um-refined[data-um-appearance="refined-light"] body #step-2
    #s2PresetsGrid.s2-presets-experience .s2-preset.s2-active .s2-preset-body {
    background:#eff4f8 !important;
  }
  html.um-app-mode.um-refined[data-um-appearance="refined-light"] body #step-2
    #s2PresetsGrid.s2-presets-experience .s2-preset-tick {
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    background:#47749b !important;
    background-image:none !important;
    border-color:#47749b !important;
    box-shadow:none !important;
  }
  /* Avoid centring a stray last tile or restricting its width. */
  html.um-app-mode.um-refined[data-um-appearance="refined-light"] body #step-2
    #s2PresetsGrid.s2-presets-experience .s2-preset-primary-grid > :last-child:nth-child(odd) {
    grid-column:auto !important;
    justify-self:stretch !important;
    width:100% !important;
  }
}
@media (max-width:360px) {
  html.um-app-mode.um-refined[data-um-appearance="refined-light"] body #step-2
    #s2PresetsGrid.s2-presets-experience :is(.s2-preset,#s2pre-everything) {
    grid-template-columns:92px minmax(0,1fr) !important;
  }
  html.um-app-mode.um-refined[data-um-appearance="refined-light"] body #step-2
    #s2PresetsGrid.s2-presets-experience :is(.s2-preset,#s2pre-everything) .s2-preset-strip {
    width:92px !important;
    max-width:92px !important;
  }
}