@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* Ported verbatim from the real shoptest.html (PLUGIN CORP. — Sound Capsule shop). */
*{box-sizing:border-box}
body{margin:0;background:#fff;color:#000;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Courier New",monospace;}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 32px}
:root{
  --page-font:"Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --ink:#0b1f3a; --ink2:#2c3b52; --muted:#6b778a; --logo-top:59px;
}

/* NAV */
.top-nav{font-family:var(--page-font);position:sticky;top:0;background:#fff;border-bottom:1px solid #eee;height:84px;display:flex;align-items:center;z-index:10}
/* logo far-LEFT, menu centered, account right. width:100%+margin:0 defeats the base .container{margin:0 auto} that was centering the whole header */
.top-nav .container{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;max-width:none;width:100%;margin:0;padding:0 22px}
.nav-left{justify-self:start;min-width:0}
.nav-left a{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:1px}
.brand-logo{height:var(--logo-top);width:auto;display:block}
.nav-center{justify-self:center;display:flex;gap:26px;justify-content:center;font-weight:400;text-transform:uppercase;font-size:14px;white-space:nowrap}
.nav-right{justify-self:end;display:flex;align-items:center;gap:18px}
/* SIGN IN / ACCOUNT — plain text link (more specific than .nav-right a so it isn't a box) */
.nav-right .auth-link{font-family:var(--page-font);font-weight:800;font-size:13px;letter-spacing:.02em;
  text-transform:uppercase;background:none;border:none;border-bottom:2px solid transparent;
  color:#000;cursor:pointer;padding:0 0 2px}
.nav-right .auth-link:hover{border-bottom-color:#000}
.nav-right [data-auth-slot]{display:inline-flex;align-items:center;gap:14px}
.nav-center a{border-bottom:2px solid transparent;padding-bottom:6px}
.nav-center a.active{border-bottom-color:#000}
.nav-right a{font-weight:900;border:1px solid #000;padding:10px 18px;background:#fff}

/* SECTION HEAD */
.section-wrap{max-width:1040px;margin:0 auto}
.page-top{font-family:var(--page-font);max-width:1040px;margin:64px auto 4px}
.page-top .brand-label{font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.page-top h1{margin:0 0 8px;font-size:52px;font-weight:800;letter-spacing:-1px;text-transform:lowercase;color:var(--ink)}
.page-top p{font-size:15px;line-height:1.65;color:var(--ink2);margin:0;max-width:560px}
.section-head{font-family:var(--page-font);display:flex;justify-content:space-between;align-items:baseline;margin:40px 0 20px}
.section-title{font-size:16px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:var(--ink)}
.section-note{font-size:13px;color:var(--muted)}

/* GRID + CARD (verbatim) */
.lovely-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:52px 44px;margin-bottom:120px}
.card{display:flex;flex-direction:column}
/* keyboards are wide faceplates, so the media matches the faceplate's ratio exactly:
   fills edge-to-edge, white behind, never cropped, no black bars. */
/* faceplate floats clean on white: no box, no border, nothing clipped. */
.media{aspect-ratio:1300/477;background:transparent;display:flex;align-items:center;justify-content:center}
.media img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .5s cubic-bezier(.22,1,.36,1)}
/* zoom pops outward (overflow not hidden) so the faceplate is never cut */
.card:hover .media img{transform:scale(1.06)}
/* coming-soon cards keep the soft rounded box */
.media.soon{border-radius:12px;background:#f3f4f6;color:var(--muted);font-family:var(--page-font);font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:13px}
.name{margin:16px 0 8px;font-size:18px;font-weight:800;text-transform:lowercase;color:var(--ink);font-family:var(--page-font)}
.desc{font-size:14px;color:var(--ink2);font-family:var(--page-font)}
.meta{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:13px}
.price{display:flex;gap:10px;align-items:baseline;justify-content:flex-start;font-family:var(--page-font)}
.price .now{color:#000;font-weight:900;font-size:14px}
.price .was{color:var(--muted);text-decoration:line-through;font-size:13px}
.cta-btn{appearance:none;border:1px solid #000;background:transparent;color:#000;padding:10px 16px;border-radius:0;text-transform:uppercase;font-weight:800;font-size:12px;font-family:var(--page-font);cursor:pointer;letter-spacing:.02em}
.cta-btn:hover{background:#000;color:#fff}
.cta-btn:disabled{opacity:.5;cursor:wait}

/* SUCCESS / REDEEM (same language) */
.panel{font-family:var(--page-font);max-width:560px;margin:64px auto 0}
.panel .brand-label{font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.panel h1{margin:0 0 8px;font-size:40px;font-weight:800;letter-spacing:-.8px;text-transform:lowercase;color:var(--ink)}
.panel .sub{color:var(--ink2);font-size:15px;line-height:1.6;margin:0 0 18px}
.codebox{font-family:ui-monospace,Menlo,monospace;font-size:24px;font-weight:700;letter-spacing:3px;background:#f3f4f6;border:1px solid #e3e6ea;padding:14px;text-align:center;margin:8px 0}
input.code{width:100%;font-family:ui-monospace,Menlo,monospace;font-size:20px;letter-spacing:3px;text-align:center;text-transform:uppercase;padding:14px;border:1px solid #000;background:#fff;color:#000;margin:8px 0 14px}
.dl{display:block;margin:10px 0;border:1px solid #000;background:#000;color:#fff;padding:13px 16px;font-weight:800;text-transform:uppercase;font-size:12px;letter-spacing:.04em}
.dl:hover{opacity:.9}
.dl small{display:block;font-weight:500;text-transform:none;letter-spacing:0;color:#c9d2dd;font-size:11px;margin-top:3px}
.note{font-size:13px;color:var(--ink2);margin-top:14px;font-family:var(--page-font)}
.note a{font-weight:800;border-bottom:1px solid currentColor}
.err{color:#c01030;font-weight:700;font-size:14px;margin-top:10px;font-family:var(--page-font)}

@media (max-width:980px){.lovely-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.lovely-grid{grid-template-columns:1fr;gap:28px}.nav-center{display:none}}