/* Solution Infotech Services: left sidebar navigation (v11)
   One navigation system. Replaces the old mega-menu styles. */
*,
*::before,
*::after { box-sizing: border-box; }

:root {
  --brand-deep: #12444b;
  --brand-teal: #087f78;
  --brand-coral: #ef8057;
  --brand-gold: #e7b34a;
  --brand-gradient: linear-gradient(118deg, #075e69 0%, #0b9587 56%, #e7a04a 100%);
  --primary: #087f78;
  --primary-strong: #08665f;
  --primary-dark: #08665f;
  --primary-soft: #e5f4ef;
  --secondary: #12444b;
  --accent: #e7b34a;
  --dark: #12444b;
  --data-teal: #087f78;
  --data-teal-dark: #08665f;
  --data-mint: #d9f1e9;
  --data-ink: #12444b;
  --sis-navy: #14243d;
  --sis-blue: #245bc7;
  --sis-blue-dark: #1747a4;
  --sis-ink: #24324a;
  --sis-muted: #65728a;
  --sis-border: #e2e7ef;
  --sis-soft: #f4f7fb;
  --sis-white: #fff;
  --sis-side-bg: #0f172a;
  --sis-side-text: #c3cee0;
  --sis-side-muted: #8190a8;
  --sis-side-line: rgba(255, 255, 255, .09);
  --sis-accent: #38bdf8;
  --sis-w: 288px;
  --sis-rail: 72px;
  --sis-topbar-h: 60px;
  --sis-z-whatsapp: 900;   /* under the cookie banner (1000), topbar (1100) and sidebar (1200) */
}

/* ---------- layout: content makes room for the sidebar ---------- */
html.sis-has-nav { --sis-pad: 0px; scroll-padding-top: calc(var(--sis-topbar-h) + 14px); }
@media (min-width: 768px) {
  html.sis-has-nav { --sis-pad: var(--sis-w); }
  html.sis-has-nav.sis-rail { --sis-pad: var(--sis-rail); }
}
@media (min-width: 768px) and (max-width: 1100px) {
  html.sis-has-nav { --sis-pad: var(--sis-rail); }   /* tablet: content always sits beside the icon rail */
}
html.sis-has-nav body { padding-left: var(--sis-pad); overflow-x: clip; }
html.sis-ready.sis-has-nav body { transition: padding-left .22s ease; }
html.sis-has-nav .cookie-banner { left: calc(var(--sis-pad) + 16px); }
html.sis-lock,
html.sis-lock body { overflow: hidden; }

/* ---------- sidebar ---------- */
.sis-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1200;
  width: var(--sis-w);
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--sis-side-bg);
  color: var(--sis-side-text);
  border-right: 1px solid var(--sis-side-line);
  font: 14px/1.4 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
html.sis-ready .sis-sidebar { transition: width .22s ease, transform .25s ease, visibility 0s; }
.sis-sidebar.is-rail { width: var(--sis-rail); }
html.sis-tablet-open .sis-sidebar { box-shadow: 0 0 44px rgba(2, 6, 23, .45); }

.sis-sidebar a { text-decoration: none; }
.sis-sidebar svg,
.sis-topbar svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sis-side-head { display: flex; align-items: center; gap: 8px; min-height: 66px; padding: 14px 14px 10px; }
.sis-brand { min-width: 0; display: flex; flex: 1 1 auto; align-items: center; gap: 10px; color: #fff; }
.sis-logo {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(135deg, #245bc7, #0b9587);
  color: #fff;
  font: 800 13px/1 Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .02em;
}
.sis-brand-name { min-width: 0; overflow: hidden; font-weight: 700; font-size: 15px; line-height: 1.2; text-overflow: ellipsis; }

.sis-side-toggle,
.sis-side-close,
.sis-menu-btn {
  width: 36px;
  height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--sis-side-text);
  cursor: pointer;
}
.sis-side-toggle:hover,
.sis-side-close:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sis-side-toggle svg { transition: transform .2s ease; }
.sis-sidebar.is-rail .sis-side-toggle svg { transform: rotate(180deg); }
.sis-side-close { display: none; }

.sis-side-tools { padding: 0 14px 10px; }
.sis-menu-search { position: relative; display: block; }
.sis-menu-search svg { position: absolute; top: 50%; left: 11px; width: 17px; height: 17px; color: var(--sis-side-muted); transform: translateY(-50%); pointer-events: none; }
.sis-menu-search input {
  width: 100%;
  min-height: 38px;
  padding: 8px 12px 8px 36px;
  border: 1px solid var(--sis-side-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .07);
  color: #fff;
  font: 14px/1.3 Inter, ui-sans-serif, system-ui, sans-serif;
}
.sis-menu-search input::placeholder { color: var(--sis-side-muted); opacity: 1; }
.sis-menu-search input:focus { border-color: var(--sis-accent); outline: 0; background: rgba(255, 255, 255, .1); }
.sis-expand-all {
  margin: 8px 0 0 auto;
  display: block;
  padding: 3px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--sis-side-muted);
  font: 600 12px/1.2 Inter, ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}
.sis-expand-all:hover { color: var(--sis-accent); }

.sis-side-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 2px 10px 12px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .22) transparent;
}
.sis-side-nav::-webkit-scrollbar { width: 6px; }
.sis-side-nav::-webkit-scrollbar-thumb { border-radius: 6px; background: rgba(255, 255, 255, .22); }

.sis-quick-row,
.sis-side-foot { display: flex; gap: 6px; }
.sis-quick-row { margin: 0 0 10px; }
.sis-side-foot { padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--sis-side-line); }
.sis-quick {
  min-width: 0;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 6px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .05);
  color: var(--sis-side-text);
  font-weight: 600;
  font-size: 13px;
}
.sis-quick svg { width: 17px; height: 17px; }
.sis-quick-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sis-quick:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.sis-quick.is-active { background: rgba(56, 189, 248, .16); color: #7dd3fc; }

.sis-cats { margin: 0; padding: 0; list-style: none; }
.sis-cat { margin: 2px 0; }
.sis-cat[hidden] { display: none; }
.sis-cat-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px 7px 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #e3eaf6;
  font: 600 14px/1.3 Inter, ui-sans-serif, system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
}
.sis-cat-btn:hover { background: rgba(255, 255, 255, .07); }
.sis-ico {
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(56, 189, 248, .11);
  color: var(--sis-accent);
}
.sis-cat-label { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sis-count { min-width: 22px; padding: 1px 6px; border-radius: 99px; background: rgba(255, 255, 255, .08); color: var(--sis-side-muted); font-size: 11px; text-align: center; }
.sis-chev { width: 16px; height: 16px; color: var(--sis-side-muted); }
html.sis-ready .sis-chev { transition: transform .2s ease; }
.sis-cat.is-open > .sis-cat-btn .sis-chev { transform: rotate(180deg); }
.sis-cat.has-active > .sis-cat-btn { color: #fff; }
.sis-cat.has-active > .sis-cat-btn .sis-ico { background: rgba(56, 189, 248, .22); }

/* smooth expand / collapse without measuring heights */
.sis-sub-wrap { display: grid; grid-template-rows: 0fr; }
.sis-cat.is-open > .sis-sub-wrap,
.sis-sidebar.is-filtering .sis-cat.has-match > .sis-sub-wrap { grid-template-rows: 1fr; }
.sis-sub {
  min-height: 0;
  margin: 0 0 0 23px;
  padding: 0 0 0 8px;
  overflow: hidden;
  visibility: hidden;          /* collapsed links leave the tab order */
  list-style: none;
  border-left: 1px solid var(--sis-side-line);
}
.sis-cat.is-open .sis-sub,
.sis-sidebar.is-filtering .sis-cat.has-match .sis-sub { visibility: visible; }
html.sis-ready .sis-sub-wrap { transition: grid-template-rows .22s ease; }
html.sis-ready .sis-sub { transition: visibility 0s linear .22s; }
html.sis-ready .sis-cat.is-open .sis-sub,
html.sis-ready .sis-sidebar.is-filtering .sis-cat.has-match .sis-sub { transition-delay: 0s; }
.sis-sidebar.is-filtering .sis-sub li:not(.is-match) { display: none; }

.sis-sub li { margin: 1px 0; }
.sis-link {
  display: block;
  padding: 7px 10px;
  border-radius: 8px;
  color: #a9b7cd;
  font-size: 13.5px;
  overflow-wrap: anywhere;
}
.sis-link:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.sis-link.is-active { background: rgba(56, 189, 248, .16); box-shadow: inset 2px 0 0 var(--sis-accent); color: #7dd3fc; font-weight: 700; }
.sis-nomatch { margin: 14px 8px; color: var(--sis-side-muted); font-size: 13px; }
.sis-nomatch[hidden] { display: none; }

.sis-sidebar a:focus-visible,
.sis-sidebar button:focus-visible,
.sis-menu-search input:focus-visible { outline: 2px solid var(--sis-accent); outline-offset: -2px; }

/* ---------- icon rail (collapsed desktop / default tablet) ---------- */
.sis-sidebar.is-rail .sis-side-head { flex-direction: column; justify-content: center; gap: 8px; padding: 12px 0 8px; }
.sis-sidebar.is-rail .sis-brand { flex: none; }
.sis-sidebar.is-rail .sis-brand-name,
.sis-sidebar.is-rail .sis-cat-label,
.sis-sidebar.is-rail .sis-count,
.sis-sidebar.is-rail .sis-chev,
.sis-sidebar.is-rail .sis-side-tools,
.sis-sidebar.is-rail .sis-sub-wrap,
.sis-sidebar.is-rail .sis-quick-label,
.sis-sidebar.is-rail .sis-nomatch { display: none; }
.sis-sidebar.is-rail .sis-side-nav { padding: 4px 8px 10px; }
.sis-sidebar.is-rail .sis-cat-btn { justify-content: center; padding: 6px; }
.sis-sidebar.is-rail .sis-quick-row,
.sis-sidebar.is-rail .sis-side-foot { flex-direction: column; padding-left: 8px; padding-right: 8px; }
.sis-sidebar.is-rail .sis-quick-row { padding: 0; }
.sis-sidebar.is-rail .sis-quick { padding: 9px 0; }

/* ---------- top bar ---------- */
.sis-topbar { position: sticky; top: 0; z-index: 1100; background: #fff; border-bottom: 1px solid var(--sis-border); }
.sis-topbar-row { display: flex; align-items: center; gap: 10px; min-height: var(--sis-topbar-h); padding: 8px 16px; }
.sis-menu-btn { display: none; border: 1px solid var(--sis-border); color: var(--sis-navy); }
.sis-brand-top { display: none; color: var(--sis-navy); }
.sis-top-actions { min-width: 0; display: flex; flex: 1 1 auto; align-items: center; justify-content: flex-end; gap: 8px; }
.sis-search-toggle {
  min-width: 0;
  width: min(400px, 100%);
  height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 14px;
  border: 1px solid var(--sis-border);
  border-radius: 99px;
  background: var(--sis-soft);
  color: var(--sis-muted);
  font: 14px/1 Inter, ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}
.sis-search-toggle:hover,
.sis-search-toggle[aria-expanded="true"] { background: #fff; border-color: #b9c6dd; color: var(--sis-blue-dark); }
.sis-search-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sis-topbar a:focus-visible,
.sis-topbar button:focus-visible { outline: 3px solid #76a2f4; outline-offset: 2px; }

.sis-search-panel[hidden] { display: none; }
.sis-search-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 16px;
  z-index: 2;
  width: min(650px, calc(100% - 32px));
  max-height: min(75vh, 660px);
  overflow: auto;
  padding: 14px;
  border: 1px solid var(--sis-border);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(20, 36, 61, .18);
}
.sis-search-form { display: flex; gap: 8px; }
.sis-search-form input {
  min-width: 0;
  flex: 1 1 auto;
  min-height: 46px;
  padding: 0 13px;
  border: 1px solid #ccd5e3;
  border-radius: 8px;
  color: var(--sis-ink);
  font: 14px/1.4 Inter, ui-sans-serif, system-ui, sans-serif;
}
.sis-search-form input::placeholder { color: #748099; opacity: 1; }
.sis-search-form button {
  min-width: 84px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: var(--sis-blue);
  color: #fff;
  font: 700 13px/1 Inter, ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}
.sis-search-form button:hover { background: var(--sis-blue-dark); }
.sis-search-results[hidden] { display: none; }
.sis-search-results:not([hidden]) { display: grid; gap: 4px; padding-top: 10px; }
.sis-search-results .site-search-message { margin: 2px 4px 6px; color: var(--sis-muted); font-size: 12px; }
.sis-search-results .site-search-result { display: grid; gap: 3px; padding: 10px; border-radius: 8px; color: var(--sis-ink); text-decoration: none; }
.sis-search-results .site-search-result:hover,
.sis-search-results .site-search-result:focus-visible { background: var(--sis-soft); }
.sis-search-results .site-search-result strong { font-size: 13px; }
.sis-search-results .site-search-result span { color: var(--sis-muted); font-size: 11px; }
.sis-search-results .site-search-result small { color: #536078; font-size: 12px; line-height: 1.4; }

.sis-commerce-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.sis-checkout { padding: 10px 14px; border-radius: 8px; background: var(--sis-blue); color: #fff !important; font: 700 13px/1 Inter, ui-sans-serif, system-ui, sans-serif; text-decoration: none; }
.sis-cart { min-height: 38px; padding: 8px 11px; border: 1px solid var(--sis-border); border-radius: 8px; background: #fff; color: var(--sis-ink); font: 700 12px/1 Inter, ui-sans-serif, system-ui, sans-serif; cursor: pointer; }
.sis-cart span { min-width: 18px; height: 18px; display: inline-grid; margin-left: 4px; place-items: center; border-radius: 50%; background: var(--sis-blue); color: #fff; font-size: 10px; }

/* ---------- overlay, skip link, helpers ---------- */
.sis-overlay { position: fixed; inset: 0; z-index: 1190; background: rgba(8, 13, 28, .58); }
.sis-overlay[hidden] { display: none; }
.sis-skip { position: fixed; top: 8px; left: 8px; z-index: 1300; padding: 10px 14px; border-radius: 8px; background: #fff; color: var(--sis-navy); font: 700 14px/1 Inter, system-ui, sans-serif; transform: translateY(-200%); }
.sis-skip:focus { transform: none; outline: 3px solid #76a2f4; }
.sis-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }

.sis-whatsapp-float {
  position: fixed;
  right: calc(20px + env(safe-area-inset-right, 0px));
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: var(--sis-z-whatsapp);
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #15803d;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .22);
  color: #fff;
}
.sis-whatsapp-float:focus-visible { outline: 3px solid var(--sis-navy); outline-offset: 3px; }
.sis-whatsapp-float span { font: 800 15px/1 Inter, ui-sans-serif, system-ui, sans-serif; }

body .brand-mark,
body .btn-primary,
body .catalog-button-primary,
body .btn.primary { background: #245bc7; color: #fff; border-color: transparent; }
body .preview { height: 300px; }
body .preview iframe { width: 166.67%; height: 166.67%; transform: scale(.6); }

/* ---------- mobile: left drawer ---------- */
@media (max-width: 767px) {
  .sis-sidebar { width: min(320px, 86vw); transform: translateX(-104%); visibility: hidden; }
  html.sis-ready .sis-sidebar { transition: transform .25s ease, visibility 0s linear .25s; }
  html.sis-drawer-open .sis-sidebar { transform: none; visibility: visible; box-shadow: 0 0 44px rgba(2, 6, 23, .5); }
  html.sis-ready.sis-drawer-open .sis-sidebar { transition: transform .25s ease, visibility 0s; }
  .sis-side-toggle { display: none; }
  .sis-side-close { display: grid; }
  .sis-menu-btn { display: grid; }
  .sis-brand-top { min-width: 0; display: flex; flex: 1 1 auto; }
  .sis-top-actions { flex: none; }
  .sis-topbar-row { padding: 8px 12px; gap: 8px; }
  .sis-search-toggle { width: 42px; padding: 0; justify-content: center; border-radius: 10px; }
  .sis-search-label { display: none; }
  .sis-search-panel { right: 12px; left: 12px; width: auto; padding: 10px; }
  .sis-topbar.is-commerce .sis-brand-name { display: none; }
  .sis-topbar.is-commerce .sis-brand-top { flex: 1 1 auto; }
}
@media (max-width: 400px) {
  .sis-checkout { display: none; }
}
@media (min-width: 768px) {
  .sis-topbar-row { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 480px) {
  html.sis-has-nav .cookie-banner { left: 12px; right: 12px; }
}

@media print {
  .sis-sidebar, .sis-overlay, .sis-topbar, .sis-whatsapp-float, .sis-skip { display: none !important; }
  html.sis-has-nav body { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sis-sidebar *,
  .sis-sidebar,
  html.sis-has-nav body { transition-duration: .01ms !important; }
}