/* School Wear United returns portal: the customer's pages.
   ---------------------------------------------------------------------------
   One navy panel down the left, the page on white beside it. On a computer or
   a tablet the two fill the screen edge to edge; on a phone the panel becomes
   a short navy band across the top and the page follows underneath.

   Nothing here depends on JavaScript. The content security policy blocks
   scripts outright, so every state in this file is reachable with CSS alone:
   the tap-to-choose reason chips are radio buttons, an item's choices appear
   when its box is ticked through :has(), and the total in the panel follows
   the postage choice the same way. Everything written with :has() is written
   so that a browser without it shows more rather than less.

   The staff sign-in pages still use styles.css. This file is only loaded by
   the customer's pages, so nothing in it can reach the staff side.

   The fonts are served from this portal, never from a font host, so loading a
   page does not hand a customer's IP address to a third party.
   ------------------------------------------------------------------------- */

@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("/fonts/outfit.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --navy: #12303f;
  --navy-deep: #0b2130;
  --navy-mid: #1b4358;
  --gold: #f2c14e;
  --gold-soft: #fdf3dc;
  --gold-line: #e6cf5c;

  --ink: #0d2233;
  --ink-2: #23384a;
  --muted: #566a7c;
  --surface: #ffffff;
  --soft: #f2f6fa;
  --soft-2: #e8f0f8;
  --line: #dfe6ec;
  --line-soft: #edf1f5;
  --line-strong: #b7c6d4;
  --control: #c9d5e1;
  --ring: #dce8f5;

  --on-navy: #ffffff;
  --on-navy-2: #c9d9e8;
  --on-navy-3: #a9c0d5;
  --navy-well: rgba(255, 255, 255, .07);
  --navy-line: rgba(255, 255, 255, .12);

  --good: #1f6b4a;
  --good-bg: #e9f3ed;
  --warn: #6b4a00;
  --warn-bg: #fdf1d4;
  --bad: #8a2a1b;
  --bad-bg: #fbe7e4;

  --r-sm: 10px;
  --r: 14px;
  --r-lg: 18px;
  --r-xl: 22px;

  --shadow-sm: 0 1px 2px rgba(13, 42, 58, .06);
  --shadow: 0 1px 2px rgba(13, 42, 58, .05), 0 12px 28px -18px rgba(13, 42, 58, .35);

  --font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Outfit", "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--navy-mid); text-underline-offset: 2px; }
a:hover { color: var(--navy); }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px; }

/* ---------- the shell ------------------------------------------------------ */

.shell { display: flex; flex-direction: column; min-height: 100vh; }

.panel { background: var(--navy); color: var(--on-navy); }
.panel-inner { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 16px; }
.panel a { color: inherit; }

.brand { display: inline-flex; align-items: center; gap: 14px; min-width: 0; text-decoration: none; }
.brand-logo { display: block; width: 160px; max-width: 100%; height: auto; }

.col { display: flex; flex-direction: column; flex: 1 1 0%; min-width: 0; }
.main { flex: 1 0 auto; padding: 26px 16px 32px; }
.content { max-width: 920px; }

/* Side by side from a small tablet up. */
@media (min-width: 900px) {
  .shell { flex-direction: row; align-items: stretch; }
  .panel { flex: 0 0 400px; width: 400px; }
  .panel-inner {
    position: sticky;
    top: 0;
    gap: 32px;
    min-height: 100vh;
    padding: 32px 36px 36px;
  }
  .brand-logo { width: 210px; }
  .main { padding: 48px 56px 40px; }
  body.start .panel { flex-basis: 42%; width: 42%; }
  body.start .main { display: flex; align-items: center; padding: 48px 64px; }
  body.start .content { width: 100%; max-width: 480px; margin: 0 auto; }
}
@media (min-width: 1200px) {
  .main { padding: 56px 72px 48px; }
}

/* ---------- the panel ------------------------------------------------------ */

.eyebrow {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}
.panel-hero { display: flex; flex-direction: column; gap: 12px; }
.panel-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.panel-lede { margin: 0; font-size: 16px; line-height: 1.5; color: var(--on-navy-2); }
.panel-foot { margin: 0; font-size: 14px; line-height: 1.5; color: var(--on-navy-3); }
.panel-foot a { font-weight: 600; }

.facts { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.facts li { display: flex; gap: 14px; align-items: center; }
.facts-ico {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .08);
  display: flex;
  align-items: center;
  justify-content: center;
}
.facts-ico svg { width: 20px; height: 20px; }
.facts strong { display: block; font-size: 15.5px; }
.facts span.facts-text { display: block; font-size: 14px; color: var(--on-navy-3); line-height: 1.4; }

@media (min-width: 900px) {
  .panel-hero { gap: 20px; margin: auto 0; max-width: 520px; }
  .panel-title { font-size: 48px; }
  .panel-lede { font-size: 18px; }
  .facts { gap: 18px; margin-top: 10px; }
  .facts li { align-items: flex-start; }
  .facts-ico { width: 44px; height: 44px; }
  .facts-ico svg { width: 22px; height: 22px; }
  .facts strong { font-size: 16.5px; }
  .facts span.facts-text { font-size: 15px; }
}
@media (min-width: 1200px) { .panel-title { font-size: 54px; } }

/* The steps. A list with the current one named on a computer; on a phone just
   the count and four short bars, because four labels across a 360px screen is
   a wall of broken words. */
.step-count { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--on-navy-2); }
.mini-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.mini-steps li { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .2); }
.mini-steps li.done { background: var(--gold); }
.mini-steps li.now { background: #fff; }
.panel-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

.steps { display: none; list-style: none; margin: 0; padding: 0; }
.steps li { display: flex; gap: 14px; align-items: flex-start; }
.step-rail { display: flex; flex-direction: column; align-items: center; flex: none; }
.step-dot {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, .25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--on-navy-3);
}
.step-tail { width: 2px; height: 26px; background: rgba(255, 255, 255, .18); }
.steps li:last-child .step-tail { display: none; }
.step-text { display: flex; flex-direction: column; gap: 1px; padding-top: 4px; }
.step-label { font-size: 15.5px; font-weight: 600; color: var(--on-navy-3); }
.step-hint { font-size: 13px; color: #8fa9bf; }
.steps li.done .step-dot { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.steps li.done .step-tail { background: var(--gold); }
.steps li.done .step-label { color: var(--on-navy); }
.steps li.now .step-dot { background: #fff; border-color: #fff; color: var(--navy); }
.steps li.now .step-label { color: var(--on-navy); font-weight: 800; }

@media (min-width: 900px) {
  .step-count, .mini-steps { display: none; }
  .steps { display: flex; flex-direction: column; }
}

/* The order, and how long is left. */
.panel-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--r-lg);
  background: var(--navy-well);
  border: 1px solid var(--navy-line);
}
.panel-card-k {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}
.panel-card-k .eyebrow { color: var(--on-navy-3); }
.panel-card-k strong { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.panel-card-sub { margin: 0; font-size: 14px; color: var(--on-navy-2); }
.days { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.days strong { font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.days span { font-size: 14px; color: var(--on-navy-2); }
.days-bar { display: block; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.days-fill { display: block; height: 100%; border-radius: 999px; background: var(--gold); width: 100%; }
.w-0 { width: 0; } .w-1 { width: 7.14%; } .w-2 { width: 14.3%; } .w-3 { width: 21.4%; }
.w-4 { width: 28.6%; } .w-5 { width: 35.7%; } .w-6 { width: 42.9%; } .w-7 { width: 50%; }
.w-8 { width: 57.1%; } .w-9 { width: 64.3%; } .w-10 { width: 71.4%; } .w-11 { width: 78.6%; }
.w-12 { width: 85.7%; } .w-13 { width: 92.9%; } .w-14 { width: 100%; }
.days-late .days strong { color: var(--gold); }
.panel-note { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--on-navy-3); }

/* On a phone the order card is one row rather than a block. */
@media (max-width: 899px) {
  .panel-card { flex-direction: row; align-items: center; justify-content: space-between; padding: 12px 14px; }
  .panel-card-k { flex-direction: column; align-items: flex-start; gap: 1px; }
  .panel-card-k strong { font-size: 15px; }
  .days { flex-direction: column; align-items: flex-end; gap: 1px; text-align: right; }
  .days strong { font-size: 20px; }
  .days span { font-size: 13px; }
  .days-bar, .panel-note, .panel-card-sub { display: none; }
}

/* What is coming back, on the last step. */
.panel-summary { display: flex; flex-direction: column; gap: 14px; }
.panel-summary-h { margin: 0; font-size: 15px; color: var(--on-navy-2); }
.panel-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.panel-lines li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0;
  border-top: 1px solid var(--navy-line);
}
.panel-lines li:first-child { border-top: 0; padding-top: 0; }
.panel-line-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.panel-line-text strong { font-size: 15px; }
.panel-line-text span { font-size: 13.5px; color: var(--on-navy-3); }
.panel-line-qty { font-size: 14px; font-weight: 700; color: var(--on-navy-2); white-space: nowrap; }
.panel-totals { margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.panel-totals div { display: flex; justify-content: space-between; gap: 12px; }
.panel-totals dt { color: var(--on-navy-2); }
.panel-totals dd { margin: 0; font-variant-numeric: tabular-nums; }
.panel-totals .grand { padding-top: 12px; border-top: 1px solid var(--navy-line); align-items: baseline; }
.panel-totals .grand dt { font-weight: 700; color: var(--on-navy); }
.panel-totals .grand dd { font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
.panel-totals .total-label-row, .total-after { display: none; }
/* The figure follows the postage choice. Written as a swap, so a browser
   without :has() shows the amount before any label, which is what the label
   card itself explains in words. */
body:has(input[name="postageChoice"][value="label"]:checked) .total-label-row { display: flex; }
body:has(input[name="postageChoice"][value="label"]:checked) .total-after { display: inline; }
body:has(input[name="postageChoice"][value="label"]:checked) .total-before { display: none; }
.back-credit { display: none; }
body:has(input[name="refundChoice"][value="credit"]:checked) .back-credit { display: inline; }
body:has(input[name="refundChoice"][value="credit"]:checked) .back-card { display: none; }

@media (max-width: 899px) {
  .panel-summary { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--navy-well); }
  .panel-summary-h, .panel-lines li + li, .panel-line-qty, .panel-totals div:not(.grand) { display: none; }
  .panel-lines { flex: 1; min-width: 0; }
  .panel-lines li { padding: 0; }
  .panel-line-text strong { font-size: 14.5px; }
  .panel-totals .grand { flex-direction: column; align-items: flex-end; gap: 0; padding: 0; border: 0; text-align: right; }
  .panel-totals .grand dt { font-size: 12.5px; font-weight: 400; color: var(--on-navy-2); order: 2; }
  .panel-totals .grand dd { font-size: 20px; }
  .panel-address { display: none; }
}

/* The return number, once there is one. */
.panel-number { display: flex; flex-direction: column; gap: 6px; }
.panel-number .return-number {
  font-size: 22px;
  background: rgba(255, 255, 255, .08);
  border-color: var(--gold);
  color: #fff;
}
@media (max-width: 899px) {
  .panel-number { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
  .panel-number .return-number { font-size: 17px; padding: 8px 12px; }
  .panel-number .eyebrow { display: none; }
}

/* Where to post it, on the panel. */
.panel-address { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: var(--r-lg); background: var(--navy-well); }
.panel-address strong { font-size: 15px; }
.panel-address address { font-style: normal; font-size: 14.5px; line-height: 1.6; color: var(--on-navy-2); }
.panel-address .panel-note { margin-top: 2px; }
.panel-contact { margin: auto 0 0; font-size: 14px; line-height: 1.5; color: var(--on-navy-3); }
.panel-contact a { font-weight: 600; color: #fff; }
@media (max-width: 899px) { .panel-contact, .panel-address { display: none; } }

/* ---------- type ----------------------------------------------------------- */

h1, h2, h3 { font-family: var(--font-display); color: var(--ink); text-wrap: balance; }
h1 { font-size: 28px; line-height: 1.12; font-weight: 700; letter-spacing: -.02em; margin: 0 0 8px; }
h2 { font-size: 19px; line-height: 1.25; font-weight: 700; margin: 0 0 10px; }
h3 { font-size: 17px; font-weight: 700; margin: 20px 0 8px; }
p { margin: 0 0 14px; }
p.lede { font-size: 16px; line-height: 1.5; color: var(--muted); margin: 0 0 24px; text-wrap: pretty; }
.muted { color: var(--muted); font-size: 14.5px; }
.kicker { margin: 0 0 6px; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

@media (min-width: 900px) {
  h1 { font-size: 40px; }
  h2 { font-size: 20px; }
  p.lede { font-size: 17px; }
}

section + section, .section { margin-top: 32px; }
.section h2 { margin-bottom: 12px; }

/* ---------- cards and notices --------------------------------------------- */

.card {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-xl);
  padding: 20px 18px;
  margin: 0 0 16px;
}
@media (min-width: 900px) { .card { padding: 24px; } }

.notice {
  background: var(--soft);
  padding: 16px 18px;
  margin: 0 0 16px;
  border-radius: var(--r-lg);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.notice > svg { flex: none; width: 22px; height: 22px; margin-top: 2px; }
.notice-body { min-width: 0; flex: 1; }
.notice p:last-child { margin-bottom: 0; }
.notice h2, .notice h3 { margin-top: 0; font-size: 17px; }
.notice-warn { background: var(--warn-bg); }
.notice-bad { background: var(--bad-bg); }
.notice-good { background: var(--good-bg); }
.notice-warn h2, .notice-warn h3 { color: var(--warn); }
.notice-bad h1, .notice-bad h2 { color: var(--bad); }
.notice-good h1, .notice-good h2 { color: var(--good); }

.error-summary {
  border: 1.5px solid var(--bad);
  background: var(--bad-bg);
  padding: 16px 18px;
  border-radius: var(--r-lg);
  margin: 0 0 20px;
}
.error-summary h2 { margin: 0 0 6px; color: var(--bad); font-size: 17px; }
.error-summary ul { margin: 0; padding-left: 20px; }
.error-summary li { margin-bottom: 4px; }
.error-summary p:last-child { margin-bottom: 0; }

/* ---------- forms ---------------------------------------------------------- */

label { display: block; font-weight: 700; font-size: 15px; color: var(--ink); margin: 0 0 6px; }
.hint { font-weight: 400; color: var(--muted); font-size: 14px; line-height: 1.45; margin: 0 0 8px; }
.inline-hint { display: inline; font-weight: 400; }

input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
select,
textarea {
  width: 100%;
  font: inherit;
  font-size: 16px; /* below 16px iOS zooms the page on focus */
  font-weight: 500;
  min-height: 54px;
  padding: 12px 16px;
  border: 1.5px solid var(--control);
  border-radius: var(--r);
  background: #fff;
  color: var(--ink);
  transition: border-color .12s ease, box-shadow .12s ease;
}
input:hover, select:hover, textarea:hover { border-color: var(--line-strong); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 4px var(--ring);
}
input::placeholder, textarea::placeholder { color: #9aa8b6; }
textarea { min-height: 120px; resize: vertical; line-height: 1.55; }

select {
  appearance: none;
  padding-right: 42px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--navy) 50%),
    linear-gradient(135deg, var(--navy) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.field { margin: 0 0 22px; }
.field:last-of-type { margin-bottom: 0; }
.field .hint:last-child { margin: 6px 0 0; }

/* ---------- the order number boxes ---------------------------------------- */

/*
 * One real text field drawn as five boxes, one per digit. The boxes are
 * decoration behind a transparent input; the input's letter-spacing is set so
 * each digit lands in the middle of its box. 1ch is the width of a digit in
 * the font in use, and the digits are tabular so they are all the same width,
 * which is what keeps the spacing right whatever font the browser ends up
 * using. The input is one box wider than the five that show, so the cursor
 * has somewhere to sit after the last digit; the wrapper clips it off.
 */
.code-wrap {
  --cell: 54px;
  --gap: 10px;
  --cell-h: 62px;
  position: relative;
  width: calc(5 * var(--cell) + 4 * var(--gap));
  max-width: 100%;
  height: var(--cell-h);
  overflow: hidden;
  border-radius: var(--r);
}
.code-cells { position: absolute; inset: 0; display: flex; gap: var(--gap); pointer-events: none; }
.code-cells i {
  flex: none;
  width: var(--cell);
  height: var(--cell-h);
  border: 1.5px solid var(--control);
  border-radius: var(--r);
  background: #fff;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.code-wrap:hover .code-cells i { border-color: var(--line-strong); }
.code-wrap:focus-within .code-cells i { border-color: var(--navy); box-shadow: 0 0 0 4px var(--ring); }
/* Filled boxes keep a navy edge once the cursor has moved on. */
.code-wrap[data-filled="1"] .code-cells i:nth-child(-n+1),
.code-wrap[data-filled="2"] .code-cells i:nth-child(-n+2),
.code-wrap[data-filled="3"] .code-cells i:nth-child(-n+3),
.code-wrap[data-filled="4"] .code-cells i:nth-child(-n+4),
.code-wrap[data-filled="5"] .code-cells i:nth-child(-n+5) { border-color: var(--navy); }

input[type="text"].code {
  position: relative;
  width: calc(6 * (var(--cell) + var(--gap)));
  min-height: var(--cell-h);
  height: var(--cell-h);
  margin: 0;
  padding: 0 0 0 calc((var(--cell) - 1ch) / 2);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: "Outfit", "Manrope", system-ui, sans-serif;
  font-size: 28px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: calc(var(--cell) + var(--gap) - 1ch);
  line-height: var(--cell-h);
  color: var(--ink);
  caret-color: var(--navy);
}
input[type="text"].code:hover,
input[type="text"].code:focus { border: 0; box-shadow: none; outline: none; }
input.code::selection { background: var(--ring); }

@media (max-width: 379px) {
  .code-wrap { --cell: 46px; --gap: 8px; --cell-h: 56px; }
  input[type="text"].code { font-size: 24px; }
}

input[type="file"] {
  font-size: 15px;
  padding: 14px;
  width: 100%;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r);
  background: var(--soft);
}

/* ---------- buttons -------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font: inherit;
  font-weight: 700;
  font-size: 16px;
  padding: 0 28px;
  min-height: 54px;
  border: 1.5px solid var(--navy);
  border-radius: var(--r);
  background: var(--navy);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background-color .12s ease, border-color .12s ease, transform .06s ease;
}
.btn:hover { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; }
.btn-block { display: flex; width: 100%; }
.btn-secondary { background: var(--surface); border-color: var(--control); color: var(--ink); }
.btn-secondary:hover { background: var(--soft); border-color: var(--line-strong); color: var(--ink); }
.btn-plain {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  font-weight: 600;
  font-size: 15px;
  color: var(--muted);
  text-decoration: none;
}
.btn-plain:hover { color: var(--navy); text-decoration: underline; }

.actions { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
@media (min-width: 560px) {
  .actions { flex-direction: row-reverse; justify-content: flex-end; align-items: center; }
  .actions .btn { width: auto; }
}

/* The bar at the bottom of a long form. Sticks to the bottom of a phone
   screen; on a computer it is a bar at the end of the page. */
.actions-sticky {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin: 20px -16px 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.actions-sticky .btn { flex: 1 1 auto; white-space: nowrap; padding-left: 20px; padding-right: 20px; }
.actions-sticky .btn-plain { flex: 0 0 auto; }
.actions-sticky .actions-note { flex: 1 1 100%; order: 3; margin: 0; font-size: 14px; color: var(--muted); }
@media (min-width: 900px) {
  .actions-sticky {
    margin: 28px -56px 0;
    padding: 16px 56px;
    flex-direction: row;
    justify-content: flex-start;
  }
  .actions-sticky .btn { flex: 0 0 auto; order: 2; }
  .actions-sticky .btn-plain { order: 3; }
  .actions-sticky .actions-note { flex: 1 1 auto; order: 1; }
}
@media (min-width: 1200px) { .actions-sticky { margin-left: -72px; margin-right: -72px; padding-left: 72px; padding-right: 72px; } }

/* Room for the bar to sit over, so a tapped control lands above it. */
@media (max-width: 899px) { html { scroll-padding-bottom: 120px; } }

/* ---------- choosing items ------------------------------------------------- */

.items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }

.item {
  border: 1.5px solid var(--line);
  border-radius: var(--r-xl);
  background: #fff;
  transition: border-color .12s ease, background-color .12s ease;
}
.item:hover { border-color: var(--line-strong); }
.item.blocked { background: #fafbfc; }
.item:has(.item-tick:checked) { border-color: var(--navy); background: #f4f8fc; }

.item-row { display: flex; gap: 14px; align-items: center; padding: 14px; }
@media (min-width: 900px) { .item-row { gap: 20px; padding: 18px 20px; } }

.item-tick {
  flex: none;
  width: 26px;
  height: 26px;
  margin: 0;
  accent-color: var(--navy);
  cursor: pointer;
}
.item-pic {
  flex: none;
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background: var(--soft-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.item-pic img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.item-pic svg { width: 34px; height: 34px; }
.item.blocked .item-pic svg { opacity: .5; }
@media (min-width: 900px) { .item-pic { width: 84px; height: 84px; border-radius: 16px; } .item-pic svg { width: 46px; height: 46px; } }

.item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.item-name { font-weight: 700; font-size: 15.5px; line-height: 1.3; margin: 0; cursor: pointer; color: var(--ink); }
@media (min-width: 900px) { .item-name { font-size: 17.5px; } }

/* The size, colour and so on, as one quiet line. The dt/dd pairs stay so the
   markup reads properly aloud; only the layout runs them together. */
.item-spec { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 0; font-size: 13.5px; color: var(--muted); }
.item-spec div { display: flex; gap: 5px; }
.item-spec dt { font-weight: 600; }
.item-spec dd { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }
@media (min-width: 900px) { .item-spec { font-size: 14.5px; } }
.item-price { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 15px; }
@media (max-width: 899px) { .item-price { display: none; } }
.item-price-inline { font-weight: 700; color: var(--ink); }
@media (min-width: 900px) { .item-spec .item-price-inline { display: none; } }

.tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 999px;
  margin: 0 0 2px;
}
.tag-blocked { background: var(--bad-bg); color: var(--bad); }
.tag-check, .tag-review { background: var(--warn-bg); color: var(--warn); }
.item.blocked .tag-review, .item .tag-wrong { background: var(--warn-bg); color: var(--warn); }

.item-why { margin: 0; padding: 0 14px 16px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
@media (min-width: 900px) { .item-why { padding: 0 20px 20px 124px; } }

/* The choices for an item, shown once its box is ticked. Hidden rather than
   shown, so a browser without :has() shows them for every item. */
.item-detail { padding: 0 14px 16px; display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 900px) { .item-detail { padding: 2px 20px 22px 124px; } }
.item:not(:has(.item-tick:checked)) .item-detail { display: none; }

.qty { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.qty label { margin: 0; }
.qty select { width: auto; min-width: 110px; }
.qty .hint { margin: 0; flex: 1 1 100%; }
.qty-one { display: none; }
.qty-one-value { display: none; }

.reasons { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.reasons legend { padding: 0; margin: 0 0 10px; font-weight: 700; font-size: 14.5px; color: var(--ink); }
.chips-k { margin: 4px 0 0; font-size: 13.5px; font-weight: 700; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  margin: 0;
  border-radius: 999px;
  border: 1.5px solid var(--control);
  background: #fff;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.chip:hover { border-color: var(--navy); }
.chip-input:checked + .chip { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip-input:focus-visible + .chip { outline: 3px solid var(--gold); outline-offset: 2px; }
.reasons-note { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); display: flex; gap: 8px; align-items: center; }
.reasons-note svg { flex: none; width: 18px; height: 18px; }

/* How many are ticked, counted by the stylesheet. */
.items { counter-reset: picked; }
.item:has(.item-tick:checked) { counter-increment: picked; }
.picked::after { content: counter(picked); }

/* ---------- choices on the last step --------------------------------------- */

.choice-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.choice-group legend { padding: 0; margin: 0 0 12px; }
.choice-group legend h2 { margin: 0; }
.tiles { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tiles .field { margin: 0; }

label.choice {
  font-weight: 400;
  color: var(--ink);
  display: flex;
  gap: 12px;
  align-items: flex-start;
  height: 100%;
  padding: 16px 18px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  margin: 0;
  background: #fff;
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}
label.choice:hover { border-color: var(--line-strong); }
label.choice:has(input:checked) { border-color: var(--navy); background: #f1f6fc; box-shadow: inset 0 0 0 1px var(--navy); }
label.choice input[type="radio"], label.choice input[type="checkbox"] {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  flex: 0 0 auto;
  accent-color: var(--navy);
}
label.choice strong { font-weight: 700; color: var(--ink); }
.choice-body { flex: 1 1 auto; min-width: 0; }
.choice-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.choice-amount { font-weight: 800; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.choice-help { display: block; margin-top: 2px; color: var(--muted); font-size: 14px; font-weight: 400; line-height: 1.45; }
.choice-note { margin: 10px 0 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.choice-fixed {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 14px 18px;
  border: 1.5px solid var(--navy);
  border-radius: var(--r-lg);
  background: #f1f6fc;
}
.choice-fixed strong { color: var(--ink); }

/* A tick that only appears once the label has been chosen. Hidden rather
   than shown: the server refuses a label chosen without the tick, so a
   browser without :has() must show the box to everybody rather than to
   nobody. Nothing in it is `required`, for the same reason. */
.label-confirm { margin-top: 14px; }
.section:has(input[value="self"]:checked) .label-confirm { display: none; }

/* The condition wording. The point that matters is visible; how we decide a
   deduction folds away for anyone who wants it. */
.condition { padding: 20px 18px; border-radius: var(--r-xl); background: var(--soft); }
.condition p { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.condition details { margin: 0 0 14px; }
.condition summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--navy);
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
}
.condition summary::-webkit-details-marker { display: none; }
.condition summary svg { width: 16px; height: 16px; transition: transform .2s ease; }
.condition details[open] summary svg { transform: rotate(90deg); }
.condition details p { margin: 6px 0 0 24px; font-size: 14.5px; }
.condition label.choice { background: #fff; }

/* ---------- the summary on the review step (phone only) -------------------- */

.summary-list { list-style: none; margin: 0; padding: 0; }
.summary-row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.summary-row:last-child { border-bottom: none; }
.summary-row dt { color: var(--muted); font-size: 15px; margin: 0; }
.summary-row dd { margin: 0; text-align: right; font-weight: 700; color: var(--ink); }

/* ---------- after confirming ----------------------------------------------- */

.return-number {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--navy);
  background: var(--gold-soft);
  border: 2px dashed var(--gold-line);
  border-radius: var(--r-sm);
  padding: 10px 16px;
  white-space: nowrap;
}

.address-box {
  border: 2px solid var(--navy);
  border-radius: var(--r);
  padding: 16px 18px;
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.75;
  background: #fff;
  font-style: normal;
}

.write-this { border: 2px dashed var(--navy); border-radius: var(--r-lg); padding: 18px 20px; background: #fff; margin: 0 0 16px; }
.write-this ol { margin: 0; padding-left: 22px; }
.write-this li { margin-bottom: 10px; }
.write-this li:last-child { margin-bottom: 0; }
.write-this .muted { margin-top: 14px; margin-bottom: 0; }

.next-actions { display: flex; flex-direction: column; gap: 10px; margin: 0 0 14px; }
@media (min-width: 640px) { .next-actions { flex-direction: row; } .next-actions .btn { flex: 1; } }

.progress-track { list-style: none; margin: 12px 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.progress-track li {
  flex: 1 1 120px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-size: 14.5px;
  border-left: 4px solid var(--line);
  background: var(--soft);
  color: var(--muted);
}
.progress-track li.done { border-left-color: var(--gold); background: #fff; border: 1.5px solid var(--line); border-left: 4px solid var(--gold); color: var(--ink); font-weight: 600; }
.progress-now {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.plain-list { list-style: none; margin: 8px 0 0; padding: 0; }
.plain-list li { padding: 10px 0; border-top: 1px solid var(--line); }
.plain-list li:first-child { border-top: 0; }
.plain-list .item-spec { margin-top: 4px; }

.photo-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.photo-list img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--line); display: block; }

.quote { margin: 0 0 12px; padding: 10px 14px; border-left: 3px solid var(--gold); background: var(--gold-soft); border-radius: 0 6px 6px 0; }
.quote-label { margin: 0 0 3px; font-size: 11px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--muted); }
.quote-words { margin: 0; color: var(--ink); }

/* ---------- the printable returns note ------------------------------------- */

.note-sheet { background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 28px 30px 24px; }
.note-head { border-bottom: 2px solid var(--navy); padding-bottom: 10px; margin-bottom: 20px; }
.note-brand { margin: 0; font-weight: 700; letter-spacing: 1px; color: var(--navy); font-size: 17px; }
.note-kind { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.note-number { border: 2px solid var(--navy); border-radius: 6px; padding: 12px 16px; margin: 0 0 22px; }
.note-number .return-number { white-space: normal; word-break: break-all; }
.note-label { margin: 0; font-size: 11px; letter-spacing: 1.2px; color: var(--muted); }
.note-sheet h3 { margin: 22px 0 8px; font-size: 15px; color: var(--navy); }
.note-table { width: 100%; border-collapse: collapse; margin: 0 0 6px; }
.note-table th { text-align: left; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line); padding: 0 8px 6px 0; }
.note-table td { padding: 8px 8px 8px 0; vertical-align: top; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.note-table .col-qty { width: 42px; }
.note-table .col-size { width: 70px; }
.note-sku { font-size: 12px; color: var(--muted); }
.note-foot { margin: 22px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }

/* ---------- footer --------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 22px 16px 36px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
}
.site-footer p { max-width: 64ch; margin: 0 0 8px; }
.site-footer p:last-child { margin-bottom: 0; }
.site-footer a { color: var(--navy-mid); }
.footer-legal { font-size: 13px; }
@media (min-width: 900px) { .site-footer { padding: 24px 56px 40px; } }
@media (min-width: 1200px) { .site-footer { padding-left: 72px; padding-right: 72px; } }

/* ---------- print ---------------------------------------------------------- */

@media print {
  .panel, .site-footer, .actions, .actions-sticky, .no-print { display: none !important; }
  .shell, .col, .main { display: block; padding: 0; }
  body { background: #fff; font-size: 12pt; color: #000; }
  .card, .item, .notice { border: none; box-shadow: none; padding: 0; background: #fff; }
  .note-sheet { border: none; border-radius: 0; padding: 0; }
  .note-table td, .note-table th { border-bottom: 1pt solid #ccc; }
  .address-box, .write-this, .return-number { border: 1pt solid #000; background: #fff; color: #000; }
  a { color: #000; text-decoration: none; }
}

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

/* ---------- small utilities ------------------------------------------------
   The content security policy blocks inline style attributes, so the handful
   of one-off spacing tweaks the templates need live here as classes. */

.m-0 { margin: 0; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.centre { text-align: center; }
.phone-only { }
@media (min-width: 900px) { .phone-only { display: none !important; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }