/** Shopify CDN: Minification failed

Line 57:27 Unexpected "/"
Line 62:27 Unexpected "/"
Line 746:44 Unexpected "{"
Line 788:50 Unexpected "{"

**/
* {
    --sizes__border-element-radius: 0 0 20px 0;
}
 
.max-w-prose {
    max-width: 800px;
}
 
.option-hidden {
  display: none !important;
}
 
body.snize-results-page .max-w-prose.w-full  {
    max-width: none;
}
a:hover {
    color: #008fe5;
}
 
body.product #product-title {
    padding-top: 0!important;
}
 
footer a:hover {
    color: #83c900;
    text-decoration: none;
}

#collection-breadcrumb a {
  color: inherit;
  text-decoration: underline;
}

.theme__header {
  position: relative;
}

.theme__header:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

body:not(.index):not(.pages/connects-faq) main#root {
    position: relative;
    padding-top: 30px;
}

body:not(.index):not(.pages/connects-faq) main#root:before {
    content: " ";
    background: linear-gradient(90deg, #00518a, #003561 63%);
    top: 0;
    height: 30px;
    position: absolute;
    width: 100%;
    z-index: 1;
}

/* CTS Connects Configurator section heading + intro spacing. The
   heading was sitting flush against the page edge with no space below
   it. Match the grid's max-width and centering so the heading aligns
   visually with the selectors. */
.cts-connects-configurator-section {
    max-width: 1450px;
    margin-left: auto;
    margin-right: auto;
    padding: 16px;
}
.cts-connects-configurator-heading {
    margin: 8px 0 24px;
    padding-left: 4px;
}
.cts-connects-configurator-intro {
    margin: 0 0 16px;
    padding-left: 4px;
}

/* Clear button between heading and selectors. Subtle pill so it
   doesn't compete with the cascade UI. Calls resetConfigurator on
   click — wipes state from wherever the user is at. */
.cts-clear-btn {
    display: inline-block;
    margin: 0 0 12px 4px;
    padding: 6px 14px;
    background: transparent;
    border: 1px solid #c4c8d0;
    border-radius: 6px;
    color: #555;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.cts-clear-btn:hover {
    background: #f0f0f0;
    border-color: #a8aeb8;
    color: #000;
}
.cts-clear-btn:focus {
    outline: 2px solid rgba(0, 82, 138, 0.4);
    outline-offset: 2px;
}

/* Progress bar — sits between the Clear button and the cascade. Fill
   width is set by JS via updateProgress, reflecting how many cascade
   steps the user has completed out of the total visible plus the
   value-entry and Apply steps. */
.cts-progress {
    width: 100%;
    max-width: 1450px;
    margin: 0 auto 16px;
    height: 6px;
    background: #e8eaef;
    border-radius: 3px;
    overflow: hidden;
}
.cts-progress-fill {
    height: 100%;
    width: 0%;
    background: #00518a;
    border-radius: 3px;
    transition: width 0.3s ease;
}

#cts-custom-wrapper {
    display: grid;
    grid-auto-rows: minmax(96px, auto);
    /* Each column may grow up to 340px but no further, so cells stay
       a reasonable size on wide viewports. */
    grid-template-columns: repeat(4, minmax(0, 340px));
    justify-content: center;
    gap: 16px 20px;
    align-items: stretch;
    margin-bottom: 4px;
    max-width: 1450px;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 1024px) {
    #cts-custom-wrapper { grid-template-columns: repeat(2, minmax(0, 360px)); }
}
@media (max-width: 600px) {
    #cts-custom-wrapper {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    /* Tighten the card chrome on mobile so two fit comfortably per row. */
    #cts-custom-wrapper > .cts-selector-block,
    #cts-custom-wrapper > #sg_input_cell {
        min-height: 72px;
        padding: 10px 12px;
    }
    /* Shrink label + select font sizes so they don't overflow the
       narrower columns. */
    #cts-custom-wrapper .cts-selector-block label {
        font-size: 11px;
    }
    #cts-custom-wrapper .cts-selector-select,
    #cts-custom-wrapper #sg_input_ctsunitvalue {
        font-size: 13px;
    }
    /* When the input cell is half-width (no .mobile-span-2 = sitting at
       column 2 sharing a row with a selector), drop one font size so
       the placeholder text doesn't get cut off. Spanning cells keep
       the standard font size. */
    #cts-custom-wrapper > #sg_input_cell:not(.mobile-span-2) #sg_input_ctsunitvalue,
    #cts-custom-wrapper > #sg_input_cell:not(.mobile-span-2) #sg_input_ctsunitvalue::placeholder {
        font-size: 12.5px;
    }
    /* Input cell defaults to 1 column; JS toggles .mobile-span-2 when it
       lands at col 1 of a row. */
    #cts-custom-wrapper > #sg_input_cell {
        grid-column: span 1;
    }
    #cts-custom-wrapper > #sg_input_cell.mobile-span-2 {
        grid-column: span 2;
    }
    /* Button cells span the full width on mobile and center their
       compact buttons. */
    #cts-custom-wrapper > #sg_btn_apply_diameter,
    #cts-custom-wrapper > #sg_btn_pair {
        grid-column: span 2;
        justify-self: center;
    }
}
 
/* Shared card shell — applied to every cell in the configurator grid
   so dropdown selectors AND the diameter input/button/applied panel
   all sit in identical containers. */
#cts-custom-wrapper > .cts-selector-block,
#cts-custom-wrapper > #sg_input_cell {
    background: #ffffff;
    border: 1px solid #d0d4dc;
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
    width: 100%;
    min-height: 96px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#cts-custom-wrapper > .cts-selector-block:hover {
    border-color: #00518a;
    box-shadow: 0 2px 8px rgba(0, 82, 138, 0.08);
}

 
/* The inner div in createSelectBlock has inline display:inline-block;
   force it to fill the card. */
#cts-custom-wrapper .cts-selector-title {
    display: block !important;
    width: 100%;
}
#cts-custom-wrapper .cts-selector-block label {
    display: block;
    font-weight: 600;
    color: #00518a;
    font-size: 12px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin: 0 0 8px 0;
}
#cts-custom-wrapper .cts-selector-block select {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #c8cbd4;
    border-radius: 6px;
    background: #ffffff;
    font-size: 14px;
    line-height: 1.3;
    cursor: pointer;
    box-sizing: border-box;
}
#cts-custom-wrapper .cts-selector-block select:focus {
    outline: none;
    border-color: #00518a;
    box-shadow: 0 0 0 2px rgba(0, 82, 138, 0.18);
}
 
/* Selected state: when the cascade selector has a real value (not "Select"),
   give the card a subtle accent so users can see at a glance what's been
   chosen. Driven entirely by :has() of the picked <option>, no JS class needed. */
#cts-custom-wrapper > .cts-selector-block:has(select option[value="Select"]:not(:checked)) {
    border-color: #83c900;
    background: #f6fbef;
}
#cts-custom-wrapper > .cts-selector-block:has(select option[value="Select"]:not(:checked)) label {
    color: #4f7d00;
}
#cts-custom-wrapper > .cts-selector-block:has(select option[value="Select"]:not(:checked))::before {
    content: "✓";
    position: absolute;
    top: 8px;
    right: 12px;
    color: #83c900;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
}
#cts-custom-wrapper > .cts-selector-block {
    position: relative;
}
 
/* Diameter input cell. Mirrors a selector block: label on top, the
   field, then "Learn more". It keeps the shared card shell as-is
   (min-height + vertical centering); because the shell uses min-height
   (not a fixed height), the card simply grows downward when "Learn
   more" is expanded. */
/* Input label — matches the selector-block label styling exactly so
   the active input card reads like an active selector card. */
#cts-custom-wrapper > #sg_input_cell > .cts-input-label {
    display: block;
    font-weight: 600;
    color: #00518a;
    font-size: 12px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin: 0 0 8px 0;
}
/* Diameter input — styled identically to a selector's <select> so the
   two fields render as the same box. No explicit height: both size
   naturally from matching padding + line-height + border. appearance:
   none + margin/font resets remove the UA-default input sizing that
   otherwise made the input a touch taller than the select. */
#cts-custom-wrapper > #sg_input_cell > #sg_input_ctsunitvalue {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid #c8cbd4;
    border-radius: 6px;
    background: #ffffff;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.3;
    text-align: left;
    outline: none;
    box-sizing: border-box;
}
#cts-custom-wrapper > #sg_input_cell > #sg_input_ctsunitvalue:focus {
    border-color: #00518a;
    box-shadow: 0 0 0 2px rgba(0, 82, 138, 0.18);
}

/* Applied state — once the user clicks Apply, the input card adopts the
   same "selected" look as a completed selector card: green frame, light
   green fill, green label, and a ✓. The field itself shows the applied
   value read-only. Mirrors the selector selected-state styling above. */
#cts-custom-wrapper > #sg_input_cell.is-applied {
    border-color: #83c900;
    background: #f6fbef;
    position: relative;
}
#cts-custom-wrapper > #sg_input_cell.is-applied > .cts-input-label {
    color: #4f7d00;
}
#cts-custom-wrapper > #sg_input_cell.is-applied::before {
    content: "✓";
    position: absolute;
    top: 8px;
    right: 12px;
    color: #83c900;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
}
#cts-custom-wrapper > #sg_input_cell.is-applied > #sg_input_ctsunitvalue {
    background: #ffffff;
    cursor: default;
}

/* Keep each cascade cell sized to its own content so expanding one
   card's "Learn more" grows only that card, not its row-mates. (The
   grid's align-items: stretch would otherwise stretch a shorter
   sibling to match.) */
#cts-custom-wrapper > .cts-selector-block,
#cts-custom-wrapper > #sg_input_cell {
    align-self: start;
}

/* ------------------------------------------------------------------ */
/* "Learn more" disclosure — one per selector card (and the input      */
/* card). Plain text (no box) with a chevron matching the select       */
/* arrow, sitting right next to the label. Openable only while that    */
/* selector is the active step; once a value is chosen it locks.       */
/* ------------------------------------------------------------------ */
#cts-custom-wrapper .cts-learn-more {
    margin-top: 8px;
}
#cts-custom-wrapper .cts-learn-more[hidden] {
    display: none;
}
#cts-custom-wrapper .cts-learn-more > summary {
    list-style: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #00518a;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    user-select: none;
}
#cts-custom-wrapper .cts-learn-more > summary:hover {
    text-decoration: underline;
}
#cts-custom-wrapper .cts-learn-more > summary::-webkit-details-marker {
    display: none;
}
/* Chevron drawn from borders, matching the select's dropdown arrow. */
#cts-custom-wrapper .cts-learn-more > summary::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.15s ease;
}
#cts-custom-wrapper .cts-learn-more[open] > summary::after {
    transform: translateY(1px) rotate(-135deg);
}
#cts-custom-wrapper .cts-learn-more .cts-learn-more-body {
    padding: 8px 2px 2px;
    font-size: 13px;
    line-height: 1.5;
    color: #333;
}
/* Locked: the selector already has a value, so "Learn more" can't be
   opened. Kept visible but inert and dimmed. */
#cts-custom-wrapper .cts-learn-more.cts-learn-locked > summary {
    cursor: default;
    color: #9aa3ad;
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    #cts-custom-wrapper .cts-learn-more > summary::after {
        transition: none;
    }
}
 
/* Apply / Change / Reset buttons — brand colors. Apply and Change
   share the solid navy fill; Reset is red. */
#cts-custom-wrapper #sg_btn_apply_diameter,
#cts-custom-wrapper #sg_btn_change_diameter {
    color: #ffffff !important;
    background: #00518a !important;
    border: 1px solid #00518a;
    align-items: center;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    letter-spacing: 0.3px;
}
#cts-custom-wrapper #sg_btn_apply_diameter:hover,
#cts-custom-wrapper #sg_btn_change_diameter:hover {
    background: #003561 !important;
    border-color: #003561;
}

/* Reset button — red destructive style */
#cts-custom-wrapper #sg_btn_reset_configurator {
    color: #ffffff !important;
    background: #c0392b !important;
    border: 1px solid #c0392b;
    align-items: center;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    letter-spacing: 0.3px;
}
#cts-custom-wrapper #sg_btn_reset_configurator:hover {
    background: #962d22 !important;
    border-color: #962d22;
}

/* ------------------------------------------------------------------ */
/* Compact buttons — their own grid cells to the RIGHT of the input,    */
/* but small (just bigger than the text) rather than full-size cards.   */
/* ------------------------------------------------------------------ */
/* Apply cell — no card chrome; the button is compact and vertically
   centered against the input card to its left. */
#cts-custom-wrapper > #sg_btn_apply_diameter {
    align-self: center;
    justify-self: start;
    width: auto;
    min-height: 0;
    padding: 7px 18px;
    border-radius: 6px;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Change/Reset cell — stacked vertically, equal widths, centered
   against the input card. */
#cts-custom-wrapper > #sg_btn_pair {
    align-self: center;
    justify-self: start;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    min-height: 0;
    width: auto;
}
#cts-custom-wrapper > #sg_btn_pair > button {
    width: 100%;
    min-width: 140px;
    min-height: 0;
    padding: 7px 18px;
    border-radius: 6px;
    box-shadow: none;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
}
 
.snize-product-filters-list li:has(input.snize-product-filters-checkbox[value='0']),
.snize-product-filters-list li:has(input.snize-product-filters-checkbox[value='00'])
{
    display: none;
}
div.snize ul.snize-product-filters-list{
    max-height:198px!important;
}
 
/* Hide sort button in collections */
.snize-search-results .snize-main-panel-dropdown,
.snize-collection-mode .snize-main-panel-dropdown {
    display: none;
}
 
div.snize.snize-search-results  div.snize-main-panel-view-mode,
div.snize.snize-collection-mode  div.snize-main-panel-view-mode {
    float: right;
}
#snize-modal-mobile-filters-dialog #snize_product_filter_mobile_sort,
#snize-modal-mobile-filters-dialog #snize_product_filter_header_mobile_sort {
    display: none!important;
}

.cts-seal-unit-selector {
    position: relative;
}
.cts-seal-unit-toggle-icon {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 26px;
    line-height: 1;
    font-weight: 400;
    color: #000000ff;
    font-style: normal;
}
 
/* Hide specs attribute in grid cards */
.snize-item .snize-attribute {
    display: none !important;
}

/* Searchanize top search bar styles */
.snize-ac-results-multicolumn-list .snize-description {
    -webkit-line-clamp: none!important;
    max-height: none!important;
    height: auto!important;
}
/* Product Page */
table.cts-specs-table {
    margin-bottom: 25px;
}
table.cts-specs-table th,
table.cts-specs-table td {
    padding: 3px 10px;
}
table.cts-specs-table th {
    text-align: left;
    width: 200px;
}
 
table.cts-specs-table.single-column th {
    width: auto;
}
table.cts-specs-table.single-column td {
    padding-left: 30px;
}
.cts-bg-side-logo {
    background-color: #ffffffff !important;
}
.cts-bg-side-logo a {
    color: white !important;
}
button.cts-side-close-btn * {
    color: black!important;
}
ul.product-resources {
    padding-left: 2em;
    margin-top: 1em;
}
ul.product-resources li::marker {
    content: "» ";   
    font-weight: bold;
    font-size: 24px;
    color: var(--color__background-primary);
    line-height: 1em;
}
ul.product-resources li a {
    color: var(--color__background-primary);
    text-decoration: none;
}
ul.product-resources li a:hover {
    text-decoration: underline;
}
 
.cts-resources-section {
    max-width: 900px;
}
.cts-card {
    background: #dcdee1;
    border-left: 10px solid #121d3f;
    padding: 25px;    
}
 
/* RTE styling */
.rte {
  line-height: 1.6;
}
 
/* Headings */
.rte h1 {
  font-size: 30px;
  margin: 1.5em 0 0.5em;
  font-weight: 600;
}
 
.rte h2 {
  font-size: 26px;
  margin: 1.4em 0 0.5em;
  font-weight: 600;
}
 
.rte h3 {
  font-size: 22px;
  margin: 1.3em 0 0.5em;
  font-weight: 600;
}
 
.rte h4 {
  font-size: 18px;
  margin: 1.2em 0 0.5em;
  font-weight: 600;
}
 
.rte h5 {
  font-size: 16px;
  margin: 1.1em 0 0.5em;
  font-weight: 600;
}
 
.rte h6 {
  font-size: 14px;
  margin: 1em 0 0.5em;
  font-weight: 600;
}
 
/* Paragraphs */
.rte p {
  margin: 1em 0;
}
 
/* Lists */
.rte ul,
.rte ol {
  margin: 1em 0 1em 1.5em;
  padding: 0;
}
 
.rte li {
  margin: 0.25em 0;
}
 
/* Images */
.rte img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1em 0;
}
 
/* Links */
.rte a {
  text-decoration: underline;
  cursor: pointer;
}
 
/* Blockquotes */
.rte blockquote {
  margin: 1.5em 0;
  padding-left: 1em;
  border-left: 3px solid #ddd;
  color: #555;
}
 
/* Horizontal rule */
.rte hr {
  border: 0;
  border-top: 1px solid #ccc;
  margin: 2em 0;
}
 
/* End RTE Styling */
 
footer a[href="#"] {
    pointer-events: none;
}
 
.cts-main-menu a {
    text-decoration: none;
}

.cts-main-menu a:focus,
.cts-main-menu a:active {
  outline: none !important;
  box-shadow: none !important;
}

/* ===== Menu links ===== */

.cts-main-menu a[href*="cincinnati-test.com"],
.cts-main-menu a[href="/pages/cts-connects"],
.cts-main-menu a[href="/pages/leak-products"],
.cts-main-menu a[href="/pages/about-cts-connects"],
.cts-main-menu a[href="/pages/compare"],
.cts-main-menu a[href="/pages/about-cts-leak-standards"],
.cts-main-menu a[href="/pages/connects-faq"],
.cts-main-menu a[href="/pages/connect-applications"],
.cts-main-menu a[href="/pages/connect-resources"],
.cts-main-menu a[href="/pages/custom-connects"],
.cts-main-menu a[href="/pages/cts-leak-faq"],
.cts-main-menu a[href="/pages/leak-resources"],
.cts-main-menu a[href="/pages/a2la-accreditation"],
.cts-main-menu a[href="/pages/leak-standard-recertification"],
.cts-main-menu a[href="/pages/contact"],
.cts-main-menu a[href="/collections/cts-connects"],
.cts-main-menu a[href="/collections/ci-connects"],
.cts-main-menu a[href="/collections/co-connects"],
.cts-main-menu a[href="/collections/hi-connects"],
.cts-main-menu a[href="/collections/ho-connects"],
.cts-main-menu a[href="/collections/accessories"],
.cts-main-menu a[href="/collections/spare-seals"],
.cts-main-menu a[href="/collections/main-seal-kits"],
.cts-main-menu a[href="/collections/body-only-accessories"],
.cts-main-menu a[href="/collections/lead-ins"],
.cts-main-menu a[href="/collections/springmount"],
.cts-main-menu a[href="/collections/cts-configurator"],
.cts-main-menu a[href="/collections/leak-standard"],
.cts-main-menu a[href="/collections/calibrated-leak"],
.cts-main-menu a[href="/collections/variable-leak"],
.cts-main-menu a[href="/blog/cts-connect"], {
  background-color: #ffffff !important;
  background-image: none !important;
  text-decoration: none !important; /* removes underline */
  color: #000000 !important;        /* makes text black */
  opacity: 1 !important;
  background: transparent !important;
  font-size: 14px !important;
  text-decoration-color: rgb(36, 36, 35) !important;
  color: rgb(36, 36, 35) !important;
}

.cts-main-menu a[href*="cincinnati-test.com"]:hover,
.cts-main-menu a[href="/pages/cts-connects"]:hover,
.cts-main-menu a[href="/pages/about-cts-connects"]:hover,
.cts-main-menu a[href="/pages/leak-products"]:hover,
.cts-main-menu a[href="/pages/compare"]:hover,
.cts-main-menu a[href="/pages/about-cts-leak-standards"]:hover,
.cts-main-menu a[href="/pages/connects-faq"]:hover,
.cts-main-menu a[href="/pages/connect-applications"]:hover,
.cts-main-menu a[href="/pages/connect-resources"]:hover,
.cts-main-menu a[href="/pages/custom-connects"]:hover,
.cts-main-menu a[href="/pages/cts-leak-faq"]:hover,
.cts-main-menu a[href="/pages/leak-resources"]:hover,
.cts-main-menu a[href="/pages/a2la-accreditation"]:hover,
.cts-main-menu a[href="/pages/leak-standard-recertification"]:hover,
.cts-main-menu a[href="/pages/contact"]:hover,
.cts-main-menu a[href="/collections/cts-connects"]:hover,
.cts-main-menu a[href="/collections/ci-connects"]:hover,
.cts-main-menu a[href="/collections/co-connects"]:hover,
.cts-main-menu a[href="/collections/hi-connects"]:hover,
.cts-main-menu a[href="/collections/ho-connects"]:hover,
.cts-main-menu a[href="/collections/spare-seals"]:hover,
.cts-main-menu a[href="/collections/main-seal-kits"]:hover,
.cts-main-menu a[href="/collections/body-only-accessories"]:hover,
.cts-main-menu a[href="/collections/lead-ins"]:hover,
.cts-main-menu a[href="/collections/springmount"]:hover,
.cts-main-menu a[href="/collections/accessories"]:hover,
.cts-main-menu a[href="/collections/cts-configurator"]:hover,
.cts-main-menu a[href="/collections/leak-standard"]:hover,
.cts-main-menu a[href="/collections/calibrated-leak"]:hover,
.cts-main-menu a[href="/collections/variable-leak"]:hover,
.cts-main-menu a[href="/blog/cts-connect"]:hover, {
  background-color: #f5f5f5 !important; /* light gray hover */
  text-decoration: none !important;
  color: #008fe5 !important;
}

/* === Configurator product card styling =================================
   Appearance only — fonts, colors, borders, image rendering. All
   layout properties (display, grid, flex, width, margin, padding,
   position, etc.) are applied inline by showResults() in the JS so
   we don't have appearance and layout intertwined. */

#cts-results-wrapper .snize-product {
    background: transparent;
    border: none;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-self: center;
}

/* Box around each configurator product result (image + specs + the two
   buttons). Scoped to .cts-product-card — a class the configurator adds
   only to its own result cards and that appears nowhere else on the
   site — so nothing outside the configurator output is affected. Purely
   additive: paints a rounded box, no layout changes. */
#cts-results-wrapper .cts-product-card {
    background: #ffffff;
    border: 1px solid #d0d4dc;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
}

/* Image panel — just a square container holding the photo. */
#cts-results-wrapper .snize-product .cts-product-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: transparent;
    border-radius: 0;
    overflow: hidden;
    margin-bottom: 4px;
}
#cts-results-wrapper .snize-product .cts-product-image .snize-thumbnail {
    display: block;
    width: 100%;
    height: 100%;
}
#cts-results-wrapper .snize-product .cts-product-image img.snize-item-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: transparent;
}

/* Suppress any site-wide hover effect (blur, zoom, opacity dim) on the
   configurator's product card images. Targets the panel + everything
   inside it in any state. */
#cts-results-wrapper .snize-product .cts-product-image,
#cts-results-wrapper .snize-product .cts-product-image * {
    filter: none !important;
    transform: none !important;
    opacity: 1 !important;
    background: transparent !important;
}

/* Add to Cart — full-width dark gray bar at the bottom of the card.
   !important on display because Snize / the theme may have a sitewide
   rule that hides .snize-search-results-add-to-cart-link by default,
   and the configurator's rendered cards need it visible. */
#cts-results-wrapper .snize-product .snize-search-results-add-to-cart-link,
#cts-results-wrapper .snize-product [class*="add-to-cart"] {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px 16px;
    margin-top: 16px;
    box-sizing: border-box;
    background: #3a3a3a;
    color: #ffffff !important;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border: none;
    border-radius: 0;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease;
    visibility: visible !important;
    opacity: 1 !important;
}
#cts-results-wrapper .snize-product .snize-search-results-add-to-cart-link:hover,
#cts-results-wrapper .snize-product [class*="add-to-cart"]:hover {
    background: #2a2a2a;
}

/* Quote button sits tight under the cart button (override the 16px base gap). */
#cts-results-wrapper .snize-product .cts-add-to-quote-btn {
    margin-top: 6px !important;
}
#cts-results-wrapper .snize-product .cts-add-to-quote-btn:hover {
    background: #2a2a2a;
}

/* Force white text on the inner content span. The theme's global
   .btn__content rule may set a dark color that overrides the parent
   button's white; this scoped rule wins because of higher specificity
   plus !important. */
#cts-results-wrapper .snize-product .cts-add-to-cart-btn .btn__content,
#cts-results-wrapper .snize-product .cts-add-to-quote-btn .btn__content {
    color: #ffffff !important;
}

/* Disabled / state classes for the functional add-to-cart + quote buttons. */
#cts-results-wrapper .snize-product .cts-add-to-cart-btn[disabled],
#cts-results-wrapper .snize-product .cts-add-to-quote-btn[disabled] {
    cursor: wait;
    opacity: 0.85 !important;
}
#cts-results-wrapper .snize-product .cts-add-to-cart-btn.is-added,
#cts-results-wrapper .snize-product .cts-add-to-quote-btn.is-added {
    background: #2c7d2c;
}
#cts-results-wrapper .snize-product .cts-add-to-cart-btn.is-error,
#cts-results-wrapper .snize-product .cts-add-to-quote-btn.is-error {
    background: #8a2a2a;
}

/* Loading state: replace the content text with "..." so the button
   width stays the same instead of shrinking. We hide the real text
   via :empty / visibility and inject "..." through a pseudo-element
   on the button itself, positioned where the content would be. */
#cts-results-wrapper .snize-product .cts-add-to-cart-btn .btn__spinner {
    display: none;
}
#cts-results-wrapper .snize-product .cts-add-to-cart-btn.is-loading .btn__content {
    visibility: hidden;
    position: relative;
}
#cts-results-wrapper .snize-product .cts-add-to-cart-btn.is-loading .btn__content::after {
    content: "...";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: visible;
    color: #ffffff;
}

/* Text block — each spec line on its own row. */
#cts-results-wrapper .snize-product .cts-product-text {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* SKU (title) — regular weight, not bold. */
#cts-results-wrapper .snize-product .snize-title,
#cts-results-wrapper .snize-product a.snize-title {
    font-weight: 400;
    font-size: 15px;
    color: #000000;
    line-height: 1.3;
    text-decoration: none;
    margin: 0 0 12px;
}

/* Model number / spec / range / thread / grade — same small gray meta-line styling. */
#cts-results-wrapper .snize-product .cts-product-model,
#cts-results-wrapper .snize-product .cts-product-spec,
#cts-results-wrapper .snize-product .cts-product-range,
#cts-results-wrapper .snize-product .cts-product-thread,
#cts-results-wrapper .snize-product .cts-product-grade {
    font-size: 13px;
    color: #6b6b6b;
    line-height: 1.5;
}

/* Price — black, regular weight, slight top space. */
#cts-results-wrapper .snize-product .snize-price,
#cts-results-wrapper .snize-product .cts-product-price,
#cts-results-wrapper .snize-product [class*="price"]:not([class*="compare"]):not([class*="original"]) {
    font-weight: 400;
    font-size: 16px;
    color: #000000;
    margin-top: 12px;
}

#cts-results-wrapper .snize-product .snize-price-old,
#cts-results-wrapper .snize-product .snize-price-compare {
    text-decoration: line-through;
    color: #8a96a6;
    font-weight: 500;
}

/* Hide Snize's default star ratings / vendor / extra clutter — defensive,
   in case the catalog ever feeds those classes through. */
#cts-results-wrapper .snize-product .snize-rating,
#cts-results-wrapper .snize-product .snize-vendor,
#cts-results-wrapper .snize-product .snize-sku {
    display: none;
}
/* Mobile-only: add breathing room above the first configurator
   selector (Surface Type) so it isn't flush against the heading.
   padding-top on the wrapper is used instead of margin-top on the
   block because margins collapse against the wrapper/heading edges
   and the gap wouldn't render. */
@media (max-width: 768px) {
    #cts-custom-wrapper {
        padding-top: 24px;
    }
    #cts-custom-wrapper .cts-ctssurface-selector,
    .cts-ctssurface-selector {
        margin-top: 0px;
    }
}

/* Results wrapper — a flex column that centers its child grid on the
   page. Force width/margin so no platform rule can shove it left. */
#cts-results-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-top: 28px !important;
    box-sizing: border-box;
}

/* Results grid layout. Narrow (1-2 cards) uses flex row centering;
   wide (3+) uses CSS grid with auto-fit. Both center on the page. */
#cts-results-wrapper .cts-results-grid {
    justify-content: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    gap: 28px 24px;
    padding: 4px 0;
}
#cts-results-wrapper .cts-results-grid.is-narrow {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
}
#cts-results-wrapper .cts-results-grid.is-wide {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 280px));
    max-width: 1450px;
}
#cts-results-wrapper .cts-results-grid.count-1 .snize-product {
    flex: 0 1 380px;
    min-width: 280px;
    max-width: 380px;
}
#cts-results-wrapper .cts-results-grid.count-2 .snize-product {
    flex: 0 1 340px;
    min-width: 260px;
    max-width: 340px;
}

/* Centered error / notice modal. Replaces the native alert() popup.
   Fixed positioning + flex centering on the overlay puts the card in
   the middle of the viewport regardless of scroll. Hidden by default;
   .is-visible toggles it on. */
#cts-error-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}
#cts-error-modal-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}
#cts-error-modal-overlay .cts-error-modal {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.25);
    padding: 32px 28px 24px;
    min-width: 280px;
    max-width: 440px;
    width: calc(100% - 40px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transform: scale(0.96);
    transition: transform 0.15s ease;
    position: relative;
}
#cts-error-modal-overlay.is-visible .cts-error-modal {
    transform: scale(1);
}
#cts-error-modal-overlay .cts-error-modal-message {
    margin: 0;
    font-size: 15px;
    line-height: 1.45;
    color: #000000;
}
#cts-error-modal-overlay .cts-error-modal-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 4px;
    font-size: 22px;
    line-height: 1;
    color: #6b6b6b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background-color 0.15s ease, color 0.15s ease;
}
#cts-error-modal-overlay .cts-error-modal-close:hover {
    background: #f0f0f0;
    color: #000000;
}
#cts-error-modal-overlay .cts-error-modal-close:focus {
    outline: 2px solid rgba(0, 82, 138, 0.4);
    outline-offset: 2px;
}

/* Remove the extra padding BELOW the custom configurator selector dropdowns
   (Surface Type, Sealing Range Unit, Thread Type, ID/OD, Diameter Unit) in
   the Searchanise filter sidebar + mobile modal, so the gap beneath them
   matches the spacing of the native filter rows. Only the bottom padding is
   zeroed; the heading-to-select gap and all other spacing are untouched. */
.snize-product-filters-block:has(.cts-surface-selector),
.snize-product-filters-block:has(.cts-units-selector),
.snize-product-filters-block:has(.cts-thread-selector),
.snize-product-filters-block:has(.cts-diameter-selector),
.snize-product-filters-block:has(.cts-diameterunit-selector),
.cts-surface-selector,
.cts-units-selector,
.cts-thread-selector,
.cts-diameter-selector,
.cts-diameterunit-selector {
    padding-bottom: 0 !important;
}

.snize-horizontal-wrapper {
  margin-bottom: 5px !important;
  margin-top: 0px !important;
}

/* ============================================================
   Nav switch breakpoint: header nav >= 960px, drawer < 960px.
   Replaces the theme's lg: (1024px) toggle for the header bar only.
   ============================================================ */

/* Below 600px: show the mobile bar (hamburger/drawer), hide desktop nav */
@media (max-width: 959px) {
  .header__bar-desktop { display: none !important; }
  .header__bar-mobile  { display: flex !important; }
}

/* 600px and up: show the desktop header nav, hide the mobile bar */
@media (min-width: 960px) {
  .header__bar-mobile  { display: none !important; }
  .header__bar-desktop { display: flex !important; }
}

/* ============================================================
   Full-width mega menu (desktop) — layout only.
   Append to the END of assets/theme_edits.css.

   IMPORTANT: This intentionally does NOT touch the show/hide
   (opacity/height/visibility) behavior — the theme handles that.
   We only change WIDTH and POSITION so the panel spans the screen.
   ============================================================ */

@media (min-width: 960px) {

  /* Let the full-width panel escape this item's box.
     If the panel stops revealing after adding this, delete this
     one rule first — it's the only line that can interfere. */
  .header__item {
    position: static;
  }

  /* Width + horizontal position only. No opacity/visibility/height here,
     so the theme's own hover reveal keeps working. */
  .header__dropdown--mega {
    left: 0;
    right: 0;
    width: 100vw;
    max-width: 100vw;
  }

  /* Constrain the inner content to your page margins while the
     background stretches edge to edge.
     justify-content:center centers the column group across the panel. */
  .header__dropdown-inner {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 2rem;
    width: 100%;
  }

  /* Sub-links flow into columns, one per sub-category group.
     justify-content:center centers the columns within this group. */
  .header__dropdown-columns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    flex: 0 1 auto;
  }

  .header__dropdown-col {
    flex: 0 1 auto;
    min-width: 180px;
  }

  .header__dropdown-promo {
    flex: 0 0 auto;
  }
}

/* ============================================================
   Menu item styling
   ============================================================ */

/* Keep the normal text color on hover (no blue), for both the
   top-level header links and the dropdown links. */
.header__link,
.header__link:hover,
.header__link:focus,
.header__dropdown--mega a,
.header__dropdown--mega a:hover,
.header__dropdown--mega a:focus {
  color: inherit !important;
}

/* No background on any menu item, in any state
   (overrides the theme's hover:color__bg-shade-1 utility). */
.header__link,
.header__link:hover,
.header__link:focus,
.header__dropdown--mega a,
.header__dropdown--mega a:hover,
.header__dropdown--mega a:focus {
  background-color: transparent !important;
}

/* Hover = underline only, for ALL menu items (top-level + dropdown).
   !important overrides the theme's no-underline utility class. */
.header__link:hover,
.header__link:focus,
.header__dropdown--mega a:hover,
.header__dropdown--mega a:focus {
  text-decoration: underline !important;
}

/* Within each dropdown column:
   - the FIRST link (the sub-category heading) is bold
   - the remaining links (items within) are smaller */

/* Sub-category heading (top item of the column) */
.header__dropdown-col > a:first-child {
  font-weight: 700;
}

/* Items within the sub-category (everything after the heading) */
.header__dropdown-col > a:not(:first-child) {
  font-size: 0.875rem; /* smaller; adjust to taste (e.g. 0.8125rem) */
}

/* ============================================================
   Nav switch breakpoint: header nav >= 960px, drawer < 960px.
   Replaces the theme's lg: (1024px) toggle for the header bar only.
   ============================================================ */

/* Below 600px: show the mobile bar (hamburger/drawer), hide desktop nav */
@media (max-width: 959px) {
  .header__bar-desktop { display: none !important; }
  .header__bar-mobile  { display: flex !important; }
}

/* 600px and up: show the desktop header nav, hide the mobile bar */
@media (min-width: 960px) {
  .header__bar-mobile  { display: none !important; }
  .header__bar-desktop { display: flex !important; }
}

/* ============================================================
   Full-width mega menu (desktop) — layout only.
   Append to the END of assets/theme_edits.css.

   IMPORTANT: This intentionally does NOT touch the show/hide
   (opacity/height/visibility) behavior — the theme handles that.
   We only change WIDTH and POSITION so the panel spans the screen.
   ============================================================ */

@media (min-width: 960px) {

  /* Let the full-width panel escape this item's box.
     If the panel stops revealing after adding this, delete this
     one rule first — it's the only line that can interfere. */
  .header__item {
    position: static;
  }

  /* Width + horizontal position only. No opacity/visibility/height here,
     so the theme's own hover reveal keeps working. */
  .header__dropdown--mega {
    left: 0;
    right: 0;
    width: 100vw;
    max-width: 100vw;
  }

  /* Constrain the inner content to your page margins while the
     background stretches edge to edge.
     justify-content:center centers the column group across the panel. */
  .header__dropdown-inner {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 2rem;
    width: 100%;
  }

  /* Sub-links flow into columns, one per sub-category group.
     justify-content:center centers the columns within this group. */
  .header__dropdown-columns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    flex: 0 1 auto;
  }

  .header__dropdown-col {
    flex: 0 1 auto;
    min-width: 180px;
  }

  .header__dropdown-promo {
    flex: 0 0 auto;
  }
}

/* ============================================================
   Menu item styling
   ============================================================ */

/* ============================================================
   HEADER NAV — link colors & underline behavior
   ============================================================ */

/* Keep the normal text color on hover/click (no blue), for both the
   top-level header links and the dropdown links. */
.header__link,
.header__link:hover,
.header__link:focus,
.header__dropdown--mega a,
.header__dropdown--mega a:hover,
.header__dropdown--mega a:focus {
  color: inherit !important;
}

/* Top-level header items: thick black underline on hover AND click.
   - hover on the link
   - hover on the item (direct child only, so hovering dropdown sub-items
     does NOT re-underline the parent)
   - focus / focus-within (click state), plus the theme's !underline
     active class, using LONGHAND props so the shorthand can't reset
     thickness/offset back to thin defaults. */
.header__link:hover,
.header__item:hover > .header__link,
.header__item .header__link:focus,
.header__item .header__link:focus-within,
.header__link.\!underline {
  text-decoration-line: underline !important;
  text-decoration-color: #000 !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 6px !important;
  background-color: transparent !important;
}

/* DROPDOWN items: original plain thin underline on hover (keep their gray too). */
.header__dropdown--mega a:hover,
.header__dropdown--mega a:focus {
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;   /* original thin underline */
  text-underline-offset: auto !important;      /* original default spacing */
  text-decoration-color: currentColor !important;
}

/* ============================================================
   DROPDOWN COLUMN TYPOGRAPHY
   Within each dropdown column:
   - the FIRST link (the sub-category heading) is bold
   - the remaining links (items within) are smaller
   ============================================================ */

/* Sub-category heading (top item of the column) */
.header__dropdown-col > a:first-child {
  font-weight: 700;
}

/* Items within the sub-category (everything after the heading) */
.header__dropdown-col > a:not(:first-child) {
  font-size: 0.875rem; /* smaller; adjust to taste (e.g. 0.8125rem) */
}

/* Click-latched dropdown (set by header JS). */
@media (min-width: 960px) {
  .header__item.is-click-open .header__dropdown {
    height: auto;
    opacity: 1;
  }
}

@media (min-width: 960px) {
  /* Stop the theme's focus-based reveal from latching panels open;
     we now control click-open via the .is-click-open class instead. */
  .header__link:focus + .header__dropdown,
  .header__dropdown:focus-within {
    height: 0;
    opacity: 0;
  }

  /* Click-latched (set by JS) and hover both reveal; these must win. */
  .header__item.is-click-open .header__dropdown,
  .header__link:hover + .header__dropdown,
  .header__dropdown:hover {
    height: auto;
    opacity: 1;
  }
}

.shopify-payment-button {
  display: none !important;
}

#snize-instant-search-results {
  display: none !important;
}

a.snize-view-link[href*="/products/leak-" i] .snize-add-to-cart-button {
  display: none !important;
}