/** Shopify CDN: Minification failed

Line 23:0 All "@import" rules must come first

**/
body.template--product{
    .wt-product__add-to-cart_form{
        .product-form__buttons{
            quantity-counter{
                display: none;
            }
            .product-form__submit{
                max-width:100%;
            }
        }
    }
}

/* ============================================================
   KOLLO 2026 DESIGN SYSTEM - appended by redesign build
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600&family=Inter:wght@400;500;600&display=swap');

:root{
  --k-ink:#141414;
  --k-offwhite:#FCFAF7;
  --k-red:#DC2A1F;
  --k-red-dark:#B91F16;
  --k-balance:#1F5BCC;
  --k-creatine:#3A6EA8;
  --k-electro:#FF1D8E;
  --k-flex:#1FA585;
  --k-line:#E7E2DA;
  --k-muted:#6E6A64;
}

body{
  --font-base:'Inter',sans-serif;
  --font-base-weight:400;
  --font-headline:'Jost',sans-serif;
  --font-headline-weight:500;
  --font-navigation:'Jost',sans-serif;
  --font-navigation-weight:500;
  --font-button:'Jost',sans-serif;
  --font-button-weight:500;
  --font-price:'Inter',sans-serif;
  --font-price-weight:600;
  font-feature-settings:'tnum';
}

h1,h2,h3,.h1,.h2,.h3,.title,.section-header__title{
  font-family:'Jost',sans-serif !important;
  font-weight:500 !important;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.kgf-heading,.ks-h{
  font-size:clamp(24px,3vw,36px);
  line-height:1.2;
}

/* Proof band heading - smaller + tighter so the stats stay the hero */
.kp-h{
  font-size:clamp(18px,2vw,26px) !important;
  line-height:1.25;
  letter-spacing:.06em;
}

.price,.price-item,[class*='price']{
  font-feature-settings:'tnum';
}

button,.button,.btn,input[type='submit'],
.product-form__submit,
[class*='button']:not([class*='radio']),
.badge,[class*='badge'],
.card,.card__media,[class*='card']{
  border-radius:0 !important;
}

button.button,.button,.product-form__submit{
  font-family:'Jost',sans-serif !important;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
}

/* --- Slim ALL brands marquees (awards + press) - template-prefix-proof selector --- */
[id*='__brands_'] img,
[id^='shopify-section'][id*='brands_'] img{
  max-height:52px !important;
  width:auto !important;
  object-fit:contain;
}

/* --- Utility classes --- */
.k-ground{background:var(--k-offwhite)}
.k-eyebrow{font-family:'Jost',sans-serif;font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--k-red)}
.k-dip{height:9px}
.k-dip--red{background:var(--k-red)}
.k-dip--balance{background:var(--k-balance)}
.k-dip--creatine{background:var(--k-creatine)}
.k-dip--electro{background:var(--k-electro)}
.k-dip--flex{background:var(--k-flex)}
.k-ing{font-family:'Jost',sans-serif;font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--k-muted);border-left:2px solid currentColor;padding-left:8px}

/* ============================================================
   KOLLO ANNOUNCEMENT BAR - top trust strip
   ============================================================ */
.wt-announcement-bar .wt-announcement__text,
.wt-announcement-bar .wt-announcement__text a{
  font-family:'Jost',sans-serif;
  font-size:12px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#ffffff;
}
.wt-announcement-bar .wt-announcement__text a{
  text-decoration:none;
}
.wt-announcement-bar .wt-announcement__text svg{
  display:none;
}
.wt-announcement-bar .wt-announcement__close__icon{
  opacity:.6;
  transition:opacity .15s;
}
.wt-announcement-bar .wt-announcement__close:hover .wt-announcement__close__icon{
  opacity:1;
}
@media screen and (min-width:900px){
  .wt-announcement-bar .wt-announcement__container{
    padding-left:4rem;
    padding-right:4rem;
  }
}

/* ============================================================
   KOLLO TOP NAV - tracked Jost caps (.1em)
   ============================================================ */
.wt-page-nav-mega .wt-page-nav-mega__link__text{
  font-family:'Jost',sans-serif;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
}

/* ============================================================
   KOLLO FOOTER - tracked Jost headings, Jost links + red hover
   ============================================================ */
.wt-footer .wt-footer__links .wt-footer__title{
  font-family:'Jost',sans-serif;
  font-size:12px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#141414;
}
.wt-footer .wt-footer__list__item{
  margin-bottom:.55rem;
}
.wt-footer .wt-footer__list__item a{
  font-family:'Jost',sans-serif;
  font-size:14px;
  font-weight:400;
  letter-spacing:.02em;
  color:#141414;
  transition:color .15s;
}
.wt-footer .wt-footer__list__item a:hover{
  color:#DC2A1F;
}
.wt-footer .wt-footer__aside__copy{
  font-family:'Inter',sans-serif;
  font-size:12px;
  letter-spacing:.02em;
  color:#6E6A64;
}

/* ============================================================
   KOLLO NEWSLETTER / EMAIL OPT-IN - on-brand restyle.
   Kills the busy background photo + frosted box; calm off-white
   ground, brand type, square field, red CTA. Native form for now;
   Klaviyo backend wired later without touching this styling.
   ============================================================ */
.newsletter-with-image{
  background-image:none !important;
  background-color:#FCFAF7 !important;
}
.newsletter-with-image .newsletter__wrapper{
  background:transparent !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  box-shadow:none !important;
  border:none !important;
  max-width:540px;
  margin:0 auto;
  text-align:center;
  padding:2.5rem 1.5rem;
}
.newsletter-with-image .headline__title{
  font-family:'Jost',sans-serif !important;
  font-weight:500 !important;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#141414;
  line-height:1.18;
}
.newsletter-with-image .newsletter__text{
  font-family:'Inter',sans-serif;
  font-size:15px;
  line-height:1.6;
  color:#4A4742;
  margin:.7rem 0 1.4rem;
}
.newsletter-with-image .newsletter__text strong{
  color:#DC2A1F;
  font-weight:600;
}
.newsletter-with-image .wt-newsletter__fieldset{
  max-width:420px;
  margin:0 auto;
  display:flex;
  gap:0;
}
.newsletter-with-image .wt-newsletter__field{
  flex:1 1 auto;
  border-radius:0 !important;
  border:1px solid #D8D2C8;
  border-right:none;
  background:#ffffff;
  font-family:'Inter',sans-serif;
  font-size:14px;
  color:#141414;
  padding:14px 16px;
  height:auto;
}
.newsletter-with-image .wt-newsletter__field:focus{
  outline:none;
  border-color:#141414;
}
.newsletter-with-image .wt-newsletter__send{
  border-radius:0 !important;
  background:#DC2A1F !important;
  border:1px solid #DC2A1F !important;
  color:#ffffff !important;
  font-family:'Jost',sans-serif;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-size:12.5px;
  padding:0 22px;
  transition:background .15s,border-color .15s;
}
.newsletter-with-image .wt-newsletter__send:hover{
  background:#B91F16 !important;
  border-color:#B91F16 !important;
}
.newsletter-with-image .wt-newsletter__send__text{
  color:#ffffff !important;
}

/* ============================================================
   KOLLO SHOP MEGA MENU - dropdown redesign
   ============================================================ */
@media screen and (min-width:990px){
  .wt-page-nav-mega .kollo-shop-mega__inner{
    grid-template-columns:250px 1fr 1fr 1fr;
    align-items:start;
    padding:2.25rem 2.5rem 2.5rem 2.5rem;
    gap:2.5rem;
    min-height:0;
  }
}
.wt-page-nav-mega .kollo-shop-mega__col{
  border-left:none;
  border-top:none;
  padding:0;
}
@media screen and (min-width:990px){
  .wt-page-nav-mega .kollo-shop-mega__col{
    border-left:none;
    padding:.25rem 0 0;
  }
}
.wt-page-nav-mega .kollo-shop-mega__heading{
  font-family:'Jost',sans-serif;
  font-size:11px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#6E6A64;
  margin:0 0 1rem;
  padding-bottom:.7rem;
  border-bottom:1px solid #E7E2DA;
}
.wt-page-nav-mega .kollo-shop-mega__links li{
  margin-bottom:.6rem;
}
.wt-page-nav-mega .kollo-shop-mega__link{
  font-family:'Jost',sans-serif;
  font-size:14px;
  font-weight:400;
  letter-spacing:.02em;
  color:#141414;
  transition:color .15s;
}
.wt-page-nav-mega .kollo-shop-mega__link:hover{
  opacity:1;
  color:#DC2A1F;
}
.wt-page-nav-mega .kollo-shop-mega__promo{
  border-radius:0;
  border:1px solid #E7E2DA;
  background:#FCFAF7;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.wt-page-nav-mega .kollo-shop-mega__promo-img{
  position:relative;
  top:auto;
  left:auto;
  width:100%;
  height:auto;
  flex:0 0 auto;
  aspect-ratio:4 / 5;
  object-fit:cover;
  object-position:center;
  border-bottom:1px solid #E7E2DA;
}
.wt-page-nav-mega .kollo-shop-mega__promo::after{
  display:none;
}
.wt-page-nav-mega .kollo-shop-mega__promo-heading{
  flex:0 0 auto;
  font-family:'Jost',sans-serif;
  font-weight:500;
  font-size:14px;
  letter-spacing:.05em;
  text-transform:uppercase;
  line-height:1.3;
  color:#141414;
  margin:0;
  padding:15px 16px 0;
}
.wt-page-nav-mega .kollo-shop-mega__promo-subtext{
  flex:0 0 auto;
  font-family:'Inter',sans-serif;
  font-size:12px;
  font-weight:500;
  letter-spacing:.02em;
  color:#DC2A1F;
  margin:0;
  padding:5px 16px 0;
}
.wt-page-nav-mega .kollo-shop-mega__promo-btn{
  flex:0 0 auto;
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  background:none;
  color:#141414;
  font-family:'Jost',sans-serif;
  font-weight:600;
  font-size:11.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  border-radius:0;
  padding:0;
  margin:12px 16px 16px;
  transition:color .15s;
}
.wt-page-nav-mega .kollo-shop-mega__promo-btn::after{
  content:"\2192";
  margin-left:.45em;
  transition:transform .15s;
}
.wt-page-nav-mega .kollo-shop-mega__promo-btn:hover{
  color:#DC2A1F;
  background:none;
}
.wt-page-nav-mega .kollo-shop-mega__promo-btn:hover::after{
  transform:translateX(3px);
}

/* ============================================================
   KOLLO NEWSLETTER - mobile heading cap (desktop unchanged).
   Vendor size_heading_mobile renders oversized on phones and
   clips on narrow screens; bring it in line with the section
   heading scale. Mobile only - desktop heading untouched.
   ============================================================ */
@media (max-width:749px){
  .newsletter-with-image .headline__title{
    font-size:clamp(24px,6.8vw,30px) !important;
    line-height:1.15;
  }
}

/* ============================================================
   KOLLO MOBILE HEADER - frosted translucent bar (desktop unchanged).
   Desktop (990px+) keeps the elegant transparent blur. On the
   mobile/hamburger header (<=989px) the bar is an 80% cream frosted
   glass: a blur sits behind it so the page faintly shows through,
   while the black logo and icons stay fully legible. Painted on the
   inner bar only so the opacity does not compound back to solid;
   the outer wrapper is forced transparent. min-height:0 drops the
   theme's tall-bar floor and 9px padding gives the logo even
   breathing room top and bottom.
   ============================================================ */
@media screen and (max-width:989px){
  .page-header{
    background-color:transparent !important;
  }
  .wt-header__body{
    background-color:rgba(252,250,247,0.80) !important;
    -webkit-backdrop-filter:blur(12px) saturate(115%) !important;
    backdrop-filter:blur(12px) saturate(115%) !important;
    min-height:0 !important;
    align-items:center !important;
    padding-top:9px !important;
    padding-bottom:9px !important;
  }
  .wt-header__logo-wrapper{
    margin-top:0 !important;
    margin-bottom:0 !important;
  }
}

/* ============================================================
   KOLLO MOBILE TYPE SCALE - larger body copy for readability.
   16px primary body, 14px supporting. Mobile only (<=749px);
   desktop and all headings untouched. !important is required
   to beat the per-section "#id .class" rules.
   ============================================================ */
@media (max-width:749px){
  /* Primary body / intro / story copy -> 16px */
  .kh-sub,
  .khiw-sub, .khiw-sub p,
  .kbs-sub, .kbs-sub p,
  .kdcr-stext, .kdcr-stext p,
  .ks-body, .ks-body p,
  .newsletter-with-image .newsletter__text{
    font-size:16px !important;
    line-height:1.6 !important;
  }
  /* Supporting copy -> 14px */
  .khiw-step-text,
  .kbs-blurb,
  .kdcr-row-blurb,
  .kgf-pday,
  .kgf-pday b{
    font-size:14px !important;
  }
  /* Lists, card names, small bits nudged up */
  .ks-list li{ font-size:15.5px !important; }
  .kgf-name{ font-size:15.5px !important; }
  .kgf-reviews{ font-size:12.5px !important; }
  .kp-label{ font-size:14px !important; }
  .kp-disc{ font-size:11.5px !important; }
  .kh-guarantee{ font-size:12.5px !important; }
  .kh-chip{ font-size:13px !important; }
  /* Email input at 16px to stop iOS auto-zoom on focus */
  .newsletter-with-image .wt-newsletter__field{ font-size:16px !important; }
}

/* ============================================================
   KOLLO HERO - mobile vertical tighten (desktop unchanged).
   Pulls the founder image up into the first screen on phones by
   trimming the header-clearance padding, inter-element gaps and
   button height. No copy change; tap targets kept ~44px. The
   header is now solid cream so the hero needs less clearance.
   Guarantee microline hidden on mobile to reclaim ~30px (it is
   duplicated by the announcement bar); desktop keeps it.
   <=749px only.
   ============================================================ */
@media (max-width:749px){
  .k-hero{ padding-top:92px !important; }
  .k-hero .kh-stars{ margin-bottom:10px !important; }
  .k-hero .kh-sub{ line-height:1.5 !important; margin-top:8px !important; }
  .k-hero .kh-ctas{ margin-top:12px !important; gap:8px !important; }
  .k-hero .kh-btn{ padding:14px 10px !important; }
  .k-hero .kh-guarantee{ display:none !important; }
  .k-hero .kh-chip{ margin-top:10px !important; }
  .k-hero picture{ margin-top:12px !important; }
  /* Show the WHOLE couple uncropped: drop the fixed-height cover crop,
     let the image render at its natural shape (shorter, fully visible). */
  .k-hero .kh-bg{ height:auto !important; object-fit:contain !important; object-position:center !important; }
}

/* ============================================================
   KOLLO GOAL FINDER - centre eyebrow + heading on mobile so the
   section lines up with the other (centred) sections. Scoped to
   the goal finder; chips/grid and desktop are untouched.
   ============================================================ */
@media (max-width:749px){
  .k-goalfinder .k-eyebrow,
  .k-goalfinder .kgf-heading{ text-align:center !important; }
}

/* ============================================================
   KOLLO HERO - slightly larger founder-chip avatar on mobile.
   Bumps the Jenni thumbnail from 32px to 40px (desktop unchanged).
   ============================================================ */
@media (max-width:749px){
  .k-hero .kh-chip img{ width:40px !important; height:40px !important; }
}

/* ============================================================
   KOLLO HOW IT WORKS ("Your Routine, Made Simple") - slightly
   larger step icons on BOTH desktop and mobile (not in a media
   query). Badge 64->74, SVG 34->40; connector line re-centred
   on the taller badge (37 = half of 74; line is hidden mobile).
   ============================================================ */
.k-hiw .khiw-icon{ width:74px !important; height:74px !important; }
.k-hiw .khiw-icon svg{ width:40px !important; height:40px !important; }
.k-hiw .khiw-grid::before{ top:37px !important; }

/* ============================================================
   KOLLO PDP BUY BOX - subscribe/one-time toggle + tier card
   labels aligned to the design system (Jost, square corners,
   brand red active state). Targets the custom picker in
   main-product.liquid. Product template only. First pass -
   layout and selected-card fill left intact; refine vs render.
   ============================================================ */
body.template--product .custom-subscription_button{
  display:flex;
  gap:8px;
  margin-bottom:14px;
}
body.template--product .custom-subscription_button .name__btn_featured--product{
  flex:1 1 0;
  text-align:center;
  font-family:'Jost',sans-serif;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:13px;
  padding:13px 10px;
  border:1px solid #141414;
  border-radius:0;
  background:#ffffff;
  color:#141414;
  cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
body.template--product .custom-subscription_button .name__btn_featured--product.active{
  background:#DC2A1F;
  border-color:#DC2A1F;
  color:#ffffff;
}
body.template--product .f-button__list__link{
  border-radius:0 !important;
}
body.template--product .custom-label{
  font-family:'Jost',sans-serif;
  font-weight:500;
  letter-spacing:.03em;
  text-transform:uppercase;
}