/* PIMS — планшетное меню (iPad, только ознакомление)
   Токены и шрифты бренда pimstea.com. Веса Proxima Nova: 300/400/700/800
   (Medium 500 и Semibold 600 в наборе нет — не использовать). */

@font-face{font-family:'Proxima Nova';font-weight:300;font-style:normal;font-display:swap;src:url('../fonts/ProximaNova-Light.woff2') format('woff2')}
@font-face{font-family:'Proxima Nova';font-weight:400;font-style:normal;font-display:swap;src:url('../fonts/ProximaNova-Reg.woff2') format('woff2')}
@font-face{font-family:'Proxima Nova';font-weight:700;font-style:normal;font-display:swap;src:url('../fonts/ProximaNova-Bold.woff2') format('woff2')}
@font-face{font-family:'Proxima Nova';font-weight:800;font-style:normal;font-display:swap;src:url('../fonts/ProximaNova-Xbold.woff2') format('woff2')}
@font-face{font-family:'TrashHand';font-weight:400;font-style:normal;font-display:swap;src:url('../fonts/TrashHand.woff2') format('woff2')}

:root{
  --bg:#ECECEC;          /* SILVER — фон зала */
  --card:#FFFFFF;
  --ink:#141414;         /* GRAPHITE — заголовки/названия */
  --soft:#62686E;        /* вторичный текст, состав */
  --accent:#EA8D79;      /* PEACH */
  --peach-l:#FFE2D8;     /* LIGHT PEACH */
  --cream:#FFF3D6;       /* CREAM */
  --dark:#1D1C1A;        /* активная вкладка */
  --line:rgba(13,13,13,.12);
  --hot:#CE3F3E; --warm:#D0697D; --cold:#387EC1;
  --radius:18px;
  --font:'Proxima Nova','Helvetica Neue',Arial,sans-serif;
  --brand:'TrashHand','Proxima Nova',sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:clamp(14px,1.98vw,19px)}
html,body{height:100%}
body{
  font-family:var(--font);color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow:hidden;
}
img{max-width:100%;display:block}

.app{position:relative;z-index:1;height:100vh;height:100dvh;display:flex;flex-direction:column}

/* фирменные дудлы (как в секции #collabs на сайте) */
.pat-layer{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.pat-layer img{position:absolute;display:block;height:auto}

/* ---------- Верхняя панель: бренд + вкладки ---------- */
.topbar{
  flex:0 0 auto;display:flex;align-items:flex-start;gap:1.1rem;
  padding:1.05rem 1.5rem .9rem;background:var(--bg);
  border-bottom:1px solid var(--line);
}
.brand-logo{height:1.7rem;width:auto;display:block;flex:0 0 auto;padding-top:.35rem;user-select:none}
.tabs{
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;flex:1 1 auto;
  justify-content:flex-end;
}
.tab{
  flex:0 0 auto;font-family:var(--font);font-weight:700;font-size:.95rem;line-height:1;
  color:var(--ink);background:var(--card);border:1.5px solid var(--line);
  border-radius:999px;padding:.62rem 1.05rem;white-space:nowrap;cursor:pointer;
  transition:background .18s,color .18s,border-color .18s,transform .08s;
}
.tab:hover{border-color:rgba(13,13,13,.28)}
.tab:active{transform:scale(.97)}
.tab.on{background:var(--dark);color:var(--bg);border-color:var(--dark)}

/* ---------- Область экранов ---------- */
.stagewrap{position:relative;flex:1 1 auto;min-height:0}
.screen{
  position:absolute;inset:0;display:none;flex-direction:column;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:1.4rem 1.5rem 2.2rem;
}
.screen.on{display:flex}
.screen::-webkit-scrollbar{width:8px}
.screen::-webkit-scrollbar-thumb{background:rgba(13,13,13,.16);border-radius:8px}

.head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1.15rem}
.title{font-family:var(--font);font-weight:800;font-size:1.95rem;letter-spacing:.01em;color:var(--ink);line-height:1.02;text-wrap:balance}
.grouptitle{font-family:var(--font);font-weight:800;font-size:1.5rem;color:var(--ink);margin:1.4rem 0 1rem}

.temp{display:flex;gap:.9rem;flex:0 0 auto;padding-top:.35rem}
.temp div{font-size:.62rem;font-weight:700;text-transform:uppercase;line-height:1.15;letter-spacing:.01em}
.temp b{display:block;font-size:.78rem;font-weight:800}
.temp .hot{color:var(--hot)} .temp .warm{color:var(--warm)} .temp .cold{color:var(--cold)}

/* ---------- «Все меню»: категории подряд ---------- */
.cat+.cat{margin-top:2rem;padding-top:1.7rem;border-top:1px solid var(--line)}

/* ---------- Сетка карточек ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.15rem;align-items:stretch}

.card{
  position:relative;
  background:var(--card);border-radius:var(--radius);
  padding:1.05rem 1.05rem 1.15rem;
  display:flex;flex-direction:column;
  box-shadow:0 14px 30px -22px rgba(20,20,20,.35);
}
.nov{
  position:absolute;top:.85rem;left:.85rem;z-index:2;
  background:var(--accent);color:var(--ink);
  font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  padding:.3rem .72rem;border-radius:999px;white-space:nowrap;
}
.card .ph{
  height:11rem;display:flex;align-items:flex-end;justify-content:center;
  margin-bottom:.75rem;
}
.card .ph img{height:100%;width:auto;object-fit:contain;object-position:bottom center}
.name{font-family:var(--font);font-weight:800;font-size:1.18rem;line-height:1.06;color:var(--ink);margin-bottom:.4rem}
.comp{font-family:var(--font);font-weight:400;font-size:.86rem;line-height:1.3;color:var(--soft);flex:1 1 auto}
.badge{
  align-self:flex-start;margin-top:.6rem;
  font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  color:#8a5a3f;background:var(--peach-l);border-radius:999px;padding:.28rem .7rem;
}
.pricewrap{margin-top:.7rem;display:flex;flex-direction:column;gap:.7rem}
.pricegrp{display:flex;flex-direction:column;align-items:flex-start;gap:.45rem}
.pricegrp .badge{margin:0}
.prices{display:flex;gap:1.1rem}
.pv{display:flex;flex-direction:column;line-height:1}
.pv .vol{font-size:.68rem;color:var(--soft);margin-bottom:.15rem}
.pv b{font-size:1.18rem;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}

.foot{margin-top:1.1rem;font-size:.76rem;color:var(--soft);line-height:1.3}

/* ---------- Топпинги ---------- */
.top-cols{columns:2;column-gap:1.15rem}
.top-group{
  break-inside:avoid;background:var(--card);border-radius:var(--radius);
  padding:1.05rem 1.2rem 1.05rem;margin:0 0 1.15rem;
  box-shadow:0 14px 30px -22px rgba(20,20,20,.35);
}
.top-row{display:flex;align-items:center;gap:.8rem;padding:.4rem 0}
.top-ball{width:3.1rem;height:3.1rem;object-fit:contain;flex:0 0 auto}
.top-name{font-family:var(--font);font-weight:800;font-size:1.05rem;text-transform:uppercase;
  letter-spacing:.01em;color:var(--ink);line-height:1.08}
.top-name i{font-style:normal;color:var(--soft);font-weight:700;margin-right:.55rem}
.top-price{
  margin-top:.7rem;background:#E7E7E6;border-radius:999px;
  padding:.55rem 1.15rem;text-align:right;
  font-weight:800;font-size:1.05rem;color:var(--ink);font-variant-numeric:tabular-nums;
}

/* ---------- Новинки (пока промо-заглушка) ---------- */
.novelties{padding-top:2rem}
.nv-note{margin-top:.8rem;color:var(--soft);font-size:1rem}

@media (prefers-reduced-motion:reduce){.tab{transition:none}}