/* ============================================================
   PĂSTRĂVĂRIA SFĂRAȘ — 2026
   Design system. Indigo (structure) · Gold (action) ·
   Cyan (water) · Rose (reducere). Glacial paper, never cream.
   ============================================================ */

@layer fonts, tokens, base, layout, components, utilities;

/* Unlayered on purpose. The UA rule for [hidden] is display:none, but any
   author `display` inside a layer beats it — .card sets display:flex, so
   filtered-out products stayed on screen. This has to win over everything. */
[hidden] { display: none !important; }

@layer fonts {
  /* Self-hosted variable fonts — no third-party requests, no consent needed. */
  @font-face {
    font-family: "Bricolage Grotesque"; font-style: normal; font-display: swap;
    font-weight: 200 800;
    src: url("../fonts/bricolage-latin.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  }
  @font-face {
    font-family: "Bricolage Grotesque"; font-style: normal; font-display: swap;
    font-weight: 200 800;
    src: url("../fonts/bricolage-latin-ext.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
  }
  @font-face {
    font-family: "Literata"; font-style: normal; font-display: swap;
    font-weight: 200 900;
    src: url("../fonts/literata-latin.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  }
  @font-face {
    font-family: "Literata"; font-style: normal; font-display: swap;
    font-weight: 200 900;
    src: url("../fonts/literata-latin-ext.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
  }
  @font-face {
    font-family: "Literata"; font-style: italic; font-display: swap;
    font-weight: 200 900;
    src: url("../fonts/literata-latin-italic.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+2215;
  }
}

@layer tokens {
  :root {
    /* --- brand, sampled from the original mark --- */
    --indigo:      oklch(0.22 0.105 292);
    --indigo-700:  oklch(0.32 0.095 292);
    --indigo-500:  oklch(0.46 0.075 292);
    --indigo-300:  oklch(0.66 0.045 292);

    --gold:        oklch(0.795 0.158 82);
    --gold-deep:   oklch(0.70 0.145 76);
    --gold-ink:    oklch(0.515 0.115 68);

    --cyan:        oklch(0.685 0.128 231);
    --cyan-deep:   oklch(0.50 0.115 233);

    --rose:        oklch(0.525 0.185 8);

    /* --- surfaces: cold water white, chroma toward cyan --- */
    --paper:       oklch(0.984 0.006 225);
    --mist:        oklch(0.947 0.014 226);
    --mist-2:      oklch(0.915 0.019 228);
    --line:        oklch(0.885 0.018 228);
    --line-soft:   oklch(0.925 0.014 228);

    --ink:         var(--indigo);
    --ink-2:       oklch(0.415 0.055 292);
    --ink-3:       oklch(0.545 0.040 292);
    --on-dark:     oklch(0.965 0.010 240);
    --on-dark-2:   oklch(0.815 0.030 250);

    /* --- type --- */
    --display: "Bricolage Grotesque", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
    --prose:   "Literata", Georgia, "Times New Roman", serif;

    --step--2: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
    --step--1: clamp(0.84rem, 0.81rem + 0.14vw, 0.92rem);
    --step-0:  clamp(1rem, 0.96rem + 0.20vw, 1.10rem);
    --step-1:  clamp(1.26rem, 1.18rem + 0.40vw, 1.50rem);
    --step-2:  clamp(1.58rem, 1.42rem + 0.80vw, 2.05rem);
    --step-3:  clamp(1.98rem, 1.68rem + 1.50vw, 2.80rem);
    --step-4:  clamp(2.48rem, 1.94rem + 2.70vw, 3.85rem);
    --step-5:  clamp(3.05rem, 2.10rem + 4.75vw, 5.30rem);

    /* --- space --- */
    --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
    --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
    --s-9: clamp(3.5rem, 2rem + 6vw, 7rem);
    --s-10: clamp(5rem, 2.5rem + 9vw, 10rem);

    --gutter: clamp(1.1rem, 0.6rem + 2.4vw, 3rem);
    --measure: 68ch;
    --wide: 84rem;
    --narrow: 46rem;

    --r-1: 3px; --r-2: 6px; --r-3: 12px; --r-4: 22px;

    /* --- motion --- */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-io:  cubic-bezier(0.65, 0, 0.35, 1);
    --t-fast: 140ms; --t: 260ms; --t-slow: 620ms;

    /* --- elevation: cold shadows, tinted to the page --- */
    --lift-1: 0 1px 2px oklch(0.22 0.105 292 / 0.06), 0 2px 8px oklch(0.22 0.105 292 / 0.05);
    --lift-2: 0 2px 6px oklch(0.22 0.105 292 / 0.07), 0 14px 34px oklch(0.22 0.105 292 / 0.09);
    --lift-3: 0 30px 70px oklch(0.22 0.105 292 / 0.20);

    /* --- z scale --- */
    --z-base: 1; --z-sticky: 100; --z-drawer-veil: 300;
    --z-drawer: 310; --z-toast: 400;
  }
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }

  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--prose);
    font-size: var(--step-0);
    line-height: 1.62;
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }

  h1, h2, h3, h4, .display {
    font-family: var(--display);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.025em;
    text-wrap: balance;
    font-variant-numeric: tabular-nums;
  }
  h1 { font-size: var(--step-5); }
  h2 { font-size: var(--step-4); }
  h3 { font-size: var(--step-2); }
  h4 { font-size: var(--step-1); line-height: 1.18; }

  p { text-wrap: pretty; }
  p, li { max-width: var(--measure); }

  a { color: inherit; text-decoration-color: oklch(0.795 0.158 82 / 0.75);
      text-underline-offset: 0.22em; text-decoration-thickness: 2px; }
  a:hover { text-decoration-color: var(--gold); }

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

  button, input, select, textarea { font: inherit; color: inherit; }
  button { cursor: pointer; background: none; border: 0; }

  :focus-visible {
    outline: 3px solid var(--cyan-deep);
    outline-offset: 3px;
    border-radius: var(--r-1);
  }

  ::selection { background: var(--gold); color: var(--indigo); }

  .skip {
    position: absolute; left: var(--s-4); top: -100px; z-index: var(--z-toast);
    background: var(--indigo); color: var(--on-dark);
    padding: var(--s-3) var(--s-5); border-radius: var(--r-2);
    font-family: var(--display); font-weight: 600;
    transition: top var(--t) var(--ease-out);
  }
  .skip:focus { top: var(--s-4); }
}

@layer layout {
  .wrap { width: min(100% - var(--gutter) * 2, var(--wide)); margin-inline: auto; }
  .wrap-narrow { width: min(100% - var(--gutter) * 2, var(--narrow)); margin-inline: auto; }

  .section { padding-block: var(--s-9); }
  .section-tight { padding-block: var(--s-8) var(--s-6); }
  .section-flush { padding-block: var(--s-6) var(--s-9); }

  .stack > * + * { margin-block-start: var(--s-4); }
  .stack-lg > * + * { margin-block-start: var(--s-6); }

  .cluster { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
}

/* ============================================================
   COMPONENTS
   ============================================================ */
@layer components {

  /* --- the gold rule: the brand's own structural device.
         Taken from the two gold hairlines that bracket the
         original wordmark. Used instead of uppercase eyebrows. --- */
  .rule {
    display: flex; align-items: center; gap: var(--s-4);
    font-family: var(--display); font-weight: 600;
    font-size: var(--step--1); letter-spacing: 0.01em;
    color: var(--ink-2); margin-block-end: var(--s-5);
  }
  .rule::after {
    content: ""; flex: 1; height: 3px; background: var(--gold);
    min-width: var(--s-7);
  }
  .rule-on-dark { color: var(--on-dark-2); }

  /* ---------- announcement bar ---------- */
  .promo {
    display: block;
    background: var(--indigo); color: var(--on-dark);
    font-family: var(--display); font-size: var(--step--1);
    padding-block: var(--s-2);
  }
  .promo .wrap {
    display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
    align-items: center; justify-content: center; text-align: center;
  }
  .promo b { color: var(--gold); font-weight: 700; }
  .promo a { text-decoration: none; border-bottom: 2px solid oklch(0.795 0.158 82 / 0.5); }
  .promo a:hover { border-bottom-color: var(--gold); }

  /* ---------- header ---------- */
  .site-head {
    position: sticky; top: 0; z-index: var(--z-sticky);
    background: oklch(0.984 0.006 225 / 0.86);
    backdrop-filter: blur(14px) saturate(1.4);
    border-block-end: 1px solid var(--line);
  }
  .site-head .wrap {
    display: grid; grid-template-columns: auto 1fr auto;
    align-items: center; gap: var(--s-5); min-height: 74px;
  }

  /* The mark is the original artwork: its Romanian diacritics are drawn,
     not typeset, which is exactly why we use the image and not a webfont. */
  .brand { display: block; text-decoration: none; line-height: 0; }
  .brand img { height: 46px; width: auto; }
  @media (max-width: 48rem) { .brand img { height: 40px; } }
  @media (max-width: 22rem) { .brand img { height: 34px; } }
  .brand-foot img { height: 76px; }
  @media (max-width: 34rem) { .brand-foot img { height: 62px; } }

  .nav { display: flex; gap: clamp(0.6rem, 1.4vw, 1.6rem); justify-self: center; }
  .nav a {
    font-family: var(--display); font-weight: 500; font-size: var(--step--1);
    text-decoration: none; padding: var(--s-2) 2px; position: relative; color: var(--ink-2);
    transition: color var(--t-fast);
  }
  .nav a::after {
    content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 3px;
    background: var(--gold); transform: scaleX(0); transform-origin: left;
    transition: transform var(--t) var(--ease-out);
  }
  .nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
  .nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }

  .head-actions { display: flex; align-items: center; gap: var(--s-2); }

  .icon-btn {
    display: grid; place-items: center; width: 44px; height: 44px;
    border-radius: var(--r-2); color: var(--ink);
    transition: background var(--t-fast);
  }
  .icon-btn:hover { background: var(--mist); }
  .icon-btn svg { width: 21px; height: 21px; }

  .cart-btn { position: relative; }
  .cart-count {
    position: absolute; top: 4px; right: 3px; min-width: 19px; height: 19px;
    display: grid; place-items: center; padding-inline: 4px;
    background: var(--gold); color: var(--indigo);
    font-family: var(--display); font-weight: 700; font-size: 0.68rem;
    border-radius: 99px; font-variant-numeric: tabular-nums;
    transform: scale(0); transition: transform var(--t) var(--ease-out);
  }
  .cart-count[data-on] { transform: scale(1); }

  .burger { display: none; }

  @media (max-width: 62rem) {
    .site-head .wrap { grid-template-columns: auto 1fr; }
    .nav {
      position: fixed; inset: 74px 0 auto; flex-direction: column; gap: 0;
      background: var(--paper); border-block-end: 1px solid var(--line);
      padding: var(--s-4) var(--gutter) var(--s-6);
      transform: translateY(-130%); transition: transform var(--t-slow) var(--ease-out);
      box-shadow: var(--lift-2);
    }
    .nav[data-open] { transform: translateY(0); }
    .nav a { font-size: var(--step-1); padding-block: var(--s-3); border-block-end: 1px solid var(--line-soft); }
    .nav a::after { display: none; }
    .burger { display: grid; }
  }

  /* ---------- buttons ---------- */
  .btn {
    --btn-bg: var(--gold); --btn-fg: var(--indigo); --btn-bd: var(--gold);
    display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
    font-family: var(--display); font-weight: 650; font-size: var(--step-0);
    line-height: 1; letter-spacing: -0.01em;
    padding: 0.95em 1.5em; border-radius: 99px;
    background: var(--btn-bg); color: var(--btn-fg);
    border: 2px solid var(--btn-bd); text-decoration: none;
    transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out),
                background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
    will-change: transform;
  }
  .btn:hover { transform: translateY(-2px); box-shadow: var(--lift-2); }
  .btn:active { transform: translateY(0); }
  .btn svg { width: 1.15em; height: 1.15em; flex: none; }

  .btn-ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line); }
  .btn-ghost:hover { --btn-bd: var(--indigo); }
  .btn-solid { --btn-bg: var(--indigo); --btn-fg: var(--on-dark); --btn-bd: var(--indigo); }
  .btn-on-dark { --btn-bg: transparent; --btn-fg: var(--on-dark); --btn-bd: oklch(0.965 0.01 240 / 0.35); }
  .btn-on-dark:hover { --btn-bd: var(--gold); --btn-fg: var(--gold); }
  .btn-sm { font-size: var(--step--1); padding: 0.7em 1.1em; }
  .btn-wa { --btn-bg: oklch(0.66 0.17 148); --btn-fg: oklch(0.16 0.04 150); --btn-bd: oklch(0.66 0.17 148); }

  /* ---------- hero ---------- */
  .hero { position: relative; padding-block: clamp(2rem, 1rem + 5vw, 5rem) 0; overflow: clip; }
  .hero-grid {
    display: grid; gap: var(--s-6);
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    align-items: center;
  }
  @media (max-width: 60rem) { .hero-grid { grid-template-columns: 1fr; } }

  .hero h1 { letter-spacing: -0.042em; }
  .hero h1 em {
    font-style: normal; display: block; color: var(--cyan-deep);
    font-weight: 500; font-size: 0.44em; letter-spacing: -0.02em;
    line-height: 1.12; margin-block-start: 0.5em; max-width: 20ch;
  }
  .hero-lede {
    font-size: var(--step-1); color: var(--ink-2); max-width: 40ch;
    margin-block-start: var(--s-5);
  }
  .hero-cta { margin-block-start: var(--s-6); }

  .hero-fish { position: relative; }
  @media (min-width: 60rem) {
    .hero-fish { margin-inline-end: calc(50% - 50vw); }
    .hero-fish img { border-start-start-radius: var(--r-4); border-end-start-radius: var(--r-4); }
  }
  @media (max-width: 59.99rem) {
    .hero-fish img { border-radius: var(--r-4); }
  }
  .hero-fish img {
    width: 100%; filter: saturate(1.06) contrast(1.03);
  }
  .hero-fish::before {
    content: ""; position: absolute; inset: 4% 0 -8% -14%;
    background: radial-gradient(52% 54% at 46% 50%, oklch(0.685 0.128 231 / 0.28), transparent 72%);
    z-index: -1;
  }

  .hero-facts {
    display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6);
    margin-block-start: var(--s-7); padding-block-start: var(--s-4);
    border-block-start: 3px solid var(--gold);
    font-family: var(--display); font-size: var(--step--1); color: var(--ink-2);
  }
  .hero-facts b { color: var(--ink); font-weight: 700; }

  /* ---------- SIGNATURE: the spring rail ---------- */
  .izvor {
    position: relative; background: var(--indigo); color: var(--on-dark);
    overflow: clip; isolation: isolate;
  }
  .izvor canvas {
    position: absolute; inset: auto 0 0; width: 100%; height: 34%;
    z-index: -1; opacity: 0.9;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 42%);
    mask-image: linear-gradient(to bottom, transparent, #000 42%);
  }
  .izvor .wrap { padding-block: var(--s-8) var(--s-9); }
  .izvor-top {
    display: grid; gap: var(--s-7);
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: start;
  }
  @media (max-width: 55rem) { .izvor-top { grid-template-columns: 1fr; } }
  .izvor h2 { font-size: var(--step-3); }
  .izvor p { color: var(--on-dark-2); }

  .season {
    display: inline-flex; padding: 4px; border-radius: 99px;
    background: oklch(0.965 0.01 240 / 0.10);
    border: 1px solid oklch(0.965 0.01 240 / 0.16);
  }
  .season button {
    font-family: var(--display); font-weight: 600; font-size: var(--step--1);
    padding: 0.55em 1.2em; border-radius: 99px; color: var(--on-dark-2);
    transition: color var(--t-fast), background var(--t) var(--ease-out);
  }
  .season button[aria-pressed="true"] { background: var(--gold); color: var(--indigo); }

  .gauges {
    display: grid; gap: var(--s-5); margin-block-start: var(--s-8);
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
  .gauge { border-block-start: 1px solid oklch(0.965 0.01 240 / 0.22); padding-block-start: var(--s-3); }
  .gauge dt {
    font-family: var(--display); font-size: var(--step--2); font-weight: 500;
    letter-spacing: 0.02em; color: var(--on-dark-2); text-transform: uppercase;
  }
  .gauge dd {
    font-family: var(--display); font-weight: 700; font-size: var(--step-3);
    line-height: 1.05; letter-spacing: -0.035em; font-variant-numeric: tabular-nums;
    margin-block-start: var(--s-2);
  }
  .gauge dd small { font-size: 0.42em; font-weight: 500; letter-spacing: 0; color: var(--on-dark-2); }
  .gauge-water dd { color: var(--gold); }

  .gauges-light .gauge { border-block-start-color: var(--line); }
  .gauges-light dt { color: var(--ink-3); }
  .gauges-light dd { color: var(--ink); }
  .gauges-light dd small { color: var(--ink-3); }
  .gauges-light .gauge-water dd { color: var(--gold-ink); }
  .gauge-air dd { color: var(--cyan); transition: color var(--t) var(--ease-io); }
  .gauge-air[data-season="vara"] dd { color: oklch(0.705 0.185 32); }

  .izvor-note {
    margin-block-start: var(--s-6); font-family: var(--display);
    font-size: var(--step-1); font-weight: 500; color: var(--on-dark);
    max-width: 34ch;
  }
  .izvor-note b { color: var(--gold); font-weight: 700; }

  /* --- the proof: one scale, two readings, only one of them moves --- */
  .thermo { margin-block-start: var(--s-5); }
  .thermo-row {
    display: grid; grid-template-columns: 3.6rem 1fr auto; gap: var(--s-4);
    align-items: center; padding-block: var(--s-4);
    border-block-start: 1px solid oklch(0.965 0.01 240 / 0.22);
  }
  .thermo-row dt, .thermo-row .t-label {
    font-family: var(--display); font-size: var(--step--2); font-weight: 500;
    letter-spacing: 0.02em; text-transform: uppercase; color: var(--on-dark-2);
  }
  .thermo-row .t-val {
    font-family: var(--display); font-weight: 750; font-size: var(--step-1);
    letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap;
    width: 5.2rem; text-align: right;
  }
  .scale { position: relative; height: 8px; border-radius: 99px;
    background: oklch(0.965 0.01 240 / 0.13); }
  .scale i {
    position: absolute; top: 50%; left: var(--p, 50%);
    width: 15px; height: 15px; border-radius: 99px;
    transform: translate(-50%, -50%);
    background: var(--dot, var(--cyan));
    box-shadow: 0 0 0 4px oklch(0.22 0.105 292 / 0.9), 0 0 18px var(--dot, var(--cyan));
    transition: left 620ms var(--ease-out), background 620ms var(--ease-io),
                box-shadow 620ms var(--ease-io);
  }
  .thermo-row[data-t="water"] { --dot: var(--gold); }
  .thermo-row[data-t="air"][data-season="vara"] { --dot: oklch(0.705 0.185 32); }
  .scale-ticks {
    display: grid; grid-template-columns: 3.6rem 1fr 5.2rem; gap: var(--s-4);
    margin-block-start: var(--s-3);
  }
  .ticks { position: relative; height: 1.1em; }
  .ticks span {
    position: absolute; left: var(--p); transform: translateX(-50%);
    font-family: var(--display); font-size: 0.68rem; color: var(--on-dark-2);
    font-variant-numeric: tabular-nums; opacity: 0.8;
  }
  .thermo-caption {
    font-family: var(--display); font-size: var(--step--2); color: var(--on-dark-2);
    margin-block-start: var(--s-4);
  }
  @media (max-width: 30rem) {
    .thermo-row { grid-template-columns: 2.6rem 1fr 4.4rem; gap: var(--s-3); }
    .thermo-row .t-val { width: 4.4rem; font-size: var(--step-0); }
    .scale-ticks { grid-template-columns: 2.6rem 1fr 4.4rem; gap: var(--s-3); }
  }

  /* springs strip */
  .springs {
    display: flex; gap: var(--s-2); margin-block-start: var(--s-6);
    list-style: none; padding: 0; flex-wrap: wrap;
  }
  .springs li {
    font-family: var(--display); font-size: var(--step--2); font-weight: 600;
    padding: 0.4em 0.9em; border-radius: 99px;
    border: 1px solid oklch(0.685 0.128 231 / 0.55); color: var(--cyan);
    max-width: none;
  }

  /* ---------- category tiles (deliberately unequal) ---------- */
  .cats { display: grid; gap: var(--s-4); grid-template-columns: 1.45fr 1fr 1fr; }
  @media (max-width: 55rem) {
    .cats { grid-template-columns: 1fr 1fr; }
    .cats > :first-child { grid-column: span 2; }
  }
  @media (max-width: 34rem) { .cats { grid-template-columns: 1fr; } .cats > :first-child { grid-column: span 1; } }

  .cat {
    position: relative; display: flex; flex-direction: column; justify-content: flex-end;
    min-height: clamp(280px, 30vw, 420px); padding: var(--s-5); overflow: hidden;
    border-radius: var(--r-4); text-decoration: none; color: var(--on-dark);
    background: var(--indigo-700); isolation: isolate;
  }
  .cat img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    z-index: -2; transition: transform 900ms var(--ease-out), filter var(--t-slow);
  }
  .cat::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(to top, oklch(0.22 0.105 292 / 0.90) 6%, oklch(0.22 0.105 292 / 0.34) 48%, oklch(0.22 0.105 292 / 0.06));
  }
  .cat:hover img { transform: scale(1.055); }
  .cat h3 { font-size: var(--step-2); margin-block-end: var(--s-2); }
  .cat p { margin: 0; }
  .cat span {
    font-family: var(--display); font-size: var(--step--1); color: var(--gold);
    font-weight: 600; margin-block-start: var(--s-2); display: inline-flex; gap: 0.4em;
  }
  .cat span svg { width: 1em; height: 1em; transition: transform var(--t) var(--ease-out); }
  .cat:hover span svg { transform: translateX(4px); }

  /* ---------- product grid ---------- */
  .grid-products {
    display: grid; gap: var(--s-6) var(--s-4);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 158px), 1fr));
  }
  @media (min-width: 34rem) { .grid-products { grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); } }

  .card { position: relative; display: flex; flex-direction: column; }
  .card-media {
    position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-3);
    overflow: hidden; background: var(--mist);
  }
  .card-media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 700ms var(--ease-out);
  }
  .card-media.is-pack {
    background: radial-gradient(72% 82% at 50% 108%, oklch(0.895 0.024 228), var(--mist) 70%);
  }
  .card-media.is-pack img { object-fit: contain; padding: var(--s-3) var(--s-4) 0; mix-blend-mode: multiply; }
  .card:hover .card-media img { transform: scale(1.05); }

  .card-body { padding-block-start: var(--s-3); display: flex; flex-direction: column; flex: 1; }
  .card-cat {
    font-family: var(--display); font-size: var(--step--2); font-weight: 500;
    color: var(--ink-3); letter-spacing: 0.01em;
  }
  .card-name {
    font-family: var(--display); font-weight: 650; font-size: var(--step-0);
    line-height: 1.2; letter-spacing: -0.02em; margin-block-start: 2px;
  }
  .card-name a { text-decoration: none; }
  .card-name a::before { content: ""; position: absolute; inset: 0; z-index: 2; }
  .card:hover .card-name { text-decoration: underline; text-decoration-color: var(--gold);
    text-decoration-thickness: 2px; text-underline-offset: 0.18em; }

  .price {
    display: flex; align-items: baseline; gap: 0.5em; flex-wrap: wrap;
    font-family: var(--display); font-variant-numeric: tabular-nums;
    margin-block-start: var(--s-3);
  }
  .price b { font-weight: 750; font-size: var(--step-1); letter-spacing: -0.03em; }
  .price del { color: var(--ink-3); font-size: var(--step--1); text-decoration-thickness: 1.5px; }
  .price small { color: var(--ink-3); font-size: var(--step--1); font-weight: 500; }

  .badge {
    position: absolute; top: var(--s-3); left: var(--s-3); z-index: 3;
    font-family: var(--display); font-weight: 700; font-size: var(--step--2);
    padding: 0.32em 0.7em; border-radius: 99px;
    background: var(--rose); color: oklch(0.99 0 0);
    font-variant-numeric: tabular-nums;
  }

  .card-add {
    margin-block-start: var(--s-4); position: relative; z-index: 3; align-self: flex-start;
  }

  /* ---------- filters ---------- */
  .filters { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block-end: var(--s-6); }
  .chip {
    font-family: var(--display); font-weight: 600; font-size: var(--step--1);
    padding: 0.55em 1.1em; border-radius: 99px;
    border: 2px solid var(--line); color: var(--ink-2);
    transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
  }
  .chip:hover { border-color: var(--indigo-300); color: var(--ink); }
  .chip[aria-pressed="true"] { background: var(--indigo); border-color: var(--indigo); color: var(--on-dark); }

  /* ---------- story band ---------- */
  .band { background: var(--indigo); color: var(--on-dark); }
  .band h2, .band h3 { color: var(--on-dark); }
  .band p { color: var(--on-dark-2); }
  .band .btn-ghost { --btn-fg: var(--on-dark); --btn-bd: oklch(0.965 0.01 240 / 0.32); }

  .band-split {
    display: grid; gap: var(--s-7); align-items: center;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  @media (max-width: 58rem) { .band-split { grid-template-columns: 1fr; } }
  .band-split figure { margin: 0; border-radius: var(--r-4); overflow: hidden; }
  .band-split img { width: 100%; }

  .band-mist { background: var(--mist); color: var(--ink); }
  .band-mist p { color: var(--ink-2); }

  /* ---------- steps (a real sequence — numbers earn their place) ---------- */
  .steps { counter-reset: step; display: grid; gap: var(--s-5);
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
  .steps li { counter-increment: step; list-style: none; max-width: none;
    padding-block-start: var(--s-4); border-block-start: 3px solid var(--gold); }
  .steps li::before {
    content: counter(step); display: block;
    font-family: var(--display); font-weight: 750; font-size: var(--step-2);
    line-height: 1; color: var(--gold); margin-block-end: var(--s-2);
    font-variant-numeric: tabular-nums;
  }
  .steps h3 { font-size: var(--step-1); margin-block-end: var(--s-2); }
  .steps p { font-size: var(--step--1); }

  /* ---------- shops ---------- */
  .shops { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
  .shop {
    padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-3);
    background: var(--paper); display: flex; flex-direction: column; gap: var(--s-3);
    transition: border-color var(--t-fast), box-shadow var(--t) var(--ease-out), transform var(--t) var(--ease-out);
  }
  .shop:hover { border-color: var(--indigo-300); box-shadow: var(--lift-1); transform: translateY(-3px); }
  .shop h3 { font-size: var(--step-1); }
  .shop address { font-style: normal; color: var(--ink-2); font-size: var(--step--1); }
  .hours { list-style: none; padding: 0; margin: 0; font-size: var(--step--1);
    font-family: var(--display); font-variant-numeric: tabular-nums; }
  .hours li { display: flex; justify-content: space-between; gap: var(--s-4);
    padding-block: 5px; border-block-end: 1px solid var(--line-soft); max-width: none; }
  .hours li:last-child { border-block-end: 0; }
  .hours .closed { color: var(--ink-3); }
  .shop a[href^="http"] { margin-block-start: auto; }

  /* ---------- product detail ---------- */
  .pdp { display: grid; gap: var(--s-7); grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
  @media (max-width: 58rem) { .pdp { grid-template-columns: 1fr; } }
  .pdp-media { border-radius: var(--r-4); overflow: hidden; background: var(--mist); position: relative; }
  .pdp-media img { width: 100%; }
  .pdp-media.is-pack {
    background: radial-gradient(64% 74% at 50% 104%, oklch(0.895 0.024 228), var(--mist) 68%);
  }
  .pdp-media.is-pack { aspect-ratio: 1 / 1; }
  .pdp-media.is-pack img { height: 100%; object-fit: contain; mix-blend-mode: multiply;
    padding: var(--s-6) var(--s-6) 0; }
  .pdp h1 { font-size: var(--step-3); }
  .pdp .price b { font-size: var(--step-3); }

  .crumbs { font-family: var(--display); font-size: var(--step--1); color: var(--ink-3);
    display: flex; gap: 0.5em; flex-wrap: wrap; margin-block-end: var(--s-5); }
  .crumbs a { text-decoration: none; }
  .crumbs a:hover { text-decoration: underline; }

  .qty { display: inline-flex; align-items: center; border: 2px solid var(--line);
    border-radius: 99px; overflow: hidden; }
  .qty button { width: 44px; height: 46px; display: grid; place-items: center;
    font-family: var(--display); font-size: 1.2rem; font-weight: 600; color: var(--ink-2); }
  .qty button:hover { background: var(--mist); color: var(--ink); }
  .qty input { width: 52px; height: 46px; text-align: center; border: 0; background: none;
    font-family: var(--display); font-weight: 700; font-variant-numeric: tabular-nums;
    -moz-appearance: textfield; }
  .qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

  .spec { list-style: none; padding: 0; margin-block-start: var(--s-6); }
  .spec li { display: flex; gap: var(--s-4); justify-content: space-between; max-width: none;
    padding-block: var(--s-3); border-block-end: 1px solid var(--line-soft); font-size: var(--step--1); }
  .spec dt, .spec b { font-family: var(--display); font-weight: 600; }
  .spec span { color: var(--ink-2); text-align: right; }

  /* ---------- notice ---------- */
  .notice {
    background: var(--mist); border-radius: var(--r-3); padding: var(--s-5);
    font-size: var(--step--1); color: var(--ink-2);
  }
  .notice h2 { color: var(--ink); font-size: var(--step-1); line-height: 1.18; margin-block-end: var(--s-2); }
  .notice p { max-width: none; }

  /* ---------- cart drawer ---------- */
  .veil {
    position: fixed; inset: 0; z-index: var(--z-drawer-veil);
    background: oklch(0.22 0.105 292 / 0.42); backdrop-filter: blur(3px);
    opacity: 0; visibility: hidden; transition: opacity var(--t) var(--ease-io), visibility var(--t);
  }
  .veil[data-open] { opacity: 1; visibility: visible; }

  .drawer[inert] { pointer-events: none; }
  .drawer {
    position: fixed; inset-block: 0; inset-inline-end: 0; z-index: var(--z-drawer);
    width: min(100%, 27rem); background: var(--paper);
    display: flex; flex-direction: column;
    transform: translateX(101%); transition: transform var(--t-slow) var(--ease-out);
    box-shadow: var(--lift-3);
  }
  .drawer[data-open] { transform: translateX(0); }
  .drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--s-5); border-block-end: 1px solid var(--line);
  }
  .drawer-head h2 { font-size: var(--step-1); }
  .drawer-body { flex: 1; overflow-y: auto; padding: var(--s-5); }
  .drawer-foot { padding: var(--s-5); border-block-start: 1px solid var(--line); background: var(--mist); }

  .line-item { display: grid; grid-template-columns: 64px 1fr auto; gap: var(--s-3);
    padding-block: var(--s-4); border-block-end: 1px solid var(--line-soft); align-items: start; }
  .line-item img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-2); }
  .line-item h4 { font-size: var(--step--1); line-height: 1.25; }
  .line-item .li-meta { font-size: var(--step--2); color: var(--ink-3); font-family: var(--display);
    margin-block-start: 3px; }
  .li-qty { display: inline-flex; align-items: center; gap: 2px; margin-block-start: var(--s-2); }
  .li-qty button { width: 26px; height: 26px; border: 1px solid var(--line); border-radius: var(--r-1);
    display: grid; place-items: center; font-family: var(--display); font-size: 0.8rem; line-height: 1; }
  .li-qty button:hover { border-color: var(--indigo); }
  .li-qty span { min-width: 30px; text-align: center; font-family: var(--display);
    font-weight: 700; font-variant-numeric: tabular-nums; font-size: var(--step--1); }
  .li-sum { font-family: var(--display); font-weight: 700; font-variant-numeric: tabular-nums;
    text-align: right; white-space: nowrap; }
  .li-del { font-size: var(--step--2); color: var(--ink-3); text-decoration: underline;
    display: block; margin-block-start: var(--s-2); margin-inline-start: auto; }
  .li-del:hover { color: var(--rose); }

  .totals { font-family: var(--display); font-variant-numeric: tabular-nums; }
  .totals div { display: flex; justify-content: space-between; gap: var(--s-4); padding-block: 4px; }
  .totals .grand { font-size: var(--step-1); font-weight: 750; padding-block-start: var(--s-3);
    margin-block-start: var(--s-2); border-block-start: 2px solid var(--indigo); }

  .ship-meter { margin-block-end: var(--s-4); }
  .ship-meter p { font-size: var(--step--2); font-family: var(--display); color: var(--ink-2);
    margin-block-end: var(--s-2); max-width: none; }
  .ship-meter b { color: var(--ink); }
  .meter { height: 6px; border-radius: 99px; background: var(--mist-2); overflow: hidden; }
  .meter i { display: block; height: 100%; background: var(--gold); width: 0;
    transition: width var(--t-slow) var(--ease-out); }
  .meter[data-full] i { background: oklch(0.66 0.17 148); }

  .empty { text-align: center; padding-block: var(--s-8); color: var(--ink-3); }
  .empty svg { width: 46px; height: 46px; margin-inline: auto; margin-block-end: var(--s-4); opacity: 0.4; }

  /* ---------- toast ---------- */
  .toast {
    position: fixed; z-index: var(--z-toast); inset-block-end: var(--s-5);
    inset-inline: var(--gutter) auto; max-width: 22rem;
    background: var(--indigo); color: var(--on-dark);
    padding: var(--s-3) var(--s-5); border-radius: 99px;
    font-family: var(--display); font-size: var(--step--1); font-weight: 500;
    box-shadow: var(--lift-2);
    transform: translateY(140%); opacity: 0;
    transition: transform var(--t-slow) var(--ease-out), opacity var(--t);
  }
  .toast[data-on] { transform: translateY(0); opacity: 1; }
  .toast b { color: var(--gold); }

  /* ---------- footer ---------- */
  .site-foot { background: var(--indigo); color: var(--on-dark-2); padding-block: var(--s-8) var(--s-5); }
  .site-foot .foot-h { color: var(--on-dark); font-size: var(--step--1); letter-spacing: 0.02em;
    text-transform: uppercase; margin-block-end: var(--s-4); font-weight: 650; }
  .foot-grid { display: grid; gap: var(--s-6); grid-template-columns: 1.4fr repeat(3, 1fr); }
  @media (max-width: 60rem) { .foot-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 34rem) { .foot-grid { grid-template-columns: 1fr; } }
  .site-foot ul { list-style: none; padding: 0; display: grid; gap: var(--s-2); }
  .site-foot li { max-width: none; }
  .site-foot a { text-decoration: none; font-size: var(--step--1); }
  .site-foot a:hover { color: var(--gold); }
  .site-foot .brand-name { color: var(--on-dark); }

  .site-foot .brand-mark { color: var(--gold); }

  .socials { display: flex; gap: var(--s-2); margin-block-start: var(--s-4); }
  .socials a { width: 40px; height: 40px; display: grid; place-items: center;
    border: 1px solid oklch(0.965 0.01 240 / 0.22); border-radius: 99px;
    transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast); }
  .socials a:hover { background: var(--gold); border-color: var(--gold); color: var(--indigo); }
  .socials svg { width: 18px; height: 18px; }

  .colophon {
    margin-block-start: var(--s-7); padding-block-start: var(--s-4);
    border-block-start: 1px solid oklch(0.965 0.01 240 / 0.16);
    display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5);
    justify-content: space-between; font-size: var(--step--2);
  }
}

@layer utilities {
  .site-foot .muted, .band .muted, .izvor .muted { color: var(--on-dark-2); }

  .visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .lede { font-size: var(--step-1); color: var(--ink-2); }
  .muted { color: var(--ink-3); }
  .tight { max-width: 34ch; }
  .mt-6 { margin-block-start: var(--s-6); }
  .mt-7 { margin-block-start: var(--s-7); }
  .center { text-align: center; margin-inline: auto; }
  .prose > * + * { margin-block-start: var(--s-4); }
  .prose h2 { font-size: var(--step-2); margin-block-start: var(--s-7); }
  .prose h3 { font-size: var(--step-1); margin-block-start: var(--s-6); }
  .prose ul { padding-inline-start: 1.2em; }
  .prose li + li { margin-block-start: var(--s-2); }
}

/* ============================================================
   ENTRANCE — content ships VISIBLE. JS opts an element into the
   hidden start state only if it is below the fold at load, and a
   safety timer un-hides anything the observer never reached.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .reveal.pending { opacity: 0; }
  .reveal.pending[data-in] { animation: rise 720ms var(--ease-out) both; }

  .js .hero h1, .js .hero .hero-lede, .js .hero .hero-cta, .js .hero .hero-facts {
    animation: rise 820ms var(--ease-out) both;
  }
  .js .hero h1 { animation-delay: 60ms; }
  .js .hero .hero-lede { animation-delay: 180ms; }
  .js .hero .hero-cta { animation-delay: 270ms; }
  .js .hero .hero-facts { animation-delay: 360ms; }
  .js .hero-fish { animation: swim 1150ms var(--ease-out) both 120ms; }

  @keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
  @keyframes swim {
    from { opacity: 0; transform: translateX(40px) rotate(2.4deg) scale(0.965); }
    to   { opacity: 1; transform: none; }
  }
}

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

@media print {
  .promo, .site-head, .drawer, .veil, .toast, .izvor canvas { display: none !important; }
  body { background: #fff; color: #000; }
}