/** Shopify CDN: Minification failed

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

**/
/* =============================================================
   LIO V5 REBRAND — global token + component overrides
   Loaded AFTER theme.css so it wins specificity.
   Source: distilled from v5 inline CSS + journeypackpdp-v2.css
   ============================================================= */

/* --- v5 brand tokens (source of truth) --- */
:root {
  --forest:#0b2410;
  --forest-soft:#143820;
  --mint:#94fca9;
  --mint-deep:#6ee589;
  --mint-soft:#daece3;
  --chalk:#fcfefb;
  --cream:#eef5ef;
  --cream-deep:#e3efe6;
  --chalk-dim:#e7ebe3;
  --paper:#efece2;
  --accent:#6ee589;
  --accent-deep:#4dd16f;
  --ink:#0b2410;
  --ink-60:rgba(11,36,16,.62);
  --ink-40:rgba(11,36,16,.4);
  --border-soft:rgba(11,36,16,.14);
  --border-strong:rgba(11,36,16,.34);
  --shadow-md:0 4px 14px rgba(11,36,16,.08),0 2px 4px rgba(11,36,16,.04);
  --shadow-lg:0 22px 54px rgba(11,36,16,.16),0 8px 18px rgba(11,36,16,.07);
  --shadow-cta:0 5px 0 var(--forest);
  --radius-sm:8px;
  --radius-md:14px;
  --radius-card:24px;
}

/* --- Override Impact's RGB-component variables (Impact uses `rgb(var(--xxx) / opacity)` everywhere)
       so we must redefine in RGB-component space. v5 forest #0b2410 = 11 36 16 etc. --- */
:root {
  /* primary surfaces */
  --background-primary: 238 245 239;        /* #eef5ef cream */
  --text-primary: 11 36 16;                 /* #0b2410 forest */
  --dialog-background: 252 254 251;         /* #fcfefb chalk */

  /* button: primary -> mint with forest text */
  --button-background-primary: 148 252 169;   /* #94fca9 mint */
  --button-text-primary: 11 36 16;            /* forest */

  /* button: secondary -> chalk with forest outline */
  --button-background-secondary: 252 254 251;
  --button-text-secondary: 11 36 16;

  /* accent */
  --accent: 110 229 137;                      /* #6ee589 mint-deep */

  /* badges, banners, etc. — inherit forest/mint where applicable */
  --badge-background: 148 252 169;
  --badge-color: 11 36 16;
  --banner-background: 11 36 16;
  --banner-color: 252 254 251;

  /* header colors — Impact's header uses these */
  --header-background: 11 36 16;
  --header-color: 252 254 251;

  /* announcement bar */
  --announcement-bar-background: 11 36 16;
  --announcement-bar-color: 148 252 169;

  /* success / info / warning — match brand palette */
  --success-background: 148 252 169;
  --success-color: 11 36 16;

  /* form input */
  --input-border-color: 11 36 16;
  --input-background: 252 254 251;
}

/* --- v5 typography: Adobe Typekit kit xhz7hhk (Lio's brand fonts) --- */
@import url("https://use.typekit.net/xhz7hhk.css");

:root {
  --heading-font-family: "trade-gothic-next", "Inter", system-ui, -apple-system, sans-serif;
  --heading-font-weight: 900;
  --heading-letter-spacing: -0.02em;
  --heading-text-transform: none;

  --text-font-family: "trade-gothic-next", "Inter", system-ui, -apple-system, sans-serif;
  --text-font-weight: 500;
  --text-letter-spacing: 0.005em;
}

/* --- Body / global typography baseline --- */
body {
  font-family: var(--text-font-family);
  color: var(--forest);
  background: var(--cream);
  letter-spacing: -0.005em;
}
h1, h2, h3, h4, h5, h6,
.heading,
.h0, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--heading-font-family);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--forest);
}

/* --- Button rebrand: v5 chunky CTA with forest drop shadow --- */
.button,
.btn,
button.button--primary,
.button--primary,
.button--lg,
.button--xl {
  background: var(--mint) !important;
  color: var(--forest) !important;
  border: 2.5px solid var(--forest) !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  box-shadow: 0 5px 0 var(--forest);
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.button:hover,
.btn:hover,
.button--primary:hover,
.button--lg:hover {
  background: var(--mint-deep) !important;
  color: var(--forest) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 0 var(--forest);
}
.button:active,
.btn:active,
.button--primary:active {
  transform: translateY(2px);
  box-shadow: 0 3px 0 var(--forest);
}

/* --- Outline / secondary button --- */
.button--secondary,
.button--outline {
  background: transparent !important;
  color: var(--forest) !important;
  border: 2.5px solid var(--forest) !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
  box-shadow: 0 5px 0 var(--forest);
}
.button--secondary:hover,
.button--outline:hover {
  background: var(--mint-soft) !important;
}

/* --- Subdued / link button variant --- */
.button--subdued {
  background: transparent !important;
  color: var(--forest) !important;
  text-decoration: underline;
  text-underline-offset: 4px;
  box-shadow: none;
  border: none !important;
}

/* --- Form inputs --- */
input[type="text"], input[type="email"], input[type="search"], input[type="tel"], input[type="password"],
textarea, select {
  background: var(--chalk) !important;
  border: 1.5px solid var(--forest) !important;
  color: var(--forest) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--text-font-family);
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--mint-deep) !important;
  outline-offset: 2px;
}

/* --- Badges (sale, sold-out, new) --- */
.badge,
.product-card__badge,
.product-card__badge-list .badge {
  background: var(--mint) !important;
  color: var(--forest) !important;
  border: 1.5px solid var(--forest) !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* --- Product cards --- */
.product-card {
  background: var(--chalk);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.product-card__info {
  padding: 14px 14px 18px;
}
.product-card__title {
  font-family: var(--heading-font-family);
  font-weight: 900;
  color: var(--forest);
  letter-spacing: -0.008em;
}
.product-card__price,
.price {
  color: var(--forest);
  font-weight: 800;
}
.price--compare,
.price--strikethrough,
.compare-at-price {
  color: var(--ink-60);
  text-decoration: line-through;
}

/* --- Collection / blog post / general card hover --- */
.product-card,
.blog-post-card,
.collection-card,
.card {
  transition: transform .18s ease, box-shadow .18s ease;
}
.product-card:hover,
.blog-post-card:hover,
.collection-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* --- Links --- */
a {
  color: var(--forest);
  transition: color .14s ease;
}
a:hover {
  color: var(--forest-soft);
}

/* --- Announcement bar (urgency feel) --- */
announcement-bar,
.announcement-bar,
[data-announcement-bar] {
  background: var(--forest) !important;
  color: var(--mint) !important;
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* --- Header: forest with chalk text matches v5 --- */
.shopify-section-header,
header.header,
.header {
  background: var(--cream);
  color: var(--forest);
}

/* --- Footer base --- */
.shopify-section-footer,
.footer {
  background: var(--forest);
  color: var(--cream);
}
.footer a { color: var(--cream); }
.footer a:hover { color: var(--mint); }

/* --- Section / banner backgrounds use cream palette --- */
section, .section {
  background-color: inherit;
}

/* --- Sale price color emphasis --- */
.price--on-sale .price__sale,
.price--on-sale .price__current {
  color: var(--accent-deep) !important;
  font-weight: 900;
}

/* --- Eyebrow text style (v5 signature pattern) --- */
.eyebrow,
[data-eyebrow] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--forest);
}
.eyebrow::before,
.eyebrow .pdot {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mint-deep);
  display: inline-block;
}

/* --- Heading display class (large hero text) --- */
.heading--xl, .h0, .heading-huge {
  font-size: clamp(2.2rem, 5vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-weight: 900;
}

/* --- Cart drawer / cart page surfaces --- */
cart-drawer,
.cart,
.cart-page {
  background: var(--cream);
  color: var(--forest);
}
.cart__checkout-button,
.cart-page__checkout-button {
  background: var(--mint) !important;
  color: var(--forest) !important;
  border: 2.5px solid var(--forest) !important;
  box-shadow: 0 5px 0 var(--forest);
}

/* --- 404 / search no-results layout polish --- */
.empty-state,
.not-found {
  background: var(--cream);
  color: var(--forest);
  text-align: center;
  padding: 96px 24px;
}

/* --- Customer pages (login, register, account, password) --- */
.customer-template,
.customer-account,
.customer-login,
.account-page {
  background: var(--cream);
  color: var(--forest);
}
.customer-template input,
.customer-account input,
.customer-login input {
  background: var(--chalk) !important;
  border: 1.5px solid var(--forest) !important;
}

/* --- Image hover zoom subtle --- */
.product-card__image img,
.collection-card__image img {
  transition: transform .35s ease;
}
.product-card:hover .product-card__image img {
  transform: scale(1.03);
}

/* --- Section spacing rhythm tightening (v5 feels denser) --- */
section + section { margin-block-start: 0; }

/* --- Pill / chip elements (filters, swatches) --- */
.pill, .chip, .filter__pill,
.facets__item {
  background: var(--chalk) !important;
  color: var(--forest) !important;
  border: 1.5px solid var(--forest) !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
}
.pill.is-active,
.chip.is-active,
.filter__pill.is-active,
.facets__item--active {
  background: var(--mint) !important;
}

/* --- Quantity selector --- */
.quantity-selector,
.quantity-input {
  border: 2px solid var(--forest) !important;
  border-radius: var(--radius-sm) !important;
}

/* --- Pagination dots / arrows --- */
.pagination__nav-item,
.pagination__nav-item--active {
  color: var(--forest) !important;
}
.pagination__nav-item--active {
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* --- Hide Impact's default urgency / promo banner if we add v5 urgency bar separately --- */
/* (No hide rule — Impact's announcement bar is what we color-rebrand above) */