/* Блок отзывов Monkey Market — собственные стили, без Тильды.
   Отзывы взяты из телеграм-канала t.me/monkeymarketotzyvy,
   имена покупателей заменены (см. сноску в конце блока).
   Вся раскладка на CSS: без JS блок работает полностью,
   включая кнопку «показать все отзывы» (скрытый чекбокс). */

.mmr{
  padding:96px 0 100px;
  background:#fff;
  font-family:'VelaDurk',Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
/* В сборке сайта глобально задан box-sizing:content-box (сетка Тильды),
   поэтому внутри блока переключаем на border-box — иначе padding
   ломает ширину колонок и карточек. */
.mmr, .mmr *, .mmr *:before, .mmr *:after{ box-sizing:border-box; }
/* 1240 = 1200 контента + по 20 padding: левый край контента совпадает
   с панелью фильтров витрины (.mms-wrap) и секциями (.mmx__wrap). */
.mmr__wrap{ max-width:1240px; margin:0 auto; padding:0 20px; }

/* --- шапка блока --- */
.mmr__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:32px; flex-wrap:wrap; margin-bottom:48px;
}
.mmr__headline{ max-width:640px; }
.mmr__title{
  margin:0;
  font-size:120px; line-height:.92; font-weight:500;
  letter-spacing:-.02em; color:#111; text-transform:uppercase;
}
.mmr__subtitle{
  margin:18px 0 0;
  font-size:17px; line-height:1.55; font-weight:400; color:#6f6f6f;
  letter-spacing:-.01em;
}
.mmr__subtitle b{ color:#111; font-weight:600; }

.mmr__aside{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.mmr__counter{
  display:flex; align-items:baseline; gap:10px;
}
.mmr__counter-num{
  font-size:56px; line-height:1; font-weight:500; color:#111; letter-spacing:-.02em;
}
.mmr__counter-txt{ font-size:14px; line-height:1.3; color:#8a8a8a; max-width:120px; }

/* --- кнопка «в телеграм» --- */
.mmr__tg{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 24px; border-radius:30px;
  background:#111; color:#fff !important; text-decoration:none;
  font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  transition:transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.mmr__tg:hover{ background:#2aabee; transform:translateY(-2px); box-shadow:0 10px 24px rgba(42,171,238,.32); }
.mmr__tg:active{ transform:translateY(0); box-shadow:none; }
.mmr__tg svg{ width:18px; height:18px; flex:0 0 18px; fill:currentColor; }

/* --- «стена» отзывов: колонки, карточки разной высоты --- */
.mmr__wall{ columns:3; column-gap:24px; }
.mmr__card{
  break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid;
  margin:0 0 24px;
  padding:26px 26px 28px;
  border:1px solid #ececec; border-radius:18px; background:#fff;
  transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease, border-color .2s ease;
}
.mmr__card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(0,0,0,.10);
  border-color:#dcdcdc;
}

/* --- автор --- */
.mmr__author{ display:flex; align-items:center; gap:13px; margin-bottom:16px; }
.mmr__ava{
  flex:0 0 46px; width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:500; line-height:1; color:#fff;
  text-transform:uppercase; letter-spacing:.02em;
  background:#111;
}
.mmr__ava_1{ background:#111; }
.mmr__ava_2{ background:#ff8562; }
.mmr__ava_3{ background:#7a6ff0; }
.mmr__ava_4{ background:#2aabee; }
.mmr__ava_5{ background:#f0b429; }
.mmr__ava_6{ background:#4f9d69; }

.mmr__who{ min-width:0; }
.mmr__name{
  margin:0; font-size:16px; font-weight:600; color:#111; letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mmr__date{ margin:3px 0 0; font-size:13px; color:#a0a0a0; }

/* --- текст --- */
.mmr__text{
  margin:0; font-size:16px; line-height:1.62; color:#242424; letter-spacing:-.01em;
}

/* --- полоса фото от покупателей --- */
/* Фото держим отдельной полосой, а не внутри карточек: с ними карточки
   различались по высоте в 3 раза, и колонки «стены» рвались пустотами. */
.mmr__shots{
  display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-bottom:14px;
}
.mmr__shot{ margin:0; overflow:hidden; border-radius:14px; background:#f4f4f4; }
.mmr__shot-img{
  /* height:auto обязателен — у <img> заданы width/height,
     без него атрибут перебивает aspect-ratio и фото растягивается на 800px */
  display:block; width:100%; height:auto; aspect-ratio:3/4; object-fit:cover;
  transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
.mmr__shot:hover .mmr__shot-img{ transform:scale(1.06); }
.mmr__shots-cap{
  margin:0 0 40px; font-size:13px; color:#a0a0a0; letter-spacing:-.01em;
}

/* --- плашка «заказ получен» --- */
.mmr__badge{
  display:inline-flex; align-items:center; gap:6px; margin-top:18px;
  font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:#4f9d69;
}
.mmr__badge svg{ width:13px; height:13px; fill:currentColor; }

/* --- «показать все»: чекбокс + доп. карточки --- */
.mmr__toggle{ position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.mmr__card_extra{ display:none; }
.mmr__toggle:checked ~ .mmr__wall .mmr__card_extra{ display:block; }

.mmr__foot{ margin-top:14px; text-align:center; }
.mmr__more{
  display:inline-block; cursor:pointer;
  padding:15px 34px; min-width:260px;
  border:1px solid #111; border-radius:30px; background:#fff; color:#111;
  font-family:inherit; font-size:13px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; text-align:center;
  transition:transform .2s ease, background-color .18s ease, color .18s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.mmr__more:hover{ background:#111; color:#fff; transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,.16); }
.mmr__more:active{ transform:translateY(0); box-shadow:none; }
.mmr__toggle:focus-visible ~ .mmr__foot .mmr__more{ outline:2px solid #2aabee; outline-offset:3px; }
.mmr__more-less{ display:none; }
.mmr__toggle:checked ~ .mmr__foot .mmr__more-all{ display:none; }
.mmr__toggle:checked ~ .mmr__foot .mmr__more-less{ display:inline; }

.mmr__note{
  margin:26px 0 0; text-align:center;
  font-size:13px; line-height:1.6; color:#a0a0a0;
}
.mmr__note a{ color:#a0a0a0 !important; text-decoration:underline; }
.mmr__note a:hover{ color:#111 !important; }

/* --- планшет --- */
@media (max-width:1100px){
  .mmr__title{ font-size:92px; }
  .mmr__wall{ columns:2; }
}
@media (max-width:860px){
  .mmr{ padding:72px 0 76px; }
  .mmr__head{ align-items:flex-start; gap:24px; margin-bottom:36px; }
  .mmr__title{ font-size:68px; }
  .mmr__subtitle{ font-size:16px; }
  .mmr__counter-num{ font-size:44px; }
  .mmr__shots-cap{ margin-bottom:32px; }
}

/* --- узкие экраны: фото лентой, иначе плитки в сетке становятся крошечными --- */
@media (max-width:720px){
  /* горизонтальная лента с «прилипанием».
     Без отрицательных отступов: контейнер со scroll сам сбрасывает
     padding-left в scrollLeft, и первое фото прижималось к краю экрана. */
  .mmr__shots{
    display:flex; gap:10px; margin:0 0 12px;
    overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .mmr__shots::-webkit-scrollbar{ display:none; }
  .mmr__shot{ flex:0 0 30%; scroll-snap-align:start; border-radius:12px; }
}

/* --- телефон --- */
@media (max-width:600px){
  .mmr{ padding:56px 0 60px; }
  .mmr__wrap{ padding:0 14px; }
  .mmr__title{ font-size:48px; }
  .mmr__subtitle{ margin-top:14px; font-size:15px; }
  .mmr__head{ margin-bottom:28px; }
  .mmr__aside{ width:100%; }
  .mmr__tg{ width:100%; justify-content:center; padding:16px 20px; }
  .mmr__wall{ columns:1; column-gap:0; }
  .mmr__card{ margin-bottom:16px; padding:22px 20px 24px; border-radius:16px; }
  .mmr__text{ font-size:15px; }
  .mmr__more{ width:100%; min-width:0; }
  .mmr__shot{ flex-basis:46%; }
  .mmr__shots-cap{ margin-bottom:26px; font-size:12px; }
}

@media (prefers-reduced-motion: reduce){
  .mmr__card, .mmr__tg, .mmr__more{ transition:none; }
  .mmr__card:hover, .mmr__tg:hover, .mmr__more:hover{ transform:none; }
}