:root {
  --ink: #0b0b0c; --ink-2: #141416; --ink-3: #1d1d21; --line: #2a2a30;
  --bone: #f2ede4; --mute: #9b978f; --red: #c9a063; --red-2: #e2c08a; --gold: #d9b26f; --ok: #3ecf8e; --warn: #f5a524;
  --r: 14px; --display: 'Cinzel', 'Times New Roman', serif; --body: 'Inter', system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--ink); color: var(--bone); font: 15px/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 999; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
.wrap { width: min(1240px, 100% - 32px); margin-inline: auto; }
.display { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; line-height: 1.02; }
.eyebrow { font-size: 12px; letter-spacing: .25em; text-transform: uppercase; color: var(--red-2); font-weight: 700; }
.mute { color: var(--mute); }
.red { color: var(--red-2); }

/* buttons & inputs */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px; border-radius: 999px; font-weight: 700; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; transition: .25s; white-space: nowrap; }
.btn-red { background: var(--red); color: var(--ink); box-shadow: 0 10px 30px -12px var(--red); }
.btn-red:hover { background: var(--red-2); transform: translateY(-2px); }
.btn-ghost { border: 1.5px solid var(--line); }
.btn-ghost:hover { border-color: var(--bone); }
.btn-bone { background: var(--bone); color: var(--ink); }
.btn-bone:hover { background: #fff; }
.btn-sm { padding: 9px 16px; font-size: 12px; }
.btn:disabled { opacity: .4; pointer-events: none; }
.input, select.input, textarea.input { width: 100%; background: var(--ink-2); border: 1.5px solid var(--line); border-radius: 10px; padding: 12px 14px; outline: none; transition: .2s; }
.input:focus { border-color: var(--red); }
label.f { display: grid; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--mute); }
.chip { padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--line); font-size: 13px; font-weight: 600; transition: .2s; }
.chip.on, .chip:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: var(--red); color: var(--ink); }
.badge.dark { background: var(--ink); color: var(--bone); }
.badge.gold { background: var(--gold); color: var(--ink); }

/* drawers, modals, toast */
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.65); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: .3s; z-index: 80; }
.scrim.on { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(440px, 100%); background: var(--ink-2); border-left: 1px solid var(--line); z-index: 90; transform: translateX(100%); transition: .4s cubic-bezier(.2,.8,.2,1); display: flex; flex-direction: column; }
.drawer.on { transform: none; }
.drawer-h { display: flex; justify-content: space-between; align-items: center; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.drawer-b { flex: 1; overflow: auto; padding: 18px 22px; }
.drawer-f { padding: 18px 22px; border-top: 1px solid var(--line); }
.x { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); font-size: 18px; }
.x:hover { background: var(--bone); color: var(--ink); }
.modal { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; z-index: 95; pointer-events: none; }
.modal > .card { pointer-events: auto; background: var(--ink-2); border: 1px solid var(--line); border-radius: 20px; width: min(980px, 100%); max-height: calc(100vh - 32px); overflow: auto; transform: translateY(30px) scale(.97); opacity: 0; transition: .35s; position: relative; }
.modal.on > .card { transform: none; opacity: 1; }
.modal:not(.on) { visibility: hidden; }
.modal .x { position: absolute; top: 14px; right: 14px; z-index: 2; background: var(--ink-2); }
#toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 120px); background: var(--bone); color: var(--ink); padding: 12px 22px; border-radius: 999px; font-weight: 700; z-index: 200; transition: .35s; box-shadow: 0 20px 40px -10px #000; }
#toast.on { transform: translate(-50%, 0); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: middle; }
th { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); font-weight: 700; }
.pill { padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; display: inline-block; }
.s-Pending { background: #f5a52422; color: var(--warn); } .s-Confirmed { background: #6ea8fe22; color: #6ea8fe; }
.s-Shipped { background: #b48cff22; color: #b48cff; } .s-Delivered { background: #3ecf8e22; color: var(--ok); }
.s-Cancelled { background: #ff4d5a22; color: #ff6b76; }
.s-Returned { background: #ffffff14; color: var(--mute); }
.s-Unverified { background: #f5a52422; color: var(--warn); }
:focus-visible { outline: 2px solid var(--red-2); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }