/** Shopify CDN: Minification failed

Line 10:49 Unexpected "*"
Line 41:59 Unexpected "*"

**/
/* ==========================================================================
   Spacing scale tokens — mobile-first vertical rhythm.
   Applied to top homepage sections only (slideshow, brand-tadaa-promise,
   marquee, featured-products). Existing pt-*/pb-* utility classes on those
   wrappers are overridden so rhythm is consistent across the above-fold flow.
   ========================================================================== */
:root { 
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs:  12px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  32px;
  --space-xl:  48px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* Semantic tokens */
  --section-pad-block:       var(--space-lg);   /* 32px mobile */
  --section-pad-inline:      var(--space-md);   /* 24px mobile */
  --section-gap-intra:       var(--space-md);   /* 24px mobile */
  --section-header-mb:       var(--space-md);   /* 24px mobile */
}

@media (min-width: 768px) {
  :root {
    --section-pad-block:     var(--space-2xl);  /* 64px desktop */
    --section-pad-inline:    var(--space-xl);   /* 48px desktop */
    --section-gap-intra:     var(--space-lg);   /* 32px desktop */
    --section-header-mb:     var(--space-xl);   /* 48px desktop */
  }
}

/* Apply tokens to top-of-homepage sections. High specificity + !important
   because the wrappers also carry Bootstrap-style pt-*/pb-* utilities. */
.slideshow-container-bro,
.marquee,
.featured-products {
  padding-top: var(--section-pad-block) !important;
  padding-bottom: var(--section-pad-block) !important;
}

/* Brand Process Journey: slightly reduce top/bottom + widen cards. */
.brand-process-journey,
section.brand-process-journey {
  padding-top: var(--space-lg) !important;
  padding-bottom: var(--space-lg) !important;
}
@media (min-width: 1101px) {
  /* Let the grid use the full viewport (with safe gutters) so each of the
     7 cards gets ~40–60px more width — no column-count change. */
  .brand-process-journey .brand-container {
    max-width: min(1440px, 100% - 48px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .brand-process-journey .brand-process-list {
    gap: 16px !important;
  }
}

.slideshow-container-bro > .container,
.brand-tadaa-promise > .container,
.marquee > .container,
.featured-products > .container {
  padding-left: var(--section-pad-inline);
  padding-right: var(--section-pad-inline);
}

/* Consistent header rhythm on these sections */
.brand-tadaa-promise .section-header,
.marquee .section-header,
.featured-products .section-header {
  margin-bottom: var(--section-header-mb) !important;
}

/* Slideshow hero keeps its full-bleed image; only trim its inner CTA block */
.slideshow-container-bro .slideshow-inner {
  padding-top: var(--section-gap-intra);
  padding-bottom: var(--section-gap-intra);
}

/* About Us Benefits Section CSS */

.about-benefits-section {
  width: 100%;
  box-sizing: border-box;
}

.about-benefits-section *,
.about-benefits-section *::before,
.about-benefits-section *::after {
  box-sizing: border-box;
}

.about-benefits-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

.about-benefits-section .section-heading {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
  text-align: center;
}

.about-benefits-section .section-subheading {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
  line-height: 1.5;
  margin: 0 auto;
  text-align: center;
}

.about-benefits-section .benefits-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  justify-items: center;
  align-items: start;
  width: 100%;
}

.about-benefits-section .benefit-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.about-benefits-section .benefit-icon-wrapper {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.about-benefits-section .benefit-icon-wrapper:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.about-benefits-section .benefit-icon {
  line-height: 1;
}

.about-benefits-section .benefit-title {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}

/* Tablet: 3 columns */
@media screen and (max-width: 999px) {
  .about-benefits-section .benefits-grid {
    grid-template-columns: repeat(3, 1fr);
  }

}

@font-face {
  font-family: "hore";
  src: url("hore.ttf") format("truetype");
  font-display: swap;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.heading,
.section-header h1, .section-header h2, .section-header h3,
[class*="heading"], [class*="title"] {
  font-family: "hore", Nunito, sans-serif !important;
}

/* ==========================================================================
   Site-wide type scale — fluid, consistent across every page/section.
   Single source of truth: overrides ad-hoc font-size rules in sections.
   ========================================================================== */
:root {
  --fs-h1: clamp(2rem, 4.5vw + 0.5rem, 4rem);      /* 32 → 64 */
  --fs-h2: clamp(1.625rem, 3vw + 0.5rem, 2.75rem); /* 26 → 44 */
  --fs-h3: clamp(1.375rem, 1.8vw + 0.6rem, 2rem);  /* 22 → 32 */
  --fs-h4: clamp(1.125rem, 1vw + 0.75rem, 1.5rem); /* 18 → 24 */
  --fs-h5: clamp(1rem, 0.5vw + 0.85rem, 1.25rem);  /* 16 → 20 */
  --fs-h6: 1rem;                                    /* 16 */
  --fs-body: 1rem;                                  /* 16 */
  --fs-sm: 0.875rem;                                /* 14 */
  --fs-xs: 0.75rem;                                 /* 12 */
  --lh-tight: 1.15;
  --lh-body: 1.6;
}

body,
p,
li,
.rte,
.description {
  font-size: var(--fs-body) !important;
  line-height: var(--lh-body);
}

.small, small, .text-sm, .fs-sm { font-size: var(--fs-sm) !important; }
.text-xs, .fs-xs { font-size: var(--fs-xs) !important; }

h1, .h1, .section-header h1, [class*="heading"].h1, [class*="title"].h1 {
  font-size: var(--fs-h1) !important;
  line-height: var(--lh-tight);
}
h2, .h2, .section-header h2, .title:not(.h1):not(.h3):not(.h4):not(.h5):not(.h6) {
  font-size: var(--fs-h2) !important;
  line-height: var(--lh-tight);
}
h3, .h3, .section-header h3 {
  font-size: var(--fs-h3) !important;
  line-height: 1.25;
}
h4, .h4 { font-size: var(--fs-h4) !important; line-height: 1.3; }
h5, .h5 { font-size: var(--fs-h5) !important; line-height: 1.35; }
h6, .h6 { font-size: var(--fs-h6) !important; line-height: 1.4; }

/* Neutralize Bootstrap font-size utilities so they don't fight the scale
   in places where section settings apply them arbitrarily. */
.fs-1 { font-size: var(--fs-h1) !important; }
.fs-2 { font-size: var(--fs-h2) !important; }
.fs-3 { font-size: var(--fs-h3) !important; }
.fs-4 { font-size: var(--fs-h4) !important; }
.fs-5 { font-size: var(--fs-h5) !important; }
.fs-6 { font-size: var(--fs-h6) !important; }

button, .btn, .button {
  font-size: var(--fs-body) !important;
  line-height: 1.2;
}

/* ==========================================================================
   Site-wide spacing cleanup — cap excessive vertical padding from Bootstrap
   utilities used by section settings. Collapses pt-11..pt-20 (and pb-)
   into a rhythmic scale so sections don't create dead zones.
   ========================================================================== */
.pt-9, .pt-10, .pt-11, .pt-12 { padding-top: var(--space-lg) !important; }   /* 32 */
.pb-9, .pb-10, .pb-11, .pb-12 { padding-bottom: var(--space-lg) !important; }
.pt-13, .pt-14, .pt-15 { padding-top: var(--space-xl) !important; }           /* 48 */
.pb-13, .pb-14, .pb-15 { padding-bottom: var(--space-xl) !important; }
.pt-16, .pt-17, .pt-18, .pt-19, .pt-20 { padding-top: var(--space-2xl) !important; } /* 64 */
.pb-16, .pb-17, .pb-18, .pb-19, .pb-20 { padding-bottom: var(--space-2xl) !important; }

@media (max-width: 767.98px) {
  /* Tighter rhythm on mobile — prevents giant gaps between sections. */
  .pt-7, .pt-8, .pt-9, .pt-10, .pt-11, .pt-12,
  .pt-13, .pt-14, .pt-15,
  .pt-16, .pt-17, .pt-18, .pt-19, .pt-20 { padding-top: var(--space-lg) !important; }
  .pb-7, .pb-8, .pb-9, .pb-10, .pb-11, .pb-12,
  .pb-13, .pb-14, .pb-15,
  .pb-16, .pb-17, .pb-18, .pb-19, .pb-20 { padding-bottom: var(--space-lg) !important; }
}

/* Jhango wave dividers were stacking their own margin + 200px height between
   sections, creating huge dead zones. Cap height & neutralize margins. */
[class*="jhango-waves"],
[id*="jhango_waves"],
section[class*="waves"] {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
[class*="jhango-waves"] svg,
[id*="jhango_waves"] svg,
section[class*="waves"] svg {
  max-height: 64px;
}
@media (max-width: 767.98px) {
  [class*="jhango-waves"] svg,
  [id*="jhango_waves"] svg,
  section[class*="waves"] svg { max-height: 40px; }
}

/* Kill trailing margin on last child inside sections — common culprit for
   double spacing where section padding + child margin compound. */
section > *:last-child,
[data-section-id] > *:last-child { margin-bottom: 0 !important; }

/* Consistent header spacing site-wide */
.section-header { margin-bottom: var(--section-header-mb) !important; }

/* Trim oversized inline margins that sections often hardcode */
main > *, main > * > * { --bs-gutter-y: 0; }


.cart-empty {
  margin-bottom: 30px !important;
}
/* ==========================================================================
   Nav dropdown caret vs. brand underline
   Bootstrap draws the caret as ::after (border-top triangle). The brand layer
   reuses the same ::after for the hover underline but only zeroes its width,
   so the leftover .3em border-top renders as a permanent dash under every
   dropdown link (e.g. "Flavours"). Drop the border; the underline is the
   affordance.
   ========================================================================== */
#navbar-wrapper .nav-desktop-menu .nav-link.dropdown-toggle::after,
#navbar-mobile .nav-link.dropdown-toggle::after {
  border: 0 !important;
  margin-left: 0 !important;
}

/* ==========================================================================
   Header stability
   The theme's encrypted custom.js toggles #header-group.hide on scroll
   direction with no threshold, so small scrolls make the header flick in and
   out. Keeping it pinned (it still compacts via .is-scrolled) removes the
   jitter and keeps sticky offsets steady.
   ========================================================================== */
#header-group.hide {
  transform: none !important;
}