/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Nov 02 2026 | 21:59:53 */
#toxtech-finder * { margin: 0; padding: 0; box-sizing: border-box; }

#toxtech-finder {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

#toxtech-finder .container {
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
  border-radius: 12px;
  padding: 32px;
}

#toxtech-finder .header { text-align: center; margin-bottom: 32px; }
#toxtech-finder .header h1 { font-size: 22px; font-weight: 500; margin-bottom: 8px; color: #002856; }
#toxtech-finder .header p { font-size: 14px; color: #555; }

/* ---------- Search ---------- */

#toxtech-finder .search-box { margin-bottom: 20px; }

#toxtech-finder .search-box input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
}

#toxtech-finder .search-box input:focus {
  outline: 2px solid #002856;
  outline-offset: 1px;
  border-color: #002856;
}

/* ---------- Filter buttons ---------- */

#toxtech-finder .filter-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

#toxtech-finder .filter-btn {
  padding: 8px 14px !important;
  border: 1px solid #ddd !important;
  background: #fff !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: border-color 0.2s, background 0.2s !important;
  color: #333 !important;
  text-decoration: none !important;
  display: inline-block !important;
  font-family: inherit !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  box-shadow: none !important;
}

#toxtech-finder .filter-btn:hover { border-color: #999 !important; }

#toxtech-finder .filter-btn:focus-visible {
  outline: 2px solid #002856 !important;
  outline-offset: 1px !important;
}

#toxtech-finder .filter-btn[aria-pressed="true"] {
  border-color: #002856 !important;
  background: #F0F8F7 !important;
  color: #002856 !important;
  font-weight: 500 !important;
}

#toxtech-finder .refine-label {
  font-size: 12px;
  color: #555;
  font-weight: 500;
  margin-right: 8px;
  align-self: center;
}

/* ---------- Category description ---------- */

#toxtech-finder .category-description {
  font-size: 13px;
  color: #555;
  line-height: 1.6;
  margin-bottom: 20px;
  padding: 12px;
  background: #F0F8F7;
  border-left: 3px solid #7CCCBD;
  border-radius: 4px;
  min-height: 30px;
}

#toxtech-finder .results-info {
  font-size: 13px;
  color: #555;
  margin-bottom: 20px;
  min-height: 18px;
}

/* ---------- Product cards ---------- */

#toxtech-finder .products-list { display: flex; flex-direction: column; gap: 12px; }

#toxtech-finder .product-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 12px;
  background: #fafafa;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: start;
}

#toxtech-finder .product-card:hover { border-color: #999; background: #fff; }

#toxtech-finder .product-info { min-width: 0; }
#toxtech-finder .product-name { font-weight: 500; font-size: 14px; color: #002856; }
#toxtech-finder .product-name a { color: inherit; text-decoration: none; }
#toxtech-finder .product-name a:hover { text-decoration: underline; }

#toxtech-finder .product-code {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  color: #555;
  margin-top: 2px;
}

#toxtech-finder .variant-tags { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

#toxtech-finder .tag {
  display: inline-block;
  padding: 3px 8px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  font-size: 11px;
  color: #555;
}

#toxtech-finder .product-meta { font-size: 12px; color: #555; margin-top: 8px; }

#toxtech-finder .quote-btn {
  padding: 8px 14px;
  background: #002856;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  text-decoration: none;
  display: inline-block;
}

#toxtech-finder .quote-btn:hover { background: #001a38; color: #fff; }
#toxtech-finder .quote-btn:focus-visible { outline: 2px solid #002856; outline-offset: 2px; }

/* ---------- States ---------- */

#toxtech-finder .state-panel { padding: 40px; text-align: center; color: #555; font-size: 14px; }

#toxtech-finder .error {
  padding: 16px;
  background: #FFF4E5;
  border: 1px solid #FFB549;
  border-radius: 8px;
  color: #6b4300;
  margin-bottom: 20px;
  font-size: 13px;
}

#toxtech-finder .spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  vertical-align: -3px;
  border: 2px solid #ddd;
  border-top-color: #002856;
  border-radius: 50%;
  animation: ttf-spin 0.8s linear infinite;
}

@keyframes ttf-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  #toxtech-finder .spinner { animation: none; }
}

#toxtech-finder .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Mobile ---------- */

@media (max-width: 600px) {
  #toxtech-finder .container { padding: 20px 16px; }
  #toxtech-finder .product-card { grid-template-columns: 1fr; }
}

/* ToxTech - sticky archive title + breadcrumb row */

.tt-sticky-title {
  position: -webkit-sticky;
  position: sticky;
  top: 90px;
  z-index: 50;
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(0, 40, 86, 0.12);
}

.tt-sticky-title .fl-row-content-wrap {
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Phones: a sticky header plus a sticky title leaves too little room
   for the list, so let it scroll away. */
@media (max-width: 900px) {
  .tt-sticky-title {
    position: static;
    box-shadow: none;
  }
}

/* ToxTech - category accent border on the sticky title row

   WooCommerce puts term-<slug> on the body of every category archive,
   so one rule per category colours the border with no field connection.

   Give the row the class tt-sticky-title, as before. The border lives
   here rather than in Beaver Builder so it stays with the colour rules.
*/

.tt-sticky-title {
  border-top: 30px solid #002856;   /* fallback: Oxford Blue */
}

.term-toxins-reference-standards .tt-sticky-title {
  border-top-color: #002856;
}

.term-staphylococcal .tt-sticky-title {
  border-top-color: #5B2D82;
}

.term-streptococcal .tt-sticky-title {
  border-top-color: #3A6474;
}

.term-plant .tt-sticky-title {
  border-top-color: #96C7AF;
}

.term-antibodies-detection-reagents .tt-sticky-title {
  border-top-color: #A8B4DC;
}

/* The shop archive has no term class, so it keeps the fallback above.
   Add a rule here if you want the catalog page to differ. */