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

.wrap{width:min(1320px,100% - 48px);margin-inline:auto}
.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 ------------------------------------- */
h1,h2,h3,h4,h5{
  font-family:inherit;font-weight:600;line-height:1.12;margin:0 0 .5em;
  letter-spacing:-.028em;color:var(--ink);
}
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;
}
.utilitybar__in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:0 6px}
.utilitybar a{color:color-mix(in srgb, var(--header-ink) 66%, transparent);margin-left:22px;font-family:"IBM Plex Mono",monospace;font-size:12px}
.utilitybar a:hover{color:var(--primary)}

.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(1320px,100% - 48px);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}

.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))}

.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;
}

/* ---------- 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-height:100%;width: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-height:100%;width: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--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(1320px,100% - 48px);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__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){
  .wrap{width:min(1320px,100% - 26px)}
  .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} }

/* ---------- 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)
   ============================================================ */
.nmhchat{position:fixed;left:22px;bottom:22px;z-index:9999;font-family:inherit}
.nmhchat__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;
}
.nmhchat__bubble:hover{transform:translateY(-2px);background:var(--primary-dark,#0B3961)}
.nmhchat__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 */
.nmhchat [hidden]{display:none!important}
.nmhchat__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);
}
.nmhchat__head{
  background:var(--primary);color:#fff;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;
}
.nmhchat__title{font-weight:650;font-size:15px}
.nmhchat__headbtns button{background:transparent;border:0;color:#fff;font-size:20px;cursor:pointer;line-height:1;padding:0 4px;opacity:.85}
.nmhchat__headbtns button:hover{opacity:1}
.nmhchat__body{flex:1;overflow-y:auto;padding:16px;background:var(--bg-soft,#F4F6F8)}
.nmhchat__intro{font-size:13.5px;color:#5a6672;margin:0 0 12px}
.nmhchat__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;
}
.nmhchat__caplbl{display:block;font-size:12.5px;font-weight:600;color:#3d4855;margin-bottom:5px}
.nmhchat__start{
  width:100%;padding:11px;border:0;border-radius:10px;background:var(--primary);color:#fff;
  font-weight:600;font-size:14px;cursor:pointer;
}
.nmhchat__start:disabled{opacity:.6;cursor:default}
.nmhchat__err{color:#c81e1e;font-size:12.5px;margin-top:8px}
.nmhchat__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%}
.nmhchat__reply{display:flex;gap:8px;padding:10px;background:#fff;border-top:1px solid var(--g-edge)}
.nmhchat__reply input{
  flex:1;padding:10px 13px;border:1px solid var(--g-edge);border-radius:20px;font:inherit;font-size:14px;
}
.nmhchat__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){
  .nmhchat{left:16px;bottom:16px}
  .nmhchat__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 40s 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}
.artgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;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{aspect-ratio:16/9;overflow:hidden;background:var(--bg-soft,#f2f5f8)}
.artcard__img img{width:100%;height:100%;object-fit:cover}
.artcard__body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.artcard__body h3{margin:0;font-size:18px;line-height:1.3;color:var(--ink)}
.artcard__body p{margin:0;color:var(--muted);font-size:14px;line-height:1.55;flex:1}
.artcard__more{color:var(--primary,#0F4C81);font-weight:600;font-size:13.5px;margin-top:2px}
.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}