/* Shared bag (bag.js): the header button and the side sheet, on every page.
   Self-contained tokens, because style.css, pages.css and brand/brand.css don't share one variable set.
   Same glass as the site: dark by default, html.is-white for "I Wanna White". */
.wsb, .wsb-btn, .wsb-toast {
  --wsb-bg: #000; --wsb-fg: #fff; --wsb-muted: #9c9c9c; --wsb-ink: 255, 255, 255; --wsb-paper: 0, 0, 0;
  --wsb-ease: cubic-bezier(.22, 1, .36, 1);
  --wsb-panel: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.02) 45%, rgba(255,255,255,.05)), rgba(12,12,14,.94);
  --wsb-fill: linear-gradient(160deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,.035) 38%, rgba(255,255,255,.012) 62%, rgba(255,255,255,.05) 100%), rgba(16,16,18,.55);
  --wsb-edge: inset 1.2px 1.2px 0 rgba(255,255,255,.5), inset -1px -1px 0 rgba(255,255,255,.1), inset 0 0 0 1px rgba(255,255,255,.05), inset 0 12px 18px -14px rgba(255,255,255,.35), inset 0 -10px 16px -14px rgba(255,255,255,.12);
  --wsb-drop: 0 14px 34px -12px rgba(0,0,0,.75);
  --wsb-cta: radial-gradient(2.5px 2.5px at 84% 9%, rgba(255,255,255,.95), transparent 70%), radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.16), transparent 55%), linear-gradient(160deg, rgba(255,255,255,.2), rgba(255,255,255,.05) 50%, rgba(255,255,255,.1)), rgba(22,22,25,.55);
  --wsb-cta-edge: inset 1.5px 1.5px 0 rgba(255,255,255,.85), inset -1px -1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.1), inset 0 16px 20px -16px rgba(255,255,255,.55), inset 0 -12px 18px -16px rgba(255,255,255,.2), 0 14px 34px -12px rgba(0,0,0,.8);
  --wsb-cta-fg: #fff;
  --wsb-bead: radial-gradient(circle at 35% 28%, rgba(255,255,255,.35), rgba(255,255,255,.05) 60%), #0c0c0e;
  --wsb-bead-edge: inset 1.2px 1.2px 0 rgba(255,255,255,.7), inset -1px -1px 0 rgba(255,255,255,.12);
  --wsb-bead-ink: #fff;
}
html.is-white :is(.wsb, .wsb-btn, .wsb-toast) {
  --wsb-panel: linear-gradient(160deg, rgba(255,255,255,.7), rgba(255,255,255,.3) 45%, rgba(255,255,255,.5)), rgba(236,236,238,.95);
  --wsb-bg: #eaeaea; --wsb-fg: #0c0c0c; --wsb-muted: #6f6f6f; --wsb-ink: 0, 0, 0; --wsb-paper: 234, 234, 234;
  --wsb-fill: linear-gradient(160deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.16) 38%, rgba(255,255,255,.06) 62%, rgba(255,255,255,.24) 100%), rgba(240,240,242,.45);
  --wsb-edge: inset 1.2px 1.2px 0 rgba(255,255,255,.95), inset -1px -1px 0 rgba(0,0,0,.1), inset 0 0 0 1px rgba(0,0,0,.05), inset 0 12px 18px -14px rgba(255,255,255,.9), inset 0 -10px 16px -14px rgba(0,0,0,.06);
  --wsb-drop: 0 14px 34px -14px rgba(0,0,0,.22);
  --wsb-cta: linear-gradient(160deg, #fff 0%, #f6f6f7 45%, #efeff1 70%, #f7f7f8 100%);
  --wsb-cta-edge: inset 1.5px 1.5px 0 #fff, inset -1px -1px 0 rgba(0,0,0,.12), inset 0 0 0 1px rgba(0,0,0,.06), inset 0 16px 20px -16px #fff, inset 0 -12px 18px -16px rgba(0,0,0,.1), 0 14px 34px -12px rgba(0,0,0,.25);
  --wsb-cta-fg: #0c0c0c;
  --wsb-bead: #ededed; --wsb-bead-edge: inset 1px 1px 0 #fff, inset -1px -1px 0 rgba(0,0,0,.1); --wsb-bead-ink: #0c0c0c;
}

/* ---------- header button (the page's own .circle gives it the glass) ---------- */
.wsb-btn { position: relative; padding: 0; border: 0; cursor: pointer; color: var(--wsb-fg); }
.wsb-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; transition: transform .6s var(--wsb-ease); }
.wsb-btn:hover svg { transform: rotate(-12deg) scale(1.08); }
.wsb-btn i { position: absolute; right: -4px; top: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--wsb-fg); color: var(--wsb-bg); font-style: normal; font-size: 11px; font-weight: 700; line-height: 1; display: grid; place-items: center; font-family: inherit; }
.wsb-btn i[hidden] { display: none; }

/* ---------- sheet ---------- */
html.wsb-lock { overflow: hidden !important; }
html.wsb-lock body { padding-right: var(--wsb-sb, 0px); }
.wsb { position: fixed; inset: 0; z-index: 200; visibility: hidden; font-family: "Inter Tight", system-ui, sans-serif; color: var(--wsb-fg); line-height: 1.3; -webkit-font-smoothing: antialiased; transition: visibility 0s .6s; }
.wsb.is-open { visibility: visible; transition: none; }
.wsb *, .wsb *::before, .wsb *::after { box-sizing: border-box; }
:where(.wsb) :where(p, h2, ul, li) { margin: 0; padding: 0; }   /* zero specificity: the rules below must win */
:where(.wsb) ul { list-style: none; }
:where(.wsb) button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
:where(.wsb) a { color: inherit; text-decoration: none; }
.wsb :focus-visible { outline: 1px solid var(--wsb-fg); outline-offset: 3px; }
.wsb__scrim { position: absolute; inset: 0; background: rgba(var(--wsb-paper), .6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity .4s var(--wsb-ease); }
.wsb.is-open .wsb__scrim { opacity: 1; }
.wsb__panel { position: absolute; right: 16px; top: 16px; bottom: 16px; width: min(480px, calc(100% - 32px)); border-radius: 26px; padding: 34px 30px 24px; display: flex; flex-direction: column; gap: 22px;
  background: var(--wsb-panel); box-shadow: var(--wsb-edge), var(--wsb-drop); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%);
  transform: translateX(110%); transition: transform .6s var(--wsb-ease); overscroll-behavior: contain; }
.wsb.is-open .wsb__panel { transform: none; }
.wsb__x { position: absolute; right: 18px; top: 16px; width: 40px; height: 40px; border-radius: 50%; font-size: 26px; line-height: 1; display: grid; place-items: center; transition: background .25s; }
.wsb__x:hover { background: rgba(var(--wsb-ink), .1); }
.wsb__k { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--wsb-muted); }
.wsb__h { font-weight: 400; font-size: 34px; line-height: 1.04; text-transform: uppercase; letter-spacing: 0; text-wrap: balance; padding-right: 32px; }
.wsb__list { display: flex; flex-direction: column; margin-top: 2px; border-top: 1px solid rgba(var(--wsb-ink), .12); overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
.wsb__item { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 18px 0; border-bottom: 1px solid rgba(var(--wsb-ink), .12); }
.wsb__item img { display: block; width: 76px; height: 76px; padding: 8px; object-fit: contain; border-radius: 14px; background: rgba(var(--wsb-ink), .05); }
.wsb__txt { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.wsb__txt b { font-weight: 500; text-transform: uppercase; font-size: 15px; }
.wsb__txt > span:not(.wsb__qty) { color: var(--wsb-muted); }
.wsb__qty { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; }
.wsb__qty button { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; background: rgba(var(--wsb-ink), .07); transition: background .25s; }
.wsb__qty button:hover { background: rgba(var(--wsb-ink), .14); }
.wsb__qty output { min-width: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.wsb__end { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.wsb__end b { font-weight: 500; font-size: 17px; font-variant-numeric: tabular-nums; }
.wsb__rm { font-size: 12px; color: var(--wsb-muted); text-decoration: underline; text-underline-offset: 3px; }
.wsb__rm:hover { color: var(--wsb-fg); }
.wsb__up { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 12px 12px 14px; border-radius: 16px; background: rgba(var(--wsb-ink), .06); box-shadow: inset 1px 1px 0 rgba(255,255,255,.12); }
.wsb__up[hidden] { display: none; }
.wsb__dot { width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(127,127,127,.5); }
.wsb__up div { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.wsb__up div b { font-weight: 500; font-size: 14px; text-transform: uppercase; }
.wsb__up div span { color: var(--wsb-muted); }
.wsb__upAdd { height: 40px; padding: 0 16px; border-radius: 500px; font-weight: 700; font-size: 14px; background: var(--wsb-cta); box-shadow: var(--wsb-cta-edge); color: var(--wsb-cta-fg); white-space: nowrap; transition: transform .5s var(--wsb-ease); }
.wsb__upAdd:hover { transform: translateY(-2px); }
.wsb__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 4px; font-size: 15px; color: var(--wsb-muted); }
.wsb__total b { color: var(--wsb-fg); font-weight: 500; font-size: 26px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.wsb__ship { font-size: 13px; color: var(--wsb-muted); margin-top: -10px; }
.wsb.is-empty :is(.wsb__total, .wsb__ship) { display: none; }
.wsb__go { margin-top: auto; flex: none; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 56px; padding: 8px 8px 8px 24px; border-radius: 500px;
  background: var(--wsb-cta); box-shadow: var(--wsb-cta-edge); color: var(--wsb-cta-fg); font-weight: 700; font-size: 18px; text-transform: uppercase; cursor: pointer; transition: transform .5s var(--wsb-ease); }
.wsb__go[hidden] { display: none; }
.wsb__go:hover { transform: translateY(-2px); }
.wsb__go:active { transform: translateY(0) scale(.98); }
.wsb__bead { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--wsb-bead); box-shadow: var(--wsb-bead-edge); color: var(--wsb-bead-ink); transition: transform .6s var(--wsb-ease); }
.wsb__bead svg { width: 24px; height: 22px; fill: currentColor; }
.wsb__go:hover .wsb__bead { transform: rotate(-12deg) scale(1.08); }
.wsb__more { align-self: center; font-size: 13px; color: var(--wsb-muted); text-decoration: underline; text-underline-offset: 3px; }
.wsb__more:hover { color: var(--wsb-fg); }
.wsb__note { font-size: 13px; color: var(--wsb-muted); text-align: center; }
.wsb__note[hidden] { display: none; }

/* ---------- the rail: what's in the bag hangs on a bar ---------- */
.wsb__rail { position: relative; flex: none; height: 156px; margin: 2px -30px 0; padding: 0 30px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.wsb__rail::-webkit-scrollbar { display: none; }
.wsb__bar { position: absolute; left: 0; right: 0; top: 10px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(var(--wsb-ink), 0), rgba(var(--wsb-ink), .35) 12%, rgba(var(--wsb-ink), .35) 88%, rgba(var(--wsb-ink), 0)); box-shadow: 0 1px 0 rgba(255,255,255,.08); }
.wsb__hooks { position: relative; display: flex; gap: 26px; min-width: min-content; padding-top: 9px; height: 100%; }
.wsb__hang { position: relative; margin: 0; flex: none; width: 84px; height: 140px; transform-origin: 50% 0; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; transition: transform .45s var(--wsb-ease); }
.wsb__swing { position: absolute; inset: 0; transform-origin: 50% 0; animation: wsbSway 4.8s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.3s); }
.wsb__hang img { pointer-events: none; -webkit-user-drag: none; }
.wsb__hooks.is-dragging .wsb__swing { animation: none; }
.wsb__hang.is-drag { z-index: 2; cursor: grabbing; transition: none; }
.wsb__swing.is-nudge { animation: wsbNudge .7s ease-out; }
.wsb__swing.is-settle { animation: wsbSettle 1.4s ease-out, wsbSway 4.8s ease-in-out 1.4s infinite; }
@keyframes wsbNudge { 0% { transform: none; } 30% { transform: rotate(7deg); } 60% { transform: rotate(-3deg); } 100% { transform: none; } }
@keyframes wsbSettle { 0% { transform: rotate(10deg); } 30% { transform: rotate(-7deg); } 55% { transform: rotate(4deg); } 80% { transform: rotate(-1.5deg); } 100% { transform: none; } }
.wsb__hanger { position: absolute; left: 10px; top: 0; width: 64px; height: 36px; fill: none; stroke: rgba(var(--wsb-ink), .55); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wsb__hang img { position: absolute; left: 6px; top: 12px; width: 72px; height: 100px; object-fit: contain; filter: drop-shadow(0 10px 12px rgba(0,0,0,.35)); }
html.is-white .wsb__hang img { filter: drop-shadow(0 10px 12px rgba(0,0,0,.14)); }
.wsb__hang b { position: absolute; right: -6px; bottom: 18px; min-width: 24px; height: 20px; padding: 0 6px; border-radius: 10px; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--wsb-fg); color: var(--wsb-bg); }
.wsb__hang.is-new { animation: wsbDrop 1.3s cubic-bezier(.3, 1.4, .5, 1) both; }
.wsb__hang.is-new .wsb__swing { animation-delay: 1.3s; }
@keyframes wsbSway { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
@keyframes wsbDrop { 0% { transform: translateY(-70px) rotate(-14deg); opacity: 0; } 30% { opacity: 1; } 55% { transform: translateY(0) rotate(9deg); } 75% { transform: rotate(-5deg); } 90% { transform: rotate(2deg); } 100% { transform: none; } }
/* empty bag: the rail takes the room, one bare hanger swings in the middle */
.wsb.is-empty .wsb__rail { flex: 1; height: auto; min-height: 220px; display: flex; }
.wsb.is-empty .wsb__bar { top: 30%; left: 18%; right: 18%; }
.wsb.is-empty .wsb__hooks { flex: 1; flex-direction: column; align-items: center; padding-top: 0; }
.wsb__hang.is-empty { cursor: default; position: absolute; left: 50%; top: calc(30% - 1px); width: 128px; height: 72px; margin-left: -64px; }
.wsb__hang.is-empty .wsb__swing { animation: wsbSwing 3.6s ease-in-out infinite; }
.wsb__hang.is-empty .wsb__hanger { left: 0; width: 128px; height: 72px; stroke-width: 1.4; }
@keyframes wsbSwing { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.wsb__railNote { position: absolute; left: 0; right: 0; top: calc(30% + 96px); text-align: center; font-size: 14px; color: var(--wsb-muted); }
.wsb.is-empty .wsb__list { display: none; }
.wsb-btn.is-bump i { animation: wsbBump .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes wsbBump { 0% { transform: scale(.4); } 60% { transform: scale(1.25); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .wsb__swing, .wsb__swing.is-nudge, .wsb__swing.is-settle, .wsb__hang.is-new, .wsb-btn.is-bump i { animation: none; } }

/* toast, for pages that have none of their own */
.wsb-toast { position: fixed; left: 50%; bottom: 32px; z-index: 210; margin: 0; transform: translate(-50%, 20px); opacity: 0; padding: 12px 20px; border-radius: 500px; font: 14px/1.3 "Inter Tight", system-ui, sans-serif; color: var(--wsb-fg); pointer-events: none;
  background: var(--wsb-panel); box-shadow: var(--wsb-edge), var(--wsb-drop); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: opacity .4s var(--wsb-ease), transform .4s var(--wsb-ease); }
.wsb-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 760px) {
  .wsb__panel { left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; max-height: 86vh; transform: translateY(110%); padding: 28px 20px 18px; }
  .wsb__h { font-size: 28px; }
  .wsb__rail { margin: 0 -20px; padding: 0 20px; height: 146px; }
  .wsb__panel { gap: 18px; }
  .wsb__go { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .wsb__panel, .wsb__scrim { transition: none; }
}