/* Секции главной Monkey Market: герой, бренды, баннер, заголовки, FAQ, подвал.
   Заменяют блоки выгрузки Тильды, у которых элементы стояли по абсолютным
   координатам: на десктопе часть вылезала за пределы блока (кнопка героя
   уезжала на 115px вниз и обрезалась), а на телефоне вся страница ехала
   горизонтально на 400px. Здесь обычный поток и flex/grid. */

.mmx{ font-family:'VelaDurk',Arial,sans-serif; -webkit-font-smoothing:antialiased; }
.mmx, .mmx *, .mmx *:before, .mmx *:after{ box-sizing:border-box; }

/* Общая сетка страницы: контент начинается на 40px при 1280 —
   ровно там же, где панель фильтров и карточки витрины (.mms-wrap). */
.mmx__wrap{ max-width:1240px; margin:0 auto; padding:0 20px; }

/* В сборке есть глобальное правило #allrecords a{color:#ff8562} со специфичностью
   выше классов — из-за него ссылки внутри секций краснели (кнопка «В каталог»).
   Гасим его точечно: цвет ссылок в секциях задаёт сам компонент. */
#allrecords .mmx a{ color:inherit; }

/* Крупный заголовок секции — шрифт Druk, как у «ОТЗЫВЫ» и «FAQ». */
.mmx__h2{
  margin:0; font-size:96px; line-height:.92; font-weight:500;
  letter-spacing:-.02em; color:#111; text-transform:uppercase;
}

/* Единая кнопка секций */
.mmx__btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:17px 34px; border-radius:34px; border:1px solid #111;
  background:#111; color:#fff !important; text-decoration:none;
  font-family:inherit; font-size:13px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; cursor:pointer;
  transition:transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.mmx__btn:hover{ background:#000; transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,.22); }
.mmx__btn:active{ transform:translateY(0); box-shadow:none; }
.mmx__btn svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; }
.mmx__btn_ghost{ background:#fff; color:#111 !important; }
.mmx__btn_ghost:hover{ background:#111; color:#fff !important; }

/* ============================ ГЕРОЙ ============================ */
.mmx-hero{ padding:0 0 8px; }
.mmx-hero__grid{
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:0;
  border:1px solid #ececec; border-radius:2px; overflow:hidden;
}
.mmx-hero__side{
  position:relative; display:block; min-height:660px;
  text-decoration:none; overflow:hidden; background:var(--mm-bg,#efefef);
}
/* Два слоя: градиент-подложка и кроссовок поверх (PNG с прозрачным фоном) */
.mmx-hero__bg,
.mmx-hero__shoe{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.mmx-hero__shoe{
  z-index:1; object-position:center 46%;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.mmx-hero__side:hover .mmx-hero__shoe{ transform:scale(1.05); }
.mmx-hero__cap{
  position:absolute; left:32px; bottom:28px; z-index:2;
  font-size:44px; line-height:1; font-weight:500; letter-spacing:-.01em;
  color:#fff; text-transform:uppercase;
  text-shadow:0 2px 18px rgba(0,0,0,.28);
}
.mmx-hero__cap:after{
  content:''; display:block; height:3px; margin-top:10px; background:#fff;
  transform:scaleX(0); transform-origin:left; transition:transform .35s ease;
}
.mmx-hero__side:hover .mmx-hero__cap:after{ transform:scaleX(1); }

.mmx-hero__center{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:0; padding:56px 40px; text-align:center; background:var(--mm-bg,#efefef);
}
.mmx-hero__brand{
  display:flex; align-items:center; gap:9px; margin-bottom:26px;
  font-size:15px; font-weight:600; letter-spacing:.02em; color:#5e5e5e;
  text-transform:uppercase;
}
.mmx-hero__brand img{ width:28px; height:28px; display:block; }
.mmx-hero__title{
  margin:0; font-size:60px; line-height:.98; font-weight:500;
  letter-spacing:-.02em; color:#111; text-transform:uppercase;
}
.mmx-hero__lead{
  margin:22px 0 0; max-width:340px;
  font-size:17px; line-height:1.5; color:#3d3d3d; letter-spacing:-.01em;
}
.mmx-hero__cta{ margin-top:34px; }

/* ============================ БРЕНДЫ ============================ */
.mmx-brands{ padding:44px 0 40px; }
.mmx-brands__row{
  display:grid; grid-template-columns:repeat(10, 1fr); gap:16px;
}
.mmx-brand{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  text-decoration:none;
}
/* В самих картинках 200x260 уже нарисован серый кружок с логотипом (верхние
   200x260 -> 200x200) и подпись бренда под ним. Берём только верхний квадрат
   с кружком, подпись даём текстом — так она чёткая и её видят поисковики. */
.mmx-brand__circle{
  width:100%; aspect-ratio:1/1; border-radius:50%; overflow:hidden;
  display:block;
  transition:transform .22s cubic-bezier(.2,.7,.3,1), filter .22s ease;
}
.mmx-brand__circle img{
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:center top;
}
.mmx-brand:hover .mmx-brand__circle{
  transform:translateY(-5px);
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.14));
}
.mmx-brand__name{
  font-size:13px; color:#8a8a8a; letter-spacing:-.01em;
  transition:color .2s ease; white-space:nowrap;
}
.mmx-brand:hover .mmx-brand__name{ color:#111; }

/* ============================ БАННЕР «НОСКИ» ============================ */
.mmx-banner{ padding:28px 0 52px; }
.mmx-banner__grid{
  display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:16px; align-items:stretch;
}
/* Высота подобрана под пропорции исходной картинки (1698x676, носки в правой
   части, слева пусто) — так кадр почти не режется и заголовок ложится в пустое
   поле слева. */
.mmx-banner__main{
  position:relative; min-height:360px; overflow:hidden;
  background:var(--mm-bg,#efefef); border-radius:2px; display:flex; align-items:center;
}
.mmx-banner__title{
  position:relative; z-index:2; margin:0; padding:0 40px; max-width:56%;
  font-size:60px; line-height:.98; font-weight:500;
  letter-spacing:-.02em; color:#111; text-transform:uppercase;
}
.mmx-banner__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:right center;
}
.mmx-banner__cta{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  background:#111; color:#fff !important; text-decoration:none; border-radius:2px;
  font-size:34px; font-weight:500; letter-spacing:-.01em; text-transform:uppercase;
  transition:background-color .22s ease;
}
.mmx-banner__cta:hover{ background:#000; }
.mmx-banner__cta svg{ width:38px; height:38px; fill:none; stroke:#fff; stroke-width:2; transition:transform .25s ease; }
.mmx-banner__cta:hover svg{ transform:translate(4px,-4px); }

/* ============================ ЗАГОЛОВОК СЕКЦИИ + CTA ============================ */
.mmx-heading{ padding:40px 0 26px; }
.mmx-cta-row{ padding:12px 0 64px; text-align:center; }
.mmx-cta-row .mmx__btn{ min-width:280px; }

/* ============================ FAQ ============================ */
.mmx-faq{ padding:84px 0 88px; }
.mmx-faq__head{ margin-bottom:34px; }
.mmx-faq__list{ border-top:1px solid #e6e6e6; }
.mmx-faq__item{ border-bottom:1px solid #e6e6e6; }
.mmx-faq__q{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:26px 0; cursor:pointer; list-style:none;
  font-size:24px; font-weight:600; letter-spacing:-.02em; color:#111;
  transition:color .18s ease;
}
.mmx-faq__q::-webkit-details-marker{ display:none; }
.mmx-faq__q:hover{ color:#000; }
.mmx-faq__hint{
  flex:none; display:inline-flex; align-items:center; gap:9px;
  font-size:13px; font-weight:400; color:#9a9a9a; letter-spacing:0;
}
.mmx-faq__hint i{
  display:block; width:11px; height:11px; border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor; transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .25s ease;
}
.mmx-faq__item[open] .mmx-faq__hint i{ transform:rotate(-135deg) translate(-3px,-3px); }
.mmx-faq__hint-open{ display:inline; }
.mmx-faq__hint-close{ display:none; }
.mmx-faq__item[open] .mmx-faq__hint-open{ display:none; }
.mmx-faq__item[open] .mmx-faq__hint-close{ display:inline; }
.mmx-faq__a{
  max-width:840px; padding:0 0 30px;
  font-size:17px; line-height:1.7; color:#3d3d3d; letter-spacing:-.01em;
}
.mmx-faq__a p{ margin:0 0 15px; }
.mmx-faq__a p:last-child{ margin-bottom:0; }

/* ============================ ПОДВАЛ ============================ */
.mmx-footer{ padding:64px 0 34px; background:var(--mm-bg,#efefef); border-top:1px solid #e2e2e2; }
.mmx-footer__top{
  display:grid; grid-template-columns:minmax(0,1.4fr) repeat(2, minmax(0,1fr)) auto;
  gap:40px; align-items:start;
}
.mmx-footer__brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.mmx-footer__brand img{ width:44px; height:44px; display:block; }
.mmx-footer__brand span{
  font-size:26px; font-weight:500; letter-spacing:-.01em; color:#111; text-transform:uppercase;
}
.mmx-footer__tg{
  display:inline-flex; align-items:center; gap:8px; margin-top:18px;
  font-size:16px; color:#111 !important; text-decoration:none;
  transition:opacity .18s ease;
}
.mmx-footer__tg:hover{ opacity:.6; }
.mmx-footer__tg svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; }

.mmx-footer__coltitle{
  margin:0 0 16px; font-size:16px; font-weight:600; color:#111; letter-spacing:-.01em;
}
.mmx-footer__links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.mmx-footer__links a{
  font-size:15px; color:#5e5e5e !important; text-decoration:none;
  transition:color .18s ease;
}
.mmx-footer__links a:hover{ color:#111 !important; }

.mmx-footer__up{
  width:56px; height:56px; border-radius:50%; border:1px solid #111; background:#111;
  display:flex; align-items:center; justify-content:center; justify-self:end;
  color:#fff !important; text-decoration:none;
  transition:transform .2s ease, background-color .2s ease;
}
.mmx-footer__up:hover{ transform:translateY(-3px); background:#000; }
.mmx-footer__up svg{ width:18px; height:18px; fill:none; stroke:#fff; stroke-width:2; }

.mmx-footer__bottom{
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  margin-top:44px; padding-top:22px; border-top:1px solid #e4e4e4;
  font-size:13px; color:#9a9a9a;
}
.mmx-footer__legal{ display:flex; gap:18px; flex-wrap:wrap; }
.mmx-footer__legal a{ color:#9a9a9a !important; text-decoration:none; }
.mmx-footer__legal a:hover{ color:#111 !important; text-decoration:underline; }

/* ============================ АДАПТИВ ============================ */
@media (max-width:1100px){
  .mmx__h2{ font-size:76px; }
  .mmx-hero__title{ font-size:48px; }
  .mmx-hero__side{ min-height:520px; }
  .mmx-brands__row{ grid-template-columns:repeat(5, 1fr); gap:20px 16px; }
  .mmx-banner__grid{ grid-template-columns:minmax(0,1fr) 240px; }
  .mmx-banner__title{ font-size:46px; }
  .mmx-banner__cta{ font-size:26px; }
  .mmx-footer__top{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; row-gap:36px; }
  .mmx-footer__brandcell{ grid-column:1 / -1; }
}

@media (max-width:820px){
  .mmx-hero__grid{ grid-template-columns:1fr 1fr; }
  .mmx-hero__center{ grid-column:1 / -1; order:-1; padding:44px 24px; }
  .mmx-hero__side{ min-height:380px; }
  .mmx-hero__cap{ font-size:32px; left:20px; bottom:20px; }
  .mmx-banner__grid{ grid-template-columns:1fr; }
  .mmx-banner__main{ min-height:260px; }
  .mmx-banner__cta{ padding:26px; flex-direction:row; gap:14px; }
  .mmx-faq__q{ font-size:20px; padding:22px 0; }
}

@media (max-width:600px){
  .mmx__wrap{ padding:0 14px; }
  .mmx__h2{ font-size:44px; }
  .mmx-hero{ padding-bottom:0; }
  .mmx-hero__grid{ border-radius:0; }
  .mmx-hero__center{ padding:34px 18px; }
  .mmx-hero__title{ font-size:38px; }
  .mmx-hero__lead{ font-size:15px; margin-top:16px; }
  .mmx-hero__cta{ margin-top:26px; width:100%; }
  .mmx-hero__cta .mmx__btn{ width:100%; }
  .mmx-hero__side{ min-height:260px; }
  .mmx-hero__cap{ font-size:24px; left:14px; bottom:14px; }
  .mmx-hero__brand{ margin-bottom:18px; font-size:13px; }

  /* бренды — лентой с прокруткой, иначе кружки становятся крошечными */
  .mmx-brands{ padding:32px 0 28px; }
  .mmx-brands__row{
    display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .mmx-brands__row::-webkit-scrollbar{ display:none; }
  .mmx-brand{ flex:0 0 84px; scroll-snap-align:start; }

  .mmx-banner{ padding:16px 0 36px; }
  .mmx-banner__main{ min-height:190px; }
  .mmx-banner__title{ font-size:32px; padding:0 20px; max-width:62%; }
  .mmx-banner__cta{ font-size:20px; padding:20px; }
  .mmx-banner__cta svg{ width:26px; height:26px; }

  .mmx-heading{ padding:26px 0 18px; }
  .mmx-cta-row{ padding:6px 0 40px; }
  .mmx-cta-row .mmx__btn{ width:100%; min-width:0; }

  .mmx-faq{ padding:52px 0 56px; }
  .mmx-faq__q{ font-size:18px; padding:18px 0; gap:14px; }
  .mmx-faq__a{ font-size:15px; padding-bottom:22px; }

  .mmx-footer{ padding:44px 0 26px; }
  .mmx-footer__top{ grid-template-columns:1fr 1fr; gap:30px 20px; }
  .mmx-footer__brandcell{ grid-column:1 / -1; }
  .mmx-footer__upcell{ grid-column:1 / -1; }
  .mmx-footer__up{ justify-self:start; }
  .mmx-footer__bottom{ margin-top:32px; }
}

@media (prefers-reduced-motion: reduce){
  .mmx__btn, .mmx-brand__circle, .mmx-hero__img, .mmx-footer__up{ transition:none; }
  .mmx__btn:hover, .mmx-brand:hover .mmx-brand__circle,
  .mmx-hero__side:hover .mmx-hero__img, .mmx-footer__up:hover{ transform:none; }
}


/* ============================ ПРАВКИ ИЗ КАНАЛА (29.07) ============================ */

/* 1. Логотип в шапке стоял ниже надписи MONKEYMARKET и был мелковат.
   Координаты Тильды лежат в <style> внутри <body> и при равной специфичности
   перебивают внешний файл — поэтому селектор длиннее (#allrecords + два класса).
   Меняем только высоту и размер: горизонтальную позицию у главной и каталога
   Тильда задаёт разную, поэтому «отодвигаем» логотип отрицательным отступом,
   чтобы просвет до надписи остался прежним. Правило работает на обеих страницах
   (rec610764608 на главной, rec611784341 в каталоге). */
@media screen and (min-width:480px){
  #allrecords .t-rec .tn-elem[data-elem-id="1688111316979"]{ top:15px; width:55px; }
}
@media screen and (max-width:479px){
  #allrecords .t-rec .tn-elem[data-elem-id="1688379958138"]{
    top:21px; width:44px; margin-left:-5px;
  }
}

/* 2. Фон страницы — тот же серый, что и подложка на фотографиях товаров
   (#efefef, взят пипеткой из images/products/*.jpg), чтобы всё было в одном стиле. */
:root{ --mm-bg:#efefef; }
html, body, #allrecords{ background:var(--mm-bg); }
/* шапка остаётся белой полосой — так она читается как отдельная панель */
#allrecords .t-rec .t396__artboard[data-artboard-height="90"]{ background-color:#fff; }
.mmx-faq__list{ border-top-color:#e2e2e2; }
.mmx-faq__item{ border-bottom-color:#e2e2e2; }
.mmx-hero__grid{ border-color:#e2e2e2; }

/* реквизиты исполнителя в подвале */
.mmx-footer__legalinfo{
  margin-top:44px; padding-top:22px; border-top:1px solid #e4e4e4;
  font-size:13px; line-height:1.65; color:#9a9a9a; max-width:860px;
}
.mmx-footer__legalinfo p{ margin:0 0 7px; }
.mmx-footer__legalinfo p:last-child{ margin-bottom:0; }
.mmx-footer__legalinfo b{ color:#6f6f6f; font-weight:600; }
.mmx-footer__legalinfo a{ color:#9a9a9a !important; text-decoration:none; }
.mmx-footer__legalinfo a:hover{ color:#111 !important; text-decoration:underline; }
.mmx-footer__legalinfo + .mmx-footer__bottom{ margin-top:20px; padding-top:0; border-top:0; }