/* ============================================================
   My Style — style profile configurator
   ============================================================ */
.ms-hero{background:var(--ink);position:relative;overflow:hidden;padding:88px 0 76px}
.ms-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 80% 30%,rgba(240,103,36,.18) 0,transparent 65%),radial-gradient(ellipse 35% 55% at 8% 80%,rgba(218,161,91,.12) 0,transparent 60%);pointer-events:none}
.ms-hero-inner{position:relative;z-index:1;text-align:center;max-width:720px;margin:0 auto}
.ms-hero-eyebrow{font-family:var(--font-display);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:var(--orange);margin-bottom:24px}
.ms-hero-title{font-family:var(--font-editorial);font-size:clamp(54px,8vw,96px);color:var(--cream);line-height:.92;letter-spacing:-.02em;margin-bottom:22px}
.ms-hero-title em{font-style:normal;color:var(--orange)}
.ms-hero-sub{font-size:16px;color:rgba(253,243,227,.6);line-height:1.75;max-width:500px;margin:0 auto 36px}
.ms-hero-cta{display:inline-flex;align-items:center;gap:9px;background:var(--orange);color:white;border-radius:999px;padding:15px 34px;font-family:var(--font-display);font-size:14px;font-weight:700;text-decoration:none;transition:all .2s}
.ms-hero-cta:hover{background:var(--orange-deep,#d4561f);transform:translateY(-2px);box-shadow:0 10px 28px rgba(240,103,36,.45)}
.ms-hero-tags{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:44px;opacity:.5}
.ms-hero-tag{font-family:var(--font-display);font-size:11px;font-weight:600;color:var(--cream);border:1px solid rgba(253,243,227,.18);border-radius:99px;padding:5px 13px}

/* Progress bar */
.ms-progress-bar{position:sticky;top:120px;z-index:40;background:rgba(253,243,227,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(123,51,49,.1);padding:13px 0}
.ms-progress-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.ms-progress-steps{display:flex;align-items:center;flex:1;gap:0;overflow-x:auto;scrollbar-width:none}
.ms-progress-steps::-webkit-scrollbar{display:none}
.ms-prog-step{background:none;border:none;font-family:var(--font-display);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:rgba(26,17,16,.32);cursor:pointer;padding:6px 10px;border-radius:99px;transition:all .15s;white-space:nowrap}
.ms-prog-step.active{color:var(--orange);background:rgba(240,103,36,.1)}
.ms-prog-step.done{color:var(--ink-soft,#5a4a48)}
.ms-prog-line{flex:1;height:1px;background:rgba(123,51,49,.12);min-width:10px}
.ms-progress-pct{font-family:var(--font-display);font-size:12px;font-weight:700;color:var(--orange);white-space:nowrap}

/* Step wrapper */
.ms-step{padding:80px 0;background:var(--paper,#fff)}
.ms-step-alt{background:#fdf3e3}
.ms-step-inner{max-width:960px}
.ms-step-label{font-family:var(--font-display);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.2em;color:var(--orange);margin-bottom:14px}
.ms-step-title{font-family:var(--font-editorial);font-size:clamp(32px,5vw,52px);color:var(--ink);line-height:1.05;letter-spacing:-.01em;margin-bottom:10px}
.ms-step-hint{font-size:14px;color:rgba(26,17,16,.5);margin-bottom:38px;line-height:1.6}

/* Step 1 — Shopping for */
.ms-for-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ms-for-tile{position:relative;background:var(--paper);border:2.5px solid rgba(123,51,49,.1);border-radius:24px;overflow:hidden;cursor:pointer;transition:all .22s;aspect-ratio:4/3;display:flex;align-items:flex-end;padding:0}
.ms-for-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s}
.ms-for-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(26,17,16,.75) 0,rgba(26,17,16,.06) 60%);transition:background .22s}
.ms-for-tile:hover img{transform:scale(1.05)}
.ms-for-tile:hover{border-color:rgba(240,103,36,.4);box-shadow:0 12px 32px rgba(240,103,36,.15)}
.ms-for-tile.sel{border-color:var(--orange);box-shadow:0 0 0 3px rgba(240,103,36,.22),0 12px 32px rgba(240,103,36,.15)}
.ms-for-tile.sel::after{background:linear-gradient(to top,rgba(240,103,36,.72) 0,rgba(240,103,36,.08) 65%)}
.ms-for-body{position:relative;z-index:1;padding:22px;width:100%}
.ms-for-label{font-family:var(--font-editorial);font-size:28px;color:white;display:block;margin-bottom:4px}
.ms-for-sub{font-family:var(--font-display);font-size:11px;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.1em}
.ms-for-check{position:absolute;top:14px;right:14px;z-index:2;width:28px;height:28px;background:var(--orange);border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.5);transition:all .2s}
.ms-for-tile.sel .ms-for-check{opacity:1;transform:scale(1)}

/* Step 2 — Vibes */
.ms-vibe-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ms-vibe-tile{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:3/4;cursor:pointer;border:2.5px solid transparent;transition:all .22s}
.ms-vibe-tile img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.ms-vibe-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(26,17,16,.82) 0,rgba(26,17,16,.04) 55%)}
.ms-vibe-tile:hover img{transform:scale(1.06)}
.ms-vibe-tile:hover{border-color:rgba(240,103,36,.3)}
.ms-vibe-tile.sel{border-color:var(--orange);box-shadow:0 0 0 3px rgba(240,103,36,.25)}
.ms-vibe-body{position:absolute;bottom:0;left:0;right:0;z-index:1;padding:16px 14px}
.ms-vibe-name{font-family:var(--font-display);font-size:13px;font-weight:700;color:white;display:block;margin-bottom:3px}
.ms-vibe-tag{font-size:10px;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.1em}
.ms-vibe-check{position:absolute;top:10px;right:10px;z-index:2;width:26px;height:26px;background:var(--orange);border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.5);transition:all .18s}
.ms-vibe-tile.sel .ms-vibe-check{opacity:1;transform:scale(1)}
.ms-vibe-note{font-family:var(--font-display);font-size:11px;font-weight:600;color:var(--orange);margin-top:14px;min-height:18px}

/* Step 3 — Brands */
.ms-brand-search-wrap{position:relative;margin-bottom:24px}
.ms-brand-search{width:100%;padding:12px 44px 12px 18px;border:1.5px solid rgba(123,51,49,.15);border-radius:12px;font-family:var(--font-display);font-size:14px;color:var(--ink);background:var(--paper);outline:none;transition:border-color .15s;box-sizing:border-box}
.ms-brand-search:focus{border-color:var(--orange)}
.ms-brand-search-icon{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:rgba(26,17,16,.3);pointer-events:none}
.ms-chip-grid{display:flex;flex-wrap:wrap;gap:9px}
.ms-chip{display:inline-flex;align-items:center;gap:7px;background:var(--paper);border:1.5px solid rgba(123,51,49,.12);border-radius:99px;padding:8px 16px;font-family:var(--font-display);font-size:12px;font-weight:600;color:rgba(26,17,16,.65);cursor:pointer;transition:all .16s;user-select:none}
.ms-chip:hover{background:#fdf3e3;border-color:rgba(123,51,49,.25);color:var(--ink)}
.ms-chip.sel{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.ms-chip-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.ms-chip-ct{font-size:10px;opacity:.45;margin-left:1px}

/* Step 4 — Budget */
.ms-budget-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ms-budget-card{background:var(--paper);border:2px solid rgba(123,51,49,.1);border-radius:18px;padding:28px 22px;cursor:pointer;transition:all .2s;text-align:left}
.ms-budget-card:hover{border-color:rgba(240,103,36,.3);transform:translateY(-2px);box-shadow:0 10px 28px rgba(240,103,36,.1)}
.ms-budget-card.sel{border-color:var(--orange);background:rgba(240,103,36,.04);box-shadow:0 0 0 3px rgba(240,103,36,.14)}
.ms-budget-range{font-family:var(--font-editorial);font-size:26px;color:var(--ink);display:block;margin-bottom:6px;line-height:1}
.ms-budget-card.sel .ms-budget-range{color:var(--orange)}
.ms-budget-name{font-family:var(--font-display);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:rgba(26,17,16,.45);display:block;margin-bottom:10px}
.ms-budget-desc{font-size:12px;color:rgba(26,17,16,.5);line-height:1.55}
.ms-budget-radio{width:18px;height:18px;border-radius:50%;border:2px solid rgba(123,51,49,.2);margin-top:14px;position:relative;transition:all .16s}
.ms-budget-card.sel .ms-budget-radio{border-color:var(--orange);background:var(--orange)}
.ms-budget-card.sel .ms-budget-radio::after{content:"";position:absolute;inset:3px;background:white;border-radius:50%}

/* Step 5 — Sizes */
.ms-size-table{display:flex;flex-direction:column;gap:30px}
.ms-size-row{display:grid;grid-template-columns:140px 1fr;gap:20px;align-items:start}
.ms-size-row-label{font-family:var(--font-display);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(26,17,16,.5);padding-top:10px}
.ms-size-btns{display:flex;flex-wrap:wrap;gap:8px}
.ms-size-btn{background:var(--paper);border:1.5px solid rgba(123,51,49,.12);border-radius:10px;padding:9px 15px;font-family:var(--font-display);font-size:12px;font-weight:600;color:var(--ink);cursor:pointer;transition:all .15s;min-width:52px;text-align:center}
.ms-size-btn:hover{background:#fdf3e3;border-color:rgba(123,51,49,.25)}
.ms-size-btn.sel{background:var(--ink);border-color:var(--ink);color:var(--cream)}

/* Step 6 — Colours */
.ms-palette-groups{display:flex;flex-direction:column;gap:28px}
.ms-palette-group-label{font-family:var(--font-display);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:rgba(26,17,16,.4);margin-bottom:12px}
.ms-color-row{display:flex;flex-wrap:wrap;gap:11px}
.ms-swatch{width:44px;height:44px;border-radius:50%;cursor:pointer;position:relative;transition:transform .16s,box-shadow .16s;border:2.5px solid transparent;flex-shrink:0}
.ms-swatch:hover{transform:scale(1.14)}
.ms-swatch.sel{border-color:var(--orange);box-shadow:0 0 0 3px rgba(240,103,36,.25);transform:scale(1.1)}
.ms-swatch-check{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s}
.ms-swatch.sel .ms-swatch-check{opacity:1}

/* CTA / results section */
.ms-cta-section{background:var(--ink);padding:88px 0;position:relative;overflow:hidden}
.ms-cta-section::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 55% 80% at 90% 50%,rgba(240,103,36,.15) 0,transparent 65%);pointer-events:none}
.ms-cta-inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.ms-cta-eyebrow{font-family:var(--font-display);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.2em;color:var(--orange);margin-bottom:18px}
.ms-cta-title{font-family:var(--font-editorial);font-size:clamp(36px,5.5vw,60px);color:var(--cream);line-height:.97;margin-bottom:16px;letter-spacing:-.01em}
.ms-cta-sub{font-size:15px;color:rgba(253,243,227,.58);line-height:1.75;margin-bottom:32px;max-width:420px}
.ms-cta-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:28px}
.ms-save-btn{background:var(--orange);color:white;border:none;border-radius:999px;padding:15px 32px;font-family:var(--font-display);font-size:14px;font-weight:700;cursor:pointer;transition:all .2s}
.ms-save-btn:hover{background:var(--orange-deep,#d4561f);transform:translateY(-2px);box-shadow:0 8px 26px rgba(240,103,36,.45)}
.ms-reset-btn{background:transparent;border:1.5px solid rgba(253,243,227,.18);border-radius:999px;padding:15px 26px;font-family:var(--font-display);font-size:13px;font-weight:600;color:rgba(253,243,227,.55);cursor:pointer;transition:all .2s}
.ms-reset-btn:hover{border-color:rgba(253,243,227,.38);color:var(--cream)}
.ms-cta-perks{display:flex;flex-direction:column;gap:7px}
.ms-cta-perk{font-family:var(--font-display);font-size:12px;font-weight:600;color:rgba(253,243,227,.45);display:flex;align-items:center;gap:8px}
.ms-cta-perk-dot{width:6px;height:6px;background:var(--orange);border-radius:50%;flex-shrink:0}
.ms-preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ms-prev-card{background:rgba(253,243,227,.05);border:1px solid rgba(253,243,227,.07);border-radius:16px;overflow:hidden;transition:transform .22s,box-shadow .22s;text-decoration:none}
.ms-prev-card:hover{transform:translateY(-4px);box-shadow:0 14px 36px rgba(240,103,36,.15)}
.ms-prev-img{aspect-ratio:3/4;overflow:hidden}
.ms-prev-img img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.ms-prev-card:hover .ms-prev-img img{transform:scale(1.05)}
.ms-prev-body{padding:12px 12px 14px}
.ms-prev-name{font-family:var(--font-display);font-size:11px;font-weight:600;color:rgba(253,243,227,.75);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-prev-price{font-family:var(--font-display);font-size:13px;font-weight:700;color:var(--orange)}
.ms-prev-match{font-size:10px;color:rgba(253,243,227,.3);margin-top:2px}

/* Toast */
.ms-toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(16px);background:var(--ink);color:var(--cream);font-family:var(--font-display);font-size:13px;font-weight:600;padding:14px 28px;border-radius:99px;box-shadow:0 8px 36px rgba(0,0,0,.32);border:1px solid rgba(253,243,227,.1);z-index:9999;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;white-space:nowrap}
.ms-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Responsive */
@media(max-width:960px){
  .ms-vibe-grid{grid-template-columns:repeat(2,1fr)}
  .ms-budget-grid{grid-template-columns:1fr 1fr}
  .ms-cta-inner{grid-template-columns:1fr;gap:48px}
  .ms-preview-grid{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:640px){
  .ms-for-grid{grid-template-columns:1fr}
  .ms-vibe-grid{grid-template-columns:1fr 1fr}
  .ms-size-row{grid-template-columns:1fr;gap:10px}
  .ms-preview-grid{grid-template-columns:1fr 1fr}
  .ms-prog-line{display:none}
  .ms-cta-inner{grid-template-columns:1fr}
}