/** Shopify CDN: Minification failed

Line 31:0 Comments in CSS use "/* ... */" instead of "//"
Line 43:1 Comments in CSS use "/* ... */" instead of "//"
Line 45:0 Comments in CSS use "/* ... */" instead of "//"
Line 58:0 Comments in CSS use "/* ... */" instead of "//"
Line 75:35 Unterminated string token
Line 80:35 Unterminated string token

**/
  /* Force-visibility fallback for mobile when animations fail */
@media (max-width: 768px) {
  h1, h2, h3,
  .h1, .h2, .h3,
  /* common “reveal/animation” classnames used by AOS/GSAP/IO setups */
  .reveal, .reveal-up, .aos-init, .aos-animate, [data-reveal], [data-animate] {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    filter: none !important;
  }
}

.product-card__top {
    white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/////* FIX FOR RESIZE OBSERVER BUG ON MOBILE 

/* Limit reflow blast radius where possible */
.header, .product-sticky-form, [data-observed] {
  contain: layout style; /* helps RO churn */
}

/* Avoid height transitions on observed nodes; move transitions to inner wrappers */
.header, .product-sticky-form {
  transition: none !important;
}

*/////

/////* PRODUCT PAGE */////

/* shrink clinical study counter text labels */
div.counter-card > div > p.text-2xl {
  font-size: 115% !important;
  line-height: 115% !important;
}

div.product__inventory > div.alert--success > span {
  font-size: 100% !important;
}


/////* ADD TO CART BUTTONS */////

This also had to be hard coded in BUY-BUTTONS and MAIN-PRODUCT 
button[name="add"],
button[name="checkout"] {
  background-color:rgb(255, 216, 20) !important; 
  color: rgb(23,23,23) !important;
  border-color: rgb(255, 216, 20) !important;
}

button[name="add"] span.btn-fill,
button[name="checkout"] span.btn-fill {
  background-color: #fedf3a !important; 
}

button[name="add"] span.btn-text,
button[name="checkout"] span.btn-text  {
  color: rgb(23,23,23) !important";
}

button[name="add"] span.btn-loader,
button[name="checkout"] span.btn-loader {
  color: rgb(23,23,23) !important";
}


/* Target Add to Cart button border */
.product-form__submit.button.button--primary {
  background-color: rgb(255, 216, 20) !important;
  color: rgb(23, 23, 23) !important;
  border: 2px solid rgb(255, 216, 20) !important; /* force border */
  box-shadow: none !important; /* kill any fake border */
}

/* Handle pseudo-elements if the theme uses them */
.product-form__submit.button.button--primary::before,
.product-form__submit.button.button--primary::after {
  border: none !important;
  box-shadow: none !important;
  background: none !important;
}

/* Inner text */
.product-form__submit.button.button--primary .btn-text,
.product-form__submit.button.button--primary .btn-text span {
  color: rgb(23, 23, 23) !important;
}

/* Inner fill background */
.product-form__submit.button.button--primary .btn-fill {
  background-color: rgb(255, 216, 20) !important;
  border: none !important;
}

/* ==== STICKY ADD-TO-CART (scoped to the sticky variant wrapper) ==== */

/* 1) Base button styles */
.product-sticky-form__variant button[type="submit"].button.button--primary,
.product-sticky-form__variant .product-form__submit.button.button--primary {
  background-color: rgb(255, 216, 20) !important;  /* yellow */
  color: rgb(23, 23, 23) !important;               /* black text */
  border: 2px solid rgb(255, 216, 20) !important;  /* yellow border */
  box-shadow: none !important;                      /* remove fake borders */
}

/* 2) If theme draws borders via pseudo-elements */
.product-sticky-form__variant button[type="submit"].button.button--primary::before,
.product-sticky-form__variant button[type="submit"].button.button--primary::after,
.product-sticky-form__variant .product-form__submit.button.button--primary::before,
.product-sticky-form__variant .product-form__submit.button.button--primary::after {
  content: none !important;
  border: none !important;
  box-shadow: none !important;
  background: none !important;
}

/* 3) Inner fill layer often used for hover/press animations */
.product-sticky-form__variant .button.button--primary .btn-fill {
  background-color: rgb(255, 216, 20) !important;  /* keep fill yellow */
  border: none !important;
  box-shadow: none !important;
}

/* 4) Inner text wrappers */
.product-sticky-form__variant .button.button--primary .btn-text,
.product-sticky-form__variant .button.button--primary .btn-text span {
  color: rgb(23, 23, 23) !important;               /* ensure black text */
}

/* 5) Loading dots/spinner (optional, keep them visible on yellow) */
.product-sticky-form__variant .button.button--primary .btn-loader span {
  background-color: rgb(23, 23, 23) !important;    /* black loader dots */
}

/* 6) Hover/focus/active/disabled states (consistent look) */
.product-sticky-form__variant .button.button--primary:hover,
.product-sticky-form__variant .button.button--primary:focus,
.product-sticky-form__variant .button.button--primary:active {
  background-color: rgb(255, 216, 20) !important;
  color: rgb(23, 23, 23) !important;
  border-color: rgb(255, 216, 20) !important;
  box-shadow: none !important;
  outline: none !important;
}

.product-sticky-form__variant .button.button--primary[disabled],
.product-sticky-form__variant .button.button--primary:disabled {
  opacity: 0.65; /* optional */
  background-color: rgb(255, 216, 20) !important;
  color: rgb(23, 23, 23) !important;
  border-color: rgb(255, 216, 20) !important;
  box-shadow: none !important;
}
 
/* === Force full-size sticky Add to Cart on mobile === */
@media (max-width: 749px) {
  /* Force sticky Add to Cart button to full width with text */
  .product-sticky-form .button,
  .product-sticky-form__variant .button,
  .product-sticky-form .product-form__submit,
  .product-sticky-form__variant .product-form__submit {
    width: 100% !important;
    min-width: 0 !important;
    height: var(--sticky-btn-height, 52px) !important;
    line-height: var(--sticky-btn-height, 52px) !important;
    padding: 0 16px !important;
    border-radius: var(--buttons-radius) !important; /* match theme buttons */
    background: rgb(255,216,20) !important;
    color: rgb(23,23,23) !important;
    border-color: rgb(255,216,20) !important;
  }

  /* Kill the circular/icon-only styles */
  .product-sticky-form .button--circle,
  .product-sticky-form__variant .button--circle,
  .product-sticky-form .button--icon,
  .product-sticky-form__variant .button--icon {
    width: 100% !important;
    height: var(--sticky-btn-height, 52px) !important;
    border-radius: var(--buttons-radius) !important;
  }

  /* Show full text */
  .product-sticky-form .btn-text,
  .product-sticky-form .btn-text span,
  .product-sticky-form__variant .btn-text,
  .product-sticky-form__variant .btn-text span {
    display: inline-flex !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Hide the cart icon completely */
  .product-sticky-form .icon-only,
  .product-sticky-form__variant .icon-only,
  .product-sticky-form .button__icon,
  .product-sticky-form__variant .button__icon,
  .product-sticky-form .icon,
  .product-sticky-form__variant .icon {
    display: none !important;
  }

  /* Button fill animation layer */
  .product-sticky-form .btn-fill,
  .product-sticky-form__variant .btn-fill {
    position: absolute;
    inset: 0;
    border-radius: var(--buttons-radius) !important;
    background: rgb(255,216,20) !important;
  }

  /* Ensure text color always black */
  .product-sticky-form .button *,
  .product-sticky-form__variant .button * {
    color: rgb(23,23,23) !important;
    border-color: rgb(255,216,20) !important;
  }

  /* Override ::before and ::after states */
  .product-sticky-form .button::before,
  .product-sticky-form .button::after,
  .product-sticky-form__variant .button::before,
  .product-sticky-form__variant .button::after {
    border-radius: var(--buttons-radius) !important;
    background: rgb(255,216,20) !important;
    border-color: rgb(255,216,20) !important;
  }
}


/* === Checkout button matches Add to Cart === */
.checkout-button,
form[action*="checkout"] .button,
form[action*="checkout"] .button.button--primary,
.drawer__footer-buttons .button[name="checkout"] {
  background-color: rgb(255, 216, 20) !important;
  color: rgb(23, 23, 23) !important;
  border: 1px solid rgb(255, 216, 20) !important;
  border-radius: var(--buttons-radius, 6px) !important; /* use your main button radius */
  padding: 0 16px !important;
  min-height: 52px;
  line-height: 52px;
  font-weight: 600;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .06s ease;
  position: relative;
  overflow: hidden;
}

/* Ensure text layers keep black text */
.checkout-button .btn-text,
.checkout-button .btn-text span,
form[action*="checkout"] .button .btn-text,
form[action*="checkout"] .button .btn-text span {
  color: rgb(23, 23, 23) !important;
  position: relative;
  z-index: 1;
}

/* Animate background "fill" if present */
.checkout-button .btn-fill,
form[action*="checkout"] .button .btn-fill {
  position: absolute;
  inset: 0;
  border-radius: var(--buttons-radius, 6px) !important;
  background: #fedf3a !important; /* hover/active yellow */
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
  z-index: 0;
}

/* Hover */
.checkout-button:hover,
form[action*="checkout"] .button:hover {
  background: #fedf3a !important;
  border-color: #fedf3a !important;
}
.checkout-button:hover .btn-fill,
form[action*="checkout"] .button:hover .btn-fill {
  opacity: 1;
}

/* Focus-visible */
.checkout-button:focus-visible,
form[action*="checkout"] .button:focus-visible {
  outline: 2px solid rgb(255, 216, 20) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px color-mix(in srgb, rgb(255, 216, 20) 30%, transparent);
}

/* Active/Pressed */
.checkout-button:active,
form[action*="checkout"] .button:active {
  background: #f0cf18 !important;
  border-color: #f0cf18 !important;
  transform: translateY(1px);
}

/* Disabled */
.checkout-button[disabled],
form[action*="checkout"] .button[disabled] {
  background: #d9d9d9 !important;
  border-color: #d9d9d9 !important;
  color: #8a8a8a !important;
  cursor: not-allowed !important;
  opacity: .8;
}


/* === Cart Drawer Checkout Button (match Add to Cart) === */
.drawer__footer-buttons .button[name="checkout"] {
  outline: none !important;
  background-color: rgb(255, 216, 20) !important;
  color: rgb(23, 23, 23) !important;
  border: 1px solid rgb(255, 216, 20) !important;
  border-radius: var(--buttons-radius, 6px) !important; /* match theme radius */
  padding: 18 26 18 26 !important;
  min-height: 52px;
  line-height: 52px;
  font-weight: 500;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .06s ease;
  position: relative;
  overflow: hidden;
}

/* Ensure button text stays black */
.drawer__footer-buttons .button[name="checkout"] .btn-text,
.drawer__footer-buttons .button[name="checkout"] .btn-text span {
  color: rgb(23, 23, 23) !important;
  position: relative;
  z-index: 1;
}

/* Fill animation background */
.drawer__footer-buttons .button[name="checkout"] .btn-fill {
  position: absolute;
  inset: 0;
  border-radius: var(--buttons-radius, 6px) !important;
  background: #fedf3a !important;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
  z-index: 0;
}

/* Hover state */
.drawer__footer-buttons .button[name="checkout"]:hover {
  background: #fedf3a !important;
  border-color: #fedf3a !important;
}
.drawer__footer-buttons .button[name="checkout"]:hover .btn-fill {
  opacity: 1;
}

/* Focus-visible state */
.drawer__footer-buttons .button[name="checkout"]:focus-visible {
  outline: 2px solid rgb(255, 216, 20) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px color-mix(in srgb, rgb(255, 216, 20) 30%, transparent);
}

/* Active/pressed */
.drawer__footer-buttons .button[name="checkout"]:active {
  background: #f0cf18 !important;
  border-color: #f0cf18 !important;
  transform: translateY(1px);
}

/* Disabled */
.drawer__footer-buttons .button[name="checkout"][disabled] {
  background: #d9d9d9 !important;
  border-color: #d9d9d9 !important;
  color: #8a8a8a !important;
  cursor: not-allowed !important;
  opacity: .8;
}



/* ==== Cart Drawer – Checkout button hard reset & style ==== */
#CartDrawer .drawer__footer .button[name="checkout"],
#CartDrawer .drawer__footer button[name="checkout"].button--primary,
.cart-drawer .drawer__footer .button[name="checkout"],
a.button.authorize {
  /* your colors */
  background-color: rgb(255, 216, 20) !important;
  color: rgb(23, 23, 23) !important;

  /* kill borders & faux borders from all sources */
  border: 0 !important;
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  filter: none !important;

  /* kill UA styles (esp. iOS Safari) */
  -webkit-appearance: none !important;
  appearance: none !important;
  -webkit-tap-highlight-color: transparent;

  /* keep your rounded corners consistent with main button */
  border-radius: var(--button-radius, 9999px) !important; /* adjust if your theme uses a token */
}

/* also kill pseudo-element “borders” some themes use */
#CartDrawer .drawer__footer .button[name="checkout"]::before,
#CartDrawer .drawer__footer .button[name="checkout"]::after {
  content: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* inner fillers/icons sometimes draw edges */
#CartDrawer .drawer__footer .button[name="checkout"] .btn-fill,
#CartDrawer .drawer__footer .button[name="checkout"] .btn-fill::before,
#CartDrawer .drawer__footer .button[name="checkout"] .btn-fill::after {
  background: rgb(255, 216, 20) !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

/* states: kill focus rings & hover shadows */
#CartDrawer .drawer__footer .button[name="checkout"]:hover,
#CartDrawer .drawer__footer .button[name="checkout"]:focus,
#CartDrawer .drawer__footer .button[name="checkout"]:focus-visible,
#CartDrawer .drawer__footer .button[name="checkout"]:active {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
  filter: none !important;
}

/* some themes use CSS vars to draw “borders” via box-shadow; make them transparent */
#CartDrawer .drawer__footer .button[name="checkout"] {
  --button-border-color: transparent !important;
  --button-border: 0 !important;
}