/* place your css rules here 
More css-variables see in ./extensions/novator/storefront/view/novator/css/tm_style.css
*/
/*
:root,
[data-bs-theme=light] {
    --bs-primary: #2e0203;
}*/
/* place your css rules here 
More css-variables see in ./extensions/novator/storefront/view/novator/css/tm_style.css
/* grid link */
.grid-container {
  max-width: 450px;
  margin: 0 auto;
  padding: 0 10px;
}

.grid-wrap {
  --gap: 14px;
  --bd: #08314A;
  --fg: #0f172a;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.grid-item {
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 14px 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(26, 77, 97, .04);
}

.grid-link {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  text-decoration: none;
  color: var(--fg);
}

.grid-code {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
  min-width: 8.5ch;
}

.grid-title {
  line-height: 1.3;
}

.grid-link:focus-visible {
  outline: 2px solid #94a3b8;
  outline-offset: 3px;
  border-radius: 8px;
}

@media (hover:hover) {
  .grid-item:hover {
    box-shadow: 0 4px 10px rgba(26, 77, 97, .5)
  }
}
/* end grid link */
/* NatriChlor logo */
.nlogo-natri {
  font-size: 3.75rem; /* you can change this globally */
  color: rgb(22, 72, 109); /* deep blue */
  font-weight: bold;
}

.nlogo-chlor {
  font-size: 3.75rem;
  color: rgb(4, 111, 3); /* green */
  font-weight: bold;
}

/* KVLab logo */
.kvlogo {
  font-size: 2rem;
  color: rgb(53, 137, 215); /* base blue */
  font-weight: bold;
}

.kvlogo-kv {
  color: rgb(22, 72, 109); /* deep blue for KV */
}


*//* Footer background */
footer,
.footer,
.site-footer {
  background-color: #08314A !important;
  color: #fff !important; /* makes text white for contrast */
}

/* Optional: footer links */
footer a,
.footer a,
.site-footer a {
  color: #ffffff !important;
}
footer a:hover {
  color: #cccccc !important; /* softer hover */
}


/* =========================
   Global Button Palette Template
   ========================= */

/* Primary */
.btn-primary {
  background-color: #08314A !important;   /* solid color */
  border-color: #08314A !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: #065070 !important;   /* hover/active */
  border-color: #065070 !important;
  color: #fff !important;
}

/* Outline Primary */
.btn-outline-primary {
  color: #08314A !important;
  border-color: #08314A !important;
  background-color: transparent !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: #08314A !important;
  color: #fff !important;
  border-color: #08314A !important;
}

/* Secondary */
.btn-secondary {
  background-color: #666 !important;  /* placeholder */
  border-color: #666 !important;
  color: #fff !important;
}
.btn-secondary:hover {
  background-color: #444 !important;  /* darker hover */
  border-color: #444 !important;
}

/* Success */
.btn-success {
  background-color: #28a745 !important;  /* green */
  border-color: #28a745 !important;
  color: #fff !important;
}
.btn-success:hover {
  background-color: #218838 !important;
  border-color: #218838 !important;
}

/* Danger */
.btn-danger {
  background-color: #dc3545 !important;  /* red */
  border-color: #dc3545 !important;
  color: #fff !important;
}
.btn-danger:hover {
  background-color: #c82333 !important;
  border-color: #c82333 !important;
}

/* Warning */
.btn-warning {
  background-color: #ffc107 !important;  /* yellow */
  border-color: #ffc107 !important;
  color: #212529 !important; /* dark text for contrast */
}
.btn-warning:hover {
  background-color: #e0a800 !important;
  border-color: #e0a800 !important;
}

/* Info */
.btn-info {
  background-color: #17a2b8 !important;  /* cyan */
  border-color: #17a2b8 !important;
  color: #fff !important;
}
.btn-info:hover {
  background-color: #117a8b !important;
  border-color: #117a8b !important;
}

/* Light */
.btn-light {
  background-color: #f8f9fa !important;  /* light gray */
  border-color: #f8f9fa !important;
  color: #212529 !important;
}
.btn-light:hover {
  background-color: #e2e6ea !important;
  border-color: #dae0e5 !important;
}

/* Dark */
.btn-dark {
  background-color: #343a40 !important;  /* dark gray */
  border-color: #343a40 !important;
  color: #fff !important;
}
.btn-dark:hover {
  background-color: #23272b !important;
  border-color: #1d2124 !important;
}



/* --- Global Header / Nav --- */

/* Header + nav background */
.nav-wrapper,
.header,
.navbar,
.mega-menu {
  background-color: #08314A !important;  /* deep teal */
}

/* Top-level menu links */
.mega-menu > li > a,
.mega-menu > li > a:link,
.mega-menu > li > a:visited,
.mega-menu > li > a:active {
  color: #ffffff !important;   /* white default */
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: .02em;
  text-decoration: none;
}

/* Hover effect on main menu */
.mega-menu > li > a:hover {
  color: #A1D5DA !important;   /* light aqua on hover */
}

/* Dropdown menu panel */
.mega-menu .dropdown-menu {
  background-color: #0A3B5A !important;  /* slightly lighter teal */
}
.mega-menu .dropdown-menu a,
.mega-menu .dropdown-menu a:link,
.mega-menu .dropdown-menu a:visited,
.mega-menu .dropdown-menu a:active {
  color: #ffffff !important;
  text-decoration: none;
}
.mega-menu .dropdown-menu a:hover {
  color: #A1D5DA !important;   /* aqua hover for dropdown too */
  background: rgba(255,255,255,0.1);
}

/* --- Breadcrumbs --- */

.breadcrumb {
  background: transparent;
  padding: 8px 0;
  margin: 0 0 15px 0;
  font-size: 0.9rem;
  font-family: Arial, sans-serif;
}

/* Breadcrumb links */
.breadcrumb a:link {
  color: #ffffff;        /* default white */
  text-decoration: none;
}
.breadcrumb a:visited {
  color: #A1D5DA;        /* light aqua visited */
}
.breadcrumb a:hover {
  color: #A1D5DA;        /* aqua hover */
  text-decoration: underline;
}
.breadcrumb a:active {
  color: #ffffff;        /* keep active white */
}

/* Separator (›) */
.breadcrumb span,
.breadcrumb li::before {
  color: #A1D5DA;        /* same light aqua for separators */
}

/* Current page (active crumb) */
.breadcrumb .active,
.breadcrumb span:last-child {
  color: #ffffff;        /* white */
  font-weight: 600;
}
/* FORCE main nav links to white + aqua hover */
.header a.nav-link,
.header .navbar-nav > li > a,
.header .nav > li > a,
.navbar .navbar-nav > li > a,
.navbar .nav > li > a,
.nav-wrapper .navbar-nav > li > a,
.nav-wrapper .nav > li > a,
.mega-menu > li > a {
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  letter-spacing: .02em !important;
  text-decoration: none !important;
}

/* Hover / focus */
.header a.nav-link:hover,
.header .navbar-nav > li > a:hover,
.header .nav > li > a:hover,
.navbar .navbar-nav > li > a:hover,
.navbar .nav > li > a:hover,
.nav-wrapper .navbar-nav > li > a:hover,
.nav-wrapper .nav > li > a:hover,
.mega-menu > li > a:hover,
.header a.nav-link:focus,
.header .navbar-nav > li > a:focus,
.header .nav > li > a:focus {
  color: #A1D5DA !important;
}

/* Active/current menu item (some themes add .active/.current) */
.header .navbar-nav > li.active > a,
.header .nav > li.active > a,
.navbar .navbar-nav > li.active > a,
.navbar .nav > li.active > a,
.nav-wrapper .navbar-nav > li.active > a,
.nav-wrapper .nav > li.active > a,
.mega-menu > li.active > a,
.header .navbar-nav > li.current > a,
.header .nav > li.current > a {
  color: #ffffff !important;
}

/* Dropdown items */
.mega-menu .dropdown-menu a,
.mega-menu .dropdown-menu a:link,
.mega-menu .dropdown-menu a:visited {
  color: #ffffff !important;
  text-decoration: none !important;
}
.mega-menu .dropdown-menu a:hover,
.mega-menu .dropdown-menu a:focus {
  color: #A1D5DA !important;
  background: rgba(255,255,255,0.1);
}