/* Витрина Monkey Market — собственные стили, без Тильды */

/* Шрифт витрины: без этого заголовки карточек рисовались системным
   шрифтом с засечками — у #mm-shop не было своего font-family. */
#mm-shop, .mms-modal{ font-family:'VelaDurk',Arial,sans-serif; }

.mms-wrap{ max-width:1200px; margin:0 auto; padding:0 20px; }
.mms-noscroll{ overflow:hidden; }

/* --- панель фильтров --- */
.mms-toolbar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:28px;
}
.mms-brandpick{ position:relative; }
.mms-brandbtn{
  display:flex; align-items:center; gap:8px; padding:11px 18px;
  border:1px solid #111; border-radius:30px; background:#fff; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:#111;
}
.mms-brandbtn:hover{ background:#111; color:#fff; }
.mms-brandbtn:hover .mms-caret{ border-top-color:#fff; }
.mms-caret{
  width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid #111; display:inline-block;
}
.mms-brandmenu{
  display:none; position:absolute; top:calc(100% + 6px); left:0; z-index:60;
  background:#fff; border:1px solid #e5e5e5; border-radius:12px; padding:6px;
  min-width:230px; max-height:340px; overflow-y:auto;
  box-shadow:0 12px 34px rgba(0,0,0,.14);
}
.mms-brandmenu_open{ display:block; }
.mms-brand-opt{
  display:block; width:100%; text-align:left; padding:9px 12px; border:0; background:none;
  cursor:pointer; font-family:inherit; font-size:14px; color:#111; border-radius:8px;
}
.mms-brand-opt:hover{ background:#f4f4f4; }

.mms-search{
  flex:1 1 220px; min-width:180px; padding:11px 16px; border:1px solid #ddd;
  border-radius:30px; font-family:inherit; font-size:14px; color:#111; background:#fff;
}
.mms-search:focus{ outline:none; border-color:#111; }
.mms-sort{
  padding:11px 16px; border:1px solid #ddd; border-radius:30px; background:#fff;
  font-family:inherit; font-size:14px; color:#111; cursor:pointer;
}
.mms-count{ font-size:13px; color:#888; margin-left:auto; }

/* --- сетка ---
   minmax(0,1fr) вместо 1fr обязателен: у грид-элементов min-width:auto,
   и на телефоне колонки не сжимались до ширины экрана (карточки оставались
   по 270px, из-за чего страница ехала вбок). */
.mms-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:40px 30px;
}
.mms-card{ min-width:0; }
.mms-card-title{ overflow-wrap:anywhere; }
.mms-empty{ grid-column:1/-1; text-align:center; color:#888; padding:60px 0; font-size:15px; }

.mms-card{ display:flex; flex-direction:column; text-align:center; }
.mms-card-imgwrap{
  position:relative; display:block; width:100%; aspect-ratio:1/1; margin-bottom:18px;
  border:0; padding:0; background:var(--mm-bg,#efefef); cursor:pointer; overflow:hidden; border-radius:4px;
}
.mms-card-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  transition:opacity .3s ease, transform .4s cubic-bezier(.2,.7,.3,1);
}
.mms-card-img_hover{ opacity:0; }
.mms-card-imgwrap:hover .mms-card-img{ transform:scale(1.05); }
.mms-card-imgwrap:hover .mms-card-img_hover{ opacity:1; }
.mms-card-img_empty{ background:var(--mm-bg,#efefef); }

.mms-card-title{
  font-size:17px; font-weight:700; text-transform:uppercase; color:#111;
  margin:0 0 10px; line-height:1.3; letter-spacing:.01em;
}
.mms-card-price{ font-size:15px; color:#111; margin-bottom:16px; }
.mms-card-btns{ display:flex; flex-direction:column; gap:10px; margin-top:auto; }

.mms-btn{
  padding:14px 20px; border-radius:6px; font-family:inherit; font-size:14px;
  cursor:pointer; transition:background-color .15s ease, color .15s ease, border-color .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.mms-btn_ghost{ background:#fff; border:1px solid #111; color:#111; }
.mms-btn_ghost:hover{ background:#111; color:#fff; }
.mms-btn_solid{ background:#111; border:1px solid #111; color:#fff; font-weight:600; }
.mms-btn_solid:hover{ background:#333; border-color:#333; }

.mms-more-wrap{ text-align:center; margin-top:48px; }
.mms-more{ min-width:240px; }
/* Кнопка «Подробнее» в карточке использует тот же класс, что и «Показать ещё»,
   и утаскивала min-width:240px — на телефоне карточка (175px) не могла её
   вместить и страница ехала вбок. */
.mms-card .mms-more{ min-width:0; }

/* --- карточка товара --- */
.mms-modal{
  position:fixed; inset:0; z-index:10000000; background:var(--mm-bg,#efefef);
  display:none; overflow-y:auto;
}
.mms-modal_show{ display:block; }
.mms-modal-box{
  max-width:1200px; margin:0 auto; padding:70px 20px 60px;
  display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:start;
}
.mms-modal-close{
  position:fixed; top:18px; right:24px; z-index:2; background:none; border:0;
  font-size:38px; line-height:1; color:#111; cursor:pointer; padding:6px 12px;
}
.mms-modal-close:hover{ color:#666; }

.mms-slider{ position:relative; background:var(--mm-bg,#efefef); border-radius:6px; }
.mms-slide-img{
  display:block; width:100%; aspect-ratio:1/1; object-fit:contain; border-radius:6px;
}
.mms-slide-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:44px; height:44px; border-radius:50%; border:0; background:rgba(255,255,255,.9);
  box-shadow:0 2px 10px rgba(0,0,0,.14); cursor:pointer; font-size:26px; line-height:1; color:#111;
}
.mms-slide-nav:hover{ background:#fff; }
/* Стрелки прижаты к краям кадра — по центру они ложились прямо на кроссовок */
.mms-slide-prev{ left:6px; }
.mms-slide-next{ right:6px; }
.mms-thumbs{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.mms-thumb{
  width:74px; height:74px; padding:0; border:1px solid #e0e0e0; border-radius:5px;
  background:#fff; cursor:pointer; overflow:hidden;
}
.mms-thumb img{ width:100%; height:100%; object-fit:contain; display:block; }
.mms-thumb_on{ border-color:#111; }

.mms-modal-title{
  font-size:30px; font-weight:700; text-transform:uppercase; color:#111;
  margin:0 0 10px; line-height:1.2;
}
.mms-modal-brand{ font-size:15px; color:#8a8a8a; margin-bottom:4px; }
.mms-modal-sku{ font-size:15px; color:#8a8a8a; margin-bottom:16px; }
.mms-modal-price{ font-size:26px; color:#111; margin:14px 0 6px; }
.mms-modal-buy{ display:flex; align-items:center; gap:14px; margin-top:18px; }
.mms-qty{
  display:flex; align-items:center; gap:14px; border:1px solid #ddd;
  border-radius:6px; padding:9px 14px;
}
.mms-qty-btn{
  border:0; background:none; cursor:pointer; font-size:19px; line-height:1; color:#111; padding:0 3px;
}
.mms-qty-val{ min-width:20px; text-align:center; font-size:15px; }
.mms-modal-buybtn{ min-width:190px; }

@media (max-width:960px){
  .mms-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:32px 20px; }
  .mms-modal-box{ grid-template-columns:1fr; gap:28px; padding:60px 16px 50px; }
  .mms-modal-title{ font-size:24px; }
}
@media (max-width:560px){
  .mms-wrap{ padding:0 14px; }
  .mms-slide-nav{ width:38px; height:38px; font-size:22px; }
  .mms-slide-prev{ left:2px; }
  .mms-slide-next{ right:2px; }
  .mms-grid{ gap:26px 12px; }
  /* На телефоне панель фильтров занимала три ряда. Кладём поиск на всю
     ширину, а «Бренды» и сортировку — в один ряд. */
  .mms-toolbar{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:22px; }
  .mms-search{ grid-column:1 / -1; min-width:0; order:-1; }
  .mms-brandpick, .mms-sort{ min-width:0; }
  .mms-brandbtn{ width:100%; justify-content:space-between; }
  .mms-count{ grid-column:1 / -1; width:auto; margin-left:0; }
  .mms-card-title{ font-size:14px; }
  .mms-card-price{ font-size:13.5px; }
  .mms-btn{ padding:12px 14px; font-size:13px; }
  .mms-thumb{ width:60px; height:60px; }
  .mms-modal-buy{ flex-wrap:wrap; }
  .mms-modal-buybtn{ flex:1 1 100%; }
}

/* ============ Оживление интерфейса: наведение ============ */

/* Карточка товара: приподнимается и увеличивается */
.mms-card{
  transition: transform .28s cubic-bezier(.2,.7,.3,1);
}
.mms-card:hover{ transform: translateY(-8px); }
.mms-card:hover .mms-card-imgwrap{ box-shadow:0 18px 40px rgba(0,0,0,.13); }
.mms-card-imgwrap{ transition: box-shadow .28s ease; }
.mms-card:hover .mms-card-img{ transform: scale(1.08); }
.mms-card:hover .mms-card-title{ color:#000; }
.mms-card-title{ transition: color .2s ease; }

/* Кнопки: лёгкий подъём и тень */
.mms-btn{ transform: translateZ(0); }
.mms-btn:hover{ transform: translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.16); }
.mms-btn:active{ transform: translateY(0) scale(.985); box-shadow:none; }

/* Кнопки в шапке фильтров */
.mms-brandbtn{ transition: transform .18s ease, background-color .18s ease, color .18s ease; }
.mms-brandbtn:hover{ transform: translateY(-2px); }
.mms-brand-opt{ transition: background-color .15s ease, padding-left .15s ease; }
.mms-brand-opt:hover{ padding-left:16px; }

/* Миниатюры и стрелки в карточке товара */
.mms-thumb{ transition: transform .2s ease, border-color .2s ease; }
.mms-thumb:hover{ transform: translateY(-3px) scale(1.05); border-color:#111; }
.mms-slide-nav{ transition: transform .2s ease, background-color .2s ease; }
.mms-slide-nav:hover{ transform: translateY(-50%) scale(1.12); }
.mms-modal-close{ transition: transform .2s ease, color .2s ease; }
.mms-modal-close:hover{ transform: rotate(90deg); }

/* Кнопка «Показать ещё» */
.mms-more{ transition: transform .2s ease, background-color .15s ease, color .15s ease, letter-spacing .2s ease; }
.mms-more:hover{ letter-spacing:.03em; }

@media (prefers-reduced-motion: reduce){
  .mms-card, .mms-btn, .mms-thumb, .mms-slide-nav, .mms-brandbtn, .mms-modal-close{ transition:none; }
  .mms-card:hover, .mms-btn:hover, .mms-thumb:hover, .mms-brandbtn:hover{ transform:none; }
}

/* ============ Логотип ============ */
/* НЕ трогаем display у .tn-elem/.tn-atom — у них display:table,
   и подмена на flex ломает позиционирование (логотип исчезает).
   Выравниваем только саму картинку внутри её ячейки. */
.tn-atom__img{ display:block; }

/* ============ Ссылки и кнопки старых блоков ============ */
.t396__elem a{ transition: opacity .18s ease; }
.t396__elem a:hover{ opacity:.72; }