/** Shopify CDN: Minification failed

Line 632:58 Unexpected "{"

**/
  @font-face {
  font-family: "Recoleta";
  src: url("/cdn/shop/files/Recoleta-SemiBold.woff2?v=1762795361") format("woff2");
  font-weight: 700 !important;
  font-style: normal;
  font-display: swap;
}


h1, h2, h3, h4, h5, h6 {
  font-family: "Recoleta", serif !important;
  font-variant-ligatures: none !important;
}
p{
  font-family: "serif" !important;
}

.comparison-product-title{
   font-family: "gotham" !important;
}
/* Apply Recoleta font and bold weight to product sibling heading (h3 or p) */
.x-block-product-sibling h3,
.x-block-product-sibling p {
  font-family: "Recoleta", serif !important;
  font-variant-ligatures: none !important;
  font-weight: 700 !important; /* This makes the <p> tag bold */
  font-size:1.0rem !important;
}

/* Apply Recoleta font to all product prices */
.product__price,
.price,
.price-item,
.money {
    font-family: "Recoleta", serif !important;
}
.iwt-content-no-overlap .overflow-hidden p
{
  font-size:24px !important;
}
/* ---
  CRITICAL ERROR FIXED: The entire block below was broken CSS 
  and was stopping the rest of the file from loading. 
  It has been REMOVED.
--- */
/*
#Option-template--19263597346983__main-1 > label:nth-child(4)
{
  pr-5 {
    padding-right:2rem;
}
.pl-5 {
    padding-left: 2rem;
}
.pt-2 {
    padding-top: 2rem;
}
.pb-2 {
    padding-bottom: 2rem;
}
}
*/

/* Google - Custom Variant Picker Styles desktop view*/

@media screen and (min-width: 768px){
.header-wrapper:not(.header-wrapper--scrolled) a.tree-menu-item[href="/"] {
      color: #FFFFFF !important;
  }

  /* 2. Home link on Sticky Header (after scroll) */
  .header-wrapper--scrolled a.tree-menu-item[href="/"] {
      color: #5D4037 !important; /* Replace with your specific Brown Hex code */
  }
  .text-icon{
    font-size: 17px !important;
    margin-left:40px !important;
  }
.custom-variant-picker-group {
  margin-bottom: 2rem;
}

.variant-group__title {
  font-family: 'Recoleta', serif;
  font-size: 1.0rem;
  margin-bottom: 0.8rem;
  font-weight: 600;
  color: #5c4630;
}

/* This hides the real radio button but keeps it 100% functional */
.original-radio-button-hidden {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}


/* This is the visible, styled box that acts as the button */
.custom-variant-option__styled-box {
  display: flex;
  margin-top:3px;
  flex-direction: column;
  line-height:1.3;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 140px;
  min-height: 75px;
  padding: 6px 5px;
  border: 0.2px solid #dcdcdc;
  border-radius: 10px;
  position: relative;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  background-color: #fff;
  cursor: pointer;
}

.custom-variant-option__styled-box:hover {
  border-color: #aaa;
}


/* This is the key: When the hidden radio button is checked, style the label that is its sibling */
.original-radio-button-hidden:checked + .custom-variant-option__styled-box {
  border-color:rgb(0, 0, 0);
  box-shadow: 0 0 0 1.0px #5c4630;
  background-color: #f0fff0;
}

.variant-label__main,
.variant-label__subtitle,
.variant-label__badge {
  font-family: 'Recoleta', serif;
  font-variant-ligatures: none !important;
}

.variant-label__main {
  font-weight: 500;
  color: #5c4630;
  font-size: 1.1rem;
  line-height: 1.3;
  order: 1;
}

.variant-label__subtitle {
  font-size: 0.8rem;
  color: #757575;
  margin-top: 4px;
  order:3 !important;
}
}
/* Google - Custom Variant Picker Styles mobile view */
@media screen and (max-width: 768px){
.custom-variant-picker-group {
  margin-bottom: 2rem;
}

.variant-group__title {
  font-family: 'Recoleta', serif;
  font-size: 1.0rem;
  margin-bottom: 0.8rem;
  font-weight: 600;
  color: #5c4630;
}

/* This hides the real radio button but keeps it 100% functional */
.original-radio-button-hidden {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* This is the visible, styled box that acts as the button */
.custom-variant-option__styled-box {
  display: flex;
  flex-direction: column;
  line-height:1.3;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 90px;
  min-height: 90px;
  padding: 6px 5px;
  border: 0.2px solid #dcdcdc;
  border-radius: 10px;
  position: relative;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  background-color: #fff;
  cursor: pointer;
}

.custom-variant-option__styled-box:hover {
  border-color: #aaa;
}


/* This is the key: When the hidden radio button is checked, style the label that is its sibling */
.original-radio-button-hidden:checked + .custom-variant-option__styled-box {
  border-color:rgb(0, 0, 0);
  box-shadow: 0 0 0 1.0px #5c4630;
  background-color: #f0fff0;
}

.variant-label__main,
.variant-label__subtitle,
.variant-label__badge {
  font-family: 'Recoleta', serif;
  font-variant-ligatures: none !important;
}

.variant-label__main {
  font-weight: 500;
  color: #5c4630;
  font-size: 1rem;
  line-height: 1.3;
  order: 1;
}

.variant-label__subtitle {
  font-size: 0.8rem;
  color: #757575;
  margin-top: 4px;
  order:3 !important;
}
.custom-variant-option__styled-box {
    width: 100%;
    min-width: 130px;
  }
}



/* ---
  DUPLICATE REMOVED: The simpler, conflicting .variant-label__badge rule
  that was here has been deleted. The "sledgehammer" rule
  at the end of this file is the only one that will be used.
--- */
@media screen and (max-width: 767px) {
#product-form-template--19447219421351__main{
    /* Reduces the width and centers the button */
    max-width: 500px !important; /* You can change this value */
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size:24px !important;
    /* Increases the height */
    min-height: 90px; /* You can change this value */
  }
}

/* --- Adjust Add to Cart Button on Desktop --- */
@media screen and (min-width: 767px) {
 x-atc-button-template--19400609628327__main {
    /* Reduces the width and centers the button */
    min-width: 450px !important; /* You can change this value */
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size:24px !important;

    /* Increases the height */
    min-height: 90px; /* You can change this value */
  }
}

/* ===== Sibling Product Mobile Scroll - Final Alignment Fix ===== */
@media screen and (max-width: 767px) {
  
  /* 1. Setup the scroll container */
  .mobile-scroll-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    align-items: center !important; /* Vertically center the items */
    padding-bottom: 15px !important; /* Space for the scrollbar */
    min-height: 70px; /* Ensure the container has enough height */
    -webkit-overflow-scrolling: touch;
  }

  /* 2. Target the items directly */
  .mobile-scroll-wrapper > label.color-watches {
    flex-shrink: 0 !important; /* Prevent shrinking */
    transform: none !important; /* NEW: Reset any scaling/movement from the theme */
    margin-top: 2px !important; /* Add a tiny bit of space from the top */
  }
}

/* --- CSS for Product Benefit Items --- */
@font-face {
  font-family: 'Gotham';
  font-weight: 500; /* 500 is "Medium" */
  font-style: normal;
  font-display: swap;
  src: url('/cdn/shop/files/Gotham-Medium_1.woff2?v=1761216521') format('woff2');
}

.product-benefit-scroll-container {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around; 
  gap: 3px; 
  width: 100%;
  margin-bottom: 15px !important; 
}

.product-benefit-item-wrapper {
  display: inline-block;
  vertical-align: top; 
  margin-bottom: 20px !important;
}

.product-benefits-item {
  display: inline-flex; 
  align-items: center;
  gap: 3px; 
  font-size: 0.85em; 
  font-weight: 500 !important; 
  color: var(--text-color, #3d2d1f);
  font-family: 'Gotham', sans-serif !important; 
}

.product-benefits-icon-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 10px; 
  height: 10px;
  border-radius: 50%;
  background-color: var(--icon-bg-color, #3d2d1f);
  flex-shrink: 0;
}

.product-benefits-icon,
.product-benefits-custom-icon {
  width: 15px; 
  height: 15px;
  fill: var(--icon-fill-color, white);
  object-fit: contain;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .product-benefit-scroll-container {
    justify-content: center; 
    gap: 6px; 
  }

  .product-benefits-item {
    font-size: 0.85em; 
    gap: 4px; 
  }

  .product-benefits-icon-wrapper {
    width: 13px; 
    height: 13px;
  }

  .product-benefits-icon,
  .product-benefits-custom-icon {
    width: 13px; 
    height: 13px;
  }
}
/* --- END: Custom Font & Styles for Product Benefits --- */


/* @media screen and (max-width: 767px) {
  
  .mobile-scroll-wrapper-Variant {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    align-items: center !important; 
    margin:10px 0 10px 5px !important;
    padding: 10px 0 10px 0 !important; 
    min-height: 70px; 
    -webkit-overflow-scrolling: touch;
    grid-template-columns: none !important;
  }

 .mobile-scroll-wrapper-Variant > div {
    flex-shrink: 0 !important; 
    transform: none !important; 
    margin: 2px 2px 2px 2px !important; 
    width: auto !important;             
    flex-basis: auto !important;      
    min-width: 160px !important;      
  }
}
*/
/* ---
  DUPLICATE REMOVED: The second @font-face for Recoleta
  was here and has been deleted.
--- */


/* INGREDIENTS ACCORDION SECTION  */
.section-ingredients-accordion,
.ingredients-accordion {
  display: block !important;
  height: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.ingredients-accordion {
  padding-top: var(--padding-top);
  padding-bottom: var(--padding-bottom);
  background: linear-gradient(to bottom, var(--bg-start), var(--bg-end));
  position: relative;
  text-align: center;
  overflow: hidden;
  font-family: var(--accordion-font-family);
  font-weight: var(--accordion-font-weight);
  font-style: var(--accordion-font-style);
}

.ingredients-accordion__header {
  font-size: 48px;
  color: var(--header-text-color);
  margin-bottom: 40px;
  position: relative;
  z-index: 1;
  font-family: 'Recoleta', serif;
  font-weight: 600; 
  font-style: normal;
  padding: 0px 5px 0 5px;
}

.ingredients-accordion__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  position: relative;
  z-index: 1;
  padding: 0 20px;
}

@media screen and (min-width: 768px) {
  .ingredients-accordion__header{
    font-size: 48px;
  }
  .ingredients-accordion__content {
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 80px;
  }
}

.ingredients-accordion__list {
  flex: 1;
  max-width: 500px;
  width: 100%;
}

.ingredient-item {
  background-color: var(--ingredient-bg);
  border-radius: 8px;
  margin-bottom: 15px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  overflow: hidden;
  text-align: left;
  transition: background-color 0.3s ease;
}

.ingredient-item__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  cursor: pointer;
  color: var(--ingredient-text);
  font-size: 1.1em;
  transition: color 0.3s ease;
}

.ingredient-item__header-left {
  display: flex;
  align-items: center;
}

.ingredient-item__icon {
  width: 30px;
  height: 30px;
  margin-right: 15px;
  object-fit: contain;
}

.ingredient-item__toggle {
  font-size: 1.5em;
  line-height: 1;
  transition: transform 0.3s ease, color 0.3s ease;
  background-color: transparent;
  border: none;
  color: var(--toggle-color);
}

.ingredient-item__description {
  padding: 0 20px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out, padding 0.4s ease-out;
  color: var(--ingredient-desc-text);
  font-size: 0.95em;
}

.ingredient-item__description-inner {
   border-top: 1px solid #eee;
   padding: 15px 0 15px 0;
}

.ingredient-item.active {
  background-color: var(--active-bg);
}
.ingredient-item.active .ingredient-item__header {
  color: var(--active-text);
}
.ingredient-item.active .ingredient-item__toggle {
  transform: rotate(45deg);
  color: var(--active-toggle);
}
.ingredient-item.active .ingredient-item__description {
  max-height: 600px; 
  padding-bottom: 5px;
}

  .ingredient-item__tag {
  font-weight: bold;
  color: var(--tag-text-color); 
  background-color: var(--tag-bg-color); 
  display: inline-block; 
  margin-bottom: 5px;
  padding: 4px 8px; 
  border-radius: 4px; 
}

.ingredient-item__image--mobile {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 15px;
  max-height: 300px; 
  object-fit: cover;
}

@media screen and (min-width: 768px) {
  .ingredient-item__image--mobile {
    display: none; 
  }
}

.ingredients-accordion__image-wrapper {
  flex: 1;
  max-width: 500px;
  width: 100%;
  position: relative; 
  min-height: 400px; 
}

@media screen and (max-width: 767px) {
  .ingredients-accordion__image-wrapper {
    display: none; 
  }
}

.ingredient-item__image--desktop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.ingredient-item__image--desktop.active {
  opacity: 1;
  visibility: visible;
}

.ingredients-accordion::before {
  content: '';
  position: absolute;
  top: 20px;
  right: 20px;
  width: 100px;
  height: 100px;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 0C41.6667 8.33333 33.3333 16.6667 25 25C16.6667 33.3333 8.33333 41.6667 0 50C8.33333 58.3333 16.6667 66.6667 25 75C33.3333 83.3333 41.6667 91.6667 50 100C58.3333 91.6667 66.6667 83.3333 75 75C83.3333 66.666TYP 91.6667 58.3333 100 50C91.6667 41.6667 83.3333 33.3333 75 25C66.6667 16.6667 58.3333 8.33333 50 0Z' fill='%23FADFBB'/%3E%3C/svg%3E");
  background-size: contain;
  opacity: 0.7;
  z-index: 0;
}

.ingredients-accordion::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: var(--wave-color);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  transform: translateY(50%);
  z-index: 0;
}


/*
  FINAL OVERRIDE: This is the ONLY rule for the badge.
  It is hyper-specific and includes z-index to 
  make sure the badge is on top.
*/
/*
  THIS IS THE ONLY BADGE RULE YOU NEED
*/
/*
  THIS IS THE ONLY BADGE RULE YOU NEED
*/
.product-form__input .custom-variant-option__styled-box > {
  /* --- Positioning --- */
  position: absolute !important;
  display: block !important;
  z-index: 10 !important; /* Puts it on top */
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  
  /* --- Styling --- */
  background-color: #008000;
  color: #fff;
  padding: 2px 10px;
  font-size: 0.65rem;
  font-weight: bold;
  border-radius: 12px;
  white-space: nowrap;
}
.custom-variant-option__styled-box {
  position: relative !important; /* needed for badge absolute positioning */
  overflow: visible !important;  /* prevent clipping */
}
.variant-label__badge {

  position: absolute !important;
  display: block !important;
  z-index: 50 !important;
  top: -10px !important;
  left: 50%;
  transform: translateX(-50%);
  background-color: #008000;
  color: #fff;
  padding: 2px 10px;
  font-size: 0.65rem;
  font-weight: bold;
  border-radius: 12px;
  white-space: nowrap;
}
/*
  This is the simple, strong rule for the "Pack Size" scrollbar
*/

@media screen and (max-width: 767px) {
  
  /* This targets your 'Pack Size' row */
  .scrollable-variant-row {
   display: flex !important;
    flex-wrap: nowrap !important;
    flex-shrink: 0 !important;  /* Stops items from shrinking */
    min-width: 250px !important; /* Sets a minimum width */
    width: auto !important;
    flex-basis: auto !important;
    overflow-x: auto !important;
    align-items: center !important; /* Vertically center the items */
    padding: 15px 15px 10px 15px !important; /* Space for the scrollbar */
    min-height: 70px; /* Ensure the container has enough height */
    -webkit-overflow-scrolling: touch;
  }
  
}