/* ---------------------------------------------------------------------------
   BowlersMart Returns

   The account area already has a design system of ours: .bm-order-card,
   .bm-order-item, .bm-order-status and .bm-btn, from the My Account dashboard
   work (bowlersmart-account-dashboard.css v1.4.0), which the bmart-account plugin
   ships with the hexes swapped for --bmart-ac-*. This page is built out of those,
   so almost nothing here restyles them. What is here is the
   parts the account area has no component for: the return form, the progress
   tracker, the outcome chips, and a standalone copy of the card shell for the
   public [bmart_returns_portal] page, where account.css is not loaded.
--------------------------------------------------------------------------- */

/* Anything this plugin hides with the hidden attribute stays hidden. Author
   rules that set display beat the browser's own [hidden] rule, and .bmr-field
   sets display: block, so the "Which size?" box kept showing next to a Refund
   selection. One line here rather than remembering it at every call site. */
.bmart-returns [hidden] { display: none !important; }

.bmart-returns {
	--bmr-navy: var(--bmart-ac-navy, #1e3a5f);
	--bmr-blue: var(--bmart-ac-med-blue, #2d5a8e);
	--bmr-line: var(--bmart-ac-border, #e0e0e0);
	--bmr-bg: var(--bmart-ac-bg, #f5f6f8);
	--bmr-green: #2e7d32;
	--bmr-green-bg: #e8f5e9;
	--bmr-red: #c62828;
	--bmr-muted: #999;
	font-size: 15px;
}

.bmr-section { margin: 0 0 34px; }
.bmart-returns .bmr-sub { color: #666; font-size: 14px; margin: -8px 0 16px; }

/* Headings inside a card. The account theme uppercases headings, so reset. */
.bmart-returns .bmr-work-head {
	font-size: 16px; font-weight: 700; color: var(--bmr-navy);
	text-transform: none; letter-spacing: 0; margin: 0 0 14px; line-height: 1.3;
}

.bmr-link {
	background: none; border: 0; padding: 0 0 12px; font: inherit; font-size: 13px; font-weight: 600;
	color: var(--bmr-blue); cursor: pointer;
}
.bmr-link:hover { text-decoration: underline; }

.bmr-error {
	color: #b3261e; background: #fdecea; border: 1px solid #f7c7c2; border-radius: 8px;
	padding: 10px 14px; margin: 14px 0 0; font-size: 14px;
}
.bmr-defect-link { color: #b3261e; font-weight: 700; }

/* Outcome, where the orders tab puts the price ----------------------------- */
.bmr-outcome { font-size: 13px; font-weight: 700; color: var(--bmr-muted); }
.bmr-outcome--swap { color: var(--bmr-blue); }

/* Progress ----------------------------------------------------------------- */
.bmr-progress { border-top: 1px solid #f5f5f5; margin-top: 6px; padding-top: 16px; }
.bmr-track { list-style: none; display: flex; margin: 0; padding: 0; }
.bmr-track li { flex: 1; position: relative; padding-top: 16px; text-align: center; }
.bmr-track li::before {
	content: ""; position: absolute; top: 5px; left: -50%; width: 100%; height: 2px; background: var(--bmr-line);
}
.bmr-track li:first-child::before { display: none; }
.bmr-track li.is-done::before { background: var(--bmr-green); }
.bmr-dot {
	position: absolute; top: 0; left: 50%; transform: translateX(-50%);
	width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--bmr-line);
}
.bmr-track li.is-done .bmr-dot { background: var(--bmr-green); border-color: var(--bmr-green); }
.bmr-track-label { font-size: 11.5px; color: var(--bmr-muted); text-transform: none; letter-spacing: 0; }
.bmr-track li.is-done .bmr-track-label { color: var(--bmr-green); font-weight: 600; }
.bmr-next { font-size: 13px; color: #555; margin: 14px 0 0; }

/* Picking an item ---------------------------------------------------------- */
.bmr-pick-row {
	display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
	padding: 12px 0; background: none; border: 0; border-bottom: 1px solid #f5f5f5;
	font: inherit; cursor: pointer;
}
.bmr-pick-row:last-child { border-bottom: 0; }
.bmr-pick-row.is-blocked { cursor: default; opacity: .65; }
.bmr-pick-thumb {
	width: 56px; height: 56px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: var(--bmr-bg);
}
.bmr-pick-thumb img { width: 56px; height: 56px; object-fit: cover; display: block; border-radius: 8px; }
.bmr-pick-body { flex: 1; min-width: 0; }
.bmr-pick-name { display: block; font-size: 14px; font-weight: 600; color: var(--bmr-navy); line-height: 1.3; }
.bmr-pick-meta { display: block; font-size: 12px; color: var(--bmr-muted); margin-top: 3px; }
.bmr-pick-row.is-added .bmr-pick-meta { color: var(--bmr-green); font-weight: 600; }
.bmr-pick-action { flex-shrink: 0; }
.bmr-pick-row:hover .bmr-pick-action.bm-btn--outline { background: var(--bmr-blue); color: #fff !important; }

/* One item's questions ----------------------------------------------------- */
.bmr-detail-item {
	display: flex; align-items: center; gap: 14px; padding: 0 0 16px; margin-bottom: 16px;
	border-bottom: 1px solid #f5f5f5;
}
.bmr-field { display: block; margin-bottom: 16px; }
.bmart-returns .bmr-field-label {
	display: block; font-size: 12px; font-weight: 700; color: var(--bmr-navy);
	text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px;
}
/* The theme sets a fixed height on selects and a line-height that clips the
   text. Both are reset here, or "Choose a reason" loses its bottom half. */
.bmart-returns .bmr-field input[type="text"],
.bmart-returns .bmr-field input[type="number"],
.bmart-returns .bmr-field select,
.bmart-returns .bmr-field textarea {
	width: 100%; max-width: 420px; padding: 11px 14px; border: 1px solid var(--bmr-line);
	border-radius: 6px; font-size: 15px; line-height: 1.5; background: #fff; color: #333;
	box-shadow: none; margin: 0; height: auto; min-height: 46px; box-sizing: border-box;
}
.bmart-returns .bmr-field select {
	-webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235b6472' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 14px center;
}
.bmart-returns .bmr-field textarea { min-height: 90px; }
.bmart-returns .bmr-field input:focus,
.bmart-returns .bmr-field select:focus,
.bmart-returns .bmr-field textarea:focus {
	border-color: var(--bmr-blue); outline: 2px solid rgba(45, 90, 142, .25); outline-offset: 0;
}
.bmr-hint { display: block; font-size: 12px; color: var(--bmr-muted); margin-top: 6px; }

.bmr-resolution { display: grid; gap: 10px; max-width: 420px; }
.bmr-choice {
	display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin: 0;
	border: 1px solid var(--bmr-line); border-radius: 8px; cursor: pointer; background: #fff;
}
.bmr-choice:hover { border-color: var(--bmr-blue); }
.bmr-choice input { margin: 2px 0 0; flex: none; }
.bmr-choice strong { display: block; font-size: 14px; color: var(--bmr-navy); font-weight: 600; }
.bmr-choice small { display: block; font-size: 12px; color: var(--bmr-muted); margin-top: 2px; }
.bmr-choice.is-picked { border-color: var(--bmr-blue); background: #f4f8fc; }

/* What is in the return so far -------------------------------------------- */
.bmr-basket-row { border-bottom: 1px solid #f5f5f5; }
.bmr-basket-row:last-of-type { border-bottom: 0; }
.bmr-basket-outcome { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.bmr-remove {
	background: none; border: 0; padding: 0; font: inherit; font-size: 12px; font-weight: 600;
	color: var(--bmr-muted); cursor: pointer; text-decoration: underline;
}
.bmr-remove:hover { color: var(--bmr-red); }

.bmart-returns .bmr-note { margin: 20px 0 0; padding-top: 18px; border-top: 1px solid #f5f5f5; }
.bmart-returns .bmr-note textarea { max-width: 100%; }

.bmr-submit-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
.bmr-submit-note { font-size: 13px; color: var(--bmr-muted); }

/* Empty and done ----------------------------------------------------------- */
.bmr-empty {
	background: #fff; border: 1px dashed var(--bmr-line); border-radius: 10px;
	padding: 26px 20px; text-align: center; color: #666; font-size: 14px;
}
.bmr-empty p { margin: 0; }
.bmr-empty-sub { font-size: 13px; margin-top: 8px !important; color: var(--bmr-muted); }
.bmr-done { text-align: center; }
.bmr-done-mark {
	width: 46px; height: 46px; margin: 6px auto 14px; border-radius: 50%;
	background: var(--bmr-green-bg); color: var(--bmr-green); font-size: 24px; line-height: 46px; font-weight: 700;
}
.bmart-returns .bmr-rma { font-weight: 700; color: var(--bmr-navy); }

@media screen and (max-width: 549px) {
	.bmr-pick-thumb, .bmr-pick-thumb img { width: 46px; height: 46px; }
	.bmr-pick-row { flex-wrap: wrap; }
	.bmr-pick-action { width: 100%; }
	.bmr-track-label { font-size: 10.5px; }
}

/* ---------------------------------------------------------------------------
   When the host site does not ship the card components.

   Two cases: the public shortcode page, where account.css is not enqueued even
   on bowlersmart.com, and any site without the bmart-account plugin at all (the
   SWAG staff store, for one). Both get this copy of the shell at the same
   values. Scoped so it can never fight the real account styles it is copying.
--------------------------------------------------------------------------- */

.bmr-standalone { max-width: 760px; margin: 0 auto; }

.bmr-standalone .bm-order-card,
.bmr-selfstyled .bm-order-card {
	background: #fff; border: 1px solid var(--bmr-line); border-radius: 10px;
	overflow: hidden; margin-bottom: 16px; box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}
.bmr-standalone .bm-order-card__header,
.bmr-selfstyled .bm-order-card__header {
	padding: 14px 20px; border-bottom: 1px solid #f0f0f0; background: #fafbfc;
	display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}
.bmr-standalone .bm-order-card__meta,
.bmr-selfstyled .bm-order-card__meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.bmr-standalone .bm-order-card__meta-item,
.bmr-selfstyled .bm-order-card__meta-item { display: flex; flex-direction: column; gap: 2px; }
.bmr-standalone .bm-order-card__label,
.bmr-selfstyled .bm-order-card__label {
	font-size: 11px; color: var(--bmr-muted); font-weight: 500; text-transform: uppercase;
	letter-spacing: .5px; line-height: 1;
}
.bmr-standalone .bm-order-card__value,
.bmr-selfstyled .bm-order-card__value { font-size: 14px; color: #333; font-weight: 500; line-height: 1.3; }
.bmr-standalone .bm-order-card__value--bold,
.bmr-selfstyled .bm-order-card__value--bold { font-weight: 700; color: var(--bmr-navy); }
.bmr-standalone .bm-order-card__divider,
.bmr-selfstyled .bm-order-card__divider { width: 1px; height: 30px; background: var(--bmr-line); flex-shrink: 0; }
.bmr-standalone .bm-order-card__body,
.bmr-selfstyled .bm-order-card__body { padding: 16px 20px; }
.bmr-standalone .bm-order-card__more,
.bmr-selfstyled .bm-order-card__more {
	text-align: center; padding-top: 10px; border-top: 1px solid #f5f5f5; margin-top: 4px;
	font-size: 13px; color: var(--bmr-muted);
}

.bmr-standalone .bm-order-item,
.bmr-selfstyled .bm-order-item { display: flex; align-items: center; gap: 14px; padding: 10px 0; }
.bmr-standalone .bm-order-item--border,
.bmr-selfstyled .bm-order-item--border { border-bottom: 1px solid #f5f5f5; }
.bmr-standalone .bm-order-item__thumb,
.bmr-selfstyled .bm-order-item__thumb {
	width: 56px; height: 56px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: var(--bmr-bg);
}
.bmr-standalone .bm-order-item__thumb img,
.bmr-selfstyled .bm-order-item__thumb img { width: 56px; height: 56px; object-fit: cover; display: block; border-radius: 8px; }
.bmr-standalone .bm-order-item__info,
.bmr-selfstyled .bm-order-item__info { flex: 1; min-width: 0; }
.bmr-standalone .bm-order-item__name,
.bmr-selfstyled .bm-order-item__name { font-size: 14px; font-weight: 600; color: var(--bmr-navy); line-height: 1.3; }
.bmr-standalone .bm-order-item__qty,
.bmr-selfstyled .bm-order-item__qty { font-size: 12px; color: var(--bmr-muted); margin-top: 2px; }
.bmr-standalone .bm-order-item__price,
.bmr-selfstyled .bm-order-item__price { font-size: 14px; font-weight: 700; color: var(--bmr-blue); flex-shrink: 0; white-space: nowrap; }

.bmr-standalone .bm-orders__header,
.bmr-selfstyled .bm-orders__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 12px; flex-wrap: wrap; }
.bmr-standalone .bm-orders__count,
.bmr-selfstyled .bm-orders__count { font-size: 15px; font-weight: 700; color: var(--bmr-navy); }

.bmr-standalone .bm-order-status,
.bmr-selfstyled .bm-order-status {
	padding: 5px 14px; border-radius: 20px; font-size: 12px; font-weight: 700;
	letter-spacing: .3px; white-space: nowrap; background: #eef2f7; color: var(--bmr-navy);
}
.bmr-standalone .bm-order-status--completed,
.bmr-selfstyled .bm-order-status--completed { background: #e8f5e9; color: #2e7d32; }
.bmr-standalone .bm-order-status--processing,
.bmr-selfstyled .bm-order-status--processing { background: #e3f2fd; color: #1565c0; }
.bmr-standalone .bm-order-status--in-transit,
.bmr-selfstyled .bm-order-status--in-transit { background: #fff3e0; color: #e65100; }
.bmr-standalone .bm-order-status--pending,
.bmr-selfstyled .bm-order-status--pending { background: #fff8e1; color: #f9a825; }
.bmr-standalone .bm-order-status--cancelled,
.bmr-selfstyled .bm-order-status--cancelled { background: #fce4ec; color: #c62828; }
.bmr-standalone .bm-order-card__actions,
.bmr-selfstyled .bm-order-card__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.bmr-standalone .bm-btn,
.bmr-selfstyled .bm-btn {
	display: inline-block; padding: 10px 20px; border-radius: 6px; font-size: 13px; font-weight: 600;
	text-decoration: none !important; white-space: nowrap; cursor: pointer; line-height: 1.4;
	text-align: center; transition: all .2s ease; border: 1px solid transparent;
}
.bmr-standalone .bm-btn--primary,
.bmr-selfstyled .bm-btn--primary { background: var(--bmr-action, #C8102E); color: #fff !important; border-color: var(--bmr-action, #C8102E); }
.bmr-standalone .bm-btn--primary:hover,
.bmr-selfstyled .bm-btn--primary:hover { background: var(--bmr-blue); border-color: var(--bmr-blue); }
.bmr-standalone .bm-btn--outline,
.bmr-selfstyled .bm-btn--outline { background: transparent; color: var(--bmr-blue) !important; border-color: var(--bmr-blue); }
.bmr-standalone .bm-btn--outline:hover,
.bmr-selfstyled .bm-btn--outline:hover { background: var(--bmr-blue); color: #fff !important; }
.bmr-standalone .bm-btn--sm,
.bmr-selfstyled .bm-btn--sm { padding: 8px 18px !important; font-size: 13px !important; }

/* The other door: guests to the lookup, signed-in customers to their account. */
.bmart-returns .bmr-footnote { font-size: 13px; color: #666; margin: 14px 0 0; }
.bmart-returns .bmr-footnote a { color: var(--bmr-blue); font-weight: 600; }

/* The label, once there is one. */
.bmr-label-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.bmr-label-meta { font-size: 12.5px; color: var(--bmr-muted); }

/* ---------------------------------------------------------------------------
   The public returns page.

   Built on the BowlersMart landing page design system, so this reads as part of
   the site rather than a plugin bolted on: navy stage, red as the action colour
   and never a text colour, steel blue for links, gold reserved for stars and the
   trim stripe. Every colour comes from --bmr-* variables printed per site, so
   Epic and CoolWick wear their own.

   Display face is Lato 900. The design system specifies Anton; Anton's @font-face
   sits in error state on bowlersmart.com and silently falls back to a thin
   generic sans, which is why it is not used here.
--------------------------------------------------------------------------- */

.bmr-standalone { --bmr-accent: var(--bmr-link, #2E6DB4); max-width: none; }
.bmr-standalone .bmr-step[data-step="items"],
.bmr-standalone .bmr-step[data-step="done"],
.bmr-standalone .bmr-return-card,
.bmr-standalone .bmr-footnote { max-width: 760px; margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------------------
   The status page, which is the page customers actually come back to.
   It is reached from an email button, so it is often somebody's whole
   impression of us. It used to render as a lone card tucked under the site nav
   with no title and a black void below the footer, because the content was too
   short to push the footer down the viewport.
--------------------------------------------------------------------------- */

/* The black band under the footer was the theme's own dark ground showing
   through on a page too short to fill the window. A viewport-relative
   min-height is the wrong tool for it: on a tall window it just moves the
   emptiness above the footer instead of below it, and I did exactly that once.
   Paint the ground white and give the content honest breathing room instead. */
.bmr-pack { margin: 12px 0 4px; border: 1px solid var(--bmr-line, #E5E5E5); border-radius: 8px; padding: 10px 14px; background: #fff; }
.bmr-pack > summary { cursor: pointer; font-weight: 600; font-size: 14.5px; }
.bmr-pack-steps { list-style: none; counter-reset: bp; margin: 10px 0 4px; padding: 0; }
.bmr-pack-steps li { counter-increment: bp; position: relative; padding: 0 0 11px 32px; }
.bmr-pack-steps li::before { content: counter(bp); position: absolute; left: 0; top: 1px; width: 22px; height: 22px;
	border-radius: 50%; background: var(--bmr-dark, #0F1B2E); color: #fff; font-size: 12px; font-weight: 700;
	text-align: center; line-height: 22px; }
.bmr-pack-steps b { display: block; font-size: 14.5px; }
.bmr-pack-steps span { color: #555; font-size: 13.5px; line-height: 1.45; }

/* The label, shown rather than linked. Sized so a 4x6 reads on a phone without
   pinching, and capped so it does not dominate a desktop card. */
.bmr-label-shot { margin: 14px 0 12px; padding: 0; }
.bmr-label-shot a { display: block; border: 1px solid var(--bmr-line, #E5E5E5); border-radius: 8px;
	overflow: hidden; background: #fff; max-width: 340px; }
.bmr-label-shot img { display: block; width: 100%; height: auto; }
.bmr-label-shot figcaption { font-size: 13px; color: #555; margin-top: 8px; max-width: 44ch; line-height: 1.45; }
@media (max-width: 560px) { .bmr-label-shot a { max-width: 100%; } }

.bmr-standalone--status { padding-bottom: 56px; background: #fff; }
body.page-template-page-blank { background: #fff; }

/* A quieter hero than the one on the start-a-return form: this is a status
   check, not a landing page, and the news is the card underneath it. */
.bmr-hero--status { padding: 34px 20px 30px; margin-bottom: 26px; }
.bmart-returns .bmr-hero--status .bmr-hero-title { font-size: clamp(24px, 3.2vw, 34px); }
.bmart-returns .bmr-hero--status .bmr-hero-sub { font-size: 15px; opacity: .85; }

.bmr-hero {
	position: relative; margin: 0 0 34px; padding: 46px 20px 40px; text-align: center;
	background: linear-gradient(135deg, var(--bmr-dark, #0F1B2E), var(--bmr-dark-mid, #1A2942), var(--bmr-dark, #0F1B2E));
}
.bmr-hero-inner { max-width: 760px; margin: 0 auto; }
.bmr-eyebrow {
	display: inline-block; background: var(--bmr-action, #C8102E); color: #fff;
	font-size: 11.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
	padding: 5px 14px; border-radius: 999px; margin-bottom: 16px;
}
.bmart-returns .bmr-hero .bmr-hero-title,
.bmart-returns h1.bmr-hero-title {
	font-family: var(--bmr-display, 'Lato', sans-serif) !important;
	font-weight: var(--bmr-display-wt, 900) !important;
	color: #fff !important;
	font-size: clamp(30px, 4.6vw, 46px); line-height: 1.08; letter-spacing: .5px;
	text-transform: uppercase; margin: 0 0 12px;
}
.bmart-returns .bmr-hero-sub {
	font-size: 16.5px; line-height: 1.55; color: rgba(255,255,255,.9); margin: 0 auto; max-width: 52ch;
}
.bmr-trust {
	list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 26px;
	margin: 22px 0 0; padding: 0;
}
.bmr-trust li { font-size: 13.5px; color: rgba(255,255,255,.85); display: flex; align-items: center; gap: 7px; }
.bmr-star { color: var(--bmr-trim, #D4A93C); font-size: 15px; line-height: 1; }
.bmr-check { color: var(--bmr-link-dark, #8CB8E8); font-weight: 700; }
.bmr-stripe {
	position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
	background: linear-gradient(90deg, var(--bmr-trim, #D4A93C) 0%, var(--bmr-action, #C8102E) 50%, var(--bmr-trim, #D4A93C) 100%);
}

.bmr-lookup-card { max-width: 480px; margin: 0 auto 30px; border-color: #E5E5E5; }
.bmr-lookup-card .bm-order-card__body { padding: 28px 30px 26px; }
.bmr-lookup { display: block; }
.bmart-returns .bmr-btn-lg {
	padding: 15px 30px !important; font-size: 15px !important; width: 100%;
	background: var(--bmr-action, #C8102E) !important; border-color: var(--bmr-action, #C8102E) !important;
	color: #fff !important; letter-spacing: .4px;
}
.bmart-returns .bmr-btn-lg:hover { filter: brightness(.92); }
.bmr-lookup-card .bmr-field input { max-width: none; }
.bmart-returns .bmr-work-head { font-family: var(--bmr-display, inherit); font-weight: 900; letter-spacing: .2px; }

/* Three real steps, in order, so the numbers mean something. */
.bmr-how {
	list-style: none; margin: 0 auto 22px; padding: 0; max-width: 860px;
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; break-inside: auto;
}
.bmr-how li {
	position: relative; padding: 20px 20px 20px 54px; background: #fff;
	border: 1px solid #E5E5E5; border-radius: 8px; font-size: 13.5px; color: #555; line-height: 1.55;
}
.bmr-how-n {
	position: absolute; left: 18px; top: 19px; width: 25px; height: 25px; border-radius: 50%;
	background: var(--bmr-action, #C8102E); color: #fff; font-size: 12px; font-weight: 700;
	display: flex; align-items: center; justify-content: center;
}
.bmr-how strong {
	display: block; font-size: 14px; color: var(--bmr-dark, #0F1B2E); margin-bottom: 4px;
	font-family: var(--bmr-display, inherit); font-weight: 900; letter-spacing: .2px;
}

.bmr-finewrap {
	max-width: 700px; margin: 0 auto; text-align: center; font-size: 12.5px; color: #555; line-height: 1.65;
}
.bmr-finewrap a { color: var(--bmr-link, #2E6DB4); font-weight: 700; }

@media (max-width: 720px) {
	.bmr-hero { padding: 34px 18px 30px; margin-bottom: 26px; }
	/* The status page is opened on a phone more often than anywhere else: it is
	   where the "Check your return" button in our email lands. */
	.bmr-hero--status { padding: 24px 16px 22px; margin-bottom: 18px; }
	.bmart-returns .bmr-hero--status .bmr-hero-title { font-size: 22px; }
	.bmart-returns .bmr-hero--status .bmr-hero-sub { font-size: 13.5px; }
	.bmr-standalone--status { padding-bottom: 32px; }
	.bmr-how { grid-template-columns: 1fr; }
	.bmr-trust { gap: 8px 18px; }
	.bmr-trust li { font-size: 12.5px; }
}

/* ---------------------------------------------------------------------------
   The Return action on WooCommerce's own orders table (stores without the
   bmart-account template). A four-word label plus a date wrapped to four lines
   on a phone and swamped the row.
--------------------------------------------------------------------------- */

.woocommerce-orders-table__cell-order-actions .bmart_return,
.woocommerce-orders-table .button.bmart_return {
	white-space: normal; line-height: 1.3; padding: 8px 14px; font-size: 13px;
	max-width: 100%; display: inline-block;
}

@media (max-width: 640px) {
	.woocommerce-orders-table__cell-order-actions .button { display: block; width: 100%; margin: 4px 0 0; }
	.bmart-returns .bmr-choice { padding: 14px; }
	.bmart-returns .bm-btn { width: 100%; }
	.bmart-returns .bmr-pick-action.bm-btn { width: auto; }
	.bmart-returns .bm-order-card__actions { width: 100%; }
	.bmart-returns .bm-order-card__actions .bm-btn { flex: 1; }
}

/* The size picker is hidden by class as well as attribute, so no theme rule can
   reveal it next to a refund selection. */
.bmart-returns .bmr-exchange.is-hidden { display: none !important; }

/* The reason drives what appears next: a single outcome is stated, a real
   choice is offered, and a defect is sent somewhere else entirely. */
.bmr-single-res { font-size: 14px; color: #5b6472; margin: 0; line-height: 1.5; }
.bmr-single-res strong { color: var(--bmr-navy); display: block; }

.bmr-defect-panel {
	border: 1px solid #f3c9c4; background: #fdf4f3; border-radius: 10px; padding: 16px 18px;
}
.bmr-defect-panel strong { display: block; color: #97202f; font-size: 14px; margin-bottom: 6px; }
.bmr-defect-panel p { font-size: 13.5px; color: #5b6472; margin: 0 0 14px; line-height: 1.55; }

.bmart-returns .bmr-item-note textarea { min-height: 70px; }

.bmr-notice {
	background: #fff8e1; border: 1px solid #f2dfa8; color: #7a5b08; border-radius: 8px;
	padding: 10px 14px; font-size: 13.5px; margin: 0 0 16px;
}

.bmr-cancel { padding: 0; font-size: 12.5px; color: var(--bmr-muted); }
.bmr-cancel:hover { color: var(--bmr-red); text-decoration: underline; }

/* The 48 hour promise. Said on the confirmation screen and again on the card,
   because "we have it" without a timeframe is what generates the phone call. */
.bmart-returns .bmr-done-note {
	margin: 14px auto 0;
	max-width: 44ch;
	font-size: 13px;
	line-height: 1.5;
	color: #555;
}

/* The replacement's tracking. Deliberately distinct from the return label's
   line, because the two parcels travel in opposite directions. */
.bmart-returns .bmr-replacement {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--bmr-navy);
	font-weight: 700;
}
.bmart-returns .bmr-replacement a { color: var(--bmr-link); font-weight: 700; }

/* ---------------------------------------------------------------------------
   The no-printer path. Built for a phone first: this is read one-handed in a
   Post Office queue, so the code is big, the instruction is one line, and
   nothing else competes with it.
--------------------------------------------------------------------------- */
.bmart-returns .bmr-qr-offer {
	margin: 12px 0 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
}
.bmart-returns .bmr-get-qr {
	font-weight: 700;
	color: var(--bmr-link);
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	font-size: 14px;
	text-decoration: underline;
}
.bmart-returns .bmr-qr-hint,
.bmart-returns .bmr-qr-failed { font-size: 13px; color: #666; }
.bmart-returns .bmr-qr-failed { display: block; width: 100%; color: var(--bmr-action); }

.bmart-returns .bmr-qr {
	display: flex;
	gap: 18px;
	align-items: center;
	margin: 14px 0 0;
	padding: 16px;
	background: #fff;
	border: 2px solid var(--bmr-navy);
	border-radius: 8px;
}
.bmart-returns .bmr-qr-img {
	/* The image carries its own "USPS LABEL BROKER ID" heading and the code in
	   print underneath, and at 132px neither could be read. The clerk may key
	   the ID in if the scan fails, so both have to be legible. */
	width: 210px;
	height: auto;
	flex: 0 0 auto;
	/* Scanned off the screen. Never let it soften. */
	image-rendering: pixelated;
}
.bmart-returns .bmr-qr-say { display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.45; }
.bmart-returns .bmr-qr-say strong { font-size: 15px; color: var(--bmr-navy); }
.bmart-returns .bmr-qr-save { font-weight: 700; color: var(--bmr-link); }

/* On a phone the code is the whole point, so give it the width. */
@media (max-width: 560px) {
	.bmart-returns .bmr-qr { flex-direction: column; gap: 10px; text-align: center; padding: 14px 12px; }
	/* Big enough for a counter scanner and for the printed ID to be read, small
	   enough that the card still fits a phone screen with the words under it.
	   Anyone who wants it larger taps "Open it full size". */
	.bmart-returns .bmr-qr-img { width: min(190px, 52vw); }
	.bmart-returns .bmr-qr-say { align-items: center; gap: 2px; }
	.bmart-returns .bmr-qr-say span { font-size: 13px; }
	.bmart-returns .bmr-qr-offer { flex-direction: column; gap: 2px; }
	/* Anything tappable has to be a real target, not a line of text. */
	.bmart-returns .bmr-get-qr { padding: 10px 0; font-size: 15px; }
}

/* ---------------------------------------------------------------------------
   Item rows on a phone.

   The row is thumb / name / outcome across. The outcome carries nowrap so a
   size never breaks mid-word, which is right on a desktop and ruinous on a
   phone: "Swapping for Mens 10 / Womens 11.5" demands about 300px, the name
   column collapses to nothing, and the product name wraps one word per line.
   Brian caught it on his own return.

   Below 600px the row becomes two lines: thumb and name, then the outcome
   underneath where it has the full width. Written unprefixed as well as
   prefixed, because the account page inherits these classes from the My
   Account dashboard on some sites and defines them here on others.
--------------------------------------------------------------------------- */
@media (max-width: 600px) {
	.bmart-returns .bm-order-item,
	.bmr-standalone .bm-order-item,
	.bmr-selfstyled .bm-order-item {
		display: grid;
		grid-template-columns: 56px minmax(0, 1fr);
		grid-template-areas: "thumb info" "outcome outcome";
		align-items: start;
		column-gap: 12px;
		row-gap: 6px;
	}
	.bmart-returns .bm-order-item__thumb,
	.bmr-standalone .bm-order-item__thumb,
	.bmr-selfstyled .bm-order-item__thumb { grid-area: thumb; }

	.bmart-returns .bm-order-item__info,
	.bmr-standalone .bm-order-item__info,
	.bmr-selfstyled .bm-order-item__info { grid-area: info; min-width: 0; }

	.bmart-returns .bm-order-item__price,
	.bmr-standalone .bm-order-item__price,
	.bmr-selfstyled .bm-order-item__price {
		grid-area: outcome;
		/* The whole reason the name was being crushed. */
		white-space: normal;
		text-align: left;
		font-size: 13px;
	}
	/* An outcome reads as a statement about the item, so tie it to one. */
	.bmart-returns .bm-order-item__price.bmr-outcome,
	.bmr-standalone .bm-order-item__price.bmr-outcome,
	.bmr-selfstyled .bm-order-item__price.bmr-outcome {
		padding-left: 68px;
		margin-top: -2px;
	}

	/* The header meta wraps into a block of orphaned labels otherwise. */
	.bmart-returns .bm-order-card__meta,
	.bmr-standalone .bm-order-card__meta,
	.bmr-selfstyled .bm-order-card__meta { gap: 10px 18px; }
	.bmart-returns .bm-order-card__divider,
	.bmr-standalone .bm-order-card__divider,
	.bmr-selfstyled .bm-order-card__divider { display: none; }

	/* Five steps across a 390px screen. Keep the dots, shrink the words. */
	.bmart-returns .bmr-track-label { font-size: 10px; line-height: 1.2; }
	.bmart-returns .bmr-track { gap: 2px; }
}