/** Shopify CDN: Minification failed

Line 919:37 Unexpected "ul"

**/
/* TGOC – Content tabs (mobile accordion look) */
@media (max-width: 749px){

  /* Give the list spacing between pills */
  #root .m6tb.btn > nav ul{
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;         /* <-- whitespace between pills */
  }

  /* Pill shape + remove the “full width grey line” effect */
  #root .m6tb.btn > nav ul > li{
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(0,0,0,.14) !important;
    border-radius: 22px !important;
    background: rgba(0,0,0,.02) !important;
    overflow: hidden !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  /* Kill any divider pseudo elements that draw lines through/under the pills */
  #root .m6tb.btn > nav:before,
  #root .m6tb.btn > nav:after,
  #root .m6tb.btn > nav ul:before,
  #root .m6tb.btn > nav ul:after,
  #root .m6tb.btn > nav ul > li:before,
  #root .m6tb.btn > nav ul > li:after,
  #root .m6tb.btn > nav ul > li > a:before,
  #root .m6tb.btn > nav ul > li > a:after{
    content: none !important;
    display: none !important;
    background: none !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  /* Make pills smaller + make title look like a heading */
  #root .m6tb.btn > nav ul > li > a{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;
    padding: 12px 16px !important;  /* <-- reduces pill height */
    min-height: 46px !important;    /* <-- reduces pill height */

    background: transparent !important;
    text-decoration: none !important;

    font-size: 18px !important;
    font-weight: 800 !important;    /* <-- stronger heading */
    line-height: 1.15 !important;
  }

  #root .m6tb.btn > nav ul > li > a span{
    font-weight: 800 !important;
    font-size: 18px !important;
  }

  /* OPTIONAL: if the theme uses a chevron via a background-image, this removes it */
  #root .m6tb.btn > nav ul > li > a{
    background-image: none !important;
  }
}
/* ===== Shop by Category buttons (FINAL) ===== */

/* 1) Desktop / tablet: keep natural theme styling, just tidy layout */
#root p.link-btn.text-center{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0;                 /* remove ugly <p> spacing */
  padding: 0;
}

/* Let the theme keep the visual style; only ensure alignment */
#root p.link-btn.text-center > a.overlay-primary.inv{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}

/* 2) Mobile: force a clean 2-column grid + centred All Products */
@media (max-width: 600px){
  #root p.link-btn.text-center{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    padding: 0 18px !important;
    margin: 0 !important;            /* KILLS the massive gap */
  }

  #root p.link-btn.text-center > a.overlay-primary.inv{
    width: 100% !important;
    justify-self: stretch !important;
  }

  /* Center "All Products" on its own row (works for /all and /all-products) */
  #root p.link-btn.text-center > a.overlay-primary.inv[href*="/collections/all"]{
    grid-column: 1 / -1 !important;
    width: 70% !important;
    justify-self: center !important;
  }
}
/* Shop by Category – MOBILE: reduce title-to-buttons gap */
@media (max-width: 600px) {

  /* Tighten spacing under the section heading */
  #root [id*="section_collection_button_list_TRTBeY"] .section-title,
  #root [id*="section_collection_button_list_TRTBeY"] h2,
  #root [id*="section_collection_button_list_TRTBeY"] .title,
  #root [id*="section_collection_button_list_TRTBeY"] header {
    margin-bottom: 10px !important;
    padding-bottom: 0 !important;
  }

  /* Tighten top spacing of the button grid itself */
  #root [id*="section_collection_button_list_TRTBeY"] p.link-btn.text-center {
    margin-top: 0 !important;
  }
}
/* Shop by Category – MOBILE: force-reduce the gap above buttons */
@media (max-width: 600px) {
  #root p.link-btn.text-center {
    margin-top: -24px !important;
  }
}

/* ---- TGOC: Product tabs subtle hover (match active pill) ---- */

.shopify-section-content-tabs .m6tb nav ul li a{
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  border-radius: 999px !important;
  transition:
    background-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

/* Hover state — soft glow, NO outline */
.shopify-section-content-tabs .m6tb nav ul li:hover > a{
  background-color: rgba(0,0,0,0.04) !important; /* subtle fill */
  box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important; /* gentle lift */
  transform: translateY(-1px);
}

/* Active tab — slightly stronger than hover */
.shopify-section-content-tabs .m6tb nav ul li.item-active > a,
.shopify-section-content-tabs .m6tb nav ul li.item-active{
  background-color: rgba(0,0,0,0.06) !important;
  box-shadow: 0 3px 8px rgba(0,0,0,0.12) !important;
}
/* ===== TGOC – Product tabs redesign (cleaner, more on-brand) ===== */

/* Base pill */
.shopify-section-content-tabs .m6tb nav ul li > a{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px !important;

  padding: 10px 16px !important;
  border-radius: 12px !important;

  background: transparent !important;
  border: 1px solid rgba(0,0,0,0.12) !important;

  box-shadow: none !important;
  transform: none !important;

  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease !important;
}

/* Remove styling on the LI itself (keeps things consistent) */
.shopify-section-content-tabs .m6tb nav ul li{
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 12px !important;
}

/* Hover: subtle tint, no “card” shadow */
.shopify-section-content-tabs .m6tb nav ul li:hover > a{
  background: rgba(72, 98, 78, 0.08) !important;
  border-color: rgba(72, 98, 78, 0.25) !important;
  box-shadow: none !important;
  transform: translateY(-1px) !important;
}

/* Active: slightly stronger than hover (still premium, not chunky) */
.shopify-section-content-tabs .m6tb nav ul li.item-active > a{
  background: rgba(72, 98, 78, 0.14) !important;
  border-color: rgba(72, 98, 78, 0.45) !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}

/* Optional: tighten spacing between pills */
.shopify-section-content-tabs .m6tb nav ul{
  gap: 14px !important;
}
/* Remove any leftover active “bar/shadow” artefacts */
.shopify-section-content-tabs .m6tb nav ul li.item-active,
.shopify-section-content-tabs .m6tb nav ul li.item-active > a{
  box-shadow: none !important;
  filter: none !important;
}

.shopify-section-content-tabs .m6tb nav ul li.item-active::before,
.shopify-section-content-tabs .m6tb nav ul li.item-active > a::before{
  content: none !important;
  display: none !important;
}
/* Keep tabs calm: no jump between states */
.shopify-section-content-tabs .m6tb nav ul li:hover > a,
.shopify-section-content-tabs .m6tb nav ul li.item-active > a{
  transform: none !important;
}
/* Slightly tighter pill sizing */
.shopify-section-content-tabs .m6tb nav ul li > a{
  padding: 9px 14px !important;
  border-radius: 10px !important;
}
/* Softer default */
.shopify-section-content-tabs .m6tb nav ul li > a{
  border-color: rgba(0,0,0,0.10) !important;
}

/* Hover: subtle tint */
.shopify-section-content-tabs .m6tb nav ul li:hover > a{
  background: rgba(72, 98, 78, 0.06) !important;
  border-color: rgba(72, 98, 78, 0.22) !important;
}

/* Active: just one step stronger */
.shopify-section-content-tabs .m6tb nav ul li.item-active > a{
  background: rgba(72, 98, 78, 0.10) !important;
  border-color: rgba(72, 98, 78, 0.35) !important;
}
/* Undo broad .m6tb.btn hover styles leaking into other buttons */
.m6tb.btn nav ul li:hover { 
  background: transparent !important; 
  box-shadow: none !important; 
  transform: none !important;
}
.m6tb.btn nav ul li:not(.item-active) a:hover {
  background: transparent !important;
}
/* ===== TGOC: Product information tabs hover (scoped, safe) ===== */

/* Make sure we’re styling the clickable pill */
.shopify-section-content-tabs .m6tb nav ul li > a{
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 9px 14px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease !important;
}

/* Hover */
.shopify-section-content-tabs .m6tb nav ul li:hover > a{
  background: rgba(72, 98, 78, 0.06) !important;
  border-color: rgba(72, 98, 78, 0.22) !important;
  transform: translateY(-1px);
}

/* Active */
.shopify-section-content-tabs .m6tb nav ul li.item-active > a{
  background: rgba(72, 98, 78, 0.10) !important;
  border-color: rgba(72, 98, 78, 0.35) !important;
  font-weight: 700 !important;
  transform: none !important;
}
/* ===== TGOC: Homepage hero CTA hover text (fix black-on-black) ===== */

/* Most likely selector in your theme */
.template-index a.overlay-primary:hover,
.template-index a.overlay-primary:hover *{
  color: #fff !important;
}

/* Common alternative button classes */
.template-index .btn:hover,
.template-index .btn:hover *,
.template-index .button:hover,
.template-index .button:hover *{
  color: #fff !important;
}
body.template-index a.overlay-primary:hover,
body.template-index a.overlay-primary:hover *{
  color: #fff !important;
}
/* TGOC: Product info tabs ONLY */
.shopify-section-content-tabs .m6tb nav ul li > a{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 14px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease, color 180ms ease !important;
}

.shopify-section-content-tabs .m6tb nav ul li:hover > a{
  background: rgba(72,98,78,.06) !important;
  border-color: rgba(72,98,78,.22) !important;
  transform: translateY(-1px) !important;
}

.shopify-section-content-tabs .m6tb nav ul li.item-active > a{
  background: rgba(72,98,78,.10) !important;
  border-color: rgba(72,98,78,.35) !important;
  font-weight: 700 !important;
  transform: none !important;
}
/* TGOC: Hero CTA – force readable hover text */
#shopify-section-overlay-secondary a.YYYYY:hover,
#shopify-section-overlay-secondary a.YYYYY:hover *{
  color: #fff !important;
  fill: #fff !important;
}
/* TGOC: Homepage hero CTA – keep text white on hover */
.template-index a.overlay-secondary,
.template-index a.overlay-secondary:hover,
.template-index a.overlay-secondary:hover *{
  color: #fff !important;
  fill: #fff !important;
}
/* TGOC: Homepage "Shop by Category" buttons — keep text dark on hover */
#root p.link-btn.text-center > a.overlay-primary.inv,
#root p.link-btn.text-center > a.overlay-primary.inv:hover,
#root p.link-btn.text-center > a.overlay-primary.inv:hover *{
  color: #000 !important;
  fill: #000 !important;
}
/* ================================
   TGOC — Product page UI uniformity
   Variant pills + Product info tabs
   (scoped to product template only)
================================ */

/* --- Base “pill” tokens (same feel everywhere) --- */
body.template-product{
  --tgoc-pill-radius: 10px;
  --tgoc-pill-bd: rgba(0,0,0,.10);
  --tgoc-pill-bd-hover: rgba(72,98,78,.22);
  --tgoc-pill-bd-active: rgba(72,98,78,.35);
  --tgoc-pill-bg-hover: rgba(72,98,78,.06);
  --tgoc-pill-bg-active: rgba(72,98,78,.10);
}

/* --- Product info tabs (already known selector) --- */
body.template-product .shopify-section-content-tabs .m6tb nav ul li > a{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  padding: 9px 14px !important;
  border-radius: var(--tgoc-pill-radius) !important;

  border: 1px solid var(--tgoc-pill-bd) !important;
  background: transparent !important;
  box-shadow: none !important;

  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease, color 180ms ease !important;
}

body.template-product .shopify-section-content-tabs .m6tb nav ul li:hover > a{
  background: var(--tgoc-pill-bg-hover) !important;
  border-color: var(--tgoc-pill-bd-hover) !important;
  transform: translateY(-1px) !important;
}

body.template-product .shopify-section-content-tabs .m6tb nav ul li.item-active > a{
  background: var(--tgoc-pill-bg-active) !important;
  border-color: var(--tgoc-pill-bd-active) !important;
  font-weight: 700 !important;
  transform: none !important;
}
/* --- Variant pills (try common theme structures) --- */
/* The Xclusive theme often renders variants as buttons/labels inside fieldsets */
body.template-product form[action*="/cart/add"] fieldset button,
body.template-product form[action*="/cart/add"] fieldset label,
body.template-product form[action*="/cart/add"] .single-option-selector__radio label,
body.template-product form[action*="/cart/add"] .product-form__input label,
body.template-product form[action*="/cart/add"] .variant-input label{
  border-radius: var(--tgoc-pill-radius) !important;
  border: 1px solid var(--tgoc-pill-bd) !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease, color 180ms ease !important;
}

/* Hover */
body.template-product form[action*="/cart/add"] fieldset button:hover,
body.template-product form[action*="/cart/add"] fieldset label:hover,
body.template-product form[action*="/cart/add"] .single-option-selector__radio label:hover,
body.template-product form[action*="/cart/add"] .product-form__input label:hover,
body.template-product form[action*="/cart/add"] .variant-input label:hover{
  background: var(--tgoc-pill-bg-hover) !important;
  border-color: var(--tgoc-pill-bd-hover) !important;
  transform: translateY(-1px) !important;
}

/* Selected/checked variant (covers common “checked + label” patterns) */
body.template-product form[action*="/cart/add"] input:checked + label{
  background: var(--tgoc-pill-bg-active) !important;
  border-color: var(--tgoc-pill-bd-active) !important;
  font-weight: 700 !important;
  transform: none !important;
}
/* =========================
   TGOC — Variant pills (10ml/50ml)
   Matches Product Info tabs
   ========================= */

/* Base pill */
body.template-product form#main-product-form input[type="radio"] + label{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 9px 14px !important;
  border-radius: 10px !important;

  border: 1px solid rgba(0,0,0,.10) !important;
  background: transparent !important;
  box-shadow: none !important;

  cursor: pointer !important;
  user-select: none !important;

  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease, color 180ms ease !important;
}

/* Ensure the text inherits cleanly */
body.template-product form#main-product-form input[type="radio"] + label span{
  color: inherit !important;
}

/* Hover */
body.template-product form#main-product-form input[type="radio"] + label:hover{
  background: rgba(72,98,78,.06) !important;
  border-color: rgba(72,98,78,.22) !important;
  transform: translateY(-1px) !important;
}

/* Active/selected */
body.template-product form#main-product-form input[type="radio"]:checked + label{
  background: rgba(72,98,78,.10) !important;
  border-color: rgba(72,98,78,.35) !important;
  font-weight: 700 !important;
  transform: none !important;
}

/* Optional: if the theme adds its own pseudo elements, neutralise */
body.template-product form#main-product-form input[type="radio"] + label::before,
body.template-product form#main-product-form input[type="radio"] + label::after{
  box-shadow: none !important;
}
/* TGOC — Variant pills (10ml/50ml) using the actual markup: input.listening + label */
body.template-product input.listening[type="radio"] + label{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 9px 14px !important;
  border-radius: 10px !important;

  border: 1px solid rgba(0,0,0,.10) !important;
  background: transparent !important;
  box-shadow: none !important;

  cursor: pointer !important;
  user-select: none !important;

  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease, color 180ms ease !important;
}

body.template-product input.listening[type="radio"] + label:hover{
  background: rgba(72,98,78,.06) !important;
  border-color: rgba(72,98,78,.22) !important;
  transform: translateY(-1px) !important;
}

body.template-product input.listening[type="radio"]:checked + label{
  background: rgba(72,98,78,.10) !important;
  border-color: rgba(72,98,78,.35) !important;
  font-weight: 700 !important;
  transform: none !important;
}

/* ensure text inherits (some themes set span color directly) */
body.template-product input.listening[type="radio"] + label span{
  color: inherit !important;
}
.footer-credibility-link{
  color: inherit;
  text-decoration: none;
  display: inline-block;
  transition: opacity 180ms ease, transform 180ms ease;
}
.footer-credibility-link:hover{
  opacity: 0.85;
  transform: translateY(-1px);
}
/* TGOC – Fix cart drawer totals overlapping product list */

/* Disable sticky/fixed behaviour inside cart drawer */
.cart-drawer__footer,
.cart-drawer__summary,
.cart-drawer .totals,
.cart-drawer .cart__footer,
.cart-drawer [class*="total"]{
  position: static !important;
  bottom: auto !important;
}

/* Ensure cart content scrolls as one column */
.cart-drawer__content,
.cart-drawer__items{
  overflow: visible !important;
  max-height: none !important;
}
/* TGOC – Remove cart drawer upsells ("You may also like") */

.cart-drawer .cart-recommendations,
.cart-drawer .cart__recommendations,
.cart-drawer .recommendations,
.cart-drawer [class*="recommend"]{
  display: none !important;
}
/* ================================
   MOBILE — SAFE PAGE + PDP TIDY
   ================================ */


/* 2) TRUST PAGE (mobile): hide fraction counter, keep arrows */
@media (max-width: 768px) {
  .template-page .swiper-pagination-fraction,
  .template-page .swiper-custom-fraction {
    display: none !important;
  }

  .template-page .swiper-button-prev,
  .template-page .swiper-button-next {
    display: inline-flex !important;
    transform: scale(0.85);
    opacity: 0.65;
  }

  .template-page .swiper,
  .template-page .swiper-container {
    margin: 6px 0 !important;
  }
}

/* 3) TRUST PAGE (mobile): light typography tidy */
@media (max-width: 768px) {
  .template-page h1 { font-size: 30px !important; line-height: 1.15 !important; }
  .template-page h2 { font-size: 22px !important; line-height: 1.2 !important; }
  .template-page h3 { font-size: 18px !important; line-height: 1.25 !important; }

  .template-page p {
    font-size: 15px !important;
    line-height: 1.35 !important;
  }

  /* Cap obvious icon blocks only */
  .template-page svg.icon,
  .template-page img.icon,
  .template-page .icon svg {
    max-width: 140px !important;
    height: auto !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* 4) SLIDER DOTS — fix giant / duplicate bullets (Swiper + Slick) */
.swiper-pagination-bullet {
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  opacity: 0.35 !important;
  background: currentColor !important;
}

.swiper-pagination-bullet-active {
  opacity: 1 !important;
}

.swiper-pagination-bullet::before,
.swiper-pagination-bullet::after {
  content: none !important;
  display: none !important;
}

.slick-dots li button:before {
  font-size: 8px !important;
  opacity: 0.35 !important;
}

.slick-dots li.slick-active button:before {
  opacity: 1 !important;
}

/* 5) PDP — tighten title stack (REAL Xclusive structure) */
.template-product header {
  margin-bottom: 12px !important;
}

.template-product header h3,
.template-product .mob-h3 {
  margin: 0 0 4px !important;
  line-height: 1.15 !important;
}

.template-product header ul {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

.template-product .f8pr {
  margin: 0 0 12px !important;
}

.template-product .m15 {
  margin: 0 !important;
}

.template-product img[alt*="ProvenPure"] {
  margin: 6px 0 !important;
  display: block;
}
/* TRUST PAGES — mobile: kill hyphenation + mid-word breaks across the whole page content */
@media (max-width: 768px) {

  /* Apply to ALL page content, not just .rte (your theme often uses non-rte wrappers) */
  body[class*="template-page"] main,
  body[class*="template-page"] main * {
    -webkit-hyphens: none !important;
    hyphens: none !important;
  }

  /* Explicitly undo common “break anywhere” rules that cause ugly wraps */
  body[class*="template-page"] main p,
  body[class*="template-page"] main li,
  body[class*="template-page"] main span,
  body[class*="template-page"] main a,
  body[class*="template-page"] main strong,
  body[class*="template-page"] main em {
    overflow-wrap: normal !important;
    word-break: normal !important;
    word-wrap: normal !important;
  }
}
/* =========================================
   PDP — FIX XCLUSIVE SPACERS + TIGHTEN STACK
   (desktop + mobile)
   ========================================= */

/* 0) Kill / reduce Xclusive injected spacer blocks (INLINE margin-bottom) */
body.template-product .module-spacer {
  margin-bottom: 6px !important; /* was 15–20px inline */
}

/* If you want almost no gaps, use 2px instead:
body.template-product .module-spacer { margin-bottom: 2px !important; }
*/

/* 1) Title + botanical name */
body.template-product header { margin-bottom: 6px !important; }

body.template-product .mob-h3,
body.template-product header h3 {
  margin: 0 0 4px !important;
  line-height: 1.15 !important;
}

body.template-product .botanical-name {
  margin: 0 0 10px !important;
}

/* 2) Price */
body.template-product .f8pr-price,
body.template-product .price,
body.template-product [class*="price"]{
  margin: 0 0 12px !important;
}

/* 3) Variant selector block */
body.template-product .f8pr-variant-selection,
body.template-product [class*="variant-selection"],
body.template-product [class*="variant"]{
  margin: 0 0 12px !important;
}

/* 4) ProvenPure badge spacing */
body.template-product img[alt*="ProvenPure"]{
  display: block !important;
  margin: 0 0 10px !important;
}

/* 5) Your ticks line */
body.template-product .tgoc-trust-text{
  margin: 0 0 12px !important;
}

/* 6) Add to cart form/button */
body.template-product form.f8pr-buy-button{
  margin-top: 0 !important;
}

body.template-product .product-form__submit,
body.template-product button[name="add"],
body.template-product [class*="add-to-cart"]{
  margin-top: 0 !important;
}

/* ======================================================
   TGOC — TRUST BADGES (Banner Columns) + FREE SHIPPING BAR
   Replaces the entire messy block you pasted.
   Section: [id*="section_banner_columns_3h3NAx"]
   ====================================================== */

/* ---------- Free shipping progress (keep ONCE) ---------- */
.tgoc-free-ship { margin: 14px 0 18px; }
.tgoc-free-ship__msg { font-size: 14px; font-weight: 500; }

.tgoc-free-ship__bar{
  margin-top: 8px;
  height: 6px;
  border-radius: 999px;
  background: rgba(0,0,0,0.08);
  overflow: hidden;
}

.tgoc-free-ship__fill{
  height: 100%;
  border-radius: 999px;
  background: #3f5e4a;
  transition: width 0.3s ease;
}
/* ----------- Free shipping progress ----------- */
.tgoc-free-ship{
  margin: 16px 0 18px;
}

.tgoc-free-ship_msg{
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 6px;
}

.tgoc-free-ship_sub{
  font-size: 13px;
  line-height: 1.35;
  color: rgba(0,0,0,.68);
  margin-bottom: 12px;
}

.tgoc-free-ship_bar{
  margin-top: 0;
  height: 8px;
  width: 100%;
  border-radius: 999px;
  background: rgba(95,125,99,0.18);
  overflow: hidden;
}

.tgoc-free-ship_fill{
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #5f7d63;
  transition: width 0.3s ease;
}
/* Fix cart drawer free shipping bar clipping */
.tgoc-free-ship_bar{
  display: block !important;
  width: 100% !important;
  height: 8px !important;
  margin-top: 10px !important;
  margin-bottom: 2px !important;
  border-radius: 999px !important;
  background: rgba(95,125,99,0.18) !important;
  overflow: hidden !important;
  line-height: 0 !important;
}

.tgoc-free-ship_fill{
  display: block !important;
  width: auto;
  height: 10px !important;
  min-height: 10px !important;
  border-radius: 999px !important;
  background: #5f7d63 !important;
}

.tgoc-free-ship{
  overflow: visible !important;
}
/* ---------- Trust badges cards (all breakpoints) ---------- */
[id*="section_banner_columns_3h3NAx"] ul.l4ft > li{
  background: #fff !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  border-radius: 18px !important;
  padding: 20px 16px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06) !important;
  box-sizing: border-box !important;
}

/* Stop theme grey media blocks behind icons */
[id*="section_banner_columns_3h3NAx"] ul.l4ft > li figure,
[id*="section_banner_columns_3h3NAx"] ul.l4ft > li picture,
[id*="section_banner_columns_3h3NAx"] ul.l4ft > li .media,
[id*="section_banner_columns_3h3NAx"] ul.l4ft > li .image-wrap{
  background: transparent !important;
}

/* No disgusting hyphen splits inside tiles */
[id*="section_banner_columns_3h3NAx"] ul.l4ft > li,
[id*="section_banner_columns_3h3NAx"] ul.l4ft > li *{
  hyphens: none !important;
  -webkit-hyphens: none !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* Calmer typography inside cards */
[id*="section_banner_columns_3h3NAx"] ul.l4ft > li h3{
  font-size: 22px !important;
  line-height: 1.15 !important;
}
[id*="section_banner_columns_3h3NAx"] ul.l4ft > li p{
  font-size: 14px !important;
  line-height: 1.25 !important;
}

/* Remove extra side padding if theme injects it */
[id*="section_banner_columns_3h3NAx"]{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ---------- Desktop / Tablet layout ---------- */
@media (min-width: 750px){

 [id*="section_banner_columns_3h3NAx"] ul.l4ft{
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    column-gap: 22px !important;
    row-gap: 22px !important;
  }

  /* Desktop: 4-up */
[id*="section_banner_columns_3h3NAx"] ul.l4ft > li{
    flex: 0 1 calc(25% - 22px) !important;
    max-width: calc(25% - 22px) !important;
  }
}

/* Tablet: 2-up */
@media (min-width: 750px) and (max-width: 1100px){
[id*="section_banner_columns_3h3NAx"] ul.l4ft > li{
    flex: 0 1 calc(50% - 22px) !important;
    max-width: calc(50% - 22px) !important;
  }
}

/* ---------- Mobile: 2-up grid (NO swipe, NO snap) ---------- */
@media (max-width: 749px){

[id*="section_banner_columns_3h3NAx"] ul.l4ft{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;

    overflow: visible !important;
    scroll-snap-type: none !important;

    padding: 0 16px !important;
    margin: 0 !important;
  }

[id*="section_banner_columns_3h3NAx"] ul.l4ft > li{
    flex: none !important;
    width: auto !important;
    max-width: none !important;

    padding: 16px 12px !important;
    border-radius: 16px !important;
  }

[id*="section_banner_columns_3h3NAx"]ul.l4ft img{
    max-height: 110px !important;
    width: auto !important;
    margin: 0 auto 10px !important;
    display: block !important;
  }

  /* Scrollbar hide is harmless; keep it */
[id*="section_banner_columns_3h3NAx"] ul.l4ft::-webkit-scrollbar{ display:none; }
[id*="section_banner_columns_3h3NAx"] ul.l4ft{ scrollbar-width:none; }
}
@media (max-width: 749px){

  /* TRUST TILES: KILL carousel/scroll behaviour completely */
[id*="section_banner_columns_3h3NAx"] ul.l4ft{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;

    overflow: visible !important;
    scroll-snap-type: none !important;

    padding: 0 14px !important;
    margin: 0 !important;

    /* If theme sets transform/translate for sliders, neutralise it */
    transform: none !important;
    translate: none !important;
    scroll-behavior: auto !important;
  }

  /* Kill any flex “slide” sizing still applied */
[id*="section_banner_columns_3h3NAx"] ul.l4ft > li{
    width: auto !important;
    max-width: none !important;
    flex: none !important;

    padding: 14px 12px !important;
    border-radius: 16px !important;
  }

  /* Remove the grey media placeholder blocks inside tiles */
[id*="section_banner_columns_3h3NAx"] ul.l4ft figure,
[id*="section_banner_columns_3h3NAx"] ul.l4ft picture,
[id*="section_banner_columns_3h3NAx"] ul.l4ft .media,
[id*="section_banner_columns_3h3NAx"] ul.l4ft .image-wrap{
    background: transparent !important;
  }

  /* If the grey block is literally a .placeholder element, hide it */
[id*="section_banner_columns_3h3NAx"] ul.l4ft .placeholder,
[id*="section_banner_columns_3h3NAx"] ul.l4ft [class*="placeholder"]{
    display: none !important;
  }

  /* Scale icon down so tiles don’t look ridiculous */
[id*="section_banner_columns_3h3NAx"] ul.l4ft img{
    max-height: 96px !important;
    width: auto !important;
    margin: 0 auto 10px !important;
    display: block !important;
  }

  /* Headings inside tiles: smaller */
[id*="section_banner_columns_3h3NAx"] ul.l4ft h3,
[id*="section_banner_columns_3h3NAx"] ul.l4ft .title{
    font-size: 16px !important;
    line-height: 1.15 !important;
    margin: 0 !important;
  }

}
@media (max-width: 749px){

  /* HOMEPAGE: bundle product tiles -> 1 per row */
  [id*="section_featured_products_6MdnbV"] ul.l4cl.mobile-compact{
    display: block !important;
  }

  [id*="section_featured_products_6MdnbV"] ul.l4cl.mobile-compact > li{
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-bottom: 18px !important;
  }

  [id*="section_featured_products_6MdnbV"] ul.l4cl.mobile-compact > li:last-child{
    margin-bottom: 0 !important;
  }
}
@media (max-width: 749px){
  /* Bundles (featured products) – keep 1 per row + stop giant images */
  [id*="section_featured_products_6MdnbV"] ul.l4cl.mobile-compact{
    display:block !important;
  }
  [id*="section_featured_products_6MdnbV"] ul.l4cl.mobile-compact > li{
    width:100% !important;
    max-width:100% !important;
    flex:0 0 100% !important;
    margin-bottom: 18px !important;
  }

  /* Cap the product image height so it doesn’t eat the screen */
  [id*="section_featured_products_6MdnbV"] img{
    max-height: 320px !important;
    object-fit: contain !important;
  }
}
@media (max-width: 749px){
  /* Email subscribe – make it look like one unit */
  form[action*="contact"] input[type="email"],
  form[action*="contact"] button,
  form[action*="contact"] .button{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  form[action*="contact"] button,
  form[action*="contact"] .button{
    margin-top: 10px !important;
    padding: 14px 18px !important;
  }
}
@media (max-width: 749px){
  /* Predictive search / search drawer: ensure close control is visible */
  .predictive-search__close,
  .search-modal__close-button,
  .search-drawer__close,
  .search__close,
  button[aria-label*="Close"][class*="search"],
  button[aria-label*="close"][class*="search"]{
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 9999 !important;
  }

  /* Increase tap target */
  .predictive-search__close,
  .search-modal__close-button,
  .search-drawer__close,
  .search__close{
    min-width: 44px !important;
    min-height: 44px !important;
  }
}
h1, h2, h3, h4, h5, h6,
p, a, span, li, label, small, strong, em,
button, summary,
.rte, .rte *,
.card, .card *,
.product-card, .product-card *,
.product-item, .product-item *,
.collection-item, .collection-item *,
.m6tb, .m6tb *,
.m6pr, .m6pr * {
  -webkit-hyphens: none !important;
  -ms-hyphens: none !important;
  hyphens: none !important;

  word-break: normal !important;
  overflow-wrap: normal !important;
  white-space: normal !important;
}
/* Collection page: clean Show more products button */
body.template-collection p.link-btn.text-center{
  margin:12px 0 24px !important;
  padding:0 !important;
  text-align:center !important;
}

body.template-collection p.link-btn.text-center::before,
body.template-collection p.link-btn.text-center::after,
body.template-collection .tgoc-load-more-button::before,
body.template-collection .tgoc-load-more-button::after{
  content:none !important;
  display:none !important;
}

body.template-collection .tgoc-load-more-button{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:254px !important;
  min-height:86px !important;
  padding:18px 22px !important;
  box-sizing:border-box !important;
  background:#000 !important;
  color:#fff !important;
  border:0 !important;
  border-radius:12px !important;
  text-decoration:none !important;
  font-size:16px !important;
  font-weight:700 !important;
  line-height:1.15 !important;
  text-align:center !important;
  white-space:normal !important;
  box-shadow:none !important;
}
@media (max-width: 767px) {
  .recommendations .tabs-header.toggle,
  [data-template*="_recommendations"] .tabs-header.toggle {
    font-size: 2.2rem !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
  }
}

@media (max-width: 749px){
#root [id*="section_featured_products_6MdnbV"] ul.l4cl{
  width: 100% !important;
  display: block !important;
  margin-top: 20px !important;
}
  #root [id*="section_featured_products_6MdnbV"] ul.l4cl > li{
    width: 100% !important;
    max-width: 280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    flex: none !important;
  }
}