/* v2/css/shop-hub.css — the menu hub (menu/): four category cards, each a link to its own page. Brand tokens only. */
.mh-body { padding-top: clamp(20px, 3vh, 36px); padding-bottom: clamp(48px, 8vh, 96px); }
.mh-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(14px, 2vw, 24px); margin: 0; padding: 0; list-style: none; }
.mh-card { display: flex; }
.mh-card__a {
  display: grid; grid-template-rows: auto 1fr; width: 100%; color: var(--ink); text-decoration: none;
  background: var(--field); border: 1px solid var(--line, rgb(0 0 0 / .14));
  transition: border-color .25s ease, transform .35s cubic-bezier(.2, .7, .2, 1);
}
.mh-card__a:hover { border-color: var(--ink); transform: translateY(-3px); }
.mh-card__a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.mh-card__media {
  display: grid; place-items: end center; height: clamp(170px, 18vw, 220px); margin: 18px 18px 0; overflow: hidden;
  border-radius: var(--r-niche); background: var(--sauge);
}
.mh-card__media img { width: 82%; height: 88%; object-fit: contain; object-position: center bottom; }
.mh-card__media--photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.mh-card__ico { width: 96px !important; height: 96px !important; align-self: center; color: var(--ink); }
.mh-card__body { display: grid; align-content: start; gap: 8px; padding: 18px 20px 22px; }
.mh-card__name { font: 400 clamp(22px, 1.7vw, 26px)/1.15 var(--font-sans); letter-spacing: -.005em; }
.mh-card__sub { font: 400 15px/1.5 var(--font-sans); color: var(--ink-2); }
.mh-card__price { font: 400 15px/1.3 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; }
.mh-card__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font: 400 13px/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; }
.mh-card__go svg { width: 16px; height: 16px; transition: transform .3s ease; }
.mh-card__a:hover .mh-card__go svg { transform: translateX(3px); }
.mh-note { max-width: 70ch; margin: 22px 0 0; font: 400 14px/1.55 var(--font-sans); color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .mh-card__a, .mh-card__go svg { transition: none; } .mh-card__a:hover { transform: none; } }