/* MK Trending v1.9
   Clean compact carousel rebuilt from Maria's actual screenshot:
   no outer panel, no nested frames, no tall cards, no decorative styling. */

.mk-trending{
  --mk-ink:#20252b;
  --mk-muted:#727b85;
  --mk-stage:#f6f6f6;
  --mk-line:#e4e7e9;
  --mk-gap:15px;
  box-sizing:border-box;
  margin:28px auto 32px;
  max-width:1992px;
  padding:0;
  position:relative;
  width:100%;
}
.mk-trending,
.mk-trending *{box-sizing:border-box}

/* The site background stays clean. No white bath, border, rounding or extra internal padding. */
.mk-trending__surface{
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  margin:0;
  padding:0;
}
.mk-trending__layout{
  align-items:center;
  column-gap:44px;
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  min-width:0;
}
.mk-trending__intro{min-width:0;padding:0}

/* Keep the approved wording and two-line rhythm: «Возьмите с» / «с собой». */
.mk-trending__heading{
  color:var(--mk-ink);
  font-family:"Gotham Pro Medium","GothamProMedium","GothamPro-Medium","Gotham Pro",Arial,sans-serif;
  font-size:48px;
  font-weight:400;
  letter-spacing:-1.65px;
  line-height:1.12;
  margin:0;
  text-transform:none;
}
.mk-trending__heading-line{display:block;white-space:nowrap}

.mk-trending__cta{
  color:var(--mk-muted);
  display:inline-block;
  font-family:"Gotham Pro","GothamPro",Arial,sans-serif;
  font-size:12px;
  font-weight:500;
  letter-spacing:1.5px;
  line-height:1.2;
  margin-top:30px;
  text-decoration:none;
  text-transform:uppercase;
}
.mk-trending__cta:hover{color:var(--mk-ink);text-decoration:none}

.mk-trending__controls{display:flex;gap:12px;margin-top:42px}
.mk-trending__carousel{min-width:0;position:relative}
.mk-trending__viewport{
  overflow:hidden;
  overscroll-behavior-x:contain;
  padding:0;
  touch-action:pan-y;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}
.mk-trending__track{
  display:flex;
  gap:var(--mk-gap);
  transition:transform .42s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.mk-trending__track--no-motion{transition:none}
.mk-trending__viewport.is-dragging{cursor:grabbing}
.mk-trending__card{flex:0 0 calc((100% - (var(--mk-gap) * 4))/5);min-width:0}

/* A simple square image stage and a quiet caption — no vertical poster-card construction. */
.mk-trending__link{
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  color:inherit;
  display:block;
  overflow:visible;
  text-decoration:none;
}
.mk-trending__link:hover{box-shadow:none;transform:none}
.mk-trending__image-wrap{
  align-items:center;
  aspect-ratio:1 / 1;
  background:var(--mk-stage);
  display:flex;
  justify-content:center;
  overflow:hidden;
  width:100%;
}
.mk-trending__image{
  -webkit-user-drag:none;
  display:block;
  height:100%;
  max-width:none;
  object-fit:contain;
  transform:scale(1.08);
  width:100%;
}
.mk-trending__name{
  align-items:center;
  background:#fff;
  color:#30363d;
  display:flex;
  font-family:"Gotham Pro","GothamPro",Arial,sans-serif;
  font-size:13px;
  font-weight:400;
  height:50px;
  justify-content:center;
  letter-spacing:.05px;
  line-height:1.2;
  padding:6px 4px;
  text-align:center;
  text-transform:uppercase;
}

/* 42px is the maximum desktop control size. */
.mk-trending__arrow{
  align-items:center;
  background:#fff;
  border:1px solid #d9dde1;
  border-radius:50%;
  color:#4a535c;
  cursor:pointer;
  display:inline-flex;
  font-family:Arial,sans-serif;
  font-size:20px;
  font-weight:300;
  height:42px;
  justify-content:center;
  line-height:1;
  margin:0;
  padding:0 0 2px;
  transition:border-color .18s ease,opacity .18s ease;
  width:42px;
}
.mk-trending__arrow:hover{border-color:#b9c0c5;box-shadow:none}
.mk-trending__arrow:disabled{cursor:default;opacity:.32;pointer-events:none}
.mk-trending__mobile-arrow{display:none;position:absolute;top:calc(50% - 20px);z-index:4}
.mk-trending__mobile-arrow--prev{left:0}.mk-trending__mobile-arrow--next{right:0}
.mk-trending--single .mk-trending__arrow{display:none}

@media(max-width:1560px){
  .mk-trending{padding:0}
  .mk-trending__layout{column-gap:44px;grid-template-columns:300px minmax(0,1fr)}
  .mk-trending__heading{font-size:46px}
  .mk-trending__name{font-size:13px;height:50px}
  .mk-trending__arrow{font-size:20px;height:42px;width:42px}
}
@media(max-width:1220px){
  .mk-trending{padding:0 16px}
  .mk-trending__layout{column-gap:28px;grid-template-columns:230px minmax(0,1fr)}
  .mk-trending__heading{font-size:38px;letter-spacing:-1.35px}
  .mk-trending__card{flex-basis:calc((100% - (var(--mk-gap) * 3))/4)}
  .mk-trending__name{font-size:12px;height:48px}
}
@media(max-width:920px){
  .mk-trending{padding:0 12px}
  .mk-trending__layout{column-gap:20px;grid-template-columns:178px minmax(0,1fr)}
  .mk-trending__heading{font-size:31px;letter-spacing:-1.1px}
  .mk-trending__cta{font-size:10px;letter-spacing:1.25px;margin-top:24px}
  .mk-trending__controls{margin-top:32px}
  .mk-trending__card{flex-basis:calc((100% - (var(--mk-gap) * 2))/3)}
}

/* Mobile: just the title and two clean product photographs. No outer panel, no extra padding, no card frames. */
@media(max-width:760px){
  /* Mobile: give the carousel its own quiet strip between the hero above and Sale below.
     Card proportions and the approved clean design stay untouched. */
  .mk-trending{margin:28px 0 30px;padding:0}
  .mk-trending__layout{display:block}
  .mk-trending__intro{margin:0 0 18px;text-align:center}
  .mk-trending__heading{
    font-family:"Gotham Pro Medium","GothamProMedium","GothamPro-Medium","Gotham Pro",Arial,sans-serif;
    font-size:27px;
    font-weight:400;
    letter-spacing:-.72px;
    line-height:1.1;
  }
  .mk-trending__heading-line{display:inline;white-space:normal}
  .mk-trending__heading-line+.mk-trending__heading-line:before{content:" ";white-space:pre}
  .mk-trending__cta,.mk-trending__controls{display:none}
  .mk-trending__track{gap:8px}
  .mk-trending__card{flex-basis:calc((100% - 8px)/2)}
  .mk-trending__image-wrap{aspect-ratio:1 / 1.12}
  .mk-trending__image{transform:scale(1.10)}
  .mk-trending__name{font-size:10px;height:40px;line-height:1.15;padding:5px 2px}
  .mk-trending__mobile-arrow{display:inline-flex;font-size:19px;height:40px;top:calc(50% - 20px);width:40px}
  .mk-trending__mobile-arrow--prev{left:0}.mk-trending__mobile-arrow--next{right:0}
}
@media(max-width:390px){
  .mk-trending__heading{font-size:25px}
  .mk-trending__name{font-size:9px;height:38px}
}
@media(prefers-reduced-motion:reduce){.mk-trending__track,.mk-trending__arrow{transition:none}}