/* =========================================================================
   utilities.css — replaces the inline style attributes that were spread
   across the site templates. Loaded LAST (after style.css + responsive.css)
   so these declarations sit where the inline styles used to sit.

   The layout utilities use !important on purpose: the inline styles they
   replace used to beat theme overrides such as
   `.theme-locations .materials { justify-content: flex-start }`.
   Without !important those pages would silently change layout.
   ========================================================================= */

/* ---- Flex alignment ----------------------------------------------------- */
.u-jc-center { justify-content: center !important }
.u-jc-start  { justify-content: flex-start !important }

/* ---- Spacing ------------------------------------------------------------ */
.u-mt-12  { margin-top: 12px !important }
.u-mt-22  { margin-top: 22px !important }
.u-mt-28  { margin-top: 28px !important }
.u-mt-34  { margin-top: 34px !important }
.u-mb-6   { margin-bottom: 6px !important }
.u-mb-26  { margin-bottom: 26px !important }
.u-pt-0   { padding-top: 0 !important }

/* ---- Text --------------------------------------------------------------- */
.u-text-center { text-align: center !important }

/* ---- Chip row (product / grade chips under a heading) ------------------- */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

/* ---- Centred intro paragraph block above a product grid ----------------- */
.prose--lede {
  max-width: 900px;
  margin: 0 auto 10px;
  text-align: center;
}

.prose--lede-flush {
  margin-bottom: 0;
}

/* ---- Google Maps embed -------------------------------------------------- */
.map-frame {
  border: 0;
  border-radius: 14px;
}

/* ---- Honeypot field (spam trap, must stay off-screen but focusable) ----- */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  opacity: 0;
  height: 0;
  width: 0;
}

/* =========================================================================
   Background images
   Previously inline `style="background-image:url(...)"`. Kept as image-only
   classes so the same picture can be reused by .pcat__banner, .indcard and
   .sector__media without duplicating rules.
   ========================================================================= */

/* ---- Product category banners ------------------------------------------ */
.bg-prod-pipes-tubes         { background-image: url('/assets/img/products/Pipes-and-Tubes.webp') }
.bg-prod-flanges             { background-image: url('/assets/img/products/Flanges.webp') }
.bg-prod-buttweld-fittings   { background-image: url('/assets/img/products/buttweld-fittings-1.webp') }
.bg-prod-forged-fittings     { background-image: url('/assets/img/products/Forged-Fittings.webp') }
.bg-prod-instrument-fittings { background-image: url('/assets/img/products/instrument-fittings.webp') }
.bg-prod-valves              { background-image: url('/assets/img/products/valves.webp') }
.bg-prod-sheets-plates       { background-image: url('/assets/img/products/Sheets-and-Plates.webp') }
.bg-prod-wires-bars          { background-image: url('/assets/img/products/wires-bars.webp') }
.bg-prod-fasteners           { background-image: url('/assets/img/products/Fasteners.webp') }
.bg-prod-wire-mesh           { background-image: url('/assets/img/products/wire-mesh.webp') }
.bg-prod-piping-spools       { background-image: url('/assets/img/products/piping-spools.webp') }

/* ---- Industry imagery --------------------------------------------------- */
.bg-ind-chemical     { background-image: url('/assets/img/industries/chemical.jpg') }
.bg-ind-oil-gas      { background-image: url('/assets/img/industries/oil-gas.jpg') }
.bg-ind-power        { background-image: url('/assets/img/industries/power.jpg') }
.bg-ind-cement       { background-image: url('/assets/img/industries/cement.jpg') }
.bg-ind-automobile   { background-image: url('/assets/img/industries/automobile.jpg') }
.bg-ind-marine       { background-image: url('/assets/img/industries/marine.jpg') }
.bg-ind-fertilizer   { background-image: url('/assets/img/industries/fertilizer.jpg') }
.bg-ind-pharma       { background-image: url('/assets/img/industries/pharma.jpg') }
.bg-ind-aerospace    { background-image: url('/assets/img/industries/aerospace.jpg') }
.bg-ind-food         { background-image: url('/assets/img/industries/food.jpg') }
.bg-ind-water        { background-image: url('/assets/img/industries/water.jpg') }
.bg-ind-construction { background-image: url('/assets/img/industries/construction.jpg') }
.bg-ind-mining       { background-image: url('/assets/img/industries/mining.jpg') }
.bg-ind-paper        { background-image: url('/assets/img/industries/paper.jpg') }