/* ============================================================
   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;
  --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) 82%, transparent);
    --hdr-soft:color-mix(in srgb, var(--header-bg) 58%, 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(1200px,100% - 40px);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:var(--muted);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:46px;width:auto}
.brand:hover{opacity:.82}
.brand__text{font-size:22px;font-weight:650;letter-spacing:-.03em;color:var(--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}
.mainnav__in{
  display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:7px 8px;
  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);
}
.mainnav a{
  color:var(--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:rgba(255,255,255,.7);color:var(--primary)}
.mainnav a.is-active{
  background:var(--p12);
  color:var(--primary);font-weight:600;
  box-shadow:inset 0 0 0 1px var(--p22);
}
.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;
}

.hasdrop{position:relative}
.dropdown{
  position:absolute;top:calc(100% + 10px);left:0;min-width:270px;
  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:50;
}
.hasdrop:hover .dropdown,.hasdrop:focus-within .dropdown,.dropdown.is-open{display:block;animation:drop .24s var(--ease)}
@keyframes drop{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.dropdown a{
  display:block;color:var(--ink);padding:10px 14px;border-radius:11px;
  font-size:14px;font-weight:450;
}
.dropdown a:hover{background:var(--p10);color:var(--primary)}

/* ---------- 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}
.hero,.hero__inner{width:min(1200px,100% - 40px);margin-inline:auto}
.slide{display:none;position:relative;min-height:clamp(330px,40vw,470px)}
.slide.is-on{display:block;animation:fade .5s 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);
}

.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 .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:78ch}
.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,.62);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--g-edge);border-radius:14px;
  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:#c9d3de;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(1200px,100% - 40px);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:#fff;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:#c9d3de;padding:6px 0;font-size:14.5px;transition:color .2s}
.sitefoot__col a:hover{color:#fff}
.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:#fff;letter-spacing:-.028em;margin-bottom:14px}
.sitefoot__intro{color:#93a2b3;line-height:1.7;max-width:46ch;font-size:14.5px}
.sitefoot__line{color:#93a2b3;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(1200px,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)}