/* Site chrome — header, mega-menu, mobile drawer, footer.
 *
 * Loaded on EVERY page, underneath whichever stylesheet that page owns. The
 * page stylesheets disagree with each other (site.css, landing.css, home.css,
 * hsn.css each redefine headings, .wrap and the band colours), so nothing here
 * may style a bare element that a page also styles. Every rule below is a
 * `.fw-` class, and the two exceptions are deliberate:
 *
 *   section[id] { scroll-margin-top }  — the header is sticky, so an in-page
 *       anchor now lands underneath it. Without this, `#specs` scrolls the
 *       heading behind the bar on every page at once.
 *   body.fw-lock { overflow:hidden }   — set only while the drawer is open.
 *
 * The tokens are re-declared rather than imported for the same reason: this
 * sheet has to look right whichever of the four page stylesheets loads after it.
 */

:root {
  --fw-red:#f25e50;
  --fw-red-dark:#cc4139;
  --fw-dark:#111111;
  --fw-ink:#3c3c3c;
  --fw-muted:#5a5a5a;
  --fw-hair:#e6e6e6;
  --fw-canvas:#ffffff;
  --fw-soft:#f7f7f7;
  --fw-bar:72px;
  --fw-font:'Montserrat',system-ui,-apple-system,'Segoe UI','Helvetica Neue',Arial,sans-serif;
}

section[id] { scroll-margin-top: calc(var(--fw-bar) + 16px); }
body.fw-lock { overflow: hidden; }

/* `is-contained` marks a picture that must be read whole — a product render, a
 * partner's logo — as against a photograph, which fills its frame. It lives
 * here because this is the one stylesheet every page loads: defined in
 * `landing.css` alone, the class meant something on the landing template and
 * nothing at all on the home one, which is what `verify.unstyled` caught.
 * `scale-down` rather than `contain` so a small mark is never blown up past its
 * own pixels. Lowest priority by design — chrome.css is injected first, so any
 * page stylesheet with a more specific rule still wins. */
.is-contained { object-fit: scale-down; }

/* ------------------------------------------------------------------ header */

.fw-head {
  position: sticky; top: 0; z-index: 900;
  background: var(--fw-canvas);
  border-bottom: 1px solid var(--fw-hair);
  font-family: var(--fw-font);
  -webkit-font-smoothing: antialiased;
}
.fw-head__in {
  max-width: 1320px; margin: 0 auto; padding: 0 24px;
  height: var(--fw-bar);
  display: flex; align-items: center; gap: 28px;
}
.fw-logo { display: flex; align-items: center; flex: 0 0 auto; }
.fw-logo img { display: block; height: 34px; width: auto; }

.fw-nav { flex: 1 1 auto; display: flex; justify-content: center; }
.fw-nav__list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.fw-nav__item { position: static; }
.fw-nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--fw-bar); padding: 0 11px;
  font: 600 14px/1 var(--fw-font); letter-spacing: .01em;
  color: var(--fw-dark); background: none; border: 0; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.fw-nav__link:hover, .fw-nav__link:focus-visible { color: var(--fw-red-dark); }
.fw-nav__item:hover > .fw-nav__link,
.fw-nav__item:focus-within > .fw-nav__link { border-bottom-color: var(--fw-red); }
.fw-nav__chev { width: 10px; height: 10px; transition: transform .18s ease; flex: 0 0 auto; }
.fw-nav__item:hover .fw-nav__chev,
.fw-nav__item:focus-within .fw-nav__chev { transform: rotate(180deg); }

.fw-head__acts { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; }
.fw-head__tel {
  font: 600 13px/1 var(--fw-font); color: var(--fw-ink); text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
}
.fw-head__tel:hover { color: var(--fw-red-dark); }
.fw-head__tel svg { width: 15px; height: 15px; }
.fw-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 20px; border-radius: 4px;
  font: 700 13px/1 var(--fw-font); letter-spacing: .02em;
  text-decoration: none; border: 1px solid transparent; white-space: nowrap;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.fw-btn--primary { background: var(--fw-red); color: #fff; }
.fw-btn--primary:hover { background: var(--fw-red-dark); color: #fff; }
.fw-btn--ghost { border-color: rgba(255,255,255,.28); color: #fff; }
.fw-btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }

/* --------------------------------------------------------------- mega menu */

.fw-mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--fw-canvas);
  border-top: 1px solid var(--fw-hair);
  box-shadow: 0 22px 40px -18px rgba(17,17,17,.28);
  /* A dropdown taller than the window is a dropdown whose bottom row cannot be
   * clicked. Nine service tiles at three rows is exactly that on a 900px
   * laptop, so the panel is capped at what is actually on screen and scrolls
   * inside itself on the short screens where it has to. */
  max-height: calc(100vh - var(--fw-bar) - 12px); overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.fw-nav__item:hover > .fw-mega,
.fw-nav__item:focus-within > .fw-mega {
  opacity: 1; visibility: visible; transform: none;
}
.fw-mega__in { max-width: 1320px; margin: 0 auto; padding: 24px 24px 28px; }
.fw-mega__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; margin-bottom: 16px;
}
.fw-mega__eyebrow {
  margin: 0; font: 600 11px/1.2 var(--fw-font);
  letter-spacing: .16em; text-transform: uppercase; color: var(--fw-muted);
}
.fw-mega__all {
  font: 700 13px/1 var(--fw-font); color: var(--fw-red-dark);
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
.fw-mega__all:hover { color: var(--fw-red); }
.fw-mega__all::after { content: "\2192"; }
.fw-mega__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
/* Honours --fw-cols like the cards grid does. Ten machines at four columns is
 * three rows, which is taller than a 900px laptop can show — the panel then
 * scrolls inside itself and the bottom row is both clipped and, being lazy,
 * not even fetched until someone finds the scrollbar. */
.fw-mega__grid--products {
  grid-template-columns: repeat(var(--fw-cols, 4), 1fr);
}
.fw-mega__grid--cards { grid-template-columns: repeat(var(--fw-cols, 4), 1fr); gap: 10px; }
.fw-mega__group {
  margin: 4px 0 10px; font: 700 12px/1.2 var(--fw-font);
  letter-spacing: .1em; text-transform: uppercase; color: var(--fw-dark);
}
.fw-mega__grid + .fw-mega__group { margin-top: 22px; }
.fw-mega__grid--swatches { grid-template-columns: repeat(6, 1fr); }

/* One tile shape, three sizes. The picture is the point — the label sits under
 * it, never over it, because a product cut-out on a light card is unreadable
 * with type on top of it. */
.fw-tile {
  display: block; text-decoration: none; border-radius: 6px;
  padding: 10px; border: 1px solid transparent;
  transition: background .14s ease, border-color .14s ease;
}
.fw-tile:hover, .fw-tile:focus-visible {
  background: var(--fw-soft); border-color: var(--fw-hair);
}
.fw-tile__pic {
  display: block; overflow: hidden; border-radius: 4px;
  background: var(--fw-soft); margin-bottom: 10px;
}
.fw-tile__pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fw-tile__name {
  display: block; font: 700 14px/1.3 var(--fw-font); color: var(--fw-dark);
}
.fw-tile__note {
  display: block; margin-top: 3px;
  font: 400 12px/1.45 var(--fw-font); color: var(--fw-muted);
}
.fw-tile:hover .fw-tile__name { color: var(--fw-red-dark); }

.fw-mega__grid--products .fw-tile__pic { aspect-ratio: 4/3; background: var(--fw-soft); }
.fw-mega__grid--products .fw-tile__pic img { object-fit: contain; padding: 6px; }
.fw-mega__grid--cards .fw-tile__pic { aspect-ratio: 16/9; }
.fw-mega__grid--swatches .fw-tile { padding: 8px; }
.fw-mega__grid--swatches .fw-tile__pic { aspect-ratio: 4/3; margin-bottom: 8px; }
/* `contain`, like the product tiles above — never `cover`. These are twelve
 * pictures of a spool, and the reader is being asked "which material is this";
 * a cover-cropped spool answers that question with the middle of a spool. The
 * inherited `cover` took another 12.5% off the top and bottom of files that
 * were already hand-cropped too tight. `menutiles.py` cuts them to this frame
 * from the full-size masters, so contain fits exactly and crops nothing. */
.fw-mega__grid--swatches .fw-tile__pic img { object-fit: contain; padding: 6px; }
.fw-mega__grid--swatches .fw-tile__name { font-size: 13px; }
.fw-mega__grid--swatches .fw-tile__note { font-size: 11px; }

/* ------------------------------------------------------- burger and drawer */

/* 44x44, not 40x40. This is the only way to reach any other page on a phone,
 * and 44 is the size both Apple and Google publish for a control a thumb has
 * to find. It was 40. */
.fw-burger {
  display: none; width: 44px; height: 44px; padding: 0;
  align-items: center; justify-content: center;
  background: none; border: 1px solid var(--fw-hair); border-radius: 4px;
  cursor: pointer; color: var(--fw-dark);
  -webkit-tap-highlight-color: transparent;
}
.fw-burger svg { width: 18px; height: 18px; }
.fw-burger__close { display: none; }
.fw-burger[aria-expanded="true"] .fw-burger__open { display: none; }
.fw-burger[aria-expanded="true"] .fw-burger__close { display: block; }

.fw-drawer {
  display: none;
  position: fixed; left: 0; right: 0; top: var(--fw-bar); bottom: 0;
  background: var(--fw-canvas); overflow-y: auto;
  -webkit-overflow-scrolling: touch; z-index: 899;
  font-family: var(--fw-font);
}
.fw-drawer.is-open { display: block; }
.fw-drawer__in { padding: 8px 20px 40px; }
.fw-acc { border-bottom: 1px solid var(--fw-hair); }
.fw-acc__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 16px 2px; background: none; border: 0; cursor: pointer;
  font: 700 15px/1.2 var(--fw-font); color: var(--fw-dark); text-align: left;
}
.fw-acc__btn svg { width: 12px; height: 12px; flex: 0 0 auto; transition: transform .18s ease; }
.fw-acc__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.fw-acc__panel { display: none; padding: 0 0 14px; }
.fw-acc__panel.is-open { display: block; }
.fw-acc__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px;
}
.fw-acc__list .fw-tile { padding: 8px; }
.fw-acc__list .fw-tile__pic { aspect-ratio: 16/9; margin-bottom: 8px; }
.fw-acc__list--products .fw-tile__pic { aspect-ratio: 1/1; }
.fw-acc__list--products .fw-tile__pic img { object-fit: contain; padding: 6px; }
.fw-acc__list .fw-tile__name { font-size: 13px; }
.fw-acc__list .fw-tile__note { font-size: 11px; }
.fw-drawer__foot { display: grid; gap: 10px; padding: 22px 2px 0; }
.fw-drawer__foot .fw-btn { width: 100%; padding: 14px 20px; }
.fw-drawer__tel {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 14px/1 var(--fw-font); color: var(--fw-ink); text-decoration: none;
  padding: 13px; border: 1px solid var(--fw-hair); border-radius: 4px;
  min-height: 44px; box-sizing: border-box;
}
.fw-drawer__foot .fw-btn { min-height: 44px; box-sizing: border-box; }
/* Every inline SVG in the chrome needs a size, not just the ones in the bar.
 * An unsized <svg> with a 24-unit viewBox takes the whole column: the drawer's
 * phone icon came out 300px tall and pushed the number off the button. */
.fw-drawer__tel svg { width: 15px; height: 15px; flex: 0 0 15px; }

@media (max-width: 1180px) {
  .fw-nav, .fw-head__tel { display: none; }
  .fw-burger { display: inline-flex; }
  .fw-head__in { gap: 16px; justify-content: space-between; }
}
/* The logo and the header CTA are the other two things a thumb reaches for up
 * here. The logo LINK was 28px tall because the image is 28px tall — the
 * anchor took its height from the picture rather than from the bar it sits
 * in — and the CTA was 34px. Both now fill 44. */
@media (max-width: 1180px) {
  .fw-logo { min-height: 44px; }
  .fw-head__acts .fw-btn { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (max-width: 560px) {
  .fw-head__in { padding: 0 16px; }
  .fw-logo img { height: 28px; }
  .fw-head__acts .fw-btn { padding: 10px 14px; font-size: 13px; }
  /* One column of thumbnail-beside-text rows. Grid rather than flex because
   * the name and the note are two sibling spans with no wrapper — flex laid
   * them side by side and the note ran off the row. */
  .fw-acc__list { grid-template-columns: 1fr; gap: 2px; }
  .fw-acc__list .fw-tile {
    display: grid; grid-template-columns: 58px 1fr; column-gap: 13px;
    align-content: center; padding: 9px 6px;
  }
  .fw-acc__list .fw-tile__pic {
    grid-column: 1; grid-row: 1 / span 2; width: 58px; margin: 0;
    align-self: center;
  }
  .fw-acc__list .fw-tile__name { grid-column: 2; align-self: end; }
  .fw-acc__list .fw-tile__note { grid-column: 2; align-self: start; }
  .fw-acc__list--products .fw-tile__pic { aspect-ratio: 1/1; }
}

/* ------------------------------------------------------------------ footer */

/* Nearly every page ends on a dark CTA band, and a footer of the SAME #111
 * fuses with it into one unexplained black slab. A shade down plus a hairline
 * is the whole fix: the seam reads, and nothing has to change per page. */
.fw-foot {
  background: #0b0b0b; color: rgba(255,255,255,.72);
  border-top: 1px solid rgba(255,255,255,.14);
  font-family: var(--fw-font); -webkit-font-smoothing: antialiased;
}
.fw-foot__in { max-width: 1320px; margin: 0 auto; padding: 60px 24px 26px; }
.fw-foot__top {
  display: grid; grid-template-columns: minmax(220px, 1.5fr) repeat(5, 1fr);
  gap: 36px 28px;
}
.fw-foot__logo { display: inline-flex; align-items: center; min-height: 44px; }
.fw-foot__logo img { display: block; height: 32px; width: auto; margin-bottom: 16px; }
.fw-foot__blurb { margin: 0 0 18px; font: 400 13px/1.7 var(--fw-font); color: rgba(255,255,255,.62); max-width: 34ch; }
.fw-foot__contact { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.fw-foot__contact a, .fw-foot__contact span {
  font: 500 13px/1.5 var(--fw-font); color: rgba(255,255,255,.8); text-decoration: none;
  display: flex; gap: 9px; align-items: flex-start;
}
.fw-foot__contact a:hover { color: #fff; }
.fw-foot__contact svg { width: 14px; height: 14px; flex: 0 0 14px; margin-top: 2px; opacity: .7; }
.fw-social { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.fw-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 4px;
  border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.8);
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.fw-social a:hover { background: var(--fw-red); border-color: var(--fw-red); color: #fff; }
.fw-social svg { width: 16px; height: 16px; }

.fw-foot__col h2 {
  margin: 0 0 14px; font: 700 12px/1.2 var(--fw-font);
  letter-spacing: .14em; text-transform: uppercase; color: #fff;
}
.fw-foot__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.fw-foot__col a {
  font: 400 13px/1.45 var(--fw-font); color: rgba(255,255,255,.68); text-decoration: none;
}
.fw-foot__col a:hover { color: #fff; }

.fw-foot__cities {
  margin-top: 38px; padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.fw-foot__cities h2 {
  margin: 0 0 14px; font: 700 12px/1.2 var(--fw-font);
  letter-spacing: .14em; text-transform: uppercase; color: #fff;
}
.fw-foot__cities ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px 20px;
}
.fw-foot__cities a {
  font: 400 12.5px/1.4 var(--fw-font); color: rgba(255,255,255,.62);
  text-decoration: none;
}
.fw-foot__cities a:hover { color: #fff; }
@media (max-width: 1100px) { .fw-foot__cities ul { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px)  { .fw-foot__cities ul { grid-template-columns: repeat(2, 1fr); } }

.fw-foot__bar {
  margin-top: 42px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
  justify-content: space-between;
}
.fw-foot__legal { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; margin: 0; padding: 0; }
.fw-foot__legal a { font: 400 12px/1.4 var(--fw-font); color: rgba(255,255,255,.55); text-decoration: none; }
.fw-foot__legal a:hover { color: #fff; }
.fw-foot__copy { margin: 0; font: 400 12px/1.4 var(--fw-font); color: rgba(255,255,255,.5); }
.fw-foot__mii { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/1 var(--fw-font); color: rgba(255,255,255,.62); }
/* The Make in India lion is a dark mark on transparency — on this ground it
 * is invisible. It is a recognised mark and must not be recoloured, so it goes
 * on a white chip instead. */
.fw-foot__mii img { height: 22px; width: auto; display: block;
  background: #fff; border-radius: 3px; padding: 3px 6px; }

@media (max-width: 1100px) {
  .fw-foot__top { grid-template-columns: repeat(3, 1fr); }
  .fw-foot__brand { grid-column: 1 / -1; }
}
/* The footer's sections are `<details>` so the phone can fold them; see
 * `site_footer()` for why none of the 78 links may be dropped instead. On a
 * pointer screen they are permanently open and must look exactly as they did
 * when they were an <h2> and a <ul>: no marker, no cursor, nothing to press. */
.fw-foot__col > summary,
.fw-foot__cities > summary { list-style: none; display: block; }
.fw-foot__col > summary::-webkit-details-marker,
.fw-foot__cities > summary::-webkit-details-marker { display: none; }
.fw-foot__col > summary::marker,
.fw-foot__cities > summary::marker { content: ""; }
@media (min-width: 641px) {
  .fw-foot__col > summary, .fw-foot__cities > summary { pointer-events: none; }
}
.fw-foot__col > summary h2, .fw-foot__cities > summary h2 { display: inline-block; }
.fw-foot__chev { display: none; }

@media (max-width: 640px) {
  .fw-foot__in { padding: 40px 16px 22px; }
  /* One column, and the sections become rows with a rule between them — a
   * folded list of six things to open, not a wall of 78 links. */
  .fw-foot__top { grid-template-columns: 1fr; gap: 0; }
  .fw-foot__brand { padding-bottom: 22px; }

  .fw-foot__col, .fw-foot__cities {
    margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.12);
  }
  .fw-foot__col > summary, .fw-foot__cities > summary {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 48px; padding: 4px 2px; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .fw-foot__col > summary h2, .fw-foot__cities > summary h2 { margin: 0; }
  .fw-foot__chev {
    display: block; width: 11px; height: 11px; flex: 0 0 11px;
    border-right: 2px solid rgba(255,255,255,.55);
    border-bottom: 2px solid rgba(255,255,255,.55);
    transform: rotate(45deg); margin-right: 4px;
    transition: transform .18s ease;
  }
  details[open] > summary .fw-foot__chev { transform: rotate(-135deg); }

  /* 44px rows. The links were 15px tall, which is not a tap target — it is a
   * dare. `display:block` is what makes the row, not the text. */
  .fw-foot__col ul, .fw-foot__cities ul {
    grid-template-columns: 1fr; gap: 0; padding: 0 0 8px;
  }
  .fw-foot__col a, .fw-foot__cities a {
    display: flex; align-items: center; min-height: 44px;
    padding: 0 2px; font-size: 14px;
  }
  .fw-foot__cities ul { grid-template-columns: repeat(2, 1fr); }
  .fw-foot__cities a { font-size: 14px; }

  .fw-foot__bar { flex-direction: column; align-items: flex-start; margin-top: 26px; }
  /* Five legal links, each a 44px row, is 220px of scrolling for the least
     important links on the page. They stay in a wrapping row and get their
     44px vertically instead — same target, a third of the height. */
  .fw-foot__legal { gap: 0 20px; width: 100%; }
  .fw-foot__legal a { display: inline-flex; align-items: center;
    justify-content: center; min-height: 44px; min-width: 44px;
    font-size: 13px; }
  .fw-foot__contact a, .fw-foot__contact span { min-height: 44px; align-items: center; font-size: 14px; }
  .fw-foot__blurb { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .fw-mega, .fw-nav__chev, .fw-acc__btn svg, .fw-tile, .fw-btn { transition: none; }
}

/* ------------------------------------------------------------- breadcrumbs */
/* Lives here, not in landing.css, because chrome.css is the only stylesheet
 * every page loads — a page's own sheet REPLACES site.css (rule 1), so a
 * breadcrumb styled anywhere else would be an unstyled `<ol>` on the twelve
 * material pages and the home page.
 *
 * A thin strip between the header and the hero, deliberately quiet: it is
 * wayfinding, not content. It is also the only in-content link the hub pages
 * get from their own children — see `chrome.crumb_nav()` for why that mattered
 * enough to build. */
.fw-crumbs {
  font-family: var(--fw-font);
  background: var(--fw-canvas);
  border-bottom: 1px solid var(--fw-hair);
}
.fw-crumbs__list {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0 6px; list-style: none; margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px);
  max-width: 1120px; min-height: 40px;
}
.fw-crumbs__list li { display: flex; align-items: center; }
/* The separator is generated, so the markup stays a clean ordered list and a
 * screen reader is not made to read "slash" between every rung. */
.fw-crumbs__list li + li::before {
  content: ""; flex: none; width: 5px; height: 5px; margin-right: 6px;
  border-right: 1.5px solid #c9ccd1; border-bottom: 1.5px solid #c9ccd1;
  transform: rotate(-45deg);
}
/* 12px floor and a 24px inline-link target — both are gates in mobile.py. */
.fw-crumbs__list a,
.fw-crumbs__list span {
  display: inline-block; padding: 6px 0;
  font: 500 12.5px/1.35 var(--fw-font); letter-spacing: .01em;
  color: var(--fw-muted); text-decoration: none;
}
.fw-crumbs__list a:hover { color: var(--fw-red-dark); text-decoration: underline; }
.fw-crumbs__list a:focus-visible { outline: 2px solid var(--fw-red); outline-offset: 2px; }
.fw-crumbs__list li[aria-current="page"] span { color: var(--fw-dark); font-weight: 600; }
@media (max-width: 640px) {
  /* A breadcrumb link is a standalone control, not a link inside a sentence,
   * so WCAG 2.5.8's inline exemption does not cover it and `mobile.py` is
   * right to hold it to 44px. The text stays small; the target does not —
   * padding does the work, and the strip becomes a normal 44px nav bar. */
  .fw-crumbs__list { min-height: 44px; gap: 0 4px; }
  .fw-crumbs__list a,
  .fw-crumbs__list span { padding: 14px 0; font-size: 12px; min-height: 44px;
    display: inline-flex; align-items: center; }
  /* "Home" is 38px of text at 12px, and a target is measured in both axes.
     The min-width is on the link only — the last rung is a `<span>`, not a
     control, and does not need a hit area. */
  .fw-crumbs__list a { min-width: 44px; justify-content: center; }
}

/* Print: chrome is navigation, and navigation does not print. */
@media print { .fw-head, .fw-drawer, .fw-foot, .fw-crumbs { display: none !important; } }

/* The mega-menu tile notes are 11px. On the phone these are read inside the
 * drawer, where there is room for the extra pixel. */
@media (max-width: 640px) {
  .fw-mega__grid--swatches .fw-tile__note,
  .fw-acc__list .fw-tile__note { font-size: 12px; }
  .fw-foot__legal a, .fw-foot__copy, .fw-foot__mii { font-size: 12px; }
}