/** Shopify CDN: Minification failed

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

**/
/* =========================================================================
   CLOTHIFY — BRAND TOKENS
   -------------------------------------------------------------------------
   One file, one source of truth for the whole custom storefront.
   Change a value here and every Clothify section updates with it.
   Sections never hardcode a color/font/spacing value directly —
   they all read from these custom properties.
   ========================================================================= */

:root,
.clothify {
  /* ---- Color: "Atelier" palette — warm ink, paper, terracotta ---- */
  --cf-ink:        #14140F;   /* primary text / dark surfaces        */
  --cf-ink-soft:   #2B2A24;   /* ink with a little air, for hovers   */
  --cf-paper:      #F6F2EA;   /* page background                     */
  --cf-card:       #FFFFFF;   /* card surfaces                       */
  --cf-line:       #E4DED2;   /* hairline borders                    */
  --cf-stone:      #8C887E;   /* secondary / muted text              */
  --cf-clay:       #B5654A;   /* primary accent (CTAs, highlights)   */
  --cf-clay-deep:  #94513A;   /* accent hover / pressed              */
  --cf-olive:      #6E7256;   /* secondary accent (tags, badges)     */

  /* ---- Type ---- */
  --cf-font-display: 'Fraunces', 'Georgia', serif;
  --cf-font-body:     'Inter', -apple-system, sans-serif;

  /* ---- Shape & elevation ---- */
  --cf-radius-sm: 2px;
  --cf-radius-md: 4px;
  --cf-radius-pill: 100px;
  --cf-shadow-sm: 0 2px 14px rgba(20,20,15,0.06);
  --cf-shadow-md: 0 14px 40px rgba(20,20,15,0.12);

  /* ---- Motion ---- */
  --cf-ease: cubic-bezier(.22,.61,.36,1);
  --cf-speed-fast: .28s;
  --cf-speed-med: .5s;
  --cf-speed-slow: .9s;

  /* ---- Layout ---- */
  --cf-container: 1360px;
  --cf-gutter: 20px;
}

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500;1,9..144,600&family=Inter:wght@300;400;500;600;700&display=swap');

/* ---- Shared resets, scoped to .clothify so we never leak into the rest
       of the theme or fight the merchant's existing styles ---- */
.clothify { font-family: var(--cf-font-body); color: var(--cf-ink); }
.clothify *, .clothify *::before, .clothify *::after { box-sizing: border-box; }
.clothify img { max-width: 100%; display: block; }
.clothify a { color: inherit; text-decoration: none; }
.clothify button { font-family: inherit; cursor: pointer; }
.clothify h1, .clothify h2, .clothify h3, .clothify h4 {
  font-family: var(--cf-font-display); font-weight: 500; margin: 0; color: var(--cf-ink);
}

.cf-container { width: 100%; max-width: var(--cf-container); margin: 0 auto; padding: 0 var(--cf-gutter); }

/* ---- Shared section rhythm — used by most Clothify sections (arrivals,
       testimonials, features, social, promo...) so it lives here in the
       always-loaded tokens file rather than in any one section's CSS. ---- */
.cf-section { padding: 76px 0; }
.cf-section__head { max-width: 620px; margin-bottom: 40px; }
.cf-section__title { font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.1; }
.cf-section__sub { color: var(--cf-stone); font-size: 0.98rem; margin-top: 14px; line-height: 1.6; }

/* ---- Reusable "index" kicker label — e.g. "(01) — New Arrivals" ----
       A small original signature detail used across sections. */
.cf-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--cf-font-body); font-size: 0.72rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--cf-stone); margin-bottom: 14px;
}
.cf-kicker::before { content: ''; width: 22px; height: 1px; background: var(--cf-clay); display: inline-block; }

/* ---- Buttons ---- */
.cf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 32px; border-radius: var(--cf-radius-sm);
  font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
  transition: all var(--cf-speed-fast) var(--cf-ease); border: 1px solid transparent; white-space: nowrap;
}
.cf-btn--ink { background: var(--cf-ink); color: var(--cf-paper); }
.cf-btn--ink:hover { background: var(--cf-clay); }
.cf-btn--paper { background: var(--cf-paper); color: var(--cf-ink); }
.cf-btn--paper:hover { background: var(--cf-clay); color: #fff; }
.cf-btn--line { background: transparent; border-color: currentColor; }
.cf-btn--line:hover { background: var(--cf-ink); color: var(--cf-paper); border-color: var(--cf-ink); }

/* ---- Underline-grow text link, used for "View all" style links ---- */
.cf-link {
  position: relative; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding-bottom: 3px; display: inline-flex; align-items: center; gap: 6px;
}
.cf-link::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(1); transform-origin: right; transition: transform var(--cf-speed-fast) var(--cf-ease);
}
.cf-link:hover::after { transform: scaleX(0); transform-origin: left; }

/* ---- Scroll reveal (shared by all sections, driven by clothify-interactions.js) ---- */
.cf-reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--cf-speed-slow) var(--cf-ease), transform var(--cf-speed-slow) var(--cf-ease); }
.cf-reveal.is-in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .clothify * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}