/* 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; }
}