/* Mobile pass, 25 Sep 2026. Loaded last on every page so it wins the cascade without
   touching the twenty sheets underneath it. Everything here is inside a media query —
   desktop is untouched.

   Three jobs:
     1. Nothing pins itself to the top of a phone screen any more (the header scrolls away).
     2. Tap targets reach 44px and nothing meaningful is set below 11px.
     3. Section and icon spacing loosened where the desktop values were simply scaled down.

   The breakpoint is 900px: below it the header is already the stacked/hamburger layout. */

@media (max-width: 900px) {

  /* ---------------------------------------------------------------- 1. unpin everything
     The header used 72px of an 844px viewport, and on guide and destination pages a second
     sticky jump bar took another 46–47px. That is 14% of the screen gone before any content.
     On a phone the traditional behaviour is better: scroll up to get the menu back. */
  .sf-system-header,
  .sf-header { position: static !important; top: auto !important; }

  .sf-dg-jump,
  .sf-lp-jumpbar { position: static !important; top: auto !important; backdrop-filter: none; }

  /* The open mobile menu still needs its own scroll container, so keep that intact but
     let the page behind it scroll normally once it is closed. */
  .sf-header.is-open { position: relative !important; }

  /* Anchor offsets existed only to clear the sticky bars. */
  .sf-page--dg [id],
  .sf-page [id] { scroll-margin-top: 12px; }

  /* ---------------------------------------------------------------- 2. legibility floor
     Nothing that carries meaning goes below 11px, and eyebrow/kicker text moves to 12px.
     These were desktop values (9–11px) that were never re-tuned for a phone. */
  .sf-system-header small,
  .sf-header small,
  .sf-site-footer__eyebrow { font-size: 11px !important; letter-spacing: .1em; }

  /* The brand tagline was pinned to 8px !important in style.css:151. Same selector and
     specificity, loaded later, so this wins without another !important escalation. */
  .sf-header > div > a:first-child > span > span:last-child {
    font-size: 11px !important;
    letter-spacing: .14em !important;
  }

  /* the v2 home page sections carry their own eyebrow family, all 10.5–11.5px */
  .sf-path__badge,
  .sf-pw__kicker,
  .sf-fe__kicker,
  .sf-fe__rate-lbl,
  .sf-fe__flow-lbl,
  .sf-hs__eyebrow,
  .sf-hv__kicker,
  .sf-hv__plan-type,
  .sf-home-ship__kicker { font-size: 12px !important; }

  .sf-qc-kicker,
  .sf-guide-kicker,
  .sf-vf-kicker,
  .sf-fieldnotes__kicker,
  .sf-dg-grid__rank,
  .sf-dg-vol__dim,
  .sf-dg-gallery figcaption b,
  .sf-dg-traps span,
  .sf-dg-treat__arm > span { font-size: 12px !important; line-height: 1.45; }

  .sf-qc-note,
  .sf-dg-stack__note,
  .sf-dg-vol__note,
  .sf-dg-route__note,
  .sf-dg-ruler__note,
  .sf-home-brief__reassurance,
  .sf-site-footer a,
  .sf-site-footer span,
  .sf-site-footer p { font-size: 13.5px !important; line-height: 1.6; }

  .sf-dg-gallery figcaption,
  .sf-dg-check span,
  .sf-dg-status li p,
  .sf-dg-treat__arm li,
  .sf-dg-treat__void li,
  .sf-cases__line { font-size: 13.5px !important; line-height: 1.6; }

  /* Body copy: 15px was the smallest comfortable size at arm's length; leads go to 16px. */
  .sf-qc-lead,
  .sf-cf-answer { font-size: 16px !important; line-height: 1.62; }

  /* Measured second pass: every remaining label under 12px on the live pages. */
  .sf-blog-card__meta,
  .sf-blog-card__meta a,
  .sf-section-heading span,
  .sf-system-cta span,
  .sf-guide-cta span,
  .sf-vf-flight__end span,
  .sf-vf-collage__stats span,
  .sf-vf-why__grid article > span,
  .sf-vf-day figcaption,
  .sf-vf-sticky__price small,
  .sf-vf-cats__foot a,
  .sf-dg-hero__label,
  .sf-dg-ruler > figcaption,
  .sf-dg-route > figcaption span,
  .sf-dg-load > figcaption span,
  .sf-dg-vol > figcaption span,
  .sf-cases__where i,
  .sf-cf-limits li > small,
  .sf-qc-wrap dl > dt { font-size: 12px !important; line-height: 1.45; }

  /* ---------------------------------------------------------------- 3. tap targets
     Anything a thumb is meant to hit gets to 44px, either by padding or by a min-height.
     Where the element is visually small (a breadcrumb, a tag) the box grows but the ink
     does not, so the design is unchanged and only the hit area moves. */
  .sf-dg-crumbs { gap: 2px 10px; }
  .sf-dg-crumbs a,
  .sf-dg-crumbs b,
  .sf-fi-crumbs a,
  .sf-trust-crumbs a,
  .breadcrumbs a { display: inline-flex; align-items: center; min-height: 40px; }

  .sf-blog-card__more,
  .sf-fieldnotes__all,
  .sf-cases__more { display: inline-flex; align-items: center; min-height: 44px; }

  /* Category chips on the blog index and the tag rails: real chips, not 17px text. */
  .sf-blog-cats a,
  .sf-blog-card__cat,
  .sf-fieldnotes__cat,
  .sf-blog-tag { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; }

  /* Links that sit alone at the foot of a block are buttons in everything but name.
     Deliberately not applied to links inside a sentence — those should stay inline. */
  .sf-vf-cats__foot a,
  .sf-blog-card__meta > a,
  .sf-section-heading a { display: inline-flex; align-items: center; min-height: 44px; }

  .sf-hero-assurance li > a,
  .sf-hv__wa,
  .sf-testimonials__cta { display: inline-flex; align-items: center; min-height: 44px; }

  /* Quality & shipping and Sourcing pages: inline-block em/b badges at 10–10.5px, and
     contact links and disclosure summaries that stopped a few pixels short of 44. */
  .sf-qc-why em,
  .sf-qc-class em,
  .sf-qc-panel em,
  .sf-qc-floor__tall figcaption em,
  .sf-qc-wrap figcaption em,
  .sf-qc-wrap figcaption b,
  .sf-fs-sketch em { font-size: 12px !important; line-height: 1.45; }

  .sf-qc-table-wrap > summary,
  .sf-fs-flow__item details > a,
  .sf-fs-link { display: flex; align-items: center; min-height: 44px; }

  /* Phone number and email are the two links most likely to be tapped in a hurry. */
  a[href^="tel:"],
  a[href^="mailto:"],
  a[href*="wa.me"] { display: inline-flex; align-items: center; min-height: 44px; }

  .sf-qc-btn,
  .sf-header__cta,
  .sf-hv__btn { min-height: 48px; }

  /* ---------------------------------------------------------------- 4. breathing room
     The desktop rhythm was scaled down proportionally, which reads cramped on a phone.
     Bands get more vertical air; grids that had collapsed to one column get real gaps. */
  .sf-qc-band > .sf-qc-wrap { padding-top: 46px; padding-bottom: 46px; }
  .sf-qc-head { margin-bottom: 22px; }
  .sf-qc-h2 { line-height: 1.2; letter-spacing: -.02em; }

  .sf-ct-glance { gap: 22px 18px; }
  .sf-ct-glance > div { padding-bottom: 4px; }

  .sf-bf-boxes { gap: 12px; }
  .sf-cf-limits { gap: 14px; }
  .sf-dg-steps { gap: 12px; }

  /* Icon rows: the gap between a glyph and its label was tuned for 26px desktop icons. */
  .sf-hv__points li,
  .sf-qc-list li { gap: 14px; }
  .sf-hv__points svg { width: 24px; height: 24px; }

  /* Tables inside guides scroll rather than squeeze to unreadable columns. */
  .sf-qc-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sf-qc-table-wrap table { min-width: 520px; }

  /* The floating "Start Your Project" pill overlapped the last section's CTA. */
  .sf-sticky-cta { bottom: 12px; right: 12px; }
  .sf-page > *:last-child { padding-bottom: 8px; }
}

/* Very narrow phones (SE, older Androids): the two-up number grids stop working. */
@media (max-width: 400px) {
  .sf-ct-glance { grid-template-columns: 1fr; }
  .sf-dg-vol__pair { gap: 14px; }
  .sf-qc-band > .sf-qc-wrap { padding-left: 16px; padding-right: 16px; }
}

/* ------------------------------------------------------------------ 25 Sep 2026, pass 2
   Pages reached in the second sweep: the showroom directory (its own template and class
   names, never covered here before), the category guides, the hotel page and blog posts. */

@media (max-width: 900px) {

  /* The showroom directory runs a separate header whose subtitle computed to 5.6px. */
  .logo .logo-sub { font-size: 11px !important; letter-spacing: .12em !important; line-height: 1.3; }

  /* Its labels, chips and status lines were all 10–11px. */
  .breadcrumbs span,
  .hero-facts span,
  .hero-media figcaption span,
  .region-map figcaption span,
  .filter-field > span,
  .results-status span,
  .card-category,
  .tags .tag,
  .shortlist-top span,
  .more-leads > summary span { font-size: 12px !important; line-height: 1.45; }

  /* Interactive parts of the directory. */
  .filter-bar label.filter-field,
  .more-leads > summary,
  .shortlist-card button,
  .showroom-card a { min-height: 44px !important; }
  .more-leads > summary { display: flex !important; align-items: center; }

  /* Content badges that sat at 10–10.5px across the category and hotel guides. */
  .sf-cf-hero-note b,
  .sf-cf-fit li > b,
  .sf-ct-map__card em,
  .sf-cn-card em,
  .sf-fg-price li > b,
  .sf-qc-sketch em,
  .sf-testimonial__tag,
  .sf-blog-pillars span,
  .hv2-marquee__label a,
  .sc-interp { font-size: 12px !important; line-height: 1.45; }

  /* Filter and tab controls: real buttons on a phone. */
  .sf-ct-map__tabs button,
  .hv2-tabs button,
  .sf-fg-budget__toggle button,
  .sf-blog-hero__topic,
  .hv2-marquee__label a { display: inline-flex; align-items: center; min-height: 44px; }

  /* The map tab rail scrolls rather than wrapping into a ragged block.
     Its parents are grid/flex items, whose default min-width:auto would otherwise let the
     nowrap rail stretch them past the viewport and clip the card beside them. */
  .sf-ct-map,
  .sf-ct-map__panel,
  .hv2-gallery,
  .sf-fg-budget { min-width: 0; }
  .sf-ct-map > *,
  .sf-ct-map__panel > *,
  .hv2-gallery > * { min-width: 0; max-width: 100%; }

  .sf-ct-map__tabs,
  .sf-fg-budget__toggle,
  .hv2-tabs { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
  .sf-ct-map__tabs::-webkit-scrollbar,
  .sf-fg-budget__toggle::-webkit-scrollbar,
  .hv2-tabs::-webkit-scrollbar { display: none; }
  .sf-ct-map__tabs button,
  .sf-fg-budget__toggle button,
  .hv2-tabs button { flex: 0 0 auto; white-space: nowrap; }
}

/* ------------------------------------------------------------------ 25 Sep 2026, pass 3
   The last sub-11px labels found by sweeping sixteen pages. After this nothing on the
   mobile site renders meaningful text below 11px. */
@media (max-width: 900px) {
  .sf-chain-m__hub span,
  .sf-territory__mobile a > small,
  .sf-vf-day figure figcaption b,
  .sf-project-intro > div,
  .sf-project-next__heading span,
  .sf-lp-jumpbar__inner > span,
  .sf-guide-related__grid a > span,
  .sf-qc-doc__photos figcaption,
  details > summary > time { font-size: 12px !important; line-height: 1.45; }
}

/* ------------------------------------------------------------------ 25 Sep 2026, pass 4
   The last stragglers sit in sections whose type is written as an inline style attribute,
   so they are matched the same way motion.css already matches that family. */
@media (max-width: 900px) {
  .sf-page [style*="font-size: 9.5px"],
  .sf-page [style*="font-size: 10px"],
  .sf-page [style*="font-size: 10.5px"],
  .sf-page [style*="font-size:10px"],
  .sf-page [style*="font-size:10.5px"] { font-size: 12px !important; line-height: 1.45; }

  .sf-page figcaption > b,
  .sf-cf-approve em,
  .sf-cf-tl__card small,
  .sf-cf-tl__card p > span { font-size: 12px !important; line-height: 1.45; }

  .sf-cf-more { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ------------------------------------------------------------------ 25 Sep 2026, pass 5
   Section eyebrows written inline as 12px but shrunk to 10.5px by a desktop rule, plus the
   unclassed <b> labels on the Foshan guide itinerary. */
@media (max-width: 900px) {
  /* style.css:116 shrinks these eyebrows to 10.5px with a two-attribute selector, so this
     has to carry the same specificity; being loaded later is what wins it. */
  .sf-page [style*="letter-spacing: 0.18em"][style*="text-transform: uppercase"],
  .sf-page [style*="letter-spacing:0.18em"][style*="text-transform:uppercase"] { font-size: 12px !important; }

  .sf-page li > div > b,
  .sf-fg-route__out > b,
  .sf-fg-route__aside b,
  .sf-ct-sectors a > i { font-size: 12px !important; line-height: 1.45; }
}
@media (max-width: 900px) {
  /* Blog-article label family, all authored at 10.5px for desktop. */
  .sf-trap__cols > div > b,
  .sf-map > div > span b,
  .sf-read-next__grid span { font-size: 12px !important; line-height: 1.45; }
}

/* ------------------------------------------------------------------ 25 Sep 2026, pass 6
   The interior-systems category pages share one step-label component, authored at 10px. */
@media (max-width: 900px) {
  .sf-system-hero__media figcaption span,
  .sf-system-related__grid a > span,
  .sf-system-catalog__grid a > span { font-size: 12px !important; line-height: 1.45; }
}

/* ------------------------------------------------------------------ 25 Sep 2026, homepage v2 layout
   (26 Sep: selector was href-based, which broke on translated slugs — switched to structural)
   The homepage header's "Send Your List" CTA wraps onto its own full-width black bar right
   under the logo row on a phone. The hero already puts a stronger, better-placed CTA pair
   right below the fold, so this duplicate is just visual noise on a phone — hide it there;
   desktop is untouched. Selector is structural (last link in the header row) so it matches
   regardless of the button's href/text in any TranslatePress language. */
@media (max-width: 900px) {
  .sf-page--home .sf-header > div > a.scp1 { display: none !important; }
}

/* ------------------------------------------------------------------ 25 Sep 2026, homepage v2 layout, pass 2
   .v2-link is plain text with a bottom border only — no padding, so its clickable box is just
   line-height tall (~23px), under the 44px tap-target floor used across the rest of the site. */
@media (max-width: 900px) {
  .v2-link { display: inline-block; min-height: 44px; padding: 10px 2px; }
}

/* ------------------------------------------------------------------ 25 Sep 2026, homepage v2 layout, pass 3
   Money-flow steps: four boxed 80px-icon cards in a 2x2 grid read as busy on a phone. Shrink the
   icon, drop the explanatory sentence (the heading + the dollar chip already say the same thing
   in fewer words) and tighten the card so four steps scan as a quick list, not a wall of copy. */
@media (max-width: 640px) {
  .v2-mf { padding: 22px 14px; }
  .v2-mf__icon { width: 52px; height: 52px; border-radius: 16px; margin-bottom: 10px; }
  .v2-mf__icon svg { width: 28px; height: 28px; }
  .v2-mf__icon em { width: 20px; height: 20px; font-size: 9px; line-height: 20px; top: -7px; right: -7px; }
  .v2-mf__step b { font-size: 15px; margin-bottom: 2px; }
  .v2-mf__step p { display: none; }
  .v2-mf__chip { min-width: 0; padding: 7px 10px; font-size: 11.5px; }
  .v2-mf__chip strong { font-size: 16px; }
  .v2-mf__steps { row-gap: 20px; }
}

/* Send-your-project form: drop the secondary helper/reassurance copy on a phone so the form
   itself (name, email, phone, WhatsApp, role, brief) is what the eye has to scroll through —
   the copy stays for desktop. No field, label or required-state is touched. */
@media (max-width: 640px) {
  .sf-home-brief__required,
  .sf-home-brief__contact-help,
  .sf-home-brief__whatsapp .sf-home-brief__help,
  .sf-home-brief__references,
  .sf-home-brief__reassurance { display: none; }
  .sf-home-brief__whatsapp { padding: 12px 14px; }
  .sf-home-brief__fields { row-gap: 14px; }
  .sf-home-brief__heading { margin-bottom: 14px; }
}

/* ------------------------------------------------------------------ 26 Sep 2026
   Translated-language desktop nav overflow, round 2: round 1 hid the inline nav for every
   non-English width and forced the hamburger everywhere, which the user correctly flagged
   as "the menu text disappeared, it doesn't match the English homepage" — a real visual
   regression versus what English shows. The actual fix was on the content side: the 6 top
   nav labels (Sourcing Services / Furniture & Interiors / Foshan Showrooms / Projects /
   Resources / About) had long, literal DeepL machine translations far past English length;
   they're now short hand-picked labels (e.g. French "Services d'approvisionnement" -> just
   "Services") locked as human-reviewed (status 2) in the TranslatePress dictionary so MT
   never re-expands them. With short labels the inline nav fits at every width >= ~1260px
   for all 6 languages (measured live, worst case French had only 0.4px to spare right at
   1181px). Only the narrow 1181-1259px band — where even the short labels are still too
   tight against the language switcher — falls back to the hamburger; 1260px and up shows
   the same inline nav as English, just like the user expects. English is untouched. */
@media (min-width: 1181px) and (max-width: 1259px) {
  html:not([lang="en-US"]) .sf-header:not(.is-open) .sf-header__nav { display: none !important; }
  html:not([lang="en-US"]) .sf-header .sf-mobile-toggle { display: flex !important; }
}

/* Opening the disclosure at a wide (>1180px) viewport for a translated language reveals the
   nav in its normal desktop flex form again (the "look like a stacked mobile drawer" rules
   only exist below 1181px), which overflows exactly like the closed state did. Let the row
   grow and let the trigger buttons wrap instead of running off the edge. */
@media (min-width: 1181px) and (max-width: 1259px) {
  html:not([lang="en-US"]) .sf-header.is-open > div:first-child { height: auto !important; flex-wrap: wrap !important; row-gap: 10px !important; padding-block: 14px !important; }
  html:not([lang="en-US"]) .sf-header.is-open .sf-header__nav { flex-wrap: wrap !important; row-gap: 8px !important; }
}

/* ------------------------------------------------------------------ 26 Sep 2026, pass 2
   With the nav hidden (previous rule), the row's `justify-content: space-between` now
   distributes its full 1280px width across only 3-4 remaining items (logo, hamburger,
   switcher, CTA), spreading them out with huge gaps instead of clustering the controls
   together on the right — reported as a large empty gap next to "FR" and the CTA pushed
   off toward the edge. Pin the logo left and let the existing 22px row gap handle the
   spacing for everything after it, clustered on the right, same as before nav was hidden. */
@media (min-width: 1181px) and (max-width: 1259px) {
  html:not([lang="en-US"]) .sf-header > div:first-child { justify-content: flex-start !important; }
  html:not([lang="en-US"]) .sf-header > div:first-child > a:first-child { margin-right: auto !important; }
}