/* MenuKit — public menu stylesheet for the "default" template (all four render
   modes, feature 12). Pairs with templates/menu/default/. All rules are scoped
   under .mk-menu (plus the .mk-lightbox/.mk-langwrap overlays, still
   mk-prefixed) so the fragment never leaks styles into the host page. Theme
   via the --mk-* custom properties (a client site can override them on
   .mk-menu), or replace this file wholesale for a bespoke look.

   The type scale, spacing and centering follow the prototype's public card
   ("Editor v2 Standorte" → Vorschau, context/prototype_multilanguage/) — that
   preview IS this card, so preview and website are the same artifact. The
   prototype's px values are expressed in rem here (÷16) so guests who raise
   their browser's font size scale the whole card with it. */

.mk-menu {
  --mk-bg: transparent;
  --mk-text: #292521;
  --mk-muted: #82796b;
  --mk-accent: #A85A38;
  --mk-border: #e6e0d6;
  --mk-leader: #d5ccbd;       /* dotted price leader — darker than the borders */
  --mk-unavailable: #8a6d1f;  /* "Zurzeit nicht verfügbar" note */
  --mk-nav-bg: #fff;          /* sticky chip strip needs an opaque backdrop */
  --mk-font: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;

  box-sizing: border-box;
  max-width: 46rem;
  margin: 0 auto;
  padding: 0;
  color: var(--mk-text);
  background: var(--mk-bg);
  font-family: var(--mk-font);
  line-height: 1.5;
  text-align: left;
}
.mk-menu *, .mk-menu *::before, .mk-menu *::after { box-sizing: border-box; }

/* --- Head: location eyebrow · menu title · menu description ---------------- */

.mk-menu__head { margin: 0 0 1.875rem; text-align: center; }
/* Multi-location installs name the location the card belongs to. */
.mk-menu__location {
  margin: 0 0 0.375rem;
  font-size: 0.719rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mk-muted);
}
.mk-menu__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.mk-menu__desc { margin: 0.5rem 0 0; color: var(--mk-muted); font-size: 0.781rem; }

/* --- Sections -------------------------------------------------------------- */

.mk-section { margin: 0 0 2rem; }
.mk-section__title {
  margin: 0 0 1.125rem;
  font-size: 0.781rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--mk-accent);
}
/* Kombiniert (feature 14): EN section name rides lighter behind the German. */
.mk-section__title-en { font-weight: 400; opacity: 0.6; }

/* Subsections keep the family but step down in weight — the prototype has no
   nesting, so this is the one deliberate extension of its scale. */
.mk-section--sub { margin: 1.5rem 0 0; }
.mk-section--sub .mk-section__title {
  font-size: 0.719rem;
  letter-spacing: 0.12em;
  color: var(--mk-muted);
}

.mk-section__desc {
  margin: -0.625rem 0 1.125rem;
  text-align: center;
  color: var(--mk-muted);
  font-size: 0.781rem;
  line-height: 1.45;
}
/* Kombiniert: the EN subtext on its own line under the German one — italic and
   lighter, the same treatment the dish's EN line gets. The German paragraph
   hands its bottom margin over so the pair reads as one block; browsers without
   :has() simply space the two lines further apart. */
.mk-section__desc:has(+ .mk-section__desc-en) { margin-bottom: 0.125rem; }
.mk-section__desc-en { font-size: 0.75rem; font-style: italic; opacity: 0.85; }
/* Only when it follows the German line — an EN-only subtext keeps the negative
   top margin that pulls the first line up under the heading. */
.mk-section__desc + .mk-section__desc-en { margin-top: 0; }

/* --- Items ----------------------------------------------------------------- */

.mk-items { list-style: none; margin: 0; padding: 0; }
.mk-item { margin: 0 0 0.9375rem; padding: 0; }
/* Sold out: the whole dish recedes, note included (prototype). */
.mk-item--unavailable { opacity: 0.5; }

/* Wraps rather than squeezes: when name + price no longer fit on one line
   (long dish name, multi-price string, narrow phone), the price moves to its
   own line and aligns right — instead of the name breaking mid-word while the
   price clings to the first line. On a line that fits, the leader eats the
   free space first, so `margin-left: auto` is a no-op and nothing shifts. */
.mk-item__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
.mk-item__name { flex: 0 1 auto; font-size: 0.906rem; font-weight: 600; }
/* "41 · Wiener Schnitzel" — the number reads as part of the dish name. */
.mk-item__nr::after { content: " · "; }
/* A flex item, so the UA's vertical-align:super never applies: the codes sit
   on the baseline, small and muted (prototype). */
.mk-item__allergens {
  flex: none;
  font-size: 0.594rem;
  color: var(--mk-muted);
  letter-spacing: 0.04em;
}
.mk-item__leader {
  flex: 1 1 auto;
  min-width: 1rem;
  border-bottom: 1.5px dotted var(--mk-leader);
  transform: translateY(-3px);
}
.mk-item__price {
  flex: none;
  margin-left: auto;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mk-item__desc {
  margin: 0.125rem 0 0;
  max-width: 56ch;
  color: var(--mk-muted);
  font-size: 0.781rem;
  line-height: 1.45;
}

/* Kombiniert: English as small italic lines under the German. */
.mk-item__en {
  margin: 0.125rem 0 0;
  max-width: 56ch;
  color: var(--mk-muted);
  font-size: 0.75rem;
  font-style: italic;
  line-height: 1.45;
  opacity: 0.85;
}

/* --- Stacked variant layout (feature 14) ----------------------------------- */
/* Used as soon as any price row carries a Zusatz: one line per row, amount
   right-aligned per line. Rows without a Zusatz keep the inline price above. */

.mk-variants { display: flex; flex-direction: column; gap: 0.1875rem; margin: 0.375rem 0 0; }
.mk-variant { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
.mk-variant__text { flex: 0 1 auto; font-size: 0.8125rem; }
.mk-variant__label { font-weight: 600; }
.mk-variant__sep,
.mk-variant__note { color: var(--mk-muted); }
.mk-variant__leader {
  flex: 1 1 auto;
  min-width: 1rem;
  border-bottom: 1.5px dotted var(--mk-leader);
  transform: translateY(-3px);
}
.mk-variant__price {
  flex: none;
  margin-left: auto;
  font-size: 0.844rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mk-variant-en { color: var(--mk-muted); font-size: 0.75rem; font-style: italic; opacity: 0.85; }

/* --- Badges, Hinweis, sold-out note ---------------------------------------- */

.mk-item__badges { display: flex; flex-wrap: wrap; gap: 0.3125rem; margin: 0.3125rem 0 0; padding: 0; list-style: none; }
.mk-badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--mk-border);
  border-radius: 999px;
  color: var(--mk-muted);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Hinweis — the dish's last line (after the badges), small and muted. */
.mk-item__hint { margin: 0.3125rem 0 0; color: var(--mk-muted); font-size: 0.719rem; }
.mk-item__hint--en { margin-top: 0.0625rem; font-style: italic; opacity: 0.85; }

.mk-item__note {
  margin: 0.1875rem 0 0;
  color: var(--mk-unavailable);
  font-size: 0.719rem;
  font-style: italic;
}

/* --- Item image (text-first thumbnail) ------------------------------------- */
/* The LQIP rides as the figure's background; the real image fades in over it.
   width/height on the <img> keep the aspect box reserved, so there is no
   layout shift as it loads. */

.mk-item__figure {
  display: block;
  margin: 0.65rem 0 0;
  max-width: 180px;
  border-radius: 8px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  line-height: 0;
}
.mk-item__img {
  display: block;
  width: 100%;
  height: auto;
  animation: mk-img-in 0.35s ease-out both;
}
@keyframes mk-img-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-item__img { animation: none; }
}

/* --- Legend ---------------------------------------------------------------- */
/* One centered line — "A Gluten · C Eier · G Milch/Laktose" (prototype). The
   <dl> keeps the code→label pairing for screen readers; the heading carries
   the same meaning for them and is hidden visually, as the prototype's card
   shows the legend without one. */

.mk-menu__legend {
  margin-top: 0.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--mk-border);
  color: var(--mk-muted);
  font-size: 0.656rem;
  line-height: 1.8;
  text-align: center;
}
.mk-menu__legend-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.mk-menu__legend dl { display: inline; margin: 0; }
.mk-menu__legend div { display: inline; }
.mk-menu__legend div + div::before { content: " · "; }
.mk-menu__legend dt { display: inline; margin: 0 0.3em 0 0; font-weight: 400; }
.mk-menu__legend dd { display: inline; margin: 0; }
/* Kombiniert: the English legend drops to its own line under the German one,
   small and italic — the same treatment the dish English lines get. Needs to
   out-specify `.mk-menu__legend dl { display: inline }` to break the line. */
.mk-menu__legend dl.mk-menu__legend-en {
  display: block;
  margin-top: 0.125rem;
  font-style: italic;
  opacity: 0.85;
}

/* --- Sprachumschalter (feature 14) ----------------------------------------- */
/* The wrapper carries both language cards and the DE|EN toggle — the only mk-
   rules outside the .mk-menu scope, still mk-prefixed so nothing leaks into the
   host page. The toggle ships [hidden] and is revealed by menukit-menu.js;
   without JS guests see German. */

.mk-langwrap { position: relative; max-width: 46rem; margin: 0 auto; }
.mk-langswitch {
  position: absolute;
  top: -0.5rem;
  right: -0.75rem;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 0.125rem;
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.719rem;
  letter-spacing: 0.06em;
  color: #82796b;
}
.mk-langswitch[hidden] { display: none; }
.mk-langswitch__sep { opacity: 0.5; }
.mk-langswitch__btn {
  border: none;
  background: none;
  padding: 0.375rem 0.4375rem;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  cursor: pointer;
}
.mk-langswitch__btn.is-active {
  color: #292521;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Camera affordance (text-first · hover-reveal) -------------------------- */
/* A quiet inline icon in the title row: plain <a> to the full JPEG, upgraded
   to the lightbox by menukit-menu.js. Sits on the baseline next to the name. */

.mk-zoom {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 0 0.125rem;
  color: var(--mk-muted);
  line-height: 0;
  transform: translateY(2px);
}
.mk-zoom:hover,
.mk-zoom:focus-visible { color: var(--mk-accent); }

/* --- Hover-reveal popup (feature 12) ---------------------------------------- */
/* Built by menukit-menu.js on first reveal: a floating photo card under the
   dish title. aspect-ratio + LQIP background give it its full size instantly;
   the 800 variant fades in over the blur. pointer-events: none — it is purely
   a preview, clicks go to the card (the camera opens the lightbox). */

.mk-item--reveal { position: relative; }
/* [tabindex] is granted by menukit-menu.js when it wires the reveal — without
   JS the title stays a plain, unstyled name (no false affordance). */
.mk-item__name--reveal[tabindex] {
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--mk-leader);
  text-underline-offset: 3px;
}

/* Hover-reveal refinements toward the original monki menu (feature 15):
   airier rows, no dotted leader (the flex gap still pushes the price right),
   and instead of a permanent dotted affordance the title of the dish whose
   photo is CURRENTLY on the stage carries a solid underline — it stays until
   the next dish takes over, so the list always names the visible photo. */
.mk-menu--hover-reveal .mk-item { margin: 0 0 2rem; }
.mk-menu--hover-reveal .mk-section { margin-bottom: 3rem; }
.mk-menu--hover-reveal .mk-section__title { margin-bottom: 1.5rem; }
.mk-menu--hover-reveal .mk-menu__head { margin-bottom: 2.75rem; }
.mk-menu--hover-reveal .mk-item__leader { border-bottom: none; }
.mk-menu--hover-reveal .mk-item__name--reveal[tabindex] { text-decoration-line: none; }
/* The original monki number treatment: the number hangs in its own gutter on
   the left while title, description, EN line and Hinweis share one text edge.
   The active dish's number inverts into a filled pill (round for 1–2 digits,
   stretching for "601"-style topping numbers), smoothly transitioned like the
   original. The gutter is padding on the item, the number pulled out of the
   flow — so dishes without a number keep the same text edge. */
.mk-menu--hover-reveal .mk-item {
  position: relative;
  padding-left: 3.4rem;
}
.mk-menu--hover-reveal .mk-item__nr {
  position: absolute;
  left: 0;
  top: -0.35em;
  min-width: 2.2em;
  height: 2.2em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.45em;
  border-radius: 999px;
  transition: color 0.3s ease, background-color 0.3s ease;
}
.mk-menu--hover-reveal .mk-item__nr::after { content: none; }
.mk-menu--hover-reveal .mk-item--active .mk-item__nr {
  background: var(--mk-text);
  color: #fffdf8;
}
/* A touch more air between title and the text below it. */
.mk-menu--hover-reveal .mk-item__desc { margin-top: 0.4375rem; }
.mk-reveal {
  position: absolute;
  left: 0;
  top: 1.75rem;
  z-index: 6;
  width: min(16rem, 72vw);
  border-radius: 10px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  box-shadow: 0 14px 36px rgba(41, 37, 33, 0.22);
  line-height: 0;
  pointer-events: none;
}
.mk-reveal[hidden] { display: none; }
.mk-reveal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: mk-img-in 0.35s ease-out both;
}

/* --- Sticky stage (hover-reveal, feature 15) -------------------------------- */
/* The full monkiramen arrangement: photo column left, dish list right; the
   hovered dish's photo appears in the stage and stays until the next hover.
   Dish photos are often cutouts on transparency — no frame, no backdrop, no
   crop. Breakpoint is 46rem (not 48) so the admin preview's desktop sheet
   (47.5rem) renders the desktop layout. Below it the popup takes over. */
.mk-stage { display: none; }
.mk-stage__figure {
  margin: 0;
  line-height: 0;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
.mk-stage__figure.is-loaded { opacity: 1; }
.mk-stage__figure img { width: 100%; height: auto; display: block; }

@media (min-width: 46rem) {
  .mk-menu--hover-reveal { max-width: 68rem; }
  /* The whole component fits the window: the body is a viewport-fitting box,
     nav and image sit vertically centered, and the dish list scrolls INSIDE
     its column — the page itself never grows past the screen. */
  .mk-menu--hover-reveal .mk-menu__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 0 3.5rem;
    align-items: center;
    height: calc(100vh - 14rem); /* window minus page chrome + card head; preview pins a fixed height */
    min-height: 26rem;
  }
  .mk-menu--hover-reveal .mk-menu__sections {
    align-self: stretch;
    height: 100%;
    overflow-y: auto;
    padding-right: 1.25rem;
    scrollbar-width: thin;
  }
  .mk-menu--hover-reveal .mk-section[id] { scroll-margin-top: 0.5rem; }
  .mk-menu--hover-reveal .mk-stage {
    display: block; /* centered by the body grid, like the nav */
  }
  .mk-menu--hover-reveal .mk-stage__figure { width: 100%; }
  /* With the sticky nav on too: rail | stage | list — the original monki
     arrangement (categories leftmost, image beside them, dishes right).
     Two classes outrank the plain .mk-menu--nav width/grid rules below. */
  .mk-menu--hover-reveal.mk-menu--nav { max-width: 80rem; }
  .mk-menu--hover-reveal.mk-menu--nav .mk-menu__body {
    grid-template-columns: 12rem minmax(0, 1fr) minmax(0, 1.2fr);
    /* the generic .mk-menu--nav body rule later in the file says start —
       the window-fitting stage layout centers its columns */
    align-items: center;
  }
  /* The rail is a plain grid item, centered by the body grid like the image
     (overriding the generic sticky-sidebar rules below). */
  .mk-menu--hover-reveal.mk-menu--nav .mk-nav {
    position: static;
    height: auto;
    margin: 0;
  }
  /* While the stage is laid out the popup never shows (JS routes there too). */
  .mk-menu--hover-reveal .mk-reveal { display: none; }
}

/* --- Thumb list (feature 12, mode C) ---------------------------------------- */
/* 72px square thumb left of the text; LQIP as the anchor's background, the 400
   variant covers it. Items without a photo start in column 2, so all text
   stays aligned. */

.mk-item--thumb {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0 0.875rem;
  align-items: start;
}
.mk-item--thumb > .mk-item__content { grid-column: 2; }
.mk-thumb {
  grid-column: 1;
  display: block;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 8px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  line-height: 0;
}
.mk-thumb picture { display: block; width: 100%; height: 100%; }
.mk-thumb__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: mk-img-in 0.35s ease-out both;
}

/* --- Visual mode (feature 12, mode B) --------------------------------------- */
/* The media figure widens into a proper image row; everything else keeps the
   text-first scale. (.mk-item__figure base styles live under "Item image".) */

.mk-menu--visual .mk-item__figure { max-width: 24rem; }

/* --- Lightbox (feature 12) -------------------------------------------------- */
/* One overlay for the whole page, created by menukit-menu.js. The figure gets
   the LQIP as background while the full variant loads. Scale+fade per the
   design brief (200ms ease-out), skipped for prefers-reduced-motion. */

.mk-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(30, 26, 22, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.mk-lightbox[hidden] { display: none; }
.mk-lightbox__figure {
  position: relative;
  margin: 0;
  max-width: min(60rem, 100%);
  max-height: 100%;
  border-radius: 12px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
  line-height: 0;
  animation: mk-lightbox-in 0.2s ease-out both;
}
.mk-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 85vh;
  width: auto;
  height: auto;
}
.mk-lightbox__close {
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(30, 26, 22, 0.55);
  color: #fff;
  cursor: pointer;
}
.mk-lightbox__close:hover,
.mk-lightbox__close:focus-visible { background: rgba(30, 26, 22, 0.8); }
@keyframes mk-lightbox-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-lightbox__figure { animation: none; }
}

/* --- Category nav (feature 12, render.nav = sticky-sidebar) ----------------- */
/* Phones (default): a sticky horizontal chip strip at the top of the card —
   most menu views are phones, and it stays usable for jumping between
   categories. Desktop (min-width 48rem): a sticky rail left of the sections.
   Plain anchors without JS; menukit-menu.js adds the scroll-spy highlight. */

.mk-nav {
  position: sticky;
  top: 0;
  z-index: 4;
  margin: 0 0 1.25rem;
  background: var(--mk-nav-bg);
}
.mk-nav__list {
  display: flex;
  gap: 0.25rem;
  margin: 0;
  padding: 0.5rem 0;
  list-style: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mk-nav__list::-webkit-scrollbar { display: none; }
.mk-nav__link {
  display: block;
  padding: 0.3125rem 0.6875rem;
  border-radius: 999px;
  color: var(--mk-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
}
.mk-nav__link:hover { color: var(--mk-text); }
.mk-nav__link.is-active { background: var(--mk-accent); color: #fff; }

/* Anchored sections stop below the sticky strip, not under it. */
.mk-section[id] { scroll-margin-top: 3.5rem; }

@media (min-width: 46rem) { /* aligned with the hover-reveal stage breakpoint (preview sheet is 47.5rem) */
  .mk-menu--nav { max-width: 58rem; }
  .mk-menu--nav .mk-menu__body {
    display: grid;
    grid-template-columns: 10.5rem minmax(0, 1fr);
    gap: 0 2.25rem;
    align-items: start;
  }
  .mk-menu--nav .mk-nav {
    position: sticky;
    top: 1.5rem;
    z-index: auto;
    margin: 0;
    background: none;
  }
  .mk-menu--nav .mk-nav__list {
    flex-direction: column;
    gap: 0.125rem;
    padding: 0;
    overflow: visible;
  }
  .mk-menu--nav .mk-nav__link {
    padding: 0.25rem 0.75rem;
    border-left: 2px solid transparent;
    border-radius: 0;
    text-align: left;
    white-space: normal;
  }
  .mk-menu--nav .mk-nav__link.is-active {
    background: none;
    border-left-color: var(--mk-accent);
    color: var(--mk-text);
  }
  .mk-menu--nav .mk-section[id] { scroll-margin-top: 1rem; }
}

/* --- Responsive + print ----------------------------------------------------- */

@media (max-width: 30rem) {
  .mk-menu__title { font-size: 1.35rem; }
  .mk-menu__head { margin-bottom: 1.5rem; }
  .mk-item__desc, .mk-item__en { max-width: none; }
}

@media print {
  .mk-menu { max-width: none; color: #000; }
  .mk-langwrap { max-width: none; }
  .mk-langswitch { display: none; }
  .mk-item__leader, .mk-variant__leader { border-bottom-color: #999; }
  .mk-badge { color: #000; border-color: #999; }
  .mk-item--unavailable { display: none; }
  .mk-item__figure { max-width: 120px; }
  .mk-item__img { animation: none; opacity: 1; }
  /* Interactive surfaces have no meaning on paper (feature 12). */
  .mk-nav, .mk-zoom, .mk-reveal, .mk-stage, .mk-lightbox { display: none !important; }
  .mk-menu--hover-reveal .mk-menu__body { display: block; height: auto; }
  .mk-menu--hover-reveal .mk-menu__sections { height: auto; overflow: visible; }
  .mk-menu--nav .mk-menu__body { display: block; }
  .mk-item__name--reveal { text-decoration: none; }
  .mk-item--thumb { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .mk-thumb__img { animation: none; opacity: 1; }
}