/* Treats menu page.
   Used on: /treats-menu/.
   Forum Homini website, editable IIS version v016 20261109 081746. Generated with Claude Opus 5.5. */
.tm[data-c-treats-menu-page].tm {
  margin-block-start: 0 !important;
  padding-block-start: 24px !important;
}
/* black only, no boxes; each treat: its photo, the name in gold, the price, what it comes with, Order */
.tm[data-c-treats-menu-page] {
  display: grid;
  justify-items: center;
  gap: var(--gap-heading);
  padding: calc(var(--header-h, 80px) + var(--gap-heading)) var(--margin, 20px) var(--gap-section);
  background: #000;
  color: #f6efe4;
  text-align: center;
}
.tm[data-c-treats-menu-page] > [data-c-treats-menu-page],
.tm__item[data-c-treats-menu-page] > [data-c-treats-menu-page] {
  margin: 0;
}
.tm__title[data-c-treats-menu-page],
.tm__name[data-c-treats-menu-page] {
  font-family: var(--face-display);
  font-weight: 600;
  line-height: 1.1;
  background:
    linear-gradient(
      180deg,
      #fff3cf,
      #f3d792 40%,
      #c9953f 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tm__title[data-c-treats-menu-page] {
  font-size: var(--fs-xl);
}
.tm__intro[data-c-treats-menu-page],
.tm__with[data-c-treats-menu-page],
.tm__note[data-c-treats-menu-page],
.tm__call[data-c-treats-menu-page] {
  font-family: var(--face-text);
  font-size: var(--fs-m);
  line-height: 1.6;
}
.tm__list[data-c-treats-menu-page] {
  display: grid;
  gap: var(--gap-section);
  inline-size: 100%;
  max-inline-size: 64rem;
  padding: 0;
  list-style: none;
}
/* (owner, 26 Oct 2026: "each picture on its own and not having two one next to each other … make the picture bigger"):
     one treat at a time, one under the other, its photo large; the price and Order beside each other under it */
.tm__list[data-c-treats-menu-page] {
  max-inline-size: 52rem;
}
@media (min-width: 900px) {
  .tm__list[data-c-treats-menu-page] {
    grid-template-columns: minmax(0, 1fr);
  }
  /* (owner, 26 Oct 2026: "Picnic for two must be in line with the first line of the other one … the other photo … in line at the
       top"): the names start on the same line, the photos start level under them */
  .tm__name[data-c-treats-menu-page] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-block-size: 2.2em;
  }
}
.tm__item[data-c-treats-menu-page] {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--gap-item);
}
/* (6 Nov 2026) inline-size was 100%; always overridden by css/site.css, so its value is here now */
.tm__item[data-c-treats-menu-page] img[data-c-treats-menu-page] {
  display: block;
  inline-size: 100vw;
  block-size: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0;
}
.tm__name[data-c-treats-menu-page] {
  font-size: var(--fs-l);
}
.tm__buy[data-c-treats-menu-page] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.tm__buy[data-c-treats-menu-page] > [data-c-treats-menu-page] {
  margin: 0;
}
.tm__price[data-c-treats-menu-page] {
  font-family: var(--face-display);
  font-size: var(--fs-l);
  color: #f3d792;
}
.tm__h[data-c-treats-menu-page] {
  color: #e6c27a;
}
.tm__note[data-c-treats-menu-page] {
  font-size: var(--fs-s);
  opacity: 0.85;
}
/* (6 Nov 2026) min-block-size was 48px; always overridden by css/site.css, so its value is here now */
.tm__btn[data-c-treats-menu-page],
.tm__btn[data-c-treats-menu-page]:visited {
  display: inline-flex;
  align-items: center;
  min-block-size: 36px;
  padding-inline: var(--s-5);
  border-radius: var(--r-pill);
  background:
    linear-gradient(
      180deg,
      #fff3cf,
      #f3d792 40%,
      #c9953f 85%);
  color: #1d1405;
  font-family: var(--face-text);
  font-size: var(--fs-s);
  font-weight: var(--wt-label, 600);
  text-decoration: none;
}
.tm__call[data-c-treats-menu-page] a[data-c-treats-menu-page],
.tm__all[data-c-treats-menu-page],
.tm__all[data-c-treats-menu-page]:visited {
  color: #f3d792;
  font-family: var(--face-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tm__all[data-c-treats-menu-page] {
  font-size: var(--fs-s);
}
[data-c-treats-menu-page]:is(.tm__btn, .tm__call a, .tm__all):focus-visible {
  outline: 2px solid #f3d792;
  outline-offset: 3px;
}