/* CALIBRE Play - /order/ (parent page-order.php; CSS only, markup and scripts untouched).
   Loaded after the template's own <style>. "html body" beats the template's rules;
   !important only where the template or its script writes an inline style="". */

:root { --panel: var(--play-card-2); }

/* ── page frame */
html body #app, html body #gate { font-family: var(--f-body); font-weight: 400; color: var(--play-ink); }
html body .wrap { padding-bottom: 72px; }
html body a.back { color: var(--play-fire-ink); font-weight: 600; }
html body .status { color: var(--play-grass); font-weight: 600; }
html body .status .dot { background: var(--play-grass); animation-name: play-order-pulse; }
@keyframes play-order-pulse { 0% { box-shadow: 0 0 0 0 rgba(91,185,138,.5); } 70% { box-shadow: 0 0 0 7px rgba(91,185,138,0); } 100% { box-shadow: 0 0 0 0 rgba(91,185,138,0); } }
html body .eyebrow { color: var(--play-muted); font-weight: 800; letter-spacing: .14em; }
html body #app h1 { font-size: clamp(34px, 6.4vw, 54px); line-height: 1.04; margin: 10px 0 12px; }
html body #app h2, html body #gate h2 { font-size: 24px; line-height: 1.1; margin: 0 0 14px; }
html body .sub { color: var(--play-muted); font-size: 16px; line-height: 1.55; }
html body .muted { color: var(--play-muted); }

/* on its own page the nav's "Grade my cards" is not the next step: outline it so the
   only full-strength orange is the button that moves the order on */
html body .bnav-cta, html body .bnav-mcta { background: transparent; color: var(--play-ink) !important; border-color: color-mix(in srgb, var(--play-fire) 70%, transparent); box-shadow: none; }
html body .bnav-cta:hover, html body .bnav-mcta:hover { background: color-mix(in srgb, var(--play-fire) 16%, transparent); }

/* ── notices at the top (script writes inline colours, hence !important) */
html body #slot-banner {
  background: color-mix(in srgb, var(--play-electric) 10%, var(--play-card)) !important; color: var(--play-ink) !important;
  border: 1px solid color-mix(in srgb, var(--play-electric) 38%, transparent); border-radius: 12px !important; padding: 10px 14px !important; font-size: 14px !important;
}
html body #promo-first100-banner {
  background: color-mix(in srgb, var(--play-grass) 16%, var(--play-card)) !important; color: var(--play-ink) !important;
  border: 1px solid color-mix(in srgb, var(--play-grass) 55%, transparent) !important; border-left: 4px solid var(--play-grass) !important;
  border-radius: 12px !important; padding: 12px 15px !important; font-size: 15px !important; font-weight: 600; line-height: 1.5;
}
/* the "offer has ended" wording (script sets an amber inline background) stays neutral, not green */
html body #promo-first100-banner[style*="200, 130, 0"], html body #promo-first100-banner[style*="200,130,0"] {
  background: color-mix(in srgb, var(--play-electric) 10%, var(--play-card)) !important;
  border-color: color-mix(in srgb, var(--play-electric) 38%, transparent) !important; border-left-color: var(--play-electric) !important; font-weight: 400;
}

/* ── the four steps: numbered like the mock-up, accents not fills */
html body .how { gap: 12px; }
html body .how-step { background: var(--play-card); border: 1px solid var(--play-line); border-radius: 14px; }
html body .how-n {
  background: transparent; color: var(--play-electric); border: 2px solid var(--play-electric);
  font: 400 15px/1 var(--f-display); width: 32px; height: 32px;
}
html body .how-t { color: var(--play-ink); font-weight: 800; font-size: 15px; }
html body .how-d { color: var(--play-muted); font-size: 13.5px; }
html body .how-example a { color: var(--play-fire-ink) !important; }

/* ── panels */
html body .card {
  background: var(--play-card); border: 1px solid var(--play-line); border-radius: var(--play-r);
  box-shadow: var(--play-shadow); padding: 22px;
}
@media (max-width: 520px) { html body .card { padding: 18px 16px; } }
html body .card label {
  color: var(--play-muted); font: 800 12px/1.3 var(--f-body); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 6px;
}

/* every text box on the page - several have no type="" so the design system's input rules miss them */
html body #app input:not([type="checkbox"]):not([type="radio"]),
html body #gate input:not([type="checkbox"]):not([type="radio"]),
html body #app select {
  background: var(--play-card-2); color: var(--play-ink); border: 1.5px solid color-mix(in srgb, var(--play-ink) 20%, transparent);
  border-radius: 10px; font: 400 16px/1.3 var(--f-body); padding: 12px 13px; min-height: 46px;
}
html body #app input:not([type="checkbox"]):not([type="radio"]):focus,
html body #gate input:not([type="checkbox"]):not([type="radio"]):focus,
html body #app select:focus {
  border-color: var(--play-water); outline: none; box-shadow: 0 0 0 3px rgba(111, 157, 224, .3);
}
/* placeholders double as the only visible label on the address lines, so keep them at 5:1 */
html body #app input::placeholder, html body #gate input::placeholder { color: #9a9cc0; opacity: 1; }
html body #app input[type="checkbox"] { accent-color: var(--play-grass); width: 18px !important; height: 18px; flex: 0 0 18px; }
html body #app select { appearance: auto; }

/* ── buttons: one full-strength orange at a time */
html body #app button, html body #gate button { font-family: var(--f-body); font-weight: 800; box-shadow: none; }
html body #app button:hover { transform: none; }
html body #app button.ghost {
  background: transparent; color: var(--play-muted); border: 1.5px solid var(--play-line); border-radius: 10px; font-weight: 600; min-height: 34px;
}
html body #app button.ghost:hover { color: var(--play-ink); border-color: color-mix(in srgb, var(--play-ink) 40%, transparent); background: transparent; }

/* main action */
html body #pay, html body #cwp-promo-continue, html body #nf-submit {
  background: var(--play-fire); color: var(--play-on); border: 2px solid rgba(0, 0, 0, .25); border-radius: 12px;
  box-shadow: var(--play-shadow); font: 800 17px/1.2 var(--f-body); padding: 16px; min-height: 56px;
  transition: transform .08s, box-shadow .08s, background .12s;
}
html body #pay:hover:not(:disabled), html body #cwp-promo-continue:hover, html body #nf-submit:hover:not(:disabled) { background: #f18566; }
html body #pay:active:not(:disabled), html body #cwp-promo-continue:active, html body #nf-submit:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .45); }
/* "add a card first": readable, clearly not ready yet */
html body #pay:disabled {
  opacity: 1; background: var(--play-card-2); color: var(--play-muted); border: 2px dashed color-mix(in srgb, var(--play-ink) 22%, transparent); box-shadow: none;
}

/* "Add to order" is the main step while the basket is empty, then steps back once a card is in */
html body #add {
  background: var(--play-fire); color: var(--play-on); border: 2px solid rgba(0, 0, 0, .25); border-radius: 12px;
  box-shadow: var(--play-shadow); font-size: 16px; padding: 12px 22px; min-height: 46px;
}
html body #add:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .45); }
html body #app:has(#cart .cart-item) #add {
  background: color-mix(in srgb, var(--play-fire) 16%, var(--play-card-2)); color: var(--play-ink);
  border: 2px solid color-mix(in srgb, var(--play-fire) 75%, transparent); box-shadow: none;
}

/* ── card search */
html body #cardsearch-results {
  background: #262a55; border: 1px solid color-mix(in srgb, var(--play-ink) 22%, transparent); border-radius: 12px;
  box-shadow: 0 18px 40px -10px rgba(0, 0, 0, .7); color: var(--play-ink); margin-top: 6px;
}
html body #cardsearch-results .csr { border-bottom-color: var(--play-line) !important; padding: 11px 14px !important; line-height: 1.35; }
html body #cardsearch-results .csr:hover { background: rgba(111, 157, 224, .14); }
html body #cardsearch-results .csr[style*="224,102,63"], html body #cardsearch-results .csr[style*="224, 102, 63"] { background: rgba(111, 157, 224, .2) !important; }
html body #cardsearch-results .csr b { font-weight: 800; }
html body #cardsearch-results .csr span[style] { color: var(--play-muted) !important; }
html body #cardsearch-results .csr-typed { color: var(--play-fire-ink) !important; font-weight: 600; }
html body #cs-picked {
  background: color-mix(in srgb, var(--play-grass) 14%, var(--play-card)) !important; border: 1px solid color-mix(in srgb, var(--play-grass) 55%, transparent) !important;
  border-radius: 12px !important; padding: 11px 14px !important; color: var(--play-ink) !important; font-size: 14.5px !important;
}
html body #cs-picked span[style] { color: var(--play-muted) !important; }
html body #browse-toggle { color: var(--play-muted) !important; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; }
html body #browse-toggle:hover { color: var(--play-ink) !important; }
html body #catalog-picker p.muted { font-size: 13.5px !important; }

/* service */
html body #svc-single-price {
  background: var(--play-card-2) !important; color: var(--play-ink); border: 1.5px solid color-mix(in srgb, var(--play-ink) 20%, transparent) !important;
  border-radius: 10px !important; font-size: 16px !important; min-height: 46px;
}
html body .card:has(#svc-desc s) #svc-single-price {
  border-color: color-mix(in srgb, var(--play-grass) 60%, transparent) !important; background: color-mix(in srgb, var(--play-grass) 12%, var(--play-card-2)) !important;
}
html body #svc-desc {
  background: var(--play-card-2) !important; color: var(--play-muted) !important; border: 1px solid var(--play-line) !important;
  border-left: 3px solid var(--play-water) !important; border-radius: 10px !important; font-size: 14px !important; padding: 11px 14px !important; margin-top: 12px !important;
}
html body #svc-desc strong { color: var(--play-ink); }
html body #svc-desc:has(s) { background: color-mix(in srgb, var(--play-grass) 10%, var(--play-card)) !important; border-color: color-mix(in srgb, var(--play-grass) 35%, transparent) !important; border-left-color: var(--play-grass) !important; }
html body #svc-desc strong[style] { color: var(--play-grass) !important; }
html body #svc-desc s { color: var(--play-muted); }
html body .qty-stepper { background: var(--play-card-2); border-color: color-mix(in srgb, var(--play-ink) 20%, transparent); }
html body .qty-stepper button { background: var(--play-card); color: var(--play-ink); border-radius: 0; padding: 0; min-height: 44px; }
html body .qty-stepper button:hover { background: #2b2f5c; }
html body .qty-stepper input { background: transparent !important; border: 0 !important; color: var(--play-ink) !important; font-family: var(--f-data) !important; min-height: 44px; }

/* ── the basket */
html body #cart > p.muted { margin: 0; padding: 14px; border: 1.5px dashed var(--play-line); border-radius: 12px; text-align: center; }
html body .cart-item {
  background: color-mix(in srgb, var(--play-ink) 3%, var(--play-card)); border: 1px solid var(--play-line); border-radius: 12px;
  padding: 4px 14px 2px; margin-bottom: 10px;
}
html body .cart-item:last-child { border-bottom: 1px solid var(--play-line); }
html body .cart-row { font-size: 15px; align-items: flex-start; }
html body .cart-item .cart-row { padding: 10px 0 8px; }
html body .cart-row > span:first-child { font-weight: 800; min-width: 0; overflow-wrap: anywhere; }
html body .cart-row > span:first-child .muted { font-weight: 400; }
html body .cart-row > span:first-child > .muted:last-child { display: block; font-size: 13.5px; margin-top: 2px; }
html body .cart-row > span:last-child { font-family: var(--f-data); font-weight: 500; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
html body #app .cart-row button.ghost { font-family: var(--f-body); font-size: 13.5px; padding: 0 12px; min-height: 44px; }

/* "Which card is it?": a to-do, not an alarm */
html body .nm label { text-transform: none; letter-spacing: 0; font-size: 13.5px !important; }
html body .nm .nm-val { margin: 0 !important; }
html body .nm:has(.nm-val[style*="--accent"]) {
  background: color-mix(in srgb, var(--play-electric) 12%, var(--play-card)); border: 1px solid color-mix(in srgb, var(--play-electric) 50%, transparent);
  border-radius: 10px; padding: 10px 12px 12px !important; margin: 0 0 12px;
}
html body .nm:has(.nm-val[style*="--accent"]) label { color: var(--play-electric) !important; }
html body .nm .nm-val[style*="--accent"] { border-color: color-mix(in srgb, var(--play-electric) 80%, transparent) !important; }

/* card value + full-value cover */
html body .cv { color: var(--play-muted); font-size: 14px; }
html body .cv-line { color: var(--play-ink); font-weight: 600; }
html body .cv-line .muted { font-weight: 400; }
html body .cv-in {
  background: var(--play-card-2); border: 1.5px solid color-mix(in srgb, var(--play-ink) 20%, transparent); border-radius: 10px;
  padding: 0 10px; font-family: var(--f-data); color: var(--play-muted);
}
html body .cv-in:focus-within { border-color: var(--play-water); box-shadow: 0 0 0 3px rgba(111, 157, 224, .3); }
html body #app .cv-in input.cv-val {
  border: 0; background: transparent; box-shadow: none; min-height: 44px; padding: 8px 0; width: 84px; font-family: var(--f-data); color: var(--play-ink);
}
html body .cv-note { margin-top: 8px; padding-left: 22px; position: relative; color: var(--play-muted); line-height: 1.45; }
html body .cv-note::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 15px; height: 15px; border-radius: 50%;
  background: color-mix(in srgb, var(--play-grass) 22%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.4l2.4 2.3 5-5.2' fill='none' stroke='%235bb98a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
}
html body .cv-note a, html body .cv-cap a { color: var(--play-fire-ink) !important; }
html body #app .cv-val::placeholder { font-family: var(--f-body); }
html body #app .cv .cv-in input.cv-val:focus { box-shadow: none; border: 0; outline: none; }
html body .card label.cv-full {
  display: flex; text-transform: none; letter-spacing: 0; font: 600 14.5px/1.4 var(--f-body);
  color: var(--play-ink); align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; min-height: 44px;
  border: 1.5px dashed color-mix(in srgb, var(--play-grass) 45%, transparent); border-radius: 10px;
}
html body .cv-full:has(input:checked) { background: color-mix(in srgb, var(--play-grass) 14%, var(--play-card)); border-style: solid; border-color: color-mix(in srgb, var(--play-grass) 60%, transparent); }
html body .cv-full input { margin: 0 !important; accent-color: var(--play-grass); }
html body .cv-full strong { font-family: var(--f-data); font-weight: 500; }
html body .cv-cap { color: var(--play-electric); }

/* ── totals: a short receipt, the total stands out */
html body .card > .total {
  font-family: var(--f-body); font-weight: 400; font-size: 15px !important; color: var(--play-muted);
  margin: 0; padding: 6px 2px; border-top: 0; align-items: center; gap: 12px;
}
html body .card > .total > span:last-child { font-family: var(--f-data); font-weight: 500; color: var(--play-ink); white-space: nowrap; }
html body #ship-row #ship {
  color: var(--play-grass); background: color-mix(in srgb, var(--play-grass) 15%, transparent); border: 1px solid color-mix(in srgb, var(--play-grass) 45%, transparent);
  border-radius: 999px; padding: 3px 10px; font: 800 13px/1.3 var(--f-body); white-space: normal; text-align: right;
}
html body #cwp-promo-row { color: var(--play-grass) !important; font-weight: 600; }
html body #cwp-promo-row > span:last-child { color: var(--play-grass); }
html body #cwp-disc-row { color: var(--play-grass) !important; }
html body #cwp-disc-row > span:last-child { color: var(--play-grass); }
html body .card > #total-row {
  margin-top: 8px; padding: 14px 2px 0; border-top: 2px solid color-mix(in srgb, var(--play-ink) 22%, transparent);
  color: var(--play-ink); font: 800 19px/1.2 var(--f-body) !important;
}
html body .card > #total-row #total { font: 500 26px/1 var(--f-data); color: var(--play-ink); }
/* the receipt starts under the basket (and under "Have a code?" when shown) */
html body #cart { margin-bottom: 6px; }
html body #cwp-discount, html body #cwp-code-msg { margin-bottom: 8px; }

/* "Have a code?" */
html body #cwp-code-toggle { color: var(--play-muted) !important; min-height: 44px; text-underline-offset: 3px; }
html body #cwp-code-toggle:hover { color: var(--play-ink) !important; }
html body #cwp-discount label { color: var(--play-muted); }
html body #cwp-discount #cwp-code { min-height: 44px; }
html body #cwp-discount #cwp-apply { height: 46px !important; padding: 0 18px; color: var(--play-ink); border-color: color-mix(in srgb, var(--play-ink) 30%, transparent); }
html body #cwp-code-msg { line-height: 1.45; }
html body #cwp-code-msg[style*="142, 47, 31"] {
  color: var(--play-ink) !important; background: color-mix(in srgb, var(--play-fire) 12%, var(--play-card)); border: 1px solid color-mix(in srgb, var(--play-fire) 45%, transparent);
  border-radius: 10px; padding: 9px 12px; font-size: 14px !important;
}
html body #cwp-code-msg[style*="26, 127, 55"] { color: var(--play-grass) !important; font-size: 14px !important; }
html body #cwp-code-msg a { color: var(--play-fire-ink) !important; }

/* ── your details */
html body #acct-status {
  background: color-mix(in srgb, var(--play-water) 12%, var(--play-card)) !important; color: var(--play-ink) !important;
  border: 1px solid color-mix(in srgb, var(--play-water) 40%, transparent); border-radius: 10px !important; font-size: 14px !important;
}
html body #logout-btn { color: var(--play-fire-ink) !important; box-shadow: none; min-height: 0; font-weight: 600; }
html body .card p.muted { font-size: 13px !important; }
html body .card label[for="addr1"] { margin-top: 18px; }
@media (max-width: 520px) { html body .row:has(#cname) > div { flex: 1 1 100%; } }
/* Google address search drop-down: keep Google's own look (its logo needs it), just round it */
html body .pac-container { border-radius: 10px; border: 0; box-shadow: 0 18px 40px -10px rgba(0, 0, 0, .7); margin-top: 4px; font-family: var(--f-body); }
html body .pac-item { padding: 6px 10px; font-size: 14px; line-height: 32px; }

/* ── errors: easy to spot, calm */
html body .msg.err {
  background: color-mix(in srgb, var(--play-fire) 13%, var(--play-card)); color: var(--play-ink);
  border: 1px solid color-mix(in srgb, var(--play-fire) 50%, transparent); border-left: 4px solid var(--play-fire);
  border-radius: 10px; padding: 12px 14px 12px 42px; font-size: 15px; font-weight: 600; position: relative; line-height: 1.45;
}
html body .msg.err::before {
  content: "!"; position: absolute; left: 13px; top: 11px; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--play-fire-ink); color: var(--play-fire-ink); font: 800 12px/16px var(--f-body); text-align: center;
}

/* ── reassurance under the form: cancel any time (was a pink warning box) */
html body #err + div {
  background: color-mix(in srgb, var(--play-water) 11%, var(--play-card)) !important; color: var(--play-ink) !important;
  border: 1px solid color-mix(in srgb, var(--play-water) 38%, transparent) !important; border-radius: 12px !important;
  padding: 12px 14px !important; font-size: 14px !important; line-height: 1.5; align-items: flex-start;
}
html body #err + div > span[aria-hidden="true"] {
  font-size: 0; flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.5' fill='none' stroke='%236f9de0' stroke-width='1.8'/%3E%3Cpath d='M6.2 10.3l2.6 2.5 5-5.3' fill='none' stroke='%236f9de0' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
html body #err + div strong { color: var(--play-ink); font-weight: 800; }
/* free return postage line */
html body #err + div + p.muted { color: var(--play-muted); font-size: 13.5px !important; line-height: 1.5; padding-left: 22px; position: relative; }
html body #err + div + p.muted::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 15px; height: 15px; border-radius: 50%;
  background: color-mix(in srgb, var(--play-grass) 22%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.4l2.4 2.3 5-5.2' fill='none' stroke='%235bb98a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
}
html body #app a[style*="accent-dark"] { color: var(--play-fire-ink) !important; }

/* tick boxes: whole row is the tap target */
html body #app > label:has(#market-consent) { align-items: center !important; min-height: 44px; font-size: 14px !important; color: var(--play-ink); }
html body #app > label:has(#market-consent) input { margin-top: 0 !important; }
html body #startnow-wrap { background: var(--play-card) !important; border-color: var(--play-line) !important; border-radius: 12px !important; padding: 12px 14px !important; }
html body #startnow-wrap:has(#start-now:checked) { border-color: color-mix(in srgb, var(--play-grass) 55%, transparent) !important; background: color-mix(in srgb, var(--play-grass) 10%, var(--play-card)) !important; }
html body #startnow-wrap > label { align-items: center !important; min-height: 44px; color: var(--play-ink) !important; text-transform: none; letter-spacing: 0; font-size: 15px !important; }
html body #startnow-wrap > label input { margin-top: 0 !important; }
html body #startnow-line { color: var(--play-muted) !important; margin-left: 28px !important; font-size: 13.5px !important; }
html body #startnow-line strong { color: var(--play-ink); }
html body #pay-note { color: var(--play-muted); font-size: 13.5px !important; margin-top: 12px !important; }

/* "no free card on this order" box (script-built, inline colours) */
html body #cwp-promo-declined {
  background: color-mix(in srgb, var(--play-electric) 11%, var(--play-card)) !important; color: var(--play-ink) !important;
  border: 1px solid color-mix(in srgb, var(--play-electric) 45%, transparent) !important; border-radius: 12px !important;
}
html body #cwp-promo-declined #cwp-promo-back { color: var(--play-ink); border-color: color-mix(in srgb, var(--play-ink) 30%, transparent); min-height: 44px; }

/* "slots are full" panel */
html body #gate .card { margin-top: 18px; }
html body #nf-success { color: var(--play-grass) !important; }
html body #gate a[style] { color: var(--play-fire-ink) !important; }

@media (prefers-reduced-motion: reduce) {
  html body .status .dot { animation: none; }
  html body #pay, html body #add, html body #cwp-promo-continue { transition: none; }
}
@media (max-width: 520px) {
  /* steps: number beside the title so the search box is reached sooner */
  html body .how { gap: 10px; margin-bottom: 18px; }
  html body .how-step { padding: 12px 12px 13px; }
  html body .how-n { float: left; width: 26px; height: 26px; font-size: 13px; margin: 0 8px 4px 0; }
  html body .how-t { line-height: 1.25; min-height: 26px; display: flex; align-items: center; }
  html body .how-d { clear: left; font-size: 13px; }
  html body .cart-item { padding: 2px 12px 2px; }
  html body .card > #total-row #total { font-size: 24px; }
}

/* "Nothing to pay" under the button when the order is the free card: good news, in grass */
html body #pay[data-cwp-free-checkout] + #pay-note { color: var(--play-ink); padding-left: 22px; position: relative; }
html body #pay[data-cwp-free-checkout] + #pay-note::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 15px; height: 15px; border-radius: 50%;
  background: color-mix(in srgb, var(--play-grass) 22%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.4l2.4 2.3 5-5.2' fill='none' stroke='%235bb98a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* Shorter order page (2026-10-07): the four step boxes, the separate example-report line (now in the intro),
   and the single-service box + its description (what £25 buys is now in the intro line) are hidden.
   The hidden <select id="service"> keeps working for the order script. If a second service ever returns,
   #svc-dropdown-wrap (not hidden here) shows the real choice again. */
html body .how, html body .how-example, html body #svc-single-wrap, html body #svc-desc { display: none !important; }
html body #welcome { max-width: 46ch; }
html body #welcome a { white-space: nowrap; font-weight: 700; }

/* "Add your cards" and "Your cards" are one box now (2026-10-07): search + Add on top, the basket and totals below */
html body .cards-divider { border-top: 1px dashed var(--play-line); margin: 18px 0 14px; }

/* Basket rows: "· Standard Grading" under every card is noise while there is only one service.
   Remove this rule if a second service comes back. (2026-10-07) */
html body .cart-row > span:first-child > span.muted:last-child { display: none; }