.skip-link {
  position: absolute; left: var(--space-4); top: -4rem;
  background: var(--red); color: #fff; padding: var(--space-3) var(--space-4);
  z-index: var(--z-modal); transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: var(--space-4); }

#app[data-transition='out'] { opacity: 0; transform: translateY(8px); }
#app[data-transition='in']  { opacity: 1; transform: none; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }

.btn {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  font-family: var(--font-display); font-weight: 700; font-size: var(--size-sm);
  letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn--primary { background: var(--red); color: #fff; }
.btn--primary:hover { background: var(--red-hot); }
.btn--primary:active { transform: translateY(1px); }

.crumbs {
  display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center;
  font-size: var(--size-sm); color: var(--text-muted); margin-bottom: var(--space-5);
}
.crumbs a:hover { color: var(--red-text); }

/* ── Back button, top of inner pages ── */
.backlink {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-4); padding: var(--space-2) var(--space-4) var(--space-2) var(--space-3);
  min-height: 40px;
  font-size: var(--size-xs); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--text-primary);
  border: 1px solid var(--surface-line); border-radius: 999px;
  background: var(--surface-raised);
  transition: border-color var(--dur-base, 200ms) ease, color var(--dur-base, 200ms) ease;
}
.backlink svg { transition: transform var(--dur-base, 200ms) ease; }
.backlink:hover { border-color: var(--red); color: var(--red-text); }
.backlink:hover svg { transform: translateX(-3px); }
.backlink:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.notfound .backlink { margin-bottom: var(--space-6); }
@media (prefers-reduced-motion: reduce) { .backlink, .backlink svg { transition: none; } .backlink:hover svg { transform: none; } }
.crumbs [aria-current] { color: var(--text-primary); }

.notfound { padding-block: var(--space-10); text-align: center; }
.notfound h1 { font-size: var(--size-3xl); margin-bottom: var(--space-4); }
.notfound p { color: var(--text-secondary); margin-bottom: var(--space-6); }

/* ── Reveal on enter. Applied by core/motion.js. ── */
.will-reveal {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
}
.will-reveal.is-revealed {
  opacity: 1;
  transform: none;
  transition:
    opacity 760ms var(--ease-out) var(--delay, 0ms),
    transform 760ms var(--ease-out) var(--delay, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .will-reveal { opacity: 1; transform: none; }
}

/* Layout stability: until the router has rendered a page into #app, the
   footer would sit just under the navbar and then jump away when the page
   arrives (measured CLS 0.28–0.40, "poor"). Reserving a viewport of height
   for the page keeps the footer below the fold from the first paint. */
#app { min-height: 100vh; min-height: 100svh; }

/* Shown when a page could not be loaded (offline, or an outdated tab). */
.page-error { padding: calc(var(--nav-height, 84px) + var(--space-8, 4rem)) 0 var(--space-8, 4rem); display: grid; gap: var(--space-4); justify-items: start; }
.page-error p { color: var(--text-secondary); }

/* ── Touch screens: comfortable tap targets ──────────────────────────
   Phones and tablets need roughly 44px of height to hit a link reliably.
   Breadcrumbs, footer links, the search icon and the product link were
   19–34px, which meant fiddly, missed taps. Only devices with a coarse
   pointer are affected, so the desktop layout is unchanged. */
@media (pointer: coarse) {
  .nav__icon { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .crumbs { row-gap: 2px; }
  .crumbs a { display: inline-block; padding: 9px 2px; }
  .footer__col a, .footer__link { padding-block: 8px; }
  .pcard__cta { display: inline-flex; align-items: center; min-height: 44px; }
  .pcard__name a, .catlist__item h2 a, .catlist__item h3 a { display: inline-block; padding-block: 11px; }
  .catlist__item { min-height: 88px; }
  .email-link { min-height: 44px; }
  .panel__link { min-height: 48px; display: flex; align-items: center; }
  .cert__actions .btn { min-height: 48px; }
}