/* Catálogo /cafes/ · mesmas regras da marca (radius 0, sem sombra, sem gradiente) */

.feed { padding-bottom: var(--section); }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; padding: var(--space-lg) 0; color: var(--texto); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current] { color: var(--verde); font-weight: 600; }

/* Cabeçalho: título + busca */
.feed-head { display: grid; grid-template-columns: auto minmax(0, 560px); justify-content: space-between; align-items: end; gap: var(--space-lg) var(--space-xl); padding-bottom: var(--space-lg); }
.feed-lead { margin-top: var(--space-sm); }
.feed-search { position: relative; display: flex; align-items: center; }
.feed-search svg { position: absolute; left: 16px; width: 22px; height: 22px; fill: none; stroke: var(--verde); stroke-width: 2; pointer-events: none; }
.feed-search input { width: 100%; min-height: 50px; padding: 0 48px 0 50px; border: 2px solid var(--verde); background: var(--branco); color: var(--verde); font-size: 17px; }
.feed-search input::placeholder { color: var(--taupe); }
.feed-search input::-webkit-search-cancel-button { display: none; }
.feed-search input:focus { outline: 3px solid var(--mel); outline-offset: 0; }
.feed-clear-q { position: absolute; right: 8px; width: 40px; height: 40px; font-size: 26px; line-height: 1; color: var(--verde); }

/* Atalhos de linha */
.feed-lines { display: flex; gap: var(--space-sm); flex-wrap: wrap; padding: var(--space-md) 0 var(--space-lg); border-top: 2px solid var(--verde); }
.fline { display: inline-flex; align-items: baseline; gap: 8px; min-height: 44px; padding: 10px 16px; text-decoration: none; font-weight: 600; border: 2px solid var(--verde); transition: background .2s, color .2s; }
.fline small { font-size: 12px; font-weight: 500; opacity: .75; }
.fline:hover { background: var(--verde); color: var(--rosa-umana); }
.fline.off { opacity: .4; pointer-events: none; border-style: dashed; }

/* Layout: filtros à esquerda, resultados à direita */
.feed-in { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: start; }
.filters-panel { position: sticky; top: calc(var(--header-h) + var(--bar-h) + 16px); max-height: calc(100vh - var(--header-h) - var(--bar-h) - 32px); overflow: auto; overscroll-behavior: contain; padding-right: 6px; }
.fp-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: var(--space-md); }
.fp-head h2 { font-size: 1.5rem; }
.fp-close, .fp-foot { display: none; }
.fgroup { border-top: 1px solid var(--linha-v); min-width: 0; }
/* cabeçalho do grupo: clique abre e fecha; o número mostra quantos estão marcados */
.fgroup summary { display: flex; align-items: center; gap: 8px; min-height: 48px; cursor: pointer; list-style: none; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--verde); }
.fgroup summary::-webkit-details-marker { display: none; }
.fgroup summary::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .25s var(--ease); }
.fgroup[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.fgroup summary small { min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; background: var(--verde); color: var(--rosa-umana); font-size: 11px; letter-spacing: 0; }
.fgroup summary:focus-visible { outline: 3px solid var(--mel); outline-offset: 2px; }
.fchips { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: var(--space-md); }
.fchip { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 12px; border: 1.5px solid var(--verde); background: var(--creme-claro); font-size: 14px; font-weight: 500; color: var(--verde); transition: background .2s, color .2s; }
.fchip i { width: 10px; height: 10px; background: var(--c); flex: none; }
.fchip small { font-size: 11px; opacity: .65; font-variant-numeric: tabular-nums; }
.fchip:hover { background: var(--rosa-umana); }
.fchip[aria-pressed="true"] { background: var(--verde); color: var(--rosa-umana); }
.fchip[aria-pressed="true"] small { opacity: .85; }
.fchip:disabled { opacity: .35; cursor: not-allowed; background: transparent; }

/* Barra de resultados */
.feed-bar { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; padding-bottom: var(--space-md); }
.feed-open { display: none; min-height: 46px; }
.feed-count { margin: 0 auto 0 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.feed-sort { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.feed-sort select { min-height: 46px; padding: 0 12px; border: 2px solid var(--verde); background: var(--creme-claro); color: var(--verde); font-weight: 600; }
.feed-active { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.feed-active:not(:empty) { padding-bottom: var(--space-lg); }
.achip { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 10px; background: var(--verde); color: var(--rosa-umana); font-size: 13px; font-weight: 600; }
.achip span[aria-hidden] { font-size: 17px; line-height: 1; }
.achip:hover { background: var(--verde-floresta); }
.aclear { font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; padding: 0 6px; }

/* Grupos por linha */
.fgrp { padding-bottom: clamp(32px, 4vw, 56px); scroll-margin-top: calc(var(--header-h) + var(--bar-h) + 16px); }
.fgrp-head { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--space-lg); align-items: baseline; padding: var(--space-md) 0 var(--space-lg); border-top: 2px solid var(--verde); }
.fgrp-name { font: 400 clamp(1.5rem, 2.4vw, 2.1rem) var(--font-display); line-height: 1; margin: 0; }
.fgrp-tag { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--verde-mata); }
.fgrp-text { grid-column: 1 / -1; margin: 0; color: var(--texto); max-width: 60ch; }
.feed-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-kitlist { margin: 0; font-size: 14px; color: var(--texto); }

.fgrp-soon { border: 2px dashed var(--verde); padding: var(--space-lg); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: var(--space-lg); align-items: end; }
.fgrp-soon .fgrp-head { border: 0; padding: 0; }
.soon-form { margin: 0; }
.soon-form input { border-color: var(--verde); color: var(--verde); background: var(--branco); }
.soon-form input::placeholder { color: var(--taupe); }

.feed-empty { border: 2px dashed var(--verde); padding: clamp(28px, 5vw, 56px); display: grid; gap: var(--space-md); justify-items: start; }
.feed-empty p { margin: 0; color: var(--texto); }

/* ---------- Responsivo ---------- */
@media (max-width: 1180px) { .feed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) {
  .feed-head { grid-template-columns: minmax(0, 1fr); }
  .feed-in { grid-template-columns: minmax(0, 1fr); }
  .feed-open { display: inline-flex; }
  /* filtros viram uma gaveta de baixo pra cima */
  .filters-panel {
    position: fixed; inset: auto 0 0 0; top: auto; z-index: 60; max-height: 88dvh; padding: 0;
    background: var(--creme); border-top: 2px solid var(--verde);
    display: flex; flex-direction: column; transform: translateY(105%); transition: transform .4s var(--ease); visibility: hidden;
  }
  .filters-panel.open { transform: none; visibility: visible; }
  .fp-head { padding: var(--space-md) var(--gutter); border-bottom: 1px solid var(--linha-v); }
  .fp-close { display: grid; }
  .fp-body { overflow: auto; padding: 0 var(--gutter); flex: 1; }
  .fp-foot { display: grid; grid-template-columns: auto 1fr; gap: var(--space-sm); padding: var(--space-md) var(--gutter) calc(var(--space-md) + env(safe-area-inset-bottom, 0px)); border-top: 2px solid var(--verde); background: var(--creme-claro); }
  html.fp-lock { overflow: hidden; }
  html.fp-lock body::after { content: ""; position: fixed; inset: 0; z-index: 55; background: color-mix(in srgb, var(--verde-profundo) 60%, transparent); }
  .fgrp-soon { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .feed-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .feed-sort span { display: none; }
  .feed-count { flex-basis: 100%; order: 3; margin: 0; font-size: 14px; }
  .fgrp-head { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .filters-panel { transition: none; } }

/* Únicos com a foto da linha */
.fgrp-soon { grid-template-columns: 160px minmax(0, 1fr) minmax(0, 380px); align-items: center; }
.soon-photo { width: 160px; height: 160px; object-fit: cover; }
@media (max-width: 960px) { .fgrp-soon { grid-template-columns: 120px minmax(0, 1fr); } .soon-photo { width: 120px; height: 120px; } .soon-form { grid-column: 1 / -1; } }