/* ==========================================================================
   Egypt Bolt — industrial catalog styles
   Structure follows a distributor-catalog model: dark brand bar, integrated
   search, breadcrumb strip, left filter rail, photo-tile product grid.
   Navy carries the surfaces; lime is an accent only (CTAs, active states).
   ========================================================================== */

:root {
  --navy:        #14315c;
  --navy-deep:   #0e2445;
  --navy-mid:    #1c4179;
  --navy-light:  #2a5697;
  --navy-tint:   #eef2f8;

  --lime:        #eaff2c;
  --lime-deep:   #d4e800;

  --ink:         #10151f;
  --ink-soft:    #55627a;
  --ink-faint:   #667185; /* 4.6:1 on --panel, 4.9:1 on white */

  --paper:       #ffffff;
  --panel:       #f5f7fa;
  --line:        #dde3ec;
  --line-soft:   #e9edf3;

  --max:         1320px;
  --radius:      6px;
  --radius-sm:   3px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  --shadow-sm: 0 4px 12px rgba(20,49,92,0.08);
  --shadow-md: 0 8px 22px rgba(20,49,92,0.1);
  --shadow-lg: 0 16px 40px rgba(20,49,92,0.16);

  --fs-3xs:  10.5px;
  --fs-2xs:  11.5px;
  --fs-xs:   12.5px;
  --fs-sm:   13.5px;
  --fs-input:14px;
  --fs-base: 15px;
  --fs-md:   16px;
  --fs-lg:   19px;
  --fs-h1:    clamp(34px, 4.6vw, 52px);
  --fs-h1-sm: clamp(26px, 3.4vw, 34px);
  --fs-h2:    clamp(24px, 3vw, 31px);
  --fs-h2-sm: clamp(21px, 2.6vw, 27px);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 64px;
}

* { box-sizing: border-box; }

/* Author `display` rules beat the UA stylesheet's [hidden] rule, so cards that
   set display:flex would stay visible when JS filtering hides them. */
[hidden] { display: none !important; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

p { margin: 0; }
img, svg { max-width: 100%; display: block; }

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--space-7);
}

.mono {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}

.eyebrow {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--fs-2xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 100;
  background: var(--lime);
  color: var(--ink);
  padding: var(--space-3) var(--space-5);
  font-weight: 700;
}
.skip-link:focus { inset-inline-start: 8px; top: 8px; }

::selection { background: var(--lime); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
}
/* Lime only reads on navy; on light surfaces it was ~1.1:1. */
.utility-bar :focus-visible,
.masthead :focus-visible,
.nav-strip :focus-visible,
.breadcrumb :focus-visible,
.hero :focus-visible,
.drawing-band :focus-visible,
.industry-card--lead :focus-visible,
.cta-band :focus-visible,
.site-footer :focus-visible,
.mobile-cta :focus-visible { outline-color: var(--lime); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 13px var(--space-6);
  border-radius: var(--radius);
  font-weight: 700;
  font-size: var(--fs-input);
  line-height: 1;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

.btn-lime      { background: var(--lime); color: var(--ink); }
.btn-lime:hover{ background: var(--lime-deep); }

.btn-navy      { background: var(--navy); color: #fff; }
.btn-navy:hover{ background: var(--navy-mid); }

.btn-outline       { background: transparent; color: var(--navy); border-color: var(--line); }
.btn-outline:hover { border-color: var(--navy); background: var(--navy-tint); }

.btn-ghost-light       { background: transparent; color: #fff; border-color: rgba(255,255,255,0.35); }
.btn-ghost-light:hover { border-color: #fff; background: rgba(255,255,255,0.1); }

.btn-sm { padding: 9px var(--space-4); font-size: 13px; }

/* ---------- utility bar ---------- */

.utility-bar {
  background: var(--navy-deep);
  color: #b9c6dc;
  font-size: var(--fs-xs);
}

.utility-bar .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-7);
  flex-wrap: wrap;
}

.utility-contact { display: flex; gap: 22px; flex-wrap: wrap; }

.utility-contact a,
.social-row a {
  color: #b9c6dc;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color 0.15s ease;
}
.utility-contact a:hover,
.social-row a:hover { color: var(--lime); }

.utility-right { display: flex; align-items: center; gap: var(--space-5); }
.social-row { display: flex; gap: 2px; }
.social-row a { width: 32px; height: 32px; justify-content: center; }

/* ---------- masthead ---------- */

.masthead { background: var(--navy); color: #fff; }

.masthead .wrap {
  display: flex;
  align-items: center;
  gap: var(--space-7);
  padding: var(--space-4) var(--space-7);
}

.brand { flex-shrink: 0; }
.brand img { height: 34px; width: auto; }

/* search */
.site-search {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-5);
  max-width: 620px;
}

.site-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 14.5px;
  color: var(--ink);
  padding: 10px 0;
}
.site-search input::placeholder { color: var(--ink-faint); }

.site-search button {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-circle);
  border: 0;
  background: var(--navy-mid);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.15s ease;
}
.site-search button:hover { background: var(--navy-light); }

.masthead-links {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-shrink: 0;
}

.masthead-link {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  line-height: 1.25;
  color: #fff;
  white-space: nowrap;
}
.masthead-link:hover .masthead-link-strong { color: var(--lime); }
.masthead-link svg { flex-shrink: 0; opacity: 0.85; }
.masthead-link span { display: block; }
.masthead-link-strong { font-weight: 600; transition: color 0.15s ease; }
.masthead-link-sub { color: #9fb2cf; font-size: var(--fs-2xs); }

.nav-toggle {
  display: none;
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.4);
  border-radius: var(--radius);
  width: 42px; height: 42px;
  color: #fff;
  cursor: pointer;
  place-items: center;
  flex-shrink: 0;
}

/* ---------- primary nav strip ---------- */

.nav-strip {
  background: var(--navy-mid);
  border-top: 1px solid rgba(255,255,255,0.09);
}

.nav-strip .wrap {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-7);
}

.nav-strip a {
  color: #dce6f5;
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 13px var(--space-4);
  border-bottom: 3px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.nav-strip a:hover { color: #fff; }
.nav-strip a[aria-current="page"] {
  color: #fff;
  border-bottom-color: var(--lime);
}

/* ---------- breadcrumb ---------- */

.breadcrumb { background: var(--navy-deep); }

.breadcrumb ol {
  max-width: var(--max);
  margin: 0 auto;
  padding: 11px var(--space-7);
  display: flex;
  gap: 9px;
  list-style: none;
  font-size: var(--fs-xs);
  color: #a8b8d2;
  flex-wrap: wrap;
}
.breadcrumb a:hover { color: #fff; text-decoration: underline; }
.breadcrumb li + li::before { content: "›"; margin-inline-end: 9px; color: #5d739c; }
.breadcrumb li[aria-current="page"] { color: #fff; font-weight: 600; }

/* ---------- hero ---------- */

/* Full-bleed campaign photo (assets/img/hero-photo.webp) instead of a flat
   navy fill, per the Fastenal reference (docs/references/fastenal-design.md)
   — a dark gradient scrim sits between the color and the photo so the
   overlaid white text stays legible even where the photo itself isn't dark
   enough on its own. */
.hero {
  background: var(--navy-deep); /* fallback: shows briefly before the first slide's background-image loads */
  color: #fff;
  position: relative;
  overflow: hidden;
}

/* Three stacked photos crossfade behind the fixed headline text on one 18s
   loop — same dark gradient scrim on every slide so contrast is identical no
   matter which one is showing. The photo is set inline per slide in build.py
   (the only thing that differs between them).
   Slide 1 never fades: it stays opaque underneath. Slide 2 fades in over it,
   slide 3 fades in over slide 2, then slide 3 fades out to reveal slide 1.
   Each fade happens on top of a fully opaque photo, so the navy behind the
   hero never shows through mid-change (two slides fading out and in at the
   same time used to dim the hero for a moment). */
.hero-slide {
  position: absolute;
  inset: 0;
  /* The photo arrives as --hero-img (set inline per slide in build.py) so the
     inline style doesn't wipe out the scrim layer. A url() in a custom property
     resolves against this stylesheet, so build.py writes it as ../assets/….
     --hero-scrim-angle flips
     for RTL, where the text sits on the right. */
  background:
    linear-gradient(var(--hero-scrim-angle, 100deg), rgba(9,23,45,0.94) 0%, rgba(9,23,45,0.86) 40%, rgba(9,23,45,0.5) 65%, rgba(9,23,45,0.15) 100%),
    var(--hero-img) center / cover no-repeat;
  background-blend-mode: normal;
  opacity: 0;
}
.hero-slide-1 { opacity: 1; }
.hero-slide-2 { animation: hero-slide-2 18s infinite; }
.hero-slide-3 { animation: hero-slide-3 18s infinite; }

/* Slide 2 drops out instantly at 75%, while slide 3 fully covers it. */
@keyframes hero-slide-2 {
  0%, 33.33% { opacity: 0; }
  38.33%, 75% { opacity: 1; }
  75.01%, 100% { opacity: 0; }
}
@keyframes hero-slide-3 {
  0%, 66.67% { opacity: 0; }
  71.67%, 95% { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide-2,
  .hero-slide-3 { animation: none; }
}

.hero .wrap {
  padding: var(--space-11) var(--space-7);
  position: relative;
  z-index: 1;
}

.hero-copy { max-width: 640px; }

.hero-copy .eyebrow { color: var(--lime); }

.hero-copy h1 {
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-top: 14px;
}

.hero-copy > p {
  font-size: 16.5px;
  line-height: 1.65;
  color: #c3d1e6;
  max-width: 50ch;
  margin-top: 18px;
}

.hero-actions { display: flex; gap: var(--space-3); margin-top: 30px; flex-wrap: wrap; }
.hero-cert { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 14px; font-weight: 600; color: var(--paper); }
.hero-cert svg { color: var(--lime); flex-shrink: 0; }

/* The in-house chain, in order: the one claim an importer can't copy. */
.hero-chain {
  list-style: none;
  margin: 40px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(255,255,255,0.16);
  width: fit-content;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 0;
  counter-reset: chain;
  font-size: var(--fs-sm);
  color: #d3deef;
}
.hero-chain li {
  counter-increment: chain;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-chain li::before {
  content: counter(chain, decimal-leading-zero);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--lime);
}
.hero-chain li:not(:last-child)::after {
  content: "";
  width: 22px;
  height: 1px;
  background: rgba(255,255,255,0.3);
  margin-inline: 12px;
}

/* ---------- sections ---------- */

.section { padding: 66px 0; }
.section-tint { background: var(--panel); }

.section-head { margin-bottom: 30px; }
.section-head h2 {
  font-size: var(--fs-h2);
  letter-spacing: -0.02em;
}
.section-head--center { text-align: center; }
.section-head--center > p { margin-inline: auto; }
.section-head > p {
  color: var(--ink-soft);
  margin-top: 12px;
  max-width: 62ch;
  line-height: 1.65;
}

.section-head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}

/* ---------- category tiles ---------- */

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--space-4);
}
.category-grid--six { grid-template-columns: repeat(6, 1fr); }

/* Custom work is a different kind of order, not a seventh category tile. */
.drawing-band {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 112px 1fr auto;
  align-items: center;
  gap: var(--space-6);
  padding: 18px 26px 18px 18px;
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius);
}
.drawing-band-art {
  aspect-ratio: 1 / 1;
  background: var(--paper);
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  padding: 8px;
}
.drawing-band-art img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.drawing-band-copy h3 { font-size: var(--fs-lg); }
.drawing-band-copy p { color: #c3d1e6; margin-top: 6px; font-size: 14.5px; line-height: 1.6; max-width: 60ch; }
.drawing-band-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.category-tile {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-4) 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.category-tile:hover {
  border-color: var(--navy-light);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.category-tile--std { padding-bottom: var(--space-4); }
.category-tile-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
}
.category-tile--std:has(.category-tile-link:hover) {
  border-color: var(--navy-light);
  box-shadow: var(--shadow-md);
}
.std-chips {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.std-chips a {
  display: inline-block;
  padding: 5px 9px;
  border-radius: var(--radius-sm);
  background: var(--navy-tint);
  color: var(--navy);
  font-size: 12px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  transition: background 0.15s ease, color 0.15s ease;
}
.std-chips a:hover { background: var(--navy); color: #fff; }

.category-tile-art {
  aspect-ratio: 1 / 1;
  width: 100%;
  display: grid;
  place-items: center;
}
.category-tile-art img { max-height: 100%; max-width: 100%; width: auto; height: auto; }

.category-tile h3 { font-size: var(--fs-base); font-weight: 650; }
.category-tile p {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  line-height: 1.5;
}

/* ---------- catalog page ---------- */

.page-head {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  padding: 30px 0 26px;
  border-bottom: 1px solid var(--line);
}

.page-head-thumb {
  width: 106px;
  height: 106px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  padding: 10px;
  background: var(--paper);
  overflow: hidden;
}
/* Without an explicit max-height, this img only had max-width:100% (from the
   generic img rule) to go on — as a grid item with no other size limit, it
   could render at a much larger scaled size than the 106px box and spill
   into the content below. Same fix as .product-art/.category-tile-art. */
.page-head-thumb img { max-height: 100%; max-width: 100%; width: auto; height: auto; }

.page-head h1 { font-size: var(--fs-h1-sm); }
.page-head > div > p {
  color: var(--ink-soft);
  margin-top: 10px;
  line-height: 1.6;
  max-width: 76ch;
}

.catalog-layout {
  display: flex;
  align-items: flex-start;
  gap: 34px;
  padding: 30px 0 76px;
}

/* filter rail */
.filter-rail {
  width: 274px;
  flex-shrink: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 18px;
  overflow: hidden;
}

.filter-block { border-bottom: 1px solid var(--line); }
.filter-block:last-of-type { border-bottom: 0; }

.filter-block > h2,
.filter-block > .filter-label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--navy);
  padding: 15px 18px 12px;
  margin: 0;
}

.filter-toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  padding: 15px 18px;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  text-align: start;
}
.filter-toggle svg { transition: transform 0.2s ease; flex-shrink: 0; }
.filter-toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }

.filter-body { padding: 0 18px 16px; }
.filter-toggle[aria-expanded="false"] + .filter-body { display: none; }

.filter-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: var(--space-2) 14px;
  margin-bottom: 4px;
}
.filter-search input {
  border: 0; outline: 0; background: transparent;
  font: inherit; font-size: var(--fs-sm); width: 100%; min-width: 0;
  color: var(--ink);
}
.filter-search svg { flex-shrink: 0; color: var(--ink-faint); }

.filter-option {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  padding: 7px 0;
  cursor: pointer;
}
.filter-option:hover { color: var(--ink); }
.filter-option input {
  width: 16px; height: 16px;
  accent-color: var(--navy);
  cursor: pointer;
  flex-shrink: 0;
}
.filter-option .count { color: var(--ink-faint); font-size: var(--fs-xs); }

.filter-more {
  display: block;
  background: none; border: 0; padding: 4px 0 0;
  font: inherit; font-size: var(--fs-xs); font-weight: 650;
  color: var(--navy); text-decoration: underline; cursor: pointer;
}
.filter-more:hover { color: var(--navy-light); }

.filter-foot { padding: 14px 18px; }
.filter-reset {
  background: none; border: 0; padding: 0;
  font: inherit; font-size: 13px; font-weight: 650;
  color: var(--navy); text-decoration: underline; cursor: pointer;
}
.filter-reset:hover { color: var(--navy-light); }

/* results */
.catalog-main { flex: 1; min-width: 0; }

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--panel);
  border: 1px solid var(--lime-deep);
  border-radius: var(--radius-pill);
  padding: 5px 8px 5px 12px;
  font-size: var(--fs-xs);
  font-weight: 650;
  color: var(--ink);
}
.filter-chip button {
  display: grid;
  place-items: center;
  width: 16px; height: 16px;
  border: 0;
  border-radius: var(--radius-circle);
  background: var(--lime);
  color: var(--ink);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.filter-chip button:hover { background: var(--lime-deep); }

.catalog-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.catalog-count { font-size: var(--fs-sm); color: var(--ink-soft); }
.catalog-count strong { color: var(--ink); font-weight: 700; }

.catalog-sort {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}
.catalog-sort select {
  font: inherit;
  font-size: var(--fs-sm);
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(214px, 1fr));
  gap: 18px;
}

.product-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.product-card:hover {
  border-color: var(--navy-light);
  box-shadow: var(--shadow-md);
}

/* Every source render is now a uniform square canvas with a consistent
   content-fill ratio (see CLAUDE.md's Product renders note), so the tile
   itself can be a true square instead of a fixed-height box — that's what
   makes the grid read as a deliberate, uniform system rather than a loose
   collection of differently-scaled photos. */
.product-art {
  aspect-ratio: 1 / 1;
  width: 100%;
  display: grid;
  place-items: center;
  padding: 14px;
  border-bottom: 1px solid var(--line-soft);
}
.product-art img { max-height: 100%; max-width: 100%; width: auto; height: auto; }
.product-art.img-broken,
.category-tile-art.img-broken { background: var(--panel); }
.product-art.img-broken img,
.category-tile-art.img-broken img { display: none; }

.product-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}

.product-cat {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--fs-3xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.product-body h3 { font-size: var(--fs-base); font-weight: 650; line-height: 1.3; }

.product-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--fs-2xs);
  color: var(--ink-soft);
}
.product-meta div { display: flex; justify-content: space-between; gap: 10px; }
.product-meta span:last-child { color: var(--ink); font-weight: 600; text-align: end; }

.product-body .btn { margin-top: auto; width: 100%; }

.catalog-empty {
  display: none;
  padding: 64px 24px;
  text-align: center;
  color: var(--ink-soft);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}
.catalog-empty.is-visible { display: block; }
.catalog-empty a { color: var(--navy); font-weight: 650; text-decoration: underline; }

/* ---------- industries ---------- */

.industry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.industry-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px var(--space-5);
  display: flex;
  flex-direction: column;
  gap: 11px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.industry-card svg { color: var(--navy); }
.industry-card h3 { font-size: var(--fs-md); }
.industry-card p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; max-width: 62ch; }

/* Electrical is the specialism: the wide navy card, with real catalog parts. */
.industry-card--lead {
  grid-column: span 2;
  grid-row: span 1;
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.industry-card--lead svg { color: var(--lime); }
.industry-card--lead h3 { font-size: var(--fs-lg); }
.industry-card--lead p { color: #c3d1e6; }
.industry-card--lead .industry-more { color: var(--lime); }
.industry-card--lead .industry-clients { color: #fff; font-weight: 600; font-size: var(--fs-sm); }
.industry-parts {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.industry-parts a {
  display: inline-block;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 13px;
  color: var(--navy);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.industry-parts a:hover { border-color: var(--navy); background: var(--navy-tint); }
.industry-card--lead .industry-parts a { border-color: rgba(255,255,255,0.28); color: #fff; }
.industry-card--lead .industry-parts a:hover { border-color: var(--lime); color: var(--lime); background: transparent; }
.industry-more {
  margin-top: auto;
  padding-top: 6px;
  color: var(--navy);
  font-weight: 650;
  font-size: var(--fs-sm);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- capability / process ---------- */

.process-line {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}
.process-step { position: relative; padding-top: 44px; }
/* The rail: each step draws the segment to the next one. */
.process-step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 14px;
  inset-inline-start: 36px;
  inset-inline-end: -12px;
  height: 2px;
  background: var(--line);
}
.process-num {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-circle);
  background: var(--lime);
  color: var(--ink);
  display: grid;
  place-items: center;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 600;
}
.process-art {
  aspect-ratio: 4 / 3;
  background: var(--navy-deep);
  border-radius: var(--radius);
  overflow: hidden;
}
.process-art img { width: 100%; height: 100%; object-fit: cover; }
.process-copy { padding-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.process-step h3 { font-size: var(--fs-base); }
.process-step p { font-size: 14px; color: var(--ink-soft); line-height: 1.55; }

.split {
  display: flex;
  gap: 56px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.split > div:first-child { flex: 1 1 380px; min-width: 0; }
.split > div:last-child  { flex: 1 1 380px; min-width: 0; }
.split > div:first-child > .btn { margin-top: 22px; }

/* ---------- shared prose/heading utilities (fold inline styles out of build.py) ---------- */
.h2 { font-size: var(--fs-h2); }
.h2-sm { font-size: var(--fs-h2-sm); }
.h2-compact { font-size: var(--fs-lg); }
.section-flush { padding: 34px 0 6px; }
.prose { color: var(--ink-soft); line-height: 1.75; }
.prose-18 { margin-top: 18px; }
.prose-16 { margin-top: var(--space-4); }
.prose-14 { margin-top: 14px; }
.mt-26 { margin-top: 26px; }
.link-navy { color: var(--navy); text-decoration: underline; }

.fact-list { display: flex; flex-direction: column; gap: 10px; }
.fact {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 15px 17px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.fact-check {
  width: 22px; height: 22px;
  border-radius: var(--radius-circle);
  background: var(--lime);
  display: grid; place-items: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.fact strong { display: block; font-size: var(--fs-input); font-weight: 650; }
.fact p { font-size: 13px; color: var(--ink-soft); margin-top: 3px; line-height: 1.55; }

/* ---------- clients ---------- */

.client-band { border-bottom: 1px solid var(--line); background: var(--paper); }
.client-band .wrap {
  display: flex;
  align-items: center;
  gap: 18px 40px;
  padding-top: 24px;
  padding-bottom: 24px;
  flex-wrap: wrap;
}
.client-band h2 {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
}
.client-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 36px;
}
.client-list li {
  font-size: var(--fs-lg);
  font-weight: 750;
  color: var(--navy);
  letter-spacing: -0.01em;
}

/* ---------- cta band ---------- */

.cta-band {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  color: #fff;
  border-radius: var(--radius);
  padding: 38px 34px;
  margin-bottom: var(--space-11);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.cta-band::after {
  content: "";
  position: absolute;
  inset-inline-end: -60px;
  bottom: -90px;
  width: 220px;
  height: 220px;
  border-radius: var(--radius-circle);
  border: 2px solid rgba(234,255,44,0.16);
  pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { font-size: var(--fs-h2-sm); }
.cta-band p { color: #b9c9e2; margin-top: 8px; font-size: 14.5px; }

/* ---------- quote form ---------- */

.quote-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.field label { font-size: 13px; font-weight: 650; }
.field .hint { font-weight: 400; color: var(--ink-faint); }
.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: var(--fs-input);
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--navy-light);
  outline-offset: 1px;
  box-shadow: 0 0 0 3px rgba(234,255,44,0.35);
}

.form-note { font-size: var(--fs-xs); color: var(--ink-soft); margin-top: 4px; }

.quote-status {
  background: var(--navy-tint);
  border: 1px solid #cdd8ea;
  border-radius: var(--radius);
  padding: 18px 20px;
  gap: 8px;
}
.quote-status p { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.6; }
.quote-status .quote-status-title { color: var(--ink); font-weight: 650; font-size: var(--fs-base); }
.quote-status .form-actions { margin-top: 6px; }

.supply-title { font-size: var(--fs-md); margin-bottom: var(--space-4); }
.supply-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.supply-list li {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 13px 0;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
  line-height: 1.5;
}
.supply-list li:last-child { border-bottom: 1px solid var(--line); }
#about .split > div:first-child > .btn { margin-top: 24px; }

.quote-context {
  display: block;
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: var(--fs-sm);
}
.quote-context strong { color: var(--lime); }

.contact-list { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.contact-list li { display: flex; gap: 14px; align-items: flex-start; }
.contact-icon {
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: var(--radius-circle);
  background: var(--navy-tint);
  color: var(--navy);
  display: grid;
  place-items: center;
}
.contact-list strong { display: block; font-size: 14.5px; font-weight: 650; }
.contact-list a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.contact-list p { font-size: var(--fs-sm); color: var(--ink-soft); margin-top: 2px; line-height: 1.55; }

/* Phones: quote and WhatsApp stay one thumb away. Hidden while the form itself is on screen. */
.mobile-cta { display: none; }

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

.site-footer { background: var(--navy-deep); color: #b9c6dc; padding: 52px 0 0; }

.footer-top {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 28px 34px;
  display: flex;
  justify-content: space-between;
  gap: 44px;
  flex-wrap: wrap;
}

.footer-brand { max-width: 320px; }
.footer-brand img { height: 30px; width: auto; margin-bottom: 15px; }
.footer-brand p { font-size: var(--fs-sm); line-height: 1.7; }
.footer-brand .mono { display: block; margin-top: 13px; font-size: var(--fs-xs); color: #92a4c2; }

.footer-cols { display: flex; gap: 52px; flex-wrap: wrap; }
.footer-col h2 {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--fs-2xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8fa3c4;
  font-weight: 500;
  margin-bottom: 13px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 9px; font-size: var(--fs-sm); }
.footer-note { display: block; font-size: var(--fs-xs); color: #8fa3c4; margin-top: 2px; }
.footer-col a:hover { color: var(--lime); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  max-width: var(--max);
  margin: 0 auto;
  padding: 16px 28px;
  font-size: 12px;
  color: #8296b6;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* ---------- responsive ---------- */

/* ---------- product detail page ---------- */

.product-body h3 a { color: inherit; }
.product-body h3 a:hover { color: var(--navy-light); text-decoration: underline; }
a.product-art { display: flex; }

.pdp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--space-10);
  padding: var(--space-9) 0 var(--space-10);
  align-items: start;
}
.pdp-art {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: var(--space-8);
}
.pdp-art img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.pdp-info .product-cat:hover { text-decoration: underline; }
.pdp-info h1 { font-size: var(--fs-h1-sm); line-height: 1.15; margin: var(--space-2) 0 var(--space-4); }
.pdp-lede { color: var(--ink-soft); font-size: var(--fs-md); line-height: 1.6; max-width: 56ch; }

.spec-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-6);
  font-size: var(--fs-sm);
}
.spec-table th,
.spec-table td {
  text-align: start;
  padding: 11px var(--space-4);
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.spec-table tr:nth-child(odd) { background: var(--panel); }
.spec-table th { width: 34%; font-weight: 650; color: var(--ink-soft); }
.spec-note { font-size: var(--fs-xs); color: var(--ink-faint); margin-top: var(--space-3); }
.pdp-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.pdp-industries { margin-top: var(--space-5); font-size: var(--fs-sm); color: var(--ink-soft); }
.pdp-industries a { color: var(--navy); font-weight: 600; text-decoration: underline; }
.product-grid-related { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* Filters button: phones/tablets only, where the rail would otherwise sit
   on top of the results. */
.filter-open { display: none; }

/* 404 */
.not-found { max-width: 640px; }
.not-found h1 { font-size: var(--fs-h1-sm); margin: var(--space-2) 0 var(--space-4); }
.not-found-search { margin: var(--space-6) 0; max-width: 520px; border: 1px solid var(--line); }

@media (max-width: 1080px) {
  .masthead-links .masthead-link-sub { display: none; }
  .masthead .wrap { gap: 18px; }
  .catalog-layout { gap: 24px; }
  .filter-rail { width: 230px; }
}

@media (max-width: 1100px) {
  .category-grid--six { grid-template-columns: repeat(3, 1fr); }
  .process-line { grid-template-columns: repeat(3, 1fr); row-gap: 30px; }
  .process-step:nth-child(3n)::before { display: none; }
  .drawing-band { grid-template-columns: 96px 1fr; }
  .hero-chain { display: grid; grid-template-columns: repeat(3, auto); gap: 10px 28px; }
  .hero-chain li:not(:last-child)::after { display: none; }
  .drawing-band-actions { grid-column: 1 / -1; }
}

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

  .pdp { grid-template-columns: 1fr; gap: var(--space-7); padding-top: var(--space-6); }
  .pdp-art { max-width: 420px; width: 100%; margin: 0 auto; }
  .catalog-layout { flex-direction: column; }
  .filter-rail { width: 100%; position: static; display: none; }
  .filter-rail.is-open { display: block; }
  .filter-open { display: inline-flex; }
  /* Arriving pre-filtered (category tile, industry card, search) — go
     straight to the results instead of re-showing the category tiles. */
  .is-filtered .catalog-cats { display: none; }
  .split { gap: 34px; }
}

@media (max-width: 760px) {
  .wrap { padding: 0 18px; }
  .utility-bar .wrap { padding: 8px 18px; }
  .utility-right .mono { display: none; }

  .masthead .wrap { flex-wrap: wrap; padding: 14px 18px; gap: 14px; }
  .site-search { order: 3; flex-basis: 100%; max-width: none; }
  .nav-toggle { display: grid; margin-inline-start: auto; }

  .masthead-links {
    display: none;
    order: 4;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .masthead-links.is-open { display: flex; }
  .masthead-link {
    padding: 13px 2px;
    border-top: 1px solid rgba(255,255,255,0.12);
  }
  .masthead-link-sub { display: block !important; }

  .nav-strip { display: none; }
  .nav-strip.is-open { display: block; }
  .nav-strip .wrap { flex-direction: column; align-items: stretch; padding: 0 18px; }
  .nav-strip a {
    padding: 13px 0;
    border-bottom: 0;
    border-top: 1px solid rgba(255,255,255,0.12);
  }
  .nav-strip a[aria-current="page"] { color: var(--lime); }

  .breadcrumb ol { padding: 10px 18px; }
  .page-head { flex-direction: column; gap: 16px; }
  .quote-form { grid-template-columns: 1fr; }
  .cta-band { padding: 28px 22px; }
  .footer-top { flex-direction: column; gap: 30px; padding: 0 18px 30px; }
  .footer-cols { gap: 34px; }
  .hero .wrap { padding: 46px 18px; }
  /* Phones keep one still hero: the other two photos would add ~240 KB. */
  .hero-slide-2,
  .hero-slide-3 { display: none; animation: none; }
  .section { padding: 48px 0; }

  .hero-chain { width: auto; grid-template-columns: repeat(2, 1fr); gap: 10px 16px; }

  .client-band .wrap { flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 20px; padding-bottom: 20px; }
  .client-list { gap: 6px 22px; }
  .client-list li { font-size: var(--fs-md); }

  .category-grid--six { grid-template-columns: repeat(2, 1fr); }
  /* Two standards per tile on phones: the tile itself opens the full list. */
  .std-chips li:nth-child(n+3) { display: none; }
  .std-chips a { padding: 8px 10px; }
  .drawing-band { grid-template-columns: 72px 1fr; padding: 16px; gap: 16px; }
  .drawing-band-actions .btn { flex: 1 1 auto; }

  /* Production line becomes a vertical list: number, thumbnail, text. */
  .process-line { grid-template-columns: 1fr; gap: 0; }
  .process-step {
    display: grid;
    grid-template-columns: 30px 92px 1fr;
    gap: 14px;
    align-items: start;
    padding: 0 0 22px;
  }
  .process-step:not(:last-child)::before,
  .process-step:nth-child(3n):not(:last-child)::before {
    display: block;
    top: 34px;
    bottom: 4px;
    inset-inline-start: 14px;
    inset-inline-end: auto;
    width: 2px;
    height: auto;
  }
  .process-num { position: static; }
  .process-copy { padding-top: 2px; }

  .industry-grid { grid-template-columns: 1fr; }
  .industry-card--lead { grid-column: auto; }

  .mobile-cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 50;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: var(--navy-deep);
    box-shadow: 0 -6px 18px rgba(14,36,69,0.22);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .mobile-cta.is-hidden { transform: translateY(110%); }
  .mobile-cta .btn { padding: 13px 10px; }
  body { padding-bottom: 72px; }
}

@media (max-width: 460px) {
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  .category-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* ---------- print ---------- */

@media print {
  .utility-bar,
  .masthead .site-search,
  .nav-toggle,
  .nav-strip,
  .filter-rail,
  .hero-actions,
  .cta-band,
  .quote-form button[type="submit"],
  .mobile-cta {
    display: none !important;
  }

  * { box-shadow: none !important; }

  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: underline; }

  .hero { background: #fff; color: #000; }
  .hero-copy > p { color: #000; }

  .catalog-layout { flex-direction: column; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- language switch + Arabic (RTL) ---------- */

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #b9c6dc;
  font-weight: 600;
  transition: color 0.15s ease;
}
.lang-switch:hover { color: var(--lime); }
.lang-switch[lang="ar"] { font-family: "IBM Plex Sans Arabic", "Inter", sans-serif; }

/* Arabic script has no capitals and breaks when letter-spaced; the mono face
   has no Arabic glyphs, so fall through to the Arabic sans for those labels. */
[lang="ar"] body { font-family: "IBM Plex Sans Arabic", "Inter", system-ui, sans-serif; }
[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3, [lang="ar"] h4,
[lang="ar"] .eyebrow, [lang="ar"] .product-cat, [lang="ar"] .footer-col h2 {
  letter-spacing: 0;
  text-transform: none;
}
[lang="ar"] .mono, [lang="ar"] .eyebrow, [lang="ar"] .product-cat,
[lang="ar"] .product-meta, [lang="ar"] .process-art .num, [lang="ar"] .footer-col h2 {
  font-family: "IBM Plex Mono", "IBM Plex Sans Arabic", ui-monospace, monospace;
}
[lang="ar"] .eyebrow, [lang="ar"] .product-cat { font-size: var(--fs-xs); }
[lang="ar"] .footer-bottom .mono, [lang="ar"] .utility-right .mono, [lang="ar"] .footer-brand .mono,
[lang="ar"] .footer-col h2 {
  font-family: "IBM Plex Sans Arabic", "Inter", sans-serif;
  letter-spacing: 0;
}

[dir="rtl"] .hero-slide { --hero-scrim-angle: 260deg; }
[dir="rtl"] .breadcrumb li + li::before { content: "‹"; }
[dir="rtl"] .filter-toggle[aria-expanded="false"] svg { transform: rotate(90deg); }