/* Scoped to the most-viewed block; other Simple Carousels are unchanged. */
.mh-popular { container-type: inline-size; color: var(--mh-ink, #1d2430); }
.mh-popular .mh-popular__track {
  display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: thin;
  scrollbar-color: #b7a2d1 #f2eef7; list-style: none;
  padding: 4px 2px 16px; margin: 0; counter-reset: none;
}
.mh-popular .mh-popular__card {
  position: relative; display: flex; flex-direction: column; flex: 0 0 calc((100% - 80px) / 6);
  min-width: 0; margin: 0; padding: 0 0 14px; overflow: hidden;
  scroll-snap-align: start; background: #fff; border: 1px solid #e5dfeb;
  border-radius: 12px; box-shadow: 0 3px 10px rgb(45 33 64 / 6%);
  transition: border-color 160ms, box-shadow 160ms;
}
.mh-popular .mh-popular__card:hover,
.mh-popular .mh-popular__card:focus-within { border-color: #b7a2d1; box-shadow: 0 6px 18px rgb(45 33 64 / 12%); }
.mh-popular__rank {
  position: absolute; top: 10px; left: 10px; z-index: 1; pointer-events: none;
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; background: #fff; color: #56328c;
  font-size: 13px; font-weight: 800; box-shadow: 0 2px 8px #0002;
}
.mh-popular .views-field { margin: 0; padding: 0; }
.mh-popular .views-field:has(.field-content:empty) { display: none; }
.mh-popular .views-field:has(img) a { display: block; }
.mh-popular .mh-popular__card img {
  display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 10;
  object-fit: cover; margin: 0; border-radius: 0; background: #f2eef7;
}
.mh-popular .views-field-title { padding: 14px 14px 10px; line-height: 1.35; }
.mh-popular .views-field-title a { color: #2d2140; font-size: 17px; font-weight: 750; text-decoration: none; }
.mh-popular .views-field-title a:hover { color: #56328c; text-decoration: underline; }
.mh-popular .views-field-nothing { margin-top: auto; padding: 0 14px; color: #667085; }
.mh-popular .views-field-nothing .field-content { float: none !important; }
.mh-popular .views-field-nothing .kleiner { font-size: 12px; }
.mh-popular .views-field-nothing .w3-right-align { text-align: left !important; }
.mh-popular .mh-popular__footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 2px 4px; }
.mh-popular .mh-popular__footer[hidden] { display: none; }
.mh-popular__position { color: #667085; font-size: 13px; font-variant-numeric: tabular-nums; }
.mh-popular__controls { display: flex; gap: 8px; }
.mh-popular .mh-popular__button {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid #d9cfe7; border-radius: 50%; background: #fff; color: #56328c;
  cursor: pointer; transition: background 160ms, color 160ms;
}
.mh-popular .mh-popular__button:hover:not(:disabled) { background: #56328c; color: #fff; }
.mh-popular .mh-popular__button:disabled { opacity: .35; cursor: default; }
.mh-popular__button svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mh-popular a:focus-visible, .mh-popular button:focus-visible, .mh-popular__track:focus-visible { outline: 3px solid #56328c; outline-offset: 3px; }
@container (max-width: 900px) { .mh-popular .mh-popular__card { flex-basis: calc((100% - 48px) / 4); } }
@container (max-width: 640px) { .mh-popular .mh-popular__card { flex-basis: calc((100% - 32px) / 3); } }
@container (max-width: 420px) { .mh-popular .mh-popular__card { flex-basis: calc((100% - 16px) / 2); } }
@media (prefers-reduced-motion: reduce) { .mh-popular * { transition: none !important; scroll-behavior: auto !important; } }
