/* StickPicker picker + shared bag — brand design system pass, 2026-08-21; picker v2 views 2026-09-01; bag table + export modal v3 2026-09-02.
   Tokens live on :root (NOT on #stickpicker-app) because the option sheets and
   share modal are appended to document.body — scoping vars to the app root is
   what made the popups render transparent. Do not move them back.
   Each token reads the site's published Webflow variable first and falls back
   to the same value hardcoded, so the app tracks Designer token edits but
   still renders correctly if a variable is ever renamed. */

:root {
  --sp-red: var(--brand--red, #e44333);
  --sp-red-hover: var(--brand--red-hover, #ce3525);
  --sp-ink: var(--text--strong, #141413);
  --sp-body: var(--text--body, #212121);
  --sp-muted: var(--text--muted, #63635c);
  --sp-subtle: var(--text--subtle, #85857d);
  --sp-inverse: var(--surface--inverse, #212121);
  --sp-card: var(--surface--card, #ffffff);
  --sp-page: var(--surface--page, #ffffff);
  --sp-sunken: var(--surface--sunken, #f5f5f3);
  --sp-inset: var(--surface--inset, #fafaf9);
  --sp-hover: var(--surface--hover, #f5f5f3);
  --sp-active: var(--surface--active, #ededea);
  --sp-accent-soft: var(--surface--accent-soft, #fdeeec);
  --sp-accent-text: var(--text--accent, #ce3525);
  --sp-line-subtle: var(--border--subtle, #ededea);
  --sp-line: var(--border--default, #e2e2de);
  --sp-line-strong: var(--border--strong, #cbcbc5);
  --sp-line-accent: var(--border--accent, #e44333);
  --sp-danger-bg: var(--status--danger-bg, #fdeeec);
  --sp-danger-fg: var(--status--danger-fg, #a92a1d);
  --sp-radius-xs: var(--radius--xs, 3px);
  --sp-radius-sm: var(--radius--sm, 6px);
  --sp-radius-md: var(--radius--md, 10px);
  --sp-radius-lg: var(--radius--lg, 14px);
  --sp-font-sans: var(--font--sans, "Outfit"), ui-sans-serif, system-ui, sans-serif;
  --sp-font-mono: var(--font--mono, "IBM Plex Mono"), ui-monospace, "SF Mono", Menlo, monospace;
  --sp-header-h: var(--layout--header-h, 60px);
}

#stickpicker-app, #stickpicker-bag {
  font-family: var(--sp-font-sans);
  font-size: var(--font-size--base, 15px);
  color: var(--sp-body);
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}
#stickpicker-app *, #stickpicker-bag * { box-sizing: border-box; }
#stickpicker-app button, #stickpicker-bag button { font: inherit; cursor: pointer; }

.sp-loading { padding: 3rem 1rem; text-align: center; color: var(--sp-muted); }
.sp-error-text { color: var(--sp-danger-fg); }

/* header / counter — sticks just below the site navbar */
.sp-header {
  position: sticky; top: var(--sp-header-h); z-index: 30;
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem 0; background: var(--sp-page);
  border-bottom: 1px solid var(--sp-line);
}
.sp-title { font-weight: 700; font-size: 1.1rem; letter-spacing: -0.01em; color: var(--sp-ink); margin-right: auto; }
.sp-counter {
  background: var(--sp-sunken); border: 1px solid var(--sp-line);
  border-radius: 999px; padding: .3rem .8rem; white-space: nowrap;
  font-family: var(--sp-font-mono); font-size: .85rem; color: var(--sp-muted);
  transition: background-color 130ms ease, border-color 130ms ease;
}
.sp-counter strong { color: var(--sp-red); font-weight: 600; }
.sp-counter.sp-full { background: var(--sp-accent-soft); border-color: var(--sp-line-accent); }
.sp-counter.sp-full strong { color: var(--sp-accent-text); }

/* v2 (2026-09-01): two views — the bag list (#bag) and the selector (#pick/{slot}).
   Horizontal gutters + max-width come from the Webflow container wrapping the embed. */
.sp-lead { color: var(--sp-muted); font-size: .92rem; margin: .9rem 0 1.1rem; max-width: 60ch; }
.sp-header-pick .sp-title { margin-right: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (max-width: 479.98px) { .sp-header-pick .sp-title { font-size: 1rem; } .sp-header-pick .sp-counter { padding: .3rem .6rem; } .sp-back-txt { display: none; } .sp-back { font-size: 1.1rem; padding-right: .2rem; } }
.sp-back {
  color: var(--sp-muted); text-decoration: none; font-size: .9rem; font-weight: 500; white-space: nowrap;
  padding: .4rem .6rem .4rem 0; border-radius: var(--sp-radius-sm);
}
.sp-back:hover { color: var(--sp-accent-text); }

.sp-h2 {
  font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--sp-subtle); font-weight: 600; margin: 0 0 .5rem;
}
.sp-empty {
  color: var(--sp-muted); padding: 1.25rem 1rem; background: var(--sp-inset);
  border: 1px dashed var(--sp-line-strong); border-radius: var(--sp-radius-md);
}

/* bag rows */
.sp-row, .sp-row-set {
  background: var(--sp-card); border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius-md); margin-bottom: .5rem;
}
.sp-row { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; }
.sp-row-set { padding-bottom: .5rem; }
.sp-row-set .sp-row { border: 0; margin: 0; }
.sp-row-main { min-width: 0; flex: 1; }
.sp-row-name { font-weight: 600; font-size: .95rem; color: var(--sp-ink); overflow: hidden; text-overflow: ellipsis; }
.sp-row-meta { color: var(--sp-muted); font-size: .82rem; }
.sp-row-count {
  background: var(--sp-sunken); border-radius: 999px; min-width: 1.7rem; height: 1.7rem;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sp-font-mono); font-size: .8rem; font-weight: 600; color: var(--sp-body);
}
.sp-icon-btn {
  background: none; border: 0; color: var(--sp-subtle); font-size: 1rem;
  padding: .4rem; min-width: 44px; min-height: 44px; border-radius: var(--sp-radius-sm);
  transition: color 130ms ease, background-color 130ms ease;
}
.sp-icon-btn:hover { color: var(--sp-accent-text); background: var(--sp-accent-soft); }

/* chips (iron set slots, loft/hand options) — mirrors the site-wide .chip / .chip.is-selected */
.sp-chips { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 .6rem; }
.sp-chip {
  border: 1px solid var(--sp-line); background: var(--sp-card);
  border-radius: var(--sp-radius-xs); padding: .3rem .65rem; min-height: 36px;
  font-family: var(--sp-font-mono); font-size: .85rem; font-weight: 500;
  color: var(--sp-body); white-space: nowrap;
  transition: background-color 130ms ease, border-color 130ms ease, color 130ms ease;
}
.sp-chip:hover { border-color: var(--sp-line-strong); background: var(--sp-hover); }
.sp-chip-on { background: var(--sp-accent-soft); border-color: var(--sp-line-accent); color: var(--sp-accent-text); }
.sp-chip-on:hover { background: var(--sp-accent-soft); border-color: var(--sp-line-accent); }
.sp-chip-x { opacity: .7; font-size: .75em; }
.sp-chip-static { pointer-events: none; }

/* ---------- bag list view (v3, 2026-09-02 — "Build your bag" design) ---------- */
.sp-bagview { display: flex; flex-direction: column; gap: 1.25rem; padding-top: .5rem; }
.sp-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--sp-subtle); }
.sp-h1 { margin: 0; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; color: var(--sp-ink); }
.sp-label { font-size: 13px; font-weight: 600; color: var(--sp-body); }
.sp-titlerow { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.sp-titleblock { display: flex; flex-direction: column; gap: .35rem; min-width: 0; flex: 1 1 22rem; }
.sp-titleblock .sp-lead { margin: 0; }
.sp-titleactions { display: flex; gap: .5rem; margin-left: auto; }

/* button sizes (the base .sp-btn stays 44px for the selector + sheets) */
.sp-btn-sm { min-height: 32px; padding: 0 .65rem; font-size: 13px; gap: 5px; border-radius: var(--sp-radius-sm); }
.sp-btn-md { min-height: 36px; padding: 0 .9rem; font-size: 14px; }
.sp-btn-ghost { border-color: transparent; background: transparent; color: var(--sp-muted); }
.sp-btn-ghost:hover { background: var(--sp-hover); border-color: transparent; color: var(--sp-body); }
.sp-btn[disabled] { opacity: .5; cursor: default; }
.sp-btn[disabled]:hover { background: var(--sp-card); border-color: var(--sp-line); }
.sp-btn-ghost[disabled]:hover { background: transparent; border-color: transparent; }
.sp-btn-copied, .sp-btn-copied:hover { background: var(--sp-accent-soft); border-color: var(--sp-line-accent); color: var(--sp-accent-text); }
.sp-ico { display: inline-flex; flex: none; line-height: 0; }
.sp-icon-btn-sm { min-width: 32px; min-height: 32px; width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.sp-icon-btn-sm:hover { color: var(--sp-accent-text); background: var(--sp-accent-soft); }

/* sticky link bar — sits just under the site navbar */
.sp-linkbar {
  position: sticky; top: calc(var(--sp-header-h) + .5rem); z-index: 30;
  display: flex; align-items: center; gap: .6rem; min-height: 46px;
  padding: .45rem .5rem .45rem .85rem;
  background: var(--sp-sunken); border: 1px solid var(--sp-line); border-radius: var(--sp-radius-md);
  color: var(--sp-subtle);
}
.sp-linkbar-url, .sp-linkbar-msg { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-linkbar-url { font-family: var(--sp-font-mono); font-size: 13px; font-weight: 500; color: var(--sp-body); text-decoration: none; }
.sp-linkbar-url:hover { color: var(--sp-accent-text); text-decoration: underline; }
.sp-linkbar-msg { font-size: 13px; color: var(--sp-muted); }
.sp-vrule { width: 1px; height: 22px; background: var(--sp-line); flex: none; }
.sp-linkbar-tools { display: flex; align-items: center; gap: .15rem; }
@media (max-width: 599.98px) {
  .sp-linkbar { padding-left: .6rem; gap: .35rem; }
  .sp-linkbar .sp-btn-txt { display: none; }
  .sp-linkbar .sp-btn-sm { padding: 0 .55rem; min-width: 32px; }
  .sp-linkbar .sp-btn-primary .sp-btn-txt { display: inline; }
  .sp-vrule { display: none; }
}

/* progress + bag check card */
.sp-summary {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 1.25rem; align-items: center;
  padding: .85rem 1rem; background: var(--sp-card); border: 1px solid var(--sp-line); border-radius: var(--sp-radius-md);
}
.sp-summary-progress { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.sp-progress-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.sp-summary .sp-counter { background: none; border: 0; padding: 0; border-radius: 0; font-size: 13px; font-weight: 500; }
.sp-summary .sp-counter.sp-full { background: none; }
.sp-progress { height: 6px; background: var(--sp-line-subtle); border-radius: 999px; overflow: hidden; }
.sp-progress-fill { height: 100%; background: var(--sp-red); border-radius: 999px; transition: width 280ms cubic-bezier(.22,.68,0,1); }
.sp-summary-check { display: flex; align-items: center; gap: .5rem; padding-left: 1.25rem; border-left: 1px solid var(--sp-line); min-width: 0; }
.sp-summary-detail { font-size: 13px; color: var(--sp-muted); }
.sp-badge {
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 .5rem; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; flex: none;
}
.sp-badge-neutral { background: var(--sp-line-subtle); color: var(--sp-muted); }
.sp-badge-success { background: var(--status--success-bg, #e7f5ee); color: var(--status--success-fg, #0c6544); }
.sp-summary-total { display: flex; flex-direction: column; align-items: flex-end; padding-left: 1.25rem; border-left: 1px solid var(--sp-line); white-space: nowrap; }
.sp-summary-total-label { font-size: 13px; color: var(--sp-subtle); }
.sp-summary-total-value { font-family: var(--sp-font-mono); font-weight: 600; font-size: 21px; line-height: 1.1; color: var(--sp-ink); }
@media (max-width: 719.98px) {
  .sp-summary { grid-template-columns: minmax(0, 1fr) auto; gap: .75rem 1rem; }
  .sp-summary-progress { grid-column: 1 / -1; }
  .sp-summary-check { padding-left: 0; border-left: 0; flex-wrap: wrap; }
  .sp-summary-total { padding-left: 1rem; }
}

/* club table: Category | (thumb · Selection · Specs · Price · Where · remove) */
.sp-table { display: flex; flex-direction: column; }
.sp-th { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--sp-subtle); }
.sp-th-price { text-align: right; }
.sp-table-head, .sp-table-foot, .sp-slot { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: .75rem; }
.sp-table-head { padding: .5rem 0; border-bottom: 1px solid var(--sp-line); }
.sp-slot { padding: .85rem 0; border-bottom: 1px solid var(--sp-line-subtle); }
.sp-table-foot { padding: .85rem 0; }
.sp-cols, .sp-bagrow {
  display: grid; grid-template-columns: 44px minmax(0, 1.4fr) minmax(0, 1fr) 80px minmax(120px, .9fr) 32px;
  gap: .75rem; align-items: center;
}
.sp-slot-cat { display: flex; flex-direction: column; gap: .15rem; padding-top: .4rem; }
.sp-slot-title { font-size: 13px; font-weight: 600; color: var(--sp-accent-text); text-decoration: none; }
.sp-slot-title:hover { text-decoration: underline; }
.sp-slot-count { font-family: var(--sp-font-mono); font-size: 12px; color: var(--sp-subtle); }
.sp-slot-body { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.sp-slot-fulltext { font-size: 13px; color: var(--sp-subtle); padding: .3rem 0; }
.sp-btn-choose { align-self: flex-start; color: var(--sp-body); }
.sp-bagrow { padding: .4rem .5rem; margin: 0 -.5rem; border-radius: var(--sp-radius-md); transition: background-color 130ms ease; }
.sp-bagrow:hover { background: var(--sp-hover); }
.sp-bagrow .sp-thumb { width: 44px; height: 44px; }
.sp-bagrow-main { display: flex; flex-direction: column; min-width: 0; }
.sp-bagrow-name { font-weight: 600; font-size: 15px; line-height: 1.3; color: var(--sp-ink); text-decoration: none; text-wrap: pretty; }
.sp-bagrow-name:hover { color: var(--sp-accent-text); text-decoration: underline; }
.sp-bagrow-sub { font-size: 13px; color: var(--sp-subtle); }
.sp-cell-specs { font-family: var(--sp-font-mono); font-size: 13px; font-weight: 500; color: var(--sp-muted); min-width: 0; overflow-wrap: anywhere; }
.sp-cell-price { display: flex; flex-direction: column; align-items: flex-end; }
.sp-price { font-family: var(--sp-font-mono); font-weight: 600; font-size: 16px; line-height: 1.2; color: var(--sp-ink); white-space: nowrap; }
.sp-price-from { font-weight: 400; font-size: .78rem; color: var(--sp-muted); }
.sp-price-none { color: var(--sp-subtle); font-weight: 400; font-size: 13px; font-family: var(--sp-font-sans); }
.sp-price-src { font-size: .75rem; color: var(--sp-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-cell-where { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.sp-vendor { flex: 1; min-width: 0; font-size: 13px; color: var(--sp-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-btn-buy { text-decoration: none; flex: none; }
.sp-remove { justify-self: end; }
.sp-row-set { display: flex; flex-direction: column; gap: .4rem; }
.sp-row-set .sp-chips { padding: 0 0 0 calc(44px + .75rem); }
.sp-foot-vendors { font-size: 13px; color: var(--sp-subtle); }
.sp-foot-total { font-family: var(--sp-font-mono); font-weight: 600; font-size: 18px; line-height: 1.2; color: var(--sp-ink); text-align: right; }
.sp-disclosure { margin: 0; font-size: 13px; color: var(--sp-subtle); }

@media (max-width: 899.98px) {
  /* stack: category as a heading, each club a card-ish grid */
  .sp-table-head { display: none; }
  .sp-table-foot, .sp-slot { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .sp-slot-cat { flex-direction: row; align-items: baseline; gap: .6rem; padding-top: 0; }
  .sp-bagrow {
    grid-template-columns: 44px minmax(0, 1fr) 32px;
    grid-template-areas: "thumb main remove" "specs specs specs" "price where where";
    gap: .35rem .75rem; margin: 0; padding: .6rem; border: 1px solid var(--sp-line); background: var(--sp-card);
  }
  .sp-bagrow:hover { background: var(--sp-card); }
  .sp-bagrow .sp-thumb { grid-area: thumb; }
  .sp-bagrow-main { grid-area: main; }
  .sp-remove { grid-area: remove; }
  .sp-cell-specs { grid-area: specs; padding-left: calc(44px + .75rem); }
  .sp-cell-specs:empty { display: none; }
  .sp-cell-price { grid-area: price; align-items: flex-start; }
  .sp-cell-where { grid-area: where; justify-content: flex-end; }
  .sp-row-set .sp-chips { padding: 0 .1rem; }
  .sp-cols { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; }
  .sp-table-foot .sp-cols > span:empty { display: none; }
  .sp-foot-total { margin-left: auto; }
}
@media (hover: none) and (pointer: coarse) {
  .sp-btn-sm, .sp-icon-btn-sm { min-height: 36px; }
  .sp-icon-btn-sm { width: 36px; height: 36px; min-width: 36px; }
}

/* export club list modal */
.sp-sheet-export { max-height: 90vh; gap: .85rem; }
@media (min-width: 720px) { .sp-sheet.sp-sheet-export { max-width: 640px; padding: 1.25rem; } }
.sp-dlg-head { display: flex; align-items: flex-start; gap: 1rem; }
.sp-dlg-head > div:first-child { flex: 1; display: flex; flex-direction: column; gap: .2rem; }
.sp-dlg-title { font-size: 21px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; color: var(--sp-ink); }
.sp-field { display: flex; flex-direction: column; gap: .4rem; }
.sp-fmt-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.sp-fmt {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 .8rem; border-radius: 999px;
  border: 1px solid var(--sp-line); background: var(--sp-card); color: var(--sp-body);
  font-size: 13px; font-weight: 600; transition: background-color 130ms ease, border-color 130ms ease, color 130ms ease;
}
.sp-fmt:hover { border-color: var(--sp-line-strong); background: var(--sp-hover); }
.sp-fmt-on, .sp-fmt-on:hover { border-color: var(--sp-red); background: var(--sp-accent-soft); color: var(--sp-accent-text); }
.sp-check-row { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.sp-check { display: inline-flex; align-items: center; gap: .55rem; cursor: pointer; font-size: 15px; color: var(--sp-body); position: relative; }
.sp-check input { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.sp-check-box {
  display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; flex: none;
  border: 1.5px solid var(--sp-line); border-radius: var(--sp-radius-xs); background: var(--sp-card); color: #fff;
  transition: background-color 130ms ease, border-color 130ms ease;
}
.sp-check-box .sp-ico { opacity: 0; }
.sp-check:hover .sp-check-box { border-color: var(--sp-line-strong); }
.sp-check input:checked + .sp-check-box { background: var(--sp-red); border-color: var(--sp-red); }
.sp-check input:checked + .sp-check-box .sp-ico { opacity: 1; }
.sp-check input:focus-visible + .sp-check-box { outline: 2px solid var(--sp-red); outline-offset: 2px; }
.sp-export-note { margin-top: -.3rem; }
.sp-export-text {
  width: 100%; resize: vertical; padding: .75rem; min-height: 200px;
  font-family: var(--sp-font-mono); font-size: 12px; font-weight: 500; line-height: 1.55; color: var(--sp-body);
  background: var(--sp-inset); border: 1px solid var(--sp-line); border-radius: var(--sp-radius-md);
}
.sp-export-text:focus { outline: none; border-color: var(--sp-line-accent); box-shadow: 0 0 0 3px var(--sp-accent-soft); }
.sp-clip { position: fixed; left: -9999px; top: 0; }

/* ---------- selector view ---------- */
.sp-seg { display: inline-flex; gap: 0; margin: .9rem 0 .2rem; border: 1px solid var(--sp-line); border-radius: 999px; padding: 3px; background: var(--sp-sunken); }
.sp-seg-btn {
  border: 0; background: transparent; border-radius: 999px; padding: .4rem .9rem; min-height: 38px;
  font-size: .88rem; font-weight: 500; color: var(--sp-body); white-space: nowrap;
  transition: background-color 130ms ease, color 130ms ease;
}
.sp-seg-on, .sp-seg-on:hover { background: var(--sp-inverse); color: #fff; }
.sp-toolbar { display: flex; align-items: center; gap: .6rem; padding: .7rem 0 .6rem; }
.sp-result-count { font-family: var(--sp-font-mono); font-size: .82rem; color: var(--sp-muted); margin-right: auto; white-space: nowrap; }
.sp-toolbar .sp-sort { width: auto; min-width: 0; max-width: 55%; }
.sp-filter-toggle { min-height: 40px; padding: .35rem .8rem; }
.sp-filter-toggle.sp-open { background: var(--sp-inverse); border-color: var(--sp-inverse); color: #fff; }

.sp-pick { display: flex; gap: 1.25rem; align-items: flex-start; }
.sp-filters { display: none; width: 100%; flex: none; }
.sp-filters.sp-open { display: block; }
.sp-filters-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4rem; }
.sp-filters .sp-h2 { margin: 0; }
.sp-btn-link { border: 0; background: none; color: var(--sp-accent-text); font-size: .82rem; font-weight: 500; padding: .3rem 0; }
.sp-btn-link:hover { text-decoration: underline; }
.sp-filters .sp-search { margin-bottom: .6rem; }
.sp-facet { border-top: 1px solid var(--sp-line-subtle); padding: .35rem 0; }
.sp-facet-title {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: .4rem;
  font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--sp-body);
  padding: .45rem 0; min-height: 40px;
}
.sp-facet-title::-webkit-details-marker { display: none; }
.sp-facet-title::after { content: '+'; margin-left: auto; color: var(--sp-subtle); font-weight: 500; font-size: 1rem; }
.sp-facet[open] > .sp-facet-title::after { content: '–'; }
.sp-facet-n {
  background: var(--sp-accent-soft); color: var(--sp-accent-text); border-radius: 999px;
  font-family: var(--sp-font-mono); font-size: .7rem; padding: 0 .45rem; min-width: 1.2rem; text-align: center; line-height: 1.3rem;
}
.sp-facet-opts { display: flex; flex-direction: column; gap: 0; padding-bottom: .4rem; max-height: 17rem; overflow-y: auto; }
.sp-facet-opt { display: flex; align-items: center; gap: .5rem; min-height: 36px; font-size: .88rem; cursor: pointer; }
.sp-facet-opt input { width: 16px; height: 16px; accent-color: var(--sp-red); margin: 0; flex: none; }
.sp-facet-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-facet-count { font-family: var(--sp-font-mono); font-size: .75rem; color: var(--sp-subtle); }
.sp-facet-opt.sp-dim { color: var(--sp-subtle); }
.sp-filters-done { width: 100%; margin-top: .6rem; }
@media (max-width: 899.98px) {
  .sp-filters.sp-open + .sp-list { display: none; }
}
@media (min-width: 900px) {
  .sp-toolbar .sp-filter-toggle, .sp-filters .sp-filters-done { display: none; }
  .sp-filters { display: block; width: 248px; position: sticky; top: calc(var(--sp-header-h) + 3.8rem); max-height: calc(100vh - var(--sp-header-h) - 4.5rem); overflow-y: auto; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--sp-line-strong) transparent; padding-right: .6rem; }
  .sp-filters::-webkit-scrollbar { width: 6px; }
  .sp-filters::-webkit-scrollbar-track { background: transparent; }
  .sp-filters::-webkit-scrollbar-thumb { background: var(--sp-line-strong); border-radius: 999px; }
  .sp-filters.sp-open + .sp-list { display: flex; }
}

.sp-list { display: flex; flex-direction: column; gap: .6rem; flex: 1; min-width: 0; }
.sp-item {
  display: grid; grid-template-columns: 88px minmax(0, 1fr); grid-template-areas: "thumb main" "price price";
  gap: .5rem .8rem; align-items: center;
  background: var(--sp-card); border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius-md); padding: .55rem .7rem;
  transition: border-color 130ms ease;
}
.sp-item:hover { border-color: var(--sp-line-strong); }
.sp-item-thumb { grid-area: thumb; display: block; }
.sp-item-thumb .sp-thumb { width: 88px; height: 88px; }
.sp-item-main { grid-area: main; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.sp-item-foot { display: flex; align-items: center; gap: .5rem .9rem; flex-wrap: wrap; }
.sp-item-specs { font-size: .8rem; font-weight: 600; color: var(--sp-accent-text); text-decoration: none; white-space: nowrap; }
.sp-item-specs:hover { text-decoration: underline; }
.sp-item-name { font-weight: 600; font-size: 1rem; color: var(--sp-ink); text-decoration: none; letter-spacing: -0.005em; }
.sp-item-name:hover { color: var(--sp-accent-text); text-decoration: underline; }
.sp-item-meta { color: var(--sp-muted); font-size: .8rem; }
.sp-item-price {
  grid-area: price; display: flex; align-items: center; gap: .6rem .8rem; flex-wrap: wrap;
  padding-top: .45rem; border-top: 1px solid var(--sp-line-subtle);
}
.sp-item-price .sp-price-src { flex: 1; min-width: 0; }
.sp-btn-add { min-height: 40px; padding: .35rem .95rem; margin-left: auto; }
@media (min-width: 720px) {
  .sp-item { grid-template-columns: 96px minmax(0, 1fr) auto; grid-template-areas: "thumb main price"; }
  .sp-item-thumb .sp-thumb { width: 96px; height: 96px; }
  .sp-item-price {
    flex-direction: column; align-items: flex-end; justify-content: center; gap: .15rem;
    padding: 0 0 0 .9rem; border-top: 0; border-left: 1px solid var(--sp-line-subtle); min-width: 9.5rem; align-self: stretch; text-align: right;
  }
  .sp-item-price .sp-price-src { flex: none; max-width: 100%; }
  .sp-btn-add { margin: .35rem 0 0; }
}

/* rating row */
.sp-rating { display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--sp-muted); min-height: 1.2rem; }
.sp-rating-none { color: var(--sp-subtle); font-size: .78rem; }
.sp-stars { position: relative; display: inline-block; font-size: .95rem; line-height: 1; letter-spacing: .05em; color: var(--sp-line-strong); }
.sp-stars-fill { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: var(--sp-red); }
.sp-rating-avg { font-family: var(--sp-font-mono); font-weight: 600; color: var(--sp-ink); }
.sp-rating-count { color: var(--sp-muted); text-decoration: none; }
.sp-rating-count:hover { color: var(--sp-accent-text); text-decoration: underline; }

.sp-search, .sp-select {
  border: 1px solid var(--sp-line); border-radius: var(--sp-radius-sm); padding: .55rem .7rem;
  font: inherit; color: var(--sp-body); background: var(--sp-card); width: 100%; min-height: 44px;
  transition: border-color 130ms ease, box-shadow 130ms ease;
}
.sp-search::placeholder { color: var(--sp-subtle); }
.sp-search:focus, .sp-select:focus {
  outline: none; border-color: var(--sp-line-accent);
  box-shadow: 0 0 0 3px var(--sp-accent-soft);
}
.sp-thumb {
  width: 52px; height: 52px; border-radius: var(--sp-radius-sm);
  background: var(--sp-inset); border: 1px solid var(--sp-line-subtle); flex: none; overflow: hidden;
}
.sp-thumb img { width: 100%; height: 100%; object-fit: contain; }

/* buttons — primary mirrors the global .button (brand red, radius sm, semibold) */
.sp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--sp-line); background: var(--sp-card); color: var(--sp-ink);
  border-radius: var(--sp-radius-sm); padding: .5rem 1rem; font-weight: 600;
  min-height: 44px; white-space: nowrap; text-align: center;
  transition: background-color 130ms ease, border-color 130ms ease;
}
.sp-btn:hover { background: var(--sp-hover); border-color: var(--sp-line-strong); }
.sp-btn-primary, .sp-btn-primary:hover { background: var(--sp-red); border-color: var(--sp-red); color: #fff; }
.sp-btn-primary:hover { background: var(--sp-red-hover); border-color: var(--sp-red-hover); }
.sp-btn-primary[disabled] { opacity: .45; cursor: default; }
.sp-btn-primary[disabled]:hover { background: var(--sp-red); border-color: var(--sp-red); }
.sp-btn-quiet { border: 0; background: none; color: var(--sp-muted); }
.sp-btn-quiet:hover { background: var(--sp-hover); border: 0; color: var(--sp-body); }

#stickpicker-app :focus-visible, #stickpicker-bag :focus-visible,
.sp-sheet-backdrop :focus-visible {
  outline: 2px solid var(--sp-red); outline-offset: 2px;
}

/* bottom sheet / modal — appended to document.body, so everything it needs
   (font included) must be set here, not inherited from the app root */
.sp-sheet-backdrop {
  position: fixed; inset: 0; background: rgba(20, 20, 19, .5); z-index: 2000;
  display: flex; align-items: flex-end; justify-content: center;
  font-family: var(--sp-font-sans); font-size: var(--font-size--base, 15px);
  color: var(--sp-body); line-height: 1.45;
}
.sp-sheet-backdrop *, .sp-sheet-backdrop *::before, .sp-sheet-backdrop *::after { box-sizing: border-box; }
.sp-sheet-backdrop button { font: inherit; cursor: pointer; }
.sp-sheet {
  background: var(--sp-card); width: 100%; max-width: 480px;
  border: 1px solid var(--sp-line-subtle); border-bottom: 0;
  border-radius: var(--sp-radius-lg) var(--sp-radius-lg) 0 0;
  box-shadow: 0 -8px 40px rgba(20, 20, 19, .18);
  padding: 1rem; max-height: 85vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: .7rem;
}
@media (min-width: 720px) {
  .sp-sheet-backdrop { align-items: center; }
  .sp-sheet {
    border-radius: var(--sp-radius-lg); border-bottom: 1px solid var(--sp-line-subtle);
    box-shadow: 0 20px 48px rgba(20, 20, 19, .22);
  }
}
/* Save & Share modal is roomier than the config sheet: it carries the
   name + description inputs. Wider on desktop, taller cap everywhere. */
.sp-sheet-share { max-height: 90vh; }
@media (min-width: 720px) {
  .sp-sheet.sp-sheet-share { max-width: 640px; padding: 1.25rem; }
}
.sp-textarea {
  font: inherit; font-family: var(--sp-font-sans);
  min-height: 108px; resize: vertical; line-height: 1.45;
}
.sp-sheet-head { display: flex; gap: .6rem; align-items: center; }
.sp-sheet-head .sp-row-name { font-size: 1.02rem; }
.sp-sheet-actions { display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; margin-top: .25rem; }
.sp-opt-label {
  font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--sp-subtle); font-weight: 600;
}
.sp-hint { color: var(--sp-muted); font-size: .85rem; }
.sp-url { font-family: var(--sp-font-mono); font-size: .85rem; color: var(--sp-body); word-break: break-all; }

/* toast */
.sp-toast {
  position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%) translateY(20px);
  background: var(--sp-inverse); color: #fff; border-radius: var(--sp-radius-md);
  padding: .6rem 1rem; font-family: var(--sp-font-sans); font-size: .9rem;
  opacity: 0; pointer-events: none; transition: all .25s ease; z-index: 2100;
  max-width: min(92vw, 480px); text-align: center;
  box-shadow: 0 8px 24px rgba(20, 20, 19, .25);
}
.sp-toast.sp-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.sp-toast.sp-error { background: var(--sp-danger-fg); }
.sp-toast-has-action { pointer-events: auto; display: inline-flex; align-items: center; gap: .75rem; }
.sp-toast-action { border: 0; background: none; color: #fff; font: inherit; font-weight: 700; text-decoration: underline; padding: .2rem .1rem; cursor: pointer; }

/* shared bag page (/b/{id}) — v3 2026-09-02: reuses the builder's bag-view classes above;
   these are only the read-only extras + the not-found state. */
.sp-bag-title { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; color: var(--sp-ink); margin: 0; }
.sp-h1.sp-bag-title { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2rem); }
.sp-bag-sub { color: var(--sp-muted); font-size: .9rem; }
.sp-bag-desc {
  color: var(--sp-body); font-size: .95rem; line-height: 1.55;
  white-space: pre-line; overflow-wrap: break-word;
  max-width: 60ch; margin: .35rem 0 0;
}
.sp-bag-card {
  display: block; width: 100%; max-width: 640px; height: auto;
  border: 1px solid var(--sp-line-subtle); border-radius: var(--sp-radius-md);
  margin: .9rem 0 0;
}
.sp-view-shared .sp-titleactions { flex-wrap: wrap; }
.sp-view-shared .sp-titleactions .sp-btn { text-decoration: none; }
.sp-slot-title-static { color: var(--sp-ink); }
.sp-slot-empty .sp-slot-title-static { color: var(--sp-subtle); }
.sp-view-shared .sp-cols, .sp-view-shared .sp-bagrow { grid-template-columns: 44px minmax(0, 1.4fr) minmax(0, 1fr) 80px minmax(120px, .9fr) 0; }
.sp-bagrow-orphan .sp-bagrow-name { color: var(--sp-subtle); font-style: italic; }
.sp-chip-off { color: var(--sp-subtle); border-style: dashed; text-decoration: line-through; background: transparent; }
.sp-badge-danger { background: var(--sp-danger-bg); color: var(--sp-danger-fg); }
.sp-cta { display: flex; justify-content: center; padding: 1.5rem 0 .5rem; }
.sp-cta-shared {
  justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 1rem 1.15rem; background: var(--sp-sunken); border: 1px solid var(--sp-line); border-radius: var(--sp-radius-md);
}
.sp-cta-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1 1 18rem; }
.sp-cta-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.sp-cta-actions .sp-btn { text-decoration: none; }
@media (max-width: 899.98px) {
  .sp-view-shared .sp-bagrow { grid-template-columns: 44px minmax(0, 1fr) 0; }
}
@media (max-width: 599.98px) {
  .sp-view-shared .sp-titleactions { width: 100%; margin-left: 0; }
  .sp-view-shared .sp-titleactions .sp-btn, .sp-cta-actions .sp-btn { flex: 1 1 40%; justify-content: center; }
}