/* Filtro das listagens: opção 05 "controles visuais". Só o painel da esquerda e o "Ordenar por";
   a largura da coluna e a vitrine de perfumes seguem as regras de design-v2.css. Blocos retos. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

[data-catalog] .fc { --fc-linha: rgba(20, 20, 20, .1); display: flex; flex-direction: column; max-height: calc(100vh - 104px); padding: 0; background: #f5f5f5; }
/* Fundo da seção da vitrine na mesma cor do filtro. */
[data-catalog] #catalogo { background: #f5f5f5; }
[data-catalog] .fc-cab { display: flex; align-items: center; gap: 10px; padding: 22px 22px 14px; }
[data-catalog] .fc-cab h2 { flex: 1; display: flex; align-items: center; gap: 8px; height: 24px; margin: 0; font-size: 1.25rem; line-height: 1; }
[data-catalog] .fc-bolha { min-width: 18px; padding: 0 5px; background: var(--ds-bronze); color: var(--ds-white); font-family: var(--font-body); font-size: .6875rem; font-weight: 800; line-height: 18px; text-align: center; letter-spacing: 0; }
[data-catalog] .fc-link { padding: 0; border: 0; background: none; color: var(--ds-burgundy); font-size: .8125rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
[data-catalog] .fc-fechar { display: none; }
[data-catalog] .fc-busca { padding: 0 22px 14px; }
[data-catalog] .fc-busca .field { width: 100%; min-height: 44px; }
[data-catalog] .fc-ativos { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 22px 12px; }
[data-catalog] .fc-ativos:empty { display: none; }
[data-catalog] .fc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border: 0; background: var(--ds-white); color: var(--ds-ink); font-size: .75rem; font-weight: 700; line-height: 1.2; cursor: pointer; text-align: left; }
[data-catalog] .fc-chip::after { content: "×"; color: var(--ds-burgundy); font-size: 1rem; line-height: 1; }
[data-catalog] .fc-chip:hover { background: var(--ds-sand); }

/* Rolagem própria do painel */
[data-catalog] .fc-rolagem { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--fc-linha); scrollbar-width: thin; scrollbar-color: var(--ds-sand) transparent; }
[data-catalog] .fc-rolagem::-webkit-scrollbar, [data-catalog] .fc-lista::-webkit-scrollbar, [data-catalog] .fc-notas::-webkit-scrollbar { width: 6px; }
[data-catalog] .fc-rolagem::-webkit-scrollbar-thumb, [data-catalog] .fc-lista::-webkit-scrollbar-thumb, [data-catalog] .fc-notas::-webkit-scrollbar-thumb { background: var(--ds-sand); }

/* Blocos recolhíveis */
[data-catalog] .fc-bloco { padding: 0 22px; border-bottom: 1px solid var(--fc-linha); }
[data-catalog] .fc-tit { margin: 0; }
[data-catalog] .fc-tit button { width: 100%; display: flex; align-items: center; gap: 8px; padding: 16px 0; border: 0; background: none; color: var(--ds-ink); font-family: var(--font-display); font-size: .8125rem; font-weight: 800; letter-spacing: .06em; text-align: left; text-transform: uppercase; cursor: pointer; }
[data-catalog] .fc-tit button > span:first-child { flex: 1; }
[data-catalog] .fc-tit button::after { content: "−"; font-size: 1.15rem; font-weight: 500; line-height: 1; }
[data-catalog] .fc-bloco.is-fechado .fc-tit button::after { content: "+"; }
[data-catalog] .fc-tit button:hover { color: var(--ds-copper); }
[data-catalog] .fc-corpo { padding-bottom: 16px; }
[data-catalog] .fc-bloco.is-fechado .fc-corpo { display: none; }
[data-catalog] .fc-corpo > .fc-link { margin-top: 10px; }
/* "Limpar" do bloco reserva o espaço mesmo escondido, para nada pular ao marcar uma opção. */
[data-catalog] .fc-corpo > .fc-link[hidden] { display: inline !important; visibility: hidden; }
[data-catalog] .fc-editorial { margin-left: 6px; padding: 1px 4px; background: var(--ds-white); color: var(--ink-soft); font-family: var(--font-body); font-size: .5625rem; font-weight: 700; letter-spacing: .04em; vertical-align: middle; }
[data-catalog] .fc-grupo { min-width: 0; margin: 0; padding: 0; border: 0; }
[data-catalog] .fc-grupo + .fc-grupo, [data-catalog] .fc-grupo + .fc-switch { margin-top: 8px; }
[data-catalog] .fc-sub { margin: 14px 0 8px; color: var(--ink-soft); font-size: .6875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
[data-catalog] .fc-corpo > .fc-sub:first-child { margin-top: 0; }

/* Linhas de checkbox */
[data-catalog] .fc .check-line { display: flex; align-items: center; gap: 10px; min-height: 32px; font-size: .875rem; }
[data-catalog] .fc .check-line > span:not(.filter-count) { flex: 1; }
[data-catalog] .fc .filter-count { margin-left: auto; color: var(--ds-gray-500); font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
[data-catalog] .fc .check-line.is-zero { opacity: .4; cursor: default; }

/* Botões que são checkbox (pílulas, segmentados, escala, cores) */
[data-catalog] .fc label:has(> .sr-only) { position: relative; cursor: pointer; }
[data-catalog] .fc label.is-zero { opacity: .35; cursor: default; }
[data-catalog] .fc label:has(> .sr-only:focus-visible) { outline: 2px solid var(--ds-copper); outline-offset: 1px; }
[data-catalog] .fc-btn-in { display: flex; align-items: center; gap: 6px; width: 100%; }

/* Preço: histograma + slider duplo + campos */
[data-catalog] .fc-faixa { margin-bottom: 12px; }
[data-catalog] .fc-histo { display: flex; align-items: flex-end; gap: 2px; height: 44px; }
[data-catalog] .fc-histo span { flex: 1; background: rgba(20, 20, 20, .12); transition: background .15s; }
[data-catalog] .fc-histo span.is-dentro { background: var(--ds-bronze); }
[data-catalog] .fc-duplo { position: relative; height: 24px; }
[data-catalog] .fc-trilho, [data-catalog] .fc-trilho-on { position: absolute; top: 10px; left: 0; right: 0; height: 4px; background: rgba(20, 20, 20, .12); }
[data-catalog] .fc-trilho-on { background: var(--ds-bronze); }
[data-catalog] .fc-duplo input { position: absolute; inset: 0; width: 100%; height: 24px; margin: 0; background: none; pointer-events: none; appearance: none; -webkit-appearance: none; }
[data-catalog] .fc-duplo input::-webkit-slider-thumb { width: 16px; height: 16px; border: 2px solid var(--ds-ink); background: var(--ds-white); pointer-events: auto; cursor: grab; appearance: none; -webkit-appearance: none; }
[data-catalog] .fc-duplo input::-moz-range-thumb { width: 14px; height: 14px; border: 2px solid var(--ds-ink); border-radius: 0; background: var(--ds-white); pointer-events: auto; cursor: grab; }
[data-catalog] .fc-precos { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; margin-top: 4px; }
[data-catalog] .fc-precos label { display: flex; align-items: center; min-width: 0; padding-left: 8px; border: 1px solid rgba(20, 20, 20, .2); background: var(--ds-white); color: var(--ds-gray-500); font-size: .75rem; }
[data-catalog] .fc-precos input { width: 100%; min-width: 0; padding: 8px 4px; border: 0; background: none; color: var(--ds-ink); font-size: .8125rem; font-variant-numeric: tabular-nums; outline: none; -moz-appearance: textfield; }
[data-catalog] .fc-precos input::-webkit-inner-spin-button { -webkit-appearance: none; }
[data-catalog] .fc-precos label:focus-within { border-color: var(--ds-ink); }

[data-catalog] .fc-pills { display: flex; flex-wrap: wrap; gap: 4px; }
[data-catalog] .fc-pill .fc-btn-in { padding: 6px 8px; border: 1px solid rgba(20, 20, 20, .16); background: var(--ds-white); font-size: .75rem; font-weight: 700; }
[data-catalog] .fc-pill .filter-count { display: none; }
[data-catalog] .fc-pill:has(:checked) .fc-btn-in { border-color: var(--ds-ink); background: var(--ds-ink); color: var(--ds-white); }

/* Interruptor de promoção */
[data-catalog] .fc-switch { display: block; margin-top: 10px; }
[data-catalog] .fc-switch .fc-btn-in { padding: 9px 10px; border: 1px solid rgba(20, 20, 20, .16); background: var(--ds-white); font-size: .8125rem; font-weight: 700; }
[data-catalog] .fc-switch .fc-btn-in > span:first-child { flex: 1; }
[data-catalog] .fc-switch .filter-count { margin: 0; }
[data-catalog] .fc-switch i { position: relative; flex: none; width: 34px; height: 18px; background: rgba(20, 20, 20, .16); transition: background .15s; }
[data-catalog] .fc-switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: var(--ds-white); transition: transform .15s; }
[data-catalog] .fc-switch:has(:checked) i { background: var(--ds-bronze); }
[data-catalog] .fc-switch:has(:checked) i::after { transform: translateX(16px); }

/* Segmentados (origem, estação, período) */
[data-catalog] .fc-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1px; border: 1px solid var(--ds-ink); background: var(--ds-ink); }
[data-catalog] .fc-seg-2 { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
@media (min-width: 1241px) { [data-catalog] .fc-seg-2 { grid-auto-flow: column; grid-template-columns: none; } }
[data-catalog] .fc-seg-op .fc-btn-in { flex-direction: column; justify-content: center; gap: 2px; height: 100%; padding: 8px 2px; background: var(--ds-white); font-size: .6875rem; font-weight: 700; text-align: center; }
[data-catalog] .fc-seg-op .filter-count { margin: 0; font-size: .625rem; }
[data-catalog] .fc-seg-op svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
[data-catalog] .fc-seg-op:has(:checked) .fc-btn-in { background: var(--ds-ink); color: var(--ds-white); }
[data-catalog] .fc-seg-op:has(:checked) .filter-count { color: rgba(255, 255, 255, .7); }

/* Marcas: busca, escolhidas e lista rolável */
[data-catalog] .fc-busca-interna { width: 100%; margin: 10px 0 6px; padding: 8px 10px; border: 1px solid rgba(20, 20, 20, .2); background: var(--ds-white); font-size: .8125rem; outline: none; }
[data-catalog] .fc-busca-interna:focus { border-color: var(--ds-ink); }
[data-catalog] .fc-escolhidas { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
[data-catalog] .fc-escolhidas:empty { display: none; }
[data-catalog] .fc-lista { position: relative; max-height: 232px; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: var(--ds-sand) transparent; }

/* Escala de intensidade (fixação e projeção) */
[data-catalog] .fc-escala { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); align-items: end; gap: 3px; }
[data-catalog] .fc-escala-op .fc-btn-in { flex-direction: column; align-items: stretch; gap: 4px; font-size: .625rem; font-weight: 700; line-height: 1.15; }
[data-catalog] .fc-escala-op i { display: block; height: 8px; background: rgba(20, 20, 20, .14); }
[data-catalog] .fc-escala-op.nivel-moderada i { height: 13px; }
[data-catalog] .fc-escala-op.nivel-boa i { height: 18px; }
[data-catalog] .fc-escala-op.nivel-alta i { height: 24px; }
[data-catalog] .fc-escala-op .filter-count { margin: 0; font-size: .625rem; }
[data-catalog] .fc-escala-op:has(:checked) i { background: var(--ds-copper); }
[data-catalog] .fc-escala-op:has(:checked) .fc-btn-in > span { color: var(--ds-copper); }

/* Família olfativa: barras na cor da família */
[data-catalog] .fc-familias { display: grid; gap: 3px; }
[data-catalog] .fc-familia .fc-btn-in { padding: 8px 9px; border-left: 5px solid var(--ct); background: var(--c); color: var(--ct); font-size: .8125rem; font-weight: 700; }
[data-catalog] .fc-familia .filter-count { color: inherit; opacity: .75; }
[data-catalog] .fc-familia:has(:checked) .fc-btn-in { box-shadow: inset 0 0 0 2px var(--ds-ink); }

/* Notas: chips na cor do ingrediente */
[data-catalog] .fc-notas { display: flex; flex-wrap: wrap; gap: 4px; max-height: 196px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--ds-sand) transparent; }
[data-catalog] .fc-nota .fc-btn-in { gap: 4px; padding: 5px 7px; border: 1px solid transparent; background: var(--c); color: var(--ct); font-size: .75rem; font-weight: 700; }
[data-catalog] .fc-nota img { width: 15px; height: 15px; }
[data-catalog] .fc-nota .filter-count { display: none; }
[data-catalog] .fc-nota:has(:checked) .fc-btn-in { border-color: var(--ds-ink); box-shadow: inset 0 0 0 1px var(--ds-ink); }

/* Rodapé do painel (só no celular) */
[data-catalog] .fc-rodape { display: none; }
[data-catalog] .fc-btn { flex: 1; min-height: 48px; padding: 0 16px; border: 1px solid var(--ds-ink); background: var(--ds-ink); color: var(--ds-white); font-family: var(--font-display); font-size: .8125rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
[data-catalog] .fc-btn-claro { flex: 0 0 auto; background: var(--ds-white); color: var(--ds-ink); }

/* Ordenar por */
[data-catalog] .catalog-topbar .fc-ordem { gap: 10px; }
[data-catalog] .fc-ordem > span { color: var(--ds-ink); font-family: var(--font-display); font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
[data-catalog] .fc-ordem .select { min-width: 190px; font-weight: 600; }
[data-catalog] .fc-ordem .select:hover { border-color: var(--ds-copper); }

/* A coluna da vitrine nunca fica mais baixa que o painel: filtrar não encolhe a página nem a faz pular. */
[data-catalog] .catalog-layout > div:last-child { min-height: calc(100vh - 104px); }

/* Painel mais largo e vitrine com no máximo 5 perfumes por linha. */
[data-catalog] .catalog-layout { grid-template-columns: 300px minmax(0, 1fr); }
@media (min-width: 1600px) {
  [data-catalog] .catalog-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 1240px) {
  [data-catalog] .catalog-layout { grid-template-columns: 270px minmax(0, 1fr); }
}

@media (max-width: 980px) {
  [data-catalog] .catalog-layout { grid-template-columns: 1fr; }
  /* No celular o painel vira gaveta de tela cheia, aberta pelo botão "Mostrar filtros". */
  [data-catalog] .filter-panel.fc { display: flex; position: fixed; z-index: 120; inset: 0; max-height: none; margin: 0; padding: 0; transform: translateX(-100%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; }
  [data-catalog] .filter-panel.fc.is-open { transform: none; visibility: visible; transition: transform .25s ease; }
  [data-catalog] .fc-fechar { display: inline; }
  [data-catalog] .fc-rodape { display: flex; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--fc-linha); background: var(--ds-white); }
  [data-catalog] .fc-seg-2 { grid-auto-flow: column; grid-template-columns: none; }
  [data-catalog] .fc-ordem .select { min-width: 0; }
  body.fc-travado { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  [data-catalog] .filter-panel.fc, [data-catalog] .fc-switch i, [data-catalog] .fc-switch i::after { transition: none; }
}

/* Listagens no celular: duas colunas também abaixo de 420 px. */
@media (max-width: 720px) {
  [data-catalog] .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  [data-catalog] .catalog-grid .offer-card { min-width: 0; padding: 7px; }
  [data-catalog] .catalog-grid .offer-card h3 { font-size: 12px; line-height: 1.25; min-height: 3.75em; overflow-wrap: anywhere; }
  [data-catalog] .catalog-grid .offer-meta { font-size: 9px; padding-top: 9px; }
  [data-catalog] .catalog-grid .badge-row { top: 5px; left: 5px; }
  [data-catalog] .catalog-grid .badge { font-size: 9px; padding: 4px 6px; }
  [data-catalog] .catalog-grid .market-option { grid-template-columns: 22px minmax(0, 1fr); gap: 5px; padding: 7px 3px; min-width: 0; }
  [data-catalog] .catalog-grid .market-option:first-child { padding-top: 22px; border-width: 1px; }
  [data-catalog] .catalog-grid .market-option .market-logo { width: 22px; height: 22px; padding: 2px; }
  [data-catalog] .catalog-grid .market-option .market-price strong { font-size: 11px; white-space: normal; }
  [data-catalog] .catalog-grid .market-option:first-child .market-price strong { font-size: 15px; }
  [data-catalog] .catalog-grid .market-price .offer-volume { font-size: 10px; }
  [data-catalog] .catalog-grid .market-price del,
  [data-catalog] .catalog-grid .market-price small { font-size: 9px; }
  [data-catalog] .catalog-grid .market-option:first-child::before { font-size: 8px; letter-spacing: 0; }
  [data-catalog] .catalog-grid .market-go { display: none; }
  [data-catalog] .catalog-grid .international-badge { position: static; grid-column: 1 / -1; font-size: 8px; white-space: normal; }
  [data-catalog] .catalog-grid .offer-footer .offer-link { font-size: 10px; padding: 12px 3px; }
}