/* ==========================================================================
   Meat Gallery — dark gourmet. Палитра один-в-один с приложением
   (lib/core/branding/brands/meat_gallery_brand.dart).
   ========================================================================== */

@font-face {
  font-family: 'InterVar';
  src: url('fonts/inter-subset.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}
/* Курсивный акцент. Брендовые Abuget/ADAM CG Pro не подошли — в них НЕТ
   кириллицы (проверено по cmap), заголовки бы падали на системный фон-бэк. */
@font-face {
  font-family: 'PlayfairIt';
  src: url('fonts/playfair-italic.woff2') format('woff2-variations');
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
}

:root {
  --bg: #0e0c0a;
  --bg2: #161311;
  --s1: #1e1a16;
  --s2: #28221c;
  --s3: #332b23;
  --gold: #cb9842;
  --gold-br: #e3b45c;
  --gold-dim: #a77c30;
  --terra: #cf4a43;
  --text: #f4f1ec;
  --text2: #bdb4a8;
  --muted: #837a6d;
  --line: rgba(203, 152, 66, .22);
  --wrap: 1240px;
  --r: 18px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'InterVar', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* height:auto — иначе HTML-атрибут height (presentational hint) бьёт aspect-ratio */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--gold); color: #1a1410; padding: 10px 18px;
}
.skip:focus { left: 12px; top: 12px; }

/* ------------------------------- typography ------------------------------ */
.kicker {
  margin: 0 0 14px;
  font-size: 12px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold);
}
.h2 {
  margin: 0 0 16px;
  font-size: clamp(30px, 4.4vw, 54px);
  font-weight: 800; line-height: 1.05; letter-spacing: -.02em;
  text-transform: uppercase;
}
.lead { margin: 0; max-width: 62ch; color: var(--text2); font-size: clamp(15px, 1.3vw, 17px); }

/* --------------------------------- buttons ------------------------------- */
.btn {
  --h: 56px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--h); padding: 0 30px; border: 0; border-radius: 999px;
  font: inherit; font-size: 15px; font-weight: 600; letter-spacing: .01em;
  cursor: pointer; white-space: nowrap;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s;
}
.btn--sm { --h: 44px; padding: 0 22px; font-size: 14px; }
.btn--wide { width: 100%; }
.btn--gold {
  color: #1c1509;
  background: linear-gradient(135deg, var(--gold-br), var(--gold) 55%, var(--terra) 160%);
  box-shadow: 0 10px 30px -12px rgba(203, 152, 66, .65);
}
.btn--gold:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -14px rgba(203, 152, 66, .8); }
.btn--ghost {
  color: var(--text); background: rgba(244, 241, 236, .04);
  border: 1px solid var(--line); backdrop-filter: blur(6px);
}
.btn--ghost:hover { border-color: var(--gold); background: rgba(203, 152, 66, .1); }

/* --------------------------------- header -------------------------------- */
.hdr {
  position: fixed; inset: 0 0 auto; z-index: 50;
  padding: 14px 0;
  transition: background-color .35s var(--ease), padding .35s var(--ease), border-color .35s;
  border-bottom: 1px solid transparent;
}
.hdr.is-stuck {
  background: rgba(14, 12, 10, .82);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--line);
  padding: 8px 0;
}
.hdr__in { display: flex; align-items: center; gap: 28px; }
.hdr__logo img { width: 118px; height: auto; }
.nav { display: flex; gap: 26px; margin-left: auto; font-size: 14px; color: var(--text2); }
.nav a { position: relative; padding: 6px 0; transition: color .2s; }
.nav a::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px;
  background: var(--gold); transition: width .3s var(--ease);
}
.nav a:hover { color: var(--text); }
.nav a:hover::after { width: 100%; }
.hdr__cta { display: flex; align-items: center; gap: 16px; }
.tel { font-size: 15px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; }
.tel:hover { color: var(--gold-br); }
.burger { display: none; }

/* ---------------------------------- hero --------------------------------- */
.hero {
  position: relative; min-height: 100svh; overflow: hidden;
  padding: clamp(120px, 14vh, 180px) 0 clamp(40px, 6vh, 70px);
  display: flex; flex-direction: column; justify-content: center; gap: clamp(34px, 5vh, 60px);
  background: var(--bg);
  view-timeline-name: --hero; view-timeline-axis: block;
}
.hero__glow {
  position: absolute; inset: -20% -10% auto -30%; height: 120%;
  background:
    radial-gradient(48% 42% at 22% 34%, rgba(203, 152, 66, .18), transparent 70%),
    radial-gradient(40% 40% at 78% 68%, rgba(207, 74, 67, .12), transparent 72%);
  pointer-events: none;
}
.hero__in {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.02fr .98fr; align-items: center;
  gap: clamp(28px, 5vw, 64px);
}
.hero__h1 { margin: 0 0 22px; font-weight: 800; line-height: .92; letter-spacing: -.03em; }
.hero__l1, .hero__l2 { display: block; text-transform: uppercase; font-size: clamp(38px, 5.6vw, 82px); }
.hero__l1 { color: var(--text); }
.hero__l2 {
  background: linear-gradient(96deg, var(--gold-br), var(--gold) 45%, var(--gold-dim));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__l3 {
  display: block; margin-top: 2px;
  font-family: 'PlayfairIt', Georgia, serif; font-style: italic;
  font-size: clamp(34px, 4.6vw, 66px);
  font-weight: 500; letter-spacing: -.01em; color: var(--terra);
  text-transform: none;
}
.hero__sub { margin: 0 0 32px; max-width: 46ch; color: var(--text2); font-size: clamp(15px, 1.25vw, 17.5px); }
.hero__btns { display: flex; flex-wrap: wrap; gap: 14px; }

.hero__shot { position: relative; margin: 0; }
.hero__shot img {
  width: 100%; aspect-ratio: 4 / 3.05; object-fit: cover;
  border-radius: 22px; border: 1px solid var(--line);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .95), 0 0 0 1px rgba(244, 241, 236, .04) inset;
}
.hero__shot figcaption {
  position: absolute; left: 18px; bottom: 18px;
  display: grid; gap: 2px; padding: 12px 18px; border-radius: 14px;
  background: rgba(14, 12, 10, .72); backdrop-filter: blur(10px);
  border: 1px solid var(--line);
}
.hero__shot b { font-size: 15px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-br); }
.hero__shot span { font-size: 12.5px; color: var(--text2); }

.hero__stats {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 16px 46px; margin: 0; padding: clamp(20px, 3vh, 30px) 0 0;
  list-style: none; border-top: 1px solid var(--line);
}
.hero__stats li { display: flex; align-items: baseline; gap: 10px; }
.hero__stats b { font-size: clamp(24px, 2.4vw, 34px); font-weight: 800; color: var(--gold-br); letter-spacing: -.02em; }
.hero__stats span { font-size: 13px; color: var(--muted); max-width: 12ch; line-height: 1.25; }

/* -------------------------------- marquee -------------------------------- */
.marquee {
  border-block: 1px solid var(--line); background: var(--bg2);
  overflow: hidden; padding: 16px 0;
}
.marquee__row {
  display: flex; align-items: center; gap: 28px; width: max-content;
  animation: slide 46s linear infinite;
  font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--text2);
}
.marquee i { color: var(--gold); font-style: normal; font-size: 10px; }
@keyframes slide { to { transform: translateX(-50%); } }

/* -------------------------------- sections ------------------------------- */
.sect { padding: clamp(70px, 9vw, 130px) 0; }
.sect__head { max-width: 780px; margin: 0 auto clamp(38px, 5vw, 64px); text-align: center; }
.sect__head .lead { margin: 0 auto; }
.sect__head--left { margin-left: 0; text-align: left; }
.sect__head--left .lead { margin-left: 0; }

/* --------------------------- каталог: раскладка --------------------------- */
.sect--catalog { padding-top: clamp(50px, 6vw, 90px); }
.shop { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: clamp(24px, 3vw, 44px); align-items: start; }
.shop__main { min-width: 0; }
.shop__side { position: sticky; top: 104px; display: grid; gap: 18px; }
.shop__sideT { margin: 0; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.catnav { display: grid; gap: 2px; }
.catnav__i {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px; border: 1px solid transparent; border-radius: 12px; cursor: pointer;
  font: inherit; font-size: 14.5px; color: var(--text2); background: none; text-align: left;
  transition: color .2s, background-color .2s, border-color .2s;
}
.catnav__i i { font-style: normal; font-size: 12.5px; color: var(--muted); }
.catnav__i:hover { color: var(--text); background: rgba(244, 241, 236, .04); }
.catnav__i.is-on { color: var(--text); background: rgba(203, 152, 66, .12); border-color: var(--line); }
.catnav__i.is-on i { color: var(--gold-br); }
.shop__promo {
  display: grid; gap: 10px; padding: 20px; border-radius: 16px;
  background: linear-gradient(150deg, #2a1f14, #17130f 75%); border: 1px solid var(--line);
}
.shop__promo b { font-size: 16px; color: var(--gold-br); }
.shop__promo span { font-size: 13px; color: var(--text2); }
.shop__promo .btn { justify-self: start; }

.pills { display: none; gap: 8px; max-width: 100%; margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; }
.pills::-webkit-scrollbar { display: none; }
.pill {
  flex: 0 0 auto; height: 42px; padding: 0 20px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 14px; color: var(--text2); background: var(--s1); border: 0;
  transition: color .2s, background-color .2s;
}
.pill.is-on { color: #1c1509; font-weight: 600; background: linear-gradient(135deg, var(--gold-br), var(--gold)); }

/* --------------------------------- cards --------------------------------- */
.grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
}
.card {
  display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(180deg, var(--s1), var(--bg2));
  border: 1px solid rgba(244, 241, 236, .06); border-radius: var(--r);
  transition: transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.card:hover {
  transform: translateY(-6px); border-color: var(--line);
  box-shadow: 0 26px 50px -30px rgba(0, 0, 0, .9);
}
.card.is-hidden { display: none; }
.card__img { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--s2); cursor: pointer; }
.card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.card:hover .card__img img { transform: scale(1.07); }
.card__cat {
  position: absolute; left: 12px; top: 12px;
  padding: 6px 12px; border-radius: 999px;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text); background: rgba(14, 12, 10, .68); backdrop-filter: blur(6px);
  border: 1px solid var(--line);
}
.card__body { display: flex; flex-direction: column; gap: 8px; padding: 18px; flex: 1; }
.card__title { margin: 0; font-size: 16.5px; font-weight: 700; line-height: 1.25; cursor: pointer; }
.card__title:hover { color: var(--gold-br); }
.card__ann { margin: 0; flex: 1; font-size: 13.5px; color: var(--text2); }
.card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.card__pricebox { display: grid; gap: 2px; }
.card__w { font-size: 12.5px; color: var(--muted); }
.card__bonus { margin: 0; font-size: 12px; color: var(--gold-dim); }
.price { font-size: 21px; font-weight: 800; color: var(--gold-br); letter-spacing: -.01em; white-space: nowrap; }
.price i { font-style: normal; font-size: 15px; font-weight: 600; color: var(--gold-dim); }

/* золотая круглая «+» — как в приложении */
.addbtn {
  display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 auto;
  border: 0; border-radius: 50%; cursor: pointer; color: #1c1509;
  background: linear-gradient(135deg, var(--gold-br), var(--gold));
  box-shadow: 0 10px 24px -12px rgba(203, 152, 66, .8);
  transition: transform .2s var(--ease), box-shadow .2s;
}
.addbtn:hover { transform: scale(1.08); }
.addbtn:active { transform: scale(.92); }
.addbtn.is-done { background: linear-gradient(135deg, #6cc47a, #43a05a); }

/* -------------------------------- stories -------------------------------- */
.stories { padding: 8px 0 4px; background: var(--bg); }
.stories__in { display: flex; gap: 18px; overflow-x: auto; padding: 6px 24px 10px; scrollbar-width: none; }
.stories__in::-webkit-scrollbar { display: none; }
.story { flex: 0 0 auto; display: grid; justify-items: center; gap: 8px; background: none; border: 0; cursor: pointer; font: inherit; }
.story__ring {
  display: grid; place-items: center; width: 82px; height: 82px; border-radius: 50%; padding: 3px;
  background: conic-gradient(from 140deg, var(--gold-br), var(--terra), var(--gold-dim), var(--gold-br));
  transition: transform .25s var(--ease);
}
.story:hover .story__ring { transform: scale(1.06); }
.story__ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid var(--bg); }
.story__t { font-size: 12.5px; color: var(--text2); max-width: 88px; text-align: center; line-height: 1.2; }

/* --------------------------------- craft --------------------------------- */
.sect--craft { background: linear-gradient(180deg, var(--bg), var(--bg2) 45%, var(--bg)); }
.craft { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 5vw, 76px); align-items: center; }
.facts { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 2px; }
.facts li {
  display: grid; gap: 3px; padding: 18px 0;
  border-top: 1px solid rgba(244, 241, 236, .08);
}
.facts li:last-child { border-bottom: 1px solid rgba(244, 241, 236, .08); }
.facts b { font-size: 16px; }
.facts span { font-size: 14px; color: var(--muted); }
.craft__media { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.craft__media img {
  border-radius: var(--r); border: 1px solid rgba(244, 241, 236, .07);
  aspect-ratio: 3 / 4; object-fit: cover;
}
.craft__media img:first-child { transform: translateY(-22px); }
.craft__media img:last-child { transform: translateY(22px); }

/* -------------------------------- horeca --------------------------------- */
.sect--horeca { background: var(--bg2); border-block: 1px solid rgba(244, 241, 236, .06); }
.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 8px 0 40px; }
.col {
  padding: 26px 24px; border-radius: var(--r);
  background: linear-gradient(180deg, var(--s1), rgba(30, 26, 22, .35));
  border: 1px solid rgba(244, 241, 236, .06);
}
.col__n {
  display: block; margin-bottom: 14px;
  font-size: 13px; font-weight: 700; letter-spacing: .2em; color: var(--gold);
}
.col b { display: block; margin-bottom: 8px; font-size: 18px; }
.col p { margin: 0; color: var(--text2); font-size: 14.5px; }
.horeca__cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* --------------------------------- steps --------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.step { position: relative; padding: 28px 22px; border-radius: var(--r); background: var(--s1); }
.step span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-bottom: 16px; border-radius: 50%;
  font-weight: 700; color: var(--gold-br);
  background: rgba(203, 152, 66, .12); border: 1px solid var(--line);
}
.step b { display: block; margin-bottom: 8px; font-size: 17px; }
.step p { margin: 0; color: var(--text2); font-size: 14px; }

/* ------------------------------- contacts -------------------------------- */
.sect--contacts { background: linear-gradient(180deg, var(--bg), #100e0c); }
.contacts { display: grid; grid-template-columns: 1fr .85fr; gap: clamp(30px, 5vw, 70px); align-items: start; }
.cont { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 0; }
.cont li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 16px 0; border-top: 1px solid rgba(244, 241, 236, .08);
}
.cont li:last-child { border-bottom: 1px solid rgba(244, 241, 236, .08); }
.cont span { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cont a, .cont b { font-size: 16px; font-weight: 600; text-align: right; }
.cont a:hover { color: var(--gold-br); }

.form {
  padding: clamp(24px, 3vw, 34px); border-radius: var(--r);
  background: linear-gradient(180deg, var(--s1), var(--bg2));
  border: 1px solid rgba(244, 241, 236, .07);
}
.form__h { margin: 0 0 20px; font-size: 20px; font-weight: 700; }
.form label { display: block; margin-bottom: 16px; font-size: 13px; color: var(--muted); }
.form input, .form textarea {
  display: block; width: 100%; margin-top: 8px; padding: 14px 16px;
  color: var(--text); background: rgba(14, 12, 10, .6);
  border: 1px solid rgba(244, 241, 236, .1); border-radius: 12px;
  font: inherit; font-size: 15px; resize: vertical;
  transition: border-color .2s, background-color .2s;
}
.form input:focus, .form textarea:focus {
  outline: none; border-color: var(--gold); background: rgba(14, 12, 10, .85);
}
.form input.is-bad, .form textarea.is-bad { border-color: var(--terra); }
.form__note { margin: 14px 0 0; font-size: 12.5px; color: var(--muted); }

/* --------------------------------- footer -------------------------------- */
.ftr { padding: 46px 0; border-top: 1px solid rgba(244, 241, 236, .07); background: #0b0a08; }
.ftr__in { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.ftr__logo { width: 108px; height: auto; opacity: .9; }
.ftr__txt { margin: 0; font-size: 13px; color: var(--muted); }
.ftr__nav { display: flex; gap: 22px; margin-left: auto; font-size: 13.5px; color: var(--text2); flex-wrap: wrap; }
.ftr__nav a:hover { color: var(--gold-br); }

/* ------------------------------- WhatsApp fab ---------------------------- */
.wa-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 40;
  display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%;
  color: #0d1f14; background: linear-gradient(140deg, #5ee38b, #21a95a);
  box-shadow: 0 14px 34px -12px rgba(33, 169, 90, .7);
  transition: transform .25s var(--ease);
}
.wa-fab:hover { transform: scale(1.08) translateY(-2px); }

/* ------------------------------- animations ------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal {
      animation: reveal both linear;
      animation-timeline: view();
      animation-range: entry 0% entry 92%;
    }
    @keyframes reveal {
      from { opacity: 0; transform: translateY(26px); }
      to { opacity: 1; transform: none; }
    }
    /* Мягкий parallax фотографии hero по скроллу секции */
    .hero__shot img {
      animation: heroFloat both linear;
      animation-timeline: --hero;
      animation-range: entry 100% exit 100%;
    }
    @keyframes heroFloat {
      from { transform: translateY(0) scale(1); }
      to { transform: translateY(-26px) scale(1.02); }
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee__row { animation: none; }
}

/* ------------------------------- responsive ------------------------------ */
@media (max-width: 1180px) {
  .shop { grid-template-columns: 224px 1fr; }
  .hsearch { display: none; }
}
@media (max-width: 1080px) {
  .cols, .steps { grid-template-columns: 1fr 1fr; }
}

/* ===== ≤900px: раскладка «как приложение» ===== */
@media (max-width: 900px) {
  .nav {
    position: fixed; inset: 0 0 auto; top: 0; z-index: 45;
    flex-direction: column; gap: 4px; margin: 0;
    padding: 84px 22px 24px;
    background: rgba(14, 12, 10, .97); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    transform: translateY(-102%); transition: transform .4s var(--ease);
    font-size: 17px;
  }
  .nav.is-open { transform: none; }
  .nav a { padding: 12px 0; border-bottom: 1px solid rgba(244, 241, 236, .06); }
  .burger {
    display: grid; gap: 5px; order: -1; margin-right: 4px; padding: 10px 4px;
    background: none; border: 0; cursor: pointer;
  }
  .burger span { display: block; width: 24px; height: 2px; background: var(--text); transition: transform .3s, opacity .3s; }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* app bar: бургер · логотип по центру · иконки */
  .hdr { padding: 8px 0; background: rgba(14, 12, 10, .92); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(244, 241, 236, .06); }
  .hdr__in { gap: 8px; }
  .hdr__logo { margin: 0 auto; }
  .hdr__logo img { width: 104px; }
  .hdr__cta { margin-left: 0; }
  .hdr__cta .tel { display: none; }
  .hsearch { display: none; }

  main { display: flex; flex-direction: column; }
  .stories { order: -1; padding-top: 12px; }

  .craft, .contacts { grid-template-columns: 1fr; }
  .craft__media img:first-child, .craft__media img:last-child { transform: none; }
  .hero { padding: 84px 0 26px; min-height: auto; gap: 22px; }
  .hero__in { grid-template-columns: 1fr; gap: 18px; }
  .hero__shot { order: -1; }
  .hero__shot img { aspect-ratio: 16 / 10; border-radius: 18px; }
  .hero__h1 { margin-bottom: 14px; }
  .hero__sub { margin-bottom: 22px; }
  .hero__stats { gap: 12px 24px; padding-top: 18px; }
  .hero__stats li { flex: 1 1 42%; }

  .sect { padding: 40px 0; }
  .sect--catalog { padding-top: 8px; }
  .sect__head { margin-bottom: 20px; text-align: left; }
  .sect__head .lead { margin-left: 0; }
  .shop { grid-template-columns: 1fr; gap: 0; }
  .shop__side { display: none; }
  .pills { display: flex; margin: 0 -18px 18px; padding: 0 18px; }

  /* карточки товара — как в приложении: 2 колонки, компактно */
  .grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .card { border-radius: 16px; }
  .card__body { padding: 12px; gap: 6px; }
  .card__title { font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .card__ann { display: none; }
  .card__cat { display: none; }
  .card__bonus { display: none; }
  .price { font-size: 18px; }
  .addbtn { width: 40px; height: 40px; }
  .card__fav { width: 34px; height: 34px; right: 8px; top: 8px; }

  .steps, .cols { grid-template-columns: 1fr; gap: 12px; }
  .step, .col { padding: 20px 18px; }
  .wa-fab { bottom: calc(84px + env(safe-area-inset-bottom)); right: 16px; width: 52px; height: 52px; }
  .ftr { padding: 30px 0 calc(96px + env(safe-area-inset-bottom)); }
  .ftr__nav { margin-left: 0; }
}

@media (max-width: 640px) {
  .wrap { padding: 0 18px; }
  .stories__in { padding: 6px 18px 10px; gap: 14px; }
  .story__ring { width: 72px; height: 72px; }
  .btn { --h: 52px; padding: 0 24px; }
}

/* ---------------- десктоп: сторис и цифры по центру ---------------------- */
@media (min-width: 901px) {
  .hero__stats { justify-content: center; }
  .hero__stats li { flex: 0 0 auto; }
  .stories__in { justify-content: safe center; }
}

/* ------- плитки категорий: главный экран приложения один-в-один ---------- */
.cats { display: none; }
@media (max-width: 900px) {
  .cats { display: block; padding: 26px 0 6px; }
  .cats__h {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    margin: 0 18px 18px; font-size: 17px; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: var(--gold-br); text-align: center;
  }
  .cats__h::before, .cats__h::after {
    content: ''; flex: 1; max-width: 42px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold));
  }
  .cats__h::after { background: linear-gradient(90deg, var(--gold), transparent); }
  .cats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 10px; padding: 0 18px; }
  .cat { display: grid; gap: 8px; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
  .cat__img { display: block; overflow: hidden; border-radius: 14px; aspect-ratio: 1; background: var(--s2); }
  .cat__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
  .cat:active .cat__img img { transform: scale(1.06); }
  .cat__t { font-size: 12.5px; line-height: 1.25; color: var(--text); text-align: center; }

  /* как в приложении: на главной — баннер и категории, без длинного текста */
  .hero__copy {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .hero__stats { display: none; }
  /* в приложении на баннере нет плашки — не перекрываем впечатанный текст */
  .hero__shot figcaption { display: none; }
  .hero { padding-bottom: 6px; gap: 0; }
  .hero__shot img { aspect-ratio: 21 / 9; border-radius: 16px; }
  .sect--catalog .sect__head { display: none; }
  .sect--catalog { padding-top: 20px; }
}