/* Header, hero, cards, buttons, notices — the design system's components. */

/* --- Logo --- */
.tm-logo { display: block; color: var(--tm-text); }
.tm-logo svg { display: block; }
/* Clear space: 15% of the logo's width, on all four sides. Nothing enters it. */
.tm-header__brand a { display: inline-block; padding: calc(var(--tm-logo-width, 220px) * 0.15); margin: calc(var(--tm-logo-width, 220px) * -0.15); }

/* --- Announcement bar --- */
.tm-announce {
  background: var(--tm-action);
  color: var(--tm-on-action);
  text-align: center;
  padding: var(--tm-space-2) var(--tm-space-4);
}
.tm-announce__text { margin: 0; font-size: 14px; line-height: 20px; }

/* --- Header --- */
.tm-header { background: var(--tm-surface); border-bottom: 1px solid var(--tm-hairline); }
.tm-header__inner {
  display: flex;
  align-items: center;
  gap: var(--tm-space-5);
  padding-block: var(--tm-space-4);
}
.tm-header__brand { margin: 0; flex: 0 0 auto; }
.tm-header__cart { margin: 0 0 0 auto; font-weight: 700; }
.tm-header__cart a { text-decoration: none; }
.tm-header__count { font-weight: 400; }
.tm-header__toggle { display: none; background: none; border: 2px solid var(--tm-text); padding: var(--tm-space-2) var(--tm-space-3); font-weight: 700; cursor: pointer; }

/* --- Nav --- */
.tm-nav__list { display: flex; flex-wrap: wrap; gap: var(--tm-space-5); list-style: none; margin: 0; padding: 0; }
.tm-nav__list a {
  display: inline-block;
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  text-decoration: none;
  padding-bottom: var(--tm-space-1);
  border-bottom: 2px solid transparent;
}
.tm-nav__list a:hover,
.tm-nav__list .current-menu-item > a { border-bottom-color: var(--tm-text); text-decoration: none; }

/* --- Buttons: one filled action per view, everything else is a text link --- */
.tm-btn {
  display: inline-block;
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
  border: 2px solid transparent;
  border-radius: var(--tm-radius-square);
  cursor: pointer;
  text-decoration: none;
}
.tm-btn--primary {
  background: var(--tm-action);
  color: var(--tm-on-action);
  border-color: var(--tm-action);
  padding: var(--tm-space-3) var(--tm-space-5);
}
.tm-btn--primary:hover { text-decoration: none; opacity: 0.9; }
.tm-btn--text { background: none; color: var(--tm-text); padding: var(--tm-space-3) var(--tm-space-2); }
.tm-btn[disabled], .tm-btn.is-disabled { opacity: 0.45; cursor: not-allowed; }

/* --- Hero --- */
.tm-hero {
  background: var(--tm-surface-panel);
  padding: var(--tm-space-6);
}
.tm-hero__title { margin: 0; }
.tm-hero__support { margin: var(--tm-space-4) 0 0; max-width: 46ch; }
.tm-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tm-space-4); margin: var(--tm-space-6) 0 0; }
.tm-hero--media { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--tm-space-6); align-items: center; }
.tm-hero__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* --- Front page sections --- */
.tm-section { margin-top: var(--tm-space-6); }
.tm-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--tm-space-4); }
.tm-section__title { margin: 0 0 var(--tm-space-5); }
.tm-section__more { white-space: nowrap; }

.tm-tiles__list { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--tm-space-4); list-style: none; margin: 0; padding: 0; }
.tm-tile { background: var(--tm-surface-panel); border: 1px solid var(--tm-hairline); }
.tm-tile__link { display: block; height: 100%; text-decoration: none; }
.tm-tile__link:hover .tm-tile__name { text-decoration: underline; }
.tm-tile__media { aspect-ratio: 1 / 1; background: var(--tm-brand-cream); overflow: hidden; }
.tm-tile__media img { width: 100%; height: 100%; object-fit: cover; }
.tm-tile__name { margin: var(--tm-space-3) var(--tm-space-4) 0; }
.tm-tile__cta { display: block; margin: var(--tm-space-1) var(--tm-space-4) var(--tm-space-4); text-decoration: underline; text-underline-offset: 3px; }

.tm-strip { background: var(--tm-surface-panel); margin: var(--tm-space-6) 0 0; padding: var(--tm-space-5); text-align: center; }

.tm-steps__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--tm-space-5); list-style: none; margin: 0; padding: 0; counter-reset: tm-step; }
.tm-step { border-top: 1px solid var(--tm-hairline); padding-top: var(--tm-space-4); counter-increment: tm-step; }
.tm-step__title { margin: 0 0 var(--tm-space-2); }
.tm-step__title::before { content: counter(tm-step) ". "; }
.tm-step__body { margin: 0; }
.tm-steps__details { display: grid; grid-template-columns: max-content 1fr; column-gap: var(--tm-space-3); row-gap: var(--tm-space-2); margin: var(--tm-space-5) 0 0; }
.tm-steps__details dt { font-weight: 700; }
.tm-steps__details dd { margin: 0; }

/* --- Product card --- */
.tm-card {
  background: var(--tm-surface-panel);
  border: 1px solid var(--tm-hairline);
  list-style: none;
}
.tm-card__link { display: block; text-decoration: none; height: 100%; }
.tm-card__link:hover { text-decoration: none; }
.tm-card__link:hover .tm-card__title { text-decoration: underline; }
.tm-card__media { aspect-ratio: 1 / 1; background: var(--tm-brand-cream); overflow: hidden; }
.tm-card__media img { width: 100%; height: 100%; object-fit: cover; }
.tm-card__body { padding: var(--tm-space-5); display: flex; flex-direction: column; gap: var(--tm-space-2); }
.tm-card__title { margin: 0; }
.tm-card__facts { list-style: none; margin: 0; padding: 0; }
.tm-card__foot { display: flex; align-items: baseline; justify-content: space-between; gap: var(--tm-space-3); margin: var(--tm-space-2) 0 0; }
.tm-card__stock { margin: 0; font-weight: 700; }

/* --- Pickup notice, on-site version of the emailed one --- */
.tm-notice {
  background: var(--tm-surface-panel);
  border: 1px solid var(--tm-hairline);
  padding: var(--tm-space-6);
  max-width: 420px;
}
.tm-notice__rows { display: grid; grid-template-columns: max-content 1fr; column-gap: var(--tm-space-3); row-gap: var(--tm-space-2); margin: 0; }
.tm-notice__rows dt { font-weight: 700; }
.tm-notice__rows dd { margin: 0; }

/* --- Footer --- */
.tm-footer { background: var(--tm-surface-panel); margin-top: var(--tm-space-6); padding-block: var(--tm-space-6); }
.tm-footer__list { display: flex; flex-wrap: wrap; gap: var(--tm-space-5); list-style: none; margin: 0 0 var(--tm-space-4); padding: 0; }
.tm-footer__legal { margin: 0; }

@media (max-width: 860px) {
  .tm-header__inner { flex-wrap: wrap; }
  .tm-header__toggle { display: block; order: 2; margin-left: auto; }
  .tm-header__cart { order: 3; margin-left: var(--tm-space-4); }
  .tm-nav { order: 4; flex-basis: 100%; display: none; }
  .tm-nav.is-open { display: block; }
  .tm-nav__list { flex-direction: column; gap: var(--tm-space-3); padding-top: var(--tm-space-4); }
  .tm-hero { padding: var(--tm-space-5); }
  .tm-hero--media { grid-template-columns: 1fr; }
  .tm-tiles__list { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .tm-tiles__list { grid-template-columns: repeat(2, 1fr); }
  .tm-steps__list { grid-template-columns: 1fr; }
}

/* The lockup never drops below 220px, so on a phone it takes the whole first row and the
   menu toggle and cart move to a second row. Without this the cart overflows the viewport. */
@media (max-width: 640px) {
  .tm-header__brand { flex-basis: 100%; }
  .tm-header__inner { row-gap: var(--tm-space-3); }
}

/* In the Ink theme, surface-panel equals surface: panels are separated by a hairline,
   never by a shade. See design-system/BRAND.md. */
[data-theme='ink'] .tm-hero,
[data-theme='ink'] .tm-footer { border: 1px solid var(--tm-hairline); }