/* Guided picker — brand tokens from theme brand.css (fallbacks for standalone). */
.si-picker{
  background:#fff;
  border:1px solid var(--si-border,#e7e0d8);
  border-radius:var(--si-radius,14px);
  padding:28px;margin:0 0 32px;
  box-shadow:var(--si-shadow-sm,0 1px 2px rgba(20,20,20,.04));
  position:relative;overflow:hidden;
}
.si-picker::before{
  content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;
  background:radial-gradient(closest-side,var(--si-orange-tint,#fdf3ea),transparent 70%);
  pointer-events:none;
}
.si-picker>*{position:relative}
.si-picker__eyebrow{
  font-family:var(--si-font-display,'Poppins',sans-serif);font-weight:700;font-size:.72rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--si-orange,#e47916);
  display:inline-flex;align-items:center;gap:10px;
}
.si-picker__eyebrow::before{content:"";width:24px;height:1.5px;background:var(--si-orange,#e47916)}
.si-picker__title{
  font-family:var(--si-font-display,'Poppins',sans-serif);font-weight:700;color:var(--si-ink,#232323);
  font-size:clamp(1.4rem,2.6vw,2rem);margin:.4em 0 0;letter-spacing:-.02em;line-height:1.1;
}

/* Service tab strip (Phase 6) — Fully Fitted / Supply Only pill pair
   above the picker steps. Clicking reloads with ?si_service=... so the
   filter is shareable. */
.si-picker__services{
  display:inline-flex;background:var(--si-paper,#f4efe9);
  border-radius:var(--si-radius-pill,999px);padding:4px;gap:2px;
  margin:18px 0 8px;
}
.si-picker__service{
  display:inline-flex;align-items:center;
  font-family:var(--si-font-display,'Poppins',sans-serif);font-weight:600;font-size:.85rem;
  color:var(--si-grey-500,#767676);text-decoration:none;
  padding:.55em 1.3em;border-radius:var(--si-radius-pill,999px);
  transition:background var(--si-dur-fast) var(--si-ease),color var(--si-dur-fast) var(--si-ease);
}
.si-picker__service:hover:not(.is-active){color:var(--si-orange-dark,#c25f08)}
.si-picker__service.is-active{background:var(--si-orange,#e47916);color:#fff;box-shadow:0 2px 6px rgba(228,121,22,.4)}

.si-picker__steps{margin-top:18px}
.si-picker__progress{
  display:flex;align-items:center;gap:8px;margin:18px 0 20px;
}
.si-picker__progress-step{
  display:flex;align-items:center;gap:8px;
  font-family:var(--si-font-display,'Poppins',sans-serif);font-weight:600;font-size:.78rem;
  color:var(--si-grey-500,#767676);
  letter-spacing:.1em;text-transform:uppercase;
}
.si-picker__progress-step .si-picker__pip{
  display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:#fff;border:1.5px solid var(--si-border-strong,#d8cfc4);color:var(--si-grey-500,#767676);
  font-size:.7rem;font-weight:700;
}
.si-picker__progress-step.is-active{color:var(--si-ink)}
.si-picker__progress-step.is-active .si-picker__pip{background:var(--si-orange,#e47916);color:#fff;border-color:var(--si-orange,#e47916);box-shadow:0 0 0 3px var(--si-orange-tint,#fdf3ea)}
.si-picker__progress-step.is-done{color:var(--si-ink)}
.si-picker__progress-step.is-done .si-picker__pip{background:var(--si-ink,#0e0e0e);color:#fff;border-color:var(--si-ink,#0e0e0e)}
.si-picker__progress-bar{flex:1;height:1px;background:var(--si-border,#e7e0d8);margin:0 4px}
.si-picker__progress-bar.is-done{background:var(--si-orange,#e47916)}

.si-picker__crumb{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--si-orange-tint,#fdf3ea);color:var(--si-orange-dark,#c25f08);
  border:1px solid var(--si-orange-soft,#fbe7d2);
  border-radius:var(--si-radius-pill,999px);
  font-weight:600;font-size:.82rem;padding:.42em 1em;margin:0 8px 10px 0;cursor:pointer;
  font-family:var(--si-font-display,'Poppins',sans-serif);
  transition:background var(--si-dur) var(--si-ease),color var(--si-dur) var(--si-ease),transform var(--si-dur) var(--si-ease);
}
.si-picker__crumb::before{content:"←";font-size:.9em;opacity:.7}
.si-picker__crumb:hover{background:var(--si-orange,#e47916);color:#fff;transform:translateX(-2px)}
.si-picker__crumbx{font-size:1em;line-height:1;opacity:.8}
/* "Clear all" — quiet text link beside the active crumbs. */
.si-picker__clear{
  display:inline-flex;align-items:center;
  font-family:var(--si-font-display,'Poppins',sans-serif);font-weight:600;font-size:.8rem;
  color:var(--si-grey-500,#767676);text-decoration:underline;text-underline-offset:3px;
  padding:.42em .4em;margin:0 0 10px 2px;
  transition:color var(--si-dur) var(--si-ease);
}
.si-picker__clear:hover{color:var(--si-orange-dark,#c25f08)}
.si-picker__steplabel{
  font-family:var(--si-font-display,'Poppins',sans-serif);font-weight:700;color:var(--si-ink,#232323);
  margin:0 0 14px;font-size:1.05rem;letter-spacing:-.005em;
  display:flex;align-items:center;gap:10px;
}
.si-picker__steplabel::before{
  content:"";display:inline-block;width:6px;height:18px;background:var(--si-orange,#e47916);
  border-radius:2px;
}
.si-picker__chips{display:flex;flex-wrap:wrap;gap:10px}
.si-picker__chip{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:150px;
  background:#fff;border:1.5px solid var(--si-border,#e7e0d8);border-radius:var(--si-radius,14px);
  padding:14px 18px;cursor:pointer;
  transition:border-color var(--si-dur) var(--si-ease),box-shadow var(--si-dur) var(--si-ease),transform var(--si-dur) var(--si-ease);
  text-align:left;position:relative;
}
.si-picker__chip:hover:not(:disabled){border-color:var(--si-orange,#e47916);transform:translateY(-2px);box-shadow:var(--si-shadow,0 8px 24px -10px rgba(20,20,20,.18))}
.si-picker__chip:disabled{opacity:.4;cursor:not-allowed}
.si-picker__chip[data-color]{padding-left:18px}
.si-picker__chip[data-color]::before{
  content:"";position:absolute;left:18px;top:50%;transform:translateY(-50%);
  width:14px;height:14px;border-radius:50%;
  background:var(--chip-c,transparent);
  box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.12);
}
.si-picker__chip[data-color] .si-picker__chipval{padding-left:24px}
.si-picker__chips--swatches{gap:12px}
.si-picker__chip--swatch{
  display:flex;flex-direction:row;align-items:center;gap:10px;
  min-width:0;padding:10px 14px;border-radius:var(--si-radius-pill,999px);
}
.si-picker__chip--swatch .si-picker__chipval{font-size:.9rem;letter-spacing:0}
.si-picker__chip--swatch .si-picker__chipn{margin-left:auto;font-size:.72rem}
.si-picker__swatch{
  width:22px;height:22px;border-radius:50%;flex:none;
  box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.18),0 1px 2px rgba(0,0,0,.1);
  transition:transform var(--si-dur-fast) var(--si-ease);
}
.si-picker__chip--swatch:hover .si-picker__swatch{transform:scale(1.1)}
.si-picker__chip--swatch.is-selected{
  background:var(--si-orange-tint,#fdf3ea);border-color:var(--si-orange,#e47916);
  box-shadow:0 0 0 2px var(--si-orange-tint,#fdf3ea);
}
.si-picker__chipval{
  font-family:var(--si-font-display,'Poppins',sans-serif);font-weight:600;color:var(--si-ink,#232323);
  font-size:1rem;letter-spacing:-.005em;
}
.si-picker__chipn{font-size:.78rem;color:var(--si-grey-500,#767676)}
.si-picker__chip-arrow{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  color:var(--si-grey-500,#767676);font-size:1.1rem;transition:transform var(--si-dur) var(--si-ease),color var(--si-dur) var(--si-ease);
}
.si-picker__chip:hover:not(:disabled) .si-picker__chip-arrow{transform:translate(3px,-50%);color:var(--si-orange,#e47916)}
/* Fallback arrow via pseudo when JS hasn't injected one */
.si-picker__chip{position:relative}
.si-picker__chip:not(:has(.si-picker__chip-arrow))::after{
  content:"→";position:absolute;right:16px;top:50%;transform:translateY(-50%);
  color:var(--si-grey-500,#767676);font-size:1.1rem;
  transition:transform var(--si-dur) var(--si-ease),color var(--si-dur) var(--si-ease);
}
.si-picker__chip:hover:not(:disabled):not(:has(.si-picker__chip-arrow))::after{transform:translate(3px,-50%);color:var(--si-orange,#e47916)}

.si-picker__count{
  margin:18px 0 8px;font-weight:600;color:var(--si-grey-700,#4d4d4d);
  font-family:var(--si-font-display,'Poppins',sans-serif);font-size:.92rem;
  display:flex;align-items:center;gap:8px;
}
.si-picker__count b{color:var(--si-orange-dark,#c25f08);font-weight:700}
.si-picker__continue{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--si-orange,#e47916);color:#fff;border-radius:var(--si-radius-pill,999px);
  font-family:var(--si-font-display,'Poppins',sans-serif);font-weight:600;padding:.78em 1.6em;
  margin-top:10px;
  transition:background var(--si-dur) var(--si-ease),transform var(--si-dur) var(--si-ease),box-shadow var(--si-dur) var(--si-ease);
}
.si-picker__continue:hover{background:var(--si-orange-dark,#c25f08);color:#fff;transform:translateY(-1px);box-shadow:var(--si-shadow-orange,0 10px 24px -8px rgba(228,121,22,.45))}
.si-picker__continue::after{content:"→";transition:transform var(--si-dur) var(--si-ease)}
.si-picker__continue:hover::after{transform:translateX(3px)}

.si-picker__cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:8px;
}
.si-picker__card{
  display:flex;flex-direction:column;gap:6px;background:#fff;
  border:1px solid var(--si-border,#e7e0d8);border-radius:var(--si-radius,14px);
  padding:18px;
  transition:transform var(--si-dur) var(--si-ease),box-shadow var(--si-dur) var(--si-ease),border-color var(--si-dur) var(--si-ease);
}
.si-picker__card:hover{transform:translateY(-3px);box-shadow:var(--si-shadow,0 10px 30px -12px rgba(20,20,20,.25));border-color:var(--si-border-strong,#d8cfc4)}
.si-picker__cardtitle{font-family:var(--si-font-display,'Poppins',sans-serif);font-weight:600;color:var(--si-ink,#232323);font-size:1rem;letter-spacing:-.005em}
.si-picker__cardprice{color:var(--si-orange-dark,#c25f08);font-weight:700;font-size:1.05rem;font-variant-numeric:tabular-nums}
.si-picker__cardbtn{
  margin-top:10px;align-self:flex-start;background:var(--si-ink,#232323);color:#fff;
  border-radius:var(--si-radius-pill,999px);
  font-family:var(--si-font-display,'Poppins',sans-serif);font-weight:600;
  padding:.55em 1.2em;font-size:.85rem;display:inline-flex;align-items:center;gap:6px;
  transition:background var(--si-dur) var(--si-ease),transform var(--si-dur) var(--si-ease);
}
.si-picker__cardbtn:hover{background:#000;transform:translateY(-1px);box-shadow:var(--si-shadow,0 8px 24px -10px rgba(20,20,20,.4))}
.si-picker__cardbtn::after{content:"→";transition:transform var(--si-dur) var(--si-ease)}
.si-picker__cardbtn:hover::after{transform:translateX(3px)}

.si-picker__empty{color:var(--si-grey-700,#4d4d4d);padding:18px 0;text-align:center}
.si-picker__empty::before{content:"∅";display:block;font-size:1.4rem;color:var(--si-grey-300,#c9c2ba);margin-bottom:6px}

/* Reveal */
@media (prefers-reduced-motion: no-preference){
  .si-picker__step-panel{animation:si-picker-in .5s var(--si-ease-out,cubic-bezier(.16,1,.3,1)) both}
  .si-picker__chip{animation:si-picker-chip-in .5s var(--si-ease-out,cubic-bezier(.16,1,.3,1)) both}
  .si-picker__chip:nth-child(2){animation-delay:.04s}
  .si-picker__chip:nth-child(3){animation-delay:.08s}
  .si-picker__chip:nth-child(4){animation-delay:.12s}
  .si-picker__chip:nth-child(5){animation-delay:.16s}
  .si-picker__chip:nth-child(6){animation-delay:.2s}
  @keyframes si-picker-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @keyframes si-picker-chip-in{from{opacity:0;transform:translateY(6px) scale(.97)}to{opacity:1;transform:none}}
}

@media(max-width:600px){
  .si-picker__chip{min-width:calc(50% - 5px);padding:12px 14px}
  .si-picker{padding:22px}
  .si-picker__progress-step{font-size:.7rem}
  .si-picker__progress-step .si-picker__pip{width:20px;height:20px;font-size:.65rem}
}