/* ============================================================
   NMH Incorporated - public stylesheet
   Liquid Glass: translucent layered surfaces, specular edges,
   soft depth. Every colour still comes from the dashboard.
   ============================================================ */

/* ---------- reset ------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html{background:var(--bg)}
body{
  margin:0;color:var(--page-ink);
  font:400 15.5px/1.65 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-feature-settings:"cv11","ss01";
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;position:relative;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--primary);text-decoration:none;transition:color .2s}
a:hover{color:var(--primary-dark)}
p{margin:0 0 1em}
hr{border:0;height:1px;background:var(--g-edge);margin:36px 0}

/* ---------- glass tokens ----------------------------------- */
:root{
  /* surfaces */
  --g-fill:rgba(255,255,255,.58);
  --g-fill-strong:rgba(255,255,255,.78);
  --g-fill-faint:rgba(255,255,255,.34);
  --g-edge:rgba(255,255,255,.72);
  --g-edge-soft:rgba(255,255,255,.42);
  --g-blur:saturate(180%) blur(22px);
  --g-blur-lg:saturate(190%) blur(38px);

  /* depth */
  --sh-1:0 1px 2px rgba(16,32,52,.05), 0 6px 18px rgba(16,32,52,.07);
  --sh-2:0 2px 6px rgba(16,32,52,.06), 0 14px 38px rgba(16,32,52,.10);
  --sh-3:0 4px 12px rgba(16,32,52,.08), 0 26px 62px rgba(16,32,52,.14);
  /* the specular top edge that makes glass read as glass */
  --spec:inset 0 1px 0 rgba(255,255,255,.92), inset 0 -1px 0 rgba(255,255,255,.28);

  /* radii */
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-pill:999px;

  --muted:#5d6b7a;
  --header-ink:#12181F;
  --footer-ink:#ffffff;
  --ease:cubic-bezier(.32,.72,0,1);
}


/* ---------- derived colour tokens ---------------------------
   Static values first so every browser has something usable,
   then re-derived from the dashboard colours where the browser
   supports color-mix(). Change a colour in Site Settings and
   the whole palette follows.                                   */
:root{
  --a-lite:#f4b23c;
  --a22:rgba(242,164,19,.22);
  --a40:rgba(242,164,19,.40);
  --deep1:#131b26;
  --deep2:#16283c;
  --err-bg:rgba(250,229,229,.72);
  --err11:rgba(200,30,30,.11);
  --err24:rgba(200,30,30,.24);
  --foot1:#131b26;
  --foot2:#182b3f;
  --ok-bg:rgba(226,244,233,.72);
  --ok13:rgba(18,122,60,.13);
  --ok14:rgba(18,122,60,.14);
  --ok26:rgba(18,122,60,.26);
  --p-lite:#1a5c95;
  --hdr:rgba(255,255,255,.82);
  --hdr-soft:rgba(255,255,255,.58);
  --soft-tint:rgba(244,246,248,.55);
  --hair:rgba(225,230,235,.9);
  --p10:rgba(15,76,129,.10);
  --p12:rgba(15,76,129,.12);
  --p16:rgba(15,76,129,.16);
  --p18:rgba(15,76,129,.18);
  --p22:rgba(15,76,129,.22);
  --p24:rgba(15,76,129,.24);
  --p26:rgba(15,76,129,.26);
  --p28:rgba(15,76,129,.28);
  --p34:rgba(15,76,129,.34);
  --p36:rgba(15,76,129,.36);
  --p45:rgba(15,76,129,.45);
  --p55:rgba(15,76,129,.55);
  --veil1:rgba(255,255,255,.34);
  --veil2:rgba(255,255,255,.48);
  --veil3:rgba(255,255,255,.60);
}
@supports (color:color-mix(in srgb, red 50%, blue)){
  :root{
    --a-lite:color-mix(in srgb, var(--accent) 88%, white);
    --a22:color-mix(in srgb, var(--accent) 22%, transparent);
    --a40:color-mix(in srgb, var(--accent) 40%, transparent);
    --deep1:color-mix(in srgb, var(--ink) 96%, var(--primary));
    --deep2:color-mix(in srgb, var(--ink) 74%, var(--primary));
    --err-bg:color-mix(in srgb, var(--price-old) 7%, var(--g-fill));
    --err11:var(--err11);
    --err24:var(--err24);
    --foot1:color-mix(in srgb, var(--footer-bg) 96%, var(--primary));
    --foot2:color-mix(in srgb, var(--footer-bg) 78%, var(--primary));
    --ok-bg:color-mix(in srgb, var(--price-new) 7%, var(--g-fill));
    --ok13:var(--ok13);
    --ok14:color-mix(in srgb, var(--price-new) 14%, transparent);
    --ok26:var(--ok26);
    --p-lite:color-mix(in srgb, var(--primary) 88%, white);
    --hdr:color-mix(in srgb, var(--header-bg) 93%, transparent);
    --hdr-soft:color-mix(in srgb, var(--header-bg) 90%, transparent);
    --soft-tint:color-mix(in srgb, var(--bg-soft) 55%, transparent);
    --hair:color-mix(in srgb, var(--line) 90%, transparent);
    --p10:color-mix(in srgb, var(--primary) 10%, transparent);
    --p12:var(--p12);
    --p16:color-mix(in srgb, var(--primary) 16%, transparent);
    --p18:color-mix(in srgb, var(--primary) 18%, transparent);
    --p22:color-mix(in srgb, var(--primary) 22%, transparent);
    --p24:color-mix(in srgb, var(--primary) 24%, transparent);
    --p26:color-mix(in srgb, var(--primary) 26%, transparent);
    --p28:color-mix(in srgb, var(--primary) 28%, transparent);
    --p34:color-mix(in srgb, var(--primary) 34%, transparent);
    --p36:color-mix(in srgb, var(--primary) 36%, transparent);
    --p45:color-mix(in srgb, var(--primary) 45%, transparent);
    --p55:color-mix(in srgb, var(--primary) 55%, transparent);
    --veil1:color-mix(in srgb, var(--bg) 34%, transparent);
    --veil2:color-mix(in srgb, var(--bg) 48%, transparent);
    --veil3:color-mix(in srgb, var(--bg) 60%, transparent);
  }
}

/* ---------- ambient backdrop -------------------------------
   Glass needs something behind it. Soft colour fields, tinted
   from the dashboard palette, are painted onto the body itself
   are painted onto the body itself, sized in viewport units so
   they stay consistent on any page length. No fixed attachment:
   it stutters badly on iOS Safari.                             */
body{
  background-color:transparent;
  background-image:
    linear-gradient(180deg, var(--veil1) 0%, var(--veil2) 52%, var(--veil3) 100%),
    radial-gradient(1150px 950px  at 8% 3%,   var(--p26), transparent 60%),
    radial-gradient(950px 820px   at 96% 11%, var(--a22), transparent 58%),
    radial-gradient(1250px 1050px at 72% 88%, var(--p16), transparent 62%);
  background-repeat:no-repeat;
}

/* ---------- page width -------------------------------------
   ONE column for the whole page.
     --page-w      how wide the page is ever allowed to get
     --page-gutter space kept clear at the edge of the screen (total, so
                   half of it lands on each side)
     --band-pad    the inset the content sits at inside every band, so the
                   contact bar, the hero, every section and the footer all
                   share one left edge and one right edge
   header.php restates these three after theme.css, so a themed site follows
   the same numbers. Change them in one place and the whole page moves. */
:root{--page-w:1440px;--page-gutter:40px;--band-pad:22px}
.wrap{width:min(var(--page-w),100% - var(--page-gutter));margin-inline:auto;padding-inline:var(--band-pad)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:0;background:var(--primary);color:#fff;padding:12px 20px;border-radius:var(--r-pill);z-index:99}
.skip:focus{left:14px;top:14px}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:6px}

/* ---------- glass primitive -------------------------------- */
.glass,.card,.catcard,.tile,.sidemenu,.sidemenu__aside,.ordersummary,.tblwrap,.notice,.empty{
  background:var(--g-fill);
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  border:1px solid var(--g-edge);
  box-shadow:var(--sh-1),var(--spec);
  border-radius:var(--r-lg);
}

/* ---------- typography ------------------------------------- */
/* Base headings use the adaptive page ink so section titles on the page
   background flip with a dark/light background. Headings and text INSIDE glass
   panels are pinned to the normal dark --ink just below, because those panels
   are light surfaces whatever the page colour is. */
h1,h2,h3,h4,h5{
  font-family:inherit;font-weight:600;line-height:1.12;margin:0 0 .5em;
  letter-spacing:-.028em;color:var(--page-ink);
}

/* SAFETY: any text living inside a glass panel stays dark-on-light, so auto page
   contrast can never turn card text invisible. Covers the glass surfaces and the
   common inner elements. */
.glass, .glass h1, .glass h2, .glass h3, .glass h4, .glass h5, .glass p, .glass li, .glass td, .glass th,
.card, .card h1, .card h2, .card h3, .card h4, .card h5, .card p, .card li,
.catcard, .catcard h3, .catcard p,
.tile, .tile p, .tile__name a,
.sidemenu, .sidemenu__aside, .ordersummary, .ordersummary li,
.tblwrap, .tblwrap td, .tblwrap th,
.notice, .empty, .spectable td, .artcard__body, .artcard__body h3{
  color:var(--ink);
}

/* SAFETY: size the utility-bar icons here in the always-loaded stylesheet. These
   were previously sized only in theme.css, so if that file did not load the icons
   rendered at full size and broke the header layout. Pinning them here means the
   header stays correct whatever else happens. */
.utilitybar .ub{display:inline-flex;align-items:center;gap:6px}
.utilitybar .ub__i{display:inline-flex;width:16px;height:16px;flex:none;vertical-align:middle}
.utilitybar .ub__i svg{width:100%;height:100%}
/* also cap any stray inline SVG inside the header so nothing can blow up the bar */
.utilitybar svg{max-width:16px;max-height:16px}
/* cart/badge icon: keep it sane even if the skin stylesheet is missing, so the
   top bar never renders a giant icon. Scoped to the badge only - never the logo. */
.badge__ico{display:inline-flex;width:21px;height:21px}
.badge__ico svg{width:100%;height:100%}

/* Utility bar on ONE line, with text in the theme colour. Defined here (the
   always-loaded stylesheet) so it looks right whether or not the skin file loads.
   The colour uses --header-ink, which changes automatically with the chosen theme
   and header colours. */
/* Utility bar row. It carries the .wrap class in the markup, so it already lines
   up with the page content - we must NOT add horizontal padding that fights that.
   Items sit on one line and wrap to a second line only if they genuinely do not
   fit, rather than forcing a scrollbar. Text is bold and in the theme colour. */
/* Utility bar row - see the alignment fix at the .utilitybar__in / __panel rules
   further down (they must come after the originals to take effect). */
.utilitybar__row{
  display:flex;align-items:center;gap:8px 30px;flex-wrap:wrap;
  padding:11px 22px;overflow:visible;
  background:var(--topbar-bg, transparent);
  border:1px solid color-mix(in srgb, var(--topbar-ink, var(--primary)) 28%, transparent);
  border-radius:var(--r-xl);
}
/* shape options (chosen in Site Settings). */
.utilitybar__row.ubshape--pill{border-radius:999px}
.utilitybar__row.ubshape--rounded{border-radius:var(--r-xl)}
.utilitybar__row.ubshape--square{border-radius:10px}
.utilitybar__row.ubshape--sharp{border-radius:0}
.utilitybar__row.ubshape--underline{
  border:0;border-bottom:1px solid color-mix(in srgb, var(--topbar-ink, var(--primary)) 28%, transparent);
  border-radius:0;padding-left:4px;padding-right:4px;
}
.utilitybar__row.ubshape--none{border:0;border-radius:0;padding-left:4px;padding-right:4px}
.utilitybar__row .ub{
  color:var(--topbar-ink, var(--primary));font-weight:700;font-size:13px;white-space:nowrap;
  text-decoration:none;display:inline-flex;align-items:center;gap:8px;
}
.utilitybar__row .ub:hover{color:var(--topbar-ink-hover, var(--primary-dark))}
.utilitybar__row .ub--hours{margin-left:auto}
@media (max-width:720px){
  .utilitybar__row{justify-content:center;gap:6px 18px}
  .utilitybar__row .ub--hours{margin-left:0}
}
h1{font-size:clamp(31px,4vw,50px);font-weight:650;letter-spacing:-.035em}
h2{font-size:clamp(24px,2.6vw,34px)}
h3{font-size:20px;letter-spacing:-.022em}
h4{font-size:16px}

.eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--primary);margin:0 0 14px;
  padding:5px 12px;border-radius:var(--r-pill);
  background:var(--p10);
  border:1px solid var(--p18);
}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13px;letter-spacing:-.01em}

/* ---------- buttons ---------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:600 14.5px/1 "Inter",sans-serif;letter-spacing:-.01em;
  padding:13px 24px;border-radius:var(--r-pill);cursor:pointer;
  border:1px solid transparent;position:relative;overflow:hidden;
  background:linear-gradient(180deg,
    var(--p-lite),
    var(--primary));
  color:#fff;
  box-shadow:0 1px 2px rgba(16,32,52,.10), 0 8px 22px var(--p28),
             inset 0 1px 0 rgba(255,255,255,.34);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), filter .2s;
}
.btn:hover{
  color:#fff;transform:translateY(-1.5px);
  box-shadow:0 2px 4px rgba(16,32,52,.12), 0 14px 32px var(--p36),
             inset 0 1px 0 rgba(255,255,255,.42);
}
.btn:active{transform:translateY(0) scale(.985)}

.btn--ghost{
  background:var(--g-fill-strong);color:var(--primary);
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  border-color:var(--g-edge);
  box-shadow:var(--sh-1),var(--spec);
}
.btn--ghost:hover{background:#fff;color:var(--primary-dark);box-shadow:var(--sh-2),var(--spec)}

.btn--accent{
  background:linear-gradient(180deg, var(--a-lite), var(--accent));
  color:#1a1205;
  box-shadow:0 1px 2px rgba(16,32,52,.10), 0 8px 22px var(--a40),
             inset 0 1px 0 rgba(255,255,255,.5);
}
.btn--accent:hover{color:#1a1205}
.btn--sm{padding:9px 16px;font-size:13.5px}
.btn--block{width:100%}

/* ---------- utility bar + masthead -------------------------- */
.utilitybar{
  font-size:12.5px;color:var(--muted);
  padding-top:14px;
}
/* plain full-width wrappers so the row's .wrap class centres and lines up with the
   masthead below (these come after the base rules, so they take effect) */
.utilitybar__in{display:block;padding:0}
.utilitybar__panel{display:block;background:none;padding:0;margin:0;-webkit-clip-path:none;clip-path:none;max-width:none}
.utilitybar a{color:var(--primary);font-weight:700}
.utilitybar a:hover{color:var(--primary-dark)}

.masthead{position:sticky;top:0;z-index:40;padding:10px 0 0}
.masthead__in{
  display:flex;align-items:center;gap:24px;padding:12px 14px 12px 20px;
  background:var(--hdr);
  -webkit-backdrop-filter:var(--g-blur-lg);backdrop-filter:var(--g-blur-lg);
  border:1px solid var(--g-edge);border-radius:var(--r-xl);
  box-shadow:var(--sh-2),var(--spec);
}
.brand img{max-height:66px;width:auto}
.brand:hover{opacity:.82}
.brand__text{font-size:22px;font-weight:650;letter-spacing:-.03em;color:var(--header-ink)}

.masthead__search{margin-left:auto;display:flex;flex:1;max-width:400px;position:relative}
.masthead__search input{
  flex:1;min-width:0;border:1px solid var(--g-edge-soft);border-radius:var(--r-pill);
  padding:11px 96px 11px 18px;font:inherit;font-size:14px;
  background:rgba(255,255,255,.55);color:var(--ink);
  transition:border-color .2s, background .2s, box-shadow .2s;
}
.masthead__search input::placeholder{color:var(--muted);opacity:.75}
.masthead__search input:focus{
  outline:none;background:#fff;border-color:var(--p45);
  box-shadow:0 0 0 4px var(--p12);
}
.masthead__search button{
  position:absolute;right:4px;top:4px;bottom:4px;
  border:0;border-radius:var(--r-pill);padding:0 18px;cursor:pointer;
  background:linear-gradient(180deg, var(--p-lite), var(--primary));
  color:#fff;font:600 13px/1 "Inter",sans-serif;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
}
.navtoggle{
  display:none;background:var(--g-fill);border:1px solid var(--g-edge);
  border-radius:14px;padding:10px 11px;cursor:pointer;
}
.navtoggle span{display:block;width:18px;height:2px;background:var(--ink);margin:4px 0;border-radius:2px}

/* ---------- main nav (glass pills) -------------------------- */
.mainnav{margin-top:10px;position:relative;z-index:60}
.hasdrop{position:relative}
.hasdrop:hover,.hasdrop:focus-within,.hasdrop.open{z-index:70}
.mainnav__in{
  display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:7px 8px;
  position:relative;z-index:1;
  background:var(--hdr-soft);
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  border:1px solid var(--g-edge);border-radius:var(--r-pill);
  box-shadow:var(--sh-1),var(--spec);
}
.hasdrop > a{cursor:pointer}
.mainnav a{
  color:var(--header-ink);padding:9px 17px;border-radius:var(--r-pill);
  font-weight:500;font-size:14.5px;letter-spacing:-.012em;
  transition:background .2s, color .2s;
}
.mainnav a:hover{background:color-mix(in srgb, var(--header-ink) 12%, transparent);color:var(--header-ink)}
.mainnav a.is-active{
  background:color-mix(in srgb, var(--header-ink) 14%, transparent);
  color:var(--header-ink);font-weight:600;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--header-ink) 24%, transparent);
}
.mainnav__cta{
  margin-left:auto;
  background:linear-gradient(180deg, var(--a-lite), var(--accent))!important;
  color:#1a1205!important;font-weight:600!important;
  box-shadow:0 4px 14px var(--a40), inset 0 1px 0 rgba(255,255,255,.5);
}
.mainnav__cta:hover{filter:brightness(1.04);color:#1a1205!important}
.navcount{
  display:inline-block;min-width:20px;padding:2px 6px;margin-left:6px;
  background:rgba(0,0,0,.22);color:#1a1205;border-radius:var(--r-pill);
  font-family:"IBM Plex Mono",monospace;font-size:11px;text-align:center;
}

.dropdown{
  position:absolute;top:100%;left:0;min-width:270px;margin-top:10px;
  background:var(--hdr);
  -webkit-backdrop-filter:var(--g-blur-lg);backdrop-filter:var(--g-blur-lg);
  border:1px solid var(--g-edge);border-radius:var(--r-md);
  box-shadow:var(--sh-3),var(--spec);
  padding:7px;display:none;z-index:80;pointer-events:auto;
}
/* The menu opens on hover via pure CSS so it works even if JavaScript is
   blocked or the device is misdetected. A transparent bridge fills the gap
   above the panel so moving the pointer into it never closes the menu.
   JS still adds .open/.is-open for click/tap on touch devices. */
.dropdown::before{content:"";position:absolute;top:-14px;left:0;right:0;height:16px}
.hasdrop:hover .dropdown,.hasdrop:focus-within .dropdown,.hasdrop.open .dropdown,.dropdown.is-open{display:block;animation:drop .24s var(--ease)}
@keyframes drop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.dropdown.is-open{pointer-events:auto!important}
.dropdown a{pointer-events:auto!important;position:relative;z-index:1}
.dropdown a{
  display:block;color:var(--header-ink);padding:10px 14px;border-radius:11px;
  font-size:14px;font-weight:450;
}
.dropdown a:hover{background:color-mix(in srgb, var(--header-ink) 12%, transparent);color:var(--header-ink)}

/* ---------- notices ---------------------------------------- */
.notice{
  margin:20px 0;padding:15px 20px;font-size:14.5px;
  border-radius:var(--r-md);
  border-left:3px solid var(--primary);
}
.notice--err{border-left-color:var(--price-old);background:var(--err-bg)}
.notice--ok{border-left-color:var(--price-new);background:var(--ok-bg)}

/* ---------- hero ------------------------------------------- */
.hero{position:relative;margin:26px 0 0;border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--sh-3);isolation:isolate;display:grid}
.hero,.hero__inner{width:min(var(--page-w),100% - var(--page-gutter));margin-inline:auto}
.hero > .slide{grid-area:1 / 1}
.slide{position:relative;min-height:clamp(330px,40vw,470px);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .7s var(--ease), visibility 0s linear .7s}
.slide.is-on{opacity:1;visibility:visible;pointer-events:auto;z-index:1;transition:opacity .7s var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.slide img{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;width:100%;height:100%;object-fit:cover}
.slide__mask{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;
  background:linear-gradient(100deg, rgba(8,14,24,.72) 0%, rgba(8,14,24,.34) 48%, rgba(8,14,24,.04) 100%)}

/* A banner that already carries its own artwork and wording is shown whole:
   full width, its own proportions, nothing cropped and nothing laid over it. */
.slide--plain{min-height:0}
.slide--plain img{position:static;width:100%;height:auto;object-fit:contain}
.slide__link{display:block}
.slide__link:hover{opacity:.95}
.slide__body{position:relative;display:flex;align-items:center;min-height:clamp(330px,40vw,470px);padding:48px 44px}
.slide__card{max-width:640px;color:#fff}
.slide__card .eyebrow{
  color:#fff;background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.26);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.slide__card h2{font-size:clamp(30px,4.2vw,52px);color:#fff;margin-bottom:16px;letter-spacing:-.035em}
.slide__card p{font-size:17.5px;opacity:.9;margin-bottom:26px;max-width:52ch}
.hero__dots{position:absolute;left:0;right:0;bottom:22px;display:flex;gap:8px;justify-content:center;z-index:3}
.hero__dots button{
  width:30px;height:5px;border:0;padding:0;cursor:pointer;border-radius:var(--r-pill);
  background:rgba(255,255,255,.45);transition:background .25s, width .25s var(--ease);
  box-shadow:0 0 0 1px rgba(0,0,0,.14), 0 1px 3px rgba(0,0,0,.22);
}
.hero__dots button.is-on{background:#fff;width:44px}

.hero--empty{
  padding:70px 48px;border-radius:var(--r-xl);
  background:linear-gradient(140deg,
    var(--deep1),
    var(--deep2));
  color:#fff;box-shadow:var(--sh-3);
}
.hero--empty h1{color:#fff}
.hero--empty p{opacity:.82;max-width:62ch;font-size:17px}
.hero--empty .eyebrow{color:#fff;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.24)}

/* ---------- sections --------------------------------------- */
.section{padding:66px 0}
.section--soft{padding:0}
.section--soft > .wrap{
  padding:56px 40px;border-radius:var(--r-xl);
  background:var(--soft-tint);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid var(--g-edge-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.section__head{max-width:760px;margin-bottom:38px}
.section__head p{color:var(--muted);font-size:17px}

/* ---------- section heading styles -------------------------
   Chosen in Site Settings > Theme style > Section headings. header.php puts
   the choice on <body> as hs-classic / hs-rule / hs-hairline / hs-underline /
   hs-bar, so one setting restyles every section heading on the site.

   Two deliberate decisions:
   1. These selectors lead with body.hs-* so they outrank a theme skin's plain
      .eyebrow rule whatever order the stylesheets load in.
   2. NONE of them set the eyebrow COLOUR. That is left to whatever the site
      already uses - the blue of style.css, or the amber a skin sets - so a
      site keeps its own palette and only the shape changes. The accent bars
      are drawn from --accent and --primary, which every site defines. */
body[class*="hs-"] .section__head h2{font-size:clamp(26px,3.1vw,36px);line-height:1.1;letter-spacing:-.022em}
body[class*="hs-"] .section__head p{font-size:16.5px;line-height:1.6;max-width:56ch;margin-top:12px}

/* 1. rule + label - a short gradient dash leads the label */
body.hs-rule .section__head .eyebrow{
  display:flex;align-items:center;gap:10px;background:none;border:0;padding:0;margin:0 0 13px;
  border-radius:0;letter-spacing:.16em;
}
body.hs-rule .section__head .eyebrow::before{
  content:"";width:26px;height:3px;border-radius:2px;flex:none;
  background:linear-gradient(90deg,var(--accent),var(--primary));
}

/* 2. editorial hairline - the label sits on a rule that fades out */
body.hs-hairline .section__head .eyebrow{
  display:flex;align-items:center;gap:16px;background:none;border:0;padding:0;margin:0 0 15px;
  border-radius:0;letter-spacing:.16em;
}
body.hs-hairline .section__head .eyebrow::after{
  content:"";height:1px;flex:1;background:linear-gradient(90deg,var(--p18),transparent);
}

/* 3. kept pill, plus a short underline under the heading */
body.hs-underline .section__head .eyebrow{padding:4px 11px;margin:0 0 14px}
body.hs-underline .section__head h2{padding-bottom:14px;position:relative}
body.hs-underline .section__head h2::after{
  content:"";position:absolute;left:0;bottom:0;width:64px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--primary));
}

/* 4. left accent bar down the whole heading block */
body.hs-bar .section__head{position:relative;padding-left:20px}
body.hs-bar .section__head::before{
  content:"";position:absolute;left:0;top:4px;bottom:4px;width:3px;border-radius:2px;
  background:linear-gradient(180deg,var(--accent),var(--primary));
}
body.hs-bar .section__head .eyebrow{
  display:block;width:max-content;max-width:100%;background:none;border:0;padding:0;
  margin:0 0 11px;border-radius:0;letter-spacing:.16em;
}
/* the customers strip centres its heading, so the left bar is dropped there */
body.hs-bar .logostrip--customers .section__head{padding-left:0}
body.hs-bar .logostrip--customers .section__head::before{display:none}
body.hs-bar .logostrip--customers .section__head .eyebrow{margin-inline:auto}

.pagehead{padding:44px 0 30px}
.pagehead h1{margin:0}
.crumbs{
  font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--muted);
  padding:0 0 18px;
}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--primary)}
.crumbs span{margin:0 7px;opacity:.5}

/* ---------- cards ------------------------------------------ */
.grid{display:grid;gap:22px}
.grid--3{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
/* RELATED_GRID_V1
   Related products used .grid--4 - auto-fill minmax(250px) - which gave about
   five wide columns while the home page showed eight narrow ones, so the same
   tile appeared at two different sizes on one visit. The related row now
   follows the home page's breakpoints, and takes the compact tile with them:
   matching the column count without shrinking the tile leaves a 110px column
   holding a fifteen-word part name, which runs to a dozen lines.
   Its own class, because .grid--4 is also the catalogue and brands listing. */
.grid--related{gap:14px;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
@media (min-width:560px) {.grid--related{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:860px) {.grid--related{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1100px){.grid--related{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (min-width:1360px){.grid--related{grid-template-columns:repeat(8,minmax(0,1fr))}}
.grid--related > .tile{min-width:0}
.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{font-size:11px;padding:8px 6px;min-height:36px}
@media (min-width:1100px){.grid--related .tile__name{-webkit-line-clamp:2}}

.card{padding:26px}
.card h3{margin-bottom:8px}
.card p{color:var(--muted);font-size:14.5px;margin:0}

.catcard{
  padding:26px;display:block;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), background .28s;
}
.catcard:hover{
  transform:translateY(-4px);background:var(--g-fill-strong);
  box-shadow:var(--sh-3),var(--spec);
}
.catcard h3{color:var(--ink);margin-bottom:6px}
.catcard p{color:var(--muted);font-size:14px;margin:0}
.catcard span{
  display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:11px;
  color:var(--primary);letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px;
}

/* NOTE: this block used to be printed inline on the home page only. It lives
   here now so the markets page and the about page can use the same cards.
   It must stay AFTER .catcard span above: `.catcard span` and
   `.catcard--auto > span` have equal specificity, so order decides. */
/* ---- auto-styled category / market cards -------------------------------
   Each card carries one number, --cc, chosen from its own title by
   home_card_look(). The chip, the watermark and the accent line are all
   derived from it, so the colour always matches the icon and no card
   needs configuring. Only cards that opt in with .catcard--auto change -
   the .catcard on about.php and tab.php is untouched. */
.catcard--auto{position:relative;overflow:hidden}
.catcard--auto > *:not(.catcard__bg){position:relative}
.catcard--auto::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,hsl(var(--cc),70%,52%),hsl(var(--cc),70%,52%) 32%,transparent);
}
/* the oversized icon sitting in the corner, kept faint so the text stays first */
.catcard__bg{
  position:absolute;top:-22px;right:-20px;width:96px;height:96px;
  color:hsl(var(--cc),62%,45%);opacity:.07;pointer-events:none;font-style:normal;
}
.catcard__bg svg{width:100%;height:100%}
.catcard__i{
  display:grid;place-items:center;width:44px;height:44px;border-radius:13px;
  background:hsl(var(--cc),85%,95%);color:hsl(var(--cc),66%,42%);
  border:1px solid hsl(var(--cc),58%,88%);margin-bottom:14px;font-style:normal;
  transition:background .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease);
}
.catcard__i svg{width:22px;height:22px}
.catcard--auto:hover .catcard__i{background:hsl(var(--cc),68%,48%);color:#fff;border-color:transparent}
.catcard--auto:hover .catcard__bg{opacity:.1}
/* The product count gets its own line and its own hue. display:block matters:
   .catcard span is inline-block, so without this it would sit on the same line
   as the icon chip. max-content keeps the tinted text tight to the number. */
.catcard--auto > span{display:block;width:max-content;max-width:100%;color:hsl(var(--cc),58%,42%)}
@media (max-width:560px){
  .catcard__i{width:38px;height:38px;border-radius:11px;margin-bottom:11px}
  .catcard__i svg{width:19px;height:19px}
  .catcard__bg{top:-18px;width:78px;height:78px}
}
@media (prefers-reduced-motion:reduce){.catcard__i{transition:none}}

/* ---------- product list view (includes/product-row.php) -----------------
   The trade listing: one product per line, with the part number, brand, SKU,
   live stock, price and a quantity box all visible at once, so twenty products
   can be compared without scrolling.

   The row degrades on its own: a site with no stock figures, no part numbers
   or no cart simply renders fewer columns - nothing here assumes a field
   exists. Below 720px it folds to two rows rather than squeezing six columns
   onto a phone. */
.plist{background:var(--card,#fff);border:1px solid var(--hair);border-radius:var(--r-md);overflow:hidden}
.prow{display:flex;gap:16px;padding:14px 16px;border-bottom:1px solid var(--hair);align-items:flex-start}

/* ICECAT_SPECS_PDP: the group heading inside the specification table - a full
   width row that introduces the rows under it, so a long Icecat datasheet
   reads as sections rather than one flat list. */
.spectable .specgroup th,
table .specgroup th{
  background:var(--bg-soft,#f5f7f9);
  color:var(--ink);
  font-size:12.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding-top:14px;
}
.prow:last-child{border-bottom:0}
.prow:hover{background:color-mix(in srgb, var(--primary) 3%, transparent)}

.prow__img{flex:none;width:92px;height:82px;display:grid;place-items:center;padding:6px;
  background:var(--bg-soft);border:1px solid var(--hair);border-radius:var(--r-sm);overflow:hidden}
.prow__img img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.prow__none{font-size:10px;color:var(--muted)}

.prow__main{flex:1;min-width:0}
.prow__name{margin:0 0 5px;font-size:15px;line-height:1.32;font-weight:600}
.prow__name a{color:var(--primary)}
.prow__name a:hover{text-decoration:underline}
.prow__meta{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:11.5px;color:var(--muted);margin-bottom:5px}
.prow__meta b{color:var(--ink);font-weight:600}
.prow__stock{display:inline-block;font-size:11.5px;font-weight:700;color:var(--muted)}
.prow__stock.is-ok{color:#0f7b3f}
.prow__stock.is-low{color:#b06a00}
.prow__stock.is-out{color:#b03a3a}

.prow__buy{flex:none;width:186px;display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.prow__was{font-size:12px;color:var(--muted);text-decoration:line-through}
.prow__now{font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.prow__save{font-size:11px;font-weight:700;color:#0f7b3f}
.prow__unit{font-size:10.5px;color:var(--muted);margin-bottom:7px}
.prow__ask{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:7px}
.prow__add{display:flex;gap:7px;align-items:center;width:100%;justify-content:flex-end}
.prow__qty input{width:58px;padding:7px 6px;text-align:center;font-size:13px;
  border:1px solid var(--hair);border-radius:var(--r-sm);background:var(--card,#fff);color:var(--ink)}
.prow__buy .btn{white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:720px){
  .prow{flex-wrap:wrap;gap:12px}
  .prow__main{flex:1 1 auto;min-width:0}
  .prow__buy{width:100%;flex-direction:row;align-items:center;justify-content:space-between;
    text-align:left;border-top:1px solid var(--hair);padding-top:10px;flex-wrap:wrap}
  .prow__unit,.prow__was{margin:0}
  .prow__add{width:auto}
}

/* ---------- card style (Site Settings > Theme style > Card style) ---------
   Four looks for the auto-styled cards on Shop by category and Who we supply.
   header.php puts the choice on <body> as cs-accent / cs-solid / cs-outline /
   cs-tint. Every one is built from the SAME --cc hue the card already picked
   from its own title, so no option needs configuring and all four follow the
   card's own colour. cs-accent is the default and is the base above, so it
   needs no rules of its own. */

/* Solid - the icon is filled with the colour, no rule across the top */
body.cs-solid .catcard--auto::before{display:none}
body.cs-solid .catcard__i{background:hsl(var(--cc),66%,47%);color:#fff;border-color:transparent}
body.cs-solid .catcard--auto:hover .catcard__i{background:hsl(var(--cc),66%,39%)}
body.cs-solid .catcard__bg{opacity:.06}

/* Outline - a colour rule down the left edge, and an outlined icon */
body.cs-outline .catcard--auto{padding-left:30px}
body.cs-outline .catcard--auto::before{top:0;bottom:0;left:0;right:auto;width:3px;height:auto;
  background:hsl(var(--cc),68%,52%)}
body.cs-outline .catcard__i{background:transparent;color:hsl(var(--cc),64%,44%);
  border:1.5px solid hsl(var(--cc),58%,74%)}
body.cs-outline .catcard--auto:hover .catcard__i{background:hsl(var(--cc),66%,47%);color:#fff;border-color:transparent}
body.cs-outline .catcard__bg{display:none}

/* Tinted - the whole card takes a wash of its own colour */
body.cs-tint .catcard--auto{background:hsl(var(--cc),64%,97.2%);border-color:hsl(var(--cc),46%,90%)}
body.cs-tint .catcard--auto:hover{background:hsl(var(--cc),64%,95.6%)}
body.cs-tint .catcard--auto::before{display:none}
body.cs-tint .catcard__i{background:hsl(var(--cc),66%,47%);color:#fff;border-color:transparent}
body.cs-tint .catcard--auto:hover .catcard__i{background:hsl(var(--cc),66%,39%)}
body.cs-tint .catcard__bg{opacity:.05}

/* ---------- category sidebar (nav_mode: sidebar / sidebar-dark / drawer) ----
   Nothing here applies unless <body> carries .has-rail, which header.php only
   adds for those three modes - so the default dropdown and tabs menus are
   completely untouched.

   The rail is drawn from the SAME tokens the header and its dropdown already
   use - --hdr for the surface, --header-ink for the text, --g-edge, --r-md,
   --sh-3, --spec for the panel - so it takes the site's colours automatically
   and reads as the header turned on its side rather than a grey box bolted on.
   There is deliberately no border between the rail and the page.

   The docked modes reserve their width with padding-left on <body>. Every band
   already measures itself against its container through --band-w and
   --page-inset, so the contact bar, header, hero, sections and footer shift
   together and stay on one edge. Below 1100px the rail stops reserving space
   and slides in over the page, which is what 'drawer' does at every width.  */
:root{--nav-rail:258px}

.catrail{
  position:fixed;top:calc(var(--rail-top,0px) + 10px);left:14px;bottom:16px;
  width:calc(var(--nav-rail) - 28px);z-index:70;
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  background:var(--hdr);
  -webkit-backdrop-filter:var(--g-blur-lg);backdrop-filter:var(--g-blur-lg);
  border:1px solid var(--g-edge);border-radius:var(--r-lg);
  box-shadow:var(--sh-2),var(--spec);
  transform:translateX(calc(-100% - 20px));transition:transform .26s var(--ease);
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb, var(--header-ink) 20%, transparent) transparent;
}
.catrail::-webkit-scrollbar{width:7px}
.catrail::-webkit-scrollbar-track{background:transparent}
.catrail::-webkit-scrollbar-thumb{background:color-mix(in srgb, var(--header-ink) 18%, transparent);border-radius:4px}
.catrail::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb, var(--header-ink) 30%, transparent)}
body.rail-dock .catrail{transform:none}
body.rail-open .catrail{transform:none;box-shadow:var(--sh-3),var(--spec)}
body.rail-dock{padding-left:var(--nav-rail)}
/* overlays that pin themselves to the viewport have to clear the rail */
body.rail-dock .sitechat{left:calc(22px + var(--nav-rail))}
body.rail-dock .cookiebar{left:calc(16px + var(--nav-rail))}

/* Just a close control, and only when the rail is an overlay - a docked column
   has nothing to close. No label, no rule, nothing to separate it from the page. */
.catrail__h{display:flex;justify-content:flex-end;padding:10px 12px 2px;border:0;background:none}
.catrail__x{
  background:none;border:0;font-size:24px;line-height:1;cursor:pointer;padding:0 4px;
  color:color-mix(in srgb, var(--header-ink) 55%, transparent);
}
.catrail__x:hover{color:var(--header-ink)}
body.rail-dock .catrail__h{display:none}

.catrail__n{padding:8px 10px 26px;display:flex;flex-direction:column;gap:1px}
/* the links are the menu-bar links, stacked - same colour, same pill, same hover */
.catrail__l,.catrail__t{
  display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  padding:9px 14px;border-radius:var(--r-pill);font-size:14px;font-weight:500;line-height:1.35;
  letter-spacing:-.012em;color:var(--header-ink);text-decoration:none;background:none;border:0;
  cursor:pointer;text-align:left;font-family:inherit;transition:background .2s,color .2s;
}
.catrail__l:hover,.catrail__t:hover,
.catrail__g.is-open .catrail__t{background:color-mix(in srgb, var(--header-ink) 12%, transparent)}
.catrail__l.is-active,.catrail__t.is-active{background:color-mix(in srgb, var(--header-ink) 14%, transparent);font-weight:600}
.catrail__t svg{width:15px;height:15px;flex:none;opacity:.45;transition:transform .2s}
.catrail__g.is-open .catrail__t svg{transform:rotate(90deg);opacity:.75}

/* The submenu is the tab menu's dropdown, opened to the side: same surface,
   same border, same shadow, same link treatment. The list never grows, so
   nothing below a group moves. --fly-top is set from the button when it opens. */
.catrail__g{position:relative}
.catrail__b{
  display:none;position:fixed;left:calc(var(--nav-rail) - 8px);top:var(--fly-top,120px);
  min-width:238px;max-width:300px;max-height:min(62vh,440px);overflow-y:auto;z-index:72;
  flex-direction:column;margin-left:8px;padding:7px;
  background:var(--hdr);
  -webkit-backdrop-filter:var(--g-blur-lg);backdrop-filter:var(--g-blur-lg);
  border:1px solid var(--g-edge);border-radius:var(--r-md);box-shadow:var(--sh-3),var(--spec);
}
.catrail__g.is-open .catrail__b{display:flex;animation:drop .24s var(--ease)}
.catrail__b a{
  display:block;color:var(--header-ink);padding:10px 14px;border-radius:11px;
  font-size:14px;font-weight:450;text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.catrail__b a:first-child{font-weight:600}
.catrail__b .catrail__bh{font-weight:600;margin-top:4px}
.catrail__b .catrail__bs{padding-left:26px;font-size:13px;
  color:color-mix(in srgb, var(--header-ink) 68%, transparent)}
.catrail__b .catrail__bs:hover{color:var(--header-ink)}
.catrail__b a:hover{background:color-mix(in srgb, var(--header-ink) 12%, transparent)}
/* below this a side panel would run off the screen, so it opens underneath the
   group instead - still only on click */
@media (max-width:760px){
  .catrail__b{position:static;min-width:0;max-width:none;max-height:none;overflow:visible;
    margin:1px 0 6px 14px;padding:0;background:none;border:0;border-radius:0;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none}
  .catrail__b a{white-space:normal;padding:8px 12px;font-size:13.5px;
    color:color-mix(in srgb, var(--header-ink) 72%, transparent)}
}

/* the quote / cart button that used to close the menu bar */
.catrail__cta{
  display:block;margin:18px 4px 0;padding:11px 14px;border-radius:var(--r-pill);text-align:center;
  background:linear-gradient(180deg, var(--a-lite), var(--accent));
  color:#1a1205;font-size:13.5px;font-weight:600;text-decoration:none;
  box-shadow:0 4px 14px var(--a40), inset 0 1px 0 rgba(255,255,255,.5);
}
.catrail__cta:hover{filter:brightness(1.04);color:#1a1205}

/* the dark option: an explicit dark surface, with its own ink for everything
   that reads from --header-ink above */
body.rail-sidebar-dark .catrail{background:#0f1b2c;border-color:rgba(255,255,255,.12);--header-ink:#e8eef6}
body.rail-sidebar-dark .catrail__b{background:#16243a;border-color:rgba(255,255,255,.12);--header-ink:#e8eef6}

/* The hamburger already in the masthead opens the rail. In the docked modes on
   a wide screen the rail is always there, so it is hidden; everywhere else -
   drawer mode, and any docked mode below 1100px - it is the way in. */
body.has-rail .navtoggle{display:block;margin-left:auto}
body.rail-dock .navtoggle{display:none}
.catrail__ov{position:fixed;inset:0;z-index:69;background:rgba(10,20,40,.42);
  opacity:0;transition:opacity .26s var(--ease)}
.catrail__ov[hidden]{display:none}
body.rail-open .catrail__ov{opacity:1}

@media (max-width:1100px){
  body.rail-dock{padding-left:0}
  body.rail-dock .catrail{transform:translateX(calc(-100% - 20px))}
  body.rail-dock.rail-open .catrail{transform:none}
  body.rail-dock .catrail__h{display:flex}
  body.rail-dock .sitechat{left:22px}
  body.rail-dock .cookiebar{left:16px}
  body.rail-dock .navtoggle{display:block}
}
@media (max-width:420px){.catrail{width:min(var(--nav-rail),86vw)}}
@media (prefers-reduced-motion:reduce){.catrail,.catrail__ov,.catrail__t svg{transition:none}}

/* ---------- product tile ----------------------------------- */
.tile{
  display:flex;flex-direction:column;overflow:hidden;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease);
}
.tile:hover{transform:translateY(-5px);box-shadow:var(--sh-3),var(--spec)}
.tile__img{
  aspect-ratio:1/1;display:grid;place-items:center;padding:22px;
  background:linear-gradient(165deg, rgba(255,255,255,.66), rgba(255,255,255,.24));
  border-bottom:1px solid var(--g-edge-soft);
}
.tile__img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply;
  transition:transform .35s var(--ease)}
.tile:hover .tile__img img{transform:scale(1.045)}
.tile__none{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted);letter-spacing:.1em}
.tile__body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.tile__brand{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--primary);margin-bottom:8px;
}
.tile__name{font-size:17px;font-weight:600;line-height:1.3;margin:0 0 7px;letter-spacing:-.018em}
.tile__name a{color:var(--ink)}
.tile__name a:hover{color:var(--primary)}
.tile__part{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--muted);margin-bottom:14px}
.tile__price{margin-top:auto;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.tile__add{margin-top:14px}

/* the price rule */
.price-old{color:var(--price-old);text-decoration:line-through;font-size:15px;font-weight:500;opacity:.85}
.price-new{color:var(--price-new);font-weight:700;font-size:23px;letter-spacing:-.025em}
.price-plain{font-weight:700;font-size:23px;color:var(--ink);letter-spacing:-.025em}
.price-ask{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--muted)}

/* ---------- catalog layout --------------------------------- */
.catalog{display:grid;grid-template-columns:288px 1fr;gap:32px;padding:8px 0 70px;align-items:start}
.sidemenu{position:sticky;top:150px;overflow:hidden;padding:8px}
.sidemenu__head{
  padding:12px 16px 10px;
  font-size:12px;font-family:"IBM Plex Mono",monospace;
  letter-spacing:.14em;text-transform:uppercase;color:var(--primary);
}
.sidemenu ul{list-style:none;margin:0;padding:0}
.sidemenu a{
  display:block;padding:10px 16px;color:var(--ink);font-size:14.5px;
  border-radius:12px;transition:background .2s, color .2s;
}
.sidemenu a:hover{background:rgba(255,255,255,.72);color:var(--primary)}
.sidemenu a.is-active{
  background:var(--p12);
  color:var(--primary);font-weight:600;
}
.sidemenu ul ul a{padding-left:32px;font-size:13.5px;color:var(--muted)}
.sidemenu ul ul a:hover{color:var(--primary)}
.sidemenu__aside{padding:24px;margin-top:18px}
.sidemenu__aside h4{margin-bottom:8px}
.sidemenu__aside p{font-size:14px;color:var(--muted);margin-bottom:16px}

.toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.toolbar__count{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--muted)}
.toolbar select,.f select{cursor:pointer}
.toolbar select{
  border:1px solid var(--g-edge);padding:10px 16px;font:inherit;font-size:14px;
  border-radius:var(--r-pill);background:var(--g-fill-strong);color:var(--ink);
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
}
.filterbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end}
.filterbar select,.filterbar input[type=number]{
  border:1px solid var(--g-edge);padding:9px 14px;font:inherit;font-size:14px;
  border-radius:var(--r-pill);background:var(--g-fill-strong);color:var(--ink);
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
}
.filterbar input[type=number]::placeholder{color:var(--muted)}
.filterbar__check{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--muted);white-space:nowrap;cursor:pointer}
.filterbar__check input{accent-color:var(--primary)}
.filterbar__clear{font-size:13px;color:var(--muted);text-decoration:underline;white-space:nowrap}
.filterbar__clear:hover{color:var(--primary)}

.pager{display:flex;gap:8px;margin-top:38px;flex-wrap:wrap}
.pager a,.pager span{
  min-width:42px;text-align:center;padding:10px 14px;border-radius:14px;
  font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--ink);
  background:var(--g-fill);border:1px solid var(--g-edge);
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  box-shadow:var(--sh-1);transition:transform .2s var(--ease);
}
.pager a:hover{transform:translateY(-2px);color:var(--primary)}
.pager__step{font-family:"Inter",sans-serif!important;font-weight:600;font-size:13px!important;padding:10px 16px!important}
.pager__gap{
  min-width:24px;text-align:center;padding:10px 4px;color:var(--muted);
  font-family:"IBM Plex Mono",monospace;font-size:13px;align-self:center;
}
.pager .is-on{
  background:linear-gradient(180deg, var(--p-lite), var(--primary));
  border-color:transparent;color:#fff;
  box-shadow:0 6px 18px var(--p34);
}

.empty{padding:54px 28px;text-align:center;color:var(--muted)}
.empty strong{color:var(--ink)}

/* ---------- product detail --------------------------------- */
.pdp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;padding:6px 0 52px}
.gallery__main{
  aspect-ratio:1/1;display:grid;place-items:center;padding:36px;
  background:linear-gradient(165deg, rgba(255,255,255,.7), rgba(255,255,255,.26));
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  border:1px solid var(--g-edge);border-radius:var(--r-xl);
  box-shadow:var(--sh-2),var(--spec);
}
.gallery__main img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply}
.gallery__thumbs{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.gallery__thumbs button{
  width:68px;height:68px;padding:7px;cursor:pointer;border-radius:15px;
  background:var(--g-fill);border:1px solid var(--g-edge);
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  box-shadow:var(--sh-1);transition:transform .2s var(--ease), box-shadow .2s;
}
.gallery__thumbs button:hover{transform:translateY(-2px)}
.gallery__thumbs button.is-on{
  border-color:var(--p55);
  box-shadow:0 0 0 3px var(--p16), var(--sh-1);
}
.gallery__thumbs img{width:100%;height:100%;object-fit:contain}

.pdp__brand{
  font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--primary);margin-bottom:12px;
}
.pdp h1{margin-bottom:18px}
.pdp__meta{
  display:flex;gap:10px;flex-wrap:wrap;padding:0;margin-bottom:6px;
  font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--muted);
}
.pdp__meta span{
  padding:7px 14px;border-radius:var(--r-pill);
  background:var(--g-fill);border:1px solid var(--g-edge-soft);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.pdp__meta b{color:var(--ink);font-weight:600}
.stock{color:var(--price-new)!important}
.pdp__price{padding:24px 0 6px}
.pdp__price .price-new{font-size:38px}
.pdp__price .price-old{font-size:18px}
.pdp__save{
  display:inline-block;margin-left:10px;padding:5px 12px;border-radius:var(--r-pill);
  background:var(--ok14);
  border:1px solid var(--ok26);
  color:var(--price-new);font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.06em;
}
.pdp__cur{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--muted);margin-left:8px}
.pdp__buy{
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  padding:22px;margin-top:22px;border-radius:var(--r-lg);
  background:var(--g-fill);border:1px solid var(--g-edge);
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  box-shadow:var(--sh-1),var(--spec);
}
.qty{
  display:flex;align-items:center;border-radius:var(--r-pill);overflow:hidden;
  background:rgba(255,255,255,.7);border:1px solid var(--g-edge);
}
.qty button{width:40px;height:44px;border:0;background:none;font-size:17px;cursor:pointer;color:var(--ink)}
.qty button:hover{background:rgba(0,0,0,.04)}
.qty input{width:52px;height:44px;border:0;background:none;text-align:center;font:inherit;font-weight:600}
.pdp__note{font-size:13.5px;color:var(--muted);margin-top:18px}

.tabs{display:flex;gap:6px;margin-bottom:22px;flex-wrap:wrap}
.tabs button{
  border:1px solid transparent;cursor:pointer;padding:10px 20px;border-radius:var(--r-pill);
  font:500 14.5px/1 "Inter",sans-serif;color:var(--muted);background:transparent;
  transition:background .2s, color .2s;
}
.tabs button:hover{background:rgba(255,255,255,.6);color:var(--ink)}
.tabs button.is-on{
  color:var(--primary);font-weight:600;
  background:var(--g-fill-strong);border-color:var(--g-edge);
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  box-shadow:var(--sh-1),var(--spec);
}
.tabpanel{padding:0}
.tabpanel[hidden]{display:none}

/* the spec sheet */
.spectable{
  width:100%;border-collapse:separate;border-spacing:0;font-size:14.5px;overflow:hidden;
  background:var(--g-fill);
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  border:1px solid var(--g-edge);border-radius:var(--r-lg);
  box-shadow:var(--sh-1),var(--spec);
}
.spectable th{
  width:250px;text-align:left;vertical-align:top;padding:15px 22px;
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-weight:400;
  letter-spacing:.04em;color:var(--muted);
  border-bottom:1px solid var(--hair);
}
.spectable td{padding:15px 22px;border-bottom:1px solid var(--hair);vertical-align:top;color:var(--ink)}
.spectable tr:last-child th,.spectable tr:last-child td{border-bottom:0}
.spectable tr:hover th,.spectable tr:hover td{background:rgba(255,255,255,.5)}
.marketing-info{font-size:14px;line-height:1.72;color:#44515f}

/* ---------- markets ---------------------------------------- */
.marketrow{
  display:grid;grid-template-columns:230px 1fr;gap:34px;padding:30px;margin-bottom:18px;
  background:var(--g-fill);border:1px solid var(--g-edge);border-radius:var(--r-lg);
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  box-shadow:var(--sh-1),var(--spec);
}
.marketrow__label{font-size:24px;font-weight:600;letter-spacing:-.025em}
.marketrow__label span{
  display:block;font-family:"IBM Plex Mono",monospace;font-size:11px;
  color:var(--primary);letter-spacing:.14em;margin-top:8px;
}
.prose{max-width:none}
.prose h2{margin-top:1.5em}
.prose ul{padding-left:22px}
.prose li{margin-bottom:.4em}
.prose img{margin:22px 0;border-radius:var(--r-md)}

/* ---------- forms ------------------------------------------ */
.form{display:grid;gap:18px;max-width:640px}
.field label{display:block;font-size:13.5px;font-weight:600;margin-bottom:7px;letter-spacing:-.01em}
.field input,.field select,.field textarea{
  width:100%;padding:12px 16px;font:inherit;font-size:15px;color:var(--ink);
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1.5px solid #c9d3dd;border-radius:12px;
  transition:border-color .2s, background .2s, box-shadow .2s;
}
.field input::placeholder,.field textarea::placeholder{color:var(--muted);opacity:.7}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;background:#fff;border-color:var(--p45);
  box-shadow:0 0 0 4px var(--p12);
}
.field textarea{min-height:140px;resize:vertical}
.field--2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.contactgrid{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:start}
.infolist{list-style:none;padding:0;margin:0}
.infolist li{border-bottom:1px solid var(--hair);padding:15px 0}
.infolist li:last-child{border-bottom:0}
.infolist .k{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--primary);display:block;margin-bottom:5px;
}

/* ---------- cart / checkout / orders ------------------------ */
.tblwrap{overflow-x:auto;overflow-y:hidden}
.linetable{width:100%;border-collapse:separate;border-spacing:0;font-size:14.5px;background:transparent}
.linetable th{
  text-align:left;font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  padding:16px 18px;border-bottom:1px solid var(--g-edge);white-space:nowrap;
}
.linetable td{padding:16px 18px;border-bottom:1px solid var(--hair);vertical-align:middle}
.linetable tr:last-child td{border-bottom:0}
.linetable tr:hover td{background:rgba(255,255,255,.42)}
.linetable .mono{font-family:"IBM Plex Mono",monospace;font-size:13px}

.lineitem{display:flex;gap:14px;align-items:center}
.lineitem img{
  width:56px;height:56px;object-fit:contain;padding:6px;flex:none;border-radius:13px;
  background:rgba(255,255,255,.7);border:1px solid var(--g-edge-soft);
}
.linenote{font-size:12.5px;color:var(--muted);margin-top:4px}

.qtybox{
  width:78px;padding:9px 12px;font:inherit;font-size:14.5px;text-align:center;font-weight:600;
  background:rgba(255,255,255,.7);border:1px solid var(--g-edge);border-radius:12px;color:var(--ink);
}
.qtybox:focus{outline:none;background:#fff;border-color:var(--p45);
  box-shadow:0 0 0 4px var(--p12)}
.linkbtn{background:none;border:0;color:var(--price-old);cursor:pointer;font:inherit;font-size:13.5px;padding:0}
.linkbtn:hover{text-decoration:underline}

.cartfoot{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-top:26px;align-items:flex-start}
.cartfoot__left{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding-top:8px}

.totals{
  min-width:320px;margin-left:auto;padding:22px 24px;border-radius:var(--r-lg);
  background:var(--g-fill-strong);border:1px solid var(--g-edge);
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  box-shadow:var(--sh-2),var(--spec);
}
.totals div{display:flex;justify-content:space-between;gap:20px;padding:9px 0;font-size:14.5px}
.totals div span{color:var(--muted)}
.totals div b{font-family:"IBM Plex Mono",monospace;font-weight:600}
.totals__grand{
  border-top:1px solid var(--g-edge);margin-top:8px;padding-top:16px!important;font-size:17px!important;
}
.totals__grand b{font-size:22px;font-weight:700;letter-spacing:-.02em;font-family:"Inter",sans-serif!important}
.totals .btn{margin-top:18px}

.inlineform{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap}
.inlineform .field{flex:1;min-width:160px;margin:0}
.checkline{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:500}
.checkline input{width:auto;accent-color:var(--primary)}

.checkoutgrid{display:grid;grid-template-columns:1.35fr .65fr;gap:48px;align-items:start}
.checkoutgrid .form{max-width:none}
.checkoutgrid h3{margin-bottom:4px}
.ordersummary{padding:28px;position:sticky;top:150px}
.ordersummary h3{margin-bottom:18px}
.ordersummary ul{list-style:none;margin:0 0 20px;padding:0}
.ordersummary li{
  display:flex;justify-content:space-between;gap:16px;padding:13px 0;
  border-bottom:1px solid var(--hair);font-size:14px;
}
.ordersummary li:last-child{border-bottom:0}
.ordersummary__name em{
  display:block;font-style:normal;font-family:"IBM Plex Mono",monospace;
  font-size:11.5px;color:var(--muted);margin-top:4px;
}
.ordersummary li b{font-family:"IBM Plex Mono",monospace;white-space:nowrap}
.ordersummary .totals{min-width:0;margin:0;padding:0;background:none;border:0;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none}

.orderhead{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;align-items:flex-start;margin-bottom:28px}
.orderhead h2{margin-bottom:6px}
.ordergrid{display:grid;grid-template-columns:1fr 320px;gap:34px;align-items:start}

.pill{
  display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.6);border:1px solid var(--g-edge);color:var(--muted);
}
.pill--new{background:var(--p12);color:var(--primary);
  border-color:var(--p24)}
.pill--processing{background:rgba(214,158,46,.14);color:#8a5a00;border-color:rgba(214,158,46,.28)}
.pill--quoted{background:rgba(112,72,232,.12);color:#4b2fa8;border-color:rgba(112,72,232,.24)}
.pill--po_created{background:rgba(43,123,229,.12);color:#1c5bb0;border-color:rgba(43,123,229,.26)}
.pill--po_sent{background:rgba(15,118,110,.12);color:#0b6b60;border-color:rgba(15,118,110,.26)}
.pill--received{background:rgba(16,150,90,.13);color:#0a7d4d;border-color:rgba(16,150,90,.26)}
.pill--quote{background:rgba(112,72,232,.12);color:#4b2fa8;border-color:rgba(112,72,232,.24)}
.pill--sales_order{background:rgba(43,123,229,.12);color:#1c5bb0;border-color:rgba(43,123,229,.26)}
.pill--order_placed{background:rgba(214,158,46,.15);color:#8a5a00;border-color:rgba(214,158,46,.3)}
.pill--order_closed{background:rgba(16,150,90,.13);color:#0a7d4d;border-color:rgba(16,150,90,.26)}
.pill--completed{background:var(--ok13);color:var(--price-new);
  border-color:var(--ok26)}
.pill--cancelled{background:var(--err11);color:var(--price-old);
  border-color:var(--err24)}

/* ---------- footer ----------------------------------------- */
.sitefoot{
  margin:80px auto 22px;color:color-mix(in srgb, var(--footer-ink) 76%, transparent);position:relative;overflow:hidden;
  border-radius:var(--r-xl);
  background:linear-gradient(150deg,
    var(--foot1),
    var(--foot2));
  box-shadow:var(--sh-3);
}
.sitefoot::before{
  content:"";position:absolute;top:0;right:0;bottom:0;left:0;inset:0;pointer-events:none;
  background:radial-gradient(60% 90% at 88% 6%, var(--a22), transparent 70%);
}
.sitefoot{width:min(var(--page-w),100% - var(--page-gutter));margin-inline:auto}
.sitefoot__grid,.sitefoot__bar{width:auto;max-width:none}
.sitefoot__grid{
  display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:40px;
  padding:52px 44px 42px;position:relative;
}
.sitefoot h4{
  color:var(--footer-ink);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  font-family:"IBM Plex Mono",monospace;font-weight:400;margin-bottom:18px;opacity:.6;
}
.sitefoot__col a{display:block;color:color-mix(in srgb, var(--footer-ink) 78%, transparent);padding:6px 0;font-size:14.5px;transition:color .2s}
.sitefoot__col a:hover{color:var(--footer-ink)}
.sitefoot__logo{
  max-height:52px;margin-bottom:18px;background:rgba(255,255,255,.94);
  padding:9px 12px;border-radius:14px;
}
.sitefoot__name{font-size:23px;font-weight:650;color:var(--footer-ink);letter-spacing:-.028em;margin-bottom:14px}
.sitefoot__intro{color:color-mix(in srgb, var(--footer-ink) 58%, transparent);line-height:1.7;max-width:46ch;font-size:14.5px}
.sitefoot__line{color:color-mix(in srgb, var(--footer-ink) 58%, transparent);margin:0 0 8px;font-size:14.5px}
.sitefoot__social{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.sitefoot__logos{display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:center;padding:18px 0 4px;margin-top:8px;border-top:1px solid color-mix(in srgb, var(--footer-ink, #fff) 14%, transparent)}
.sitefoot__logostrip-img{height:44px;width:auto;max-width:140px;object-fit:contain;background:rgba(255,255,255,.92);border-radius:8px;padding:6px 10px}
.sitefoot__social a{
  padding:7px 14px;border-radius:var(--r-pill);font-size:12px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.sitefoot__social a:hover{background:rgba(255,255,255,.16)}
.sitefoot__bar{border-top:1px solid rgba(255,255,255,.1);font-size:13px;position:relative}
.sitefoot__bar-in{display:flex;justify-content:space-between;gap:16px;padding:18px 44px;flex-wrap:wrap}
.sitefoot__bar a{color:#93a2b3}
.sitefoot__bar a:hover{color:#fff}

/* ---------- responsive ------------------------------------- */
@media (max-width:1040px){
  .catalog{grid-template-columns:1fr}
  .sidemenu{position:static}
  .pdp{grid-template-columns:1fr;gap:32px}
  .contactgrid,.checkoutgrid,.ordergrid{grid-template-columns:1fr;gap:30px}
  .ordersummary{position:static}
  .sitefoot__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  :root{--page-gutter:24px;--band-pad:16px}
  .masthead__in{flex-wrap:wrap;gap:14px;border-radius:24px;padding:12px 14px}
  .masthead__search{order:3;max-width:none;flex-basis:100%;margin-left:0}
  .navtoggle{display:block;margin-left:auto}
  .mainnav__in{display:none;flex-direction:column;align-items:stretch;border-radius:24px;padding:8px}
  .mainnav.is-open .mainnav__in{display:flex;animation:drop .24s var(--ease)}
  .mainnav__cta{margin-left:0;text-align:center}
  .dropdown{position:static;display:none;box-shadow:none;border:0;background:rgba(0,0,0,.03);
    padding:4px;margin:2px 0 6px;-webkit-backdrop-filter:none;backdrop-filter:none}
  .hasdrop:hover .dropdown{display:none}
  .dropdown.is-open{display:block}
  .slide__body{padding:34px 26px}
  .slide--plain{min-height:0}
  .hero--empty{padding:44px 26px}
  .marketrow{grid-template-columns:1fr;gap:14px;padding:24px}
  .field--2{grid-template-columns:1fr}
  .spectable th{width:150px;font-size:10.5px;padding:12px 14px}
  .spectable td{padding:12px 14px}
  .sitefoot__grid{grid-template-columns:1fr;padding:38px 26px 30px}
  .sitefoot__bar-in{padding:16px 26px}
  .totals{min-width:0;width:100%;margin-left:0}
  .section{padding:44px 0}
  .section--soft > .wrap{padding:36px 22px}
}

/* ---------- accessibility fallbacks ------------------------ */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .catcard:hover,.tile:hover,.btn:hover,.pager a:hover{transform:none}
}
/* honour the OS "reduce transparency" switch, as Apple does */
@media (prefers-reduced-transparency:reduce){
  :root{--g-fill:#fff;--g-fill-strong:#fff;--g-fill-faint:#fafbfc;--g-edge:#e2e8ee;--g-edge-soft:#eef2f6}
  body{background-image:none;background-color:var(--bg)}
  .glass,.card,.catcard,.tile,.sidemenu,.masthead__in,.mainnav__in,.dropdown,
  .spectable,.totals,.ordersummary,.tblwrap,.gallery__main,.pdp__buy{
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  }
}
/* browsers without backdrop-filter get solid surfaces instead */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  :root{--g-fill:rgba(255,255,255,.94);--g-fill-strong:#fff;--g-fill-faint:rgba(255,255,255,.88)}
}
@media print{
  body{background-image:none}
  .utilitybar,.mainnav,.masthead__search,.sitefoot__grid,.pdp__buy,.navtoggle{display:none}
  .glass,.card,.tile,.spectable,.totals{box-shadow:none;border:1px solid #ccc;background:#fff;
    -webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ---------- markup fixes for nested wraps ------------------- */
/* the hero is already width-limited, so an inner .wrap is full width */
.hero .wrap{width:100%;padding:0}
.hero--empty{border-radius:0}
/* the dark order-dashboard buttons now sit on a light page */
.pagehead .btn--accent{
  background:var(--g-fill-strong);color:var(--primary);
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  border:1px solid var(--g-edge);
  box-shadow:var(--sh-1),var(--spec);
}
.pagehead .btn--accent:hover{background:#fff;color:var(--primary-dark)}

/* ---------- dropdown sub-items (catalog) -------------------- */
.dropdown__parent{font-weight:600}
.dropdown__child{
  padding-left:30px!important;font-size:13.5px!important;color:color-mix(in srgb, var(--header-ink) 72%, transparent)!important;
  position:relative;
}
.dropdown__child::before{
  content:"";position:absolute;left:15px;top:50%;width:7px;height:7px;
  border-left:1.5px solid var(--g-edge);border-bottom:1.5px solid var(--g-edge);
  transform:translateY(-70%) rotate(-45deg);
}
.dropdown__child:hover{color:var(--header-ink)!important}
.dropdown__more{
  font-family:"IBM Plex Mono",monospace;font-size:11.5px!important;letter-spacing:.06em;
  color:color-mix(in srgb, var(--header-ink) 78%, transparent)!important;border-top:1px solid var(--g-edge-soft);margin-top:5px;padding-top:11px!important;
}

/* ---------- brands page ------------------------------------ */
.azbar{
  display:flex;flex-wrap:wrap;gap:6px;margin:22px 0 34px;padding:10px;
  background:var(--g-fill);border:1px solid var(--g-edge);border-radius:var(--r-pill);
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  box-shadow:var(--sh-1),var(--spec);position:sticky;top:150px;z-index:20;
}
.azbar a{
  min-width:34px;text-align:center;padding:7px 10px;border-radius:var(--r-pill);
  font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:500;color:var(--ink);
  transition:background .2s, color .2s;
}
.azbar a:hover{background:var(--p12);color:var(--primary)}

.brandgroup{margin-bottom:52px;scroll-margin-top:170px}
.brandgroup__letter{
  font-size:40px;font-weight:700;letter-spacing:-.04em;color:var(--ink);
  text-align:center;margin-bottom:40px;
}
/* clean multi-column list of brands, arrow bullet, no boxes */
.brandcols{
  list-style:none;margin:0;padding:0;
  columns:4;column-gap:40px;
}
.brandcols li{break-inside:avoid;margin-bottom:6px}
.brandcols a{
  display:flex;gap:10px;align-items:baseline;
  color:#3d4855;font-size:15px;line-height:1.5;padding:5px 0;
  transition:color .18s;
}
.brandcols a:hover{color:var(--primary)}
.brandcols__arrow{color:var(--primary);flex:none;font-size:14px}

@media (max-width:1040px){ .brandcols{columns:3} }
@media (max-width:760px){ .brandcols{columns:2} .brandgroup__letter{font-size:32px;margin-bottom:26px} }
@media (max-width:440px){ .brandcols{columns:1} }
@media (max-width:820px){
  .azbar{position:static}
  .brandgroup{scroll-margin-top:20px}
}

/* ---------- justified body copy (About, Catalog, single Market) ----
   The <html> element is tagged by main.js:
     .nmh-about-copy-page   on the About page
     .nmh-catalog-copy-page on the Catalog page
     .nmh-market-copy-page  on a single market view (?m=...)
   These justify the running body copy and the page headline. Short
   UI text (buttons, breadcrumbs, labels) is deliberately left alone. */
.nmh-about-copy-page .prose,
.nmh-about-copy-page .prose p,
.nmh-catalog-copy-page .prose,
.nmh-catalog-copy-page .prose p,
.nmh-market-copy-page .prose,
.nmh-market-copy-page .prose p,
.nmh-market-copy-page .section__head p{
  text-align:justify;text-justify:inter-word;hyphens:auto;
}
.nmh-about-copy-page .pagehead h1,
.nmh-catalog-copy-page .pagehead h1,
.nmh-market-copy-page .pagehead h1,
.nmh-market-copy-page .section__head h2,
.nmh-about-copy-page .prose h2,
.nmh-about-copy-page .prose h3,
.nmh-catalog-copy-page .prose h2,
.nmh-catalog-copy-page .prose h3,
.nmh-market-copy-page .prose h2,
.nmh-market-copy-page .prose h3{
  text-align:justify;
}
/* a justified heading whose last line stretches looks wrong, so the
   final line of any heading or paragraph falls back to the left */
.nmh-about-copy-page h1,.nmh-about-copy-page h2,.nmh-about-copy-page h3,
.nmh-catalog-copy-page h1,.nmh-catalog-copy-page h2,.nmh-catalog-copy-page h3,
.nmh-market-copy-page h1,.nmh-market-copy-page h2,.nmh-market-copy-page h3,
.nmh-about-copy-page .prose p,
.nmh-catalog-copy-page .prose p,
.nmh-market-copy-page .prose p{
  text-align-last:left;
}

/* brand logo shown as a stand-in when a product has no photo */
.tile__brandimg,.gallery__main .tile__brandimg{
  max-height:70%;max-width:80%;object-fit:contain;opacity:.9;mix-blend-mode:multiply;
}

/* ---------- moving message ticker (between logo and search) ---- */
.ticker{
  flex:1 1 auto;min-width:0;max-width:520px;margin:0 20px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ticker__track{
  display:inline-flex;align-items:center;gap:14px;white-space:nowrap;
  animation:ticker 26s linear infinite;will-change:transform;
}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__item{font-size:13.5px;font-weight:500;color:var(--header-ink)}
.ticker__sep{color:var(--header-ink);opacity:.45}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){ .ticker__track{animation:none} }
@media (max-width:900px){ .ticker{display:none} }
/* TICKER_RAIL_FIX: a docked sidebar takes --nav-rail (258px) off the page, so
   between about 1100 and 1300 the ticker was being squeezed to a sliver of
   scrolling text - present, but far too narrow to read. Give it a real basis
   and hide it outright at the widths where there is genuinely no room, rather
   than showing 50px of it. */
.ticker{flex:1 1 260px}
@media (max-width:1300px){ body.rail-dock .ticker{display:none} }

/* ---------- nested flyout submenus (catalog subcategories) --- */
.hasflyout{position:relative}
.has-flyout{display:flex!important;align-items:center;justify-content:space-between;gap:8px}
.flyout__arrow{color:color-mix(in srgb, var(--header-ink) 55%, transparent);font-size:16px;line-height:1}
.flyout{
  position:absolute;top:-7px;left:100%;min-width:230px;
  background:var(--hdr);
  -webkit-backdrop-filter:var(--g-blur-lg);backdrop-filter:var(--g-blur-lg);
  border:1px solid var(--g-edge);border-radius:var(--r-md);
  box-shadow:var(--sh-3),var(--spec);
  padding:7px;display:none;z-index:90;
}
.flyout::before{content:"";position:absolute;top:0;left:-14px;width:16px;height:100%}
.hasflyout:hover .flyout,.hasflyout.open .flyout,.hasflyout.flyopen .flyout{display:block;animation:drop .2s var(--ease)}
.flyout a{
  display:block;color:var(--header-ink);padding:9px 13px;border-radius:10px;
  font-size:13.5px;font-weight:450;white-space:nowrap;
}
.flyout a:hover{background:color-mix(in srgb, var(--header-ink) 12%, transparent);color:var(--header-ink)}
.flyout__all{
  font-family:"IBM Plex Mono",monospace;font-size:11px!important;letter-spacing:.05em;
  color:color-mix(in srgb, var(--header-ink) 78%, transparent)!important;border-top:1px solid var(--g-edge-soft);margin-top:5px;padding-top:10px!important;
}
/* on the far right of the screen, flip the flyout to the left side */
.mainnav__in > .hasdrop:last-child .flyout,
.hasdrop:nth-last-child(-n+2) .flyout{left:auto;right:100%}

/* ---------- category tabs row (nav_mode = tabs) ------------- */
.cattabs{
  border-bottom:1px solid var(--hair);margin-bottom:26px;
}
.cattabs__row{
  display:flex;flex-wrap:wrap;gap:2px;
}
.cattab{position:relative}
.cattab > a{
  display:flex;align-items:center;gap:6px;padding:14px 18px;
  font-size:14.5px;font-weight:550;color:var(--ink);border-bottom:2px solid transparent;
}
.cattab > a:hover,.cattab.open > a{color:var(--primary);border-bottom-color:var(--primary)}
.cattab__caret{font-size:11px;color:var(--muted)}
.cattab .flyout{top:100%;left:0;right:auto;margin-top:2px}
.cattab:hover .flyout,.cattab.open .flyout,.cattab.flyopen .flyout{display:block}
@media (max-width:760px){ .cattabs{display:none} }

/* mobile: flyouts become inline nested lists */
@media (max-width:760px){
  .flyout{position:static;display:block;box-shadow:none;border:0;background:rgba(0,0,0,.03);
    padding-left:14px;margin:2px 0}
  .flyout__arrow{display:none}
}

/* ============================================================
   Live chat widget (visitor side, bottom-left)
   ============================================================ */
.sitechat{position:fixed;left:22px;bottom:22px;z-index:9999;font-family:inherit}
.sitechat__bubble{
  width:58px;height:58px;border-radius:50%;border:0;cursor:pointer;
  background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(15,30,50,.28);transition:transform .2s, background .2s;position:relative;
}
.sitechat__bubble:hover{transform:translateY(-2px);background:var(--primary-dark,#0B3961)}
.sitechat__badge{
  position:absolute;top:-3px;right:-3px;min-width:20px;height:20px;border-radius:10px;
  background:#e53935;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px;
}
/* hidden must always win over the flex layouts below */
.sitechat [hidden]{display:none!important}
.sitechat__panel{
  width:340px;max-width:calc(100vw - 44px);height:480px;max-height:calc(100vh - 120px);
  background:#fff;border-radius:18px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 18px 50px rgba(15,30,50,.32);border:1px solid var(--g-edge);
}
.sitechat__head{
  background:var(--primary);color:#fff;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;
}
.sitechat__title{font-weight:650;font-size:15px}
.sitechat__headbtns button{background:transparent;border:0;color:#fff;font-size:20px;cursor:pointer;line-height:1;padding:0 4px;opacity:.85}
.sitechat__headbtns button:hover{opacity:1}
.sitechat__body{flex:1;overflow-y:auto;padding:16px;background:var(--bg-soft,#F4F6F8)}
.sitechat__intro{font-size:13.5px;color:#5a6672;margin:0 0 12px}
.sitechat__connect input{
  width:100%;padding:11px 13px;margin-bottom:9px;border:1.5px solid #c9d3dd;border-radius:10px;
  font:inherit;font-size:14px;box-sizing:border-box;
}
.sitechat__caplbl{display:block;font-size:12.5px;font-weight:600;color:#3d4855;margin-bottom:5px}
.sitechat__start{
  width:100%;padding:11px;border:0;border-radius:10px;background:var(--primary);color:#fff;
  font-weight:600;font-size:14px;cursor:pointer;
}
.sitechat__start:disabled{opacity:.6;cursor:default}
.sitechat__err{color:#c81e1e;font-size:12.5px;margin-top:8px}
.sitechat__thread{display:flex;flex-direction:column;gap:8px}
.nmhmsg{max-width:82%;padding:9px 12px;border-radius:13px;font-size:13.5px;line-height:1.45;word-wrap:break-word}
.nmhmsg__who{display:block;font-size:11px;font-weight:700;opacity:.7;margin-bottom:2px}
.nmhmsg__time{display:block;font-size:10px;opacity:.55;margin-top:3px;text-align:right}
.nmhmsg--me{align-self:flex-end;background:var(--primary);color:#fff;border-bottom-right-radius:4px}
.nmhmsg--them{align-self:flex-start;background:#fff;color:var(--ink);border:1px solid var(--g-edge);border-bottom-left-radius:4px}
.nmhmsg--sys{align-self:center;background:transparent;color:#8a97a5;font-size:11.5px;text-align:center;max-width:100%}
.sitechat__reply{display:flex;gap:8px;padding:10px;background:#fff;border-top:1px solid var(--g-edge)}
.sitechat__reply input{
  flex:1;padding:10px 13px;border:1px solid var(--g-edge);border-radius:20px;font:inherit;font-size:14px;
}
.sitechat__reply button{
  width:40px;height:40px;border-radius:50%;border:0;background:var(--primary);color:#fff;cursor:pointer;font-size:15px;
}
@media (max-width:480px){
  .sitechat{left:16px;bottom:16px}
  .sitechat__panel{width:calc(100vw - 32px)}
}

/* ---------- home page scrolling brand logo strip ----------- */
.logostrip{padding:30px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);background:var(--bg-soft,#F4F6F8);overflow:hidden}
.logostrip .wrap{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.logostrip__track{display:inline-flex;align-items:center;gap:56px;white-space:nowrap;animation:logoscroll calc(var(--logo-count, 8) * 5s) linear infinite;will-change:transform}
.logostrip:hover .logostrip__track{animation-play-state:paused}
.logostrip__item{display:inline-flex;align-items:center;justify-content:center;height:60px;flex:none}
.logostrip__item img{max-height:52px;max-width:150px;object-fit:contain;filter:grayscale(1);opacity:.65;transition:filter .25s, opacity .25s}
.logostrip__item:hover img{filter:grayscale(0);opacity:1}
@keyframes logoscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){ .logostrip__track{animation:none;flex-wrap:wrap;white-space:normal;justify-content:center} }

/* admin logo grid */

/* ============================================================
   THEME STYLES  (applied via <html data-theme="...">)
   Each theme overrides the "feel" tokens only - radius, depth,
   blur, surfaces, border and font. Your colour preset still
   drives every colour. No data-theme (or "liquid-glass") keeps
   the default look, so themes are fully opt-in and reversible.
   ============================================================ */

/* 2. Material - solid surfaces, elevation, tight radius, Roboto */
html[data-theme="material"]{
  --g-fill:#fff; --g-fill-strong:#fff; --g-fill-faint:#fafafa;
  --g-edge:rgba(0,0,0,.10); --g-edge-soft:rgba(0,0,0,.06); --hair:rgba(0,0,0,.10);
  --g-blur:none; --g-blur-lg:none; --spec:none;
  --sh-1:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.20);
  --sh-2:0 3px 6px rgba(0,0,0,.15),0 2px 4px rgba(0,0,0,.12);
  --sh-3:0 10px 20px rgba(0,0,0,.15),0 3px 6px rgba(0,0,0,.10);
  --r-sm:4px; --r-md:8px; --r-lg:8px; --r-xl:12px;
  --hdr:#fff; --hdr-soft:#fff;
}
html[data-theme="material"] body{background:#f5f5f5;background-image:none;font-family:"Roboto","Helvetica Neue",Arial,sans-serif}

/* 3. Flat - solid fills, no blur, minimal shadow */
html[data-theme="flat"]{
  --g-fill:#fff; --g-fill-strong:#fff; --g-fill-faint:#f7f8fa;
  --g-edge:rgba(20,30,45,.12); --g-edge-soft:rgba(20,30,45,.08); --hair:rgba(20,30,45,.12);
  --g-blur:none; --g-blur-lg:none; --spec:none;
  --sh-1:none; --sh-2:0 1px 3px rgba(20,30,45,.08); --sh-3:0 4px 10px rgba(20,30,45,.10);
  --r-sm:6px; --r-md:8px; --r-lg:8px; --r-xl:10px;
  --hdr:#fff; --hdr-soft:#fff;
}
html[data-theme="flat"] body{background:#fff;background-image:none}

/* 4. Minimal - hairlines, lots of white, barely-there depth */
html[data-theme="minimal"]{
  --g-fill:#fff; --g-fill-strong:#fff; --g-fill-faint:#fcfcfc;
  --g-edge:rgba(20,30,45,.09); --g-edge-soft:rgba(20,30,45,.06); --hair:rgba(20,30,45,.08);
  --g-blur:none; --g-blur-lg:none; --spec:none;
  --sh-1:none; --sh-2:none; --sh-3:0 2px 8px rgba(20,30,45,.06);
  --r-sm:4px; --r-md:6px; --r-lg:6px; --r-xl:8px;
  --hdr:#fff; --hdr-soft:#fff;
}
html[data-theme="minimal"] body{background:#fff;background-image:none}

/* 5. Soft / Rounded - big radius, pills, gentle warm shadow */
html[data-theme="soft"]{
  --g-fill:#fff; --g-fill-strong:#fff; --g-fill-faint:#fbf8f5;
  --g-edge:rgba(120,90,60,.10); --g-edge-soft:rgba(120,90,60,.06); --hair:rgba(120,90,60,.12);
  --g-blur:none; --g-blur-lg:none; --spec:none;
  --sh-1:0 4px 14px rgba(120,90,60,.10); --sh-2:0 8px 22px rgba(120,90,60,.12); --sh-3:0 14px 34px rgba(120,90,60,.14);
  --r-sm:14px; --r-md:20px; --r-lg:26px; --r-xl:34px;
  --hdr:#fffdfb; --hdr-soft:#fdf9f4;
}
html[data-theme="soft"] body{background:#fbf7f4;background-image:none}

/* 6. Sharp - zero radius, crisp edges */
html[data-theme="sharp"]{
  --g-fill:#fff; --g-fill-strong:#fff; --g-fill-faint:#f6f7f9;
  --g-edge:rgba(20,30,45,.16); --g-edge-soft:rgba(20,30,45,.10); --hair:rgba(20,30,45,.16);
  --g-blur:none; --g-blur-lg:none; --spec:none;
  --sh-1:none; --sh-2:0 2px 6px rgba(20,30,45,.10); --sh-3:0 6px 16px rgba(20,30,45,.12);
  --r-sm:0px; --r-md:0px; --r-lg:0px; --r-xl:0px; --r-pill:0px;
  --hdr:#fff; --hdr-soft:#fff;
}
html[data-theme="sharp"] body{background:#fff;background-image:none}

/* 7. Spacious - clean flat with airy radius */
html[data-theme="spacious"]{
  --g-fill:#fff; --g-fill-strong:#fff; --g-fill-faint:#fafbfc;
  --g-edge:rgba(20,30,45,.09); --g-edge-soft:rgba(20,30,45,.06); --hair:rgba(20,30,45,.09);
  --g-blur:none; --g-blur-lg:none; --spec:none;
  --sh-1:none; --sh-2:0 2px 8px rgba(20,30,45,.06); --sh-3:0 6px 20px rgba(20,30,45,.08);
  --r-sm:8px; --r-md:12px; --r-lg:14px; --r-xl:18px;
  --hdr:#fff; --hdr-soft:#fff;
}
html[data-theme="spacious"] body{background:#fff;background-image:none}

/* 8. Compact - tight radius, dense feel */
html[data-theme="compact"]{
  --g-fill:#fff; --g-fill-strong:#fff; --g-fill-faint:#f6f7f9;
  --g-edge:rgba(20,30,45,.12); --g-edge-soft:rgba(20,30,45,.08); --hair:rgba(20,30,45,.11);
  --g-blur:none; --g-blur-lg:none; --spec:none;
  --sh-1:none; --sh-2:0 1px 3px rgba(20,30,45,.08); --sh-3:0 3px 10px rgba(20,30,45,.10);
  --r-sm:3px; --r-md:4px; --r-lg:5px; --r-xl:6px;
  --hdr:#fff; --hdr-soft:#fff;
}
html[data-theme="compact"] body{background:#fbfcfd;background-image:none}

/* 9. Dark Mode - dark surfaces, light text */
html[data-theme="dark"]{
  --ink:#e8eef4; --muted:#9fb0c2;
  --g-fill:#1b2430; --g-fill-strong:#212c3a; --g-fill-faint:#161e28;
  --g-edge:rgba(150,175,205,.16); --g-edge-soft:rgba(150,175,205,.10); --hair:rgba(150,175,205,.14);
  --g-blur:none; --g-blur-lg:none; --spec:none;
  --sh-1:0 1px 3px rgba(0,0,0,.4); --sh-2:0 4px 14px rgba(0,0,0,.45); --sh-3:0 10px 30px rgba(0,0,0,.5);
  --r-sm:8px; --r-md:12px; --r-lg:14px; --r-xl:18px;
  --hdr:#141c26; --hdr-soft:#141c26; --soft-tint:#161e28;
}
html[data-theme="dark"] body{background:#12181f;background-image:none;color:#e8eef4}

/* 10. Glass Dark - the glass look, dark */
html[data-theme="glass-dark"]{
  --ink:#e8eef4; --muted:#9fb0c2;
  --g-fill:rgba(40,60,90,.32); --g-fill-strong:rgba(40,70,110,.42); --g-fill-faint:rgba(30,45,65,.28);
  --g-edge:rgba(140,175,220,.22); --g-edge-soft:rgba(140,175,220,.14); --hair:rgba(140,175,220,.18);
  --g-blur:saturate(160%) blur(22px); --g-blur-lg:saturate(170%) blur(38px);
  --spec:inset 0 1px 0 rgba(180,210,245,.25);
  --sh-1:0 2px 10px rgba(0,0,0,.35); --sh-2:0 8px 24px rgba(0,0,0,.4); --sh-3:0 16px 40px rgba(0,0,0,.45);
  --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:30px;
  --hdr:rgba(20,32,48,.7); --hdr-soft:rgba(20,32,48,.5); --soft-tint:rgba(30,45,65,.4);
}
html[data-theme="glass-dark"] body{background:#0d1420;background-image:radial-gradient(1000px 800px at 10% 5%,rgba(30,60,100,.5),transparent 60%),radial-gradient(900px 700px at 90% 20%,rgba(20,45,80,.5),transparent 60%);color:#e8eef4}

/* 11. Neon / Cyber - dark with glow accents */
html[data-theme="neon"]{
  --ink:#dbeafe; --muted:#7fa9d0;
  --g-fill:#0e1428; --g-fill-strong:#131b34; --g-fill-faint:#0b1020;
  --g-edge:rgba(56,189,248,.35); --g-edge-soft:rgba(56,189,248,.18); --hair:rgba(56,189,248,.22);
  --g-blur:none; --g-blur-lg:none;
  --spec:inset 0 0 12px rgba(56,189,248,.12);
  --sh-1:0 0 12px rgba(56,189,248,.15); --sh-2:0 0 22px rgba(56,189,248,.22); --sh-3:0 0 34px rgba(56,189,248,.28);
  --r-sm:6px; --r-md:10px; --r-lg:12px; --r-xl:16px;
  --hdr:#0b1020; --hdr-soft:#0b1020; --soft-tint:#0b1020;
}
html[data-theme="neon"] body{background:#0a0e1a;background-image:none;color:#dbeafe}

/* 12. Bold / High Contrast - heavy borders, strong weight */
html[data-theme="bold"]{
  --g-fill:#fff; --g-fill-strong:#fff; --g-fill-faint:#f4f4f4;
  --g-edge:#111; --g-edge-soft:rgba(17,17,17,.4); --hair:#111;
  --g-blur:none; --g-blur-lg:none; --spec:none;
  --sh-1:none; --sh-2:4px 4px 0 rgba(17,17,17,.9); --sh-3:6px 6px 0 rgba(17,17,17,.9);
  --r-sm:2px; --r-md:4px; --r-lg:4px; --r-xl:6px;
  --hdr:#fff; --hdr-soft:#fff;
}
html[data-theme="bold"] body{background:#fff;background-image:none}
html[data-theme="bold"]{ --g-fill:#fff }
html[data-theme="bold"] .card,html[data-theme="bold"] .catcard,html[data-theme="bold"] .tile,html[data-theme="bold"] .glass{border-width:2px}

/* 13. Neumorphism - soft embossed monochrome */
html[data-theme="neu"]{
  --ink:#4a5a6a; --muted:#7a8a9a;
  --g-fill:#e4e9f0; --g-fill-strong:#e8edf3; --g-fill-faint:#e0e5ec;
  --g-edge:rgba(255,255,255,.6); --g-edge-soft:rgba(255,255,255,.4); --hair:rgba(163,177,198,.3);
  --g-blur:none; --g-blur-lg:none;
  --spec:none;
  --sh-1:6px 6px 12px rgba(163,177,198,.5),-6px -6px 12px rgba(255,255,255,.85);
  --sh-2:8px 8px 16px rgba(163,177,198,.55),-8px -8px 16px rgba(255,255,255,.9);
  --sh-3:10px 10px 22px rgba(163,177,198,.55),-10px -10px 22px rgba(255,255,255,.9);
  --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:26px;
  --hdr:#e4e9f0; --hdr-soft:#e4e9f0; --soft-tint:#e4e9f0;
}
html[data-theme="neu"] body{background:#e4e9f0;background-image:none}

/* 14. Sharp handled above; 15. Gradient - accents via headers/buttons */
html[data-theme="gradient"]{
  --g-fill:#fff; --g-fill-strong:#fff; --g-fill-faint:#f8fafc;
  --g-edge:rgba(20,30,45,.09); --g-edge-soft:rgba(20,30,45,.06); --hair:rgba(20,30,45,.09);
  --g-blur:none; --g-blur-lg:none; --spec:none;
  --sh-1:0 2px 8px rgba(47,127,214,.10); --sh-2:0 6px 18px rgba(47,127,214,.14); --sh-3:0 12px 30px rgba(47,127,214,.16);
  --r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:18px;
  --hdr:#fff; --hdr-soft:#fff;
}
html[data-theme="gradient"] body{background:#f7fafe;background-image:none}
html[data-theme="gradient"] .btn,html[data-theme="gradient"] .cta{background-image:linear-gradient(90deg,var(--primary),color-mix(in srgb,var(--primary) 55%,var(--accent)));border:0;color:#fff}

/* 16. Glassmorphism Pro - deeper blur, layered */
html[data-theme="glass-pro"]{
  --g-fill:rgba(255,255,255,.48); --g-fill-strong:rgba(255,255,255,.66); --g-fill-faint:rgba(255,255,255,.3);
  --g-edge:rgba(255,255,255,.85); --g-edge-soft:rgba(255,255,255,.5); --hair:rgba(160,190,225,.45);
  --g-blur:saturate(200%) blur(34px); --g-blur-lg:saturate(210%) blur(52px);
  --spec:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.3);
  --sh-1:0 8px 24px rgba(15,50,90,.12); --sh-2:0 14px 40px rgba(15,50,90,.16); --sh-3:0 24px 60px rgba(15,50,90,.2);
  --r-sm:14px; --r-md:18px; --r-lg:24px; --r-xl:32px;
  --hdr:rgba(255,255,255,.6); --hdr-soft:rgba(255,255,255,.4);
}
html[data-theme="glass-pro"] body{background:#eef3fa;background-image:linear-gradient(135deg,#eef3fa,#e3ecf6),radial-gradient(900px 700px at 15% 8%,var(--p22),transparent 60%),radial-gradient(800px 600px at 88% 20%,var(--a22),transparent 60%)}

/* 17. Elegant - refined serif, thin borders */
html[data-theme="elegant"]{
  --g-fill:#fff; --g-fill-strong:#fff; --g-fill-faint:#faf8f5;
  --g-edge:rgba(60,50,40,.14); --g-edge-soft:rgba(60,50,40,.09); --hair:rgba(60,50,40,.12);
  --g-blur:none; --g-blur-lg:none; --spec:none;
  --sh-1:none; --sh-2:0 2px 10px rgba(60,50,40,.07); --sh-3:0 8px 24px rgba(60,50,40,.10);
  --r-sm:2px; --r-md:3px; --r-lg:4px; --r-xl:6px;
  --hdr:#fffdfa; --hdr-soft:#faf8f5;
}
html[data-theme="elegant"] body{background:#faf8f5;background-image:none;font-family:"Playfair Display",Georgia,"Times New Roman",serif}

/* 18. Editorial / Newspaper - print serif, ruled */
html[data-theme="editorial"]{
  --g-fill:#fff; --g-fill-strong:#fff; --g-fill-faint:#fbfaf8;
  --g-edge:rgba(20,20,20,.18); --g-edge-soft:rgba(20,20,20,.1); --hair:rgba(20,20,20,.18);
  --g-blur:none; --g-blur-lg:none; --spec:none;
  --sh-1:none; --sh-2:none; --sh-3:0 3px 12px rgba(20,20,20,.08);
  --r-sm:0px; --r-md:2px; --r-lg:2px; --r-xl:3px;
  --hdr:#fff; --hdr-soft:#fff;
}
html[data-theme="editorial"] body{background:#fbfaf7;background-image:none;font-family:Georgia,"Times New Roman","Playfair Display",serif}

/* 19. Tech / Console - mono, grid feel, dark */
html[data-theme="tech"]{
  --ink:#c9d6e2; --muted:#7c93a8;
  --g-fill:#131a22; --g-fill-strong:#18212c; --g-fill-faint:#0f151c;
  --g-edge:rgba(90,209,165,.28); --g-edge-soft:rgba(90,209,165,.14); --hair:rgba(90,209,165,.18);
  --g-blur:none; --g-blur-lg:none; --spec:none;
  --sh-1:none; --sh-2:0 2px 8px rgba(0,0,0,.4); --sh-3:0 6px 18px rgba(0,0,0,.45);
  --r-sm:4px; --r-md:6px; --r-lg:6px; --r-xl:8px;
  --hdr:#0f151c; --hdr-soft:#0f151c; --soft-tint:#0f151c;
}
html[data-theme="tech"] body{background:#0f1419;background-image:none;color:#c9d6e2;font-family:"IBM Plex Mono",ui-monospace,monospace}

/* 20. Pastel - light airy tints */
html[data-theme="pastel"]{
  --g-fill:#fff; --g-fill-strong:#fff; --g-fill-faint:#fdf7fb;
  --g-edge:rgba(180,120,155,.16); --g-edge-soft:rgba(180,120,155,.1); --hair:rgba(180,120,155,.14);
  --g-blur:none; --g-blur-lg:none; --spec:none;
  --sh-1:0 3px 12px rgba(180,120,155,.10); --sh-2:0 6px 18px rgba(180,120,155,.12); --sh-3:0 12px 30px rgba(180,120,155,.14);
  --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:26px;
  --hdr:#fdf6fb; --hdr-soft:#fbeef5;
}
html[data-theme="pastel"] body{background:#fdf6fb;background-image:none}

/* 21. Outline / Wireframe - bordered, no fills */
html[data-theme="outline"]{
  --g-fill:transparent; --g-fill-strong:rgba(255,255,255,.5); --g-fill-faint:transparent;
  --g-edge:var(--primary); --g-edge-soft:rgba(20,30,45,.25); --hair:rgba(20,30,45,.35);
  --g-blur:none; --g-blur-lg:none; --spec:none;
  --sh-1:none; --sh-2:none; --sh-3:none;
  --r-sm:5px; --r-md:6px; --r-lg:8px; --r-xl:10px;
  --hdr:#fff; --hdr-soft:#fff;
}
html[data-theme="outline"] body{background:#fff;background-image:none}
html[data-theme="outline"] .card,html[data-theme="outline"] .catcard,html[data-theme="outline"] .tile,html[data-theme="outline"] .glass{border-width:1.5px}

/* 22. Warm / Organic - warm tones, rounded */
html[data-theme="warm"]{
  --g-fill:#fffdf9; --g-fill-strong:#fff; --g-fill-faint:#faf3e9;
  --g-edge:rgba(150,110,70,.16); --g-edge-soft:rgba(150,110,70,.1); --hair:rgba(150,110,70,.16);
  --g-blur:none; --g-blur-lg:none; --spec:none;
  --sh-1:0 3px 12px rgba(150,110,70,.10); --sh-2:0 8px 20px rgba(150,110,70,.12); --sh-3:0 14px 34px rgba(150,110,70,.14);
  --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:26px;
  --hdr:#fffdf9; --hdr-soft:#f8f3ec;
}
html[data-theme="warm"] body{background:#f8f3ec;background-image:none}

/* 23. Brutalist - raw heavy borders, mono */
html[data-theme="brutalist"]{
  --g-fill:#fff; --g-fill-strong:#fff; --g-fill-faint:#f0f0eb;
  --g-edge:#111; --g-edge-soft:rgba(17,17,17,.5); --hair:#111;
  --g-blur:none; --g-blur-lg:none; --spec:none;
  --sh-1:4px 4px 0 #111; --sh-2:6px 6px 0 #111; --sh-3:8px 8px 0 #111;
  --r-sm:0px; --r-md:0px; --r-lg:0px; --r-xl:0px; --r-pill:0px;
  --hdr:#f0f0eb; --hdr-soft:#f0f0eb;
}
html[data-theme="brutalist"] body{background:#f0f0eb;background-image:none;font-family:"IBM Plex Mono",ui-monospace,monospace}
html[data-theme="brutalist"] .card,html[data-theme="brutalist"] .catcard,html[data-theme="brutalist"] .tile,html[data-theme="brutalist"] .glass{border-width:2px}

/* 24. Retro / Vintage - cream, muted, serif */
html[data-theme="retro"]{
  --g-fill:#faf4e4; --g-fill-strong:#fffbf0; --g-fill-faint:#f3ebd9;
  --g-edge:rgba(120,90,50,.22); --g-edge-soft:rgba(120,90,50,.14); --hair:rgba(120,90,50,.2);
  --g-blur:none; --g-blur-lg:none; --spec:none;
  --sh-1:none; --sh-2:0 2px 8px rgba(120,90,50,.12); --sh-3:0 6px 18px rgba(120,90,50,.14);
  --r-sm:4px; --r-md:6px; --r-lg:8px; --r-xl:10px;
  --hdr:#f3ebd9; --hdr-soft:#efe6cf;
}
html[data-theme="retro"] body{background:#f3ebd9;background-image:none;font-family:Georgia,"Times New Roman",serif}

/* end theme styles */

/* ---------- our customers strip (heading + logos) --------- */
.logostrip--customers{padding-top:42px;padding-bottom:42px}
.logostrip--customers .section__head{max-width:none;margin:0 auto 24px;text-align:center}
.logostrip--customers .section__head h2{margin:2px 0 0}

/* ---------- logo strip display styles (chosen in settings) --- */
/* default / "hover": grayscale, turns colour on hover (base rule already does this) */

/* solid: always full colour */
.logostrip--style-solid .logostrip__item img{filter:none;opacity:1}
.logostrip--style-solid .logostrip__item:hover img{filter:none;opacity:1;transform:scale(1.05)}

/* mono: always grayscale, no hover change */
.logostrip--style-mono .logostrip__item img{filter:grayscale(1);opacity:.8}
.logostrip--style-mono .logostrip__item:hover img{filter:grayscale(1);opacity:.8}

/* fade: full colour but dimmed, brightens on hover */
.logostrip--style-fade .logostrip__item img{filter:none;opacity:.45}
.logostrip--style-fade .logostrip__item:hover img{filter:none;opacity:1}

/* invert: full colour, fades to grey on hover */
.logostrip--style-invert .logostrip__item img{filter:none;opacity:1}
.logostrip--style-invert .logostrip__item:hover img{filter:grayscale(1);opacity:.55}

/* cards: each logo on a white rounded card, full colour */
.logostrip--style-cards .logostrip__track{gap:26px}
.logostrip--style-cards .logostrip__item{background:#fff;border:1px solid var(--hair);border-radius:14px;padding:14px 22px;height:auto;box-shadow:0 2px 8px rgba(16,32,52,.06)}
.logostrip--style-cards .logostrip__item img{filter:none;opacity:1;max-height:44px}
.logostrip--style-cards .logostrip__item:hover img{filter:none;opacity:1}
.logostrip--style-cards .logostrip__item:hover{box-shadow:0 6px 18px rgba(16,32,52,.12)}

/* ---------- cookie consent bar ---------- */
.cookiebar{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;max-width:600px;margin:0 auto;
  background:var(--hdr,rgba(255,255,255,.92));-webkit-backdrop-filter:var(--g-blur-lg,blur(18px));backdrop-filter:var(--g-blur-lg,blur(18px));
  border:1px solid var(--g-edge,rgba(15,30,50,.12));border-radius:16px;box-shadow:var(--sh-2,0 14px 44px rgba(10,20,40,.22));padding:15px 18px}
.cookiebar[hidden]{display:none}
.cookiebar__in{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.cookiebar__txt{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink);flex:1;min-width:230px}
.cookiebar__txt a{color:var(--primary,#0F4C81);text-decoration:underline}
.cookiebar__btns{display:flex;gap:8px;flex-shrink:0}
.cookiebar__btns .btn{padding:8px 18px}
@media (max-width:480px){.cookiebar{left:10px;right:10px;bottom:10px}.cookiebar__btns{width:100%}.cookiebar__btns .btn{flex:1;justify-content:center}}

/* ---------- articles ---------- */
.section__lede{max-width:640px;margin:10px auto 0;color:var(--muted);font-size:16px;line-height:1.6}
.wrap--narrow{max-width:760px}
/* Article cards, sized to sit alongside the category cards rather than tower
   over them. The image was aspect-ratio 16/9, which on a 3-across row is over
   250px tall before any text; it is a fixed 158px band now. Title and excerpt
   are clamped to two lines each so one long headline cannot stretch its card
   past the other two in the row. */
.artgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:8px}
.artcard{display:flex;flex-direction:column;background:var(--card,#fff);border:1px solid var(--hair,rgba(15,30,50,.1));border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .2s, box-shadow .2s}
.artcard:hover{transform:translateY(-3px);box-shadow:var(--sh-2,0 14px 40px rgba(10,20,40,.14))}
.artcard__img{height:158px;overflow:hidden;background:var(--bg-soft,#f2f5f8)}
.artcard__img img{width:100%;height:100%;object-fit:cover}
.artcard__body{padding:15px 17px 17px;display:flex;flex-direction:column;gap:7px;flex:1}
.artcard__body h3{margin:0;font-size:15.5px;line-height:1.32;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.artcard__body p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.5;flex:1;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.artcard__more{color:var(--primary,#0F4C81);font-weight:600;font-size:12.5px;margin-top:2px}
@media (max-width:560px){.artcard__img{height:170px}}
.artsingle__title{font-size:34px;line-height:1.15;margin:10px 0 8px}
.artsingle__meta{color:var(--muted);font-size:14px;margin-bottom:18px}
.artsingle__img{margin:0 0 24px;border-radius:18px;overflow:hidden;border:1px solid var(--hair,rgba(15,30,50,.1))}
.artsingle__img img{width:100%;display:block}
.artsingle__body{font-size:16.5px;line-height:1.75;color:var(--ink)}
.artsingle__body img{max-width:100%;height:auto;border-radius:12px}
.artback{display:inline-block;margin-bottom:16px;color:var(--muted);text-decoration:none;font-size:13.5px}
.artback:hover{color:var(--primary,#0F4C81)}

/* ---------- product brochure / datasheet button ---------- */
.pdp__brochure{display:inline-flex;align-items:center;gap:9px;margin-top:14px;padding:11px 18px;
  background:var(--primary,#0F4C81);color:#fff;text-decoration:none;font-weight:600;font-size:14px;
  border-radius:12px;transition:filter .2s, transform .2s;box-shadow:0 6px 18px rgba(15,76,129,.22)}
.pdp__brochure:hover{filter:brightness(1.06);transform:translateY(-1px)}
.pdp__brochure svg{flex:none}

/* CHAT_LOOK_V1 - the line of text beside the chat bubble. Set in the admin;
   absent by default, so a site that sets nothing carries none of this. */
.sitechat__tag{position:absolute;white-space:nowrap;background:var(--ink,#16202c);color:#fff;
  font-size:12.5px;font-weight:600;padding:7px 11px;border-radius:9px;pointer-events:none;
  box-shadow:0 4px 14px rgba(16,32,52,.18);opacity:.96}
.sitechat__tag::after{content:"";position:absolute;width:8px;height:8px;background:inherit;transform:rotate(45deg)}
.sitechat__tag--left{right:calc(100% + 12px);top:50%;transform:translateY(-50%)}
.sitechat__tag--left::after{right:-4px;top:calc(50% - 4px)}
.sitechat__tag--above{bottom:calc(100% + 12px);right:2px}
.sitechat__tag--above::after{bottom:-4px;right:18px}
/* NOT position:relative. .sitechat is position:fixed at line 1511, and
   overriding that dropped the whole widget out of its corner and into the
   document flow - which is why the chat appeared to vanish. Fixed is already
   a positioned ancestor, so the tag has what it needs without any change. */
.sitechat.is-dragging .sitechat__tag{display:none}
@media (max-width:560px){.sitechat__tag--left{display:none}}