/** Shopify CDN: Minification failed

Line 14:44 Unexpected "*"

**/
/* ============================================================
 * Nobre Cosméticos — Coleção e pesquisa (Fase 7)
 * ------------------------------------------------------------
 * Polish de MARCA sobre o sistema de coleção/pesquisa NATIVO do
 * Horizon (main-collection, search-results, facets, sorting,
 * price-facet, product-grid). Asset global (após base.css e
 * nobre-*.css) → sem avisos ValidScopedCSSClass. CSS-only: NÃO
 * altera markup, contratos, facets.js nem a paginação/ordenação.
 * Sem !important; tokens --nobre-*/--color-*/--style-*.
 *
 * Sumário:
 *   1. Chips de filtros ativos e limpar
 *   2. Botões de filtro/ordenação e contagem
 *   3. Filtro de preço e campos
 *   4. Sidebar (vertical) — desktop
 *   5. Gaveta de filtros (telemóvel)
 *   6. Estado vazio
 *   7. Foco acessível e movimento reduzido
 * ============================================================ */

/* 1. Chips de filtros ativos --------------------------------- */
.facets-horizontal-remove,
.facets-remove {
  border-radius: var(--nobre-radius-pill, 999px);
  transition:
    border-color var(--animation-speed) var(--animation-easing),
    background-color var(--animation-speed) var(--animation-easing);
}

.facets-horizontal-remove:hover,
.facets-remove:hover {
  border-color: rgb(var(--nobre-brand-rgb, 176 52 95) / 0.5);
  background-color: rgb(var(--nobre-brand-rgb, 176 52 95) / 0.06);
}

.facets__clear-all-link,
.facets__clear-all {
  color: var(--nobre-brand-dark, var(--color-primary));
}

.facets__clear-all-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Bolha de contagem de filtros ativos */
.facets__bubble {
  background-color: var(--nobre-brand, var(--color-primary));
  color: #fff;
}

/* 2. Botões de filtro/ordenação ----------------------------- */
.facets-toggle__button {
  border-radius: var(--nobre-radius-pill, 999px);
  transition: border-color var(--animation-speed) var(--animation-easing);
}

.facets-toggle__button:hover {
  border-color: rgb(var(--color-foreground-rgb) / 0.28);
}

.sorting-filter__select {
  border-radius: var(--style-border-radius-inputs, 8px);
}

/* Etiqueta de grupo de facet mais discreta */
.facets__label {
  color: var(--color-foreground);
}

/* 3. Filtro de preço ---------------------------------------- */
.price-facet__input:focus-visible {
  outline: none;
  border-color: var(--nobre-brand, var(--color-primary));
  box-shadow: 0 0 0 3px rgb(var(--nobre-brand-rgb, 176 52 95) / 0.18);
}

.price-facet__label {
  color: var(--color-foreground-muted, rgb(var(--color-foreground-rgb) / 0.6));
}

/* 4. Sidebar (vertical) — desktop --------------------------- */
/* Sticky seguro: respeita o cabeçalho e permite scroll interno.
   Só em ecrãs largos; não impede o acesso ao fim dos filtros. */
@media screen and (min-width: 990px) {
  .facets--vertical .facets__form-wrapper,
  .facets-block-wrapper--vertical {
    position: sticky;
    top: calc(var(--header-height, 60px) + var(--margin-md));
    max-height: calc(100svh - var(--header-height, 60px) - var(--margin-2xl));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-foreground-rgb) / 0.35) transparent;
  }
}

/* 5. Gaveta de filtros (telemóvel) -------------------------- */
/* O foco, scroll-lock e Escape são nativos (dialog-drawer). Só polish. */
.facets-drawer__title {
  font-family: var(--font-heading--family);
  color: var(--color-foreground-heading);
}

.facets-drawer__close:focus-visible {
  outline: var(--nobre-focus-width, 2px) solid var(--nobre-brand, var(--color-primary));
  outline-offset: 2px;
}

/* 6. Estado vazio ------------------------------------------- */
.main-collection-grid__empty {
  text-align: center;
  padding-block: var(--padding-6xl);
}

.main-collection-grid__empty-title {
  color: var(--color-foreground-heading);
}

.main-collection-grid__empty a {
  color: var(--nobre-brand-dark, var(--color-primary));
  text-underline-offset: 0.2em;
}

/* 7. Foco acessível e movimento reduzido -------------------- */
.product-grid-container :is(.facets-remove, .facets-horizontal-remove, .facets-toggle__button, .facets__clear-all-link, .sorting-filter__select):focus-visible {
  outline: var(--nobre-focus-width, 2px) solid var(--nobre-brand, var(--color-primary));
  outline-offset: 2px;
  border-radius: var(--border-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  .facets-horizontal-remove,
  .facets-remove,
  .facets-toggle__button {
    transition: none;
  }
}
