/* Returns pages, on top of the shared style.css (copied from the affiliate app). */
.section-sm{margin-top:36px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.rules{padding-left:18px;margin:0 0 20px}
fieldset.card{margin:0;min-width:0}
.item-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px}
.item-head img{width:72px;height:72px;object-fit:cover;background:#F4F3F1}
.item.off{opacity:.6}
.opts{margin-top:14px}
.summary .k{font-size:13px;color:var(--muted);margin:0 0 4px}
.summary .v{font-size:28px;margin:0}
.pre{white-space:pre-wrap}
.media{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.media img,.media video{width:100%;height:180px;object-fit:cover;background:#F4F3F1;display:block}
.pill.submitted,.pill.received,.pill.exception,.pill.in_transit{background:#FFF3DC;color:var(--warn)}
.pill.completed,.pill.closed{background:#E5F1E8;color:var(--ok)}
.cf-turnstile{min-height:65px}
@media (max-width:640px){.g2{grid-template-columns:1fr}}
/* bought on autoflex.us: you're covered (2-year shaft warranty) */
.covered { border-left: 4px solid #1e7a46; }
.covered .lead strong, .covered-line strong { color: #1e7a46; }
/* return form in two steps (app.js sets data-step): 1. pick the items, 2. reasons + photos for the picked ones */
#return-form[data-step="1"] .opts, #return-form[data-step="1"] .step2-only { display: none !important; }
#return-form[data-step="2"] .item:not(.picked), #return-form[data-step="2"] .step1-only, #return-form[data-step="2"] .item .check { display: none !important; }
#return-form:not([data-step]) .step1-only, #return-form:not([data-step]) .step2-only.step-head { display: none; }   /* no JavaScript: one form */
.step-head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.step-title { margin: 0; }
/* the "Return or exchange this item" tick box sits in the card's top right corner */
#return-form .item { position: relative; }
#return-form .item > .check { position: absolute; top: 14px; right: 14px; margin: 0; display: flex; gap: 6px; align-items: center; font-weight: 600; }
#return-form .item .item-head { padding-right: 230px; }
@media (max-width: 560px) {
  #return-form .item > .check { position: static; margin-top: 8px; }
  #return-form .item .item-head { padding-right: 0; }
}
/* step 1 stays simple: the items only; their details (build specs, price paid) show in step 2 */
#return-form[data-step="1"] .item-more { display: none; }
/* start page welcome: a chat bubble (rounded border with a little tail at the bottom left) */
.welcome-bubble { position: relative; margin: 8px 0 34px; padding: 22px 26px 20px; background: #fff; border: 2px solid var(--pink); border-radius: 22px; }
.welcome-bubble h1 { margin-top: 0; }
.welcome-bubble .lead { margin-bottom: 0; }
.welcome-bubble::before, .welcome-bubble::after { content: ""; position: absolute; left: 34px; width: 0; height: 0; border-style: solid; }
.welcome-bubble::before { bottom: -20px; border-width: 20px 18px 0 0; border-color: var(--pink) transparent transparent transparent; }
.welcome-bubble::after { bottom: -15px; left: 36.5px; border-width: 15px 13.5px 0 0; border-color: #fff transparent transparent transparent; }
.start-question { margin: 0 0 14px; }
/* start page: the two choices side by side (stacked on a phone); the whole card is the link */
.start-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.start-choice { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; text-decoration: none; color: inherit; }
.start-choice h2 { margin: 0; }
.start-choice .btn { margin-top: auto; }
.start-choice:hover { border-color: var(--pink); }
@media (max-width: 600px) { .start-choices { grid-template-columns: 1fr; } }
/* the question: a second, smaller chat bubble, like the next message in a conversation */
.welcome-bubble.ask { display: inline-block; padding: 14px 22px; margin: 0 0 30px; }
.welcome-bubble.ask .start-question { margin: 0; }
.welcome-bubble { margin-bottom: 26px; }
/* the welcome line and the question: the same size, both bold */
.welcome-bubble h1, .welcome-bubble .start-question { font-size: clamp(22px, 3vw, 28px); font-weight: 700; line-height: 1.25; letter-spacing: 0; }
/* start page: a little wider than the other pages, so the two choice cards are roomy */
.start-wrap { max-width: 760px; margin: 0 auto; }
.start-choices { gap: 20px; }
.start-choice { padding: 32px 28px; min-height: 200px; gap: 14px; }
.start-choice h2 { font-size: 26px; }
.start-choice .btn { width: 100%; justify-content: center; text-align: center; white-space: nowrap; }   /* one line */
/* thinner chat-bubble border (1px), tail to match */
.welcome-bubble { border-width: 1px; }
.welcome-bubble::after { bottom: -18.5px; left: 35.1px; border-width: 18.5px 16.6px 0 0; }
/* bought here: the three choices in a row, then the terms and the two ways to find the order side by side */
.want-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 24px; }
.want-buttons .btn { text-align: center; white-space: nowrap; padding: 16px 12px; font-size: 17px; }
.find-choices { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: stretch; }   /* same height; "or" between */
/* "or" between the two cards: a line through it, up and down on a wide screen, across on a phone */
.find-or { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--pink); font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: .08em; }
.find-or::before, .find-or::after { content: ""; flex: 1; width: 2px; background: var(--pink); }
.find-choices > .card { margin: 0; }
.find-choices h2 { margin-top: 0; }
.welcome-bubble ul.terms { margin: 10px 0 0; padding-left: 20px; line-height: 1.6; }
.back-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
@media (max-width: 700px) { .want-buttons, .find-choices { grid-template-columns: 1fr; }
  .find-or { flex-direction: row; } .find-or::before, .find-or::after { width: auto; height: 2px; } }
/* the two boxes: tighter spacing, buttons on the same row at the bottom */
.find-choices > .card { display: flex; flex-direction: column; gap: 12px; padding: 24px; }
.find-choices > .card > * { margin: 0; }
.find-choices > .card h2 { font-size: 24px; line-height: 1.2; }
.find-choices > .card label { margin-bottom: 4px; }
.find-choices > .card .actions { margin-top: auto; padding-top: 6px; }
.find-choices > .card .actions .btn { min-width: 210px; text-align: center; justify-content: center; }   /* Sign in and Find my order: the same size */
@media (min-width: 701px) { .find-choices > .card > .actions + p { min-height: 3.2em; } }   /* the note under each button: 2 lines, so both buttons line up */
/* the bot check only shows when Cloudflare needs the customer to click */
.find-choices .cf-turnstile { min-height: 0; }
/* pop-up over the page (order not found): works without JavaScript; its button reloads the find page */
.pop-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(20, 20, 22, .45); }
/* a plain white pop-up; the wording sits in a chat bubble inside it */
.pop { max-width: 520px; width: 100%; margin: 0; padding: 28px; background: #fff; border: 1px solid var(--line, #ddd); box-shadow: 0 12px 40px rgba(0, 0, 0, .2); }
.pop .welcome-bubble { margin: 0 0 30px; }
.pop .pop-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }
/* a page with a note pinned in the next column (warranty claim: "Bought on autoflex.us?"); on a phone the note sits on top */
.side-layout { display: grid; grid-template-columns: minmax(0, 640px) 260px; gap: 32px; justify-content: center; align-items: start; }
.side-note { position: sticky; top: 24px; }
.side-bubble h2 { font-weight: 600; }
/* the small notes under a summary line (trade-in estimate): plain grey, never the total's bold pink (Jane) */
.ti-sum .sum-note, .ti-sum tr.total .sum-note { font-weight: 400; color: var(--muted); }   /* "Bought on autoflex.us?" in bold (Jane) */
.side-bubble { padding: 20px 22px; margin: 0; }
.side-bubble h2 { font-size: 20px; margin: 0 0 6px; }
.side-bubble p { margin: 0; }
.side-bubble .actions { margin-top: 14px; }
.side-bubble .btn { width: 100%; text-align: center; }
@media (max-width: 900px) {
  .side-layout { grid-template-columns: minmax(0, 1fr); }
  .side-note { position: static; order: -1; }
  .side-bubble { margin-bottom: 26px; }
}
/* three choices, one per row */
.choice-list { display: grid; gap: 12px; max-width: 560px; margin-bottom: 24px; }
.choice-list .btn { text-align: left; padding: 16px 20px; font-size: 16px; }
.fee { color: var(--pink); }   /* the $50 service fee, in pink */
/* warranty details: a second chat bubble with the table */
.terms-bubble { padding: 20px 24px; }
.terms-bubble .small { margin: 10px 0 0; }
.warranty-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.warranty-table th { text-align: left; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #666); padding: 0 10px 8px 0; border-bottom: 1px solid var(--line, #e3e3e3); }
.warranty-table td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--line, #eee); vertical-align: top; }
.warranty-table tr.mine td { background: #fdf0f6; }
.warranty-table tr.mine td:first-child { box-shadow: inset 3px 0 0 var(--pink); padding-left: 10px; }
/* the customer's answer: a grey bubble on the right, like their side of a chat */
.reply-bubble { width: fit-content; max-width: 80%; margin: 0 0 26px auto; padding: 12px 20px; border-radius: 22px 22px 6px 22px; background: #2b2a2d; color: #fff; font-weight: 600; }
.welcome-bubble.ask.soft .start-question { color: var(--pink); font: 400 clamp(17px, 1.6vw, 20px)/1.5 var(--f); letter-spacing: 0; }   /* the same size as the bubble text above */
.welcome-bubble.ask.soft { padding: 10px 20px; }   /* a softer question: pink, not bold */
/* every column but the first centred; the fee amounts in pink */
.warranty-table th:not(:first-child), .warranty-table td:not(:first-child) { text-align: center; padding-left: 10px; }
.warranty-table td.amt { color: var(--pink); }
/* phone: the 4-column table fits the screen */
@media (max-width: 560px) {
  .terms-bubble { padding: 16px 14px; }
  .warranty-table { font-size: 13px; }
  .warranty-table th { font-size: 10.5px; letter-spacing: 0; padding: 0 4px 6px 0; }
  .warranty-table td { padding: 8px 4px 8px 0; }
  .warranty-table th:not(:first-child), .warranty-table td:not(:first-child) { padding-left: 4px; }
  .warranty-table tr.mine td:first-child { padding-left: 6px; }
}
/* the choice buttons: the same size as the bubble text and the question */
.choice-list .btn, .want-buttons .btn { font-size: clamp(17px, 1.6vw, 20px); }
/* conversation text in black (the pink highlights stay pink) */
.welcome-bubble, .welcome-bubble .lead, .welcome-bubble p, .welcome-bubble li, .welcome-bubble .muted,
.welcome-bubble .warranty-table th, .welcome-bubble .warranty-table td:not(.amt) { color: var(--ink); }
/* the highlights (questions, the $50 fee, the fee amounts): black and bold instead of pink */
.welcome-bubble.ask.soft .start-question, .fee, .warranty-table td.amt { color: var(--ink); font-weight: 700; }
.choice-list .btn { font-size: 16px; }   /* the stacked choices: smaller text */
/* every question bubble: regular text size, bold, black (like "What would you prefer to do?") */
.welcome-bubble.ask .start-question { color: var(--ink); font: 700 clamp(17px, 1.6vw, 20px)/1.5 var(--f); letter-spacing: 0; }
.welcome-bubble.ask { padding: 10px 20px; }
.start-sub { color: var(--pink); }   /* "A store or a fitter" under Somewhere else */
.welcome-bubble.ask.soft .start-question { font-weight: 400; }   /* "What would you prefer / like to do?": not bold */
.welcome-bubble, .reply-bubble { border-radius: 0; }   /* every chat box: square corners */
/* the chat triangle: a white square turned 45°, pink on its two lower sides, so it points down out of the box */
.welcome-bubble::before { display: none; }
.welcome-bubble::after { content: ""; position: absolute; left: 32px; bottom: -9px; width: 16px; height: 16px; border: solid var(--pink); border-width: 0 1px 1px 0; border-color: var(--pink); background: #fff; transform: rotate(45deg); }
.welcome-bubble.ask .start-question { font-weight: 400; }   /* every question: not bold */
/* pink outline button ("1 to 2 years ago") */
.btn.pink-line { background: transparent; color: var(--pink); border-color: var(--pink); }
.btn.pink-line:hover { background: var(--pink); color: #fff; }
.warranty-table th { background: transparent; border-bottom: 1.5px solid var(--ink); padding-top: 0; }   /* header: no grey, underlined */
input.prefilled { background: #f3f2ef; color: var(--ink); }   /* the verified email on the claim form */
/* "< Back" lower left, "Start over >" lower right, as underlined links, lined up with the page's content */
.page-nav { display: flex; justify-content: space-between; gap: 16px; margin: 36px auto 0; padding-top: 18px; border-top: 1px solid var(--line, #e3e3e3); }
.page-nav a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; font-size: 16px; }
.page-nav a:hover { color: var(--pink); }
.page-nav.w-start { max-width: 760px; }
.page-nav.w-side { max-width: 932px; }
/* footer text in black */
footer.foot, footer.foot a { color: var(--ink); }
/* the bot check takes no room unless Cloudflare needs a click; short forms (email) with tight spacing */
.cf-turnstile[data-appearance="interaction-only"] { min-height: 0; }
form.compact { gap: 12px; padding: 24px; }
form.compact > * { margin: 0; }
form.compact label { margin-bottom: 4px; }
.page-nav a { color: var(--pink); }   /* Back and Start over in pink */
.page-nav a:hover { color: var(--pink-deep, var(--pink)); }
/* the shaft picker: one row of buttons per layer (brand, model, spec, colour); the picked one is pink */
.picker { display: grid; gap: 16px; }
.layer-h { margin: 0 0 8px; font-weight: 600; font-size: 15px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: inherit; font-size: 15px; padding: 9px 14px; background: #fff; color: var(--ink); border: 1px solid var(--ink); cursor: pointer; }
.chip:hover { border-color: var(--pink); color: var(--pink); }
.chip.on { background: var(--pink); border-color: var(--pink); color: #fff; }
/* trade-in: the estimate and the price summary */
.picked-price { margin: 0; font-weight: 600; }
.estimate { border-left: 3px solid var(--pink); padding: 12px 16px; background: #fff; }
.estimate-h { margin: 0; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.estimate-amt { margin: 4px 0; font-size: 28px; font-weight: 700; color: var(--pink); }
.estimate-why { margin: 0; }
.ti-sum { width: 100%; border-collapse: collapse; font-size: 15px; }
.ti-sum td { padding: 8px 0; border-bottom: 1px solid var(--line, #e3e3e3); }
.ti-sum td:last-child { text-align: right; white-space: nowrap; padding-left: 16px; }
.ti-sum tr.total td { font-weight: 700; border-bottom: 0; }
.note { border-left: 3px solid var(--pink); background: #fff; padding: 12px 16px; font-size: 15px; } .note p { margin: 0; }   /* a highlighted how-it-works note */
/* every button in a layer the same size: an even grid, text centred and allowed to wrap */
.chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.chip { width: 100%; min-height: 48px; text-align: center; line-height: 1.3; white-space: nowrap; }
.chips > .chip.wide { grid-column: span 2; }   /* a long choice takes two cells and stays on one line (app.js fitChips) */
@media (max-width: 480px) { .chip { white-space: normal; } }
@media (max-width: 480px) { .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* claim form steps */
.cstep { display: grid; gap: 16px; }
.cstep[hidden] { display: none; }
.cstep-nav { display: flex; gap: 12px; flex-wrap: wrap; }
.cstep-count { margin: 0; }
/* the picked shaft button: black (was pink) */
.chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip:hover { border-color: var(--ink); color: var(--ink); background: #f3f2ef; }
.chip.on:hover { background: var(--ink); color: #fff; }
/* step buttons: Back on the left, Next (pink, a little larger) on the right */
.cstep-nav { justify-content: space-between; align-items: center; }
.cstep-nav [data-cnext], .cstep-nav button[type="submit"], #ti-next, #ti-go { margin-left: auto; font-size: 17px; padding: 16px 34px; }
#trade-in-old .actions, #trade-in-new .actions { display: flex; }
.picker + div, .picker ~ input + div { margin-top: 18px; }   /* room between the shaft buttons and the serial number */
/* claim steps: evenly spaced fields, full-width inputs */
.cstep .card.stack { gap: 22px; }
.cstep .card.stack > div > label { display: block; margin-bottom: 6px; }
.cstep .card.stack > div > .small { margin: 6px 0 0; }
.cstep input[type="date"], .cstep input[type="file"] { width: 100%; box-sizing: border-box; }
.cstep input[type="date"] { min-height: 46px; padding: 8px 12px; border: 1px solid #b9b7b1; font: inherit; background: #fff; }
.cstep input[type="file"] { padding: 10px; border: 1px dashed #b9b7b1; background: #fff; }
.cstep .card.stack { display: grid; } .cstep .card.stack > p { margin: 0; } .cstep .card.stack > [hidden] { display: none; }
/* file pickers: the Choose file button as a black outline button */
input[type="file"] { font: inherit; font-size: 15px; color: var(--ink); }
input[type="file"]::file-selector-button { font: 600 13px/1 var(--f); padding: 7px 12px; margin-right: 12px; background: #fff; color: var(--ink); border: 1px solid var(--ink); cursor: pointer; }
input[type="file"]::file-selector-button:hover { background: var(--ink); color: #fff; }
/* file boxes: the list of chosen files (each with Remove), then Choose file / Add another file */
input.file-store { display: none; }
.files { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px; border: 1px dashed #b9b7b1; background: #fff; }
.file-list { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 6px; }
.file-list:empty { display: none; }
.file-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 10px; background: #f6f5f2; font-size: 15px; }
.file-name { overflow-wrap: anywhere; }
.file-rm { font: inherit; font-size: 14px; background: none; border: 0; color: var(--pink); text-decoration: underline; cursor: pointer; padding: 0; }
.btn.file-add, .files .file-add { min-height: 0; padding: 7px 12px; font-size: 13px; min-width: 0; height: auto; line-height: 1; }   /* Choose file: just around its words, everywhere */
/* trade-in: the shipping address for the new shaft */
fieldset.ship { border: 0; padding: 0; margin: 0; display: grid; gap: 16px; }
fieldset.ship legend { font-weight: 700; font-size: 18px; margin-bottom: 8px; padding: 0; }
/* trade-in: the condition buttons in pink (picked: pink fill), and the money column of the summary in pink */
[data-condition].chip { border-color: var(--pink); color: var(--pink); }
[data-condition].chip:hover { background: #fdf0f6; color: var(--pink); border-color: var(--pink); }
[data-condition].chip.on, [data-condition].chip.on:hover { background: var(--pink); border-color: var(--pink); color: #fff; }
.ti-sum td:last-child { color: var(--pink); }
/* the verified email: shown, with "Use a different email" → a code box */
.verify-email { display: grid; gap: 8px; }
.ve-row { display: flex; gap: 10px; flex-wrap: wrap; }
.ve-row input { flex: 1 1 220px; }
.ve-row .btn { white-space: nowrap; }
.ve-box { display: grid; gap: 10px; padding: 12px; background: #fff; border: 1px dashed #b9b7b1; }
.ve-box[hidden], .ve-row[hidden] { display: none; }
.picked-name { font-weight: 400; }
/* narrow screens: grid children may shrink below their content (else the shaft buttons push the page wide) */
form.stack > *, .card.stack > *, .picker, .picker > *, .chips > * { min-width: 0; }
@media (max-width: 560px) { .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ti-sum td:last-child { padding-left: 8px; } }
.ti-sum td:first-child { white-space: normal; overflow-wrap: anywhere; } .ti-sum { table-layout: auto; max-width: 100%; }
/* trade-in: choose the shaft, then check out */
.tstep { display: grid; gap: 16px; }
.tstep[hidden] { display: none; }
.ti-recap { margin: 0; padding: 10px 12px; background: #f6f5f2; font-size: 15px; }
#ti-next2 { margin-left: auto; font-size: 17px; padding: 16px 34px; }
/* the picked shaft: one line in a pink box */
.picked-price { padding: 12px 16px; border: 1px solid var(--pink); background: #fdf0f6; font-weight: 400; line-height: 1.4; }
.picked-price strong { color: var(--pink); }
.picked-amt { font-weight: 700; white-space: nowrap; }
.ti-sum .sum-note { color: var(--pink); }   /* when each amount is paid / refunded */
/* the summary: amounts in black; the cost after the refund in pink */
.ti-sum td:last-child { color: var(--ink); }
.ti-sum tr.total td { color: var(--pink); }
/* a button that can't be pressed yet looks it */
.btn:disabled, .btn[disabled], .btn.is-off { opacity: .4; cursor: not-allowed; }
/* trade-in: How it works, a numbered list in a chat bubble */
.how-bubble h2 { margin: 0 0 10px; font-size: 20px; font-weight: 700; }
.how-steps { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.how-steps li { padding-left: 4px; }
.how-steps li::marker { color: var(--pink); font-weight: 700; }
/* How it works: numbered steps in circles */
.how-steps { list-style: none; padding-left: 0; counter-reset: how; gap: 12px; }
.how-steps li { counter-increment: how; display: grid; grid-template-columns: 30px 1fr; align-items: start; gap: 12px; padding-left: 0; }
.how-steps li::before { content: counter(how); width: 28px; height: 28px; border-radius: 50%; background: var(--pink); color: #fff; font-weight: 700; font-size: 15px; display: grid; place-items: center; }
/* condition buttons back to the same black as the other choices */
[data-condition].chip { border-color: var(--ink); color: var(--ink); }
[data-condition].chip:hover { background: #f3f2ef; color: var(--ink); border-color: var(--ink); }
[data-condition].chip.on, [data-condition].chip.on:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.cost-steps { margin-top: 12px; }
.cost-steps li > span { align-self: center; }
form.compact .actions { display: flex; justify-content: flex-end; }   /* Email me a code on the right */
/* claim step 2: serial number or proof of purchase, in pink with pink dots */
.proof-note, .proof-note p, .proof-note li { color: var(--pink); }
.proof-note ul { margin: 6px 0 0; padding-left: 20px; list-style: disc; }
.proof-note li::marker { color: var(--pink); }
/* claim steps: Back and Next the same size */
.cstep-nav .btn, .cstep-nav [data-cnext], .cstep-nav button[type="submit"] {
  min-width: 150px; height: 48px; padding: 0 22px; font-size: 16px; display: inline-flex; align-items: center; justify-content: center;
}
/* "Bought on autoflex.us?": on the right and pinned on every screen wide enough for two columns (a narrower note
   between 600 and 900px); on phones it sits at the top */
@media (max-width: 900px) {
  .side-layout { grid-template-columns: minmax(0, 1fr) 210px; gap: 20px; }
  .side-note { position: sticky; top: 16px; order: 0; }
  .side-bubble { padding: 16px; margin: 0; }
  .side-bubble h2 { font-size: 17px; }
  .side-bubble p { font-size: 14px; }
}
@media (max-width: 600px) {
  .side-layout { grid-template-columns: minmax(0, 1fr); }
  .side-note { position: static; order: -1; }
  .side-bubble { margin-bottom: 26px; }
}
/* claim step 2: proof of purchase (authentication), a chat bubble with pink dots */
.proof-bubble .start-question { margin: 0 0 10px; font-size: clamp(17px, 1.6vw, 20px); font-weight: 400; }
.proof-bubble ul.dots { margin: 0; padding-left: 22px; list-style: disc; display: grid; gap: 6px; }
.proof-bubble ul.dots li::marker { color: var(--pink); font-size: 1.2em; }
/* a highlighted line in a chat bubble */
.welcome-bubble .highlight { display: block; margin: 0 0 14px; padding: 12px 16px; background: #fdf0f6; border-left: 3px solid var(--pink); color: var(--ink); }
.welcome-bubble .highlight strong { color: var(--pink); }
.welcome-bubble .lead > .highlight:last-child { margin-bottom: 0; }
/* lists in chat bubbles: pink dots */
.welcome-bubble ul.terms { list-style: disc; }
.welcome-bubble ul.terms li::marker { color: var(--pink); font-size: 1.15em; }
/* return form: Continue on the right, the "1 item chosen" count just left of it */
#return-form p.actions.step1-only { display: flex; align-items: center; gap: 14px; }


/* a warranty claim (from the order): no per-item questions; step 2 is what happened, photos and Send */
#return-form[data-want="warranty"] .item .opts { display: none !important; }

/* each item's remarks: under its questions, from step 2 on */
.item .remark { margin-top: 14px; }
.item .remark textarea { width: 100%; }
#return-form[data-step="1"] .item .remark { display: none !important; }

/* a required mark: a red star, like every required field */
.hint.req { color: #d0021b; font-weight: 700; }

/* trade-in checkout: the order, one row each (the shaft, its build, then the money) */
.ti-order dl { margin: 0; padding: 4px 14px; background: #f6f5f2; }
.ti-order .ti-row { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line, #e3e3e3); font-size: 15px; }
.ti-order .ti-row:last-child { border-bottom: 0; }
.ti-order .ti-row.priced { grid-template-columns: 150px 1fr auto; }   /* a shaft and its price on one row */
.ti-order .row-price { color: var(--pink); text-align: right; white-space: nowrap; }
.ti-order .row-price-note { display: block; color: var(--muted, #777); font-size: 13px; }
.ti-order .build-dots { margin: 6px 0 0; padding-left: 18px; list-style: disc; color: var(--muted, #666); font-size: 14px; line-height: 1.6; }
@media (max-width: 560px) { .ti-order .ti-row.priced { grid-template-columns: 1fr; } .ti-order .row-price { text-align: left; white-space: normal; } }
.ti-order dt { color: var(--muted, #6b6b6b); }
.ti-order dd { margin: 0; overflow-wrap: anywhere; }
.ti-order .money dd { text-align: right; white-space: nowrap; }
.ti-order .total dt, .ti-order .total dd { font-weight: 700; color: var(--ink); }
@media (max-width: 560px) { .ti-order .ti-row { grid-template-columns: 1fr; gap: 2px; } .ti-order .money { grid-template-columns: 1fr auto; } }

/* return form, step 3 (an exchange of a shaft): only the exchanged items, each with its picker and build; Send moves here */
#return-form:not([data-step="3"]) .step3-only { display: none !important; }
#return-form[data-step="3"] .item:not(.swap), #return-form[data-step="3"] .item .opts, #return-form[data-step="3"] .item .remark,
#return-form[data-step="3"] .step2-only, #return-form[data-step="3"] .step1-only, #return-form[data-step="3"] .item .check { display: none !important; }
#return-form[data-swap][data-step="2"] .send-row { display: none !important; }
#return-form[data-swap][data-step="3"] .send-row { display: none !important; }
/* step 4 (an exchange): the summary and how they'd like it, then Send */
#return-form:not([data-step="4"]) .step4-only { display: none !important; }
#return-form[data-step="4"] .item, #return-form[data-step="4"] .step1-only, #return-form[data-step="4"] .step2-only,
#return-form[data-step="4"] .step3-only { display: none !important; }
#return-form[data-swap][data-step="4"] .send-row { display: flex !important; }
#return-form p.actions.step-confirm { display: flex; justify-content: flex-end; }
#return-form p.actions.step-swap { display: flex; justify-content: flex-end; }
#return-form p.actions.step-swap[hidden] { display: none; }
.new-shaft { margin-top: 12px; }
.new-shaft .new-build { margin-top: 18px; }
/* step 3: two cards, the new shaft (ending at its pink summary) and its build, with the build question between them */
#return-form[data-step="3"] .item.swap { background: none; border: 0; padding: 0; }
#return-form[data-step="3"] .new-shaft .picker, #return-form[data-step="3"] .new-build .build-form { background: var(--paper); border: 1px solid var(--line); padding: 24px; }
#return-form[data-step="3"] .new-shaft .new-build { margin-top: 22px; }
#return-form[data-step="3"] .new-build .build-form { margin-top: 12px; }
/* a colour choice's small circle preview */
.chip .swatch { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.25); margin-right: 8px; vertical-align: -2px; flex: none; }
.chip.on .swatch { border-color: rgba(255,255,255,.7); }
.chip .swatch[hidden] { display: none; }
.diff-line { margin: 10px 0 0; font-weight: 600; }

/* build form: the raw-shaft note in pink */
.build-form [data-b="raw-note"] { color: var(--pink); }

/* trade-in checkout: the note under a row (when the trade-in value is refunded), in pink */
.ti-order .ti-note { grid-column: 1 / -1; margin: 0; color: var(--pink); font-size: 14px; line-height: 1.4; }
/* step 3: get it faster or the regular way */
.ex-mode .mode { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--line, #E4E2DC); margin: 0 0 10px 0; cursor: pointer; font-weight: 400; }
.ex-mode .mode:has(input:checked) { border-color: #C8006E; box-shadow: 0 0 0 1px #C8006E inset; }
.ex-mode .mode input { margin-top: 4px; flex: none; }
.ex-mode .mode strong { display: block; margin: 0 0 4px 0; }
.code-hint { margin: 4px 0 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.code-hint > span:first-child { flex: 1; min-width: 0; }
.code-hint .code-resend { white-space: nowrap; }
.code-resend .linkish { color: var(--ink); }   /* plain text colour, the pink underline of every link */
.code-resend .resend-left { margin-left: 4px; }
.code-submit { display: flex; justify-content: flex-end; }
.code-spam { margin: 0; color: var(--pink); }
.code-other a { color: var(--pink); text-decoration: underline; text-underline-offset: 3px; }
.linkish.is-off { cursor: not-allowed; }   /* stays full pink while it counts down; the countdown says to wait */
.linkish { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-decoration-color: #C8006E; cursor: pointer; }
/* the trade-in estimate's headline: pink */
.welcome-bubble h1 .pink-title { color: var(--pink); }
/* the trade-in refund row: one line, pink */
.ti-order .ti-refund { grid-template-columns: 1fr auto; }
.ti-order .ti-refund dt, .ti-order .ti-refund dd { color: var(--pink); white-space: nowrap; }
.ti-order .ti-refund.is-refund dt, .ti-order .ti-refund.is-refund dd { color: #15803d; }   /* money back to them: green */
/* Build type: two wide buttons, so "Custom Build (+2 Business Days)" stays on one line */
.chips[data-chips="type"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chips[data-chips="type"] > * { white-space: nowrap; padding-left: 10px; padding-right: 10px; }
@media (max-width: 560px) { .chips[data-chips="type"] { grid-template-columns: 1fr; } }   /* phone: one per row, still one line */
/* trade-in terms: a short list, then the tick */
.ti-terms ul { margin: 0; padding-left: 20px; line-height: 1.5; display: grid; gap: 4px; }
/* trade-in step 2: the prepaid label (2a) or shipping it yourself (2b), side by side with "or" between; stacked on a phone */
.ti-ship-opts { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch; margin-top: 10px; }
.ti-opt { display: block; padding: 12px 14px; border: 1px solid var(--line, #E4E2DC); border-left: 3px solid var(--pink); background: #fff; font-size: 15px; line-height: 1.5; }
.ti-opt-h { display: block; margin: 0 0 6px; color: var(--pink); }
.ti-or { align-self: center; color: var(--pink); font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: .08em; }
@media (max-width: 640px) { .ti-ship-opts { grid-template-columns: 1fr; } .ti-or { justify-self: center; } }
/* warranty claim: serial number or proof of purchase, side by side with "or" between; stacked on a phone */
.or-pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: start; }
.or-opt { min-width: 0; }
.or-word { align-self: stretch; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--pink); font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: .08em; }
.or-word::before, .or-word::after { content: ""; flex: 1; width: 2px; background: var(--pink); }   /* a pink line through the OR */
@media (max-width: 640px) { .or-pair { grid-template-columns: 1fr; } .or-word { flex-direction: row; }
  .or-word::before, .or-word::after { width: auto; height: 2px; } }
/* required fields: a red star after the label, across the site (fields with their own required / "(optional)" hint keep that instead) */
label:has(+ :is(input, select, textarea):required):not(:has(.hint))::after,
label.check:has(> input:required)::after, label.need::after, .picker .layer-h::after, [data-build] .layer-h::after, .new-build .layer-h::after {
  content: " *"; color: #d0021b; font-weight: 700;
}
/* "this or that" in a pop-up: two dotted items with a pink OR between */
.or-list { margin: 10px 0 0; padding-left: 22px; list-style: disc; display: grid; gap: 4px; }
.or-list li::marker { color: var(--pink); font-size: 1.2em; }
.or-list li.or-li { list-style: none; margin-left: -22px; color: var(--pink); font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: .08em; }
.pop .lead p { margin: 0; }
/* photo fields: what to photograph */
.photo-tip { margin: 8px 0 4px; font-size: 15px; color: var(--ink); }
.photo-tip strong { color: var(--pink); }
.opts .wide { grid-column: 1 / -1; }   /* wrong shaft received: the picker spans the card */
.photo-pair p.small, .photo-more p.small { margin: 2px 0 8px; }
.photo-more { margin-top: 4px; }
.pink-text { color: var(--pink); }
.terms-list { margin: 0; padding-left: 20px; } .terms-list li { margin: 4px 0; }
.ti-row.ti-split { border-top: 2px solid var(--line, #ddd); margin-top: 6px; padding-top: 10px; }   /* trade-in above, new shaft below */
.photo-title, .serial-card > label[for="serial"] { margin: 0 0 10px; font: 600 17px/1.3 Barlow, "Helvetica Neue", Arial, sans-serif; color: var(--ink); }   /* the two section titles alike */
.serial-card #serial, #serial { max-width: 220px; min-height: 0; padding: 7px 10px; font-size: 15px; }   /* the serial number box: just wide enough for 12 characters */
.serial-why { font-weight: inherit; color: var(--ink); }   /* the whole title black and bold */
/* a serial number entered: its photo joins the first row (whole shaft AND damaged part AND serial number) */
.photo-pair .serial-and { display: none; }
.photo-pair:has(#serial-slot:not([hidden])) { grid-template-columns: 1fr auto 1fr auto 1fr; }
.photo-pair:has(#serial-slot:not([hidden])) .serial-and { display: flex; }
@media (max-width: 640px) { .photo-pair:has(#serial-slot:not([hidden])) { grid-template-columns: 1fr; } }
.photo-pair > div { min-width: 0; }
/* a request's page: the request number under the thank-you (pink), the items as a list, the ways on */
.req-items { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.req-items li { margin: 0; padding: 14px 16px; background: #f6f3f4; border: 1px solid #ebe5e7; border-radius: 10px; }   /* set apart from the white chat bubbles */
.req-items dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 8px 0 0; font-size: 15px; }
.req-items dt { color: var(--muted, #6f6e69); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; padding-top: 2px; }
.req-items dd { margin: 0; }
.req-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.req-actions .btn { min-width: 230px; justify-content: center; text-align: center; }
.req-actions .req-new { margin-left: auto; }
.ref-bubble { margin-top: 0; }
.ref-bubble .lead { margin: 0; }
.ref-bubble strong.pink-text { font-size: 1.15em; }
.req-items dd strong { color: var(--pink); }   /* the amounts */
.cost-steps li strong { color: var(--pink); }   /* the amounts: $50.00, 25%… */
.req-items li.req-warranty { padding: 0; background: none; border: 0; }
.req-items .req-warranty .ti-order { margin: 0; }
/* the exchange flow: reason and "what you'd like" are set (exchange), not asked */
.ex-auto { display: none !important; }
/* a return page: each item can switch to the exchange page instead */
#return-form .item .item-ex { position: absolute; top: 46px; right: 14px; white-space: nowrap; padding: 4px 12px; font-size: 13px; line-height: 1.3; min-height: 0; }   /* under the tick box */
@media (max-width: 560px) { #return-form .item .item-ex { position: static; display: inline-flex; margin-top: 8px; } }
/* exchange step 4: is the shaft playable? */
.q-playable { margin-top: 16px; }
.q-playable .chips.yn { display: flex; gap: 10px; }
.q-playable .chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; }
.q-playable .chip:has(input:checked) { border-color: var(--ink); background: var(--ink); color: #fff; }
/* trade-in step 1: the shafts added so far, and Add another shaft next to the value button */
.ti-added-list { margin: 4px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.ti-added-list .linkish { margin-left: 8px; font-size: 13px; }
.ti-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; }
/* "Which item…?" only while picking (step 1); gone from step 2 on */
body:has(#return-form[data-step]:not([data-step="1"])) #pick-question { display: none; }
/* a choice with a line of explanation under it (Exchange) */
.want-with-note { display: flex; flex-direction: column; gap: 6px; }
.want-with-note .btn { width: 100%; }
.want-with-note p { margin: 0; line-height: 1.4; }
.want-buttons { align-items: start; }   /* every choice its own button height; the Exchange note under it doesn't stretch the others */
/* the order's items in the welcome bubble: on a soft grey panel, like the order summaries */
.welcome-bubble ul.order-items { margin: 12px 0 0; padding: 12px 16px 12px 34px; background: #f6f5f2; border-radius: 8px; }
.want-with-note p { text-align: justify; hyphens: auto; }   /* the note lines up with both edges of the button */
.serial-card[hidden] { display: none !important; }
/* step 2: the remarks of the picked items, together at the end (app.js moves them here) */
.remarks-end .remark + .remark { margin-top: 14px; }
/* step 2 of an exchange: how it works, as a chat bubble with numbered steps */
.swap-how.welcome-bubble { margin: 8px 0 22px; padding: 16px 20px; }
.swap-how .start-question { margin: 0 0 12px; font-weight: 700; }
.swap-ways { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.swap-note[hidden] { display: none !important; }
.serial-help { margin: 6px 0 0; }
/* the item being returned / exchanged / claimed: its details on a soft grey panel */
#return-form .item .item-head { background: #f6f5f2; border-radius: 8px; padding: 12px 14px; }
@media (min-width: 561px) { #return-form .item .item-head { padding-right: 230px; } }
.how-steps .swap-ways li { display: block; counter-increment: none; padding: 0; }
.how-steps .swap-ways li::before { content: none; display: none; }
/* the photos each item needs: its name above its boxes */
.photo-for { margin: 0 0 6px; font-weight: 600; font-size: 14px; }
.photo-group[hidden] { display: none !important; }
#return-form:not(.photos-multi) .photo-for { display: none; }
.photo-more .photo-for.wide { grid-column: 1 / -1; margin: 6px 0 -4px; }
/* the exchange's "How your exchange works" bubble: on steps 2 and 4 (not while picking the item, nor choosing the new shaft) */
#return-form:not([data-step="2"]) .swap-how { display: none; }   /* step 2 only: step 4 has the choice itself */
/* 3a / 3b: side by side, with a pink OR between (stacked on a phone) */
.swap-ways.or-pair { margin-top: 10px; align-items: stretch; }
.swap-way { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; background: #f6f5f2; border-radius: 8px; font-size: 14px; }
.swap-way ul.dots { margin: 2px 0 0; padding-left: 18px; display: grid; gap: 3px; list-style: disc; }
.swap-way ul.dots li::marker { color: var(--pink); }
.how-steps .swap-way li { display: list-item; counter-increment: none; padding: 0; }
.how-steps .swap-way li::before { content: none; display: none; }
.new-shaft .diff-line { display: none !important; }   /* step 3: no price-difference line (the confirm step shows it) */
.want-with-note .want-dots { margin: 0; padding-left: 18px; display: grid; gap: 3px; list-style: disc; line-height: 1.4; }
.want-with-note .want-dots li::marker { color: var(--pink); }
/* the item's questions (condition, playable, reason…): side by side on one row where they fit */
#return-form .item .opts { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }   /* the questions in rows of three */
/* every box on a row at the same height: the label takes the room above it (a two-line label pushes nothing down) */
#return-form .item .opts > div:not(.wide):not(.remark):not(.exchange):not(.new-shaft):not(.q-got) { display: flex; flex-direction: column; }
#return-form .item .opts > div:not(.wide):not(.remark):not(.exchange):not(.new-shaft):not(.q-got) > label { flex: 1; display: flex; align-items: flex-end; }
#return-form .item .opts > div[hidden], #return-form .item .opts > .ex-auto { display: none !important; }
@media (max-width: 640px) { #return-form .item .opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#return-form .item .opts > .wide, #return-form .item .opts > .remark, #return-form .item .opts > .exchange, #return-form .item .opts > .new-shaft, #return-form .item .opts > .q-got { grid-column: 1 / -1; }
/* step 4: the two ways to exchange, side by side with OR (stacked on a phone) */
.ex-mode .mode-pair { align-items: stretch; }
.ex-mode .mode-pair .mode { margin: 0; background: #f6f5f2; border-radius: 8px; }
.ex-mode .mode ul.dots { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 3px; font-size: 14px; list-style: disc; }
.ex-mode .mode ul.dots li::marker { color: var(--pink); }
.step-tag { font-weight: 500; }
/* every step's "Step N of 4:" in the same pink, lighter than the text around it */
.step-head .step-title strong { color: var(--pink); font-weight: 500; }
/* a required photo: "(required*)" beside its title, the star red */
.req-star { color: #d0021b; font-weight: 700; }
.ti-order .build-dots li.dot-pink { color: var(--pink); }   /* "Same as your original shaft", then its build options */
label.need-photo .hint { color: #d0021b; }   /* "(required*)" all red */
.item-head .ret-label { margin: 0 0 6px; color: var(--pink); font-weight: 600; font-size: 15px; }   /* exchange step 3: "Shaft to return", inside the grey box */
.photo-title.pink-text { color: var(--pink); }   /* "Choose your new shaft" */
.chip .chip-sub { display: block; }   /* a choice too long for one line: the part in brackets on a second row */
.item-head .ret-label, .photo-title.pink-text { text-transform: uppercase; letter-spacing: .03em; }   /* SHAFT TO RETURN, CHOOSE YOUR NEW SHAFT */
#return-form:not([data-step="4"]) .step4-edit { display: none; }
.chips[data-chips="type"] > [data-b="raw-note"] { margin: 0; white-space: normal; }
@media (max-width: 560px) { .chips[data-chips="type"] > [data-b="raw-note"] { grid-column: auto !important; } }
/* every step: Back on the left, the next-page button on the right (and any note beside it) */
.actions.nav-row, .actions.cstep-nav { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.actions.nav-row[hidden], .actions.cstep-nav[hidden] { display: none; }
.actions .row-back, .actions.cstep-nav > .btn.line:first-child { margin-right: auto; }
.confirm-new { margin-top: 14px; font-weight: 600; }   /* step 4: "I confirm my new shaft…" */
select.variant option:disabled { color: #aaa; }   /* a sold-out size or colour, greyed out */
/* the hint under Reason ("Photos requested.") sits below its box, so the boxes still line up */
#return-form .item .opts { row-gap: 26px; }
#return-form .item .opts > div:has(> .reason-hint) { position: relative; }
#return-form .item .opts .reason-hint { position: absolute; top: 100%; left: 0; margin: 2px 0 0; }
/* every pop-up: a × at the top right */
.pop { position: relative; }
.pop .pop-x { position: absolute; top: 8px; right: 10px; width: 32px; height: 32px; padding: 0; border: 0; background: none; font-size: 26px; line-height: 1; color: #777; cursor: pointer; }
.pop .pop-x:hover { color: var(--ink); }
.pop .ad-pick { width: 100%; margin-top: 10px; }   /* the new adapter, in its pop-up */
/* short pop-ups: a line, then dots */
.pop .pop-dots { margin: 8px 0 0; padding-left: 20px; }
.pop .pop-dots li { margin: 4px 0; }
/* short pop-ups: "Would you consider:", then the key words, one per row with a dot */
.pop .pop-ask { margin: 10px 0 2px; color: var(--pink); }   /* "Would you consider:" always pink */
.pop .pop-keys { margin: 0; padding-left: 20px; font-weight: 600; }
.pop .pop-keys li { margin: 2px 0; }
/* return page: "Exchange instead", a pink outline */
#return-form .item .item-ex.btn.line { border-color: var(--pink); color: var(--pink); background: #fff; }
#return-form .item .item-ex.btn.line:hover { background: var(--pink); color: #fff; }
/* the confirmation page's summary cards (warranty, exchange, $30 local fitter): the ti-order rows, not the item list's two-column grid */
.req-items .ti-order dl { display: block; margin: 0; }
.req-items .ti-order dt { text-transform: none; letter-spacing: 0; font-size: 15px; padding-top: 0; }
.req-items .ti-order dd strong { color: inherit; }
.req-items .ti-order .pink-text { color: var(--pink); }
/* "What you'd like" once a free replacement is accepted: greyed out, and the apology's refund due under it */
#return-form select.resolution.locked { background: #f0efec; color: #6f6e69; pointer-events: none; }
#return-form .apology-due { margin: 6px 0 0; color: #15803d; font-size: 14px; }
#return-form .apology-due strong { color: #15803d; }
/* photo boxes: rows laid out by app.js (layoutPhotos); the pool holds the hidden ones */
.photo-rows .photo-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 18px; margin: 0 0 14px; }
.photo-rows .photo-row:empty, .photo-rows .photo-row[hidden] { display: none; }
.photo-rows .photo-pool { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 18px; }
.photo-rows .photo-row ~ .photo-pool .ph-box[hidden] { display: none; }
.ph-box p.small { margin: 2px 0 8px; }
.ph-box .photo-of { margin: 0 0 4px; font-weight: 600; font-size: 13px; color: var(--muted, #6f6e69); }
#return-form:not(.photos-multi) .ph-box .photo-of { display: none; }
.ph-box label .ph-hint { font-weight: 400; color: var(--muted, #6f6e69); }
/* the keep-it confirm screen: its photos */
.pop .pop-photo { display: block; margin: 8px 0; font-weight: 600; }
.pop .pop-photo input { display: block; margin-top: 4px; font-weight: 400; }
.ph-box label .ph-hint.is-req { color: #d0021b; }
/* the exchange page: Reason last among the questions (the full-width parts after it) */
#return-form[data-want="exchange"] .item .opts > div:has(> select.reason) { order: 50; }
#return-form[data-want="exchange"] .item .opts > .wide, #return-form[data-want="exchange"] .item .opts > .remark,
#return-form[data-want="exchange"] .item .opts > .exchange, #return-form[data-want="exchange"] .item .opts > .new-shaft,
#return-form[data-want="exchange"] .item .opts > .q-got { order: 60; }
.intl-note { margin: 0 0 12px; padding: 10px 14px; border-left: 3px solid var(--pink); background: #fdf0f6; font-size: 14px; }   /* an international order: who pays shipping and duties */