/* Ported 1:1 from the static prototype's dist/assets/css/category.css
   (.wizard-* content rules). The modal SHELL (.wizard-modal/-backdrop/
   -modalbox/-modalhead/.wizard-close) is NOT theme-wide reuse - this
   theme's own bare .modal already means something else (Bootstrap-shim
   used by blockwishlist's popups, scootive-theme.css ~line 1429), so this
   mirrors wetwobartrim's own .abt-modal shell (same hidden-by-default,
   `hidden` attribute + class mechanics) under its own wizard-* prefix. */
.wizard-modal{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;overflow-y:auto}
.wizard-modal.hidden,.wizard-modal[hidden]{display:none}
.wizard-modal-backdrop{position:fixed;inset:0;background:rgba(10,10,10,.5)}
.wizard-modalbox{position:relative;width:min(760px,calc(100% - 32px));max-height:85vh;overflow:auto;background:#fff;padding:32px;margin:24px 0}
.wizard-modalhead{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px}
.wizard-modalhead h3{font-size:30px;margin:0}
.wizard-close{border:0;background:transparent;font-size:24px;line-height:1;padding:4px;cursor:pointer;color:var(--scootive-ink);flex-shrink:0}

/* Boxed within .wrap, same as the prototype's own .wizard-cta - NOT
   full-bleed. Padding/button size bumped up from the prototype's values
   for a taller banner (approved separately), but the box stays scoped to
   .wrap's width like the prototype. Bottom padding is 22px less than the
   top (not the same literal number) because .breadcrumb right below this
   section already carries its own 22px top padding (scootive-theme.css) -
   32px here would double up and make the visible gap below (32+22=54px)
   read as taller than the gap above (32px). 10+22=32 keeps both equal. */
.wizard-cta-sec{padding:32px 0 10px}
/* This section sits directly inside page.tpl's .page-wrap, which ALREADY
   applies the full .wrap width formula to its containing block - our own
   .wrap div here would apply that formula a SECOND time on top, ending up
   ~one gutter narrower than the header/breadcrumb/.cat-head .wrap (exact
   same bug class as .reco .wrap below - same fix: just fill the
   already-correct box). */
.wizard-cta-sec .wrap{width:100%;margin:0}
.wizard-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;background:#111;border:1px solid #111;padding:32px 40px}
.wizard-cta-copy{max-width:640px}
.wizard-cta-copy .eyebrow{color:var(--scootive-green)}
.wizard-cta-title{font-size:22px;margin:8px 0 8px;color:#fff}
.wizard-cta-copy p{font-size:13px;color:#bbb;line-height:1.6}
.wizard-cta-btn{white-space:nowrap;flex-shrink:0;background:var(--scootive-green)!important;border-color:var(--scootive-green)!important;color:#111!important;height:52px;padding:0 28px}
.wizard-cta-btn:hover{background:var(--scootive-green-hover)!important;border-color:var(--scootive-green-hover)!important}

.wizard-modal-intro{font-size:13px;line-height:1.6;color:#555;margin:0 0 8px}

.wizard-step{display:grid;grid-template-columns:56px 1fr;gap:24px;padding:28px 0;border-top:1px solid var(--scootive-line)}
.wizard-step:first-of-type{border-top:0}
.wizard-step-num{font-family:"Arial Black",Arial,sans-serif;font-size:22px;color:var(--scootive-gray-700)}
.wizard-step-label{font-size:10px;font-weight:900;letter-spacing:.06em;color:var(--scootive-gray-700);margin-bottom:16px}

.wizard-height-display{display:flex;align-items:baseline;gap:8px;margin-bottom:22px}
.wizard-height-display span{font-family:"Arial Black",Arial,sans-serif;font-size:64px;line-height:.9;letter-spacing:-.02em}
.wizard-height-display small{font-size:16px;font-weight:900;color:var(--scootive-gray-700)}

#wizardHeightSlider{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:var(--scootive-gray-600);cursor:pointer}
#wizardHeightSlider:focus{outline:0}
#wizardHeightSlider:focus::-webkit-slider-thumb{box-shadow:0 0 0 3px #fff,0 0 0 5px #111}
#wizardHeightSlider:focus::-moz-range-thumb{box-shadow:0 0 0 3px #fff,0 0 0 5px #111}
#wizardHeightSlider::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--scootive-green);border:3px solid #111;cursor:pointer}
#wizardHeightSlider::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--scootive-green);border:3px solid #111;cursor:pointer}
#wizardHeightSlider::-moz-range-track{height:4px;background:var(--scootive-gray-600)}

.wizard-options{display:flex;gap:8px;flex-wrap:wrap}
.wizard-options button{height:48px;padding:0 20px;border:1px solid var(--scootive-gray-600);background:#fff;color:#111;font-size:12px;font-weight:800;text-transform:uppercase;cursor:pointer}
.wizard-options button:hover{border-color:#111}
.wizard-options button.selected{background:#111;border-color:#111;color:#fff}

.wizard-result{margin-top:24px;padding-top:24px;border-top:1px solid var(--scootive-line);display:flex;align-items:center;justify-content:flex-end;gap:16px;font-size:13px;font-weight:700}
.wizard-result-actions{display:flex;gap:8px;flex-shrink:0}
#wizardReset{border:1px solid #111;background:transparent;height:40px;padding:0 16px;font-size:9px;font-weight:900;white-space:nowrap;cursor:pointer}
#wizardReset:hover{background:#111;color:#fff}
#wizardShowResults{white-space:nowrap;height:40px;padding:0 16px;font-size:9px}
#wizardShowResults:disabled{opacity:.4;cursor:not-allowed}

@media(max-width:1100px){
  .wizard-cta{flex-direction:column;align-items:flex-start;padding:20px}
  .wizard-cta-btn{width:100%;text-align:center}
  .wizard-step{grid-template-columns:1fr;gap:8px}
  .wizard-step-num{display:none}
  .wizard-height-display span{font-size:48px}
  .wizard-result{flex-direction:column;align-items:flex-start;gap:12px}
  .wizard-result-actions{width:100%}
  #wizardShowResults{flex:1}
}