/* ===== Шрифты vozrastay.ru ===== */
@font-face{
  font-family:Etelka;
  src:url(https://vozrastay.ru/assets/0a32_EtelkaWideTextPro.woff2) format('woff2');
  font-display:swap;
}
@font-face{
  font-family:Postah;
  src:url(https://vozrastay.ru/assets/a1c7_pastah-_trial_-bold.woff2) format('woff2');
  font-weight:700;font-display:swap;
}

/* ===== Палитра ===== */
:root{
  --orange:#E9972D; --orange-d:#DF8318; --orange-l:#F2A93B;
  --green:#7CB41C;  --green-d:#6a9a15;
  --dark:#1B1B1B;   --muted:#6b6257;
  --bg:#F6F3EE;     --line:#E2DACE;
  --red:#D93025;
  --max:1180px; --pad:clamp(12px,3vw,20px);
  --r-sm:12px; --r-md:16px;
  --shadow-soft:0 4px 22px rgba(0,0,0,.05);
  --shadow-hover:0 10px 30px rgba(233,151,45,.18);
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:16px/1.5 Etelka,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--dark);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
button{font:inherit;cursor:pointer}
h1,h2,h3{
  font-family:Postah,Etelka,sans-serif;
  text-transform:uppercase; letter-spacing:.5px;
  line-height:1.15; margin:0;
}

/* ===== HERO ===== */
.hero{
  position:relative;
  background:linear-gradient(135deg,#F2A93B,#DF8318);
  color:#fff;
  padding:clamp(20px,4vw,34px) 0 clamp(28px,5vw,46px);
  overflow:hidden;
}
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:8px;height:6px;
  background:radial-gradient(circle,rgba(255,255,255,.5) 2.4px,transparent 3px);
  background-size:22px 6px;background-repeat:repeat-x;
  pointer-events:none;
}
.hero__in{
  max-width:var(--max); margin:0 auto; padding-inline:var(--pad);
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.hero h1{
  font-size:clamp(28px,6vw,56px); color:#fff;
  text-shadow:2px 2px 0 rgba(0,0,0,.14); margin:0;
}
.hero p{
  margin:6px 0 0; font-size:clamp(13px,1.8vw,16px);
  opacity:.95; max-width:560px;
}
.hero__cart{
  position:relative;
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 20px;
  border-radius:999px;
  border:1.5px solid rgba(255,255,255,.5);
  background:rgba(255,255,255,.16);
  color:#fff; font-weight:700; font-size:14px;
  backdrop-filter:blur(6px);
  transition:transform .15s var(--ease),background .2s;
  white-space:nowrap;
}
.hero__cart:hover{transform:translateY(-1px);background:rgba(255,255,255,.24)}
.hero__cart.is-bump{animation:cartBump .45s var(--ease)}
@keyframes cartBump{
  0%{transform:scale(1)}
  35%{transform:scale(1.14)}
  70%{transform:scale(.96)}
  100%{transform:scale(1)}
}
.hero__cart svg{width:22px;height:22px}
.hero__count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:24px;height:24px;padding:0 7px;
  border-radius:999px;
  background:var(--green);color:#fff;
  font-size:13px;font-weight:800;
}

/* ===== MAIN ===== */
main{
  max-width:var(--max); margin:0 auto;
  padding:22px var(--pad) 120px;
  /* Зарезервированная высота — чтобы при переключении на короткие
     категории страница не «прыгала» и скроллбар не исчезал. */
  min-height:calc(100vh - 180px);
}

/* ===== ЧИПЫ КАТЕГОРИЙ ===== */
.chips{
  display:flex; gap:8px;
  overflow-x:auto;
  padding:2px 2px 14px;
  margin:0 -2px;
  scrollbar-width:none;
}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;
  font-weight:700; font-size:13.5px;
  background:#fff;
  border:1.5px solid var(--line);
  color:var(--muted);
  border-radius:999px;
  padding:10px 18px;
  transition:background .18s var(--ease),border-color .18s,color .18s,box-shadow .18s;
  /* фиксированная высота — не дёргается при смене ширины активного чипа */
  height:42px;
  line-height:1;
}
.chip:hover{border-color:var(--orange);color:var(--orange)}
.chip.is-on{
  background:var(--orange);
  border-color:var(--orange);
  color:#fff;
  box-shadow:0 6px 16px rgba(233,151,45,.35);
}

/* ===== СЕТКА ТОВАРОВ ===== */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:14px;
  /* резерв высоты — чтобы низ страницы не подпрыгивал при смене категории */
  min-height:380px;
  align-content:start;
}
@media(max-width:520px){
  .grid{grid-template-columns:repeat(2,1fr);gap:10px;min-height:340px}
}

.card{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:16px 16px 62px;
  min-height:180px;
  text-align:left;
  box-shadow:var(--shadow-soft);
  transition:transform .15s var(--ease),
             box-shadow .2s,
             border-color .2s;
  cursor:pointer;
  /* никакой анимации появления — карточки видны сразу */
}
.card:hover{
  transform:translateY(-2px);
  border-color:var(--orange);
  box-shadow:var(--shadow-hover);
}
.card:active{transform:scale(.97)}

/* короткая реакция карточки на клик, пока точка летит в корзину */
.card.is-pressed{
  transform:scale(.95);
  transition:transform .12s var(--ease);
  border-color:var(--green);
}

.card__tag{
  display:inline-block;
  font-size:11px;font-weight:800;letter-spacing:.4px;
  text-transform:uppercase;
  padding:3px 9px;
  border-radius:999px;
  background:rgba(233,151,45,.14);
  color:var(--orange);
  margin-bottom:10px;
}
.card__tag.kitchen{background:rgba(124,180,28,.15);color:var(--green-d)}

.card__name{
  font-size:15.5px; font-weight:700;
  line-height:1.25; color:var(--dark);
  margin:0 0 6px; word-break:break-word;
}
.card__price{
  position:absolute; bottom:16px; left:16px;
  font-size:16px; font-weight:800; color:var(--dark);
}
.card__add{
  position:absolute; bottom:12px; right:12px;
  width:40px; height:40px;
  border-radius:50%; border:0;
  background:var(--green); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:700; line-height:1;
  transition:transform .12s var(--ease),background .15s;
  box-shadow:0 4px 12px rgba(124,180,28,.3);
}
.card__add:hover{background:var(--green-d);transform:translateY(-1px) scale(1.05)}
.card__add:active{transform:scale(.9)}

/* ===== FLY-DOT — кружок, летящий в корзину ===== */
.fly-dot{
  position:fixed;
  z-index:100;
  pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:linear-gradient(135deg,#7CB41C,#6a9a15);
  color:#fff;
  font-size:18px;
  font-weight:800;
  line-height:1;
  box-shadow:0 8px 22px rgba(124,180,28,.5);
  transition:transform .65s cubic-bezier(.4,.05,.5,1),
             opacity .35s ease .3s;
  will-change:transform,opacity;
  top:0; left:0;
}

/* ===== DRAWER (корзина) ===== */
.scrim{
  position:fixed;inset:0;
  background:rgba(27,27,27,.45);
  backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;
  transition:opacity .25s;
  z-index:40;
}
.scrim.is-on{opacity:1;pointer-events:auto}

.drawer{
  position:fixed; top:0; right:0; bottom:0;
  width:min(440px,92vw);
  background:var(--bg);
  transform:translateX(100%);
  transition:transform .3s var(--ease);
  z-index:50;
  display:flex; flex-direction:column;
  box-shadow:-14px 0 40px rgba(0,0,0,.12);
}
.drawer.is-on{transform:translateX(0)}
.drawer__head{
  padding:18px var(--pad);
  display:flex;justify-content:space-between;align-items:center;
  border-bottom:1px solid var(--line);
}
.drawer__head h2{font-size:20px;color:var(--dark)}
.drawer__close{
  width:40px;height:40px;border-radius:50%;
  border:1.5px solid var(--line);
  background:#fff;color:var(--muted);
  font-size:18px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .15s,color .15s,transform .15s;
}
.drawer__close:hover{border-color:var(--orange);color:var(--orange);transform:rotate(90deg)}

.drawer__body{
  flex:1; overflow-y:auto;
  padding:14px var(--pad);
}
.drawer__empty{
  text-align:center;color:var(--muted);
  padding:60px 0; font-size:15px;
}
.drawer__empty svg{width:64px;height:64px;opacity:.35;margin-bottom:12px}

.item{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center; gap:10px;
  padding:12px 0;
  border-bottom:1px solid var(--line);
}
.item__name{font-weight:700;font-size:15px;line-height:1.3}
.item__meta{color:var(--muted);font-size:13px;margin-top:2px}
.item__qty{
  display:inline-flex;align-items:center;gap:6px;
  background:#fff;border:1.5px solid var(--line);
  border-radius:999px;padding:3px;
}
.item__qty button{
  width:32px;height:32px;border:0;border-radius:50%;
  background:transparent;color:var(--dark);
  font-size:18px;font-weight:700;line-height:1;
  transition:background .15s,color .15s;
}
.item__qty button:hover{background:var(--bg);color:var(--orange)}
.item__qty span{min-width:20px;text-align:center;font-weight:800;font-size:15px}

.drawer__foot{
  padding:16px var(--pad) max(16px,env(safe-area-inset-bottom));
  background:#fff;
  border-top:1px solid var(--line);
  box-shadow:0 -8px 24px rgba(0,0,0,.04);
}
.drawer__sum{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:12px;
}
.drawer__sum b{font-size:22px}
.drawer__sum span{color:var(--muted);font-size:14px}

.field{margin:0 0 10px;display:flex;flex-direction:column}
.field label{
  font-size:12.5px;font-weight:700;
  color:var(--muted);margin-bottom:5px;
  text-transform:uppercase;letter-spacing:.5px;
}
.field input,
.field textarea{
  font:inherit;font-size:16px;
  padding:12px 14px;
  border:1.5px solid var(--line);
  border-radius:var(--r-sm);
  background:#fff;
  min-height:48px; outline:0;
  transition:border-color .15s,box-shadow .15s;
  color:var(--dark); resize:none;
}
.field input:focus,
.field textarea:focus{
  border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(233,151,45,.18);
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:800; padding:15px 24px;
  border-radius:var(--r-sm); border:0;
  transition:transform .12s var(--ease),filter .15s,opacity .15s;
  min-height:52px; font-size:15.5px;
}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn:not(:disabled):hover{transform:translateY(-1px);filter:brightness(1.05)}
.btn:not(:disabled):active{transform:translateY(0) scale(.99)}
.btn--primary{background:var(--green);color:#fff;width:100%}

/* ===== ЭКРАН ПОДТВЕРЖДЕНИЯ ===== */
.done{
  position:fixed;inset:0;
  background:linear-gradient(135deg,#F2A93B,#DF8318);
  color:#fff; z-index:60;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  opacity:0;pointer-events:none;
  transition:opacity .35s var(--ease);
}
.done.is-on{opacity:1;pointer-events:auto}
.done__in{
  text-align:center; max-width:520px;
  transform:translateY(14px);
  transition:transform .5s var(--ease);
}
.done.is-on .done__in{transform:translateY(0)}
.done__check{
  width:88px;height:88px;border-radius:50%;
  background:rgba(255,255,255,.22);
  border:2px solid rgba(255,255,255,.5);
  display:inline-flex;align-items:center;justify-content:center;
  margin-bottom:20px;
  animation:donePulse 1.6s var(--ease) infinite;
}
@keyframes donePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.4)}
  50%{box-shadow:0 0 0 22px rgba(255,255,255,0)}
}
.done__check svg{width:44px;height:44px}
.done h1{
  font-size:clamp(28px,5.5vw,42px); color:#fff; margin-bottom:8px;
  text-shadow:2px 2px 0 rgba(0,0,0,.14);
}
.done__number{
  font-family:Postah,Etelka,sans-serif;
  font-size:clamp(72px,17vw,132px);
  font-weight:800; line-height:1;
  letter-spacing:.02em;
  margin:20px 0;
  text-shadow:4px 4px 0 rgba(0,0,0,.18);
}
.done p{opacity:.95;font-size:clamp(14px,2vw,17px);margin:0 0 22px}
.done__btn{
  background:#fff;color:var(--orange-d);
  padding:16px 32px;border-radius:999px;border:0;
  font-weight:800;font-size:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.15);
}
.done__btn:hover{transform:translateY(-2px) scale(1.02)}

/* ===== TOAST ===== */
.toasts{
  position:fixed;left:50%;bottom:24px;
  transform:translateX(-50%);
  z-index:70;
  display:flex;flex-direction:column;gap:8px;
  pointer-events:none;
}
.toast{
  background:var(--dark);color:#fff;
  padding:12px 20px;border-radius:999px;
  font-weight:700;font-size:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  animation:toastIn .25s var(--ease);
  max-width:80vw;
}
.toast.warn{background:var(--red)}
.toast.good{background:var(--green)}
@keyframes toastIn{from{opacity:0;transform:translateY(8px) scale(.95)}}

/* ===== FAB — плавающая кнопка корзины внизу ===== */
.fab{
  position:fixed;
  left:50%; bottom:calc(16px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(140%);
  background:var(--green); color:#fff;
  border:0; border-radius:999px;
  padding:14px 24px;
  font-weight:800; font-size:15.5px;
  box-shadow:0 10px 30px rgba(124,180,28,.4);
  display:flex; align-items:center; gap:10px;
  z-index:30;
  transition:transform .3s var(--ease),background .15s;
}
.fab.is-on{transform:translateX(-50%) translateY(0)}
.fab:hover{background:var(--green-d)}
.fab svg{width:20px;height:20px}

/* ===== Скелетон (только на время первой загрузки) ===== */
.sk{
  background:#fff;border:1px solid var(--line);
  border-radius:var(--r-md);
  min-height:180px;
  overflow:hidden;position:relative;
}
.sk::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(233,151,45,.06),transparent);
  animation:sk 1.4s linear infinite;
}
@keyframes sk{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* ===== Адаптив ===== */
@media(min-width:760px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px}
  .card{min-height:210px;padding:20px 20px 72px}
  .card__name{font-size:16.5px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
  .fly-dot{display:none}
}

/* ---------- картинки позиций (v2.2) ----------
   Квадрат во всю ширину карточки над названием. Карточка с картинкой
   теряет верхний отступ, чтобы фото прилегало к скруглённому краю. */
.card.has-pic{padding-top:0}
.card__pic{
  margin:0 -16px 12px;
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:var(--r-md) var(--r-md) 0 0;
  background:#F6F1E8;
}
.card__pic img{
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .25s var(--ease);
}
.card:hover .card__pic img{transform:scale(1.04)}
@media (min-width:768px){
  .card__pic{margin:0 -20px 14px}
}