/* ANNUKO — витрина мини-приложения.

   Оформление снято с annuko.ru, а не придумано: чёрный фон rgb(0,0,0),
   белый текст, нулевое скругление везде, заголовок карточки 13 px
   прописными, кадр товара 356 на 481 (отношение 1 к 1.35), цена
   с пробелом в разряде. Шрифт у них SuisseIntl, он платный, поэтому
   берём системный гротеск: на айфоне это Helvetica Neue, она же ближайший
   родственник Suisse, но свободного Suisse нет, поэтому берём Inter.
   Он лежит рядом с приложением (fonts.css), а не на Google Fonts:
   внешний <link> на шрифт блокирует первую отрисовку, и ровно на этом
   у нас однажды уже встало демо белым экраном. */


:root{
  --bg:#000;
  --ink:#fff;
  --ink-2:rgba(255,255,255,.62);  /* подписи, размеры в наличии */
  --ink-3:rgba(255,255,255,.34);  /* распроданное, сноски */
  --line:rgba(255,255,255,.16);
  --fill:rgba(255,255,255,.07);

  --pad:14px;                      /* боковое поле. 14, а не 16: на узком
                                      экране две колонки по 16 оставляют
                                      кадру меньше 160 px */
  --gap:3px;                       /* шов между карточками. У них сетка
                                      почти встык, воздух даёт сама съёмка */
  --hd:52px;                       /* высота строки шапки без учёта вырезов */
  --tabs:42px;

  /* ПОЛНЫЙ ЭКРАН. Две разные величины, и их нельзя путать:
     safe-area — вырез и «чёлка» устройства;
     content-safe-area — полоса, которую сверху занимают собственные
     кнопки телеграма (закрыть и меню) в полноэкранном режиме.
     Обе приезжают из app.js, потому что переменные --tg-* есть только
     с Bot API 8.0, а на старых клиентах их нет вовсе. */
  --safe-top:0px;
  --safe-bottom:0px;
  --tg-top:0px;

  --top:calc(var(--safe-top) + var(--tg-top));
  --bottom:calc(var(--safe-bottom) + 12px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html,body{margin:0;padding:0;background:var(--bg)}

body{
  min-height:100dvh;
  color:var(--ink);
  font:400 15px/1.35 Inter,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  letter-spacing:.01em;
  /* Горизонтального хода у мини-приложения быть не должно: случайный свайп
     вбок телеграм понимает как закрытие */
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

/* ──────────── ШАПКА ──────────── */

.hd{
  position:fixed; inset:0 0 auto 0; z-index:30;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:8px;
  /* Отступ сверху = вырез устройства + полоса кнопок телеграма.
     Без второго слагаемого знак ANNUKO в полноэкранном режиме лезет
     ровно под крестик закрытия */
  padding:calc(var(--top) + 8px) var(--pad) 8px;
  min-height:calc(var(--top) + var(--hd));
  background:var(--bg);
}

/* Человек слева: кружок и имя из телеграма. Нужен, чтобы вошедший
   сразу видел, что приложение его узнало */
.who{display:flex;align-items:center;gap:8px;min-width:0;justify-self:start}
.ava{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%;
  background:var(--fill) center/cover no-repeat;
  display:grid; place-items:center;
  font-size:11px; font-weight:500; color:var(--ink-2);
  overflow:hidden;
}
.who-name{
  font-size:12px; color:var(--ink-2);
  max-width:84px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Знак держим по высоте, ширину считает отношение сторон самого контура
   (623 на 109). Задавать обе величины нельзя: при округлении знак плющит */
.mark{display:block;color:var(--ink);line-height:0}
.mark svg{height:13px;width:auto;display:block}

.hd-btn{justify-self:end;display:grid;place-items:center;width:32px;height:32px;color:var(--ink)}

/* ──────────── РАЗДЕЛЫ ──────────── */

.tabs{
  position:fixed; z-index:29; left:0; right:0;
  top:calc(var(--top) + var(--hd));
  display:flex; gap:18px; overflow-x:auto;
  padding:0 var(--pad); height:var(--tabs);
  align-items:center;
  background:var(--bg);
  scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  flex:0 0 auto; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); padding:4px 0; white-space:nowrap;
  border-bottom:1px solid transparent;
}
.tab[aria-current="true"]{color:var(--ink);border-bottom-color:var(--ink)}

/* ──────────── СЕТКА ──────────── */

.wrap{padding-top:calc(var(--top) + var(--hd) + var(--tabs))}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);padding:0 var(--pad)}
@media (min-width:620px){ .grid{grid-template-columns:repeat(3,1fr)} }
@media (min-width:900px){ .grid{grid-template-columns:repeat(4,1fr)} }

/* Карточка — сетка из трёх строк: кадр, название, цена.

   Именно сетка, а не обычный поток: внутренности лежат в <button>, а там
   span по умолчанию строчные, слипаются в одну строку и подпись с ценой
   уезжает под кадр. Отдельно фиксируем высоту названия в две строки:
   иначе товар с длинным именем толкает соседа по ряду вниз и сетка
   расходится ступенькой. */
.card{display:grid;grid-template-rows:auto auto auto;width:100%;text-align:left}
.ph{position:relative;aspect-ratio:356/481;background:var(--fill);overflow:hidden}
.ph img{width:100%;height:100%;object-fit:cover}

/* Плашка «распродано» поверх кадра. Та же логика, что у них:
   товар из витрины не убираем, но и купить не даём */
.out{
  position:absolute;inset:auto 0 0 0;padding:6px 8px;
  background:rgba(0,0,0,.72);
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
}

.ttl{
  margin:8px 0 3px;font-size:12px;line-height:1.3;text-transform:uppercase;
  letter-spacing:.02em;
  /* Ровно две строки у всех: ряд остаётся ровным независимо от длины имени */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:calc(2 * 1.3em);
}
.prc{margin:0 0 20px;font-size:12px;letter-spacing:.02em;color:var(--ink-2)}

.foot{padding:28px var(--pad) calc(var(--bottom) + 76px);margin:0;font-size:11px;line-height:1.5;color:var(--ink-3)}

/* ──────────── ЛИСТ ──────────── */

.sheet{
  position:fixed;inset:0;z-index:50;
  background:var(--bg);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  transform:translateY(100%);
  transition:transform .26s cubic-bezier(.32,.72,0,1);
  visibility:hidden;
}
.sheet.on{transform:none;visibility:visible}
@media (prefers-reduced-motion:reduce){ .sheet{transition:none} }

.sheet-in{padding:calc(var(--top) + 8px) 0 calc(var(--bottom) + 92px)}

.sheet-top{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:0 var(--pad) 12px;
}
.sheet-ttl{font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.x{width:32px;height:32px;display:grid;place-items:center;font-size:20px;line-height:1;color:var(--ink-2)}

/* Галерея листом вбок: вертикальной лентой карточка превращается
   в бесконечную прокрутку до размеров */
.gal{display:flex;gap:2px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.gal::-webkit-scrollbar{display:none}
.gal img{flex:0 0 86%;aspect-ratio:356/481;object-fit:cover;scroll-snap-align:center}
.gal img:only-child{flex-basis:100%}

.info{padding:16px var(--pad) 0}
.info h2{margin:0;font-size:15px;line-height:1.3;text-transform:uppercase;font-weight:400}
.info .p{margin:6px 0 0;font-size:15px;color:var(--ink-2)}
.desc{margin:16px 0 0;font-size:13px;line-height:1.55;color:var(--ink-2);white-space:pre-line}

.lbl{margin:22px 0 8px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

.sizes{display:flex;flex-wrap:wrap;gap:6px}
.sz{min-width:56px;padding:11px 12px;border:1px solid var(--line);font-size:13px;text-align:center}
.sz[aria-pressed="true"]{background:var(--ink);color:#000;border-color:var(--ink)}
/* Распроданный размер видно, но нажать нельзя: так человек понимает,
   что вещь существует в его размере и может вернуться */
.sz:disabled{color:var(--ink-3);border-color:rgba(255,255,255,.08);text-decoration:line-through;cursor:default}
.left{margin:10px 0 0;font-size:11px;color:var(--ink-3)}

/* ──────────── НИЖНЯЯ КНОПКА ──────────── */

.bar{
  position:fixed;z-index:60;left:var(--pad);right:var(--pad);
  bottom:var(--bottom);
  height:50px;background:var(--ink);color:#000;
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;
}
/* Непрозрачный серый, а не полупрозрачный --fill: кнопка лежит поверх
   описания товара, и сквозь прозрачный фон текст просвечивал */
.bar:disabled{background:#1c1c1c;color:var(--ink-3)}

/* ──────────── КОРЗИНА ──────────── */

.row{display:flex;gap:12px;padding:14px var(--pad);border-bottom:1px solid var(--line)}
.row img{width:64px;aspect-ratio:356/481;object-fit:cover;flex:0 0 auto}
.row-b{flex:1;min-width:0}
.row-t{font-size:13px;text-transform:uppercase;line-height:1.25}
.row-s{margin-top:4px;font-size:12px;color:var(--ink-3)}
.row-x{align-self:flex-start;font-size:12px;color:var(--ink-3);text-decoration:underline;text-underline-offset:3px}
.sum{display:flex;justify-content:space-between;padding:18px var(--pad);font-size:15px}
.empty{padding:60px var(--pad);text-align:center;font-size:13px;color:var(--ink-3)}

/* ──────────── МЕЛОЧИ ──────────── */

.toast{
  position:fixed;z-index:70;left:50%;bottom:calc(var(--bottom) + 62px);
  transform:translate(-50%,8px);
  padding:10px 16px;background:var(--ink);color:#000;
  font-size:12px;letter-spacing:.04em;text-transform:uppercase;
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;
}
.toast.on{opacity:1;transform:translate(-50%,0)}

.note{
  margin:0;padding:10px var(--pad);
  background:var(--fill);font-size:11px;line-height:1.5;color:var(--ink-2);
}