/* Фрешка: папір і туш. Токени з src/ui/tokens.ts застосунку. */
@font-face{font-family:"Nunito";font-weight:400;font-display:swap;src:url(/freshka/fonts/nunito-400.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-weight:600;font-display:swap;src:url(/freshka/fonts/nunito-600.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-weight:700;font-display:swap;src:url(/freshka/fonts/nunito-700.woff2) format("woff2")}

:root{
  --paper:#F2EADC;--card:#FBF5E9;--sunk:#E8DCC7;
  --ink:#3A322A;--ink-soft:#6B5F52;--line:#4A3F35;
  --mint:#B1C5A7;--mint-soft:#D3DFCB;--teal:#7FA6A0;--green:#8FA37A;
  --amber:#E9A23B;--amber-soft:#F3CF8E;--terra:#D2694A;--plum:#9B7BA6;--plum-tint:#E0D3D6;
  --fresh:#6FAE7E;--soon:#E6B54A;--gone:#8A8440;
  --fresh-ink:#3F7F52;--soon-ink:#9A6A10;--gone-ink:#6B6630;
  --shadow:0 4px 14px rgba(90,70,50,.18);--shadow-lift:0 10px 28px rgba(90,70,50,.22);
  --glow:0 6px 18px rgba(233,162,59,.45);
  --r-md:20px;--r-lg:28px;
  --display:"Comfortaa",system-ui,sans-serif;--serif:"Lora",Georgia,serif;--body:"Nunito",system-ui,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.55 var(--body);position:relative;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;mix-blend-mode:multiply;opacity:.09;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.27 0 0 0 0 0.2 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>")}
img{display:block;max-width:100%;height:auto}
a{color:var(--ink);text-decoration-thickness:2px;text-underline-offset:3px}
a:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
p{margin:0}
h1,h2,h3{font-family:var(--serif);font-weight:700;color:var(--ink);margin:0;line-height:1.15;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(34px,5.2vw,58px)}
h2{font-size:clamp(26px,3.4vw,38px)}
h3{font-size:21px;line-height:1.25}
.lead{font-size:clamp(18px,1.6vw,21px);line-height:1.5;color:var(--ink);max-width:34em}
.soft{color:var(--ink-soft)}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
@media(min-width:720px){.wrap{padding:0 32px}}

/* шапка */
.nav{display:flex;align-items:center;justify-content:space-between;padding:18px 0 8px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:.01em}
.brand img{width:44px;height:44px;border-radius:12px;border:1.5px solid var(--line);box-shadow:var(--shadow)}
.nav .links{display:flex;gap:6px}
.nav .links a{text-decoration:none;font-weight:700;font-size:16px;padding:10px 16px;border-radius:999px;white-space:nowrap}
@media(max-width:480px){.nav .links a.hide-narrow{display:none}.brand{font-size:21px;gap:9px}.brand img{width:38px;height:38px;border-radius:10px}.nav .links{gap:0}.nav .links a{font-size:15px;padding:8px 9px}}
.nav .links a:hover{background:var(--sunk)}

/* кнопки */
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:999px;border:1.5px solid var(--line);font:700 17px/1 var(--body);text-decoration:none;color:var(--ink);transition:transform .15s,box-shadow .15s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn.amber{background:var(--amber);box-shadow:var(--glow)}
.btn.amber:hover{box-shadow:0 8px 22px rgba(233,162,59,.55)}
.btn.paper{background:var(--card);box-shadow:var(--shadow)}
.btn.mint{background:var(--mint);box-shadow:var(--shadow)}
.btn img{width:22px;height:22px}

/* картки й плашки */
.card{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-lg);padding:26px 26px 28px;box-shadow:var(--shadow)}
.tag{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:var(--mint);border:1.5px solid var(--line);font-weight:700;font-size:14px}
.tag.plum{background:var(--plum-tint)}
.tag.amber{background:var(--amber-soft)}

/* хвиля: та сама крива, що в WavyDivider (період 22, амплітуда 2.5) */
.wave{height:12px;width:100%;background-repeat:repeat-x;background-size:22px 12px;background-position:center}
.wave.line{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='12' viewBox='0 0 22 12'><path d='M0 6 Q5.5 1 11 6 T22 6' fill='none' stroke='%234A3F35' stroke-width='1.5'/></svg>")}
/* край поверхні: хвиляста кромка між двома фонами */
.edge{height:14px;width:100%;background-repeat:repeat-x;background-size:44px 14px;display:block}
.edge.sunk-to-paper{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='14' viewBox='0 0 44 14'><path d='M0 7 Q11 0 22 7 T44 7 V0 H0 Z' fill='%23E8DCC7'/><path d='M0 7 Q11 0 22 7 T44 7' fill='none' stroke='%234A3F35' stroke-width='1.5'/></svg>")}
.edge.paper-to-sunk{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='14' viewBox='0 0 44 14'><path d='M0 7 Q11 14 22 7 T44 7 V14 H0 Z' fill='%23E8DCC7'/><path d='M0 7 Q11 14 22 7 T44 7' fill='none' stroke='%234A3F35' stroke-width='1.5'/></svg>")}
.band{background:var(--sunk)}

/* секції */
.section{padding-block:56px}
@media(min-width:860px){.section{padding-block:80px}}
.section-head{display:grid;gap:14px;max-width:640px;margin-bottom:32px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;justify-items:center}

/* підвал */
.foot{padding:36px 0 calc(44px + env(safe-area-inset-bottom,0px));color:var(--ink-soft);font-size:15px}
.foot .row{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center}
.foot a{color:var(--ink-soft);text-decoration:none;font-weight:600}
.foot a:hover{color:var(--ink)}
.foot .brand{font-size:20px;margin-bottom:14px}
.foot .brand img{width:34px;height:34px;border-radius:9px}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---- спільні елементи дизайн-системи (КОМПОНЕНТИ застосунку) ---- */
/* сегментований трек: один із кількох */
.seg{display:inline-flex;gap:2px;padding:4px;background:var(--sunk);border-radius:20px}
.seg button,.seg a{appearance:none;border:1.5px solid transparent;background:transparent;color:var(--ink-soft);font:600 15px/1 var(--body);padding:10px 16px;border-radius:16px;cursor:pointer;text-decoration:none;white-space:nowrap}
.seg .on{background:var(--card);border-color:var(--line);color:var(--ink);box-shadow:0 1px 3px rgba(90,70,50,.18)}
.seg button:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
/* чіп стану: заливка, не контур */
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font:700 14px/1.2 var(--body);color:var(--ink)}
.chip.fresh{background:#DCE8D3}.chip.soon{background:#F6DFA8}.chip.gone{background:#DED9C6;color:var(--ink-soft)}.chip.plum{background:var(--plum-tint)}.chip.teal{background:#CFE0DD}
/* велике число: Lora, як заголовок */
.num{font-family:var(--serif);font-weight:700;font-size:clamp(34px,4.6vw,52px);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
/* картка-плитка вибору: малюнок над словом */
.tile{display:grid;gap:12px;justify-items:center;text-align:center;padding:22px 16px 18px;background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow);font-weight:700;font-size:16px}
.tile img{height:72px;width:auto}
/* кнопка з малюнком: як «Зʼїли» / «Викинули» */
.picbtn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 20px 0 12px;border-radius:20px;border:1.5px solid var(--line);background:var(--card);box-shadow:var(--shadow);font:600 16px/1 var(--body);color:var(--ink)}
.picbtn img{width:30px;height:30px;object-fit:contain}
/* шлях у налаштуваннях */
.path{display:inline-flex;flex-wrap:wrap;gap:4px;align-items:center;font-weight:700}
.path b{font-weight:700;background:var(--card);border:1.5px solid var(--line);border-radius:8px;padding:1px 8px;font-size:14px}
.path i{font-style:normal;color:var(--ink-soft)}
/* маленький малюнок у квадраті затіненого паперу */
.pic-box{width:64px;height:64px;display:grid;place-items:center;background:var(--sunk);border:1.5px solid var(--line);border-radius:var(--r-md);flex:none}
.pic-box img{max-width:48px;max-height:48px;width:auto}