/* ============================================================
   MixTips USA — shared glassmorphism theme
   Loaded AFTER bootstrap.css and modern-business.css so it
   reskins the existing markup without changing any content.
   ============================================================ */

:root{
  --ink:#0E1A2B;--muted:#54607A;--line:#E1E8F3;
  --accent:#2563EB;--accent2:#1A4FCC;--accent-soft:#5B8DF6;--mist:#EEF3FD;
  --glass:rgba(255,255,255,.55);
  --glass-2:rgba(255,255,255,.72);
  --glass-edge:rgba(255,255,255,.55);
  --glass-ring:rgba(14,26,43,.06);
  --glass-blur:saturate(155%) blur(16px);
  --glass-shadow:0 22px 48px -28px rgba(14,26,43,.45);
  --dark-glass:rgba(13,23,38,.62);
  --mono:ui-monospace,"SF Mono","Cascadia Code","Roboto Mono",Menlo,Consolas,monospace;
}

/* ---- base / background ---- */
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif !important;
  color:var(--ink);
  padding-top:0 !important;            /* nav is sticky, no fixed offset needed */
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;position:relative;
  background:
    radial-gradient(900px 620px at 10% -6%,rgba(37,99,235,.12),transparent 60%),
    radial-gradient(820px 720px at 106% 6%,rgba(40,118,168,.11),transparent 55%),
    radial-gradient(760px 640px at 50% 116%,rgba(37,99,235,.09),transparent 60%),
    linear-gradient(180deg,#F4F7FC 0%,#EBF0F8 100%) !important;
  background-attachment:fixed !important;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(14,26,43,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(14,26,43,.10) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 30%,transparent 92%);
  mask-image:radial-gradient(120% 90% at 50% 0%,#000 30%,transparent 92%);
}
.disp,h1,h2,h3,h4,h5{font-family:'Manrope',sans-serif}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

/* reusable glass panel */
.mt-glass{
  background:var(--glass);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-edge);
  box-shadow:var(--glass-shadow),inset 0 1px 0 rgba(255,255,255,.65),0 0 0 1px var(--glass-ring);
  border-radius:20px;
}

/* ============================================================
   HEADER (new glass topbar markup)
   ============================================================ */
.mt-topbar{
  position:sticky;top:0;z-index:1000;
  background:linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,.18)),rgba(244,247,252,.62);
  -webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid rgba(255,255,255,.5);box-shadow:0 1px 0 rgba(14,26,43,.06);
}
.mt-nav{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 26px;max-width:1320px;margin:0 auto}
.mt-brand{display:flex;align-items:center;flex:0 0 auto}
.mt-navlogo{height:42px;width:auto;display:block}
.mt-menu{display:flex;align-items:center;gap:22px;list-style:none;margin:0;padding:0}
.mt-menu>li{margin:0}
.mt-menu a{font-size:14.5px;font-weight:500;color:var(--muted);transition:.15s;text-decoration:none}
.mt-menu a:hover{color:var(--ink)}
.mt-cta{background:var(--accent);color:#fff !important;padding:10px 18px;border-radius:999px;font-size:13.5px;font-weight:700;transition:.18s;white-space:nowrap;box-shadow:0 12px 26px -14px rgba(37,99,235,.8)}
.mt-cta:hover{background:var(--accent2);color:#fff !important}
.mt-cta.ghost{background:rgba(255,255,255,.35);color:var(--accent2) !important;border:1.5px solid rgba(37,99,235,.30);box-shadow:none}
.mt-cta.ghost:hover{background:rgba(255,255,255,.65);border-color:var(--accent);color:var(--accent2) !important}
/* hamburger + mobile menu */
.mt-navtoggle{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.mt-hammli{display:none}
.mt-hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:38px;cursor:pointer;padding:0 9px;border:1.5px solid rgba(37,99,235,.30);border-radius:10px;background:rgba(255,255,255,.4)}
.mt-hamburger span{display:block;height:2px;width:100%;background:var(--accent2);border-radius:2px;transition:transform .22s,opacity .2s}
.mt-mobilemenu{display:none;background:rgba(244,247,252,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid rgba(255,255,255,.5);padding:6px 18px 14px}
.mt-mobilemenu a{display:block;padding:13px 4px;font-size:16px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line);text-decoration:none}
.mt-mobilemenu a:last-child{border-bottom:none}
@media(max-width:992px){
  .mt-menu>li:not(.mt-hammli){display:none}
  .mt-hammli{display:flex;align-items:center}
  .mt-hamburger{display:flex}
  #mtnavtoggle:checked ~ .mt-mobilemenu{display:block}
  #mtnavtoggle:checked ~ .mt-nav .mt-hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  #mtnavtoggle:checked ~ .mt-nav .mt-hamburger span:nth-child(2){opacity:0}
  #mtnavtoggle:checked ~ .mt-nav .mt-hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ============================================================
   PAGE CONTENT  (existing Bootstrap markup, restyled)
   ============================================================ */
div.pageContent{padding-top:40px !important;padding-bottom:10px}
.pageContent .container{max-width:1320px;padding-left:26px;padding-right:26px}

/* ---- robust 2-column content layout (independent of bootstrap col-lg / template sidebar-hide) ---- */
@media(min-width:980px){
  .pageContent .container>.row{display:flex !important;flex-wrap:nowrap;align-items:flex-start;gap:28px}
  .pageContent .container>.row>.sideNav{display:block !important;flex:0 0 232px;max-width:232px;width:232px;padding-left:0;padding-right:0}
  .pageContent .container>.row>.productFilter{flex:1 1 0%;min-width:0;max-width:100%;width:auto;padding-left:0;padding-right:0}
}
/* product-card grid, not reliant on bootstrap col-lg-6 */
.productFilter>.row{display:flex;flex-wrap:wrap;margin-left:-11px;margin-right:-11px}
.productFilter>.row>.portfolio-item{flex:0 0 50%;max-width:50%;padding-left:11px;padding-right:11px;margin-bottom:22px}
@media(max-width:680px){.productFilter>.row>.portfolio-item{flex:0 0 100%;max-width:100%}}
.portfolio-item>.card{height:100%}

/* page title header (Option 2 — eyebrow + ink title + underline) */
.pageContent h1,.pageContent h1.mt-4{
  font-family:'Manrope';font-weight:800;letter-spacing:-.03em;line-height:1.05;
  color:var(--ink);font-size:46px;margin:6px 0 0;
  padding-bottom:16px;border-bottom:2px solid var(--glass-ring)
}
.pageContent h1.mt-4::before{
  content:"Product Catalog";display:block;
  font-family:var(--mono);font-weight:600;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin:0 0 10px
}
/* per-page override: <h1 class="mt-4" data-kicker="Static Mixers"> */
.pageContent h1.mt-4[data-kicker]::before{content:attr(data-kicker)}
/* the original line right under the title is now redundant */
.pageContent h1.mt-4 + hr{display:none}
.pageContent hr{border:0;border-top:1px solid var(--glass-ring);margin:18px 0 26px}

/* sidebar -> ONE unified glass panel (directory + contact + button) */
.sideNav{
  margin-bottom:24px;
  background:var(--glass);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-edge);
  box-shadow:var(--glass-shadow),inset 0 1px 0 rgba(255,255,255,.65);
  border-radius:18px;padding:14px 14px 16px
}
.sidebar-nav.list-group{background:transparent;border:none;box-shadow:none;border-radius:0;overflow:visible;padding:0;margin:0}
/* divider between directory and contact */
.sideNav hr{border:0;border-top:1px solid var(--glass-ring);margin:14px 2px}
.sideContact{padding:0 2px}
.sidebar-nav .list-group-item{background:transparent;border:none;border-radius:10px;padding:10px 14px;font-size:14px;color:var(--ink)}
.sidebar-nav .slideTitle{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent2);font-weight:600;padding-bottom:6px}
.sidebar-nav .productItem>a,.sidebar-nav .productItemActive>a{font-weight:700;color:var(--ink);text-decoration:none}
/* directory items: NO background highlight in any state.
   Pills never fill, so text is always readable. Active category = colored left bar only. */
ul.sidebar-nav li.list-group-item,
ul.sidebar-nav li.list-group-item:hover,
ul.sidebar-nav li.list-group-item:focus,
ul.sidebar-nav li.list-group-item:active,
ul.sidebar-nav li.list-group-item.active,
ul.sidebar-nav li.productItem,
ul.sidebar-nav li.productItem:hover,
ul.sidebar-nav li.productItemActive,
ul.sidebar-nav li.productItemActive:hover,
ul.sidebar-nav li.productItem2,
ul.sidebar-nav li.productItem2:hover{
  background:transparent !important;background-color:transparent !important;
}
.sidebar-nav .productItem2{padding:7px 14px 7px 22px}
/* readable link text in every state (never white-on-light or blue-on-blue) */
ul.sidebar-nav li.list-group-item>a,
ul.sidebar-nav li.productItem>a,
ul.sidebar-nav li.productItemActive>a{color:var(--accent2) !important;font-weight:700;text-decoration:none}
ul.sidebar-nav li.productItem2>a{color:var(--muted) !important;font-size:13px;font-weight:400;text-decoration:none}
ul.sidebar-nav li.productItem:hover>a,
ul.sidebar-nav li.productItemActive:hover>a,
ul.sidebar-nav li.productItem2:hover>a{color:var(--accent) !important}
.sideContact h5{font-family:'Manrope';font-weight:800;font-size:15px;color:var(--ink);margin-bottom:8px}
.sideContact p{margin:2px 0;font-size:13.5px}
.sideContact a{color:var(--muted);text-decoration:none}
.sideContact a:hover{color:var(--accent2)}
.btnSideNav,.btn.btnSideNav{
  display:block;width:100%;text-align:center;background:var(--accent);color:#fff !important;border:none;
  padding:11px 20px;border-radius:11px;font-weight:700;font-size:14px;margin-top:14px;
  text-decoration:none;transition:.18s;box-shadow:0 14px 28px -16px rgba(37,99,235,.7)
}
.btnSideNav:hover{background:var(--accent2);color:#fff !important}

/* product cards -> glass cards */
.productFilter .card,div.card{
  background:var(--glass-2) !important;
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-edge) !important;
  box-shadow:var(--glass-shadow),inset 0 1px 0 rgba(255,255,255,.65) !important;
  border-radius:16px !important;transition:transform .18s,box-shadow .18s;overflow:hidden
}
.portfolio-item{margin-bottom:22px}
.productFilter .card:hover{transform:translateY(-4px);box-shadow:0 28px 56px -28px rgba(37,99,235,.5),inset 0 1px 0 rgba(255,255,255,.65) !important}
.card .card-img-top{border-radius:10px;background:rgba(255,255,255,.6);padding:6px}
.card .card-title,.card .card-title a{font-family:'Manrope';font-weight:800;font-size:18px;letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.card .card-title a:hover{color:var(--accent2)}
.card .card-text{font-size:13.5px;line-height:1.55;color:var(--muted)}

/* white placecard for info pages (About, etc.) that have no sidebar */
.pageContent .mt-infocard{
  background:var(--glass-2);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-edge);
  box-shadow:var(--glass-shadow),inset 0 1px 0 rgba(255,255,255,.65);
  border-radius:18px;padding:30px 34px;margin:4px 0 28px
}
.pageContent .mt-infocard h2{font-family:'Manrope';font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:0 0 12px}
.pageContent .mt-infocard p{color:var(--muted);line-height:1.7}
.pageContent .mt-infocard img.rounded{border-radius:14px !important;border:1px solid var(--glass-ring)}
@media(max-width:680px){.pageContent .mt-infocard{padding:22px 20px}}

/* ============ detail / product pages (series, cartridges, coatings) ============ */
/* old #0260aa banner -> accent gradient banner */
.pageContent h4.productTitle{
  font-family:'Manrope';font-weight:800;font-size:16.5px;line-height:1.3;color:#fff !important;
  background:linear-gradient(100deg,var(--accent),var(--accent2)) !important;
  border:1px solid rgba(255,255,255,.18);border-radius:12px;
  padding:13px 18px !important;margin:2px 0 18px !important;
  box-shadow:0 14px 30px -18px rgba(37,99,235,.6)
}
/* section sub-heading that holds an inline Request Sample button */
.pageContent h4.card-title{
  font-family:'Manrope';font-weight:800;font-size:20px;letter-spacing:-.01em;color:var(--ink);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
  margin:26px 0 14px
}
.pageContent h4.card-title .btn.btn-primary{float:none !important;flex:0 0 auto;margin:0;font-size:12.5px;padding:8px 15px}
/* product diagram image */
.pageContent .card-img-top{
  border-radius:12px;border:1px solid var(--glass-ring);background:#fff;
  padding:6px;margin:6px 0 16px;height:auto;width:100%
}
/* spec tables -> clean on-brand */
.pageContent table.table{
  width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px;display:table;
  background:rgba(255,255,255,.62);border:1px solid var(--glass-edge);
  border-radius:14px;overflow:hidden;margin:6px 0 22px
}
.pageContent table.table thead th{
  background:linear-gradient(180deg,rgba(37,99,235,.13),rgba(37,99,235,.07));
  color:var(--accent2);font-family:'Manrope';font-weight:800;font-size:12.5px;
  border:none;border-bottom:2px solid rgba(37,99,235,.25);padding:12px;vertical-align:bottom
}
.pageContent table.table td{border:none;border-bottom:1px solid var(--glass-ring);padding:11px 12px;color:var(--ink)}
.pageContent table.table.table-striped tbody tr:nth-of-type(odd){background:rgba(37,99,235,.04)}
.pageContent table.table tbody tr:hover{background:rgba(37,99,235,.09)}
.pageContent table.table tbody tr:last-child td{border-bottom:none}
@media(max-width:680px){.pageContent table.table{font-size:12px}.pageContent table.table td,.pageContent table.table thead th{padding:8px}}

/* buttons */
.btn-primary,.btn.btn-primary{
  background:var(--accent) !important;border:none !important;color:#fff !important;
  border-radius:10px !important;font-weight:700;font-size:13.5px;padding:9px 18px;
  box-shadow:0 12px 24px -14px rgba(37,99,235,.8);transition:.18s
}
.btn-primary:hover,.btn.btn-primary:hover{background:var(--accent2) !important}

/* spacer the template uses */
.spacer{height:32px}

/* ============================================================
   FOOTER (new glass dark markup)
   ============================================================ */
.mt-footer{
  margin-top:10px;color:#C2CEDD;padding:56px 0 0;position:relative;
  background:var(--dark-glass);-webkit-backdrop-filter:saturate(140%) blur(16px);backdrop-filter:saturate(140%) blur(16px);
  border-top:1px solid rgba(255,255,255,.12)
}
.mt-fwrap{max-width:1320px;margin:0 auto;padding:0 26px}
.mt-fcols{display:grid;grid-template-columns:1.6fr 1fr 1.4fr;gap:40px;padding-bottom:42px}
.mt-fbrand{display:inline-flex;align-items:center;gap:8px;font-family:'Manrope';font-weight:800;font-size:22px;color:#fff;text-decoration:none}
.mt-fbrand .mt-dot{width:10px;height:10px;border-radius:50%;background:var(--accent)}
.mt-footer h5{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8290a6;margin:0 0 18px;font-weight:500}
.mt-footer p{font-size:14px;line-height:1.6;color:#9aa7bb;margin-top:12px}
.mt-footer ul{list-style:none;margin:0;padding:0}
.mt-footer li{margin-bottom:11px}
.mt-footer li a{font-size:14.5px;color:#C2CEDD;text-decoration:none;transition:.15s}
.mt-footer li a:hover{color:var(--accent-soft)}
.mt-footer a{color:inherit;text-decoration:none}
.mt-fbot{border-top:1px solid rgba(255,255,255,.1);padding:20px 0;font-size:13px;color:#8290a6;max-width:1320px;margin:0 auto}
.mt-fwrap .mt-fbot{padding-left:0;padding-right:0}

/* ---- graceful fallbacks ---- */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .mt-glass,.sidebar-nav.list-group,.productFilter .card,div.card{background:rgba(255,255,255,.92) !important}
  .mt-topbar{background:rgba(244,247,252,.96)}
  .mt-footer{background:#0E1A2B}
}
@media(prefers-reduced-transparency:reduce){
  .mt-topbar{background:rgba(244,247,252,.97);-webkit-backdrop-filter:none;backdrop-filter:none}
  .sidebar-nav.list-group,.productFilter .card,div.card{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.95) !important}
  .mt-footer{background:#0E1A2B;-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .productFilter .card{transition:none}
  .productFilter .card:hover{transform:none}
}

/* ---- phone ---- */
@media(max-width:768px){
  .mt-nav{padding:12px 16px}
  .mt-navlogo{height:34px}
  .pageContent h1,.pageContent h1.mt-4{font-size:28px}
  .mt-fcols{grid-template-columns:1fr;gap:28px}
}


/* ============ PRODUCT MODALS (Bootstrap) — mobile-correct + themed ============ */
.modal{z-index:2000}
.modal-backdrop{z-index:1990}
.modal-backdrop.show{opacity:.55}
.modal-dialog{max-width:560px;margin:.6rem auto;display:flex;align-items:center;min-height:calc(100% - 1.2rem)}
@media(min-width:576px){.modal-dialog{margin:1.75rem auto;min-height:calc(100% - 3.5rem)}}
/* cap to viewport, let the body scroll, keep header (and X) pinned */
.modal-content{display:flex;flex-direction:column;max-height:calc(100vh - 1.2rem);overflow:hidden;border:1px solid var(--glass-edge);border-radius:18px;box-shadow:0 40px 90px -30px rgba(14,26,43,.6);background:#fff}
.modal-header{flex:0 0 auto;align-items:flex-start;border-bottom:1px solid var(--line);padding:15px 20px;border-radius:18px 18px 0 0;background:#fff}
.modal-title{font-family:'Manrope';font-weight:800;letter-spacing:-.02em;color:var(--ink);font-size:20px;line-height:1.2}
.modal-header .close{font-size:30px;line-height:1;opacity:.5;padding:6px 12px;margin:-6px -8px -6px auto;color:var(--ink);text-shadow:none;cursor:pointer}
.modal-header .close:hover,.modal-header .close:focus{opacity:1;color:var(--accent)}
.modal-body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:18px 20px}
.modal-body .card-img-top{width:100%;height:auto;display:block;border-radius:12px;border:1px solid var(--line);background:#fff;margin:0 auto 16px}
.modal-body h4,.modal-body h5{font-family:'Manrope';font-weight:700;color:var(--ink)}
.modal-body p,.modal-body li{color:var(--muted)}
.modal-body strong{color:var(--ink)}
.modal-body .table{border-radius:12px;overflow:hidden}
.modal-footer{flex:0 0 auto;border-top:1px solid var(--line)}


/* ============ REQUEST A SAMPLE modal (Web3Forms) ============ */
.sample-modal{position:fixed;inset:0;z-index:2100;display:none;align-items:center;justify-content:center;padding:18px}
.sample-modal.open{display:flex}
.sm-backdrop{position:absolute;inset:0;background:rgba(13,23,38,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.sm-card{position:relative;z-index:1;width:100%;max-width:520px;max-height:92vh;overflow:auto;background:#fff;border:1px solid var(--glass-edge);border-radius:18px;box-shadow:0 40px 90px -30px rgba(14,26,43,.6);padding:22px 24px}
.sm-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.sm-head h3{font-family:'Manrope';font-weight:800;letter-spacing:-.02em;color:var(--accent);font-size:22px;margin:0}
.sm-close{background:none;border:none;font-size:28px;line-height:1;color:var(--muted);cursor:pointer;padding:0 6px;border-radius:8px}
.sm-close:hover{color:var(--ink)}
#sample-form{display:flex;flex-direction:column;gap:11px;margin-top:8px}
#sample-form label{display:flex;flex-direction:column;gap:5px;font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:600}
#sample-form input,#sample-form textarea{font-family:'Inter',sans-serif;font-size:15px;color:var(--ink);padding:11px 13px;border:1px solid var(--line);border-radius:11px;background:var(--mist);text-transform:none;letter-spacing:normal;font-weight:400}
#sample-form textarea{resize:vertical;min-height:64px}
#sample-form input:focus,#sample-form textarea:focus{outline:none;border-color:var(--accent-soft);background:#fff;box-shadow:0 0 0 3px rgba(37,99,235,.12)}
#sample-form input[readonly]{background:#eef3fd;color:var(--accent2);font-weight:600;cursor:default}
.sm-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:4px}
.sm-btn{font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;font-weight:600;padding:12px 20px;border-radius:11px;border:1px solid rgba(255,255,255,.25);background:linear-gradient(180deg,var(--accent),var(--accent2));color:#fff;cursor:pointer;box-shadow:0 12px 26px -16px rgba(37,99,235,.7);transition:transform .15s}
.sm-btn:hover{transform:translateY(-1px)}
.sm-btn.ghost{background:#fff;color:var(--accent2);border:1px solid var(--glass-ring);box-shadow:none}
.sm-btn:disabled{opacity:.6;cursor:default;transform:none}
.sm-status{font-family:'Inter',sans-serif;font-size:13.5px;margin:8px 0 0;min-height:18px}
.sm-status.ok{color:#0b8457}.sm-status.err{color:#c0392b}
@media(max-width:560px){.sm-card{padding:18px 16px}}