/* THEME-VERSION: 2026-07-30-white-tiles */
/* ============================================================================
   THEME  -  aidevicesonline.com
   Loaded after style.css, so it only has to state what differs.

   style.css is entirely token-driven, which means most of this file is
   re-pointing tokens rather than restyling components: square the radii,
   drop the frosted-glass fills to solid, and swap the type stack. Everything
   built on those tokens - cards, tiles, buttons, dropdowns, the catalog, the
   product page - follows automatically.

   Brand values come from Site Settings, so the palette stays editable in the
   dashboard after this is applied. No brand colour is stated as a literal
   below: every navy, amber and hairline is derived from --primary, --accent,
   --ink, --line, --header-bg or --footer-bg, so changing a colour in the
   dashboard moves the header, hero, footer and tints with it. The amber/navy
   values live only as the seed in database.sql. The static hex block in 1b is
   a fallback for browsers without color-mix(); 1c re-derives it.
   ============================================================================ */

/* ---- 1a. tokens: shape, plus surfaces that map straight onto a setting --- */
:root {
  /* flat, not frosted: no blur, no specular edge */
  --g-blur:        none;
  --g-blur-lg:     none;
  --spec:          none;

  /* square corners */
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   6px;
  --r-xl:   8px;
  --r-pill: 4px;

  --muted:     #6b7784;
  --ease: cubic-bezier(.4,.2,.2,1);

  /* The glass fills flatten to the page colour and the specular edges become
     plain hairlines, so they point at --bg / --bg-soft / --line / --header-bg
     instead of at fixed greys. These are exact swaps at the seeded values, and
     plain var() needs no color-mix() fallback. */
  --g-fill:        var(--bg);
  --g-fill-strong: var(--bg);
  --g-fill-faint:  var(--bg-soft);
  --soft-tint:     var(--bg-soft);
  --g-edge:        var(--line);
  --g-edge-soft:   var(--line);
  --hair:          var(--line);
  --hdr:           var(--header-bg);
  --hdr-soft:      var(--header-bg);

  /* dark sections and footer */
  --deep1: var(--primary);
  --foot1: var(--footer-bg, var(--primary));

  /* muted text on a dark band - stays readable whatever the band colour is */
  --on-deep: rgba(255,255,255,.72);

  /* Height of the sticky contact strip. Declared at root because the strip and
     the masthead are siblings, and custom properties inherit to descendants
     only - a value on .utilitybar would not reach .masthead. Both read it here,
     so the strip's height and the masthead's sticky offset stay locked together:
     change this one number and the pinned header re-stacks correctly. */
  /* The strip's own bar height (52px). Separately, --ub-h below is the total
     footprint the masthead must clear when both are pinned. */
  --ub-bar: 52px;
  /* Total vertical space the sticky contact strip occupies when pinned: its top
     offset (10px) + its height (52px) + its bottom margin (12px). The masthead
     pins just below this so the two never overlap. Declared at root because the
     strip and masthead are siblings and custom properties only inherit downward. */
  --ub-h: 74px;

  /* ONE width for every aligned band. The contact strip, the header card, the
     nav card, the hero banner and the footer all set their width to this and
     centre with margin-inline:auto, so they are all exactly as wide as the menu
     bar and line up on both edges. Change it here to move all of them together.
     This is the same value .wrap uses, so band content lines up with page
     content too. */
  --band-w: min(1240px, 100% - 48px);

  /* The inset every .wrap on the page sits at. Percentages in a custom property
     resolve where the property is *used*, so a full-width band can pad its own
     content by this and land on exactly the same left edge as .wrap. */
  --page-inset: calc((100% - min(1240px, 100% - 48px)) / 2);
}

/* ---- 1b. derived colours: static fallbacks ------------------------------- */
/* Values as seeded, for browsers without color-mix(). 1c re-derives them. */
:root {
  /* navy in place of the old mid-blue tints. The percentages are lower than the
     token names because navy reads much heavier than the original mid-blue at
     the same alpha. */
  --p-lite: #24344a;
  --p10: rgba(27,40,57,.06);
  --p12: rgba(27,40,57,.08);
  --p16: rgba(27,40,57,.10);
  --p18: rgba(27,40,57,.12);
  --p22: rgba(27,40,57,.14);
  --p24: rgba(27,40,57,.16);

  /* amber accent */
  --a-lite:  #ffd47a;
  --a22:     rgba(255,196,70,.22);
  --a40:     rgba(255,196,70,.45);
  --a-hover: #f0b432;   /* pressed / hovered amber                     */
  --a-dark:  #d99b00;   /* amber dark enough to read on white          */
  --a-wash:  #fff6e0;   /* faintest amber tint, for icon plates        */
  --a-mute:  #6b5a22;   /* muted ink on an amber panel                 */

  --deep2: #141d29;
  --foot2: #141d29;
  --foot-txt:     #9aa8b8;   /* footer body copy   */
  --foot-tint:    rgba(255,255,255,.12);  /* faint plate on the footer panel */
  --foot-txt-dim: #6b7784;   /* footer bottom bar  */

  --line-2: #dfe4ea;         /* one step darker than a hairline */

  /* shadows: shallower, so surfaces read as flat panels */
  --sh-1: 0 1px 2px rgba(27,40,57,.05);
  --sh-2: 0 1px 3px rgba(27,40,57,.07);
  --sh-3: 0 2px 8px rgba(27,40,57,.09);
}

/* ---- 1c. derived colours: re-derived from Site Settings ------------------ */
/* var() inside a custom property resolves lazily, so it does not matter that
   header.php prints --primary and friends after this file is linked. */
@supports (color:color-mix(in srgb, red 50%, blue)) {
  :root {
    --p-lite: color-mix(in srgb, var(--primary) 94%, white);
    --p10: color-mix(in srgb, var(--primary)  6%, transparent);
    --p12: color-mix(in srgb, var(--primary)  8%, transparent);
    --p16: color-mix(in srgb, var(--primary) 10%, transparent);
    --p18: color-mix(in srgb, var(--primary) 12%, transparent);
    --p22: color-mix(in srgb, var(--primary) 14%, transparent);
    --p24: color-mix(in srgb, var(--primary) 16%, transparent);

    --a-lite:  color-mix(in srgb, var(--accent) 72%, white);
    --a22:     color-mix(in srgb, var(--accent) 22%, transparent);
    --a40:     color-mix(in srgb, var(--accent) 45%, transparent);
    --a-hover: color-mix(in srgb, var(--accent) 93%, black);
    --a-dark:  color-mix(in srgb, var(--accent) 82%, black);
    --a-wash:  color-mix(in srgb, var(--accent) 16%, white);
    --a-mute:  color-mix(in srgb, var(--accent) 44%, black);

    --deep2: color-mix(in srgb, var(--primary) 72%, black);
    /* gentler step than --deep2: --primary is always a strong colour, but the
       footer panel may be set light, and 28% toward black would turn a
       near-white footer bar into a heavy grey band. */
    --foot2: color-mix(in srgb, var(--footer-bg, var(--primary)) 82%, black);
    --foot-txt:     color-mix(in srgb, var(--footer-ink) 59%, transparent);
    --foot-tint:    color-mix(in srgb, var(--footer-ink) 12%, transparent);
    --foot-txt-dim: color-mix(in srgb, var(--footer-ink) 39%, transparent);

    --line-2: color-mix(in srgb, var(--line) 93%, var(--ink));

    --sh-1: 0 1px 2px color-mix(in srgb, var(--primary) 5%, transparent);
    --sh-2: 0 1px 3px color-mix(in srgb, var(--primary) 7%, transparent);
    --sh-3: 0 2px 8px color-mix(in srgb, var(--primary) 9%, transparent);
  }
}

/* ---- 2. type -------------------------------------------------------------- */
body { font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif; }

h1, h2, h3, h4, h5, h6,
.btn, .mainnav a, .brand__text, .section__head h2 {
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
}
h1, h2, h3 { font-weight: 800; letter-spacing: -.015em; }
h4, h5, h6 { font-weight: 700; }

/* section eyebrow: amber, spaced, no pill */
.eyebrow {
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--a-dark);
  background: none; border: 0; padding: 0;
  border-radius: 0; margin: 0 0 8px;
}

.section__head h2 { font-size: clamp(22px, 3vw, 33px); color: var(--ink); }
.section        { padding: 58px 0; }

/* A soft section is a full-width tinted band, not an inset rounded panel, so
   its content keeps the same left edge as every other section. */
.section--soft { padding: 58px 0; background: var(--soft-tint); }
.section--soft > .wrap {
  width: min(1240px, 100% - 48px); margin-inline: auto;
  padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* ---- 3. buttons ---------------------------------------------------------- */
/* amber block, navy label, squared, uppercase */
.btn {
  font-family: "Montserrat", sans-serif;
  font-weight: 700; font-size: 12.5px;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 13px 26px;
  background: var(--accent);
  color: var(--ink);
  border: 1px solid var(--accent);
  box-shadow: none;
}
.btn:hover { background: var(--a-hover); border-color: var(--a-hover); color: var(--ink); }
.btn::before, .btn::after { display: none !important; }

.btn--ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line);
}
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

.btn--accent { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn--accent:hover { background: var(--deep2); border-color: var(--deep2); }

.btn--sm { padding: 9px 17px; font-size: 11px; }

/* ---- 4. header ----------------------------------------------------------- */
/* Contact strip: amber panel over a navy strip, with the amber cut away on a
   diagonal so the navy shows through on the right. --ub-edge is how far across
   the strip the diagonal sits, --ub-slant is how far it leans; the amber is
   widest along the top edge.
   The panel spans the full strip rather than being sized by its contents, so the
   .wrap inside it measures against the page and not against the panel - that is
   what had the contact details sitting left of everything else. The row is then
   padded to --page-inset and capped 24px short of the diagonal, so the details
   stay on one line on a normal screen and no text lands on the navy.
   The panel is always amber, so its text tracks --ink rather than --header-ink:
   --header-ink flips to white over a dark header and would be lost here. */
.utilitybar {
  /* Same width as the menu bar and centred, so the strip lines up with the
     header/nav/footer. Rounded corners to match the other bands, with a little
     space above and below so it reads as its own bar. It stays pinned on scroll;
     the masthead pins just beneath it (its sticky top is set to clear this bar). */
  width: var(--band-w); max-width: none; margin: 10px auto 12px;
  border-radius: var(--r-xl);
  overflow: hidden;                 /* clip the amber panel to the rounded corners */
  min-height: var(--ub-bar);
  position: sticky; top: 10px; z-index: 60;
  background: var(--deep1);
  background: color-mix(in srgb, var(--deep1) 82%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
          backdrop-filter: saturate(160%) blur(14px);
  --ub-slant: 40px;
  --ub-edge:  86%;
  padding: 0;
  font-size: 13px;
  color: var(--ink);
  border: 0;
}
.utilitybar__in { position: relative; display: block; padding: 0; }
.utilitybar__panel {
  /* translucent amber so the frosted navy base reads through it as one glass
     surface, colours unchanged; solid amber stated first as the no-color-mix
     fallback */
  background: var(--accent);
  background: color-mix(in srgb, var(--accent) 88%, transparent);
  /* widest along the top, sliced back towards the bottom */
  clip-path: polygon(0 0, var(--ub-edge) 0,
                     calc(var(--ub-edge) - var(--ub-slant)) 100%, 0 100%);
  padding-right: 0;
}
.utilitybar__row {
  display: flex; align-items: center; gap: 6px 42px;
  flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px;
  width: auto; margin-inline: 0;
  /* strip is now band-width and inset itself, so the row just needs a small
     left pad from the rounded edge and to stay clear of the diagonal on the right */
  max-width: calc(var(--ub-edge) - var(--ub-slant) - 24px);
  padding-left: 24px; padding-right: 0;
}
.utilitybar .ub {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--topbar-ink, var(--ink)); font-weight: 500; font-size: 13px;
  text-decoration: none; margin: 0; font-family: "Poppins", sans-serif;
  letter-spacing: 0;
}
.utilitybar .ub:hover { color: #000; }
.utilitybar .ub__i { display: inline-flex; width: 16px; height: 16px; flex: none; }
.utilitybar .ub__i svg { width: 100%; height: 100%; }
.utilitybar .ub--hours { margin-left: auto; color: var(--a-mute); }

/* the panel is decorative below tablet - straight edge, wraps cleanly */
@media (max-width: 860px) {
  .utilitybar { --ub-slant: 0px; --ub-edge: 100%; }
  .utilitybar__row {
    gap: 8px 20px; justify-content: center; text-align: center;
    max-width: none; padding-left: 20px; padding-right: 20px;
  }
  .utilitybar .ub--hours { margin-left: 0; }
}
/* if clip-path is unavailable the panel simply squares off, nothing breaks */
@supports not (clip-path: polygon(0 0, 1px 0, 1px 1px, 0 1px)) {
  .utilitybar__panel { clip-path: none; padding-right: 12px; }
}

/* The header is one flat full-width band. style.css builds .masthead__in and
   .mainnav__in as floating glass cards - inset, rounded, shadowed, and with
   their own inner padding - which is why the logo and nav sat right of the hero
   text below them. Flattened here so both rows use the plain .wrap edge.
   NOTE: section 13 at the end of this file re-glasses the header on purpose, per
   a later request for the glass look back on the header + cards. These flat
   rules are the base it overrides; leaving them in place keeps the alignment
   maths from the band version documented in one spot. */
.masthead { padding: 0; background: #fff; border-bottom: 1px solid var(--line); }
/* The band colour is meant to come from Site Settings, but if that value is ever
   empty or not a valid colour the declaration is invalid at computed-value time
   and the band goes transparent rather than falling back - which is what has
   been happening on the live site. So the element carries a plain white literal
   and the settings colour is painted over it by an underlay: z-index:-1 puts the
   underlay above the element's own background but still below the content, and
   if --hdr is invalid the underlay simply paints nothing and the white shows. */
.masthead::before {
  content: ""; position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  z-index: -1; background: var(--hdr);
}
.masthead .wrap { padding-top: 14px; padding-bottom: 14px; }

/* The logo was rendering tiny: .brand is a shrinkable flex item next to the
   ticker and the search box, so img{max-width:100%} scaled it down to whatever
   space was left. flex:none stops that. The logo is then given a *set* height
   rather than a max, because a max does nothing when the source image is itself
   shorter than the cap - which is why it stayed small last time. width:auto keeps
   the aspect ratio; if the source is low-resolution it may soften a little at
   this height, which is a property of the file, not the CSS. */
/* The logo. IMPORTANT: this site has no logo IMAGE uploaded, so the header
   renders the site name as TEXT (.brand__text) - sizing .brand img alone did
   nothing, because there is no <img>. Both cases are handled: the text wordmark
   is enlarged here, and .brand img is sized for when a logo file IS uploaded in
   Site Settings. .brand is kept from shrinking either way. */
.brand { flex: none; }
.brand img {
  height: 146px; width: auto;
  max-width: 520px; object-fit: contain;
}
.brand__text {
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 900; letter-spacing: -.02em; color: var(--header-ink);
  white-space: nowrap;
}
@media (max-width: 860px) {
  .brand img { height: 84px; }
  .brand__text { font-size: 26px; }
}
/* (The flat-band flattening of .masthead__in / .mainnav__in that used to sit
   here is now fully governed by section 13, which re-glasses them. Removed to
   avoid a dead rule that a later reader would have to reconcile. .brand__text is
   now styled in the logo block above. */

/* hairline between the logo row and the nav row, full width like the band */
.mainnav {
  margin-top: 0; background: none; box-shadow: none;
  border: 0; border-top: 1px solid var(--line);
}
.mainnav a {
  font-weight: 600; font-size: 15px; letter-spacing: 0;
  color: var(--header-ink); border-radius: 4px;
}
/* hovered and current item in the theme amber. --a-dark is the darker amber the
   theme keeps for text on white; the brighter --accent is close to unreadable
   against the header. */
.mainnav a:hover, .mainnav a.is-active { color: var(--a-dark); background: none; }
.mainnav a.is-active { box-shadow: inset 0 -2px 0 var(--accent); }
.mainnav__cta .btn { padding: 11px 22px; }

/* dropdowns must be opaque whatever a colour setting says, so this one stays a
   literal rather than following --hdr */
.dropdown, .flyout {
  background: #fff; border: 1px solid var(--line);
  border-radius: 6px; box-shadow: var(--sh-3);
}

/* ---- 5. hero ------------------------------------------------------------- */
/* Full-bleed band. style.css width-limits .hero AND .hero--empty into a centred
   card (`width:min(1240px,100% - 48px)`), so the width has to be released on
   both, and the inner .wrap given the standard content width back - style.css
   flattens it to `width:100%` on the assumption the hero itself is inset. Side
   padding moves off .hero--empty/.slide__body and onto that .wrap so hero text
   lines up with the header above it. */
.hero {
  /* Band width, centred, so the hero banner is the same length as the menu bar,
     header and footer. */
  width: var(--band-w); max-width: none; margin-inline: auto;
  border-radius: var(--r-xl); box-shadow: none;
  background: var(--deep1); color: #fff;
  overflow: hidden;
}
.hero--empty {
  width: 100%;
  border-radius: var(--r-xl); box-shadow: none;
  padding: 70px 0;
  background: linear-gradient(140deg, var(--deep1), var(--deep2));
}
/* The hero is now itself the band width, so its inner content must NOT be inset
   again to another column - that double inset is what clipped the banner text.
   Give the content simple horizontal padding inside the band instead. */
.hero .wrap { width: 100%; margin-inline: 0; padding: 0 40px; }
.slide__body { padding-left: 40px; padding-right: 40px; }
.slide__body > .wrap { width: 100%; margin-inline: 0; padding: 0; }
@media (max-width: 860px) {
  .hero .wrap { padding: 0 24px; }
  .slide__body { padding-left: 24px; padding-right: 24px; }
}

.hero h1 { color: #fff; font-size: clamp(25px, 4vw, 42px); line-height: 1.18; }
.hero p  { color: var(--on-deep); }

/* no frosted pill behind the tagline: style.css gives .hero--empty .eyebrow and
   .slide__card .eyebrow a translucent fill, a border and a backdrop blur */
.hero .eyebrow, .hero--empty .eyebrow, .hero .slide__card .eyebrow {
  color: var(--accent);
  background: none; border: 0; padding: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* .btn--accent is navy everywhere else; on the navy hero it has to be amber */
.hero .btn--accent {
  background: var(--accent); border-color: var(--accent); color: var(--ink);
}
.hero .btn--accent:hover {
  background: var(--a-hover); border-color: var(--a-hover); color: var(--ink);
}

@media (max-width: 860px) {
  .hero--empty { padding: 44px 0; }
}

/* ---- 6. cards and tiles -------------------------------------------------- */
.card, .tile, .catcard, .artcard {
  background: var(--g-fill);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: none;
}
.card:hover, .tile:hover, .catcard:hover, .artcard:hover {
  border-color: var(--line-2);
  box-shadow: var(--sh-2);
  transform: none;
}

/* amber rule along the top of a feature card */
.card--feature, .grid--4 > .card, .grid--3 > .card { border-top: 3px solid var(--accent); }

/* ---- 7. trust badge row -------------------------------------------------- */
.badges { background: var(--g-fill); border-bottom: 1px solid var(--line); }
.badges__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line);
}
.badge {
  background: var(--g-fill); padding: 22px 16px; text-align: center;
}
.badge__ico {
  width: 40px; height: 40px; margin: 0 auto 9px;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--a-wash); color: var(--a-dark);
}
.badge__ico svg { width: 21px; height: 21px; }
.badge h3 {
  font-size: 13px; font-weight: 700; color: var(--ink);
  margin: 0 0 3px; letter-spacing: 0;
}
.badge p { font-size: 12px; color: var(--muted); margin: 0; line-height: 1.5; }
@media (max-width: 860px) { .badges__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .badges__grid { grid-template-columns: 1fr; } }

/* ---- 8. full-width call to action --------------------------------------- */
.ctaband {
  background: var(--third, #256ad7); color: #fff; padding: 34px 0;
}
.ctaband .wrap {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
}
.ctaband h2 {
  font-size: clamp(16px, 2.2vw, 22px); margin: 0; max-width: 640px;
  text-transform: uppercase; letter-spacing: .01em; line-height: 1.4; color: #fff;
}
.ctaband .btn { margin-left: auto; }
@media (max-width: 700px) { .ctaband .btn { margin-left: 0; } }

/* ---- 9. footer ----------------------------------------------------------- */
/* style.css makes the footer an inset rounded panel of its own width. Here it is
   a full-width band like the hero, with the container moved onto the grid and
   the bottom bar so the columns line up with everything above.
   --footer-ink is picked in header.php from the brightness of the footer panel,
   so the copy stays readable if the panel is set to a light colour. */
.sitefoot, footer.sitefoot {
  /* Band width, centred, so the footer is the same length as the menu bar,
     header and hero. Explicit min-height and a hard navy fallback BEFORE the
     variable, so the footer can never collapse or come out unpainted even if a
     colour setting is empty - it was reported missing, and this guarantees it
     shows regardless. */
  display: block;
  width: var(--band-w); max-width: none; margin: 80px auto 24px;
  min-height: 200px;
  border-radius: var(--r-xl); box-shadow: none;
  background: #1b2839;
  background: var(--foot1, #1b2839);
  overflow: hidden;
}
.sitefoot__grid, .sitefoot__bar-in {
  width: 100%; margin-inline: 0;
  padding-left: 44px; padding-right: 44px;
}
@media (max-width: 860px) {
  .sitefoot__grid, .sitefoot__bar-in { padding-left: 26px; padding-right: 26px; }
}
.sitefoot__bar { background: var(--foot2); }
/* flat panel: style.css washes an amber radial over the top-right corner, which
   stops a black footer reading as black */
.sitefoot::before { display: none; }
.sitefoot, .sitefoot p, .sitefoot li, .sitefoot a { color: var(--foot-txt); font-size: 13px; }
.sitefoot a:hover { color: var(--accent); }
.sitefoot h4, .sitefoot h3 {
  color: var(--footer-ink); font-size: 14px; font-weight: 700;
  letter-spacing: 0; margin-bottom: 10px;
}
.sitefoot__logo { border-radius: var(--r-sm); }

/* copyright line in the theme amber; Staff Login beside it keeps its own colour */
.sitefoot__bar-in > span:first-child { color: var(--accent); }

/* Social links as platform icons. footer.php prints the platform name as the
   link text, so the label is sized to nothing and the icon comes from a mask
   picked by the href - no markup change needed, and the text stays in the page
   for screen readers. */
.sitefoot__social { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.sitefoot__social a {
  width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%;
  display: inline-grid; place-items: center;
  font-size: 0; line-height: 0;
  color: var(--footer-ink); background: var(--foot-tint);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.sitefoot__social a:hover { background: var(--accent); color: var(--ink); }
.sitefoot__social a::before {
  content: ""; width: 19px; height: 19px; background-color: currentColor;
  -webkit-mask-image: var(--ico);      mask-image: var(--ico);
  -webkit-mask-repeat: no-repeat;      mask-repeat: no-repeat;
  -webkit-mask-position: center;       mask-position: center;
  -webkit-mask-size: contain;          mask-size: contain;
}
/* platform icons, drawn as masks so they take the link colour. Feather Icons (MIT). */
.sitefoot__social a[href*="linkedin"] {
  --ico: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M16%208a6%206%200%200%201%206%206v7h-4v-7a2%202%200%200%200-2-2%202%202%200%200%200-2%202v7h-4v-7a6%206%200%200%201%206-6z'/%3E%3Crect%20x='2'%20y='9'%20width='4'%20height='12'/%3E%3Ccircle%20cx='4'%20cy='4'%20r='2'/%3E%3C/svg%3E");
}
.sitefoot__social a[href*="facebook"],
.sitefoot__social a[href*="fb.com"] {
  --ico: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M18%202h-3a5%205%200%200%200-5%205v3H7v4h3v8h4v-8h3l1-4h-4V7a1%201%200%200%201%201-1h3z'/%3E%3C/svg%3E");
}
.sitefoot__social a[href*="instagram"] {
  --ico: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='2'%20y='2'%20width='20'%20height='20'%20rx='5'%20ry='5'/%3E%3Cpath%20d='M16%2011.37A4%204%200%201%201%2012.63%208%204%204%200%200%201%2016%2011.37z'/%3E%3Cline%20x1='17.5'%20y1='6.5'%20x2='17.51'%20y2='6.5'/%3E%3C/svg%3E");
}
.sitefoot__social a[href*="youtube"],
.sitefoot__social a[href*="youtu.be"] {
  --ico: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M22.54%206.42a2.78%202.78%200%200%200-1.94-2C18.88%204%2012%204%2012%204s-6.88%200-8.6.46a2.78%202.78%200%200%200-1.94%202A29%2029%200%200%200%201%2011.75a29%2029%200%200%200%20.46%205.33A2.78%202.78%200%200%200%203.4%2019c1.72.46%208.6.46%208.6.46s6.88%200%208.6-.46a2.78%202.78%200%200%200%201.94-2%2029%2029%200%200%200%20.46-5.25%2029%2029%200%200%200-.46-5.33z'/%3E%3Cpolygon%20points='9.75%2015.02%2015.5%2011.75%209.75%208.48%209.75%2015.02'/%3E%3C/svg%3E");
}
/* no mask support: fall back to the wording, rather than an empty circle */
@supports not ((-webkit-mask-image: url("data:image/svg+xml,x")) or (mask-image: url("data:image/svg+xml,x"))) {
  .sitefoot__social a {
    width: auto; height: auto; padding: 8px 15px;
    border-radius: var(--r-sm); font-size: 12px; line-height: 1.4;
  }
  .sitefoot__social a::before { display: none; }
}
.footbar {
  background: var(--foot2); color: var(--foot-txt-dim);
  font-size: 12px; text-align: center; padding: 13px 0;
}

/* ---- 10. tables, forms, misc -------------------------------------------- */
.spectable th, .spectable td, .tbl th, .tbl td { border-color: var(--line); }
input, select, textarea { border-radius: 4px; }
/* The ticker sits inside the header bar, so it takes the header's colours.
   It had a --deep1 background here while style.css colours .ticker__item with
   --header-ink, which on the seeded palette is navy text on a navy box. */
.ticker { background: none; color: var(--header-ink); }
.crumbs { color: var(--muted); }
.crumbs a { color: var(--third, #256ad7); }

/* price rule stays as configured in Site Settings */
.price--old { color: var(--price-old); }
.price--new { color: var(--price-new); }

/* ---- 11. live chat widget ------------------------------------------------- */
/* assets/js/chat.js builds the widget with .sitechat* class names, but style.css
   only carries the older .nmhchat* names, so the shell matched nothing: the
   launcher rendered as a bare unstyled button at the very bottom of the page
   instead of a fixed bubble, which is why chat looked switched off. The message
   rows (.nmhmsg*) do still match and keep their styling from style.css. */
.sitechat { position: fixed; left: 22px; bottom: 22px; z-index: 9999; font-family: inherit; }
/* [hidden] has to win over the flex layouts below */
.sitechat [hidden] { display: none !important; }

.sitechat__bubble {
  width: 58px; height: 58px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--accent); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  position: relative; box-shadow: var(--sh-3);
  transition: transform .2s var(--ease), background .2s var(--ease);
}
.sitechat__bubble:hover { transform: translateY(-2px); background: var(--a-hover); }
.sitechat__badge {
  position: absolute; top: -3px; right: -3px;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: var(--price-old); color: #fff;
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

.sitechat__panel {
  width: 340px; max-width: calc(100vw - 44px);
  height: 480px; max-height: calc(100vh - 120px);
  background: var(--g-fill); border: 1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--sh-3); overflow: hidden;
  display: flex; flex-direction: column;
}
.sitechat__head {
  background: var(--primary); color: #fff; padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between;
}
.sitechat__title {
  font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 15px;
}
.sitechat__headbtns button {
  background: transparent; border: 0; color: #fff;
  font-size: 20px; line-height: 1; padding: 0 4px; cursor: pointer; opacity: .85;
}
.sitechat__headbtns button:hover { opacity: 1; }

.sitechat__body { flex: 1; overflow-y: auto; padding: 16px; background: var(--bg-soft); }
.sitechat__intro { font-size: 13.5px; color: var(--muted); margin: 0 0 12px; }
.sitechat__connect input {
  width: 100%; padding: 11px 13px; margin-bottom: 9px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font: inherit; font-size: 14px;
}
.sitechat__caplbl {
  display: block; font-size: 12.5px; font-weight: 600;
  color: var(--ink); margin-bottom: 5px;
}
.sitechat__start {
  width: 100%; padding: 12px; border: 0; border-radius: var(--r-sm);
  background: var(--accent); color: var(--ink);
  font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 12.5px;
  letter-spacing: .04em; text-transform: uppercase; cursor: pointer;
}
.sitechat__start:hover { background: var(--a-hover); }
.sitechat__start:disabled { opacity: .6; cursor: default; }
.sitechat__err { color: var(--price-old); font-size: 12.5px; margin-top: 8px; }
.sitechat__thread { display: flex; flex-direction: column; gap: 8px; }

.sitechat__reply {
  display: flex; gap: 8px; padding: 10px;
  background: var(--g-fill); border-top: 1px solid var(--line);
}
.sitechat__reply input {
  flex: 1; padding: 10px 13px; border: 1px solid var(--line);
  border-radius: var(--r-sm); font: inherit; font-size: 14px;
}
.sitechat__reply button {
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: var(--primary); color: #fff; font-size: 15px; cursor: pointer;
}
@media (max-width: 480px) {
  .sitechat { left: 16px; bottom: 16px; }
  .sitechat__panel { width: calc(100vw - 32px); }
}

/* ---- 13. glass on the header + cards (scoped opt-back-in) ----------------- */
/* Requested: bring the frosted-glass look back, but only on the header and the
   cards - the hero, sections and footer stay as the flat full-width bands.
   The glass is four tokens (blur, translucent fill, light edge, specular inset)
   plus a rounder radius; this file flattened them globally, so rather than unset
   that everywhere, the glass VALUES are re-declared on just these elements as
   local custom properties, and the elements are restyled to use them. Nothing
   outside these selectors sees the change. */

/* shared glass values, as locals so they don't leak past these rules */
.masthead__in, .mainnav__in, .card, .catcard, .tile, .artcard {
  --_g-fill:   rgba(255,255,255,.62);
  --_g-strong: rgba(255,255,255,.80);
  --_g-edge:   rgba(255,255,255,.72);
  --_g-blur:   saturate(180%) blur(20px);
  --_g-spec:   inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(255,255,255,.28);
  --_g-sh:     0 2px 6px rgba(16,32,52,.06), 0 14px 38px rgba(16,32,52,.10);
}

/* header: floating frosted bar again, inset from the page edge. The flat band
   pinned .masthead__in / .mainnav__in flush and stripped their padding; this
   gives back the rounded frosted card and the inner padding.
   Sticky offset: style.css pins .masthead at top:0, which would put it on the
   SAME line as the strip and let the strip (higher z-index) cover it - that was
   the overlap. Re-pin it at top:var(--ub-h) so it settles directly under the
   strip. z-index sits below the strip's, above the page. */
.masthead {
  background: none; border-bottom: 0;
  top: var(--ub-h, 52px); z-index: 40;
}
.masthead::before { display: none; }        /* drop the flat white underlay */
.masthead__in {
  /* same band width as the strip, hero and footer; it is also a .wrap so it
     already gets this, but stating it makes the four-way match explicit */
  width: var(--band-w); max-width: none; margin-inline: auto; box-sizing: border-box;
  background: var(--_g-strong);
  -webkit-backdrop-filter: var(--_g-blur); backdrop-filter: var(--_g-blur);
  border: 1px solid var(--_g-edge); border-radius: 20px;
  box-shadow: var(--_g-sh), var(--_g-spec);
  padding: 12px 20px;
}
.mainnav { border-top: 0; margin-top: 10px; }
.mainnav__in {
  width: var(--band-w); max-width: none; margin-inline: auto; box-sizing: border-box;
  background: var(--_g-fill);
  -webkit-backdrop-filter: var(--_g-blur); backdrop-filter: var(--_g-blur);
  border: 1px solid var(--_g-edge); border-radius: 999px;
  box-shadow: var(--_g-sh), var(--_g-spec);
  padding: 7px 20px;
}
/* nav pills rounded again */
.mainnav a { border-radius: 999px; }
.mainnav a.is-active { box-shadow: inset 0 -2px 0 var(--accent); }

/* cards: frosted panel, rounder corners, the lift-on-hover shadow back */
.card, .catcard, .tile, .artcard {
  background: var(--_g-fill);
  -webkit-backdrop-filter: var(--_g-blur); backdrop-filter: var(--_g-blur);
  border: 1px solid var(--_g-edge); border-radius: 18px;
  box-shadow: var(--_g-sh), var(--_g-spec);
}
.card:hover, .catcard:hover, .tile:hover, .artcard:hover {
  border-color: var(--_g-edge);
  box-shadow: 0 4px 12px rgba(16,32,52,.08), 0 26px 62px rgba(16,32,52,.14), var(--_g-spec);
}
.tile:hover, .catcard:hover { transform: translateY(-4px); }

/* Frosted fill needs something behind it to refract. The flat theme removed the
   body backdrop, so restore a faint brand-tinted field on the body - kept very
   light so text over it stays crisp. The header sits above it and the cards over
   the sections pick it up too. */
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(1150px 900px at 6% 2%,  var(--p12), transparent 60%),
    radial-gradient(950px 780px  at 96% 8%, var(--a22), transparent 58%);
  background-repeat: no-repeat;
  background-attachment: scroll;
}

/* no-backdrop-filter browsers already fall back to opaque fills via style.css's
   own @supports block, so the header and cards stay solid and readable there */

/* ---- 15. logo strips: brands + our-customers ---------------------------- */
/* Both strips (the brands row and the "Our Customers" row) are unified here:
   same rounded-square white tiles, same tile/logo sizing, both full-bleed so
   they use the whole page width instead of the centred 1320px column, matched
   scroll speed, and the two rows scrolling in opposite directions.

   SPEED MATCH: style.css animates .logostrip__track from translateX(0) to
   translateX(-50%) over a FIXED 40s. Distance travelled = half the track width =
   (logo count x tile width) / 2, so with a fixed time the strip with more logos
   moves faster - which is why the two rows ran at different speeds. index.php now
   prints the logo count on each track as --logo-count, so the duration can be
   made proportional to the count: the same seconds-per-logo on both rows means
   the same pixels-per-second, whatever each row contains now or later. */

/* full-width strips WITHOUT the 100vw full-bleed trick. The previous version used
   width:100vw with negative viewport-unit margins, and THAT is what made the
   footer disappear whenever a strip was on: 100vw is wider than the content area
   (it includes the scrollbar), and combined with body{overflow-x:hidden} it
   destabilised the page flow below it. These strips now simply fill their normal
   container - no viewport units, no negative margins - so they can never affect
   the footer. They sit at the page's content width, which is plenty wide. */
.logostrip {
  width: 100%; max-width: 100%; margin-left: 0; margin-right: 0;
  background: var(--bg-soft); overflow: hidden;
}
.logostrip .wrap { width: 100%; max-width: none; }

/* speed proportional to how many logos the row holds (fallback 12 if unset).
   ~2.6s per logo reads at a calm, even pace on both rows. !important is needed
   only to beat style.css's fixed `animation:logoscroll 40s` shorthand. */
.logostrip__track {
  animation-duration: calc(var(--logo-count, 12) * 2.6s) !important;
}
/* the customers row runs the other way */
.logostrip--customers .logostrip__track { animation-direction: reverse; }

/* unified tile: rounded square, white, for BOTH rows and every logo_style,
   so the two strips match regardless of the Site Settings display option */
.logostrip__item,
.logostrip[class*="logostrip--style-"] .logostrip__item {
  height: 96px; width: 150px; flex: none;
  padding: 0 22px; border-radius: 16px;
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(16,32,52,.06);
  transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}
.logostrip__item img,
.logostrip[class*="logostrip--style-"] .logostrip__item img {
  filter: none; opacity: 1;
  max-height: 60px; max-width: 118px; object-fit: contain;
}
.logostrip__item:hover,
.logostrip[class*="logostrip--style-"] .logostrip__item:hover {
  box-shadow: 0 8px 20px rgba(16,32,52,.12); transform: translateY(-2px);
}
.logostrip__item:hover img { filter: none; opacity: 1; }

/* Customer logos (the agency seals) use the SAME white tiles as the brand logos -
   their image files have transparent/white backgrounds and are designed to read
   on white. (An earlier version wrongly put them on dark tiles, which made the
   seals look black-boxed; that is removed.) */

/* even gap between tiles on both rows */
.logostrip__track,
.logostrip--customers .logostrip__track,
.logostrip--style-cards .logostrip__track { gap: 24px; }

/* the customers row keeps its centred heading, which must stay in the column
   even though the strip itself is now full-bleed */
.logostrip--customers .section__head {
  width: min(1240px, 100% - 48px); margin-inline: auto;
}

/* ---- 16. honour the OS switches, as style.css does --------------------- */
@media (prefers-reduced-motion: reduce) {
  .card, .tile, .catcard, .artcard, .btn { transition: none !important; }
}

/* ============================================================
   Product Feeds - image size caps
   ------------------------------------------------------------
   Icecat product images are high-resolution; without a cap the
   product-detail main image can render very large on wide
   screens. These caps keep images to a sensible size while
   preserving aspect ratio. Loaded after style.css so they win.
   ============================================================ */

/* product detail: constrain the main image box height */
.pdp .gallery__main {
  aspect-ratio: auto !important;
  max-height: 460px;
  min-height: 320px;
  height: 460px;
}
.pdp .gallery__main img {
  max-height: 388px !important;   /* box height minus padding */
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* listing tiles: keep thumbnails uniform and not oversized */
.tile__img {
  max-height: 210px;
}
.tile__img img {
  max-height: 190px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* thumbnails under the main image */
.gallery__thumbs img {
  max-height: 64px;
  max-width: 64px;
}

@media (max-width: 720px) {
  .pdp .gallery__main { height: 320px; max-height: 320px; min-height: 240px; }
  .pdp .gallery__main img { max-height: 260px !important; }
}

/* ==== BENEFITS_SOLID_V1 - start ==== */
/* Solid brand-blue benefit cards. On hover the card turns white and the text
   takes the brand blue - the same two colours, swapped over.

   The selectors carry one extra class because the strip's own CSS is printed
   inline by home-blocks.php, which lands AFTER theme.css in the page; at equal
   weight the later rule would win. That is also why no !important is needed.

   The per-card colours (--cc) are inline styles in the markup and cannot be
   overridden through the variable, so the rules deriving from them are
   replaced outright. */
/* Four colours, assigned by POSITION. Each card carries its hue inline as
   style="--cc:162", and CSS cannot read an inline custom property to choose a
   background from it - so the palette is set by nth-child. It cycles every
   four, so the strip still works if a card is added or removed.
   These are the four families the icons already used - trust green, shipping
   blue, pricing amber, support violet - taken deep enough to carry white text.
   The amber is darker than it may look like it should be for exactly that
   reason: at a lighter shade the small print drops under 4.5:1. */
.tb-benefits .tb-bi{ border-color:transparent; }
.tb-benefits .tb-bi:nth-child(4n+1){ background:#1B6650; border-color:#1B6650; }
.tb-benefits .tb-bi:nth-child(4n+2){ background:#0F4C81; border-color:#0F4C81; }
.tb-benefits .tb-bi:nth-child(4n+3){ background:#8C4A22; border-color:#8C4A22; }
.tb-benefits .tb-bi:nth-child(4n+4){ background:#5E4270; border-color:#5E4270; }
.tb-benefits .tb-bi::before{ display:none; }
.tb-benefits .tb-bi h3{ color:#fff; }
.tb-benefits .tb-bi p { color:#fff; opacity:.92; }
.tb-benefits .tb-bi .tb-bi__i{
  background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.30); color:#fff; }

/* :hover ties with the nth-child rules on weight, so which wins would come
   down to write order. Stated outright instead - a hover that only sometimes
   fires is worse than a strong declaration. */
.tb-benefits .tb-bi:hover{
  background:#fff!important; border-color:#0F4C81!important;
  box-shadow:0 12px 28px rgba(15,76,129,.18); }
.tb-benefits .tb-bi:hover h3,
.tb-benefits .tb-bi:hover p{ color:#0F4C81; }
.tb-benefits .tb-bi:hover p{ opacity:.78; }
.tb-benefits .tb-bi:hover .tb-bi__i{
  background:rgba(15,76,129,.10); border-color:rgba(15,76,129,.28); color:#0F4C81; }

.tb-benefits .tb-bi .tb-bi__i svg{ stroke:currentColor; }

@media (prefers-reduced-motion:reduce){
  .tb-benefits .tb-bi{ transition:background .2s, color .2s, border-color .2s; }
  .tb-benefits .tb-bi:hover{ transform:none; }
}
/* ==== BENEFITS_SOLID_V1 - end ==== */

/* ==== NAVBAR_BRAND_V1 - start ==== */
/* The strip is driven by two variables. Setting --header-ink to white on the
   bar itself turns the link text, the hover wash AND the active pill white
   together, because each of those rules is a color-mix of that variable -
   there is no separate hover rule that could fall out of step. */
.mainnav .mainnav__in{
  background:#0F4C81;
  border-color:#0F4C81;
  --header-ink:#ffffff;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  box-shadow:0 4px 16px rgba(15,76,129,.22);
}

/* Cart. The packaged rule carries !important, so this must too - plus one
   extra class, so it wins on weight rather than on load order. */
.mainnav .mainnav__cta{
  background:linear-gradient(180deg,#FFD24D,#F5B301)!important;
  color:#1a1205!important;
  box-shadow:0 4px 14px rgba(245,179,1,.42), inset 0 1px 0 rgba(255,255,255,.55)!important;
}
.mainnav .mainnav__cta:hover{ filter:brightness(1.06); color:#1a1205!important; }
.mainnav .mainnav__cta .navcount{ background:rgba(0,0,0,.24); color:#1a1205; }

/* The site's own theme.css carries
       .mainnav a:hover, .mainnav a.is-active { color:var(--a-dark); background:none; }
   which sets the colour OUTRIGHT rather than through --header-ink - so the
   variable above never reaches the active link, and "Home" stayed dark amber
   (#d99b00) on the blue while everything else turned white. Their rule also
   kills the hover wash with background:none.
   These two selectors carry one more class than theirs, so they win on weight
   and not merely on being later in the file. */
/* :not() keeps the white hover on the BAR's own links. Without it this also
   matches links inside the dropdown - the panel sits inside .mainnav__in - and
   the two rules tie on weight, leaving the outcome to whichever is written
   last. That is not a thing to leave to luck in a file people append to. */
.mainnav .mainnav__in > a:hover,
.mainnav .mainnav__in > a.is-active,
.mainnav .mainnav__in > .hasdrop > a:hover,
.mainnav .mainnav__in > .hasdrop > a.is-active{
  color:#ffffff;
  background:rgba(255,255,255,.14);
}
.mainnav .mainnav__in > a.is-active,
.mainnav .mainnav__in > .hasdrop > a.is-active{
  font-weight:600;
  box-shadow:inset 0 -2px 0 rgba(255,255,255,.85);
}

/* DROPDOWNS. --header-ink is set to white on the bar, and the dropdown hangs
   inside it - so every link inherited white text onto a white panel and the
   menu came out blank. The panels get their own dark ink back. */
.mainnav .dropdown, .mainnav .flyout{
  --header-ink:#16202c;
  background:#ffffff;
  border-color:rgba(15,76,129,.18);
  box-shadow:0 14px 34px rgba(15,76,129,.16);
}
.mainnav .dropdown a, .mainnav .flyout a{ color:#16202c; }
.mainnav .dropdown a:hover, .mainnav .flyout a:hover{
  background:rgba(15,76,129,.08);
  color:#0F4C81;
}
.mainnav .dropdown .dropdown__more{ color:#0F4C81; }

/* SHAPE. 30px was the wrong number, not the wrong idea: the nav bar is about
   60px tall, so a 30px radius is exactly half the height - the definition of a
   stadium. It stayed a pill. 18px reads as a rounded rectangle at that height.
   ONLY the nav bar is touched. The utility bar and the masthead keep their own
   shapes, which were never mine to change. The LINKS keep their pill shape -
   that is the active marker, not the bar. */
.mainnav .mainnav__in{ border-radius:18px; }

/* Search button, to match the Cart. Its own rules are plain, so no !important
   is needed - only enough weight to beat .masthead__search button. */
.masthead .masthead__search button[type="submit"],
.masthead__search button[type="submit"]{
  background:linear-gradient(180deg,#FFD24D,#F5B301);
  color:#1a1205;
  border-color:transparent;
  font-weight:700;
}
.masthead .masthead__search button[type="submit"]:hover,
.masthead__search button[type="submit"]:hover{ filter:brightness(1.06); color:#1a1205; }

/* Chat bubble. The site sets --primary-dark on hover, so both states go here
   or it would flick back to navy under the cursor. */
.sitechat .sitechat__bubble{
  background:linear-gradient(180deg,#FFD24D,#F5B301);
  color:#1a1205;
  box-shadow:0 6px 18px rgba(245,179,1,.42);
}
.sitechat .sitechat__bubble:hover{
  background:linear-gradient(180deg,#FFD24D,#F5B301);
  filter:brightness(1.06);
  color:#1a1205;
}
.sitechat .sitechat__bubble svg{ stroke:currentColor; color:#1a1205; }

/* Copyright line - it was #93a2b3 on the dark footer, which reads as grey-blue
   rather than white. */
.sitefoot .sitefoot__bar,
.sitefoot .sitefoot__bar-in,
.sitefoot .sitefoot__bar span,
.sitefoot .sitefoot__bar small,
.sitefoot .sitefoot__bar p{ color:#ffffff; }
.sitefoot .sitefoot__bar a{ color:rgba(255,255,255,.86); }
.sitefoot .sitefoot__bar a:hover{ color:#ffffff; }
/* ==== NAVBAR_BRAND_V1 - end ==== */

/* ==== WHYCHOOSE_COLUMNS_V1 - start ==== */
/* Eight cards on one row. The grid was auto-fit/minmax(260px), which gives
   five at desktop width and wraps the rest onto a second row.

   Eight only fit above about 1360px - below that each card is under 140px and
   the words break mid-syllable - so the row holds eight on a wide screen, four
   on a laptop and two on a phone. "One line" is honoured where there is room
   for it to be legible. */
/* The `body` prefix is the whole reason this works. whychoose_styles() prints
   the original grid INLINE from home-blocks.php, which lands after theme.css
   in the page - so a plain .tb-whychoose here ties on weight and loses on
   order, which is exactly why the cards took their new colours (those rules
   carry more classes) while the column count stayed at five. */
body .tb-whychoose{
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  align-items:stretch;
}
@media (min-width:820px){  body .tb-whychoose{ grid-template-columns:repeat(4,1fr); } }
@media (min-width:1280px){ body .tb-whychoose{ grid-template-columns:repeat(8,1fr); } }

/* The heading is capped at 760px by .section__head, which is what broke
   "Why Partner With Central Distributor LLC" across two lines. The Why Choose
   head is released from that cap and told not to wrap; it still shrinks on a
   narrow screen rather than overflowing. */
body .section:has(.tb-whychoose) .section__head{ max-width:none; }
body .section:has(.tb-whychoose) .section__head h2{
  white-space:nowrap;
  font-size:clamp(20px,2.5vw,34px);
}
@media (max-width:820px){
  body .section:has(.tb-whychoose) .section__head h2{ white-space:normal; }
}

/* Solid cards. The per-item colour lives in a style attribute on the icon and
   the pill, and CSS cannot read a child's inline style to colour its parent -
   so the colours are assigned by POSITION instead. Eight colours, cycling, so
   adding or removing an item still works. All eight take white text; the
   weakest is terracotta at 5.1:1, past the 4.5:1 AA needs. */
.tb-whychoose .tb-wc{
  border:0;
  border-radius:14px;
  padding:18px 15px;
  gap:10px;
  height:100%;          /* every card the height of the tallest, so the row is even */
  color:#ffffff;
  transition:background .22s, color .22s, transform .22s, box-shadow .22s;
}
.tb-whychoose .tb-wc:nth-child(8n+1){ background:#0F4C81; }
.tb-whychoose .tb-wc:nth-child(8n+2){ background:#12639E; }
.tb-whychoose .tb-wc:nth-child(8n+3){ background:#0B3A63; }
.tb-whychoose .tb-wc:nth-child(8n+4){ background:#16697A; }
.tb-whychoose .tb-wc:nth-child(8n+5){ background:#1E6F5C; }
.tb-whychoose .tb-wc:nth-child(8n+6){ background:#3D5A80; }
.tb-whychoose .tb-wc:nth-child(8n+7){ background:#6B4C7A; }
.tb-whychoose .tb-wc:nth-child(8n+8){ background:#A15C2E; }

/* !important is needed here and only here: the colours are written as inline
   style attributes, and an author !important is the one thing that outranks
   them. Everything else in this file wins on weight alone. */
.tb-whychoose .tb-wc .tb-wc__ic{ color:#ffffff!important; width:30px; height:30px; }
.tb-whychoose .tb-wc .tb-wc__ic svg{ width:24px; height:24px; }
.tb-whychoose .tb-wc .tb-wc__pill{
  background:rgba(255,255,255,.16)!important;
  color:#ffffff!important;
  font-size:12.5px; line-height:1.3; padding:5px 10px;
}
.tb-whychoose .tb-wc .tb-wc__t{ color:rgba(255,255,255,.90); font-size:12px; line-height:1.5; }

/* Hover - white card, brand-blue everything. */
.tb-whychoose .tb-wc:hover{
  background:#ffffff!important;
  color:#0F4C81;
  transform:translateY(-4px);
  box-shadow:0 14px 32px rgba(15,76,129,.20);
}
.tb-whychoose .tb-wc:hover .tb-wc__ic{ color:#0F4C81!important; }
.tb-whychoose .tb-wc:hover .tb-wc__pill{
  background:rgba(15,76,129,.10)!important;
  color:#0F4C81!important;
}
.tb-whychoose .tb-wc:hover .tb-wc__t{ color:#0F4C81; }

@media (prefers-reduced-motion:reduce){
  .tb-whychoose .tb-wc:hover{ transform:none; }
}
/* ==== WHYCHOOSE_COLUMNS_V1 - end ==== */

/* ==== MARKETS_CARDS_V1 - start ==== */
/* Matched on the link, because "Shop by category" uses the same .catcard
   class and must not change. The selector below was built from the link this
   site actually renders, not from a guess.
   !important throughout: the theme sets .catcard{background:var(--_g-fill)}
   with a backdrop blur, and a translucent white showing through a solid card
   is worse than a heavy-handed rule. */
.catcard[href*="?m="]{
  background:#0F4C81 !important; border-color:transparent !important;
  color:#ffffff !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  box-shadow:0 6px 18px rgba(16,32,52,.12) !important;
  transition:background .22s, color .22s, transform .22s, box-shadow .22s;
}
.catcard[href*="?m="]:nth-of-type(4n+2){ background:#1B6650 !important; }
.catcard[href*="?m="]:nth-of-type(4n+3){ background:#5E4270 !important; }
.catcard[href*="?m="]:nth-of-type(4n+4){ background:#8C4A22 !important; }
.catcard[href*="?m="] h3{ color:#ffffff !important; }
.catcard[href*="?m="] p{ color:rgba(255,255,255,.92) !important; }
.catcard[href*="?m="] span{ color:rgba(255,255,255,.85) !important; }
.catcard[href*="?m="] .catcard__i{
  background:rgba(255,255,255,.16) !important; border-color:rgba(255,255,255,.30) !important;
  color:#ffffff !important; }
.catcard[href*="?m="]::before{ display:none !important; }
.catcard[href*="?m="] .catcard__bg{ color:#ffffff !important; opacity:.08 !important; }
.catcard[href*="?m="]:hover{
  background:#ffffff !important; color:#0F4C81 !important;
  box-shadow:0 14px 32px rgba(15,76,129,.20) !important; }
.catcard[href*="?m="]:hover h3,
.catcard[href*="?m="]:hover p,
.catcard[href*="?m="]:hover span{ color:#0F4C81 !important; }
.catcard[href*="?m="]:hover .catcard__i{
  background:rgba(15,76,129,.10) !important; border-color:rgba(15,76,129,.26) !important;
  color:#0F4C81 !important; }
.catcard[href*="?m="]:hover .catcard__bg{ color:#0F4C81 !important; opacity:.06 !important; }
@media (prefers-reduced-motion:reduce){ .catcard[href*="?m="]:hover{ transform:none !important; } }
/* ==== MARKETS_CARDS_V1 - end ==== */

/* ==== FLASH_DEALS_V1 - start ==== */
/* PROMO TILES. Each tile carries its own gradient inline - amber, blue, pink -
   so !important is the only thing that outranks a style attribute. Three tones
   of the one brand colour rather than three unrelated hues: still solid, still
   distinguishable, and the row reads as one family. */
.tb-promos .tb-promo:nth-child(1){ background:#0F4C81 !important; }
.tb-promos .tb-promo:nth-child(2){ background:#0B3A63 !important; }
.tb-promos .tb-promo:nth-child(3){ background:#12639E !important; }
.tb-promos .tb-promo{ box-shadow:0 6px 18px rgba(15,76,129,.16); }
.tb-promos .tb-promo .tb-shop{
  background:#FFD24D; color:#1a1205; font-weight:700;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.tb-promos .tb-promo:hover .tb-shop{ background:#F5B301; }

/* COUNTDOWN. It was two black tiles floating beside the heading with nothing
   saying what they counted. One pill now, in the brand colour, with the unit
   spelled out - so "54:04 left" reads as a deadline rather than as a score.
   The digits stay tabular so they do not jiggle as the numbers change. */
.dealline .dealclock{
  background:#0F4C81;
  border-radius:999px;
  padding:.30em .62em;
  gap:1px;
  align-items:baseline;
  box-shadow:0 3px 10px rgba(15,76,129,.24);
  font-size:clamp(22px,2.2vw,30px);
}
.dealline .dealclock__d{
  background:none;
  box-shadow:none;
  padding:0;
  min-width:1.25ch;
  color:#ffffff;
  font-size:.62em;
}
.dealline .dealclock__c{ color:rgba(255,255,255,.55); font-size:.56em; }
.dealline .dealclock::after{
  content:"left";
  margin-left:.34em;
  font-size:.30em;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
/* the last five minutes turn amber, so the urgency is visible not just stated */
.dealline .dealclock.is-soon{ background:#8C4A22; }
.dealline .dealclock.is-soon .dealclock__d{ color:#FFD24D; }
.dealline .dealclock.is-soon::after{ color:rgba(255,210,77,.85); }
/* ==== FLASH_DEALS_V1 - end ==== */

/* ==== BUTTONS_CART_QUOTE_V1 - start ==== */
/* Matched on the FORM CLASS, not the action URL.
   The first version keyed on action*="cart.php" and never fired, because
   clean_path() strips the extension - base_url('cart.php') emits "/cart".
   The quote link matched anyway, since subject=quote survives in the query
   string, which is why the green worked and the yellow did not.
   The classes below are in the markup and owe nothing to URL settings:
     .pdp__buy[method=post]  the product page's cart form
     .pdp__buy[method=get]   the same page's quote form - only the method
                             separates the two, they share a class
     .tile__add              the tile grid
     .prow__add              the trade list row                              */

/* ---- both buttons, one shape ---- */
form.pdp__buy button[type="submit"],
form.tile__add button[type="submit"],
form.prow__add button[type="submit"],
a[href*="subject=quote"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:11px 22px;
  border:0;
  border-radius:8px;
  font-weight:700;
  font-size:14px;
  line-height:1.2;
  text-align:center;
  letter-spacing:.01em;
  transition:filter .18s, background .18s;
}

/* ---- Add to Cart: yellow, black text ---- */
form.pdp__buy[method="post"] button[type="submit"],
form.tile__add button[type="submit"],
form.prow__add button[type="submit"]{
  background:linear-gradient(180deg,#FFD24D,#F5B301) !important;
  color:#1a1205 !important;
  border:0 !important;
  box-shadow:0 3px 10px rgba(245,179,1,.34), inset 0 1px 0 rgba(255,255,255,.5) !important;
  /* btn--ghost on the tile buttons also frosts what is behind them, which
     dulls a solid fill - switched off along with the outline */
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
form.pdp__buy[method="post"] button[type="submit"]:hover,
form.tile__add button[type="submit"]:hover,
form.prow__add button[type="submit"]:hover{
  filter:brightness(1.06);
  color:#1a1205 !important;
}

/* ---- Request a Quote: green, white text ---- */
form.pdp__buy[method="get"] button[type="submit"],
a[href*="subject=quote"]{
  background:#1B6650 !important;
  color:#ffffff !important;
  border:0 !important;
  box-shadow:0 3px 10px rgba(27,102,80,.30) !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
form.pdp__buy[method="get"] button[type="submit"]:hover,
a[href*="subject=quote"]:hover{
  background:#175540 !important;
  color:#ffffff !important;
}

/* SAME SIZE, not just the same style.
   "REQUEST A QUOTE" is two words longer than "ADD TO CART", so it wrapped onto
   a second line and grew taller than the button beside it - min-height alone
   cannot fix that, because the content was pushing past it. Two changes:
     nowrap   keeps every label on one line, so both are exactly 46px tall
     flex:1   makes the pair share the leftover width equally, so they are the
              same width as well as the same height. The quantity stepper is
              pinned so it does not stretch with them. */
form.pdp__buy button[type="submit"],
form.pdp__buy a[href*="subject=quote"],
form.tile__add button[type="submit"],
form.prow__add button[type="submit"],
.prow__buy a[href*="subject=quote"]{ white-space:nowrap; }

form.pdp__buy{ flex-wrap:nowrap; }
form.pdp__buy > .qty{ flex:0 0 auto; }
form.pdp__buy > button[type="submit"],
form.pdp__buy > a[href*="subject=quote"]{ flex:1 1 0; min-width:0; }

@media (max-width:640px){
  /* on a phone there is no room for three across - the stepper keeps its width
     and the two buttons take a full row each, still matched to each other */
  form.pdp__buy{ flex-wrap:wrap; }
  form.pdp__buy > button[type="submit"],
  form.pdp__buy > a[href*="subject=quote"]{ flex:1 1 100%; }
}

/* in the narrow list and tile columns both fill the width so they line up */
form.tile__add button[type="submit"],
form.prow__add button[type="submit"],
.prow__buy a[href*="subject=quote"]{ width:100%; }

/* the small "Add to quote" text link under a row stays a link */
.prow__alt{ color:#1B6650 !important; background:none !important; box-shadow:none !important;
  min-height:0 !important; padding:0 !important; font-size:12px !important; font-weight:600 !important; }
/* ==== BUTTONS_CART_QUOTE_V1 - end ==== */

/* ==== ELECTRIC_CARDS_V1 - start ==== */
/* ELECTRIC, with white text everywhere.
   Four of the eight colours as previewed were too light to carry white type -
   the gold sat at 2.9:1, well under the 4.5:1 needed. Rather than switch those
   cards to dark text, the LIGHTNESS alone was walked down until white reads,
   leaving hue and saturation untouched. They are the same colours, a shade
   deeper. Weakest pairing is now 4.6:1.

   The palette is assigned by POSITION because every card carries its own hue
   inline, and CSS cannot read an inline custom property to choose from it.
   It cycles every eight, so adding or removing a card still works. */

/* ---- benefits strip ---- */
.tb-benefits .tb-bi:nth-child(8n+1){ background:#2563EB !important; }
.tb-benefits .tb-bi:nth-child(8n+2){ background:#04825b !important; }
.tb-benefits .tb-bi:nth-child(8n+3){ background:#9333EA !important; }
.tb-benefits .tb-bi:nth-child(8n+4){ background:#c84b0a !important; }
.tb-benefits .tb-bi:nth-child(8n+5){ background:#077d9a !important; }
.tb-benefits .tb-bi:nth-child(8n+6){ background:#d92474 !important; }
.tb-benefits .tb-bi:nth-child(8n+7){ background:#9d6b03 !important; }
.tb-benefits .tb-bi:nth-child(8n+8){ background:#4F46E5 !important; }
.tb-benefits .tb-bi{ border-color:transparent !important; color:#fff; }
.tb-benefits .tb-bi::before{ display:none; }
.tb-benefits .tb-bi h3{ color:#fff !important; }
.tb-benefits .tb-bi p{ color:rgba(255,255,255,.92) !important; }
.tb-benefits .tb-bi .tb-bi__i{
  background:rgba(255,255,255,.18) !important; border-color:rgba(255,255,255,.32) !important;
  color:#fff !important; }
.tb-benefits .tb-bi:hover{ background:#fff !important; border-color:#2563EB !important;
  box-shadow:0 12px 28px rgba(37,99,235,.20) !important; }
.tb-benefits .tb-bi:hover h3, .tb-benefits .tb-bi:hover p{ color:#2563EB !important; }
.tb-benefits .tb-bi:hover .tb-bi__i{ background:rgba(37,99,235,.10) !important;
  border-color:rgba(37,99,235,.28) !important; color:#2563EB !important; }

/* ---- Why Partner cards ---- */
.tb-whychoose .tb-wc:nth-child(8n+1){ background:#2563EB !important; }
.tb-whychoose .tb-wc:nth-child(8n+2){ background:#04825b !important; }
.tb-whychoose .tb-wc:nth-child(8n+3){ background:#9333EA !important; }
.tb-whychoose .tb-wc:nth-child(8n+4){ background:#c84b0a !important; }
.tb-whychoose .tb-wc:nth-child(8n+5){ background:#077d9a !important; }
.tb-whychoose .tb-wc:nth-child(8n+6){ background:#d92474 !important; }
.tb-whychoose .tb-wc:nth-child(8n+7){ background:#9d6b03 !important; }
.tb-whychoose .tb-wc:nth-child(8n+8){ background:#4F46E5 !important; }
.tb-whychoose .tb-wc{ border:0; color:#fff; }
.tb-whychoose .tb-wc .tb-wc__ic{ color:#fff !important; }
.tb-whychoose .tb-wc .tb-wc__pill{ background:rgba(255,255,255,.22) !important; color:#fff !important; }
.tb-whychoose .tb-wc .tb-wc__t{ color:rgba(255,255,255,.92); }
.tb-whychoose .tb-wc:hover{ background:#fff !important; color:#2563EB; }
.tb-whychoose .tb-wc:hover .tb-wc__ic{ color:#2563EB !important; }
.tb-whychoose .tb-wc:hover .tb-wc__pill{ background:rgba(37,99,235,.12) !important; color:#2563EB !important; }
.tb-whychoose .tb-wc:hover .tb-wc__t{ color:#2563EB; }

/* ---- category AND market cards ----
   Both "Shop by category" and "Who we supply" render through the same
   home_card_open() helper, so .catcard--auto covers the pair in one go. */
.catcard--auto:nth-of-type(8n+1){ background:#2563EB !important; }
.catcard--auto:nth-of-type(8n+2){ background:#04825b !important; }
.catcard--auto:nth-of-type(8n+3){ background:#9333EA !important; }
.catcard--auto:nth-of-type(8n+4){ background:#c84b0a !important; }
.catcard--auto:nth-of-type(8n+5){ background:#077d9a !important; }
.catcard--auto:nth-of-type(8n+6){ background:#d92474 !important; }
.catcard--auto:nth-of-type(8n+7){ background:#9d6b03 !important; }
.catcard--auto:nth-of-type(8n+8){ background:#4F46E5 !important; }
.catcard--auto{
  border-color:transparent !important; color:#fff !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
.catcard--auto::before{ display:none !important; }
.catcard--auto h3{ color:#fff !important; }
.catcard--auto p{ color:rgba(255,255,255,.92) !important; }
.catcard--auto span{ color:rgba(255,255,255,.85) !important; }
.catcard--auto .catcard__i{
  background:rgba(255,255,255,.18) !important; border-color:rgba(255,255,255,.32) !important;
  color:#fff !important; }
.catcard--auto .catcard__bg{ color:#fff !important; opacity:.09 !important; }
.catcard--auto:hover{ background:#fff !important; color:#2563EB !important;
  box-shadow:0 14px 32px rgba(37,99,235,.20) !important; }
.catcard--auto:hover h3, .catcard--auto:hover p, .catcard--auto:hover span{ color:#2563EB !important; }
.catcard--auto:hover .catcard__i{ background:rgba(37,99,235,.10) !important;
  border-color:rgba(37,99,235,.28) !important; color:#2563EB !important; }
.catcard--auto:hover .catcard__bg{ color:#2563EB !important; opacity:.07 !important; }

/* ---- photo category tiles, if that block is the one in use ----
   These carry a product photograph, so only the caption plate is coloured -
   filling the whole tile would hide the picture. */
.tb-cattiles .tb-ct:nth-child(8n+1) .tb-ct__b{ background:#2563EB !important; }
.tb-cattiles .tb-ct:nth-child(8n+2) .tb-ct__b{ background:#04825b !important; }
.tb-cattiles .tb-ct:nth-child(8n+3) .tb-ct__b{ background:#9333EA !important; }
.tb-cattiles .tb-ct:nth-child(8n+4) .tb-ct__b{ background:#c84b0a !important; }
.tb-cattiles .tb-ct:nth-child(8n+5) .tb-ct__b{ background:#077d9a !important; }
.tb-cattiles .tb-ct:nth-child(8n+6) .tb-ct__b{ background:#d92474 !important; }
.tb-cattiles .tb-ct:nth-child(8n+7) .tb-ct__b{ background:#9d6b03 !important; }
.tb-cattiles .tb-ct:nth-child(8n+8) .tb-ct__b{ background:#4F46E5 !important; }
.tb-cattiles .tb-ct__b h3{ color:#fff !important; }
.tb-cattiles .tb-ct__b p, .tb-cattiles .tb-ct__n{ color:rgba(255,255,255,.90) !important; }
/* ==== ELECTRIC_CARDS_V1 - end ==== */

/* ==== CATEGORY_ROW_V1 - start ==== */
/* ONE LINE, however many categories there are.
   :has() lets the container count its own children - :nth-child(5):last-child
   means "the fifth is also the last", so there are exactly five. Six or more
   caps at six columns and the rest are hidden, because a seventh card is a
   second row by definition.
   The 300px minimum is dropped to 0 so narrow columns are allowed; the cards
   simply get smaller rather than wrapping. */
.section .grid--3:has(> :nth-child(6)){ grid-template-columns:repeat(6,minmax(0,1fr)); }
.section .grid--3:has(> :nth-child(5):last-child){ grid-template-columns:repeat(5,minmax(0,1fr)); }
.section .grid--3:has(> :nth-child(4):last-child){ grid-template-columns:repeat(4,minmax(0,1fr)); }
.section .grid--3:has(> :nth-child(3):last-child){ grid-template-columns:repeat(3,minmax(0,1fr)); }
.section .grid--3:has(> :nth-child(2):last-child){ grid-template-columns:repeat(2,minmax(0,1fr)); }
.section .grid--3:has(> :first-child:last-child) { grid-template-columns:minmax(0,1fr); }
.section .grid--3{ gap:14px; }
/* a seventh card onwards would start a second row */
.section .grid--3 > :nth-child(n+7){ display:none; }

/* the cards themselves get tighter, since six across is a lot narrower than
   three - the type steps down with them rather than overflowing */
.section .grid--3 .catcard{ padding:16px 15px; }
.section .grid--3 .catcard h3{ font-size:15px; line-height:1.25; }
.section .grid--3 .catcard p{ font-size:12px; line-height:1.45; }
.section .grid--3 .catcard span{ font-size:10.5px; letter-spacing:.10em; }
.section .grid--3 .catcard .catcard__i{ width:34px; height:34px; }
.section .grid--3 .catcard .catcard__i svg{ width:18px; height:18px; }

/* below 1100px six narrow columns stop being readable, so it steps down in
   stages rather than squeezing */
@media (max-width:1100px){
  .section .grid--3:has(> :nth-child(4)){ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:820px){
  .section .grid--3:has(> :nth-child(3)){ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .section .grid--3 > :nth-child(n+7){ display:block; }
}
@media (max-width:560px){
  .section .grid--3, .section .grid--3:has(> :nth-child(2)){ grid-template-columns:minmax(0,1fr); }
}
/* ==== CATEGORY_ROW_V1 - end ==== */

/* ==== FOOTER_CHAT_V1 - start ==== */
/* ---- promo tiles, on the Electric palette ---- */
.tb-promos .tb-promo:nth-child(1){ background:#2563EB !important; }
.tb-promos .tb-promo:nth-child(2){ background:#04825b !important; }
.tb-promos .tb-promo:nth-child(3){ background:#9333EA !important; }

/* ---- COMPACT FOOTER ------------------------------------------------------
   Nothing is removed - every link, the blurb, the payment marks and the bar
   are all still there. Only the space between them is taken back: the grid
   padding drops from 52/44/42 to 34/34/26, the column gap from 40 to 30, and
   each link's padding from 6px to 3px. On a nine-link column that alone is
   54px of height. The top margin comes down from 80px to 44px. */
.sitefoot{ margin-top:44px !important; }
.sitefoot .sitefoot__grid{
  gap:30px;
  padding:34px 34px 26px;
  grid-template-columns:1.6fr 1fr 1fr 1.1fr;
}
.sitefoot .sitefoot__col a{ padding:3px 0; font-size:13.5px; }
.sitefoot .sitefoot__col h3,
.sitefoot .sitefoot__col h4{ margin-bottom:10px; font-size:12px; letter-spacing:.12em; }
.sitefoot .sitefoot__about p,
.sitefoot .sitefoot__grid > div:first-child p{ font-size:13px; line-height:1.55; margin-top:12px; }
.sitefoot .sitefoot__bar-in{ padding:12px 34px; font-size:12.5px; }
.sitefoot .sitefoot__pay,
.sitefoot .sitefoot__badges{ padding:10px 0; gap:10px; }
.sitefoot .sitefoot__pay img,
.sitefoot .sitefoot__badges img{ max-height:34px; }
@media (max-width:900px){
  .sitefoot .sitefoot__grid{ gap:24px; padding:26px 22px 20px; }
  .sitefoot .sitefoot__bar-in{ padding:12px 22px; }
}

/* ---- Start chat: the same yellow as Add to Cart ---- */
.sitechat .sitechat__start{
  background:linear-gradient(180deg,#FFD24D,#F5B301) !important;
  color:#1a1205 !important;
  font-weight:700 !important;
  box-shadow:0 3px 10px rgba(245,179,1,.34), inset 0 1px 0 rgba(255,255,255,.5) !important;
}
.sitechat .sitechat__start:hover{ filter:brightness(1.06); color:#1a1205 !important; }

/* ---- the bubble: a squircle rather than a plain circle, and draggable ---- */
.sitechat .sitechat__bubble{
  border-radius:20px !important;
  background:linear-gradient(180deg,#FFD24D,#F5B301) !important;
  color:#1a1205 !important;
  box-shadow:0 8px 22px rgba(245,179,1,.38), inset 0 1px 0 rgba(255,255,255,.55) !important;
  cursor:grab;
  touch-action:none;              /* so a drag on a phone is not a scroll */
}
.sitechat .sitechat__bubble:active{ cursor:grabbing; }
.sitechat.is-dragging .sitechat__bubble{ transform:scale(1.06); }
.sitechat.is-dragging .sitechat__panel{ display:none !important; }
.sitechat .sitechat__badge{ background:#c84b0a !important; color:#fff !important; }
/* ==== FOOTER_CHAT_V1 - end ==== */

/* ==== CART_BUTTONS_V1 - start ==== */
/* Three jobs, three colours:
     yellow  move forward / add           (the Add to Cart yellow)
     green   confirm, commit              #1B6650
     red     undo, empty, go back         #B3261E
   Each button is matched structurally, since CSS cannot read the words in it. */

/* --- shared shape, so the pairs line up --- */
.cartfoot__left button[type="submit"]:not(.linkbtn),
button.linkbtn[form="clearcart"],
.totals a.btn--block,
#coSubmit,
#coSubmit + a.btn--ghost{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:46px; padding:11px 22px; border:0; border-radius:8px;
  font-weight:700; font-size:14px; line-height:1.2; white-space:nowrap;
  text-decoration:none;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  transition:filter .18s, background .18s;
}

/* --- GREEN: Update quantities. Its neighbour "Empty the list" is ALSO a
       type=submit in the same group, and the two selectors tie on weight - so
       which won would have come down to write order. :not(.linkbtn) settles
       it outright. --- */
.cartfoot__left button[type="submit"]:not(.linkbtn){
  background:#1B6650 !important; color:#ffffff !important;
  box-shadow:0 3px 10px rgba(27,102,80,.30) !important;
}
.cartfoot__left button[type="submit"]:not(.linkbtn):hover{ background:#175540 !important; color:#fff !important; }

/* --- RED: Empty the list. Matched on form="clearcart", which nothing else
       on the site carries. --- */
button.linkbtn[form="clearcart"]{
  background:#B3261E !important; color:#ffffff !important;
  box-shadow:0 3px 10px rgba(179,38,30,.28) !important;
}
button.linkbtn[form="clearcart"]:hover{ background:#951f18 !important; color:#fff !important; }

/* --- YELLOW: Continue to details --- */
.totals a.btn--block{
  background:linear-gradient(180deg,#FFD24D,#F5B301) !important; color:#1a1205 !important;
  box-shadow:0 3px 10px rgba(245,179,1,.34), inset 0 1px 0 rgba(255,255,255,.5) !important;
  width:100%;
}
.totals a.btn--block:hover{ filter:brightness(1.06); color:#1a1205 !important; }

/* --- GREEN: Place the order --- */
#coSubmit{
  background:#1B6650 !important; color:#ffffff !important;
  box-shadow:0 3px 10px rgba(27,102,80,.30) !important;
}
#coSubmit:hover{ background:#175540 !important; color:#fff !important; }

/* --- RED: Back to the list. Matched as the link immediately after Place the
       order, so no other ghost link on the site is caught. --- */
#coSubmit + a.btn--ghost{
  background:#B3261E !important; color:#ffffff !important;
  border:0 !important;
  box-shadow:0 3px 10px rgba(179,38,30,.28) !important;
}
#coSubmit + a.btn--ghost:hover{ background:#951f18 !important; color:#fff !important; }
/* ==== CART_BUTTONS_V1 - end ==== */

/* ==== ADDLINE_BTN_V1 - start ==== */
/* The cart's "Add line" - a quote line the customer is adding, so it takes the
   same yellow as Add to Cart. It is the only submit button in that form, which
   is what separates it from everything else on the page. */
form[action*="cart"] .field + button[type="submit"],
.quoteline button[type="submit"],
#part ~ button[type="submit"]{
  background:linear-gradient(180deg,#FFD24D,#F5B301) !important;
  color:#1a1205 !important;
  border:0 !important;
  min-height:46px; padding:11px 22px; border-radius:8px;
  font-weight:700 !important; font-size:14px; white-space:nowrap;
  box-shadow:0 3px 10px rgba(245,179,1,.34), inset 0 1px 0 rgba(255,255,255,.5) !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
/* ==== ADDLINE_BTN_V1 - end ==== */

/* ==== CHECKOUT_COLOURS_V1 - start ==== */
/* ---- the three order-type cards ----------------------------------------
   Each label carries its border, radius and padding as an inline style
   attribute, so !important is the only thing that outranks it. The cards are
   told apart by the VALUE of the radio inside them rather than by position, so
   re-ordering them in the template would not shuffle the colours. */
label.comode{
  color:#ffffff !important;
  border:0 !important;
  border-radius:10px !important;
  transition:filter .18s, box-shadow .18s;
}
label.comode:has(input[value="standard"]){ background:#1B6650 !important; }
label.comode:has(input[value="po"])      { background:#2563EB !important; }
label.comode:has(input[value="quote"])   { background:#c84b0a !important; }
label.comode span{ color:#ffffff !important; }

/* the radio dot has to read on a coloured card, not a white one */
label.comode input[type="radio"]{
  accent-color:#ffffff;
  width:16px; height:16px; flex:none;
}
/* the chosen card lifts, so the selection is still obvious once all three
   are coloured */
label.comode:has(input:checked){
  box-shadow:0 0 0 3px rgba(255,255,255,.55), 0 6px 18px rgba(16,32,52,.22) !important;
  filter:brightness(1.06);
}
label.comode:not(:has(input:checked)){ filter:brightness(.88); }
label.comode:hover{ filter:brightness(1.04); }

/* ---- "Add line" in the cart: form.inlineform, the real class ---- */
form.inlineform button[type="submit"]{
  background:linear-gradient(180deg,#FFD24D,#F5B301) !important;
  color:#1a1205 !important;
  border:0 !important;
  min-height:46px; padding:11px 22px; border-radius:8px;
  font-weight:700 !important; font-size:14px; white-space:nowrap;
  box-shadow:0 3px 10px rgba(245,179,1,.34), inset 0 1px 0 rgba(255,255,255,.5) !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
form.inlineform button[type="submit"]:hover{ filter:brightness(1.06); color:#1a1205 !important; }

/* ---- "Check address with USPS" on CHECKOUT ---- */
#validateAddrBtn{
  background:linear-gradient(180deg,#FFD24D,#F5B301) !important;
  color:#1a1205 !important;
  border:0 !important;
  min-height:46px; padding:11px 22px; border-radius:8px;
  font-weight:700 !important; font-size:14px;
  box-shadow:0 3px 10px rgba(245,179,1,.34), inset 0 1px 0 rgba(255,255,255,.5) !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
#validateAddrBtn:hover{ filter:brightness(1.06); color:#1a1205 !important; }
/* ==== CHECKOUT_COLOURS_V1 - end ==== */

/* ==== RELATED_GRID_V3 - start ==== */
.grid--related{
  gap:14px !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  align-items:stretch;
}
@media (min-width:560px) { .grid--related{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; } }
@media (min-width:860px) { .grid--related{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; } }
@media (min-width:1100px){ .grid--related{ grid-template-columns:repeat(6,minmax(0,1fr)) !important; } }
@media (min-width:1360px){ .grid--related{ grid-template-columns:repeat(8,minmax(0,1fr)) !important; } }
.grid--related > .tile{ min-width:0 !important; }

/* THE COMPACT TILE. Matching the column count alone was half the job - the
   home page also shrinks the tile at that width, and without it a 110px column
   holding a fifteen-word Lenovo part name runs to fifteen lines and the row
   becomes a wall.
   These are the same rules .grid--8 uses on the home page: the name clamped to
   three lines, the part number to one, and everything a size down. Clamping is
   what keeps the cards a uniform height - the full name is still in the link's
   title and on the product page, so nothing is lost, only folded away. */
.grid--related .tile__img img{ max-height:100% !important; }
.grid--related .tile__body{ padding:11px 12px 13px; }
.grid--related .tile__brand{ font-size:9px; letter-spacing:.1em; margin-bottom:5px; }
.grid--related .tile__name{
  font-size:13px; line-height:1.3; margin:0 0 5px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.grid--related .tile__part{
  font-size:10px; margin-bottom:8px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.grid--related .tile__price{ gap:6px; }
.grid--related .price-plain,
.grid--related .price-new{ font-size:15px; }
.grid--related .price-old{ font-size:11px; }
.grid--related .price-ask{ font-size:10.5px; }
.grid--related .tile__add button,
.grid--related .tile__add button[type="submit"]{
  font-size:11px !important; padding:8px 6px !important; min-height:36px !important;
}

/* at six and eight across the rows are narrow enough that four lines of name
   would still be too tall - two reads better and keeps the prices aligned */
@media (min-width:1100px){
  .grid--related .tile__name{ -webkit-line-clamp:2; }
}
/* ==== RELATED_GRID_V3 - end ==== */