/* =============================================================================================
   storefront — the public pages (Home12, Catalogue12, Product12, Refurbished12, SpareParts12,
   Model12, Grading12, policy pages). Loaded after um.css by storefront/_layout.html (R9).
   The design's inline styles live here as `sf-` classes; the design's own class names (.tile,
   .ropt, .b-p, .side, .r3 …) and every token come from um.css. No new colours.

   Soft style (design/Soft-style-update.md, docs/NOTES-soft-global.md): Plus Jakarta Sans display
   type from the um.css scale, --r-* radii, 1.5px #e2e9f5 card borders (--um-card-border), the
   emphasised panel (.panel-em) for the finder and the buy box, no corner marks, sections separated by
   alternating white / pale grounds (.sec--white / .sec--pale) instead of rules, square photos (CR1).
   Home follows Jonathan's approved reference design/Home12-Soft.dc.html exactly.

   Order matters: components first, then the small utilities (so a utility such as .sf-mb-20 wins
   over a component's margin shorthand — review storefront-design-04), then the breakpoints.
   ============================================================================================= */

/* --- shared text and layout pieces --------------------------------------------------------- */
.sf-p16 { font-size: 16px; }
.sf-p16-muted { margin: 0; font-size: 16px; color: var(--um-muted); }
.sf-small-muted { margin: 0; font-size: 15px; color: var(--um-muted); }
.sf-note { margin: 0; font-size: 15px; color: var(--um-muted); }
.sf-sub { margin: 0 0 24px; color: var(--um-muted); }
.sf-lede-20 { margin: 0 0 24px; color: var(--um-text-2); font-size: 20px; }
.sf-lede-20.m0 { margin: 0; }
.sf-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.sf-navy-band { background: var(--um-navy-800); color: var(--um-white); }
a.lnk { display: inline-flex; align-items: center; }
.sf-lnk-center { justify-content: center; }
a.thumb { display: block; }
.sf-btn-48 { min-height: 48px; padding: 0 18px; font-size: 16px; }
.sf-btn-sm16 { font-size: 16px; padding: 12px; }
.sf-grid { gap: var(--um-gap-1); }             /* the design's 18px card grids on .r3 */
.sf-h2-sub { margin: 0 0 8px; }
.sf-h2-24 { margin: 0 0 24px; }
.sf-sechead { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.sf-sechead--24 { margin-bottom: 24px; }
.sf-head { padding-top: 32px; padding-bottom: 64px; }
.sf-head--48 { padding-bottom: 48px; }
.sf-sec-56 { padding-top: 56px; padding-bottom: 56px; }
.sf-pad-40 { padding-top: 40px; padding-bottom: 40px; }
.sf-side-66 { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--um-gap-4); }
.sf-side-57 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; }
.sf-side-280 { grid-template-columns: 280px minmax(0, 1fr); gap: var(--um-gap-3); }
.sf-caption { font-size: 15px; color: var(--um-muted); margin-top: 6px; }
/* Photo placeholders are machine photos too: square (CR1); radius 16px from um.css .photo-ph */
.sf-ph-sq { aspect-ratio: 1 / 1; padding: 14px; font-size: 14px; }
.sf-empty { padding: 36px; text-align: center; border-radius: var(--r-panel); }
.sf-empty__h { font-size: var(--um-h2-panel); line-height: var(--um-h2-lh); color: var(--um-navy-900); margin: 0 0 8px; }
.sf-empty__p { margin: 0 0 20px; color: var(--um-text-2); }
/* Card titles in Jakarta (the .tt face), sized per the Soft scale */
.sf-tt-use { font-size: 19px; line-height: 1.2; margin: 0 0 6px; }        /* use tiles (reference 19px) */
.sf-tt-advice { font-size: 21px; line-height: 1.2; margin: 0 0 10px; }    /* advice cards (reference 21px) */
.sf-tt-cat { font-size: var(--um-card-title); line-height: 1.25; margin: 0; }   /* part-category tiles */
.sf-tt-ring { font-size: var(--um-tile-title); line-height: 1.2; margin: 0; color: var(--um-navy-900); }

/* --- Home (Home12 Soft reference) ------------------------------------------------------------- */
.sf-hero {
  padding-top: 48px; padding-bottom: 48px;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: stretch;
}
.sf-hero__photo {
  position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--um-rule); min-height: 460px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.sf-hero__ph { position: absolute; top: 20px; right: 20px; font-size: 14px; color: var(--um-muted); }
/* The caption is a floating white card inside the photo */
.sf-hero__caption { background: var(--um-white); border-radius: var(--r-lg); padding: 26px 28px; margin: 0 16px 16px; }
.sf-hero__h1 { margin: 0 0 14px; }
.sf-hero__body { margin: 0 0 22px; color: var(--um-text-2); max-width: 54ch; }

/* The finder is an emphasised panel (.panel-em: 2px primary, radius 22px, shadow) */
.sf-finder { padding: 28px; display: flex; flex-direction: column; scroll-margin-top: 20px; }
.sf-finder__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.sf-finder__step { font-size: 15px; color: var(--um-muted); margin: 0; }
.sf-progress { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: 24px; }
.sf-progress span { height: 6px; border-radius: var(--r-pill); background: var(--um-rule); }
.sf-progress .sf-progress__done { background: var(--um-primary); }
.sf-progress .sf-progress__current { background: var(--um-accent); }
.sf-finder__form { margin: 0; }
.sf-finder__q { font-size: var(--um-h2-panel); line-height: var(--um-h2-lh); color: var(--um-navy-900); margin: 0 0 20px; }
.sf-finder__q:focus { outline: none; }
.sf-finder__q--done { margin-bottom: 14px; }
.sf-arrow { color: var(--um-primary); }
.sf-summary { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 6px; }
.sf-summary li { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--um-rule); padding: 6px 0; font-size: 16px; }
.sf-summary strong { text-align: right; }
.sf-finder__foot { margin-top: auto; padding-top: 18px; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.sf-ring { font-size: 16px; font-weight: 600; }
.sf-finder.is-loading { opacity: .6; }

/* USP strip: pale, no rules (the hero band above is pale too) */
.sf-usps { padding-bottom: 12px; }
.sf-usp { display: flex; gap: 14px; align-items: flex-start; padding: 22px 18px 22px 0; }
.sf-usp__icon { flex: none; }
.sf-usp__title { font-weight: 700; margin: 0 0 2px; font-size: 17px; }
.sf-usp__body { margin: 0; font-size: 15px; color: var(--um-muted); }
.sf-tile-body { padding: 16px; }
.sf-kicker-tight { margin: 0 0 2px; }
.sf-reviews { padding-top: 36px; padding-bottom: 36px; display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.sf-reviews__h { font-size: var(--um-h2-panel); color: var(--um-white); }
.sf-split { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.sf-split > * { min-width: 0; }   /* a card never widens the page (its contents wrap or clip instead) */
/* Part-exchange and grading cards: 1.5px #e2e9f5, radius 20px (the .card border) */
.sf-card { border-radius: var(--r-panel); padding: 32px; display: flex; flex-direction: column; }
.sf-card__h { font-size: 30px; line-height: var(--um-h2-lh); color: var(--um-navy-900); margin: 0 0 12px; }
.sf-card__p { margin: 0 0 24px; color: var(--um-text-2); }
.sf-push { margin-top: auto; align-self: flex-start; }
.sf-push-link { margin-top: auto; font-weight: 600; }
.sf-advice-tile { padding: 24px; }

/* --- Catalogue ------------------------------------------------------------------------------ */
.sf-page-24 { padding-top: 24px; }
.sf-listhead { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; margin-bottom: 8px; }
.sf-count { margin: 0; font-size: 17px; color: var(--um-muted); }
.sf-listlede { margin: 0 0 24px; color: var(--um-text-2); max-width: 70ch; }
.sf-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.sf-filters { padding: 22px; border-radius: var(--r-panel); }
.sf-fieldset { margin: 0 0 18px; }
.sf-fieldset--rule { border-top: 1px solid var(--um-rule); padding-top: 14px; }   /* an internal divider */
/* Floated, a legend no longer sits on the fieldset's top border, so the divider is a full-width rule
   14px above each heading (not a line running on from "Budget, ex VAT") and every group has the same
   heading-to-option spacing (visual QA HC-03). */
.sf-legend {
  float: left; width: 100%;
  font-family: var(--um-font-head); font-size: var(--um-card-title); font-weight: 700; line-height: 1.25;
  letter-spacing: var(--um-head-tracking); color: var(--um-navy-900); padding: 0; margin-bottom: 6px;
}
.sf-legend + label, .sf-legend + .chk { clear: both; }
/* Below 1061px the filters fold behind one "Filter machines" button, so results start on the first
   screen (visual QA HC-01); above it they are always open (the summary is hidden). The form is still
   the one GET form: fields inside a closed <details> are submitted as usual. */
.sf-filterbox > summary { list-style: none; cursor: pointer; }
.sf-filterbox > summary::-webkit-details-marker { display: none; }
.sf-filterbox > summary::after { content: "+"; font-size: 24px; line-height: 1; color: var(--um-primary); }
.sf-filterbox[open] > summary::after { content: "\2013"; }
.sf-filterbox__on { font-weight: 500; color: var(--um-muted); }
.sf-results-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--um-rule);
}
.sf-sort { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; }
.sf-chips { list-style: none; margin: 0 0 18px; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.sf-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border: 1.5px solid var(--um-primary); border-radius: var(--r-pill); background: var(--um-tint-3); color: var(--um-text);
  font-weight: 600; font-size: 16px; text-decoration: none;
}
.sf-chip:hover { background: var(--um-tint-1); color: var(--um-text); }
.sf-pager { margin-top: 28px; display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.sf-pager__showing { margin: 0; font-size: 16px; color: var(--um-text-2); }
.sf-pager ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.sf-nearest { margin-top: 36px; }

/* --- Product -------------------------------------------------------------------------------- */
.page--product > .bc { margin-bottom: 18px; }   /* Product12: 18px under the breadcrumb (14px elsewhere) */
.sf-gallery__main {
  /* CR1 (Jonathan 2026-09-26): machine photos are square, 1:1, on the product page too. */
  position: relative; aspect-ratio: 1 / 1; border: var(--um-card-border); background: var(--um-rule);
  border-radius: var(--r-panel); overflow: hidden;
  display: flex; align-items: center; justify-content: center; text-align: center; margin-bottom: 12px;
}
.sf-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
/* "n / total" counter: a floating pill, like the card tags */
.sf-gallery__count {
  position: absolute; bottom: 12px; left: 12px; background: var(--um-navy-900); color: var(--um-white);
  border-radius: var(--r-pill); font-size: 14px; font-weight: 600; padding: 4px 12px;
}
.sf-gallery__ph { font-size: 15px; color: var(--um-muted); padding: 20px; }
.sf-thumbs { margin-bottom: 10px; }
/* The buy box is an emphasised panel (.panel-em) */
.sf-buy { padding: 28px; }
.sf-buy__kicker { margin: 0 0 4px; }
.sf-buy__title { font-size: var(--um-h1); line-height: var(--um-h1-lh); color: var(--um-navy-900); margin: 0 0 12px; }
/* Machine options (docs/MACHINE_OPTIONS.md): the Hub's subtitle line under the H1, then its chips
   (Soft style: pale tint fill, 1.5px outline border, pill, navy text). */
.sf-buy__subtitle { margin: -6px 0 12px; font-size: 18px; font-weight: 600; color: var(--um-navy-800); }
.sf-optchips { list-style: none; margin: 0 0 14px; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.sf-optchip {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px;
  background: var(--um-tint-3); border: 1.5px solid var(--um-outline); border-radius: var(--r-pill);
  color: var(--um-navy-800); font-size: 15px; font-weight: 600;
}
.sf-buy__ref { margin: 0 0 18px; font-size: 15px; color: var(--um-muted); }
.sf-buy__ref strong { color: var(--um-text); }
.sf-buy__lead { margin: -8px 0 18px; font-size: 16px; color: var(--um-text-2); }
.sf-finance-lg { margin-top: 12px; padding: 10px 12px; font-size: 16px; }
.sf-add { margin: 0; }
.sf-add > .b-p:first-child { margin-top: 22px; }
.sf-delivery { margin: 22px 0 18px; }
.sf-delivery__legend { font-weight: 700; margin-bottom: 10px; padding: 0; }
.sf-delivery[disabled] .ropt { cursor: default; }
/* State cards (reserved, being bought, your checkout, trade account): a soft tinted note */
.sf-statecard { margin: 22px 0 0; border: 1.5px solid var(--um-outline); border-radius: var(--r-opt); background: var(--um-tint-3); padding: 16px 18px; }
.sf-statecard p { margin: 0 0 8px; font-size: 16px; color: var(--um-text-2); }
.sf-statecard p:last-child { margin-bottom: 0; }
.sf-statecard .b-p, .sf-statecard .b-o { margin-top: 6px; }
.sf-statecard__h.sf-statecard__h { font-weight: 700; color: var(--um-text); font-size: 18px; }
.sf-reassure { list-style: none; margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid var(--um-rule); display: grid; gap: 8px; font-size: 16px; }
.sf-reassure li { display: flex; gap: 10px; }
.sf-reassure svg { flex: none; }
.sf-subnav { margin: 56px 0 24px; }   /* a white gap above the pale report band: a floating strip, not a tab (visual QA PBC-02) */
/* The page's lower sections sit inside the page column; odd ones get a full-bleed pale ground
   (box-shadow + clip-path paint it edge to edge without adding horizontal scroll), so sections are
   told apart by alternating white / pale grounds instead of the v12 rules. */
.sf-psec { padding: 48px 0; scroll-margin-top: 12px; }
.page--product > .sf-psec:nth-of-type(odd),
.sf-ptabs > .sf-psec:nth-of-type(odd) {
  background: var(--um-tint-4);
  box-shadow: 0 0 0 100vmax var(--um-tint-4);
  clip-path: inset(0 -100vmax);
}
.sf-psec--last:nth-of-type(even), .sf-ptabs + .sf-psec--last { padding-bottom: 0; }
/* Tabs (storefront.js adds .is-tabbed): the strip sits on the pale ground of the one section showing.
   Each tab is a 52px touch target; the chosen one is navy with a bar under it. The section's own
   heading repeats the tab's words, so it is kept for screen readers and hidden on screen. */
.sf-ptabs.is-tabbed > .sf-subnav { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; position: relative; z-index: 1; -webkit-mask-image: none; mask-image: none; }
.sf-ptabs.is-tabbed > .sf-psec {
  background: var(--um-tint-4);
  box-shadow: 0 0 0 100vmax var(--um-tint-4);
  clip-path: inset(0 -100vmax);
  padding-top: 36px;
}
.sf-ptabs.is-tabbed > .sf-psec[hidden] { display: none; }
.sf-ptabs.is-tabbed [role="tab"] { position: relative; color: var(--um-muted); }
.sf-ptabs.is-tabbed [role="tab"][aria-selected="true"] { color: var(--um-navy-900); }
.sf-ptabs.is-tabbed [role="tab"][aria-selected="true"]::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--um-primary);
}
.sf-ptabs.is-tabbed [role="tab"]:hover { color: var(--um-primary); text-decoration: none; }
.sf-ptabs.is-tabbed [role="tab"]:focus-visible { outline: var(--um-focus, 3px solid var(--um-primary)); outline-offset: -3px; }
.sf-ptabs.is-tabbed .sf-tabdup { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sf-report p { margin: 0 0 14px; font-size: 19px; }
.sf-report p:last-child { margin-bottom: 0; }
.sf-panel { padding: 24px; }
.sf-panel__h { font-size: var(--um-h2-panel); line-height: var(--um-h2-lh); color: var(--um-navy-900); margin: 0 0 6px; }
.sf-panel__p { margin: 8px 0; font-size: 16px; color: var(--um-text-2); }
.sf-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sf-checks li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--um-rule); font-size: 17px; }
.sf-checks li:last-child { border-bottom: 0; }
.sf-checks__note { display: block; font-size: 15px; color: var(--um-muted); }
.sf-battery__pct { font-family: var(--um-font-head); font-weight: 800; letter-spacing: var(--um-head-tracking); font-size: 36px; line-height: 1; color: var(--um-primary); margin: 6px 0 8px; }
.sf-battery__bar { height: 8px; border-radius: var(--r-pill); overflow: hidden; background: var(--um-rule); }
.sf-battery__bar span { display: block; height: 100%; background: var(--um-primary); }
.sf-desc { max-width: 70ch; margin: 0 0 28px; }
.sf-desc p { margin: 0 0 12px; color: var(--um-text-2); }
.sf-spec-h { margin: 0 0 8px; }
.sf-included {
  display: flex; gap: 12px; align-items: center; border: var(--um-card-border); border-radius: var(--r-opt);
  background: var(--um-white); padding: 18px; font-weight: 600;
}
.sf-included svg { flex: none; }

/* --- Refurbished ---------------------------------------------------------------------------- */
/* Work cards: white soft cards on the pale band (v12: pale boxes on a white band) */
.sf-work { padding: 22px; }
.sf-work__n { font-family: var(--um-font-head); font-weight: 800; letter-spacing: var(--um-head-tracking); font-size: 26px; line-height: 1; color: var(--um-link); margin: 0 0 10px; }   /* A18: the accent was 2.2:1 on white; the link blue is 5.9:1 */
.sf-work__t { font-family: var(--um-font-head); font-weight: 700; font-size: var(--um-tile-title); line-height: 1.2; margin: 0 0 6px; color: var(--um-navy-900); }
.sf-work__b { margin: 0; font-size: 16px; color: var(--um-text-2); }

/* --- Spare parts ---------------------------------------------------------------------------- */
.sf-partform { padding: 22px; display: grid; gap: 12px; }
.sf-partform__h { font-weight: 700; margin: 0; }
.sf-grid6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.sf-cattile { padding: 18px; gap: 10px; }
.sf-cattile[aria-current="true"] { border-color: var(--um-primary); background: var(--um-tint-3); }
.sf-partlist { border-top: 1px solid var(--um-line); }   /* parts stay rows: a row rule, not a section rule */
.sf-partphoto { aspect-ratio: 1 / 1; width: 100%; object-fit: cover; border: var(--um-card-border); border-radius: var(--r-sm); font-size: 11px; padding: 4px; }
img.sf-partphoto { padding: 0; }
.sf-part__name { margin: 0; font-family: var(--um-font-head); font-weight: 700; font-size: var(--um-tile-title); line-height: 1.2; color: var(--um-navy-900); }
.sf-part__fits { margin: 2px 0 0; font-size: 15px; color: var(--um-muted); }
.sf-badge { justify-self: start; }   /* the New / Tested used pill (.pill .pill--outline) */
.sf-part__actions { display: flex; align-items: center; gap: 14px; justify-content: flex-end; flex-wrap: wrap; }
.sf-part__price { font-family: var(--um-font-head); font-weight: 800; letter-spacing: var(--um-head-tracking); font-size: var(--um-price-card); color: var(--um-navy-900); }

/* --- Model ---------------------------------------------------------------------------------- */
.sf-facts { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 24px; }
.sf-facts__v { font-family: var(--um-font-head); font-weight: 800; letter-spacing: var(--um-head-tracking); font-size: 36px; line-height: 1; margin: 0; color: var(--um-primary); }
.sf-facts__k { margin: 2px 0 0; font-size: 15px; color: var(--um-muted); }
/* Product page, model inheritance (after .sf-facts so the modifier's margin wins): the model's key
   figures head the Specification section, a size down so a machine's longer wording still fits;
   "About the <model>"; the link to the model page */
.sf-facts--spec { margin: 0 0 28px; }
.sf-facts--spec .sf-facts__v { font-size: 30px; overflow-wrap: anywhere; }
.sf-about-h { margin: 0 0 10px; }
.sf-more-model { margin: 24px 0 0; font-weight: 700; }
/* The model photo: square (CR1), inside a clipped soft card */
.sf-model-frame { border-radius: var(--r-lg); width: 100%; max-width: 480px; justify-self: end; }
/* The head's right-hand card (model.html): a machine in stock, else the headline figures. */
.sf-model-pick { width: 100%; max-width: 400px; justify-self: end; }
.sf-model-glance { width: 100%; max-width: 480px; justify-self: end; padding: 28px; border-radius: var(--r-lg); }
.sf-glance { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 20px; }
.sf-glance__v { font-family: var(--um-font-head); font-weight: 800; letter-spacing: var(--um-head-tracking); font-size: 28px; line-height: 1.1; margin: 0; color: var(--um-primary); overflow-wrap: anywhere; }
.sf-glance__k { margin: 4px 0 0; font-size: 15px; color: var(--um-muted); }   /* capped: the text column carries the hero (visual QA PBC-09) */
.sf-model-photo { aspect-ratio: 1 / 1; width: 100%; object-fit: cover; border: 0; padding: 14px; font-size: 14px; }
img.sf-model-photo { padding: 0; }
.sf-ringtile { background: var(--um-white); }   /* the dashed "ring me" tile on the pale band */
.sf-ring-first { font-weight: 700; color: var(--um-primary); }
/* Specification: a rounded soft box like um.css .spec-table, with the design's left-aligned values */
.sf-spec2 {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--um-white); border: var(--um-card-border); border-radius: var(--r-opt);
}
.sf-spec2 th, .sf-spec2 td { border-top: 1px solid var(--um-rule); padding: 12px 18px; font-size: 17px; }
.sf-spec2 tr:first-child > th, .sf-spec2 tr:first-child > td { border-top: 0; }
.sf-spec2 th { text-align: left; font-weight: 600; }
.sf-spec2 td { color: var(--um-text-2); }
/* A model with more than one spec table: each title as a row in the one box (model.html). */
.sf-spec2 .sf-spec2__group th { background: var(--um-tint-4); padding-top: 14px; padding-bottom: 10px; }
.sf-spec2 .sf-spec2__group .kicker { margin: 0; }
/* FAQs: a white rounded card of rows on the pale band */
.sf-faqs { max-width: 900px; margin-top: 20px; background: var(--um-white); border: var(--um-card-border); border-radius: var(--r-lg); padding: 0 24px; }
.sf-faqs .faq + .faq { border-top: 1px solid var(--um-rule); }
.sf-faqs .faq p { margin: 0 0 20px; color: var(--um-text-2); }

/* --- Grading -------------------------------------------------------------------------------- */
.sf-grades { display: grid; gap: 18px; }
.side.sf-graderow {
  border: var(--um-card-border); border-radius: var(--r-panel); overflow: hidden; background: var(--um-white);
  grid-template-columns: 140px minmax(0, 1fr) minmax(0, 1fr); gap: 0; align-items: stretch;
}
.sf-graderow__letter { display: flex; align-items: center; justify-content: center; min-height: 120px; border-right: 1.5px solid var(--um-rule); }   /* an edge, so grade U's white panel still reads as a panel (visual QA PBC-10) */
.sf-graderow__letter > span { font-family: var(--um-font-head); font-weight: 800; letter-spacing: var(--um-head-tracking); font-size: 72px; line-height: 1; }
.sf-graderow__body { padding: 24px; }
.sf-graderow__label { font-family: var(--um-font-head); font-weight: 800; letter-spacing: var(--um-head-tracking); font-size: var(--um-h2-panel); line-height: var(--um-h2-lh); margin: 0 0 8px; color: var(--um-navy-900); }
.sf-graderow__p { margin: 0 0 10px; color: var(--um-text-2); font-size: 17px; }
.sf-graderow__photos { padding: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: center; }
.sf-check { display: flex; gap: 12px; align-items: flex-start; border: var(--um-card-border); border-radius: var(--r-opt); background: var(--um-white); padding: 16px; }
.sf-check svg { flex: none; margin-top: 2px; }
.sf-check__b { display: block; font-size: 15px; color: var(--um-muted); }

/* --- Policy and advice pages (no design: Soft, consistent with Home) --------------------------- */
.sf-policy { align-items: start; }
.sf-prose { max-width: 68ch; }
.sf-prose h2 { font-size: var(--um-h2-panel); line-height: var(--um-h2-lh); color: var(--um-navy-900); margin: 36px 0 10px; }
.sf-prose h3 { font-size: var(--um-tile-title); line-height: 1.2; font-weight: 700; color: var(--um-navy-900); margin: 24px 0 8px; }
.sf-prose p, .sf-prose li { font-size: 17px; }
.sf-prose p { margin: 0 0 14px; }
.sf-prose ul { margin: 0 0 16px; padding-left: 22px; display: grid; gap: 6px; }
/* The closing "not sure?" line: a soft pale note, not a rule */
.sf-prose__close { margin-top: 36px !important; padding: 16px 18px; border-radius: var(--r-opt); background: var(--um-tint-4); color: var(--um-text-2); }
.sf-article { padding-top: 48px; scroll-margin-top: 12px; }
.sf-article h2.h2 { margin: 0 0 14px; font-size: var(--um-h2); }
.sf-policy__aside { position: sticky; top: 20px; display: grid; gap: 18px; }
.sf-phone-hours { margin: 8px 0 0 !important; font-size: 15px !important; }
/* Help-page links: a rounded card of rows */
.sf-policynav { display: flex; flex-direction: column; border: var(--um-card-border); border-radius: var(--r-lg); background: var(--um-white); padding: 4px 18px; }
.sf-policynav a { display: flex; align-items: center; min-height: 48px; font-weight: 600; text-decoration: none; color: var(--um-text); }
.sf-policynav a + a { border-top: 1px solid var(--um-rule); }
.sf-policynav a:hover { color: var(--um-primary); text-decoration: underline; }
.sf-policynav a[aria-current="page"] { color: var(--um-primary); }

/* --- Design slots with no real content (audit B31) ------------------------------------------------
   A photo slot shows a real photograph (settings.SITE_PHOTOS) or nothing; the "[PHOTO]" boxes only
   come back with SHOW_DESIGN_PLACEHOLDERS. These rules close the gap a missing slot would leave. */
.sf-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sf-hero__caption { position: relative; }   /* above a real hero photo */
.sf-hero__photo.sf-hero__photo--none { min-height: 0; padding-top: 0; background: none; justify-content: center; overflow: visible; }
.sf-hero__photo--none .sf-hero__caption { margin: 0; border: var(--um-card-border); }
.side.sf-graderow.sf-graderow--nophotos { grid-template-columns: 140px minmax(0, 1fr); }
.sf-ph-img { display: block; width: 100%; object-fit: cover; border-radius: var(--r-slot); }
.sf-partphoto--icon { display: flex; align-items: center; justify-content: center; background: var(--um-tint-4); padding: 0; }

/* --- Small utilities (last, so they beat the components above) ------------------------------- */
.sf-mb-8 { margin-bottom: 8px; }
.sf-mb-10 { margin-bottom: 10px; }
.sf-mb-14 { margin-bottom: 14px; }
.sf-mb-16 { margin-bottom: 16px; }
.sf-mb-18 { margin-bottom: 18px; }
.sf-mb-20 { margin-bottom: 20px; }
.sf-mb-24 { margin-bottom: 24px; }
.sf-mb-28 { margin-bottom: 28px; }
.sf-mb-40 { margin-bottom: 40px; }
.sf-mt-8 { margin-top: 8px; }
.sf-mt-12 { margin-top: 12px; }
.sf-max-52 { max-width: 52ch; }
.sf-max-56 { max-width: 56ch; }
.sf-max-64 { max-width: 64ch; }
.sf-align-center { align-items: center; }
.sf-align-end { align-items: end; }
.sf-gap-12 { gap: 12px; }
.sf-g2m-8 { gap: 8px; margin-top: 8px; }
.sf-g2m-10 { gap: 10px; }
.sf-g2m-12 { gap: 12px; }

/* --- The model cancellation form (/returns/#form, /terms/#form, /returns/cancellation-form/) ----
   A plain bordered box with lines to write on, so it prints cleanly (CCR Sch 3 Part B). */
.sf-cform { margin: 8px 0 18px; padding: 20px 22px; border: 1.5px solid var(--um-navy-900); border-radius: var(--r-opt); background: var(--um-white); color: var(--um-text); }
.sf-cform__h { margin: 0 0 10px !important; font-weight: 700; font-size: 19px !important; color: var(--um-navy-900); }
.sf-cform__to { font-weight: 600; }
.sf-cform__lines { list-style: none; padding-left: 0 !important; gap: 14px !important; }
.sf-cform__lines li::before { content: "— "; }
.sf-cform__write { display: block; border-bottom: 1.5px dotted var(--um-muted); height: 30px; }
.sf-cform__note { margin: 0 !important; font-size: 15px !important; }
.sf-cform-page { margin-inline: auto; }
.sf-cform-page .sf-cform__write { height: 40px; }
.sf-cform-page [data-print][hidden] { display: none !important; }
@media print {
  .sf-print-form .utilbar, .sf-print-form .site-header, .sf-print-form .site-footer, .sf-print-form .bc,
  .sf-print-form .sf-cform-page__print, .sf-print-form .sf-cform-page__back { display: none !important; }
  .sf-print-form, .sf-print-form main { background: #fff !important; }
  .sf-cform-page { max-width: none; font-size: 12pt; }
  .sf-cform-page p, .sf-cform-page li { font-size: 12pt !important; }
  .sf-cform { border-color: #000; break-inside: avoid; }
  .sf-cform__write { border-bottom-color: #000; }
}

/* --- Breakpoints (the design's 1060px and 640px) ---------------------------------------------- */
@media (max-width: 1060px) {
  .sf-hero, .sf-split { grid-template-columns: 1fr !important; }
  .sf-policy__aside { position: static; }
  .side.sf-graderow { grid-template-columns: 1fr !important; }
  .side.sf-graderow .sf-graderow__letter { border-right: 0; border-bottom: 1.5px solid var(--um-rule); }
  .sf-model-frame, .sf-model-pick, .sf-model-glance { justify-self: start; }
  /* the filter panel folds: the button stands alone, the open panel is the card */
  .sf-filters { padding: 0; border: 0; background: none; }
  .sf-filterbox__body { margin-top: 12px; padding: 22px; border: var(--um-card-border); border-radius: var(--r-panel); background: var(--um-white); }
  /* Stacked product page (tablet): cap the square photo so the price and the add button stay
     near the first screen (review storefront-design-09); the thumbs and note follow it. */
  .sf-gallery { max-width: 560px; width: 100%; margin-inline: auto; }
}
@media (max-width: 640px) {
  /* Product tabs: the three share the strip's width (two lines at most), nothing off the edge. */
  .sf-ptabs.is-tabbed > .sf-subnav { overflow-x: visible; padding: 0; }
  .sf-ptabs.is-tabbed [role="tab"] { flex: 1 1 0; justify-content: center; text-align: center; white-space: normal; padding: 6px 8px; font-size: 15px; line-height: 1.25; }
  .sf-ptabs.is-tabbed [role="tab"][aria-selected="true"]::after { left: 8px; right: 8px; }
  .sf-hero__photo { min-height: 0; padding-top: 220px; }   /* keep a photo area above the caption */
  .sf-hero__ph { left: 18px; right: 18px; }
  .sf-hero__caption { padding: 22px 18px; margin: 0 10px 10px; }
  .sf-finder { padding: 22px 18px; }
  /* 320px: the part-exchange card's nowrap button used to push the page 19px wide (design-08) */
  .sf-card { padding: 24px 18px; }
  .sf-card .b-p { white-space: normal; text-align: center; }
  .sf-card .grade-strip > div { padding: 12px 4px; }   /* five cells in a 245px card at 320px */
  .sf-buy { padding: 22px 18px; }
  .sf-buy .b-p, .sf-buy .b-o { white-space: normal; text-align: center; }   /* "Add to basket — £1,049.50" */
  .sf-sechead { align-items: start; }
  .sf-part__actions { justify-content: flex-start; }
  /* The New / Tested used pill goes under the part name, in the text column, never in the 72px photo
     column where "Tested used" ran into the price (visual QA PBC-01) */
  .prow { row-gap: 10px; }
  .prow .sf-badge { grid-column: 2; }
  /* the sub-nav strip scrolls sideways: fade its right edge so "What's included" reads as more (PBC-02) */
  .sf-subnav {
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
    mask-image: linear-gradient(90deg, #000 85%, transparent);
  }
  .side.sf-graderow .sf-graderow__letter { min-height: 96px; }
}
@media (min-width: 1061px) {
  /* The filters are always open here. Browsers with ::details-content show them before any script
     runs; older ones get the panel opened by storefront.js (and keep the button if scripts are off). */
  .sf-filterbox[open] > summary { display: none; }
  @supports selector(::details-content) {
    .sf-filterbox > summary { display: none; }
    .sf-filterbox::details-content { content-visibility: visible; }
  }
}
@media (min-width: 641px) {
  /* One spec group (most imported stock): one readable table, not a third of the row with its rows
     wrapping (visual QA PBC-07). Beats um.css's .r3 1fr 1fr !important at 641-1060px. */
  .r3.sf-spec-one { grid-template-columns: minmax(0, 620px) !important; }
}

/* Product card: the Hub's subtitle line under the title (docs/MACHINE_OPTIONS.md) */
.tile__subtitle { margin: -4px 0 6px; font-size: 15px; font-weight: 600; color: var(--um-navy-800); }

/* Home "wow" (Jonathan, 9 Oct 2026) ------------------------------------------------------------
   .hx  the navy hero: words, live stock count, and a showcase of real machines (storefront.js 10)
   .fx  the finder band, lifted over the hero's foot
   .jy  "How a machine reaches you"
   .ux  "Shop by how you'll use it" tiles with a stock photo and count
   [data-reveal]  fade up as they come into view (storefront.js 11; only with .js-reveal on <html>,
   so nothing is ever hidden without scripts, and never with prefers-reduced-motion) */
.hx { position: relative; overflow: hidden; color: #fff;
      background: radial-gradient(1200px 520px at 85% 15%, #2a56c4 0%, rgba(42, 86, 196, 0) 60%),
                  linear-gradient(160deg, var(--um-navy-900) 0%, var(--um-navy-800) 45%, var(--um-primary) 100%); }
.hx__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .22; mix-blend-mode: luminosity; }
.hx .hx__kicker { margin: 0 0 10px; color: var(--um-accent); }
.hx__glow { position: absolute; inset: 0; pointer-events: none; opacity: .5;
            background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.5px); background-size: 22px 22px;
            mask-image: linear-gradient(180deg, #000 0%, transparent 85%); -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%); }
.hx__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px;
            align-items: center; padding-top: 56px; padding-bottom: 120px; }
.hx__live { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 7px 14px; border-radius: 999px;
            background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); color: #fff;
            font: 700 15px/1.2 var(--um-font-head); letter-spacing: .01em; }
.hx__dot { width: 10px; height: 10px; border-radius: 50%; background: #3ee08f; box-shadow: 0 0 0 0 rgba(62, 224, 143, .7);
           animation: hx-pulse 2.2s infinite; }
@keyframes hx-pulse { 0% { box-shadow: 0 0 0 0 rgba(62, 224, 143, .65); } 70% { box-shadow: 0 0 0 12px rgba(62, 224, 143, 0); } 100% { box-shadow: 0 0 0 0 rgba(62, 224, 143, 0); } }
.hx__h1 { font: var(--um-head-weight) clamp(36px, 4.6vw, 60px)/1.04 var(--um-font-head); letter-spacing: -0.03em; margin: 0 0 18px; color: #fff; }
.hx__h1 span { display: block; background: linear-gradient(90deg, #9cc2ff, #d9e7ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hx__body { font-size: 19px; line-height: 1.55; color: var(--um-on-navy); max-width: 34em; margin: 0 0 26px; }
.hx__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.hx__btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 999px; font: 700 17px/1 var(--um-font-head);
           text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.hx__btn--p { background: #fff; color: var(--um-navy-800); box-shadow: 0 10px 30px rgba(5, 12, 40, .35); }
.hx__btn--p:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(5, 12, 40, .45); color: var(--um-primary); }
.hx__btn--o { color: #fff; border: 1.5px solid var(--um-on-navy-outline); }
.hx__btn--o:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.hx__btn:focus-visible { outline: 3px solid var(--um-accent); outline-offset: 3px; }
.hx__trust { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; color: var(--um-on-navy); font-size: 16px; }
.hx__trust li { display: inline-flex; align-items: center; gap: 8px; }
.hx__trust li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; flex: none;
                        background: #3ee08f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f1c44' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat; }

/* the showcase: a card stack; the current card in front, the next two peeking behind */
.hx__show { position: relative; width: 100%; max-width: 470px; justify-self: end; }
.hx__stage { position: relative; display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px; }
.hx__slide { flex: 0 0 82%; scroll-snap-align: center; display: block; background: #fff; color: var(--um-text); border-radius: 22px;
             overflow: hidden; text-decoration: none; box-shadow: 0 30px 60px rgba(3, 9, 33, .45), 0 2px 0 rgba(255, 255, 255, .4) inset; }
.hx__photo { position: relative; aspect-ratio: 1 / 1; background: linear-gradient(180deg, #f6f8fc, #e9eef8); overflow: hidden; }
.hx__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 6s ease; }
.hx__grade, .hx__refurb { position: absolute; top: 14px; padding: 6px 12px; border-radius: 999px; font: 800 13px/1 var(--um-font-head); }
.hx__grade { left: 14px; background: var(--um-navy-800); color: #fff; }
.hx__refurb { left: auto; right: 14px; background: var(--um-amber); color: var(--um-text); }
.hx__cap { padding: 18px 22px 20px; }
.hx__name { font: 800 21px/1.2 var(--um-font-head); letter-spacing: -0.01em; margin: 0 0 4px; color: var(--um-text); }
.hx__type { margin: 0 0 10px; color: var(--um-muted); font-size: 16px; }
.hx__price { margin: 0; font: 800 28px/1.1 var(--um-font-head); color: var(--um-navy-800); }
.hx__price span { font: 600 15px var(--um-font-body); color: var(--um-muted); }
.hx__inc { margin: 4px 0 0; font-size: 13.5px; line-height: 1.35; color: var(--um-muted); }
.hx__findwrap { color: var(--um-text); }

/* with scripts: the stack */
.hx__show.is-live .hx__stage { display: block; position: relative; overflow: visible; padding: 0; perspective: 1400px; }
.hx__show.is-live .hx__slide { position: absolute; inset: 0 auto auto 0; width: 100%; opacity: 0; pointer-events: none;
  transform: translate3d(0, 26px, -120px) scale(.92); transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .7s ease; }
.hx__show.is-live .hx__slide.is-on { position: relative; opacity: 1; pointer-events: auto; transform: none; z-index: 3; }
.hx__show.is-live .hx__slide.is-on:hover img { transform: scale(1.04); }
.hx__show.is-live .hx__slide.is-next { opacity: .35; transform: translate3d(30px, -16px, -80px) rotate(3deg) scale(.95); z-index: 2; }
.hx__show.is-live .hx__slide:not(.is-on) .hx__cap, .hx__show.is-live .hx__slide:not(.is-on) .hx__grade, .hx__show.is-live .hx__slide:not(.is-on) .hx__refurb { visibility: hidden; }
.hx__show.is-live .hx__slide.is-next2 { opacity: .15; transform: translate3d(56px, -30px, -160px) rotate(6deg) scale(.9); z-index: 1; }
.hx__ctrl { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 22px; }
.hx__ctrl[hidden] { display: none; }
.hx__arrow { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--um-on-navy-outline); background: rgba(255, 255, 255, .08);
             color: #fff; font-size: 20px; cursor: pointer; }
.hx__arrow:hover { background: rgba(255, 255, 255, .18); }
.hx__dots { display: flex; gap: 8px; }
.hx__dotbtn { width: 10px; height: 10px; padding: 0; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .35); cursor: pointer;
              transition: width .3s ease, background .3s ease; }
.hx__dotbtn.is-on { width: 28px; background: #fff; }
.hx__arrow:focus-visible, .hx__dotbtn:focus-visible { outline: 3px solid var(--um-accent); outline-offset: 3px; }

/* the finder band, lifted over the hero's foot */
.fx { position: relative; margin-top: -84px; z-index: 2; }
.fx__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: center;
            background: #fff; border-radius: 24px; padding: 34px 36px; box-shadow: 0 24px 60px rgba(15, 28, 68, .14); border: 1.5px solid var(--um-rule); }
.fx__h { font: var(--um-head-weight) var(--um-h2-panel)/1.15 var(--um-font-head); letter-spacing: var(--um-head-tracking); margin: 6px 0 12px; color: var(--um-text); }
.fx__p { margin: 0; color: var(--um-text-2); }
.fx__p a { font-weight: 700; white-space: nowrap; }
.fx .sf-finder { margin: 0; }

/* how a machine reaches you */
.jy__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; position: relative; }
.jy__steps::before { content: ""; position: absolute; top: 27px; left: 7%; right: 7%; height: 3px; border-radius: 3px;
                     background: linear-gradient(90deg, var(--um-tint-1), var(--um-accent), var(--um-tint-1)); }
.jy__steps li { position: relative; background: #fff; border: 1.5px solid var(--um-rule); border-radius: 20px; padding: 0 22px 22px; margin-top: 27px; }
.jy__n { display: grid; place-items: center; width: 54px; height: 54px; margin: -27px 0 12px; border-radius: 50%;
         background: linear-gradient(145deg, var(--um-primary), var(--um-navy-800)); color: #fff; font: 800 22px var(--um-font-head);
         box-shadow: 0 0 0 6px #fff, 0 10px 24px rgba(31, 63, 147, .3); }
.jy__t { font: 800 20px/1.2 var(--um-font-head); margin: 0 0 6px; color: var(--um-text); }
.jy__b { margin: 0; color: var(--um-muted); font-size: 16px; line-height: 1.45; }

/* use tiles: a real machine of that kind, and how many are in */
.ux { position: relative; }
.ux__photo { background: linear-gradient(180deg, #f6f8fc, #e9eef8); }
.ux__photo img { transition: transform .5s ease; }
.ux:hover .ux__photo img { transform: scale(1.06); }
.ux__none { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 16px;
            background: radial-gradient(120% 90% at 50% 0%, #ffffff 0%, var(--um-tint-2) 55%, var(--um-tint-1) 100%); }
.ux__none span { font: 800 26px/1 var(--um-font-head); letter-spacing: -0.02em; color: var(--um-primary); text-transform: none; }
.ux__none em { font-style: normal; font-size: 14px; color: var(--um-muted); }
.ux__count { position: absolute; top: 12px; right: 12px; z-index: 1; padding: 5px 11px; border-radius: 999px; background: #fff;
             color: var(--um-navy-800); font: 800 13px/1 var(--um-font-head); box-shadow: 0 4px 14px rgba(15, 28, 68, .15); }

/* reveal on scroll */
.js-reveal [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }

@media (max-width: 1060px) {
  .hx__show { justify-self: center; }
  .hx__grid { grid-template-columns: 1fr; gap: 34px; padding-top: 40px; padding-bottom: 110px; }
  .hx__show.is-live .hx__slide.is-next { transform: translate3d(18px, -12px, -80px) rotate(2deg) scale(.96); }
  .hx__show.is-live .hx__slide.is-next2 { opacity: 0; }
  .fx__grid { grid-template-columns: 1fr; gap: 22px; padding: 26px 22px; }
  .jy__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jy__steps::before { display: none; }
}
@media (max-width: 640px) {
  .hx__h1 { font-size: 36px; }
  .hx__body { font-size: 17px; }
  .hx__btn { flex: 1 1 auto; justify-content: center; }
  .hx__price { font-size: 24px; }
  .jy__steps { grid-template-columns: 1fr; }
  .fx { margin-top: -70px; }
}
@media (prefers-reduced-motion: reduce) {
  .hx__dot { animation: none; }
  .hx__show.is-live .hx__slide, .hx__photo img, .ux__photo img, .js-reveal [data-reveal] { transition: none; }
}
/* the grading card on its own (part exchange switched off) spans the row instead of half of it */
.sf-split > .card:only-child { grid-column: 1 / -1; }
/* the "why buy from us" strip under the lifted finder card: room to breathe */
.fx + .sf-usps { padding-top: 30px; padding-bottom: 26px; }