/** Shopify CDN: Minification failed

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

**/


/* ============================================================
   FUZLIE LOGO — MOBILE DISPLAY
   SVG viewBox is 520×120 (4.33:1 ratio) but visual content
   sits at roughly x:144–490, so ~66% of declared width is
   actual logo. Width values below compensate for that padding.

   Theme editor settings to match:
     Logo width (desktop)  → 200px
     Logo width (sticky)   → 160px
     Logo width (mobile)   → 185px
   ============================================================ */

/* --- CSS variable overrides (desktop / sticky / mobile) --- */
:root {
  --logo-width-desktop: 200px;
  --logo-width-sticky:  160px;
  --logo-width-mobile:  185px;
}

/* --- Ensure SVG scales proportionally inside its container - */
.m-logo a,
.m-header__mobile .m-logo a {
  display: flex;
  align-items: center;
}

.m-logo img,
.m-logo svg {
  width: 100%;
  height: auto;
  display: block;
}

/* --- Mobile: cap height so it never overflows the header bar */
@media screen and (max-width: 1023px) {
  .m-header__mobile .m-logo img,
  .m-header__mobile .m-logo svg {
    max-height: 40px;
    width: auto;
    max-width: var(--logo-width-mobile, 185px);
    object-fit: contain;
  }

  /* Centre the logo in the mobile header middle column */
  .m-header__mobile .m-logo {
    justify-content: center;
  }
}

/* --- Sticky header: slightly smaller so it doesn't dominate */
.m-header.stuck .m-logo img,
.m-header.stuck .m-logo svg {
  max-height: 34px;
  width: auto;
  max-width: var(--logo-width-sticky, 160px);
  object-fit: contain;
}

/* ============================================================
   FUZLIE BRAND — GOOGLE FONTS
   Nunito: headings (rounded, warm, geometric)
   Caveat: tagline / accent copy only
   Helvetica Neue: body text (system font — no import needed)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Caveat:wght@400;700&display=swap');

/* ============================================================
   FUZLIE BRAND — FONT STACK OVERRIDES
   These override the CSS variables set by font-face.liquid so
   Nunito and Helvetica are used everywhere in the theme.
   ============================================================ */
:root {
  --font-stack-header: 'Nunito', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-stack-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-weight-header: 700;
  --font-weight-header--bolder: 800;
  --font-weight-body: 400;
  --font-weight-body--bold: 600;
}

/* ============================================================
   FUZLIE BRAND — ACCENT FONT UTILITY CLASS
   Use .fuzli-accent on tagline text ("Something to hold onto.")
   ============================================================ */
.fuzli-accent,
.m-site-tagline {
  font-family: 'Caveat', cursive;
  font-weight: 400;
}

/* ============================================================
   FUZLIE BRAND — GLOBAL TYPOGRAPHIC FEEL
   Soften letter-spacing on headings to match Nunito's
   rounded terminals — tight tracking would fight the font.
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.m-richtext__title,
.m-section__heading,
.m-product-card__title,
.m-collection-card__title {
  font-family: 'Nunito', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  letter-spacing: -0.01em;
}

body,
p,
.rte,
.m-richtext__description,
.m-product-card__vendor,
.m-section__subheading {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ============================================================
   FUZLIE BRAND — BUTTON RADIUS
   Brand specifies 12px radius for UI elements (brand-sm = 8px,
   brand = 12px). Override the theme's default square buttons.
   ============================================================ */
:root {
  --btn-border-radius: 12px;
}

/* ============================================================
   FUZLIE BRAND — LINK COLOR
   Body links should use Fuzlie Amber, not default black.
   ============================================================ */
a:not(.m-button):not(.m-menu__link):not(.m-footer__link) {
  color: #C97E2B;
}

a:not(.m-button):not(.m-menu__link):not(.m-footer__link):hover {
  color: #2C1810;
}

/* ============================================================
   FUZLIE BRAND — FOCUS RING
   Match focus ring to brand Amber for keyboard accessibility.
   ============================================================ */
:focus-visible {
  outline-color: #C97E2B;
}

/* ============================================================
   FUZLIE BRAND — SALE / PRICE BADGE
   Ensure sale price text uses Fuzlie Ink on Coral
   for WCAG AA compliance (4.8:1 ratio per brand guide).
   ============================================================ */
.m-price--sale .m-price__sale {
  color: #EB7274;
}

/* ============================================================
   FUZLIE BRAND — ANNOUNCEMENT BAR
   Warm cream text on Fuzlie Deep Brown bar.
   ============================================================ */
.m-announcement-bar {
  background-color: #2C1810;
  color: #FBE7BE;
}

/* ============================================================
   FUZLIE BRAND — NEWSLETTER SECTION INPUT
   Ensure form fields in dark sections (Deep Brown bg) are
   readable — Cream input on Ink field.
   ============================================================ */
.m-color-scheme-c3c75c98-59e7-496a-8fcd-3350b15d74ea .m-newsletter-form__input,
.m-color-dark .m-newsletter-form__input {
  background-color: #1A1209;
  color: #FBE7BE;
  border-color: #8C7B6B;
}

.m-color-scheme-c3c75c98-59e7-496a-8fcd-3350b15d74ea .m-newsletter-form__input::placeholder,
.m-color-dark .m-newsletter-form__input::placeholder {
  color: #8C7B6B;
}