/* ── Шрифти: наші власні, не з Google ──────────────────────────
   На маркеті мережа перевантажена, і похід по шрифт на чужий домен —
   зайві DNS, TLS і очікування саме тоді, коли людина стоїть у проході.
   Обидві гарнітури лежать поруч із застосунком.

   З 0.2.0 — Oswald і Manrope, як у погоджених макетах Ярмарки. Це
   варіативні шрифти: один файл на всі насиченості. Кирилиця й латиниця —
   окремими файлами: українцю латинський шматок не качається взагалі.
   Обидві під ліцензією SIL OFL 1.1, тексти — у web/fonts/LICENSE-*.txt.
   ──────────────────────────────────────────────────────────── */
@font-face{font-family:Oswald;font-style:normal;font-weight:200 700;font-display:swap;
  src:url(/static/fonts/oswald-latin.woff2) format('woff2');
  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:Oswald;font-style:normal;font-weight:200 700;font-display:swap;
  src:url(/static/fonts/oswald-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Manrope;font-style:normal;font-weight:200 800;font-display:swap;
  src:url(/static/fonts/manrope-latin.woff2) format('woff2');
  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:Manrope;font-style:normal;font-weight:200 800;font-display:swap;
  src:url(/static/fonts/manrope-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

/* ═══════════════════════════════════════════════════════════════
   «Афіша» — напрям, обраний замовником 23.09.2026 з трьох мокапів.

   Ідея: не екран, а табличка на стенді. Паперовий фон, цинобра й олива,
   чорні обведення з офсетною тінню — як у друкованої афіші маркету.
   Впізнається з двох метрів, і саме це тут головне: покупець дивиться
   на застосунок секунд десять, стоячи в проході.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --bg:#FCF7EA; --surface:#FFFFFF; --ink:#1F2430; --ink-2:#3D4250; --muted:#5A5F6B;
  --line:#E2DAC6; --line-2:#D5CCB6; --acc:#2E5A8C; --acc-soft:#E3ECF6;
  --ok:#2C5C46; --danger:#B42318; --brand:#1F2430;
  --display:Oswald,"Arial Narrow",system-ui,sans-serif;
  --body:Manrope,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --pad:20px;
  --r:6px;                       /* друкований кут, майже прямий */
  --lift:none;   /* офсетна тінь: відбиток, а не тінь */
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--ink);
  font:400 16px/1.5 var(--body);-webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom,0);
}
#app{max-width:480px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.screen{flex:1;display:flex;flex-direction:column;padding:0 var(--pad) 28px}
.screen[hidden]{display:none}
.center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:32px 0}

h1{font:800 27px/1.06 var(--display);letter-spacing:-.025em;margin:18px 0 6px}
h2{font:800 20px/1.15 var(--display);letter-spacing:-.02em;margin:18px 0 6px}
.about{color:var(--ink-2);margin:0 0 14px;font-size:15px}
.hint{color:var(--muted);font-size:14.5px;margin:0 0 6px;max-width:34ch}
.consent{color:var(--muted);font-size:12.5px;line-height:1.4;margin:10px 2px 0;text-align:center}

.cover{
  margin:0 calc(var(--pad) * -1);height:150px;position:relative;
  background:var(--brand);
}
/* Обрізаємо саме зображення, а не всю смугу: лого навмисно звисає
   з її нижнього краю, і overflow на смузі його з'їдав. */
.cover>img,.cover::after{border-radius:0}
/* Смужки на порожній обкладинці — друкована сітка, а не сіра пляма.
   Щойно бренд завантажить своє фото, вони зникають під ним. */
.cover::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,transparent 0 13px,rgba(240,231,214,.16) 13px 14px)}
.cover.has-img::after{display:none}
.cover>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.logo{
  position:absolute;left:var(--pad);bottom:-28px;width:72px;height:72px;border-radius:var(--r);
  background:var(--surface);border:2px solid var(--ink);display:grid;place-items:center;
  color:var(--brand);overflow:hidden;z-index:1;
}
.logo::after{content:attr(data-letter);font:800 28px/1 var(--display)}
.logo.has-img::after{display:none}
.logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#s-brand h1{margin-top:38px}

.market{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  background:var(--acc);color:#FBF6EC;border-radius:3px;
  padding:7px 13px;font-size:12px;font-weight:700;margin:0 0 6px;
  letter-spacing:.09em;text-transform:uppercase;
}
.market.off{background:var(--line);color:var(--ink-2)}

.actions{margin-top:auto;padding-top:22px;display:flex;flex-direction:column;gap:10px}
.steps{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:14px}
.steps li{display:flex;gap:12px;align-items:flex-start;color:var(--ink-2);font-size:14.5px;line-height:1.45}
.steps b{flex:none;width:27px;height:27px;border-radius:50%;background:var(--brand);color:var(--bg);
  display:grid;place-items:center;font:700 13px/1 var(--display)}
.btn{
  width:100%;min-height:56px;border-radius:var(--r);border:2px solid var(--ink);
  font:700 16px/1 var(--display);letter-spacing:-.01em;cursor:pointer;padding:0 18px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
}
.ico{width:21px;height:21px;flex:none}
.follow{display:grid;gap:10px}
.btn.primary{background:var(--acc);color:#FBF6EC;box-shadow:var(--lift)}
.btn.primary:disabled{background:var(--line-2);color:var(--muted);cursor:default;box-shadow:none}
.btn.ghost{background:var(--surface);color:var(--ink)}
.btn:active{transform:translate(2px,2px)}
.btn.primary:active{box-shadow:1px 1px 0 var(--ink)}
.linkbtn{
  background:none;border:0;color:var(--acc);font:600 15px/1 var(--body);
  padding:16px 0 0;cursor:pointer;align-self:center;
}
.back{background:none;border:0;color:var(--muted);font:500 15px/1 var(--body);padding:18px 0 4px;align-self:flex-start;cursor:pointer}

.dropzone{
  margin-top:14px;border:2px dashed var(--line-2);border-radius:var(--r);background:var(--surface);
  min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;cursor:pointer;color:var(--muted);
}
.dz-icon{font-size:34px}
.dz-text{font-weight:600;font-size:15px}
.preview{width:100%;max-height:46vh;object-fit:contain;border-radius:var(--r);margin-top:14px;display:block;background:var(--line);border:2px solid var(--ink)}
.preview.small{max-width:180px;border-radius:var(--r)}

.tick{
  width:64px;height:64px;border-radius:50%;background:var(--ok);color:#fff;
  display:grid;place-items:center;font-size:32px;font-weight:700;
}
.tick.bad{background:var(--danger)}

.card{
  display:flex;gap:8px;background:var(--surface);border:2px solid var(--ink);
  border-radius:var(--r);padding:12px;margin-bottom:12px;align-items:center;
  box-shadow:var(--lift);
}
.card-open{
  flex:1;display:flex;gap:12px;align-items:center;text-align:left;
  background:none;border:0;padding:0;cursor:pointer;color:inherit;font:inherit;min-width:0;
}
.card-open img{width:68px;height:68px;border-radius:3px;object-fit:cover;background:var(--line);flex:none}
.card .t{font:700 15px/1.2 var(--display);letter-spacing:-.01em}
.card .s{color:var(--muted);font-size:13px;margin-top:2px}
.card-write{
  flex:none;width:46px;height:46px;border-radius:3px;cursor:pointer;
  background:var(--acc);color:#FBF6EC;border:2px solid var(--ink);display:grid;place-items:center;
}

/* Перегляд фото на весь екран */
.viewer{background:var(--bg)}
.vclose{background:none;border:0;color:var(--muted);font:500 15px/1 var(--body);
  padding:18px 0 4px;align-self:flex-start;cursor:pointer}
.vbody{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;padding:10px 0}
.vbody img{max-width:100%;max-height:100%;border-radius:var(--r);object-fit:contain;background:var(--line);border:2px solid var(--ink)}
.vmeta{padding:14px 2px 10px}
.vmeta .t{font:800 18px/1.15 var(--display);letter-spacing:-.02em}
.vmeta .s{color:var(--muted);font-size:14px;margin-top:4px}
.empty{color:var(--muted);text-align:center;padding:40px 0;font-size:15px}

.spinner{
  width:34px;height:34px;border-radius:50%;
  border:3px solid var(--line);border-top-color:var(--acc);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:2.4s}.btn:active{transform:none}}

/* Поки летить повне фото, показуємо превью трохи розмитим — так перехід
   до різкого читається як «підвантажилось», а не як сіпання. */
.vbody img{transition:filter .25s ease}
.vbody img:not(.sharp){filter:blur(6px)}

/* Рядок стану під фото: «надсилаємо…». Мовчить, коли все на сервері. */
.status{font-size:13px;color:var(--muted);margin:10px 0 0;display:flex;
  align-items:center;gap:7px;justify-content:center}
.status::before{content:"";width:9px;height:9px;border-radius:50%;
  background:var(--acc);opacity:.5;animation:pulse 1.4s ease-in-out infinite}
.status.bad{color:var(--danger)}
.status.bad::before{background:var(--danger);opacity:1;animation:none}
@keyframes pulse{0%,100%{opacity:.25}50%{opacity:.9}}

/* Річ, яка ще летить на сервер: видно, що вона вже є, але ще в дорозі. */
.card.pending{opacity:.72}
.card.pending .card-open{cursor:default}
.card.pending .card-open img{filter:grayscale(.35)}
.card.pending .s{color:var(--acc)}
@media (prefers-reduced-motion:reduce){.status::before{animation:none;opacity:.6}}

/* Кнопки «написати» в перегляді речі — там, де раніше була одна. */
.vwrite{padding:0 var(--pad) calc(16px + env(safe-area-inset-bottom))}

/* ── Вікно «текст скопійовано» ──────────────────────────────────
   Instagram не дає підставити текст у посилання, тому кладемо його
   в буфер і пояснюємо, що робити далі. Текст лишається у видимому
   полі — якщо копіювання не спрацювало, його беруть пальцем.      */
.sheet-back{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;
  justify-content:center;background:rgba(23,19,16,.55);padding:12px}
.sheet{width:100%;max-width:420px;box-sizing:border-box;background:var(--paper,#FBF6EC);
  border:2px solid var(--ink,#171310);border-radius:8px;box-shadow:4px 4px 0 var(--ink,#171310);
  padding:16px;display:flex;flex-direction:column;gap:10px}
.sheet-h{font-family:var(--display);font-weight:700;font-size:16px}
.sheet-p{font-size:13.5px;line-height:1.45;color:var(--ink-2,#4A423A)}
.sheet-t{width:100%;box-sizing:border-box;font:13px/1.45 var(--body);
  color:var(--ink,#171310);background:#fff;border:1px solid var(--line,#C9BCA2);
  border-radius:4px;padding:8px;resize:none}
@media (min-width:560px){.sheet-back{align-items:center}}

/* ── «Бот не зможе вам написати» ────────────────────────────────
   Єдине місце в застосунку покупця, де ми говоримо про проблему,
   а не про річ. Тому помітне, але не червоне: людина нічого поганого
   не зробила, просто відмовила у вікні, яке миготнуло під час зйомки. */
.warn{display:flex;flex-direction:column;gap:8px;margin:12px 0;padding:12px 14px;
  border:2px solid var(--ink,#171310);border-radius:4px;background:#F6E2DA}
.warn b{font:700 14.5px/1.3 var(--body)}
.warn span{font-size:13px;line-height:1.45;color:var(--ink-2,#4A423A)}
.warn .btn{min-height:44px}

/* ═══════════════════════════════════════════════════════════════
   0.2.0 — «Ярмарка Україна»: гама погоджених макетів (02.10.2026)
   Шар поверх стилів Wish List: розмітка й поведінка ті самі.
   ═══════════════════════════════════════════════════════════════ */
h1{font:600 28px/1.08 var(--display);letter-spacing:.02em;text-transform:uppercase}
h2{font:600 21px/1.15 var(--display);letter-spacing:.02em;text-transform:uppercase}
.hint{font-size:14px}

/* Порожня обкладинка — синя з орнаментом з ромбів. */
.cover{background:var(--acc)}
.cover::after{inset:16px var(--pad) auto var(--pad);height:10px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='10'%3E%3Cpath fill='%23E4B23C' d='M5 0l5 5-5 5-5-5z'/%3E%3Cpath fill='%23FFFFFF' d='M21 0l5 5-5 5-5-5z'/%3E%3C/svg%3E") left center/32px 10px repeat-x}
.logo{border:2px solid #fff;background:var(--ink);color:#fff;border-radius:8px}
.logo::after{font:600 28px/1 var(--display)}
.market{background:var(--acc-soft);color:#1F4670;border-radius:4px;letter-spacing:.06em;
  font:700 11.5px/1.2 var(--body);padding:6px 10px}
.market.off{background:#F1EBDA;color:#4A4F5B}
.steps b{background:var(--ink);color:#fff;font:600 13px/1 var(--display)}

.btn{min-height:58px;border:1.5px solid var(--ink);font:600 16px/1 var(--body);letter-spacing:0}
.btn.primary{background:var(--acc);border-color:var(--acc);color:#fff}
.btn.primary:disabled{background:#E9E3D3;border-color:#E9E3D3;color:#8A8E98}
.btn.ghost{background:#fff;min-height:50px;font-size:15px}
.btn:active,.btn.primary:active{transform:none;box-shadow:none}
.btn.primary:active{background:#1F4670}

.dropzone{border:1.5px dashed #C9C0AC;border-radius:8px;background:#FBF8F0}
.preview,.vbody img{border:1px solid var(--line);border-radius:8px;background:#F1EBDA}
.card{border:1px solid var(--line);border-radius:8px}
.card-open img{border-radius:6px;background:#F1EBDA}
.card .t{font:600 16px/1.2 var(--display);letter-spacing:.02em;text-transform:uppercase}
.card-write{border:0;border-radius:6px;color:#fff}
.vmeta .t{font:600 20px/1.15 var(--display);letter-spacing:.02em;text-transform:uppercase}

.sheet-back{background:rgba(31,36,48,.55)}
.sheet{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:none}
.sheet-h{font:600 18px/1.2 var(--display);letter-spacing:.02em;text-transform:uppercase}
.sheet-t{border:1.5px solid var(--ink);border-radius:6px}
.warn{border:0;border-radius:8px;background:#FBF0D2;color:#7A5810}
.warn span{color:#7A5810}
.warn .btn{min-height:44px;font-size:14px}