/* ==========================================================================
   2026 Design — standalone styles
   Plain CSS (no build step required). Enqueued from app/setup.php after
   sage/main.css. Card sliders fall back to responsive grids until Flickity
   enhances them.
   Colour reference: primary #d02131 · navy #152642 · grey #606576 ·
   offwhite #F0F1F7 · border rgba(14,15,19,.1)
   ========================================================================== */

/* Brand red -----------------------------------------------------------------
   One place to change it. Three separate red tokens are in play on this site:

     --color-primary  main.css (compiled from _colours.scss, which isn't built)
     --brand          Appearance → Customize → Additional CSS
     --brand-dark     ditto — hover state

   The Customizer block prints AFTER this stylesheet, so --brand needs
   !important to win; --color-primary doesn't, main.css comes first.

   Literal hex reds also remain inside that Customizer block (#C8102E ×10,
   #B1040E ×3, #E30613 ×4) and can only be changed there.
   -------------------------------------------------------------------------- */
:root {
  --color-primary: #d02131;
  --color-primary-dark: #a21a26;
  --brand: #d02131 !important;
  --brand-dark: #a21a26 !important;
  --brand-soft: #fbe9eb !important;

  --color-darkblue: #152642;
  --color-altblue: #242f5c;
  --card-border: 1px solid rgba(10, 29, 52, .12);
  --card-radius: 1rem;
  --card-shadow: 0 12px 24px rgba(10, 29, 52, .16), 0 2px 6px rgba(10, 29, 52, .08);
  --card-shadow-hover: 0 16px 32px rgba(10, 29, 52, .2), 0 4px 10px rgba(10, 29, 52, .1);
  /* Upper bound trimmed 4rem -> 3rem: desktop sections were carrying more
     vertical air than the design. The 2.5rem floor is unchanged, so phone
     spacing stays as it was. Drives `section`, .catalogue-listing et al. */
  --section-space: clamp(2.5rem, 4vw, 3rem);
}

/* Shared helpers -------------------------------------------------------- */

/* Mobile hero banner ----------------------------------------------------
   A hero with a background image sets it as an inline --hero-bg custom
   property instead of background-image, carries .has-hero-banner and renders
   a .hero-banner child as its first element. Below 768px .hero-banner paints
   the image as a full-bleed band above the copy; from 768px the banner is
   hidden and the hero paints the image behind the copy as before.

   The image is decorative — the hero's own <h1> carries the meaning and none
   of these fields store alt text — so it stays a CSS background rather than
   an <img>, which also keeps the existing "cover" cropping.

   Where --hero-bg is unset, background-image resolves to none, so heroes
   without an image (search, [data-hero="none"]) are untouched. */
.hero-banner {
  display: block;
  aspect-ratio: 16 / 9;
  max-height: 250px;
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media (min-width: 768px) {
  .hero-banner {
    display: none;
  }

  .has-hero-banner {
    background-image: var(--hero-bg);
  }

  /* .home-hero paints its gradient through the `background` shorthand further
     down the file, which resets background-image and would beat the rule above
     on source order alone. It is the only hero using the shorthand, so it is
     the only one needing the extra class to outrank it. */
  .home-hero.has-hero-banner {
    background-image: var(--hero-bg);
  }
}

@media (max-width: 767px) {

  .btn-row .btn {
    flex: 1 1 100%;
    text-align: center;
  }

  /* Nothing sits over the image any more, so the legibility overlays
     (.page-header's black wash, .home-hero--image's gradient) come off. */
  .has-hero-banner:before {
    display: none;
  }

  /* Full-bleed offsets cancel each hero's own padding. */
  .service-hero .hero-banner,
  .service-hero__media {
    /* shared section padding: 2rem top, 1.25rem sides */
    margin: -2rem -1.25rem 1.5rem;
  }

  .home-hero .hero-banner {
    /* .home-hero zeroes its vertical padding; .home-hero__copy supplies the gap */
    margin: 0 -1.25rem;
    background-position: 85% 0%;
  }

  .home-hero--image .home-hero__inner {
    /* the 320px floor only existed to give the background image room */
    min-height: 0;
  }

  .home-hero__inner {
    /* 1.5rem to the headline once .home-hero__copy's 1rem top padding is
       added, matching the gap under the other heroes' banners */
    gap: .5rem;
  }

  /* A dedicated mobile crop supersedes the diagonal strip on phones; only one
     image leads the section. */
  .home-hero--mobile-image .home-hero__inner .home-hero__media {
    display: none;
  }

  /* The diagonal image strip is this hero's visual, so on mobile it leads the
     section above the copy, the way the banner does in every other hero.
     .home-hero__media--mobile sits outside .container instead, but the bleed
     below resolves the same either way. */
  .home-hero__media {
    order: -1;
    /* full-bleed past both the section padding and the centred .container;
       .home-hero clips its own overflow, so the 100vw span cannot scroll */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    min-height: 0;
    aspect-ratio: 16 / 9;
    max-height: 220px;
  }

  /* sits outside .home-hero__inner, so it needs the grid gap explicitly */
  .home-hero__media--mobile {
    margin-bottom: .5rem;
  }

  .page-header .hero-banner {
    margin: -2.5rem -0.75rem 1.5rem;
  }

  .page-header.has-hero-banner {
    /* main.css uses 8rem/4rem here purely to make room for the background
       image; with the image lifted out, the copy sets its own rhythm. The
       solid navy replaces the image as the backdrop for the white
       [data-theme="dark"] text. */
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    background-color: #152642;
  }
}

/* Inner-page header band ------------------------------------------------
   The band is solid navy across the site. Pages with a featured image still
   paint it over the top (and keep their own padding); pages without one used
   to fall through to a bare white band with dark text, which is the
   inconsistency this fixes. page-header.blade.php now carries
   data-theme="dark" unconditionally, so the theme's existing dark-mode rules
   supply the white headings, copy and breadcrumbs — no per-element colour
   overrides needed here. */
.page-header {
  background-color: var(--color-darkblue);
}

/* main.css's :before is a 50% black wash for legibility over a photo. With no
   photo behind it, it just muddies the navy to near-black. */
.page-header:not(.has-hero-banner):before {
  display: none;
}

/* Product category hero -------------------------------------------------
   data-theme="dark" already whitens the breadcrumb, headings and paragraphs
   via the theme's own dark rules. The category description is editor HTML on
   top of that, so it can carry lists, links and emphasis, which those rules
   do not reach — and they would otherwise render dark on the navy band. */
.page-header.product-category-hero .product-category-hero__description,
.page-header.product-category-hero .product-category-hero__description li,
.page-header.product-category-hero .product-category-hero__description strong,
.page-header.product-category-hero .product-category-hero__description em {
  color: #fff;
}

/* Underlined so a link is still identifiable now that it is the same colour
   as the copy around it. */
.page-header.product-category-hero .product-category-hero__description a {
  color: #fff;
  text-decoration: underline;
}

/* Spacing deliberately left alone: main.css's pt-32 (8rem, a leftover from the
   old absolute overlay nav) is already cut to py-10 by its own
   `[data-hero="none"] .page-header` rule, and body[data-hero="none"] is set on
   exactly the pages that reach this band without an image. */

/* Scroll-snap carousel arrows -------------------------------------------
   resources/2026-carousel.js injects these into any [data-carousel] and
   toggles .has-nav on the wrapper while the track actually overflows.
   Arrows are tablet-and-up only; below that the track is swiped directly,
   matching .product-support-banners__solution-slider. */
[data-carousel] {
  position: relative;
}

.scroll-carousel__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: #152642;
  background: #fff;
  border: 1px solid #000;
  border-radius: 999px;
  transform: translateY(-50%);
  cursor: pointer;
  transition: opacity .2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-carousel__nav.is-prev {
  left: -8px;
}

.scroll-carousel__nav.is-next {
  right: -8px;
}

.scroll-carousel__nav[disabled] {
  opacity: .35;
  cursor: default;
}

@media (min-width: 768px) {
  [data-carousel].has-nav .scroll-carousel__nav {
    display: flex;
  }
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  color: var(--color-primary);
  font-weight: 500;
  text-decoration: none;
}

.link-arrow svg {
  margin-left: .5rem;
}

/* WordPress core's generated global styles add an underline to every anchor
   after the theme stylesheet. Component links already use colour, weight,
   arrows and button treatments, so remove that unintended red decoration at
   the three site-shell boundaries. */
#app a:not(.wp-element-button),
.site-header a:not(.wp-element-button),
.bms-footer a:not(.wp-element-button) {
  text-decoration: none;
}

#app a:focus-visible,
.site-header a:focus-visible,
.bms-footer a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.eyebrow {
  margin: 0 0 .25rem;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: .06em;
  color: var(--color-primary);
}

.service-hero .btn-row,
.home-hero .btn-row,
.cta-banner .btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.btn-row a+a {
  margin-left: 0rem;
}

/* Consistent elevated surface for content and product cards. */
.why-card,
.industry-card,
.catalogue-card,
.product-card,
.upsell-card,
.testimonial {
  background: #fff;
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}

.industry-card,
.catalogue-card,
.product-card,
.upsell-card {
  transition: border-color .2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow .2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform .2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.industry-card:hover,
.catalogue-card:hover,
.product-card:hover,
.upsell-card:hover {
  border-color: rgba(10, 29, 52, .2);
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-2px);
}

/* Shared directory card used by product taxonomies and service/expertise
   listings. Product result cards retain their compact markup but follow the
   same surface, spacing and CTA rhythm below. */
.catalogue-card {
  overflow: hidden;
}

.catalogue-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--color-darkblue);
  text-decoration: none;
}

.catalogue-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #fff;
}

.catalogue-card__media img {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  transition: transform .2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.catalogue-card--contain .catalogue-card__media {
  aspect-ratio: 16 / 9;
  padding: 1.5rem;
}

.catalogue-card--contain .catalogue-card__media img {
  object-fit: contain;
}

.catalogue-card:hover .catalogue-card__media img {
  transform: scale(1.04);
}

.catalogue-card--contain:hover .catalogue-card__media img {
  transform: none;
}

.catalogue-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.25rem;
}

.catalogue-card__body h3 {
  margin: 0;
  color: var(--color-darkblue);
  font-size: 1.25rem;
  text-align: left;
}

.catalogue-card__body p {
  margin: .75rem 0 1rem;
  font-size: .9375rem;
  line-height: 1.55;
}

.catalogue-card__cta {
  margin-top: auto;
  padding: 0;
  color: var(--color-darkblue);
  background: none;
  border-color: var(--color-darkblue);
  border: 0;
  align-self: flex-end;
}

.catalogue-card__cta svg {
  margin: 0 0 0 .5rem;
}

.product-card {
  min-height: 100%;
  margin: 0;
  padding: 1.25rem;
  gap: 1rem;
}

.product-card-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  /* Square, per the brand-archive mark-up. The Customizer already forced 1/1 on
     the product category results, so this brings the brand, type and slider
     cards onto the same ratio instead of leaving one page different. */
  aspect-ratio: 1 / 1;
  padding: 1rem;
}

.product-card-image img {
  width: 100%;
  height: 100%;
  max-height: 200px;
  margin: 0;
  object-fit: contain;
}

.product-card-title h3 {
  margin: 0;
  color: var(--color-darkblue);
  font-size: 1.25rem;
  text-align: left;
}

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

/* ======================================================================
   HOMEPAGE
   ====================================================================== */

/* Home hero ------------------------------------------------------------- */
.home-hero {
  position: relative;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  /* Gradient only. --hero-bg must not go in this shorthand: it is unset in the
     diagonal-images mode, which makes the whole declaration invalid at
     computed-value time and drops the gradient with it. The banner image is
     layered on by .has-hero-banner from 768px up instead. */
  background: linear-gradient(90deg, var(--color-darkblue), #152642);
  color: #fff;
}

.home-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}

.home-hero__copy {
  padding: 1rem 0 2.5rem;
}

.home-hero__copy h1 {
  margin: 0 0 1.25rem;
  color: #fff;
}

.home-hero__copy p {
  margin: 0 0 1.75rem;
  max-width: 560px;
  color: rgba(255, 255, 255, .85);
}

.home-hero__media {
  display: flex;
  gap: 4px;
  align-self: stretch;
  min-height: 240px;
}

.home-hero__media-item {
  flex: 1 1 0%;
  overflow: hidden;
}

.home-hero__media-item img {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
}

@media (min-width: 768px) {

  /* the mobile crop has no place in the desktop layout */
  .home-hero__media--mobile {
    display: none;
  }

  .home-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 50%);
    gap: 0;
  }

  .home-hero__copy {
    padding: 3.5rem 0;
  }

  .home-hero__media {
    min-height: 480px;
    /* slanted left edge to echo the diagonal split in the design */
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
    margin-left: 2rem;
  }
}

/* Single client banner mode (home_single_image) ------------------------- */
.home-hero--image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.home-hero--image:before {
  content: "";
  position: absolute;
  inset: 0;
  /* keep the overlaid copy legible over the left of the banner */
  background: linear-gradient(90deg, rgba(10, 29, 52, .88) 0%, rgba(10, 29, 52, .45) 45%, rgba(10, 29, 52, 0) 75%);
}

.home-hero--image .container {
  position: relative;
  z-index: 1;
}

.home-hero--image .home-hero__inner {
  grid-template-columns: 1fr;
  min-height: 320px;
  align-items: center;
}

.home-hero--image .home-hero__copy {
  max-width: 620px;
}

@media (min-width: 768px) {
  .home-hero--image .home-hero__inner {
    min-height: 460px;
  }
}

/* 4-icon USP banner ----------------------------------------------------- */
.usp-banner {
  padding: 0;
  background: var(--color-darkblue);
  color: #fff;
}

.usp-banner__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1rem;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.usp-banner__item {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.usp-banner__icon {
  flex: 0 0 auto;
  font-size: 26px;
  color: rgba(255, 255, 255, .85);
}

@media (min-width: 992px) {
  .usp-banner__inner {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

/* Featured products card variant (contained logos on white) ------------- */
.industries--products {
  background-color: var(--color-offwhite);
}

.industries--products .industry-card__image {
  aspect-ratio: 1 / 1;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.industries--products .industry-card__image img {
  position: static;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  padding: 0;
}

.industries--products .industry-card:hover .industry-card__image img {
  transform: none;
}

.industries--products .industry-card__title h3 {
  font-size: .95rem;
}

/* Service hero ---------------------------------------------------------- */
.service-hero {
  position: relative;
  overflow: hidden;
  background-color: #152642;
  background-size: cover;
  background-position: center;
  color: #fff;
}

.service-hero:before {
  content: "";
  position: absolute;
  inset: 0;
  /*background: linear-gradient(90deg, rgba(16, 29, 51, .92), rgba(16, 29, 51, .55));*/
}

.service-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}

.service-hero__copy h1 {
  margin: 0 0 1rem;
  color: #fff;
}

.service-hero__text {
  margin: 0 0 1.25rem;
  color: rgba(255, 255, 255, .85);
  max-width: 540px;
}

.service-hero__text p:last-child {
  margin-bottom: 0;
}

.service-hero__bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem 1.5rem;
}

.service-hero__bullets li {
  font-weight: 500;
}

.service-hero__bullets i {
  color: var(--color-primary);
  margin-right: .5rem;
}

/* .service-hero__media is the mobile stand-in for the background image (which
   only paints from 768px up), so it sits above the copy rather than beside it
   and is dropped entirely on wider screens. Sized to match .hero-banner. */
.service-hero__media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 220px;
  margin: 0;
  object-fit: cover;
}

@media (min-width: 768px) {
  .service-hero__media {
    display: none;
  }

  /* The second column is deliberately empty now that the media is mobile-only:
     it keeps the copy off the right of the background photo. */
  .service-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 42%);
  }
}

section {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
}

/* Archive and directory pages share one spacing and grid contract. Keeping
   the grid on the section modifier avoids changing blog and search results,
   which still use the legacy article layout. */
.catalogue-listing {
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
}

.section-listing__intro {
  max-width: 52rem;
  margin: 0 0 2rem;
}

.section-listing__intro h2 {
  margin: 0 0 .75rem;
}

.section-listing__copy > :last-child,
.section-listing__empty > :last-child {
  margin-bottom: 0;
}

.section-listing__empty {
  max-width: 42rem;
}

.section-listing__empty .btn {
  margin-top: 1rem;
}

.catalogue-listing .listing-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 1.5rem;
  margin: 0;
}

.catalogue-listing .listing-wrapper>* {
  width: auto;
  min-width: 0;
  margin: 0;
}

@media (min-width: 768px) {
  .catalogue-listing .listing-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {

  /* Four across on desktop for every .catalogue-listing grid: services and
     sectors, the two product tabs, the brand and type archives, and the
     product category results. */
  .catalogue-listing .listing-wrapper {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .catalogue-listing .listing-wrapper[data-col="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Every card grid on the phone: two per row, title only -----------------
   At ~150px wide a card cannot carry a 30-word excerpt as well as the image
   and title, so the blurb comes off — the whole card is already the link, so
   nothing becomes unreachable. Applies to every .catalogue-listing: services,
   sectors, both product tabs, the brand/type/category archives and the blog. */
@media (max-width: 767px) {
  .catalogue-listing .listing-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
  }

  /* These grids are already two-up on a phone. Reclaim the unused side
     gutter and the inter-card gap so each card has enough width for its
     product image and a readable two-line title. */
  .catalogue-listing {
    padding-right: .75rem;
    padding-left: .75rem;
  }

  .catalogue-listing .catalogue-card__body,
  .catalogue-listing .article-item .article-item-info {
    padding: .75rem;
  }

  .catalogue-listing .product-card {
    padding: .75rem;
    gap: .5rem;
  }

  .catalogue-listing .product-card-image {
    padding: .5rem;
  }

  .catalogue-listing .catalogue-card__body p,
  .catalogue-listing .article-item .article-item-info p {
    display: none;
  }
}

/* Mobile card sliders ---------------------------------------------------
   Sliders are deliberately full-bleed below the tablet breakpoint: leaving
   their cards inside the shared .container made every carousel feel boxed in
   twice. The headings retain the normal page gutter; only the swipeable
   content reaches the device edge. */
@media (max-width: 767px) {
  .product-slider .container {
    max-width: none;
    padding-right: 0;
    padding-left: 0;
  }

  .product-slider-inner {
    margin-right: 0;
    margin-left: 0;
  }

  .product-slider-inner .slide {
    padding-right: 0;
    padding-bottom: 1rem;
    padding-left: 0;
  }

  .industries__slider,
  .testimonials__slider {
    width: 100vw;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
  }

  .industries .industries__inner {
    gap: .5rem;
  }

  .industries .industries__inner.flickity-enabled .slide {
    padding: 0 .25rem 1rem;
  }

  .article-slider .slide {
    margin-right: 0;
    padding-bottom: 1rem;
    margin-left: 0;
  }

  .team-slider .slide+.slide {
    margin-left: .5rem;
  }

  .product-slider .product-card,
  .industry-card,
  .article-slider .article-item,
  .testimonial,
  .team-slider .team-item-img {
    border-radius: .5rem;
  }

  .product-slider .product-card {
    padding: .75rem;
    gap: .5rem;
  }

  .product-slider .product-card-image {
    padding: .5rem;
  }

  /* Reserve two title lines in every card. This keeps a short product or
     sector title from shrinking its card, while longer editorial titles are
     clipped rather than pushing the CTA onto a third line. */
  .product-slider .product-card-title h3,
  .industries .industry-card__title h3 {
    display: -webkit-box;
    min-height: 2.5em;
    overflow: hidden;
    font-size: .85rem;
    font-weight: 200;
    line-height: 1.25;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .product-slider-inner .slide,
  .industries .industries__inner.flickity-enabled .slide {
    display: flex;
  }

  .product-slider .product-card,
  .industries .industry-card {
    width: 100%;
    height: 100%;
  }

  .article-slider .article-item {
    padding: 0;
  }

  .article-slider .article-item .article-item-info,
  .testimonials .testimonial {
    padding: 1rem;
  }

  .team-slider .team-item-img {
    overflow: hidden;
  }

  .testimonials .testimonial {
    margin-bottom: .5rem;
  }
}

/* Blog cards on the shared card surface --------------------------------
   .article-item predates .catalogue-card and carried its own look: no
   surface, a fixed 215px image and a detached margin-top on the body. These
   bring it onto the same surface, image ratio and spacing as every other card
   grid, overriding _article-card.scss (whose main.css is not rebuilt on
   deploy). */
.article-item {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: #fff;
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  transition: border-color .2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow .2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform .2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.article-item:hover {
  border-color: rgba(10, 29, 52, .2);
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-2px);
}

.article-item .article-item-image {
  height: auto;
  aspect-ratio: 4 / 3;
}

.article-item .article-item-info {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  /* replaces the mt-4 that floated the body away from the image */
  margin-top: 0;
  padding: 1.25rem;
}

.article-item .article-item-info h3 {
  margin: 0;
  color: var(--color-darkblue);
  font-size: 1.25rem;
}

.article-item .article-item-info>a {
  color: inherit;
  text-decoration: none;
}

/* Grid card titles on the phone ----------------------------------------
   1.25rem is tuned for a desktop column; at phone widths it wraps a short
   title onto three lines. */
@media (max-width: 767px) {

  .catalogue-card__body h3,
  .product-card-title h3,
  .article-item .article-item-info h3 {
    font-size: .875rem;
    line-height: 1.25;
    text-align: left;
  }

  /* Keep the compact two-column mobile grids even when product names are
     lengthy. The full title remains available in the product detail page. */
  .catalogue-card__body h3,
  .product-card-title h3 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
}

/* Accordion body ---------------------------------------------------------
   Lists sat hard against the left edge: .info-accordion__content has 1rem of
   padding, but the ul itself is reset to padding-left:0 globally, so markers
   and text started at the same x as the paragraphs above them. */
.info-accordion__content ul,
.info-accordion__content ol,
.faq__answer ul,
.faq__answer ol {
  margin: .5rem 0;
  padding-left: 1.5rem;
}

.info-accordion__content li,
.faq__answer li {
  margin: 0 0 .35rem;
}

/* Favourites toggle on the single product gallery ------------------------
   .wishlist-toggle--card is absolutely positioned, so the gallery has to be
   the containing block — the same job .product-card does on a card. */
.product-single__gallery {
  position: relative;
}

/* Decorative brand graphic, wide desktop only ----------------------------
   It was carrying Tailwind's `hidden lg:block`, so it appeared from lg —
   992px — where it is too cramped to read as a background flourish. Kept as a
   modifier rather than changing .brand-graphic itself, which is shared with
   the contact page and two homepage sections. */
.brand-graphic--wide-only {
  display: none;
}

@media (min-width: 1220px) {
  .brand-graphic--wide-only {
    display: block;
  }
}

/* Why ... Matters cards ------------------------------------------------- */
.why-cards {
  background-color: var(--color-offwhite);
}

.why-cards .section-title {
  margin-bottom: 2rem;
}

.why-cards__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.why-card {
  padding: 1.5rem;
  text-align: center;
}

.why-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: var(--color-primary);
  font-size: 34px;
}

.why-card__icon>svg {
  width: 50px !important;
  height: 50px;
}

.why-card h3 {
  margin: 0 0 .5rem;
  color: #152642;
  font-size: 17px;
}

.why-card p {
  margin: 0;
  font-size: .875rem;
  color: var(--color-grey);
}

@media (min-width: 576px) {
  .why-cards__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .why-cards__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Info & FAQ accordions ------------------------------------------------- */
.info-accordion,
.faq {
  background: #fff;
  margin-bottom: .75rem;
  border: 1px solid rgba(14, 15, 19, .1);
  border-radius: .25rem;
  overflow: hidden;
  box-shadow: inset 0 0 .25rem rgba(0, 0, 0, 0.2);
}

.info-accordion__summary,
.faq__summary {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 1rem;
  font-weight: 700;
  color: #152642;
  list-style: none;
  gap: .5rem;
}

.info-accordion__summary::-webkit-details-marker,
.faq__summary::-webkit-details-marker {
  display: none;
}

.info-accordion__summary svg,
.faq__summary svg {
  order: 0;
}

.info-accordion__summary i,
.faq__summary i,
.info-accordion__summary svg,
.faq__summary svg {
  transition: transform .2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.info-accordion[open] .info-accordion__summary i,
.faq[open] .faq__summary i {
  transform: rotate(180deg);
}

.info-accordion__content,
.faq__answer {
  padding: 0 1rem 1rem;
  font-size: .875rem;
  color: var(--color-grey);
}

.info-accordion__content p:first-child,
.faq__answer p:first-child {
  margin-top: 0;
}

/* Industries / Sectors / Services card grid ----------------------------- */
.industries {
  position: relative;
}

.industries .section-title {
  display: flex;
  align-items: center;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.industries .section-title .link-arrow {
  margin-left: auto;
}

.industries__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.industries__inner .slide {
  width: auto;
  padding: 0;
}

.industries__inner.flickity-enabled {
  display: block;
}

.industries__inner.flickity-enabled .slide {
  width: 50%;
  padding: 0 1rem 2rem 1rem;
}

.industries .flickity-button {
  display: none;
}

.industries .flickity-enabled .flickity-button {
  display: block;
  background-color: #fff !important;
  border: 1px solid#000;
}

button.flickity-button.previous {
  left: 0 !important;
}

.industries .flickity-enabled .flickity-button svg {
  fill: #000;
}

.industry-card {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
}

.industry-card__image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.industry-card__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  transition: transform .2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.industry-card:hover .industry-card__image img {
  transform: scale(1.05);
}

.industry-card__title {
  display: flex;
  align-items: center;
  padding: 1rem;
}

.industry-card__title h3 {
  margin: 0;
  font-size: 1rem;
  color: #152642;
}

.industry-card__title svg {
  margin-left: auto;
  color: #152642;
  transition: transform .2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.industry-card:hover .industry-card__title i {
  color: var(--color-primary);
  transform: translateX(4px);
}

@media (min-width: 576px) {
  .industries__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .industries__inner.flickity-enabled .slide {
    width: 50%;
  }
}

@media (min-width: 768px) {
  .industries__inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .industries__inner.flickity-enabled .slide {
    width: calc(100% / 3);
  }
}

@media (min-width: 992px) {
  .industries__inner {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .industries__inner.flickity-enabled .slide {
    width: 25%;
  }
}

/* "Need Help Choosing or Installing?" -----------------------------------
   The band is full-bleed, so the colour sits on the section: a background on
   .container stopped at the centred max-width. Section padding is cut back
   from the global py-16 — 8rem of solid colour around a single line of copy
   was why it read as a block rather than a strip. */
.products section.header_cta {
  background: var(--color-darkblue);
  padding-top: 0rem;
  padding-bottom: 0rem;
}

/* Heading, copy and number on one centred row. It still wraps on a phone,
   where a single row would not fit. */
.products section.header_cta .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .25rem 1.5rem;
  text-align: center;
  background: var(--color-darkblue);
  box-shadow: unset;
  border-top: 1px solid white;
  padding-left: 0;
  padding-right: 0;
}

.products section.header_cta .container h2,
.products section.header_cta .container p {
  margin: 0;
  color: #fff;
}

/* The phone number sits on the navy band. It was brand red, which is close to
   unreadable on that background; white also carries the pill border, which the
   Customizer draws in currentColor. */
.products section.header_cta .container a {
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  border-width: 2px;
  border-radius: 0rem;
}

/* Related products view-all -------------------------------------------- */
.related-products .section-title {
  display: flex;
  align-items: center;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.related-products .section-title .link-arrow {
  margin-left: auto;
}

/* Tech brands strip ----------------------------------------------------- */
.tech-brands__title {
  text-align: left;
  text-transform: uppercase;
  color: #152642;
  font-size: 1.25rem;
  margin: 0 auto .5rem !important;
  max-width: 1200px;
  padding: 0;
  font-weight: 700;
}

.tech-brands .container,
.bms-footer__accreditations .container {
  max-width: none !important;
}

.tech-brands__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 24px 40px;
}

@media (min-width:768px) {
  .tech-brands__logos {
    justify-content: center;
  }
}

.tech-brands__logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tech-brands__logo img {
  margin: 0;
  object-fit: contain;
  max-height: 44px;
  max-width: 150px;
  transition: all .2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Why Organisations Choose BMS Group ------------------------------------ */
.why-bms {
  position: relative;
  overflow: hidden;
  background: var(--color-darkblue);
  color: #fff;
}

.why-bms__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.why-bms__intro h2 {
  margin: 0 0 1.25rem;
  color: #fff;
}

.why-bms__usps {
  list-style: none;
  margin: 0;
  padding: 0;
}

article.why-bms__column:first-of-type,
article.why-bms__column:nth-of-type(2) {
  padding-right: 1rem;
  border-right: 1px solid #fff;
}

.why-bms__usps li,
.cta-banner__ticks li,
.service-hero__bullets li {
  position: relative;
  margin: 0;
  padding-left: 1.5rem;
  font-weight: 500;
  font-size: 22px;
  color: white;
  list-style: none;
}

.cta-banner__ticks li,
.service-hero__bullets li {
  padding: 0;
}

.cta-banner__ticks li svg,
.service-hero__bullets li svg {
  margin-right: .5rem;
  color: var(--brand);
}

@media (max-width: 767px) {
  .service-hero__bullets li {
    font-size: 16px;
  }
}

.why-bms__usps li::marker {
  display: none;
}

.why-bms__usps li:before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: #fff;
}

.why-bms__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}

.why-bms__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .75rem;
  color: var(--color-primary);
  font-size: 28px;
}

.why-bms__column_heading {
  display: flex;
  gap: 10px;
}

.why-bms__column h3 {
  /* no bottom margin of its own — the gap belongs to .why-bms__column_heading,
     so the icon and heading stay on a shared baseline inside the flex row */
  margin: 0;
  text-transform: uppercase;
  color: var(--color-primary);
  font-size: 14px;
  letter-spacing: .04em;
}

.why-bms__column p {
  margin: 0;
  font-size: .875rem;
  color: rgba(255, 255, 255, .82);
}

@media (min-width: 576px) {
  .why-bms__columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .why-bms__inner {
    grid-template-columns: minmax(0, 30%) 1fr;
    gap: 3.5rem;
    /* top, not centre: the USP list is shorter than the three columns beside
       it, so centring floated it half-way down the block */
    align-items: start;
  }
}

/* CTA banner ------------------------------------------------------------ */
.cta-banner {
  position: relative;
  overflow: hidden;
  border-radius: .25rem;
  background: #152642;
  color: #fff;
  background-image: url(/app/uploads/2026/08/4.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 70% 50%;
}

.cta-banner__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
}

.cta-banner__copy {
  position: relative;
  z-index: 1;
  padding: 2rem 0;
}

.cta-banner__copy h2 {
  margin: 0 0 .75rem;
  font-size: 2.5rem;
  color: #fff;
}

.cta-banner__copy p {
  margin: 0 0 1.25rem;
  color: rgba(255, 255, 255, .85);
}

.cta-banner__ticks {
  list-style: none;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  padding: 0;
  margin: 0 0 1.5rem;
  gap: 10px 24px;
}

.cta-banner__ticks li {
  font-weight: 700;
}

.cta-banner__ticks i {
  color: var(--color-primary);
  margin-right: .5rem;
}

.cta-banner__media {
  display: none;
  position: relative;
  height: 100%;
  display: flex;
}

.cta-banner__media img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  object-position: right;
  max-height: 360px;
}

@media (min-width: 768px) {
  .cta-banner__inner {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 38%);
    align-items: center;
  }

  .cta-banner__copy {
    padding: 3rem 0;
  }

  .cta-banner__media {
    display: block;
    align-self: flex-end;
  }
}

/* Testimonials ---------------------------------------------------------- */
.testimonials {
  background-color: var(--color-offwhite);
}

.testimonials .section-title {
  margin-bottom: 2rem;
}

.testimonials__inner {
  margin: 0 auto;
}

.testimonial {
  position: relative;
  padding: 2rem;
  margin: 0 0 1rem;
}

.testimonial__mark {
  display: block;
  line-height: 1;
  margin-bottom: .5rem;
  color: var(--color-darkblue);
  font-size: 56px;
  font-weight: 700;
}

.testimonial blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 1rem;
  font-style: italic;
  color: #152642;
  text-align: left;
}

.testimonial figcaption {
  margin-top: 1rem;
  font-weight: 700;
  font-style: normal;
  color: var(--color-darkblue);
}

/* FAQs ------------------------------------------------------------------ */
.faqs__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.faqs__media {
  height: 100%;
  display: flex;
}

.faqs__media img {
  width: 100%;
  margin: 0;
  border-radius: .25rem;
  object-fit: cover;
  object-position: right;
}

.faqs__list h2 {
  margin: 0 0 1.25rem;
}

@media (min-width: 768px) {
  .faqs__inner {
    grid-template-columns: minmax(0, 40%) 1fr;
    gap: 3rem;
    align-items: start;
  }
}

/* Upsells (single product) --------------------------------------------- */
.upsells .section-title {
  margin-bottom: 1.5rem;
}

.upsells__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
}

.upsell-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  text-align: center;
  text-decoration: none;
}

.upsell-card__image {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .75rem;
  height: 150px;
}

.upsell-card__image img {
  max-width: 100%;
  max-height: 100%;
  margin: 0;
}

.upsell-card__title {
  flex: 1 1 0%;
}

.upsell-card__title h3 {
  margin: 0;
  font-size: 1rem;
  color: #152642;
  text-align: left;
}

.upsell-card__arrow {
  margin-top: .75rem;
  color: var(--text);
  text-align: right;
}

.upsell-card__arrow i {
  transition: transform .2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.upsell-card:hover .upsell-card__arrow i {
  transform: translateX(4px);
}

@media (min-width: 768px) {
  .upsells__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ======================================================================
   SITE HEADER (2026 two-tier)
   Solid header in normal flow — replaces the legacy absolute overlay nav.
   ====================================================================== */

/* The legacy absolute-nav spacer is not needed for a static header. */
.main-nav-replace {
  display: none !important;
}

.site-header {
  position: relative;
  /* containing block for the mega-dropdowns */
  z-index: 50;
  background: #fff;
  box-shadow: 0 2px 8px rgba(14, 15, 19, .08);
}

/* Top bar -------------------------------------------------------------- */
.site-header__top {
  background: var(--color-darkblue);
  color: #fff;
  font-size: 14px;
}

.site-header__top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .5rem 0rem;
}

.site-header__account a {
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
}

.site-header__account a+a {
  margin-left: 1.25rem;
}

.site-header__account a:hover {
  color: #fff;
}

.site-header__top-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.site-header__cart {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: #fff;
  text-decoration: none;
}

.site-header__cart:hover {
  color: var(--color-primary);
}

/* Top bar content is white on every page ---------------------------------
   The Customizer still carries `header #top-header a { color: white }`, but
   #top-header was the pre-2026 top bar and that id no longer exists in the
   markup — see the 2026-06-28 header entry in DECISIONS.md. So the rule that
   used to paint this bar matches nothing, and the links render red.

   The component rules above already declare #fff and still lose on the live
   site. The winning rule is not in wp-custom-css, main.css or
   mega-products.css, so rather than guess at specificity this states the
   colour outright. If the culprit is found, drop the !important and delete
   the dead Customizer rule at the same time.

   Deliberately lists the account/cart/wishlist parts rather than every
   descendant: the search submit icon also lives in this bar, and it sits on a
   white field where white would make it invisible. */
.site-header .site-header__top,
.site-header .site-header__top .site-header__account a,
.site-header .site-header__top .site-header__cart,
.site-header .site-header__top .site-header__cart i,
.site-header .site-header__top .site-header__wishlist,
.site-header .site-header__top .site-header__wishlist i,
.site-header .site-header__top .site-header__wishlist-count {
  color: #fff !important;
}

/* Hover needs restating for the same reason — the !important above would
   otherwise beat the component hover rules and leave no feedback at all. A
   consistent fade replaces the old red, which had poor contrast on navy and
   only applied to the cart and wishlist, not the account links. */
.site-header .site-header__top .site-header__account a:hover,
.site-header .site-header__top .site-header__cart:hover,
.site-header .site-header__top .site-header__cart:hover i,
.site-header .site-header__top .site-header__wishlist:hover,
.site-header .site-header__top .site-header__wishlist:hover i {
  color: rgba(255, 255, 255, .72) !important;
}

/* Always-visible search field from the approved header design. */
.site-header__search {
  position: relative;
  width: 236px;
  height: 28px;
  margin: 0;
}

.site-header__search-field {
  display: block;
  width: 100%;
  height: auto !important;
  margin: 0;
  padding: 3px 12px 3px 31px;
  color: var(--color-darkblue);
  font: inherit;
  line-height: 1;
  background: #fff !important;
  border: 1px solid #c8cbd0 !important;
  border-radius: 999px !important;
  outline: none;
  appearance: none;
}

.site-header__search-field:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(208, 33, 49, .16);
}

.site-header__search-field::-webkit-search-cancel-button {
  appearance: none;
}

.site-header__search-submit {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 9px;
  width: 16px;
  height: 16px;
  padding: 0;
  color: var(--color-darkblue);
  font-size: 11px;
  line-height: 16px;
  text-align: center;
  background: transparent;
  border: 0;
  transform: translateY(-50%);
  cursor: pointer;
}

.site-header__search-submit:hover,
.site-header__search-submit:focus {
  color: var(--color-primary);
  outline: none;
}

/* Main row ------------------------------------------------------------- */
.site-header__main-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: .75rem 0rem;
}

.site-header__logo {
  flex: 0 0 auto;
  display: block;
}

.site-header__logo svg {
  width: 100px;
  height: auto;
  display: block;
  margin: 0;
}

.site-header__actions {
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
}

header.site-header a {
  font-size: initial !Important;
}

header a.site-header__phone:not(.btn) {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--color-primary) !important;
  font-weight: 700 !important;
  font-size: 1.05rem;
  white-space: nowrap;
  text-decoration: none;
}

.site-header__phone:hover {
  color: var(--color-darkblue);
}

/* Menu inside the solid header ----------------------------------------- */
.site-header .main-nav-links {
  width: auto;
  flex: 1 1 auto;
}

header.site-header .main-nav-links>li>a {
  font-weight: 600;
}

.site-header .nav-icon span {
  background: var(--color-darkblue);
}

/* Mega-dropdowns re-anchored flush under the (taller, two-tier) header. */
.site-header .mega-dropdown {
  top: 100%;
  background: #fff;
  border-top: 1px solid rgba(10, 29, 52, .12);
  box-shadow: 0 18px 45px rgba(10, 29, 52, .12);
  color: var(--color-darkblue);
}

@media (min-width: 1200px) {

  /* The panel itself is the 80%-wide box, inset 10% from the left, rather than
     a full-bleed panel with a narrower column of content inside it. Widths are
     viewport-relative: .site-header is position:relative and is the containing
     block for these dropdowns. */
  .site-header .mega-dropdown {
    left: 10%;
    right: auto;
    width: 80%;
    /* matches the bottom border, which the Customizer sets as `1px solid` with
       no colour — i.e. currentColor, which .mega-dropdown sets to darkblue */
    border-left: 1px solid currentColor;
    border-right: 1px solid currentColor;
  }

  /* Inner wrappers now take their sides from the panel. .container carried its
     own 80% width, a 96rem cap and auto margins, which would have inset the
     content a second time inside the already-inset panel. */
  .site-header .mega-dropdown>.container {
    width: 100%;
    max-width: none !important;
    margin-right: 0;
    margin-left: 0;
  }

  .site-header .mega-standard-dropdown>.container,
  .site-header .mega-standard-dropdown .mega-menu-right {
    padding: 0 !important;
  }
}

@media (min-width: 768px) {

  /* dark menu links on the white bar (overrides the white/grey overlay-nav colours) */
  .site-header .main-nav-links>li>a {
    color: var(--color-darkblue) !important;
    font-weight: 600;
  }

  .site-header .main-nav-links>li.active>a,
  .site-header .main-nav-links>li>a:hover {
    color: var(--color-primary) !important;
    border-bottom: 0;
    text-decoration: none;
  }
}

/* 2026 dropdowns use light panels, so override the legacy dark mega-menu
   text colours that are inherited from main.css and [data-theme="dark"]. */
.site-header .mega-dropdown h3,
.site-header .mega-dropdown h4,
.site-header .mega-dropdown h5,
.site-header .mega-dropdown p,
.site-header .mega-dropdown li,
.site-header .mega-dropdown span,
.site-header .mega-dropdown .mega-products-panel-title,
.site-header .mega-dropdown .mega-products-empty {
  color: var(--color-darkblue) !important;
}

.site-header .mega-dropdown a:not(.btn),
.site-header .mega-dropdown .mega-dropdown-links>a,
.site-header .mega-dropdown .mega-products-panel-title a,
.site-header .mega-dropdown .mega-products-child-link {
  color: var(--color-darkblue) !important;
}

.site-header .mega-dropdown a:not(.btn):hover,
.site-header .mega-dropdown .mega-dropdown-links>a:hover,
.site-header .mega-dropdown .mega-products-panel-title a:hover,
.site-header .mega-dropdown .mega-products-child-link:hover {
  color: var(--color-primary) !important;
}

.site-header .mega-dropdown .mega-products-tabs {
  border-right-color: rgba(10, 29, 52, .12);
}

.site-header .mega-dropdown .mega-products-tab,
.site-header .mega-dropdown .mega-products-back {
  color: var(--color-darkblue) !important;
}

.site-header .mega-dropdown .mega-products-tab:hover,
.site-header .mega-dropdown .mega-products-tab.is-active,
.site-header .mega-dropdown .mega-products-back:hover {
  color: #fff !important;
  opacity: 1;
}

.site-header .mega-dropdown .mega-products-tab.is-active {
  background: var(--color-primary);
  color: #fff !important;
  padding-left: 15px;
}

.site-header .mega-standard-dropdown__panel {
  width: 100%;
}

/* Keep every desktop mega menu on the same three-part rhythm: introduction,
   navigation and a dedicated image preview at the far right. */
.site-header .mega-menu-right {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  align-items: stretch;
}

.site-header .mega-menu-right .mega-products-dropdown-content {
  min-width: 0;
}

.site-header .mega-menu-preview {
  min-height: 17rem;
  overflow: hidden;
  background: var(--color-offwhite);
  border-radius: .25rem;
}

.site-header .mega-menu-preview img {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
}

/* The panel is as wide as the 1200px .container, so the legacy `columns: 2`
   (from _mega-dropdowns.scss) split ten short links into two ~590px columns
   sitting at opposite edges of the menu with a void between them. Sizing by
   column *width* instead lets the browser fit as many ~15rem columns as the
   list allows, and the max-width keeps them adjacent rather than spanning the
   full panel. */
.site-header .mega-standard-dropdown .mega-products-list {
  columns: 15rem;
  column-gap: 2.5rem;
  max-width: 56rem;
}

/* _typography.scss re-enables markers globally for `ul li`, and because the
   panel sits inside the nav's own <ul> the nested `ul ul li` rule wins over
   the list-none on .mega-products-list — so every link rendered a circle
   bullet, clipped off the left edge of the first column (list markers sit
   outside the padding-less box). Same fix as .product-key-features. */
.site-header .mega-products-list,
.site-header .mega-products-list li,
.site-header .mega-products-child-list,
.site-header .mega-products-child-list li {
  list-style: none;
}

.site-header .mega-products-list li {
  margin: 0;
}

/* Mega-menu amends (client mark-up, 2026-09-10) ------------------------- */

/* "Reduce the distance between the lines. Match to the text on the left."
   The two columns were on different rhythms: the rail sat on 4px top / 0
   bottom and the links on 0 top / 6px bottom, both from the Customizer's
   wp-custom-css, plus whatever li margin was in play. Both sides are pinned to
   one explicit 8px rhythm here — not in _mega-dropdowns.scss, whose compiled
   main.css is not rebuilt on deploy, and not in the Customizer, which is not
   in this repo. See DECISIONS.md on wp-custom-css. */
.site-header .mega-dropdown .mega-products-child-link,
.site-header .mega-standard-dropdown .mega-products-list>li>a {
  padding: 8px 0;
  line-height: 1.3;
}

/* The rail keeps the 10px horizontal inset it gets from the Customizer's
   wp-custom-css (.mega-products-tab { padding: 4px 10px 0 }) — only the
   vertical rhythm is normalised, or the labels would sit flush to the edge. */
.site-header .mega-dropdown .mega-products-tab {
  padding: 8px 10px;
  line-height: 1.3;
}

/* ...and the active tab is pulled back to the same inset. It was 15px against
   the Customizer's 10px, so the label shifted sideways as you moved down the
   rail; the approved design has them aligned. */
.site-header .mega-dropdown .mega-products-tab.is-active {
  padding-left: 10px;
}

.site-header .mega-dropdown .mega-products-child-list,
.site-header .mega-dropdown .mega-products-child-list li {
  margin: 0;
}

/* The panel heading sat 16px clear of the first link, which read as a break in
   the list rather than a heading attached to it. */
.site-header .mega-dropdown .mega-products-panel-title {
  margin-bottom: .5rem;
}

/* Dropdown items carried an fa-angle-down pseudo-element (_header.scss, inside
   its `@screen md` block). It is absent from the approved design, and rendered
   as a fallback glyph rather than a chevron because the icon font never
   resolves for :after. The ≤1199px drawer already suppressed it — the same
   declarations further down this file — so this just lifts that to all widths;
   the drawer keeps its own .dropdown-toggle button as the affordance. */
.site-header .main-nav-links>li.has-children>a:after {
  content: none !important;
}

.site-header .main-nav-links>li.has-children>a svg[data-fa-pseudo-element] {
  display: none !important;
}

/* Top-level nav in capitals. Scoped to the desktop bar — below 1200px the same
   markup is the slide-in drawer, which the design does not change. */
@media (min-width: 1200px) {
  header.site-header .main-nav-links>li>a {
    text-transform: uppercase;
  }
}

.site-header .mega-dropdown .mega-dropdown-links>a {
  background: rgba(10, 29, 52, .06);
}

.site-header .mega-dropdown .mega-dropdown-links>a:hover {
  background: rgba(208, 33, 49, .08);
  transform: translateY(-3px);
}

@media (max-width: 767px) {
  .site-header__search {
    width: clamp(140px, 38vw, 236px);
  }

  .site-header__phone span {
    display: none;
  }

  /* phone icon only on mobile */
  .site-header__account {
    font-size: 13px;
  }
}

/* ======================================================================
   SINGLE PRODUCT (2026)
   ====================================================================== */

h1.product-summary__title {
  font-size: 1.75rem;
}

/* WooCommerce outputs the actual gallery inside the theme's gallery column.
   Neutralise its default floated half-width so it fills that column. */
.product-single__gallery > .woocommerce-product-gallery {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
}

/* The gallery is half the page width, so on a wide screen a square product
   photo rendered ~900px tall and pushed the accordions below the fold. Capped
   the way the cards are, with contain so nothing is cropped. The cap is high
   enough that a portrait photo (a pump cabinet) still reads at a glance. */
/* Keep the moving FlexSlider slides free of padding and borders. FlexSlider
   subtracts those values from its calculated slide width, which causes every
   subsequent image to stop short of the viewport. */
.product-single__gallery .woocommerce-product-gallery__image {
  box-sizing: border-box;
  overflow: hidden;
  background: #fff;
}

.product-single__gallery .woocommerce-product-gallery__image > a {
  display: block;
  padding: 1rem;
}

/* A one-image gallery is not initialised as a slider, so its frame can remain
   on the image element itself. */
.product-single__gallery:not(.product-single__gallery--has-thumbnails) .woocommerce-product-gallery__image {
  border: 1px solid rgba(10, 29, 52, .28);
  border-radius: 20px;
}

/* For multi-image galleries the stationary viewport carries the frame. The
   pseudo-element does not participate in FlexSlider's width calculations. */
.product-single__gallery--has-thumbnails .flex-viewport {
  background: #fff;
  border-radius: 20px;
}

.product-single__gallery--has-thumbnails .flex-viewport::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  border: 1px solid rgba(10, 29, 52, .28);
  border-radius: inherit;
}

.product-single__gallery .woocommerce-product-gallery__image img {
  max-height: 480px;
  object-fit: contain;
  object-position: center;
}

.product-single__gallery img {
  margin: 0;
}

/* WooCommerce's flexslider injects the thumbnail navigation client-side when
   a product has more than one image. */
.product-single__gallery .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem;
  margin: .75rem 0 0;
  padding: 0;
  list-style: none;
}

.product-single__gallery .flex-control-thumbs li {
  float: none !important;
  width: 100% !important;
  margin: 0;
  list-style: none;
}

.product-single__gallery .flex-control-thumbs img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 0;
  padding: .25rem;
  background: #fff;
  border: var(--card-border);
  border-radius: .375rem;
  object-fit: contain;
  opacity: 1;
  cursor: pointer;
  transition: border-color .2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.product-single__gallery .flex-control-thumbs img:hover,
.product-single__gallery .flex-control-thumbs img.flex-active {
  border-color: var(--color-primary);
}

/* Keep every thumbnail in one swipeable row beneath the image on phones. */
@media (max-width: 767px) {
  .product-single__gallery .flex-control-thumbs {
    display: flex;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .product-single__gallery .flex-control-thumbs li {
    flex: 0 0 72px;
    width: 72px !important;
    scroll-snap-align: start;
  }
}

/* Keep the thumbnail navigation beside the main image on larger screens.
   The rail scrolls independently when a product has many gallery images. */
@media (min-width: 768px) {
  .product-single__gallery--has-thumbnails > .woocommerce-product-gallery {
    position: relative;
    width: calc(100% - 5.75rem) !important;
    margin-left: 5.75rem !important;
  }

  .product-single__gallery .flex-control-thumbs {
    position: absolute;
    top: 0;
    left: -5.75rem;
    width: 4.75rem;
    grid-template-columns: minmax(0, 1fr);
    max-height: 480px;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }
}

.product-summary__title {
  color: var(--color-darkblue);
}

.product-summary__intro {
  margin: 0 0 1.25rem;
  color: var(--color-grey);
}

.product-summary__intro p:last-child {
  margin-bottom: 0;
}

/* Key features — red-chevron list ------------------------------------- */
.product-key-features {
  margin: 1.25rem 0;
}

.product-key-features ul {
  list-style: none;
  margin: 0 0 0 1rem;
  padding: 0;
}

.product-key-features li {
  position: relative;
  list-style: none;
  /* room for the chevron marker at left: 0. The old value (.25rem) was set
     against a glyph that never rendered, so the overlap was invisible. */
  padding-left: 1.25rem;
  margin: 0rem;
}

/* main.css can reinstate a native marker on list items. The chevron below is
   the only marker used for key features. */
.product-key-features li::marker {
  content: '';
}

/* Red chevron markers, drawn with borders rather than an icon glyph.
   Font Awesome is loaded here as the SVG/JS kit (kit.fontawesome.com), which
   ships no webfont, so `font-family: "Font Awesome 5 Pro"` on a pseudo-element
   never resolves — which is why the original glyph version had to be switched
   off further down this file. A rotated corner has no font dependency. */
.product-key-features li:before {
  content: "";
  position: absolute;
  left: 0;
  top: .3em;
  width: .6em;
  height: .6em;
  border-right: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  transform: rotate(45deg);
}

/* defensive: if a "Key Features:" heading paragraph is pasted in */
.product-key-features>p:first-child {
  margin: 0 0 .5rem;
  font-weight: 700;
  color: var(--color-darkblue);
}

.product-summary__buy {
  margin: 1.25rem 0;
}

.product-summary__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.5rem;
}

.product-summary__code {
  margin-top: 1rem;
  font-size: .85rem;
  color: var(--color-grey);
}

.product-summary__code span {
  font-weight: 700;
  color: var(--color-darkblue);
}

/* Description / Datasheet / Installation accordions -------------------- */
.product-accordion .info-accordion__summary {
  font-size: 1.05rem;
}


.product-accordion .info-accordion__summary span {
  font-size: 1.25rem;
  font-weight: 500;
}

/* move the chevron to the left of the label (design) */
.product-accordion .info-accordion__summary i {
  margin-left: 0;
  margin-right: .75rem;
  order: -1;
}

.product-accordion .info-accordion__summary svg {
  width: 1.25rem;
  height: 1.25rem;
}

.product-accordion .info-accordion__content sup {
  font-size: .65em;
}

/* Technical datasheet downloads --------------------------------------------
   Overrides the legacy _downloads.scss block (offwhite tile, solid red hover
   fill) for the 2026 product accordion only — the same .downloads markup is
   rendered by partials/global/downloads.blade.php on pages, expertise and the
   taxonomy archives, and those keep the older styling until they are rolled
   over. Scoped with .product-accordion so it out-specifies the compiled
   .downloads-item rules in sage/main.css at every breakpoint.

   The icon is a masked inline SVG rather than a Font Awesome <i> so it needs
   neither the build step nor FA Pro being present, and it recolours with the
   card on hover. */
.product-accordion .downloads {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: .75rem;
  margin: 0;
  padding: 0;
}

.product-accordion .downloads-item {
  display: flex;
  align-items: center;
  gap: .875rem;
  width: auto;
  margin: 0;
  padding: 1rem 1.25rem;
  background: #fff;
  border: var(--card-border);
  border-radius: .5rem;
  color: var(--color-darkblue);
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  transition: all .2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.product-accordion .downloads-item::before {
  content: "";
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  background-color: var(--color-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='M7.5 10.5 12 15l4.5-4.5'/%3E%3Cpath d='M3.75 16.5v2.25A2.25 2.25 0 0 0 6 21h12a2.25 2.25 0 0 0 2.25-2.25V16.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='M7.5 10.5 12 15l4.5-4.5'/%3E%3Cpath d='M3.75 16.5v2.25A2.25 2.25 0 0 0 6 21h12a2.25 2.25 0 0 0 2.25-2.25V16.5'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* File type ("pdf", "docx" …) from $download['file']['subtype'] — pushed to
   the trailing edge as a meta pill rather than trailing the title inline. */
.product-accordion .downloads-item>span {
  flex: 0 0 auto;
  margin-left: auto;
  padding: .15rem .5rem;
  background: rgba(10, 29, 52, .07);
  border-radius: .25rem;
  color: var(--color-darkblue);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .75;
  transition: all .2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.product-accordion .downloads-item:hover,
.product-accordion .downloads-item:focus-visible {
  background: #fff;
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: var(--card-shadow);
  transform: translateY(-2px);
}

.product-accordion .downloads-item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Nudge the arrow down on hover to reinforce what the tile does. */
.product-accordion .downloads-item:hover::before,
.product-accordion .downloads-item:focus-visible::before {
  transform: translateY(2px);
}

.product-accordion .downloads-item:hover>span,
.product-accordion .downloads-item:focus-visible>span {
  background: var(--brand-soft);
  color: var(--color-primary);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {

  .product-accordion .downloads-item,
  .product-accordion .downloads-item::before,
  .product-accordion .downloads-item>span {
    transition: none;
  }

  .product-accordion .downloads-item:hover,
  .product-accordion .downloads-item:focus-visible,
  .product-accordion .downloads-item:hover::before,
  .product-accordion .downloads-item:focus-visible::before {
    transform: none;
  }
}

@media (max-width: 767px) {
  .woocommerce div.product div.images.woocommerce-product-gallery {
    margin-bottom: 0;
  }
}

header {
  border-bottom: none !important;
}

/* ======================================================================
   BREADCRUMBS (flat <a>/<span> markup used by the 2026 product templates —
   no <ul><li>, so the legacy _breadcrumbs.scss separators/colours never
   applied). Scoped to direct children only so the older helper-generated
   breadcrumbs() output (wrapped in <ul><li>) is untouched.
   ====================================================================== */
.breadcrumbs,
.breadcrumbs a,
.breadcrumbs span,
.breadcrumbs li,
.breadcrumbs strong {
  font-size: 18px;
}

#app .breadcrumbs>a:not(.btn) {
  color: var(--color-altblue) !important;
}

/* Only the icon kit's injected pseudo-element svg is suppressed now — the
   :before above is the marker and has to stay visible. */
.product-key-features li svg {
  display: none;
}

.woocommerce-product-gallery__trigger {
  display: none;
}

.breadcrumbs>a {
  color: var(--color-grey) !important;
  text-decoration: none !important;
  margin-right: 0;
  padding-right: 1.1rem;
  position: relative;
}

.breadcrumbs>a:hover {
  color: var(--color-primary) !important;
}

.breadcrumbs>a::after {
  content: "/";
  position: absolute;
  right: .35rem;
  color: var(--color-grey);
}

.breadcrumbs>span {
  color: var(--color-darkblue);
  font-weight: 500;
}

@media (max-width: 767px) {
  .breadcrumbs {
    display: none;
  }
}

/* ======================================================================
   BUTTONS — one square CTA system: red primary and dark-blue secondary.
   ====================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 44px;
  box-sizing: border-box;
  padding: .625rem 1.25rem;
  color: #fff;
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .04em;
  background: var(--color-primary);
  border: 2px solid var(--color-primary);
  border-radius: 0;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.btn:hover,
.btn:focus {
  color: #fff;
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  text-decoration: none;
}

.btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.btn.filled,
.btn.cta {
  color: #fff;
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.btn.filled:hover,
.btn.filled:focus,
.btn.cta:hover,
.btn.cta:focus {
  color: #fff;
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

.btn.outline,
.btn.btn-outline {
  padding: .625rem 1.25rem;
  color: #fff;
  background: var(--color-darkblue);
  border-color: var(--color-darkblue);
}

.btn.outline:hover,
.btn.outline:focus,
.btn.btn-outline:hover,
.btn.btn-outline:focus {
  color: #fff;
  background: var(--color-altblue);
  border-color: var(--color-altblue);
}

[data-theme="dark"] .btn.outline,
[data-theme="dark"] .btn.btn-outline {
  color: #fff;
  background: var(--color-darkblue);
  border-color: #fff;
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
}

.btn svg {
  flex: 0 0 auto;
  margin: 0;
}

/* Product action buttons are equal-width siblings rather than auto-sized to
   their text. */
.product-summary__actions,
.product-info-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.product-summary__actions .btn,
.product-info-actions .btn {
  flex: 1 1 0%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 8px 10px !important;
}

.product-summary__actions .btn.outline,
.product-info-actions .btn.outline {
  background: var(--color-darkblue);
  border-color: var(--color-darkblue);
  color: white;
  text-decoration: none;
}

@media (max-width: 767px) {

  .product-summary__actions .btn,
  .product-info-actions .btn {
    flex: 1 1 100%;
  }
}

.product-accordion .info-accordion__summary i {
  color: var(--color-primary);
  font-size: 1.1rem;
  line-height: 1;
  flex: 0 0 auto;
}

.product-accordion .info-accordion__content {
  padding: 0 1.5rem 1.5rem;
  font-size: 1rem;
}

/* Sub-headings pasted into the WYSIWYG description (often <h1>/<h2> from
   the editor) — sized down to read as section titles, not page titles. */
.product-accordion .info-accordion__content h1,
.product-accordion .info-accordion__content h2,
.product-accordion .info-accordion__content h3 {
  font-size: 1.15rem;
  color: #152642;
  font-weight: 700;
  margin: 1.5rem 0 .75rem;
}

.product-accordion .info-accordion__content h1:first-child,
.product-accordion .info-accordion__content h2:first-child,
.product-accordion .info-accordion__content h3:first-child {
  margin-top: 0;
}

.product-accordion .info-accordion__content p {
  margin: 0 0 1rem;
}

/* Strip the default disc bullets (re-enabled globally by _typography.scss
   for any ul li) and use a small brand-red dot marker instead. */
.product-accordion .info-accordion__content ul,
.product-accordion .info-accordion__content ol {
  margin: 0 0 1rem;
  padding: 0 0 0 1rem;
}

.product-accordion .info-accordion__content li {
  position: relative;
  padding-left: 0;
  margin: 0 0 .15rem;
}

.info-accordion__content h4 {
  font-size: 26px;
  margin: 1rem 0 .5rem;
}

.wpcf7-form br {
  display: none;
}

/* ======================================================================
   PRODUCT / SERVICE ENQUIRIES
   Dedicated quote destinations used by product and service CTAs.
   ====================================================================== */
.quote-enquiry {
  background: var(--color-offwhite);
}

.quote-enquiry__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.quote-enquiry__summary,
.quote-enquiry__form {
  padding: clamp(1.25rem, 3vw, 2rem);
  background: #fff;
  border: var(--card-border);
  border-radius: .5rem;
  box-shadow: 0 10px 30px rgba(10, 29, 52, .07);
}

.quote-enquiry__summary h2,
.quote-enquiry__form h2 {
  margin-top: 0;
  color: var(--color-darkblue);
}

.quote-enquiry__summary .eyebrow {
  margin-top: 1.25rem;
  color: var(--color-primary);
}

.quote-enquiry__image {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 13rem;
  padding: 1rem;
  background: var(--color-offwhite);
  text-decoration: none;
}

.quote-enquiry__image img {
  width: 100%;
  height: 13rem;
  margin: 0;
  object-fit: contain;
}

.quote-enquiry__code {
  color: var(--color-grey);
}

.quote-enquiry__call {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(10, 29, 52, .12);
}

.quote-enquiry__call span {
  display: block;
  margin-bottom: .35rem;
  color: var(--color-grey);
  font-size: .875rem;
}

.quote-enquiry__call a {
  color: var(--color-primary);
  font-size: 1.125rem;
  font-weight: 700;
  text-decoration: none;
}

.quote-enquiry__form>p {
  color: var(--color-grey);
}

.quote-form__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  margin: 1.5rem 0;
}

.quote-form__field,
.quote-form__field .wpcf7-form-control-wrap {
  display: block;
  min-width: 0;
}

.quote-form__field label {
  display: block;
  margin-bottom: .4rem;
  color: var(--color-darkblue);
  font-size: .9rem;
  font-weight: 700;
}

.quote-form__help {
  display: block;
  margin: -.15rem 0 .45rem;
  color: var(--color-grey);
  font-size: .8rem;
  font-style: italic;
  line-height: 1.45;
}

.quote-form input:not([type="checkbox"]):not([type="submit"]):not([type="file"]),
.quote-form textarea,
.quote-form select {
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  padding: .65rem .75rem;
  background: #fff;
  border: 1px solid rgba(10, 29, 52, .25);
}

.quote-form textarea {
  min-height: 150px;
  resize: vertical;
}

.quote-form input[type="file"] {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  padding: .75rem;
  color: var(--color-grey);
  background: var(--color-offwhite);
  border: 1px dashed rgba(10, 29, 52, .3);
}

.quote-form input:focus,
.quote-form textarea:focus,
.quote-form select:focus {
  border-color: var(--color-darkblue);
  outline: 2px solid rgba(10, 29, 52, .15);
  outline-offset: 1px;
}

.quote-form .wpcf7-submit {
  margin-top: .25rem;
}

@media (min-width: 992px) {
  .quote-enquiry__layout {
    grid-template-columns: minmax(17rem, 1fr) minmax(0, 2fr);
    gap: 2rem;
  }

  .quote-form__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quote-form__field--full {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  form .input-group-field {
    margin: 0;
  }
}

/* ======================================================================
   SHIPPING INFO BOX (product page) — sits in the summary column, below
   the buy/enquire actions and above the accordions section.
   ====================================================================== */
.shipping-info {
  margin-top: 1.5rem;
  padding: 1.25rem;
  background: var(--color-offwhite);
  border-radius: .25rem;
}

.shipping-info__title {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin: 0 0 .75rem;
  color: #152642;
  font-weight: 700;
  font-size: 1rem;
}

.shipping-info__title i {
  color: var(--color-primary);
}

.shipping-info__row {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  margin: 0 0 .75rem;
  font-size: .875rem;
  color: var(--color-grey);
}

.shipping-info__row:last-of-type {
  margin-bottom: 1rem;
}

.shipping-info__row i {
  flex: 0 0 auto;
  margin-top: .2em;
  color: var(--color-grey);
}

.shipping-info__row strong {
  color: #152642;
}

.shipping-info__link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--color-primary);
  font-weight: 700;
  font-size: .875rem;
  text-decoration: none;
}

.shipping-info__link:hover {
  text-decoration: underline;
}

/* ======================================================================
   QUANTITY DROPDOWN (product page) — the number input is swapped for a
   <select> by JS in content-single-product.blade.php; this styles it to
   look like a proper dropdown instead of a bare browser <select>.
   ====================================================================== */
/* WooCommerce's own .quantity wrapper ships a small fixed width meant for
   the old number input — override it so the select isn't clipped. */
.quantity {
  width: auto !important;
  overflow: visible !important;
}

.qty-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: auto;
  min-width: 4.5rem;
  height: auto;
  box-sizing: border-box;
  border: 1px solid rgba(14, 15, 19, .15);
  border-radius: .25rem;
  padding: .5rem 2rem .5rem .75rem;
  font-size: .95rem;
  font-weight: 700;
  color: #152642;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23606576'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .6rem center;
  background-size: 16px;
  cursor: pointer;
}

.qty-select:focus,
.qty-select:focus-visible,
.qty-select:invalid,
.qty-select:required {
  outline: none;
  box-shadow: none;
  border-color: rgba(14, 15, 19, .15);
}

.woocommerce a.button:focus,
.woocommerce button.button:focus,
.woocommerce input.button:focus,
.woocommerce input[type="text"]:focus,
.woocommerce input[type="email"]:focus,
.woocommerce input[type="tel"]:focus,
.woocommerce input[type="password"]:focus,
.woocommerce textarea:focus,
.woocommerce select:focus,
.woocommerce input[type="text"]:focus,
.woocommerce input[type="email"]:focus,
.woocommerce input[type="tel"]:focus,
.woocommerce input[type="password"]:focus,
.woocommerce textarea:focus,
.woocommerce select:focus {
  border-color: transparent !important;
  outline: none !important;
}

/* This was `color: white !important` for every link inside .woocommerce /
   .woocommerce-page, unscoped and undocumented. On any light WooCommerce
   surface — My Account, cart, checkout, shop archives — it painted the links
   white on white, so the text was there but invisible. Re-scoped to dark
   sections, which is the only place white links can have been intended, and
   the !important is no longer needed to win there. */
[data-theme="dark"] .woocommerce a:not(.btn),
[data-theme="dark"] .woocommerce-page a:not(.btn) {
  color: #fff;
}


footer.bms-footer {
  background-color: var(--color-darkblue);
  color: #fff;
  padding: 0px 0 18px;
}

.bms-footer__accreditations {
  --credits-gap: clamp(12px, 1.5vw, 24px);
  --credits-speed: 60s;
  margin-bottom: 32px;
  padding: 18px 0 12px;
  background: #fff;
}

/* Accreditation ticker --------------------------------------------------
   The logo strip scrolls itself and takes no input: overflow is hidden, so
   there is nothing to swipe or drag, and the markup carries no [data-carousel]
   so 2026-carousel.js injects no arrows.

   The blade renders the logo set twice inside the track. Each copy carries a
   trailing gap of its own, so the two copies are exactly equal in width and
   translating the track by -50% lands the second copy precisely where the
   first began — the loop has no visible seam. */
.credits-marquee {
  overflow: hidden;
}

.credits-marquee__track {
  display: flex;
  width: max-content;
  animation: credits-marquee var(--credits-speed) linear infinite;
}

@keyframes credits-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* WCAG 2.2.2 (Pause, Stop, Hide) wants a way to stop motion that runs for
   more than five seconds. Hovering or tabbing into the strip halts it. */
.credits-marquee:hover .credits-marquee__track,
.credits-marquee:focus-within .credits-marquee__track {
  animation-play-state: paused;
}

.bms-footer__accreditations .credits-row {
  display: flex;
  /* main.css's `footer .credits-row` sets flex-wrap: wrap and this rule didn't
     override it; wrapped logos would break the ticker's single-line track. */
  flex-wrap: nowrap;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--credits-gap);
  margin: 0;
  /* the trailing gap that keeps the two copies equal in width */
  padding: 0 var(--credits-gap) 0 0;
}

.bms-footer__accreditations .credits-row img {
  display: block;
  flex: 0 0 auto;
  width: auto;
  max-width: 180px;
  height: auto;
  max-height: 48px;
  margin: 0;
  object-fit: contain;
}

/* With the motion gone the duplicate copy has nothing to add, and the single
   remaining set wraps so every logo stays reachable inside the hidden overflow. */
@media (prefers-reduced-motion: reduce) {
  .credits-marquee__track {
    width: 100%;
    animation: none;
  }

  .credits-marquee__track>[aria-hidden="true"] {
    display: none;
  }

  .bms-footer__accreditations .credits-row {
    /* let the single set shrink to the track and wrap, rather than staying
       max-content and being clipped by the hidden overflow */
    flex: 1 1 auto;
    flex-wrap: wrap;
    justify-content: center;
    padding-right: 0;
  }
}

.bms-footer__grid {
  display: grid;
  grid-template-columns: minmax(170px, 1.1fr) repeat(3, minmax(145px, .95fr)) minmax(240px, 1.2fr);
  gap: 42px;
  align-items: start;
}

.bms-footer__brand {
  max-width: 190px;
}

.bms-footer__logo {
  display: inline-flex;
  margin-bottom: 14px;
}

.bms-footer__logo svg {
  display: block;
  width: 170px;
  height: auto;
}

.bms-footer__brand p,
.bms-footer__contact address,
.bms-footer__bottom p {
  margin: 0;
}

.bms-footer__brand p {
  max-width: 150px;
  color: #fff;
  font-size: 15px;
  line-height: 1.16;
}

.bms-footer h2 {
  margin: 0 0 12px;
  color: #fff;
  font-size: 23px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: uppercase;
}

.bms-footer__nav a,
.bms-footer__contact-link,
.bms-footer__social a {
  color: #fff !important;
  text-decoration: none;
}

.bms-footer__nav a {
  display: block;
  margin: 0 0 7px;
  font-size: 16px;
  line-height: 1.2;
}

.bms-footer__nav a:hover,
.bms-footer__contact-link:hover,
.bms-footer__social a:hover {
  color: var(--color-primary) !important;
}

.bms-footer__contact-link {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 1.2;
}

.bms-footer__contact-link i,
.bms-footer__contact-link svg {
  flex: 0 0 18px;
  width: 18px;
  color: #fff;
}

.bms-footer__contact address {
  padding-top: 18px;
  color: #fff;
  font-size: 16px;
  font-style: normal;
  line-height: 1.65;
}

.bms-footer__contact address strong,
.bms-footer__contact address span {
  display: block;
  font-weight: 400;
}

.bms-footer__bottom {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.bms-footer__bottom p {
  color: rgba(255, 255, 255, .8);
  font-size: 12px;
  font-weight: 700;
}

.bms-footer__social {
  display: flex;
  gap: 12px;
  margin-left: auto;
}

.bms-footer__social a {
  font-size: 15px;
}

@media (max-width: 1199px) {
  .bms-footer__grid {
    grid-template-columns: minmax(170px, 1fr) repeat(2, minmax(180px, 1fr));
    gap: 34px;
  }
}

@media (max-width: 767px) {
  footer.bms-footer {
    padding-bottom: 18px;
  }

  footer.bms-footer .container {
    padding: 18px;
  }

  .bms-footer__accreditations {
    --credits-gap: 22px;
    margin-bottom: 30px;
    padding: 14px 0 9px;
  }

  .bms-footer__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .bms-footer__brand,
  .bms-footer__brand p {
    max-width: none;
  }

  .bms-footer h2 {
    font-size: 20px;
  }

  .bms-footer__bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .bms-footer__social {
    margin-left: 0;
  }
}



@media (min-width: 768px) {
  .site-header .main-nav-links .mega-products-tabs {
    padding-right: 0;
  }
}

/* ======================================================================
   MOBILE / TABLET NAVIGATION (0–1199px)

   The burger switches to the desktop nav at 1200px (xl), not 768px (md)
   — header.blade.php's hamburger uses xl:hidden to match.

   The legacy _header.scss hard-codes 768px in the compiled main.css (not
   a variable we can change) and renders a black slide-out with the full
   mega-menu (tabs + <select> + product lists) crammed inside it, which
   reads as two menus at once. Everything below replaces that with one
   plain white drawer, dark-blue text, one accordion level:

       PRODUCTS  ⌄        (tap the row = go to the page)
         Flow Meters      (tap the chevron = show the categories)
         Pumps & Valves
         …

   This file loads after main.css, so these rules win. The drawer's close
   button and backdrop are in partials/header.blade.php.
   ====================================================================== */

/* drawer chrome belongs to the burger nav only — never on the desktop bar */
.mobile-nav-close,
.mobile-nav-backdrop {
  display: none;
}

@media (max-width: 1199px) {

  /* Drawer ------------------------------------------------------------ */
  .site-header .main-nav-links {
    display: block;
    position: fixed;
    z-index: 60;
    top: 0;
    right: 0;
    width: min(100%, 420px) !important;
    height: 100%;
    max-height: 100%;
    margin: 0;
    padding: 4rem 0 2.5rem;
    background: #fff !important;
    box-shadow: -18px 0 45px rgba(10, 29, 52, .18);
    overflow-y: auto;
    overscroll-behavior: contain;
    text-transform: none;
    transform: translateX(100%);
    transition: transform .25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  body.nav-open .site-header .main-nav-links {
    transform: translateX(0);
  }

  /* Backdrop + close button (markup in header.blade.php) --------------- */
  .mobile-nav-backdrop {
    display: block;
    position: fixed;
    z-index: 55;
    inset: 0;
    background: rgba(10, 29, 52, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
  }

  body.nav-open .mobile-nav-backdrop {
    opacity: 1;
    visibility: visible;
  }

  .mobile-nav-close {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    position: fixed;
    z-index: 61;
    top: .625rem;
    right: .625rem;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--color-darkblue);
    font-size: 22px;
    line-height: 1;
    background: transparent;
    border: 0;
    opacity: 0;
    visibility: hidden;
    cursor: pointer;
  }

  .mobile-nav-close svg,
  .mobile-nav-close i {
    color: var(--color-darkblue) !important;
  }

  body.nav-open .mobile-nav-close {
    opacity: 1;
    visibility: visible;
  }

  /* the burger is the open control only — the drawer has its own close */
  body.nav-open .site-header .nav-icon {
    visibility: hidden;
  }

  body.nav-open {
    overflow: hidden;
  }

  /* Top-level rows ---------------------------------------------------- */
  .site-header .main-nav-links>li {
    position: relative;
    list-style: none;
    margin: 0;
    border-bottom: 1px solid rgba(10, 29, 52, .1);
  }

  .site-header .main-nav-links>li>a:not(.btn) {
    display: block;
    padding: 1.05rem 3.5rem 1.05rem 1.5rem;
    color: var(--color-darkblue) !important;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-decoration: none;
  }

  .site-header .main-nav-links>li.active>a:not(.btn),
  .site-header .main-nav-links>li>a:not(.btn):hover {
    color: var(--color-primary) !important;
  }

  /* the desktop rules append a FontAwesome chevron to has-children links;
     inside the drawer that renders as a stray glyph next to the label */
  .site-header .main-nav-links>li.has-children>a:after {
    content: none !important;
  }

  .site-header .main-nav-links>li.has-children>a svg[data-fa-pseudo-element] {
    display: none !important;
  }

  /* Chevron toggle — square, flush with its own row -------------------- */
  .site-header .main-nav-links .dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    right: 0;
    width: 3.5rem;
    height: 3.5rem;
    min-width: 0;
    min-height: 0;
    padding: 0;
    color: var(--color-darkblue);
    font-size: 16px;
    background: transparent;
    border: 0;
    border-radius: 0;
    transition: transform .2s ease;
  }

  /* the legacy drawer painted its chevrons white — invisible on white */
  .site-header .main-nav-links .dropdown-toggle svg,
  .site-header .main-nav-links .dropdown-toggle i {
    color: var(--color-darkblue) !important;
    fill: currentColor;
  }

  .site-header .main-nav-links>li.submenu-open .dropdown-toggle {
    transform: rotate(180deg);
  }

  /* Sub-panel — the mega-dropdown flattened into a plain list ---------- */
  .site-header .main-nav-links .dropdown,
  .site-header .main-nav-links .mega-dropdown {
    display: none;
    position: static !important;
    width: auto !important;
    top: auto !important;
    left: auto !important;
    margin: 0;
    padding: .25rem 0 .75rem;
    background: #f3f5f8 !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .site-header .main-nav-links .mega-dropdown:before {
    content: none;
  }

  .site-header .main-nav-links>li.submenu-open>.dropdown,
  .site-header .main-nav-links>li.submenu-open>.mega-dropdown {
    display: block;
  }

  /* neutralise the desktop grid the panel is built on */
  .site-header .main-nav-links .mega-dropdown .container {
    max-width: none !important;
    padding: 0 !important;
  }

  .site-header .main-nav-links .mega-dropdown .flex,
  .site-header .main-nav-links .mega-menu-right,
  .site-header .main-nav-links .mega-products-dropdown-content {
    display: block !important;
    min-height: 0 !important;
  }

  .site-header .main-nav-links .mega-dropdown [class*="md:pl-10"],
  .site-header .main-nav-links .mega-products-panels {
    width: 100% !important;
    padding: 0 !important;
  }

  /* strip the desktop furniture: intro column, background image,
     category tabs and the duplicate <select> */
  .site-header .main-nav-links .mega-dropdown-bg,
  .site-header .main-nav-links .mega-dropdown [class*="lg:w-1/4"],
  .site-header .main-nav-links .mega-products-tabs,
  .site-header .main-nav-links .mega-products-mobile-select-wrap,
  .site-header .main-nav-links .mega-menu-preview,
  .site-header .main-nav-links .mega-products-empty,
  .site-header .main-nav-links .mega-dropdown:not(.mega-standard-dropdown) .mega-products-list {
    display: none !important;
  }

  /* every category panel is shown at once, title only — one tap, one link */
  .site-header .main-nav-links .mega-products-panel {
    display: block !important;
    margin: 0;
  }

  .site-header .main-nav-links .mega-products-panel-title {
    margin: 0 !important;
    font-size: 15px;
    font-weight: 600;
    text-transform: none;
  }

  .site-header .main-nav-links .mega-products-panel-title a,
  .site-header .main-nav-links .mega-standard-dropdown .mega-products-list a {
    display: block;
    padding: .7rem 1.5rem .7rem 2.25rem;
    color: var(--color-darkblue) !important;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    opacity: 1;
  }

  .site-header .main-nav-links .mega-products-panel-title a:hover,
  .site-header .main-nav-links .mega-standard-dropdown .mega-products-list a:hover {
    color: var(--color-primary) !important;
    background: rgba(10, 29, 52, .04);
  }

  /* Retain any deeper WordPress-menu branch in the drawer. A second-level
     panel link is followed by its children, then a further inset for every
     additional level that exists. */
  .site-header .main-nav-links .mega-products-child-list {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
  }

  .site-header .main-nav-links .mega-products-child-list li {
    margin: 0;
  }

  .site-header .main-nav-links .mega-products-child-list .mega-products-child-link {
    display: block;
    padding: .6rem 1.5rem .6rem 3.25rem;
    color: var(--color-darkblue) !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    opacity: 1;
  }

  .site-header .main-nav-links .mega-products-child-list .mega-products-child-link:hover {
    color: var(--color-primary) !important;
    background: rgba(10, 29, 52, .04);
  }

  .site-header .main-nav-links .mega-products-child-list--nested .mega-products-child-link {
    padding-left: 4rem;
    font-weight: 400;
  }

  .site-header .main-nav-links .mega-products-child-list--nested .mega-products-child-list--nested .mega-products-child-link {
    padding-left: 4.75rem;
  }

  /* the standard dropdown repeats the parent label as its panel title */
  .site-header .main-nav-links .mega-standard-dropdown .mega-products-panel-title {
    display: none !important;
  }

  .site-header .main-nav-links .mega-standard-dropdown .mega-products-list {
    columns: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .site-header .main-nav-links .mega-standard-dropdown .mega-products-list li {
    margin: 0;
  }

  /* a hover-capable device at tablet width must not pop the desktop
     mega-dropdown open on top of the drawer */
  .site-header .main-nav-links>li.has-children:hover>.dropdown {
    display: none;
  }

  .site-header .main-nav-links>li.has-children.submenu-open:hover>.dropdown {
    display: block;
  }
}

/* Favourites sits next to the cart on the ≥768px top bar ---------------- */
.site-header__wishlist {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

.site-header__wishlist:hover {
  color: var(--color-primary);
}

/* the phone header is a separate block — see partials/header.blade.php */
.site-header__mobile {
  display: none;
  padding: 0 !important;
}

/* ======================================================================
   PHONE HEADER (≤767px)

   Per the approved design: one navy bar carrying the logo and the
   Account · Items · Favourites · Call Us · Menu buttons, then a
   full-width search band beneath it. The two-tier header is hidden — but
   only its visible rows, because .main-nav-links (the drawer) lives
   inside .site-header__main-inner and must stay in the DOM.

   Every rule that HIDES part of the old header is gated on
   .site-header--mobile-bar, which only the new markup carries. Without
   that gate a page-cache serving pre-deploy HTML against the current
   stylesheet hides the top bar, the logo AND the burger while the
   replacement bar isn't in the DOM — i.e. no header at all on phones.
   ====================================================================== */
@media (max-width: 767px) {

  .site-header--mobile-bar .site-header__top {
    display: none;
  }

  .site-header--mobile-bar .site-header__main-inner {
    gap: 0;
    padding: 0;
  }

  .site-header--mobile-bar .site-header__main-inner>.site-header__logo,
  .site-header--mobile-bar .site-header__main-inner>.site-header__actions {
    display: none;
  }

  .site-header__mobile {
    display: block;
  }

  /* Navy bar ---------------------------------------------------------- */
  .site-header__mobile-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .875rem 1rem;
    background: var(--color-darkblue);
  }

  .site-header__mobile-logo {
    flex: 0 0 auto;
    display: block;
    line-height: 0;
  }

  .site-header__mobile-logo svg {
    display: block;
    width: clamp(70px, 24vw, 104px);
    height: auto;
    margin: 0;
  }

  .site-header__mobile-actions {
    display: flex;
    align-items: flex-start;
    gap: clamp(2px, 2.5vw, 12px);
    min-width: 0;
  }

  .site-header__mobile-action {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: .35rem;
    padding: 0;
    color: #fff !important;
    background: transparent;
    border: 0;
    text-decoration: none;
    cursor: pointer;
  }

  .site-header__mobile-action:hover,
  .site-header__mobile-action:focus {
    color: #fff !important;
    outline: none;
  }

  .site-header__mobile-action i,
  .site-header__mobile-action svg {
    display: block;
    height: 22px;
    color: #fff !important;
    font-size: 20px;
    line-height: 22px;
  }

  .site-header__mobile-label {
    display: block;
    color: #fff;
    font-size: clamp(9.5px, 2.9vw, 11px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
  }

  /* Burger — drawn here so it isn't styled by the legacy .nav-icon rules */
  .site-header__burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 24px;
    height: 22px;
  }

  .site-header__burger span {
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
    border-radius: 2px;
  }

  /* Search band ------------------------------------------------------- */
  .site-header__mobile-search {
    padding: .875rem 1rem;
    background: #fff;
  }

  .site-header__search--mobile {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    margin: 0;
  }

  .site-header__search--mobile .site-header__search-field {
    width: 100%;
    padding: .8rem 3rem .8rem 1.25rem;
    color: var(--color-darkblue);
    font-size: 15px;
    line-height: 1.2;
    border: 1px solid var(--color-darkblue) !important;
  }

  .site-header__search--mobile .site-header__search-field::placeholder {
    color: rgba(10, 29, 52, .62) !important;
    opacity: 1;
  }

  .site-header__search--mobile .site-header__search-field::-webkit-input-placeholder {
    color: rgba(10, 29, 52, .62) !important;
    opacity: 1;
  }

  .site-header__search--mobile .site-header__search-submit {
    left: auto;
    right: 1.125rem;
    width: 20px;
    height: 20px;
    font-size: 17px;
    line-height: 20px;
  }

  /* Hero — the banner photo sits behind the copy, so darken it --------- */
  .home-hero--image:before {
    background: linear-gradient(180deg, rgba(10, 29, 52, .88) 0%, rgba(10, 29, 52, .78) 55%, rgba(10, 29, 52, .92) 100%);
  }

  /* CTA banner — engineer above the copy, not behind it ---------------- */
  .cta-banner {
    background-image: none;
  }

  .cta-banner__inner {
    display: flex;
    flex-direction: column;
  }

  /* when an ACF image is set it renders as .cta-banner__media … */
  .cta-banner__media {
    order: -1;
    margin-top: 1.5rem;
  }

  .cta-banner__media img {
    max-height: 240px;
    object-fit: contain;
    object-position: center top;
  }

  /* … and when it isn't, the photo is the section background image, so
     surface that above the copy instead of leaving it behind the text */
  .cta-banner__inner:not(:has(.cta-banner__media)):before {
    content: "";
    order: -1;
    display: block;
    width: 100%;
    height: 220px;
    margin-top: 1.5rem;
    background: url(/app/uploads/2026/08/4.png) no-repeat left top;
    background-size: contain;
  }

  .cta-banner__copy {
    padding: 1.5rem 0 2rem;
  }

  .cta-banner__copy h2 {
    font-size: 1.875rem;
  }
}

/* USP banner — even 2×2 grid with the labels on a shared left edge ----- */
@media (max-width: 991px) {
  .usp-banner__inner {
    gap: 1.25rem;
    padding: 1rem;
  }

  .usp-banner__item {
    align-items: flex-start;
    gap: .625rem;
    font-size: 12px;
    line-height: 1.35;
    letter-spacing: 1px;
  }

  .usp-banner__text {
    text-align: left;
    font-size: 11px;
  }

  .usp-banner__icon {
    width: 26px;
    font-size: 22px;
    line-height: 1.35;
    text-align: center;
  }
}

/* Why BMS — the column rules become stray vertical lines once stacked -- */
.why-bms__column_heading {
  /* top, not centre: when the heading wraps to two lines a centred icon drifts
     down the row and stops lining up with the first line of text */
  align-items: flex-start;
  /* carries the spacing that .why-bms__icon and h3 used to hold individually */
  margin-bottom: .5rem;
}

.why-bms__column_heading .why-bms__icon {
  margin-bottom: 0;
}

@media (max-width: 575px) {

  article.why-bms__column:first-of-type,
  article.why-bms__column:nth-of-type(2) {
    padding-right: 0;
    border-right: 0;
  }

  .why-bms__usps li {
    font-size: 18px;
  }
}

/* ======================================================================
   FAVOURITES (WISHLIST)
   Theme-native — see app/wishlist.php. Counts are painted from a cookie by
   resources/2026-wishlist.js, so nothing here may depend on a server value.
   ====================================================================== */

/* Header count — hidden until there's something in the list, so a cached
   "0" never flashes next to the label. */
.site-header__wishlist-count {
  display: none;
  margin-left: .25rem;
  font-variant-numeric: tabular-nums;
}

[data-wishlist-has-items="true"] .site-header__wishlist-count {
  display: inline;
  font-size: inherit;
}

.site-header__wishlist-count:before {
  content: "(";
}

.site-header__wishlist-count:after {
  content: ")";
}

/* Toggle button --------------------------------------------------------- */
.wishlist-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 0;
  color: rgba(10, 29, 52, .35);
  font-size: 18px;
  line-height: 1;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color .18s ease, transform .18s ease;
}

.wishlist-toggle:hover,
.wishlist-toggle:focus-visible {
  color: var(--color-primary);
  outline: none;
}

.wishlist-toggle.is-active {
  color: var(--color-primary);
}

.wishlist-toggle.has-error {
  color: var(--color-primary);
  animation: wishlist-shake .3s ease;
}

@keyframes wishlist-shake {

  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-3px);
  }

  75% {
    transform: translateX(3px);
  }
}

.wishlist-toggle[data-busy] {
  opacity: .55;
  pointer-events: none;
}

.wishlist-toggle__label {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Inline variant — sits in a .btn-row next to the CTAs */
.wishlist-toggle--inline {
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid rgba(10, 29, 52, .18);
  border-radius: 2px;
}

.wishlist-toggle--inline:hover,
.wishlist-toggle--inline.is-active {
  border-color: var(--color-primary);
}

/* Card variant — floats over the product image inside the card anchor */
.product-card {
  position: relative;
}

.wishlist-toggle--card {
  position: absolute;
  z-index: 2;
  top: .75rem;
  right: .75rem;
  width: 38px;
  height: 38px;
  color: rgba(10, 29, 52, .3);
  background: rgba(255, 255, 255, .92);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(10, 29, 52, .12);
}

.wishlist-toggle--card:hover {
  transform: scale(1.06);
}

/* Favourites page ------------------------------------------------------- */

/* "Add all to basket" bar. Only rendered when at least one saved product is a
   simple, in-stock, buy_now product — see Appwishlist_bulk_addable(). */
.wishlist-list__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1.5rem 0 0;
  padding: 1rem 1.25rem;
  background: var(--brand-soft);
  border: 1px solid rgba(208, 33, 49, .18);
  border-radius: .5rem;
}

.wishlist-list__summary {
  margin: 0;
  color: var(--color-darkblue);
  font-size: .95rem;
}

.wishlist-list__bulk {
  flex: 0 0 auto;
  margin: 0;
}

@media (max-width: 575px) {
  .wishlist-list__bar {
    align-items: stretch;
    flex-direction: column;
  }

  .wishlist-list__bulk .btn {
    width: 100%;
  }
}

/* Favourites table -------------------------------------------------------
   Replaces the old card list. It renders inside the My Account panel, so it
   follows WooCommerce's shop_table markup; shop_table_responsive stacks the
   rows below 768px using the data-title on each cell. */
.wishlist-table {
  width: 100%;
  margin: 2rem 0 0;
  border-collapse: collapse;
  background: #fff;
}

.wishlist-table th,
.wishlist-table td {
  padding: .85rem 1rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid rgba(10, 29, 52, .1);
}

.wishlist-table thead th {
  color: var(--color-darkblue);
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom-width: 2px;
}

.wishlist-table__media {
  width: 88px;
}

.wishlist-table__media a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  overflow: hidden;
  background: var(--color-offwhite);
  border-radius: 3px;
}

.wishlist-table__media img {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: contain;
}

.wishlist-table__placeholder {
  color: rgba(10, 29, 52, .25);
  font-size: 24px;
}

.wishlist-table__product a {
  color: var(--color-darkblue);
  font-weight: 600;
  text-decoration: none;
}

.wishlist-table__product a:hover {
  color: var(--color-primary);
}

.wishlist-table__price {
  color: rgba(10, 29, 52, .7);
  font-size: .9rem;
  white-space: nowrap;
}

.wishlist-table__price-empty {
  color: rgba(10, 29, 52, .35);
}

/* The cell stays a cell. Setting display:flex on a <td> takes it out of the
   table layout altogether and its contents spill across the row, so the flex
   row lives on an inner wrapper instead. width:1% is the usual shrink-to-fit
   trick — the browser gives the column only what it needs and takes the slack
   from Product. */
.wishlist-table td.wishlist-table__actions {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

.wishlist-table__actions-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
  flex-wrap: nowrap;
}

/* Sized down for the table: three controls have to sit on one row, and inside
   the My Account panel the content column is narrower than a full page. */
.wishlist-table__actions-inner .btn {
  white-space: nowrap;
  min-width: 0;
  padding: .5rem .85rem;
  font-size: .8rem;
}

/* My Account states its own link colour at .woocommerce-account
   .my-account-page .woocommerce-MyAccount-content a:not(.btn):not(.button) —
   red, bold and underlined, so it can never inherit its way to invisible.
   That rule outranks the plain .wishlist-table__product a rule above, so the
   product name came out red, bold and underlined. Restated here at matching
   specificity for the one place it should not apply. */
.woocommerce-account .my-account-page .woocommerce-MyAccount-content .wishlist-table__product a,
.woocommerce-account .my-account-page .woocommerce-MyAccount-content .wishlist-table__product a:visited {
  color: #000 !important;
  font-weight: 600;
  text-decoration: none;
}

.woocommerce-account .my-account-page .woocommerce-MyAccount-content .wishlist-table__product a:hover {
  color: #000 !important;
}

/* Stacked rows on the phone. WooCommerce's own responsive table CSS only
   loads on some templates, so the layout is spelled out here rather than
   depending on it. */
@media (max-width: 767px) {
  .wishlist-table thead {
    display: none;
  }

  .wishlist-table,
  .wishlist-table tbody,
  .wishlist-table tr,
  .wishlist-table td {
    display: block;
    width: auto;
  }

  .wishlist-table tr {
    position: relative;
    margin: 0 0 1rem;
    padding: 1rem 1rem 1rem 6.5rem;
    border: 1px solid rgba(10, 29, 52, .1);
    border-radius: 4px;
  }

  .wishlist-table td {
    padding: 0 0 .5rem;
    border-bottom: 0;
  }

  /* the thumbnail is lifted out of the flow so the copy runs beside it */
  .wishlist-table__media {
    position: absolute;
    top: 1rem;
    left: 1rem;
    padding: 0;
  }

  /* stacked rows are full width again, and the buttons may wrap here — a
     phone has nowhere near the width for three controls in a row */
  .wishlist-table td.wishlist-table__actions {
    width: auto;
    white-space: normal;
  }

  .wishlist-table__actions-inner {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .wishlist-table__actions {
    padding-bottom: 0;
  }
}

.wishlist-list__empty {
  padding: 3rem 1.5rem;
  text-align: center;
}

.wishlist-list__empty i {
  color: rgba(10, 29, 52, .18);
  font-size: 42px;
}

.wishlist-list__empty h2 {
  margin: 1rem 0 .5rem;
}

.wishlist-list__empty p {
  margin: 0 0 1.5rem;
  color: rgba(10, 29, 52, .7);
}

@media (min-width: 768px) {
  .wishlist-list__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575px) {
  .wishlist-list__item {
    align-items: flex-start;
    gap: 1rem;
  }

  .wishlist-list__media {
    width: 72px;
    height: 72px;
  }

  .wishlist-list__actions .btn {
    padding-left: .9rem;
    padding-right: .9rem;
  }
}

/* ======================================================================
   MY ACCOUNT (WooCommerce)

   Every rule is scoped with the body class `.woocommerce-account` so it
   outranks the hand-written block in Appearance > Customize > Additional
   CSS, which prints after this stylesheet and would otherwise win on
   source order at equal specificity.

   Link colours are stated explicitly (never inherited, never via a custom
   property that might be undefined) — the reported symptom was invisible
   link text in the sidebar and in the dashboard copy.
   ====================================================================== */

.woocommerce-account .my-account-page {
  padding-top: 2.5rem;
  padding-bottom: 3.5rem;
  background-color: var(--color-offwhite);
}

.woocommerce-account .my-account-page__inner {
  max-width: 1180px;
  margin: 0 auto;
}

/* Card shell ------------------------------------------------------------ */
.woocommerce-account .my-account-page .woocommerce {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(10, 29, 52, .12);
  border-radius: 6px;
  box-shadow: 0 14px 35px rgba(10, 29, 52, .07);
}

/* WooCommerce clears its float layout with ::before/::after on this element.
   In a grid container those pseudo-elements become grid items and take the
   first cells, pushing the nav and content into the wrong columns. */
.woocommerce-account .my-account-page .woocommerce:before,
.woocommerce-account .my-account-page .woocommerce:after {
  content: none;
}

/* Sidebar --------------------------------------------------------------- */
.woocommerce-account .my-account-page .woocommerce-MyAccount-navigation {
  width: auto;
  min-height: 0;
  border-right: 0;
  border-bottom: 1px solid rgba(10, 29, 52, .12);
  background: #fff;
}

.woocommerce-account .my-account-page .woocommerce-MyAccount-navigation:before {
  content: "My Account";
  display: block;
  padding: 1rem 1.5rem;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--color-darkblue);
}

/* woocommerce-smallscreen.css lays this list out in columns on narrow
   viewports, which fragments it inside our own card — keep it a plain
   stacked list at every width. */
.woocommerce-account .my-account-page .woocommerce-MyAccount-navigation ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce-account .my-account-page .woocommerce-MyAccount-navigation li {
  display: block;
  width: auto;
  float: none;
  margin: 0;
  list-style: none;
  border-bottom: 1px solid rgba(10, 29, 52, .08);
}

.woocommerce-account .my-account-page .woocommerce-MyAccount-navigation li:last-child {
  border-bottom: 0;
}

.woocommerce-account .my-account-page .woocommerce-MyAccount-navigation li a {
  display: block;
  position: relative;
  padding: .9rem 1.5rem;
  color: var(--color-darkblue);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.woocommerce-account .my-account-page .woocommerce-MyAccount-navigation li a:hover,
.woocommerce-account .my-account-page .woocommerce-MyAccount-navigation li a:focus {
  color: var(--color-primary);
  background: rgba(10, 29, 52, .04);
  border-left-color: rgba(10, 29, 52, .15);
}

.woocommerce-account .my-account-page .woocommerce-MyAccount-navigation li.is-active a {
  color: var(--color-primary);
  font-weight: 700;
  background: rgba(208, 33, 49, .06);
  border-left-color: var(--color-primary);
}

.woocommerce-account .my-account-page .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
  color: #606576;
  font-weight: 600;
}

.woocommerce-account .my-account-page .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
  color: var(--color-primary);
}

/* Content --------------------------------------------------------------- */
.woocommerce-account .my-account-page .woocommerce-MyAccount-content {
  width: auto;
  min-width: 0;
  float: none;
  margin: 0;
  padding: 1.75rem 1.5rem;
  background: #fff;
  border: 0;
  box-shadow: none;
}

.woocommerce-account .my-account-page .woocommerce-MyAccount-content p,
.woocommerce-account .my-account-page .woocommerce-MyAccount-content li,
.woocommerce-account .my-account-page .woocommerce-MyAccount-content td,
.woocommerce-account .my-account-page .woocommerce-MyAccount-content address {
  color: #3d4655;
  font-size: 1rem;
}

.woocommerce-account .my-account-page .woocommerce-MyAccount-content h1,
.woocommerce-account .my-account-page .woocommerce-MyAccount-content h2,
.woocommerce-account .my-account-page .woocommerce-MyAccount-content h3,
.woocommerce-account .my-account-page .woocommerce-MyAccount-content legend {
  display: block;
  margin: 0 0 1.25rem;
  padding-bottom: .6rem;
  color: var(--color-darkblue);
  font-size: 1.25rem;
  border-bottom: 2px solid var(--color-primary);
}

.woocommerce-account .my-account-page .woocommerce-MyAccount-content h3 {
  font-size: 1.05rem;
}

.woocommerce-account .my-account-page .woocommerce-MyAccount-content h1:not(:first-child),
.woocommerce-account .my-account-page .woocommerce-MyAccount-content h2:not(:first-child),
.woocommerce-account .my-account-page .woocommerce-MyAccount-content h3:not(:first-child) {
  margin-top: 2.25rem;
}

/* Links — stated outright so they can never inherit their way to invisible */
.woocommerce-account .my-account-page .woocommerce-MyAccount-content a:not(.btn):not(.button),
.woocommerce-account .my-account-page .woocommerce-MyAccount-content a:not(.btn):not(.button):visited {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.woocommerce-account .my-account-page .woocommerce-MyAccount-content a:not(.btn):not(.button):hover {
  color: var(--color-primary-dark);
}

/* Tables (orders, downloads) -------------------------------------------- */
.woocommerce-account .my-account-page .woocommerce-MyAccount-content table {
  width: 100%;
  margin: 0 0 1.5rem;
  border-collapse: collapse;
  border: 1px solid rgba(10, 29, 52, .12);
}

.woocommerce-account .my-account-page .woocommerce-MyAccount-content table th {
  padding: .75rem 1rem;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-align: left;
  text-transform: uppercase;
  background: var(--color-darkblue);
  border: 0;
}

.woocommerce-account .my-account-page .woocommerce-MyAccount-content table td {
  padding: .75rem 1rem;
  border-top: 1px solid rgba(10, 29, 52, .1);
}

.woocommerce-account .my-account-page .woocommerce-MyAccount-content table tbody tr:nth-child(even) td {
  background: rgba(10, 29, 52, .025);
}

/* Addresses ------------------------------------------------------------- */
.woocommerce-account .my-account-page .woocommerce-Addresses {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin: 0;
}

.woocommerce-account .my-account-page .woocommerce-Address {
  width: auto;
  float: none;
  padding: 1.25rem;
  border: 1px solid rgba(10, 29, 52, .12);
  border-radius: 4px;
}

.woocommerce-account .my-account-page .woocommerce-Address address {
  font-style: normal;
  line-height: 1.7;
}

/* Forms ----------------------------------------------------------------- */
.woocommerce-account .my-account-page .woocommerce-MyAccount-content label,
.woocommerce-account .my-account-page .woocommerce form label {
  display: block;
  margin-bottom: .35rem;
  color: #5a6373;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.woocommerce-account .my-account-page .woocommerce input[type="text"],
.woocommerce-account .my-account-page .woocommerce input[type="email"],
.woocommerce-account .my-account-page .woocommerce input[type="tel"],
.woocommerce-account .my-account-page .woocommerce input[type="password"],
.woocommerce-account .my-account-page .woocommerce select,
.woocommerce-account .my-account-page .woocommerce textarea {
  width: 100%;
  box-sizing: border-box;
  padding: .65rem .8rem;
  color: var(--color-darkblue);
  font-size: .95rem;
  background: #fff;
  border: 1px solid rgba(10, 29, 52, .2);
  border-radius: 3px;
}

.woocommerce-account .my-account-page .woocommerce input:focus,
.woocommerce-account .my-account-page .woocommerce select:focus,
.woocommerce-account .my-account-page .woocommerce textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(208, 33, 49, .12);
}

.woocommerce-account .my-account-page .woocommerce .form-row {
  margin: 0 0 1.1rem;
  padding: 0;
}

.woocommerce-account .my-account-page .woocommerce button[type="submit"],
.woocommerce-account .my-account-page .woocommerce .woocommerce-Button,
.woocommerce-account .my-account-page .woocommerce a.button,
.woocommerce-account .my-account-page .woocommerce button.button,
.woocommerce-account .my-account-page .woocommerce input.button {
  display: inline-block;
  padding: .75rem 1.6rem;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: 2px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

.woocommerce-account .my-account-page .woocommerce button[type="submit"]:hover,
.woocommerce-account .my-account-page .woocommerce .woocommerce-Button:hover,
.woocommerce-account .my-account-page .woocommerce a.button:hover,
.woocommerce-account .my-account-page .woocommerce button.button:hover,
.woocommerce-account .my-account-page .woocommerce input.button:hover {
  color: #fff;
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

/* Notices --------------------------------------------------------------- */
.woocommerce-account .my-account-page .woocommerce-message,
.woocommerce-account .my-account-page .woocommerce-info,
.woocommerce-account .my-account-page .woocommerce-error {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  color: var(--color-darkblue);
  list-style: none;
  background: var(--color-offwhite);
  border-top: 0;
  border-left: 4px solid var(--color-darkblue);
  border-radius: 3px;
}

.woocommerce-account .my-account-page .woocommerce-error {
  background: rgba(208, 33, 49, .07);
  border-left-color: var(--color-primary);
}

.woocommerce-account .my-account-page .woocommerce-message:before,
.woocommerce-account .my-account-page .woocommerce-info:before,
.woocommerce-account .my-account-page .woocommerce-error:before {
  content: none;
}

/* Login / register (logged-out account page) ----------------------------- */
.woocommerce-account .my-account-page .woocommerce-form-login,
.woocommerce-account .my-account-page .woocommerce-form-register {
  max-width: 480px;
  margin: 0;
  padding: 1.75rem;
  border: 1px solid rgba(10, 29, 52, .12);
  border-radius: 4px;
}

@media (min-width: 768px) {
  .woocommerce-account .my-account-page .woocommerce {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .woocommerce-account .my-account-page .woocommerce-MyAccount-navigation {
    border-right: 1px solid rgba(10, 29, 52, .12);
    border-bottom: 0;
  }

  .woocommerce-account .my-account-page .woocommerce-MyAccount-content {
    padding: 2rem 2.25rem;
  }

  .woocommerce-account .my-account-page .woocommerce-Addresses {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The orders table has too many columns for a phone — stack it */
@media (max-width: 575px) {

  .woocommerce-account .my-account-page .woocommerce-MyAccount-content table thead {
    display: none;
  }

  .woocommerce-account .my-account-page .woocommerce-MyAccount-content table,
  .woocommerce-account .my-account-page .woocommerce-MyAccount-content table tbody,
  .woocommerce-account .my-account-page .woocommerce-MyAccount-content table tr,
  .woocommerce-account .my-account-page .woocommerce-MyAccount-content table td {
    display: block;
    width: auto;
  }

  .woocommerce-account .my-account-page .woocommerce-MyAccount-content table tr {
    margin-bottom: 1rem;
    border: 1px solid rgba(10, 29, 52, .12);
  }

  .woocommerce-account .my-account-page .woocommerce-MyAccount-content table td {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    text-align: right;
  }

  .woocommerce-account .my-account-page .woocommerce-MyAccount-content table td:before {
    content: attr(data-title);
    color: var(--color-darkblue);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-align: left;
    text-transform: uppercase;
  }
}

/* The favourites list shares the narrower account panel with the sidebar.
   Keep its actions inside each row instead of squeezing four table columns. */
.woocommerce-account .my-account-page .wishlist-table__actions-inner {
  flex-wrap: wrap;
}

@media (max-width: 1199px) {
  .woocommerce-account .my-account-page .woocommerce-MyAccount-content .wishlist-table,
  .woocommerce-account .my-account-page .woocommerce-MyAccount-content .wishlist-table tbody {
    display: block;
    width: 100%;
  }

  .woocommerce-account .my-account-page .woocommerce-MyAccount-content .wishlist-table thead {
    display: none;
  }

  .woocommerce-account .my-account-page .woocommerce-MyAccount-content .wishlist-table tr {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: .5rem 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid rgba(10, 29, 52, .12);
    border-radius: 4px;
  }

  .woocommerce-account .my-account-page .woocommerce-MyAccount-content .wishlist-table td {
    display: block;
    width: auto;
    min-width: 0;
    padding: 0;
    text-align: left;
    border: 0;
  }

  .woocommerce-account .my-account-page .woocommerce-MyAccount-content .wishlist-table td::before {
    content: none;
  }

  .woocommerce-account .my-account-page .woocommerce-MyAccount-content .wishlist-table__media {
    position: static;
    grid-column: 1;
    grid-row: 1 / 3;
  }

  .woocommerce-account .my-account-page .woocommerce-MyAccount-content .wishlist-table__product,
  .woocommerce-account .my-account-page .woocommerce-MyAccount-content .wishlist-table__price {
    grid-column: 2;
    overflow-wrap: anywhere;
  }

  .woocommerce-account .my-account-page .woocommerce-MyAccount-content td.wishlist-table__actions {
    grid-column: 1 / -1;
    width: auto;
    white-space: normal;
  }

  .woocommerce-account .my-account-page .wishlist-table__actions-inner {
    justify-content: flex-start;
  }
}

@media (max-width: 575px) {
  .woocommerce-account .my-account-page .wishlist-table__actions-inner .btn {
    flex: 1 1 100%;
  }
}

/* ======================================================================
   PRODUCT SUPPORT BANNERS — SOLUTIONS STRIP
   Base layout lives in the compiled SCSS component; these rules add the
   linked cards, the image placeholder and the >4-card carousel.
   ====================================================================== */

.product-support-banners__solution-slider {
  position: relative;
}

/* Cards are anchors now that they point at the Services pages. */
a.product-support-banners__solution {
  display: block;
  text-decoration: none;
  transition: transform .2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

a.product-support-banners__solution:hover {
  transform: translateY(-2px);
}

a.product-support-banners__solution:hover h4 {
  color: var(--color-primary);
}

.product-support-banners__solution h4 {
  transition: color .2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Carousel — swaps the 2/4-column grid for a scroll-snap track ---------- */
.product-support-banners__solution-slider.is-carousel .product-support-banners__solution-grid {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

.product-support-banners__solution-slider.is-carousel .product-support-banners__solution-grid::-webkit-scrollbar {
  display: none;
}

.product-support-banners__solution-slider.is-carousel .product-support-banners__solution {
  flex: 0 0 calc((100% - 12px) / 2);
  scroll-snap-align: start;
}

/* Arrows are injected by 2026-solution-carousel.js, so they only exist
   when the track actually overflows. */
.product-support-banners__solution-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: #152642;
  background: #fff;
  border: 1px solid #000;
  border-radius: 999px;
  transform: translateY(-50%);
  cursor: pointer;
  transition: opacity .2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.product-support-banners__solution-nav.is-prev {
  left: -8px;
}

.product-support-banners__solution-nav.is-next {
  right: -8px;
}

.product-support-banners__solution-nav[disabled] {
  opacity: .35;
  cursor: default;
}

@media (min-width: 768px) {
  .product-support-banners__solution-slider.is-carousel .product-support-banners__solution {
    flex-basis: calc((100% - 36px) / 4);
  }

  .product-support-banners__solution-slider.has-nav .product-support-banners__solution-nav {
    display: flex;
  }
}