/* ---------------------------------------------------------------------------
   Contrast and target-size corrections.

   Loaded last, after the per-template sheet, because several of these override
   colours the template CSS sets. Every ratio below was measured in Chrome
   against the rendered templates, not estimated.

   Nothing here changes layout or hue family: the approved design still reads
   as the approved design. These are the pairings that were unreadable.
   ------------------------------------------------------------------------ */

/* --- Hero pill -------------------------------------------------------------
   The pill's own translucent fill lifts the effective background from #0f1e2e
   to #152b3a, so the text must be measured against that, not against the hero.
   #387780 on #152b3a measured 3.31:1 at 13px. Lightened to 4.94:1.
   Scoped to the pill so the primary button keeps the darker brand teal as its
   background, where white text needs the contrast to run the other way. */
.hero .hero-pill span,
.hero .hero-pill-text { color: #58a1ab; }

/* --- Sale badge ------------------------------------------------------------
   White on #c47b1e measured 3.39:1 at 11px/700. Amber darkened to 4.70:1. */
:root { --amber: #a5650f; }

/* --- Footer ----------------------------------------------------------------
   The whole footer sat between 2.18:1 and 3.54:1 on #070f18. Opacity raised
   to clear AA while keeping the hierarchy the design intended: links brightest,
   then description, then the muted legal row.

     .footer-desc     3.17:1 -> 6.0:1
     .footer-col-h    3.54:1 -> 5.3:1
     .footer-links a  3.17:1 -> 8.0:1
     .footer-legal a  2.18:1 -> 5.7:1
     .footer-bottom p 2.18:1 -> 5.7:1                                        */
.site-footer .footer-desc     { color: rgba(255, 255, 255, 0.60); }
.site-footer .footer-col-h    { color: rgba(255, 255, 255, 0.55); }
.site-footer .footer-links a  { color: rgba(255, 255, 255, 0.72); }
.site-footer .footer-legal a,
.site-footer .footer-bottom p { color: rgba(255, 255, 255, 0.58); }
.site-footer .footer-links a:hover,
.site-footer .footer-legal a:hover { color: #ffffff; }

/* --- Touch targets ---------------------------------------------------------
   The footer legal links rendered 75x14, under the 24x24 minimum. */
.footer-legal { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; list-style: none; margin: 0; padding: 0; }
.footer-legal a,
.footer-links a { display: inline-flex; align-items: center; min-height: 24px; }

/* --- Trustpilot fallback link ----------------------------------------------
   Each widget contains a plain link that shows until the Trustpilot script
   swaps in the iframe. It inherits whatever colour surrounds it, which on the
   dark footer is unreadable. This is the same contrast failure Lighthouse
   reports on the current live site, in both the header and the footer.
   Given an explicit colour per surface it passes and stays on-brand. */
.trustpilot-widget > a {
  color: var(--action);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-size: 0.8125rem;
}
.site-footer .trustpilot-widget > a,
.hero .trustpilot-widget > a { color: rgba(255, 255, 255, 0.72); }
.site-footer .trustpilot-widget > a:hover,
.hero .trustpilot-widget > a:hover { color: #ffffff; }

/* --- Byline avatar monogram ------------------------------------------------
   #387780 on #e1ebec measured 4.20:1 at 14px/800, just under AA. The darker
   brand teal takes it to 5.85:1 without changing the hue. */
.post-avatar, .author-avatar { color: var(--action-dark); }

/* --- Breadcrumb links ------------------------------------------------------
   Yoast renders the trail as links in a run of plain text. They were set apart
   by colour alone, and only 2.38:1 against the surrounding text, so anyone who
   does not perceive that difference cannot see where the links are. An
   underline is the non-colour cue; the current page stays plain. */
.bc-inner a {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.bc-inner a:hover { text-decoration-thickness: 2px; }
.bc-inner [aria-current="page"],
.bc-inner .breadcrumb_last { text-decoration: none; }

/* ===========================================================================
   Article page refinements

   These live here rather than in the shared core because the per-template
   sheet (t-single.css, ported from the approved design) loads between core and
   this file. Anything that needs to override a design rule has to come after
   it, which core cannot.
   ======================================================================== */

/* --- Sticky nav ------------------------------------------------------------
   The design puts position:sticky on .nav, but a sticky element can only move
   within its own parent's box. .nav sits inside .site-header, whose only other
   children (.mob-header, .mob-overlay, .mob-drawer) are display:none on
   desktop, so the parent is exactly as tall as the nav. There was nowhere to
   stick, and the bar scrolled away entirely: measured at scrollTop 1600 its
   top offset was -1600.

   The sticky behaviour therefore moves up to .site-header, whose parent is the
   body and so has the whole page to travel. .nav goes back to static so the
   two do not compete. This fixes the mobile header at the same time, which had
   the identical problem. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  isolation: isolate;
  background-color: var(--white);
}
.nav {
  position: static;
  background-color: var(--white);
}
.nav .nav-inner { background-color: var(--white); }

@media (max-width: 900px) {
  .mob-header { position: static; }
}

/* The drawer and its scrim are fixed, so they are unaffected by the header
   becoming a sticky containing block. */
.mob-drawer, .mob-overlay { position: fixed; }

.reading-progress { z-index: 190; }

@media (min-width: 901px) {
  .nav-links { display: flex; }
}

/* --- Hero figure -----------------------------------------------------------
   The design ran this at 16/7, which at 1440px meant a 750px tall image above
   the fold. A calmer ratio and a height cap so the article starts with the
   writing.

   The image is also wrapped in a <picture> by the image optimiser, so the
   fill rules have to target that wrapper as well; targeting img alone left it
   at 0x0. */
.hero-visual {
  aspect-ratio: 21 / 9;
  max-height: 440px;
  overflow: hidden;
}
.hero-visual picture { display: block; width: 100%; height: 100%; }
.hero-visual img,
.hero-visual picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 700px) {
  .hero-visual { aspect-ratio: 16 / 9; max-height: none; }
}

/* --- Author card and tags --------------------------------------------------
   Both were full-bleed children of the article while everything above sat in
   the 1100px measure. The design sets a margin shorthand on .author-card, so
   the inline margins have to be restated here to survive it. */
.author-card,
.tag-list-wrap {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.author-card { margin-top: 2.5rem; }

@media (max-width: 1180px) {
  .hero-visual,
  .author-card,
  .tag-list-wrap { max-width: calc(100% - 3rem); }
}

/* --- Related reading -------------------------------------------------------
   Three across, title only. A signpost at the end of a long read does not need
   the full card treatment the index uses. */
.related-posts .blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.related-posts .post-card-img,
.related-posts .post-card-excerpt,
.related-posts .post-meta { display: none; }

.related-posts .post-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.25rem 1.375rem;
  box-shadow: none;
  transition: border-color 150ms, box-shadow 150ms;
}
.related-posts .post-card:hover {
  border-color: var(--action);
  box-shadow: var(--sh);
}
.related-posts .post-card-body { padding: 0; gap: 0.375rem; }
.related-posts .post-cat {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-light);
}
.related-posts .post-card-title { font-size: 1rem; line-height: 1.4; margin: 0; }

@media (max-width: 900px) {
  .related-posts .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .related-posts .blog-grid { grid-template-columns: 1fr; }
}

/* --- Hero measure ----------------------------------------------------------
   Aligned to the same 1100px column as the article body and author card. */
.hero-visual {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Featured product bar --------------------------------------------------
   Sits between the sticky nav and the breadcrumb. Deliberately quiet: it is a
   signpost inside an editorial page, not an advert, so it uses the warm
   surface rather than the brand teal and stays one row tall on desktop. */
.post-product {
  background: var(--warm);
  border-bottom: 1px solid var(--border);
}
.post-product-inner {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding: 0.875rem 0;
  display: flex;
  align-items: center;
  gap: 1.125rem;
}
.post-product-img {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--border);
}
.post-product-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.post-product-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.post-product-eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-light);
}
.post-product-name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
}
.post-product-desc {
  font-size: 0.8125rem;
  color: var(--ink-mid);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.post-product-buy {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.875rem;
}
.post-product-price {
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
}
.post-product-cta {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 1.125rem;
  border-radius: var(--r);
  background: var(--action);
  color: var(--white);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background 150ms;
}
.post-product-cta:hover { background: var(--action-dark); }

@media (max-width: 1180px) {
  .post-product-inner { max-width: calc(100% - 3rem); }
}
@media (max-width: 760px) {
  .post-product-inner { flex-wrap: wrap; gap: 0.75rem 1rem; }
  .post-product-desc { display: none; }
  .post-product-body { flex: 1 1 60%; }
  .post-product-buy { flex: 1 1 100%; justify-content: space-between; }
  .post-product-cta { flex: 1 1 auto; justify-content: center; }
}

/* --- In-article product card -----------------------------------------------
   Injected between paragraphs, so it has to read as a deliberate aside rather
   than a banner dropped into the prose. Sits in the text column, gets a border
   and the warm ground, and breathes more than the top bar because the reader
   is already committed by the time they reach it. */
.inline-product {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  background: var(--warm);
  border: 1px solid var(--border);
  border-left: 3px solid var(--action);
  border-radius: var(--r-lg);
  padding: 1.375rem 1.5rem;
  margin: 2.25rem 0;
  clear: both;
}
.inline-product-media {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--border);
}
.inline-product-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.inline-product-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}
.inline-product-eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--action);
}
.inline-product-name {
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.inline-product-desc {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink-mid);
}
.inline-product-foot {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.375rem;
}
.inline-product-price {
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
}
.inline-product-cta {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 1.25rem;
  border-radius: var(--r);
  background: var(--action);
  color: var(--white);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background 150ms;
}
.inline-product-cta:hover { background: var(--action-dark); }

/* The prose layer adds vertical rhythm to every child; the card sets its own. */
.prose > .inline-product + * { margin-top: 0; }

@media (max-width: 640px) {
  .inline-product { flex-direction: column; gap: 1rem; padding: 1.25rem; }
  .inline-product-media { width: 100%; height: 160px; }
  .inline-product-cta { flex: 1 1 auto; justify-content: center; }
}

/* --- Homepage shelves as real lists ----------------------------------------
   The design marked the trust strip, the reasons and the steps up as nested
   divs. They are lists of like things, and the reasons and steps are numbered,
   so they are <ul>/<ol> here. The design's CSS targets the classes, so the look
   is unchanged; these rules only strip the default list furniture. */
.usp-inner,
.why-benefits,
.how-grid,
.numbers-grid { list-style: none; margin: 0; padding: 0; }

.why-benefits .benefit-title,
.how-card .how-title { margin: 0; }

/* The design numbered the steps with a data attribute on the card; keeping the
   ordered list means the number is available to assistive tech too. */
.how-grid { counter-reset: none; }

/* --- Hero performance panel ------------------------------------------------
   The design's lists were nested divs; they are real lists here. The source
   line is new: the mockup asserted its figures with no attribution, and a
   number like this is only worth showing if a reader can trace it. */
.freq-list, .cert-tags { list-style: none; margin: 0; padding: 0; }

.shield-source {
  margin-top: 1rem;
  padding-top: 0.875rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.75rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
}
.shield-source a {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.shield-source a:hover { color: #ffffff; }
.shield-footnote { display: block; margin-top: 0.25rem; color: rgba(255, 255, 255, 0.5); }

.shield-card figcaption.shield-card-hd { display: flex; }

/* --- Adaptive shop sidebar -------------------------------------------------
   The design assumed every category carries a four-group filter panel. Most
   here hold five products and support none, so the grid takes the full width
   when the sidebar has nothing to show. */
.shop-wrap--full { grid-template-columns: 1fr; }
.shop-wrap--full .grid-area { grid-column: 1 / -1; }

.sidebar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.sidebar-clear {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--action);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.filter-list { list-style: none; margin: 0; padding: 0; }
.filter-option a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 32px;
  padding: 0.3125rem 0;
  font-size: 0.875rem;
  color: var(--ink-mid);
  text-decoration: none;
}
.filter-option a:hover { color: var(--ink); }
.filter-option.is-active a { color: var(--action); font-weight: 700; }
.filter-option.is-active a::before {
  content: "";
  width: 14px; height: 14px;
  flex: 0 0 auto;
  margin-right: 0.5rem;
  border-radius: 3px;
  background: var(--action);
}
.filter-count {
  flex: 0 0 auto;
  font-size: 0.75rem;
  color: var(--ink-light);
  font-variant-numeric: tabular-nums;
}

.filter-price { display: flex; flex-wrap: wrap; gap: 0.625rem; align-items: flex-end; }
.filter-price-row { display: flex; flex-direction: column; gap: 0.25rem; flex: 1 1 40%; }
.filter-price-row label { font-size: 0.75rem; color: var(--ink-light); font-weight: 600; }
.filter-price-row input {
  width: 100%;
  min-height: 38px;
  padding: 0 0.625rem;
  border: 1px solid var(--border);
  border-radius: var(--r);
  font: inherit;
  font-size: 0.875rem;
  background: var(--white);
  color: var(--ink);
}
.filter-price-go {
  flex: 1 1 100%;
  min-height: 38px;
  border: 0;
  border-radius: var(--r);
  background: var(--ink);
  color: var(--white);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
}
.filter-price-go:hover { background: var(--action); }

@media (max-width: 900px) {
  .shop-wrap { grid-template-columns: 1fr; }
  .sidebar { position: static; }
}

/* --- Category guide and FAQ ------------------------------------------------
   Both are the same category description field, split by heading, so an editor
   changes one place and the template decides where each part lands. */
.content-block-inner h2:first-child { margin-top: 0; }
.faq-section .faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 1.375rem;
  background: none;
  border: 0;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  min-height: 56px;
}
.faq-section h3 { margin: 0; font-size: inherit; font-weight: inherit; }
.faq-chevron { flex: 0 0 auto; transition: transform 180ms; color: var(--ink-light); }
.faq-q[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); }
.faq-a[hidden] { display: none; }
.faq-a-inner { padding: 0 1.375rem 1.375rem; }
.faq-a-inner p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .faq-chevron { transition: none; }
}

/* --- Product video ---------------------------------------------------------
   A poster image with a play button, swapped for the real player on click.
   The embedded player pulls about a megabyte of script and sets cookies before
   anyone has asked to watch, so it stays out of the page until wanted. */
.pdp-video { max-width: 760px; margin: 3rem auto 0; padding: 0 1.5rem; }
.video-facade {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink);
}
.video-facade img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-facade iframe { width: 100%; height: 100%; border: 0; display: block; }

.video-play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 30, 46, 0.32);
  border: 0;
  cursor: pointer;
  transition: background 150ms;
}
.video-play:hover { background: rgba(15, 30, 46, 0.48); }
.video-play-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--white);
  position: relative;
  box-shadow: var(--sh-md);
}
.video-play-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--action);
}

/* --- Product specification notes ------------------------------------------ */
.spec-notes { margin-top: 1.5rem; }
.spec-notes p { font-size: 0.9375rem; }

/* --- Product FAQ tab -------------------------------------------------------
   Reuses the category accordion styling inside the tab panel. */
.tab-pane .faq-list { display: flex; flex-direction: column; gap: 0.75rem; }
.tab-pane .faq-item {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--white);
}

/* --- Homepage shelves as lists ---------------------------------------------
   The design used <div> containers with <article> cards. The cards are real
   list items here (an article carrying role="listitem" is an invalid role
   override), so the containers are lists and need the default styling reset. */
.products-grid, .cat-grid, .media-logos { list-style: none; margin: 0; padding: 0; }
.media-logos { display: flex; flex-wrap: wrap; align-items: center; }

/* --- Category grid: two rows of four ---------------------------------------
   The design shows eight cards in a fixed 4-column grid. Its own rule uses
   auto-fit, which reflows to five or six across on a wide screen and breaks
   the two-row composition. */
.cat-grid { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1100px) {
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .cat-grid { grid-template-columns: 1fr; }
}

/* The card is now an <li> wrapper around the link. */
.cat-grid > li { display: flex; }
.cat-grid > li > .cat-card { width: 100%; }

/* --- Category card: the shared base ----------------------------------------
   These rules only ever existed in t-home.css, because the homepage shelf was
   the only place the design used the component. The category index at
   /product-category/ reuses the same classes but loads t-category.css, so it
   got the columns set below and nothing else: `.cat-grid` stayed display:block
   and every card rendered as a full-width 170px strip with no ground, no
   radius and unstyled text.

   They belong here rather than in either template sheet, for the same reason
   the blog card components sit in core: two templates share them, and a copy
   in each is a copy that can drift. The values are t-home.css's own, so the
   homepage renders exactly as before. */
.cat-grid { display: grid; gap: 1rem; }

.cat-card {
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-decoration: none;
  transition: transform 200ms, box-shadow 200ms;
}
.cat-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }

.cat-card-body { padding: 1.375rem; }
.cat-name { font-size: 1.0625rem; font-weight: 800; color: var(--white); line-height: 1.2; margin-bottom: 0.3rem; }
.cat-meta { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.72); margin-bottom: 0.75rem; }
.cat-link { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 700; color: var(--action); }

@media (prefers-reduced-motion: reduce) {
  .cat-card, .cat-card:hover { transition: none; transform: none; }
}

/* The index card carries a child-category list underneath it, so it sizes to
   its content instead of holding the shelf's portrait crop. */
.cat-index-item .cat-card { aspect-ratio: 4 / 3; }

/* --- Category card photography ---------------------------------------------
   The design's card is a gradient with a faint watermark icon and no photo at
   all. Real category images are a deliberate departure, so they get their own
   full-bleed layer behind a scrim rather than being forced into the watermark
   slot, where they collapsed to 0x0.

   The scrim keeps the name, count and price legible over any photograph. */
.cat-card { position: relative; isolation: isolate; }

.cat-card-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  overflow: hidden;
  border-radius: inherit;
}
.cat-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms ease;
}
.cat-card:hover .cat-card-media img { transform: scale(1.04); }

/* Scrim: heaviest at the foot, where the text sits. */
.cat-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(13, 32, 53, 0.94) 0%,
    rgba(13, 32, 53, 0.72) 38%,
    rgba(13, 32, 53, 0.28) 72%,
    rgba(13, 32, 53, 0.12) 100%
  );
}

.cat-card-body { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .cat-card-media img,
  .cat-card:hover .cat-card-media img { transition: none; transform: none; }
}

/* ===========================================================================
   Round of fixes from the 14 Sep design review
   ======================================================================== */

/* --- Trust strip alignment -------------------------------------------------
   .usp-inner had no auto margin and no padding, so it started at x=0 while
   every other content column starts at 67px. */
.usp-inner {
  max-width: 1340px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Category hero: unreadable intro ---------------------------------------
   The hero sits on --ink and .prose sets colour to --ink, so the intro was
   #0f1e2e on #0f1e2e: contrast 1.00, 478 characters of invisible copy. The
   product count was 3.69:1, also under AA. */
.cat-hero .cat-intro,
.cat-hero .cat-intro p,
.cat-hero .cat-intro li {
  color: rgba(255, 255, 255, 0.82);
}
.cat-hero .cat-intro a {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cat-hero .cat-intro strong { color: #ffffff; }
.cat-hero .cat-meta-row { color: rgba(255, 255, 255, 0.62); }

/* --- Catalogue sort control ------------------------------------------------
   Rendered as a raw browser select: Arial, 19px tall, default chrome. */
.woocommerce-ordering select,
select.orderby {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  background-color: var(--white);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M2 3.5L5 6.5L8 3.5' stroke='%2364788a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  border: 1px solid var(--border);
  border-radius: var(--r);
  min-height: 42px;
  padding: 0 2.5rem 0 1rem;
  cursor: pointer;
  max-width: 100%;
}
.woocommerce-ordering select:hover { border-color: var(--ink-light); }
.woocommerce-ordering { margin: 0; }

.grid-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.woocommerce-result-count { margin: 0; font-size: 0.9375rem; color: var(--ink-light); }

/* --- Product card rating ---------------------------------------------------
   WooCommerce's .star-rating is a CSS-sprite element that needs its own font
   to render as stars. Without it the raw sentence "Rated 5.00 out of 5 based
   on 4 customer ratings" printed next to our own label. The template now draws
   the design's SVG stars, so WooCommerce's version is hidden and its text kept
   for assistive tech only. */
.product-stars .star-rating,
.pcard-rating .star-rating {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.product-stars { display: flex; align-items: center; gap: 0.45rem; position: relative; }
.stars-row { display: inline-flex; gap: 1px; color: var(--amber); line-height: 1; }
.star-lbl { font-size: 0.75rem; color: var(--ink-light); font-variant-numeric: tabular-nums; }
.product-stars--empty { display: none; }

/* --- Why us: single column when there is no image ---------------------------
   The design pairs the reason list with a visual. With no image set the grid
   still reserved a second column, leaving the right half of the section empty. */
.why-layout--solo { grid-template-columns: 1fr; }
.why-layout--solo .why-benefits { max-width: 760px; }

/* --- Category index page ---------------------------------------------------
   /product-category/ was a 404: WordPress does not route a bare taxonomy base.
   It now lists every category, with children beneath each card. */
.cat-grid--index { grid-template-columns: repeat(4, 1fr); align-items: start; }
.cat-index-item { display: flex; flex-direction: column; gap: 0.75rem; }

.cat-children { list-style: none; margin: 0; padding: 0 0.25rem; display: flex; flex-direction: column; gap: 0.125rem; }
.cat-children a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 30px;
  padding: 0.2rem 0;
  font-size: 0.8125rem;
  color: var(--ink-mid);
  text-decoration: none;
}
.cat-children a:hover { color: var(--action); }
.cat-children-count { font-size: 0.6875rem; color: var(--ink-light); font-variant-numeric: tabular-nums; }

@media (max-width: 1100px) { .cat-grid--index { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .cat-grid--index { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .cat-grid--index { grid-template-columns: 1fr; } }

/* Reviews shelf: the widget reserves its own height, so hold the box to stop
   the page jumping when the iframe swaps in. The shelf header now carries the
   compact Mini TrustBox rather than the full-height carousel, so the reserved
   box has to match that widget's own 140px or it leaves a hole. */
.home-reviews .trustpilot-widget { min-height: 420px; }
.reviews-section .tp-widget-slot .trustpilot-widget { min-height: 170px; }

/* --- Section width: undo a collision created by the CSS merge ---------------
   `.section` means two different things across the design files. The homepage
   and category designs use it as a full-bleed band whose inner wrapper caps at
   1340px; blog, about and the legal pages use it as a narrow 1100px column.
   Merging every file's rules into one core sheet left three competing
   `.section` declarations, and the last one capped the homepage bands at 1340.

   The visible effect: .nav-inner, .hero-inner and .footer-grid sat at 1340px
   starting at x=43, while every .section-inner sat at 1292px starting at x=67,
   so the page ran on two alignment grids 24px apart.

   These are the bands that should be full-bleed. The narrow pages keep 1100. */
.home-cats,
.products-section,
.numbers-section,
.why-section,
.how-section,
.home-reviews,
.reviews-section,
.home-cta,
.cta-section,
.cat-index,
.related-posts {
  max-width: none;
}

/* --- Certification panel ----------------------------------------------------
   The design's table used two <td> cells per row. The band name is a row
   header here, so the first-column styling has to name <th> as well. The
   source line is new: a panel headed "every claim is verifiable" needs a path
   back to where the figures were published. */
.cert-table th { padding: 0.75rem 0; border-bottom: 1px solid rgba(255,255,255,0.07); font-size: 0.875rem; vertical-align: middle; font-weight: 400; text-align: left; color: rgba(255,255,255,0.55); }
.cert-table tr:last-child th { border-bottom: none; }

.cert-source { font-size: 0.75rem; color: var(--ink-light); line-height: 1.6; }
.cert-source a { color: var(--action); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.cert-note { display: block; margin-top: 0.25rem; }

@media (max-width: 900px) {
  .cert-table th { padding: 0.625rem 0; font-size: 0.8125rem; border-bottom-color: rgba(255,255,255,0.08); }
}

/* --- Scarcity and demand ----------------------------------------------------
   The design's `.proof-strip` is a band across the foot of the product card,
   white on the action colour, or on a dark orange when it is a stock warning.
   Its own rules are already in the template sheets; these only handle the
   paragraph reset and the product page, which the design never showed one on. */
.proof-strip { margin: 0; }

/* On a product page the strip has no card to span, so it becomes an inline
   pill next to the price rather than a full-width band across the column. */
.proof-strip--pdp { display: inline-block; width: auto; margin: 1rem 0 0; padding: 0.4375rem 0.875rem; border-radius: var(--r); font-size: 0.8125rem; }

/* --- Reviews shelf ----------------------------------------------------------
   The design drew a static Trustpilot badge with a hard-coded score and review
   count. That is the one thing on the shelf that must not be static, so the
   live widget goes in its place, sized to sit on the same baseline as the
   heading beside it. */
.tp-widget-slot { flex: 0 0 auto; width: min(300px, 100%); padding: 1rem 1.125rem; }
.tp-widget-slot .trustpilot-widget { margin: 0; width: 100%; }
/* The design's badge was an <a>; this one wraps a widget that carries its own
   links, so it is a plain box and must not keep the link hover affordance. */
.tp-widget-badge.tp-widget-slot:hover { border-color: var(--border); box-shadow: none; }

.review-card { display: flex; flex-direction: column; }
.review-card .r-text { flex: 1 1 auto; }
.review-card .r-title { margin: 0 0 0.5rem; }
.review-card .r-title a { color: inherit; text-decoration: none; }
.review-card .r-title a:hover { color: var(--action); text-decoration: underline; text-underline-offset: 2px; }
.review-card blockquote.r-text { margin: 0 0 1.25rem; padding: 0; border: 0; }

@media (max-width: 900px) {
  .reviews-grid { grid-template-columns: 1fr; }
  .tp-widget-slot { width: 100%; }
}

/* Row labels in the cert panel link to the product that publishes the figure,
   so they need to read as links against the dark panel. */
.cert-table th a { color: rgba(255,255,255,0.9); text-decoration: underline; text-decoration-color: rgba(255,255,255,0.3); text-underline-offset: 3px; }
.cert-table th a:hover { color: var(--white); text-decoration-color: var(--action); }

/* --- Footer -----------------------------------------------------------------
   The Trustpilot widget centres its own contents and expands to whatever width
   it is given, so in a 2fr column it sat centred beneath a left-aligned logo
   and description. Boxing it to the width it actually needs lines it back up. */
.footer-trustpilot { width: 100%; max-width: 200px; margin-top: 1.5rem; }
.footer-trustpilot .trustpilot-widget { min-height: 28px; }

/* --- Trustpilot badge -------------------------------------------------------
   The design's own badge markup, driven by live figures. Because the rating is
   real rather than a mocked-up five stars, the row needs an unfilled tile. */
.tp-widget-badge { color: inherit; }
.tp-sq--empty { background: #dcdce6; }
.tp-widget-badge .tp-logo { display: block; }
.tp-widget-badge .tp-stars-row { display: flex; }
.tp-widget-badge .tp-info { display: flex; flex-direction: column; gap: 0.125rem; text-align: center; }
.tp-widget-badge .tp-info .score,
.tp-widget-badge .tp-info .label,
.tp-widget-badge .tp-info .count { display: block; }
.tp-info .score-lbl { font-size: 1rem; font-weight: 500; color: var(--ink-light); }

/* The stock warning needs its colour on every template, not just category
   pages: the homepage design set it as an inline style. */
.proof-strip.low { background: #8f3a0e; }

/* ===========================================================================
   PRODUCT PAGE
   ======================================================================== */

/* `.gallery` is another class the design files disagree on: category.html uses
   it as a dark gradient square for its illustration, product.html as the
   sticky left column. Both landed in the merged sheet. On a product page it is
   the column. */
.product-wrap .gallery { position: sticky; top: 88px; background: none; aspect-ratio: auto; overflow: visible; }
@media (max-width: 900px) { .product-wrap .gallery { position: static; } }

/* The mockup's gallery held flat SVG illustrations on a dark gradient. Real
   product photography is mostly light and often transparent, so the frame is a
   neutral surface and images are contained rather than cropped. */
.main-img { background: var(--surface); }
.main-img .main-img-el { width: 100%; height: 100%; object-fit: contain; display: block; }
.thumb { background: var(--surface); padding: 0.25rem; }
.thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.thumb.active { border-color: var(--action); }
.main-img--placeholder img { width: 100%; height: 100%; object-fit: contain; }
.main-img-zoom { display: inline-flex; align-items: center; justify-content: center; }

/* WooCommerce's own add-to-cart button carries no design class and there is no
   filter to add one, so the design's button styling is aliased onto it. */
.pdp-main button.single_add_to_cart_button.button,
.pdp-main a.single_add_to_cart_button.button,
.pdp-main button.btn-cart-main { width: 100%; padding: 1rem; background: var(--action); color: var(--white); font-family: var(--font); font-size: 1rem; font-weight: 700; border-radius: var(--r-lg); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.625rem; margin-bottom: 0.625rem; transition: background 150ms; }
.pdp-main button.single_add_to_cart_button.button:hover { background: var(--action-dark); }
.pdp-main button.single_add_to_cart_button.disabled,
.pdp-main button.single_add_to_cart_button:disabled { opacity: 0.5; cursor: not-allowed; }

.pp-enquire { margin: 0 0 1.25rem; }
.btn-enquire { width: 100%; padding: 0.8125rem; background: transparent; color: var(--ink); font-size: 0.9375rem; font-weight: 700; border: 1.5px solid var(--border); border-radius: var(--r-lg); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.5rem; text-decoration: none; transition: border-color 150ms, background 150ms; }
.btn-enquire:hover { border-color: var(--action); background: var(--action-pale); }

/* Stock line: the design only drew the in-stock state. */
.stock-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0 0 1rem; font-size: 0.875rem; }
.stock-dot-out { width: 8px; height: 8px; border-radius: 50%; background: #b4541f; flex-shrink: 0; }
.stock-out { font-weight: 700; color: #b4541f; }
.stock-note { color: var(--ink-light); }

/* Demand row. The design's second row ("14 people are viewing this now") is
   not rendered: the site has no presence data to base it on. */
.sp-row { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.5rem; }

/* Lists that the design marked up as nested divs. */
.trust-grid, .feat-grid, .size-opts { list-style: none; margin: 0; padding: 0; }
.trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1rem; }
.feat-card { margin: 0; }
.feat-card .feat-card-title { margin: 0 0 0.375rem; }
.feat-card .feat-card-desc { margin: 0; }

/* Variation selects stay in the markup and keep working; once the buttons are
   built from them they are redundant to sighted users. */
.variations .select-replaced { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.size-opts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.sz-btn[disabled] { opacity: 0.35; cursor: not-allowed; }

/* Price block: WooCommerce prints its own <p class="price"> inside. */
.price-block .price-main { margin: 0; }
.price-block .price-main .price,
.price-block .price-main ins { text-decoration: none; }
.price-block .price-main del { font-size: 0.6em; opacity: 0.55; margin-right: 0.35em; }

/* Sticky bar is hidden until the real button scrolls away. */
.sticky-bar[hidden] { display: none; }
.sticky-bar .sticky-thumb img { width: 100%; height: 100%; object-fit: contain; border-radius: var(--r); }
.sticky-product > span { display: flex; flex-direction: column; }

/* Quantity stepper: WooCommerce's input keeps its own class, so the spinner
   arrows have to go or the row is too wide. */
.qty-ctrl input.qty-n { width: 3ch; border: 0; background: none; text-align: center; font: inherit; color: inherit; -moz-appearance: textfield; appearance: textfield; }
.qty-ctrl input.qty-n::-webkit-outer-spin-button,
.qty-ctrl input.qty-n::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-block .field-lbl { display: block; margin-bottom: 0.5rem; }

/* Related shelf: the design's cards were anchors wrapping styled divs; these
   are a real list of links, so the furniture needs stripping and the inner
   spans need to lay out as blocks. */
.related-grid { list-style: none; margin: 0; padding: 0; }
.related-card { display: block; text-decoration: none; color: inherit; }
.related-card .related-img { display: block; aspect-ratio: 1; background: var(--surface); border-radius: var(--r-lg); overflow: hidden; }
.related-card .related-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.related-card .related-body { display: block; padding-top: 0.75rem; }
.related-card .related-name,
.related-card .related-price { display: block; }
.related-card:hover .related-name { color: var(--action); }

/* WooCommerce also emits its own related/upsell shelves from
   woocommerce_after_single_product_summary. The design has one, and it is the
   one above. */
.pdp-main .related.products,
.pdp-main .upsells.products { display: none; }

/* --- Collapsible filter groups ---------------------------------------------
   The sidebar ran to several screens on categories with more than one long
   attribute, so each group is a <details>. Native disclosure rather than a
   scripted one: it keeps keyboard and screen-reader behaviour for free and
   still works with JavaScript off. */
.filter-group > summary.filter-group-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.filter-group > summary.filter-group-title::-webkit-details-marker { display: none; }
.filter-group > summary.filter-group-title:hover { color: var(--action); }
.filter-group > summary.filter-group-title:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 3px;
  border-radius: 3px;
}
.filter-group > summary.filter-group-title > span:first-child { flex: 1 1 auto; }

/* Count of what is chosen inside a group, so a collapsed group still says it
   is doing something. */
.filter-group-count {
  flex: 0 0 auto;
  min-width: 1.25rem;
  padding: 0 0.3rem;
  border-radius: 100px;
  background: var(--action);
  color: var(--white);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.25rem;
  text-align: center;
}

.filter-chevron {
  flex: 0 0 auto;
  color: var(--ink-light);
  transition: transform 150ms ease;
}
.filter-group[open] > summary .filter-chevron { transform: rotate(180deg); }

/* A very long list still gets a ceiling once opened, so one group cannot take
   over the column. Set high enough that an ordinary list of eight or ten shows
   in full — a scrollbar on a short list is just noise. */
.filter-group .filter-list { max-height: 26rem; overflow-y: auto; overscroll-behavior: contain; }

@media (prefers-reduced-motion: reduce) {
  .filter-chevron { transition: none; }
}

/* ===========================================================================
   WOOCOMMERCE DEFAULT MARKUP
   ---------------------------------------------------------------------------
   My account, order tables, notices and password forms are WooCommerce's own
   templates. The designs never covered them, and the theme deliberately does
   not override those templates — CheckoutWC can be pointed at the account
   pages at any time and template overrides would then fight it. So this is a
   styling layer only: it dresses WooCommerce's markup in the design's tokens
   and touches no PHP.
   ======================================================================== */

/* --- Fields ----------------------------------------------------------------
   Scoped through #main, because WooCommerce puts its class on <body>.

   `.woocommerce form input` therefore reached every form on the page, the
   search box in the site header included. That is not WooCommerce's markup and
   already has its own pill styling, so it picked up a 1.5px border, a white
   ground and an 8px radius — but only on product and category pages, since
   those are the templates whose body carries the class. Moving between page
   types made the nav appear to change shape underneath you.

   #main rather than a class: <main id="main"> carries no class, and the header
   and drawer are both emitted before it, so this reaches the page content and
   nothing in the chrome. */
.woocommerce #main form .form-row { display: flex; flex-direction: column; gap: 0.375rem; margin: 0 0 1rem; }
.woocommerce #main form .form-row label { font-size: 0.8125rem; font-weight: 600; color: var(--ink); }
.woocommerce #main form .form-row .required { color: #b4541f; text-decoration: none; }

.woocommerce #main form input[type="text"],
.woocommerce #main form input[type="email"],
.woocommerce #main form input[type="tel"],
.woocommerce #main form input[type="password"],
.woocommerce #main form input[type="number"],
.woocommerce #main form input[type="search"],
.woocommerce #main form select,
.woocommerce #main form textarea {
  width: 100%;
  padding: 0.6875rem 0.875rem;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  background: var(--white);
  font-family: var(--font);
  font-size: 0.9375rem;
  color: var(--ink);
  transition: border-color 150ms, box-shadow 150ms;
}
.woocommerce #main form input:focus,
.woocommerce #main form select:focus,
.woocommerce #main form textarea:focus {
  outline: none;
  border-color: var(--action);
  box-shadow: 0 0 0 3px rgba(56, 119, 128, 0.14);
}

/* Checkbox rows are labels wrapping an input, so they must not stretch. */
.woocommerce #main form .form-row label.woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--ink-mid);
  cursor: pointer;
}
.woocommerce #main form .woocommerce-form__input-checkbox { width: auto; margin: 0.2rem 0 0; flex-shrink: 0; accent-color: var(--action); }

/* --- Buttons --------------------------------------------------------------- */
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.woocommerce-MyAccount-content .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--action);
  color: var(--white);
  border: none;
  border-radius: var(--r-lg);
  font-family: var(--font);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: background 150ms;
}
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover { background: var(--action-dark); color: var(--white); }

/* --- Login / register pair -------------------------------------------------- */
.woocommerce .u-columns.col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.woocommerce .u-columns.col2-set > .u-column1,
.woocommerce .u-columns.col2-set > .u-column2 {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.75rem;
  width: auto;
  float: none;
}
.woocommerce .u-columns.col2-set h2 { font-size: 1.125rem; font-weight: 700; margin: 0 0 1.25rem; }
.woocommerce .woocommerce-LostPassword { margin: 0.75rem 0 0; font-size: 0.875rem; }
.woocommerce .woocommerce-privacy-policy-text p { font-size: 0.8125rem; color: var(--ink-light); line-height: 1.6; }

@media (max-width: 760px) {
  .woocommerce .u-columns.col2-set { grid-template-columns: 1fr; }
}

/* --- Account dashboard ------------------------------------------------------ */
.woocommerce-account .woocommerce { display: grid; grid-template-columns: 240px 1fr; gap: 2.5rem; align-items: start; }
.woocommerce-account .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.woocommerce-account .woocommerce:has(.u-columns) { display: block; }

.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 0.625rem 0.875rem;
  border-radius: var(--r);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink-mid);
  text-decoration: none;
  transition: background 150ms, color 150ms;
}
.woocommerce-MyAccount-navigation li a:hover { background: var(--surface); color: var(--ink); }
.woocommerce-MyAccount-navigation li.is-active a { background: var(--action-pale); color: var(--action-dark); }

.woocommerce-MyAccount-content { min-width: 0; }
.woocommerce-MyAccount-content > p:first-child { margin-top: 0; }

@media (max-width: 900px) {
  .woocommerce-account .woocommerce { grid-template-columns: 1fr; gap: 1.5rem; }
  .woocommerce-MyAccount-navigation ul { flex-direction: row; flex-wrap: wrap; gap: 0.375rem; }
}

/* --- Tables (orders, downloads, addresses) ---------------------------------- */
.woocommerce table.shop_table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  font-size: 0.9375rem;
}
/* Only the header row. WooCommerce marks the product name cell as a <th>
   inside the body, so an unscoped `th` rule rendered every product title in
   small uppercase letter-spaced grey. */
.woocommerce table.shop_table thead th {
  background: var(--surface);
  padding: 0.875rem 1rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-light);
  border-bottom: 1px solid var(--border);
}
.woocommerce table.shop_table tbody th {
  padding: 1rem;
  text-align: left;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.woocommerce table.shop_table tbody tr:last-child th { border-bottom: none; }
.woocommerce table.shop_table td { padding: 1rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.woocommerce table.shop_table tr:last-child td { border-bottom: none; }

/* --- Notices ---------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0 0 1.5rem;
  padding: 0.875rem 1.125rem;
  border-radius: var(--r-lg);
  border-left: 4px solid var(--action);
  background: var(--action-pale);
  color: var(--ink);
  font-size: 0.9375rem;
  list-style: none;
}
.woocommerce-error { border-left-color: #b4541f; background: #fdf2ec; }
.woocommerce-message .button,
.woocommerce-info .button { margin-left: auto; padding: 0.5rem 1rem; font-size: 0.8125rem; }

/* --- Page hero -------------------------------------------------------------
   `.bc` means two things across the design files: a white breadcrumb *bar* on
   the product template, and plain light text inside the dark page hero on
   about, contact, refunds and the legal pages. The bar version is last in the
   merged sheet and so was winning everywhere, which would have put a white
   band inside the navy hero. Scope it back. */
.page-hero .bc {
  display: flex;
  background: none;
  border: 0;
  padding: 0;
  margin-bottom: 1rem;
}
.page-hero .bc-inner {
  max-width: none;
  margin: 0;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.8125rem;
}
.page-hero .bc-inner a { color: rgba(255, 255, 255, 0.7); }
.page-hero .bc-inner a:hover { color: #ffffff; }
.page-hero .bc-inner [aria-current="page"] { color: rgba(255, 255, 255, 0.45); }

/* --- Prose width vs application markup -------------------------------------
   `.prose` caps at 72ch, which is right for reading and wrong for anything
   with its own layout. The account dashboard, cart and order tables are
   applications inside that column, so they take the full width. */
.prose > .woocommerce,
.prose > .woocommerce-notices-wrapper,
.prose .woocommerce-MyAccount-navigation,
.prose .woocommerce-MyAccount-content,
.prose > form.woocommerce-form { max-width: none; }
.page-article .prose:has(> .woocommerce) { max-width: none; }

/* Equal columns even when a form inside wants to be wider than half. */
.woocommerce .u-columns.col2-set { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* WooCommerce clears its floated columns with ::before/::after. Turning the
   parent into a grid promotes those pseudo-elements to grid items, so the
   empty ::before took cell one and pushed Login into column two with Register
   wrapping to a second row. Nothing floats here any more, so they can go. */
.woocommerce .u-columns.col2-set::before,
.woocommerce .u-columns.col2-set::after,
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after { content: none; }

/* --- Cart ------------------------------------------------------------------
   WooCommerce ships the cart as a six-column table. At 960px that gave the
   remove column 351px of slack and squeezed the product name to 196px, and on
   a phone it has nowhere to go at all.

   Rebuilt here as the layout the rest of the site uses: line items as cards in
   the main column, order summary in a sticky panel beside them, matching the
   product page's 1fr/380px rhythm. Done in CSS against WooCommerce's own
   markup, so there is no template override to keep in step with WooCommerce
   or to conflict with CheckoutWC. */

.woocommerce-cart .woocommerce {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 2.5rem;
  align-items: start;
}
.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }

/* The table becomes a list of cards. */
.woocommerce-cart table.shop_table.cart,
.woocommerce-cart table.shop_table.cart tbody,
.woocommerce-cart table.shop_table.cart tr { display: block; border: 0; width: 100%; }

.woocommerce-cart table.shop_table.cart thead { display: none; }

/* Specificity matters here: the rule above that flattens the table sets
   `display: block` on `table.shop_table.cart tr` at (0,2,2), which outranks a
   plain `tr.cart_item` at (0,2,1) — so the line items stacked instead of
   laying out in columns. Match the same depth. */
.woocommerce-cart table.shop_table.cart tr.cart_item {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  grid-template-areas:
    "thumb name    remove"
    "thumb qty     subtotal";
  gap: 0.5rem 1rem;
  align-items: center;
  padding: 1.125rem;
  margin-bottom: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--white);
}

.woocommerce-cart table.shop_table.cart tr.cart_item > td,
.woocommerce-cart table.shop_table.cart tr.cart_item > th { display: block; padding: 0; border: 0; }

.woocommerce-cart table.shop_table.cart .cart_item .product-thumbnail { grid-area: thumb; width: auto; }
.woocommerce-cart .cart_item .product-name      { grid-area: name; align-self: end; }
.woocommerce-cart .cart_item .product-remove    { grid-area: remove; justify-self: end; align-self: start; width: auto; }
.woocommerce-cart .cart_item .product-quantity  { grid-area: qty; align-self: start; }
.woocommerce-cart .cart_item .product-subtotal  { grid-area: subtotal; justify-self: end; align-self: start; font-weight: 800; }

/* Unit price is the subtotal when quantity is one, so it only earns its place
   on a line with more than one of something. */
.woocommerce-cart table.shop_table.cart tr.cart_item > td.product-price { display: none; }

.woocommerce-cart table.shop_table.cart tbody .product-name a {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.woocommerce-cart table.shop_table.cart tbody .product-name a:hover { color: var(--action); }
.woocommerce-cart .cart_item .product-thumbnail img {
  width: 88px;
  height: 88px;
  object-fit: contain;
  background: var(--surface);
  border-radius: var(--r);
  display: block;
}
.woocommerce-cart .cart_item .product-thumbnail a { display: block; text-decoration: none; }

/* The coupon and update row is its own table row; pull it out of the card
   rhythm and give it a bar of its own. */
.woocommerce-cart table.shop_table.cart tr:not(.cart_item) td.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  padding: 1.125rem;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.woocommerce-cart .coupon { display: flex; gap: 0.5rem; flex: 1 1 auto; }
.woocommerce-cart .coupon .input-text { flex: 1 1 180px; min-width: 150px; max-width: 240px; }
.woocommerce-cart .coupon .button { white-space: nowrap; flex: 0 0 auto; }

.woocommerce-cart .remove { font-size: 1rem; }

/* Order summary. */
.woocommerce-cart .cart-collaterals { position: sticky; top: 96px; width: auto; margin: 0; }
.woocommerce-cart .cart_totals {
  max-width: none;
  margin: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  box-shadow: var(--sh);
}
.woocommerce-cart .cart_totals h2 { font-size: 1.0625rem; font-weight: 700; margin: 0 0 1rem; }
.woocommerce-cart .cart_totals table.shop_table { border: 0; font-size: 0.9375rem; }
.woocommerce-cart .cart_totals table.shop_table th {
  background: none;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-mid);
  padding: 0.625rem 0 0.625rem 0;
}
.woocommerce-cart .cart_totals table.shop_table td { padding: 0.625rem 0; text-align: right; }
.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td { font-size: 1.0625rem; font-weight: 800; color: var(--ink); }
.woocommerce-cart .wc-proceed-to-checkout { margin-top: 1.25rem; padding: 0; }
.woocommerce-cart .wc-proceed-to-checkout .checkout-button { width: 100%; padding: 0.9375rem; font-size: 1rem; }

@media (max-width: 900px) {
  .woocommerce-cart .woocommerce { grid-template-columns: 1fr; gap: 1.5rem; }
  .woocommerce-cart .cart-collaterals { position: static; }
  .woocommerce-cart tr.cart_item {
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: 0.5rem 0.875rem;
    padding: 0.875rem;
  }
  .woocommerce-cart .cart_item .product-thumbnail img { width: 72px; height: 72px; }
  .woocommerce-cart table.shop_table.cart tr:not(.cart_item) td.actions { padding: 0.875rem; }
  .woocommerce-cart .coupon { flex: 1 1 100%; }
}

/* --- Contact ---------------------------------------------------------------
   The design marked the cards up as nested divs; they are a list here. */
.contact-card-list { list-style: none; margin: 0; padding: 0; }
.contact-card .contact-card-title { margin: 0 0 0.125rem; }
.contact-card .contact-card-detail,
.contact-card .contact-card-note { margin: 0; }
.contact-card .contact-card-detail a { color: inherit; text-decoration: none; }
.contact-card .contact-card-detail a:hover { color: var(--action); text-decoration: underline; }
.contact-card-icon { display: inline-flex; align-items: center; justify-content: center; }

/* The honeypot must be unreachable by sight, by pointer and by assistive
   technology, without display:none — some bots skip hidden fields. */
.emf-hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-panel .woocommerce-message,
.form-panel .woocommerce-error { margin-bottom: 1.25rem; }
.form-panel .field textarea { resize: vertical; min-height: 8rem; }
.form-panel .submit-btn { width: 100%; }
.contact-extra { margin-top: 3rem; }

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; }
}

/* --- Buy box rhythm --------------------------------------------------------
   Quantity and Add to cart were sitting on top of each other: the stepper is
   an inline-flex block with no trailing margin and the button's own margin is
   only 0.625rem, meant for the gap between it and the secondary button below.
   These give each control in the buy box its own breathing room. */
/* WooCommerce's own `.woocommerce div.product form.cart div.quantity` is
   specificity (0,4,2) and sets `margin: 0 4px 0 0`, so a shorter selector here
   lost and the stepper sat flush against the button. Matched, then beaten. */
.woocommerce div.product form.cart div.quantity.qty-block,
.pdp-main form.cart .qty-block,
.pdp-main .single_variation_wrap .qty-block { margin: 0 0 1.25rem; }
.pdp-main form.cart .quantity + .single_add_to_cart_button { margin-top: 0; }
.pdp-main form.cart { display: flex; flex-direction: column; }
.pdp-main form.cart .variations { margin-bottom: 1.25rem; }
.pdp-main form.cart .woocommerce-variation-price { margin-bottom: 1rem; }
.pdp-main form.cart .woocommerce-variation-availability { margin-bottom: 0.75rem; }

/* The stepper and the button belong to the same decision, so they line up on
   the same left edge and the button takes the full panel width under it. */
.pdp-main .qty-ctrl { margin: 0; }
.pdp-main .single_add_to_cart_button { margin-bottom: 0.75rem; }

/* Rating row: the panel prints its own "4.9 · 7 reviews" beside the stars, so
   the stars carry no label of their own and need to sit on its baseline. */
.pp-stars { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.pp-stars .product-stars { display: inline-flex; align-items: center; gap: 0; margin: 0; }
.pp-stars .stars-row { display: inline-flex; gap: 2px; color: var(--amber, #e5a132); }
.pp-review-link { font-size: 0.875rem; color: var(--ink-mid); text-decoration: none; }
.pp-review-link:hover { color: var(--action); text-decoration: underline; }

/* Thumbnails now sit under the main image. */
.gallery-inner .thumb-strip { margin: 0.875rem 0 0; }

/* ===========================================================================
   MOBILE: CATEGORY PAGES
   ---------------------------------------------------------------------------
   Three problems on a phone, all from desktop markup being left in place:
   the trust strip stacked into four full-width rows, the filter sidebar
   rendered in full above the grid, and between them the first product sat
   most of a screen down. The mobile design solves all three — trust points
   move into the nav drawer, filters go behind a button in a bottom sheet.
   ======================================================================== */

/* The toolbar and sheet are mobile-only; desktop keeps the sidebar it has. */
.filter-toolbar,
.sheet-overlay { display: none; }

@media (max-width: 1150px) {

  /* 1. Trust strip off. The same items render inside the drawer. */
  .usp-strip { display: none; }

  /* 2. Filter bar under the sticky header. */
  .filter-toolbar { display: block; position: sticky; top: 60px; z-index: 200; }
  .filter-toolbar .toolbar-sort { flex-shrink: 0; }
  .filter-toolbar .toolbar-sort form,
  .filter-toolbar .toolbar-sort select { margin: 0; }

  /* The desktop toolbar's own count and ordering would duplicate this row. */
  .shop-wrap .grid-toolbar { display: none; }

  /* 3. The sidebar becomes the sheet. Same element, same filters — only its
        position changes, so there is no second copy of the markup. */
  .shop-wrap { display: block; }

  .sidebar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 620;
    max-height: 85vh;
    margin: 0;
    padding: 0 1.25rem 1.25rem;
    border-radius: 18px 18px 0 0;
    background: var(--white);
    box-shadow: 0 -8px 40px rgba(15, 30, 46, 0.22);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(100%);
    transition: transform 250ms ease;
    visibility: hidden;
  }
  .sidebar.is-open { transform: translateY(0); visibility: visible; }

  /* The grab handle the design draws above the sheet title. */
  .sidebar::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    margin: 0.75rem auto 0.25rem;
    border-radius: 2px;
    background: var(--border);
  }

  .sidebar .sidebar-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0;
    background: var(--white);
    border-bottom: 1px solid var(--border);
  }

  .sheet-overlay { display: block; opacity: 0; pointer-events: none; }
  .sheet-overlay.is-open { opacity: 1; pointer-events: auto; }

  /* Groups open on mobile once the sheet is the only place they appear:
     a shopper who opened the sheet is there to filter. */
  .sidebar .filter-group[open] .filter-list { max-height: none; }

  html.is-sheet-open,
  html.is-sheet-open body { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}

/* Category intro on mobile.
   The mockup's description is a two-line summary; the real category copy runs
   to a paragraph, which on a phone pushed the products another 280px down.
   The clamp is applied by script only when the text actually overflows, so
   with JavaScript off the full copy is still there rather than cut off. */
@media (max-width: 1150px) {
  .cat-intro.is-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .cat-readmore {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.5rem;
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }
}

/* Mobile product grid and sort control.

   The two mockups name the grid differently — `.product-grid` on desktop,
   `.products-grid` on mobile — and the theme renders the desktop name. So the
   mobile file's two-up rule never matched and the desktop design's 640px
   single-column rule won instead, giving one enormous card per row. Two up, at
   the mobile design's own gap.

   The sort control is WooCommerce's <select>; the design pairs it with the
   Filter button as a matching pill. */
@media (max-width: 1150px) {
  .product-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }

  .filter-toolbar .toolbar-sort select {
    height: 35px;
    padding: 0 2rem 0 0.875rem;
    border: 1.5px solid var(--border);
    border-radius: 100px;
    background-color: var(--white);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ink-mid);
    max-width: 11rem;
    text-overflow: ellipsis;
  }
}

@media (max-width: 340px) {
  /* The mobile mockup is drawn at 375px and is two-up there, so the fallback
     to one column belongs below the narrowest phones, not above them. */
  .product-grid { grid-template-columns: 1fr; }
}

/* The breadcrumb carries a bottom margin for pages where it is a line of text
   on the page background. On category pages it is a white bar sitting directly
   above the dark hero, so that margin read as a 28px strip of nothing between
   them. Flush where the hero follows it. */
.bc:has(+ .cat-hero) { margin-bottom: 0; }

/* Card subtitles run to five lines on a 162px column, which made the two cards
   in a row different heights and pushed the price below the fold. The design
   shows one line; two keeps the sense without the ragged grid. */
@media (max-width: 1150px) {
  .product-card .product-sub {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* WooCommerce's primary buttons carry `.alt` as well as `.button`, making its
   own rule (0,3,1) outrank a `.woocommerce a.button` of (0,2,1) — which is why
   Proceed to checkout stayed WooCommerce purple. Match the extra class. */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce a.checkout-button {
  background: var(--action);
  color: var(--white);
  border: none;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.checkout-button:hover { background: var(--action-dark); color: var(--white); }

/* The cart rows are no longer inside a table for layout purposes, so these
   need scoping to the item rather than to .shop_table. */
.woocommerce-cart .cart_item .qty-block > .field-lbl { display: none; }
.woocommerce-cart .cart_item .qty-block { margin: 0; }

.woocommerce-cart .cart_item a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-light) !important;
  font-size: 1.0625rem;
  line-height: 1;
  text-decoration: none;
}
.woocommerce-cart .cart_item a.remove:hover { background: #b4541f; color: #ffffff !important; }

/* woocommerce-layout.css is deliberately kept on the cart (CheckoutWC expects
   it), and its `.cart-collaterals .cart_totals { float: right; width: 48% }`
   outranked the shorter selector here — so on a phone the totals panel floated
   to 48% width and hung off the right edge. Same depth, cleared. */
.woocommerce-cart .cart-collaterals,
.woocommerce-cart .cart-collaterals .cart_totals {
  float: none;
  width: auto;
}

/* --- Product FAQ tab, second pass ------------------------------------------
   The card treatment further up is scoped to `.faq-section`, which is the
   category template. The PDP accordion lives in `.tab-pane`, so it inherited
   the card's border, radius and white ground from `.tab-pane .faq-item` but
   none of the padding that makes a card a card: the question button sat hard
   against the left edge and shrank to the width of its own text instead of
   spanning the row, which left the chevron floating mid-card.

   The mockup rules in t-product.css are the other half of it. There the FAQ is
   a borderless list, so `.faq-item` carries `padding: 1.25rem 0` (vertical
   only) and `.faq-q::after` draws a `▾` glyph. The markup here already emits a
   real SVG chevron, so that glyph was a second one. */
.tab-pane .faq-item { padding: 0; }
.tab-pane .faq-item h3 { margin: 0; font-size: inherit; font-weight: inherit; }
.tab-pane .faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 1.375rem;
  min-height: 56px;
  background: none;
  border: 0;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.tab-pane .faq-q::after { content: none; }
.tab-pane .faq-a { margin-top: 0; }

/* The answer is `.prose`, so it capped itself at 72ch while the card it sits
   in ran the full 1,217px of the tab panel: a readable column of text adrift
   in a box twice its width. Capping the list instead puts the card on the same
   measure as the Description tab beside it, and lets the answer fill it. */
.tab-pane .faq-list { max-width: 72ch; }
.tab-pane .faq-a-inner { max-width: none; }

/* --- Mobile section rhythm -------------------------------------------------
   The three mobile mockups are fixed-height compositions with trimmed copy,
   and they set `.section` to 2.5rem/1.25rem; split_css wraps that in the
   900px query, where it beats the 3.5rem the desktop sheet uses. The real
   sections are much longer than the mockups' — the homepage "why" block is
   1,393px tall on a phone — and 40px either side of a full-bleed colour change
   reads as a crease between two blocks rather than a break between them. */
@media (max-width: 900px) {
  .section,
  .section-narrow { padding: 3.5rem 1.5rem; }
}

/* --- Mobile drawer navigation ----------------------------------------------
   The mobile mockup styles `.mob-nav-link`, a class its hand-written markup
   put on every anchor. wp_nav_menu() emits `<li class="mob-nav-item"><a>`
   instead, so none of that styling ever landed and the drawer rendered as an
   unstyled list of twenty-one rows.

   EMF_Mobile_Walker groups the four heading-only items into <details>, so the
   rules below dress both a plain row and a <summary> row identically, and the
   children sit indented underneath. */
@media (max-width: 1150px) {
  .mob-nav-links { list-style: none; margin: 0 0 1.5rem; padding: 0; }

  .mob-nav-item > a,
  .mob-nav-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--surface);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--ink-mid);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  .mob-nav-item:first-child > a,
  .mob-nav-item:first-child .mob-nav-summary { border-top: 1px solid var(--surface); }

  .mob-nav-item > a:active,
  .mob-nav-summary:active { color: var(--action); }

  /* The default triangle would sit beside the chevron the walker draws. */
  .mob-nav-summary { cursor: pointer; list-style: none; }
  .mob-nav-summary::-webkit-details-marker { display: none; }
  .mob-nav-summary::marker { content: none; }

  .mob-nav-chevron { flex: 0 0 auto; color: var(--ink-light); transition: transform 180ms; }
  .mob-nav-details[open] > .mob-nav-summary { color: var(--ink); font-weight: 700; }
  .mob-nav-details[open] .mob-nav-chevron { transform: rotate(180deg); }

  .mob-nav-sub { list-style: none; margin: 0; padding: 0.25rem 0 0.5rem; }
  .mob-nav-child > a {
    display: block;
    padding: 0.6875rem 0 0.6875rem 0.875rem;
    font-size: 0.9375rem;
    color: var(--ink-mid);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .mob-nav-child > a:active { color: var(--action); }
  .mob-nav-child > a[aria-current="page"] { color: var(--action); font-weight: 700; }
}

@media (prefers-reduced-motion: reduce) {
  .mob-nav-chevron { transition: none; }
}

/* --- Search page: a component class that WordPress also owns ----------------
   core.css groups the results list in with the other card grids:

     .post-grid, .journal-grid, .search-results, .product-rail { display: grid; … }

   search.php puts `search-results` on its <ul>, but WordPress puts the very
   same class on <body> for any search request. So the body became a four
   column grid and the header, main and footer each became a grid item sized to
   one 298px track, while the nav's 1,149px of contents burst out to the right.
   The page scrolled sideways by ~200px at 1280 and ~140px more at 1440, since
   a wider viewport only made the tracks narrower relative to the fixed nav.

   Only the body match is wrong, so only the body match is undone. The <ul>
   keeps its grid. None of the other three classes in that rule is a body
   class, so this is the only one affected. */
body.search-results { display: block; }