.sp { --sp-blue:#1769e0; --sp-ink:#14283e; --sp-muted:#52657a; --sp-line:#d7e2ee; --sp-header-height:72px; --sp-steps-height:72px; max-width:1200px; margin:0 auto; padding:32px 20px 40px; color:var(--sp-ink); letter-spacing:0; }
.sp *, .sp *::before, .sp *::after { box-sizing:border-box; letter-spacing:0; }
.sp [hidden] { display:none !important; }
.sp-intro { padding:0 0 24px; }
.sp-eyebrow { margin:0 0 8px; color:#176352; font-size:13px; font-weight:700; }
.sp h1 { font-size:34px; line-height:1.2; margin:0 0 12px; overflow-wrap:anywhere; }
.sp-lead { max-width:850px; color:var(--sp-muted); line-height:1.65; margin:0; font-size:16px; }
.sp-benefits { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:24px; }
.sp-benefit { padding-left:12px; border-left:3px solid #b1dccc; }
.sp-benefit:nth-child(2) { border-color:#a8cafa; }
.sp-benefit:nth-child(3) { border-color:#e8cb84; }
.sp-benefit strong { display:block; font-size:16px; margin-bottom:5px; }
.sp-benefit:first-child strong { color:#176352; }
.sp-benefit span { font-size:13px; color:var(--sp-muted); line-height:1.5; }
.sp-steps { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:7px; margin-bottom:24px; padding:9px 0; position:sticky; top:var(--sp-header-height); z-index:40; background:#f5f7fb; border-bottom:1px solid var(--sp-line); }
.sp-panel :is(input,select,textarea,button,h2) { scroll-margin-top:calc(var(--sp-header-height) + var(--sp-steps-height) + 18px); }
.sp button { font:inherit; cursor:pointer; }
.sp-step { display:flex; align-items:center; gap:8px; text-align:left; padding:10px; min-height:54px; color:var(--sp-muted); border:1px solid var(--sp-line); background:white; border-radius:6px; font-size:13px !important; line-height:1.3; min-width:0; }
.sp-step > span:last-child { overflow-wrap:anywhere; }
.sp-step-number { flex:0 0 25px; width:25px; height:25px; display:grid; place-items:center; border-radius:50%; background:#edf3fa; color:var(--sp-ink); font-weight:700; }
.sp-step[aria-current=step] { border-color:var(--sp-blue); background:var(--sp-blue); color:white; font-weight:700; }
.sp-step[aria-current=step] .sp-step-number { background:white; color:var(--sp-blue); }
.sp-step.is-done .sp-step-number { color:#16624f; background:#e3f4ec; }
.sp-workspace { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:28px; align-items:start; }
.sp-form { min-width:0; margin:0; }
.sp-panel { padding:26px; border:1px solid var(--sp-line); border-radius:6px; background:white; min-width:0; }
.sp h2 { margin:0 0 8px; font-size:24px; line-height:1.3; overflow-wrap:anywhere; }
.sp-description { margin:0 0 26px; color:var(--sp-muted); line-height:1.6; font-size:15px; }
.sp-field { margin-bottom:20px; min-width:0; }
.sp-field:last-child { margin-bottom:0; }
.sp label, .sp legend { font-weight:650; font-size:14px; line-height:1.5; color:var(--sp-ink); }
.sp-field > label { display:block; margin-bottom:7px; }
.sp input:not([type=checkbox]):not([type=radio]):not([type=file]), .sp select, .sp textarea { display:block; width:100%; max-width:100%; min-width:0; padding:11px 12px; border:1px solid #b9cadd; border-radius:5px; background:white; font:inherit; font-size:16px; color:var(--sp-ink); min-height:46px; box-shadow:none; }
.sp textarea { min-height:104px; resize:vertical; line-height:1.5; }
.sp input::placeholder,.sp textarea::placeholder { color:#718095; opacity:1; }
.sp input[type=checkbox], .sp input[type=radio] { width:18px; height:18px; margin:0; accent-color:var(--sp-blue); flex:0 0 18px; }
.sp input[aria-invalid=true],.sp select[aria-invalid=true],.sp textarea[aria-invalid=true] { border-color:#bc3030 !important; }
.sp :focus-visible { outline:3px solid #91baf4; outline-offset:3px; }
.sp-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.sp-grid .sp-field { margin:0; }
.sp fieldset { margin:0 0 22px; padding:0; border:0; min-width:0; }
.sp legend { margin-bottom:10px; padding:0; }
.sp-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.sp-choice { display:flex; align-items:center; gap:10px; padding:12px; min-height:48px; border:1px solid var(--sp-line); border-radius:5px; cursor:pointer; background:#fff; }
.sp-choice:has(input:checked) { border-color:var(--sp-blue); background:#f0f6ff; }
.sp-choice span { overflow-wrap:anywhere; }
.sp-check { display:flex; align-items:center; gap:10px; padding:10px 0; min-height:44px; cursor:pointer; font-weight:400 !important; }
.sp-help { display:block; font-size:12px; color:var(--sp-muted); line-height:1.5; margin-top:6px; }
.sp-error { margin:7px 0 0; font-size:13px; color:#a32626; line-height:1.5; }
.sp-errors { padding:12px 15px; background:#fff2f2; color:#982424; border-left:3px solid #c43a3a; border-radius:3px; font-size:14px; margin:0 0 20px; }
.sp-products { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:18px; margin-bottom:18px; }
.sp-product { border-bottom:1px solid var(--sp-line); padding:9px 0 12px; min-width:0; }
.sp-product .sp-check { font-weight:650 !important; align-items:flex-start; }
.sp-product input[type=checkbox] { margin-top:2px; }
.sp-product small { display:block; color:var(--sp-muted); font-size:12px; line-height:1.5; font-weight:400; margin-top:3px; }
.sp-product .sp-field { margin:8px 0 0 28px; }
.sp-product .sp-field input { min-height:40px; }
.sp-note { background:#eff8f4; color:#245c4c; border-left:3px solid #64ae90; padding:13px 15px; font-size:13px; line-height:1.6; margin:18px 0; }
.sp-bundle { padding:14px 0 14px 15px; margin:18px 0; border-left:4px solid #25926e; background:#eff8f4; }
.sp-bundle strong { font-size:19px; line-height:1.4; color:#176352; }
.sp-bundle p { font-size:13px; line-height:1.6; margin:5px 12px 0 0; color:#245c4c; }
.sp-quantity-note,.sp-quantity-details p { font-size:13px; line-height:1.6; color:var(--sp-muted); margin:10px 0; }
.sp-quantity-details { margin-bottom:12px; }
.sp-reference-help { margin:-12px 0 20px; }
.sp-swatches { display:flex; flex-wrap:wrap; gap:12px; padding:6px 0; }
.sp-swatch { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; border:1px solid #9caebd; cursor:pointer; position:relative; }
.sp-swatch input { position:absolute; opacity:0; width:100%; height:100%; }
.sp-swatch:has(input:checked) { outline:3px solid var(--sp-blue); outline-offset:3px; }
.sp-swatch:has(input:focus-visible) { outline:3px solid var(--sp-blue); outline-offset:4px; }
.sp-swatch:has(input:checked)::after { content:'✓'; color:white; font-size:17px; text-shadow:0 1px 3px #000; pointer-events:none; }
.sp-colours { min-height:20px; font-size:13px; color:var(--sp-muted); margin:8px 0 18px; }
.sp-upload { border:1px dashed #9db8d8; padding:22px 18px; text-align:center; border-radius:5px; background:#f8fbff; }
.sp-files { list-style:none; padding:0; margin:12px 0 20px; }
.sp-files li { display:flex; align-items:center; justify-content:space-between; gap:8px; border-bottom:1px solid var(--sp-line); padding:9px 0; font-size:13px; }
.sp-files li span { min-width:0; overflow-wrap:anywhere; }
.sp-remove { min-width:40px; width:40px; height:40px; border:0; background:transparent; color:#9b3434; font-size:23px !important; }
.sp-actions { display:flex; justify-content:space-between; gap:12px; padding-top:18px; }
.sp-next { margin-left:auto; }
.sp-button { display:inline-flex; justify-content:center; align-items:center; text-align:center; min-height:46px; border:1px solid var(--sp-blue); background:var(--sp-blue); color:white; padding:11px 20px; font-size:14px !important; font-weight:700 !important; border-radius:5px; line-height:1.4; }
.sp-button.secondary { background:white; color:var(--sp-blue); border-color:#b9cadd; }
.sp-button:disabled { cursor:not-allowed; background:#e3eaf3; border-color:#d5dfe9; color:#52657a; }
.sp-aside { background:white; border:1px solid var(--sp-line); border-radius:6px; overflow:hidden; position:sticky; top:calc(var(--sp-header-height) + var(--sp-steps-height) + 16px); }
.sp-photo { display:block; }
.sp-photo img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:contain; }
.sp-price { padding:21px; }
.sp-price h2 { font-size:18px; margin:0; }
.sp-amount { margin:10px 0; color:var(--sp-blue); display:flex; align-items:baseline; flex-wrap:wrap; gap:8px; }
.sp-amount strong { font-size:32px; line-height:1.25; }
.sp-amount span { font-size:13px; color:var(--sp-muted); }
.sp-price p { font-size:13px; line-height:1.6; margin:10px 0; color:var(--sp-muted); }
.sp-price .sp-price-bundle { color:#176352; font-weight:650; border-left:3px solid #64ae90; padding-left:10px; }
.sp-price hr { border:0; border-top:1px solid var(--sp-line); margin:16px 0; }
.sp-price ul { margin:8px 0; padding-left:18px; font-size:13px; line-height:1.8; }
.sp-price details { font-size:12px; border-top:1px solid var(--sp-line); padding-top:12px; margin-top:14px; }
.sp summary { cursor:pointer; min-height:36px; display:flex; align-items:center; justify-content:space-between; gap:10px; font-weight:650; font-size:13px; list-style:none; }
.sp summary::after { content:'+'; font-size:19px; color:var(--sp-blue); }
.sp details[open] > summary::after { content:'−'; }
.sp summary::-webkit-details-marker { display:none; }
.sp-preview { font-size:12px; color:#5f6f80; text-align:center; margin:25px 0 0; }
.sp-review { border-top:1px solid var(--sp-line); padding:17px 0; }
.sp-review-head { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.sp-review h3 { font-size:16px; margin:0; }
.sp-edit { background:transparent; border:0; color:var(--sp-blue); padding:9px 5px; min-height:40px; font-size:13px !important; }
.sp-review p,.sp-review li { font-size:14px; line-height:1.7; color:var(--sp-muted); overflow-wrap:anywhere; white-space:pre-line; margin:6px 0; }
.sp-review ul { padding-left:18px; margin:8px 0; }
.sp-price-line { display:flex; justify-content:space-between; gap:12px; padding:9px 0; font-size:14px; }
.sp-mobile-price { display:none; }
@media (max-width:1000px) { .sp-workspace { grid-template-columns:minmax(0,1fr) 280px; gap:20px; } .sp-benefits { gap:12px; } .sp-step { padding:9px 6px; gap:5px; } .sp-step-number { flex-basis:22px; width:22px; height:22px; } }
@media (max-width:760px) {
 .sp { padding:22px 16px 30px; } .sp h1 { font-size:28px; } .sp h2 { font-size:22px; }
 .sp-workspace { display:flex; flex-direction:column; gap:20px; } .sp-form,.sp-aside { width:100%; }
 .sp-aside { position:static; } .sp-photo { max-width:400px; margin:auto; } .sp-price { padding:20px; }
 .sp-benefits { grid-template-columns:1fr; gap:15px; margin-top:18px; }
 .sp-benefit strong { font-size:15px; } .sp-benefit span { font-size:13px; }
 .sp-steps { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-bottom:16px; }
 .sp-step { font-size:12px !important; min-height:58px; } .sp-step-number { flex-basis:22px; }
 .sp-panel { padding:20px 16px; } .sp-description { margin-bottom:20px; }
 .sp-grid { grid-template-columns:1fr; } .sp-choices { grid-template-columns:1fr; }
 .sp-products { grid-template-columns:1fr; } .sp-button { padding:11px 15px; }
 .sp-mobile-price { display:block; font-size:13px; line-height:1.5; color:var(--sp-muted); margin:16px 0 0; }
 .sp-mobile-price strong { color:var(--sp-blue); }
}
@media (max-width:360px) {
 .sp-steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .sp-step { min-height:48px; }
}
@media (prefers-reduced-motion:no-preference) { .sp-button,.sp-step { transition:background-color .12s,border-color .12s; } }
.sp-steps { grid-template-columns:repeat(var(--sp-step-count,6),minmax(0,1fr)); }
.sp-execution-intro { margin:12px 0 20px; color:var(--sp-muted); font-size:14px; line-height:1.6; }
.sp-config-product { padding:20px 0; border-top:1px solid var(--sp-line); }
.sp-config-heading { display:flex; align-items:baseline; justify-content:space-between; gap:16px; }
.sp-config-heading > div { min-width:0; }
.sp-config-heading h3 { font-size:18px; margin:0 0 5px; line-height:1.4; overflow-wrap:anywhere; }
.sp-config-heading span { color:var(--sp-muted); font-size:13px; }
.sp-config-price { font-size:17px; color:var(--sp-blue); text-align:right; flex:0 0 auto; max-width:42%; overflow-wrap:anywhere; }
.sp-config-summary { font-size:13px; line-height:1.65; color:var(--sp-muted); margin:12px 0; overflow-wrap:anywhere; }
.sp-config-options { border-top:1px solid var(--sp-line); margin-top:14px; padding-top:5px; }
.sp-config-options > summary { min-height:44px; color:var(--sp-blue); }
.sp-config-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; padding:12px 0; }
.sp-config-grid .sp-field, .sp-config-grid fieldset { margin:0; }
.sp-config-grid select { font-size:14px; }
.sp-config-fixed { font-size:13px; line-height:1.6; padding:6px 0; }
.sp-config-fixed span, .sp-config-fixed strong { display:block; }
.sp-config-fixed span { color:var(--sp-muted); }
.sp-config-status { border-left:3px solid #d5ac56; padding:1px 12px 12px; margin:14px 0; background:#fff9ed; font-size:13px; line-height:1.6; }
.sp-config-status p { margin:10px 0; }
.sp-config-status.is-error { border-color:#bc3030; background:#fff2f2; }
.sp-config-product > .sp-field { margin-top:16px; }
.sp-price-line > strong { flex:0 0 auto; text-align:right; }
.sp-price-line > span { min-width:0; }
.sp-savings { color:#176352; }
.sp-total { border-top:1px solid var(--sp-line); color:var(--sp-blue); margin-top:12px; font-weight:700; }
@media (max-width:760px) {
 .sp-steps { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .sp-configuring .sp-steps { grid-template-columns:repeat(4,minmax(0,1fr)); }
 .sp-configuring .sp-step { flex-direction:column; align-items:flex-start; padding:7px; gap:4px; min-height:68px; }
 .sp-config-grid { grid-template-columns:1fr; }
 .sp-config-heading { gap:10px; }
 .sp-config-heading h3 { font-size:16px; }
 .sp-config-price { font-size:15px; }
}
@media (max-width:360px) { .sp:not(.sp-configuring) .sp-steps { grid-template-columns:repeat(2,minmax(0,1fr)); } }