/*
 * Spec Desk. A Fluent 2 light layer for the tfw-site theme.
 *
 * This stylesheet loads after the theme stylesheet and works entirely with the
 * markup the theme already emits. There are no template changes, so removing
 * the plugin returns the site to exactly its previous appearance.
 *
 * Part 1 re-points the theme's own custom properties, which carries most of
 * the change. Part 2 handles the components that need real structural work,
 * chiefly the specification tables.
 */

/* ------------------------------------------------------------------ *
 * Part 1. Fluent 2 tokens, mapped onto the theme's existing variables
 * ------------------------------------------------------------------ */

:root {
  /* Neutrals. Flat and opaque. The theme's translucent surfaces sat on a
     gradient, which is what made text contrast drift from block to block. */
  --tfw-bg: #ffffff;
  --tfw-surface: #ffffff;
  --tfw-surface-alt: #faf9f8;
  --tfw-border: #e0e0e0;
  --tfw-text: #242424;
  --tfw-text-soft: #616161;

  /* Brand. Blue means navigation and links, and nothing else. */
  --tfw-accent: #0f6cbd;
  --tfw-accent-strong: #115ea3;
  --tfw-accent-soft: #eff6fc;

  --tfw-success: #0e700e;
  --tfw-warning: #bc4b09;

  /* Fluent elevation, not the theme's 52px drop shadows. */
  --tfw-shadow: 0 2px 4px rgba(0, 0, 0, .10), 0 0 2px rgba(0, 0, 0, .08);

  /* Fluent shape. The theme used 12 to 28px, which reads as consumer app
     rather than reference material. */
  --tfw-radius-sm: 4px;
  --tfw-radius-md: 4px;
  --tfw-radius-lg: 6px;

  /* 1040 rather than 1180. With a 300px rail and a 32px gap that leaves a
     708px reading column, which is close to the 68 character measure, so the
     text no longer floats in a column far wider than the copy it holds. */
  --tfw-content: 1040px;
  --tfw-copy: 70ch;

  --tfw-header-font: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Inter, Roboto, 'Helvetica Neue', sans-serif;
  --tfw-body-font: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Inter, Roboto, 'Helvetica Neue', sans-serif;

  /* Additions. Burnt orange is reserved strictly for commercial surfaces, so
     a reader learns in one page which links earn the site money. */
  --tfwsd-line: #e0e0e0;
  --tfwsd-line-strong: #d1d1d1;
  --tfwsd-dim: #707070;
  --tfwsd-hover: #f5f5f5;
  --tfwsd-brand-border: #b4d6fa;
  --tfwsd-commerce: #b7410e;
  --tfwsd-commerce-hover: #963409;
  --tfwsd-radius-pill: 9999px;
}

/* The gradient body background is what forced every card to be translucent.
   Flat white lets the cards carry a real hairline instead. */
body {
  background: var(--tfw-bg);
  color: var(--tfw-text);
  font-family: var(--tfw-body-font);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------ *
 * Part 2. Type
 * ------------------------------------------------------------------ */

/* The theme sets every label, eyebrow and field name in a mono face at
   0.74rem to 0.82rem with wide letter spacing and uppercase, via a font:
   SHORTHAND. The shorthand is why partial overrides silently fail: setting
   font-size alone is discarded. Each of these has to be re-declared as a
   shorthand to win.
   The effect on screen was that field names read as code rather than as
   labels, which is the single biggest reason the old pages felt like a
   database dump instead of a spec sheet.
   .tfw-brand__mark is deliberately left alone. It is the site wordmark in
   the header, where the mono treatment is doing real brand work. */
.tfw-eyebrow,
.tfw-field label,
.tfw-filter-group label,
.tfw-card__eyebrow {
  font: 600 12px/16px var(--tfw-body-font);
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--tfwsd-dim);
  margin-bottom: 6px;
  gap: 6px;
}

.tfw-card__eyebrow { color: var(--tfw-accent-strong); }

/* Advertisement labels stay small and uppercase, because that is what makes
   them read as a disclosure, but they lose the mono face. */
.tfw-ad-slot__label,
.tfw-ad-unit__eyebrow,
.tfw-amazon-ad__eyebrow {
  font: 600 11px/16px var(--tfw-body-font);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Fluent's ramp is tuned for application chrome. Long form guides need a
   larger body size and a longer leading, so article prose is deliberately
   set at 17px on 1.75 with a 68 character measure. */
.tfw-prose p,
.tfw-prose li {
  font-size: 17px;
  line-height: 1.75;
  color: var(--tfw-text);
  max-width: var(--tfw-copy);
}

.tfw-prose h2 {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: 0;
  margin: 32px 0 8px;
  color: var(--tfw-text);
}

.tfw-prose h3 {
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  letter-spacing: 0;
  margin: 24px 0 6px;
  color: var(--tfw-text);
}

.tfw-spec-header h1 {
  font-family: var(--tfw-header-font);
  font-size: 28px;
  line-height: 36px;
  font-weight: 600;
  letter-spacing: 0;
  margin: 6px 0 0;
}

/* Two weights only, 400 and 600. The theme used 500, 700 and 800. */
strong, b, th { font-weight: 600; }

a { color: inherit; }
.tfw-prose a { color: var(--tfw-accent-strong); text-decoration: underline; text-underline-offset: 2px; }
.tfw-prose a:hover { text-decoration-thickness: 2px; }

/* ------------------------------------------------------------------ *
 * Part 3. Surfaces
 * ------------------------------------------------------------------ */

.tfw-detail-block,
.tfw-article-rail {
  padding: 20px;
  background: var(--tfw-surface);
  border: 1px solid var(--tfwsd-line);
  border-radius: var(--tfw-radius-md);
  box-shadow: none;
}

.tfw-detail-block + .tfw-detail-block,
.tfw-article-rail + .tfw-article-rail { margin-top: 16px; }

/* The prose block carries no frame of its own. A border around body copy adds
   a second reading edge and fights the measure. */
.tfw-detail-block--content {
  padding: 0;
  border: 0;
  background: none;
}

.tfw-site-header {
  background: var(--tfw-surface);
  border-bottom: 1px solid var(--tfwsd-line);
  box-shadow: none;
}

/* ------------------------------------------------------------------ *
 * Part 4. Key specs summary
 * ------------------------------------------------------------------ */

.tfw-spec-summary {
  border: 1px solid var(--tfwsd-line);
  border-radius: var(--tfw-radius-md);
  overflow: hidden;
  background: var(--tfw-surface);
  padding: 0;
  /* The header is a grid, so without this the card stretches to the height of
     the title beside it and leaves dead white below the last row. */
  align-self: start;
  box-shadow: none;
}

.tfw-spec-summary > h2 {
  margin: 0;
  padding: 9px 16px;
  background: var(--tfw-surface-alt);
  border-bottom: 1px solid var(--tfwsd-line);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--tfwsd-dim);
}

.tfw-spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  margin: 0 -1px -1px 0;
  gap: 0;
}

.tfw-spec-item {
  padding: 11px 16px;
  border-top: 0;
  border-right: 1px solid var(--tfwsd-line);
  border-bottom: 1px solid var(--tfwsd-line);
}

.tfw-spec-item strong {
  display: block;
  font: 400 12px/16px var(--tfw-body-font);
  letter-spacing: 0;
  text-transform: none;
  color: var(--tfwsd-dim);
  margin-bottom: 2px;
}

.tfw-spec-item span {
  display: block;
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  color: var(--tfw-text);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ *
 * Part 5. Specification tables. The clean grid.
 *
 * The theme rendered every row as its own rounded, shadowed card with a
 * fixed 200px label column, so values were squeezed into a narrow cell and
 * wrapped mid phrase. Here each group becomes one aligned grid and each row
 * becomes a uniform cell with the label above the value, so every value gets
 * the full width of its cell.
 * ------------------------------------------------------------------ */

.tfw-spec-table-detail > h2 {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  margin: 0 0 12px;
}

.tfw-spec-table-detail__group {
  margin: 0;
  padding: 9px 16px;
  background: var(--tfw-surface-alt);
  border: 1px solid var(--tfwsd-line);
  border-bottom: 0;
  border-radius: var(--tfw-radius-md) var(--tfw-radius-md) 0 0;
  font-family: var(--tfw-body-font);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--tfwsd-dim);
}

.tfw-spec-table-detail__group:first-of-type { margin-top: 0; }
.tfw-spec-table-detail__group + .tfw-compare-table { margin-bottom: 16px; }

.tfw-compare-table {
  display: grid;
  /* 230px is the width at which the longest real values on the site, such as
     "Independent Double A-Arm" and "Duro Power Grip: 26 x 10-14", stop
     wrapping mid phrase. auto-fill rather than auto-fit is deliberate: it
     keeps the column width identical across every group, which is what makes
     the whole sheet read as one aligned grid. */
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  /* The negative margin lets each cell draw its own right and bottom
     hairline while the container clips the outermost ones, so edges are
     never doubled. */
  margin: 0 -1px -1px 0;
  gap: 0;
  border: 1px solid var(--tfwsd-line);
  border-radius: 0 0 var(--tfw-radius-md) var(--tfw-radius-md);
  overflow: hidden;
  background: var(--tfw-surface);
}

.tfw-compare-row {
  display: block;
  grid-template-columns: none;
  padding: 11px 14px;
  border: 0;
  border-right: 1px solid var(--tfwsd-line);
  border-bottom: 1px solid var(--tfwsd-line);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  overflow: visible;
}

.tfw-compare-row > div {
  padding: 0;
  background: transparent;
  border: 0;
  border-left: 0;
}

/* The theme sets this label with a font shorthand and its own background,
   both of which have to be reset explicitly or the label keeps its mono
   uppercase treatment and paints a grey bar behind itself. */
.tfw-compare-row > div:first-child {
  background: transparent;
  border-left: 0;
  font: 400 12px/16px var(--tfw-body-font);
  letter-spacing: 0;
  text-transform: none;
  color: var(--tfwsd-dim);
  margin-bottom: 2px;
}

/* 15px rather than 16px is the size at which the longest real value on the
   site, "Independent Double A-Arm", fits a single line inside a cell of this
   width. It sits between Fluent's 14px base and 16px body large. */
.tfw-compare-row > div:last-child {
  font-size: 15px;
  line-height: 21px;
  font-weight: 600;
  color: var(--tfw-text);
}

/* A single value row is a full width statement, not a one cell grid. */
.tfw-compare-row > div:only-child { font-size: 16px; font-weight: 600; color: var(--tfw-text); }

/* ------------------------------------------------------------------ *
 * Part 6. Buttons
 * ------------------------------------------------------------------ */

/* Specificity note. The theme styles buttons with
   ".tfw-button, .tfw-site input[type=submit], .tfw-site button, ..." and
   ".tfw-site button" is (0,1,1), which quietly outranks a plain ".tfw-button"
   at (0,1,0). An earlier version of this block was written as ".tfw-button"
   and therefore never applied at all. Everything here is scoped under
   .tfw-site so it wins cleanly.
   This block deliberately sets geometry only. The theme's accent fill is
   already the right primary colour, so leaving fills alone keeps the change
   small and avoids restyling buttons that currently read correctly. */
.tfw-site .tfw-button,
.tfw-site button,
.tfw-site input[type="submit"],
.tfw-site .wp-block-button__link {
  min-width: 0;
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--tfw-radius-md);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  box-shadow: none;
}

.tfw-site .tfw-button--small { min-height: 32px; padding: 0 12px; font-size: 13px; }

.tfw-site .tfw-button--ghost {
  background: var(--tfw-surface);
  border: 1px solid var(--tfwsd-line-strong);
  color: var(--tfw-text);
}

.tfw-site .tfw-button--ghost:hover { background: var(--tfwsd-hover); }

.tfw-site .tfw-newsletter__field-group .tfw-button { border-radius: var(--tfw-radius-md); }

/* ------------------------------------------------------------------ *
 * Part 7. Commercial surfaces. Burnt orange, and only here.
 * ------------------------------------------------------------------ */

.tfw-amazon-ad {
  background: var(--tfw-surface);
  border: 1px solid var(--tfwsd-line);
  border-radius: var(--tfw-radius-md);
  box-shadow: none;
}

.tfw-amazon-ad__eyebrow {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--tfwsd-commerce);
}

.tfw-site .tfw-amazon-ad__btn,
.tfw-site a.tfw-amazon-ad__btn:visited {
  background: var(--tfwsd-commerce);
  border: 1px solid var(--tfwsd-commerce);
  color: #ffffff;
  text-decoration: none;
  min-height: 32px;
  padding: 5px 12px;
  border-radius: var(--tfw-radius-md);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}

.tfw-site .tfw-amazon-ad__btn:hover { background: var(--tfwsd-commerce-hover); border-color: var(--tfwsd-commerce-hover); color: #ffffff; text-decoration: none; }

.tfw-amazon-ad__disclosure {
  font-size: 12px;
  line-height: 16px;
  color: var(--tfwsd-dim);
}

/* ------------------------------------------------------------------ *
 * Part 8. Layout
 * ------------------------------------------------------------------ */

.tfw-content-grid {
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 32px;
  align-items: start;
}

/* Chips and tags */
.tfw-tag {
  padding: 2px 10px;
  border-radius: var(--tfwsd-radius-pill);
  background: var(--tfw-accent-soft);
  border: 1px solid var(--tfwsd-brand-border);
  color: var(--tfw-accent-strong);
  font: 600 12px/20px var(--tfw-body-font);
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
}

.tfw-tag:hover { background: #dceafa; text-decoration: none; }

/* Related items become flat list rows rather than tinted cards. */
.tfw-related-item {
  background: var(--tfw-surface);
  border: 0;
  border-top: 1px solid var(--tfwsd-line);
  border-radius: 0;
  box-shadow: none;
  padding: 10px 0;
}

.tfw-related-item:first-child { border-top: 0; }
.tfw-related-item:hover { background: var(--tfwsd-hover); }

.tfw-related-item__eyebrow {
  font: 400 12px/16px var(--tfw-body-font);
  letter-spacing: 0;
  color: var(--tfwsd-dim);
  text-transform: uppercase;
}

.tfw-related-item__body { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--tfw-accent-strong); }

/* The newsletter block was a dark navy panel, which is the loudest surface on
   a page whose job is legibility. It becomes a light panel with a brand
   stripe, in the Fluent message bar idiom. */
.tfw-newsletter {
  background: var(--tfw-accent-soft);
  border: 1px solid var(--tfwsd-brand-border);
  border-left: 3px solid var(--tfw-accent);
  border-radius: var(--tfw-radius-md);
  color: var(--tfw-text);
  box-shadow: none;
}

.tfw-newsletter h2,
.tfw-newsletter h3,
.tfw-newsletter p,
.tfw-newsletter li { color: var(--tfw-text); }
.tfw-newsletter .tfw-eyebrow { color: var(--tfw-accent-strong); }

.tfw-newsletter .tfw-newsletter__highlights li {
  padding: 2px 10px;
  background: var(--tfw-surface);
  border: 1px solid var(--tfwsd-brand-border);
  border-radius: var(--tfwsd-radius-pill);
  color: var(--tfw-text-soft);
  font: 400 12px/20px var(--tfw-body-font);
  letter-spacing: 0;
  text-transform: none;
}

/* The About this model rail carried mono uppercase labels, which read as
   code rather than as a field name. */
.tfw-info-list li { border-top: 1px solid var(--tfwsd-line); padding-top: 10px; gap: 2px; }
.tfw-info-list span {
  font: 400 12px/16px var(--tfw-body-font);
  letter-spacing: 0;
  text-transform: none;
  color: var(--tfwsd-dim);
}
.tfw-info-list strong { font-size: 15px; line-height: 21px; font-weight: 600; color: var(--tfw-text); }

.tfw-meta-row span {
  font-size: 12px;
  line-height: 20px;
  padding: 0 8px;
  border: 1px solid var(--tfwsd-line);
  border-radius: var(--tfwsd-radius-pill);
  color: var(--tfw-text-soft);
  background: var(--tfw-surface);
}

/* ------------------------------------------------------------------ *
 * Part 9. Focus. Never removed, always visible.
 * ------------------------------------------------------------------ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--tfw-text);
  outline-offset: 1px;
  border-radius: var(--tfw-radius-sm);
}

input:focus,
textarea:focus { border-bottom: 2px solid var(--tfw-accent); }

/* ------------------------------------------------------------------ *
 * Part 10. Narrow screens
 * ------------------------------------------------------------------ */

@media (max-width: 900px) {
  .tfw-content-grid { grid-template-columns: 1fr; }
  .tfw-compare-table { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* The theme stacks the header into a single column below 720px, which turns
   a sticky bar into a 360px wall that never scrolls away. On a 844px phone
   that is 43 percent of the screen permanently occupied, above the fold, on
   every page. These rules put the brand and the search action on one row and
   the menu on a second scrolling row, which measures 110px instead. */

@media (max-width: 720px) {
  .tfw-site .tfw-site-header__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand actions"
      "nav   nav";
    align-items: center;
    gap: 6px 12px;
    padding: 10px 0;
  }

  .tfw-site .tfw-site-header__inner > .tfw-brand { grid-area: brand; min-width: 0; }

  .tfw-site .tfw-site-header__inner > .tfw-header-actions {
    grid-area: actions;
    flex-direction: row;
    align-items: center;
    width: auto;
  }

  .tfw-site .tfw-site-header__inner > .tfw-site-nav {
    grid-area: nav;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 20px;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  .tfw-site .tfw-site-header__inner > .tfw-site-nav::-webkit-scrollbar { display: none; }

  .tfw-site .tfw-site-nav > li { flex: 0 0 auto; }

  .tfw-site .tfw-site-nav a { white-space: nowrap; }
}

/* ------------------------------------------------------------------ *
 * Part 11. Browse list
 * ------------------------------------------------------------------ */

/* The browse page is an index over 6,747 models, so density is the whole
   job. Each result was rendering as a 195px shadowed card, which put five
   models on a 1250px screen. These rules take that to roughly 96px, so a
   screen shows ten or eleven, without dropping any information. */
.tfw-browse-list {
  display: block;
  border: 1px solid var(--tfwsd-line);
  border-radius: var(--tfw-radius-md);
  overflow: hidden;
  background: var(--tfw-surface);
  gap: 0;
}

.tfw-list-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  margin: 0;
  padding: 14px 18px;
  border: 0;
  border-bottom: 1px solid var(--tfwsd-line);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  transition: background var(--tfwsd-duration-fast) var(--tfwsd-curve);
}

.tfw-browse-list .tfw-list-card:last-child { border-bottom: 0; }
.tfw-list-card:hover { background: var(--tfw-surface-alt); transform: none; }

.tfw-list-card__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 2px;
}

.tfw-list-card__title h3 {
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  margin: 0;
  letter-spacing: 0;
}

.tfw-list-card__title h3 a { color: var(--tfw-text); text-decoration: none; }
.tfw-list-card__title h3 a:hover { color: var(--tfw-accent-strong); text-decoration: underline; }

/* Every description on this page is the same generated sentence, so it earns
   one line at most. Clamping rather than hiding means the space is returned
   now but real descriptions would still show if the content improves. */
.tfw-list-card > div > p {
  font-size: 13px;
  line-height: 18px;
  color: var(--tfwsd-dim);
  margin: 0 0 4px;
  max-width: 68ch;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tfw-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 12px;
  line-height: 16px;
  color: var(--tfwsd-dim);
}

/* The template prints the price twice, once in the meta row and again in the
   price block on the right. Hiding the meta copy is guarded by :nth-child(3)
   so that a card which omits the price, and therefore ends on the engine,
   keeps every value it has. Verified against the live page: 12 of 12 cards
   carry exactly three meta spans ending in the price. */
.tfw-card__meta span:last-child:nth-child(3) { display: none; }

.tfw-price-block { text-align: right; margin: 0; padding: 0; border: 0; background: transparent; }
.tfw-price-block strong {
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  color: var(--tfwsd-commerce);
  font-variant-numeric: tabular-nums;
}

/* The tag beside a model name is an attribute, not a call to action, so it
   drops to a quiet neutral chip and stops competing with the model name. */
.tfw-list-card__title .tfw-tag {
  padding: 1px 8px;
  background: var(--tfw-surface-alt);
  border: 1px solid var(--tfwsd-line);
  color: var(--tfwsd-dim);
  font: 600 11px/18px var(--tfw-body-font);
  letter-spacing: 0;
  text-transform: none;
}

.tfw-results-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.tfw-results-meta p { font-size: 13px; font-weight: 600; color: var(--tfw-text); margin: 0; }
.tfw-meta-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* Scoped to the browse results header on purpose. The model page reuses
   .tfw-meta-row for its attribute chips, where the slash separated hint
   treatment below would strip styling that belongs there. */
.tfw-results-meta .tfw-meta-row span {
  font-size: 12px;
  line-height: 18px;
  color: var(--tfwsd-dim);
  background: transparent;
  border: 0;
  padding: 0;
}
.tfw-results-meta .tfw-meta-row span + span::before { content: "/"; margin-right: 8px; color: var(--tfwsd-line-strong); }

/* Model page attributes stay as quiet chips. */
.tfw-spec-header .tfw-meta-row { gap: 6px; margin: 8px 0 14px; }
.tfw-spec-header .tfw-meta-row span {
  padding: 1px 10px;
  background: var(--tfw-surface-alt);
  border: 1px solid var(--tfwsd-line);
  border-radius: var(--tfwsd-radius-pill);
  color: var(--tfw-text-soft);
  font: 600 12px/18px var(--tfw-body-font);
  letter-spacing: 0;
  text-transform: none;
}

/* The filter rail was a tinted panel competing with the results. Flat surface
   with a hairline puts the emphasis back on the list. */
.tfw-filter-panel {
  background: var(--tfw-surface);
  border: 1px solid var(--tfwsd-line);
  border-radius: var(--tfw-radius-md);
  box-shadow: none;
  padding: 18px;
}

.tfw-filter-panel h2 { font-size: 16px; line-height: 22px; font-weight: 600; margin: 0 0 14px; }
.tfw-filter-group { margin-bottom: 14px; }

.tfw-browse-hero { margin-bottom: 20px; }
.tfw-browse-hero h1 {
  font-family: var(--tfw-header-font);
  font-size: 28px;
  line-height: 36px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}

/* The theme gives every shell a card treatment. Now that the result list and
   the filter rail each carry their own hairline, the shell frame is a second
   box around a box, so it flattens to plain page background. */
.tfw-browse-shell,
.tfw-compare-shell,
.tfw-article-shell {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

/* ------------------------------------------------------------------ *
 * Part 12. Page headings, hero and newsletter
 * ------------------------------------------------------------------ */

/* The theme sizes display headings with clamp() up to 3rem at -0.04em
   tracking, which renders as a very heavy condensed slab. Left alone it
   would sit beside the Fluent type ramp used everywhere else and produce
   exactly the half-new, half-legacy look this layer exists to remove.
   These bring every page level heading onto one ramp while keeping the
   theme's header face. */
.tfw-hero h1 {
  font-size: clamp(30px, 3.6vw, 40px);
  line-height: 1.14;
  font-weight: 600;
  letter-spacing: -0.015em;
  max-width: 20ch;
}

.tfw-browse-hero h1,
.tfw-compare-shell h1,
.tfw-article-hero h1 {
  font-family: var(--tfw-header-font);
  font-size: 28px;
  line-height: 36px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}

.tfw-section > h2,
.tfw-section__head h2 {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.tfw-hero p { font-size: 16px; line-height: 24px; max-width: 60ch; }

/* Manufacturer shortcuts were tinted blocks with no edge, so they read as
   disabled surfaces rather than links. */
.tfw-card,
.tfw-hero__stats,
.tfw-manufacturer-card {
  border: 1px solid var(--tfwsd-line);
  border-radius: var(--tfw-radius-md);
  box-shadow: none;
  background: var(--tfw-surface);
}

.tfw-card:hover { border-color: var(--tfwsd-line-strong); transform: none; box-shadow: var(--tfwsd-shadow-2); }

/* The footer newsletter heading was capped at 15ch, which broke a short
   sentence across four narrow lines beside a large empty column. */
.tfw-newsletter h3 { font-size: 20px; line-height: 28px; font-weight: 600; max-width: 26ch; }
.tfw-newsletter--footer h3 { font-size: 24px; line-height: 32px; max-width: 24ch; }
.tfw-newsletter--sidebar h3 { font-size: 18px; line-height: 24px; max-width: none; }
.tfw-newsletter p { font-size: 14px; line-height: 20px; }
.tfw-newsletter__microcopy { font-size: 12px; line-height: 16px; }

/* Flat tint rather than the radial gradient plus blur circle, so the block
   reads as one calm surface. */
.tfw-newsletter,
.tfw-newsletter--footer {
  background: var(--tfwsd-brand-tint);
  border: 1px solid var(--tfwsd-brand-border);
  border-radius: var(--tfw-radius-md);
  box-shadow: none;
  padding: 28px;
}

.tfw-newsletter::after { content: none; }

/* Real class names, confirmed against the live markup. The section title is
   .tfw-section__title, not a bare h2, and the manufacturer shortcuts are
   .tfw-manufacturer-pill anchors rather than cards. */
.tfw-section__title {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.tfw-section__meta { font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--tfwsd-dim); }
.tfw-section { padding: 24px; }

.tfw-manufacturer-pill {
  background: var(--tfw-surface);
  border: 1px solid var(--tfwsd-line);
  border-radius: var(--tfw-radius-md);
  box-shadow: none;
  padding: 12px 14px;
  transition: border-color var(--tfwsd-duration-fast) var(--tfwsd-curve),
              background var(--tfwsd-duration-fast) var(--tfwsd-curve);
}

.tfw-manufacturer-pill:hover {
  border-color: var(--tfw-accent);
  background: var(--tfwsd-brand-tint);
  transform: none;
}

.tfw-manufacturer-pill strong { font-size: 15px; line-height: 21px; font-weight: 600; color: var(--tfw-text); }
.tfw-manufacturer-pill span { font-size: 12px; line-height: 16px; color: var(--tfwsd-dim); }

.tfw-compare-builder__panel {
  background: var(--tfw-surface);
  border: 1px solid var(--tfwsd-line);
  border-radius: var(--tfw-radius-md);
  box-shadow: none;
  padding: 20px;
}

.tfw-compare-builder__panel-header h2 { font-size: 16px; line-height: 22px; font-weight: 600; }

.tfw-empty-state {
  background: var(--tfw-surface-alt);
  border: 1px dashed var(--tfwsd-line-strong);
  border-radius: var(--tfw-radius-md);
  padding: 24px;
}

.tfw-empty-state h2 { font-size: 16px; line-height: 22px; font-weight: 600; margin: 0 0 4px; }
.tfw-empty-state p { font-size: 14px; line-height: 20px; color: var(--tfwsd-dim); margin: 0; }

/* The footer newsletter sits outside main and outside the container, so it
   is full bleed in the theme. Once it carries a hairline that reads as a
   misalignment against every other block, so its box is constrained to the
   same measure as page content. */
.tfw-newsletter--footer {
  max-width: var(--tfw-content);
  margin: 40px auto;
}

/* ------------------------------------------------------------------ *
 * Part 13. Brand mark, and removing the stripe and glow
 * ------------------------------------------------------------------ */

/* The header carried a mono "TFW / 2026" label stacked above the full site
   title. The Option B direction is a compass mark beside a short wordmark,
   so the mark becomes the logo and the title is shown as "TimeForWheels".
   Done visually rather than by filtering the site title, because the option
   name feeds the document title and schema, and this site is recovering from
   a search visibility drop. The full name stays in the DOM and in the link's
   accessible name; only the painted text is shortened. */
.tfw-brand {
  flex-direction: row;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}

.tfw-brand__mark {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  font-size: 0;
  letter-spacing: 0;
  color: transparent;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2022%2022%22%3E%3Cpath%20d%3D%22M11%201.5a9.5%209.5%200%20100%2019%209.5%209.5%200%20000-19zm0%203.3a6.2%206.2%200%20110%2012.4%206.2%206.2%200%20010-12.4z%22%20fill%3D%22%23242424%22%2F%3E%3Cpath%20d%3D%22M11%208.6V5.4M13.1%2010.1L16.2%209.1M12.3%2012.6L14.2%2015.2M9.7%2012.6L7.8%2015.2M8.9%2010.1L5.8%209.1%22%20stroke%3D%22%23242424%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%222.2%22%20fill%3D%22%23c2410c%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

.tfw-brand__name {
  font-size: 0;
  white-space: nowrap;
}

.tfw-brand__name::before {
  content: "TimeForWheels";
  font: 600 16px/22px var(--tfw-body-font);
  letter-spacing: 0;
  color: var(--tfw-text);
}

/* No leading colour stripe on any block. A tinted panel with an even
   hairline on all four sides reads calmer and matches the mockup. */
.tfw-template-note {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--tfwsd-brand-border);
  border-left: 1px solid var(--tfwsd-brand-border);
  border-radius: var(--tfw-radius-md);
  background: var(--tfwsd-brand-tint);
  font-size: 14px;
  line-height: 20px;
}

.tfw-newsletter,
.tfw-newsletter--footer {
  border-left: 1px solid var(--tfwsd-brand-border);
}


/* The theme gives every button a coloured drop glow and lifts it on hover.
   Fluent buttons are flat, so both come off, and the focus ring becomes a
   real outline rather than a stacked shadow. */
.tfw-button,
.tfw-site input[type="submit"],
.tfw-site button,
.wp-block-button__link,
.tfw-compare-pill-link {
  box-shadow: none;
  transition: background var(--tfwsd-duration-fast) var(--tfwsd-curve),
              border-color var(--tfwsd-duration-fast) var(--tfwsd-curve);
}

.tfw-button:hover,
.tfw-site button:hover,
.wp-block-button__link:hover,
.tfw-compare-pill-link:hover {
  box-shadow: none;
  transform: none;
}

.tfw-newsletter--sidebar .tfw-button,
.tfw-newsletter--sidebar .tfw-button:hover {
  background: var(--tfw-accent);
  box-shadow: none;
}

.tfw-newsletter--sidebar .tfw-button:hover { background: var(--tfw-accent-strong); }

.tfw-button:focus-visible,
.tfw-site button:focus-visible,
.tfw-site input[type="submit"]:focus-visible,
.tfw-compare-pill-link:focus-visible {
  outline: 2px solid var(--tfw-accent);
  outline-offset: 1px;
  box-shadow: none;
}

/* The search field on the hero also carried a glow on focus. */
.tfw-field input:focus,
.tfw-field select:focus,
.tfw-filter-group input:focus,
.tfw-filter-group select:focus,
.tfw-search-inline input:focus,
.tfw-newsletter input[type="email"]:focus {
  box-shadow: none;
  border-color: var(--tfw-accent);
  border-bottom: 2px solid var(--tfw-accent);
}

/* Inputs to Fluent geometry: 4px corners rather than 12px, and a 2px brand
   bottom border on focus in place of the glow removed above.
   background-color, not background. The theme draws the select chevron with
   two linear-gradient background images, so the shorthand erases the arrow
   and leaves a dropdown with no affordance at all. */
.tfw-site .tfw-field input,
.tfw-site .tfw-field select,
.tfw-site .tfw-filter-group input,
.tfw-site .tfw-filter-group select,
.tfw-site .tfw-search-inline input,
.tfw-site .tfw-newsletter input[type="email"] {
  min-height: 40px;
  border-radius: var(--tfw-radius-md);
  border: 1px solid var(--tfwsd-line-strong);
  background-color: var(--tfw-surface);
  box-shadow: none;
  font-size: 14px;
}

/* Hero quick links, shown as outlined pills in the Option B direction rather
   than solid grey fills. */
.tfw-inline-pills a {
  background: var(--tfw-surface);
  border: 1px solid var(--tfwsd-line-strong);
  border-radius: var(--tfwsd-radius-pill);
  color: var(--tfw-text);
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  padding: 5px 14px;
  text-decoration: none;
  transition: background var(--tfwsd-duration-fast) var(--tfwsd-curve),
              border-color var(--tfwsd-duration-fast) var(--tfwsd-curve);
}

.tfw-inline-pills a:hover { background: var(--tfwsd-hover); border-color: var(--tfw-accent); }