/* =========================================================================
   United Traders Filters — Karachi
   Tokens → reset → type → layout → components → responsive → motion
   ========================================================================= */

/* ------------------------------- TOKENS -------------------------------- */
:root {
  --red:        #D81F26;   /* white-on-red 5.07:1, red-on-white 5.07:1 */
  --red-dark:   #AE1219;
  --red-soft:   #FDECEC;
  --ink:        #121212;
  --ink-2:      #1A1A1A;
  --ink-3:      #242424;
  --grey:       #F4F4F4;
  --panel:      #FFFFFF;
  --muted:      #5A5A5A;   /* 6.90:1 on white */
  --muted-ink:  #B0B0B0;   /* 8.64:1 on ink */
  --rule:       #E4E4E4;
  --rule-dark:  #2E2E2E;

  /* WhatsApp's own brand colours, used only where the WhatsApp mark appears */
  --whatsapp:      #25D366;
  --whatsapp-dark: #1DA851;

  --body:    "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --logo:    "Big Shoulders Display", "Arial Narrow", sans-serif;
  --mono:    "Martian Mono", ui-monospace, monospace;

  --fs-body:  1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  --h1: clamp(2.25rem, 1.3rem + 4.2vw, 4rem);
  --h2: clamp(1.625rem, 1.15rem + 2.1vw, 2.5rem);

  --gutter: clamp(1rem, 0.6rem + 1.8vw, 2.5rem);
  --shell: 82rem;
  --sec-y: clamp(3.5rem, 2.4rem + 4.4vw, 5.5rem);

  --lift-1: 0 1px 2px rgba(18, 18, 18, 0.05), 0 3px 10px rgba(18, 18, 18, 0.06);
  --lift-2: 0 2px 6px rgba(18, 18, 18, 0.08), 0 14px 34px rgba(18, 18, 18, 0.12);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 150ms;
  --t-mid: 300ms;

  --z-base: 1;
  --z-sticky: 100;
  --z-nav: 200;
  --z-float: 250;
  --z-cursor: 400;   /* above everything, including the skip link: it is the pointer */
  --z-skip: 300;
}

@supports (color: oklch(0.5 0.1 30)) {
  :root {
    --red:       oklch(0.552 0.202 28.4);
    --red-dark:  oklch(0.435 0.168 28.4);
    --red-soft:  oklch(0.955 0.018 25);
    --ink:       oklch(0.185 0.002 280);
    --ink-2:     oklch(0.225 0.002 280);
    --ink-3:     oklch(0.285 0.002 280);
    --grey:      oklch(0.965 0 0);
    --muted:     oklch(0.475 0 0);
    --muted-ink: oklch(0.760 0 0);
    --rule:      oklch(0.912 0 0);
    --rule-dark: oklch(0.315 0 0);
  }
}

/* -------------------------------- RESET -------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 8.5rem;
}

body {
  margin: 0;
  background: var(--panel);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }

/* An explicit display beats the hidden attribute's UA style. Make it win. */
[hidden] { display: none !important; }

h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }

.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------- BROWSER SURFACES WE INHERIT --------------------- */
::selection { background: var(--red); color: #fff; }

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
  border-radius: 2px;
}
.topbar :focus-visible,
.hero :focus-visible,
.footer :focus-visible,
.wafloat:focus-visible { outline-color: #fff; }

html { scrollbar-color: #9A9A9A var(--grey); scrollbar-width: thin; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--grey); }
::-webkit-scrollbar-thumb { background: #9A9A9A; border: 3px solid var(--grey); }
::-webkit-scrollbar-thumb:hover { background: var(--ink); }

.skip {
  position: fixed;
  top: 0.5rem; left: 0.5rem;
  z-index: var(--z-skip);
  transform: translateY(-200%);
  background: var(--ink);
  color: #fff;
  padding: 0.75rem 1.25rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--t-fast) var(--ease-out);
}
.skip:focus { transform: translateY(0); }

/* ------------------------------- SHELL --------------------------------- */
.shell {
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
}

.section { padding-block: var(--sec-y); }
.section--grey { background: var(--grey); }

.icon {
  width: 1em; height: 1em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ------------------------------- TYPE ---------------------------------- */
.kicker {
  color: var(--red);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.h2 {
  font-size: var(--h2);
  font-weight: 800;
  letter-spacing: -0.005em;
  line-height: 1.08;
  text-transform: uppercase;
  text-wrap: balance;
}
.h2--sm { font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem); }

.sechead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: clamp(2rem, 1.5rem + 1.8vw, 3rem);
}
.sechead__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--red);
  font-size: var(--fs-small);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.sechead__link:hover { text-decoration: underline; text-underline-offset: 3px; }

.placeholder {
  font-family: var(--mono);
  font-size: 0.92em;
  color: var(--red);
  border-bottom: 1px dashed currentColor;
  padding-bottom: 1px;
}

/* ------------------------------ TOP BAR -------------------------------- */
.topbar {
  background: var(--red);
  color: #fff;
  font-size: var(--fs-small);
}
.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 1.5rem;
  min-height: 2.5rem;
  padding-block: 0.4rem;
}
.topbar__contact,
.topbar__claims {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1.25rem;
}
.topbar__contact li { display: flex; align-items: center; gap: 0.45rem; }
.topbar a { text-decoration: none; }
.topbar a:hover { text-decoration: underline; text-underline-offset: 3px; }

.topbar__claims li { display: flex; align-items: center; gap: 1.25rem; }
.topbar__claims li + li::before {
  content: "";
  width: 1px; height: 0.9em;
  background: rgba(255, 255, 255, 0.5);
}

/* ------------------------------- HEADER -------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--panel);
  border-bottom: 1px solid var(--rule);
}
.header__inner {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 0.2rem + 1.6vw, 2rem);
  min-height: 5rem;
}

/* --- logo --- */
.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  flex-shrink: 0;
}
.brand__mark { width: 3.5rem; height: 2.4rem; flex-shrink: 0; }
.brand__u { fill: var(--red); }
.brand__t { fill: var(--ink); }
.brand__mark--footer .brand__t { fill: #fff; }

.brand__text { display: block; }
.brand__name {
  display: block;
  font-family: var(--logo);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: 1.6rem;
  line-height: 0.95;
}
.brand__sub {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  line-height: 1.3;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.15rem;
  margin-bottom: 0.15rem;
}
.brand__tag {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.3;
}
.brand__tag i { font-style: normal; color: var(--red); }
.footer .brand__sub { border-bottom-color: var(--rule-dark); }
.footer .brand__tag { color: var(--muted-ink); }

/* --- nav --- */
.nav { margin-left: auto; }
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0.25rem, -0.3rem + 1.5vw, 1rem);
}
.nav__item { position: relative; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: 0;
  padding: 0.6rem 0.85rem;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease-out),
              background-color var(--t-fast) var(--ease-out);
}
.nav__link:hover { color: var(--red); }
.nav__link.is-current {
  background: var(--red);
  color: #fff;
}
.nav__link.is-current:hover { background: var(--red-dark); color: #fff; }

.nav__caret {
  width: 1em; height: 1em;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--t-fast) var(--ease-out);
}
.nav__trigger[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

.subnav {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--z-nav);
  min-width: 13rem;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--red);
  box-shadow: var(--lift-2);
  padding: 0.4rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out),
              visibility var(--t-fast);
}
.nav__trigger[aria-expanded="true"] + .subnav {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.subnav a {
  display: block;
  padding: 0.55rem 0.85rem;
  font-size: var(--fs-small);
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
}
.subnav a:hover { background: var(--red); color: #fff; }

/* --- search --- */
.search {
  position: relative;
  display: flex;
  flex-shrink: 0;
  width: clamp(10rem, 14vw, 15rem);
}
.search__input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--rule);
  border-right: 0;
  background: var(--panel);
  padding: 0.6rem 0.75rem;
  font-size: var(--fs-small);
  caret-color: var(--red);
}
.search__input::placeholder { color: #6B6B6B; }
.search__input:focus { border-color: var(--red); }
.search__btn {
  display: grid;
  place-items: center;
  width: 2.9rem;
  flex-shrink: 0;
  border: 0;
  background: var(--red);
  color: #fff;
  font-size: 1.05rem;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out);
}
.search__btn:hover { background: var(--red-dark); }
/* ---- the filter cursor -------------------------------------------------- */

/* The class is added by JavaScript, and only on a device with a real pointer
   that has not asked for reduced motion. So a touch screen, a keyboard-only
   visitor, or anyone with animation turned off keeps the ordinary cursor and
   never sees any of this. */
.has-fcursor,
.has-fcursor a,
.has-fcursor button,
.has-fcursor [role="button"],
.has-fcursor summary,
.has-fcursor label { cursor: none; }

/* The real caret comes back wherever you are typing. Replacing an I-beam
   with a picture of a filter would mean not knowing where the text will go. */
.has-fcursor input,
.has-fcursor textarea,
.has-fcursor select,
.has-fcursor [contenteditable] { cursor: auto; }

.fcursor {
  position: fixed;
  top: 0; left: 0;
  z-index: var(--z-cursor);
  width: 44px; height: 44px;
  margin: -22px 0 0 -22px;        /* centred on the pointer, not hanging off it */
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms var(--ease-out);
  will-change: transform;
}
.fcursor.is-on { opacity: 1; }

.fcursor__body { width: 100%; height: 100%; overflow: visible; }

.fcursor__ring {
  fill: rgba(216, 31, 38, 0.10);
  stroke: var(--red);
  stroke-width: 2;
  transition: fill 160ms var(--ease-out), stroke-width 160ms var(--ease-out);
}
.fcursor__hub {
  fill: none;
  stroke: var(--red);
  stroke-width: 2;
}
.fcursor__pleats {
  fill: none;
  stroke: var(--red);
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: 0.85;
}
.fcursor__spin { transform-origin: 22px 22px; }

/* over something clickable the element closes up, which is the same signal a
   pointer gives without needing a different shape */
.fcursor.is-hot .fcursor__ring { fill: rgba(216, 31, 38, 0.28); stroke-width: 2.6; }
.fcursor.is-hot .fcursor__spin { animation: fcreep 2.4s linear infinite; }

@keyframes fcreep { to { transform: rotate(360deg); } }

/* the pulse ring is invisible until the filter runs */
.fcursor__pulse {
  fill: none;
  stroke: var(--red);
  stroke-width: 2;
  opacity: 0;
  transform-origin: 22px 22px;
}

/* ---- clicking runs the filter ---- */
.fcursor.is-running .fcursor__spin { animation: fspin 600ms var(--ease-out); }
.fcursor.is-running .fcursor__pulse { animation: fpulse 600ms var(--ease-out); }
.fcursor.is-running .fcursor__ring { animation: fcatch 600ms var(--ease-out); }

@keyframes fspin  { from { transform: rotate(0); } to { transform: rotate(180deg); } }
@keyframes fpulse {
  0%   { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0;   transform: scale(2.1); }
}
@keyframes fcatch {
  0%   { fill: rgba(216, 31, 38, 0.10); }
  35%  { fill: rgba(216, 31, 38, 0.55); }
  100% { fill: rgba(216, 31, 38, 0.10); }
}

/* dirt drawn into the element and stopped there */
.fdirt {
  position: fixed;
  z-index: var(--z-cursor);
  pointer-events: none;
  width: 0; height: 0;
}
.fdirt i {
  position: absolute;
  width: 4px; height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: var(--ink-3);
  opacity: 0;
  animation: fdraw 560ms var(--ease-out) var(--d, 0ms) forwards;
}
/* starts out at the rim, arrives at the middle, and is gone */
@keyframes fdraw {
  0%   { transform: translate3d(var(--dx), var(--dy), 0) scale(1);   opacity: 0.85; }
  70%  { opacity: 0.85; }
  100% { transform: translate3d(0, 0, 0) scale(0.2);                 opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fcursor, .fdirt { display: none; }
}

/* ---- search type-ahead -------------------------------------------------- */

.sresults {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: var(--z-nav);
  width: min(23rem, calc(100vw - 2rem));
  max-height: min(26rem, 60vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--red);
  box-shadow: var(--lift-2);
}
.sresults__item + .sresults__item { border-top: 1px solid var(--rule); }
.sresults__item a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.15rem 0.75rem;
  padding: 0.6rem 0.8rem;
  text-decoration: none;
  color: var(--ink);
}
.sresults__t {
  font-family: var(--mono);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
}
.sresults__s {
  grid-column: 1;
  font-size: var(--fs-micro);
  color: var(--muted);
  overflow-wrap: anywhere;
}
.sresults__k {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
/* hover and keyboard selection are the same state, so they look the same */
.sresults__item.is-active a,
.sresults__item a:focus-visible {
  background: var(--red);
  color: #fff;
  outline: none;
}
/* #FBD9DA came out at 3.87:1 on the red, under the 4.5 these 12px
   labels need. This tint measures 4.70:1. */
.sresults__item.is-active .sresults__s,
.sresults__item.is-active .sresults__k { color: #FEF4F4; }

.sresults__none {
  padding: 0.75rem 0.85rem;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--muted);
}
.sresults__none a { color: var(--red); font-weight: 600; }

/* On a phone the header search is nearly full width, so the panel follows it
   rather than hanging off the right edge. */
@media (max-width: 47.99em) {
  .sresults { width: 100%; right: auto; left: 0; }
}

.search__result {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: var(--z-nav);
  min-width: 14rem;
  background: var(--ink);
  color: #fff;
  padding: 0.65rem 0.85rem;
  font-size: var(--fs-small);
  box-shadow: var(--lift-2);
}

.navtoggle {
  display: none;
  align-items: center;
  gap: 0.55rem;
  margin-left: auto;
  background: none;
  border: 1px solid var(--rule);
  padding: 0.55rem 0.9rem;
  font-size: var(--fs-small);
  font-weight: 600;
  cursor: pointer;
}
.navtoggle__bars { display: grid; gap: 4px; }
.navtoggle__bars i {
  display: block;
  width: 18px; height: 2px;
  background: currentColor;
  transition: transform var(--t-fast) var(--ease-out), opacity var(--t-fast) linear;
}
.navtoggle[aria-expanded="true"] .navtoggle__bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.navtoggle[aria-expanded="true"] .navtoggle__bars i:nth-child(2) { opacity: 0; }
.navtoggle[aria-expanded="true"] .navtoggle__bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* -------------------------------- BUTTONS ------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 1.4rem;
  background: var(--red);
  color: #fff;
  border: 0;
  font-size: var(--fs-small);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.btn:hover { background: var(--red-dark); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--lg { padding: 1.05rem 1.75rem; font-size: 1rem; }

/* .btn is red by default; named so the intent is explicit at call sites. */
.btn--primary { background: var(--red); color: #fff; }
.btn--primary:hover { background: var(--red-dark); }

/* The secondary action. Without this it inherits .btn and renders as a second
   primary button, which removes the hierarchy entirely. */
.btn--quiet {
  background: var(--panel);
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--rule);
}
.btn--quiet:hover {
  background: var(--grey);
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink);
}
.section--grey .btn--quiet { background: var(--panel); }

/* In-page calls to action stay brand red: white on WhatsApp green only
   reaches 3.1:1, below the 4.5:1 that button text needs. The round badge is
   exempt because it is a logo and carries no text. */
.btn__glyph {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  fill: currentColor;
  stroke: none;
}

.btn__arrow {
  display: grid;
  place-items: center;
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}
.btn__arrow svg {
  width: 0.95rem; height: 0.95rem;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* --------------------------------- HERO -------------------------------- */
.hero {
  position: relative;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

.hero__bg { position: absolute; inset: 0; z-index: -3; }
.hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 60% 60%;
  filter: grayscale(0.85) brightness(0.34) contrast(1.12);
}
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, var(--ink) 18%, rgba(18, 18, 18, 0.86) 42%, rgba(18, 18, 18, 0.5) 70%),
    linear-gradient(0deg, rgba(216, 31, 38, 0.22), rgba(216, 31, 38, 0.22));
}

/* the red diagonal that cuts the frame, as in the approved layout */
.hero__wedge {
  position: absolute;
  inset: 0 0 0 auto;
  width: 58%;
  z-index: -2;
  background: var(--red);
  clip-path: polygon(26% 0, 34% 0, 8% 100%, 0 100%);
  opacity: 0.95;
}

.hero__media {
  position: absolute;
  inset: 0 0 0 auto;
  width: 46%;
  z-index: -1;
  clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%);
}
/* Four slides stacked in the same box, only one visible at a time. Opacity
   rather than a sliding transform, because the panel is clipped to a diagonal
   and anything moving across that edge reads as a glitch. */
.hero__slide {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;
  transition: opacity 900ms var(--ease-out);
}
.hero__slide.is-on { opacity: 1; }

/* These are product photographs on white. Dropped into a dark hero they
   would glare, so they are pulled down to sit in the same world as the rest
   of the frame while still reading as filters on a shelf. */
.hero__media img { filter: brightness(0.86) contrast(1.06) saturate(0.92); }

@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: none; }
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(95deg, rgba(18, 18, 18, 0.92) 0%, rgba(18, 18, 18, 0.35) 34%, rgba(18, 18, 18, 0.12) 100%);
}

.hero__inner {
  position: relative;
  padding-block: clamp(3.5rem, 2.2rem + 5.4vw, 7rem);
}
.hero__copy { max-width: 36rem; }

/* Once the red diagonal is on screen the copy has to stop short of it. At
   1024 the headline ran to x=570 while the wedge began at x=539, so the last
   word of "FOR A CLEANER" sat on the wedge: red type on red, 1.71:1. The vw
   cap keeps the text clear at every width the wedge is visible, and the rem
   value still governs on a wide screen. */
@media (min-width: 64em) {
  .hero__copy { max-width: min(36rem, 46vw); }
}

.hero__welcome {
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}

.hero__title {
  font-size: var(--h1);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  text-wrap: balance;
  margin-bottom: 1.25rem;
}
.hero__title-a, .hero__title-b { display: block; }
.hero__title-b { color: #FF4B45; }

.hero__lede {
  font-size: clamp(0.9375rem, 0.88rem + 0.25vw, 1.0625rem);
  line-height: 1.65;
  /* At the narrower desktop widths the end of this paragraph reaches the red
     diagonal, where #E6E2E2 measured 4.15:1 and needed 4.5. This is 4.95:1 on
     the wedge and still reads as softer than the white headline above it. */
  color: #F7F6F6;
  max-width: 34rem;
  margin-bottom: 2rem;
  text-wrap: pretty;
}

/* ------------------------------- FEATURES ------------------------------ */
.features {
  background: var(--grey);
  border-bottom: 1px solid var(--rule);
}
.features__inner {
  display: grid;
  grid-template-columns: 1fr;
  padding-block: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
}
.feature {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem clamp(0.5rem, 0.2rem + 1vw, 1.5rem);
}
.feature__icon {
  width: 2.5rem; height: 2.5rem;
  flex-shrink: 0;
  fill: none;
  stroke: var(--red);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.feature__title {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.25;
}
.feature__text p {
  font-size: var(--fs-small);
  color: var(--muted);
  line-height: 1.4;
}

/* ------------------------------- PRODUCTS ------------------------------ */
.prodgrid {
  display: grid;
  /* The track count has to divide the card count or the last row is left
     ragged. It was six cards across three columns; adding oils and coolants
     makes eight, so the desktop count moves to four. 1, 2, then 4 all divide
     eight cleanly. */
  grid-template-columns: 1fr;
  gap: clamp(1rem, 0.7rem + 1vw, 1.5rem);
}
@media (min-width: 34em) {
  .prodgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
  .prodgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.prod {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  overflow: hidden;
  isolation: isolate;
  min-height: clamp(13rem, 10rem + 9vw, 17rem);
  transition: transform var(--t-mid) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out);
}
.prod:hover { transform: translateY(-4px); box-shadow: var(--lift-2); }

.prod__media { position: absolute; inset: 0; z-index: -2; }

/* Two photographs per card, stacked: the second fades in on hover. Both are
   positioned, so the card's height never depends on which one is showing and
   nothing shifts as they swap. */
.prod__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity 420ms var(--ease-out), transform 600ms var(--ease-out);
}
.prod__img--hover { opacity: 0; }

/* focus-within as well as hover, so reaching the card by keyboard shows the
   same thing a mouse does */
.prod:hover .prod__img--rest,
.prod:focus-within .prod__img--rest { opacity: 0; }
.prod:hover .prod__img--hover,
.prod:focus-within .prod__img--hover { opacity: 1; }

.prod:hover .prod__img,
.prod:focus-within .prod__img { transform: scale(1.06); }

/* A touch screen has no hover, so the second photograph would never be seen
   and would only be weight on the wire. */
@media (hover: none) {
  .prod__img--hover { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .prod__img { transition: opacity 120ms linear; }
  .prod:hover .prod__img,
  .prod:focus-within .prod__img { transform: none; }
}
.prod__media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Tuned when the cards got real product photographs. The red used to run
     from 0.42 at the top, which was fine over a dark stock image but turned
     these light product shots pink and flat. It now barely tints the top,
     where the filters are, and still goes almost solid at the bottom, where
     the name and the part numbers sit. */
  background: linear-gradient(176deg,
    rgba(216, 31, 38, 0.10) 0%,
    rgba(216, 31, 38, 0.20) 38%,
    rgba(174, 18, 25, 0.44) 72%,
    rgba(18, 18, 18, 0.62) 100%);
}

/* The scrim that makes the text readable belongs to the text, not to the
   card. A percentage gradient over the whole card put the name at roughly 65%
   of its height, which was dark enough over the old stock photography and not
   nearly dark enough over a white product shot -- and it moved with the card
   height, so it failed at some widths and not others. This one is as tall as
   the text is, whatever the card does. */
.prod__body {
  background: linear-gradient(to bottom,
    rgba(18, 18, 18, 0) 0%,
    rgba(18, 18, 18, 0.74) 22%,
    rgba(18, 18, 18, 0.92) 55%,
    rgba(18, 18, 18, 0.96) 100%);
  margin-top: auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  padding: 1.15rem;
  color: #fff;
}
.prod__icon {
  width: 1.65rem; height: 1.65rem;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.prod__name {
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.2;
}
.prod__desc {
  font-size: var(--fs-small);
  color: #F2DADA;
  line-height: 1.35;
}
.prod__go {
  display: grid;
  place-items: center;
  width: 2.4rem; height: 2.4rem;
  border: 2px solid rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  color: #fff;
  transition: background-color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
}
.prod__go svg {
  width: 1.1rem; height: 1.1rem;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.prod__go:hover { background: #fff; border-color: #fff; color: var(--red); }



.prod:target { outline: 4px solid var(--red); outline-offset: 3px; }

/* -------------------------------- BRANDS ------------------------------- */
.brands {
  border-block: 1px solid var(--rule);
  padding-block: clamp(2rem, 1.5rem + 2vw, 3rem);
}
.brands__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem clamp(1.5rem, 1rem + 2vw, 3rem);
  align-items: center;
}
/* A continuous horizontal drift. The track holds the logos twice, so sliding
   it exactly half its width lands on an identical frame and the loop is
   invisible. Hover pauses it, because a strip you cannot stop is annoying. */
.brandmarquee {
  overflow: hidden;
  min-width: 0;
  /* soften both edges so logos arrive and leave rather than being chopped */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.brands__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: brandscroll 38s linear infinite;
}
.brandmarquee:hover .brands__track,
.brandmarquee:focus-within .brands__track { animation-play-state: paused; }

@keyframes brandscroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.brandslot {
  flex: 0 0 auto;
  width: clamp(8rem, 6rem + 6vw, 11rem);
  display: grid;
  place-items: center;
  padding: 0.65rem clamp(0.5rem, 0.2rem + 1vw, 1.25rem);
  min-height: 4rem;
}
.brandslot + .brandslot { border-left: 1px solid var(--rule); }

/* Seven logos in seven different colours read as clutter in a row, so they
   sit desaturated by default and come to full colour on hover. The box is
   fixed and object-fit does the work, which keeps a wide logo and a square
   one at a similar optical size. */
.brandslot img {
  width: 100%;
  max-width: 8.5rem;
  height: 2.5rem;
  object-fit: contain;
  object-position: center;
  filter: grayscale(1) contrast(1.08);
  opacity: 0.62;
  transition: filter var(--t-mid) var(--ease-out),
              opacity var(--t-mid) var(--ease-out),
              transform var(--t-mid) var(--ease-out);
}
.brandslot:hover img,
.brandslot:focus-within img {
  filter: grayscale(0) contrast(1);
  opacity: 1;
  transform: scale(1.07);
}

.brandslot__name {
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: center;
  line-height: 1.15;
}

/* -------------------------------- ABOUT -------------------------------- */
.about {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--panel);
}

.about__media {
  position: relative;
  min-height: 18rem;
  isolation: isolate;
  overflow: hidden;
}
.about__media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
/* The red wash used to run at 0.92 alpha, which was fine over a stock
   photograph nobody needed to read. It now sits over the actual shop
   display, so it is pulled right back: enough to tie the panel to the brand,
   light enough that a buyer can recognise the boxes on the shelf. */
.about__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, rgba(216, 31, 38, 0.34) 0%, rgba(174, 18, 25, 0.22) 45%, rgba(18, 18, 18, 0.10) 100%);
  clip-path: polygon(0 0, 100% 0, 72% 100%, 0 100%);
}
/* A scrim only where the brand plate sits, so losing the red wash does not
   cost that white text its contrast. */
.about__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(18, 18, 18, 0.80) 0%, rgba(18, 18, 18, 0.45) 18%, rgba(18, 18, 18, 0) 42%);
}
.about__plate {
  position: absolute;
  left: clamp(1.25rem, 0.6rem + 2.5vw, 3rem);
  bottom: clamp(1.25rem, 0.6rem + 2.5vw, 3rem);
  color: #fff;
}
.about__plateName {
  display: block;
  font-family: var(--logo);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  line-height: 1;
}
.about__plateSub {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.38em;
  text-transform: uppercase;
}

.about__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
  align-items: start;
  padding: var(--sec-y) var(--gutter);
}
.about__text {
  color: var(--muted);
  max-width: 62ch;
  margin-bottom: 1.75rem;
  text-wrap: pretty;
}
.about__text strong { color: var(--ink); font-weight: 700; }

.checklist { display: grid; gap: 1.1rem; align-content: start; }
.checklist li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.35;
}
.checklist .icon {
  width: 1.4rem; height: 1.4rem;
  color: var(--red);
  stroke-width: 1.6;
}

/* ------------------------------- GALLERY ------------------------------- */
/* Explicit columns, not auto-fit: six photos must not leave an orphan on a
   row of its own. */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.5rem, 0.3rem + 0.8vw, 1rem);
}
.gallery li {
  position: relative;
  overflow: hidden;
  background: var(--rule);
  aspect-ratio: 4 / 3;
}
.gallery img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-out), filter var(--t-mid) var(--ease-out);
}
.gallery li:hover img { transform: scale(1.05); }

/* ------------------------------- CONTACT ------------------------------- */
.contact__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(1rem, 0.7rem + 1.2vw, 1.75rem);
}
.contact__card {
  background: var(--grey);
  border-top: 3px solid var(--red);
  padding: clamp(1.25rem, 1rem + 1vw, 1.9rem);
}
.contact__title {
  font-size: 1.0625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin-bottom: 1rem;
}
.contact__line { font-weight: 600; margin-bottom: 0.6rem; }
.contact__line--muted { font-weight: 400; color: var(--muted); font-size: var(--fs-small); }
.contact__link {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--red);
  text-decoration: none;
  border-bottom: 2px solid currentColor;
}
.contact__list { margin-bottom: 1.4rem; }
.contact__list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  padding-block: 0.6rem;
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-small);
}
.contact__tag {
  min-width: 5rem;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact__list a { font-weight: 600; text-decoration: none; }
.contact__list a:hover { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------ WA FLOAT ------------------------------- */
/* The WhatsApp app badge: its own round green mark, not a brand-red button.
   People recognise this shape instantly, which is the whole point of it. */
.wafloat {
  position: fixed;
  right: clamp(0.9rem, 0.4rem + 1.4vw, 1.75rem);
  bottom: clamp(0.9rem, 0.4rem + 1.4vw, 1.75rem);
  z-index: var(--z-float);
  display: grid;
  place-items: center;
  width: clamp(3.25rem, 2.6rem + 2.2vw, 3.75rem);
  height: clamp(3.25rem, 2.6rem + 2.2vw, 3.75rem);
  border-radius: 50%;
  background: var(--whatsapp);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 3px 8px rgba(18, 18, 18, 0.22),
              0 12px 28px rgba(18, 18, 18, 0.26),
              0 0 0 1px rgba(0, 0, 0, 0.05);
  transition: background-color var(--t-fast) var(--ease-out),
              transform var(--t-mid) var(--ease-out),
              opacity var(--t-mid) var(--ease-out);
}
.wafloat__glyph {
  width: 56%;
  height: 56%;
  fill: currentColor;
  stroke: none;
}
.wafloat:hover { background: var(--whatsapp-dark); transform: scale(1.06); }
.wafloat:active { transform: scale(1); }

/* One slow ring, so it reads as reachable without nagging. */
.wafloat::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--whatsapp);
  pointer-events: none;
}

/* Tucked away while the contact section is on screen — the real buttons are
   right there, and two of the same call to action is clutter. */
.wafloat.is-tucked {
  opacity: 0;
  transform: translateY(1rem) scale(0.95);
  pointer-events: none;
}

/* -------------------------------- FOOTER ------------------------------- */
.footer { background: var(--ink); color: #fff; }
.footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 1.5rem + 2vw, 3rem);
  padding-block: clamp(2.75rem, 2rem + 3vw, 4rem);
}
.footer__head {
  font-size: 0.9375rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 1.1rem;
  position: relative;
  padding-bottom: 0.6rem;
}
.footer__head::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 2rem; height: 2px;
  background: var(--red);
}
.footer__list { display: grid; gap: 0.65rem; font-size: var(--fs-small); }
.footer__list--split { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); }
.footer__list li { display: flex; align-items: center; gap: 0.6rem; color: var(--muted-ink); }
.footer__list a { text-decoration: none; transition: color var(--t-fast) var(--ease-out); }
.footer__list a:hover { color: #fff; }
.footer__list .icon { color: var(--red); width: 1.05em; height: 1.05em; }

.social { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.social a {
  display: grid;
  place-items: center;
  width: 2.4rem; height: 2.4rem;
  background: var(--ink-3);
  color: #fff;
  transition: background-color var(--t-fast) var(--ease-out);
}
.social a:hover { background: var(--red); }
.social svg {
  width: 1.15rem; height: 1.15rem;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.social__glyph { fill: currentColor; stroke: none; }
.social a:has(.social__glyph):hover { background: var(--whatsapp-dark); }

/* Keeps the sprite out of the layout without display:none, which some
   browsers refuse to resolve <use> references against. */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Clearance so the floating button never sits on the copyright line. */
.footer__bottom {
  border-top: 1px solid var(--rule-dark);
  padding-bottom: 3.25rem;
}
.footer__bottomInner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-block: 1.1rem;
  font-size: var(--fs-micro);
  color: var(--muted-ink);
}
.footer__claims { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.footer__claims li { display: flex; align-items: center; gap: 1.25rem; }
.footer__claims li + li::before {
  content: "";
  width: 1px; height: 0.9em;
  background: var(--rule-dark);
}

/* ------------------------------ RESPONSIVE ----------------------------- */
@media (min-width: 40em) {
  .features__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature:nth-child(odd) { border-right: 1px solid var(--rule); }
  .about__body { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}

@media (min-width: 52em) {
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 48em) {
  .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 64em) {
  .features__inner { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .feature { border-right: 1px solid var(--rule); }
  .feature:last-child { border-right: 0; }
  .feature:nth-child(odd) { border-right: 1px solid var(--rule); }

  .brands__inner { grid-template-columns: minmax(0, 18.5rem) minmax(0, 1fr); }
  .about { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); }
  .about__media { min-height: 100%; }
  .about__body {
    padding-left: clamp(2rem, 1rem + 3vw, 4rem);
    padding-right: max(var(--gutter), calc((100vw - var(--shell)) / 2));
  }
  .footer__top { grid-template-columns: 1.4fr 1.2fr 1.2fr 0.8fr; }
}

/* Nav collapses before it crowds the logo. Raised when Resources was
   added as a seventh item. */
@media (max-width: 77.99em) {
  .navtoggle { display: inline-flex; margin-left: auto; }

  /* The search used to be hidden on everything under 1248px, which took it
     away from every phone and tablet. It now wraps onto its own full-width
     row under the logo instead, because looking a part number up is the
     main thing people come here to do. */
  .header__inner { flex-wrap: wrap; align-content: center; }
  .search {
    display: flex;
    order: 3;
    flex: 1 0 100%;
    width: auto;
    margin-bottom: 0.85rem;
  }
  .sresults { width: 100%; right: auto; left: 0; }

  .nav {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    z-index: var(--z-nav);
    margin-left: 0;
    background: var(--panel);
    border-bottom: 1px solid var(--rule);
    box-shadow: var(--lift-2);
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--t-mid) var(--ease-out);
  }
  .nav[data-open="true"] { grid-template-rows: 1fr; }

  .nav__list {
    overflow: hidden;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-height: 0;
  }
  .nav__list > li { border-top: 1px solid var(--rule); }
  .nav__list > li:first-child { border-top: 0; }

  .nav__link {
    width: 100%;
    justify-content: space-between;
    padding: 0.95rem var(--gutter);
    font-size: 1rem;
  }
  .nav__link.is-current { background: none; color: var(--red); }

  .subnav {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: 0;
    border-top: 1px solid var(--rule);
    box-shadow: none;
    background: var(--grey);
    padding: 0;
    display: none;
  }
  .nav__trigger[aria-expanded="true"] + .subnav { display: block; }
  .subnav a { padding: 0.75rem var(--gutter) 0.75rem calc(var(--gutter) + 1rem); }
}

@media (max-width: 61.99em) {
  .hero__media, .hero__wedge { display: none; }
  .hero__bg::after {
    background:
      linear-gradient(180deg, rgba(18, 18, 18, 0.82), rgba(18, 18, 18, 0.92)),
      linear-gradient(0deg, rgba(216, 31, 38, 0.2), rgba(216, 31, 38, 0.2));
  }
  .hero__copy { max-width: none; }
}

@media (max-width: 30em) {
  .brand__mark { width: 2.75rem; height: 1.9rem; }
  .brand__name { font-size: 1.3rem; }
  .brand__tag { display: none; }
  .topbar__claims { display: none; }

  .btn { width: 100%; justify-content: center; }
  .sechead__link { width: auto; }
}

/* -------------------------------- MOTION ------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .hero__welcome, .hero__title, .hero__lede, .hero .btn {
    animation: rise 820ms var(--ease-out) both;
  }
  .hero__title { animation-delay: 70ms; }
  .hero__lede  { animation-delay: 140ms; }
  .hero .btn   { animation-delay: 210ms; }

  .wafloat::before { animation: ring 3.4s var(--ease-out) infinite; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@keyframes ring {
  0%        { opacity: 0.55; transform: scale(1); }
  55%, 100% { opacity: 0; transform: scale(1.28); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .btn:hover, .prod:hover { transform: none; }
  .brandslot:hover img, .brandslot:focus-within img { transform: none; }
  .brands__track {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
  }
  .brands__track [data-clone] { display: none; }
  .brandmarquee { -webkit-mask-image: none; mask-image: none; }
  .prod:hover .prod__media img, .gallery li:hover img { transform: none; }
}

/* =========================================================================
   RESOURCES PAGE
   ========================================================================= */

/* ----------------------------- page hero -------------------------------- */
.pagehero {
  position: relative;
  background: var(--ink);
  color: #fff;
  padding-block: clamp(2.25rem, 1.6rem + 2.6vw, 4rem);
  overflow: hidden;
}
/* The shop's own stock behind every inner-page banner. The scrim is heaviest
   on the left, where the breadcrumb, heading and lede sit, and eases to the
   right so the shelves actually read. The photograph is decorative here, so
   it is a background rather than an <img>: no alt text to repeat on fifteen
   pages, and it never delays the heading. */
.pagehero::before {
  content: "";
  position: absolute;
  inset: 0;
  /* One even wash, a little heavier on the left where the text sits, so the
     banner reads as a photograph of the shop rather than a black box with a
     corner of photo showing. The left was at 0.94, which buried it. */
  background-image:
    linear-gradient(92deg,
      rgba(18, 18, 18, 0.82) 0%,
      rgba(18, 18, 18, 0.76) 40%,
      rgba(18, 18, 18, 0.62) 72%,
      rgba(18, 18, 18, 0.56) 100%),
    url("../img/banner-stock.jpg");
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* The shelf unit has seven rows of stock, so each page shows a different
   one. One file, cached once for the whole site, moved with
   background-position rather than seven separate crops. The row is picked to
   suit the page: the separator shelf for separators, the air elements for air
   filters, the yellow CAT cans for oil. */
.pagehero--r1::before { background-position: center 12%; }   /* Fleetguard lube and fuel */
.pagehero--r2::before { background-position: center 25%; }   /* the separator shelf */
.pagehero--r3::before { background-position: center 38%; }   /* CAT cans, MANN, Perkins */
.pagehero--r4::before { background-position: center 50%; }   /* the Donaldson shelf */
.pagehero--r5::before { background-position: center 63%; }   /* cartridge elements */
.pagehero--r6::before { background-position: center 76%; }   /* MANN and Perkins boxes */
.pagehero--r7::before { background-position: center 88%; }   /* air elements, AF numbers */

/* On a phone the heading wraps and the text fills the whole banner, so there
   is no quiet corner left for a diagonal scrim to work with. The wash goes
   flat and heavy instead: the stock is still legible behind it, and so is
   every line of type. */
@media (max-width: 47.99em) {
  .pagehero::before {
    background-image:
      linear-gradient(to bottom,
        rgba(18, 18, 18, 0.78) 0%,
        rgba(18, 18, 18, 0.74) 55%,
        rgba(18, 18, 18, 0.76) 100%),
      url("../img/banner-stock.jpg");
    background-position: center 46%;
  }
  .pagehero--r1::before { background-position: center 12%; }
  .pagehero--r2::before { background-position: center 26%; }
  .pagehero--r3::before { background-position: center 40%; }
  .pagehero--r4::before { background-position: center 52%; }
  .pagehero--r5::before { background-position: center 64%; }
  .pagehero--r6::before { background-position: center 76%; }
  .pagehero--r7::before { background-position: center 88%; }
}
.pagehero::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 42%;
  background: var(--red);
  clip-path: polygon(62% 0, 70% 0, 12% 100%, 4% 100%);
  opacity: 0.9;
  pointer-events: none;
}
.pagehero > .shell { position: relative; z-index: 1; }

.pagehero__title {
  font-size: clamp(1.875rem, 1.25rem + 2.8vw, 3.25rem);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  text-wrap: balance;
  margin-bottom: 1rem;
}
.pagehero__lede {
  max-width: 60ch;
  /* #E6E2E2 measured 4.46:1 where the red diagonal crosses this line at
     narrow widths, just under the 4.5 it needs. This is 4.9:1 there. */
  color: #EDEAEA;
  line-height: 1.65;
  text-wrap: pretty;
}

.crumbs { margin-bottom: 1.25rem; }
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-small);
  color: var(--muted-ink);
}
.crumbs li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--red);
}
/* --muted-ink is a dim grey chosen for a flat dark panel. The banner is a
   photograph now, so the breadcrumbs get a brighter grey there: at 14px they
   were measuring 4.2:1 against the lighter shelves. */
.pagehero .crumbs ol { color: #E4E1E1; }

.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------- guide index ------------------------------- */
.guideindex {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.guideindex a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  height: 100%;
  padding: 1.15rem 1.25rem;
  background: var(--panel);
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease-out);
}
.guideindex a:hover { background: var(--red-soft); }
.guideindex__num {
  font-size: var(--fs-small);
  font-weight: 800;
  color: var(--red);
  font-variant-numeric: tabular-nums;
}
.guideindex__name {
  display: block;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.2rem;
}
.guideindex__note {
  display: block;
  font-size: var(--fs-small);
  color: var(--muted);
  line-height: 1.45;
}

/* ------------------------------ articles -------------------------------- */
.article { display: grid; gap: clamp(2.5rem, 1.8rem + 2.8vw, 4rem); }
/* Grid and flex children default to min-width:auto, which lets wide content
   (the comparison table) push the whole page sideways instead of scrolling
   inside its own wrapper. */
.article > * { min-width: 0; }

.guide { scroll-margin-top: 9rem; min-width: 0; }
.guide__title {
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem);
  font-weight: 800;
  line-height: 1.12;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  text-wrap: balance;
  padding-bottom: 0.9rem;
  margin-bottom: 1.5rem;
  border-bottom: 3px solid var(--red);
}

.prose { max-width: 72ch; }
.prose p { margin-bottom: 1.15rem; line-height: 1.7; text-wrap: pretty; }
.prose p:last-child { margin-bottom: 0; }
.prose h3 {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  font-weight: 800;
  line-height: 1.25;
  margin: 2rem 0 0.75rem;
}
.prose strong { font-weight: 700; }
.prose em { font-style: italic; }
.prose a:not(.btn) {
  color: var(--red);
  font-weight: 600;
  text-underline-offset: 3px;
}

.bullets { margin-bottom: 1.15rem; display: grid; gap: 0.6rem; }
.bullets li {
  position: relative;
  padding-left: 1.4rem;
  line-height: 1.6;
}
.bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  background: var(--red);
}

/* A real sequence, so it is numbered */
.checks {
  counter-reset: check;
  display: grid;
  gap: 1rem;
  max-width: 72ch;
  margin-bottom: 1.15rem;
}
/* Absolutely positioned rather than a grid column: inline children such as
   <strong> would each become their own grid item and break the columns. */
.checks li {
  counter-increment: check;
  position: relative;
  padding-left: 2.6rem;
  line-height: 1.6;
}
.checks li::before {
  content: counter(check);
  position: absolute;
  left: 0;
  top: 0.08em;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  background: var(--ink);
  color: #fff;
  font-size: var(--fs-small);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.steps {
  counter-reset: step;
  display: grid;
  gap: 0;
  max-width: 72ch;
  border-top: 1px solid var(--rule);
}
.steps > li {
  counter-increment: step;
  position: relative;
  padding: 1.4rem 0 1.4rem 5rem;
  border-bottom: 1px solid var(--rule);
}
.steps > li::before {
  content: "Step " counter(step);
  position: absolute;
  left: 0;
  top: 1.65rem;
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
  white-space: nowrap;
}

/* On narrow screens the label sits above the step instead of beside it */
@media (max-width: 34em) {
  .steps > li { padding-left: 0; padding-top: 2.6rem; }
  .steps > li::before { top: 1.3rem; }
}
.steps h3 {
  font-size: 1.0625rem;
  font-weight: 800;
  margin-bottom: 0.4rem;
  line-height: 1.3;
}
.steps p { line-height: 1.65; text-wrap: pretty; }

/* ------------------------------ callouts -------------------------------- */
.callout {
  background: var(--grey);
  border-top: 3px solid var(--ink);
  padding: 1.15rem 1.25rem;
  margin: 1.5rem 0;
  max-width: 72ch;
}
.callout--warn { border-top-color: var(--red); background: var(--red-soft); }
.callout__title {
  font-weight: 800;
  margin-bottom: 0.4rem;
  line-height: 1.3;
}
.callout p:last-child { margin-bottom: 0; }

/* ------------------------------- tables --------------------------------- */
.tablewrap {
  overflow-x: auto;
  max-width: 100%;
  margin: 1.5rem 0;
  border: 1px solid var(--rule);
  overscroll-behavior-x: contain;
}
.spec {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
  min-width: 44rem;
}
.spec caption {
  text-align: left;
  padding: 0.9rem 1rem;
  font-weight: 700;
  background: var(--grey);
  border-bottom: 1px solid var(--rule);
}
.spec th, .spec td {
  padding: 0.85rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
  line-height: 1.5;
}
.spec thead th {
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.spec tbody th { font-weight: 800; white-space: nowrap; }
.spec tbody tr:last-child th,
.spec tbody tr:last-child td { border-bottom: 0; }
.spec tbody tr:hover { background: var(--red-soft); }

/* --------------------------------- faq ---------------------------------- */
.faq { display: grid; border-top: 1px solid var(--rule); max-width: 72ch; }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "";
  flex-shrink: 0;
  width: 0.8rem;
  height: 0.8rem;
  margin-top: 0.35rem;
  border-right: 2px solid var(--red);
  border-bottom: 2px solid var(--red);
  transform: rotate(45deg);
  transition: transform var(--t-fast) var(--ease-out);
}
.faq__item[open] summary::after { transform: rotate(-135deg); }
.faq__item summary:hover { color: var(--red); }
.faq__body { padding-bottom: 1.2rem; }
.faq__body p { line-height: 1.7; text-wrap: pretty; }
.faq__body a { color: var(--red); font-weight: 600; }

/* ------------------------------- end cta -------------------------------- */
.endcta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  align-items: center;
  background: var(--panel);
  border-top: 4px solid var(--red);
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  box-shadow: var(--lift-1);
}
.endcta__text { color: var(--muted); margin-top: 0.75rem; max-width: 56ch; }
.endcta__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

@media (min-width: 40em) {
  .guideindex { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
  .endcta { grid-template-columns: minmax(0, 1fr) auto; gap: 2.5rem; }
}

/* ------------------------------ calculators ----------------------------- */
.toolsintro {
  max-width: 68ch;
  color: var(--muted);
  margin-bottom: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  line-height: 1.65;
  text-wrap: pretty;
}
.toolsintro strong { color: var(--ink); font-weight: 700; }

.tools {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 0.7rem + 1.2vw, 1.75rem);
}

.tool {
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--red);
  padding: clamp(1.25rem, 1rem + 1vw, 1.9rem);
  box-shadow: var(--lift-1);
}
.tool__title {
  font-size: 1.1875rem;
  font-weight: 800;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  margin-bottom: 0.5rem;
}
.tool__intro {
  font-size: var(--fs-small);
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 1.35rem;
  text-wrap: pretty;
}

.tgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  margin-bottom: 1.1rem;
}
.tfield { min-width: 0; }
.tfield__label {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 0.35rem;
}
.topt { font-weight: 400; color: var(--muted); }

.tinput {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--rule);
  padding: 0.65rem 0.75rem;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  caret-color: var(--red);
  transition: border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
.tinput::placeholder { color: #6B6B6B; }
.tinput:hover { border-color: var(--muted); }
.tinput:focus { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
select.tinput { cursor: pointer; }

.tset {
  border: 1px solid var(--rule);
  padding: 0.9rem 1rem 0.25rem;
  margin: 0 0 1.1rem;
  min-width: 0;
}
.tset__legend {
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 0.4rem;
}

.terror {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--red);
  background: var(--red-soft);
  border-left: 3px solid var(--red);
  padding: 0.65rem 0.85rem;
  margin-bottom: 1rem;
  line-height: 1.45;
}

.tactions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* ------------------------------- results -------------------------------- */
.tout {
  margin-top: 1.35rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--rule);
}
.tout__status {
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.3;
  padding: 0.7rem 0.9rem;
  margin-bottom: 1rem;
}
.tout__status--ok   { background: #E8F3EC; color: #15522F; border-left: 4px solid #1B7A42; }
.tout__status--warn { background: #FDF2E2; color: #6B4208; border-left: 4px solid #A96A0B; }
.tout__status--bad  { background: var(--red-soft); color: #8A1118; border-left: 4px solid var(--red); }

.tout__list {
  display: grid;
  border-top: 1px solid var(--rule);
  margin-bottom: 1rem;
}
.tout__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-small);
}
.tout__row dt { color: var(--muted); }
.tout__row dd {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.tout__big { font-size: 1.25rem; color: var(--red); }

.tout__note {
  font-size: var(--fs-small);
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 0.85rem;
  text-wrap: pretty;
}
.tout__note strong { color: var(--ink); font-weight: 700; }

.tout__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.1rem 0 1rem;
}

.tout__text {
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.75;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--grey);
  border: 1px solid var(--rule);
  padding: 0.85rem;
  max-height: 13rem;
  overflow: auto;
  margin: 0;
}

/* The calculators card leads the index, so it reads differently */
.guideindex__feature a { background: var(--ink); }
.guideindex__feature a:hover { background: var(--ink-3); }
.guideindex__feature .guideindex__name { color: #fff; }
.guideindex__feature .guideindex__note { color: var(--muted-ink); }
.guideindex__feature .guideindex__num { color: var(--red-soft); font-size: 1.1rem; }

@media (min-width: 34em) {
  .tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tfield--wide { grid-column: 1 / -1; }
}

@media (min-width: 64em) {
  .tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guideindex { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------------------------- guide library ----------------------------- */
.library {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
}
.libcard {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--red);
  padding: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease-out);
}
.libcard:hover { transform: translateY(-3px); box-shadow: var(--lift-2); }
.libcard--tool { border-top-color: var(--ink); background: var(--grey); }
.libcard__title {
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}
.libcard__title a { text-decoration: none; }
.libcard__title a:hover { color: var(--red); }
/* the whole card is the hit area, without nesting links */
.libcard__title a::after { content: ""; position: absolute; inset: 0; }
.libcard { position: relative; }
.libcard__note {
  font-size: var(--fs-small);
  color: var(--muted);
  line-height: 1.55;
  text-wrap: pretty;
  margin-bottom: auto;
}
.libcard__tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.libcard__tags li {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--rule);
  padding: 0.2rem 0.5rem;
}

/* a centred formula line used in the micron guide */
.formula {
  background: var(--grey);
  border-left: 4px solid var(--red);
  padding: 0.85rem 1rem;
  font-size: 1.0625rem;
  margin-bottom: 1.15rem !important;
}
.guide__also {
  font-size: var(--fs-small);
  color: var(--muted);
  border-left: 3px solid var(--rule);
  padding-left: 0.9rem;
}
.guide__also a { color: var(--red); font-weight: 600; }

@media (min-width: 40em) { .library { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .library { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ------------------------------- PARTS ---------------------------------- */
.pnindex {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  gap: 1px;
  /* The grid lines used to be the container's background showing through the
     gaps, which meant a brand block that did not fill its last row painted
     the leftover tracks grey. Each link now draws its own hairline instead,
     so empty tracks show nothing. */
  background: transparent;
}
.pnindex a {
  display: block;
  padding: 0.7rem 0.5rem;
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--rule);
  text-align: center;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.pnindex a:hover { background: var(--red); color: #fff; }

.parts { display: grid; gap: clamp(1rem, 0.7rem + 1.2vw, 1.75rem); }

.part {
  scroll-margin-top: 9rem;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--red);
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  align-items: start;
}
.part__info { min-width: 0; }

/* The product photographs are white-backed, so they sit on the card without
   a frame. A light panel keeps them from floating when the card is white. */
.part__media {
  background: var(--grey);
  border: 1px solid var(--rule);
  padding: 0.6rem;
  display: grid;
  place-items: center;
}
.part__media img {
  width: 100%;
  max-width: 11rem;
  height: auto;
  mix-blend-mode: multiply;
}
.part:target { box-shadow: 0 0 0 4px var(--red-soft), var(--lift-2); }

.part__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  padding-bottom: 0.9rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--rule);
}
.part__pn {
  font-family: var(--mono);
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.1;
}
.part__style { font-size: var(--fs-small); color: var(--muted); }

.pspec {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--rule);
  margin-bottom: 1.1rem;
}
.pspec__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-small);
}
.pspec__row dt { color: var(--muted); }
.pspec__row dd { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

.pnote, .prelated, .papps {
  font-size: var(--fs-small);
  line-height: 1.6;
  margin-bottom: 0.75rem;
  text-wrap: pretty;
}
.pnote { color: var(--ink); }
.prelated, .papps { color: var(--muted); }
.prelated span, .papps span {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.2rem;
}

.pflag {
  font-size: var(--fs-small);
  line-height: 1.55;
  background: var(--grey);
  border-left: 4px solid var(--ink);
  padding: 0.75rem 0.9rem;
  margin-bottom: 1.1rem;
}
.pflag--warn { background: var(--red-soft); border-left-color: var(--red); }

.part__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.4rem; }

/* A brand's introduction on the oils and coolants pages, where a brand is a
   paragraph until its grades arrive rather than a list of part numbers. Spans
   the grid for the same reason .partsgroup does. */
.brandnote {
  grid-column: 1 / -1;
  max-width: 68ch;
  margin-top: -0.4rem;
  color: var(--muted);
  line-height: 1.7;
  text-wrap: pretty;
}
.brandnote + .partsgroup { margin-top: clamp(1.25rem, 0.8rem + 1.5vw, 2.25rem); }

/* ---- brand grouping on the category pages ------------------------------- */

/* A section heading between runs of cards. It is a grid child of .parts, so
   it takes a row of its own without any extra wrapper. */
.partsgroup {
  /* .parts becomes two columns at 64em, where a heading left to flow would
     take a single cell beside a card instead of opening a new band. */
  grid-column: 1 / -1;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-bottom: 0.6rem;
  border-bottom: 3px solid var(--ink);
  scroll-margin-top: 9rem;
}
.partsgroup:not(:first-child) { margin-top: clamp(1rem, 0.5rem + 1.5vw, 2rem); }

/* Brand eyebrow inside a card. .part__head lays its children out on a shared
   baseline, so a full basis is what puts this on its own line above the
   number rather than beside it. */
.part__brand {
  flex: 0 0 100%;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--red);
}

/* Brand label above each block of the number index. */
.pnbrand {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.6rem;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}
.pnbrand span {
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--muted);
}
.pnindex + .pnbrand { margin-top: 1.5rem; }

@media (min-width: 34em) {
  .part { grid-template-columns: 9.5rem minmax(0, 1fr); gap: 1.4rem; }
  .part--noimg { grid-template-columns: 1fr; }
  .part__media img { max-width: 100%; }
}

@media (min-width: 48em) {
  .pspec { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
}
@media (min-width: 64em) {
  .parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .part { grid-template-columns: 8.5rem minmax(0, 1fr); }
  .part--noimg { grid-template-columns: 1fr; }
  .pspec { grid-template-columns: 1fr; }
}

@media (min-width: 86em) {
  .part { grid-template-columns: 10rem minmax(0, 1fr); }
  .part--noimg { grid-template-columns: 1fr; }
}

/* part numbers on the homepage product cards */
.prod__nums {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: #F2DADA;
  margin-top: 0.3rem;
  line-height: 1.4;
}