/** Shopify CDN: Minification failed

Line 143:55 Expected ":"

**/
/* =========================================================================
   SAMSARA — BASE.CSS
   Design tokens, reset, global rules.
   Single source of truth pentru toate valorile vizuale ale temei.
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. RESET MINIMAL
   ------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  color-scheme: only light;
  background-color: #F5EFE6;
  -webkit-text-size-adjust: 100%;
  /* scroll-behavior: smooth REMOVED — cauza jitter peste tot la wheel scroll
     pe Chrome (browser interpolează smooth, dar wheel events noi suprapun
     interpolarea → conflict native vs CSS → sub-pixel jitter). Anchor jumps
     specifice (hero scroll indicator, "Vezi Ciclul" CTA) folosesc
     window.scrollTo({ behavior: 'smooth' }) explicit în JS — nu pierdem UX. */
}

body {
  background: #F5EFE6;
  color: #1A140E;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  min-height: 100vh;
  min-height: 100svh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
svg,
video,
picture {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}


/* -------------------------------------------------------------------------
   2. DESIGN TOKENS — :root
   Conform SAMSARA-THEME-SPEC.md secțiunea 2.
   ------------------------------------------------------------------------- */

:root {

  /* --- Colors: Warm light bases -------------------------------------- */
  --paper:         #F5EFE6;
  --parchment:     #EAE0D0;
  --sand:          #DDD0BC;
  --sand-soft:     #E5D9C5;

  /* --- Colors: Text & ink -------------------------------------------- */
  --ink:           #1A140E;
  --bark:          #4A3F33;
  --ash-warm:      #615645; /* darken 2026-05-28 — #8A7A66 pica WCAG AA (3.6:1); #615645 = 4.5:1+ pe paper/parchment/sand */
  --border:        rgba(26, 20, 14, 0.10);
  --border-strong: rgba(26, 20, 14, 0.20);

  /* --- Colors: Accente ----------------------------------------------- */
  --copper:        #B87333;
  --copper-deep:   #8E5526;
  --copper-glow:   rgba(184, 115, 51, 0.18);
  /*
    copper-deep darken from #9A5C26 → #8E5526 (Sprint 5 T19, 2026-05-02).
    Reason: WCAG 2.1 AA 4.5:1 contrast threshold pe small mono uppercase
    text 10-14px (.product-cycle__eyebrow, .product-shipping__label,
    .coffee-card__meta-row, .collection-grid__chip-clear,
    .collection-editorial__cta-eyebrow, etc.) eșua la 4.4:1 pe parchment
    #F1E8DB. New value 5.1:1 pe parchment + 5.4:1 pe paper = AA pass
    universal. Resolves 14+ a11y excludes documented Sprint 4 T10.
  */

  /* --- Colors: Tematic (rare) ---------------------------------------- */
  --cherry:        #7A3B2E;
  --green-bean:    #3D5A3D;

  /* --- Colors: Tag labels (Sprint 2.5 cat-2, semantic only) ---------- */
  --gold:          #C9A961;  /* Gold Label / bestseller premium */
  --plum:          #5C2E4F;  /* Rarity precious accent */
  --indigo:        #2E3D5A;  /* Competition / award distinguished */

  /* --- Colors: Status ------------------------------------------------- */
  --success:       #3D5A3D;
  --warning:       #B87333;
  --error:         #8B2F1F;

  /* --- Shadows -------------------------------------------------------- */
  --shadow-sm:     0 2px 12px rgba(26, 20, 14, 0.04);
  --shadow-md:     0 8px 32px rgba(26, 20, 14, 0.06);
  --shadow-lg:     0 20px 60px rgba(26, 20, 14, 0.08);

  /* --- Typography families ------------------------------------------- */
  --font-display:  'Fraunces', Georgia, serif;
  --font-body:     'Instrument Sans', system-ui, -apple-system, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* --- Alias tokens (fix 2026-05-28): 5 fișiere (page-cart/404/list-collections/
     gift-card/password) au fost scrise cu --ff-*/--fw-* care nu erau definite →
     `font:` shorthand pica silent, randa font default. Alias-uri spre canonical. */
  --ff-display:    var(--font-display);
  --ff-body:       var(--font-body);
  --ff-mono:       var(--font-mono);
  --fw-light:      300;
  --fw-regular:    400;
  --fw-medium:     500;

  /* --- Type scale: display (Fraunces, clamp) ------------------------- */
  --fs-hero:       clamp(3rem, 9vw, 8rem);
  --fs-display-1:  clamp(2.5rem, 5vw, 4rem);
  --fs-display-2:  clamp(2rem, 4.5vw, 3.5rem);
  --fs-display-3:  clamp(1.75rem, 3.5vw, 2.5rem);

  /* --- Type scale: body (Instrument Sans) ---------------------------- */
  --fs-lg:         1.125rem;
  --fs-base:       1rem;
  --fs-sm:         0.875rem;
  --fs-xs:         0.75rem;

  /* --- Type scale: mono (JetBrains Mono, uppercase) ------------------ */
  --fs-mono-lg:    0.8125rem;
  --fs-mono-base:  0.75rem;
  --fs-mono-sm:    0.6875rem;
  --fs-mono-xs:    0.625rem;

  /* --- Spacing (baza 4px, scara geometrică) -------------------------- */
  --space-1:       0.25rem;
  --space-2:       0.5rem;
  --space-3:       0.75rem;
  --space-4:       1rem;
  --space-5:       1.5rem;
  --space-6:       2rem;
  --space-7:       3rem;
  --space-8:       4rem;
  --space-9:       5rem;
  --space-10:      7.5rem;
  --space-11:      10rem;

  /* --- Container widths ---------------------------------------------- */
  --container-max:     1400px;
  --container-narrow:  1100px;
  --container-text:    720px;

  /* --- Gutter responsive --------------------------------------------- */
  --gutter-mobile:   1.5rem;
  --gutter-tablet:   2.5rem;
  --gutter-desktop:  2.5rem;

  /* --- Motion: easing ------------------------------------------------- */
  --ease-smooth:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);

  /* --- Motion: duration ---------------------------------------------- */
  --duration-fast:    0.2s;
  --duration-base:    0.3s;
  --duration-slow:    0.6s;
  --duration-reveal:  0.8s;

  /* --- Radii ---------------------------------------------------------- */
  --radius-none:   0;
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-pill:   100px;
  --radius-full:   50%;

  /* --- Z-index scale (orientativ, pentru drawere/modale) ------------- */
  --z-header:       1000;
  --z-announcement: 1001;
  /* drawer / modal trebuie să fie peste header (1000) ca să nu fie ascunse */
  --z-drawer:       1100;
  --z-modal:        1200;
  --z-toast:        1300;
}


/* -------------------------------------------------------------------------
   3. OS COMPAT — forced light mode
   iOS Safari și unele browsere auto-inversează în dark mode. Blocăm explicit.
   `!important` autorizat aici (unicul loc permis).
   ------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  html,
  body {
    background: #F5EFE6 !important;
    color: #1A140E !important;
  }
}


/* -------------------------------------------------------------------------
   4. REDUCED MOTION
   Respect `prefers-reduced-motion` — dezactivăm toate animațiile.
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* -------------------------------------------------------------------------
   5. FOCUS STATES
   Copper outline vizibil pe toate elementele interactive (A11y non-negotiable).
   ------------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}


/* -------------------------------------------------------------------------
   6. UTILITY CLASSES
   Minime. Componente specifice primesc clase dedicate în components.css.
   ------------------------------------------------------------------------- */

/* --- Container ------------------------------------------------------- */

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

.container--narrow {
  max-width: var(--container-narrow);
}

.container--text {
  max-width: var(--container-text);
}

@media (min-width: 768px) {
  .container {
    padding-inline: var(--gutter-tablet);
  }
}

@media (min-width: 1024px) {
  .container {
    padding-inline: var(--gutter-desktop);
  }
}

/* --- Visually hidden (screen reader only) ---------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Reveal on scroll (setat de IntersectionObserver în global.js) --- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--duration-reveal) var(--ease-out),
    transform var(--duration-reveal) var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Skip to content (A11y — keyboard users) ------------------------- */

/* Skip-to-content REMOVED Cat 3.6 — markup + styling eliminate per user.
   WCAG 2.4.1 "Bypass Blocks" non-compliant pe această decizie. */


/* =========================================================================
   SCROLL PROGRESS INDICATOR — Sprint 3 Awwwards polish
   Vertical thin copper line dreapta sus, fill bottom→top pe scroll.
   Concept threading cu ciclul Samsara: linia copper = "drumul prin pagină".
   ========================================================================= */

.scroll-progress {
  position: fixed;
  top: 0;
  right: 0;
  width: 2px;
  height: 100vh;
  height: 100svh; /* Stabil la URL bar show/hide pe mobile — fără recalc per scroll frame */
  background: rgba(184, 115, 51, 0.08);
  z-index: 998;
  pointer-events: none;
  /* GPU compositor layer — bara fixă nu mai forțează repaint pe viewport. */
  transform: translateZ(0);
  contain: strict;
}

/* Ascuns pe touch/mobile — pe ecran mic linia 2px e abia vizibilă, dar costul
   compositor + JS scroll listener e disproporționat. Desktop păstrează efectul. */
@media (max-width: 1023px) {
  .scroll-progress { display: none; }
}

.scroll-progress__bar {
  width: 100%;
  height: 0%;
  background: var(--copper);
  transform-origin: top;
  will-change: height;
  transition: height 0.05s linear;
}

@media (max-width: 767px) {
  .scroll-progress {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-progress__bar {
    transition: none;
  }
}

/* --- Icon library -------------------------------------------------------
   Toate iconițele folosite prin {% render 'icon-NAME' %} au class="icon icon-NAME".
   Size default 1.25em (relativ la font-size parent), poate fi override prin
   .icon--sm / --lg / --xl sau CSS contextual.
------------------------------------------------------------------------- */

.icon {
  width: 1.25em;
  height: 1.25em;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
}

.icon--sm {
  width: 1em;
  height: 1em;
}

.icon--lg {
  width: 1.5em;
  height: 1.5em;
}

.icon--xl {
  width: 2em;
  height: 2em;
}