/** Shopify CDN: Minification failed

Line 123:72 Unexpected "("

**/
/* Design System Loja Z — cópia de @zedicoes/ds (packages/ds/src/styles.css). Sincronizar ao alterar o DS do site. */
/* ==============================================================================
 * ARQUIVO: styles.css
 * DESCRIÇÃO: Z Edições Design System — o único stylesheet. Tokens, base e camada
 *            de componentes das superfícies públicas (Home, Catálogo, Autor).
 * CHAMADO POR: apps/catalogo e apps/autor via `@zedicoes/ds/styles.css`;
 *              Home via cópia gerada por scripts/sync-ds-home.sh.
 * TRAZ (CHAMA/IMPORTA): Google Fonts (Bricolage Grotesque, Newsreader)
 * CONTRATO (RESPOSTA ESPERADA): custom properties em :root + classes utilitárias
 *   e de componente. Nenhum build: este arquivo é servido como está.
 *
 * Origem: proposta gerada no Claude Design (Ago/2026). As seções marcadas
 * "adição do repo" não vêm da proposta — fecham lacunas que o protótipo havia
 * resolvido com style inline. Ver _docs/sistemas/DESIGN_SYSTEM.md.
 * ============================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,700;12..96,800&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&display=swap');

:root {
  --color-bg: #f2eee5;          /* papel */
  --color-surface: #fbf8f1;     /* folha */
  --color-text: #17130f;        /* tinta */
  --color-accent: #d2181f;      /* vermelho Z */
  --color-accent-2: #2b4bb8;    /* azul caneta */
  --color-divider: color-mix(in srgb, #17130f 14%, transparent);

  /* Rampas tonais — uma única escala perceptual de luminosidade, para que o mesmo
     passo de qualquer papel carregue o mesmo peso visual.
     100–300 preenchimentos, 500 base, 700–900 tinta. */
  --color-neutral-100: #f7f4ec;
  --color-neutral-200: #ede8dc;
  --color-neutral-300: #dcd5c6;
  --color-neutral-400: #bfb7a6;
  --color-neutral-500: #9e9686;
  --color-neutral-600: #7d7567;
  --color-neutral-700: #5c554a;
  --color-neutral-800: #3d382f;
  --color-neutral-900: #221f1a;

  --color-accent-100: #fceceb;
  --color-accent-200: #f9d2cf;
  --color-accent-300: #f2a5a2;
  --color-accent-400: #e56662;
  --color-accent-500: #d2181f;
  --color-accent-600: #b00e17;
  --color-accent-700: #8b0b12;
  --color-accent-800: #66080d;
  --color-accent-900: #420709;

  --color-accent-2-100: #ebeffb;
  --color-accent-2-200: #d2daf5;
  --color-accent-2-300: #a8b6ea;
  --color-accent-2-400: #7186d6;
  --color-accent-2-500: #2b4bb8;
  --color-accent-2-600: #223c96;
  --color-accent-2-700: #1a2e73;
  --color-accent-2-800: #132152;
  --color-accent-2-900: #0c1533;

  --font-heading: "Bricolage Grotesque", system-ui, sans-serif;
  --font-heading-weight: 800;
  --font-body: "Bricolage Grotesque", system-ui, sans-serif;
  --font-reading: "Newsreader", Georgia, serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  /* Ritmo de página: blocos maiores (seções, detalhe, rodapé) */
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;

  /* Elevação — discreta por padrão; o deslocamento duro é a voz impressa,
     reservada para a capa em tamanho de herói. */
  --shadow-sm: 0 1px 0 color-mix(in srgb, #17130f 10%, transparent);
  --shadow-md: 0 2px 8px color-mix(in srgb, #17130f 10%, transparent);
  --shadow-lg: 0 16px 40px color-mix(in srgb, #17130f 16%, transparent);
  --shadow-print: 8px 8px 0 var(--color-text);

  /* — adição do repo: escala tipográfica —
     A proposta cravava o font-size direto em h1..h6. Aqui vira token para que
     componente e página leiam do mesmo lugar. Valores idênticos aos originais. */
  --text-h1: 64px;
  --text-h2: 40px;
  --text-h3: 26px;
  --text-h4: 19px;
  --text-h5: 16px;
  --text-h6: 12px;
  --text-body: 15px;
  --text-reading: 18px;
  --text-meta: 12px;
  --text-micro: 11px;

  /* Heróis fluidos — o protótipo escrevia clamp() solto em cada tela. */
  --text-hero: clamp(48px, 6vw, 96px);      /* índice de autores, índice do catálogo */
  --text-hero-md: clamp(44px, 5.4vw, 80px); /* faixa de destaque */
  --text-hero-sm: clamp(40px, 4.6vw, 72px); /* ficha de livro */

  /* — adição do repo: página —
     Repetido 6 vezes inline no protótipo. */
  --page-max: 1440px;
  --page-pad: 40px;

  /* — adição do repo: breakpoints —
     Media query não lê custom property. Estes tokens são o SSOT para JS e para a
     documentação; as @media abaixo repetem o literal de propósito. */
  --bp-lg: 1100px;
  --bp-md: 900px;
}

/* Shopify/Dawn: não resetar html/body/h*/a globais — o tema usa rem (62.5%).
   Tokens :root + classes (.btn, .tag, .prose, .site-footer…) seguem intactos. */
.z-page h1, .z-page h2, .z-page h3, .z-page h4,
.site-footer h6,
.z-campaign h2,
.z-info-card h3 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.text-muted { color: var(--color-neutral-600); }
::selection { background: var(--color-accent-200); }

/* — voz de leitura: bio, sinopse, qualquer bloco de texto corrido — */
.prose { font-family: var(--font-reading); font-size: var(--text-reading); line-height: 1.55; max-width: 62ch; }
.prose p { margin: 0 0 var(--space-4); }

/* — rótulos e réguas — */
.kicker {
  display: block; font-size: var(--text-micro); font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--color-accent);
}
.hr, .rule { height: 1px; border: 0; margin: var(--space-6) 0; background: var(--color-text); opacity: 0.85; }
.rule-thin { background: var(--color-divider); opacity: 1; }

/* — botões — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-body); font-weight: 700; font-size: 14px; line-height: 1.2;
  color: var(--color-text); background: transparent;
  border: 1px solid transparent; padding: 11px 18px; border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: #fff; }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-text); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent-700); padding-inline: var(--space-2); }
.btn-ghost:hover { background: var(--color-accent-100); }
.btn-ghost:active { background: var(--color-accent-200); }
.btn-icon { width: 40px; height: 40px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — formulários — */
.field > label { display: block; font-size: var(--text-meta); font-weight: 700; letter-spacing: 0.04em; margin-bottom: 6px; color: var(--color-neutral-700); }
.input {
  width: 100%; min-height: 44px; padding: 10px 14px; font: inherit; font-size: var(--text-body);
  color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-text); border-radius: var(--radius-md);
}
.input::placeholder { color: var(--color-neutral-500); }
.input:hover { border-color: var(--color-accent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 96px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: var(--text-body); }
.radio input, .seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.radio .dot { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 1.5px solid var(--color-text); }
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot { border-color: var(--color-accent); background: var(--color-accent); box-shadow: inset 0 0 0 4px var(--color-surface); }
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg { display: inline-flex; overflow: hidden; border: 1px solid var(--color-text); border-radius: var(--radius-md); }
.seg-opt { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; font-size: 14px; font-weight: 700; cursor: pointer; }
.seg-opt + .seg-opt { border-left: 1px solid var(--color-text); }
.seg-opt:has(input:checked) { background: var(--color-text); color: var(--color-bg); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4); border-radius: var(--radius-md);
  background: var(--color-surface); border: 1px solid var(--color-divider);
}
.card-kicker { font-size: var(--text-micro); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); }
.card-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: var(--text-h4); line-height: 1.1; letter-spacing: -0.015em; }
.card-body { margin: 0; font-family: var(--font-reading); font-size: var(--text-body); color: var(--color-neutral-700); flex: 1; }
.card-meta { display: flex; align-items: center; gap: 8px; font-size: var(--text-meta); color: var(--color-neutral-600); }
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: var(--text-micro); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 8px;
  border-radius: var(--radius-sm);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-200); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid currentColor; color: var(--color-accent-700); }

/* — capa (CONTRATO — só isto):
 *   1. Miniatura clicável = CoverLink (.z-cover). Imagem = Art (.art). Sem wrapper paralelo.
 *   2. NUNCA cortar: object-fit: contain !important. Letterbox ok. Crop = infração.
 *   Avatar (retrato) é a única exceção com cover.
 */
.art {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 1; /* miniatura padrão; Art ratio={null} → .art-natural */
  /* sem overflow:hidden — cortar capa é infração; contain + min-size cuida do encaixe */
  background: color-mix(in srgb, var(--color-bg) 90%, #000);
  box-shadow: 0 0 0 1px var(--color-divider);
}
.art img {
  /* min 0: grid não força altura intrínseca da imagem (que cortava com overflow) */
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain !important;
  object-position: center;
}
.art-print { box-shadow: var(--shadow-print); }
/* Destaque/ficha: proporção natural (Art ratio={null} → .art-natural) */
.art.art-natural {
  aspect-ratio: auto;
  height: fit-content;
}
.art.art-natural img {
  height: auto;
}
.avatar { width: 56px; height: 56px; flex: none; border-radius: 50%; overflow: hidden; background: var(--color-neutral-200); box-shadow: 0 0 0 1px var(--color-divider); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-initial {
  display: grid; place-items: center; height: 100%; background: var(--color-surface);
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 22px; color: var(--color-accent);
}

/* — preço — */
.price { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 22px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* — navegação de site (UM cabeçalho para todas as superfícies) — */
.site-header {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-3) var(--page-pad);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-text);
  position: sticky;
  top: 0;
  z-index: 5;
}
.site-header-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
  flex: none;
}
.site-header-brand img {
  height: 40px;
  width: 40px;
  object-fit: contain;
}
.site-header-divider {
  width: 1px;
  height: 22px;
  background: var(--color-divider);
  flex: none;
}
.site-header-title {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: var(--text-h5);
  letter-spacing: -0.02em;
  text-decoration: none;
  color: inherit;
  flex: none;
}
.site-header-nav {
  display: flex;
  gap: 18px;
  align-items: center;
}
/* Tipografia idêntica em todos os itens — hover/current só mudam a cor. */
.site-header-nav a {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  font-optical-sizing: none;
  font-variation-settings: "opsz" 14, "wght" 700;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: inherit;
  text-decoration: none;
  text-decoration-thickness: 0;
}
.site-header-nav a:hover,
.site-header-nav a:focus-visible {
  color: inherit;
  font-weight: 700;
  font-variation-settings: "opsz" 14, "wght" 700;
  text-decoration: none;
  text-decoration-thickness: 0;
}
.site-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
  flex-wrap: wrap;
}
.site-header-menu-toggle { display: none; }
.site-header-panel {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--color-text) 40%, transparent);
}
.site-header-panel-scrim {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
  cursor: default;
}
.site-header-panel-inner {
  position: absolute;
  top: 0;
  right: 0;
  width: min(320px, 100%);
  height: 100%;
  background: var(--color-surface);
  border-left: 1px solid var(--color-text);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.site-header-panel-inner .z-link {
  font-size: var(--text-body);
  padding: var(--space-2) 0;
}
@media (max-width: 900px) {
  .site-header-nav { display: none; }
  .site-header-actions--desktop { display: none; }
  .site-header-menu-toggle {
    display: inline-flex;
    margin-left: auto;
  }
}

/* — faixa hero (UM estilo para todas as superfícies) — */
.site-band {
  background: var(--color-accent);
  color: #fff;
}
.site-band .kicker { color: #fff; opacity: 0.85; }
.site-band h1,
.site-band h2,
.site-band .prose { color: #fff; }
.site-band .prose {
  opacity: 0.94;
  font-family: var(--font-reading);
  font-size: var(--text-reading);
  margin-top: 2em;
}
.site-band-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: 72px;
  align-items: center;
  padding: 56px var(--page-pad) 64px;
  max-width: var(--page-max);
  margin: 0 auto;
}
.site-band-title {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: var(--text-hero-md);
  letter-spacing: -0.025em;
  line-height: 0.94;
  margin: var(--space-4) 0 0;
}
.site-band-copy > .prose { margin-top: 2em; }
.site-band-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}
/* Hero SiteBand: box + sombra acompanham a proporção real da capa. */
.site-band .art {
  max-width: min(400px, 100%);
  width: 100%;
  height: fit-content;
  aspect-ratio: auto;
  display: block;
  background: transparent;
  overflow: visible;
}
.site-band .art img {
  width: 100%;
  height: auto;
  display: block;
  object-position: center;
}
.site-band .art.art-empty {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, #000 12%, transparent);
}
.btn-on-accent {
  background: #fff;
  color: var(--color-accent);
  border-color: #fff;
  text-decoration: none;
}
.btn-on-accent:hover { background: var(--color-accent-100); }
.btn-outline-light {
  background: transparent;
  border-color: #fff;
  color: #fff;
  text-decoration: none;
}
.btn-outline-light:hover { background: color-mix(in srgb, #fff 14%, transparent); }
@media (max-width: 1100px) {
  .site-band-inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
}

/* — cabeçalho de seção (UM ritmo de título) — */
.site-section { padding-top: var(--space-16); }
.site-section-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-text);
  margin-bottom: var(--space-8);
}
.site-section-head h1,
.site-section-head h2 { margin: 0; }
.site-section-head .site-section-actions,
.site-section-head .cat-section-head-actions,
.site-section-head > .z-link,
.site-section-head > .tag {
  margin-left: auto;
  flex-shrink: 0;
}
.site-section-body { padding-top: var(--space-8); }

/* — rodapé de site (UM rodapé para todas as superfícies) — */
.site-footer {
  border-top: 1px solid var(--color-text);
  background: var(--color-surface);
  margin-top: 96px;
}
.site-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: 48px;
  padding: 56px var(--page-pad);
  max-width: var(--page-max);
  margin: 0 auto;
}
.site-footer-brand img {
  height: 96px;
  width: auto;
}
.site-footer-brand .prose {
  margin-top: var(--space-4);
  font-family: var(--font-reading);
  font-size: var(--text-reading);
  color: var(--color-neutral-700);
  max-width: 34ch;
}
.site-footer-emails {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-3);
  font-size: var(--text-body);
  font-weight: 700;
}
.site-footer-emails a { color: inherit; text-decoration: none; }
.site-footer-emails a:hover { color: var(--color-accent); }
.site-footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.site-footer-col h6 { margin: 0 0 var(--space-1); }
.site-footer-col .z-link {
  font-size: var(--text-body);
  font-weight: 500;
}
.site-footer-copy {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-pad) 40px;
  font-size: var(--text-meta);
  color: var(--color-neutral-600);
}
.site-footer-social {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  margin-top: var(--space-4);
}
.site-footer-social a { color: var(--color-text); text-decoration: none; }
@media (max-width: 900px) {
  .site-footer-grid { grid-template-columns: minmax(0, 1fr); }
}

/* — navegação legada (Nav primitivo; preferir .site-header) — */
.nav {
  display: flex; align-items: center; gap: var(--space-6);
  padding: var(--space-3) var(--space-6);
  background: var(--color-bg); border-bottom: 1px solid var(--color-text);
}
.nav-brand { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 20px; letter-spacing: -0.02em; margin-right: auto; }
.nav a { color: inherit; text-decoration: none; font-size: 14px; font-weight: 700; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* — tabelas — */
.table { width: 100%; border-collapse: collapse; font-size: var(--text-body); }
.table th {
  text-align: left; font-size: var(--text-micro); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-neutral-700); padding: var(--space-2); border-bottom: 1px solid var(--color-text);
}
.table td { padding: var(--space-2); border-bottom: 1px solid var(--color-divider); }
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* — modal — */
.dialog-backdrop { position: fixed; inset: 0; display: grid; place-items: center; padding: var(--space-6); background: color-mix(in srgb, var(--color-neutral-900) 55%, transparent); }
.dialog { width: min(460px, 100%); display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-lg); }
.dialog-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: var(--text-h3); letter-spacing: -0.02em; }
.dialog-body { font-family: var(--font-reading); font-size: 16px; color: var(--color-neutral-800); }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* ==============================================================================
 * Adições do repo — nada abaixo veio da proposta do Claude Design.
 * Cada bloco substitui um style inline que o protótipo repetia.
 * ============================================================================== */

/* — página: sangria à esquerda, medida máxima de 1440 — */
.z-page { max-width: var(--page-max); margin: 0 auto; padding-inline: var(--page-pad); }
.z-nav { position: sticky; top: 0; z-index: 5; }

/* — grade —
   .z-hero  : conteúdo + arte, a arte cede primeiro
   .z-cols-* : colunas de leitura, colapsam em uma
   .z-grid-* : grade de itens, colapsa para duas antes de uma */
.z-hero, .z-cols-2, .z-cols-3, .z-grid-3, .z-grid-4 { display: grid; gap: var(--space-8); align-items: start; }
.z-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: var(--space-16); }
.z-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.z-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.z-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.z-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1100px) {
  .z-hero, .z-cols-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .z-cols-3 { grid-template-columns: minmax(0, 1fr); }
  .z-grid-3, .z-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root { --page-pad: var(--space-6); }
}

/* — linha clicável: índice de autores, lista de coleções —
   A seta só aparece no hover e no foco de teclado. */
.z-row {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--color-divider);
  color: inherit; text-decoration: none; cursor: pointer;
}
.z-row-name {
  flex: 1; min-width: 0;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: var(--text-h3); line-height: 1.1; letter-spacing: -0.02em;
}
.z-row-meta { font-size: var(--text-meta); color: var(--color-neutral-600); }
.z-row-arrow { flex: none; opacity: 0; color: var(--color-accent); transition: opacity 150ms, transform 150ms; }
.z-row:hover .z-row-name, .z-row:focus-visible .z-row-name { color: var(--color-accent); }
.z-row:hover .z-row-arrow, .z-row:focus-visible .z-row-arrow { opacity: 1; transform: translateX(3px); }

/* — capa clicável: grade de livros (CoverLink / HTML .z-cover) — */
.z-cover { display: block; color: inherit; text-decoration: none; cursor: pointer; }
.z-cover-media { position: relative; }
.z-cover-badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
}
.z-cover-title {
  margin-top: var(--space-3);
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: var(--text-h4); line-height: 1.1; letter-spacing: -0.015em;
}
.z-cover-meta { font-size: var(--text-meta); color: var(--color-neutral-600); }
.z-cover:hover .art, .z-cover:focus-visible .art { box-shadow: 0 0 0 1px var(--color-text); }
.z-cover:hover .z-cover-title, .z-cover:focus-visible .z-cover-title { color: var(--color-accent); }

/* — link de navegação: sem sublinhado, tinge no hover — */
.z-link { color: inherit; text-decoration: none; font-weight: 700; }
.z-link:hover { color: var(--color-accent); text-decoration: none; }

/* — capa ausente: o estado real quando não há arte —
   Nada de imagem de exemplo; o vazio é a folha com o fio de 1px. */
.art-empty { display: grid; place-items: center; min-height: 120px; color: var(--color-neutral-400); }

@media (prefers-reduced-motion: reduce) {
  .z-row-arrow { transition: none; }
}