/* ============ FONTS — self-hosted Market Sans (eBay Evo) ============ */
@font-face{
  font-family:'Market Sans'; font-weight:400; font-style:normal; font-display:swap;
  src:url('/assets/fonts/MarketSans-Regular.otf') format('opentype');
}
@font-face{
  font-family:'Market Sans'; font-weight:700; font-style:normal; font-display:swap;
  src:url('/assets/fonts/MarketSans-Bold.otf') format('opentype');
}

/* ============ TOKENS — Evo palette ============ */
:root{
  --ink:#191919; --bg:#ffffff; --surface:#f7f7f7; --line:#e6e6e6; --muted:#6b6b6b;
  --blue:#0968f6; --red:#f02d2d; --yellow:#eebb04; --green:#92c821; --kiwi:#3cc14e;
  --radius:14px; --radius-sm:10px;
  --shadow:0 1px 2px rgba(25,25,25,.04), 0 8px 30px rgba(25,25,25,.06);
  --font:'Market Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --maxw:640px;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--font); color:var(--ink); background:var(--bg);
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
  padding:max(20px, env(safe-area-inset-top)) 20px 64px;
  display:flex; flex-direction:column; align-items:center;
}
.wrap{width:100%; max-width:var(--maxw)}
.hidden{display:none !important}

/* ============ SIGNATURE — eBay four-colour rule ============ */
.rule4{height:4px; border-radius:4px; background:linear-gradient(90deg,
  var(--red) 0 25%, var(--blue) 0 50%, var(--yellow) 0 75%, var(--green) 0 100%);}

/* ============ CO-BRAND HEADER ============ */
header{width:100%; max-width:var(--maxw); margin:8px 0 28px}
.cobrand{display:flex; align-items:center; justify-content:center; gap:18px; padding:6px 0 18px}
.cobrand img.ebay{height:54px; width:54px; display:block}        /* square mark; wordmark + built-in clear space */
.cobrand img.premier{height:46px; width:auto; display:block}
.cobrand .x{font-size:20px; color:var(--ink); opacity:.45; font-weight:700; user-select:none}

/* ============ TYPE ============ */
h1{font-weight:700; font-size:30px; line-height:1.12; letter-spacing:-.01em; margin:0 0 8px}
h2{font-weight:700; font-size:20px; margin:0 0 4px}
.lead{color:var(--muted); font-size:16px; margin:0 0 24px}
.eyebrow{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); margin:0 0 10px}
a{color:var(--blue)}

/* ============ CARD / FORM PRIMITIVES ============ */
.card{background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:24px}
.field{margin:0 0 16px}
label.lbl{display:block; font-size:13px; font-weight:700; margin:0 0 6px}
input[type=text], input[type=email], input[type=tel], select{
  width:100%; font-family:var(--font); font-size:16px; color:var(--ink);
  background:var(--bg); border:1.5px solid var(--line); border-radius:var(--radius-sm);
  padding:12px 14px; outline:none; transition:border-color .12s, box-shadow .12s;
}
input:focus, select:focus{border-color:var(--blue); box-shadow:0 0 0 3px rgba(9,104,246,.16)}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media(max-width:480px){ .row2{grid-template-columns:1fr} }

/* Address length guard — Royal Mail rejects any line over 35 characters. */
.field.over input[type=text]{border-color:var(--red)}
.field.over input[type=text]:focus{border-color:var(--red); box-shadow:0 0 0 3px rgba(240,45,45,.16)}
label.lbl .count{float:right; font-weight:700; color:var(--red); font-variant-numeric:tabular-nums}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; font-family:var(--font); font-weight:700; font-size:16px;
  border:0; border-radius:var(--radius-sm); padding:14px 18px; cursor:pointer;
  background:var(--blue); color:#fff; transition:filter .12s, transform .02s;
}
.btn:hover{filter:brightness(1.05)} .btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55; cursor:default}
.btn.ghost{background:var(--surface); color:var(--ink); border:1.5px solid var(--line)}
.btn-link{background:none; border:0; color:var(--blue); font-family:var(--font); font-weight:700; font-size:14px; cursor:pointer; padding:8px}

.note{font-size:13px; color:var(--muted); margin:12px 0 0}
.err{display:none; background:#fdecec; color:#a31616; border:1px solid #f6c9c9; border-radius:var(--radius-sm); padding:11px 13px; font-size:14px; margin:0 0 16px}
.err.show{display:block}

/* ============ KIT ITEM CARDS ============ */
.kit-list{display:flex; flex-direction:column; gap:12px; margin:0 0 4px}
.item{
  display:flex; align-items:flex-start; gap:14px; background:var(--surface);
  border:1.5px solid var(--line); border-radius:var(--radius); padding:14px 16px;
  transition:opacity .15s, border-color .15s, background .15s;
}
.item .thumb{width:64px; height:64px; flex:0 0 64px; border-radius:12px; background:#fff;
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  font-weight:700; color:var(--muted); font-size:24px; overflow:hidden}
.item .thumb img{width:100%; height:100%; object-fit:cover}
.item .thumb{transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease}
.item .thumb:has(img){cursor:zoom-in}
.item .thumb:has(img):hover{transform:scale(8); transform-origin:left center; position:relative; z-index:30; border-color:transparent; box-shadow:0 10px 30px rgba(0,0,0,.30)}
.item .body{flex:1; min-width:0}
.item .name{font-weight:700; font-size:16px}
.item .meta{font-size:13px; color:var(--muted); margin-top:2px}
.item .sizewrap{margin-top:10px; max-width:200px}
.item .sizewrap select{padding:9px 12px; font-size:15px}
.item .right{display:flex; flex-direction:column; align-items:flex-end; gap:8px}
.item .desc{margin-top:8px; font-size:13px; line-height:1.45; color:var(--muted); background:#f7f8fa; border:1px solid var(--line); border-radius:10px; padding:8px 11px}
.sizeguide-link{display:inline-block; margin-top:8px; padding:0; background:none; border:none; color:var(--blue); font-weight:600; font-size:13px; cursor:pointer; text-decoration:underline; text-underline-offset:2px}
.modal-overlay{position:fixed; inset:0; background:rgba(17,17,17,.45); display:flex; align-items:center; justify-content:center; padding:20px; z-index:1000}
.modal-dialog{background:#fff; border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.3); max-width:520px; width:100%; padding:22px 22px 18px; position:relative}
.modal-close{position:absolute; top:10px; right:14px; background:none; border:none; font-size:26px; line-height:1; color:var(--muted); cursor:pointer}
.modal-title{margin:0 0 14px; font-size:18px; font-weight:800; padding-right:24px}
.modal-tablewrap{overflow-x:auto}
.sizeguide-table{border-collapse:collapse; width:100%; font-size:14px}
.sizeguide-table th, .sizeguide-table td{border:1px solid var(--line); padding:8px 10px; text-align:center; white-space:nowrap}
.sizeguide-table thead th{background:#f7f8fa; font-weight:700}
.sizeguide-table th[scope=row]{text-align:left; font-weight:600}
.modal-note{margin:12px 0 0; font-size:12px; color:var(--muted)}
.pill{font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:4px 9px; border-radius:999px; background:#eaf0fe; color:var(--blue)}
.pill.oos{background:#fdeaea; color:#c62828}
.item.oos{opacity:.55}
.item.oos .thumb{filter:grayscale(1)}
.pill.inc{background:#eef6e3; color:#4f7a12}

.toggle{position:relative; display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none; font-size:13px; font-weight:700; color:var(--muted)}
.toggle input{position:absolute; opacity:0; width:0; height:0}
.switch{width:42px; height:24px; border-radius:999px; background:#d7d7d7; position:relative; transition:background .15s}
.switch::after{content:''; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; transition:transform .15s; box-shadow:0 1px 2px rgba(0,0,0,.2)}
.toggle input:checked + .switch{background:var(--green)}              /* kept = green */
.toggle input:checked + .switch::after{transform:translateX(18px)}    /* kept = knob right */
.toggle input:focus-visible + .switch{box-shadow:0 0 0 3px rgba(9,104,246,.3)}

/* removed state */
.item.removed{opacity:.6; background:#fff; border-style:dashed}
.item.removed .name{text-decoration:line-through; text-decoration-color:var(--red)}
.item.removed .togglabel-keep{display:none}
.item:not(.removed) .togglabel-removed{display:none}
.togglabel-removed{color:var(--red)}

.section-title{display:flex; align-items:baseline; justify-content:space-between; margin:30px 0 12px}
.section-title .count{font-size:13px; color:var(--muted); font-weight:700}

/* ============ CONFIRMATION ============ */
.confirm-card{border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
.confirm-card .rule4{border-radius:0}
.confirm-inner{padding:30px 26px}
.tick{width:60px; height:60px; border-radius:50%; background:var(--kiwi); display:flex; align-items:center; justify-content:center; margin:0 0 18px}
.tick svg{width:30px; height:30px}
.summary{list-style:none; padding:0; margin:14px 0 0}
.summary li{display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid var(--line); font-size:15px}
.summary li .q{color:var(--muted)}
.ship{background:var(--surface); border-radius:var(--radius-sm); padding:14px 16px; margin:20px 0 0; font-size:14px; line-height:1.5}
.ship .lbl{font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:0 0 4px}

footer{width:100%; max-width:var(--maxw); margin:40px 0 0; text-align:center; color:var(--muted); font-size:12px}
.signout{position:fixed; top:14px; right:16px}
.spin{display:inline-block; width:16px; height:16px; border:2px solid rgba(255,255,255,.5); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; vertical-align:-3px}
@keyframes spin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){ *{transition:none !important; animation:none !important} }

.setup-banner{background:#fff7e0; border:1px solid #f0d98a; color:#6b5300; border-radius:var(--radius-sm); padding:14px 16px; font-size:14px; margin:0 0 20px}
code{background:var(--surface); padding:1px 6px; border-radius:5px; font-size:13px}

/* ============ UTILITIES — replace former inline style attributes ============ */
.lbl .opt{color:var(--muted); font-weight:400}
.note.tight{margin-top:0}
.confirm-actions{margin-top:24px}
.fallback{max-width:640px; margin:60px auto; font-family:sans-serif}