MERCH — LIST OF SWITCHES

/* MERCH — LIST OF SWITCHES

NEW

LOGO TEE

100% cotton, unisex fit. Available S–XXL.

$25.00

GRAPHIC TEE

Heavy-washed. Band art print. Unisex S–XXL.

$25.00

EXCLUSIVE

EXCLUSIVE SHOW TEE

Limited run. Only available at shows & online while supplies last.

$30.00

PULLOVER HOODIE

Heavyweight fleece. Front print. S–XXL.

$45.00

STICKER PACK

5-pack of die-cut vinyl stickers.

$10.00

EMBROIDERED PATCH

Iron-on / sew-on. 3 inch.

$8.00

CART (0)

TOTAL: $0.00

ORDER VIA EMAIL →

We'll reply within 24 hours with payment & shipping details.

*/ /* ══════════════════════════════════════════════════════ CHECKOUT MODAL — Stripe ══════════════════════════════════════════════════════ */ .co-noscroll { overflow: hidden; } #checkout-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.82); display: flex; align-items: center; justify-content: center; padding: 1rem; opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s ease; } #checkout-overlay.open { opacity: 1; visibility: visible; } .co-modal { display: grid; grid-template-columns: 280px 1fr; width: 100%; max-width: 920px; max-height: 92vh; background: var(--surface); border: 1px solid var(--border); overflow: hidden; position: relative; } /* ── CLOSE ── */ .co-close { position: absolute; top: 1.2rem; right: 1.4rem; z-index: 10; background: none; border: none; color: var(--tan); font-size: 1.6rem; cursor: pointer; line-height: 1; transition: color var(--transition); } .co-close:hover { color: var(--cream); } /* ── SIDEBAR ── */ .co-sidebar { background: #0d0d0d; border-right: 1px solid var(--border); padding: 2.5rem 1.8rem; display: flex; flex-direction: column; gap: 1rem; overflow-y: auto; } .co-sidebar-heading { font-size: 0.58rem; letter-spacing: 0.35em; color: var(--tan); margin-bottom: 0.5rem; } .co-sidebar-items { flex: 1; } .co-sidebar-item { display: flex; justify-content: space-between; font-size: 0.65rem; letter-spacing: 0.1em; padding: 0.6rem 0; border-bottom: 1px solid var(--border); color: rgba(240,235,224,0.75); } .co-sidebar-total { font-family: var(--ff-display); font-size: 1.15rem; letter-spacing: 0.12em; color: var(--cream); padding-top: 0.8rem; border-top: 1px solid var(--border); } .co-sidebar-ig { font-size: 0.55rem; letter-spacing: 0.2em; color: var(--tan); margin-top: auto; transition: color var(--transition); } .co-sidebar-ig:hover { color: var(--cream); } .co-empty-note { font-size: 0.6rem; letter-spacing: 0.15em; color: var(--tan); } /* ── MAIN ── */ .co-main { padding: 2.5rem 2.8rem; overflow-y: auto; max-height: 92vh; } /* ── STEPS BAR ── */ .co-steps { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 2.2rem; } .co-step { display: flex; align-items: center; gap: 0.55rem; font-size: 0.58rem; letter-spacing: 0.22em; color: var(--tan); transition: color var(--transition); } .co-step span { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1px solid currentColor; font-size: 0.65rem; } .co-step.active { color: var(--cream); } .co-step-divider { flex: 1; height: 1px; background: var(--border); } /* ── PANES ── */ .co-pane.hidden { display: none; } .co-heading { font-family: var(--ff-display); font-size: 2rem; letter-spacing: 0.12em; margin-bottom: 1.8rem; color: var(--cream); } .co-heading.co-centered { text-align: center; } /* ── FORM ── */ .co-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; } .co-field { display: flex; flex-direction: column; gap: 0.45rem; } .co-field label { font-size: 0.55rem; letter-spacing: 0.25em; color: var(--tan); } .co-field input { background: #181818; border: 1px solid rgba(200,184,154,0.25); color: var(--cream); font-family: var(--ff-mono); font-size: 0.78rem; padding: 0.7rem 0.85rem; outline: none; transition: border-color var(--transition); } .co-field input:focus { border-color: var(--cream); } .co-field input.invalid { border-color: var(--red); } .co-full { grid-column: 1 / -1; margin-bottom: 1rem; } .co-narrow { max-width: 90px; } .co-btn-next, .co-btn-pay { margin-top: 1.5rem; } .co-error { font-size: 0.62rem; letter-spacing: 0.1em; color: var(--red); min-height: 1.2em; margin: 0.5rem 0; } /* ── PAYMENT ELEMENT ── */ .co-payment-element { margin: 1.2rem 0; min-height: 120px; } .co-ship-summary { font-size: 0.62rem; letter-spacing: 0.1em; color: var(--tan); margin-bottom: 1.2rem; padding: 0.75rem 1rem; border: 1px solid var(--border); } .co-ship-label { color: var(--cream); margin-right: 0.6rem; } .co-back-btn { background: none; border: none; color: var(--tan); font-family: var(--ff-mono); font-size: 0.58rem; letter-spacing: 0.18em; cursor: pointer; margin-top: 1rem; transition: color var(--transition); } .co-back-btn:hover { color: var(--cream); } /* ── SPINNER ── */ .co-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(8,8,8,0.3); border-top-color: var(--bg); border-radius: 50%; animation: co-spin 0.7s linear infinite; vertical-align: middle; } .co-spinner.hidden { display: none; } @keyframes co-spin { to { transform: rotate(360deg); } } /* ── SUCCESS ── */ .co-success-icon { font-size: 3rem; text-align: center; color: var(--cream); margin-bottom: 1rem; } .co-success-text { font-family: var(--ff-serif); text-align: center; line-height: 1.9; color: rgba(240,235,224,0.7); margin: 0 auto 2.5rem; max-width: 400px; } /* ── CART EMPTY ── */ .cart-empty { font-size: 0.62rem; letter-spacing: 0.15em; color: var(--tan); padding: 0.5rem 0; } /* ── RESPONSIVE MODAL ── */ @media (max-width: 700px) { .co-modal { grid-template-columns: 1fr; max-height: 100vh; height: 100%; } .co-sidebar { display: none; } .co-main { padding: 2rem 1.4rem; max-height: 100vh; } .co-row { grid-template-columns: 1fr; } .co-narrow { max-width: 100%; } }