@layer ec.patterns {
  .ec-discovery-section {
    padding-block: var(--ec-space-9);
  }

  .ec-discovery-section + .ec-discovery-section {
    padding-block-start: var(--ec-space-7);
  }

  .ec-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--ec-space-6);
    margin-block-end: var(--ec-space-6);
  }

  .ec-section-heading__copy {
    display: grid;
    gap: var(--ec-space-2);
  }

  .ec-section-heading__eyebrow {
    color: var(--ec-sys-color-primary);
    font-size: var(--ec-type-label-md-size);
    font-weight: var(--ec-font-weight-extrabold);
    letter-spacing: 0.08em;
    line-height: var(--ec-type-label-md-line);
    text-transform: uppercase;
  }

  .ec-section-heading__description {
    color: var(--ec-sys-color-on-surface-muted);
    font-size: var(--ec-type-body-lg-size);
    line-height: var(--ec-type-body-lg-line);
  }

  /* Busca sempre visível do catálogo: reutiliza .ec-field/.ec-field__control e
     o botão canônico; empilha no menor viewport e alinha campo + botão numa
     linha a partir de 640px. Vive no mesmo <form> do painel de filtros. */
  .ec-catalog-search {
    display: grid;
    gap: var(--ec-space-3);
    margin-block-end: var(--ec-space-5);
  }

  .ec-catalog-search__submit {
    width: 100%;
  }

  @media (min-width: 640px) {
    .ec-catalog-search {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: end;
    }

    .ec-catalog-search__submit {
      width: auto;
    }
  }

  .ec-filter-panel {
    margin-block-end: var(--ec-space-7);
    overflow: clip;
    border: var(--ec-border-width-thin) solid var(--ec-sys-color-outline-subtle);
    border-radius: var(--ec-radius-xl);
    background: var(--ec-sys-color-surface);
    box-shadow: var(--ec-elevation-1);
  }

  .ec-filter-panel__summary {
    display: flex;
    min-height: var(--ec-touch-target-min);
    padding: var(--ec-space-4) var(--ec-space-5);
    align-items: center;
    justify-content: space-between;
    gap: var(--ec-space-4);
    color: var(--ec-sys-color-on-surface-strong);
    cursor: pointer;
    font-size: var(--ec-type-title-md-size);
    font-weight: var(--ec-font-weight-bold);
    line-height: var(--ec-type-title-md-line);
    list-style: none;
  }

  .ec-filter-panel__summary::-webkit-details-marker {
    display: none;
  }

  .ec-filter-panel__summary::after {
    content: "+";
    display: grid;
    width: var(--ec-touch-target-min);
    height: var(--ec-touch-target-min);
    place-items: center;
    border-radius: var(--ec-radius-full);
    background: var(--ec-sys-color-interactive-subtle);
    color: var(--ec-sys-color-primary);
    font-size: var(--ec-type-title-lg-size);
    line-height: 1;
  }

  .ec-filter-panel[open] .ec-filter-panel__summary::after {
    content: "−";
  }

  .ec-filter-panel__body {
    padding: 0 var(--ec-space-5) var(--ec-space-5);
    border-block-start: var(--ec-border-width-thin) solid var(--ec-sys-color-divider);
  }

  .ec-filter-form {
    display: grid;
    gap: var(--ec-space-5);
    padding-block-start: var(--ec-space-5);
  }

  .ec-filter-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--ec-space-4);
  }

  .ec-filter-grid__field {
    grid-column: span 3;
  }

  .ec-filter-grid__dates {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ec-space-4);
  }

  .ec-filter-form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ec-space-3);
  }

  .ec-active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ec-space-2);
    margin-block: calc(var(--ec-space-3) * -1) var(--ec-space-6);
  }

  .ec-active-filters__label {
    color: var(--ec-sys-color-on-surface-muted);
    font-size: var(--ec-type-label-md-size);
    font-weight: var(--ec-font-weight-semibold);
    line-height: var(--ec-type-label-md-line);
  }

  .ec-chip {
    display: inline-flex;
    min-height: var(--ec-comp-chip-height);
    padding-inline: var(--ec-space-3);
    align-items: center;
    gap: var(--ec-space-2);
    border: var(--ec-border-width-thin) solid var(--ec-sys-color-outline-subtle);
    border-radius: var(--ec-radius-full);
    background: var(--ec-sys-color-surface);
    color: var(--ec-sys-color-on-surface);
    font-size: var(--ec-type-label-md-size);
    font-weight: var(--ec-font-weight-semibold);
    line-height: var(--ec-type-label-md-line);
  }

  .ec-chip--selected {
    border-color: var(--ec-sys-color-primary-container);
    background: var(--ec-sys-color-primary-container);
    color: var(--ec-sys-color-on-primary-container);
  }

  /* Chip removível: link que retira o próprio filtro do querystring. O rótulo
     é texto; o "x" é forma (ícone), nunca só cor. */
  .ec-chip--removable {
    padding-inline-end: var(--ec-space-2);
    text-decoration: none;
  }

  .ec-chip--removable:hover {
    border-color: var(--ec-sys-color-primary);
    text-decoration: none;
  }

  .ec-chip__label {
    overflow: hidden;
    max-width: 16rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ec-chip__remove {
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
    fill: currentColor;
  }

  .ec-empty-state {
    display: grid;
    justify-items: start;
    gap: var(--ec-space-3);
    padding: var(--ec-space-8);
    border: var(--ec-border-width-thin) dashed var(--ec-sys-color-outline);
    border-radius: var(--ec-radius-xl);
    background: var(--ec-sys-color-surface-subtle);
    color: var(--ec-sys-color-on-surface-muted);
  }

  .ec-empty-state__title {
    color: var(--ec-sys-color-on-surface-strong);
    font-size: var(--ec-type-title-lg-size);
    font-weight: var(--ec-font-weight-bold);
    line-height: var(--ec-type-title-lg-line);
  }

  .ec-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--ec-space-4);
    margin-block-start: var(--ec-space-7);
  }

  .ec-pagination__status {
    color: var(--ec-sys-color-on-surface-muted);
    font-size: var(--ec-type-label-lg-size);
    font-weight: var(--ec-font-weight-semibold);
    line-height: var(--ec-type-label-lg-line);
  }

  @media (max-width: 1023px) {
    .ec-filter-grid__field {
      grid-column: span 6;
    }
  }

  @media (max-width: 639px) {
    .ec-discovery-section {
      padding-block: var(--ec-space-8);
    }

    .ec-section-heading {
      align-items: start;
      flex-direction: column;
      gap: var(--ec-space-4);
    }

    .ec-filter-panel__summary,
    .ec-filter-panel__body {
      padding-inline: var(--ec-space-4);
    }

    .ec-filter-grid__field,
    .ec-filter-grid__dates {
      grid-column: 1 / -1;
    }

    .ec-filter-grid__dates {
      grid-template-columns: 1fr;
    }

    .ec-filter-form__actions .ec-button {
      width: 100%;
    }

    .ec-empty-state {
      padding: var(--ec-space-6);
    }

    .ec-pagination {
      align-items: stretch;
      flex-direction: column;
    }

    .ec-pagination .ec-button,
    .ec-pagination__status {
      width: 100%;
      justify-content: center;
      text-align: center;
    }
  }
}