/* ============================================================================
   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);

  /* 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(1320px, 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(1320px, 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 {
  width: auto; max-width: none; margin: 0;
  --ub-slant: 45px;
  --ub-edge:  63%;
  background: var(--deep1);
  padding: 0;
  font-size: 13px;
  color: var(--ink);
  border: 0;
}
.utilitybar__in { position: relative; display: block; padding: 0; }
.utilitybar__panel {
  background: var(--accent);
  /* 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;
  max-width: calc(var(--ub-edge) - var(--ub-slant) - 24px);
  padding-left: var(--page-inset); padding-right: 0;
}
.utilitybar .ub {
  display: inline-flex; align-items: center; gap: 9px;
  color: 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-right: var(--page-inset);
  }
  .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. */
.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, and img{max-width:100%} then scaled it down to fit
   whatever was left. flex:none stops the squeeze; the caps below let it sit at
   its natural size without ever being enlarged past it, so it cannot go blurry. */
.brand { flex: none; }
.brand img { height: auto; max-height: 46px; width: auto; max-width: 250px; }
.masthead__in, .mainnav__in {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  padding-left: 0; padding-right: 0;
}
.brand__text { font-weight: 900; letter-spacing: -.02em; color: var(--header-ink); }

/* 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(1320px,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 {
  width: 100%; max-width: none; margin: 0;
  border-radius: 0; box-shadow: none;
  background: var(--deep1); color: #fff;
}
.hero--empty {
  width: 100%;
  border-radius: 0; box-shadow: none;
  padding: 70px 0;
  background: linear-gradient(140deg, var(--deep1), var(--deep2));
}
.hero .wrap { width: min(1320px, 100% - 48px); margin-inline: auto; padding: 0; }
.slide__body { padding-left: 0; padding-right: 0; }

.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 {
  width: auto; max-width: none; margin: 80px 0 0;
  border-radius: 0; box-shadow: none;
  background: var(--foot1);
}
.sitefoot__grid, .sitefoot__bar-in {
  width: min(1320px, 100% - 48px); margin-inline: auto;
  padding-left: 0; padding-right: 0;
}
.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); }
}

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